:root { --vp-width-breakpoint-xs: 320px; --vp-width-breakpoint-sm: 576px; --vp-width-breakpoint-md: 768px; --vp-width-breakpoint-lg: 992px; --vp-width-breakpoint-xl: 1280px; --vp-width-breakpoint-xxl: 1920px; --font-face: Manrope; --display-1: 4.75rem; --display-2: 4.25rem; --display-3: 3.75rem; --display-4: 3.375rem; --display-5: 3rem; --display-6: 2.625rem; --display-1-mobile: 2.25rem; --display-2-mobile: 2rem; --display-3-mobile: 1.75rem; --display-4-mobile: 1.5rem; --display-5-mobile: 1.25rem; --display-6-mobile: 1.125rem; --heading-1: 2.625rem; --heading-2: 2.25rem; --heading-3: 1.75rem; --heading-4: 1.5rem; --heading-5: 1.25rem; --heading-6: 1rem; --heading-1-mobile: 2rem; --heading-2-mobile: 1.75rem; --heading-3-mobile: 1.5rem; --heading-4-mobile: 1.25rem; --heading-5-mobile: 1.125rem; --heading-6-mobile: 1rem; --font-size-xl: 1.125rem; --font-size-lg: 1rem; --font-size-base: 0.875rem; --font-size-sm: 0.75rem; --font-size-xs: 0.625rem; --font-size-xl-mobile: 1.125rem; --font-size-lg-mobile: 1rem; --font-size-base-mobile: 0.875rem; --font-size-sm-mobile: 0.75rem; --font-size-xs-mobile: 0.625rem; --font-weight-normal: 400; --font-weight-bold: 600; --font-weight-bolder: 800; --body-bg: #f3f3f5; --body-fg: #04123b; --body-line-height: 1.125; --body-padding: 1.75rem; --body-padding-mobile: 1.25rem; --anchor-color: #04123b; --button-border-width: 1px; --button-font-weight: 800; --button-line-height: 1.14375; --button-text: 1rem; --button-text-xs: 0.75rem; --button-text-sm: 0.875rem; --button-text-lg: 1.125rem; --button-padding-y: 0.5rem; --button-padding-x: 1rem; --button-padding-y-xs: 0.25rem; --button-padding-x-xs: 0.75rem; --button-padding-y-sm: 0.375rem; --button-padding-x-sm: 0.875rem; --button-padding-y-lg: 0.7rem; --button-padding-x-lg: 1.125rem; --input-border-width: 1px; --input-border-color: #c3c6cf; --input-border-color-hover: #b4b9c4; --input-border-width-focus: 2px; --input-border-color-focus: var(--primary); --input-disabled-bg: transparent; --input-disabled-fg: #c3c6cf; --input-placeholder: #69707e; --input-placeholder-hover: #a3a9b6; --input-long-width: 260px; --input-height: 2.5rem; --input-height-xs: 1.625rem; --input-height-sm: 2rem; --input-height-lg: 3rem; --input-checkbox-color: #868ea0; --input-checkbox-checked-color: var(--primary-hover); --input-checkbox-checked-hover-color: var(--primary); --input-bg: transparent; --input-fg: var(--body-fg); --input-select-arrow: url(/icons/arrow-simple-down.svg); --input-select-arrow-expanded: url(/icons/arrow-simple-up.svg); --input-select-arrow-light: url(/icons/arrow-simple-down-white.svg); --input-select-arrow-light-expanded: url(/icons/arrow-simple-up-white.svg); --input-select-arrow-grey: url(/icons/arrow-simple-down-grey.svg); --table-padding-y: 0.625rem; --table-padding-x: 0.75rem; --table-row-min-height: 3.25rem; --table-bg: var(--panel-bg); --table-alternation-bg: #f9f9fa; --table-alternation-success-bg: var(--success-light); --table-alternation-warning-bg: var(--warning-light); --table-muted-color: #69707e; --table-row-hover-bg: var(--secondary-hover); --table-row-hover-fg: var(--body-fg); --table-row-selected-bg: #dadefc; --table-row-selected-fg: var(--primary-hover); --table-highlight-border: #aab5f8; --table-highlight-bg: color-mix(in srgb, var(--primary), transparent 84%); --table-border-radius: 0.5rem; --dropdown-shadow: var(--drop-shadow); --dropdown-radius: 0.5rem; --dropdown-bg: #ffffff; --dropdown-fg: #04123b; --dropdown-bg-hover: #dadefc; --dropdown-fg-hover: var(--primary); --dropdown-bg-active: #f2f3fe; --dropdown-fg-active: #143284; --dropdown-font-size: 0.875rem; --dropdown-font-weight: 600; --button-switcher-fg: #69707e; --button-switcher-bg: #f3f3f5; --button-switcher-hover-fg: var(--primary); --button-switcher-focus-fg: var(--primary-hover); --button-switcher-active-fg: #ffffff; --button-switcher-active-bg: #04123b; --button-switcher-disabled-fg: #c3c6cf; --button-switcher-disabled-bg: #f3f3f5; --button-switcher-disabled-active-fg: #ffffff; --button-switcher-disabled-active-bg: #c3c6cf; --button-switcher-light-fg: #363941; --button-switcher-light-bg: #ffffff; --tab-switcher-border-width: var(--border-default-width); --tab-switcher-border-color: var(--border-default-color); --tab-switcher-item-fg: #363941; --tab-switcher-item-hover: var(--primary); --tab-switcher-item-padding-y: 1rem; --tab-switcher-item-margin-x: 0.875rem; --tab-switcher-item-selected-fg: var(--primary); --tab-switcher-item-selected-border-width: 2px; --tab-switcher-item-selected-border-color: var(--primary); --panel-bg: #ffffff; --panel-fg: #04123b; --panel-padding: 1.25rem; --panel-shadow: var(--drop-shadow-sm); --panel-shadow-hover: var(--drop-shadow-lg); --panel-border-radius: 0.5rem; --nav-header-fg: #ffffff; --nav-header-bg: var(--primary-hover); --reg-ok-fg: #008145; --reg-fail-fg: #d23031; --module-chooser-bg: var(--panel-bg); --module-chooser-main: var(--primary); --module-chooser-contrast: var(--panel-bg); --module-chooser-hover: #f2f3fe; --module-chooser-radius: 0.3125rem; --module-chooser-offset: 0.5rem; --module-chooser-min-height: 7rem; --module-chooser-min-height-mobile: 6.25rem; --graph-success-color: #00a35a; --graph-error-color: #d23031; --graph-border-color: var(--panel-bg); --file-upload-box-border: 2px dashed #dedfe4; --icon-static-color: #868ea0; --icon-hover-color: var(--primary); --icon-active-color: var(--primary-hover); --icon-disabled-color: var(--primary-disabled); --icon-selected-static-color: var(--primary); --icon-selected-hover-color: var(--primary-hover); --icon-selected-active-color: var(--primary-active); --primary: #3564ef; --primary-hover: #143284; --primary-active: #04123b; --primary-disabled: #c3c6cf; --primary-border: #3564ef; --primary-border-hover: #143284; --primary-border-active: #04123b; --primary-border-disabled: #c3c6cf; --primary-text: #ffffff; --primary-hover-text: #ffffff; --primary-active-text: #ffffff; --primary-disabled-text: #ffffff; --secondary: #ffffff; --secondary-hover: #f2f3fe; --secondary-active: #dadefc; --secondary-disabled: #c3c6cf; --secondary-border: #dedfe4; --secondary-border-hover: #f2f3fe; --secondary-border-active: #dadefc; --secondary-border-disabled: #c3c6cf; --secondary-text: #0B215C; --secondary-hover-text: #3564ef; --secondary-active-text: #0B215C; --secondary-disabled-text: #ffffff; --success: #00a35a; --success-hover: #008145; --success-active: #154127; --success-disabled: #c3c6cf; --success-border: #00a35a; --success-border-hover: #008145; --success-border-active: #154127; --success-border-disabled: #c3c6cf; --success-text: #ffffff; --success-hover-text: #ffffff; --success-active-text: #ffffff; --success-disabled-text: #ffffff; --success-secondary: #ffffff; --success-secondary-hover: #d7fde2; --success-secondary-active: #93f4b5; --success-secondary-disabled: #dedfe4; --success-secondary-border: #dedfe4; --success-secondary-border-hover: #d7fde2; --success-secondary-border-active: #93f4b5; --success-secondary-border-disabled: #dedfe4; --success-secondary-text: #00a35a; --success-secondary-hover-text: #00a35a; --success-secondary-active-text: #008145; --success-secondary-disabled-text: #ffffff; --error: #d23031; --error-hover: #711516; --error-active: #310505; --error-disabled: #c3c6cf; --error-border: #d23031; --error-border-hover: #711516; --error-border-active: #310505; --error-border-disabled: #c3c6cf; --error-text: #ffffff; --error-hover-text: #ffffff; --error-active-text: #ffffff; --error-disabled-text: #ffffff; --error-secondary: #ffffff; --error-secondary-hover: #fdf1f1; --error-secondary-active: #f9d8d8; --error-secondary-disabled: #dedfe4; --error-secondary-border: #dedfe4; --error-secondary-border-hover: #fdf1f1; --error-secondary-border-active: #f9d8d8; --error-secondary-border-disabled: #dedfe4; --error-secondary-text: #d23031; --error-secondary-hover-text: #d23031; --error-secondary-active-text: #711516; --error-secondary-disabled-text: #ffffff; --warning-secondary-hover: #ffd7cc; --warning-secondary-hover-text: #b45400; --warning-secondary-border-hover: #ffd7cc; --info: #3564ef; --info-text: #ffffff; --info-light: #f8f9fe; --success-light: #ebfef1; --warning: #e36b00; --warning-hover: #b45400; --warning-text: #ffffff; --warning-light: #fff1ed; --error-light: #fdf1f1; --border-radius-lg: 0.75rem; --border-radius: 0.5rem; --border-radius-sm: 0.3125rem; --border-radius-xs: 0.25rem; --border-default-color: #dedfe4; --border-default-width: 1px; --drop-shadow-hardness: 0.15; --drop-shadow-lg: 0px 20px 40px rgba(0, 0, 0, var(--drop-shadow-hardness)); --drop-shadow: 0px 7px 20px rgba(0, 0, 0, var(--drop-shadow-hardness)); --drop-shadow-sm: 0px 2px 4px rgba(0, 0, 0, var(--drop-shadow-hardness)); --transition-time-long: 0.5s; --transition-time: 0.3s; --transition-time-short: 0.2s; --icon-filter: none; --illustration-filter: none; --theme-switch-transition: var(--transition-time-long); --dialer-width-default: 360px; --black-full: #000000; --pad: 12px; --pad-2: calc(var(--pad) * 2); --pad-4: calc(var(--pad) * 4); --pad-1-2: calc(var(--pad) / 2); --pad-1-4: calc(var(--pad) / 4); --overlay-mask-color: #020e25cc; --color-select: #cfefff; --color-light-bg: #cfefff; --color-light-bg-hover: #9cdeff; } /* +breakpoint(' .header, .queue-control-panel > .queue-list > .queue, .queue-control-panel > .controls > .pause, .queue-control-panel > .controls::before { transition: background var(--theme-switch-transition), color var(--theme-switch-transition), box-shadow var(--theme-switch-transition); } .page-centered-container { width: 100%; padding-left: var(--body-padding); padding-right: var(--body-padding); transition: padding var(--transition-time-short); margin-left: auto; margin-right: auto; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: var(--font-weight-bolder); transition: all var(--transition-time); } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child { margin-top: 0; } h1, .h1 { font-size: var(--heading-1); } h2, .h2 { font-size: var(--heading-2); } h3, .h3 { font-size: var(--heading-3); } h4, .h4 { font-size: var(--heading-4); } h5, .h5 { font-size: var(--heading-5); } h6, .h6 { font-size: var(--heading-6); } html, body, input, textarea, button, select, .select-input { font-family: var(--font-face), sans-serif; -webkit-font-smoothing: antialiased; } .m-0 { margin: 0 !important; } .ml-auto { margin-left: auto !important; } .mr-3 { margin-right: var(--pad) !important; } .mr-auto { margin-right: auto !important; } input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .select-input { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: var(--input-bg); color: var(--input-fg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--border-radius); padding: 7px 16px; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: 1.5; height: var(--input-height); transition: border-color var(--transition-time-short), color var(--transition-time-short); /* Webkit autofill styling "hack" via https://stackoverflow.com/a/68240841 */ } input:not([type=checkbox], [type=radio], [type=range]):-webkit-autofill, input:not([type=checkbox], [type=radio], [type=range]):-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:focus, .select-input:-webkit-autofill, .select-input:-webkit-autofill:focus { transition: background-color 600000s 0s, color 600000s 0s; } input:not([type=checkbox], [type=radio], [type=range])::placeholder, textarea::placeholder, select::placeholder, .select-input::placeholder { color: var(--input-placeholder); font-weight: var(--font-weight-normal); width: min-content; max-width: 100%; } input:not([type=checkbox], [type=radio], [type=range]):hover, textarea:hover, select:hover, .select-input:hover { border-color: var(--input-border-color-hover); } input:not([type=checkbox], [type=radio], [type=range]):focus, textarea:focus, select:focus, .select-input:focus { border: var(--input-border-width-focus) solid var(--input-border-color-focus); padding: 6px 15px; outline: 0; } input:not([type=checkbox], [type=radio], [type=range]):focus::placeholder, textarea:focus::placeholder, select:focus::placeholder, .select-input:focus::placeholder { color: var(--input-placeholder-hover); } input:not([type=checkbox], [type=radio], [type=range]):hover::placeholder, textarea:hover::placeholder, select:hover::placeholder, .select-input:hover::placeholder { color: var(--input-placeholder-hover); } input:not([type=checkbox], [type=radio], [type=range]):invalid, textarea:invalid, select:invalid, .select-input:invalid { outline: 0; box-shadow: none; } input:not([type=checkbox], [type=radio], [type=range]).small, textarea.small, select.small, .select-input.small { font-size: var(--font-size-base); padding: 4px 8px; height: var(--input-height-sm); } input:not([type=checkbox], [type=radio], [type=range]).small:focus, textarea.small:focus, select.small:focus, .select-input.small:focus { padding: 3px 7px; } input:not([type=checkbox], [type=radio], [type=range]).large, textarea.large, select.large, .select-input.large { padding: 11px 16px; height: var(--input-height-lg); } input:not([type=checkbox], [type=radio], [type=range]).large:focus, textarea.large:focus, select.large:focus, .select-input.large:focus { padding: 10px 15px; } input:not([type=checkbox], [type=radio], [type=range])[type="search"], textarea[type="search"], select[type="search"], .select-input[type="search"] { background-image: url(/icons/search.svg); background-repeat: no-repeat; background-size: 1rem; background-position: left 11px center; padding-left: 33px; } input:not([type=checkbox], [type=radio], [type=range])[type="search"]:focus, textarea[type="search"]:focus, select[type="search"]:focus, .select-input[type="search"]:focus { background-position: left 10px center; padding-left: 32px; } input:not([type=checkbox], [type=radio], [type=range])[type="search"].small, textarea[type="search"].small, select[type="search"].small, .select-input[type="search"].small { background-position: left 9px center; padding-left: 30px; } input:not([type=checkbox], [type=radio], [type=range])[type="search"].small:focus, textarea[type="search"].small:focus, select[type="search"].small:focus, .select-input[type="search"].small:focus { background-position: left 8px center; padding-left: 29px; } input:not([type=checkbox], [type=radio], [type=range])[type="search"]::-webkit-search-decoration, textarea[type="search"]::-webkit-search-decoration, select[type="search"]::-webkit-search-decoration, .select-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input:not([type=checkbox], [type=radio], [type=range])[type="search"]::-webkit-search-cancel-button, textarea[type="search"]::-webkit-search-cancel-button, select[type="search"]::-webkit-search-cancel-button, .select-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; margin-right: -.25rem; width: 1.5rem; height: 1.5rem; background-size: 1rem; background-image: url(/icons/close.svg); background-repeat: no-repeat; background-position: center; cursor: pointer; } input:not([type=checkbox], [type=radio], [type=range]):disabled, input:not([type=checkbox], [type=radio], [type=range]).disabled, input:not([type=checkbox], [type=radio], [type=range])[readonly], textarea:disabled, textarea.disabled, textarea[readonly], select:disabled, select.disabled, select[readonly], .select-input:disabled, .select-input.disabled, .select-input[readonly] { color: var(--input-disabled-fg); background-color: var(--input-disabled-bg); cursor: not-allowed !important; } input:not([type=checkbox], [type=radio], [type=range]):disabled:hover, input:not([type=checkbox], [type=radio], [type=range]):disabled:focus, input:not([type=checkbox], [type=radio], [type=range]).disabled:hover, input:not([type=checkbox], [type=radio], [type=range]).disabled:focus, input:not([type=checkbox], [type=radio], [type=range])[readonly]:hover, input:not([type=checkbox], [type=radio], [type=range])[readonly]:focus, textarea:disabled:hover, textarea:disabled:focus, textarea.disabled:hover, textarea.disabled:focus, textarea[readonly]:hover, textarea[readonly]:focus, select:disabled:hover, select:disabled:focus, select.disabled:hover, select.disabled:focus, select[readonly]:hover, select[readonly]:focus, .select-input:disabled:hover, .select-input:disabled:focus, .select-input.disabled:hover, .select-input.disabled:focus, .select-input[readonly]:hover, .select-input[readonly]:focus { border-color: var(--input-border-color); } input[type=radio] { -webkit-appearance: none; appearance: none; border: 1px solid #8E8CA0; border-radius: 20px; width: 20px; height: 20px; padding: 0; margin: 0; display: inline-block; transition: all var(--transition-time-short); } input[type=radio]:active { position: relative; } input[type=radio]:active::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-checked-hover-color); -webkit-mask: url("/icons/dot.svg") center center / 12px 12px no-repeat; mask: url("/icons/dot.svg") center center / 12px 12px no-repeat; } input[type=radio]:checked { background: white; border-color: var(--input-checkbox-checked-color); position: relative; } input[type=radio]:checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-checked-color); -webkit-mask: url("/icons/dot.svg") center center / 12px 12px no-repeat; mask: url("/icons/dot.svg") center center / 12px 12px no-repeat; } input[type=radio]:checked:active { background: var(--input-checkbox-checked-hover-color); border-color: var(--input-checkbox-checked-hover-color); position: relative; } input[type=radio]:checked:active::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-checked-hover-color); -webkit-mask: url("/icons/dot.svg") center center / 12px 12px no-repeat; mask: url("/icons/dot.svg") center center / 12px 12px no-repeat; } input[type=radio]:focus { outline: 1px solid var(--input-border-color-focus); outline-offset: 2px; } input[type=checkbox] { -webkit-appearance: none; appearance: none; border: 1px solid var(--input-checkbox-color); border-radius: var(--border-radius-xs); padding: 0; margin: 0; display: inline-block; transition: all var(--transition-time-short); cursor: pointer; width: 20px; height: 20px; } input[type=checkbox]:hover:not(:disabled) { position: relative; } input[type=checkbox]:hover:not(:disabled)::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-color); -webkit-mask: url("/icons/check.svg") center center / 12px 12px no-repeat; mask: url("/icons/check.svg") center center / 12px 12px no-repeat; } input[type=checkbox]:disabled { border-color: var(--input-disabled-fg); cursor: not-allowed; } input[type=checkbox]:checked { background: var(--input-checkbox-checked-color); border-color: var(--input-checkbox-checked-color); position: relative; } input[type=checkbox]:checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-bg); -webkit-mask: url("/icons/check.svg") center center / 12px 12px no-repeat; mask: url("/icons/check.svg") center center / 12px 12px no-repeat; } input[type=checkbox]:checked.half-checked { position: relative; } input[type=checkbox]:checked.half-checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-bg); -webkit-mask: url("/icons/minus.svg") center center / 12px 12px no-repeat; mask: url("/icons/minus.svg") center center / 12px 12px no-repeat; } input[type=checkbox]:checked:hover { background: var(--input-checkbox-checked-hover-color); border-color: var(--input-checkbox-checked-hover-color); } input[type=checkbox]:checked:hover::before { background: rgba(243, 243, 245, 0.5); } input[type=checkbox]:checked:disabled { background: var(--input-disabled-fg); border-color: var(--input-disabled-fg); } input[type=checkbox]:checked:disabled::before { background: var(--body-bg); } input[type=checkbox]:indeterminate { background: transparent; border: 1px solid var(--input-checkbox-color); position: relative; } input[type=checkbox]:indeterminate::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-color); -webkit-mask: url("/icons/minus.svg") center center / 12px 12px no-repeat; mask: url("/icons/minus.svg") center center / 12px 12px no-repeat; } input[type=checkbox].small { width: 16px; height: 16px; } input[type=checkbox].small:hover:not(:disabled) { position: relative; } input[type=checkbox].small:hover:not(:disabled)::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-color); -webkit-mask: url("/icons/check.svg") center center / 10.08px 10.08px no-repeat; mask: url("/icons/check.svg") center center / 10.08px 10.08px no-repeat; } input[type=checkbox].small:disabled { border-color: var(--input-disabled-fg); cursor: not-allowed; } input[type=checkbox].small:checked { background: var(--input-checkbox-checked-color); border-color: var(--input-checkbox-checked-color); position: relative; } input[type=checkbox].small:checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-bg); -webkit-mask: url("/icons/check.svg") center center / 10.08px 10.08px no-repeat; mask: url("/icons/check.svg") center center / 10.08px 10.08px no-repeat; } input[type=checkbox].small:checked.half-checked { position: relative; } input[type=checkbox].small:checked.half-checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-bg); -webkit-mask: url("/icons/minus.svg") center center / 10.08px 10.08px no-repeat; mask: url("/icons/minus.svg") center center / 10.08px 10.08px no-repeat; } input[type=checkbox].small:checked:hover { background: var(--input-checkbox-checked-hover-color); border-color: var(--input-checkbox-checked-hover-color); } input[type=checkbox].small:checked:hover::before { background: rgba(243, 243, 245, 0.5); } input[type=checkbox].small:checked:disabled { background: var(--input-disabled-fg); border-color: var(--input-disabled-fg); } input[type=checkbox].small:checked:disabled::before { background: var(--body-bg); } input[type=checkbox].small:indeterminate { background: transparent; border: 1px solid var(--input-checkbox-color); position: relative; } input[type=checkbox].small:indeterminate::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-color); -webkit-mask: url("/icons/minus.svg") center center / 10.08px 10.08px no-repeat; mask: url("/icons/minus.svg") center center / 10.08px 10.08px no-repeat; } input[type=checkbox].large { width: 24px; height: 24px; } input[type=checkbox].large:hover:not(:disabled) { position: relative; } input[type=checkbox].large:hover:not(:disabled)::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-color); -webkit-mask: url("/icons/check.svg") center center / 14.4px 14.4px no-repeat; mask: url("/icons/check.svg") center center / 14.4px 14.4px no-repeat; } input[type=checkbox].large:disabled { border-color: var(--input-disabled-fg); cursor: not-allowed; } input[type=checkbox].large:checked { background: var(--input-checkbox-checked-color); border-color: var(--input-checkbox-checked-color); position: relative; } input[type=checkbox].large:checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-bg); -webkit-mask: url("/icons/check.svg") center center / 14.4px 14.4px no-repeat; mask: url("/icons/check.svg") center center / 14.4px 14.4px no-repeat; } input[type=checkbox].large:checked.half-checked { position: relative; } input[type=checkbox].large:checked.half-checked::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-bg); -webkit-mask: url("/icons/minus.svg") center center / 14.4px 14.4px no-repeat; mask: url("/icons/minus.svg") center center / 14.4px 14.4px no-repeat; } input[type=checkbox].large:checked:hover { background: var(--input-checkbox-checked-hover-color); border-color: var(--input-checkbox-checked-hover-color); } input[type=checkbox].large:checked:hover::before { background: rgba(243, 243, 245, 0.5); } input[type=checkbox].large:checked:disabled { background: var(--input-disabled-fg); border-color: var(--input-disabled-fg); } input[type=checkbox].large:checked:disabled::before { background: var(--body-bg); } input[type=checkbox].large:indeterminate { background: transparent; border: 1px solid var(--input-checkbox-color); position: relative; } input[type=checkbox].large:indeterminate::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--input-checkbox-color); -webkit-mask: url("/icons/minus.svg") center center / 14.4px 14.4px no-repeat; mask: url("/icons/minus.svg") center center / 14.4px 14.4px no-repeat; } input[type=checkbox]:focus { outline: 1px solid var(--input-checkbox-checked-hover-color); outline-offset: 2px; } input[type=checkbox] + label { padding-left: var(--pad-1-2); cursor: pointer; } input[type=checkbox]:disabled + label { cursor: not-allowed; color: var(--input-disabled-fg); } input[type=checkbox].switch { transition: all .25s ease-in-out; outline-width: 2px; outline-color: var(--input-border-color-focus); width: 35px; border-radius: 30px; border: none; background-position: 2px center; appearance: none; background-color: var(--input-placeholder); background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15px' height='15px' viewBox='0 0 15 15'%3E%3Cpath d='M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z' fill='white' /%3E%3C/svg%3E%0A") !important; } input[type=checkbox].switch::before, input[type=checkbox].switch::after { display: none !important; } input[type=checkbox].switch, input[type=checkbox].switch:hover, input[type=checkbox].switch:focus, input[type=checkbox].switch:active, input[type=checkbox].switch:disabled, input[type=checkbox].switch.disabled { background-repeat: no-repeat; } input[type=checkbox].switch:hover:not(:disabled):not(:focus) { animation: .75s ease-in-out 0s 1 running bump-right; } input[type=checkbox].switch:checked { background-position: 17.5px center; background-color: var(--primary); } input[type=checkbox].switch:checked:hover:not(:disabled):not(:focus) { animation: .75s ease-in-out 0s 1 running bump-left; } input[type=checkbox].switch:disabled, input[type=checkbox].switch.disabled { background-color: var(--input-disabled-fg); } input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 100%; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-runnable-track { background-color: #3264ef; border-radius: 0.5rem; height: 0.5rem; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -4px; background-color: #3264ef; border-radius: 0.5rem; height: 1rem; width: 1rem; } input[type="range"]:focus::-webkit-slider-thumb { outline: 3px solid #3264ef; outline-offset: 0.125rem; } input[type="range"]::-moz-range-track { background-color: #3264ef; border-radius: 0.5rem; height: 0.5rem; } input[type="range"]::-moz-range-thumb { background-color: #3264ef; border: none; border-radius: 0.5rem; height: 1rem; width: 1rem; } input[type="range"]:focus::-moz-range-thumb { outline: 3px solid #3264ef; outline-offset: 0.125rem; } select, .select-input { background-image: var(--input-select-arrow); background-position: right 10px center; background-size: 18px auto; background-repeat: no-repeat; padding-right: 34px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } select:hover, .select-input:hover { background-image: var(--input-select-arrow); background-position: right 10px center; } select:focus, .select-input:focus { padding-right: 33px; background-position: right 9px center; } select.small, .select-input.small { padding-right: 28px; background-position: right 8px center; } select.small:focus, .select-input.small:focus { padding-right: 27px; background-position: right 7px center; } select.expanded, .select-input.expanded { background-image: var(--input-select-arrow-expanded); } select > option, .select-input > option { background-color: var(--body-bg); color: var(--body-fg); } select.inverted, .select-input.inverted { color: inherit; border-color: rgba(195, 198, 207, 0.65); background-image: var(--input-select-arrow-light); } select.inverted.expanded, .select-input.inverted.expanded { background-image: var(--input-select-arrow-light-expanded); } select.inverted:hover, .select-input.inverted:hover { border-color: rgba(195, 198, 207, 0.85); } select.inverted:hover:disabled, select.inverted:hover.disabled, .select-input.inverted:hover:disabled, .select-input.inverted:hover.disabled { border-color: rgba(195, 198, 207, 0.65); } select.disabled, .select-input.disabled { background-image: var(--input-select-arrow-grey); } ::placeholder { color: var(--input-placeholder); transition: color var(--transition-time-short); opacity: 1; font-weight: normal; } input[type="time"], input[type="date"] { -webkit-text-fill-color: var(--input-fg); } input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--icon-filter); cursor: pointer; } input[type="time"]:disabled, input[type="date"]:disabled { -webkit-text-fill-color: var(--input-disabled-fg); -webkit-opacity: 1; opacity: 1; color: var(--input-disabled-fg); } textarea { height: 76px; min-height: 76px; transition: border-color var(--transition-time-short), color var(--transition-time-short); resize: vertical; } input[type=number].no-spin-buttons { -moz-appearance: textfield; } input[type=number].no-spin-buttons::-webkit-outer-spin-button, input[type=number].no-spin-buttons::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .input-stepper { position: relative; display: flex; justify-content: space-between; align-items: center; } .input-stepper button.button { position: absolute; background: var(--secondary-hover); border: transparent; border-radius: 50%; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; } .input-stepper button.button .icon { width: 16px; height: 16px; } .input-stepper button:first-child { left: var(--pad); } .input-stepper button:last-child { right: var(--pad); } .input-stepper input { width: 100%; max-width: 100%; text-align: center; -moz-appearance: textfield; } .input-stepper input::-webkit-outer-spin-button, .input-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } a { color: var(--anchor-color); transition: all var(--transition-time-short); } label.disabled { color: var(--input-disabled-fg); } .cursor-help { cursor: help; } .overflow-auto { overflow: auto !important; } .hidden { display: none !important; } .vhidden { visibility: hidden !important; } .no-selection { user-select: none !important; } .no-transitions, .no-transitions * { transition: none !important; } .flex { display: flex; } .align-center { align-items: center; } .gap { gap: var(--pad); } .w-full { width: 100%; } .w-50 { width: 50%; } .mr-left { margin-left: auto !important; } .mr-auto { margin-right: auto !important; } .ml-3 { margin-left: var(--pad) !important; } .mb-3 { margin-bottom: var(--pad) !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-5 { margin-bottom: var(--pad-2) !important; } .text-muted { color: var(--table-muted-color) !important; } .text-error { color: var(--error) !important; } .text-primary { color: var(--primary) !important; } .text-body { color: var(--body-fg) !important; } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-underline { text-decoration: underline !important; } .text-underline-hover { text-decoration: none !important; } .text-underline-hover:hover { text-decoration: underline !important; } .font-weight-normal { font-weight: var(--font-weight-normal) !important; } .font-weight-bold { font-weight: var(--font-weight-bold) !important; } .font-weight-bolder { font-weight: var(--font-weight-bolder) !important; } .text-separator { color: var(--icon-static-color) !important; } .text-nowrap { white-space: nowrap !important; } .text-pre { white-space: pre !important; } .text-sm { font-size: var(--font-size-sm) !important; } .text-base { font-size: var(--font-size-base) !important; } .text-lg { font-size: var(--font-size-lg) !important; } .text-xl { font-size: var(--font-size-xl) !important; } audio { border-radius: var(--border-radius); } audio::-webkit-media-controls-panel { background-color: var(--panel-bg); } audio::-webkit-media-controls-enclosure { border-radius: var(--border-radius); } audio.no-offset { width: 100%; } /* Webkit only */ @supports (-webkit-tap-highlight-color: black) { audio.no-offset { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); } } button.primary, button.secondary, button.success, button.success-secondary, button.error, button.error-secondary, button.warning, button.warning-secondary, button.transparent, button.outline, button.grey, button.icon-only, .button.primary, .button.secondary, .button.success, .button.success-secondary, .button.error, .button.error-secondary, .button.warning, .button.warning-secondary, .button.transparent, .button.outline, .button.grey, .button.icon-only { -webkit-appearance: none; appearance: none; border-radius: var(--border-radius); font-size: var(--button-text); font-weight: var(--button-font-weight); line-height: var(--button-line-height); padding: var(--button-padding-y) var(--button-padding-x); border: 0; margin: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; text-decoration: none; min-height: var(--input-height); transition: all var(--transition-time-short); user-select: none; } button.primary:disabled, button.secondary:disabled, button.success:disabled, button.success-secondary:disabled, button.error:disabled, button.error-secondary:disabled, button.warning:disabled, button.warning-secondary:disabled, button.transparent:disabled, button.outline:disabled, button.grey:disabled, button.icon-only:disabled, .button.primary:disabled, .button.secondary:disabled, .button.success:disabled, .button.success-secondary:disabled, .button.error:disabled, .button.error-secondary:disabled, .button.warning:disabled, .button.warning-secondary:disabled, .button.transparent:disabled, .button.outline:disabled, .button.grey:disabled, .button.icon-only:disabled { cursor: not-allowed !important; } button.button-block, .button.button-block { width: 100%; } button.static, .button.static { cursor: default; font-weight: var(--font-weight-bold); } button.static[title]:not([title=""]), .button.static[title]:not([title=""]) { cursor: help; } button.primary, .button.primary { background-color: var(--primary); color: var(--primary-text); --color: var(--primary-text); border: var(--button-border-width) solid var(--primary-border); } button.primary:not(.static):hover, button.primary.hover, .button.primary:not(.static):hover, .button.primary.hover { background-color: var(--primary-hover); color: var(--primary-hover-text); --color: var(--primary-hover-text); border: var(--button-border-width) solid var(--primary-border-hover); } button.primary:not(.static):active, button.primary.active, .button.primary:not(.static):active, .button.primary.active { background-color: var(--primary-active); color: var(--primary-active-text); --color: var(--primary-active-text); border: var(--button-border-width) solid var(--primary-border-active); } button.primary:not(.static):focus, button.primary:not(.static):focus-visible, .button.primary:not(.static):focus, .button.primary:not(.static):focus-visible { outline: 0; border-color: var(--primary-border-active); box-shadow: inset 0 0 0 1px var(--primary-border-active); } button.primary:disabled, button.primary:disabled:hover, button.primary.disabled, button.primary.disabled:hover, .button.primary:disabled, .button.primary:disabled:hover, .button.primary.disabled, .button.primary.disabled:hover { background-color: var(--primary-disabled); color: var(--primary-disabled-text); --color: var(--primary-disabled-text); border: var(--button-border-width) solid var(--primary-border-disabled); } button.secondary, .button.secondary { background-color: var(--secondary); color: var(--secondary-text); --color: var(--secondary-text); border: var(--button-border-width) solid var(--secondary-border); } button.secondary:not(.static):hover, .button.secondary:not(.static):hover { background-color: var(--secondary-hover); color: var(--secondary-hover-text); --color: var(--secondary-hover-text); border: var(--button-border-width) solid var(--secondary-border-hover); } button.secondary:not(.static):active, .button.secondary:not(.static):active { background-color: var(--secondary-active); color: var(--secondary-active-text); --color: var(--secondary-active-text); border: var(--button-border-width) solid var(--secondary-border-active); } button.secondary:not(.static):focus, button.secondary:not(.static):focus-visible, .button.secondary:not(.static):focus, .button.secondary:not(.static):focus-visible { outline: 0; border-color: var(--secondary-hover-text); box-shadow: inset 0 0 0 1px var(--secondary-hover-text); } button.secondary:disabled, button.secondary:disabled:hover, button.secondary.disabled, button.secondary.disabled:hover, .button.secondary:disabled, .button.secondary:disabled:hover, .button.secondary.disabled, .button.secondary.disabled:hover { background-color: var(--secondary-disabled); color: var(--secondary-disabled-text); --color: var(--secondary-disabled-text); border: var(--button-border-width) solid var(--secondary-border-disabled); } button.success, .button.success { background-color: var(--success); color: var(--success-text); --color: var(--success-text); border: var(--button-border-width) solid var(--success-border); } button.success:not(.static):hover, .button.success:not(.static):hover { background-color: var(--success-hover); color: var(--success-hover-text); --color: var(--success-hover-text); border: var(--button-border-width) solid var(--success-border-hover); } button.success:not(.static):active, .button.success:not(.static):active { background-color: var(--success-active); color: var(--success-active-text); --color: var(--success-active-text); border: var(--button-border-width) solid var(--success-border-active); } button.success:not(.static):focus, .button.success:not(.static):focus { outline: 0; box-shadow: 0 0 0 2px var(--success-border-active); } button.success:disabled, button.success:disabled:hover, button.success.disabled, button.success.disabled:hover, .button.success:disabled, .button.success:disabled:hover, .button.success.disabled, .button.success.disabled:hover { background-color: var(--success-disabled); color: var(--success-disabled-text); --color: var(--success-disabled-text); border: var(--button-border-width) solid var(--success-border-disabled); } button.success-secondary, .button.success-secondary { background-color: var(--success-secondary); color: var(--success-secondary-text); --color: var(--success-secondary-text); border: var(--button-border-width) solid var(--success-secondary-border); } button.success-secondary.static, button.success-secondary:hover, .button.success-secondary.static, .button.success-secondary:hover { background-color: var(--success-secondary-hover); color: var(--success-secondary-hover-text); --color: var(--success-secondary-hover-text); border: var(--button-border-width) solid var(--success-secondary-border-hover); } button.success-secondary:not(.static):active, .button.success-secondary:not(.static):active { background-color: var(--success-secondary-active); color: var(--success-secondary-active-text); --color: var(--success-secondary-active-text); border: var(--button-border-width) solid var(--success-secondary-border-active); } button.success-secondary:not(.static):focus, .button.success-secondary:not(.static):focus { outline: 0; box-shadow: 0 0 0 2px var(--success-secondary-hover-text); } button.success-secondary:disabled, button.success-secondary:disabled:hover, button.success-secondary.disabled, button.success-secondary.disabled:hover, .button.success-secondary:disabled, .button.success-secondary:disabled:hover, .button.success-secondary.disabled, .button.success-secondary.disabled:hover { background-color: var(--success-secondary-disabled); color: var(--success-secondary-disabled-text); --color: var(--success-secondary-disabled-text); border: var(--button-border-width) solid var(--success-secondary-border-disabled); } button.error, .button.error { background-color: var(--error); color: var(--error-text); --color: var(--error-text); border: var(--button-border-width) solid var(--error-border); } button.error:not(.static):hover, .button.error:not(.static):hover { background-color: var(--error-hover); color: var(--error-hover-text); --color: var(--error-hover-text); border: var(--button-border-width) solid var(--error-border-hover); } button.error:not(.static):active, .button.error:not(.static):active { background-color: var(--error-active); color: var(--error-active-text); --color: var(--error-active-text); border: var(--button-border-width) solid var(--error-border-active); } button.error:not(.static):focus, .button.error:not(.static):focus { outline: 0; box-shadow: inset 0 0 0 2px var(--error-border-active); } button.error:disabled, button.error:disabled:hover, button.error.disabled, button.error.disabled:hover, .button.error:disabled, .button.error:disabled:hover, .button.error.disabled, .button.error.disabled:hover { background-color: var(--error-disabled); color: var(--error-disabled-text); --color: var(--error-disabled-text); border: var(--button-border-width) solid var(--error-border-disabled); } button.error-secondary, .button.error-secondary { background-color: var(--error-secondary); color: var(--error-secondary-text); --color: var(--error-secondary-text); border: var(--button-border-width) solid var(--error-secondary-border); } button.error-secondary.static, button.error-secondary:hover, .button.error-secondary.static, .button.error-secondary:hover { background-color: var(--error-secondary-hover); color: var(--error-secondary-hover-text); --color: var(--error-secondary-hover-text); border: var(--button-border-width) solid var(--error-secondary-border-hover); } button.error-secondary:not(.static):active, .button.error-secondary:not(.static):active { background-color: var(--error-secondary-active); color: var(--error-secondary-active-text); --color: var(--error-secondary-active-text); border: var(--button-border-width) solid var(--error-secondary-border-active); } button.error-secondary:not(.static):focus, .button.error-secondary:not(.static):focus { outline: 0; box-shadow: 0 0 0 2px var(--error-secondary-hover-text); } button.error-secondary:disabled, button.error-secondary:disabled:hover, button.error-secondary.disabled, button.error-secondary.disabled:hover, .button.error-secondary:disabled, .button.error-secondary:disabled:hover, .button.error-secondary.disabled, .button.error-secondary.disabled:hover { background-color: var(--error-secondary-disabled); color: var(--error-secondary-disabled-text); --color: var(--error-secondary-disabled-text); border: var(--button-border-width) solid var(--error-secondary-border-disabled); } button.warning, .button.warning { background-color: var(--warning); color: var(--warning-text); border: var(--button-border-width) solid var(--warning); --color: var(--warning-text); } button.warning-secondary.static, button.warning-secondary:hover, .button.warning-secondary.static, .button.warning-secondary:hover { background-color: var(--warning-secondary-hover); color: var(--warning-secondary-hover-text); --color: var(--warning-secondary-hover-text); border: var(--button-border-width) solid var(--warning-secondary-border-hover); } button.transparent, .button.transparent { background: transparent; --color: var(--body-fg); color: var(--body-fg); } button.transparent:not(.static):hover, .button.transparent:not(.static):hover { background-color: #00000011; } button.transparent:not(.static):active > .icon, .button.transparent:not(.static):active > .icon { color: var(--primary); --color: var(--primary); } button.transparent:disabled, button.transparent:disabled:hover, button.transparent.disabled, button.transparent.disabled:hover, .button.transparent:disabled, .button.transparent:disabled:hover, .button.transparent.disabled, .button.transparent.disabled:hover { color: var(--icon-static-color); --color: var(--icon-static-color); } button.outline, .button.outline { background-color: var(--panel-bg); color: var(--panel-fg); padding-left: 10px; padding-right: 10px; border-radius: var(--border-radius); font-weight: var(--font-weight-normal); --drop-shadow-hardness: 0.08; box-shadow: var(--drop-shadow-sm); } button.outline:disabled, button.outline:disabled:hover, button.outline.disabled, button.outline.disabled:hover, .button.outline:disabled, .button.outline:disabled:hover, .button.outline.disabled, .button.outline.disabled:hover { color: var(--input-disabled-fg); } button.outline.active, .button.outline.active { color: var(--button-switcher-active-fg); background-color: var(--button-switcher-active-bg); border-color: var(--button-switcher-active-bg); } button.grey, .button.grey { background-color: var(--body-bg); color: var(--body-fg); } button.grey:disabled, button.grey:disabled:hover, button.grey.disabled, button.grey.disabled:hover, .button.grey:disabled, .button.grey:disabled:hover, .button.grey.disabled, .button.grey.disabled:hover { color: var(--input-disabled-fg); } button.no-border, .button.no-border { border: var(--button-border-width) solid transparent !important; } button.small, .button.small { min-width: var(--input-height-sm); min-height: var(--input-height-sm); font-size: var(--button-text-sm); padding: var(--button-padding-y-sm) var(--button-padding-x-sm); } button.small.icon-left, .button.small.icon-left { padding-left: calc( var(--button-padding-x-sm) / 1.4); } button.small.icon-left > .icon, .button.small.icon-left > .icon { margin-right: calc( var(--button-padding-x-sm) / 2); } button.small.icon-right, .button.small.icon-right { padding-right: calc( var(--button-padding-x-sm) / 1.4); } button.small.icon-right > .icon, .button.small.icon-right > .icon { margin-left: calc( var(--button-padding-x-sm) / 2); } button.small.icon-left > .icon, button.small.icon-right > .icon, button.small.icon-only > .icon, .button.small.icon-left > .icon, .button.small.icon-right > .icon, .button.small.icon-only > .icon { width: 16px; height: 16px; } button.small.icon-only, .button.small.icon-only { min-width: var(--input-height-sm); } button.xs, .button.xs { border-radius: var(--input-height-xs); min-width: var(--input-height-xs); min-height: var(--input-height-xs); font-size: var(--button-text-xs); font-weight: var(--font-weight-normal); padding: var(--button-padding-y-xs) var(--button-padding-x-xs); line-height: 0; } button.xs.icon-left, .button.xs.icon-left { padding-left: calc( var(--button-padding-x-xs) / 1.4); } button.xs.icon-left > .icon, .button.xs.icon-left > .icon { margin-right: calc( var(--button-padding-x-xs) / 2); } button.xs.icon-right, .button.xs.icon-right { padding-right: calc( var(--button-padding-x-xs) / 1.4); } button.xs.icon-right > .icon, .button.xs.icon-right > .icon { margin-left: calc( var(--button-padding-x-xs) / 2); } button.xs.icon-left > .icon, button.xs.icon-right > .icon, button.xs.icon-only > .icon, .button.xs.icon-left > .icon, .button.xs.icon-right > .icon, .button.xs.icon-only > .icon { width: 16px; height: 16px; } button.xs.icon-only, .button.xs.icon-only { border-radius: var(--input-height-xs); min-width: var(--input-height-xs); } button.large, .button.large { min-width: var(--input-height-lg); min-height: var(--input-height-lg); font-size: var(--button-text-lg); padding: var(--button-padding-y-lg) var(--button-padding-x-lg); } button.large.icon-left, .button.large.icon-left { padding-left: calc( var(--button-padding-x-lg) / 1.4); } button.large.icon-left > .icon, .button.large.icon-left > .icon { margin-right: calc( var(--button-padding-x-lg) / 2); } button.large.icon-right, .button.large.icon-right { padding-right: calc( var(--button-padding-x-lg) / 1.4); } button.large.icon-right > .icon, .button.large.icon-right > .icon { margin-left: calc( var(--button-padding-x-lg) / 2); } button.large.icon-left > .icon, button.large.icon-right > .icon, button.large.icon-only > .icon, .button.large.icon-left > .icon, .button.large.icon-right > .icon, .button.large.icon-only > .icon { width: 24px; height: 24px; } button.large.icon-only, .button.large.icon-only { min-width: var(--input-height-lg); } button.icon-only, .button.icon-only { min-width: var(--input-height); padding: 0; border-radius: var(--border-radius); } button.icon-only > .icon, .button.icon-only > .icon { flex-shrink: 0; width: 20px; height: 20px; } button.icon-left, .button.icon-left { padding-left: calc( var(--button-padding-x) / 1.5); } button.icon-left > .icon, .button.icon-left > .icon { flex-shrink: 0; width: 20px; height: 20px; margin-right: calc( var(--button-padding-x) / 2); } button.icon-right, .button.icon-right { padding-right: calc( var(--button-padding-x) / 1.5); } button.icon-right > .icon, .button.icon-right > .icon { flex-shrink: 0; width: 20px; height: 20px; margin-left: calc( var(--button-padding-x) / 2); } button.icon-both, .button.icon-both { padding-left: calc( var(--button-padding-x) / 1.5); padding-right: calc( var(--button-padding-x) / 1.5); } button.icon-both > .icon, .button.icon-both > .icon { flex-shrink: 0; width: 20px; height: 20px; } button.icon-both > .icon:first-child, .button.icon-both > .icon:first-child { margin-right: calc( var(--button-padding-x) / 2); } button.icon-both > .icon:last-child, .button.icon-both > .icon:last-child { margin-left: calc( var(--button-padding-x) / 2); } .mobile-ui button.only-icon-mobile, .mobile-ui .button.only-icon-mobile { padding-left: 0; padding-right: 0; } .mobile-ui button.only-icon-mobile.icon-right > div, .mobile-ui button.only-icon-mobile.icon-left > div, .mobile-ui .button.only-icon-mobile.icon-right > div, .mobile-ui .button.only-icon-mobile.icon-left > div { display: none; } .mobile-ui button.only-icon-mobile.icon-right > .icon, .mobile-ui button.only-icon-mobile.icon-left > .icon, .mobile-ui .button.only-icon-mobile.icon-right > .icon, .mobile-ui .button.only-icon-mobile.icon-left > .icon { margin-left: 0; margin-right: 0; } .icon-wrapper { display: inline-block; line-height: 1; vertical-align: middle; } .icon-wrapper[title]:not([title=""]) { cursor: help; } .icon-wrapper > .icon { width: 20px; height: 20px; } .icon.primary { color: var(--primary); --color: var(--primary); } .icon.success { color: var(--success); --color: var(--success); } .icon.warning { color: var(--warning); --color: var(--warning); } .icon.error { color: var(--error); --color: var(--error); } .icon.info { color: var(--info); --color: var(--info); } .icon.muted { color: var(--icon-static-color); --color: var(--icon-static-color); } .icon.icon-rotate { will-change: transform; animation: 2s linear 0s infinite running full-rotate-left; } .panel-container, .entity-list-editor { padding: var(--panel-padding); border-radius: var(--panel-border-radius); box-shadow: var(--panel-shadow); background-color: var(--panel-bg); color: var(--panel-fg); } .panel-container.no-padding, .no-padding.entity-list-editor { padding: 0; } .button-switcher { display: flex; align-items: center; max-width: 100%; overflow-y: visible; overflow-x: auto; min-height: var(--input-height); flex-shrink: 0; } .button-switcher.light > a, .button-switcher.light > button { border: 1px solid var(--button-switcher-light-bg); color: var(--button-switcher-light-fg); background-color: var(--button-switcher-light-bg); } .button-switcher.light > a.disabled, .button-switcher.light > a[disabled], .button-switcher.light > button.disabled, .button-switcher.light > button[disabled] { background-color: var(--button-switcher-light-bg); border: 1px solid var(--button-switcher-light-bg); } .button-switcher > a, .button-switcher > button { -webkit-appearance: none; appearance: none; font-size: var(--button-text); font-weight: var(--button-font-weight); padding: var(--button-padding-y) var(--button-padding-x); border: var(--border-default-width) solid var(--button-switcher-bg); margin: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: var(--input-height); color: var(--button-switcher-fg); background-color: var(--button-switcher-bg); border-radius: 0; transition: all var(--transition-time-short); } .button-switcher > a:hover, .button-switcher > button:hover { color: var(--button-switcher-hover-fg); } .button-switcher > a:active, .button-switcher > a:focus, .button-switcher > a:focus-visible, .button-switcher > button:active, .button-switcher > button:focus, .button-switcher > button:focus-visible { color: var(--button-switcher-focus-fg); outline: 0; border-color: var(--button-switcher-hover-fg) !important; box-shadow: inset 0 0 0 1px var(--button-switcher-hover-fg); } .button-switcher > a:disabled, .button-switcher > a.disabled, .button-switcher > button:disabled, .button-switcher > button.disabled { color: var(--button-switcher-disabled-fg); background-color: var(--button-switcher-disabled-bg); border-color: var(--button-switcher-disabled-bg); cursor: not-allowed !important; } .button-switcher > a .icon, .button-switcher > button .icon { width: 1rem; height: 1rem; margin-left: var(--pad-1-2); vertical-align: middle; } .button-switcher > a .icon:last-child, .button-switcher > button .icon:last-child { margin-left: 0; } .button-switcher > a.active, .button-switcher > button.active { color: var(--button-switcher-active-fg); background-color: var(--button-switcher-active-bg); border-color: var(--button-switcher-active-bg); } .button-switcher > a.active:disabled, .button-switcher > a.active.disabled, .button-switcher > button.active:disabled, .button-switcher > button.active.disabled { color: var(--button-switcher-disabled-active-fg); background-color: var(--button-switcher-disabled-active-bg); border-color: var(--button-switcher-disabled-active-bg); } .button-switcher > a:first-child, .button-switcher > button:first-child { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .button-switcher > a:last-child, .button-switcher > button:last-child { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .button-switcher.small { min-height: var(--input-height-sm); } .button-switcher.small > a, .button-switcher.small > button { min-height: var(--input-height-sm); font-size: var(--button-text-sm); padding: var(--button-padding-y-sm) var(--button-padding-x-sm); } .button-switcher.large { min-height: var(--input-height-sm); } .button-switcher.large > a, .button-switcher.large > button { min-height: var(--input-height-lg); font-size: var(--button-text-lg); padding: var(--button-padding-y-lg) var(--button-padding-x-lg); } .button-switcher.vertical { flex-direction: column; } .button-switcher.vertical > a, .button-switcher.vertical > button { width: 100%; justify-content: flex-start; } .button-switcher.vertical > a:first-child, .button-switcher.vertical > button:first-child { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border-bottom-left-radius: 0; } .button-switcher.vertical > a:last-child, .button-switcher.vertical > button:last-child { border-top-right-radius: 0; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .button-switcher.separate > a, .button-switcher.separate > button { padding-left: var(--pad); padding-right: var(--pad); border-radius: var(--border-radius); margin-right: var(--pad); } .button-switcher.separate > a:last-child, .button-switcher.separate > button:last-child { margin-right: 0; } .button-switcher.separate > a:not(.active), .button-switcher.separate > button:not(.active) { border: 1px solid var(--border-default-color); color: var(--body-fg); background-color: transparent; } .button-switcher.separate > a:not(.active) .icon, .button-switcher.separate > button:not(.active) .icon { color: var(--icon-static-color); } .tab-switcher { display: flex; align-items: center; box-shadow: inset 0px calc( var(--tab-switcher-border-width) * -1) 0px var(--tab-switcher-border-color); margin-bottom: 1rem; overflow-y: visible; overflow-x: auto; flex-shrink: 0; } .tab-switcher > .tab { display: flex; align-items: center; font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); color: var(--tab-switcher-item-fg); --color: var(--tab-switcher-item-fg); border-bottom: var(--tab-switcher-item-selected-border-width) solid transparent; padding-left: 0; padding-right: 0; padding-bottom: var(--tab-switcher-item-padding-y); margin-left: var(--tab-switcher-item-margin-x); margin-right: var(--tab-switcher-item-margin-x); text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; transition: all var(--transition-time-short); background-color: transparent; border-top: none; border-left: none; border-right: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .tab-switcher > .tab .icon { width: 1.125rem; height: 1.125rem; margin-right: .25rem; transition: all var(--transition-time-short); color: var(--icon-static-color); --color: var(--icon-static-color); } .tab-switcher > .tab .icon + .icon { display: none; } .tab-switcher > .tab:hover { color: var(--tab-switcher-item-hover); --color: var(--tab-switcher-item-hover); } .tab-switcher > .tab:hover .icon { color: inherit; --color: inherit; } .tab-switcher > .tab:focus-visible { outline-offset: -1px; } .tab-switcher > .tab.active { border-bottom-color: var(--tab-switcher-item-selected-border-color); color: var(--tab-switcher-item-selected-fg); --color: var(--tab-switcher-item-selected-fg); } .tab-switcher > .tab.active .icon { color: inherit; --color: inherit; } .tab-switcher > .tab.active > .icon:has(+ .icon) { display: none; } .tab-switcher > .tab.active > .icon + .icon { display: block; } .tab-switcher > .tab:first-child { margin-left: 0; } .tab-switcher > .tab:last-child { margin-right: 0; } .tab-switcher > .tab > .notify { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--error); color: var(--error-text); font-weight: var(--font-weight-bolder); font-size: var(--font-size-sm); margin-left: 4px; border-radius: 20px; min-width: 20px; min-height: 20px; padding: 0 6px; } .tab-switcher > .tab > .notify:empty { min-width: var(--pad); min-height: var(--pad); padding: 0; } .vertical-menu { list-style: none; margin-top: 0; } .vertical-menu .item { display: flex; align-items: center; color: var(--button-switcher-fg); font-weight: var(--font-weight-bolder); font-size: var(--font-size-base); border-radius: var(--border-radius); white-space: nowrap; cursor: pointer; line-height: var(--button-line-height); text-decoration: none; padding: var(--pad); margin: 2px 0; transition: box-shadow var(--transition-time-short); } .vertical-menu .item:first-child { margin-top: 0; } .vertical-menu .item:last-child { margin-bottom: 0; } .vertical-menu .item a { color: inherit; } .vertical-menu .item > .icon { flex-shrink: 0; margin-right: var(--pad-1-2); width: 1rem; height: 1rem; } .vertical-menu .item > .icon + * { overflow: hidden; text-overflow: ellipsis; } .vertical-menu .item .menu { transition: none; color: inherit; --color: inherit; } .vertical-menu .item .menu > .icon { margin-right: 0; } .vertical-menu .item .options { margin-left: auto; } .vertical-menu .item .options .icon { margin-right: 0; } .vertical-menu .item:hover, .vertical-menu .item:focus { background-color: var(--secondary); color: var(--primary); box-shadow: var(--drop-shadow-sm); } .vertical-menu .item:active { background-color: var(--secondary-active); color: var(--secondary-active-text); } .vertical-menu .item.active { background-color: var(--primary-hover); color: var(--button-switcher-active-fg); } .form { width: 100%; } .form > input { margin-bottom: var(--pad); } .form .note { margin-bottom: 20px; font-size: 12px; color: #444; } .form h1 { font-size: 34px; margin: 0 0 20px 0; } .form h1 + .form-info { margin-bottom: 40px; } .form h1 + .form-field { margin-top: 40px; } .form-title { font-weight: bold; margin-top: var(--pad); margin-bottom: var(--pad); font-weight: 16px; } .form-info { font-size: 16px; color: #696e8c; margin-bottom: 40px; } .form-buttons { display: flex; align-items: flex-end; justify-content: flex-end; margin-bottom: var(--pad); } .form-buttons.centered { justify-content: space-around; } .form-buttons:last-child { margin-bottom: 0; } .form-buttons.fixed { justify-content: flex-start; gap: var(--pad-1-2); position: fixed; left: 0; right: 0; bottom: 0; background-color: var(--panel-bg); box-shadow: 0px -20px 40px 0px #00000014; padding: .75rem; } .form-buttons > * { flex: 0 0 auto; } .form-buttons > *:not(:first-child) { margin-left: var(--pad-1-2); } .form-links { display: flex; align-items: flex-start; justify-content: center; margin-bottom: var(--pad); } .form-links .fill { flex: 1; } .form-links a { font-size: 16px; color: var(--body-fg); font-weight: bold; text-decoration: underline; display: inline-flex; align-items: center; } .form-links a .icon { --color: #8E8CA0; } .form-links a .icon:first-child { margin-right: 7px; } .form-links a .icon:last-child { margin-left: 7px; } .form-links a:hover { color: #714dff; text-decoration: none; } .form-links a:active { color: #5500f5; text-decoration: none; } .form-links a:disabled { color: #c6c5cf; text-decoration: underline; } .form-links a:not(:first-child) { margin-left: var(--pad); } .form-field { scroll-margin-top: 70px; margin-bottom: var(--pad-2); } .form-field:has(+ .form-buttons) { margin-bottom: 0; } .form-field > label { display: inline-block; margin-bottom: 4px; } .form-field > .message { margin-bottom: var(--pad-2); color: var(--error); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); } .form-field input:not([type=checkbox]), .form-field textarea, .form-field select, .form-field .select-input { width: 100%; } .form-field.error > .input-ct { margin-bottom: var(--pad); } .form-field.error > .input-ct > .form-field { margin-bottom: 0; } .form-field.error input, .form-field.error textarea, .form-field.error select, .form-field.error .select-input { border-color: var(--error); } .form-field[data-gw="ImageUploadField"] { margin-top: var(--pad-2); margin-bottom: var(--pad-2); } .form-field[data-gw="ImageUploadField"] > label { margin-bottom: var(--pad-1-4); text-align: center; font-size: 18px; font-weight: 600; } .form-field.small { margin-bottom: var(--pad-1-2); } .form-field.small > label { font-size: var(--font-size-sm); } .form-field.password-field { position: relative; } .form-field.password-field > input { padding-right: var(--pad-4) !important; } .form-field.password-field > input[type=text] + .button { color: var(--surface-on-surface-subtle-2) !important; } .form-field.password-field > input:hover + .button .icon, .form-field.password-field > input:focus + .button .icon { opacity: 0.5; } .form-field.password-field > .button { position: absolute; background-color: inherit; right: 2px; top: 2px; bottom: 2px; height: calc(100% - 4px); aspect-ratio: 1; min-width: auto; min-height: auto; color: var(--surface-surface-5); } .form-field.password-field > .button .icon { transition: opacity var(--transition-time); opacity: 0.25; } .form-field.password-field > .button:hover { color: var(--surface-on-surface-subtle-2) !important; } .form-field.password-field > .button:hover .icon { opacity: 1 !important; } .form-field.password-field:hover > .button { color: var(--surface-surface-6); } .form-field:has(.form-field-tooltip) label { position: relative; white-space: nowrap; } .form-field:has(.form-field-tooltip) label a .icon { cursor: inherit; } .form-field:has(.form-field-tooltip) label .icon { width: 1rem; height: 1rem; margin-left: 5px; color: var(--primary); cursor: help; vertical-align: text-top; transition: transform .15s ease-out, opacity .15s ease-out; transform: scale(1); opacity: 0.75; } .form-field:has(.form-field-tooltip) label .icon:hover { transform: scale(1.25); opacity: 1; } .form-field:has(.form-field-tooltip) label .icon:hover + .form-field-tooltip { opacity: 1; } .form-field:has(.form-field-tooltip) label .form-field-tooltip { opacity: 0; position: absolute; top: 0; left: calc(100% + var(--pad)); transform: translate(0, -50%); color: var(--body-bg); background-color: color-mix(in srgb, var(--body-fg), transparent 15%); z-index: 1; width: max-content; max-width: 320px; padding: var(--pad); border-radius: var(--border-radius); box-shadow: var(--dropdown-shadow); font-weight: var(--font-weight-bold); letter-spacing: 0.01em; pointer-events: none; transition: opacity var(--transition-time); line-height: 1.15; white-space: pre-wrap; } .form-field:has(.form-field-tooltip) label .form-field-tooltip img { display: block; margin-top: var(--pad); margin-left: auto; margin-right: auto; max-width: 100%; max-height: 296px; object-fit: contain; border-radius: var(--border-radius-sm); overflow: hidden; } .form-field.ico-field { position: relative; } .form-field.ico-field > input { padding-right: var(--pad-4) !important; } .form-field.ico-field > .button { position: absolute; right: 2px; top: 2px; bottom: 2px; aspect-ratio: 1; min-width: auto; min-height: auto; } .form-field.ico-field > .button.loading svg { animation: full-rotate-left 1s linear infinite; } .form-segment { border-radius: 10px; padding: var(--pad); margin-bottom: var(--pad); } .form-segment > .header { position: sticky; top: 0; display: flex; align-items: center; background: var(--body-bg); } .form-segment > .header > .status { width: 20px; height: 20px; margin-right: var(--pad-1-2); } .form-segment > .header > .expand { cursor: pointer; border-radius: 20px; background: white; border: 1px solid #ddd; width: 26px; height: 26px; position: relative; } .form-segment > .header > .expand::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: black; -webkit-mask: url("/icons/arrow-down.svg") center center / 16.8px 16.8px no-repeat; mask: url("/icons/arrow-down.svg") center center / 16.8px 16.8px no-repeat; } .form-segment > .header > .title { font-weight: bold; font-size: 18px; padding: var(--pad-1-4) 0; flex: 1; } .form-segment > .fields { margin-top: var(--pad); } .form-segment.collapsed > .fields, .form-segment.collapsed > .form-buttons, .form-segment.collapsed > .form-progress { display: none; } .form-segment:not(.collapsible) > .header > .expand { display: none; } .form-segment:not(.collapsed) > .header > .expand { position: relative; } .form-segment:not(.collapsed) > .header > .expand::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: black; -webkit-mask: url("/icons/arrow-up.svg") center center / 16.8px 16.8px no-repeat; mask: url("/icons/arrow-up.svg") center center / 16.8px 16.8px no-repeat; } .form-segment[data-status=ok] > .header > .status { position: relative; --thickness: 3; } .form-segment[data-status=ok] > .header > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: green; -webkit-mask: url("/icons/check.svg") center center / 19.2px 19.2px no-repeat; mask: url("/icons/check.svg") center center / 19.2px 19.2px no-repeat; } .form-segment[data-status=error] > .header > .status { position: relative; } .form-segment[data-status=error] > .header > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: red; -webkit-mask: url("/icons/cross.svg") center center / 19.2px 19.2px no-repeat; mask: url("/icons/cross.svg") center center / 19.2px 19.2px no-repeat; } .image-upload-field > img { display: block; width: 100%; margin-bottom: var(--pad)/4; } .image-upload-field > .controls { text-align: center; } .image-upload-field > .controls a { font-size: 16px; color: var(--body-fg); font-weight: 500; } .image-upload-field > button { width: 100%; } .bin-switch-control { display: flex; align-items: center; column-gap: var(--pad); } .bin-switch-control .bin-switch { border-radius: 30px; height: 28px; width: 46px; background: #dedfe6; position: relative; transition: background-color var(--transition-time-short); cursor: pointer; } .bin-switch-control .bin-switch > .bullet { display: inline-block; border-radius: 30px; width: 24px; height: 24px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); background: white; position: absolute; top: 2px; left: 2px; transition: left var(--transition-time-short); } .bin-switch-control .bin-switch[data-state=on] { background: #3f67dd; } .bin-switch-control .bin-switch[data-state=on] > .bullet { border-color: green; left: 19px; } .bin-switch-control .bin-switch-label { font-weight: bold; cursor: pointer; user-select: none; } .progress-bar { height: 5px; border-radius: 10px; overflow: hidden; background: #dedfe6; } .progress-bar .progress-bar-indicator { height: 100%; background: #3f67dd; width: 0%; } .ack-checkbox { margin-bottom: 20px; } .ack-checkbox.error > .check { color: #eb5757; } .ack-checkbox > .check > input { vertical-align: middle; } .ack-checkbox > .check > label { vertical-align: middle; padding-left: .5rem; font-weight: bold; } .ack-checkbox > .info { margin-top: 5px; } .ack-checkbox > .links { margin-top: 5px; } .ack-checkbox > .links a { font-weight: bold; } .checkbox-group > .check { margin-top: 8px; } .checkbox-group > .check > input { vertical-align: middle; } .checkbox-group > .check > label { vertical-align: middle; margin-left: 5px; font-weight: bold; } .auto-password-field { background: var(--body-bg); border-radius: var(--border-radius); padding: 7px 7px 7px 16px; display: flex; align-items: center; } .auto-password-field > .password { color: var(--icon-static-color); font-size: var(--font-size-lg); } .auto-password-field > .copyclip { margin-left: 10px; } .auto-password-field > .regenerate { margin-left: 5px; } .auto-password-field > .userdefined { margin-left: 5px; } .auto-password-field > .fill { flex: 1; } .auto-password-field.copy-success > .copyclip { background: var(--success); --color: var(--primary-text); } .audio-upload-field { padding: 20px; border: 1px solid #eee; border-radius: var(--border-radius); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pad-2); width: 580px; max-width: 100%; } .audio-upload-field > audio { flex-grow: 1; margin-left: 0; margin-right: 0; } .audio-upload-field > .controls { text-align: center; } .audio-upload-field > .controls a { font-size: 16px; color: #122253; font-weight: 500; } .audio-upload-field > .dnd-note { flex-basis: 50%; text-align: center; } .audio-upload-field > .buttons.hidden + .buttons + .dnd-note { display: none; } .audio-upload-field > .buttons > button { margin-right: 5px; } .popup-menu { background: var(--dropdown-bg); box-shadow: var(--dropdown-shadow); border: none; border-radius: var(--dropdown-radius); overflow: auto; display: inline-block; font-size: var(--dropdown-font-size); padding-top: var(--pad-2); } .desktop-ui .popup-menu { min-width: 120px; padding-top: var(--pad); padding-bottom: var(--pad); } .popup-menu:focus { outline: 0; } .popup-menu .option { display: flex; align-items: center; text-decoration: none; color: var(--dropdown-fg); --color: var(--dropdown-fg); background: var(--dropdown-bg); min-height: 32px; padding: .375rem 1rem; } .popup-menu .option .option-icon > .icon, .popup-menu .option .option-icon-right > .icon { display: block; vertical-align: middle; width: 1.125rem; height: 1.125rem; } .popup-menu .option .option-icon > .icon[data-name="check"], .popup-menu .option .option-icon-right > .icon[data-name="check"] { --thickness: 2; } .popup-menu .option .option-icon { margin-right: .5rem; transition: background-color var(--transition-time-short); display: flex; align-items: center; color: var(--icon-static-color); --color: var(--icon-static-color); } .popup-menu .option .option-icon > .icon + .icon { display: none; } .popup-menu .option:hover .option-icon > .icon:has(+ .icon) { display: none; } .popup-menu .option:hover .option-icon > .icon:has(+ .icon) + .icon { display: block; } .popup-menu .option .option-submenu > .icon { width: 1rem; height: 1rem; display: block; } .popup-menu .option .option-text { transition: color var(--transition-time-short); font-weight: var(--dropdown-font-weight); padding-right: 15px; flex: 1; } .popup-menu .option:focus:not(:disabled), .popup-menu .option:hover:not(:disabled) { color: var(--dropdown-fg-hover); --color: var(--dropdown-fg-hover); background: var(--dropdown-bg-hover); } .popup-menu .option:focus:not(:disabled) .option-icon, .popup-menu .option:hover:not(:disabled) .option-icon { color: var(--dropdown-fg-hover); --color: var(--dropdown-fg-hover); } .popup-menu .option:focus:not(:disabled) { outline: 2px solid var(--input-checkbox-checked-hover-color); outline-offset: -2px; transition: none; } .popup-menu .option.active { color: var(--dropdown-fg-active); --color: var(--dropdown-fg-active); background: var(--dropdown-bg-active); } .popup-menu .option.active .option-icon { color: var(--dropdown-fg-active); --color: var(--dropdown-fg-active); } .popup-menu .option.disabled { pointer-events: none; color: var(--table-muted-color); --color: var(--table-muted-color); } .popup-menu .note { color: var(--app-grey); font-size: var(--font-size-base); margin-top: 15px; } .popup-menu.no-icons .option .option-icon { display: none; } .popup-menu.no-icons .option .option-text { padding-right: 0; } .popup-menu.filterable { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'header' 'items'; padding: 0; overflow: hidden; } .popup-menu.filterable > input { grid-area: header; margin: 8px; } .popup-menu.filterable > .items { grid-area: items; overflow: auto; padding: 4px 8px 8px; } .popup-menu.filterable > .items > .option { border-radius: var(--border-radius); padding-left: 8px; padding-right: 8px; } .popup-menu.filterable > .items > .option.selected { background: var(--primary-hover); color: var(--primary-hover-text); --color: var(--primary-hover-text); } .popup-menu.filterable > .items > .option > .option-icon:empty { display: none; } .radio-field { margin-bottom: 10px; } .radio-field .radio-item { display: flex; align-items: center; margin-bottom: 5px; line-height: 1; } .radio-field .radio-item input { margin-right: 8px; } .radio-field .radio-item label { font-weight: bold; cursor: pointer; } .fullscreen-message { display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 24px; color: var(--icon-static-color); height: 100%; } .item-list a { display: block; padding: 10px; text-decoration: none; font-weight: bold; border-radius: 6px; } .item-list a:hover { background: #e4e8ea; } .item-list a.selected { color: white; background: #F46539; } .smart-table { position: relative; overflow: auto; overscroll-behavior: none; font-size: var(--font-size-base); flex-grow: 1; max-height: 100%; min-height: calc( var(--table-row-min-height) * 2.5); } .smart-table > table { width: 100%; border-spacing: 0; border-radius: var(--table-border-radius); } .smart-table > table > thead > tr > th { z-index: 1; } .smart-table > table td, .smart-table > table th { height: var(--table-row-min-height); padding: var(--table-padding-y) var(--table-padding-x); text-align: left; } .smart-table > table th { border-bottom: var(--border-default-width) solid var(--border-default-color); } .smart-table > table td { font-weight: var(--font-weight-bold); } .smart-table > table > tbody tr:nth-child(odd) { background-color: var(--table-bg); } .smart-table > table > tbody tr:nth-child(even) { background-color: var(--table-alternation-bg); } .smart-table > table > thead tr:first-child th:first-child { border-top-left-radius: var(--table-border-radius); } .smart-table > table > thead tr:first-child th:last-child { border-top-right-radius: var(--table-border-radius); } .smart-table > table tr:last-child td:first-child { border-bottom-left-radius: var(--table-border-radius); } .smart-table > table tr:last-child td:last-child { border-bottom-right-radius: var(--table-border-radius); } .smart-table > table tr.limit-message { color: var(--table-muted-color); } .smart-table > table td.right, .smart-table > table th.right { text-align: right; } .smart-table > table td.center, .smart-table > table th.center { text-align: center; } .smart-table > table > thead > tr > th { position: sticky; top: 0; background: var(--panel-bg); font-weight: var(--font-weight-bolder); } .smart-table > table > tbody:empty { display: block; } .smart-table .empty-message { display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: bold; font-size: 24px; color: var(--icon-static-color); padding: var(--pad-2) var(--pad-2); position: absolute; width: 100%; left: 0; top: 50%; transform: translate(0, -50%); margin-top: calc(var(--table-row-min-height) / 2); min-height: var(--table-row-min-height); } .smart-table .empty-message .button { margin-top: var(--pad); } .smart-table.selectable > table > tbody > tr { cursor: pointer; } .smart-table.selectable > table > tbody > tr.selected > td, .smart-table.selectable > table > tbody > tr.selected th { background: var(--table-row-selected-bg); color: var(--table-row-selected-fg); } .smart-table.selectable > table > tbody > tr:not(.selected):hover > td, .smart-table.selectable > table > tbody > tr:not(.selected):hover th, .smart-table.hoverable > table > tbody > tr:not(.selected):hover > td, .smart-table.hoverable > table > tbody > tr:not(.selected):hover th { background: var(--table-row-hover-bg); color: var(--table-row-hover-fg); } .smart-table td[data-col="ctl"], .smart-table td[data-col="details"] { white-space: nowrap; } .smart-table td[data-col="ctl"] .button, .smart-table td[data-col="ctl"] button, .smart-table td[data-col="details"] .button, .smart-table td[data-col="details"] button { vertical-align: text-bottom; margin-left: 0.25rem; margin-right: 0.25rem; } .smart-table td[data-col="ctl"] .button:first-child, .smart-table td[data-col="ctl"] button:first-child, .smart-table td[data-col="details"] .button:first-child, .smart-table td[data-col="details"] button:first-child { margin-left: 0; } .smart-table td[data-col="ctl"] .button:last-child, .smart-table td[data-col="ctl"] button:last-child, .smart-table td[data-col="details"] .button:last-child, .smart-table td[data-col="details"] button:last-child { margin-right: 0; } .smart-table[data-overflowed="1"] th[data-col="ctl"], .smart-table[data-overflowed="1"] td[data-col="ctl"] { position: sticky; right: 0; box-shadow: 0 0 32px 0px rgba(0, 0, 0, var(--drop-shadow-hardness)); clip-path: inset(0px 0px 0px -32px); } .smart-table[data-overflowed="1"] .no-data [data-col="ctl"]:empty { box-shadow: none; } .smart-table[data-overflowed="1"] tr:nth-child(even) td:last-child { background-color: inherit; } .smart-table[data-overflowed="1"] tr:nth-child(odd) td:last-child { background-color: inherit; } .smart-table[data-gw="FilterableSmartTable"] th.sortable, .smart-table[data-gw="FilterableSmartTable"] th.filterable { white-space: nowrap; } .smart-table[data-gw="FilterableSmartTable"] th .header-sort, .smart-table[data-gw="FilterableSmartTable"] th .header-filter { cursor: pointer; display: inline-block; } .smart-table[data-gw="FilterableSmartTable"] th .header-sort .icon { --color: var(--primary-disabled); width: 10px; height: 10px; margin-right: var(--pad-1-2); } .smart-table[data-gw="FilterableSmartTable"] th .filter-icon { margin-left: var(--pad-1-4); vertical-align: sub; width: 16px; height: 16px; color: var(--icon-static-color); } .smart-table[data-gw="FilterableSmartTable"] th .filter-icon:hover, .smart-table[data-gw="FilterableSmartTable"] th .filter-icon:focus { color: var(--icon-hover-color); } .smart-table[data-gw="FilterableSmartTable"] th .filter-icon:active { color: var(--icon-active-color); } .smart-table[data-gw="FilterableSmartTable"] th.filtered .filter-icon { color: var(--icon-selected-static-color); } .smart-table[data-gw="FilterableSmartTable"] th.filtered .filter-icon:hover, .smart-table[data-gw="FilterableSmartTable"] th.filtered .filter-icon:focus { color: var(--icon-selected-hover-color); } .smart-table[data-gw="FilterableSmartTable"] th.filtered .filter-icon:active { color: var(--icon-selected-active-color); } .smart-table[data-gw="FilterableSmartTable"] td.filterable { padding-left: calc( var(--table-padding-x) + 10px + var(--pad-1-2)); } .smart-table.no-header th { display: none; } .smart-table.no-header .empty-message { margin-top: 0; } .smart-table.table-accented { max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: var(--pad-2); overflow: visible; } .smart-table.table-accented.primary > table > thead > tr > th { background: var(--primary); } .smart-table.table-accented > table { box-shadow: var(--drop-shadow-sm); } .smart-table.table-accented > table th:not(:first-child), .smart-table.table-accented > table td:not(:first-child) { text-align: right; } .smart-table.table-accented > table > thead { font-size: var(--font-size-lg); } .smart-table.table-accented > table > thead > tr > th { background: var(--panel-fg); color: var(--panel-bg); text-wrap: balance; position: relative; } .smart-table.table-accented > table > thead > tr > th:first-child { width: 30%; } .smart-table.table-accented > table > tbody > tr > td { padding-top: var(--pad-1-2); padding-bottom: var(--pad-1-2); height: auto; white-space: nowrap; } .smart-table.table-accented > table > tbody > tr:last-child > td:first-child, .smart-table.table-accented > table > tbody > tr:last-child > td:last-child { border-radius: 0; } .smart-table.totals-last-row > table > tbody > tr:last-child { background: var(--success-secondary-active); } .smart-table.totals-last-row > table > tbody > tr:last-child > td { color: var(--panel-fg); font-weight: var(--font-weight-bolder); height: auto; padding: var(--table-padding-y) var(--table-padding-x); } .smart-table.totals-last-row > table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--table-border-radius); } .smart-table.totals-last-row > table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--table-border-radius); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr:not(.expandable) { background: var(--table-bg); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr:not(.expandable) td:not(.expandable-icon) { border-top: var(--border-default-width) solid var(--border-default-color); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody td.expandable-icon { width: 0; } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody td[data-col="queue"], .smart-table[data-gw="ExpandableSmartTable"] > table > tbody td[data-col="user_name"] { min-width: 150px; } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable td { cursor: pointer; } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable td.expandable-icon { padding-right: 0; } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable td.expandable-icon > .icon { display: block; width: 18px; height: 18px; } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable td.expandable-icon, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable td:nth-child(2) > :first-child { color: var(--primary); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable:hover td.expandable-icon, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable:hover td:nth-child(2) > :first-child { color: var(--primary-hover); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded:hover { background: var(--body-fg); color: var(--body-bg); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded td, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded:hover td { font-weight: var(--font-weight-bolder); border-top: none; } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded td.expandable-icon, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded td:nth-child(2) > :first-child, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded:hover td.expandable-icon, .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded:hover td:nth-child(2) > :first-child { color: var(--body-bg); } .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded + tr:not(.expandable) td:not(.expandable-icon), .smart-table[data-gw="ExpandableSmartTable"] > table > tbody > tr.expandable.expandable-expanded:hover + tr:not(.expandable) td:not(.expandable-icon) { border-top: none; } .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty) { background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='-1 -1 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9993 10C15.263 10 14.666 10.597 14.666 11.3333C14.666 12.0697 15.263 12.6667 15.9993 12.6667C16.7357 12.6667 17.3327 12.0697 17.3327 11.3333C17.3327 10.597 16.7357 10 15.9993 10Z' fill='%23808080' /%3E%3Cpath d='M14.666 16C14.666 15.2636 15.263 14.6667 15.9993 14.6667C16.7357 14.6667 17.3327 15.2636 17.3327 16C17.3327 16.7364 16.7357 17.3333 15.9993 17.3333C15.263 17.3333 14.666 16.7364 14.666 16Z' fill='%23808080' /%3E%3Cpath d='M14.666 20.6667C14.666 19.9303 15.263 19.3333 15.9993 19.3333C16.7357 19.3333 17.3327 19.9303 17.3327 20.6667C17.3327 21.403 16.7357 22 15.9993 22C15.263 22 14.666 21.403 14.666 20.6667Z' fill='%23808080' /%3E%3Cpath d='M8 1H24V-1H8V1ZM31 8V24H33V8H31ZM24 31H8V33H24V31ZM1 24V8H-1V24H1ZM8 31C4.13401 31 1 27.866 1 24H-1C-1 28.9706 3.02944 33 8 33V31ZM31 24C31 27.866 27.866 31 24 31V33C28.9706 33 33 28.9706 33 24H31ZM24 1C27.866 1 31 4.13401 31 8H33C33 3.02944 28.9706 -1 24 -1V1ZM8 -1C3.02944 -1 -1 3.02944 -1 8H1C1 4.13401 4.13401 1 8 1V-1Z' fill='%23DEDFE4' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; padding-left: 28px; padding-right: 28px; } .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty) button { display: none; } .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty):focus, .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty):focus-within, .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty):focus-visible { background-image: none; padding-left: var(--table-padding-x); padding-right: var(--table-padding-x); } .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty):focus button, .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty):focus-within button, .mobile-ui .smart-table[data-overflowed="1"] td[data-col="ctl"]:not(:empty):focus-visible button { display: inline-block; } [data-gw="SmartTableFilter"] { border-radius: var(--table-border-radius); } [data-gw="SmartTableFilter"] input[type="search"] { width: calc( 100% - 2 * var(--pad)); margin-left: var(--pad); margin-right: var(--pad); margin-bottom: var(--pad); } [data-gw="SmartTableFilter"] .filter-options .filter-options-items { overflow: auto; max-height: 50vh; } [data-gw="SmartTableFilter"] .filter-options .check { padding-left: var(--pad); padding-right: var(--pad); min-height: 2rem; display: flex; align-items: center; } [data-gw="SmartTableFilter"] .filter-options .check label { flex-grow: 1; min-height: 2rem; line-height: 2.3; } [data-gw="SmartTableFilter"] .filter-options .check.check-all { border-bottom: var(--border-default-width) solid var(--border-default-color); margin-bottom: var(--pad-1-4); padding-bottom: var(--pad-1-4); } [data-gw="SmartTableFilter"] .filter-duration { padding-top: var(--pad-1-2); padding-left: var(--pad); padding-right: var(--pad); } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item { margin-bottom: var(--pad-2); } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item:last-child { margin-bottom: var(--pad); } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .label { font-size: var(--font-size-sm); margin-bottom: var(--pad-1-2); } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group { display: flex; } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group .input-label-inset { position: relative; max-width: 6.25rem; margin-right: var(--pad); } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group .input-label-inset:last-child { margin-right: 0; } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group .input-label-inset input + label { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); text-transform: lowercase; margin-right: var(--pad-1-2); color: var(--input-placeholder); pointer-events: none; } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group .input-label-inset input { width: 100%; -moz-appearance: textfield; } [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group .input-label-inset input::-webkit-outer-spin-button, [data-gw="SmartTableFilter"] .filter-duration .filter-duration-item .input-group .input-label-inset input::-webkit-inner-spin-button { -webkit-appearance: none; } [data-gw="SmartTableFilter"] .filter-buttons { display: flex; justify-content: space-between; padding-top: var(--pad); padding-left: var(--pad); padding-right: var(--pad); } [data-gw="SmartTableFilter"] .filter-buttons button { margin-right: var(--pad-4); } [data-gw="SmartTableFilter"] .filter-buttons button:last-child { margin-right: 0; } .mobile-ui [data-gw="SmartTableFilter"] input[type="search"] { margin-top: var(--pad-2); } .mobile-ui [data-gw="SmartTableFilter"] .input-label-inset { max-width: 33%; } .property-table > .property { margin-bottom: 10px; } .property-table > .property > .label { font-size: 11px; font-weight: bold; color: var(--primary); margin-bottom: 3px; } .property-table > .property > .value { white-space: pre-wrap; font-weight: 500; } .photo-upload-box { position: relative; white-space: normal; } .photo-upload-box .empty { width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; display: inline-flex; font-weight: bold; color: white; background: var(--icon-static-color); padding: 30px; } .photo-upload-box img { max-height: 100%; width: auto; display: block; } .photo-upload-box .overlay { display: none; } .photo-upload-box:hover .overlay { cursor: pointer; position: absolute; background: #000000aa; display: flex; align-items: center; justify-content: center; display: flex; width: 100%; height: 100%; top: 0; left: 0; --color: white; } .admin-dialog-mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; } .admin-dialog-mask > .admin-dialog { padding: 20px 32px; background: var(--panel-bg); border-radius: var(--border-radius); box-shadow: var(--drop-shadow-lg); width: auto; min-width: 33vw; max-width: 98vw; max-height: 90vh; overflow: auto; } .admin-dialog-mask > .admin-dialog > .header { position: relative; display: flex; justify-content: space-between; } .admin-dialog-mask > .admin-dialog > .header > h1 { padding: 0 0 2rem 0; margin: 0; font-size: 20px; text-align: left; } .admin-dialog-mask > .admin-dialog > .header > .center:empty { display: none; } .admin-dialog-mask > .admin-dialog > .header > .close { cursor: pointer; width: 40px; height: 40px; padding: 5px; margin-top: -0.5rem; margin-right: -20px; display: flex; align-items: center; justify-content: center; } .admin-dialog-mask > .admin-dialog > .header > .close:hover { --color: black; } .admin-dialog-mask > .admin-dialog > .subtitle { margin-bottom: var(--pad-2); } .admin-dialog-mask > .admin-dialog > .body .form-buttons:last-child { margin-right: -1rem; margin-bottom: -4px; margin-top: var(--pad-2); } .admin-dialog-mask.fullscreen > .admin-dialog { height: calc(100vh - 100px); width: calc(100vw - 60px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .mobile-ui .admin-dialog-mask .admin-dialog { padding: 1rem; width: 100%; max-width: 100vw; } .mobile-ui .admin-dialog-mask .admin-dialog > .body .form-buttons:last-child { margin-right: 0; margin-bottom: 0; } .mobile-ui .admin-dialog-mask > .popup-button-close + .admin-dialog > .header > .close { display: none; } .card-switcher > :not(:first-child) { display: none !important; } .date-range-input { display: contents; } @media screen and (max-width: 575.98px) { [data-gw="Main.NotesDialog"] > .admin-dialog { min-width: 100vw; } } [data-gw="Main.NotesDialog"] .comment-box { display: flex; flex-flow: column; align-items: flex-start; } [data-gw="Main.NotesDialog"] .comment-box > textarea { flex: 1; width: 100%; min-height: 150px; margin-bottom: var(--pad); } [data-gw="Main.NotesDialog"] .comment-box > .buttons { width: 100%; display: flex; justify-content: flex-end; } [data-gw="Main.NotesDialog"] .comment-box > .buttons > button { margin-left: var(--pad); } [data-gw="Main.NotesDialog"] .notes-list { padding-top: var(--pad); margin-top: var(--pad-2); } [data-gw="Main.NotesDialog"] .notes-list > .note { background-color: var(--body-bg); border-radius: var(--border-radius); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--body-fg); padding: var(--pad); margin-bottom: var(--pad); } [data-gw="Main.NotesDialog"] .notes-list > .note > .header { padding-bottom: var(--pad); margin-bottom: var(--pad); display: flex; border-bottom: var(--border-default-width) solid var(--border-default-color); color: var(--table-muted-color); } [data-gw="Main.NotesDialog"] .notes-list > .note > .header > .author { flex: 1; } [data-gw="Main.NotesDialog"] .notes-list > .note > .body { white-space: pre-wrap; font-weight: var(--font-weight-bolder); } [data-gw="Main.NotesDialog"] .notes-list + .form-buttons { margin-bottom: 0; } .list-select-dialog > div > .items-list { list-style: none; margin: 0 -1vw 20px -1vw; padding: 0 1vw; max-height: calc(89vh - 200px); overflow: auto; } .list-select-dialog > div > .items-list > li { background-color: var(--body-bg); border-radius: var(--border-radius); padding: 0 var(--pad); margin-bottom: var(--pad-1-2); } .list-select-dialog > div > .items-list > li:first-child:last-child { margin-bottom: 0; } .list-select-dialog > div > .items-list > li .form-field, .list-select-dialog > div > .items-list > li .ack-checkbox { margin-bottom: 0; } .list-select-dialog > div > .items-list > li .check { display: flex; align-items: center; } .list-select-dialog > div > .items-list > li .check label { flex-grow: 1; margin-left: var(--pad); line-height: 1.8; min-height: 28px; font-weight: var(--font-weight-bold); } .entity-list-editor { display: grid; grid-template-columns: minmax(calc( 992px / 2), 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'header header' 'table detail'; height: calc(100vh - (44px + ( 2 * 13px ) + ( 2 * var(--body-padding) ) )); } .entity-list-editor > .header { grid-area: header; display: flex; justify-content: space-between; } .entity-list-editor > .header > .title { font-size: var(--heading-3); font-weight: var(--font-weight-bolder); padding: 10px; } .entity-list-editor > .header > .toolbar { display: flex; align-items: center; padding: 10px; } .entity-list-editor > .header > .toolbar > select, .entity-list-editor > .header > .toolbar > input { width: auto; } .entity-list-editor > .header > .toolbar > .form-field { position: relative; margin: 0; } .entity-list-editor > .header > .toolbar > .form-field > label { position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: bold; color: var(--icon-static-color); } .entity-list-editor > .header > .toolbar > *:not(:last-child) { margin-right: 5px; } .entity-list-editor > .header > .toolbar > .fill { flex: 1; } .entity-list-editor > .detail { grid-area: detail; border-left: 1px solid var(--border-default-color); padding: 10px; overflow: auto; } .entity-list-editor > .detail h1 { margin-bottom: 20px; } .entity-list-editor > .detail h2 { font-size: 16px; margin-top: 40px; } .entity-list-editor > .detail .photo-upload-box { display: inline-block; width: 100%; overflow: hidden; } .entity-list-editor > .detail .photo-upload-box img { width: 100%; } .entity-list-editor > .detail .side-buttons { float: right; margin-left: 20px; margin-bottom: 20px; display: flex; flex-direction: column; background: var(--panel-bg); padding: 10px; border-radius: 6px; } .entity-list-editor > .detail .side-buttons:empty { display: none; } .entity-list-editor > .detail .side-buttons > *:not(:first-child) { margin-top: 10px; } .entity-list-editor > .detail .fullscreen-message { text-align: center; } .entity-list-editor > .detail table { width: 100%; border-spacing: 0; border-collapse: collapse; } .entity-list-editor > .detail table td, .entity-list-editor > .detail table th { padding: var(--pad)/4 var(--pad)/2; text-align: left; border: 1px solid var(--border-default-color); } .entity-list-editor > .detail table th { background: var(--border-default-color); } .entity-list-editor > .detail table td.right, .entity-list-editor > .detail table th.right { text-align: right; } .entity-list-editor > .detail table td.center, .entity-list-editor > .detail table th.center { text-align: center; } .entity-list-editor > .smart-table { grid-area: table; } .entity-list-editor > .smart-table img { max-height: 40px; width: auto; } .entity-list-editor > .smart-table th, .entity-list-editor > .smart-table td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .entity-list-editor > .smart-table [data-col="ctl"] { text-align: right; } .entity-list-editor.no-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'header' 'table'; } .editable-item-selector { display: flex; flex-direction: column; } .editable-item-selector > .vertical-menu { flex: 1; overflow: auto; } .editable-item-selector > .vertical-menu > .empty { text-align: center; color: var(--table-muted-color); font-weight: bold; margin-top: var(--pad); } .editable-item-selector > .vertical-menu > .item { padding: 0 var(--pad-1-2) 0 0; line-height: var(--button-line-height); cursor: default; } .editable-item-selector > .vertical-menu > .item > .name { flex: 1; text-decoration: none; padding: var(--pad) 0 var(--pad) var(--pad); cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .editable-item-selector > .footer { order: -1; padding-bottom: var(--pad); border-bottom: var(--border-default-width) solid var(--border-default-color); margin-bottom: var(--pad); } .tabbed-card-panel { display: flex; flex-direction: column; } .tabbed-card-panel > [data-gw="Widgets.CardSwitcher"] { flex: 1; } .drag-container { position: relative; } .drag-container.dragging label { pointer-events: none; } [data-format="doughnut"] > canvas { vertical-align: middle; } [data-format="doughnut"] > canvas + span { margin-left: var(--pad-1-2); } .stepper { display: grid; justify-content: center; justify-items: center; align-items: start; max-width: 100%; margin-left: auto; margin-right: auto; grid-auto-columns: 1fr; grid-auto-flow: column; margin-top: 1rem; margin-bottom: 2.5rem; } .stepper .step { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: silver; gap: var(--pad-1-4); position: relative; text-decoration: none; } .stepper .step::before, .stepper .step::after { content: ''; position: absolute; top: 1.25rem; width: 50%; border: var(--border-default-width) solid var(--border-default-color); } .stepper .step::before { left: -50%; width: 100%; } .stepper .step::after { left: 50%; border: var(--border-default-width) solid var(--border-default-color); } .stepper .step:first-child::before { display: none; } .stepper .step:last-child::after { display: none; } .stepper .step.progress::after { animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-name: reveal-50; animation-direction: normal; animation-fill-mode: backwards; animation-delay: .375s; } .stepper .step.active .step-number { background: var(--panel-fg); color: var(--panel-bg); border-color: var(--panel-fg); } .stepper .step.active::after { border-color: var(--panel-fg); z-index: 1; } .stepper .step.complete.clickable .step-number { cursor: pointer; } .stepper .step.complete .step-number { background: var(--success); color: var(--panel-bg); border-color: var(--success); } .stepper .step.complete::after { width: 100%; z-index: 1; border-color: var(--success); } .stepper .step.complete:has(+ *:not(.complete)) .step-number { animation-duration: .5s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-name: reveal-bg-border; animation-direction: normal; animation-fill-mode: backwards; } .stepper .step.complete:has(+ *:not(.complete))::after { animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-name: reveal-50-100; animation-direction: normal; animation-fill-mode: backwards; } .stepper .step .step-number { display: flex; align-items: center; justify-content: center; border-radius: 2.5rem; width: 2.5rem; height: 2.5rem; background: var(--panel-bg); color: var(--panel-fg); border: 2px solid var(--border-default-color); font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); z-index: 2; cursor: default; } .stepper .step .step-number svg { width: 1.125rem; height: 1.125rem; } .stepper .step .step-label { color: var(--panel-fg); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); text-align: center; } .notify-bar { position: fixed; display: inline-flex; align-items: center; overflow: hidden; min-height: 3rem; top: .7rem; border-radius: var(--border-radius); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } .notify-bar .text { flex: 1; text-align: center; max-width: calc(70vw); padding: 4px 15px; line-height: 1.5; font-weight: 500; } .notify-bar .text strong, .notify-bar .text b { font-weight: bold; } .notify-bar .status-icon { margin-left: 20px; border-radius: 50px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: white; } .notify-bar .status-icon > .icon { width: 16px; height: 16px; } .notify-bar .pad { width: 20px; height: 1px; display: inline-block; } .notify-bar a.close { line-height: 1; margin: 0 10px; padding: 10px; text-decoration: none; font-size: 18px; } .mobile-ui .notify-bar a.close { padding: 15px; } .notify-bar a:not(.close) { font-weight: bold; text-decoration: underline; cursor: pointer; } .notify-bar a:not(.close):hover { text-decoration: none; } .notify-bar[data-kind=error] { background: var(--error); } .notify-bar[data-kind=error], .notify-bar[data-kind=error] a { color: var(--error-text); } .notify-bar[data-kind=info] { background: var(--info); } .notify-bar[data-kind=info], .notify-bar[data-kind=info] a { color: var(--info-text); } .notify-bar[data-kind=success] { background: var(--success); } .notify-bar[data-kind=success], .notify-bar[data-kind=success] a { color: var(--success-text); } .notify-bar[data-kind=success] .status-icon { --color: var(--success); } .notify-bar[data-kind=warning] { background: var(--warning); } .notify-bar[data-kind=warning], .notify-bar[data-kind=warning] a { color: var(--warning-text); } .mask-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--overlay-mask-color); } .mask-overlay > .pad-top { flex: 1; } .mask-overlay > .pad-bottom { flex: 6; } .mobile-mask-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2000; display: flex; background: var(--overlay-mask-color); } .mobile-mask-overlay.align-left { flex-direction: row; align-items: stretch; justify-content: flex-start; } .mobile-mask-overlay.align-left > * { height: 100%; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; max-width: calc(100% - 75px); overflow: auto; position: relative; } .mobile-mask-overlay.align-bottom { flex-direction: column; align-items: stretch; justify-content: flex-end; } .mobile-mask-overlay.align-bottom > * { width: auto !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; max-height: calc(100% - 70px); overflow: auto; position: relative; } .mobile-mask-overlay.align-fullscreen { flex-direction: column; align-items: stretch; justify-content: flex-end; } .mobile-mask-overlay.align-fullscreen > * { width: auto !important; border-radius: 0 !important; overflow: auto; position: relative; flex: 1 0 auto; min-height: 0; } .mobile-mask-overlay .popup-button-close { display: block; width: 2rem; height: 2rem; border: none; padding: 0; font-size: 0; margin-left: auto; position: absolute; z-index: 1; top: var(--pad); right: var(--pad); background-color: transparent; background-repeat: no-repeat; background-size: 1.75rem 1.75rem; background-position: center; background-image: url(/icons/close.svg); cursor: pointer; } [data-gw="Main.ModulesScreen"] > .header .nav-mobile-expander, [data-gw^="Admin."] > .header .nav-mobile-expander, [data-gw^="Debug."] > .header .nav-mobile-expander { display: none; } .main-screen { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'header header' 'sidebar body' 'sidebar footer'; } @media screen and (max-width: 575.98px) { .main-screen:not([data-gw="Main.ModulesScreen"]) > .header .logo { padding: 0; } .main-screen:not([data-gw="Main.ModulesScreen"]) > .header .logo .icon { height: 0; } } .main-screen > .header { grid-area: header; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; background: var(--nav-header-bg); color: var(--nav-header-fg); --color: var(--nav-header-fg); padding: .8125rem .5rem; position: relative; } @media screen and (min-width: 1920px) { .main-screen > .header { width: 100%; margin-left: auto; margin-right: auto; z-index: 0; position: relative; } } .main-screen > .header[data-anim="ringing"] { animation: 2s ease-in 0s infinite running incomming-call-header; } .main-screen > .header[data-anim="calling"] { animation: 3s ease-in 0s infinite running on-call-header; } .main-screen > .header .modules { display: flex; align-items: center; align-self: stretch; padding: var(--pad) var(--pad); cursor: pointer; } .main-screen > .header .logo { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: center; padding: 0 var(--pad); cursor: pointer; transition: padding var(--transition-time-long); --color: var(--nav-header-fg); } .main-screen > .header .logo .icon { transition: height var(--transition-time-long); width: auto; height: 2rem; max-width: 50vmin; } .main-screen > .header .title { font-weight: var(--font-weight-bolder); font-size: var(--font-size-lg); white-space: nowrap; display: flex; align-items: center; align-self: stretch; padding: 0 var(--pad); cursor: default; margin-right: auto; } @media screen and (max-width: 575.98px) { .main-screen > .header .title { padding-left: 0; } } .main-screen > .header .title .icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-right: .5rem; } .main-screen > .header .app-title { font-weight: var(--font-weight-bolder); margin-right: var(--pad); white-space: nowrap; } .main-screen > .header .app-status { margin-left: var(--pad-1-2); } .main-screen > .header .server-status { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bolder); padding: .3125rem; margin-right: 0; margin-left: var(--pad-1-2); white-space: nowrap; border-radius: 200px; min-width: 22px; min-height: 22px; overflow: hidden; } @media screen and (min-width: 768px) { .main-screen > .header .server-status { margin-left: var(--pad); } } @media screen and (min-width: 992px) { .main-screen > .header .server-status { margin-left: var(--pad-2); margin-right: var(--pad-1-2); } } .main-screen > .header .server-status:empty { padding: 0; margin: 0; display: none; } .main-screen > .header .server-status .icon { flex-shrink: 0; width: calc(0.5 * var(--width)); height: calc(0.5 * var(--height)); } .main-screen > .header .server-status .text { line-height: 1; margin: 0 .3125rem; overflow: hidden; text-overflow: ellipsis; } .main-screen > .header .server-status[data-status="ok"] { background-color: var(--success-light); color: var(--reg-ok-fg); } .main-screen > .header .server-status[data-status="ok"] .icon { --color: var(--success); } .main-screen > .header .server-status[data-status="fail"] { background-color: var(--error-light); color: var(--reg-fail-fg); } .main-screen > .header .server-status[data-status="fail"] .icon { --color: var(--error); } .main-screen > .header .profile { display: flex; align-items: center; align-self: stretch; padding: 0 var(--pad); cursor: pointer; } .main-screen > .header .profile .icon { --color: currentColor; width: 24px; height: 24px; position: relative; } .main-screen > .header .profile .icon::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--color); -webkit-mask: url("/icons/hamburger.svg") center center / 24px 24px no-repeat; mask: url("/icons/hamburger.svg") center center / 24px 24px no-repeat; } @media screen and (min-width: 768px) { .main-screen > .header .profile .icon { position: relative; } .main-screen > .header .profile .icon::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--color); -webkit-mask: url("/icons/user.svg") center center / 24px 24px no-repeat; mask: url("/icons/user.svg") center center / 24px 24px no-repeat; } } .main-screen > .header .profile .name { font-weight: var(--font-weight-bolder); margin-left: var(--pad-1-2); display: none; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (min-width: 992px) { .main-screen > .header .profile .name { max-width: 220px; } } @media screen and (min-width: 1280px) { .main-screen > .header .profile .name { max-width: none; } } @media screen and (min-width: 768px) { .main-screen > .header .profile .name { display: block; } } .main-screen > .admin-body { grid-area: body; display: grid; grid-template-areas: 'sidebar body'; grid-template-columns: min-content auto; overflow-x: auto; overflow-y: hidden; padding: var(--body-padding); } .main-screen > .sidebar, .main-screen > .admin-body > .sidebar { grid-area: sidebar; margin-right: var(--pad-2); width: 196px; overflow: auto; } .main-screen > .body, .main-screen > .admin-body > .body { grid-area: body; padding-top: var(--body-padding); padding-bottom: var(--body-padding); min-height: calc(100vh - 70px); max-height: calc(100vh - 70px); overflow: auto; } .main-screen > .body:has(.form-buttons.fixed), .main-screen > .admin-body > .body:has(.form-buttons.fixed) { min-height: calc(100vh - 70px - 64px); max-height: calc(100vh - 70px - 64px); } .main-screen > .body .page-wrapper, .main-screen > .admin-body > .body .page-wrapper { min-height: 100%; max-height: 100%; display: flex; flex-direction: column; } .main-screen > .body .page-wrapper .page-heading, .main-screen > .admin-body > .body .page-wrapper .page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--panel-padding); } .main-screen > .body .page-wrapper .page-heading .main-title, .main-screen > .admin-body > .body .page-wrapper .page-heading .main-title { margin-bottom: 0; } .main-screen > .body .page-wrapper .page-heading-controls, .main-screen > .admin-body > .body .page-wrapper .page-heading-controls { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; } .main-screen > .footer { grid-area: footer; } .popup-menu .option.separator { height: .5rem; min-height: auto; padding: 0; border-bottom: 1px solid var(--border-default-color); margin-bottom: .5rem; pointer-events: none; } .profile-popup, .profile-popup + .popup-menu { min-width: 200px; } .profile-popup .option, .profile-popup + .popup-menu .option { min-height: 40px; } .profile-popup .option.name { pointer-events: none; } .profile-popup .option.name .option-text { color: var(--table-muted-color); } @media screen and (min-width: 768px) { .profile-popup .option.name { display: none; } .profile-popup .option.name + .separator { display: none; } } .mobile-ui .popup-menu > .popup-button-close + a { margin-top: 2rem; } .desktop-ui .profile-popup { max-width: 450px; width: 280px; } .mobile-ui .public-screen { margin-top: 0; } .public-screen { margin: 50px auto 0 auto; max-width: 400px; padding: 40px; background: var(--panel-bg); box-shadow: var(--drop-shadow-lg); border-radius: var(--border-radius); } .public-screen h1 { text-align: center; margin: 20px 0; color: var(--primary); } .public-screen h2 { text-align: center; font-size: var(--heading-4); margin: var(--pad-2) 0; padding: var(--pad) 0; } .public-screen .icon.logo { display: block; max-width: 160px; max-height: 54px; height: auto; margin-left: auto; margin-right: auto; color: var(--primary-hover); } .public-screen .body form label { font-size: var(--font-size-base); } .public-screen .body form .form-buttons { margin-bottom: 0; } .public-screen .body form .form-message { display: flex; align-items: center; padding: var(--pad-1-2) var(--pad); margin-bottom: var(--pad-2); background-color: var(--error); border-radius: var(--border-radius); font-size: var(--font-size-base); color: var(--panel-bg); min-height: 2rem; } .public-screen .body form .form-message:empty { display: none; } .public-screen .body form .form-message > .icon { width: 1rem; height: 1rem; margin-right: var(--pad-1-2); } .public-screen .error { color: var(--error); font-weight: bold; } .module-chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); grid-template-rows: auto; grid-gap: var(--pad-4); justify-items: stretch; } .module-chooser .module { padding: 1.25rem 2rem; text-decoration: none; border-radius: var(--panel-border-radius); background-color: var(--module-chooser-bg); box-shadow: var(--panel-shadow); display: flex; align-items: center; } .module-chooser .module .logo { border-radius: 100px; align-items: center; justify-content: center; display: flex; margin-right: var(--pad-2); flex: none; color: var(--module-chooser-main); } .module-chooser .module .logo .icon { height: 1.75rem; width: auto; --color: var(--module-chooser-main); } .module-chooser .module .info { flex: 1; } .module-chooser .module .title { font-size: var(--font-size-xl); font-weight: bold; transition: all var(--transition-time); } .module-chooser .module .tagline { font-size: var(--font-size-lg); color: var(--table-muted-color); margin-top: var(--pad-1-2); transition: all var(--transition-time); } .module-chooser .module.disabled { opacity: 0.6; filter: grayscale(1); cursor: not-allowed; box-shadow: var(--drop-shadow-sm); } .module-chooser .module:not(.disabled):hover { box-shadow: var(--panel-shadow-hover); } .module-chooser .module:not(.disabled):hover .title, .module-chooser .module:not(.disabled):hover .tagline { color: var(--module-chooser-main); } [data-gw="Main.AccessDeniedScreen"] .body, [data-gw="Main.MessageScreen"] .body { display: flex; align-items: center; justify-content: center; } [data-gw="Main.ModulesScreen"] .body .main-modules { margin-left: auto; margin-right: auto; padding-top: var(--body-padding); padding-bottom: var(--body-padding); max-width: calc( (1280px * 0.9375) + (var(--body-padding) * 2)); } [data-gw="Main.ModulesScreen"] .body .main-modules-section { margin-top: 4rem; } [data-gw="Main.ModulesScreen"] .body .main-modules-section:first-child { margin-top: 0; } [data-gw="Main.ModulesScreen"] .body .main-modules-section:first-child .main-title { margin-top: calc(2.5vmax - var(--body-padding)); } [data-gw="Main.ModulesScreen"] .body .main-modules-section .main-title { margin: 2rem 0; } [data-gw="Main.ModulesScreen"] .body .module-chooser { grid-gap: calc( 2vmax + 1vmin) calc( 3vmax + 1vmin); } [data-gw="Main.ModulesScreen"] .body .module-chooser .module { transition: all var(--transition-time); min-height: var(--module-chooser-min-height); width: 100%; margin-left: auto; margin-right: auto; } [data-gw="Main.ModulesSelector"] { transform: translate(var(--module-chooser-offset), calc( var(--module-chooser-offset) * -1)); background: var(--module-chooser-bg); border-radius: var(--module-chooser-radius); box-shadow: var(--panel-shadow-hover); grid-template-columns: repeat(1, minmax(220px, 1fr)); width: 51rem; padding: 1.25rem; grid-gap: var(--pad); } [data-gw="Main.ModulesSelector"] .main-modules-section { margin-bottom: var(--pad-1-2); } [data-gw="Main.ModulesSelector"] .main-modules-section:last-child { margin-bottom: 0; } [data-gw="Main.ModulesSelector"] .module-chooser { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 0; } [data-gw="Main.ModulesSelector"] .module { border-radius: var(--module-chooser-radius); padding: var(--pad); align-items: center; box-shadow: none; transition: all var(--transition-time-short); } [data-gw="Main.ModulesSelector"] .module .title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } [data-gw="Main.ModulesSelector"] .module .logo { margin-right: var(--pad); width: 1.5rem; height: 1.5rem; background-color: var(--module-chooser-hover); transition: all var(--transition-time-short); } [data-gw="Main.ModulesSelector"] .module .logo .icon { width: 0.75rem; height: 0.75rem; color: var(--module-chooser-main); --color: var(--module-chooser-main); transition: all var(--transition-time-short); } [data-gw="Main.ModulesSelector"] .module .tagline { display: none; } [data-gw="Main.ModulesSelector"] .module.disabled { opacity: 0.8; } [data-gw="Main.ModulesSelector"] .module:not(.disabled):hover { box-shadow: none; background-color: var(--module-chooser-hover); } [data-gw="Main.ModulesSelector"] .module:not(.disabled):hover .title { color: var(--body-fg) !important; } [data-gw="Main.ModulesSelector"] .module:not(.disabled):hover .logo { background-color: var(--module-chooser-main); } [data-gw="Main.ModulesSelector"] .module:not(.disabled):hover .logo .icon { width: 0.85rem; height: 0.85rem; color: var(--module-chooser-contrast); --color: var(--module-chooser-contrast); } .desktop-ui [data-gw="Main.ModulesSelector"] { max-width: calc( 100vw - (var(--module-chooser-offset) * 2)); max-height: calc(100dvh - 70px); overflow: auto; } .main-about-dialog { padding: 0 1rem; } .main-about-dialog p { margin-bottom: var(--pad); white-space: pre-wrap; } .main-about-dialog a { color: var(--primary); } .main-about-dialog a:hover { color: var(--primary-hover); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"], [data-gw="NewExchange.Screen"] .form-fields-group, .offer-form [data-gw="FormFieldsGroup"], .offer-form .form-fields-group { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; gap: 1rem; justify-content: space-between; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"], [data-gw="NewExchange.Screen"] .form-fields-group { max-width: 25.5rem; } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users [data-gw="UserAccountFieldGroup"] { padding: var(--pad-2); border: var(--border-default-width) solid var(--border-default-color); border-radius: var(--table-border-radius); } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users [data-gw="UserAccountFieldGroup"] .header { display: flex; align-items: center; margin-bottom: var(--pad-1-2); } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users [data-gw="UserAccountFieldGroup"] .header .title { margin-bottom: 0; } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users [data-gw="UserAccountFieldGroup"] .header .tag { margin-left: var(--pad); padding: var(--pad-1-4) var(--pad-1-2); background-color: var(--button-switcher-active-bg); border-radius: var(--border-radius-sm); text-transform: uppercase; color: var(--button-switcher-active-fg); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); min-height: 1.625rem; line-height: 1.625; } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users [data-gw="UserAccountFieldGroup"] .header .tag:empty { display: none; } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users [data-gw="UserAccountFieldGroup"] .form-field:last-child { margin-bottom: 0; } [data-gw="NewExchange.Screen"] .form-fields-group .setup-users .account-fields { display: flex; flex-direction: column; gap: var(--pad); margin-bottom: var(--panel-padding); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers > input { width: 100%; margin-bottom: var(--pad-2); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers > input:has(+ .checkbox-group:empty) { margin-bottom: 0; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group { max-height: calc(100vh - 441px); min-height: 64px; overflow-y: auto; padding: var(--pad-1-4); scrollbar-width: thin; scrollbar-color: var(--border-default-color) var(--table-bg); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group:empty { min-height: auto; padding: 0; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group .check { margin: 0; padding-left: var(--pad); padding-right: var(--pad); display: flex; align-items: center; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group .check:nth-child(even) { background-color: var(--table-alternation-bg); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group .check > input:checked + label { font-weight: var(--font-weight-bolder); letter-spacing: 0.005em; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group .check > label { display: inline-block; width: 100%; font-weight: var(--font-weight-bold); margin-left: var(--pad); letter-spacing: 0.02em; padding-top: var(--pad); padding-bottom: var(--pad); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .setup-numbers .checkbox-group .check:hover > label { font-weight: var(--font-weight-bolder); letter-spacing: 0.005em; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .form-field-with-suffix > .input-ct { position: relative; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .form-field-with-suffix > .input-ct > input { padding-right: 6.2rem; } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .form-field-with-suffix > .input-ct > input:not(:placeholder-shown) + .suffix { opacity: 1; color: var(--input-fg); font-weight: var(--font-weight-bold); } [data-gw="NewExchange.Screen"] [data-gw="FormFieldsGroup"] .form-field-with-suffix > .input-ct > .suffix { position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; user-select: none; color: var(--table-muted-color); background-color: var(--panel-bg); opacity: 0.5; transition: opacity .75s, color .75s; pointer-events: none; } [data-gw="NewOffer.Screen"] .stepper, [data-gw="OfferDetail.Screen"] .stepper { min-width: 34.875rem; max-width: 34.875rem; } [data-gw="NewOffer.Screen"] .form-fields-group [data-gw="SpinnerField"] .input-ct { max-width: max-content; } [data-gw="NewExchange.Screen"] .stepper { min-width: 19.125rem; max-width: 19.125rem; } .offer-form .grid-special-requirements { display: grid; grid-template-columns: 1fr 8.5rem 13rem 2rem; grid-auto-flow: initial; row-gap: var(--pad-1-2); column-gap: var(--pad-2); width: 100%; } .offer-form .grid-special-requirements [data-gw="FormFieldsGroup"] { display: contents; } .offer-form .grid-special-requirements [data-gw="FormFieldsGroup"] > .button { align-self: self-start; justify-self: self-start; } .offer-form .grid-special-requirements [data-gw="FormFieldsGroup"] > .button:not(:last-child) { margin-top: var(--pad-2); } .offer-form .grid-special-requirements [data-gw="FormFieldsGroup"]:not(:last-child) { grid-template-rows: 1fr; } .offer-form .grid-special-requirements [data-gw="FormFieldsGroup"]:not(:last-child) > :last-child { display: none; } .offer-form [data-gw="FormFieldsGroup"], .offer-form .form-fields-group { max-width: 48.75rem; } .offer-form [data-gw="FormFieldsGroup"] hr, .offer-form .form-fields-group hr { border-color: var(--border-default-color); border-style: solid; border-bottom: 0; } .offer-form [data-gw="FormFieldsGroup"] .title, .offer-form .form-fields-group .title { margin-top: 1.25rem; margin-bottom: 1rem; } .offer-form [data-gw="FormFieldsGroup"] h3.title, .offer-form .form-fields-group h3.title { margin-top: 0; margin-bottom: var(--pad-2); } .offer-form [data-gw="FormFieldsGroup"] .grid, .offer-form .form-fields-group .grid { display: grid; row-gap: var(--pad-1-2); column-gap: var(--pad-2); width: 100%; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: var(--pad); } .offer-form [data-gw="FormFieldsGroup"] .grid.grid-1-2, .offer-form .form-fields-group .grid.grid-1-2 { grid-template-columns: 1fr 2fr; } .offer-form [data-gw="FormFieldsGroup"] .grid:last-child, .offer-form .form-fields-group .grid:last-child { margin-bottom: 0; } .offer-form [data-gw="FormFieldsGroup"] .panel-container > button, .offer-form [data-gw="FormFieldsGroup"] .entity-list-editor > button, .offer-form .form-fields-group .panel-container > button, .offer-form .form-fields-group .entity-list-editor > button { margin-bottom: var(--pad); } .offer-form [data-gw="FormFieldsGroup"] [data-gw="ListFormFieldsGroup"], .offer-form .form-fields-group [data-gw="ListFormFieldsGroup"] { margin-bottom: var(--pad-2); } .offer-form [data-gw="FormFieldsGroup"] [data-gw="ListFormFieldsGroup"] [data-gw="FormFieldsGroup"]:first-child:last-child .button:not(:last-child), .offer-form .form-fields-group [data-gw="ListFormFieldsGroup"] [data-gw="FormFieldsGroup"]:first-child:last-child .button:not(:last-child) { opacity: 0.5; filter: grayscale(1); pointer-events: none; } .offer-form [data-gw="FormFieldsGroup"] .form-field, .offer-form .form-fields-group .form-field { margin-bottom: 0; } .offer-form [data-gw="FormFieldsGroup"] .input-stepper, .offer-form [data-gw="FormFieldsGroup"] .select-input, .offer-form .form-fields-group .input-stepper, .offer-form .form-fields-group .select-input { margin-bottom: var(--pad); } [data-gw="OfferDetail"] { font-size: 1.25rem; max-width: 1024px; margin: 0 auto; margin-bottom: var(--pad-2); } [data-gw="OfferDetail"] .logo { display: flex; align-items: center; max-width: 178px; max-height: 40px; color: var(--primary); } [data-gw="OfferDetail"] .logo img, [data-gw="OfferDetail"] .logo svg { max-width: 178px; max-height: 40px; margin-right: var(--pad-1-4); } [data-gw="OfferDetail"] .logo img + .title, [data-gw="OfferDetail"] .logo svg + .title { margin: 0; font-size: 2.375rem; font-weight: var(--font-weight-bolder); letter-spacing: -1px; } [data-gw="OfferDetail"] .header { display: flex; justify-content: space-between; margin-bottom: 2.5rem; } [data-gw="OfferDetail"] .header .info { display: flex; flex-direction: column; gap: 0.25rem; text-align: right; font-size: var(--font-size-lg); } [data-gw="OfferDetail"] .header .info .title { color: var(--primary); font-size: var(--heading-5); } [data-gw="OfferDetail"] .header .info .title > :first-child { font-weight: var(--font-weight-bolder); } [data-gw="OfferDetail"] .header .info .id.stamp { display: inline-block; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-name: stamp; animation-direction: normal; animation-fill-mode: backwards; } [data-gw="OfferDetail"] .footer { display: flex; justify-content: space-between; margin-top: 2.5rem; align-items: center; } [data-gw="OfferDetail"] .footer .subtitle { color: var(--primary); font-weight: var(--font-weight-bold); margin: 0; letter-spacing: 0.01em; } [data-gw="OfferDetail"] .footer .address { font-size: var(--font-size-base); color: var(--table-muted-color); line-height: 1.25; } [data-gw="OfferDetail"] .section { margin-bottom: 2.5rem; } [data-gw="OfferDetail"] .section h4 { page-break-after: avoid; color: var(--primary); margin-bottom: var(--pad-2); } [data-gw="OfferDetail"] .section:first-child h4, [data-gw="OfferDetail"] .section:nth-child(2) h4 { margin-bottom: var(--pad); } [data-gw="OfferDetail"] .section p { color: var(--table-muted-color); white-space: pre-wrap; line-height: 1.25; font-size: var(--font-size-lg); margin-top: var(--pad); } [data-gw="OfferDetail"] .subtitle { margin-top: var(--pad-2); margin-bottom: var(--pad); } [data-gw="OfferDetail"] .grid { display: grid; grid-template-columns: 75% 25%; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } [data-gw="OfferDetail"] .grid > :nth-child(2n) { text-align: right; } [data-gw="OfferDetail"] .grid.grid-col-2 { grid-template-columns: 30% 70%; } [data-gw="OfferDetail"] .grid.grid-col-2 > * { text-align: left; } [data-gw="OfferDetail"] .grid.with-header > :nth-child(1), [data-gw="OfferDetail"] .grid.with-header > :nth-child(2) { background-color: var(--secondary-hover); color: var(--primary); font-weight: var(--font-weight-bolder); border: none; padding: 0.5rem var(--pad); } [data-gw="OfferDetail"] .grid.with-totals { margin-bottom: 2rem; } [data-gw="OfferDetail"] .grid.with-totals > :nth-last-child(-n+2), [data-gw="OfferDetail"] .grid.with-totals .totals { padding-top: var(--pad); color: var(--primary); font-weight: var(--font-weight-bolder); border-color: var(--primary); } [data-gw="OfferDetail"] .grid.with-totals > :last-child { text-align: right; white-space: nowrap; } [data-gw="OfferDetail"] .grid.m-top { margin-top: 2rem; } [data-gw="OfferDetail"] .grid > * { border-bottom: 2px solid var(--body-bg); padding: 0.5rem var(--pad); } [data-gw="OfferDetail"] .grid p { grid-column: span 2; border: none; margin-top: var(--pad-1-2); margin-bottom: 0; font-size: var(--font-size-base); } [data-gw="OfferDetail"] .grid p:empty { padding: 0; margin: 0; } [data-gw="OfferDetail.PDF"] { font-size: 1.25rem; max-width: 1024px; margin: 0 auto var(--pad-2); } [data-gw="OfferDetail.PDF"] .pdf-pages { display: flex; flex-direction: column; align-items: center; } [data-gw="OfferDetail.PDF"] .pdf-pages canvas { border-top: 8px solid gray; width: 100%; } [data-gw="OfferDetail.PDF"] .pdf-pages canvas:first-child { border-top: none; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper { max-width: 34rem; align-items: center; justify-content: center; margin: 0 auto; padding: 2.5rem 0; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper > .illustration { margin-top: 2.5rem; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper > .title { margin: 0; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper .status-list { display: flex; flex-direction: column; margin: 2rem 0; gap: var(--pad); } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper .status-list .status-item { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); letter-spacing: 0.01em; gap: .625rem; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper .status-list .status-item .icon { width: 1.25rem; height: 1.25rem; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper .status-list .status-item .icon.loading { color: var(--primary); animation: full-rotate-left 1s linear infinite; } [data-gw="ExchangeSubmitted.Screen"] .page-wrapper .nav-buttons { display: flex; align-items: center; justify-content: center; gap: var(--panel-padding); padding-bottom: 5rem; } [data-gw="PriceChange.Screen"] .smart-table { margin-top: var(--pad); } [data-gw="PriceChange.Screen"] .smart-table input { width: 100%; } [data-gw="PriceChange.Screen"] .smart-table th[data-col="name"] { width: 30%; } [data-gw="PriceChange.Screen"] .smart-table th[data-col="description"] { width: 50%; } [data-gw="PriceChange.Screen"] .smart-table th[data-col="cost_price"] { width: 10%; min-width: 160px; } [data-gw="PriceChange.Screen"] .smart-table th[data-col="sell_price"] { width: 10%; min-width: 160px; } [data-gw="PriceChange.Hardware"], [data-gw="PriceChange.Table"] { height: calc(100vh - 17rem); } [data-gw="PriceChange.Hardware"] tr.header td, [data-gw="PriceChange.Hardware"] tr.header th, [data-gw="PriceChange.Table"] tr.header td, [data-gw="PriceChange.Table"] tr.header th { font-weight: bold; background: var(--table-highlight-bg) !important; font-size: var(--font-size-xl); padding-top: var(--pad); padding-bottom: var(--pad); } [data-gw="ExchangeListing.Screen"] .icon { width: 1.25rem; height: 1.25rem; } [data-gw="ExchangeListing.Screen"] .icon.loading { color: var(--primary); animation: full-rotate-left 1s linear infinite; } [data-gw="Admin.Permissions"] .smart-table { max-height: calc(100dvh - 282px); } [data-gw="Admin.Permissions"] .smart-table tr.header td, [data-gw="Admin.Permissions"] .smart-table tr.budget_header td { font-weight: bold; background: var(--table-highlight-bg) !important; } [data-gw="Admin.Permissions"] .smart-table tr.header td { font-size: var(--font-size-xl); padding-top: var(--pad); padding-bottom: var(--pad); } [data-gw="Admin.Permissions"] .smart-table tr.budget_header td { font-size: var(--font-size-base); padding-top: var(--pad-1-2); padding-bottom: var(--pad-1-2); } [data-gw="Admin.Permissions"] .smart-table th { width: 140px; } [data-gw="Admin.Permissions"] .smart-table th:last-child { width: auto; } [data-gw="Admin.Permissions"] .smart-table th[data-col="name"] { width: 300px; } [data-gw="Admin.Permissions"] .smart-table td { padding-top: var(--pad-1-4); padding-bottom: var(--pad-1-4); height: 2rem; opacity: 0.65; } [data-gw="Admin.Permissions"] .smart-table tr:not(.header):not(.budget_header):hover > td { opacity: 1; } [data-gw="NewOffer.Screen"] .button-group { display: flex; flex-direction: row; gap: var(--pad-1-2); } [data-gw="NewOffer.Screen"] .button-group .step-buttons { display: contents; } [data-gw="BudgetTable"] .smart-table .budget-table-checkbox { position: absolute; left: calc(100% - 60px); top: 0; border: 1px solid gray; border-left: none; padding: 8px 8px 8px 28px; transition: left 200ms; border-radius: 8px; } [data-gw="BudgetTable"] .smart-table:hover .budget-table-checkbox, [data-gw="BudgetTable"] .smart-table .budget-table-checkbox:has(input:checked) { left: calc(100% - 20px); } @media print { @page { size: A4; width: 210mm; height: 297mm; margin-bottom: 15mm; counter-reset: pages; counter-increment: pages; @bottom-right { content: counter(page) "/" counter(pages); color: var(--table-muted-color); font-size: var(--heading-5); white-space: nowrap; } } @supports (-moz-appearance: none) { html { font-size: 14.375px; } } html, body { background: white; overflow: initial; } html > .application > .main-screen, body > .application > .main-screen { display: block; } [data-gw="NewOffer.Screen"] > .header, [data-gw="OfferDetail.Screen"] > .header, [data-gw="Budget.Screen"] > .header { display: none; } [data-gw="NewOffer.Screen"] > .body, [data-gw="OfferDetail.Screen"] > .body, [data-gw="Budget.Screen"] > .body { padding: 5rem 0; max-height: initial !important; box-decoration-break: clone; overflow: hidden; } [data-gw="NewOffer.Screen"] > .body .form-buttons, [data-gw="NewOffer.Screen"] > .body .detail-toolbar, [data-gw="OfferDetail.Screen"] > .body .form-buttons, [data-gw="OfferDetail.Screen"] > .body .detail-toolbar, [data-gw="Budget.Screen"] > .body .form-buttons, [data-gw="Budget.Screen"] > .body .detail-toolbar { display: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .stepper, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .stepper, [data-gw="Budget.Screen"] > .body .page-wrapper .stepper { display: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .smart-table, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .smart-table, [data-gw="Budget.Screen"] > .body .page-wrapper .smart-table { max-width: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .smart-table > table td, [data-gw="NewOffer.Screen"] > .body .page-wrapper .smart-table > table th, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .smart-table > table td, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .smart-table > table th, [data-gw="Budget.Screen"] > .body .page-wrapper .smart-table > table td, [data-gw="Budget.Screen"] > .body .page-wrapper .smart-table > table th { white-space: normal; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .smart-table .budget-table-checkbox, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .smart-table .budget-table-checkbox, [data-gw="Budget.Screen"] > .body .page-wrapper .smart-table .budget-table-checkbox { display: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .smart-table.budget-table, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .smart-table.budget-table, [data-gw="Budget.Screen"] > .body .page-wrapper .smart-table.budget-table { display: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .smart-table.budget-table.export-selected, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .smart-table.budget-table.export-selected, [data-gw="Budget.Screen"] > .body .page-wrapper .smart-table.budget-table.export-selected { display: block; } [data-gw="NewOffer.Screen"] > .body .page-wrapper > .stepper, [data-gw="OfferDetail.Screen"] > .body .page-wrapper > .stepper, [data-gw="Budget.Screen"] > .body .page-wrapper > .stepper { display: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper > br, [data-gw="OfferDetail.Screen"] > .body .page-wrapper > br, [data-gw="Budget.Screen"] > .body .page-wrapper > br { display: none; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor { box-shadow: none; width: 100%; border-radius: 0; max-width: none; margin: 0; padding-top: 0; padding-left: 0; padding-right: 0; overflow: initial; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .header, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .header, [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .footer, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .footer, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .header, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .header, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .footer, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .footer, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .header, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .header, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .footer, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .footer { position: fixed; left: 0; right: 0; margin: 0; height: 3.75rem; overflow: visible; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .header img, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .header img, [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .header svg, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .header svg, [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .footer img, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .footer img, [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .footer svg, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .footer svg, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .header img, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .header img, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .header svg, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .header svg, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .footer img, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .footer img, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .footer svg, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .footer svg, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .header img, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .header img, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .header svg, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .header svg, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .footer img, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .footer img, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .footer svg, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .footer svg { max-width: 178px; max-height: 40px; width: 100%; height: 100%; object-fit: contain; object-position: left center; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .header, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .header, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .header, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .header, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .header, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .header { top: 0; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .footer, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .footer, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .footer, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .footer, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .footer, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .footer { bottom: 0; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .section .grid, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .section .grid, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .section .grid, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .section .grid, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .section .grid, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .section .grid { page-break-inside: avoid; } [data-gw="NewOffer.Screen"] > .body .page-wrapper .panel-container .section .grid > *, [data-gw="NewOffer.Screen"] > .body .page-wrapper .entity-list-editor .section .grid > *, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .panel-container .section .grid > *, [data-gw="OfferDetail.Screen"] > .body .page-wrapper .entity-list-editor .section .grid > *, [data-gw="Budget.Screen"] > .body .page-wrapper .panel-container .section .grid > *, [data-gw="Budget.Screen"] > .body .page-wrapper .entity-list-editor .section .grid > * { page-break-inside: avoid; } } .screen-print-media > .header { display: none; } .screen-print-media > .body { padding: 5rem 0; max-height: initial !important; box-decoration-break: clone; overflow: hidden; } .screen-print-media > .body .form-buttons, .screen-print-media > .body .detail-toolbar { display: none; } .screen-print-media > .body .page-wrapper .stepper { display: none; } .screen-print-media > .body .page-wrapper .smart-table { max-width: none; } .screen-print-media > .body .page-wrapper .smart-table > table td, .screen-print-media > .body .page-wrapper .smart-table > table th { white-space: normal; } .screen-print-media > .body .page-wrapper .smart-table .budget-table-checkbox { display: none; } .screen-print-media > .body .page-wrapper .smart-table.budget-table { display: none; } .screen-print-media > .body .page-wrapper .smart-table.budget-table.export-selected { display: block; } .screen-print-media > .body .page-wrapper > .stepper { display: none; } .screen-print-media > .body .page-wrapper > br { display: none; } .screen-print-media > .body .page-wrapper .panel-container, .screen-print-media > .body .page-wrapper .entity-list-editor { box-shadow: none; width: 100%; border-radius: 0; max-width: none; margin: 0; padding-top: 0; padding-left: 0; padding-right: 0; overflow: initial; } .screen-print-media > .body .page-wrapper .panel-container .header, .screen-print-media > .body .page-wrapper .entity-list-editor .header, .screen-print-media > .body .page-wrapper .panel-container .footer, .screen-print-media > .body .page-wrapper .entity-list-editor .footer { position: fixed; left: 0; right: 0; margin: 0; height: 3.75rem; overflow: visible; } .screen-print-media > .body .page-wrapper .panel-container .header img, .screen-print-media > .body .page-wrapper .entity-list-editor .header img, .screen-print-media > .body .page-wrapper .panel-container .header svg, .screen-print-media > .body .page-wrapper .entity-list-editor .header svg, .screen-print-media > .body .page-wrapper .panel-container .footer img, .screen-print-media > .body .page-wrapper .entity-list-editor .footer img, .screen-print-media > .body .page-wrapper .panel-container .footer svg, .screen-print-media > .body .page-wrapper .entity-list-editor .footer svg { max-width: 178px; max-height: 40px; width: 100%; height: 100%; object-fit: contain; object-position: left center; } .screen-print-media > .body .page-wrapper .panel-container .header, .screen-print-media > .body .page-wrapper .entity-list-editor .header { top: 0; } .screen-print-media > .body .page-wrapper .panel-container .footer, .screen-print-media > .body .page-wrapper .entity-list-editor .footer { bottom: 0; } .screen-print-media > .body .page-wrapper .panel-container .section .grid, .screen-print-media > .body .page-wrapper .entity-list-editor .section .grid { page-break-inside: avoid; } .screen-print-media > .body .page-wrapper .panel-container .section .grid > *, .screen-print-media > .body .page-wrapper .entity-list-editor .section .grid > * { page-break-inside: avoid; } @keyframes blinking { 0% { visibility: visible; } 50% { visibility: hidden; } } @keyframes incomming-call-header { 0% { background: var(--color-light-bg-hover); } 3% { background: red; } 6% { background: var(--color-light-bg-hover); } 9% { background: red; } 12% { background: var(--color-light-bg-hover); } 15% { background: red; } 18% { background: var(--color-light-bg-hover); } 21% { background: red; } 24% { background: var(--color-light-bg-hover); } } @keyframes on-call-header { 0% { background: #96ec78; } 50% { background: #50ba2b; } 100% { background: #96ec78; } } @keyframes full-rotate-left { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes bump-right { 0% { background-position: 2px center; } 20% { background-position: 6px center; } 40% { background-position: 1px center; } 60% { background-position: 3px center; } 80% { background-position: 1px center; } 100% { background-position: 2px center; } } @keyframes bump-left { 0% { background-position: 17.5px center; } 20% { background-position: 13.5px center; } 40% { background-position: 18.5px center; } 60% { background-position: 16.5px center; } 80% { background-position: 18.5px center; } 100% { background-position: 17.5px center; } } @keyframes reveal-50 { 0% { width: 0%; } 100% { width: 50%; } } @keyframes reveal-50-100 { 0% { border-color: var(--panel-fg); width: 50%; } 50% { border-color: var(--success); } 100% { width: 100%; } } @keyframes reveal-bg-border { 0% { border-color: var(--panel-fg); background-color: var(--panel-fg); } 100% { border-color: var(--success); background-color: var(--success); } } @keyframes stamp { 0% { opacity: 0; transform: scale(100) translate(100%, 100%); filter: drop-shadow(0 0 10px var(--panel-bg)); color: var(--primary); } 15% { opacity: 0; } 50% { opacity: 1; transform: scale(1) translate(0, 0); filter: drop-shadow(0 0 0 var(--panel-bg)); color: var(--primary); } 100% { color: var(--table-muted-color); } } /*# sourceMappingURL=main.css.map */