@charset "UTF-8"; :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.3125; --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(--table-alternation-bg); --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: rgba(53, 100, 239, 0.04); --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; --yellow: #F7C12C; --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); } .illustration { -webkit-filter: var(--illustration-filter) !important; filter: var(--illustration-filter) !important; } .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); } hr { border-color: var(--border-default-color); border-style: solid; border-bottom: none; } html, body, input, textarea, button, select, .select-input { font-family: var(--font-face), sans-serif; -webkit-font-smoothing: antialiased; } 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; text-indent: 1.25rem; } input:not([type=checkbox], [type=radio], [type=range])[type="search"].small, textarea[type="search"].small, select[type="search"].small, .select-input[type="search"].small { text-indent: 1.65rem; } 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; } 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])[type="search"].in-progress, textarea[type="search"].in-progress, select[type="search"].in-progress, .select-input[type="search"].in-progress { background-image: url(/img/dialing-animation.gif); } 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.loading, .select-input.loading { background-image: url(/img/dialing-animation.gif); } 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-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: 5px; } .input-stepper button:last-child { right: 5px; } .input-stepper input.small[type=number] { max-width: 100%; padding-left: 1.75rem !important; padding-right: 1.75rem !important; text-align: center; } .input-stepper input::-webkit-outer-spin-button, .input-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .input-stepper input[type=number] { -moz-appearance: textfield; } a { color: var(--anchor-color); transition: all var(--transition-time-short); } a.underline-on-hover { text-decoration: none; } a.underline-on-hover:hover { text-decoration: underline; } label.disabled { color: var(--input-disabled-fg); } .hidden { display: none !important; } .vhidden { visibility: hidden !important; } .semi-transparent { opacity: .5; } .no-selection { user-select: none !important; } .no-transitions, .no-transitions * { transition: none !important; } .cursor-help { cursor: help !important; } .flex { display: flex; } .flex-column { flex-direction: column; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-space-between { justify-content: space-between; } .gap-1 { gap: var(--pad-1-4) !important; } .gap-2 { gap: var(--pad-1-2) !important; } .gap-3 { gap: var(--pad) !important; } .gap-5 { gap: var(--pad-2) !important; } .w-full { width: 100%; } .w-50 { width: 50%; } .ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-3 { margin-top: var(--pad) !important; } .mt-5 { margin-top: var(--pad-2) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-3 { margin-bottom: var(--pad) !important; } .mb-5 { margin-bottom: var(--pad-2) !important; } .text-muted { color: var(--table-muted-color) !important; } .text-error { color: var(--error) !important; } .text-body { color: var(--body-fg) !important; } .text-italic { font-style: italic !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-center { text-align: center !important; } .text-nowrap { white-space: nowrap; } .text-pre { white-space: pre; } .text-sm { font-size: var(--font-size-sm) !important; } .text-base { font-size: var(--font-size-base) !important; } .overflow-visible { overflow: visible !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); } 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.primary-shadow, .button.primary-shadow { background: var(--primary-hover); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent); } 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: 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.xs.loading .icon, .button.xs.loading .icon { animation: full-rotate-left 2s infinite linear; } 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.yellow { color: var(--yellow); --color: var(--yellow); } .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); overflow: hidden; scrollbar-color: var(--input-border-color) var(--panel-bg); } .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.large > a .icon, .button-switcher.large > button .icon { width: 1.5rem; height: 1.5rem; } .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); } .button-switcher.radios > a, .button-switcher.radios > button { background: transparent !important; color: var(--panel-fg); font-size: var(--font-size-base); padding: 1rem; opacity: 0.7; filter: grayscale(1); } .button-switcher.radios > a.active, .button-switcher.radios > button.active { border-color: var(--primary); opacity: 1; filter: none; } .button-switcher.radios > a:hover, .button-switcher.radios > button:hover { opacity: 1; filter: none; } .button-switcher.radios > a > .icon, .button-switcher.radios > button > .icon { margin-left: 0; margin-right: var(--pad-1-2); } .button-switcher.radios.static-active > a, .button-switcher.radios.static-active > button { pointer-events: none; } .button-switcher.radios.static-active > a:not(.active), .button-switcher.radios.static-active > button:not(.active) { display: none; } .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; letter-spacing: 0.5px; line-height: 1; } .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: center; justify-content: flex-end; margin-bottom: var(--pad); } .form-buttons.centered { justify-content: space-around; } .form-buttons:last-child { margin-bottom: 0; } .form-buttons > * { flex: 0 0 auto; } .form-buttons > *:not(:first-child) { margin-left: var(--pad-1-2); } .form-buttons > .fill { flex: 1; } .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 { margin-bottom: var(--pad-2); } .form-field > label { display: block; margin-bottom: 4px; } .form-field > .message { margin-top: 8px; color: #D23031; font-weight: 500; font-size: 12px; } .form-field > .hint { margin-top: 8px; color: #666; font-weight: 500; font-size: 12px; max-width: 600px; white-space: pre-wrap; } .form-field input:not([type=checkbox]), .form-field textarea, .form-field select, .form-field .select-input { width: 100%; } .form-field.error input, .form-field.error textarea, .form-field.error select, .form-field.error .select-input { border-color: #D23031; } .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 > 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; 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-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; } .error-masked-input { position: relative; } .error-masked-input > .error-marker { position: absolute; background: #f005; pointer-events: none; } .error-masked-input > .error-overlay { position: absolute; background: #ffaaaa; pointer-events: none; padding: 6px; z-index: 1; max-width: 250px; } .error-masked-input > .error-mask { position: fixed; top: -20000px; left: -20000px; pointer-events: none; visibility: hidden; } .popup-parent { position: relative; } .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-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); } .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: 0 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[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: var(--pad); } .property-table > .property > .label { font-size: 11px; font-weight: bold; color: var(--primary); margin-bottom: 2px; } .property-table > .property > .value { white-space: pre-wrap; font-weight: 500; min-height: 1em; } .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; } .admin-dialog-mask.fullscreen-preview > .admin-dialog { padding: 0; position: relative; } .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; } .admin-dialog-mask.fullscreen-preview { cursor: pointer; } .admin-dialog-mask.fullscreen-preview > .admin-dialog { min-width: auto; } .admin-dialog-mask.fullscreen-preview > .admin-dialog img, .admin-dialog-mask.fullscreen-preview > .admin-dialog video { cursor: default; display: block; width: auto; height: auto; max-width: inherit; max-height: inherit; min-width: 100px; min-height: 100px; } .admin-dialog-mask.fullscreen-preview > .admin-dialog > .download-button, .admin-dialog-mask.fullscreen-preview > .admin-dialog > .close-button { position: absolute; top: 1rem; opacity: 0; } .admin-dialog-mask.fullscreen-preview > .admin-dialog > .download-button { right: 4rem; } .admin-dialog-mask.fullscreen-preview > .admin-dialog > .close-button { right: 1rem; } .admin-dialog-mask.fullscreen-preview > .admin-dialog:hover > .download-button, .admin-dialog-mask.fullscreen-preview > .admin-dialog:hover > .close-button { opacity: 1; } .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 > .toolbar { border-bottom: 1px solid var(--border-default-color); padding-bottom: 10px; } .tabbed-card-panel > [data-gw="Widgets.CardSwitcher"] { flex: 1; } .drag-container { position: relative; } .drag-container.dragging label { pointer-events: none; } .smart-textarea { display: flex; align-items: center; justify-content: space-between; border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--border-radius-lg); padding: 3px 16px; background-color: var(--panel-bg); cursor: text; width: 560px; max-width: 100%; position: relative; flex-wrap: wrap; align-items: flex-end; } .smart-textarea .input-wrap { position: relative; height: var(--input-height-sm); flex-shrink: 1; flex-grow: 1; } .smart-textarea:not(:has(.textarea-toolbar)) { border-radius: var(--border-radius); } .smart-textarea > .textarea-toolbar { display: flex; flex-direction: row; align-items: center; position: relative; cursor: default; margin-left: auto; flex-shrink: 1; flex-basis: 1%; flex-grow: 0; } .smart-textarea > .textarea-toolbar > * { margin-right: var(--pad-2); position: relative; overflow: visible; } .smart-textarea > .textarea-toolbar > *::after { content: ''; display: block; width: 1px; height: 20px; background: var(--border-default-color); position: absolute; top: 50%; right: calc( (-1 * var(--pad)) - 1px); transform: translate(0, -50%); cursor: default; } .smart-textarea > .textarea-toolbar > *:last-child { margin-right: 0; } .smart-textarea > .textarea-toolbar > *:last-child::after { display: none; } .smart-textarea textarea { width: 100%; height: 100%; min-height: auto; flex-grow: 1; border-radius: 0; border: 0; padding: 0 .5rem 0 0; resize: none; line-height: 2; } .smart-textarea.expanded { padding-top: var(--pad); flex-wrap: wrap; } .smart-textarea.expanded .input-wrap { height: 96px; width: 100%; } .smart-textarea.expanded .input-wrap textarea { line-height: 1.5; padding-right: 0; overflow-y: auto; } .smart-textarea button { margin-left: auto; } .smart-textarea button.secondary { margin-right: var(--pad-1-2); } .smart-textarea .divider { margin-left: var(--pad-1-2); margin-right: var(--pad); border-right: var(--border-default-width) solid var(--border-default-color); height: 20px; } .mobile-ui .smart-textarea { width: auto; } .thread-content-container .smart-textarea.dragover { z-index: 1; outline-color: silver; } .thread-content-container > *:has(> .smart-textarea)::before { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 0; outline: 0 dashed silver; background: rgba(0, 0, 0, 0.5); pointer-events: none; transition: opacity .25s ease-in; } .thread-content-container > *:has(> .smart-textarea.dragover)::before { opacity: 1; } .smart-textarea { transition: outline .25s ease-in; outline: 4px dashed transparent; outline-offset: -4px; } .smart-textarea .char-counter { width: 0; height: 0; opacity: 0; overflow: hidden; } .smart-textarea.expanded .char-counter { transition: opacity 1.125s ease-out .125s; width: 340px; max-width: 100%; } .smart-textarea.expanded .char-counter.visible { height: auto; overflow: visible; margin-top: .5rem; margin-bottom: var(--pad-1-2); opacity: 1; } .smart-textarea .input-wrap > .error-marker { position: absolute; background: #f005; pointer-events: none; } .smart-textarea .input-wrap > .error-marker.with-icon { background: none; } .smart-textarea .input-wrap > .error-overlay { position: absolute; background: #ffaaaa; pointer-events: none; padding: 6px; z-index: 1; max-width: 250px; } .smart-textarea .input-wrap > .error-mask { position: fixed; top: -20000px; left: -20000px; pointer-events: none; visibility: hidden; } [data-format="doughnut"] > canvas { vertical-align: middle; } [data-format="doughnut"] > canvas + span { margin-left: var(--pad-1-2); } .importexport-import-dialog > .admin-dialog { width: calc(100vw - 60px); } .importexport-import-dialog .smart-table { max-height: calc(100vh - 330px); margin-bottom: 10px; } .importexport-import-dialog .toolbar { display: flex; gap: 10px; } .importexport-import-dialog .toolbar > * { flex: none; } .importexport-import-dialog td > * { vertical-align: middle; } .importexport-import-dialog td > .icon { width: calc(0.6 * var(--width)); height: calc(0.6 * var(--height)); margin-left: 8px; --color: red; } .importexport-import-dialog td[data-col=_apply] { width: 4em; } .importexport-import-dialog td[data-state=changed] { color: green; } .importexport-import-dialog td[data-state=added] { color: green; } .importexport-import-dialog td[data-state=deleted] { color: red; } .importexport-import-dialog td[data-state=duplicate] { color: orange; } .importexport-import-dialog td[data-state=unchanged] { color: gray; } .importexport-import-dialog td[data-state=success] { color: green; } .importexport-import-dialog td[data-state=error] { color: red; } .importexport-export-mask { border: 0; box-shadow: var(--drop-shadow-sm); background: var(--body-bg); color: var(--body-fg); padding: 30px; border-radius: var(--border-radius-sm); font-weight: bold; font-size: 16px; } .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-routegroup="auth"], [data-routegroup="auth"] body, [data-routegroup="auth"] .application { width: 100%; height: 100%; overflow: hidden; } [data-routegroup="auth"] .application > .main-screen { width: 100%; height: 100%; } [data-gw="Main.ModulesScreen"] > .header .nav-mobile-expander, [data-gw="Outbound.CampaignsScreen"] > .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: 767.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: wrap; 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: 768px) { .main-screen > .header { flex-wrap: nowrap; } } @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; align-items: center; align-self: stretch; 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: 40px; 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 .nav-mobile-expander { background-image: var(--input-select-arrow-light); background-position: right 12px center; background-repeat: no-repeat; background-size: 12px 12px; margin-right: var(--pad); color: white; } .main-screen > .header .nav-mobile-expander:focus-visible { outline: 1px solid white; } .main-screen > .header .nav-mobile-expander > svg { --color: white !important; } @media screen and (min-width: 768px) { .main-screen > .header .nav-mobile-expander { display: none; } } .main-screen > .header.expanded .nav-mobile-expand { transition: max-height var(--transition-time-long) linear, opacity var(--transition-time-short) ease-in-out var(--transition-time-short); max-height: 180px; opacity: 1; pointer-events: all; } .main-screen > .header .nav-mobile-expand { transition: max-height var(--transition-time-long) linear, opacity var(--transition-time-short) linear; max-height: 0; opacity: 0; pointer-events: none; width: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; order: 999; } @media screen and (min-width: 768px) { .main-screen > .header .nav-mobile-expand { order: 0; opacity: 1; pointer-events: all; width: auto; position: static; flex-direction: row; flex-grow: 1; justify-content: flex-end; max-height: none; transition: none; } } @media screen and (min-width: 992px) { .main-screen > .header .nav-mobile-expand { margin-left: var(--pad); gap: 0; } } .main-screen > .header .nav-mobile-expand .group-selection, .main-screen > .header .nav-mobile-expand .external-exten-selection { flex-shrink: 1; width: calc( 100% - var(--pad-2)); margin-left: 0.625rem; } @media screen and (max-width: 767.98px) { .main-screen > .header .nav-mobile-expand .group-selection, .main-screen > .header .nav-mobile-expand .external-exten-selection { margin-right: 0.625rem; margin-top: 0.625rem; margin-bottom: 0.625rem; } } @media screen and (min-width: 768px) { .main-screen > .header .nav-mobile-expand .group-selection, .main-screen > .header .nav-mobile-expand .external-exten-selection { max-width: calc(50% - var(--pad)); } } @media screen and (min-width: 992px) { .main-screen > .header .nav-mobile-expand .group-selection, .main-screen > .header .nav-mobile-expand .external-exten-selection { width: auto; margin: 0 0 0 0.625rem; } } @media screen and (min-width: 1280px) { .main-screen > .header .nav-mobile-expand .group-selection, .main-screen > .header .nav-mobile-expand .external-exten-selection { margin: 0 var(--pad) 0 0.625rem; } } .main-screen > .header .nav-mobile-expand .group-selection:empty, .main-screen > .header .nav-mobile-expand .external-exten-selection:empty { margin: 0; } .main-screen > .header .nav-mobile-expand .group-selection { margin-bottom: var(--pad-1-2); } @media screen and (min-width: 768px) { .main-screen > .header .nav-mobile-expand .group-selection { margin-bottom: 0; margin-right: 0; } } .main-screen > .header .nav-mobile-expand > .group-selection:first-child { max-width: 100%; } .main-screen > .header .report-bug { color: white; margin-left: var(--pad); } .main-screen > .header .report-bug:focus-visible, .main-screen > .header .report-bug:hover { outline: 1px solid white; } .main-screen > .header .report-bug > svg { --color: white !important; } .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; } .main-screen > .footer { grid-area: footer; } .external-exten-popup .option.first-freeseating:not(:first-child) { margin-top: 1rem; position: relative; } .external-exten-popup .option.first-freeseating:not(:first-child)::before { content: ''; position: absolute; left: 0; right: 0; top: -0.5rem; border-top: 1px solid var(--border-default-color); } .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 .header .icon.logo { display: block; max-width: 160px; 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-fit, minmax(272px, 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-base); color: var(--table-muted-color); margin-top: var(--pad-1-4); transition: all var(--transition-time); } .module-chooser .module:hover { box-shadow: var(--panel-shadow-hover); } .module-chooser .module:hover .title, .module-chooser .module: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.page-centered-container { 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.page-centered-container .main-title { margin: calc(2.5vmax - var(--body-padding)) 0 calc(2.5vmax); } [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(auto-fit, minmax(240px, 1fr)); width: 49rem; padding: 1.25rem; grid-gap: var(--pad); } [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: 2.5rem; height: 2.5rem; background-color: var(--module-chooser-hover); transition: all var(--transition-time-short); } [data-gw="Main.ModulesSelector"] .module .logo .icon { width: 1.25rem; height: 1.25rem; 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:hover { box-shadow: none; background-color: var(--module-chooser-hover); } [data-gw="Main.ModulesSelector"] .module:hover .title { color: var(--body-fg) !important; } [data-gw="Main.ModulesSelector"] .module:hover .logo { background-color: var(--module-chooser-main); } [data-gw="Main.ModulesSelector"] .module:hover .logo .icon { width: 1.25rem; height: 1.25rem; 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)); } .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="Main.Timecard"] { display: flex; align-items: center; margin-right: var(--pad); } [data-gw="Main.Timecard"] > button { min-width: 122px; } [data-gw="Main.Timecard"] .status-icon { width: 26px; height: 24px; flex-shrink: 0; flex-grow: 0; margin-right: var(--pad); position: relative; overflow: hidden; margin-bottom: 8px; } [data-gw="Main.Timecard"] .status-icon::before, [data-gw="Main.Timecard"] .status-icon::after { content: ''; position: absolute; } [data-gw="Main.Timecard"] .status-icon::before { width: auto; height: 20px; border: 2px solid currentColor; border-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; left: 3px; right: 3px; top: 4px; transition: transform 1s; transition-timing-function: cubic-bezier(0.68, -0.95, 0.265, 1.95); } [data-gw="Main.Timecard"] .status-icon::after { left: 0; right: 0; bottom: 0; border-bottom: 2px solid currentColor; } [data-gw="Main.Timecard"][data-running="false"] .status-icon::before { transform: translateY(0); } [data-gw="Main.Timecard"][data-running="true"] .status-icon::before { transform: translateY(13px); } [data-gw="Main.Timecard"][data-running="true"] .blinking { transition: none !important; animation-name: blinking; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; visibility: hidden; } [data-gw="Main.Timecard"] .status-time { display: flex; align-items: center; margin-right: var(--pad); font-weight: var(--font-weight-bolder); font-size: var(--font-size-lg); line-height: 24px; letter-spacing: 0.01em; } @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 padding-in { from { padding: calc(var(--panel-padding) * 2); } to { padding: var(--panel-padding); } } @keyframes scale-in { from { transform: scale(0.95); } to { transform: scale(1); } } @keyframes scale-out { from { transform: scale(1.05); } to { transform: scale(1); } } @keyframes wobble-slide-from-right { 0% { opacity: 0.1; transform: translateX(70%) scaleY(0) scaleX(0); } 20% { transform: translateX(35%) scaleY(0.15) scaleX(0.85); } 50% { opacity: 1; transform: translateX(0%) scaleY(0.9) scaleX(1.15); } 70% { transform: scaleY(1.15) scaleX(0.9); } 80% { transform: scaleY(0.95) scaleX(1.05); } 90% { transform: scaleY(1.05) scaleX(0.95); } 100% { transform: scaleY(1) scaleX(1); } } @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; } } [data-gw="Office.OfficePanel"] > .body, [data-gw="Office.AgentPanel"] > .body, [data-gw="Switchboard.MainPanel"] > .body { max-height: calc(100vh - 70px); padding: var(--body-padding); display: flex; flex-wrap: wrap; align-items: flex-start; } @media screen and (max-width: 767.98px) { [data-gw="Office.OfficePanel"] > .body, [data-gw="Office.AgentPanel"] > .body, [data-gw="Switchboard.MainPanel"] > .body { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; } } @media screen and (min-width: 768px) { [data-gw="Office.OfficePanel"] > .body, [data-gw="Office.AgentPanel"] > .body, [data-gw="Switchboard.MainPanel"] > .body { flex-direction: column; flex-wrap: nowrap; } } @media screen and (min-width: 992px) { [data-gw="Office.OfficePanel"] > .body, [data-gw="Office.AgentPanel"] > .body, [data-gw="Switchboard.MainPanel"] > .body { flex-direction: row; padding-bottom: calc( var(--body-padding) - 5px); } } [data-gw="Office.AgentPanel"], [data-gw="Switchboard.MainPanel"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'header' 'queue' 'body' 'footer'; } [data-gw="Office.AgentPanel"] > .queue-control-panel, [data-gw="Switchboard.MainPanel"] > .queue-control-panel { grid-area: queue; margin-top: var(--pad); margin-bottom: var(--pad); } @media screen and (min-width: 768px) { [data-gw="Office.AgentPanel"] > .queue-control-panel, [data-gw="Switchboard.MainPanel"] > .queue-control-panel { margin-top: var(--body-padding); margin-bottom: -5px; } } [data-gw="Office.AgentPanel"] > .queue-control-panel.compact .queues-call-count-sum, [data-gw="Switchboard.MainPanel"] > .queue-control-panel.compact .queues-call-count-sum { align-self: flex-start; } @media screen and (min-width: 768px) { [data-gw="Office.AgentPanel"] > .queue-control-panel:not(.compact) .controls > .form-field, [data-gw="Switchboard.MainPanel"] > .queue-control-panel:not(.compact) .controls > .form-field { margin-left: var(--pad-2); } } @media screen and (min-width: 768px) { [data-gw="Office.AgentPanel"] > .queue-control-panel .controls > .button-expander-button.hidden + .form-field, [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls > .button-expander-button.hidden + .form-field { margin-left: var(--pad-2); } } [data-gw="Office.AgentPanel"] > .queue-control-panel .controls > .form-field, [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls > .form-field { margin-bottom: 0; height: fit-content; align-self: center; z-index: 0; margin-right: var(--pad); } @media screen and (min-width: 768px) { [data-gw="Office.AgentPanel"] > .queue-control-panel .controls > .form-field, [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls > .form-field { margin-left: var(--pad); margin-right: 0; } } [data-gw="Office.AgentPanel"] > .queue-control-panel .controls > .form-field .ack-checkbox, [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls > .form-field .ack-checkbox { margin-bottom: 0; } [data-gw="Office.AgentPanel"] .queues-call-count-sum, [data-gw="Switchboard.MainPanel"] .queues-call-count-sum { display: flex; justify-content: center; align-items: center; align-self: center; min-width: 2.5rem; height: 2.5rem; border-radius: 2.5rem; padding-left: var(--pad); padding-right: var(--pad); margin-right: var(--pad); background: var(--primary-hover); color: var(--primary-hover-text); font-size: var(--font-size-xl); font-weight: var(--font-weight-bolder); position: absolute; bottom: 0; right: 0; } @media screen and (min-width: 768px) { [data-gw="Office.AgentPanel"] .queues-call-count-sum, [data-gw="Switchboard.MainPanel"] .queues-call-count-sum { position: relative; bottom: auto; right: auto; margin-right: var(--pad-2); } [data-gw="Office.AgentPanel"] .queues-call-count-sum:after, [data-gw="Switchboard.MainPanel"] .queues-call-count-sum:after { content: ''; position: absolute; left: calc(100% + var(--pad) - 2px); width: 2px; height: 100%; background: var(--border-default-color); } } [data-gw="Switchboard.MainPanel"] > .queue-control-panel.compact .controls + button { height: 40px; min-height: 40px; } [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls > [data-gw="Office.DeviceSwitcher"] { z-index: 0; margin-left: var(--pad); } [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls + button { background-color: var(--panel-bg) !important; outline: 2px solid var(--primary-hover); margin-bottom: var(--pad-2); } @media screen and (min-width: 768px) { [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls + button { height: 72px; margin-left: var(--pad); margin-bottom: 0; } } [data-gw="Switchboard.MainPanel"] > .queue-control-panel .controls + button > .icon { width: 4.125rem; height: 4.125rem; --color: var(--panel-fg); } .queue-control-panel { position: relative; min-height: 72px; } .queue-control-panel > .wrap, .queue-control-panel.wrap { display: flex; } @media screen and (max-width: 767.98px) { .queue-control-panel > .wrap, .queue-control-panel.wrap { flex-direction: column; padding-left: 2px; padding-right: 2px; max-height: 100%; overflow: auto; } } .queue-control-panel > .wrap > .queue-list, .queue-control-panel.wrap > .queue-list { display: flex; overflow-x: auto; flex: 1 0; padding: 3px; padding-bottom: 5px; margin: -3px; gap: 10px; overscroll-behavior: none; } @media screen and (min-width: 768px) { .queue-control-panel > .wrap > .queue-list + .controls, .queue-control-panel.wrap > .queue-list + .controls { position: relative; height: 72px; } .queue-control-panel > .wrap > .queue-list + .controls .button-expander-button, .queue-control-panel.wrap > .queue-list + .controls .button-expander-button { display: none; transition: none; } .queue-control-panel > .wrap > .queue-list + .controls::before, .queue-control-panel.wrap > .queue-list + .controls::before { content: ""; display: block; position: absolute; right: calc(100% - 20px); width: 10px; height: 100%; box-shadow: -10px 0px 6px 6px var(--body-bg); pointer-events: none; opacity: 1; transition: 0s box-shadow .333s, .333s opacity .333s, .333s width .333s; } } .queue-control-panel > .wrap > .queue-list > .empty, .queue-control-panel.wrap > .queue-list > .empty { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 72px; font-weight: var(--font-weight-bolder); color: var(--table-muted-color); padding-top: 0; padding-bottom: 0; } .queue-control-panel > .wrap > .queue-list > .queue, .queue-control-panel.wrap > .queue-list > .queue { height: 50px; padding: 6px 6px 6px 1rem; border-radius: var(--panel-border-radius); border: 0; background: var(--panel-bg); box-shadow: var(--panel-shadow); font-size: var(--font-size-lg); flex-shrink: 0; } @media screen and (min-width: 768px) { .queue-control-panel > .wrap > .queue-list > .queue, .queue-control-panel.wrap > .queue-list > .queue { height: 72px; padding: 9px 9px 9px 1rem; } .queue-control-panel > .wrap > .queue-list > .queue:last-child, .queue-control-panel.wrap > .queue-list > .queue:last-child { margin-right: var(--pad-1-2); } } @media screen and (min-width: 768px) { .queue-control-panel > .wrap > .queue-list > .queue, .queue-control-panel.wrap > .queue-list > .queue { min-width: 160px; max-width: 280px; } } .queue-control-panel > .wrap > .queue-list > .queue > .info, .queue-control-panel.wrap > .queue-list > .queue > .info { margin-left: var(--pad); margin-right: auto; text-align: left; color: var(--panel-fg); display: flex; flex-direction: column; overflow: hidden; } .queue-control-panel > .wrap > .queue-list > .queue > .info > .name, .queue-control-panel.wrap > .queue-list > .queue > .info > .name { font-weight: var(--font-weight-bolder); font-size: var(--font-size-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-control-panel > .wrap > .queue-list > .queue > .info > .number, .queue-control-panel.wrap > .queue-list > .queue > .info > .number { font-weight: var(--font-weight-normal); font-size: var(--font-size-base); } .queue-control-panel > .wrap > .queue-list > .queue > .counts, .queue-control-panel.wrap > .queue-list > .queue > .counts { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; height: 100%; margin-left: var(--pad); } .queue-control-panel > .wrap > .queue-list > .queue > .counts:empty, .queue-control-panel.wrap > .queue-list > .queue > .counts:empty { margin-left: 7px; } .queue-control-panel > .wrap > .queue-list > .queue > .counts .waiting-calls:first-child, .queue-control-panel.wrap > .queue-list > .queue > .counts .waiting-calls:first-child { margin-top: auto; } .queue-control-panel > .wrap > .queue-list > .queue > .counts .button, .queue-control-panel.wrap > .queue-list > .queue > .counts .button { flex-basis: 50%; flex-grow: 0; flex-shrink: 0; font-weight: var(--font-weight-bolder); padding-left: var(--pad-1-2); padding-right: var(--pad-1-2); padding: 0 var(--pad-1-2); min-width: auto; min-height: auto; border-radius: var(--border-radius-sm); } .queue-control-panel > .wrap > .queue-list > .queue > .counts .button:first-child, .queue-control-panel.wrap > .queue-list > .queue > .counts .button:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .queue-control-panel > .wrap > .queue-list > .queue > .counts .button:last-child, .queue-control-panel.wrap > .queue-list > .queue > .counts .button:last-child { border-top-left-radius: 0; border-top-right-radius: 0; } .queue-control-panel > .wrap > .queue-list > .queue > .counts .button:first-child:last-child, .queue-control-panel.wrap > .queue-list > .queue > .counts .button:first-child:last-child { border-radius: var(--border-radius-sm); } .queue-control-panel > .wrap > .queue-list.expanded, .queue-control-panel.wrap > .queue-list.expanded { flex-wrap: wrap; } .queue-control-panel.expanded > .wrap { position: absolute; left: var(--body-padding); right: var(--body-padding); } .queue-control-panel.expanded > .wrap .queue-list { background: var(--body-bg); padding: var(--pad); margin: calc( -1 * var(--pad)); border-radius: var(--border-radius-lg); box-shadow: var(--dropdown-shadow); } .queue-control-panel > .wrap > .controls { display: flex; } .queue-control-panel > .wrap > .controls > .more { align-self: center; margin-left: 10px; } .queue-control-panel > .wrap > .controls > .pause { margin-left: var(--pad); display: flex; align-items: center; padding: 0.375rem 1rem; border: 0; border-radius: var(--border-radius); box-shadow: var(--panel-shadow); cursor: pointer; } .queue-control-panel > .wrap > .controls > .pause:disabled { cursor: not-allowed; } .queue-control-panel > .wrap > .controls > .pause.with-pause-types[data-state="not-paused"] { background-image: var(--input-select-arrow); background-position: right 12px center; background-repeat: no-repeat; background-size: 24px 24px; padding-right: calc(1rem + 26px); transition: background-color var(--transition-time-short); } @media screen and (min-width: 768px) { .queue-control-panel > .wrap > .controls > .pause.with-pause-types[data-state="paused"] .pause-type { display: block; width: 100%; } } .queue-control-panel > .wrap > .controls > .pause .icon-wrap { margin-right: 1.25rem; border-radius: 100px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .queue-control-panel > .wrap > .controls > .pause .icon-wrap .icon { width: 16px; height: 16px; } @media screen and (min-width: 768px) { .queue-control-panel > .wrap > .controls > .pause .icon-wrap { width: 40px; height: 40px; } .queue-control-panel > .wrap > .controls > .pause .icon-wrap .icon { width: 20px; height: 20px; } } .queue-control-panel > .wrap > .controls > .pause .info { display: flex; flex-direction: column; text-align: left; } .queue-control-panel > .wrap > .controls > .pause .info .text { font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); } .queue-control-panel > .wrap > .controls > .pause .info .text .pause-type { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); } .queue-control-panel > .wrap > .controls > .pause .info .timer { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); } .queue-control-panel > .wrap > .controls > .pause[data-state="paused"] { background-color: var(--warning); --color: var(--panel-bg); color: var(--panel-bg); } .queue-control-panel > .wrap > .controls > .pause[data-state="paused"] .icon-wrap { background-color: var(--panel-bg); } .queue-control-panel > .wrap > .controls > .pause[data-state="paused"] .icon-wrap > .icon { color: var(--warning); --color: var(--warning); } .queue-control-panel > .wrap > .controls > .pause[data-state="not-paused"] { background-color: var(--panel-bg); color: var(--body-fg); } .queue-control-panel > .wrap > .controls > .pause[data-state="not-paused"] .icon-wrap { background-color: var(--warning-light); } .queue-control-panel > .wrap > .controls > .pause[data-state="not-paused"] .icon-wrap > .icon { color: var(--warning); --color: var(--warning); } .queue-control-panel > .wrap > .controls > .pause:disabled { background-color: var(--panel-bg); color: var(--input-placeholder-hover); } .queue-control-panel > .wrap > .controls > .pause:disabled .icon-wrap { background-color: var(--input-disabled-fg); } .queue-control-panel > .wrap > .controls > .pause:disabled .icon-wrap > .icon { color: var(--panel-bg); --color: var(--panel-bg); } @media screen and (max-width: 767.98px) { .queue-control-panel { flex-flow: column; } .queue-control-panel > .wrap > .queue-list { display: block; overflow: visible; order: 2; } .queue-control-panel > .wrap > .queue-list > .queue { width: 100%; background: var(--input-disabled-bg); border: 1px solid var(--input-disabled-fg); } .queue-control-panel > .wrap > .queue-list > .queue:not(:last-child) { margin-bottom: var(--pad); } .queue-control-panel > .wrap > .controls { margin-bottom: var(--pad); } .queue-control-panel > .wrap > .controls > .pause { margin-left: 0; flex: 1; border: 1px solid var(--input-disabled-fg); } .queue-control-panel > .wrap > .controls > .more { order: 2; } } .queue-control-panel.compact { min-height: 42px; } @media screen and (min-width: 768px) { .queue-control-panel.compact { margin-top: 1rem; } .queue-control-panel.compact + .body { padding-top: 1.25rem; } .queue-control-panel.compact + .body .office-dialer { margin-right: var(--panel-padding); } .queue-control-panel.compact > .wrap { transition: max-height var(--transition-time-long); max-height: 40px; } } .queue-control-panel.compact::before { content: ''; background: rgba(0, 0, 0, 0); transition: background-color var(--transition-time-long); } .queue-control-panel.compact.expanded::before { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; } .queue-control-panel.compact.expanded > .wrap { max-height: calc(100vh - 70px - 34px); } .queue-control-panel.compact.expanded > .wrap > .controls::before { width: 0; opacity: 0; transition: none; box-shadow: 0px 0px 0px 0px var(--body-bg); } .queue-control-panel.compact.expanded > .wrap > .controls .button-expander-button { z-index: 2; background-color: var(--body-bg); transition: background-color .333s, color .333s; } .queue-control-panel.compact.expanded > .wrap > .controls .button-expander-button:hover { background-color: var(--panel-bg); } .queue-control-panel.compact > .wrap > .controls { height: 40px; max-height: 40px; } .queue-control-panel.compact > .wrap > .controls .button-expander-button { display: block; transition: none; } .queue-control-panel.compact > .wrap > .controls .button-expander-button:hover { background: transparent; } .queue-control-panel.compact > .wrap > .controls > .pause { padding: .5rem; } .queue-control-panel.compact > .wrap > .controls > .pause.with-pause-types[data-state="not-paused"] { padding-right: calc(.5rem + 22px); background-position: right 6px center; background-size: 20px 20px; } .queue-control-panel.compact > .wrap > .controls > .pause .icon-wrap { width: 1.5rem; height: 1.5rem; } @media screen and (min-width: 768px) { .queue-control-panel.compact > .wrap > .controls > .pause .icon-wrap { margin-right: 0; } } .queue-control-panel.compact > .wrap > .controls > .pause .icon-wrap > .icon { width: 0.75rem; height: 0.75rem; } @media screen and (min-width: 768px) { .queue-control-panel.compact > .wrap > .controls > .pause .info { display: none; } } .queue-control-panel.compact > .wrap > .queue-list { gap: .5rem; overflow-x: hidden; } @media screen and (max-width: 767.98px) { .queue-control-panel.compact > .wrap > .queue-list { display: flex; flex-wrap: wrap; } } .queue-control-panel.compact > .wrap > .queue-list > .empty { min-height: 42px !important; } .queue-control-panel.compact > .wrap > .queue-list.expanded { margin-right: var(--pad); z-index: 2; } .queue-control-panel.compact > .wrap > .queue-list > .queue { display: grid; grid-template-areas: "icon title" "icon counts"; grid-auto-rows: 1fr min-content; column-gap: .375rem; min-width: auto; height: 2.5rem; padding: .25rem .25rem .25rem .5rem; margin-right: 0; } @media screen and (max-width: 767.98px) { .queue-control-panel.compact > .wrap > .queue-list > .queue { width: auto; margin-bottom: 0; } } .queue-control-panel.compact > .wrap > .queue-list > .queue > .status { grid-area: icon; width: 1.5rem; height: 1.5rem; position: relative; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/phone-incoming-filled.svg") center center / 12px 12px no-repeat; mask: url("/icons/phone-incoming-filled.svg") center center / 12px 12px no-repeat; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .info { grid-area: title; margin: 0; line-height: 1; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .info > .name { font-weight: var(--font-weight-bolder); font-size: var(--font-size-sm); margin-right: 2px; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .info > .number { display: none; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .counts { grid-area: counts; flex-direction: row; justify-content: center; height: auto; margin-left: auto; gap: 1px; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .counts > * { border: 0; height: 1rem; font-size: var(--font-size-xs); padding: 0 0.25rem; min-width: 1rem; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .counts > :first-child { border-bottom-left-radius: var(--border-radius-sm); border-top-right-radius: 0; } .queue-control-panel.compact > .wrap > .queue-list > .queue > .counts > :last-child { border-top-right-radius: var(--border-radius-sm); border-bottom-left-radius: 0; } .queue.queue-control-item { border: none; } .queue-control-panel .queue-list .queue, .queue.queue-control-item { display: flex; align-items: center; cursor: pointer; } .queue-control-panel .queue-list .queue.disabled, .queue.queue-control-item.disabled { cursor: default; } .queue-control-panel .queue-list .queue > .status, .queue.queue-control-item > .status { position: relative; width: 32px; height: 32px; flex-shrink: 0; background-color: var(--success); border-radius: 100px; } .queue-control-panel .queue-list .queue > .status::before, .queue.queue-control-item > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/phone-incoming-filled.svg") center center / 16px 16px no-repeat; mask: url("/icons/phone-incoming-filled.svg") center center / 16px 16px no-repeat; } @media screen and (min-width: 768px) { .queue-control-panel .queue-list .queue > .status, .queue.queue-control-item > .status { position: relative; width: 40px; height: 40px; } .queue-control-panel .queue-list .queue > .status::before, .queue.queue-control-item > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/phone-incoming-filled.svg") center center / 20px 20px no-repeat; mask: url("/icons/phone-incoming-filled.svg") center center / 20px 20px no-repeat; } } .queue-control-panel .queue-list .queue[data-status="subscribed"] > .status, .queue.queue-control-item[data-status="subscribed"] > .status { background-color: var(--success); } .queue-control-panel .queue-list .queue[data-status="unsubscribed"] > .status, .queue.queue-control-item[data-status="unsubscribed"] > .status { background-color: var(--input-disabled-fg); } .queue-control-panel .queue-list .queue[data-status="paused"] > .status, .queue.queue-control-item[data-status="paused"] > .status { background-color: var(--warning); } .queue-control-panel .queue-list .queue[data-status="in-queue-call"] > .status, .queue.queue-control-item[data-status="in-queue-call"] > .status { background-color: var(--primary); color: var(--primary-text); position: relative; } .queue-control-panel .queue-list .queue[data-status="in-queue-call"] > .status::before, .queue.queue-control-item[data-status="in-queue-call"] > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/phone-call.svg") center center / 16px 16px no-repeat; mask: url("/icons/phone-call.svg") center center / 16px 16px no-repeat; } @media screen and (min-width: 768px) { .queue-control-panel .queue-list .queue[data-status="in-queue-call"] > .status, .queue.queue-control-item[data-status="in-queue-call"] > .status { position: relative; } .queue-control-panel .queue-list .queue[data-status="in-queue-call"] > .status::before, .queue.queue-control-item[data-status="in-queue-call"] > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/phone-call.svg") center center / 20px 20px no-repeat; mask: url("/icons/phone-call.svg") center center / 20px 20px no-repeat; } } .queue-control-panel .queue-list .queue[data-static="1"][data-status="subscribed"] > .status, .queue.queue-control-item[data-static="1"][data-status="subscribed"] > .status { background-color: transparent; border: 2px solid var(--success); } .queue-control-panel .queue-list .queue[data-static="1"][data-status="subscribed"] > .status::before, .queue.queue-control-item[data-static="1"][data-status="subscribed"] > .status::before { background: var(--success); } .queue-control-panel .queue-list .queue[data-static="1"][data-status="paused"] > .status, .queue.queue-control-item[data-static="1"][data-status="paused"] > .status { background-color: transparent; border: 2px solid var(--warning); } .queue-control-panel .queue-list .queue[data-static="1"][data-status="paused"] > .status::before, .queue.queue-control-item[data-static="1"][data-status="paused"] > .status::before { background: var(--warning); } .queue-control-panel .queue-list .queue[data-type="email"] > .status, .queue.queue-control-item[data-type="email"] > .status { position: relative; } .queue-control-panel .queue-list .queue[data-type="email"] > .status::before, .queue.queue-control-item[data-type="email"] > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/envelope.svg") center center / 20px 20px no-repeat; mask: url("/icons/envelope.svg") center center / 20px 20px no-repeat; } .queue-control-panel .queue-list .queue[data-type="personal"] > .status, .queue.queue-control-item[data-type="personal"] > .status { position: relative; } .queue-control-panel .queue-list .queue[data-type="personal"] > .status::before, .queue.queue-control-item[data-type="personal"] > .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/user.svg") center center / 24px 24px no-repeat; mask: url("/icons/user.svg") center center / 24px 24px no-repeat; } .queue-control-panel .queue-list .queue[data-no-device="1"][data-status="subscribed"] > .status, .queue.queue-control-item[data-no-device="1"][data-status="subscribed"] > .status { background-color: var(--error); } .queue-control-panel .queue-list .queue[data-power-dialer-active], .queue.queue-control-item[data-power-dialer-active] { background: rgba(251, 255, 0, 0.17); } [data-gw="Office.Dialer"] button.xs.secondary.icon-left.button-add-contact { font-size: var(--font-size-xs); border-radius: var(--border-radius); font-weight: var(--font-weight-bolder); letter-spacing: 0.04em; padding: 0.2816rem 0.5rem; min-height: auto; } [data-gw="Office.Dialer"] button.xs.secondary.icon-left.button-add-contact > .icon { width: 0.75rem; height: 0.75rem; } .dialer-input { display: flex; align-items: center; border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--border-radius); max-width: 100%; transition: border-color var(--transition-time-short); } .dialer-input:hover { border-color: var(--input-border-color-hover); } .dialer-input > input:not([type="checkbox"]):not([type="radio"]) { margin-top: -1px; margin-bottom: -1px; margin-left: -1px; margin-right: -1px; flex: 1; border: 0; min-width: 0; } .dialer-input > input:not([type="checkbox"]):not([type="radio"]):focus { padding-left: 16px; padding-right: 16px; } .dialer-input:focus-within { border: var(--input-border-width-focus) solid var(--input-border-color-focus); } .dialer-input:focus-within > input:not([type="checkbox"]):not([type="radio"]) { margin-top: -2px; margin-bottom: -2px; margin-left: -2px; margin-right: -2px; } .dialer-input:focus-within > .controls { margin-right: 2px; } .dialer-input:focus-within > .controls > * { box-shadow: none; } .dialer-input.disabled { background-color: var(--body-bg); border-color: var(--body-bg); } .dialer-input.disabled > input:not([type="checkbox"]):not([type="radio"]) { color: var(--input-disabled-fg); } .dialer-input.disabled > input:not([type="checkbox"]):not([type="radio"])::placeholder { color: var(--input-disabled-fg); } .dialer-input > .controls { display: flex; align-items: center; justify-content: flex-end; margin-right: 3px; min-width: 0; } .dialer-input > .controls > :not(:first-child) { margin-left: 4px; } .dialer-input > .controls > * { display: flex; } .dialer-input > .controls > button.icon-only { border-radius: var(--border-radius-sm); } .dialer-input > .status-icon { padding: 0 6px; display: flex; align-items: center; } .dialer-input > .status-icon > .icon { width: 20px; height: 20px; } .dialer-input-suggestions { background: var(--dropdown-bg); box-shadow: var(--dropdown-shadow); border-radius: var(--dropdown-radius); overflow: auto; max-height: calc(96vh - 290px); padding-top: .5rem; padding-bottom: .5rem; font-size: var(--dropdown-font-size); } .dialer-input-suggestions .title { color: var(--table-muted-color); font-weight: var(--font-weight-bold); padding: var(--pad) 1rem; } .dialer-input-suggestions .suggestion { padding: .375rem 1rem; border-bottom: var(--border-default-width) solid var(--border-default-color); text-decoration: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'availability number' 'availability info'; } .dialer-input-suggestions .suggestion:last-child { border-bottom: none; } .dialer-input-suggestions .suggestion > .availability { grid-area: availability; display: flex; align-items: center; padding-right: 4px; } .dialer-input-suggestions .suggestion > .availability.extension-status .icon { display: block; width: 12px; height: 12px; } .dialer-input-suggestions .suggestion > .availability.extension-status[data-status="ok"] { --color: var(--success); } .dialer-input-suggestions .suggestion > .availability.extension-status[data-status="fail"] { --color: var(--error); } .dialer-input-suggestions .suggestion > .number { grid-area: number; font-weight: var(--font-weight-bolder); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dialer-input-suggestions .suggestion > .info { grid-area: info; font-weight: var(--font-weight-bold); color: var(--table-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dialer-input-suggestions .suggestion.selected, .dialer-input-suggestions .suggestion:hover { color: var(--dropdown-fg-hover); background: var(--dropdown-bg-hover); } .dialer-input-suggestions .suggestion.selected > .info, .dialer-input-suggestions .suggestion:hover > .info { color: var(--dropdown-fg-hover); } .office-call-control > .main-box { padding: var(--pad) 1rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: 'status timer' 'peer controls' 'peer-info peer-info' 'forward forward'; border: var(--input-border-width-focus) solid var(--border-default-color); border-radius: var(--border-radius); background-color: var(--panel-bg); position: relative; z-index: 1; } .office-call-control > .main-box hr { margin-top: 3px; margin-bottom: 9px; } .office-call-control > .main-box .status, .office-call-control > .main-box .type { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--table-muted-color); letter-spacing: 0.2px; } .office-call-control > .main-box .status { grid-area: status; margin-bottom: .675rem; display: flex; align-items: center; text-transform: uppercase; } .office-call-control > .main-box .status > .icon { margin-left: 4px; width: 20px; height: 20px; } .office-call-control > .main-box .timer { grid-area: timer; text-align: right; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--table-muted-color); min-width: 54px; max-width: 54px; margin-left: auto; } .office-call-control > .main-box .peer, .office-call-control > .main-box .peer-info { grid-area: peer; } .office-call-control > .main-box .peer .number, .office-call-control > .main-box .peer-info .number { font-weight: var(--font-weight-bolder); font-size: var(--font-size-xl); line-height: 1.4; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .office-call-control > .main-box .peer > .contact, .office-call-control > .main-box .peer-info > .contact { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: 1.4; min-height: 1.4375rem; } .office-call-control > .main-box .peer > .contact > .name-company, .office-call-control > .main-box .peer-info > .contact > .name-company { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: 1.4em; } .office-call-control > .main-box .peer > .contact > .note, .office-call-control > .main-box .peer-info > .contact > .note { overflow: hidden; text-overflow: ellipsis; margin-top: -3px; max-height: 2.8em; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .office-call-control > .main-box .peer > .queue, .office-call-control > .main-box .peer-info > .queue { border-radius: var(--border-radius-sm); width: max-content; width: fit-content; padding: 2px 6px; background: var(--primary-active); color: var(--panel-bg); font-size: var(--font-size-sm); letter-spacing: 0.04em; } .office-call-control > .main-box .peer-info { grid-area: peer-info; } .office-call-control > .main-box .returned-call, .office-call-control > .main-box .diversion-call { grid-area: controls; padding-left: var(--pad); } .office-call-control > .main-box .returned-call .label, .office-call-control > .main-box .diversion-call .label { margin-top: 9px; padding: 2px; font-size: var(--font-size-sm); } .office-call-control > .main-box .returned-call .number, .office-call-control > .main-box .returned-call .contact, .office-call-control > .main-box .diversion-call .number, .office-call-control > .main-box .diversion-call .contact { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .office-call-control > .main-box .returned-call .number, .office-call-control > .main-box .diversion-call .number { font-weight: var(--font-weight-bolder); line-height: 1.6; } .office-call-control > .main-box .returned-call .contact, .office-call-control > .main-box .diversion-call .contact { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } .office-call-control > .main-box .returned-call > .number, .office-call-control > .main-box .diversion-call > .number { font-size: var(--font-size-xl); } .office-call-control > .main-box > .controls { margin-bottom: 6px; } .office-call-control > .main-box .controls { grid-area: controls; display: flex; align-items: flex-start; justify-content: flex-end; } .office-call-control > .main-box .controls > .buttons > *:focus { box-shadow: none; } .office-call-control > .main-box .controls > .buttons > * { margin-left: .5rem; } .office-call-control > .main-box .controls > .status-icon { display: flex; align-items: center; justify-content: center; margin-left: .5rem; margin-right: .5rem; margin-bottom: .5rem; } .office-call-control > .main-box .controls > .status-icon > .icon { width: 20px; height: 20px; } .office-call-control > .main-box .dialer-input { grid-area: forward; margin-top: 1rem; } .office-call-control[data-status="incomming"] > .main-box, .office-call-control[data-status="dialing"] > .main-box { border-color: var(--primary-hover); box-shadow: 0px 0px 0px 6px #bbc3fa; } .office-call-control[data-status="connected"] > .main-box { border-color: var(--success); box-shadow: 0px 0px 0px 6px #d7fde2; } .office-call-control:not(.hidden) > .office-call-actions > .header { padding: var(--pad); box-shadow: var(--dropdown-shadow); border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); position: relative; } .office-call-control:not(.hidden) > .office-call-actions > .header::before { content: ''; background: var(--panel-bg); width: 100%; height: var(--border-radius); position: absolute; bottom: 100%; } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback { margin-top: 20px; display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); text-align: center; white-space: pre; overflow: hidden; letter-spacing: 0.01em; position: relative; } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback::after { content: ''; background: linear-gradient(90deg, var(--panel-bg) 5%, rgba(128, 128, 128, 0) 100%); width: 3rem; height: 100%; position: absolute; left: 0; top: 0; } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback.active::before { color: var(--input-placeholder); } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback::before { content: attr(text-no-entry); color: var(--input-disabled-fg); } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback:not(:empty) { font-weight: var(--font-weight-bolder); } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback:not(:empty)::before { content: unset; margin-top: 20px; } .office-call-control:not(.hidden) > .office-call-actions > .keypress-feedback.hidden + .office-numeric-keyboard { margin-top: 2rem; } .office-call-control:not(.hidden) > .office-call-actions > .office-numeric-keyboard > .dialer-row:first-child { margin-top: 20px; } .office-waiting-calls { margin-top: var(--pad-2); font-size: var(--font-size-base); } .office-waiting-calls .title { color: var(--table-muted-color); font-weight: var(--font-weight-bold); } .office-held-and-parked-calls { margin-top: var(--pad-2); font-size: var(--font-size-base); background-color: var(--secondary-hover); padding: var(--pad); border-radius: var(--border-radius); border: 2px solid var(--primary); } .office-held-and-parked-calls .title { color: var(--table-muted-color); font-weight: var(--font-weight-bold); } .office-dialer-calls-list .call { padding: var(--pad) 0; border-bottom: var(--border-default-width) solid var(--border-default-color); min-height: 56px; display: grid; grid-template-areas: 'header controls' 'info controls' 'queue controls' 'pickupgroup pickupgroup'; grid-template-columns: 1fr auto; } .office-dialer-calls-list .call:last-child { border-bottom: none; padding-bottom: 0; min-height: 42px; } .office-dialer-calls-list .call > .header { display: flex; align-items: center; justify-content: space-between; grid-area: header; } .office-dialer-calls-list .call > .header > .number { font-weight: var(--font-weight-bolder); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .office-dialer-calls-list .call > .header > .timer { font-weight: var(--font-weight-bold); color: var(--table-muted-color); } .office-dialer-calls-list .call > .info { font-weight: var(--font-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 3rem; grid-area: info; } .office-dialer-calls-list .call > .queue { border-radius: var(--border-radius); display: inline-block; padding: 3px 7px; background: #04123b; color: white; margin-top: 3px; grid-area: queue; } .office-dialer-calls-list .call > .controls { display: flex; flex-direction: row; align-items: center; grid-area: controls; margin-left: var(--pad); } .office-dialer-calls-list .call > .controls > .parking-space { display: inline-block; background-color: var(--button-switcher-active-bg); color: var(--button-switcher-active-fg); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); padding: 1px 6px; margin: 0 8px; } .office-dialer-calls-list .call > .pickupgroup { grid-area: pickupgroup; margin-top: var(--pad); border-radius: var(--border-radius); background: var(--body-bg); display: grid; padding: var(--pad); grid-template-areas: 'header controls' 'info controls'; grid-template-columns: 1fr auto; align-items: center; } .office-dialer-calls-list .call > .pickupgroup > .header { grid-area: header; } .office-dialer-calls-list .call > .pickupgroup > .header > .name { display: inline-flex; flex-direction: row; background-color: var(--button-switcher-active-bg); color: var(--button-switcher-active-fg); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); padding: 1px 6px; line-height: 1.5em; } .office-dialer-calls-list .call > .pickupgroup > .header > .name > .icon { width: 1rem; height: 1rem; } .office-dialer-calls-list .call > .pickupgroup > .controls { grid-area: controls; margin-left: var(--pad); display: flex; } .office-dialer-calls-list .call > .pickupgroup > .info { grid-area: info; font-weight: var(--font-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 3rem; line-height: 1.5em; } .office-waiting-queues { min-height: 0; display: flex; flex-direction: column; border-top: var(--border-default-width) solid var(--border-default-color); padding-top: var(--pad) !important; } @media screen and (min-width: 768px) { .office-waiting-queues { border-top: 0; flex-grow: 1; padding-top: var(--panel-padding) !important; } } @media screen and (min-width: 992px) { .office-waiting-queues { flex-grow: 1; flex-shrink: 0; min-height: 50%; } } .office-waiting-queues > h4 { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--table-muted-color); margin-bottom: var(--pad-2); } .office-waiting-queues .call-list { overflow: auto; max-height: 100%; height: 100%; min-height: 38px; display: flex; flex-direction: column; } .office-waiting-queues .call-list .call-container { display: flex; } .office-waiting-queues .call-list .call-container:not(:last-child) { border-bottom: var(--border-default-width) solid var(--border-default-color); padding-bottom: var(--pad); margin-bottom: var(--pad); } .office-waiting-queues .call-list .call-type-container .call-type-icon { background-color: var(--secondary-hover); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 2rem; margin-right: var(--pad); } .office-waiting-queues .call-list .call-type-container .call-type-icon .icon { width: 1rem; height: 1rem; } .office-waiting-queues .call-list .call { font-size: var(--font-size-base); display: flex; flex-direction: column; align-items: flex-start; position: relative; flex-grow: 1; } .office-waiting-queues .call-list .call .number { font-weight: var(--font-weight-bolder); color: var(--body-fg); margin-bottom: 1px; } .office-waiting-queues .call-list .call .contact { font-weight: var(--font-weight-bold); } .office-waiting-queues .call-list .call .queue { display: inline-block; background-color: var(--button-switcher-active-bg); color: var(--button-switcher-active-fg); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); padding: 2px 6px; margin-top: 4px; margin-bottom: 4px; } .office-waiting-queues .call-list .call .queue-welcome { color: var(--table-muted-color); position: absolute; right: 0; opacity: 0.5; height: 4em; text-align: right; font-size: 0.9em; } .office-waiting-queues .call-list .call .queue-timer { color: var(--table-muted-color); white-space: nowrap; position: absolute; right: 0; } .office-waiting-queues .call-list .call .queue-timer.queue-timer-welcome { opacity: 0.5; top: 1em; } .office-waiting-queues .call-list .call > button { margin-top: var(--pad); } .office-waiting-queues .call-list .call .callee { background-color: var(--body-bg); border-radius: var(--border-radius); padding: var(--pad-1-4) var(--pad-1-2); margin-top: 2px; letter-spacing: 0.2px; } .office-waiting-queues.queue-empty { min-height: 120px; } @media screen and (min-width: 992px) { .office-waiting-queues.queue-empty { flex-grow: 0; } } .office-waiting-queues.queue-empty .call-list { text-align: center; font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); margin-bottom: 1rem; margin-top: 1rem; } @media screen and (min-width: 768px) { .office-waiting-queues.queue-empty .call-list { margin-top: auto; margin-bottom: auto; justify-content: center; } } .office-dialer, .office-waiting-queues { width: 100%; } @media screen and (min-width: 768px) { .office-dialer, .office-waiting-queues { margin-bottom: var(--body-padding); width: var(--dialer-width-default); } } @media screen and (min-width: 992px) { .office-dialer, .office-waiting-queues { margin-bottom: 0; } } @media screen and (min-width: 992px) { .office-waiting-queues { margin-bottom: 5px; min-height: 240px; flex-grow: 1; flex-shrink: 1; } } .office-call-actions > .header { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: center; justify-content: center; gap: var(--pad); } .office-numeric-keyboard > .dialer-row { display: flex; align-items: center; justify-content: center; gap: var(--pad); margin-top: var(--pad); } .office-numeric-keyboard > .dialer-row:first-child { margin-top: 2rem; } .office-numeric-keyboard > .dialer-row > button { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; background-color: transparent; border: var(--border-default-width) solid var(--border-default-color); border-radius: 50px; font-size: 20px; font-weight: 800; padding: 0; color: inherit; transition: all var(--transition-time-short); } .office-numeric-keyboard > .dialer-row > button:hover { border-color: var(--input-border-color); color: var(--primary-hover); } .office-numeric-keyboard > .dialer-row > button:active { border-color: var(--secondary-active); color: var(--primary-hover); background-color: var(--secondary-active); } .office-numeric-keyboard > .dialer-row > button:disabled, .office-numeric-keyboard > .dialer-row > button:disabled:hover, .office-numeric-keyboard > .dialer-row > button:disabled:active { color: var(--input-disabled-fg); background-color: transparent; border-color: var(--input-border-color); cursor: not-allowed; } .office-numeric-keyboard > .dialer-row > button.active { border-color: var(--primary-hover); color: var(--panel-bg); background-color: var(--primary-hover); } .office-numeric-keyboard > .dialer-row > button.active:disabled { background-color: var(--input-border-color); border-color: var(--input-border-color); color: var(--panel-bg); } .office-numeric-keyboard > .dialer-row > button > .icon { width: 24px; height: 24px; } .office-numeric-keyboard > .dialer-row > button.invisible { visibility: hidden; } .office-dialer { overflow: auto; flex-shrink: 0; max-height: calc(100% - 5px); } @media screen and (min-width: 768px) { .office-dialer { margin-right: var(--body-padding); } } [data-gw="Office.AgentDialer"] { width: 100%; display: flex; flex-direction: column; overflow: auto; } [data-gw="Office.AgentDialer"] .project-select { margin-bottom: var(--pad); } @media screen and (min-width: 768px) { [data-gw="Office.AgentDialer"] { flex-direction: row; max-height: 50%; min-height: 25%; } } @media screen and (min-width: 992px) { [data-gw="Office.AgentDialer"] { width: auto; height: 100%; max-height: 100%; flex-direction: column; flex-shrink: 0; padding-left: 5px; margin-left: -5px; } } [data-gw="Office.AgentDialer"] > .office-dialer { margin-bottom: var(--panel-padding); max-height: none; } .switchboard-dialer { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; align-self: stretch; flex-grow: 1; } .switchboard-dialer.panel-container, .switchboard-dialer.entity-list-editor { padding: 0; } @media screen and (min-width: 768px) { .switchboard-dialer.panel-container, .switchboard-dialer.entity-list-editor { padding: var(--panel-padding); } } .switchboard-dialer .office-call-control { flex-basis: 120px; flex-shrink: 0; flex-grow: 0; } .switchboard-dialer .office-call-control .main-box { grid-template-areas: none; grid-template-columns: auto; row-gap: 1rem; } @media screen and (min-width: 768px) { .switchboard-dialer .office-call-control .main-box { grid-template-columns: 2fr 8rem 2fr; padding: var(--pad) 1rem; } } .switchboard-dialer .office-call-control .main-box .dialer-input { flex-grow: 1; margin-top: 0; min-width: 0; } .switchboard-dialer .office-call-control .main-box .left { display: grid; grid-template-areas: 'status timer' 'peer controls' 'forward forward'; grid-template-rows: repeat(4, min-content); align-content: center; } .switchboard-dialer .office-call-control .main-box .left .status { margin-bottom: .25rem; } .switchboard-dialer .office-call-control .main-box .left .timer { text-align: left; } .switchboard-dialer .office-call-control .main-box .left .label { margin-top: 0; padding-left: 0; padding-right: 0; } .switchboard-dialer .office-call-control .main-box .left .number { line-height: 1.4; } .switchboard-dialer .office-call-control .main-box .left .contact { line-height: 1.4; min-height: 1.4375rem; } .switchboard-dialer .office-call-control .main-box .right { display: flex; align-items: center; } @media screen and (min-width: 768px) { .switchboard-dialer .office-call-control .main-box .right { border-left: 1px solid var(--border-default-color); padding-left: 1rem; } } .switchboard-dialer .office-call-control .main-box .right .transfer-active-container { display: flex; align-items: center; column-gap: 6px; justify-content: space-between; width: 100%; } .switchboard-dialer .office-call-control .main-box .right .transfer-active-container div:empty { display: none; } .switchboard-dialer .office-call-control .main-box .right .transfer-active-container .peer { align-items: center; justify-content: center; } .switchboard-dialer .office-call-control .main-box .right .transfer-active-container .peer .icon { width: 20px; height: 20px; } .switchboard-dialer .office-call-control .main-box > .controls { padding-left: 20px; padding-right: 20px; grid-area: auto; justify-content: center; position: relative; margin-bottom: 0; } .switchboard-dialer .office-call-control .main-box > .controls .status-icon { position: absolute; left: 0; } @media screen and (min-width: 768px) { .switchboard-dialer .office-call-control .main-box > .controls .status-icon { left: -1.5rem; } } .switchboard-dialer .office-call-control .main-box > .controls .buttons { display: grid; grid-column-gap: 8px; grid-row-gap: 8px; grid-template-columns: auto auto auto auto; grid-template-rows: auto; } @media screen and (min-width: 768px) { .switchboard-dialer .office-call-control .main-box > .controls .buttons { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } } .switchboard-dialer .office-call-control .main-box > .controls .buttons > button { margin: 0; } .switchboard-dialer .office-call-control .main-box > .controls .buttons [data-action="blind-transfer"], .switchboard-dialer .office-call-control .main-box > .controls .buttons [data-action="attended-transfer"] { border-radius: var(--border-radius-sm); } .switchboard-dialer .calls-list { overflow: auto; flex-basis: 50%; flex-shrink: 1; flex-grow: 0; display: flex; } .switchboard-dialer .calls-list.top { flex-direction: column-reverse; margin-bottom: var(--pad); } .switchboard-dialer .calls-list.top .call-container:first-child { border-bottom: none; } .switchboard-dialer .calls-list.bottom { flex-direction: column; margin-top: var(--pad); } .switchboard-dialer .calls-list.bottom .call-container:last-child { padding-bottom: 0; border-bottom: none; } .switchboard-dialer .calls-list .empty { background-color: var(--table-alternation-bg); color: var(--table-muted-color); padding: var(--pad); border-radius: var(--border-radius-sm); font-weight: var(--font-weight-bold); display: flex; justify-content: center; align-items: center; height: 100%; } .switchboard-dialer .calls-list .call-container { display: grid; grid-template-areas: 'icon callinfo controls' 'call-peer call-peer call-peer'; grid-template-columns: min-content auto min-content; grid-column-gap: var(--pad); padding-top: var(--pad-1-2); padding-bottom: var(--pad-1-2); border-bottom: var(--border-default-width) solid var(--border-default-color); } .switchboard-dialer .calls-list .call-container .call-type-container { grid-area: icon; display: flex; align-items: center; justify-content: center; } .switchboard-dialer .calls-list .call-container .call-type-container .call-type-icon { width: 2rem; height: 2rem; border-radius: 2rem; flex-grow: 0; flex-shrink: 0; background-color: var(--secondary-hover); display: flex; justify-content: center; align-items: center; } .switchboard-dialer .calls-list .call-container .call-type-container .call-type-icon svg { width: 1rem; height: 1rem; } .switchboard-dialer .calls-list .call-container .call { grid-area: callinfo; display: flex; align-items: center; column-gap: var(--pad); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } .switchboard-dialer .calls-list .call-container .call .number { font-weight: var(--font-weight-bolder); } .switchboard-dialer .calls-list .call-container .call .queue { background-color: var(--body-bg); font-size: var(--font-size-sm); border-radius: var(--border-radius-sm); padding-left: var(--pad-1-2); padding-right: var(--pad-1-2); line-height: 1.7; margin-left: calc(-1 * var(--pad-1-2)); } .switchboard-dialer .calls-list .call-container .call .queue:empty { display: none; } .switchboard-dialer .calls-list .call-container .call .parking_space { background-color: var(--primary-hover); font-size: var(--font-size-sm); color: var(--primary-text); border-radius: var(--border-radius-sm); padding-left: var(--pad-1-2); padding-right: var(--pad-1-2); line-height: 1.5; margin-left: auto; } .switchboard-dialer .calls-list .call-container .call .timer { color: var(--table-muted-color); font-weight: var(--font-weight-bold); min-width: 38px; } .switchboard-dialer .calls-list .call-container .call-peer { grid-area: call-peer; display: flex; align-items: center; column-gap: var(--pad-1-2); margin-top: var(--pad-1-4); padding-left: calc(2rem + var(--pad)); font-size: var(--font-size-base); } .switchboard-dialer .calls-list .call-container .call-peer > svg { width: 1rem; height: 1rem; margin-right: var(--pad-1-4); } .switchboard-dialer .calls-list .call-container .call-peer .number { font-weight: var(--font-weight-bolder); } .switchboard-dialer .calls-list .call-container button { grid-area: controls; width: 2rem; margin-left: auto; } .office-dialer > .header { display: flex; align-items: center; margin-bottom: var(--pad-2); } .office-dialer > .header .extension-status .icon { display: block; width: 8px; height: 8px; } .office-dialer > .header .extension-status[data-status="ok"] { --color: var(--success); } .office-dialer > .header .extension-status[data-status="fail"] { --color: var(--error); } .office-dialer > .header .extension-status[data-status="none"] { --color: #bbb; } .office-dialer > .header .extension { font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); padding-left: .25rem; flex: 1; } .office-dialer > .header .ring-mute { margin-left: var(--pad); } .office-dialer > .device-status { padding: var(--pad); border-radius: var(--border-radius); background-color: var(--error); color: var(--error-text); line-height: 1.5; margin-bottom: var(--pad-2); } .office-dialer > .office-call-actions .header { margin-top: 20px; } .office-dialer > .office-call-control { margin-top: var(--pad-2); } .column-panel { display: flex; flex-direction: column; flex-grow: 1; max-width: 100%; min-width: 0; min-height: 0; max-height: 100%; } .column-panel .card-switcher { display: flex; flex-direction: column; flex-grow: 1; min-height: 65%; overflow: auto; } [data-gw="Office.ControlPanel"] { align-self: stretch; } @media screen and (max-width: 767.98px) { [data-gw="Office.ControlPanel"] .office-dialer, [data-gw="Office.ControlPanel"] .office-waiting-queues { box-shadow: none; padding: 0; border-radius: 0; } [data-gw="Office.ControlPanel"] .office-waiting-queues { min-height: 33%; } } @media screen and (max-width: 575.98px) { [data-gw="Office.ControlPanel"] .office-waiting-queues { min-height: 80%; } } @media screen and (min-width: 992px) { [data-gw="Office.ControlPanel"] { width: auto; margin-bottom: 5px; } } [data-gw="Office.ControlPanel"] .announcement { display: grid; grid-template-areas: 'icon title' 'icon content'; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--panel-padding); margin-bottom: var(--panel-padding); flex-shrink: 0; min-height: 112px; } [data-gw="Office.ControlPanel"] .announcement > .icon-wrapper { grid-area: icon; width: 4.5rem; height: 4.5rem; background-color: var(--secondary-hover); color: var(--body-fg); border-radius: 4.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } [data-gw="Office.ControlPanel"] .announcement > .icon-wrapper > .icon { width: 2rem; height: 2rem; color: var(--primary); } [data-gw="Office.ControlPanel"] .announcement > .title { grid-area: title; display: flex; flex-direction: row; align-items: center; column-gap: var(--pad-1-2); margin-bottom: var(--pad-1-2); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); letter-spacing: 0.14px; } [data-gw="Office.ControlPanel"] .announcement > .title > .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Office.ControlPanel"] .announcement > .title > .date { color: var(--table-muted-color); white-space: nowrap; } [data-gw="Office.ControlPanel"] .announcement > .content { grid-area: content; font-weight: var(--font-weight-bolder); letter-spacing: 0.14px; overflow: auto; word-break: break-word; } @media screen and (max-width: 767.98px) { [data-gw="Office.HistoryPanel"] > .button-switcher .item { width: 100%; } } [data-gw="Office.DirectoryPanel"] .toolbar.wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } @media screen and (min-width: 768px) { [data-gw="Office.DirectoryPanel"] .toolbar.wrap { flex-direction: row !important; flex-wrap: wrap; padding-bottom: var(--pad); column-gap: var(--pad); row-gap: var(--pad); } } [data-gw="Office.DirectoryPanel"] .toolbar.wrap > .button-switcher { margin-right: auto; flex: 0 1 auto; } @media screen and (max-width: 767.98px) { [data-gw="Office.DirectoryPanel"] .toolbar.wrap > .button-switcher { width: 100%; } [data-gw="Office.DirectoryPanel"] .toolbar.wrap > .button-switcher .item { width: 100%; } } @media screen and (min-width: 768px) { [data-gw="Office.DirectoryPanel"] .toolbar.wrap > *:last-child { margin-left: var(--pad-1-2); } } [data-gw="Office.DirectoryPanel"] .toolbar.wrap > input[type="search"] { width: var(--input-long-width); } @media screen and (max-width: 767.98px) { [data-gw="Office.DirectoryPanel"] .toolbar.wrap input[type="search"] { margin-top: var(--pad); margin-bottom: var(--pad-1-2); width: 100%; max-width: 100%; } } [data-gw="Office.CallList"] { overflow: auto; flex-grow: 1; } [data-gw="Office.CallList"] .call { display: flex; align-items: center; min-height: var(--table-row-min-height); padding-left: var(--table-padding-x); min-width: 430px; } [data-gw="Office.CallList"] .call:nth-child(even) { background-color: var(--table-alternation-bg); } [data-gw="Office.CallList"] .call .arrow { min-width: 1rem; min-height: 1rem; position: relative; margin-left: var(--pad); margin-right: var(--pad); } [data-gw="Office.CallList"] .call .arrow::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--icon-static-color); -webkit-mask: url("/icons/arrow-right.svg") center center / 14.4px 14.4px no-repeat; mask: url("/icons/arrow-right.svg") center center / 14.4px 14.4px no-repeat; } [data-gw="Office.CallList"] .call .time { font-size: var(--font-size-base); color: var(--table-muted-color); margin-left: auto; white-space: nowrap; padding-left: var(--pad); padding-right: var(--pad-2); } [data-gw="Office.CallList"] .call .party .number { font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); } [data-gw="Office.CallList"] .call .party .name, [data-gw="Office.CallList"] .call .party .company, [data-gw="Office.CallList"] .call .party .group { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } [data-gw="Office.CallList"] .call .party .name, [data-gw="Office.CallList"] .call .party .company { display: inline; } [data-gw="Office.CallList"] .call .party .name:empty, [data-gw="Office.CallList"] .call .party .company:empty, [data-gw="Office.CallList"] .call .party .group:empty { display: none; } [data-gw="Office.CallList"] .call .party .name:not(:empty) + .company:not(:empty)::before { content: ",\00a0"; display: inline-block; } [data-gw="Office.CallList"] .call .party .group { display: none; } [data-gw="Office.CallList"] .call [data-action="dial"] { display: block; position: relative; } [data-gw="Office.CallList"] .call [data-action="dial"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--success-text); -webkit-mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; } [data-gw="Office.CallList"] .call .controls { padding: var(--table-padding-y) var(--table-padding-x); display: flex; flex-direction: row; } [data-gw="Office.CallList"] .call .controls button { margin-left: 0.25rem; margin-right: 0.25rem; } @media screen and (max-width: 575.98px) { [data-gw="Office.CallList"] .call .controls { align-self: stretch; position: sticky; z-index: 1; top: 0; right: 0; background: var(--panel-bg); box-shadow: 0 0 32px 0px rgba(0, 0, 0, var(--drop-shadow-hardness)); clip-path: inset(0px 0px 0px -32px); align-items: center; } [data-gw="Office.CallList"] .call .controls [data-action="dial"] { margin-left: 0; } } [data-gw="Office.CallList"] .call:nth-child(even) .controls { background-color: var(--table-alternation-bg); } [data-gw="Office.CallList"] .call > .icon-wrapper { margin-right: var(--pad); } [data-cardtype="Office.ContactsList"] { position: relative; } [data-cardtype="Office.ContactsList"] > [data-gw="Office.ContactsList"] { position: static !important; } [data-gw="Office.ContactsList"] { min-height: 100%; } [data-gw="Office.ContactsList"] td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Office.ContactsList"] td[data-col="extension"] { min-width: 70px; max-width: 0; } [data-gw="Office.ContactsList"] td[data-col="name"], [data-gw="Office.ContactsList"] td[data-col="company"], [data-gw="Office.ContactsList"] td[data-col="email"], [data-gw="Office.ContactsList"] td[data-col="note"] { min-width: 100px; max-width: 200px; } [data-gw="Office.ContactsList"] td[data-col="name"] a, [data-gw="Office.ContactsList"] td[data-col="company"] a, [data-gw="Office.ContactsList"] td[data-col="email"] a, [data-gw="Office.ContactsList"] td[data-col="note"] a { text-decoration: none; } [data-gw="Office.ContactsList"] td[data-col="note"] { color: var(--table-muted-color); } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="dial"] { position: relative; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="dial"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--success-text); -webkit-mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="blind-transfer"] { position: relative; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="blind-transfer"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: white; -webkit-mask: url("/icons/arrow-right.svg") center center / 16px 16px no-repeat; mask: url("/icons/arrow-right.svg") center center / 16px 16px no-repeat; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="attended-transfer"] { position: relative; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="attended-transfer"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: white; -webkit-mask: url("/icons/fi-corner-up-right.svg") center center / 16px 16px no-repeat; mask: url("/icons/fi-corner-up-right.svg") center center / 16px 16px no-repeat; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="edit"] { position: relative; } [data-gw="Office.ContactsList"] td[data-col="ctl"] [data-action="edit"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/edit.svg") center center / 16px 16px no-repeat; mask: url("/icons/edit.svg") center center / 16px 16px no-repeat; } [data-gw="Office.AgentHistoryPanel"] .smart-table td[data-col="start"] { color: var(--table-muted-color); } [data-gw="Office.AgentHistoryPanel"] .smart-table button[data-action="dial"] { position: relative; } [data-gw="Office.AgentHistoryPanel"] .smart-table button[data-action="dial"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--success-text); -webkit-mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar { display: flex; flex-flow: column; row-gap: var(--pad-1-2); } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--pad); } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top + .button-switcher, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top + .button-switcher, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top + .button-switcher, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top + .button-switcher { margin-bottom: var(--pad); } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .select-input, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .select-input, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .select-input, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .select-input { margin-left: auto; min-width: fit-content; } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .campaign-switcher, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .campaign-switcher, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .campaign-switcher, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .campaign-switcher { flex-shrink: 1; margin-right: var(--pad); } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button { margin-left: var(--pad); flex-shrink: 0; } @media screen and (max-width: 767.98px) { [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button { font-size: 0; padding-left: 0; padding-right: 0; } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button .icon, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button .icon, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button .icon, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] .toolbar > .toolbar-top .show-description-button .icon { margin-right: 0; } } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] > .card-switcher > .empty, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] > .card-switcher > .empty, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] > .card-switcher > .empty, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] > .card-switcher > .empty { text-align: center; margin-top: var(--pad-2); } [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .description, [data-gw="Office.OfficePanel"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .toolbar, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .description, [data-gw="Office.AgentPanel"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .toolbar, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .description, [data-gw="Supervisor.OverviewScreen"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .toolbar, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .description, [data-gw="Switchboard.MainPanel"] [data-gw="Widgets.CardSwitcher"] > .no-campaign > .toolbar { display: none; } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog { width: auto; max-width: 520px; } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .header > h1 { font-size: var(--heading-5); text-align: left; } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .header > .close { top: -0.25rem; right: -1.5rem; } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .header > .close > .icon { width: 30px; height: 30px; } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .body { font-size: var(--font-size-xl); } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .body p { margin-top: 0; margin-bottom: var(--pad); } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .footer { text-align: right; margin: var(--pad-2) 0 0; padding-top: var(--pad); } [data-gw="Office.AgentSubscriptionWarningDialog"] > .admin-dialog > .footer button:not(:first-child) { margin-left: var(--pad-1-2); } .call-category-selector { display: flex; flex-direction: column; border-bottom: var(--border-default-width) solid var(--border-default-color); padding-bottom: var(--pad-1-2); } .call-category-selector .select-input { margin-bottom: 20px; } [data-gw="Office.CallPanel"] { flex-grow: 1; display: flex; flex-direction: column; flex-wrap: nowrap; overflow: hidden; } [data-gw="Office.CallPanel"] .button-switcher { margin-bottom: var(--pad-2); } [data-gw="Office.CallPanel"] .card-switcher > div { flex-shrink: 1; flex-grow: 1; display: flex; flex-direction: column; align-content: flex-start; overflow: hidden; } [data-cardtype^="Office.CallPanel."], [data-gw="Office.CallPanel.CallCard"] { height: 100%; } [data-cardtype^="Office.CallPanel."] .call-category-selector, [data-gw="Office.CallPanel.CallCard"] .call-category-selector { margin-bottom: var(--pad-2); } [data-cardtype^="Office.CallPanel."] .call-category-selector .form-field, [data-gw="Office.CallPanel.CallCard"] .call-category-selector .form-field { margin-bottom: 0; } [data-cardtype^="Office.CallPanel."] .call-card-title, [data-gw="Office.CallPanel.CallCard"] .call-card-title { font-size: var(--heading-5); font-weight: var(--font-weight-bolder); margin-bottom: var(--pad); } [data-cardtype^="Office.CallPanel."] .incomming-container, [data-gw="Office.CallPanel.CallCard"] .incomming-container { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; } [data-cardtype^="Office.CallPanel."] .incomming-container .title, [data-gw="Office.CallPanel.CallCard"] .incomming-container .title { font-size: 20px; font-weight: var(--font-weight-bolder); margin-bottom: 20px; } [data-cardtype^="Office.CallPanel."] .contact-container, [data-gw="Office.CallPanel.CallCard"] .contact-container { width: 100%; margin-bottom: var(--pad-2); background-color: var(--body-bg); border-radius: var(--border-radius); padding: var(--pad) 1rem; display: flex; align-items: center; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } [data-cardtype^="Office.CallPanel."] .contact-container > button:last-child, [data-gw="Office.CallPanel.CallCard"] .contact-container > button:last-child { margin-left: var(--pad); min-width: 1.5rem; min-height: 1.5rem; width: 1.5rem; height: 1.5rem; } [data-cardtype^="Office.CallPanel."] .contact-container > button:last-child > .icon, [data-gw="Office.CallPanel.CallCard"] .contact-container > button:last-child > .icon { width: 0.75rem; height: 0.75rem; } [data-cardtype^="Office.CallPanel."] .contact-container > button:last-child:hover, [data-gw="Office.CallPanel.CallCard"] .contact-container > button:last-child:hover { background-color: var(--panel-bg); box-shadow: var(--drop-shadow-sm); } [data-cardtype^="Office.CallPanel."] .contact-container > .icon:first-child, [data-gw="Office.CallPanel.CallCard"] .contact-container > .icon:first-child { width: 1rem; height: 1rem; color: var(--icon-static-color); margin-right: var(--pad-1-2); } [data-cardtype^="Office.CallPanel."] .contact-container:empty, [data-gw="Office.CallPanel.CallCard"] .contact-container:empty { display: none; } [data-cardtype^="Office.CallPanel."] .content-container, [data-gw="Office.CallPanel.CallCard"] .content-container { display: flex; flex-wrap: wrap; flex-grow: 1; flex-shrink: 1; height: 100%; } @media screen and (min-width: 576px) { [data-cardtype^="Office.CallPanel."] .content-container, [data-gw="Office.CallPanel.CallCard"] .content-container { flex-wrap: nowrap; } } @media screen and (min-width: 1280px) { [data-cardtype^="Office.CallPanel."] .contact-container + .content-container, [data-gw="Office.CallPanel.CallCard"] .contact-container + .content-container { height: calc( 100% - 67px); } } [data-cardtype^="Office.CallPanel."] .note-container, [data-cardtype^="Office.CallPanel."] .right-pane-container, [data-gw="Office.CallPanel.CallCard"] .note-container, [data-gw="Office.CallPanel.CallCard"] .right-pane-container { flex: 1; min-width: 245px; display: flex; flex-direction: column; flex-wrap: nowrap; flex-shrink: 1; justify-content: flex-start; overflow: auto; } @media screen and (max-width: 575.98px) { [data-cardtype^="Office.CallPanel."] .note-container, [data-cardtype^="Office.CallPanel."] .right-pane-container, [data-gw="Office.CallPanel.CallCard"] .note-container, [data-gw="Office.CallPanel.CallCard"] .right-pane-container { flex-basis: 100% !important; } } @media screen and (min-width: 576px) { [data-cardtype^="Office.CallPanel."] .note-container, [data-cardtype^="Office.CallPanel."] .right-pane-container, [data-gw="Office.CallPanel.CallCard"] .note-container, [data-gw="Office.CallPanel.CallCard"] .right-pane-container { flex-basis: 50%; } } [data-cardtype^="Office.CallPanel."] .note-container .note-list, [data-cardtype^="Office.CallPanel."] .note-container [data-gw="Office.CallPanel.PhoneNumberHistory"], [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list, [data-cardtype^="Office.CallPanel."] .right-pane-container [data-gw="Office.CallPanel.PhoneNumberHistory"], [data-gw="Office.CallPanel.CallCard"] .note-container .note-list, [data-gw="Office.CallPanel.CallCard"] .note-container [data-gw="Office.CallPanel.PhoneNumberHistory"], [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list, [data-gw="Office.CallPanel.CallCard"] .right-pane-container [data-gw="Office.CallPanel.PhoneNumberHistory"] { flex-shrink: 1; } [data-cardtype^="Office.CallPanel."] .note-container .note-list, [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list, [data-gw="Office.CallPanel.CallCard"] .note-container .note-list, [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list { max-height: 40vh; overflow: auto; min-height: 80%; } @media screen and (min-width: 576px) { [data-cardtype^="Office.CallPanel."] .note-container .note-list, [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list, [data-gw="Office.CallPanel.CallCard"] .note-container .note-list, [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list { max-height: none; } } @media screen and (min-width: 992px) { [data-cardtype^="Office.CallPanel."] .note-container .note-list, [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list, [data-gw="Office.CallPanel.CallCard"] .note-container .note-list, [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list { min-height: 88%; } } @media screen and (min-width: 1280px) { [data-cardtype^="Office.CallPanel."] .note-container .note-list, [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list, [data-gw="Office.CallPanel.CallCard"] .note-container .note-list, [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list { min-height: 86%; } } [data-cardtype^="Office.CallPanel."] .note-container .note-list:empty, [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list:empty, [data-gw="Office.CallPanel.CallCard"] .note-container .note-list:empty, [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list:empty { min-height: 20px; } [data-cardtype^="Office.CallPanel."] .note-container .note-list:empty::after, [data-cardtype^="Office.CallPanel."] .right-pane-container .note-list:empty::after, [data-gw="Office.CallPanel.CallCard"] .note-container .note-list:empty::after, [data-gw="Office.CallPanel.CallCard"] .right-pane-container .note-list:empty::after { content: attr(text-no-entry); } [data-cardtype^="Office.CallPanel."] .note-container, [data-gw="Office.CallPanel.CallCard"] .note-container { position: relative; padding-left: 3px; } @media screen and (min-width: 576px) { [data-cardtype^="Office.CallPanel."] .note-container, [data-gw="Office.CallPanel.CallCard"] .note-container { padding-right: var(--panel-padding); } [data-cardtype^="Office.CallPanel."] .note-container .dragger, [data-gw="Office.CallPanel.CallCard"] .note-container .dragger { content: ''; cursor: col-resize; border-radius: var(--border-radius-sm); width: calc( var(--border-default-width) * 2); background: var(--border-default-color); position: absolute; top: 0; bottom: 0; right: 0; opacity: 0.5; transition: all .3s; } [data-cardtype^="Office.CallPanel."] .note-container .dragger:hover, [data-gw="Office.CallPanel.CallCard"] .note-container .dragger:hover { width: calc( var(--border-default-width) * 4); opacity: 1; } } [data-cardtype^="Office.CallPanel."] .note-container label, [data-gw="Office.CallPanel.CallCard"] .note-container label { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin-bottom: var(--pad-1-2); display: block; } [data-cardtype^="Office.CallPanel."] .note-container textarea, [data-gw="Office.CallPanel.CallCard"] .note-container textarea { width: 100%; margin-bottom: var(--pad); font-size: var(--font-size-base); } [data-cardtype^="Office.CallPanel."] .note-container .buttons, [data-gw="Office.CallPanel.CallCard"] .note-container .buttons { width: 100%; margin-bottom: var(--pad-2); display: flex; } [data-cardtype^="Office.CallPanel."] .note-container .buttons > button, [data-gw="Office.CallPanel.CallCard"] .note-container .buttons > button { flex: 1; } [data-cardtype^="Office.CallPanel."] .note-container .call-info-agent-note-box > .content, [data-gw="Office.CallPanel.CallCard"] .note-container .call-info-agent-note-box > .content { font-weight: var(--font-weight-bolder); } [data-cardtype^="Office.CallPanel."] .right-pane-container, [data-gw="Office.CallPanel.CallCard"] .right-pane-container { overflow: hidden; margin-top: var(--pad-2); } @media screen and (min-width: 576px) { [data-cardtype^="Office.CallPanel."] .right-pane-container, [data-gw="Office.CallPanel.CallCard"] .right-pane-container { margin-top: 0; padding-left: var(--panel-padding); } } .admin-dialog [data-gw="Office.CallPanel.CallCard"] .note-container { padding-right: 0; } .admin-dialog [data-gw="Office.CallPanel.CallCard"] .note-container > .dragger { display: none; } .admin-dialog [data-gw="Office.CallPanel.CallCard"] .content-container { height: 100%; } .admin-dialog [data-gw="Office.CallPanel.CallCard"] .content-container [data-cardtype="Office.CallPanel.PhoneNumberHistory"] { overflow: auto; } [data-gw="Office.CallPanel.CallCard"] { overflow: auto !important; } [data-gw="Office.CallPanel.CallCard"] [data-gw="Widgets.ButtonSwitcher"] { margin-bottom: var(--pad); } .call-info-agent-note-box { border-radius: var(--border-radius); background-color: var(--body-bg); margin-bottom: var(--pad); padding: var(--pad); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); flex-shrink: 0; } .call-info-agent-note-box:last-child { margin-bottom: 0; } .call-info-agent-note-box > .header { color: var(--table-muted-color); display: flex; flex-wrap: nowrap; justify-content: space-between; border-bottom: var(--border-default-width) solid var(--border-default-color); padding-bottom: var(--pad); margin-bottom: var(--pad); gap: 8px; } .call-info-agent-note-box > .content { white-space: pre-line; word-break: break-word; } [data-gw="Office.CallPanel.PhoneNumberHistory"] { overflow: auto !important; max-height: calc( 100vh - 302px); } @media screen and (min-width: 576px) { [data-gw="Office.CallPanel.PhoneNumberHistory"] { max-height: none; } } [data-gw="Office.CallPanel.PhoneNumberHistory"] .phone-history-toolbar { border-radius: var(--border-radius); background-color: var(--body-bg); margin-bottom: var(--pad); padding: var(--pad); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); display: flex; justify-content: space-between; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .phone-history-toolbar input { background-color: var(--panel-bg); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-items { overflow: auto; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item:not(:last-child) { border-bottom: var(--border-default-width) solid var(--border-default-color); margin-bottom: var(--pad-2); padding-bottom: var(--pad); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header { display: flex; align-items: center; margin-bottom: var(--pad); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-icon { width: 2.25rem; height: 2.25rem; background-color: var(--secondary-hover); color: var(--primary); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: var(--pad); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-icon .icon { display: block; width: 1.25rem; height: 1.25rem; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-info { display: flex; flex-direction: column; align-items: flex-start; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-info > .history-item-header-datetime { font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-info > .history-item-header-detail { font-size: var(--font-size-base); color: var(--table-muted-color); line-height: 1.5; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-info > button { appearance: none; margin: 0; margin-top: var(--pad-1-4); padding: 0; background: none; border: none; cursor: pointer; text-align: left; display: inline-block; color: var(--panel-fg); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-header > .history-item-header-info > button:hover { text-decoration: underline; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-call-categories { display: flex; align-items: center; flex-wrap: wrap; flex-shrink: 0; border-radius: var(--border-radius); background-color: var(--body-bg); margin-top: var(--pad-1-4); margin-bottom: var(--pad); padding: var(--pad); font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); white-space: nowrap; column-gap: 4px; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-call-categories > .hierarchy { font-weight: bold; margin-right: var(--pad-1-2); } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-call-categories > .category { padding: 4px 8px; background: var(--button-switcher-active-bg); color: var(--button-switcher-active-fg); border-radius: var(--border-radius-sm); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); line-height: 1.5; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content > .expander { margin-top: var(--pad); font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); cursor: pointer; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content > .expander > .label { padding: var(--pad-1-2) var(--pad); position: relative; width: -moz-fit-content; width: fit-content; color: var(--primary); margin-left: auto; margin-right: auto; user-select: none; position: relative; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content > .expander > .label::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary); -webkit-mask: url("/icons/arrow-simple-down.svg") center center / 16px 16px no-repeat; mask: url("/icons/arrow-simple-down.svg") center center / 16px 16px no-repeat; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content > .expander > .label::before { right: -100%; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content > .expander > .label.collapse { display: none; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content.expanded > .expander > .label { position: relative; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content.expanded > .expander > .label::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary); -webkit-mask: url("/icons/arrow-simple-up.svg") center center / 16px 16px no-repeat; mask: url("/icons/arrow-simple-up.svg") center center / 16px 16px no-repeat; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content.expanded > .expander > .label::before { right: -100%; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content.expanded > .expander > .label.expand { display: none; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content.expanded > .expander > .label.collapse { display: block; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content:not(.expanded) > .call-info-agent-note-box:first-child { margin-bottom: 0; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content:not(.expanded) > .call-info-agent-note-box:first-child > .content { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } [data-gw="Office.CallPanel.PhoneNumberHistory"] .history-item > .history-item-content:not(.expanded) > .call-info-agent-note-box:not(:first-child) { display: none; } .empty-image-placeholder { align-items: center; justify-content: center; display: flex; flex-direction: column; grid-column: 1 / -1; margin-bottom: 40px; flex-grow: 1; text-align: center; } .empty-image-placeholder > img { margin-bottom: var(--pad); } .empty-image-placeholder > .title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bolder); } .empty-image-placeholder > .text { margin-top: var(--pad); color: var(--table-muted-color); } .empty-image-placeholder > button { margin-top: 2rem; } [data-gw="Office.PhoneNumberHistoryPanel"] > .toolbar { margin-bottom: var(--pad); } [data-gw="Office.PhoneNumberHistoryPanel"] > .tabs { margin-bottom: var(--pad); } [data-gw="Office.Statistics"] { min-width: 1140px; } [data-gw="Office.Statistics"] > .top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pad-2); } [data-gw="Office.Statistics"] > .top-bar .title { margin-bottom: 0; } [data-gw="Office.Statistics"] > .top-bar button { margin-right: 2px; } [data-gw="Office.Statistics"] > .charts { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; } [data-gw="Office.Statistics"] .big-doughnut { display: flex; gap: var(--pad); } [data-gw="Office.Statistics"] .big-doughnut > .chart { max-width: 220px; max-height: 180px; height: 100%; aspect-ratio: 1.222; } [data-gw="Office.Statistics"] .big-doughnut > .legend > .title { line-height: 150%; margin-bottom: 0; } [data-gw="Office.Statistics"] .big-doughnut > .legend > .detail { margin-bottom: 10px; } [data-gw="Office.Statistics"] .big-doughnut > .legend > .data > .label { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } [data-gw="Office.Statistics"] .big-doughnut > .legend > .data > .item { display: flex; align-items: center; font-size: var(--font-size-base); margin-bottom: 8px; } [data-gw="Office.Statistics"] .big-doughnut > .legend > .data > .item > .dot { width: 16px; height: 16px; flex-shrink: 0; flex-grow: 0; border-radius: var(--border-radius-sm); margin-right: 8px; } [data-gw="Office.Statistics"] .additional-charts { padding-left: var(--pad); } [data-gw="Office.Statistics"] .additional-charts > .title { margin-top: 24px; margin-bottom: 8px; } [data-gw="Office.Statistics"] .additional-charts > .title:first-child { margin-top: 0; } [data-gw="Office.Statistics"] .additional-charts > .percentage-chart { display: flex; align-items: center; font-weight: var(--font-weight-bolder); white-space: nowrap; } [data-gw="Office.Statistics"] .additional-charts > .percentage-chart > .percentage { margin-left: var(--pad-1-2); } [data-gw="Office.Statistics"] > .table { background-color: var(--body-bg); padding: 20px; border-radius: var(--border-radius); margin-bottom: 40px; } [data-gw="Office.Statistics"] > .table:last-child { margin-bottom: 0; } [data-gw="Office.Statistics"] > .table .panel-header { display: flex; justify-content: space-between; align-items: center; } [data-gw="Office.Statistics"] > .table > .title { margin-bottom: var(--pad); } [data-gw="Office.Statistics"] > .table .smart-table.table-alternative { --panel-bg: var(--body-bg); --table-bg: var(--body-bg); --table-alternation-bg: var(--body-bg); } [data-gw="Office.Statistics"] > .table .smart-table.table-alternative tbody > tr:first-child > td { font-weight: var(--font-weight-bolder); } [data-gw="Office.Wallboard"] { overflow-x: hidden; padding-top: var(--pad-1-2); } [data-gw="Office.Wallboard"] .agent-container { position: relative; display: flex; column-gap: 20px; border-bottom: var(--border-default-width) solid var(--border-default-color); padding-top: var(--pad-1-2); padding-bottom: var(--pad-1-2); row-gap: 14px; height: 52px; overflow: hidden; flex-wrap: wrap; } [data-gw="Office.Wallboard"] .agent-container .agent-info { flex-basis: calc( 100% - 32px); } @media screen and (min-width: 768px) { [data-gw="Office.Wallboard"] .agent-container { flex-wrap: nowrap; } [data-gw="Office.Wallboard"] .agent-container .agent-info { flex-basis: auto; } } [data-gw="Office.Wallboard"] .agent-container:first-child { margin-top: -12px; } [data-gw="Office.Wallboard"] .agent-container.expanded { overflow: visible; height: auto; } [data-gw="Office.Wallboard"] .agent-container .expander { position: absolute; width: 32px; height: 26px; right: 0; top: var(--pad); z-index: 1; appearance: none; background: var(--panel-bg); border: none; padding: 0; display: flex; justify-content: center; cursor: pointer; } [data-gw="Office.Wallboard"] .agent-container .expander .icon { width: 16px; height: 16px; margin-top: 5px; color: var(--panel-fg); --color: var(--panel-fg); } [data-gw="Office.Wallboard"] .agent-container .expander::before { content: ''; height: 100%; position: absolute; right: 100%; width: 0; box-shadow: 0 0 10px 10px var(--panel-bg); z-index: -1; } [data-gw="Office.Wallboard"] .agent-container .agent-info { display: flex; border-right: var(--border-default-width) solid var(--border-default-color); padding-right: var(--pad); } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status { display: flex; align-items: flex-start; column-gap: 8px; } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .agent-title { cursor: help; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 39px; margin-right: var(--pad-1-4); white-space: nowrap; } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .agent-title > .name { font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .agent-title > .extension { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .agent-title > div { max-width: 280px; text-overflow: ellipsis; overflow: hidden; } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status { display: flex; column-gap: 4px; } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .status-container { flex-shrink: 0; column-gap: 4px; margin-top: var(--pad-1-2); margin-bottom: var(--pad-1-2); margin-left: var(--pad-1-2); } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .status-container > div { display: flex; column-gap: 4px; } [data-gw="Office.Wallboard"] .agent-container .agent-info .agent-status .status-container.icon-left .icon { margin-right: 2px; } [data-gw="Office.Wallboard"] .agent-container .agent-queues { display: grid; width: 100%; padding-top: var(--pad-1-2); padding-bottom: var(--pad-1-2); column-gap: var(--pad-1-2); row-gap: var(--pad); grid-template-columns: repeat(auto-fit, 112px); grid-template-rows: repeat(auto-fit, 27px); } [data-gw="Office.Wallboard"] .agent-container .queue { display: flex; align-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; } [data-gw="Office.Wallboard"] .agent-container .queue.manageable { cursor: pointer; } [data-gw="Office.Wallboard"] .agent-container .queue .status { border-radius: 50%; width: 22px; height: 22px; margin-right: 8px; flex-shrink: 0; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="unsubscribed"] .status { background-color: var(--input-disabled-fg); position: relative; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="unsubscribed"] .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/phone-incoming-filled.svg") center center / 10px 10px no-repeat; mask: url("/icons/phone-incoming-filled.svg") center center / 10px 10px no-repeat; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="subscribed"] .status { background-color: var(--success); position: relative; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="subscribed"] .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-bg); -webkit-mask: url("/icons/phone-incoming-filled.svg") center center / 10px 10px no-repeat; mask: url("/icons/phone-incoming-filled.svg") center center / 10px 10px no-repeat; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="subscribed"][data-static="1"] .status { background-color: var(--panel-bg); box-shadow: inset 0 0 0 2px var(--success); } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="subscribed"][data-static="1"] .status::before { background: var(--success); } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="paused"] .status { background-color: var(--warning); position: relative; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="paused"] .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/pause.svg") center center / 10px 10px no-repeat; mask: url("/icons/pause.svg") center center / 10px 10px no-repeat; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="in-queue-call"] .status { background-color: var(--primary); position: relative; } [data-gw="Office.Wallboard"] .agent-container .queue[data-status="in-queue-call"] .status::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/phone-call.svg") center center / 10px 10px no-repeat; mask: url("/icons/phone-call.svg") center center / 10px 10px no-repeat; } [data-gw="Office.Wallboard"] .agent-container .queue .info { display: flex; flex-direction: column; justify-content: center; overflow: hidden; } [data-gw="Office.Wallboard"] .agent-container .queue .info .name { cursor: help; } [data-gw="Office.Wallboard"] .agent-container .queue .info .name, [data-gw="Office.Wallboard"] .agent-container .queue .info .number { font-weight: var(--font-weight-bolder); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Office.Wallboard"] .agent-container .queue .info .name + .number { font-weight: var(--font-weight-bold); } [data-gw="Office.Debugger"] { background: white; color: black; position: fixed; z-index: 10000; top: 70px; right: 5px; bottom: 5px; width: 50%; border: 2px solid black; box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); font-size: 10px; font-family: monospace; } [data-gw="Office.Debugger"] table { border-collapse: collapse; border-spacing: 0; width: 100%; background: white; } [data-gw="Office.Debugger"] table td, [data-gw="Office.Debugger"] table th { padding: 2px; text-align: left; border: 1px solid #999; } [data-gw="Office.Debugger"] table th { background: #743; color: white; } [data-gw="Office.Debugger"] table .self { font-weight: bold; color: #382; } [data-gw="Office.Debugger"] table [data-state="connected"] { color: green; } [data-gw="Office.Debugger"] table [data-state="disconnected"] { color: red; } [data-gw="Office.Debugger"] table [data-state="hold"] { color: brown; } [data-gw="Office.Debugger"] table [data-state="dialing"] { color: blue; } [data-gw="Office.Debugger"] table [data-state="ringing"] { color: orange; } [data-gw="Office.Debugger"] table [data-cstate="cancelled"] { color: red; } [data-gw="Office.Debugger"] table [data-cstate="succeeded"] { color: green; } [data-gw="Office.Debugger"] > * { overflow: auto; } [data-gw="Office.Debugger"] > .controls { padding: 5px; } [data-gw="Office.Debugger"] > .controls > * { margin-right: 10px; } [data-gw="Office.Debugger"] > .trace .call-state { padding: 5px; background: #ded; border-bottom: 3px dotted black; } [data-gw="Office.Debugger"] > .trace .call-state:nth-child(even) { background: #ede; } [data-gw="Office.Debugger"] > .trace .header { display: flex; justify-content: space-between; } [data-gw="Office.Debugger"] > .trace .header .linkedid { font-weight: bold; } [data-gw="Office.Debugger"] > .trace table { margin-top: 10px; } [data-gw="Office.Debugger"] > .trace .dialer-state { white-space: pre-wrap; margin-top: 10px; } [data-gw="Office.Debugger"] > .trace .sdp { background: white; border: 1px solid #999; } [data-gw="Office.Debugger"] > .trace .sdp .sdp-head { background: #743; color: white; padding: 2px; } [data-gw="Office.Debugger"] > .trace .sdp .sdp-body { padding: 2px; } [data-gw="Office.Debugger"] .office-call-control { background: white; max-width: 400px; margin: 10px auto; } .sentinel { height: 0; width: 100%; display: block; } .drag-handle { width: 0.5rem; height: 2.5rem; background-color: var(--body-bg); cursor: col-resize; position: relative; transform: translateX(-50%) translateY(-50%) scaleY(1) scaleX(1); left: calc(var(--pad)* -1 - 0.5px); top: 50%; margin-right: calc( -1 * var(--pad)); border: 1px solid var(--border-default-color); border-radius: var(--border-radius-sm); transition: transform var(--transition-time-long); box-shadow: var(--dropdown-shadow-sm); } .drag-handle:hover, .drag-handle.dragging { transform: translateX(-50%) translateY(-50%) scaleY(1) scaleX(1.5); } .drag-handle:hover::before, .drag-handle:hover::after, .drag-handle.dragging::before, .drag-handle.dragging::after { opacity: .333; } .drag-handle:hover::before, .drag-handle.dragging::before { left: 23%; } .drag-handle:hover::after, .drag-handle.dragging::after { right: 23%; } .drag-handle::before, .drag-handle::after { content: ''; width: 1px; position: absolute; top: var(--pad-1-2); bottom: var(--pad-1-2); background-color: var(--table-muted-color); transition: left var(--transition-time-long), right var(--transition-time-long), opacity var(--transition-time-long); opacity: .125; } .drag-handle::before { left: 50%; } .drag-handle::after { right: 50%; } [data-gw="Office.Speeddial"] { row-gap: var(--pad); } [data-gw="Office.Speeddial"] > .toolbar { flex-direction: row !important; column-gap: var(--pad); row-gap: var(--pad-1-2); } [data-gw="Office.Speeddial"] > .toolbar > *:last-child { margin-left: auto; } [data-gw="Office.Speeddial"] > .toolbar > .button-switcher.scrollable { flex: 0 1 auto; } [data-gw="Office.Speeddial"] > .toolbar > .buttons { flex-shrink: 0; flex-direction: row; column-gap: var(--pad); display: flex; } [data-gw="Office.Speeddial"] > input[type="search"] { width: 100%; flex-shrink: 0; } [data-gw="Office.Speeddial"] > .contact-container { display: grid; overflow: auto; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: var(--pad); } [data-gw="Office.Speeddial"] > .contact-container.empty { flex-grow: 1; } [data-gw="Office.Speeddial"] > .contact-container > .card { background-color: var(--body-bg); border-radius: var(--border-radius); padding: 8px var(--pad); display: grid; grid-template-areas: "avatar info controls"; grid-template-columns: min-content auto min-content; column-gap: 12px; min-height: 80px; max-height: 80px; border: 1px solid var(--body-bg); } [data-gw="Office.Speeddial"] > .contact-container > .card[data-status="busy"] .avatar, [data-gw="Office.Speeddial"] > .contact-container > .card[data-busy="true"] .avatar { background-color: var(--primary); color: var(--primary-text); --color: var(--primary-text); } [data-gw="Office.Speeddial"] > .contact-container > .card[data-status="unavailable"] { background-color: var(--panel-bg); border: 1px solid var(--border-default-color); } [data-gw="Office.Speeddial"] > .contact-container > .card[data-status="unavailable"] .avatar { background-color: var(--success-disabled); color: var(--success-disabled-text); --color: var(--success-disabled-text); } [data-gw="Office.Speeddial"] > .contact-container > .card[data-status="unavailable"] .info { color: var(--table-muted-color); } [data-gw="Office.Speeddial"] > .contact-container > .card .avatar { grid-area: avatar; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background-color: var(--success); color: var(--success-text); --color: var(--success-text); margin-top: auto; margin-bottom: auto; position: relative; justify-self: center; } [data-gw="Office.Speeddial"] > .contact-container > .card .avatar > .icon { width: 22px; height: 22px; } [data-gw="Office.Speeddial"] > .contact-container > .card .info { grid-area: info; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } [data-gw="Office.Speeddial"] > .contact-container > .card .info .title { font-weight: var(--font-weight-bolder); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-gw="Office.Speeddial"] > .contact-container > .card .info .subtitle, [data-gw="Office.Speeddial"] > .contact-container > .card .info .description { font-size: var(--font-size-base); color: var(--table-muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 17px; } [data-gw="Office.Speeddial"] > .contact-container > .card .info .description { margin-top: 6px; } [data-gw="Office.Speeddial"] > .contact-container > .card .controls { grid-area: controls; display: grid; grid-auto-flow: column; place-items: center; gap: 8px; place-self: center; } [data-gw="Office.Speeddial"] > .contact-container.condensed { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card { column-gap: 6px; min-height: 46px; max-height: 46px; padding: 6px; align-items: center; position: relative; } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .avatar { width: 32px; height: 32px; } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .avatar .icon { width: 16px; height: 16px; } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .info { display: grid; align-items: center; justify-content: start; grid-template-areas: "title subtitle" "description description"; grid-template-columns: min-content 1fr; grid-auto-rows: min-content; } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .info .title { grid-area: title; font-size: var(--font-size-sm); letter-spacing: 0.25px; font-weight: var(--font-weight-bolder); } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .info .subtitle { grid-area: subtitle; font-size: var(--font-size-sm); margin-left: var(--pad-1-4); } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .info .description { grid-area: description; font-size: var(--font-size-sm); margin-top: 0; } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card .controls .more { position: absolute; left: 6px; opacity: 0; transition: opacity var(--transition-time); } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card:has(.more:hover) .avatar { opacity: 0; } [data-gw="Office.Speeddial"] > .contact-container.condensed > .card:has(.more:hover) .controls .more { opacity: 1; } [data-gw="Office.Speeddial.ContactCallDialog"] .input-extension-container { position: relative; } [data-gw="Office.Speeddial.ContactCallDialog"] .input-extension-container .internal-marker { position: absolute; top: 2rem; right: 6px; font-size: var(--font-size-sm); height: 26px; padding-left: 8px; padding-right: 8px; border-radius: var(--border-radius-sm); align-items: center; letter-spacing: 0.04em; font-weight: var(--font-weight-bold); display: none; } [data-gw="Office.Speeddial.ContactCallDialog"] .input-extension-container .internal-marker[data-kind="external"] { display: flex; background-color: var(--body-bg); color: var(--body-fg); } [data-gw="Office.Speeddial.ContactCallDialog"] .input-extension-container .internal-marker[data-kind="internal"] { display: flex; background-color: var(--success-secondary-hover); color: var(--success-secondary-text); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .subtitle, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .subtitle { font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); margin-bottom: var(--pad); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body > .subtitle, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .subtitle { margin-top: 8px; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body > .name-input-container, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .name-input-container { display: flex; justify-content: space-between; gap: var(--pad); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body > .name-input-container input, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .name-input-container input { flex-grow: 1; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body > .contact-groups-container, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .contact-groups-container { max-height: 50vh; overflow: auto; margin-top: 2rem; margin-bottom: 2rem; margin-left: -2rem; padding-left: 2rem; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container { display: flex; flex-direction: column; gap: var(--pad); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .dragging, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .dragging { z-index: 1; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .dragging .drag-icon, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .dragging .drag-icon { cursor: grabbing !important; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .dragging > .draggable-item, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .dragging > .draggable-item { transition: transform 0.1s linear !important; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .dragging > .draggable-item.dragging, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .dragging > .draggable-item.dragging { transition: none !important; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .dragging > .draggable-item.dragging > input, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .dragging > .draggable-item.dragging > input { box-shadow: var(--drop-shadow); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .draggable-item, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .draggable-item { display: flex; align-items: center; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .draggable-item > .drag-icon, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .draggable-item > .drag-icon { display: flex; align-items: center; cursor: grab; width: var(--pad-2); height: 2rem; margin-right: 8px; margin-left: -4px; color: var(--table-muted-color); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .draggable-item > .drag-icon > .icon, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .draggable-item > .drag-icon > .icon { width: 1rem; height: 1rem; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .draggable-item > button, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .draggable-item > button { margin-left: var(--pad-1-2); } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body .drag-container > .draggable-item > input, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body .drag-container > .draggable-item > input { flex-grow: 1; background-color: var(--panel-bg); box-shadow: none; transition: box-shadow 0.1s ease-in-out; } [data-gw="Office.Speeddial.CreateContactGroupDialog"] > div > .body > .save-button, [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .save-button { margin-top: 1rem; margin-left: auto; display: block; } [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .drag-container { max-height: 50vh; overflow: auto; margin-bottom: 2rem; margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; padding-top: 8px; } [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .drag-container > .draggable-item { background-color: var(--body-bg); border-radius: var(--border-radius); padding-left: 8px; transition: box-shadow 0.1s ease-in-out; } [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .drag-container > .draggable-item.dragging { box-shadow: var(--drop-shadow); } [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .drag-container > .draggable-item > .drag-icon { margin-left: 0; } [data-gw="Office.Speeddial.ContactOrderDialog"] > div > .body > .drag-container > .draggable-item > .drag-icon + div { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .call-ended-dialog .call-category-selector { border-bottom: none; padding-bottom: 0; } [data-gw="Office.HeadsetSetupDialog"] .headset-controls { margin-top: var(--pad-2); display: flex; justify-content: space-between; } [data-gw="Office.RingerDeviceSetupDialog"] > .admin-dialog > .body > .smart-table { min-width: 500px; max-width: 700px; min-height: 300px; } [data-gw="Office.RingerDeviceSetupDialog"] .ringer-controls { margin-top: var(--pad-2); display: flex; justify-content: space-between; } [data-gw="Office.ContactEditDialog"] .form-buttons { justify-content: space-between; } [data-gw="Office.VoicemailsTable"] .voicemail-btns { display: flex; } [data-gw="Office.Mailbox"] tr[data-status="active"] { background-color: var(--table-alternation-warning-bg); color: var(--warning-hover); } [data-gw="Office.Mailbox"] tr[data-mine="1"] { background-color: var(--table-alternation-success-bg); color: var(--success-hover); } [data-gw="Office.Mailbox"] [data-col="ctl"] [data-action="voicemail-case-close"] { position: relative; } [data-gw="Office.Mailbox"] [data-col="ctl"] [data-action="voicemail-case-close"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/check.svg") center center / 16px 16px no-repeat; mask: url("/icons/check.svg") center center / 16px 16px no-repeat; } [data-gw="Office.Mailbox"] [data-col="ctl"] [data-action="voicemail-case-close"].selected::before { background: #fff; } [data-gw="Office.Mailbox"] [data-col="ctl"] [data-action="voicemail-case-close-fail"] { position: relative; } [data-gw="Office.Mailbox"] [data-col="ctl"] [data-action="voicemail-case-close-fail"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--error); -webkit-mask: url("/icons/close.svg") center center / 29.3333333333px 29.3333333333px no-repeat; mask: url("/icons/close.svg") center center / 29.3333333333px 29.3333333333px no-repeat; } [data-gw="Office.Mailbox"] [data-col="ctl"] [data-action="voicemail-case-close-fail"].selected::before { background: #fff; } [data-gw="Office.Mailbox"] [data-col="ctl"] .status { display: inline-flex; align-content: center; justify-content: space-between; column-gap: 6px; vertical-align: super; padding-left: 12px; font-size: var(--font-size-sm); } [data-gw="Office.Mailbox"] [data-col="ctl"] .status > .icon { flex-shrink: 0; width: 16px; height: 16px; } [data-gw="Office.CallRatings"] .call-rating-td .icon[data-name="check"] { display: block; width: 1rem; height: 1rem; margin-right: var(--pad-1-2); } [data-gw="Office.CallsTable"] th[data-col="category1"], [data-gw="Office.CallsTable"] th[data-col="category2"] { white-space: nowrap; } [data-gw="Office.CallsTable"] td[data-col="last_note"] { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cdr-history-screen > .body { display: flex; flex-direction: column; padding: var(--body-padding); overflow-x: auto; overflow-y: hidden; } .cdr-history-screen > .body.page-centered-container { max-width: 100vw; } .cdr-history-screen > .body .toolbar { min-width: 1280px; display: flex; align-items: flex-end; } .cdr-history-screen > .body .toolbar .form-field { margin-left: .75rem; margin-right: .75rem; margin-bottom: var(--pad-2); } .cdr-history-screen > .body .toolbar .form-field.time, .cdr-history-screen > .body .toolbar .form-field:first-child { margin-left: 0; } .cdr-history-screen > .body .toolbar > button { margin-left: var(--pad); margin-bottom: var(--pad-2); } .cdr-history-screen > .body .toolbar > button:first-of-type { margin-left: auto; } .cdr-history-screen > .body .smart-table { min-width: 1280px; height: 100%; background: var(--panel-bg); } [data-gw="CDR.CallRecordingsTable"] td[data-col="ctl"] { display: flex; align-items: center; } [data-gw="CDR.CallInfoScreen"] h2 { margin-top: var(--pad-2); } .cdr-call-info-not-found { text-align: center; font-size: var(--font-size-xl); font-weight: bold; color: var(--table-muted-color); padding: 100px 20px; } [data-gw="AudioPlayer"] { display: flex; align-items: center; width: 250px; max-width: 100%; background-color: var(--icon-static-color); color: var(--panel-bg); border-radius: var(--border-radius); padding: 0.25rem var(--pad); column-gap: var(--pad); } [data-gw="AudioPlayer"] + .button { margin-left: var(--pad) !important; } [data-gw="AudioPlayer"] .status-time, [data-gw="AudioPlayer"] .status-duration { flex-basis: 2rem; flex-shrink: 0; color: var(--border-default-color); } [data-gw="AudioPlayer"] .play-button { margin-left: 0 !important; margin-right: 0 !important; background-color: transparent; color: currentColor; min-width: 24px; min-height: 24px; } [data-gw="AudioPlayer"] .play-button > .icon-wrapper { line-height: 0.675; } [data-gw="AudioPlayer"] .progress-range { -webkit-appearance: none; appearance: none; background: transparent; border-radius: var(--border-radius-sm); cursor: grab; } [data-gw="AudioPlayer"] .progress-range::-webkit-slider-runnable-track { background-color: var(--input-placeholder-hover); } [data-gw="AudioPlayer"] .progress-range::-webkit-slider-thumb { width: 4px; -webkit-appearance: none; cursor: grabbing; background: var(--panel-bg); outline: none !important; } [data-gw="AudioPlayer"] .progress-range::-moz-range-progress { border-top-left-radius: var(--border-radius-xs); border-bottom-left-radius: var(--border-radius-xs); background-color: var(--primary-disabled); height: 8px; } [data-gw="AudioPlayer"] .progress-range::-moz-range-track { background-color: var(--input-placeholder-hover); } [data-gw="AudioPlayer"] .progress-range::-moz-range-thumb { width: 4px; background-color: var(--panel-bg); border-radius: var(--border-radius-xs); } [data-gw="AudioPlayer"] .progress-range:focus::-moz-range-thumb { outline: none; border: none; box-shadow: none; } .cdr-smart-table td { white-space: nowrap; } .cdr-smart-table td[data-col="result"] { color: var(--error); } .cdr-smart-table td[data-col="direction"] { padding-right: 0; white-space: nowrap; } .cdr-smart-table td[data-col="direction"] > .icon-wrapper { margin-right: var(--pad-1-2); } .cdr-smart-table td[data-col="details"] > * { margin-left: var(--pad-1-2); } .cdr-smart-table tr[data-direction="in"][data-result="connected"] [data-col="result"] { color: var(--success); } .cdr-smart-table tr[data-direction="out"][data-result="connected"] [data-col="result"] { color: var(--success); } .cdr-smart-table tr[data-direction="internal"][data-result="connected"] [data-col="result"] { color: var(--success); } .cdr-call-category-change-dialog .form-buttons { margin-top: var(--pad-2); } [data-gw="CDR.CallRatings"] [data-gw="CDR.CallRating"] .thread-content-container .thread-container { max-height: 35vh; } [data-gw="CDR.CallRating"] .rate-toolbar { display: flex; align-items: center; margin-bottom: 1.25rem; } [data-gw="CDR.CallRating"] .rate-toolbar .form-field { margin-left: 1.25rem; margin-bottom: 0; } [data-gw="CDR.CallRating"] .rate-toolbar .form-field .ack-checkbox { margin-bottom: 0; } [data-gw="CDR.CallRating"] .thread-content-container .thread-container { max-height: 64vh; } [data-gw="CDR.CallRating"] .thread-content-container .smart-textarea { width: 100%; margin-top: calc( -1 * var(--pad)); padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; } [data-gw="Outbound.CampaignsScreen"] > .body { flex-direction: column; padding: 0; } @media screen and (min-width: 768px) { [data-gw="Outbound.CampaignsScreen"] > .body { flex-direction: row; padding: var(--body-padding); } } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor { display: flex; flex-flow: column; height: 100%; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar .button-switcher, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar .button-switcher { margin-bottom: var(--pad-1-2); margin-right: var(--pad); width: 100%; } @media screen and (min-width: 576px) { [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar .button-switcher, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar .button-switcher { width: auto; } } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar .button-switcher button, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar .button-switcher button { width: 100%; } @media screen and (min-width: 576px) { [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar .button-switcher button, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar .button-switcher button { width: auto; } } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar input[type="search"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar input[type="search"] { margin-bottom: var(--pad-1-2); margin-right: 0; width: 100%; } @media screen and (min-width: 576px) { [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar input[type="search"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar input[type="search"] { width: auto; } } @media screen and (min-width: 768px) { [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar input[type="search"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar input[type="search"] { margin-left: auto; margin-right: var(--pad); } } @media screen and (min-width: 992px) { [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar input[type="search"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar input[type="search"] { width: var(--input-long-width); } } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar > button, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar > button { margin-bottom: var(--pad-1-2); margin-right: var(--pad); } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .toolbar > button:last-child, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .toolbar > button:last-child { margin-right: 0; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table { height: 100%; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table [data-col="description"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table [data-col="description"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table [data-col="ctl"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table [data-col="ctl"] { justify-content: flex-end; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th { white-space: normal; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="name"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="name"] { width: 15%; min-width: 100px; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="description"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="description"] { min-width: 100px; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="start_ts"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="start_ts"], [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="end_ts"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="end_ts"], [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="created"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="created"] { width: 10%; min-width: 140px; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="case_count"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="case_count"], [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="active_case_count"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="active_case_count"], [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="active_case_rate"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="active_case_rate"], [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="closed_case_count"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="closed_case_count"], [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container > .smart-table th[data-col="closed_case_rate"], [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor > .smart-table th[data-col="closed_case_rate"] { width: 10%; min-width: 100px; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container .menu, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor .menu { display: inline-flex; vertical-align: middle; width: 30px; height: 30px; position: relative; text-decoration: none; border-radius: var(--border-radius); } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container .menu::before, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor .menu::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--button-switcher-active-bg); -webkit-mask: url("/icons/vdots.svg") center center / 3px 15px no-repeat; mask: url("/icons/vdots.svg") center center / 3px 15px no-repeat; } [data-gw="Outbound.CampaignsScreen"] > .body > .panel-container .menu:hover, [data-gw="Outbound.CampaignsScreen"] > .body > .entity-list-editor .menu:hover { background-color: var(--secondary-active); } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header { flex-wrap: wrap; } @media screen and (min-width: 768px) { [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header { flex-flow: row; } } @media screen and (max-width: 767.98px) { [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header > *:first-child { padding-bottom: var(--pad); } } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header .center { width: 100%; order: 1; } @media screen and (min-width: 576px) { [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header .center { width: auto; order: unset; } } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header input[type="search"] { width: 100%; } @media screen and (min-width: 768px) { [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .header input[type="search"] { width: var(--input-long-width); } } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .body { height: 100%; } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .body > .controls { display: flex; } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .body > .controls > button { margin-left: var(--pad); margin-bottom: var(--pad-2); } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .body > .controls > button:first-of-type { margin-left: auto; } [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog > .body > .smart-table { height: 100%; } [data-gw="Outbound.CampaignDetailDialog"] .notes { display: inline-flex; width: 30px; height: 30px; position: relative; } [data-gw="Outbound.CampaignDetailDialog"] .notes::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/document.svg") center center / 16px 16px no-repeat; mask: url("/icons/document.svg") center center / 16px 16px no-repeat; } [data-gw="Outbound.CampaignDetailDialog"] .notes.filled { position: relative; } [data-gw="Outbound.CampaignDetailDialog"] .notes.filled::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/documentwithcontentfilled.svg") center center / 16px 16px no-repeat; mask: url("/icons/documentwithcontentfilled.svg") center center / 16px 16px no-repeat; } [data-gw="Outbound.NewCampaignDialog"] .file-handle { display: flex; align-items: center; background-color: var(--body-bg); border-radius: var(--border-radius); margin-top: var(--pad-1-2); padding: var(--pad); } [data-gw="Outbound.NewCampaignDialog"] .file-handle:empty { display: none; } [data-gw="Outbound.NewCampaignDialog"] .file-handle .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); padding-left: 6px; } [data-gw="Outbound.NewCampaignDialog"] .file-handle .file-handle-button { margin-left: auto; border: 0; cursor: pointer; border-radius: 20px; width: 20px; height: 20px; position: relative; background-color: var(--success); background-repeat: no-repeat; } [data-gw="Outbound.NewCampaignDialog"] .file-handle .file-handle-button::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: white; -webkit-mask: url("/icons/check.svg") center center / 15.6px 15.6px no-repeat; mask: url("/icons/check.svg") center center / 15.6px 15.6px no-repeat; } [data-gw="Outbound.NewCampaignDialog"] .file-handle .file-handle-button:hover { background-color: transparent; position: relative; } [data-gw="Outbound.NewCampaignDialog"] .file-handle .file-handle-button:hover::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: black; -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; } [data-gw="Outbound.NewCampaignDialog"] .file-handle + .form-buttons { margin-top: var(--pad-2); } @media screen and (max-width: 575.98px) { .mobile-ui[data-appcardtype="Outbound.CampaignsScreen"] [data-gw="Outbound.EditCampaignDialog"] > .admin-dialog, .mobile-ui[data-appcardtype="Outbound.CampaignsScreen"] [data-gw="Outbound.CampaignDetailDialog"] > .admin-dialog, .mobile-ui[data-appcardtype="Outbound.CampaignsScreen"] [data-gw="Outbound.CampaignCaseNotesDialog"] > .admin-dialog, .mobile-ui[data-appcardtype="Outbound.CampaignsScreen"] [data-gw="Outbound.NewCampaignDialog"] > .admin-dialog, .mobile-ui[data-appcardtype="Outbound.CampaignsScreen"] [data-gw="Main.ConfirmDialog"] > .admin-dialog { width: 100vw; } } [data-gw="FileUploadBox"] { padding: var(--pad-2); text-align: center; border: var(--file-upload-box-border); border-radius: var(--border-radius); } [data-gw="FileUploadBox"].drop-zone-active:not(.disabled) { background: var(--primary); } [data-gw="FileUploadBox"] > .dnd-note { margin-top: var(--pad); } .outbound-cases-smart-table tbody td[data-col="contact_phone"] { white-space: nowrap; } .outbound-cases-smart-table tbody td[data-col="contact_phone"] > .icon-wrapper { background: var(--panel-bg); width: 1.625rem; height: 1.625rem; border-radius: 1.625rem; box-shadow: var(--drop-shadow-sm); display: inline-flex; align-items: center; justify-content: center; margin-right: 0.5rem; } .outbound-cases-smart-table tbody td[data-col="contact_phone"] > .icon-wrapper > .icon { width: calc(0.5834 * var(--width)); height: calc(0.5834 * var(--height)); } .outbound-cases-smart-table tbody td[data-col="contact_note"] { white-space: nowrap; text-overflow: ellipsis; max-width: 25em; overflow: hidden; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="dial"] { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="dial"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--success-text); -webkit-mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; mask: url("/icons/phone-filled.svg") center center / 16px 16px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] .outbound-case-openurl { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] .outbound-case-openurl::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/globe.svg") center center / 16px 16px no-repeat; mask: url("/icons/globe.svg") center center / 16px 16px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-notes"] { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-notes"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/document.svg") center center / 16px 16px no-repeat; mask: url("/icons/document.svg") center center / 16px 16px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-notes"].filled { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-notes"].filled::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/documentwithcontentfilled.svg") center center / 16px 16px no-repeat; mask: url("/icons/documentwithcontentfilled.svg") center center / 16px 16px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-close"] { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-close"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/check.svg") center center / 16px 16px no-repeat; mask: url("/icons/check.svg") center center / 16px 16px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-close"].selected::before { background: #fff; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-close-fail"] { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-close-fail"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--error); -webkit-mask: url("/icons/close.svg") center center / 29.3333333333px 29.3333333333px no-repeat; mask: url("/icons/close.svg") center center / 29.3333333333px 29.3333333333px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="outbound-case-close-fail"].selected::before { background: #fff; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="callback-case-show-voicemails"] { position: relative; } .outbound-cases-smart-table tbody td[data-col="ctl"] [data-action="callback-case-show-voicemails"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--secondary-text); -webkit-mask: url("/icons/voicemail.svg") center center / 16px 16px no-repeat; mask: url("/icons/voicemail.svg") center center / 16px 16px no-repeat; } .outbound-cases-smart-table tbody td[data-col="ctl"] .status { display: inline-flex; align-content: center; justify-content: space-between; column-gap: 6px; vertical-align: super; padding-left: 12px; font-size: var(--font-size-sm); } .outbound-cases-smart-table tbody td[data-col="ctl"] .status > .icon { flex-shrink: 0; width: 16px; height: 16px; } .outbound-cases-smart-table tbody tr[data-status="active"] { background-color: var(--table-alternation-warning-bg); color: var(--warning-hover); } .outbound-cases-smart-table tbody tr[data-mine="1"] { background-color: var(--table-alternation-success-bg); color: var(--success-hover); } .outbound-cases-smart-table tbody tr.linked-contact [data-col="contact_name"], .outbound-cases-smart-table tbody tr.linked-contact [data-col="contact_company"] { color: var(--table-muted-color); } .outbound-cases-import-smart-table tbody td[data-col="note"] { white-space: nowrap; text-overflow: ellipsis; max-width: 25em; overflow: hidden; } .debug-screen .sidebar { padding: var(--pad-1-2); margin: 0; } [data-gw="Debug.StateScreen"] > .body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'toolbar' 'detail'; background-color: var(--panel-bg); padding: 0; margin: 0; max-width: none; } [data-gw="Debug.StateScreen"] > .body > .toolbar { grid-area: toolbar; border-bottom: 1px solid var(--border-default-color); display: flex; align-items: center; padding: 10px; } [data-gw="Debug.StateScreen"] > .body > .toolbar > *:not(:last-child) { margin-right: 5px; } [data-gw="Debug.StateScreen"] > .body > .toolbar > .fill { flex: 1; } [data-gw="Debug.StateScreen"] > .body > .detail { grid-area: detail; overflow: auto; padding: 20px; } [data-gw="Debug.StateScreen"] > .body > .detail img { margin: 20px; } [data-gw="Debug.StateScreen"] > .body > .detail h2 { font-size: 16px; color: red; } [data-gw="Debug.StateScreen"] > .body > .detail .agent { background: #cee; border: 1px solid #aaa; padding: 3px; margin-bottom: 3px; } [data-gw="Debug.StateScreen"] > .body > .detail .caller > *, [data-gw="Debug.StateScreen"] > .body > .detail .callee > * { display: inline; } [data-gw="Debug.StateScreen"] > .body > .detail .smart-table { margin-bottom: 30px; } [data-gw="Debug.StateScreen"] > .body > .detail .smart-table .empty-message { position: static; font-size: 14px; padding: 20px; } [data-gw="Debug.StateScreen"] > .body > .detail .smart-table table { table-layout: fixed; width: 100%; word-break: break-all; } [data-gw="Debug.StateScreen"] > .body > .detail .smart-table table td, [data-gw="Debug.StateScreen"] > .body > .detail .smart-table table th { padding: 2px 0; height: auto; } [data-gw="Debug.StateScreen"] > .body > .detail .smart-table table tr[data-json]:hover, [data-gw="Debug.StateScreen"] > .body > .detail .smart-table table tr[data-json]:hover td, [data-gw="Debug.StateScreen"] > .body > .detail .smart-table table tr[data-json]:hover th { background: #fba; } [data-gw="Debug.StateScreen"] > .body th[data-col=extension] { width: 100px; } [data-gw="Debug.StateScreen"] > .body th[data-col=state], [data-gw="Debug.StateScreen"] > .body th[data-col=available] { width: 180px; } [data-gw="Debug.StateScreen"] > .body th[data-col=start_ts], [data-gw="Debug.StateScreen"] > .body th[data-col=ring_ts], [data-gw="Debug.StateScreen"] > .body th[data-col=first_time], [data-gw="Debug.StateScreen"] > .body th[data-col=dial_ts] { width: 180px; } [data-gw="Debug.StateScreen"] > .body th[data-col=queue] { width: 100px; } [data-gw="Debug.StateScreen"] > .body td[data-status=available] { background: #ccffcc; color: green; } [data-gw="Debug.StateScreen"] > .body td[data-status=unavailable] { color: gray; } [data-gw="Debug.StateScreen"] > .body td[data-status=busy] { background: #ffcccc; color: red; } [data-gw="Debug.StateScreen"] > .body td[data-status=ringing] { background: #ffffcc; color: green; } [data-gw="Debug.StateScreen"] > .body [data-state=ringing] { color: brown; } [data-gw="Debug.StateScreen"] > .body [data-state=connected] { color: green; } [data-gw="Debug.StateScreen"] > .body [data-state=dialing] { color: orange; } [data-gw="Debug.StateScreen"] > .body .device { display: flex; } [data-gw="Debug.StateScreen"] > .body .device:not(:last-child) { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--border-default-color); } [data-gw="Debug.StateScreen"] > .body .device .id { width: 100px; font-size: 10px; color: gray; } [data-gw="Debug.StateScreen"] > .body .device .kind { width: 100px; } [data-gw="Debug.StateScreen"] > .body .device .status { flex: 1; } [data-gw="Debug.StateScreen"] > .body .device .status[data-status=reachable] { color: green; } [data-gw="Debug.StateScreen"] > .body .device .status[data-status=unreachable] { color: gray; } [data-gw="Debug.StateScreen"] > .body .peer { display: flex; } [data-gw="Debug.StateScreen"] > .body .peer:not(:last-child) { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--border-default-color); } [data-gw="Debug.StateScreen"] > .body .peer .name { width: 100px; font-size: 10px; color: gray; } [data-gw="Debug.StateScreen"] > .body .peer .role { width: 100px; } [data-gw="Debug.StateScreen"] > .body .peer .role[data-role=caller] { color: green; } [data-gw="Debug.StateScreen"] > .body .peer .num { width: 100px; } [data-gw="Debug.StateScreen"] > .body .peer .state { flex: 1; } [data-gw="Debug.StateScreen"] > .body .peer .state[data-state=precall] { color: black; } [data-gw="Debug.StateScreen"] > .body .peer .state[data-state=incall] { color: green; } [data-gw="Debug.StateScreen"] > .body .peer .state[data-state=left] { color: gray; } [data-gw="Debug.MobileRegistrationsScreen"] > .body, [data-gw="Debug.BugreportsScreen"] > .body, [data-gw="Debug.CallLogsScreen"] > .body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'toolbar' 'table'; background-color: var(--panel-bg); padding: 0; margin: 0; max-width: none; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .toolbar, [data-gw="Debug.BugreportsScreen"] > .body > .toolbar, [data-gw="Debug.CallLogsScreen"] > .body > .toolbar { grid-area: toolbar; border-bottom: 1px solid var(--border-default-color); display: flex; align-items: center; padding: 10px; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .toolbar:empty, [data-gw="Debug.BugreportsScreen"] > .body > .toolbar:empty, [data-gw="Debug.CallLogsScreen"] > .body > .toolbar:empty { display: none; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .toolbar > *:not(:last-child), [data-gw="Debug.BugreportsScreen"] > .body > .toolbar > *:not(:last-child), [data-gw="Debug.CallLogsScreen"] > .body > .toolbar > *:not(:last-child) { margin-right: 5px; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .toolbar > .fill, [data-gw="Debug.BugreportsScreen"] > .body > .toolbar > .fill, [data-gw="Debug.CallLogsScreen"] > .body > .toolbar > .fill { flex: 1; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .smart-table, [data-gw="Debug.BugreportsScreen"] > .body > .smart-table, [data-gw="Debug.CallLogsScreen"] > .body > .smart-table { grid-area: table; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .smart-table [data-col=time], [data-gw="Debug.BugreportsScreen"] > .body > .smart-table [data-col=time], [data-gw="Debug.CallLogsScreen"] > .body > .smart-table [data-col=time] { white-space: nowrap; } [data-gw="Debug.MobileRegistrationsScreen"] > .body > .smart-table [data-col=message], [data-gw="Debug.BugreportsScreen"] > .body > .smart-table [data-col=message], [data-gw="Debug.CallLogsScreen"] > .body > .smart-table [data-col=message] { white-space: pre-wrap; word-wrap: normal; width: 30%; } [data-gw="Debug.LogsScreen"] > .body { background-color: var(--panel-bg); padding: 20px; overflow: auto; display: flex; flex-direction: column; } [data-gw="Debug.LogsScreen"] > .body .metadata { position: relative; overflow: visible; } [data-gw="Debug.LogsScreen"] > .body .metadata .summary { display: flex; flex-direction: row; } [data-gw="Debug.LogsScreen"] > .body .metadata .summary > :first-child { flex: 1; } [data-gw="Debug.LogsScreen"] > .body .metadata .detail { overflow: auto; position: absolute; top: 100%; width: 100%; max-height: 20em; z-index: 1; background: var(--panel-bg); padding: var(--pad-1-2); box-shadow: var(--drop-shadow-lg); } [data-gw="Debug.LogsScreen"] > .body .metadata .detail pre { font-size: 0.8em; margin: 0; } [data-gw="Debug.LogsScreen"] > .body .metadata .detail .call-list { display: table; width: 100%; border-spacing: 0 0.5em; font-size: 0.8em; font-family: monospace; } [data-gw="Debug.LogsScreen"] > .body .metadata .detail .call-list .call-item { cursor: pointer; display: table-row; } [data-gw="Debug.LogsScreen"] > .body .metadata .detail .call-list .call-item > * { display: table-cell; width: 1px; white-space: nowrap; padding-right: var(--pad-2); } [data-gw="Debug.LogsScreen"] > .body .metadata .detail .call-list .call-item > *:last-child { width: auto; } [data-gw="Debug.LogsScreen"] > .body .metadata .detail .call-list .call-item:hover { background-color: var(--table-alternation-bg); } [data-gw="Debug.LogsScreen"] > .body .no-entries { flex: 1; } [data-gw="Debug.LogsScreen"] > .body .no-entries-upload { display: flex; align-content: center; justify-content: center; height: 100%; padding: var(--pad-2); text-align: center; flex-direction: column; align-items: center; border: var(--file-upload-box-border); border-radius: var(--border-radius); } [data-gw="Debug.LogsScreen"] > .body .no-entries-upload.drop-zone-active:not(.disabled) { background: var(--primary); } [data-gw="Debug.LogsScreen"] > .body .no-entries-upload > .dnd-note { margin-top: var(--pad); } [data-gw="Debug.LogsScreen"] > .body .timeline-wrap { display: flex; flex-direction: column; flex: 1; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap { display: flex; flex-direction: column; flex: 1; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .toolbar { height: auto; padding: var(--pad-1-2); display: flex; flex-direction: row; align-items: center; column-gap: var(--pad); } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .toolbar > .filter-category { display: flex; flex-direction: row; column-gap: var(--pad-1-2); height: 26px; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .toolbar > .filter-category > * { opacity: 0.4; padding: 0 6px; font-size: 0.9em; line-height: 24px; color: white; font-weight: normal; cursor: pointer; border-radius: var(--border-radius-sm); } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .toolbar > .filter-category > *.active { opacity: 1; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport { display: flex; flex-direction: row; overflow: hidden; flex: 1; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport:focus-visible { outline: 0; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries { max-height: 100%; overflow: auto; flex: 1; font-family: monospace; position: relative; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .lines { width: 100%; height: 100%; position: relative; overflow: hidden; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .lines .line { width: 100%; max-width: 100%; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry { font-size: 12px; width: 100%; max-width: 100%; height: 13px; display: flex; white-space: pre; flex-direction: row; cursor: pointer; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry.matched { background: yellow; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry.space { cursor: default; box-shadow: 0 0 7px 2px black; height: 16px; position: relative; top: 5px; padding: 0 3px; overflow: hidden; text-wrap: nowrap; text-overflow: ellipsis; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry.group:hover { background: var(--table-row-hover-bg); } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry > :nth-child(1) { width: 90px; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry > :nth-child(2) { width: 80px; font-weight: bold; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry > :nth-child(3) { width: 20px; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry > :nth-child(4) { width: 200px; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry > :nth-child(5) { flex: 1; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .entry > * { padding: 0 3px; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .item-popup { position: absolute; width: 100%; height: auto; overflow: auto; background: var(--body-bg); white-space: pre; min-height: 1em; border: 1px solid var(--border-default-color); box-shadow: var(--drop-shadow-sm); } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .entries .item-popup .entry { cursor: default; height: auto; width: fit-content; max-width: fit-content; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .minimap { width: 3em; background: var(--body-bg); cursor: pointer; position: relative; overflow: visible; margin-right: 6px; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .minimap > .minimap-canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } [data-gw="Debug.LogsScreen"] > .body .logs-wrap > .viewport > .minimap > .scroll-handle { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: var(--border-default-color) 1px solid; pointer-events: none; background: rgba(141, 141, 141, 0.41); box-shadow: 0 0 6px 3px black; } [data-gw="Debug.CallsScreen"] > .body { display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: 'list detail'; background-color: var(--panel-bg); padding: 0; margin: 0; max-width: none; } [data-gw="Debug.CallsScreen"] > .body > .detail { grid-area: detail; position: relative; overflow: scroll; } [data-gw="Debug.CallsScreen"] > .body > .detail .labels { z-index: 1; position: absolute; top: 0; left: 0; overflow: hidden; } [data-gw="Debug.CallsScreen"] > .body > .detail .labels .label { position: absolute; } [data-gw="Debug.CallsScreen"] > .body > .detail .labels .label:hover { background: #aaffaa88; } [data-gw="Debug.CallsScreen"] > .body > .smart-table { grid-area: list; border-right: 1px solid #ccc; } [data-gw="Debug.CallsScreen"] > .body > .smart-table [data-col=id] .time { font-weight: normal; font-size: 10px; } [data-gw="Debug.LoopbackScreen"] > .body { background-color: var(--panel-bg); padding: 20px; overflow: auto; } [data-gw="Debug.LoopbackScreen"] > .body > .event-list > .event { padding: 20px; white-space: pre-wrap; } [data-gw="Debug.LoopbackScreen"] > .body > .event-list > .event:nth-child(2n+1) { background: #eee; } .debug-popup { background: #cec; padding: 5px; font-size: 10px; white-space: pre-wrap; width: 400px; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); } .debug-json-popup { background: #cec; padding: 5px; font-size: 10px; white-space: pre-wrap; width: 600px; font-family: monospace; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); } [data-appcardtype^="Admin."] .main-screen > .admin-body > .sidebar { margin-right: var(--pad); } [data-gw="Admin.UsersScreen"] > .body > .smart-table table, [data-gw="Admin.UsersScreen"] > .admin-body > .body > .smart-table table { table-layout: fixed; } [data-gw="Admin.UsersScreen"] > .body > .smart-table th[data-col="id"], [data-gw="Admin.UsersScreen"] > .admin-body > .body > .smart-table th[data-col="id"] { width: 50px; } [data-gw="Admin.UsersScreen"] > .body > .smart-table th[data-col="name"], [data-gw="Admin.UsersScreen"] > .admin-body > .body > .smart-table th[data-col="name"] { width: auto; } [data-gw="Admin.UsersScreen"] > .body > .smart-table th[data-col="email"], [data-gw="Admin.UsersScreen"] > .admin-body > .body > .smart-table th[data-col="email"] { width: 20%; } [data-gw="Admin.UsersScreen"] > .body > .smart-table th[data-col="extension"], [data-gw="Admin.UsersScreen"] > .admin-body > .body > .smart-table th[data-col="extension"] { width: 100px; } [data-gw="Admin.PausesScreen"] > .body, [data-gw="Admin.PausesScreen"] > .admin-body > .body { grid-template-areas: 'toolbar toolbar' 'table table'; grid-template-columns: none; } [data-gw="Admin.PausesScreen"] > .body > .smart-table table, [data-gw="Admin.PausesScreen"] > .admin-body > .body > .smart-table table { table-layout: auto; } [data-gw="Admin.PausesScreen"] > .body > .smart-table th[data-col="ctl"], [data-gw="Admin.PausesScreen"] > .admin-body > .body > .smart-table th[data-col="ctl"] { width: 70px; } [data-gw="Admin.PausesScreen"] > .body > .smart-table td[data-col="name"], [data-gw="Admin.PausesScreen"] > .admin-body > .body > .smart-table td[data-col="name"] { min-width: 20%; max-width: 50%; } [data-gw="Admin.PausesScreen"] > .body > .smart-table td[data-col="description"], [data-gw="Admin.PausesScreen"] > .admin-body > .body > .smart-table td[data-col="description"] { white-space: normal; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body, [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body, [data-gw="Admin.UserCondsScreen"] > .admin-body > .body { display: grid; grid-template-columns: 260px minmax(calc( 992px / 1.75), 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'groups toolbar' 'groups table'; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .toolbar, [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body > .toolbar, [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .toolbar { grid-area: toolbar; border-bottom: 1px solid var(--border-default-color); display: flex; align-items: center; padding: 10px; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .toolbar > select, [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .toolbar > input, [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body > .toolbar > select, [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body > .toolbar > input, [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .toolbar > select, [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .toolbar > input { width: auto; min-width: 100px; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .toolbar > *:not(:last-child), [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body > .toolbar > *:not(:last-child), [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .toolbar > *:not(:last-child) { margin-right: 5px; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .toolbar > .fill, [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body > .toolbar > .fill, [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .toolbar > .fill { flex: 1; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .editable-item-selector, [data-gw="Admin.SpeeddialsScreen"] > .admin-body > .body > .editable-item-selector, [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .editable-item-selector { grid-area: groups; padding: 0 var(--pad); border-left: var(--border-default-width) solid var(--border-default-color); height: calc(100vh - (44px + ( 2 * 13px ) + ( 2 * var(--body-padding) ) )); } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table { grid-area: table; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table table { table-layout: fixed; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th, [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th[data-col="ctl"] { width: 30px; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th[data-col="name"] { width: auto; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th[data-col="company"] { width: 20%; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th[data-col="phone"] { width: 15%; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th[data-col="extension"] { width: 10%; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table th[data-col="email"] { width: 15%; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table td[data-col="ctl"] { padding: 0; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table td[data-col="note"] { width: 15%; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table .menu { display: inline-block; width: 24px; height: 24px; position: relative; text-decoration: none; } [data-gw="Admin.ContactsScreen"] > .admin-body > .body > .smart-table .menu::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--body-fg); -webkit-mask: url("/icons/vdots.svg") center center / 3px 15px no-repeat; mask: url("/icons/vdots.svg") center center / 3px 15px no-repeat; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'groups toolbar toolbar' 'groups list1 list2'; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .toolbar { grid-area: toolbar; border-bottom: 1px solid var(--border-default-color); display: flex; align-items: center; padding: 10px; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .toolbar > select, [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .toolbar > input { width: auto; min-width: 100px; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .toolbar > *:not(:last-child) { margin-right: 5px; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .toolbar > .fill { flex: 1; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .editable-item-selector { grid-area: groups; padding: 0 var(--pad); border-right: var(--border-default-width) solid var(--border-default-color); height: calc(100vh - (44px + ( 2 * 13px ) + ( 2 * var(--body-padding) ) )); } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list { grid-area: list1; padding: var(--pad); overflow: auto; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .title { font-weight: bold; margin-bottom: var(--pad); font-size: 18px; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .empty { text-align: center; font-size: 24px; color: var(--table-muted-color); margin-top: 100px; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item { margin-bottom: var(--pad-1-2); display: flex; align-items: center; min-height: var(--input-height); } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item .name { border-radius: var(--border-radius-sm); padding: var(--pad-1-2); background: #ccc; color: black; margin-right: 10px; flex: 1 0; display: flex; align-items: center; --color: black; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item .name .icon[data-name=menu] { width: calc(0.7 * var(--width)); height: calc(0.7 * var(--height)); } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item .name .text { flex: 1 0; margin: 0 var(--pad-1-2); } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item .name .rename { padding: 4px; min-width: 0; min-height: 0; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item .name .rename .icon { width: calc(0.7 * var(--width)); height: calc(0.7 * var(--height)); --color: black; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .dragging > .dragging { position: relative; z-index: 1; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list > .new-item-editor { align-items: center; display: flex; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list > .new-item-editor input { flex: 1; margin-right: 10px; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .topcategories-list .category-item .name { cursor: pointer; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .topcategories-list .category-item:hover .name { background: #ddd; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .topcategories-list .category-item.selected .name { background: var(--primary-hover); color: white; --color: white; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .subcategories-list { grid-area: list2; } [data-gw="Admin.CallCategoryHierarchies"] > .admin-body > .body > .categories-list .category-item.dragging .name { background: #333; color: white; --color: white; } [data-appcardid="Admin.QueuesScreen"] h6 { flex-basis: 100%; margin-bottom: var(--pad); } [data-appcardid="Admin.QueuesScreen"] .intervals-container { display: flex; flex-wrap: wrap; column-gap: 2rem; width: 540px; margin-bottom: 2rem; } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid { display: grid; grid-template-areas: 'title title' 'labelfrom labelto' 'inputfrom inputto'; grid-template-columns: 52px 114px; column-gap: var(--pad); } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid > .button:first-child { grid-area: title; margin-bottom: 8px; } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid label { margin-bottom: 4px; font-size: var(--font-size-sm); } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid label:nth-child(2) { grid-area: labelfrom; } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid .input-stepper:nth-child(3) { grid-area: inputfrom; } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid label:nth-child(4) { grid-area: labelto; } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid .input-stepper:nth-child(5) { grid-area: inputto; } [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid:nth-child(4), [data-appcardid="Admin.QueuesScreen"] .intervals-container .interval-grid:nth-child(8) { grid-template-columns: 52px 52px; } [data-gw="Admin.QueuesScreen"] .admin-body > .body, [data-gw="Admin.ExtensionsScreen"] .admin-body > .body { display: flex; flex-direction: column; } [data-gw="Admin.QueuesScreen"] .admin-body > .body > .toolbar, [data-gw="Admin.ExtensionsScreen"] .admin-body > .body > .toolbar { display: flex; margin-bottom: var(--pad-1-2); justify-content: flex-end; } .admin-contacts-export > .link { display: block; margin-bottom: var(--pad); } .admin-group-selection-overlay { background-color: var(--primary-hover); color: var(--primary-text); padding: var(--pad) var(--pad) var(--pad) var(--pad-2); display: flex; align-items: center; border-radius: var(--border-radius-lg); } .admin-group-selection-overlay > .text { flex: 1; } .admin-searchable-item-selector { position: relative; display: flex; flex-direction: column; } .admin-searchable-item-selector > h4 { padding-top: var(--pad-1-2); margin-top: var(--pad-2); margin-bottom: var(--panel-padding); white-space: nowrap; } .admin-searchable-item-selector > h4 .count { color: var(--table-muted-color); margin-left: 5px; font-weight: var(--font-weight-normal); } .admin-searchable-item-selector > input.search { width: 100%; margin-bottom: var(--pad); } .admin-searchable-item-selector > .smart-table { flex: 1; flex-basis: 0; } .admin-searchable-item-selector > .smart-table table { margin-bottom: calc( var(--panel-padding) + 56px); } .admin-searchable-item-selector > .smart-table [data-col=cb] { width: 40px; } .admin-searchable-item-selector > .smart-table tr.subdued td { color: var(--table-muted-color); } .admin-searchable-item-selector > .smart-table td[data-col=cb] { padding-left: var(--table-padding-x); } .admin-searchable-item-selector > .smart-table td[data-col=text] { word-break: break-word; } .admin-searchable-item-selector > .admin-group-selection-overlay { box-shadow: var(--drop-shadow-lg); position: absolute; bottom: var(--panel-padding); } .admin-searchable-item-selector > .empty, .admin-searchable-item-selector > .loading { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .admin-searchable-item-selector > .empty h5, .admin-searchable-item-selector > .loading h5 { margin-top: var(--pad); margin-bottom: var(--pad); } .admin-searchable-item-selector > .empty p, .admin-searchable-item-selector > .loading p { margin: 0; } .admin-searchable-item-selector[data-status="empty"] > .admin-group-selection-overlay, .admin-searchable-item-selector[data-status="empty"] > .smart-table, .admin-searchable-item-selector[data-status="empty"] > input.search, .admin-searchable-item-selector[data-status="empty"] > .loading { display: none; } .admin-searchable-item-selector[data-status="loading"] > .admin-group-selection-overlay, .admin-searchable-item-selector[data-status="loading"] > .smart-table, .admin-searchable-item-selector[data-status="loading"] > input.search, .admin-searchable-item-selector[data-status="loading"] > .empty, .admin-searchable-item-selector[data-status="loading"] > h2 .count { display: none; } .admin-searchable-item-selector[data-status="loaded"] > .empty, .admin-searchable-item-selector[data-status="loaded"] > .loading { display: none; } .admin-group-association-panel { display: flex; align-items: stretch; height: 100%; overflow: auto; } .admin-group-association-panel > .included { height: 100%; flex: 1; padding-right: var(--panel-padding); } .admin-group-association-panel > .included .admin-group-selection-overlay { left: 0; right: var(--panel-padding); } .admin-group-association-panel > .excluded { height: 100%; flex: 1; padding-left: var(--panel-padding); border-left: var(--border-default-width) solid var(--border-default-color); } .admin-group-association-panel > .excluded .admin-group-selection-overlay { right: 0; left: var(--panel-padding); } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body { display: flex; overflow: hidden; } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body > .editable-item-selector { width: 260px; padding: 0 var(--pad); border-left: var(--border-default-width) solid var(--border-default-color); } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body > .tabbed-card-panel { flex: 1; padding-bottom: 0; margin-bottom: 5px; margin-right: 5px; } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body > .tabbed-card-panel > .toolbar { padding-bottom: 0; border-bottom: none; } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body > .tabbed-card-panel > .toolbar .tab-switcher { margin-bottom: 0; } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body > .tabbed-card-panel > .card-switcher[data-cardid="__empty"] { overflow: auto; display: flex; flex-direction: column; padding-bottom: var(--panel-padding); margin-bottom: var(--panel-padding); } [data-gw="Admin.UserGroupsScreen"] > .admin-body > .body > .tabbed-card-panel > .card-switcher[data-cardid="__empty"] > .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: auto; margin-bottom: auto; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] { display: flex; flex-direction: column; padding-bottom: var(--panel-padding); overflow-x: auto; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] > [data-gw="Admin.UserGroupsScreen.Priorities"] { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; min-width: 992px; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .smart-table { height: 100%; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) { margin-top: 28px; margin-bottom: 28px; flex-grow: 0; height: auto; overflow-y: hidden; min-height: 56px; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table { min-height: 56px; border-radius: var(--table-border-radius); } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table tr { background: var(--body-bg); } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table td { height: 56px; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table td input { background: var(--panel-bg); --drop-shadow-hardness: 0.08; box-shadow: 0px 2px 4px rgba(0, 0, 0, var(--drop-shadow-hardness)); margin-left: -6px; } @media screen and (min-width: 1920px) { [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table td input { margin-left: -10px; } } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table td:first-child { font-size: var(--heading-6); font-weight: var(--font-weight-bolder); border-top-left-radius: var(--table-border-radius); } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table:not([data-gw="FilterableSmartTable"]) table td:last-child { border-top-right-radius: var(--table-border-radius); text-align: right; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table { width: 100%; table-layout: fixed; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table td input { width: 100%; max-width: 100%; } @media screen and (min-width: 1920px) { [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table th:first-child, [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table td:first-child { width: 15%; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table th:nth-child(2), [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table td:nth-child(2) { width: 30%; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table th:nth-child(3), [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table td:nth-child(3) { width: 8%; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table th:nth-child(4), [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table td:nth-child(4) { width: 8%; } [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table th:last-child, [data-cardtype="Admin.UserGroupsScreen.Priorities"] .admin-priority-table table td:last-child { width: 8%; } } [data-cardtype="Admin.UserGroupsScreen.Options"], [data-cardtype="Admin.UserGroupsScreen.AgentPanelTabs"] { padding-top: var(--pad-2); overflow: auto; } [data-cardtype="Admin.UserGroupsScreen.Options"] { padding-left: 5px; } [data-cardtype="Admin.UserGroupsScreen.Options"] h6 { font-weight: bold; font-size: 1rem; margin-bottom: 15px; } [data-cardtype="Admin.UserGroupsScreen.Options"] .subgroup { margin-left: var(--pad-2); margin-bottom: var(--pad); } [data-cardtype="Admin.UserGroupsScreen.Options"] .subgroup > .radio-field:first-child:last-child { margin-bottom: var(--pad-2); } .admin-group-applications-panel table { border-spacing: 0; border-collapse: collapse; table-layout: fixed; margin-top: var(--pad); border-radius: var(--border-radius-sm); overflow: hidden; } .admin-group-applications-panel table thead tr { background: var(--primary-hover); color: var(--primary-text); } .admin-group-applications-panel table td, .admin-group-applications-panel table th { padding: 5px; text-align: left; } .admin-group-applications-panel table .role { width: 90px; text-align: center; } .admin-group-applications-panel table .role input { vertical-align: sub; } .admin-group-applications-panel table tr.app:hover { background: var(--table-row-hover-bg); } .admin-api-tester { border-spacing: 0; border-collapse: collapse; width: 100%; table-layout: auto; margin-bottom: 20px; } .admin-api-tester tr.group-header td { font-size: 18px; display: flex; align-items: center; font-weight: bold; border: 0; padding-top: 20px; } .admin-api-tester tr.header { background: #cef; } .admin-api-tester tr.header td .flex { display: flex; justify-content: space-between; } .admin-api-tester tr.header td .expander { cursor: pointer; } .admin-api-tester tr.header td .expander:hover { --color: gray; } .admin-api-tester tr.header td .fill { flex: 1; } .admin-api-tester tr.header td .title { margin-left: 10px; display: flex; align-items: center; } .admin-api-tester tr.header td .title .method { font-weight: bold; display: inline-block; width: 5em; } .admin-api-tester tr.header td .title .method[data-method=POST] { color: green; } .admin-api-tester tr.header td .title .method[data-method=PUT] { color: green; } .admin-api-tester tr.header td .title .method[data-method=DELETE] { color: red; } .admin-api-tester tr.header td .title .method[data-method=GET] { color: blue; } .admin-api-tester tr.header td .title .select-input, .admin-api-tester tr.header td .title input { background-color: white; } .admin-api-tester td, .admin-api-tester th { border: 1px solid #aaa; padding: 5px; } .admin-api-tester td.arrow { width: 20px; text-align: center; } .admin-api-tester td.req { width: 500px; } .admin-api-tester td.req textarea { display: block; width: 100%; height: 130px; } .admin-api-tester td.req button { display: block; } .admin-api-tester td.res { width: 500px; white-space: pre-wrap; vertical-align: top; } .admin-api-tester td.res[data-status=fail] { background: #fcc; } .admin-api-tester td.res[data-status=ok] { background: #cfc; } [data-gw="Admin.DiskUsageScreen"] .disk-usage { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 20px; padding-left: 4px; padding-right: 4px; padding-bottom: 5px; overflow: auto; } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk { min-width: 360px; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; background: var(--panel-bg); border-radius: var(--border-radius); padding: 20px 26px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; cursor: default; box-shadow: var(--panel-shadow); } @media screen and (min-width: 992px) { [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk { min-width: auto; flex-basis: calc( ( 100% / 2 ) - 10px); } } @media screen and (min-width: 1280px) { [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk { flex-basis: calc( ( 100% / 3 ) - 14px); } } @media screen and (min-width: 1920px) { [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk { flex-basis: calc( ( 100% / 4 ) - 16px); } } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-header { display: flex; flex-direction: row; align-items: center; gap: 20px; } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-header .disk-usage-title { flex-grow: 1; font-weight: var(--font-weight-bolder); font-size: var(--font-size-xl); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-header .disk-usage-label { font-size: var(--font-size-lg); white-space: nowrap; } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-progress { margin-top: 24px; height: 20px; border-radius: var(--border-radius-lg); background: var(--border-default-color); overflow: hidden; } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-progress > div { background: var(--primary); height: 100%; } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-footer { margin-top: 8px; display: flex; flex-direction: row; font-size: var(--font-size-base); color: var(--table-muted-color); } [data-gw="Admin.DiskUsageScreen"] .disk-usage-disk .disk-usage-footer > div:nth-child(1) { flex-grow: 1; } [data-gw="PBX.Sounds"] .smart-table > table td[data-col="description"] { max-width: 200px; } [data-gw="PBX.Sounds"] .smart-table > table td[data-col="name"] { max-width: 300px; } [data-gw="PBX.Sounds"] .smart-table > table td[data-col="content"] { max-width: 400px; } [data-gw="PBX.Sounds"] .smart-table > table td[data-col="text"] { max-width: 600px; } [data-gw="Admin.UserCondsScreen"] > .admin-body > .body { grid-template-areas: 'toolbar body'; grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); overflow: hidden; } [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .editable-item-selector { grid-area: toolbar; width: 260px; } [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .card-switcher { grid-area: body; overflow: auto; } [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .card-switcher > .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } [data-gw="Admin.UserCondsScreen"] > .admin-body > .body > .card-switcher .used-note { font-style: italic; padding-bottom: 2em; } .summary-screen > .sidebar { padding: var(--pad-1-2); margin: 0; width: auto; } .summary-screen h2 { margin-top: var(--pad); } .summary-screen td[data-highlight=notice] { background: #ffff90; } .summary-screen td[data-highlight=warn] { background: #ffc591; } .summary-screen td[data-highlight=urgent] { background: #ff9191; } [data-appcardtype="Docs.Chooser"] .application { height: 100%; } [data-appcardtype="Docs.Chooser"] .application .main-screen { height: 100%; } [data-appcardtype="Docs.Chooser"] .application .main-screen .body { display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: auto; padding-top: var(--body-padding); padding-bottom: var(--body-padding); } @media screen and (min-width: 1280px) { [data-appcardtype="Docs.Chooser"] .application .main-screen .body { flex-direction: row; } } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .title { white-space: pre-line; margin-bottom: 40px; line-height: 150%; text-align: center; font-size: var(--heading-2); } @media screen and (min-width: 768px) { [data-appcardtype="Docs.Chooser"] .application .main-screen .body .title { font-size: var(--heading-1); } } @media screen and (min-width: 1280px) { [data-appcardtype="Docs.Chooser"] .application .main-screen .body .title { text-align: left; } } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .illustration { max-width: 60%; height: auto; } @media screen and (min-width: 768px) { [data-appcardtype="Docs.Chooser"] .application .main-screen .body .illustration { max-width: 75%; margin-top: 0; } } @media screen and (min-width: 1280px) { [data-appcardtype="Docs.Chooser"] .application .main-screen .body .illustration { max-width: 100%; margin-right: 60px; } } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .illustration + div { max-width: 100%; } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .docs-container { display: flex; gap: 20px; flex-direction: column; } @media screen and (min-width: 992px) { [data-appcardtype="Docs.Chooser"] .application .main-screen .body .docs-container { flex-direction: row; } } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .docs-container .button { background: var(--module-chooser-bg); border: none; padding-left: 2rem; padding-right: 2rem; height: 80px; box-shadow: var(--panel-shadow); color: var(--body-fg); justify-content: flex-start; font-size: var(--heading-4-mobile); } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .docs-container .button:hover { box-shadow: var(--drop-shadow); } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .docs-container .button .icon { margin-right: 24px; } [data-appcardtype="Docs.Chooser"] .application .main-screen .body .docs-container .button .icon + div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } [data-appcardtype="Docs.Reader"] .main-screen > .header .title .subtitle { display: flex; align-items: center; align-self: stretch; } [data-appcardtype="Docs.Reader"] .main-screen > .header .title .subtitle .icon { margin-left: .8rem; margin-right: .65rem; opacity: 0.6; } [data-appcardtype="Docs.Reader"] .main-screen > .header .title .subtitle > div { display: flex; align-items: center; align-self: stretch; } [data-appcardtype="Docs.Reader"] .main-screen > .body, [data-appcardtype="Docs.Reader"] .main-screen > .sidebar { padding-top: var(--body-padding); padding-bottom: var(--body-padding); max-height: calc( 100vh - 70px); } [data-appcardtype="Docs.Reader"] .main-screen > .sidebar { padding-left: var(--body-padding); padding-right: var(--body-padding); margin-right: 0; width: auto; overflow: auto; width: calc( 200px + ( 2 * var(--body-padding) )); max-width: 280px; } [data-appcardtype="Docs.Reader"] .main-screen > .sidebar .vertical-menu .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; } [data-appcardtype="Docs.Reader"] .main-screen > .body { padding-left: 0; padding-right: var(--body-padding); overflow: hidden; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor { max-height: calc( 100vh - 70px - (2 * var(--body-padding))); padding: 1rem; overflow: auto; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container.scroll-smooth, [data-appcardtype="Docs.Reader"] .main-screen > .body .scroll-smooth.entity-list-editor { scroll-behavior: smooth; } @media screen and (min-width: 768px) { [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor { padding: 2rem; } } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container *:target, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor *:target { scroll-margin-top: 30px; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container img, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor img { max-width: 100%; border-radius: var(--border-radius); } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h1, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h1, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h2, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h2, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h3, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h3, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h4, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h4, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h5, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h5, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h6, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h6, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container p, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor p, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container ul, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor ul, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container ol, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor ol { margin-top: 20px; margin-bottom: 20px; line-height: 150%; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h2, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h2 { margin-top: 52px; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h2:first-child, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h2:first-child { margin-top: -2px; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h3, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h3 { margin-top: 36px; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h4, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h4 { margin-top: 24px; } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container hr, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor hr { margin-top: 2rem; margin-bottom: 2rem; border-top: none; border-color: var(--border-default-color); } [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container p, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor p { font-size: var(--font-size-xl); line-height: 150%; } @media screen and (min-width: 1280px) { [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h1, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h1, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h2, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h2, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h3, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h3, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h4, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h4, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h5, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h5, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container h6, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor h6, [data-appcardtype="Docs.Reader"] .main-screen > .body .panel-container p, [data-appcardtype="Docs.Reader"] .main-screen > .body .entity-list-editor p { width: 80%; max-width: 620px; } } :root { --attendance-color-0: #E36B00; --attendance-color-1: #3564EF; --attendance-color-2: #00A35A; --attendance-color-3: #C3C6CF; --pause-color-0: #B33DC6; --pause-color-1: #27AEEF; --pause-color-2: #87BC45; --pause-color-3: #BDCF32; --pause-color-4: #EDE15B; --pause-color-5: #EDBF33; --pause-color-6: #EF9B20; --pause-color-7: #F46A9B; --pause-color-8: #EA5545; } [data-cardtype="Reports.ReportScreen"] { min-width: 1280px; } [data-cardtype="Reports.ReportScreen"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] { display: flex; flex-flow: column; flex-grow: 1; overflow: hidden; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'views views' 'table chart' 'table chart'; padding: 0 5px 5px; overflow: hidden; height: 100%; padding-top: var(--pad); } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content [data-gw="Widgets.ButtonSwitcher"] { margin-bottom: var(--pad); } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col^="count_connected_"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col^="count_not_connected_"] { padding-left: var(--pad-1-4); padding-right: var(--pad-1-4); text-align: center; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col="user_id"] ~ [data-col="missed_calls_count"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col="user_id"] ~ [data-col="missed_cases_count"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col="user_id"] ~ [data-col="not_closed_count"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col="user_id"] ~ [data-col="cases_missed_calls_share"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col="user_id"] ~ [data-col="close_result_share"] { display: none; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .smart-table [data-col="queue"] ~ [data-col="success_result_share"] { display: none; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-views-row { grid-area: views; display: flex; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-views-row .report-views { max-width: 100%; flex: 1; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-views-row .report-views .select-input { max-width: 280px; margin-bottom: var(--pad-2); } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-views-row .report-filter { align-self: end; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table { grid-area: table; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="user_id"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="user_name"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="queue"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="success_result_share"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="close_result_share"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="service_level_ratio"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="cases_missed_calls_share"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="chart"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="ratio"], [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-table [data-col="group_id"] { white-space: nowrap; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-chart { grid-area: chart; min-width: 640px; padding: 2.5rem; overflow: auto; max-height: 100%; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-chart:empty { padding: 0; display: none; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-chart:not(:empty) { margin-left: 2em; height: fit-content; } [data-cardtype="Reports.ReportScreen"] [data-gw="Reports.ReportScreen"] > .report-content .report-alt-content { font-weight: bold; padding-top: 200px; text-align: center; } [data-gw="Reports.OverviewScreen"] > .body { display: flex; flex-direction: column; padding: var(--body-padding); overflow-x: auto; overflow-y: hidden; } [data-gw="Reports.OverviewScreen"] > .body .tab-switcher { min-width: 1280px; } [data-gw="Reports.OverviewScreen"] > .body .toolbar { display: flex; flex-flow: row; align-items: flex-end; padding-right: 2px; } [data-gw="Reports.OverviewScreen"] > .body .toolbar .filters { display: contents; } [data-gw="Reports.OverviewScreen"] > .body .toolbar .form-field { margin-left: .75rem; margin-right: .75rem; margin-bottom: var(--pad); } [data-gw="Reports.OverviewScreen"] > .body .toolbar .form-field.time, [data-gw="Reports.OverviewScreen"] > .body .toolbar .form-field:first-child { margin-left: 0; } [data-gw="Reports.OverviewScreen"] > .body .toolbar > button { margin-left: var(--pad); margin-bottom: var(--pad); } [data-gw="Reports.OverviewScreen"] > .body .toolbar > button:first-of-type { margin-left: auto; } [data-gw="Reports.OverviewScreen"] > .body .smart-table { height: 100%; } [data-gw="Reports.OverviewScreen"] > .body .smart-table th > div { text-align: center; } [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col^="h"] { text-align: center; } [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="user_name"], [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="queue"], [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="extension"], [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="group_id"] { font-weight: var(--font-weight-bolder); } [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="user_name"] > .queue-name, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="user_name"] > .queue:first-child, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="queue"] > .queue-name, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="queue"] > .queue:first-child, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="extension"] > .queue-name, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="extension"] > .queue:first-child, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="group_id"] > .queue-name, [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="group_id"] > .queue:first-child { font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); } [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="user_name"] > .queue:last-child:not(:first-child), [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="queue"] > .queue:last-child:not(:first-child), [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="extension"] > .queue:last-child:not(:first-child), [data-gw="Reports.OverviewScreen"] > .body .smart-table td[data-col="group_id"] > .queue:last-child:not(:first-child) { font-size: var(--font-size-sm); } [data-gw="Reports.OverviewScreen"] > .body .smart-table.cross-hover table { --table-hover-offset-top: 0; --table-hover-offset-bottom: 0; } [data-gw="Reports.OverviewScreen"] > .body .smart-table.cross-hover table th { z-index: 1; } [data-gw="Reports.OverviewScreen"] > .body .smart-table.cross-hover table tbody tr:hover { background-color: var(--table-highlight-bg) !important; outline: 1px solid var(--table-highlight-border); outline-offset: -1px; border-radius: var(--border-radius); } [data-gw="Reports.OverviewScreen"] > .body .smart-table.cross-hover table tbody td { position: relative; } [data-gw="Reports.OverviewScreen"] > .body .smart-table.cross-hover table tbody td:hover::after { content: ""; position: absolute; left: 0; width: 100%; top: var(--table-hover-offset-top); bottom: var(--table-hover-offset-bottom); background-color: var(--table-highlight-bg); outline: 1px solid var(--table-highlight-border); outline-offset: -1px; border-radius: var(--border-radius); pointer-events: none; } [data-cardid="core.categories"] .report-views > div { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } [data-cardid="core.categories"] .report-views .separator { height: 20px; align-self: flex-start; margin-top: 5px; padding-left: 20px; border-right: 1px solid var(--border-default-color); margin-right: 20px; } [data-cardid="core.categories"] .report-views .report-categories-filter { display: contents; } [data-cardid="core.categories"] .report-views .report-categories-filter > * { width: 200px; margin-right: var(--pad); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row > .report-filter { align-self: flex-start !important; } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container { display: flex; align-items: flex-start; margin-right: var(--pad-2); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container .expander { cursor: pointer; appearance: none; border: 0; padding: 0; font-weight: var(--font-weight-bolder); font-size: var(--font-size-base); order: 999; height: 32.5px; padding-left: 12px; padding-right: 34px; background-image: var(--input-select-arrow); background-position: calc(100% - 8px) center; background-repeat: no-repeat; flex-shrink: 0; } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container .expander.expanded { background-image: var(--input-select-arrow-expanded); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container > .button-switcher { display: flex; flex-wrap: wrap; column-gap: var(--pad); row-gap: var(--pad); margin-right: var(--pad); min-height: 37px; max-height: 37px; overflow: hidden; margin-bottom: var(--pad); transition: max-height 0.5s ease-out; padding-bottom: 4px; flex-shrink: 1; position: relative; } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container > .button-switcher .item { 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); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container > .button-switcher .item:not(.active) { color: var(--panel-fg); background: var(--secondary); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container .expander.expanded + .button-switcher { transition: max-height 1s ease-in-out; max-height: 2048px; } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container .select-input { background-color: var(--panel-bg); border-color: transparent; min-width: min-content; --drop-shadow-hardness: 0.08; box-shadow: var(--drop-shadow-sm); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container .select-input.active { color: var(--button-switcher-active-fg); background-color: var(--button-switcher-active-bg); border-color: var(--button-switcher-active-bg); } [data-cardid="core.call-counts-per-day-and-hour"] .report-views-row .report-views-container .separator { height: 32px; padding-left: 20px; border-right: 1px solid var(--border-default-color); margin-right: 20px; } [data-gw="Supervisor.OverviewScreen"] > .body { display: flex; flex-direction: column; padding: var(--body-padding); overflow-x: auto; overflow-y: hidden; flex-grow: 1; min-width: 0; min-height: 0; max-height: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body > [data-gw="Supervisor.DayStatsBar"].expanded + .tab-switcher { max-width: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body > .tab-switcher { max-width: calc(100% - 328px); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"] { display: flex; align-items: center; justify-content: space-between; transition: var(--transition-time) margin var(--transition-time-short); margin-bottom: -32px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"] .day-stats-wrap { transition: var(--transition-time) opacity 0s; opacity: 0; pointer-events: none; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"].expanded { transition: margin var(--transition-time); margin-bottom: var(--pad-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"].expanded .day-stats-wrap { transition: var(--transition-time) opacity var(--transition-time-short); opacity: 1; pointer-events: all; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"].expanded .day-stats-controls { position: relative; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"].expanded .day-stats-controls::before { content: ""; display: block; position: absolute; right: calc(100% - 10px); width: 0; height: 100%; box-shadow: -10px 0px 6px 8px var(--body-bg); pointer-events: none; } @media screen and (max-width: 991.98px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"]:not(.expanded) + .tab-switcher { width: calc( 100% - 210px); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"] .day-stats-controls { display: flex; column-gap: var(--pad-1-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.DayStatsBar"] .day-stats-controls > * { margin-left: auto; z-index: 1; position: relative; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap { display: flex !important; overflow: auto; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap.hidden { height: 0; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap .day-stats-box { color: var(--button-switcher-active-fg); background-color: var(--button-switcher-active-bg); border-color: var(--button-switcher-active-bg); border-radius: var(--border-radius); display: flex; align-items: center; margin-right: 10px; padding: 6px 12px; height: 40px; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap .day-stats-box .day-stats-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); opacity: 0.8; word-wrap: normal; white-space: pre; margin-right: 8px; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap .day-stats-box .day-stats-value { display: flex; align-items: center; font-size: var(--font-size-xl); font-weight: var(--font-weight-bolder); white-space: nowrap; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap .day-stats-box .day-stats-value canvas { width: 24px !important; height: 24px !important; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap .day-stats-box .day-stats-icon { display: flex; align-items: center; justify-content: center; } [data-gw="Supervisor.OverviewScreen"] > .body .day-stats-wrap .day-stats-box .day-stats-icon .icon { margin-left: 6px; width: 18px; height: 18px; } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="caller"] .caller-number { font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="caller"] .caller-info { font-size: var(--font-size-base); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="queue"] .queue-number { font-size: var(--font-size-base); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="queue"] .queue-name { font-size: var(--font-size-base); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="queue"] .queue-name + .queue-number { font-size: var(--font-size-sm); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="callee"] .callee-number { font-size: var(--font-size-lg); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="callee"] .callee-name { font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); } [data-gw="Supervisor.OverviewScreen"] > .body .smart-table [data-col="callee"] .callee-name + .callee-number { font-size: var(--font-size-base); } [data-gw="Supervisor.OverviewScreen"] > .body [data-cardtype="Supervisor.ActiveCallsScreen"] { margin-bottom: calc( -1 * var(--body-padding)); } [data-gw="Supervisor.OverviewScreen"] > .body .card-switcher { display: flex; flex-direction: column; flex-grow: 1; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.ActiveCallsScreen"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] { display: flex; flex-direction: column; flex-grow: 1; align-content: center; align-items: stretch; justify-content: flex-start; overflow: auto; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .toolbar-top, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .toolbar-top { padding-left: 4px; margin-bottom: var(--pad-1-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .collapse-toggle-button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .collapse-toggle-button { margin-right: 5px; flex-shrink: 0; } @media screen and (max-width: 575.98px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .collapse-toggle-button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .collapse-toggle-button { font-size: 0; padding-right: 10px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .collapse-toggle-button > .icon, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .collapse-toggle-button > .icon { margin-right: 0; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container { display: flex; flex-direction: column; flex-shrink: 0; margin-bottom: var(--panel-padding); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container:last-child, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container:last-child { margin-bottom: 0; } @media screen and (max-width: 767.98px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container { position: relative; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .collapse-button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .collapse-button { margin-left: auto !important; position: absolute; top: 1rem; right: 1rem; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .queue-control-panel, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .queue-agents, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .hide-on-collapse, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .queue-control-panel, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .queue-agents, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .hide-on-collapse { display: none !important; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-statistics, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-statistics { margin-top: 0; margin-bottom: 0 !important; } @media screen and (max-width: 767.98px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-statistics, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-statistics { margin-top: var(--pad); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-statistics > .agent-statistics-item, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-statistics > .agent-statistics-item { flex-direction: row; align-items: center; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-statistics > .agent-statistics-item .title, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-statistics > .agent-statistics-item .title { margin-bottom: 0; margin-right: var(--pad-1-2); white-space: nowrap; text-align: right; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-statistics + .collapse-button > svg, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-statistics + .collapse-button > svg { transform: scaleY(-1); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status { flex-basis: 100%; padding-right: 2rem; } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status { flex-basis: 80%; } } @media screen and (min-width: 1280px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status { flex-basis: 100%; } } @media screen and (min-width: 992px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status { flex-wrap: nowrap; padding-right: 0; margin-right: var(--pad-2); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status .agent-title, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status .agent-title { margin-bottom: 0; } @media screen and (min-width: 992px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container.collapsed .agent-info .agent-status .controls, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container.collapsed .agent-info .agent-status .controls { flex-shrink: 0; max-width: calc( 50% - 32px); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info { display: flex; flex-direction: column; } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info { flex-direction: row; justify-content: space-between; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status { margin-bottom: var(--pad-2); display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--pad-1-2); } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status { padding-right: var(--pad-1-2); flex-basis: 46%; min-width: 280px; margin-right: auto; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status .agent-title, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status .agent-title { font-size: var(--heading-5); font-weight: var(--font-weight-bolder); flex-grow: 0; width: calc( 100% - 32px); min-width: 10%; margin-bottom: var(--pad); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; column-gap: var(--pad); } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status .agent-title, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status .agent-title { width: 100%; } } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status .agent-title, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status .agent-title { margin-right: auto; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status .controls, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status .controls { display: flex; min-width: 0; max-width: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-status .controls .icon[data-name="vdots"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-status .controls .icon[data-name="vdots"] { width: 12px; height: 12px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics { flex-grow: 1; flex-shrink: 0; display: flex; justify-content: space-between; font-size: var(--font-size-lg); font-weight: var(--font-weight-bolder); margin-top: auto; overflow: auto; margin-bottom: var(--pad-2); } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics { flex-grow: 0; flex-shrink: 1; flex-basis: 780px; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item { padding-right: var(--pad); display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 5px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item:last-child, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item:last-child { padding-right: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .title, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .title { font-size: var(--font-size-base); color: var(--table-muted-color); font-weight: var(--font-weight-bold); margin-bottom: var(--pad-1-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value { min-height: 26px; white-space: nowrap; display: flex; align-items: center; justify-content: flex-end; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value .icon, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value .icon { width: 1rem; height: 1rem; margin-left: var(--pad-1-2); margin-top: var(--pad-1-4); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value:empty::after, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value:empty::after { content: '—'; color: var(--table-muted-color); opacity: 0.5; flex-grow: 1; text-align: right; } @media screen and (min-width: 992px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value.agent-statistics-item-graph, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value.agent-statistics-item-graph { min-width: 80px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value.agent-statistics-item-graph canvas + span, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .value.agent-statistics-item-graph canvas + span { min-width: 46px; text-align: right; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .agent-statistics-presence, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .agent-statistics-presence { transform: translateY(-6px); display: flex; flex-direction: column; align-items: flex-start; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .agent-statistics-presence > .label, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .agent-statistics-presence > .label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); margin-top: 8px; cursor: help; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart { height: 12px; max-width: 160px; border-radius: var(--border-radius-sm); overflow: hidden; cursor: help; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > *, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > * { height: 100%; float: left; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .pause, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .pause { background-color: var(--attendance-color-0); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .in_call, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .in_call { background-color: var(--attendance-color-1); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .free, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .free { background-color: var(--attendance-color-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .login, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics > .agent-statistics-item .chart > .login { background-color: var(--attendance-color-3); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .agent-container .agent-info .agent-statistics + .collapse-button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .agent-container .agent-info .agent-statistics + .collapse-button { align-self: flex-start; margin-left: var(--panel-padding); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container { max-width: 100%; column-gap: 4px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container .icon + div, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container .icon + div { display: flex; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container .icon + div .pause-name, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container .icon + div .pause-name { max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container .icon + div .pause-timer, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container .icon + div .pause-timer { margin-left: 4px; flex-shrink: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container .icon + div .pause-timer:empty, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container .icon + div .pause-timer:empty { display: none; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container.icon-left .icon, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container.icon-left .icon { margin-right: 2px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container .icon[data-name="dot"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container .icon[data-name="dot"] { width: 12px; height: 12px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container:not(:last-child), [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container:not(:last-child) { margin-right: var(--pad-1-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .status-container.primary-shadow, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .status-container.primary-shadow { margin-right: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .with-pause-types[data-state="not-paused"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .with-pause-types[data-state="not-paused"] { background-image: var(--input-select-arrow); background-position: right 8px center; background-repeat: no-repeat; background-size: 16px 16px; padding-right: calc(var(--button-padding-x-xs) + 16px); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher { margin-right: auto; flex-shrink: 1; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content { margin: 5px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .not-found, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .not-found { background: var(--body-bg); border: 2px dashed var(--table-muted-color); opacity: 0.5; min-height: 212px; align-items: center; justify-content: center; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .not-found.collapsed, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .not-found.collapsed { min-height: 72px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .not-found .not-found-label, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .not-found .not-found-label { font-size: 1.5rem; font-weight: var(--font-weight-bold); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .agent-info .agent-status > .status-container:nth-last-child(2), [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .agent-info .agent-status > .status-container:nth-last-child(2) { position: relative; margin-right: var(--pad-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .agent-info .agent-status > .status-container:nth-last-child(2)::after, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .agent-info .agent-status > .status-container:nth-last-child(2)::after { content: ""; width: 0; border-right: var(--border-default-width) solid var(--border-default-color); padding-right: var(--pad); position: absolute; top: 0; bottom: 0; right: calc( var(--pad) * -1); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .agent-info .agent-status .select-input .error, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .agent-info .agent-status .select-input .error { min-width: 20px; min-height: 20px; margin-right: 4px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .agent-info .agent-status .select-input .error .icon, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .agent-info .agent-status .select-input .error .icon { width: 10px; height: 10px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list { overflow: hidden; transition: all var(--transition-time-long); flex-wrap: wrap; gap: var(--pad-1-2); padding: 0; margin: 0; order: 1; max-height: calc( (2 * 42px) + ( 2 * var(--pad-1-2))); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander { order: 2; align-self: flex-start; font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); display: flex; justify-content: center; align-items: center; padding-right: var(--pad-2); min-width: 100%; margin-top: var(--pad); position: relative; } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander { min-width: 110px; margin-top: 0; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander::before, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-fg); -webkit-mask: url("/icons/arrow-simple-down.svg") center center / 16px 16px no-repeat; mask: url("/icons/arrow-simple-down.svg") center center / 16px 16px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander::before, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list + .expander::before { right: -70%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded { max-height: none; max-height: fit-content; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded + .expander, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded + .expander { position: relative; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded + .expander::before, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded + .expander::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--panel-fg); -webkit-mask: url("/icons/arrow-simple-up.svg") center center / 16px 16px no-repeat; mask: url("/icons/arrow-simple-up.svg") center center / 16px 16px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded + .expander::before, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue-control-panel > .queue-list.expanded + .expander::before { right: -60%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue { box-shadow: none; border: var(--border-default-width) solid var(--border-default-color); padding: var(--pad-1-4) var(--pad); height: 2.625rem; min-width: auto; margin-right: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue > .info, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue > .info { margin-left: 8px; color: var(--body-fg); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue > .info > .name, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue > .info > .number, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue > .info > .name, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue > .info > .number { font-size: var(--font-size-sm); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue > .status, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue > .status { width: 1.5rem; height: 1.5rem; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content .queue > .status::before, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content .queue > .status::before { -webkit-mask-size: 12px 12px; mask-size: 12px 12px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content + .controls .pause, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content + .controls .pause { box-shadow: none; border: var(--border-default-width) solid var(--border-default-color); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .button-switcher-content + .controls::before, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher-content + .controls::before { --body-bg: var(--panel-bg); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] input[type="search"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] input[type="search"] { flex-grow: 1; flex-shrink: 1; flex-basis: 90px; margin-right: var(--pad); margin-left: auto; } @media screen and (min-width: 576px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] input[type="search"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] input[type="search"] { min-width: 250px; } } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] input[type="search"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] input[type="search"] { flex-grow: 0; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-cardtype="Supervisor.AgentsScreen"] { overflow: hidden; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] { overflow: hidden; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher { flex-basis: 110px; margin-right: var(--pad); } @media screen and (min-width: 320px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher { flex-basis: 220px; } } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .button-switcher { flex-basis: auto; } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .queue-list .queue { border: var(--border-default-width) solid var(--border-default-color); padding: var(--pad-1-2) var(--pad) var(--pad-1-2) var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .queue-list .queue[disabled] { cursor: default; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .queue-list .queue[disabled] .info { color: var(--input-disabled-fg); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] .overflow-container { display: flex; flex-direction: column; overflow: hidden; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] { display: grid; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] > .smart-table thead th[data-col="chanspy"] { color: transparent; font-size: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .agents-table-group { padding-bottom: var(--pad-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .agents-table-group .agents-table-group-title { position: sticky; left: 0; top: 0; display: inline-block; margin-bottom: var(--pad); background-color: var(--body-bg); z-index: 1; height: 2rem; margin-bottom: var(--pad-1-2); line-height: 1; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .agents-table-group .agents-table-group-title::after { content: ""; height: 2rem; width: calc( 100vw - var(--body-padding) - ( var(--pad-2) * 2 ) + 10px - 100%); background-color: var(--body-bg); position: absolute; top: 0; left: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .agents-table-group .smart-table { overflow: visible; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .agents-table-group .smart-table > table > thead > tr > th { top: 2rem; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .agents-table-group .smart-table .empty-message { width: calc( 100vw - var(--body-padding) - ( var(--pad-2) * 2 ) + 10px); z-index: 1; background-color: var(--body-bg); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table thead { white-space: nowrap; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="name"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="name"] { white-space: nowrap; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="session_exists"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="hw_online"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="followme"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="session_exists"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="hw_online"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="followme"] { width: 50px; min-width: 50px; max-width: 50px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="session_exists"] .button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="hw_online"] .button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="followme"] .button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="session_exists"] .button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="hw_online"] .button, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="followme"] .button { min-width: auto; min-height: auto; padding: 0; background-color: transparent !important; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="session_exists"] .button > svg, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="hw_online"] .button > svg, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="followme"] .button > svg, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="session_exists"] .button > svg, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="hw_online"] .button > svg, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="followme"] .button > svg { margin: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="session_exists"] .button > svg.muted, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="hw_online"] .button > svg.muted, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="followme"] .button > svg.muted, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="session_exists"] .button > svg.muted, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="hw_online"] .button > svg.muted, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="followme"] .button > svg.muted { color: var(--border-default-color); --color: var(--border-default-color); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="session_exists"] .button > div, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="hw_online"] .button > div, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="followme"] .button > div, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="session_exists"] .button > div, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="hw_online"] .button > div, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="followme"] .button > div { display: none; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col^="queue_"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col^="queue_"] { padding-left: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table td[data-col="state"], [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] table th[data-col="state"] { --state-col-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: var(--state-col-width); min-width: var(--state-col-width); max-width: var(--state-col-width); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] button.queue { border: none; height: 1.5rem; background: none; padding: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .table-header-queue { cursor: pointer; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .show-calls-cell { cursor: pointer; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .duration-width { min-width: 90px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AgentsScreen"] [data-gw="Supervisor.AgentsTable"] .duration-short-width { min-width: 65px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .collapse-toggle-button { max-width: fit-content; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue { border: var(--border-default-width) solid var(--border-default-color); border-radius: var(--border-radius); padding: var(--pad-1-2) 0.25rem var(--pad-1-2) var(--pad); cursor: default; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 100%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; cursor: help; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status .icon { color: var(--primary-text); width: 0.75rem; height: 0.75rem; flex-shrink: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="unsubscribed"] { position: relative; background-color: var(--primary-disabled); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="unsubscribed"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/queue.svg") center center / 12px 12px no-repeat; mask: url("/icons/queue.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="subscribed"] { position: relative; background-color: var(--success); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="subscribed"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/checkmarkcircle.svg") center center / 12px 12px no-repeat; mask: url("/icons/checkmarkcircle.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="paused"] { position: relative; background-color: var(--warning); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="paused"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/pause.svg") center center / 12px 12px no-repeat; mask: url("/icons/pause.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="unreachable"] { position: relative; background-color: var(--error); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="unreachable"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/queue.svg") center center / 12px 12px no-repeat; mask: url("/icons/queue.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="incall-inqueue"] { position: relative; background-color: var(--primary); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="incall-inqueue"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary-text); -webkit-mask: url("/icons/phone-call.svg") center center / 12px 12px no-repeat; mask: url("/icons/phone-call.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="incall-connected"] { position: relative; background-color: var(--primary); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="incall-connected"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary); -webkit-mask: url("/icons/phone-call.svg") center center / 12px 12px no-repeat; mask: url("/icons/phone-call.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="incall-ringing"] { position: relative; background-color: var(--primary-hover); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="incall-ringing"]::before { position: absolute; pointer-events: none; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: var(--primary); -webkit-mask: url("/icons/phone-call.svg") center center / 12px 12px no-repeat; mask: url("/icons/phone-call.svg") center center / 12px 12px no-repeat; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="subscribed"][data-static="1"] { background-color: transparent; border: 1px solid var(--success); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="subscribed"][data-static="1"]::before { background-color: var(--success); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="paused"][data-static="1"] { background-color: transparent; border: 1px solid var(--warning); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-state="paused"][data-static="1"]::before { background-color: var(--warning); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-online="online"]::after, [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-online="offline"]::after { width: 0.5rem; height: 0.5rem; content: ''; border: 2px solid var(--panel-bg); position: absolute; top: -3px; right: -3px; border-radius: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-online="online"]::after { background-color: var(--success); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-online="offline"]::after { background-color: var(--primary-disabled); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-followme="1"][data-state="subscribed"] { background-color: var(--success-secondary-hover); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .status[data-followme="1"][data-state="subscribed"]::before { background: var(--success-hover); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .info { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; line-height: 1.3; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .info .name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bolder); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .info .number { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.QueuesScreen"] .queue-agents.queue-list .agent.queue .controls { margin-left: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content { display: flex; flex-direction: column; overflow: auto; } [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content .table-title { font-size: var(--heading-5); font-weight: var(--font-weight-bolder); margin-top: var(--pad); margin-bottom: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content .smart-table { flex-grow: 1; } [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content .smart-table td { padding-top: calc(var(--table-padding-y) / 2); padding-bottom: calc(var(--table-padding-y) / 2); } [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content .smart-table tr.active-chanspy td, [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content .smart-table tr.active-chanspy:hover td { animation: pulse-secondary 1s ease-in-out alternate infinite; } [data-gw="Supervisor.OverviewScreen"] > .body .button-switcher-content .smart-table td[data-col="ctl"] { display: table-cell; width: calc( 4 * 40px + var(--pad-2) - (2 * 0.25rem)); } [data-gw="Supervisor.OverviewScreen"] > .body [data-cardtype="Supervisor.ToDoScreen"] { height: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-cardtype="Supervisor.ToDoScreen"] [data-gw="Supervisor.ToDoScreen"] { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 85%; font-size: var(--font-size-xl); font-weight: var(--font-weight-bolder); } [data-gw="Supervisor.OverviewScreen"] > .body [data-cardtype="Supervisor.ToDoScreen"] [data-gw="Supervisor.ToDoScreen"] > img { width: 234px; height: 190px; margin-bottom: 0.75rem; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] { width: 100%; max-width: calc(956px + (var(--pad-2) * 2)); margin-left: auto; margin-right: auto; padding: 1px; } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] { padding: var(--pad-2); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] h4 { margin-bottom: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont { display: flex; flex-direction: column; overflow: auto; row-gap: var(--pad); padding: 4px; flex-grow: 1; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement { border-radius: 16px 16px 16px 2px; border-radius: 1rem 1rem 1rem .125rem; box-shadow: var(--drop-shadow-sm); background-color: var(--panel-bg); padding: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement:last-child { margin-bottom: var(--pad-2); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .toolbar { margin-bottom: .5rem; flex-direction: row; align-items: center; gap: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .toolbar > .icon-wrapper { width: 1.5rem; height: 1.5rem; background-color: var(--body-bg); color: var(--body-fg); border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .toolbar > .icon-wrapper > .icon { width: 1rem; height: 1rem; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .toolbar > .name { font-size: var(--font-size-base); font-weight: var(--font-weight-bolder); letter-spacing: 0.14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .toolbar > .date { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); letter-spacing: 0.14px; color: var(--table-muted-color); white-space: nowrap; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .toolbar > .resend { margin-left: auto; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .content { margin-bottom: .25rem; word-break: break-word; } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .announcement-cont .announcement > .content { padding-left: calc(1.5rem + var(--pad)); padding-right: calc(1.5rem + var(--pad)); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .new-message { display: flex; justify-content: space-between; gap: .5rem; background-color: var(--panel-bg); padding: .5rem; border-radius: var(--border-radius-lg); transition: box-shadow var(--transition-time-short) ease-in-out; box-shadow: 0 0 0 1px var(--border-default-color); } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .new-message { box-shadow: 0 0 0 1px var(--border-default-color), var(--drop-shadow); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .new-message:has(input:focus) { box-shadow: 0 0 0 2px var(--input-border-color-focus); } @media screen and (min-width: 768px) { [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .new-message:has(input:focus) { box-shadow: 0 0 0 2px var(--input-border-color-focus), var(--drop-shadow); } } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.AnnounceScreen"] .new-message input { flex-grow: 1; border: 0; padding-left: var(--pad); padding-right: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.TimeCondsScreen"] { display: grid; grid-template-areas: 'toolbar body'; grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); gap: 20px; height: 100%; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.TimeCondsScreen"] .editable-item-selector { grid-area: toolbar; width: 200px; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.TimeCondsScreen"] .card-switcher { grid-area: body; padding: 30px; flex: 1; overflow: auto; background: var(--panel-bg); box-shadow: var(--drop-shadow-sm); border-radius: var(--border-radius); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.PlannedQueueMembersScreen.Planned"] tr.invalid td:not([data-col="ctl"]) { opacity: 0.5; } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.PlannedQueueMembersScreen.Planned"] .toolbar-top { justify-content: flex-end; column-gap: var(--pad); } [data-gw="Supervisor.OverviewScreen"] > .body [data-gw="Supervisor.CallRatingsScreen"] .toolbar-top .select-input { margin-left: 0; } @keyframes pulse-secondary { 0% { background-color: var(--secondary-hover); } 100% { background-color: var(--secondary-active); } } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode { --body-fg: var(--black-full); --panel-fg: var(--black-full); --tab-switcher-item-fg: var(--black-full); --button-switcher-active-bg: var(--black-full); --button-switcher-bg: var(--panel-bg); --button-switcher-fg: var(--black-full); --custom-size-button-large: 4.25rem; --custom-size-icon-large: 3rem; --custom-size-button: 3.5rem; --custom-size-icon: 2rem; --custom-size-font: 1.5rem; --custom-size-font-large: 2rem; --custom-size-font-larger: 2.5rem; --custom-size-font-small: 1.25rem; --custom-size-gap: 2rem; --dropdown-font-size: 1.75rem; --dropdown-bg-active: var(--primary-hover); --dropdown-fg-active: var(--primary-hover-text); --dropdown-bg-hover: var(--primary-hover); --dropdown-fg-hover: var(--primary-hover-text); --icon-static-color: var(--panel-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode * { transition: none !important; animation: none !important; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode html, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode body { scrollbar-color: var(--body-fg) var(--panel-bg); scrollbar-width: auto; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode body { filter: saturate(0) contrast(1.25) sepia(0.125); cursor: url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////8AAAD/AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP//////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///////////////wAAAAAAAAAAAAAAAAAAAAAAAAAA//////////8AAAD/AAAA/wAAAP8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP///////////wAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP///////////wAAAAAAAAAA//////////8AAAD/AAAA/wAAAP8AAAD//////wAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP///////////wAAAAD/////AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA/wAAAP////////////////8AAAD/AAAA/wAAAP8AAAD//////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP//////AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD//////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP//////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP8AAAD/AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD/AAAA/wAAAP8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAP8AAAD/AAAA////////////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAA/wAAAP///////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAD///////////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/8f////B//9/gP//P4D//x8A//8PAf//BgP//wID//8AB///AAf//wAP//8AAAf/AAAP/wAAH/8AAD//AAB//wAA//8AAf//AAP//wAH//8AD///AB///wA///8Af///AP///wH///8D////B////w////8f////P////3////8="), auto; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode input:not(.switch), [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode button:not(:disabled):not(.more):not(.primary):not(.success):not(.error):not(.item):not(.pause):not(.queue), [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input { border: 2px solid var(--primary-hover); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode input:not(.switch):focus-within, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode input:not(.switch):focus, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode button:not(:disabled):not(.more):not(.primary):not(.success):not(.error):not(.item):not(.pause):not(.queue):focus-within, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode button:not(:disabled):not(.more):not(.primary):not(.success):not(.error):not(.item):not(.pause):not(.queue):focus, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input:focus-within, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input:focus { border-color: var(--primary-hover) !important; padding: .25rem .5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .panel-container, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .entity-list-editor { scrollbar-color: var(--body-fg) var(--panel-bg); scrollbar-width: auto; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher > .button { padding: .25rem .5rem !important; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode button:disabled, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button:disabled { outline: none !important; background-color: var(--primary-disabled); border-color: var(--primary-disabled); color: var(--primary-disabled-text); --color: var(--primary-disabled-text); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .main-screen > .header .title { font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .main-screen > .header .title .icon { width: var(--custom-size-icon); height: var(--custom-size-icon); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .main-screen > .header .profile .icon { width: var(--custom-size-icon); height: var(--custom-size-icon); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .main-screen > .header .profile .name { font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher > button { outline: 1px solid var(--button-switcher-fg); outline-offset: -1px; font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher > button:hover { color: var(--button-switcher-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher > button:focus { box-shadow: inset 0 0 0 1px var(--primary-hover); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher > button.active:hover { color: var(--button-switcher-bg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher ~ button.icon-only { aspect-ratio: 1.75; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher ~ button.icon-only > .icon { transform: scale(1.5); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .button-switcher ~ button.small { font-size: var(--custom-size-font-small); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .tab-switcher { gap: 1.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .tab-switcher > .tab { padding: calc( var(--tab-switcher-item-padding-y) / 1) 1rem; margin-left: 0; margin-right: 0; font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .tab-switcher > .tab .icon { width: 1.5rem; height: 1.5rem; color: var(--tab-switcher-item-fg); --color: var(--tab-switcher-item-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .tab-switcher > .tab:hover { color: var(--tab-switcher-item-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .tab-switcher > .tab.active { border-top-left-radius: .5rem; border-top-right-radius: .5rem; border-bottom-width: 1px; background-color: var(--primary-hover); border-color: var(--primary-hover); color: var(--panel-bg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .tab-switcher > .tab.active .icon { color: var(--panel-bg); --color: var(--panel-bg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel.compact > .wrap > .controls > .pause { outline: 2px solid var(--primary-hover); outline-offset: -2px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel.compact > .wrap > .queue-list > .queue { outline: 2px solid var(--panel-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel.compact .button-expander-button { margin-left: var(--pad); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queues-call-count-sum { min-width: 6.25rem; height: 6.25rem; border-radius: 6.25rem; font-size: var(--custom-size-font-larger); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list { gap: .5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .empty { font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue { box-shadow: none !important; height: 6.25rem; padding: 1.125rem 1.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue .status { width: var(--custom-size-button); height: var(--custom-size-button); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue .status::before { transform: scale(1.5); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue .name { font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue .number { font-size: var(--custom-size-font-small); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue .counts { display: none; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue[data-status="subscribed"] { background-color: var(--primary-hover); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue[data-status="subscribed"] > .info > .name, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue[data-status="subscribed"] > .info > .number { color: var(--primary-hover-text); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue[data-status="unsubscribed"] { background-color: var(--body-bg); outline: 2px solid var(--primary-hover); outline-offset: -2px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .queue-list > .queue[data-status="unsubscribed"] .status { background-color: var(--primary-hover); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls { height: 6.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls [data-gw="AckCheckboxField"] { margin-left: 2.5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls [data-gw="AckCheckboxField"] input { transform: scale(2.25); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls [data-gw="AckCheckboxField"] label { padding-left: 2.5rem; font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls button.more { margin-left: 2rem; margin-right: 1.5rem; transform: scale(2); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause .info .text, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause .info .timer { font-size: var(--custom-size-font); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause .info .text .pause-type, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause .info .timer .pause-type { font-size: 1rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause .icon-wrap { width: var(--custom-size-button); height: var(--custom-size-button); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause .icon-wrap .icon { width: 2rem; height: 2rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause.with-pause-types { outline: 2px solid var(--primary-hover); outline-offset: -2px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause.with-pause-types[data-state="not-paused"]:not(:disabled) { color: var(--panel-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause.with-pause-types[data-state="not-paused"]:not(:disabled) > .icon-wrap { background-color: var(--warning); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls > .pause.with-pause-types[data-state="not-paused"]:not(:disabled) > .icon-wrap > .icon { color: var(--warning-light); --color: var(--warning-light); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls + button { outline: none; height: 6.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls + button > .icon { width: 5.5rem; height: 5.5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .queue-control-panel:not(.compact) > .wrap > .controls + button:focus { padding: 0 !important; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer { flex-grow: 1; flex-shrink: 0; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list { font-size: 2.5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container { font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call-type-container .call-type-icon { width: 3.125rem; height: 3.125rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call-type-container .call-type-icon > .icon { width: 1.625rem; height: 1.625rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call { font-size: var(--custom-size-font-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call .queue { font-size: var(--custom-size-font); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call .parking_space { font-size: var(--custom-size-font); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call .timer { color: var(--black); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call + button { width: var(--custom-size-button); height: var(--custom-size-button); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .call-container .call + button > .icon { width: var(--custom-size-icon); height: var(--custom-size-icon); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .calls-list .empty { color: var(--panel-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box { border: 2px solid var(--success); padding: var(--pad) 1.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .left { grid-template-columns: 50% 50%; max-width: 100%; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .right { padding-left: 1.25rem; border-color: var(--panel-fg); border-width: 2px; } @media screen and (min-width: 768px) { [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box { grid-template-columns: minmax(0, 1fr) 11.5rem minmax(0, 1fr); } } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .dialer-input { border: 2px solid var(--primary-hover); padding: 0; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .dialer-input .controls { margin-right: 8px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .dialer-input:focus-within .controls { margin-right: 8px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .dialer-input > input { height: 5.5rem; font-size: 2.5rem; margin: -1px !important; border: none !important; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .dialer-input > input::placeholder { color: var(--input-placeholder); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .dialer-input > input:focus { padding: 11px 16px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .queue { background: inherit; color: inherit; font-size: var(--custom-size-font); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; padding-left: 0; padding-right: 0; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .peer { max-width: 100%; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .label { color: var(--table-muted-color); font-size: var(--custom-size-font); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .status { font-size: var(--custom-size-font); font-weight: var(--font-weight-bolder); white-space: nowrap; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .timer, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .number, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .contact { font-size: var(--custom-size-font-large); line-height: 1.125; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .timer { min-width: 74px; max-width: 74px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .controls .status-icon { left: -2.75rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .controls .status-icon .icon { width: 2.25rem; height: 2.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .controls button { border-radius: var(--border-radius) !important; width: var(--custom-size-button-large); height: var(--custom-size-button-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box .controls button > .icon { width: var(--custom-size-icon-large); height: var(--custom-size-icon-large); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .switchboard-dialer .office-call-control .main-box > .controls { padding-left: 1.25rem; padding-right: 1.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] { width: 100%; flex-basis: auto; min-width: auto; max-width: none; flex-grow: 0; flex-shrink: 1; transition: width .5s ease-in; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] > .card-switcher { min-width: 100%; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] > .card-switcher input { font-size: var(--custom-size-font); height: auto; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] { gap: 1.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .empty-image-placeholder > .title { font-size: 2.25rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .empty-image-placeholder > button { font-size: 2rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card { min-height: 7rem; max-height: 7rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .avatar { width: var(--custom-size-button); height: var(--custom-size-button); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .avatar .icon { width: var(--custom-size-icon); height: var(--custom-size-icon); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .info .phone { font-size: var(--custom-size-font); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .info .name, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .info .description { font-size: var(--custom-size-font-small); font-weight: var(--font-weight-bold); color: var(--panel-fg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .controls button { width: var(--custom-size-button); height: var(--custom-size-button); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.Speeddial"] .contact-container .card .controls button .icon { width: var(--custom-size-icon); height: var(--custom-size-icon); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.DirectoryPanel"] .toolbar { gap: var(--custom-size-gap); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.DirectoryPanel"] .toolbar input { width: 100%; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.DirectoryPanel"] [data-gw="Office.ContactsList"] table { font-size: var(--custom-size-font-small); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.DirectoryPanel"] [data-gw="Office.ContactsList"] [data-col="ctl"] button { width: var(--custom-size-button); height: var(--custom-size-button); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode [data-gw="Office.ControlPanel"] [data-gw="Office.DirectoryPanel"] [data-gw="Office.ContactsList"] [data-col="ctl"] button::before { transform: scale(2); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu { outline: 2px solid var(--primary-hover); box-shadow: 0 0 0 4px var(--panel-bg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu .option:not(.separator) { padding: .75rem 1.5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu .option:not(.separator) .option-icon, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu .option:not(.separator) .option-icon-right { margin-right: 1.5rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu .option:not(.separator) .option-icon > .icon, [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu .option:not(.separator) .option-icon-right > .icon { width: 2rem; height: 2rem; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .popup-menu .option:not(.separator) .option-icon-right { margin-right: 0; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode.desktop-ui .profile-popup { width: 450px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input-suggestions { outline: 4px solid var(--primary-hover); box-shadow: 0 0 0 8px var(--panel-bg); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input-suggestions .suggestion > .availability.extension-status .icon { width: 24px; height: 24px; } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input-suggestions .suggestion > .availability.extension-status[data-status="ok"] { --color: var(--icon-static-color); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input-suggestions .suggestion > .availability.extension-status[data-status="fail"] { --color: var(--primary-disabled); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input-suggestions .suggestion > .availability.extension-status[data-status="fail"] .icon { clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); } [data-appcardtype="Switchboard.MainPanel"].high-contrast-mode .dialer-input-suggestions .suggestion:hover > .availability.extension-status[data-status="ok"] { --color: var(--button-switcher-active-fg); } /*# sourceMappingURL=main.css.map */