.fluent-mac-overlay-card .fluent-mac-overlay-header .fluent-mac-overlay-close, .password-input .toggle-password, .cbi-dropdown.cbi-button.cbi-button-remove, .cbi-dropdown.cbi-button.cbi-button-negative, .cbi-dropdown.btn.cbi-button-remove, .cbi-dropdown.btn.cbi-button-negative, .modal > .modal-close, .modal > .close, .cbi-button.cbi-button-remove, .cbi-button.cbi-button-negative, .cbi-button.danger, .btn.cbi-button-remove, .btn.cbi-button-negative, .btn.danger, :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child, .cbi-button.cbi-button-link, .btn.cbi-button-link, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button, .cbi-dropdown.cbi-button, .cbi-dropdown.btn, .cbi-image-button, :not(#modal_overlay) > .alert > div:first-of-type .cbi-button, :not(#modal_overlay) > .alert > div:first-of-type .btn, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button, :not(#modal_overlay) > .alert-message > div:first-of-type .btn, .cbi-page-actions .cbi-button-save, .cbi-page-actions .cbi-button-reset, .fluent-color-swatch, .cbi-button, .btn, .cbi-button.cbi-button-add, .cbi-button.cbi-button-neutral, .cbi-button.cbi-button-reset, .btn.cbi-button-add, .btn.cbi-button-neutral, .btn.cbi-button-reset, .cbi-button.cbi-button-up, .cbi-button.cbi-button-down, .btn.cbi-button-up, .btn.cbi-button-down, .cbi-button.cbi-button-find, .btn.cbi-button-find, .cbi-dynlist > .add-item > .cbi-button-add, .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-page-actions .cbi-button-apply, .cbi-section .cbi-section-create .cbi-button-add, .cbi-button.cbi-button-save, .cbi-button.cbi-button-apply, .cbi-button.cbi-button-positive, .cbi-button.cbi-button-action, .cbi-button.primary, .cbi-button.important, .btn.cbi-button-save, .btn.cbi-button-apply, .btn.cbi-button-positive, .btn.cbi-button-action, .btn.primary, .btn.important { height: var(--fluent-btn-height); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); border-radius: var(--fluent-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard); border: 1px solid #0000; justify-content: center; align-items: center; padding: 0 16px; line-height: 1; text-decoration: none; display: inline-flex; } .cbi-input-file::file-selector-button { height: var(--fluent-btn-height); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); border-radius: var(--fluent-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard); border: 1px solid #0000; justify-content: center; align-items: center; padding: 0 16px; line-height: 1; text-decoration: none; display: inline-flex; } .fluent-mac-overlay-card .fluent-mac-overlay-header .fluent-mac-overlay-close:disabled, .password-input .toggle-password:disabled, .modal > .modal-close:disabled, .modal > .close:disabled, :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:disabled:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:disabled:not(.cbi-button):only-child, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn:disabled, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button:disabled, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button:disabled, .cbi-image-button:disabled, :not(#modal_overlay) > .alert > div:first-of-type .cbi-button:disabled, :not(#modal_overlay) > .alert > div:first-of-type .btn:disabled, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button:disabled, :not(#modal_overlay) > .alert-message > div:first-of-type .btn:disabled, .cbi-page-actions .cbi-button-save:disabled, .cbi-page-actions .cbi-button-reset:disabled, .fluent-color-swatch:disabled, .cbi-button:disabled, .btn:disabled, .cbi-dynlist > .add-item > .cbi-button-add:disabled, .cbi-dropdown.cbi-button.cbi-button-apply:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:disabled:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-page-actions .cbi-button-apply:disabled, .cbi-section .cbi-section-create .cbi-button-add:disabled { color: var(--fluent-text-disabled); background: var(--fluent-bg-active); border-color: var(--fluent-bg-active); cursor: not-allowed; pointer-events: none; } .cbi-input-file:disabled::file-selector-button { color: var(--fluent-text-disabled); background: var(--fluent-bg-active); border-color: var(--fluent-bg-active); cursor: not-allowed; pointer-events: none; } .fluent-mac-overlay-card .fluent-mac-overlay-header .fluent-mac-overlay-close:focus-visible, .password-input .toggle-password:focus-visible, .modal > .modal-close:focus-visible, .modal > .close:focus-visible, :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:focus-visible:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:focus-visible:not(.cbi-button):only-child, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn:focus-visible, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button:focus-visible, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button:focus-visible, .cbi-image-button:focus-visible, :not(#modal_overlay) > .alert > div:first-of-type .cbi-button:focus-visible, :not(#modal_overlay) > .alert > div:first-of-type .btn:focus-visible, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button:focus-visible, :not(#modal_overlay) > .alert-message > div:first-of-type .btn:focus-visible, .cbi-page-actions .cbi-button-save:focus-visible, .cbi-page-actions .cbi-button-reset:focus-visible, .fluent-color-swatch:focus-visible, .cbi-button:focus-visible, .btn:focus-visible, .cbi-dynlist > .add-item > .cbi-button-add:focus-visible, .cbi-dropdown.cbi-button.cbi-button-apply:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:focus-visible:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-page-actions .cbi-button-apply:focus-visible, .cbi-section .cbi-section-create .cbi-button-add:focus-visible { outline: 2px solid var(--fluent-focus-color); outline-offset: 2px; } .cbi-input-file:focus-visible::file-selector-button { outline: 2px solid var(--fluent-focus-color); outline-offset: 2px; } .cbi-dynlist > .add-item > .cbi-button-add, .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-page-actions .cbi-button-apply, .cbi-section .cbi-section-create .cbi-button-add, .cbi-button.cbi-button-save, .cbi-button.cbi-button-apply, .cbi-button.cbi-button-positive, .cbi-button.cbi-button-action, .cbi-button.primary, .cbi-button.important, .btn.cbi-button-save, .btn.cbi-button-apply, .btn.cbi-button-positive, .btn.cbi-button-action, .btn.primary, .btn.important { background: var(--fluent-btn-primary-bg); color: var(--fluent-text-on-primary); border-color: var(--fluent-btn-primary-bg); } .cbi-dynlist > .add-item > .cbi-button-add:hover, .cbi-dropdown.cbi-button.cbi-button-apply:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:hover:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-page-actions .cbi-button-apply:hover, .cbi-section .cbi-section-create .cbi-button-add:hover, .cbi-button.cbi-button-save:hover, .cbi-button.cbi-button-apply:hover, .cbi-button.cbi-button-positive:hover, .cbi-button.cbi-button-action:hover, .cbi-button.primary:hover, .cbi-button.important:hover, .btn.cbi-button-save:hover, .btn.cbi-button-apply:hover, .btn.cbi-button-positive:hover, .btn.cbi-button-action:hover, .btn.primary:hover, .btn.important:hover { background: var(--fluent-btn-primary-bg-hover); border-color: var(--fluent-btn-primary-bg-hover); } .cbi-dynlist > .add-item > .cbi-button-add:active, .cbi-dropdown.cbi-button.cbi-button-apply:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:active:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-page-actions .cbi-button-apply:active, .cbi-section .cbi-section-create .cbi-button-add:active, .cbi-button.cbi-button-save:active, .cbi-button.cbi-button-apply:active, .cbi-button.cbi-button-positive:active, .cbi-button.cbi-button-action:active, .cbi-button.primary:active, .cbi-button.important:active, .btn.cbi-button-save:active, .btn.cbi-button-apply:active, .btn.cbi-button-positive:active, .btn.cbi-button-action:active, .btn.primary:active, .btn.important:active { background: var(--fluent-btn-primary-bg-active); border-color: var(--fluent-btn-primary-bg-active); } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button, .cbi-dropdown.cbi-button, .cbi-dropdown.btn, .cbi-image-button, :not(#modal_overlay) > .alert > div:first-of-type .cbi-button, :not(#modal_overlay) > .alert > div:first-of-type .btn, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button, :not(#modal_overlay) > .alert-message > div:first-of-type .btn, .cbi-page-actions .cbi-button-save, .cbi-page-actions .cbi-button-reset, .fluent-color-swatch, .cbi-button, .btn, .cbi-button.cbi-button-add, .cbi-button.cbi-button-neutral, .cbi-button.cbi-button-reset, .btn.cbi-button-add, .btn.cbi-button-neutral, .btn.cbi-button-reset, .cbi-button.cbi-button-up, .cbi-button.cbi-button-down, .btn.cbi-button-up, .btn.cbi-button-down, .cbi-button.cbi-button-find, .btn.cbi-button-find { background: var(--fluent-btn-secondary-bg); color: var(--fluent-text); border-color: var(--fluent-btn-secondary-border); } .cbi-input-file::file-selector-button { background: var(--fluent-btn-secondary-bg); color: var(--fluent-text); border-color: var(--fluent-btn-secondary-border); } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn:hover, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button:hover, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button:hover, .cbi-image-button:hover, :not(#modal_overlay) > .alert > div:first-of-type .cbi-button:hover, :not(#modal_overlay) > .alert > div:first-of-type .btn:hover, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button:hover, :not(#modal_overlay) > .alert-message > div:first-of-type .btn:hover, .cbi-page-actions .cbi-button-save:hover, .cbi-page-actions .cbi-button-reset:hover, .fluent-color-swatch:hover, .cbi-button:hover, .btn:hover { background: var(--fluent-btn-secondary-bg-hover); border-color: var(--fluent-btn-secondary-border-hover); } .cbi-input-file:hover::file-selector-button { background: var(--fluent-btn-secondary-bg-hover); border-color: var(--fluent-btn-secondary-border-hover); } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn:active, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button:active, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button:active, .cbi-image-button:active, :not(#modal_overlay) > .alert > div:first-of-type .cbi-button:active, :not(#modal_overlay) > .alert > div:first-of-type .btn:active, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button:active, :not(#modal_overlay) > .alert-message > div:first-of-type .btn:active, .cbi-page-actions .cbi-button-save:active, .cbi-page-actions .cbi-button-reset:active, .fluent-color-swatch:active, .cbi-button:active, .btn:active { background: var(--fluent-btn-secondary-bg-active); border-color: var(--fluent-btn-secondary-border-active); } .cbi-input-file:active::file-selector-button { background: var(--fluent-btn-secondary-bg-active); border-color: var(--fluent-btn-secondary-border-active); } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child, .cbi-button.cbi-button-link, .btn.cbi-button-link { color: var(--fluent-text); background: none; border-color: #0000; } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:hover:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:hover:not(.cbi-button):only-child, .cbi-button.cbi-button-link:hover, .btn.cbi-button-link:hover { background: var(--fluent-bg-hover); } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:active:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:active:not(.cbi-button):only-child, .cbi-button.cbi-button-link:active, .btn.cbi-button-link:active { background: var(--fluent-bg-active); } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control, select, select.cbi-input-select, textarea, .cbi-input-textarea, .password-input input, .cbi-dynlist > .add-item > input, cbi-dropdown, .cbi-dropdown, .fluent-custom-select, cbi-dropdown > select, .cbi-dropdown > select, .fluent-custom-select > select, cbi-dropdown > .cbi-input-select, .cbi-dropdown > .cbi-input-select, .fluent-custom-select > .cbi-input-select, .zonebadge > input[type="text"], input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], .cbi-input-text, .cbi-input-password, .cbi-input-date, .cbi-input-time, .cbi-input-datetime { height: var(--fluent-input-height); padding: 0 var(--fluent-space-sm); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-normal); color: var(--fluent-text); background: var(--fluent-input-bg); border: 1px solid var(--fluent-input-border); border-bottom-width: 1px; border-bottom-color: var(--fluent-input-border-bottom); border-radius: var(--fluent-radius-md); transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) { height: var(--fluent-input-height); padding: 0 var(--fluent-space-sm); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-normal); color: var(--fluent-text); background: var(--fluent-input-bg); border: 1px solid var(--fluent-input-border); border-bottom-width: 1px; border-bottom-color: var(--fluent-input-border-bottom); border-radius: var(--fluent-radius-md); transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard); } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:disabled, select:disabled, textarea:disabled, .cbi-input-textarea:disabled, .password-input input:disabled, .cbi-dynlist > .add-item > input:disabled, cbi-dropdown:disabled, .cbi-dropdown:disabled, .fluent-custom-select:disabled, cbi-dropdown > .cbi-input-select:disabled, .cbi-dropdown > .cbi-input-select:disabled, .fluent-custom-select > .cbi-input-select:disabled, input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled, input[type="date"]:disabled, input[type="time"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, .cbi-input-text:disabled, .cbi-input-password:disabled, .cbi-input-date:disabled, .cbi-input-time:disabled, .cbi-input-datetime:disabled { background: var(--fluent-input-bg-disabled); color: var(--fluent-text-disabled); cursor: not-allowed; } .control-group:disabled:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) { background: var(--fluent-input-bg-disabled); color: var(--fluent-text-disabled); cursor: not-allowed; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control::placeholder, select::placeholder, select.cbi-input-select::placeholder, textarea::placeholder, .cbi-input-textarea::placeholder, .password-input input::placeholder, .cbi-dynlist > .add-item > input::placeholder, cbi-dropdown::placeholder, .cbi-dropdown::placeholder, .fluent-custom-select::placeholder, .cbi-dropdown > select::placeholder, .fluent-custom-select > select::placeholder, cbi-dropdown > .cbi-input-select::placeholder, .cbi-dropdown > .cbi-input-select::placeholder, .fluent-custom-select > .cbi-input-select::placeholder, .zonebadge > input[type="text"]::placeholder, input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="url"]::placeholder, input[type="date"]::placeholder, input[type="time"]::placeholder, input[type="datetime-local"]::placeholder, input[type="month"]::placeholder, input[type="week"]::placeholder, .cbi-input-text::placeholder, .cbi-input-password::placeholder, .cbi-input-date::placeholder, .cbi-input-time::placeholder, .cbi-input-datetime::placeholder { color: var(--fluent-text-disabled); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button))::placeholder { color: var(--fluent-text-disabled); } select, textarea, .cbi-input-textarea, .password-input input, .cbi-dynlist > .add-item > input, cbi-dropdown > select, .cbi-dropdown > select, .fluent-custom-select > select, .zonebadge > input[type="text"], input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], .cbi-input-text, .cbi-input-password, .cbi-input-date, .cbi-input-time, .cbi-input-datetime { background-image: linear-gradient(var(--fluent-input-border-bottom-focus), var(--fluent-input-border-bottom-focus)); transition: background-size var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard); background-position: bottom; background-repeat: no-repeat; background-size: 0 2px; background-origin: border-box; } select:hover:not([disabled]):not(:focus), textarea:hover:not([disabled]):not(:focus), .cbi-input-textarea:hover:not([disabled]):not(:focus), .password-input input:hover:not([disabled]):not(:focus), .cbi-dynlist > .add-item > input:hover:not([disabled]):not(:focus), input[type="text"]:hover:not([disabled]):not(:focus), input[type="password"]:hover:not([disabled]):not(:focus), input[type="email"]:hover:not([disabled]):not(:focus), input[type="number"]:hover:not([disabled]):not(:focus), input[type="search"]:hover:not([disabled]):not(:focus), input[type="tel"]:hover:not([disabled]):not(:focus), input[type="url"]:hover:not([disabled]):not(:focus), input[type="date"]:hover:not([disabled]):not(:focus), input[type="time"]:hover:not([disabled]):not(:focus), input[type="datetime-local"]:hover:not([disabled]):not(:focus), input[type="month"]:hover:not([disabled]):not(:focus), input[type="week"]:hover:not([disabled]):not(:focus), .cbi-input-text:hover:not([disabled]):not(:focus), .cbi-input-password:hover:not([disabled]):not(:focus), .cbi-input-date:hover:not([disabled]):not(:focus), .cbi-input-time:hover:not([disabled]):not(:focus), .cbi-input-datetime:hover:not([disabled]):not(:focus) { border-color: var(--fluent-input-border-hover); border-bottom-color: var(--fluent-input-border-bottom-hover); } select:focus, textarea:focus, .cbi-input-textarea:focus, .password-input input:focus, .cbi-dynlist > .add-item > input:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, .cbi-input-text:focus, .cbi-input-password:focus, .cbi-input-date:focus, .cbi-input-time:focus, .cbi-input-datetime:focus { border-bottom-color: var(--fluent-input-border-bottom-focus); background-size: 100% 2px; outline: none; } :root { --fluent-font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; --fluent-font-size-base: 14px; --fluent-font-size-xs: 10px; --fluent-font-size-sm: 12px; --fluent-font-size-md: 16px; --fluent-font-size-lg: 20px; --fluent-font-size-xl: 24px; --fluent-font-size-xxl: 28px; --fluent-font-size-xxxl: 40px; --fluent-font-weight-regular: 400; --fluent-font-weight-semibold: 600; --fluent-font-weight-bold: 700; --fluent-line-height-tight: 1.2; --fluent-line-height-normal: 1.43; --fluent-line-height-relaxed: 1.57; --fluent-space-unit: 4px; --fluent-space-xxs: 2px; --fluent-space-xs: 4px; --fluent-space-sm: 8px; --fluent-space-md: 12px; --fluent-space-lg: 16px; --fluent-space-xl: 24px; --fluent-space-xxl: 32px; --fluent-space-xxxl: 48px; --fluent-radius-sm: 2px; --fluent-radius-md: 4px; --fluent-radius-lg: 8px; --fluent-radius-xl: 12px; --fluent-radius-circular: 10000px; --fluent-radius-round: 50%; --fluent-duration-fast: .15s; --fluent-duration-normal: .25s; --fluent-duration-slow: .4s; --fluent-duration-slower: .5s; --fluent-easing-standard: cubic-bezier(.8, 0, .2, 1); --fluent-easing-decelerate: cubic-bezier(0, 0, 0, 1); --fluent-easing-accelerate: cubic-bezier(1, 0, 1, 1); --fluent-easing-easy-ease: cubic-bezier(.33, 0, .67, 1); --fluent-zindex-actions: 1000; --fluent-zindex-modal: 1100; --fluent-zindex-tooltip: 1200; --fluent-zindex-toast: 1300; --fluent-zindex-dropdown: 1500; --fluent-zindex-menu: 1050; --fluent-sidebar-width: 260px; --fluent-sidebar-collapsed-width: 48px; --fluent-header-height: 48px; --fluent-control-height: 42px; --fluent-btn-height: var(--fluent-control-height, 42px); --fluent-btn-padding: 0 16px; --fluent-input-height: var(--fluent-control-height, 42px); --fluent-card-radius: var(--fluent-radius-lg); --fluent-card-padding: var(--fluent-space-lg); --fluent-modal-radius: var(--fluent-radius-lg); --fluent-modal-padding: var(--fluent-space-xl); } @media (max-width: 767px) { :root { --fluent-modal-padding: var(--fluent-space-lg); } } :root { --fluent-tab-height: 44px; --fluent-tab-indicator-height: 3px; --fluent-checkbox-size: 20px; --fluent-switch-width: 40px; --fluent-switch-height: 20px; --fluent-switch-thumb-size: 12px; --fluent-switch-thumb-offset: 3px; --fluent-scrollbar-width: 6px; --fluent-scrollbar-track-bg: transparent; --fluent-progress-height: 4px; --fluent-badge-radius: 10px; --fluent-zonebadge-text: #111; --fluent-toast-radius: var(--fluent-radius-lg); --fluent-dropdown-max-height-limit: 350px; --fluent-dropdown-max-height: var(--fluent-dropdown-max-height-limit); --fluent-brand-10: color-mix(in srgb, var(--fluent-primary) 10%, #000); --fluent-brand-20: color-mix(in srgb, var(--fluent-primary) 20%, #000); --fluent-brand-30: color-mix(in srgb, var(--fluent-primary) 30%, #000); --fluent-brand-40: color-mix(in srgb, var(--fluent-primary) 40%, #000); --fluent-brand-50: color-mix(in srgb, var(--fluent-primary) 50%, #000); --fluent-brand-60: color-mix(in srgb, var(--fluent-primary) 65%, #000); --fluent-brand-70: color-mix(in srgb, var(--fluent-primary) 80%, #000); --fluent-brand-80: var(--fluent-primary); --fluent-brand-90: color-mix(in srgb, var(--fluent-primary) 90%, #fff); --fluent-brand-100: color-mix(in srgb, var(--fluent-primary) 80%, #fff); --fluent-brand-110: color-mix(in srgb, var(--fluent-primary) 70%, #fff); --fluent-brand-120: color-mix(in srgb, var(--fluent-primary) 60%, #fff); --fluent-brand-130: color-mix(in srgb, var(--fluent-primary) 45%, #fff); --fluent-brand-140: color-mix(in srgb, var(--fluent-primary) 30%, #fff); --fluent-brand-150: color-mix(in srgb, var(--fluent-primary) 15%, #fff); --fluent-brand-160: color-mix(in srgb, var(--fluent-primary) 5%, #fff); } *, :before, :after { box-sizing: border-box; -webkit-tap-highlight-color: #0000; margin: 0; padding: 0; } html { -moz-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); line-height: var(--fluent-line-height-normal); color: var(--fluent-text); background: var(--fluent-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-tight); color: var(--fluent-text); } h1 { font-size: var(--fluent-font-size-xxxl); } h2 { font-size: var(--fluent-font-size-xxl); } h3 { font-size: var(--fluent-font-size-xl); } h4 { font-size: var(--fluent-font-size-lg); } h5 { font-size: var(--fluent-font-size-md); } h6 { font-size: var(--fluent-font-size-base); } p { margin-bottom: var(--fluent-space-lg); } a { color: var(--fluent-text-link); text-decoration: none; } a:hover { color: var(--fluent-text-link-hover); text-decoration: underline; } ul, ol { padding-inline-start: var(--fluent-space-xl); } li { margin-bottom: var(--fluent-space-xxs); } img { vertical-align: middle; max-width: 100%; height: auto; } table { border-collapse: collapse; width: 100%; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { appearance: button; } textarea { resize: vertical; overflow: auto; } ::selection { background: var(--fluent-selection-bg); color: var(--fluent-selection-text); } :focus-visible { outline: 2px solid var(--fluent-focus-color); outline-offset: 2px; } body::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } body::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } body::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } body::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } body::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } body::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } body::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } body::-webkit-scrollbar-corner { background: none; display: none; } body::-webkit-resizer { background: none; } .sr-only { clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .text-truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .text-left, .left { text-align: start; } .text-center { text-align: center; } .text-right, .right { text-align: end; } .pull-right { float: inline-end; } .pull-left { float: inline-start; } .hidden { display: none !important; } .visible { display: block; } .nowrap { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } @media (max-width: 575.98px) { .hide-xs { display: none !important; } } @media (max-width: 767px) { .hide-sm { display: none !important; } } @media (max-width: 991.98px) { .hide-md { display: none !important; } } @media (max-width: 1199.98px) { .hide-lg { display: none !important; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes fluent-spin-swing { 0% { transform: translateY(-50%) rotate(-135deg); } 50% { transform: translateY(-50%) rotate(0); } 100% { transform: translateY(-50%) rotate(225deg); } } div:not([id="view"]) > .spinning { position: relative; padding-inline-start: 40px !important; } div:not([id="view"]) > .spinning:before { inset-inline-start: 10px; content: ""; --duration: 1s; --indicator-size: 3px; --size: 24px; height: var(--size); width: var(--size); box-sizing: border-box; border: var(--indicator-size) solid #0078d433; border-top-color: var(--fluent-primary); border-right-color: var(--fluent-primary); animation: fluent-spin-swing var(--duration) infinite ease; background: none; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); } @keyframes fluent-spin-swing-clean { 0% { transform: rotate(-135deg); } 50% { transform: rotate(0); } 100% { transform: rotate(225deg); } } div[id="view"] > .spinning { box-sizing: border-box; text-align: center; min-height: 400px; font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-md, 16px); color: var(--fluent-text-secondary); justify-content: center; align-items: center; gap: var(--fluent-space-md, 12px); padding: var(--fluent-space-xxl) 0; flex-direction: column; display: flex; } div[id="view"] > .spinning:before { content: ""; --spinner-size: 48px; --indicator-size: 4px; height: var(--spinner-size); width: var(--spinner-size); box-sizing: border-box; border: var(--indicator-size) solid #0078d426; border-top-color: var(--fluent-primary); border-right-color: var(--fluent-primary); margin-bottom: var(--fluent-space-sm, 8px); background: none; border-radius: 50%; animation: 1.5s infinite fluent-spin-swing-clean; display: block; position: static; } @keyframes fluent-view-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } div[id="view"] > :not(.spinning) { animation: fluent-view-fade-in var(--fluent-duration-slow) var(--fluent-easing-decelerate) forwards; } @keyframes fluent-login-fade-in { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fluent-tooltip-show { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } :root { --background-color-high: var(--fluent-card-bg); --background-color-medium: var(--fluent-bg-active); --background-color-low: var(--fluent-table-header-bg); --text-color-highest: var(--fluent-text); --text-color-high: var(--fluent-text); --text-color-medium: var(--fluent-text-secondary); --text-color-low: var(--fluent-text-disabled); --border-color-high: var(--fluent-border-hover); --border-color-medium: var(--fluent-border); --border-color-low: var(--fluent-table-border); --primary-color-high: var(--fluent-primary); --primary-color-medium: var(--fluent-primary-hover); --primary-color-low: var(--fluent-primary-active); --on-primary-color: var(--fluent-text-on-primary); --error-color-high-rgb: 209, 52, 56; --error-color-high: var(--fluent-error); --error-color-medium: var(--fluent-error-hover); --error-color-low: var(--fluent-error-active); --on-error-color: var(--fluent-text-on-primary); --success-color-high-rgb: 16, 124, 16; --success-color-high: var(--fluent-success); --success-color-medium: var(--fluent-success); --success-color-low: var(--fluent-success); --on-success-color: var(--fluent-text-on-primary); --warn-color-high: var(--fluent-warning); --warn-color-medium: var(--fluent-warning); --warn-color-low: var(--fluent-warning); --on-warn-color: var(--fluent-text); --font-sans: var(--fluent-font-family); --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --disabled-opacity: .7; } [data-theme="dark"], :root[data-darkmode="true"], [data-darkmode="true"] { --error-color-high-rgb: 255, 95, 95; --success-color-high-rgb: 111, 235, 111; --warn-color-medium: var(--fluent-warning-hover); --warn-color-low: var(--fluent-warning-active); --on-warn-color: var(--fluent-card-bg); --disabled-opacity: .4; } .cbi-button.cbi-button-remove, .cbi-button.cbi-button-negative, .cbi-button.danger, .btn.cbi-button-remove, .btn.cbi-button-negative, .btn.danger { background: var(--fluent-error); color: var(--fluent-text-on-primary); border-color: var(--fluent-error); } .cbi-button.cbi-button-remove:hover, .cbi-button.cbi-button-negative:hover, .cbi-button.danger:hover, .btn.cbi-button-remove:hover, .btn.cbi-button-negative:hover, .btn.danger:hover { background: var(--fluent-error-hover); border-color: var(--fluent-error-hover); } .cbi-button.cbi-button-remove:active, .cbi-button.cbi-button-negative:active, .cbi-button.danger:active, .btn.cbi-button-remove:active, .btn.cbi-button-negative:active, .btn.danger:active { background: var(--fluent-error-active); border-color: var(--fluent-error-active); } .cbi-button.cbi-button-link, .btn.cbi-button-link { color: var(--fluent-text-link); } .cbi-button.cbi-button-link:hover, .btn.cbi-button-link:hover { color: var(--fluent-text-link-hover); text-decoration: underline; } .cbi-button.cbi-button-up, .cbi-button.cbi-button-down, .btn.cbi-button-up, .btn.cbi-button-down { width: var(--fluent-btn-height); padding: 0; font-size: 0; } .cbi-button.cbi-button-up:before, .cbi-button.cbi-button-down:before, .btn.cbi-button-up:before, .btn.cbi-button-down:before { content: ""; border-right: 2px solid var(--fluent-text-secondary); border-bottom: 2px solid var(--fluent-text-secondary); width: 8px; height: 8px; transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard); display: block; } .cbi-button.cbi-button-up:hover:before, .cbi-button.cbi-button-down:hover:before, .btn.cbi-button-up:hover:before, .btn.cbi-button-down:hover:before { border-color: var(--fluent-text); } .cbi-button.cbi-button-up:before, .btn.cbi-button-up:before { margin-top: 3px; transform: rotate(-135deg); } .cbi-button.cbi-button-down:before, .btn.cbi-button-down:before { margin-bottom: 3px; transform: rotate(45deg); } .cbi-button.cbi-button-find:before, .btn.cbi-button-find:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-arrow-right-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-arrow-right-20-regular); mask-image: var(--fluent-mask-arrow-right-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .cbi-button.spinning, .btn.spinning { position: relative; pointer-events: none !important; padding-inline-start: 36px !important; } .cbi-button.spinning:before, .btn.spinning:before { content: ""; inset-inline-start: 12px; --size: 16px; --indicator-size: 2px; height: var(--size); width: var(--size); box-sizing: border-box; border: var(--indicator-size) solid color-mix(in srgb, currentColor 20%, transparent); background: none; border-top-color: currentColor; border-right-color: currentColor; border-radius: 50%; animation: 1s infinite fluent-spin-swing; position: absolute; top: 50%; transform: translateY(-50%); } .cbi-button:disabled, .cbi-button[disabled], .btn:disabled, .btn[disabled] { background: var(--fluent-bg-active); color: var(--fluent-text-disabled); border-color: var(--fluent-bg-active); cursor: not-allowed; pointer-events: none; } .cbi-button svg, .cbi-button img { width: 16px; height: 16px; margin-right: var(--fluent-space-xs); flex-shrink: 0; } .cbi-button-up + .cbi-button-down { margin-left: 2px; } .btns:has( > .cbi-button) { gap: var(--fluent-space-sm); margin-bottom: var(--fluent-space-md); display: inline-flex; } .control-group:not(:has( > :not(.cbi-button))) { flex-wrap: wrap; align-items: center; gap: 8px; display: flex; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], .cbi-input-text, .cbi-input-password, .cbi-input-date, .cbi-input-time, .cbi-input-datetime { box-sizing: border-box; max-width: 100%; } .cbi-input-group { align-items: center; gap: var(--fluent-space-xs); display: flex; } .fluent-color-field { align-items: center; gap: var(--fluent-space-sm); width: min(100%, 420px); display: flex; } .fluent-color-field > .fluent-color-field__text { flex: auto; min-width: 0; } .fluent-color-swatch { width: var(--fluent-input-height); min-width: var(--fluent-input-height); cursor: pointer; flex-shrink: 0; padding: 0; position: relative; overflow: hidden; } .fluent-color-swatch:focus-within { outline: 2px solid var(--fluent-focus-color); outline-offset: 2px; } .fluent-color-swatch__input { opacity: 0; cursor: pointer; position: absolute; inset: 0; } .fluent-color-swatch__preview { width: calc(var(--fluent-input-height) - var(--fluent-space-xs)*2); height: calc(var(--fluent-input-height) - var(--fluent-space-xs)*2); border-radius: var(--fluent-radius-sm); border: 1px solid var(--fluent-input-border); pointer-events: none; box-sizing: border-box; } .fluent-color-swatch__input:disabled + .fluent-color-swatch__preview { opacity: .5; } input:disabled, .cbi-input-text:disabled, .cbi-input-password:disabled, .cbi-input-date:disabled, .cbi-input-time:disabled, .cbi-input-datetime:disabled { background-color: var(--fluent-input-bg-disabled); color: var(--fluent-text-disabled); cursor: not-allowed; border-color: var(--fluent-border); border-bottom-color: var(--fluent-border); } input[type="search"] { appearance: none; padding-inline-start: var(--fluent-space-xl); } input[type="search"]::-webkit-search-cancel-button { appearance: none; cursor: pointer; background: none; border: none; width: 14px; height: 14px; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } input[type="week"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } .cbi-input-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } .cbi-input-time::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } .cbi-input-datetime::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(var(--fluent-calendar-picker-invert, 0)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; } input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: .9; } input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: .9; } input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: .9; } input[type="week"]::-webkit-calendar-picker-indicator:hover { opacity: .9; } .cbi-input-date::-webkit-calendar-picker-indicator:hover { opacity: .9; } .cbi-input-time::-webkit-calendar-picker-indicator:hover { opacity: .9; } .cbi-input-datetime::-webkit-calendar-picker-indicator:hover { opacity: .9; } .cbi-section { background: var(--fluent-card-bg); border-radius: var(--fluent-card-radius); box-shadow: var(--fluent-card-shadow); padding: var(--fluent-card-padding); box-sizing: border-box; border: none; width: 100%; min-width: 0; max-width: 100%; position: relative; } .cbi-section > * .cbi-section { box-shadow: none; padding: 0; } .cbi-section .cbi-section-node { max-width: 100%; } .cbi-section .cbi-section-node:not(:first-child) { padding-top: var(--fluent-space-lg); } .cbi-section .cbi-section-remove.right + .cbi-section-node:has( + .cbi-section-remove.right + .cbi-section-node) { border-bottom: 2px solid var(--fluent-card-border); margin-bottom: 8px; padding-bottom: 8px; } .cbi-section .cbi-section-remove { float: inline-end; z-index: 10; margin-block-start: 8px; margin-inline: 0 8px; position: relative; } .cbi-section .cbi-section-remove .cbi-button { background: var(--fluent-error); border-color: var(--fluent-error); color: var(--fluent-button-text); } .cbi-section .cbi-section-remove .cbi-button:hover, .cbi-section .cbi-section-remove .cbi-button:focus { background: var(--fluent-error-dark); border-color: var(--fluent-error-dark); } .cbi-section .cbi-section-create { margin-top: var(--fluent-space-sm); justify-content: flex-end; gap: var(--fluent-space-sm); margin-inline-end: var(--fluent-space-sm); margin-bottom: var(--fluent-space-sm); display: flex; } .cbi-section-error { background: var(--fluent-error-light); border: 1px solid var(--fluent-error); border-radius: var(--fluent-card-radius); padding: var(--fluent-space-lg); margin-bottom: var(--fluent-space-lg); color: var(--fluent-error); } .cbi-section-table-titles h3 { font-size: var(--fluent-font-size-md); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); padding: var(--fluent-space-lg) 0; margin: 0; } .panel { background: var(--fluent-card-bg); border-radius: var(--fluent-card-radius); box-shadow: var(--fluent-card-shadow); padding: var(--fluent-card-padding); margin-bottom: var(--fluent-space-lg); border: none; } .panel .panel-title { font-size: var(--fluent-font-size-md); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); padding-bottom: var(--fluent-space-sm); margin-bottom: var(--fluent-space-lg); border-bottom: 1px solid var(--fluent-card-border); } #cbi-network > .cbi-section-node { padding: 0; } .cbi-section-actions:not(.th):not(.td) { justify-content: flex-end; align-items: center; gap: var(--fluent-space-xs); padding: var(--fluent-space-lg) 0 0; border-top: 1px solid var(--fluent-card-border); margin-top: var(--fluent-space-lg); display: flex; } .table { border-collapse: collapse; width: 100%; } .table th { background: var(--fluent-table-header-bg); font-weight: var(--fluent-font-weight-semibold); text-align: center; } .table td, .table th { padding: var(--fluent-space-xs) var(--fluent-space-sm); border-bottom: 1px solid var(--fluent-table-border); } .table tr:hover td { background: var(--fluent-table-row-hover); } .cbi-tblsection, .cbi-section.cbi-tblsection { box-sizing: border-box; max-width: 100%; overflow: visible; } .tr { border-bottom: 1px solid var(--fluent-table-border); transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); } .tr:hover { background: var(--fluent-table-row-hover); } .td, .th { padding: var(--fluent-space-xs) var(--fluent-space-sm); font-size: var(--fluent-font-size-base); color: var(--fluent-text); line-height: var(--fluent-line-height-normal); text-align: center; vertical-align: middle; word-break: normal; overflow-wrap: normal; min-width: 120px; max-width: none; } .td.nowrap, .td[data-widget="CBI.ButtonValue"], .td[data-widget="CBI.FlagValue"], .td.cbi-section-actions, .th.nowrap, .th[data-widget="CBI.ButtonValue"], .th[data-widget="CBI.FlagValue"], .th.cbi-section-actions { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .td:has(.ifacebadge) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .td:has(input) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .td:has(.cbi-button) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .td:has(.btn) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .td:has(button) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .th:has(.ifacebadge) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .th:has(input) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .th:has(.cbi-button) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .th:has(.btn) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .th:has(button) { min-width: auto; max-width: none; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .td .cell-content, .td .td-content, .th .cell-content, .th .td-content { aspect-ratio: 1; max-height: 100%; overflow: hidden; } .td.left, .th.left { text-align: start; justify-content: flex-start; } .td.right, .th.right { text-align: end; justify-content: flex-end; } .td.center, .th.center { text-align: center; justify-content: center; } div.tr { align-items: stretch; display: flex; } div.td, div.th { justify-content: center; align-items: center; gap: var(--fluent-space-xs); flex-wrap: nowrap; flex: auto; display: flex; } .th { background: var(--fluent-table-header-bg); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); border-bottom: 2px solid var(--fluent-table-border); white-space: nowrap; } .cbi-section-table { border-collapse: collapse; width: 100%; } .cbi-section-table .tr.cbi-section-table-titles .th { font-size: var(--fluent-font-size-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--fluent-text-secondary); background: var(--fluent-table-header-bg); border-bottom: 2px solid var(--fluent-table-border); } .cbi-section-table .tr.cbi-section-table-row { transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); } .cbi-section-table .tr.cbi-section-table-row:hover { background: var(--fluent-table-row-hover); } .cbi-section-table .tr.cbi-section-table-row .td { padding: var(--fluent-space-xs) var(--fluent-space-sm); } .cbi-section-table:has(.cbi-section-table-titles.named):not(:has(td.cbi-section-table-titles)) .tr.cbi-section-table-titles.named:before { content: attr(data-title); padding: var(--fluent-space-xs) var(--fluent-space-sm); font-size: var(--fluent-font-size-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--fluent-text-secondary); background: var(--fluent-table-header-bg); border-bottom: 2px solid var(--fluent-table-border); font-weight: var(--fluent-font-weight-semibold); white-space: nowrap; vertical-align: middle; text-align: center; display: table-cell; } .cbi-section-table:has(.cbi-section-table-titles.named):not(:has(td.cbi-section-table-titles)) .tr.cbi-section-table-row[data-title]:before { content: attr(data-title); padding: var(--fluent-space-xs) var(--fluent-space-sm); font-size: var(--fluent-font-size-sm); color: var(--fluent-text); font-weight: var(--fluent-font-weight-semibold); white-space: nowrap; vertical-align: middle; text-align: start; border-bottom: 1px solid var(--fluent-table-border); display: table-cell; } .tr.placeholder { padding: var(--fluent-space-lg); text-align: center; color: var(--fluent-text-disabled); font-style: italic; } .cbi-section-table .cbi-section-actions, td.cbi-section-actions { padding: var(--fluent-space-xs) var(--fluent-space-sm); white-space: nowrap; text-align: end; vertical-align: middle; align-self: center !important; } .cbi-section-table .cbi-section-actions > div, td.cbi-section-actions > div { flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 5px; display: flex; } .table-wrapper { -webkit-overflow-scrolling: touch; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; display: block; overflow-x: auto; } .table-wrapper > table.table, .table-wrapper > table.cbi-section-table, .table-wrapper > div.table, .table-wrapper > div.cbi-section-table { table-layout: auto; border-collapse: collapse; box-sizing: border-box; width: 100%; min-width: 100%; max-width: none; display: table !important; } .table-wrapper > div.table > .thead, .table-wrapper > div.cbi-section-table > .thead { display: table-header-group; } .table-wrapper > div.table > .tbody, .table-wrapper > div.cbi-section-table > .tbody { display: table-row-group; } .table-wrapper > div.table > .tfoot, .table-wrapper > div.cbi-section-table > .tfoot { display: table-footer-group; } .table-wrapper > div.table > .tr, .table-wrapper > div.table > .thead > .tr, .table-wrapper > div.table > .tbody > .tr, .table-wrapper > div.table > .tfoot > .tr, .table-wrapper > div.cbi-section-table > .tr, .table-wrapper > div.cbi-section-table > .thead > .tr, .table-wrapper > div.cbi-section-table > .tbody > .tr, .table-wrapper > div.cbi-section-table > .tfoot > .tr { display: table-row !important; } .table-wrapper > div.table > .tr > .td, .table-wrapper > div.table > .tr > .th, .table-wrapper > div.table > .thead > .tr > .td, .table-wrapper > div.table > .thead > .tr > .th, .table-wrapper > div.table > .tbody > .tr > .td, .table-wrapper > div.table > .tbody > .tr > .th, .table-wrapper > div.table > .tfoot > .tr > .td, .table-wrapper > div.table > .tfoot > .tr > .th, .table-wrapper > div.cbi-section-table > .tr > .td, .table-wrapper > div.cbi-section-table > .tr > .th, .table-wrapper > div.cbi-section-table > .thead > .tr > .td, .table-wrapper > div.cbi-section-table > .thead > .tr > .th, .table-wrapper > div.cbi-section-table > .tbody > .tr > .td, .table-wrapper > div.cbi-section-table > .tbody > .tr > .th, .table-wrapper > div.cbi-section-table > .tfoot > .tr > .td, .table-wrapper > div.cbi-section-table > .tfoot > .tr > .th { display: table-cell !important; } .table-wrapper > div.table .tr[data-title]:before, .table-wrapper > div.table .td[data-title]:before, .table-wrapper > div.cbi-section-table .tr[data-title]:before, .table-wrapper > div.cbi-section-table .td[data-title]:before { content: none; } #modal_overlay { top: 0; background: var(--fluent-modal-overlay); width: 100%; height: 100%; z-index: var(--fluent-zindex-modal); -webkit-overflow-scrolling: touch; padding: var(--fluent-space-md); box-sizing: border-box; justify-content: center; align-items: safe center; display: none; position: fixed; inset-inline-start: 0; overflow-y: auto; } .modal { background: var(--fluent-modal-bg); border-radius: var(--fluent-modal-radius); box-shadow: var(--fluent-shadow-xl); padding: var(--fluent-modal-padding); width: 90%; min-width: 280px; max-width: 800px; max-height: 85dvh; animation: slideInUp var(--fluent-duration-normal) var(--fluent-easing-decelerate); flex-direction: column; display: flex; position: relative; overflow: hidden; } :is(.modal:has( > .alert-message), .modal:has( > .alert)) { max-width: 600px; } .modal .alert, .modal .alert-message { display: block; padding-block: 0 !important; padding-inline: 0 !important; box-shadow: none !important; color: var(--fluent-text) !important; background: none !important; border: none !important; margin: 0 !important; padding-inline-start: calc(18px + var(--fluent-space-md)) !important; } .modal .alert:before, .modal .alert-message:before { inset-inline-start: 0 !important; margin-top: 2px !important; position: absolute !important; top: 0 !important; } .modal h4, .modal .modal-header { background: var(--fluent-modal-bg); padding-bottom: var(--fluent-space-md); font-size: var(--fluent-font-size-lg); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); flex: none; margin: 0; } .modal h4 h3, .modal .modal-header h3 { font-size: var(--fluent-font-size-lg); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); margin: 0; } .modal .button-row, .modal .modal-footer, .modal > .right { background: var(--fluent-modal-bg); padding-top: var(--fluent-space-md); justify-content: flex-start; align-items: center; gap: var(--fluent-space-sm); flex-flow: row-reverse wrap; flex: none; margin: 0; display: flex; } .modal .modal-content-wrap, .modal > .cbi-map { padding-bottom: var(--fluent-space-xs); overflow-y: auto; overflow-y: overlay; flex: auto; min-height: 20px; } .modal .modal-content-wrap::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .modal > .cbi-map::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .modal .modal-content-wrap::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .modal > .cbi-map::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .modal .modal-content-wrap::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .modal > .cbi-map::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .modal .modal-content-wrap::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .modal > .cbi-map::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .modal .modal-content-wrap::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .modal > .cbi-map::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .modal .modal-content-wrap::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .modal > .cbi-map::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .modal .modal-content-wrap::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .modal > .cbi-map::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .modal .modal-content-wrap::-webkit-scrollbar-corner { background: none; display: none; } .modal > .cbi-map::-webkit-scrollbar-corner { background: none; display: none; } .modal .modal-content-wrap::-webkit-resizer { background: none; } .modal > .cbi-map::-webkit-resizer { background: none; } .modal .modal-content-wrap > * { margin-bottom: var(--fluent-space-md); } .modal .modal-content-wrap > :last-child { margin-bottom: 0; } .modal .cbi-map .cbi-section { box-shadow: none; padding: 0 !important; } .modal .modal-body { margin-bottom: var(--fluent-space-lg); font-size: var(--fluent-font-size-base); color: var(--fluent-text); line-height: var(--fluent-line-height-normal); } .modal > .modal-close, .modal > .close { width: 32px; height: 32px; color: var(--fluent-text-secondary); top: var(--fluent-space-lg); z-index: 11; background: none; border: none; padding: 0; position: absolute; inset-inline-end: var(--fluent-space-lg); } .modal > .modal-close:before, .modal > .close:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-dismiss-20-regular: url("data:image/svg+xml,"); width: 20px; height: 20px; -webkit-mask-image: var(--fluent-mask-dismiss-20-regular); mask-image: var(--fluent-mask-dismiss-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .modal > .modal-close:hover, .modal > .close:hover { background: var(--fluent-bg-hover); color: var(--fluent-text); } .modal:not(.spinning) .modal-content-wrap > p.spinning { margin-top: var(--fluent-space-sm); margin-bottom: var(--fluent-space-sm); overflow: visible !important; } .modal > :not(.right) .right { justify-content: flex-end; align-items: center; gap: var(--fluent-space-xs); display: flex; } .modal-wide { max-width: 1000px; } .modal, .uci-dialog { padding: var(--fluent-modal-padding); } .modal .button-row > .btn, .uci-dialog .button-row > .btn { min-width: 96px; } .modal .button-row .cbi-button + .cbi-button, .uci-dialog .button-row .cbi-button + .cbi-button { margin-inline-start: var(--fluent-space-sm); } .modal > .cbi-section, .uci-dialog > .cbi-section { box-shadow: none !important; background: none !important; border: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.modal-overlay-active { height: 100vh; overflow: hidden; } body.modal-overlay-active #modal_overlay { animation: fadeIn var(--fluent-duration-normal) var(--fluent-easing-decelerate); display: flex; } :is(body.modal-overlay-active:has(#modal_overlay .modal.notice), body.modal-overlay-active:has(#modal_overlay .modal.spinning)) { height: auto !important; overflow: auto !important; } :is(body.modal-overlay-active:has(#modal_overlay .modal.notice) .modal, body.modal-overlay-active:has(#modal_overlay .modal.notice) .uci-dialog, body.modal-overlay-active:has(#modal_overlay .modal.spinning) .modal, body.modal-overlay-active:has(#modal_overlay .modal.spinning) .uci-dialog) { padding: var(--fluent-space-md); } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent button { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent input { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent select { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent textarea { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent label { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .cbi-button { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .cbi-dropdown { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .fluent-custom-select { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .cbi-checkbox { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .fluent-menu-editor__drag-handle { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent a.btn { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent button { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent input { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent select { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent textarea { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent label { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .cbi-button { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .cbi-dropdown { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .fluent-custom-select { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .cbi-checkbox { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .fluent-menu-editor__drag-handle { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent a.btn { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent button * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent input * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent select * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent textarea * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent label * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .cbi-button * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .cbi-dropdown * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .fluent-custom-select * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .cbi-checkbox * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent .fluent-menu-editor__drag-handle * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.notice) #maincontent a.btn * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent button * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent input * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent select * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent textarea * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent label * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .cbi-button * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .cbi-dropdown * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .fluent-custom-select * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .cbi-checkbox * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent .fluent-menu-editor__drag-handle * { pointer-events: none !important; } body.modal-overlay-active:has(#modal_overlay .modal.spinning) #maincontent a.btn * { pointer-events: none !important; } :is(body.modal-overlay-active:has(#modal_overlay .modal.notice) #indicators, body.modal-overlay-active:has(#modal_overlay .modal.spinning) #indicators) { pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(.5) opacity(.6) !important; } :is(body.modal-overlay-active:has(#modal_overlay .modal.notice) #indicators *, body.modal-overlay-active:has(#modal_overlay .modal.spinning) #indicators *) { pointer-events: none !important; } :is(body.modal-overlay-active #modal_overlay:has(.modal.notice), body.modal-overlay-active #modal_overlay:has(.modal.spinning)) { pointer-events: none !important; padding-top: var(--fluent-space-xl) !important; background: none !important; align-items: flex-start !important; display: flex !important; } :is(.modal.alert-message:not(:has(.button-row)):not(:has(button)), .modal.spinning) { align-items: center !important; gap: var(--fluent-space-md) !important; pointer-events: auto !important; width: auto !important; max-width: 480px !important; box-shadow: var(--fluent-shadow-md) !important; background: var(--fluent-bg-card) !important; flex-direction: row !important; margin: 0 auto !important; display: flex !important; } :is(.modal.alert-message:not(:has(.button-row)):not(:has(button)) p, .modal.spinning p) { margin: 0 !important; } #modal_overlay:has(.fluent-apply-change-preview) { justify-content: flex-start !important; align-items: center !important; gap: var(--fluent-space-sm) !important; padding-top: var(--fluent-space-sm) !important; flex-direction: column !important; display: flex !important; } .fluent-apply-change-preview { gap: var(--fluent-space-sm) !important; pointer-events: auto !important; flex-direction: column !important; order: 1 !important; width: min(90%, 680px) !important; max-height: 50dvh !important; margin: 0 auto !important; padding: 2px !important; display: flex !important; overflow-y: auto !important; } .fluent-apply-change-preview::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .fluent-apply-change-preview::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .fluent-apply-change-preview::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .fluent-apply-change-preview::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .fluent-apply-change-preview::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .fluent-apply-change-preview::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .fluent-apply-change-preview::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .fluent-apply-change-preview::-webkit-scrollbar-corner { background: none; display: none; } .fluent-apply-change-preview::-webkit-resizer { background: none; } .fluent-apply-change-preview { animation: slideInUp var(--fluent-duration-normal) var(--fluent-easing-decelerate); } .modal.alert-message.notice.spinning { order: 2 !important; } .fluent-apply-change-preview-card { background: var(--fluent-card-bg) !important; border-radius: var(--fluent-card-radius) !important; box-shadow: var(--fluent-shadow-md) !important; margin: var(--fluent-space-md) !important; padding: var(--fluent-card-padding) !important; gap: var(--fluent-space-sm) !important; flex-direction: column !important; display: flex !important; } .fluent-apply-change-preview-card:not(:first-child) { margin-top: var(--fluent-space-xs); } .fluent-apply-change-preview-card-header { font-family: var(--fluent-font-family) !important; font-size: var(--fluent-font-size-sm) !important; font-weight: var(--fluent-font-weight-semibold) !important; color: var(--fluent-brand-80) !important; letter-spacing: .5px !important; justify-content: space-between !important; align-items: center !important; display: flex !important; } .fluent-apply-change-preview-close { border-radius: var(--fluent-radius-md) !important; width: 24px !important; height: 24px !important; color: var(--fluent-text-secondary) !important; cursor: pointer !important; pointer-events: auto !important; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; background: none !important; border: none !important; justify-content: center !important; align-items: center !important; padding: 0 !important; display: flex !important; } .fluent-apply-change-preview-close:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-dismiss-20-regular: url("data:image/svg+xml,"); width: 14px; height: 14px; -webkit-mask-image: var(--fluent-mask-dismiss-20-regular); mask-image: var(--fluent-mask-dismiss-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-apply-change-preview-close:hover { background: var(--fluent-card-border) !important; color: var(--fluent-text) !important; } .fluent-apply-change-preview-close:active { background: color-mix(in srgb, var(--fluent-card-border) 80%, #000) !important; } .fluent-apply-change-preview-card-body.uci-change-list { max-height: 280px !important; margin: 0 !important; } :is(.modal.alert-message:has(.button-row), .modal.alert-message:has(button)) { background: var(--fluent-modal-bg) !important; border-radius: var(--fluent-modal-radius) !important; width: 90% !important; max-width: 600px !important; padding: var(--fluent-modal-padding) !important; box-shadow: var(--fluent-shadow-xl) !important; flex-direction: column !important; align-items: stretch !important; margin: 0 auto !important; display: flex !important; position: relative !important; } .modal.alert-message:has(.button-row):before { top: calc(var(--fluent-modal-padding) + 4px) !important; z-index: 11 !important; margin: 0 !important; position: absolute !important; inset-inline-start: var(--fluent-modal-padding) !important; } .modal.alert-message:has(button):before { top: calc(var(--fluent-modal-padding) + 4px) !important; z-index: 11 !important; margin: 0 !important; position: absolute !important; inset-inline-start: var(--fluent-modal-padding) !important; } :is(.modal.alert-message:has(.button-row) h4, .modal.alert-message:has(button) h4) { font-size: var(--fluent-font-size-lg) !important; font-weight: var(--fluent-font-weight-semibold) !important; color: var(--fluent-text) !important; margin: 0 0 var(--fluent-space-md) 0 !important; padding-inline-start: 28px !important; } :is(.modal.alert-message:has(.button-row) p, .modal.alert-message:has(button) p) { margin: 0 0 var(--fluent-space-lg) 0 !important; color: var(--fluent-text-secondary) !important; font-size: var(--fluent-font-size-base) !important; line-height: var(--fluent-line-height-relaxed) !important; } :is(.modal.alert-message:has(.button-row) .button-row, .modal.alert-message:has(button) .button-row) { margin: var(--fluent-space-lg) 0 0 0 !important; justify-content: flex-start !important; gap: var(--fluent-space-xs) !important; background: none !important; border-top: none !important; flex-flow: row-reverse wrap !important; padding: 0 !important; display: flex !important; position: static !important; } .cbi-map, #view { font-family: var(--fluent-font-family); color: var(--fluent-text); flex-direction: column; min-width: 0; max-width: 100%; display: flex; } .cbi-map > .cbi-section + .cbi-section, #view > .cbi-section + .cbi-section { margin-top: 5px; } .cbi-map h2, .cbi-map h3, #view h2, #view h3 { color: var(--fluent-text); font-family: var(--fluent-font-family); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-tight); margin: 0; } .cbi-map h2, #view h2 { font-size: var(--fluent-font-size-xxl); } .cbi-map h3, #view h3 { font-size: var(--fluent-font-size-lg); } .cbi-map-descr { color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-relaxed); } .cbi-section-error { background: var(--fluent-error-light); border-color: var(--fluent-error); box-shadow: none; } .cbi-section-node-tabbed { flex-direction: column; display: flex; } .cbi-section .cbi-title { color: var(--fluent-text); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-md); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-tight); margin: 0; } .cbi-section .cbi-title h3 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; } .cbi-section .cbi-title h3:has(.label[data-clickable="true"]) { justify-content: flex-start !important; align-items: center !important; gap: var(--fluent-space-sm) !important; display: flex !important; } .cbi-section .cbi-title h3:has(.label[data-clickable="true"]) .label[data-clickable="true"] { cursor: pointer; border-radius: var(--fluent-radius-sm); transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard); position: relative; width: 24px !important; height: 24px !important; min-width: unset !important; color: #0000 !important; background: none !important; border: none !important; order: -1 !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; display: inline-flex !important; } .cbi-section .cbi-title h3:has(.label[data-clickable="true"]) .label[data-clickable="true"]:hover { background-color: var(--fluent-bg-hover) !important; } .cbi-section .cbi-title h3:has(.label[data-clickable="true"]) .label[data-clickable="true"]:before { content: ""; border-inline-end: 1.5px solid var(--fluent-text-secondary); border-bottom: 1.5px solid var(--fluent-text-secondary); width: 8px; height: 8px; transition: transform var(--fluent-duration-normal) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard); display: block; transform: rotate(-45deg) translate(-1px, -1px); } .cbi-section .cbi-title h3:has(.label[data-clickable="true"]) .label[data-clickable="true"]:hover:before { border-color: var(--fluent-text); } .cbi-section .cbi-title h3:has(.label[data-clickable="true"]) .label[data-clickable="true"][data-style="inactive"]:before { transform: rotate(45deg) translate(0, -1px); } .cbi-section-descr { padding: 0 var(--fluent-space-lg) var(--fluent-space-md); color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-relaxed); margin: 0; } .cbi-section.fade-in { animation: fadeIn var(--fluent-duration-normal) var(--fluent-easing-decelerate); transform-origin: top; } .cbi-value { padding: var(--fluent-space-md) 0; border-bottom: 1px solid var(--fluent-card-border); display: block; } .cbi-value:last-child { border-bottom: 0; padding-bottom: 0; } .cbi-value:first-child { padding-top: 0; } .cbi-value[data-widget="CBI.ContainerValue"] { border-bottom: 0; padding: 0; } .cbi-value:has( > .cbi-value-title) { gap: var(--fluent-space-xs); flex-direction: column; display: flex; } @media (min-width: 768px) { .cbi-value:has( > .cbi-value-title) { align-items: start; gap: var(--fluent-space-sm) var(--fluent-space-xl); grid-template-columns: minmax(0, 220px) minmax(0, 1fr); display: grid; } } @media (max-width: 767px) { .cbi-value[data-widget="CBI.FlagValue"] { gap: var(--fluent-space-xs) var(--fluent-space-md); grid-template-columns: 1fr auto; grid-template-areas: "title switch" "desc desc"; align-items: center; display: grid; } .cbi-value:has(.cbi-checkbox:not(td *):not(th *)) { gap: var(--fluent-space-xs) var(--fluent-space-md); grid-template-columns: 1fr auto; grid-template-areas: "title switch" "desc desc"; align-items: center; display: grid; } .cbi-value[data-widget="CBI.FlagValue"] .cbi-value-title { grid-area: title; margin: 0; } .cbi-value:has(.cbi-checkbox:not(td *):not(th *)) .cbi-value-title { grid-area: title; margin: 0; } .cbi-value[data-widget="CBI.FlagValue"] .cbi-value-field:not(td):not(th) { display: contents !important; } .cbi-value:has(.cbi-checkbox:not(td *):not(th *)) .cbi-value-field:not(td):not(th) { display: contents !important; } .cbi-value[data-widget="CBI.FlagValue"] .cbi-checkbox:not(td *):not(th *) { grid-area: switch; justify-self: end; align-items: center; margin: 0; display: flex; } .cbi-value:has(.cbi-checkbox:not(td *):not(th *)) .cbi-checkbox:not(td *):not(th *) { grid-area: switch; justify-self: end; align-items: center; margin: 0; display: flex; } .cbi-value[data-widget="CBI.FlagValue"] .cbi-value-description:not(td *):not(th *) { grid-area: desc; margin: 0; } .cbi-value:has(.cbi-checkbox:not(td *):not(th *)) .cbi-value-description:not(td *):not(th *) { grid-area: desc; margin: 0; } } .cbi-value .cbi-value-title { align-self: start; } .cbi-value .cbi-value-field { min-width: 0; } .cbi-value .cbi-input-text, .cbi-value .cbi-input-select, .cbi-value cbi-dropdown, .cbi-value .cbi-dropdown, .cbi-value .fluent-custom-select { box-sizing: border-box; width: 100%; } .cbi-value-title { color: var(--fluent-text); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-normal); margin: 0; } .cbi-value-field:not(td) { gap: var(--fluent-space-sm); flex-direction: column; min-width: 0; display: flex; } .cbi-value-description { color: var(--fluent-text-secondary); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-regular); line-height: var(--fluent-line-height-normal); margin: 0; } .cbi-value-description abbr { color: var(--fluent-primary); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); cursor: help; margin-inline-start: var(--fluent-space-xs); text-decoration: none; display: inline-block; } .cbi-optionals { margin-top: var(--fluent-space-lg); padding-top: var(--fluent-space-md); border-top: 1px solid var(--fluent-card-border); } .cbi-rowstyle-1, .cbi-rowstyle-2 { transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); } .cbi-rowstyle-1 { background: var(--fluent-bg); } .cbi-rowstyle-2 { background: var(--fluent-bg-page); } .uci-dialog { animation: slideInUp var(--fluent-duration-normal) var(--fluent-easing-decelerate); background: var(--fluent-modal-bg); border-radius: var(--fluent-radius-lg); box-shadow: var(--fluent-shadow-xl); color: var(--fluent-text); border: none; } .uci-dialog .cbi-section { padding: var(--fluent-space-lg); } .uci-change-list::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .uci-change-list::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .uci-change-list::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .uci-change-list::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .uci-change-list::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .uci-change-list::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .uci-change-list::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .uci-change-list::-webkit-scrollbar-corner { background: none; display: none; } .uci-change-list::-webkit-resizer { background: none; } .uci-change-list { gap: var(--fluent-space-xs); width: 100%; max-height: calc(var(--fluent-space-xxxl) + var(--fluent-space-xxxl) + var(--fluent-space-xxxl) + var(--fluent-space-xxl) + var(--fluent-space-xl)); padding: var(--fluent-space-sm); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); background: var(--fluent-bg-page); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-md); flex-direction: column; display: flex; overflow: auto; } .uci-change-list ins, .uci-change-list del, .uci-change-list var { padding: var(--fluent-space-sm) var(--fluent-space-md); border-radius: var(--fluent-radius-md); white-space: pre-wrap; word-break: break-word; font-style: normal; text-decoration: none; display: block; } .uci-change-list ins { color: var(--fluent-success); background: var(--fluent-success-light); border: 1px solid var(--fluent-success); } .uci-change-list del { color: var(--fluent-error); background: var(--fluent-error-light); border: 1px solid var(--fluent-error); } .uci-change-list var { color: var(--fluent-text-secondary); background: var(--fluent-bg-hover); border: 1px solid var(--fluent-border); } .uci-change-list var ins, .uci-change-list var del { white-space: inherit; background: none; border: 0; border-radius: 0; padding: 0; display: inline; } .uci-change-legend { gap: var(--fluent-space-sm) var(--fluent-space-lg); padding: var(--fluent-space-md) 0 0; line-height: var(--fluent-line-height-normal); flex-wrap: wrap; display: flex; } .uci-change-legend-label { align-items: center; gap: var(--fluent-space-sm); color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); display: inline-flex; } .uci-change-legend-label > ins, .uci-change-legend-label > del, .uci-change-legend-label > var { width: calc(var(--fluent-space-sm) + var(--fluent-space-xs) + var(--fluent-space-xxs)); height: calc(var(--fluent-space-sm) + var(--fluent-space-xs) + var(--fluent-space-xxs)); min-width: calc(var(--fluent-space-sm) + var(--fluent-space-xs) + var(--fluent-space-xxs)); border-radius: var(--fluent-radius-sm); justify-content: center; align-items: center; padding: 0; font-style: normal; text-decoration: none; display: inline-flex; } .uci-change-legend-label > ins { background: var(--fluent-success-light); border: 1px solid var(--fluent-success); } .uci-change-legend-label > del { background: var(--fluent-error-light); border: 1px solid var(--fluent-error); } .uci-change-legend-label > var { background: var(--fluent-bg-hover); border: 1px solid var(--fluent-border); color: #0000; position: relative; } .uci-change-legend-label > var ins, .uci-change-legend-label > var del { background: none; border: 0; border-radius: 0; padding: 0; display: block; position: absolute; inset: 2px; } .modal label > input[type="checkbox"] { margin-right: var(--fluent-space-sm); vertical-align: middle; } .modal .label { padding: var(--fluent-space-xxs) var(--fluent-space-sm); border-radius: var(--fluent-radius-circular); background: var(--fluent-info-light); color: var(--fluent-info); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); align-items: center; display: inline-flex; } .modal .label.warning { background: var(--fluent-warning-light); color: var(--fluent-text); } .cbi-page-actions { z-index: var(--fluent-zindex-actions); justify-content: flex-end; align-items: center; gap: var(--fluent-space-sm); margin-top: var(--fluent-space-xl); padding: var(--fluent-space-md) var(--fluent-space-lg); background: color-mix(in srgb, var(--fluent-bg-card) 92%, transparent); border-radius: var(--fluent-radius-lg); box-shadow: var(--fluent-shadow-lg); border: none; flex-wrap: wrap; display: flex; position: sticky; bottom: 0; } body[data-sticky-action-bar="0"] .cbi-page-actions { position: static; } .cbi-page-actions > form[method="post"] { display: inline-flex; } .cbi-page-actions .cbi-button-link:first-child { margin-right: auto; } .cbi-page-actions .cbi-dropdown[open] > ul.dropdown { margin-top: 0 !important; margin-bottom: var(--fluent-space-xxs) !important; transform-origin: bottom !important; width: max-content !important; max-width: calc(100vw - 32px) !important; animation-name: fluent-dropdown-slide-in-up !important; inset: auto 0 100% auto !important; } html[dir="rtl"] .cbi-page-actions .cbi-dropdown[open] > ul.dropdown, body[data-fluent-dir="rtl"] .cbi-page-actions .cbi-dropdown[open] > ul.dropdown { left: 0 !important; right: auto !important; } @supports (anchor-name: --a) { .cbi-page-actions .cbi-dropdown[open] > ul.dropdown { left: auto !important; right: anchor(right) !important; } html[dir="rtl"] .cbi-page-actions .cbi-dropdown[open] > ul.dropdown, body[data-fluent-dir="rtl"] .cbi-page-actions .cbi-dropdown[open] > ul.dropdown { left: anchor(left) !important; right: auto !important; } } :not(#modal_overlay) > .alert, :not(#modal_overlay) > .alert-message { margin: 0 0 var(--fluent-space-lg); padding-block: var(--fluent-space-md); padding-inline: var(--fluent-space-lg) var(--fluent-space-lg); border-radius: var(--fluent-radius-md); background: var(--fluent-bg-hover); border: 1px solid; border-color: var(--fluent-border); color: var(--fluent-text); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-normal); padding-inline-start: calc(var(--fluent-space-lg) + 18px + var(--fluent-space-md)); position: relative; } :not(#modal_overlay) > .alert:before, :not(#modal_overlay) > .alert-message:before { inset-inline-start: var(--fluent-space-lg); top: var(--fluent-space-md); content: url("data:image/svg+xml;utf8,"); --fluent-mask-info-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-info-20-regular); mask-image: var(--fluent-mask-info-20-regular); -webkit-user-select: none; user-select: none; margin-top: 2px; display: inline-block; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } :not(#modal_overlay) > .alert > div:first-of-type, :not(#modal_overlay) > .alert-message > div:first-of-type { width: 100%; display: flow-root; } :not(#modal_overlay) > .alert > div:first-of-type .cbi-button, :not(#modal_overlay) > .alert > div:first-of-type .btn, :not(#modal_overlay) > .alert-message > div:first-of-type .cbi-button, :not(#modal_overlay) > .alert-message > div:first-of-type .btn { height: 28px; line-height: 1; font-size: var(--fluent-font-size-sm); padding: 0 var(--fluent-space-sm); border-radius: var(--fluent-radius-md); margin-top: var(--fluent-space-sm); float: inline-end; } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type), :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) { top: 8px; display: flex; position: absolute; inset-inline-end: 8px; } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child:after, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child:after { content: ""; background: linear-gradient(45deg, transparent calc(50% - .75px), var(--fluent-text-secondary) calc(50% - .75px), var(--fluent-text-secondary) calc(50% + .75px), transparent calc(50% + .75px)),linear-gradient(-45deg, transparent calc(50% - .75px), var(--fluent-text-secondary) calc(50% - .75px), var(--fluent-text-secondary) calc(50% + .75px), transparent calc(50% + .75px)); background-position: center; background-repeat: no-repeat; background-size: 8px 8px; flex: 0 0 20px; width: 20px; height: 20px; display: inline-block; } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child { width: 28px; height: 28px; color: var(--fluent-text-secondary); border-radius: var(--fluent-radius-md); background: none; border: none; justify-content: center; align-self: flex-start; align-items: center; padding: 0; line-height: 1; display: inline-flex; margin-top: 0 !important; margin-inline-start: auto !important; font-size: 0 !important; } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child:hover, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child:hover { background: var(--fluent-bg-hover); color: var(--fluent-text); } :not(#modal_overlay) > .alert > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child:active, :not(#modal_overlay) > .alert-message > div:last-of-type:not(:first-of-type) > .btn:not(.cbi-button):only-child:active { background: var(--fluent-bg-active); } :not(#modal_overlay) > .alert h4, :not(#modal_overlay) > .alert-message h4 { margin: 0 0 var(--fluent-space-xs) 0; color: var(--fluent-text); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-semibold); background: none; padding: 0; } :not(#modal_overlay) > .alert p, :not(#modal_overlay) > .alert-message p { margin: 0 0 var(--fluent-space-sm) 0; color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-relaxed); } :not(#modal_overlay) > .alert p:last-child, :not(#modal_overlay) > .alert-message p:last-child { margin-bottom: 0; } :not(#modal_overlay) > .alert.success, :not(#modal_overlay) > .alert.alert-success, :not(#modal_overlay) > .alert.notice, :not(#modal_overlay) > .alert-message.success, :not(#modal_overlay) > .alert-message.alert-success, :not(#modal_overlay) > .alert-message.notice { background: var(--fluent-success-light); border-color: color-mix(in srgb, var(--fluent-success) 35%, transparent); } :not(#modal_overlay) > .alert.success:before, :not(#modal_overlay) > .alert.alert-success:before, :not(#modal_overlay) > .alert.notice:before, :not(#modal_overlay) > .alert-message.success:before, :not(#modal_overlay) > .alert-message.alert-success:before, :not(#modal_overlay) > .alert-message.notice:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-checkmark-circle-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-checkmark-circle-20-regular); mask-image: var(--fluent-mask-checkmark-circle-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-success) !important; } :not(#modal_overlay) > .alert.warning, :not(#modal_overlay) > .alert.alert-warning, :not(#modal_overlay) > .alert-message.warning, :not(#modal_overlay) > .alert-message.alert-warning { background: var(--fluent-warning-light); border-color: color-mix(in srgb, var(--fluent-warning) 45%, transparent); } :not(#modal_overlay) > .alert.warning:before, :not(#modal_overlay) > .alert.alert-warning:before, :not(#modal_overlay) > .alert-message.warning:before, :not(#modal_overlay) > .alert-message.alert-warning:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-warning-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-warning-20-regular); mask-image: var(--fluent-mask-warning-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-warning) !important; } :not(#modal_overlay) > .alert.error, :not(#modal_overlay) > .alert.alert-danger, :not(#modal_overlay) > .alert.danger, :not(#modal_overlay) > .alert-message.error, :not(#modal_overlay) > .alert-message.alert-danger, :not(#modal_overlay) > .alert-message.danger { background: var(--fluent-error-light); border-color: color-mix(in srgb, var(--fluent-error) 35%, transparent); } :not(#modal_overlay) > .alert.error:before, :not(#modal_overlay) > .alert.alert-danger:before, :not(#modal_overlay) > .alert.danger:before, :not(#modal_overlay) > .alert-message.error:before, :not(#modal_overlay) > .alert-message.alert-danger:before, :not(#modal_overlay) > .alert-message.danger:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-dismiss-circle-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-dismiss-circle-20-regular); mask-image: var(--fluent-mask-dismiss-circle-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-error) !important; } :not(#modal_overlay) > .alert.info, :not(#modal_overlay) > .alert.alert-info, :not(#modal_overlay) > .alert-message.info, :not(#modal_overlay) > .alert-message.alert-info { background: var(--fluent-info-light); border-color: color-mix(in srgb, var(--fluent-info) 35%, transparent); } :not(#modal_overlay) > .alert.info:before, :not(#modal_overlay) > .alert.alert-info:before, :not(#modal_overlay) > .alert-message.info:before, :not(#modal_overlay) > .alert-message.alert-info:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-info-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-info-20-regular); mask-image: var(--fluent-mask-info-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-info) !important; } .ifacebadge { align-items: center; gap: var(--fluent-space-xs); min-height: calc(var(--fluent-input-height) - var(--fluent-space-sm)); max-width: 100%; padding: var(--fluent-space-xxs) var(--fluent-space-sm); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-sm); background: var(--fluent-primary-lightest); color: var(--fluent-text); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-tight); box-sizing: border-box; vertical-align: middle; display: inline-flex; } html[dir="rtl"] .ifacebadge img, body[data-fluent-dir="rtl"] .ifacebadge img { order: -1; } .ifacebadge:not(.cbi-tooltip):not(.large) > span:not(.cbi-tooltip-container) { text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; } .ifacebadge > em { min-width: var(--fluent-space-lg); color: var(--fluent-text-secondary); flex-shrink: 0; justify-content: center; align-items: center; font-style: normal; line-height: 1; display: inline-flex; } .ifacebadge .cbi-tooltip-container { flex-shrink: 0; align-items: center; display: inline-flex; } .ifacebadge img { width: var(--fluent-space-lg); height: var(--fluent-space-lg); object-fit: contain; flex-shrink: 0; } td > .ifacebadge, .td > .ifacebadge { margin: var(--fluent-space-xxs) 0; } .zonebadge { align-items: center; gap: var(--fluent-space-sm); padding: var(--fluent-space-xs) var(--fluent-space-sm); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-radius-circular); background: var(--fluent-card-bg); box-shadow: none; color: var(--fluent-zonebadge-text); flex-wrap: wrap; justify-content: center; display: inline-flex; } .zonebadge .ifacebadge { background: var(--fluent-bg-page); border-color: var(--fluent-table-border); } .zonebadge > input[type="text"] { flex: 12rem; min-width: 0; } .zonebadge > em, .zonebadge > strong { color: inherit; font-style: normal; line-height: var(--fluent-line-height-normal); } .zonebadge > strong { font-weight: var(--fluent-font-weight-semibold); } .zonebadge-empty { border-style: dashed; border-inline-start-color: var(--fluent-warning); background: var(--fluent-bg-page); color: var(--fluent-text-secondary); } .zone-forwards { align-items: center; gap: var(--fluent-space-sm); color: var(--fluent-text-secondary); flex-wrap: wrap; display: flex; } .zone-forwards .zone-src, .zone-forwards .zone-dest { align-items: center; gap: var(--fluent-space-xs); min-height: calc(var(--fluent-input-height) - var(--fluent-space-sm)); padding: var(--fluent-space-xxs) var(--fluent-space-sm); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-sm); background: var(--fluent-bg-page); color: var(--fluent-text); display: inline-flex; } #syslog::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } #syslog::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } #syslog::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } #syslog::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } #syslog::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } #syslog::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } #syslog::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } #syslog::-webkit-scrollbar-corner { background: none; display: none; } #syslog::-webkit-resizer { background: none; } #syslog { width: 100%; min-height: 20rem; padding: var(--fluent-space-md); border: 1px solid var(--fluent-border-hover); border-radius: var(--fluent-radius-lg); background: var(--fluent-black); color: var(--fluent-white); font-family: ui-monospace, Cascadia Code, SFMono-Regular, Consolas, monospace; font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-relaxed); box-sizing: border-box; } #syslog:focus { border-color: var(--fluent-border-active); outline: none; } #diag-rc-output > pre::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } #command-rc-output > pre::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } #diag-rc-output > pre::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } #command-rc-output > pre::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } #diag-rc-output > pre::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } #command-rc-output > pre::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } #diag-rc-output > pre::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } #command-rc-output > pre::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } #diag-rc-output > pre::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } #command-rc-output > pre::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } #diag-rc-output > pre::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } #command-rc-output > pre::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } #diag-rc-output > pre::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } #command-rc-output > pre::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } #diag-rc-output > pre::-webkit-scrollbar-corner { background: none; display: none; } #command-rc-output > pre::-webkit-scrollbar-corner { background: none; display: none; } #diag-rc-output > pre::-webkit-resizer { background: none; } #command-rc-output > pre::-webkit-resizer { background: none; } #diag-rc-output > pre, #command-rc-output > pre { padding: var(--fluent-space-lg); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-radius-lg); background: var(--fluent-black); color: var(--fluent-white); font-family: ui-monospace, Cascadia Code, SFMono-Regular, Consolas, monospace; font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-relaxed); white-space: pre-wrap; word-break: break-word; box-shadow: var(--fluent-shadow-sm); margin: 0; overflow: auto; } .ifacebox { background: var(--fluent-card-bg); border-radius: var(--fluent-card-radius); box-shadow: var(--fluent-card-shadow); padding: var(--fluent-card-padding); border: none; flex-direction: column; padding: 0; display: inline-flex; position: relative; overflow: visible; } .ifacebox > :first-child { border-start-start-radius: calc(var(--fluent-card-radius) - 1px); border-start-end-radius: calc(var(--fluent-card-radius) - 1px); } .ifacebox > :last-child { border-end-end-radius: calc(var(--fluent-card-radius) - 1px); border-end-start-radius: calc(var(--fluent-card-radius) - 1px); } .ifacebox:hover { z-index: 1; } .ifacebox > .ifacebox-body > img { margin: 0 auto var(--fluent-space-xs); object-fit: contain; width: 48px; height: 48px; display: block; } .ifacebox > .ifacebox-head.cbi-tooltip-container { background: none; border: none; min-height: 3px; padding: 2px 8px; position: relative; } .ifacebox > .ifacebox-head.cbi-tooltip-container > .zonebadge { box-shadow: none; border: none; border-radius: 9999px; height: 3px; min-height: 3px; padding: 0; } .ifacebox > .ifacebox-head.cbi-tooltip-container .cbi-tooltip { width: max-content; min-width: unset; max-width: min(18rem, 80vw); padding: var(--fluent-space-xs) var(--fluent-space-sm); white-space: nowrap; font-size: var(--fluent-font-size-xs); line-height: var(--fluent-line-height-normal); transform: translateX(-50%) translateY(var(--fluent-space-xs)); inset-inline: 50% auto; } .ifacebox > .ifacebox-head.cbi-tooltip-container .cbi-tooltip:before { inset-inline-start: 50%; transform: translateX(-50%) rotate(45deg); } .ifacebox > .ifacebox-head.cbi-tooltip-container .cbi-tooltip .ifacebadge { align-items: center; gap: var(--fluent-space-xs); min-height: unset; padding: 2px var(--fluent-space-xs); font-size: var(--fluent-font-size-xs); background: var(--fluent-bg-page); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-radius-sm); margin: 2px 0; display: inline-flex; } .ifacebox > .ifacebox-head.cbi-tooltip-container .cbi-tooltip .ifacebadge .zonebadge { min-height: unset; border-radius: var(--fluent-radius-circular); height: auto; padding: 0 4px; } .ifacebox > .ifacebox-head.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { opacity: 1; pointer-events: auto; display: block; transform: translateX(-50%) translateY(0); } @starting-style { .ifacebox > .ifacebox-head.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { opacity: 0; transform: translateX(-50%) translateY(var(--fluent-space-xs)); } } .ifacebox > .ifacebox-body { background: none; border-bottom: none; padding: 0; } .ifacebox > .ifacebox-body .cbi-tooltip { width: max-content; min-width: unset; max-width: min(20rem, 80vw); padding: var(--fluent-space-xs) var(--fluent-space-sm); font-size: var(--fluent-font-size-xs); white-space: nowrap; transform: translateX(-50%) translateY(var(--fluent-space-xs)); inset-inline: 50% auto; } .ifacebox > .ifacebox-body .cbi-tooltip:before { inset-inline-start: 50%; transform: translateX(-50%) rotate(45deg); } .ifacebox > .ifacebox-body .cbi-tooltip-container:hover .cbi-tooltip:not(:empty), .ifacebox > .ifacebox-body:hover .cbi-tooltip:not(:empty) { opacity: 1; pointer-events: auto; display: block; transform: translateX(-50%) translateY(0); } @starting-style { .ifacebox > .ifacebox-body .cbi-tooltip-container:hover .cbi-tooltip:not(:empty), .ifacebox > .ifacebox-body:hover .cbi-tooltip:not(:empty) { opacity: 0; transform: translateX(-50%) translateY(var(--fluent-space-xs)); } } .ifacebox .ifacebox { border-radius: var(--fluent-radius-md); width: 100%; box-shadow: none; border: 1px solid var(--fluent-card-border); background: var(--fluent-bg-page); margin: 0; display: flex; } .ifacebox .ifacebox .ifacebox-head { padding: var(--fluent-space-xs) var(--fluent-space-md); font-size: var(--fluent-font-size-sm); border-bottom: 1px solid var(--fluent-card-border); background: none; } .ifacebox .ifacebox .ifacebox-head.active { color: var(--fluent-primary); border-bottom-color: var(--fluent-card-border); border-inline-start: 3px solid var(--fluent-primary); background: none; } .ifacebox .ifacebox .ifacebox-body { padding: var(--fluent-space-xs) var(--fluent-space-md); font-size: var(--fluent-font-size-sm); } .ifacebox-head { justify-content: space-between; align-items: center; gap: var(--fluent-space-sm); padding: var(--fluent-space-xs) var(--fluent-space-sm); border-bottom: 1px solid var(--fluent-card-border); background: var(--fluent-bg-page); color: var(--fluent-text); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-normal); display: flex; } .ifacebox-head.center { text-align: center; justify-content: center; } .ifacebox-head.active { border-bottom-color: var(--fluent-card-border); background: var(--fluent-primary-lightest); color: var(--fluent-primary); } .ifacebox-head.active * { color: var(--fluent-primary) !important; } .ifacebox-body { gap: var(--fluent-space-xs); padding: var(--fluent-space-sm) var(--fluent-space-md); color: var(--fluent-text-secondary); text-align: start; } .ifacebox-body.left { text-align: start; align-items: flex-start; } .ifacebox-body.center { text-align: center; align-items: center; } td[data-name="_ifacebox"], .td[data-name="_ifacebox"] { vertical-align: middle; min-width: 180px; align-self: center !important; } td[data-name="_ifacebox"] .ifacebox, .td[data-name="_ifacebox"] .ifacebox { box-sizing: border-box; width: 100%; display: flex; } td[data-name="_ifacebox"] .ifacebox .ifacebox-head, .td[data-name="_ifacebox"] .ifacebox .ifacebox-head { text-align: center; border-bottom: 1px solid var(--fluent-card-border); padding: var(--fluent-space-xs) var(--fluent-space-sm); justify-content: center; background: none !important; } td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong, td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong, .td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong, .td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong { font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-normal); background-color: color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 18%, var(--fluent-bg-page)); border: 1px solid color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 35%, var(--fluent-card-border)); color: color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 80%, var(--fluent-text)); border-radius: 9999px; justify-content: center; align-items: center; gap: 6px; padding: 2px 12px; display: inline-flex; } td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong:before, td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong:before, .td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong:before, .td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong:before { content: ""; background-color: rgb(var(--zone-color-rgb, 238, 238, 238)); border-radius: 50%; flex-shrink: 0; width: 6px; height: 6px; display: inline-block; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body, .td[data-name="_ifacebox"] .ifacebox .ifacebox-body { text-align: center; box-sizing: border-box; width: 100%; padding: var(--fluent-space-xs) var(--fluent-space-sm) var(--fluent-space-sm); white-space: nowrap; display: block; overflow-x: auto; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-corner { background: none; display: none; } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-scrollbar-corner { background: none; display: none; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-resizer { background: none; } .td[data-name="_ifacebox"] .ifacebox .ifacebox-body::-webkit-resizer { background: none; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip-container, .td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip-container { vertical-align: middle; border-radius: var(--fluent-radius-sm); transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard); justify-content: center; align-items: center; padding: 2px 4px; display: inline-flex; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip-container:hover, .td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip-container:hover { background-color: var(--fluent-bg-hover); } td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip-container img, .td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip-container img { vertical-align: middle; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip, .td[data-name="_ifacebox"] .ifacebox .ifacebox-body .cbi-tooltip { display: none !important; } td[data-name="_ifacebox"] .ifacebox .ifacebox-body small, .td[data-name="_ifacebox"] .ifacebox .ifacebox-body small { margin-top: var(--fluent-space-xxs); white-space: normal; color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-xs); line-height: var(--fluent-line-height-tight); display: block; } [data-theme="dark"] td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong, [data-theme="dark"] td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong, [data-theme="dark"] .td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong, [data-theme="dark"] .td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong { background-color: color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 16%, transparent); border-color: color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 32%, transparent); color: color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 65%, var(--fluent-text)); } [data-theme="dark"] td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong:before, [data-theme="dark"] td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong:before, [data-theme="dark"] .td[data-name="_ifacebox"] .ifacebox .ifacebox-head > strong:before, [data-theme="dark"] .td[data-name="_ifacebox"] .ifacebox .ifacebox-head strong:before { background-color: color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 75%, var(--fluent-white)); box-shadow: 0 0 4px color-mix(in srgb, rgb(var(--zone-color-rgb, 238, 238, 238)) 40%, transparent); } div[style*="display:grid;grid-template-columns:repeat"] { align-items: stretch !important; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox { border-radius: var(--fluent-radius-md); flex-direction: column; height: auto; display: flex; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-head:first-child { text-align: center; font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); padding: 6px var(--fluent-space-xs); color: var(--fluent-text); border-bottom: 1px solid var(--fluent-card-border); background: none; justify-content: center; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-body { padding: var(--fluent-space-xs); text-align: center !important; align-items: center !important; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-body .cbi-tooltip-container { color: var(--fluent-text-secondary); font-size: 11px; line-height: 1.35; position: relative; text-align: center !important; justify-content: center !important; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-body .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { transform: translateX(-50%) translateY(0) !important; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-head.cbi-tooltip-container { background: none; border: none; margin: 2px 0; padding: 2px 8px; position: relative; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-head.cbi-tooltip-container .zonebadge { border-radius: 9999px; height: 3px; min-height: 3px; } div[style*="display:grid;grid-template-columns:repeat"] .ifacebox .ifacebox-head.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { transform: translateX(-50%) translateY(0) !important; } .network-status-table { gap: var(--fluent-space-md); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; display: grid; } .network-status-table .ifacebox { border-radius: var(--fluent-radius-md); flex-direction: column; width: 100%; margin: 0; display: flex; } .network-status-table .ifacebox .ifacebox-head { text-align: center; border-bottom: 1px solid var(--fluent-card-border); padding: var(--fluent-space-xs) var(--fluent-space-sm); background: none; justify-content: center; } .network-status-table .ifacebox .ifacebox-head > strong, .network-status-table .ifacebox .ifacebox-head strong { font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-normal); background-color: var(--fluent-bg-page); border: 1px solid var(--fluent-card-border); color: var(--fluent-text-secondary); border-radius: 9999px; justify-content: center; align-items: center; gap: 6px; padding: 2px 10px; display: inline-flex; } .network-status-table .ifacebox .ifacebox-head > strong:before, .network-status-table .ifacebox .ifacebox-head strong:before { content: ""; background-color: var(--fluent-text-disabled); border-radius: 50%; flex-shrink: 0; width: 6px; height: 6px; display: inline-block; } .network-status-table .ifacebox .ifacebox-head.active { background: none; } .network-status-table .ifacebox .ifacebox-head.active > strong, .network-status-table .ifacebox .ifacebox-head.active strong { background-color: color-mix(in srgb, var(--fluent-primary) 14%, var(--fluent-bg-page)); border-color: color-mix(in srgb, var(--fluent-primary) 35%, var(--fluent-card-border)); color: var(--fluent-primary); } .network-status-table .ifacebox .ifacebox-head.active > strong:before, .network-status-table .ifacebox .ifacebox-head.active strong:before { background-color: var(--fluent-primary); } .network-status-table .ifacebox .ifacebox-body { padding: var(--fluent-space-sm) var(--fluent-space-md); font-size: var(--fluent-font-size-sm); justify-content: space-between; gap: var(--fluent-space-sm); flex-direction: column; flex-grow: 1; display: flex; } .network-status-table .ifacebox .ifacebox-body > span { color: var(--fluent-text-secondary); word-break: break-all; flex-direction: column; gap: 2px; display: flex; } .network-status-table .ifacebox .ifacebox-body > span > br { display: none; } .network-status-table .ifacebox .ifacebox-body > span .nowrap { white-space: normal; word-break: break-word; display: inline-block; } .network-status-table .ifacebox .ifacebox-body > span .nowrap strong { color: var(--fluent-text); font-weight: var(--fluent-font-weight-semibold); margin-inline-end: var(--fluent-space-xxs); } .network-status-table .ifacebox .ifacebox-body > span .cbi-tooltip-container { cursor: help; vertical-align: middle; display: inline-flex; position: relative; } .network-status-table .ifacebox .ifacebox-body > div { gap: var(--fluent-space-xs); flex-direction: column; display: flex; } .network-status-table .ifacebox .ifacebox-body > div .ifacebadge { width: 100%; min-height: unset; padding: var(--fluent-space-xs) var(--fluent-space-sm); background: var(--fluent-bg-page); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-radius-sm); align-items: flex-start; display: flex; } .network-status-table .ifacebox .ifacebox-body > div .ifacebadge > img { margin-top: 2px; } .network-status-table .ifacebox .ifacebox-body > div .ifacebadge > span { white-space: normal; font-size: var(--fluent-font-size-xs); line-height: var(--fluent-line-height-normal); flex-direction: column; gap: 2px; display: flex; overflow: visible; } .network-status-table .ifacebox .ifacebox-body > div .ifacebadge > span > br { display: none; } .network-status-table .ifacebox .ifacebox-body > div .ifacebadge > span .nowrap { white-space: normal; word-break: break-word; } .network-status-table .ifacebox .ifacebox-body > div .ifacebadge > span .nowrap strong { color: var(--fluent-text); font-weight: var(--fluent-font-weight-semibold); } #fluent-global-tooltip, .cbi-tooltip.ifacebadge.large { align-items: flex-start; gap: var(--fluent-space-sm); min-width: 14rem; max-width: min(24rem, 90vw); padding: var(--fluent-space-sm) var(--fluent-space-md); background: var(--fluent-card-bg); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-radius-md); box-shadow: var(--fluent-shadow-md); color: var(--fluent-text); font-size: var(--fluent-font-size-xs); font-weight: var(--fluent-font-weight-normal); line-height: var(--fluent-line-height-normal); white-space: normal; opacity: 0; transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); flex-direction: row; overflow: visible; display: flex !important; transform: translateY(0) !important; } #fluent-global-tooltip:before, .cbi-tooltip.ifacebadge.large:before { background-color: var(--fluent-card-bg); border-inline-start: 1px solid var(--fluent-card-border); border-top: 1px solid var(--fluent-card-border); left: var(--arrow-left, 50%) !important; transform: translateX(-50%) rotate(45deg) !important; } #fluent-global-tooltip > img, .cbi-tooltip.ifacebadge.large > img { object-fit: contain; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; } #fluent-global-tooltip > .left, #fluent-global-tooltip > span, .cbi-tooltip.ifacebadge.large > .left, .cbi-tooltip.ifacebadge.large > span { white-space: normal; min-width: 0; color: var(--fluent-text-secondary); flex-direction: column; flex: auto; gap: 2px; display: flex; overflow: visible; } #fluent-global-tooltip > .left > br, #fluent-global-tooltip > span > br, .cbi-tooltip.ifacebadge.large > .left > br, .cbi-tooltip.ifacebadge.large > span > br { display: none; } #fluent-global-tooltip > .left .nowrap, #fluent-global-tooltip > span .nowrap, .cbi-tooltip.ifacebadge.large > .left .nowrap, .cbi-tooltip.ifacebadge.large > span .nowrap { white-space: normal; word-break: break-word; } #fluent-global-tooltip > .left .nowrap strong, #fluent-global-tooltip > span .nowrap strong, .cbi-tooltip.ifacebadge.large > .left .nowrap strong, .cbi-tooltip.ifacebadge.large > span .nowrap strong { color: var(--fluent-text); font-weight: var(--fluent-font-weight-semibold); } .cbi-input-invalid { border-color: var(--fluent-error); border-bottom-color: var(--fluent-error); box-shadow: inset 0 -1px 0 var(--fluent-error); } input[type="text"].cbi-input-invalid, input[type="password"].cbi-input-invalid { background: var(--fluent-input-bg); color: var(--fluent-text); } input[type="text"].cbi-input-invalid:focus, input[type="password"].cbi-input-invalid:focus { box-shadow: inset 0 -2px 0 var(--fluent-error),0 0 0 1px var(--fluent-error-light); outline: none; } select.cbi-input-invalid { background-color: var(--fluent-input-bg); color: var(--fluent-text); border-color: var(--fluent-error); border-bottom-color: var(--fluent-error); } .cbi-input-file { width: 100%; max-width: 100%; padding: var(--fluent-space-xs); color: var(--fluent-text); background: var(--fluent-input-bg); border: 1px solid var(--fluent-input-border); border-radius: var(--fluent-radius-md); box-sizing: border-box; border-bottom-width: 2px; } .cbi-input-file::file-selector-button { margin-right: var(--fluent-space-sm); } #cbi-upload { align-items: center; gap: var(--fluent-space-sm); padding: var(--fluent-space-md); background: var(--fluent-card-bg); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-card-radius); box-shadow: var(--fluent-card-shadow); flex-wrap: wrap; display: flex; } .fluent-bg-manager { gap: var(--fluent-space-md); padding: var(--fluent-space-lg); background: var(--fluent-bg-card); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-lg); box-shadow: var(--fluent-shadow-md); flex-direction: column; display: flex; } .fluent-bg-status, .fluent-bg-hint { margin: 0; } .fluent-bg-hint { color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); } .fluent-bg-actions { gap: var(--fluent-space-sm); flex-wrap: wrap; display: flex; } .fluent-bg-list { gap: var(--fluent-space-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); display: grid; } .fluent-bg-item { gap: var(--fluent-space-sm); min-width: 0; padding: var(--fluent-space-sm); background: var(--fluent-bg-page); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-lg); flex-direction: column; display: flex; } .fluent-bg-preview { aspect-ratio: 16 / 9; border-radius: var(--fluent-radius-md); background-color: var(--fluent-bg-hover); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; overflow: hidden; } .fluent-bg-preview-video { object-fit: cover; display: block; } .fluent-bg-meta { gap: var(--fluent-space-xxs); flex-direction: column; min-width: 0; display: flex; } .fluent-bg-name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .fluent-bg-size { color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); } .fluent-bg-item-actions { justify-content: flex-end; display: flex; } .fluent-bg-empty { gap: var(--fluent-space-xxs); padding: var(--fluent-space-xl); color: var(--fluent-text-secondary); background: var(--fluent-bg-page); border: 1px dashed var(--fluent-border); border-radius: var(--fluent-radius-lg); text-align: center; flex-direction: column; display: flex; } #cbi-upload.cbi-fileupload { padding: var(--fluent-space-lg); border-radius: var(--fluent-radius-lg); align-items: stretch; } #cbi-upload.cbi-fileupload > p { width: 100%; color: var(--fluent-text-secondary); margin: 0; } #cbi-upload.cbi-fileupload > .cbi-input-file { flex: 240px; min-width: 0; } #cbi-upload.cbi-fileupload > .btn, #cbi-upload.cbi-fileupload > .cbi-button { min-width: 120px; } .cbi-checkbox { align-items: center; gap: var(--fluent-space-sm); min-height: var(--fluent-checkbox-size); color: var(--fluent-text); display: inline-flex; } .cbi-image-button { gap: var(--fluent-space-xs); min-width: var(--fluent-btn-height); padding: 0 var(--fluent-space-sm); } .cbi-tab-descr { margin-top: var(--fluent-space-xs); color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); } div[depends], [data-depends] { min-width: 0; transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); } div[depends][hidden], div[depends][style*="display:none"], [data-depends][hidden], [data-depends][style*="display:none"] { opacity: 0; } div.tr[data-title] { gap: var(--fluent-space-xs); padding: var(--fluent-space-sm) 0; flex-direction: column; } div.tr[data-title]:before { content: attr(data-title); padding: 0 var(--fluent-space-lg); color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-normal); } div.td[data-title] { gap: var(--fluent-space-sm); grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); align-items: start; display: grid; } div.td[data-title]:before { content: attr(data-title); color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-normal); } div.td[data-type="button"] { justify-content: flex-start; align-items: center; gap: var(--fluent-space-xs); flex-wrap: wrap; display: flex; } div.td[data-type="button"]:before { width: 100%; } div.td[data-type="fvalue"] { gap: var(--fluent-space-xxs); color: var(--fluent-text-secondary); flex-direction: column; display: flex; } @media (min-width: 768px) { div.tr[data-title] { flex-direction: row; gap: 0; padding: 0; } div.tr[data-title]:before, div.td[data-title]:before { content: none; } div.td[data-title], div.td[data-type="button"], div.td[data-type="fvalue"] { display: block; } } ul.tabs, ul.cbi-tabmenu { box-sizing: border-box; align-items: center; gap: var(--fluent-space-sm, 8px); width: 100%; max-width: 100%; font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); line-height: var(--fluent-line-height-normal); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--fluent-scrollbar-thumb-horizontal-bg, var(--fluent-scrollbar-thumb-bg)) #0000; margin: 0; padding: 0; list-style: none; display: flex; position: relative; overflow: auto hidden; border-bottom: none !important; } ul.tabs::-webkit-scrollbar { height: 3px; } ul.cbi-tabmenu::-webkit-scrollbar { height: 3px; } ul.tabs::-webkit-scrollbar-track { background: none; } ul.cbi-tabmenu::-webkit-scrollbar-track { background: none; } ul.tabs::-webkit-scrollbar-thumb { background-color: var(--fluent-scrollbar-thumb-horizontal-bg, var(--fluent-scrollbar-thumb-bg)); border-radius: var(--fluent-radius-md); } ul.cbi-tabmenu::-webkit-scrollbar-thumb { background-color: var(--fluent-scrollbar-thumb-horizontal-bg, var(--fluent-scrollbar-thumb-bg)); border-radius: var(--fluent-radius-md); } ul.tabs::-webkit-scrollbar-thumb:hover { background-color: var(--fluent-scrollbar-thumb-horizontal-bg-hover, var(--fluent-scrollbar-thumb-bg-hover)); } ul.cbi-tabmenu::-webkit-scrollbar-thumb:hover { background-color: var(--fluent-scrollbar-thumb-horizontal-bg-hover, var(--fluent-scrollbar-thumb-bg-hover)); } ul.tabs .fluent-tab-slider, ul.cbi-tabmenu .fluent-tab-slider { height: var(--fluent-tab-indicator-height, 3px); background-color: var(--fluent-primary); border-radius: calc(var(--fluent-tab-indicator-height, 3px)/2); transition: inset-inline-start var(--fluent-duration-normal) var(--fluent-easing-standard),width var(--fluent-duration-normal) var(--fluent-easing-standard),transform var(--fluent-duration-normal) var(--fluent-easing-standard); transform-origin: center; pointer-events: none; z-index: 1; position: absolute; bottom: 0; } body[data-tab-animation="0"] ul.tabs .fluent-tab-slider, body[data-tab-animation="0"] ul.cbi-tabmenu .fluent-tab-slider, body[data-reduce-motion="true"] ul.tabs .fluent-tab-slider, body[data-reduce-motion="true"] ul.cbi-tabmenu .fluent-tab-slider { transition: none !important; } ul.tabs > li, ul.cbi-tabmenu > li { box-sizing: border-box; flex-shrink: 0; align-items: center; margin: 0; padding: 0; list-style: none; display: flex; position: relative; } ul.tabs > li > a, ul.cbi-tabmenu > li > a { box-sizing: border-box; min-height: var(--fluent-tab-height, 44px); padding: var(--fluent-space-xs, 4px) var(--fluent-space-lg, 16px); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); line-height: var(--fluent-line-height-normal); color: var(--fluent-text-secondary); cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; transition: color var(--fluent-duration-fast) var(--fluent-easing-standard),font-weight var(--fluent-duration-fast) var(--fluent-easing-standard); border: none; justify-content: center; align-items: center; text-decoration: none; display: flex; position: relative; background-color: #0000 !important; } ul.tabs > li > a:after, ul.cbi-tabmenu > li > a:after { content: ""; inset-inline-start: var(--fluent-space-lg, 16px); inset-inline-end: var(--fluent-space-lg, 16px); height: var(--fluent-tab-indicator-height, 3px); border-radius: calc(var(--fluent-tab-indicator-height, 3px)/2); transform-origin: center; transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard),background-color var(--fluent-duration-fast) var(--fluent-easing-standard); background-color: #0000; position: absolute; bottom: 0; transform: scaleX(0); } ul.tabs > li > a:hover, ul.cbi-tabmenu > li > a:hover { color: var(--fluent-text); background-color: #0000 !important; } ul.tabs > li > a:hover:after, ul.cbi-tabmenu > li > a:hover:after { background-color: var(--fluent-border-hover); transform: scaleX(1); } ul.tabs > li > a:focus-visible, ul.cbi-tabmenu > li > a:focus-visible { outline: 2px solid var(--fluent-focus-color); outline-offset: -2px; } ul.tabs > li.cbi-tab > a, ul.tabs > li.active > a, ul.cbi-tabmenu > li.cbi-tab > a, ul.cbi-tabmenu > li.active > a { color: var(--fluent-text); font-weight: var(--fluent-font-weight-semibold); background-color: #0000 !important; } ul.tabs > li.cbi-tab > a:after, ul.tabs > li.active > a:after, ul.cbi-tabmenu > li.cbi-tab > a:after, ul.cbi-tabmenu > li.active > a:after { background-color: var(--fluent-primary); transform: scaleX(1); } ul.tabs > li.cbi-tab > a:hover, ul.tabs > li.active > a:hover, ul.cbi-tabmenu > li.cbi-tab > a:hover, ul.cbi-tabmenu > li.active > a:hover { color: var(--fluent-text); background-color: #0000 !important; } ul.tabs > li.cbi-tab > a:hover:after, ul.tabs > li.active > a:hover:after, ul.cbi-tabmenu > li.cbi-tab > a:hover:after, ul.cbi-tabmenu > li.active > a:hover:after { background-color: var(--fluent-primary); transform: scaleX(1); } ul.tabs > li.cbi-tab-disabled > a, ul.cbi-tabmenu > li.cbi-tab-disabled > a { color: var(--fluent-text-secondary); cursor: pointer; } ul.tabs > li.cbi-tab-disabled > a:hover, ul.cbi-tabmenu > li.cbi-tab-disabled > a:hover { color: var(--fluent-text); background-color: #0000 !important; } ul.tabs > li.disabled > a, ul.tabs > li[disabled] > a, ul.cbi-tabmenu > li.disabled > a, ul.cbi-tabmenu > li[disabled] > a { color: var(--fluent-text-disabled); cursor: not-allowed; pointer-events: none; } ul.tabs > li.disabled > a:after, ul.tabs > li[disabled] > a:after, ul.cbi-tabmenu > li.disabled > a:after, ul.cbi-tabmenu > li[disabled] > a:after { display: none !important; } ul.tabs:has( > .fluent-tab-slider) > li.cbi-tab > a:after { display: none; } ul.tabs:has( > .fluent-tab-slider) > li.active > a:after { display: none; } ul.cbi-tabmenu:has( > .fluent-tab-slider) > li.cbi-tab > a:after { display: none; } ul.cbi-tabmenu:has( > .fluent-tab-slider) > li.active > a:after { display: none; } .cbi-section > .cbi-tabmenu + .cbi-section-node { padding-top: 0; } #tabmenu, .tabmenu { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 0; } [data-initialized="true"] > [data-tab][data-tab-title][data-tab-title] { padding-inline-start: var(--fluent-space-sm); } [data-initialized="true"] > [data-tab][data-tab-title][data-tab-active="true"] { opacity: 1; height: auto; padding-top: var(--fluent-space-lg); display: block; overflow: visible; } [data-initialized="true"] > [data-tab][data-tab-title]:not([data-tab-active="true"]) { display: none !important; } [data-initialized="true"] > [data-tab][data-tab-title][data-tab-active="true"]:has(.cbi-section-node[data-initialized="true"] > [data-tab][data-tab-title][data-tab-active="true"]) { padding-top: 0; } .cbi-tabcontainer { padding: var(--fluent-space-lg) 0; } input[type="checkbox"] { appearance: none !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-bg) !important; cursor: pointer !important; vertical-align: middle !important; margin: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; border-radius: 10px !important; outline: none !important; flex-shrink: 0 !important; width: 40px !important; min-width: 40px !important; height: 20px !important; min-height: 20px !important; margin-inline-end: 0 !important; padding: 0 !important; transition: background-color .1s cubic-bezier(.33, 0, .67, 1), border-color .1s cubic-bezier(.33, 0, .67, 1) !important; position: relative !important; } input[type="checkbox"]:before { content: "" !important; top: 3px !important; background-color: var(--fluent-text-secondary) !important; box-sizing: border-box !important; background-image: none !important; border-radius: 50% !important; width: 12px !important; min-width: 12px !important; height: 12px !important; min-height: 12px !important; transition: transform .1s cubic-bezier(.33, 0, .67, 1), background-color .1s cubic-bezier(.33, 0, .67, 1) !important; display: block !important; position: absolute !important; inset-inline-start: 3px !important; box-shadow: 0 0 2px #0000003d, 0 1px 2px #00000047 !important; } input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; } input[type="checkbox"]:checked:before { transform: translateX(20px) !important; } html[dir="rtl"] input[type="checkbox"]:checked:before, body[data-fluent-dir="rtl"] input[type="checkbox"]:checked:before { transform: scaleX(-1) translateX(20px) !important; } input[type="checkbox"]:checked:before { background-color: var(--fluent-white) !important; background-image: none !important; } input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-text) !important; background-image: none !important; } input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: none !important; } input[type="checkbox"]:focus, input[type="checkbox"]:focus-visible { outline: 2px solid var(--fluent-focus-color) !important; outline-offset: 2px !important; outline-style: solid !important; } input[type="checkbox"]:active:not(:disabled):before { background-image: none !important; width: 14px !important; } input[type="checkbox"]:checked:active:not(:disabled):before { transform: translateX(18px) !important; } html[dir="rtl"] input[type="checkbox"]:checked:active:not(:disabled):before, body[data-fluent-dir="rtl"] input[type="checkbox"]:checked:active:not(:disabled):before { transform: scaleX(-1) translateX(18px) !important; } input[type="checkbox"]:checked:active:not(:disabled):before { background-image: none !important; width: 14px !important; } input[type="checkbox"]:disabled { cursor: not-allowed !important; background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; background-image: none !important; } input[type="checkbox"]:disabled:before { background-color: var(--fluent-border-hover) !important; background-image: none !important; } input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: none !important; } input[type="checkbox"]:disabled:checked:before { background-color: var(--fluent-bg-hover) !important; background-image: none !important; transform: translateX(20px) !important; } html[dir="rtl"] input[type="checkbox"]:disabled:checked:before, body[data-fluent-dir="rtl"] input[type="checkbox"]:disabled:checked:before { transform: scaleX(-1) translateX(20px) !important; } .table input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } .table input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } .table input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } .table input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } .table input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } .table input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } .table input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } .table input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } .cbi-section-table input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } .cbi-section-table input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } .cbi-section-table input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } .cbi-section-table input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } .cbi-section-table input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } .cbi-section-table input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } .cbi-section-table input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } .cbi-section-table input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } .cbi-dropdown input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } .cbi-dropdown input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } .cbi-dropdown input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } .cbi-dropdown input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } .cbi-dropdown input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } .cbi-dropdown input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } .cbi-dropdown input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } .cbi-dropdown input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } td input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } td input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } td input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } td input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } td input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } td input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } td input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } td input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } th input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } th input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } th input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } th input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } th input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } th input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } th input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } th input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } .tr .td input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } .tr .td input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } .tr .td input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } .tr .td input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } .tr .td input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } .tr .td input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } .tr .td input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } .tr .td input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } .tr .th input[type="checkbox"] { border-radius: var(--fluent-radius-md) !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; margin: 0 auto !important; margin-inline-end: 3px !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; background-position: center !important; background-repeat: no-repeat !important; background-size: auto !important; border-style: solid !important; border-width: 1px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin-bottom: 0 !important; } .tr .th input[type="checkbox"]:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; } .tr .th input[type="checkbox"]:checked { background-color: var(--fluent-primary) !important; border-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } .tr .th input[type="checkbox"]:checked:before { content: none !important; width: 0 !important; height: 0 !important; display: none !important; transform: none !important; } .tr .th input[type="checkbox"]:hover:not(:disabled) { background-color: var(--fluent-bg-hover) !important; border-color: var(--fluent-checkbox-hover-border) !important; background-image: none !important; } .tr .th input[type="checkbox"]:hover:not(:disabled):checked { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } .tr .th input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; opacity: .6 !important; cursor: not-allowed !important; background-image: none !important; } .tr .th input[type="checkbox"]:disabled:checked { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iIzZiNmI2YiIgZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=) !important; } label:has(input[type="radio"]) { color: var(--fluent-text-secondary); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); line-height: var(--fluent-line-height-normal); transition: color var(--fluent-duration-fast) var(--fluent-easing-standard); -webkit-user-select: none; user-select: none; align-items: center !important; gap: var(--fluent-space-sm) !important; cursor: pointer !important; display: inline-flex !important; } label:has(input[type="radio"]):has(input[type="radio"]:checked) { color: var(--fluent-text) !important; } label:has(input[type="radio"]):hover:not(:has(input[type="radio"]:disabled)) { color: var(--fluent-text); } label:has(input[type="radio"]):hover:not(:has(input[type="radio"]:disabled)) input[type="radio"] { border-color: var(--fluent-checkbox-hover-border); } label:has(input[type="radio"]):hover:not(:has(input[type="radio"]:disabled)) input[type="radio"]:checked { border-color: var(--fluent-primary-hover); } label:has(input[type="radio"]):hover:not(:has(input[type="radio"]:disabled)) input[type="radio"]:checked:before { background: var(--fluent-primary-hover); transform: translate(-50%, -50%) scale(1.1); } input[type="radio"] { appearance: none; border: 1.5px solid var(--fluent-checkbox-border); border-radius: var(--fluent-radius-round); background: var(--fluent-checkbox-bg); cursor: pointer; transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard); flex-shrink: 0; position: relative; width: 16px !important; height: 16px !important; block-size: 16px !important; inline-size: 16px !important; } input[type="radio"]:before { content: ""; background: var(--fluent-checkbox-checked-bg); border-radius: var(--fluent-radius-round); width: 8px; height: 8px; transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard),background-color var(--fluent-duration-fast) var(--fluent-easing-standard); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } input[type="radio"]:checked { border-color: var(--fluent-checkbox-checked-bg); } input[type="radio"]:checked:before { transform: translate(-50%, -50%) scale(1); } input[type="radio"]:hover { border-color: var(--fluent-checkbox-hover-border); } input[type="radio"]:hover:checked { border-color: var(--fluent-primary-hover); } input[type="radio"]:hover:checked:before { background: var(--fluent-primary-hover); } input[type="radio"]:focus-visible { outline: 2px solid var(--fluent-focus-color); outline-offset: 2px; } input[type="radio"]:disabled { opacity: .4; cursor: not-allowed; } html::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } html::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } html::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } html::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } html::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } html::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } html::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } html::-webkit-scrollbar-corner { background: none; display: none; } html::-webkit-resizer { background: none; } .cbi-section::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .cbi-section-node::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .table-wrapper::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .modal::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .main-content::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .sidebar::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } pre::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } code::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .cbi-section::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .cbi-section-node::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .table-wrapper::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .modal::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .main-content::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .sidebar::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } pre::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } code::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .cbi-section::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .cbi-section-node::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .table-wrapper::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .modal::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .main-content::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .sidebar::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } pre::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } code::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .cbi-section::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .cbi-section-node::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .table-wrapper::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .modal::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .main-content::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .sidebar::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } pre::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } code::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .cbi-section::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .cbi-section-node::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .modal::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .main-content::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .sidebar::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } pre::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } code::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .cbi-section::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .cbi-section-node::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .table-wrapper::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .modal::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .main-content::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .sidebar::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } pre::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } code::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .cbi-section::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .cbi-section-node::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .table-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .modal::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .main-content::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .sidebar::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } pre::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } code::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .cbi-section::-webkit-scrollbar-corner { background: none; display: none; } .cbi-section-node::-webkit-scrollbar-corner { background: none; display: none; } .table-wrapper::-webkit-scrollbar-corner { background: none; display: none; } .modal::-webkit-scrollbar-corner { background: none; display: none; } .main-content::-webkit-scrollbar-corner { background: none; display: none; } .sidebar::-webkit-scrollbar-corner { background: none; display: none; } pre::-webkit-scrollbar-corner { background: none; display: none; } code::-webkit-scrollbar-corner { background: none; display: none; } .cbi-section::-webkit-resizer { background: none; } .cbi-section-node::-webkit-resizer { background: none; } .table-wrapper::-webkit-resizer { background: none; } .modal::-webkit-resizer { background: none; } .main-content::-webkit-resizer { background: none; } .sidebar::-webkit-resizer { background: none; } pre::-webkit-resizer { background: none; } code::-webkit-resizer { background: none; } .cbi-dropdown ul.dropdown::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .fluent-custom-select ul.dropdown::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .cbi-dropdown ul.dropdown::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .fluent-custom-select ul.dropdown::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .cbi-dropdown ul.dropdown::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .fluent-custom-select ul.dropdown::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .cbi-dropdown ul.dropdown::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .fluent-custom-select ul.dropdown::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .cbi-dropdown ul.dropdown::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .fluent-custom-select ul.dropdown::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .cbi-dropdown ul.dropdown::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .fluent-custom-select ul.dropdown::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .cbi-dropdown ul.dropdown::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .fluent-custom-select ul.dropdown::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .cbi-dropdown ul.dropdown::-webkit-scrollbar-corner { background: none; display: none; } .fluent-custom-select ul.dropdown::-webkit-scrollbar-corner { background: none; display: none; } .cbi-dropdown ul.dropdown::-webkit-resizer { background: none; } .fluent-custom-select ul.dropdown::-webkit-resizer { background: none; } * { scrollbar-width: thin; scrollbar-color: var(--fluent-scrollbar-thumb-bg) var(--fluent-scrollbar-track-bg); } .sidebar::-webkit-scrollbar { width: 4px; height: 4px; } .cbi-section-node::-webkit-scrollbar { width: 4px; height: 4px; } .table-wrapper::-webkit-scrollbar { width: 4px; height: 4px; } .cbi-progressbar { box-sizing: border-box; isolation: isolate; width: 100%; height: 24px; position: relative; box-shadow: none !important; background: none !important; border: none !important; } .cbi-progressbar:before { content: ""; width: 100%; height: var(--fluent-progress-height, 4px); background: var(--fluent-progress-bg); border-radius: var(--fluent-radius-circular, 10000px); position: absolute; bottom: 0; left: 0; } .cbi-progressbar > div { height: var(--fluent-progress-height, 4px); background: var(--fluent-progress-bar-bg); border-radius: var(--fluent-radius-circular, 10000px); transition: width var(--fluent-duration-normal) var(--fluent-easing-decelerate); position: absolute; bottom: 0; left: 0; overflow: hidden; } html[dir="rtl"] .cbi-progressbar > div, body[data-fluent-dir="rtl"] .cbi-progressbar > div { left: auto; right: 0; } .cbi-progressbar:after { content: attr(title); color: var(--fluent-progressbar-font-color); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-sm, 12px); font-weight: var(--fluent-font-weight-regular, 400); line-height: var(--fluent-line-height-normal, 1.43); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; position: absolute; top: 0; left: 0; right: 0; overflow: hidden; } html[dir="rtl"] .cbi-progressbar:after, body[data-fluent-dir="rtl"] .cbi-progressbar:after { text-align: right; direction: ltr; } body[data-progressbar-text="bottom-start"] .cbi-progressbar:before, body[data-progressbar-text="bottom-end"] .cbi-progressbar:before, body[data-progressbar-text="bottom-start"] .cbi-progressbar > div, body[data-progressbar-text="bottom-end"] .cbi-progressbar > div { top: 0; bottom: auto; } body[data-progressbar-text="bottom-start"] .cbi-progressbar:after, body[data-progressbar-text="bottom-end"] .cbi-progressbar:after { top: 8px; } body[data-progressbar-text="top-end"] .cbi-progressbar:after, body[data-progressbar-text="bottom-end"] .cbi-progressbar:after { text-align: end; } html[dir="rtl"] body[data-progressbar-text="top-end"] .cbi-progressbar:after, body[data-fluent-dir="rtl"] body[data-progressbar-text="top-end"] .cbi-progressbar:after, html[dir="rtl"] body[data-progressbar-text="bottom-end"] .cbi-progressbar:after, body[data-fluent-dir="rtl"] body[data-progressbar-text="bottom-end"] .cbi-progressbar:after { text-align: left; direction: ltr; } @keyframes progressShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .cbi-progressbar-success > div { background: var(--fluent-success); } .cbi-progressbar-warning > div { background: var(--fluent-warning); } .cbi-progressbar-error > div { background: var(--fluent-error); } @keyframes fluent-dropdown-slide-in { from { opacity: 0; transform: translateY(-8px) scaleY(.95); } to { opacity: 1; transform: translateY(0) scaleY(1); } } @keyframes fluent-dropdown-slide-in-up { from { opacity: 0; transform: translateY(8px) scaleY(.95); } to { opacity: 1; transform: translateY(0) scaleY(1); } } cbi-dropdown, .cbi-dropdown, .fluent-custom-select { box-sizing: border-box; vertical-align: middle; justify-content: space-between; align-items: center; display: inline-flex; position: relative; } html[dir="rtl"] cbi-dropdown, body[data-fluent-dir="rtl"] cbi-dropdown, html[dir="rtl"] .cbi-dropdown, body[data-fluent-dir="rtl"] .cbi-dropdown, html[dir="rtl"] .fluent-custom-select, body[data-fluent-dir="rtl"] .fluent-custom-select { direction: rtl; } cbi-dropdown, .cbi-dropdown, .fluent-custom-select { padding: 0 var(--fluent-space-xs); gap: var(--fluent-space-xxs); cursor: pointer; outline-style: none; min-width: 120px; line-height: 20px; position: relative; } cbi-dropdown:hover:not([disabled]):not(:focus):not(:focus-within):not(.focus):not([open]), .cbi-dropdown:hover:not([disabled]):not(:focus):not(:focus-within):not(.focus):not([open]), .fluent-custom-select:hover:not([disabled]):not(:focus):not(:focus-within):not(.focus):not([open]) { border-color: var(--fluent-input-border-hover); border-bottom-color: var(--fluent-input-border-bottom-hover); } cbi-dropdown:focus, cbi-dropdown:focus-within, cbi-dropdown.focus, cbi-dropdown[open], .cbi-dropdown:focus, .cbi-dropdown:focus-within, .cbi-dropdown.focus, .cbi-dropdown[open], .fluent-custom-select:focus, .fluent-custom-select:focus-within, .fluent-custom-select.focus, .fluent-custom-select[open] { border-bottom-color: var(--fluent-input-border-bottom-focus); outline: none; } cbi-dropdown:focus:after, cbi-dropdown:focus-within:after, cbi-dropdown.focus:after, cbi-dropdown[open]:after, .cbi-dropdown:focus:after, .cbi-dropdown:focus-within:after, .cbi-dropdown.focus:after, .cbi-dropdown[open]:after, .fluent-custom-select:focus:after, .fluent-custom-select:focus-within:after, .fluent-custom-select.focus:after, .fluent-custom-select[open]:after { transform: scaleX(1); } cbi-dropdown:after, .cbi-dropdown:after, .fluent-custom-select:after { box-sizing: border-box; content: ""; inset-inline-start: 1px; bottom: -1px; background: var(--fluent-input-border-bottom-focus); height: 2px; transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard); pointer-events: none; border-end-end-radius: var(--fluent-radius-sm); border-end-start-radius: var(--fluent-radius-sm); position: absolute; inset-inline-end: 1px; transform: scaleX(0); } cbi-dropdown[open], .cbi-dropdown[open], .fluent-custom-select[open] { z-index: var(--fluent-zindex-dropdown); anchor-name: --fluent-cbi-dropdown-active !important; } cbi-dropdown[disabled], .cbi-dropdown[disabled], .fluent-custom-select[disabled] { cursor: not-allowed; background: var(--fluent-input-bg-disabled); border-color: var(--fluent-border); border-bottom-color: var(--fluent-border); color: var(--fluent-text-disabled); opacity: 1; } cbi-dropdown[disabled]:after, .cbi-dropdown[disabled]:after, .fluent-custom-select[disabled]:after { content: none; } cbi-dropdown > div, cbi-dropdown > div[tabindex="0"], .cbi-dropdown > div, .cbi-dropdown > div[tabindex="0"], .fluent-custom-select > div, .fluent-custom-select > div[tabindex="0"] { pointer-events: none !important; width: 0 !important; height: 0 !important; position: absolute !important; overflow: hidden !important; } cbi-dropdown > ul.preview, cbi-dropdown > ul:not(.dropdown), .cbi-dropdown > ul.preview, .cbi-dropdown > ul:not(.dropdown), .fluent-custom-select > ul.preview, .fluent-custom-select > ul:not(.dropdown) { text-overflow: ellipsis; white-space: nowrap; align-items: center; gap: var(--fluent-space-xxs); pointer-events: none; height: 100%; min-height: unset; flex-wrap: nowrap; flex: 1; margin: 0; padding-block: 0; padding-inline: 3.5px 0; list-style: none; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { text-overflow: ellipsis; white-space: nowrap; align-items: center; gap: var(--fluent-space-xxs); pointer-events: none; height: 100%; min-height: unset; flex-wrap: nowrap; flex: 1; margin: 0; padding-block: 0; padding-inline: 3.5px 0; list-style: none; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { text-overflow: ellipsis; white-space: nowrap; align-items: center; gap: var(--fluent-space-xxs); pointer-events: none; height: 100%; min-height: unset; flex-wrap: nowrap; flex: 1; margin: 0; padding-block: 0; padding-inline: 3.5px 0; list-style: none; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { text-overflow: ellipsis; white-space: nowrap; align-items: center; gap: var(--fluent-space-xxs); pointer-events: none; height: 100%; min-height: unset; flex-wrap: nowrap; flex: 1; margin: 0; padding-block: 0; padding-inline: 3.5px 0; list-style: none; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), #0000 100%); } html[dir="rtl"] cbi-dropdown > ul.preview, body[data-fluent-dir="rtl"] cbi-dropdown > ul.preview, html[dir="rtl"] cbi-dropdown > ul:not(.dropdown), body[data-fluent-dir="rtl"] cbi-dropdown > ul:not(.dropdown), html[dir="rtl"] .cbi-dropdown > ul.preview, body[data-fluent-dir="rtl"] .cbi-dropdown > ul.preview, html[dir="rtl"] .cbi-dropdown > ul:not(.dropdown), body[data-fluent-dir="rtl"] .cbi-dropdown > ul:not(.dropdown), html[dir="rtl"] .fluent-custom-select > ul.preview, body[data-fluent-dir="rtl"] .fluent-custom-select > ul.preview, html[dir="rtl"] .fluent-custom-select > ul:not(.dropdown), body[data-fluent-dir="rtl"] .fluent-custom-select > ul:not(.dropdown) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } html[dir="rtl"] cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } body[data-fluent-dir="rtl"] cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } html[dir="rtl"] .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } body[data-fluent-dir="rtl"] .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } html[dir="rtl"] .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } body[data-fluent-dir="rtl"] .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); mask-image: linear-gradient(to left, #000 calc(100% - 24px), #0000 100%); } cbi-dropdown > ul.preview > li, cbi-dropdown > ul:not(.dropdown) > li, .cbi-dropdown > ul.preview > li, .cbi-dropdown > ul:not(.dropdown) > li, .fluent-custom-select > ul.preview > li, .fluent-custom-select > ul:not(.dropdown) > li { text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; flex-shrink: 0; margin: 0; line-height: 20px; display: none; overflow: hidden; padding: 0 !important; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; flex-shrink: 0; margin: 0; line-height: 20px; display: none; overflow: hidden; padding: 0 !important; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; flex-shrink: 0; margin: 0; line-height: 20px; display: none; overflow: hidden; padding: 0 !important; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; flex-shrink: 0; margin: 0; line-height: 20px; display: none; overflow: hidden; padding: 0 !important; } cbi-dropdown > ul.preview > li form, cbi-dropdown > ul.preview > li input[type="checkbox"], cbi-dropdown > ul:not(.dropdown) > li form, cbi-dropdown > ul:not(.dropdown) > li input[type="checkbox"], .cbi-dropdown > ul.preview > li form, .cbi-dropdown > ul.preview > li input[type="checkbox"], .cbi-dropdown > ul:not(.dropdown) > li form, .cbi-dropdown > ul:not(.dropdown) > li input[type="checkbox"], .fluent-custom-select > ul.preview > li form, .fluent-custom-select > ul.preview > li input[type="checkbox"], .fluent-custom-select > ul:not(.dropdown) > li form, .fluent-custom-select > ul:not(.dropdown) > li input[type="checkbox"] { display: none !important; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li form { display: none !important; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li input[type="checkbox"] { display: none !important; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li form { display: none !important; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li input[type="checkbox"] { display: none !important; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li form { display: none !important; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li input[type="checkbox"] { display: none !important; } cbi-dropdown > ul.preview > li, cbi-dropdown > ul:not(.dropdown) > li, .cbi-dropdown > ul.preview > li, .cbi-dropdown > ul:not(.dropdown) > li, .fluent-custom-select > ul.preview > li, .fluent-custom-select > ul:not(.dropdown) > li { border-inline-start: none !important; padding-inline-start: 0 !important; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { border-inline-start: none !important; padding-inline-start: 0 !important; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { border-inline-start: none !important; padding-inline-start: 0 !important; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { border-inline-start: none !important; padding-inline-start: 0 !important; } cbi-dropdown > ul.preview > li:before, cbi-dropdown > ul:not(.dropdown) > li:before, .cbi-dropdown > ul.preview > li:before, .cbi-dropdown > ul:not(.dropdown) > li:before, .fluent-custom-select > ul.preview > li:before, .fluent-custom-select > ul:not(.dropdown) > li:before { background-color: #0000 !important; -webkit-mask-image: none !important; mask-image: none !important; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li:before { background-color: #0000 !important; -webkit-mask-image: none !important; mask-image: none !important; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li:before { background-color: #0000 !important; -webkit-mask-image: none !important; mask-image: none !important; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li:before { background-color: #0000 !important; -webkit-mask-image: none !important; mask-image: none !important; } cbi-dropdown > ul.preview > li[display], cbi-dropdown > ul.preview > li[selected], cbi-dropdown > ul:not(.dropdown) > li[display], cbi-dropdown > ul:not(.dropdown) > li[selected], .cbi-dropdown > ul.preview > li[display], .cbi-dropdown > ul.preview > li[selected], .cbi-dropdown > ul:not(.dropdown) > li[display], .cbi-dropdown > ul:not(.dropdown) > li[selected], .fluent-custom-select > ul.preview > li[display], .fluent-custom-select > ul.preview > li[selected], .fluent-custom-select > ul:not(.dropdown) > li[display], .fluent-custom-select > ul:not(.dropdown) > li[selected] { align-items: center; display: inline-flex; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] { align-items: center; display: inline-flex; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[selected] { align-items: center; display: inline-flex; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] { align-items: center; display: inline-flex; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[selected] { align-items: center; display: inline-flex; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] { align-items: center; display: inline-flex; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[selected] { align-items: center; display: inline-flex; } cbi-dropdown > ul.preview > li[display] ~ li[selected]:before, cbi-dropdown > ul:not(.dropdown) > li[display] ~ li[selected]:before, .cbi-dropdown > ul.preview > li[display] ~ li[selected]:before, .cbi-dropdown > ul:not(.dropdown) > li[display] ~ li[selected]:before, .fluent-custom-select > ul.preview > li[display] ~ li[selected]:before, .fluent-custom-select > ul:not(.dropdown) > li[display] ~ li[selected]:before { content: ", "; color: var(--fluent-text-secondary); margin-inline-end: 2px; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] ~ li[selected]:before { content: ", "; color: var(--fluent-text-secondary); margin-inline-end: 2px; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] ~ li[selected]:before { content: ", "; color: var(--fluent-text-secondary); margin-inline-end: 2px; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] ~ li[selected]:before { content: ", "; color: var(--fluent-text-secondary); margin-inline-end: 2px; } cbi-dropdown > ul.preview > li[placeholder], cbi-dropdown > ul:not(.dropdown) > li[placeholder], .cbi-dropdown > ul.preview > li[placeholder], .cbi-dropdown > ul:not(.dropdown) > li[placeholder], .fluent-custom-select > ul.preview > li[placeholder], .fluent-custom-select > ul:not(.dropdown) > li[placeholder] { color: var(--fluent-text-disabled); } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[placeholder] { color: var(--fluent-text-disabled); } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[placeholder] { color: var(--fluent-text-disabled); } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[placeholder] { color: var(--fluent-text-disabled); } cbi-dropdown > ul.preview:not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } cbi-dropdown > ul:not(.dropdown):not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } .cbi-dropdown > ul.preview:not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } .cbi-dropdown > ul:not(.dropdown):not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } .fluent-custom-select > ul.preview:not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } .fluent-custom-select > ul:not(.dropdown):not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:not(:has(li[selected])):not(:has(li[display])) > li[placeholder] { color: var(--fluent-text-disabled); display: inline; } cbi-dropdown > ul.preview > li[placeholder]:only-of-type, cbi-dropdown > ul:not(.dropdown) > li[placeholder]:only-of-type, .cbi-dropdown > ul.preview > li[placeholder]:only-of-type, .cbi-dropdown > ul:not(.dropdown) > li[placeholder]:only-of-type, .fluent-custom-select > ul.preview > li[placeholder]:only-of-type, .fluent-custom-select > ul:not(.dropdown) > li[placeholder]:only-of-type { color: var(--fluent-text-disabled); align-items: center; display: inline-flex; } cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[placeholder]:only-of-type { color: var(--fluent-text-disabled); align-items: center; display: inline-flex; } .cbi-dropdown:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[placeholder]:only-of-type { color: var(--fluent-text-disabled); align-items: center; display: inline-flex; } .fluent-custom-select:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[placeholder]:only-of-type { color: var(--fluent-text-disabled); align-items: center; display: inline-flex; } cbi-dropdown:has(ul.preview > li[selected]:not([placeholder])) > ul.preview > li[placeholder] { display: none; } cbi-dropdown:has(ul.preview > li[display]:not([placeholder])) > ul.preview > li[placeholder] { display: none; } cbi-dropdown:has(ul:not(.dropdown) > li[selected]:not([placeholder])) > ul:not(.dropdown) > li[placeholder] { display: none; } cbi-dropdown:has(ul:not(.dropdown) > li[display]:not([placeholder])) > ul:not(.dropdown) > li[placeholder] { display: none; } .cbi-dropdown:has(ul.preview > li[selected]:not([placeholder])) > ul.preview > li[placeholder] { display: none; } .cbi-dropdown:has(ul.preview > li[display]:not([placeholder])) > ul.preview > li[placeholder] { display: none; } .cbi-dropdown:has(ul:not(.dropdown) > li[selected]:not([placeholder])) > ul:not(.dropdown) > li[placeholder] { display: none; } .cbi-dropdown:has(ul:not(.dropdown) > li[display]:not([placeholder])) > ul:not(.dropdown) > li[placeholder] { display: none; } .fluent-custom-select:has(ul.preview > li[selected]:not([placeholder])) > ul.preview > li[placeholder] { display: none; } .fluent-custom-select:has(ul.preview > li[display]:not([placeholder])) > ul.preview > li[placeholder] { display: none; } .fluent-custom-select:has(ul:not(.dropdown) > li[selected]:not([placeholder])) > ul:not(.dropdown) > li[placeholder] { display: none; } .fluent-custom-select:has(ul:not(.dropdown) > li[display]:not([placeholder])) > ul:not(.dropdown) > li[placeholder] { display: none; } cbi-dropdown > span.open, .cbi-dropdown > span.open, .fluent-custom-select > span.open { cursor: pointer; width: 24px; min-width: 24px; height: 24px; color: var(--fluent-text-secondary); transition: color var(--fluent-duration-fast) var(--fluent-easing-standard); z-index: 1; flex-shrink: 0; justify-content: center; align-items: center; margin-inline-end: 0; display: inline-flex; position: relative; margin-inline-start: auto !important; font-size: 0 !important; } cbi-dropdown > span.open:before, .cbi-dropdown > span.open:before, .fluent-custom-select > span.open:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-chevron-down-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-chevron-down-20-regular); mask-image: var(--fluent-mask-chevron-down-20-regular); -webkit-user-select: none; user-select: none; content: ""; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard),transform .2s cubic-bezier(.4, 0, .23, 1); display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } cbi-dropdown > span.open svg, .cbi-dropdown > span.open svg, .fluent-custom-select > span.open svg { fill: currentColor; width: 16px; height: 16px; color: inherit; transition: color var(--fluent-duration-fast) var(--fluent-easing-standard); } cbi-dropdown > span.open svg path, .cbi-dropdown > span.open svg path, .fluent-custom-select > span.open svg path { fill: currentColor; } cbi-dropdown > span.open:has(svg):before { display: none !important; } .cbi-dropdown > span.open:has(svg):before { display: none !important; } .fluent-custom-select > span.open:has(svg):before { display: none !important; } cbi-dropdown:hover > span.open, .cbi-dropdown:hover > span.open, .fluent-custom-select:hover > span.open { color: var(--fluent-text); } cbi-dropdown[disabled] > span.open, .cbi-dropdown[disabled] > span.open, .fluent-custom-select[disabled] > span.open { color: var(--fluent-border-hover); } cbi-dropdown[open] > span.open:before, .cbi-dropdown[open] > span.open:before, .fluent-custom-select[open] > span.open:before { transform: rotate(180deg); } cbi-dropdown > span.more, .cbi-dropdown > span.more, .fluent-custom-select > span.more { text-overflow: ellipsis; white-space: nowrap; color: var(--fluent-text-disabled); pointer-events: none; font-size: var(--fluent-font-size-base); flex: 1; align-items: center; padding-block: 0; padding-inline: 3.5px 0; line-height: 20px; display: inline-flex; overflow: hidden; } cbi-dropdown.btn, cbi-dropdown.cbi-button, .cbi-dropdown.btn, .cbi-dropdown.cbi-button, .fluent-custom-select.btn, .fluent-custom-select.cbi-button { gap: 0; padding: 0; overflow: visible; } cbi-dropdown.btn > ul.preview, cbi-dropdown.btn > ul:not(.dropdown), cbi-dropdown.btn > span.more, cbi-dropdown.cbi-button > ul.preview, cbi-dropdown.cbi-button > ul:not(.dropdown), cbi-dropdown.cbi-button > span.more, .cbi-dropdown.btn > ul.preview, .cbi-dropdown.btn > ul:not(.dropdown), .cbi-dropdown.btn > span.more, .cbi-dropdown.cbi-button > ul.preview, .cbi-dropdown.cbi-button > ul:not(.dropdown), .cbi-dropdown.cbi-button > span.more, .fluent-custom-select.btn > ul.preview, .fluent-custom-select.btn > ul:not(.dropdown), .fluent-custom-select.btn > span.more, .fluent-custom-select.cbi-button > ul.preview, .fluent-custom-select.cbi-button > ul:not(.dropdown), .fluent-custom-select.cbi-button > span.more { min-width: 0; padding: 0 var(--fluent-space-md); align-self: stretch; } cbi-dropdown.btn > span.open, cbi-dropdown.cbi-button > span.open, .cbi-dropdown.btn > span.open, .cbi-dropdown.cbi-button > span.open, .fluent-custom-select.btn > span.open, .fluent-custom-select.cbi-button > span.open { width: calc(var(--fluent-btn-height) - 2px); min-width: calc(var(--fluent-btn-height) - 2px); border-inline-start: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: none; align-self: stretch; height: auto; margin-inline-start: 0; } cbi-dropdown.btn:hover > span.open, cbi-dropdown.cbi-button:hover > span.open, .cbi-dropdown.btn:hover > span.open, .cbi-dropdown.cbi-button:hover > span.open, .fluent-custom-select.btn:hover > span.open, .fluent-custom-select.cbi-button:hover > span.open, cbi-dropdown.btn:active > span.open, cbi-dropdown.btn.focus > span.open, cbi-dropdown.btn:focus-within > span.open, cbi-dropdown.btn[open] > span.open, cbi-dropdown.cbi-button:active > span.open, cbi-dropdown.cbi-button.focus > span.open, cbi-dropdown.cbi-button:focus-within > span.open, cbi-dropdown.cbi-button[open] > span.open, .cbi-dropdown.btn:active > span.open, .cbi-dropdown.btn.focus > span.open, .cbi-dropdown.btn:focus-within > span.open, .cbi-dropdown.btn[open] > span.open, .cbi-dropdown.cbi-button:active > span.open, .cbi-dropdown.cbi-button.focus > span.open, .cbi-dropdown.cbi-button:focus-within > span.open, .cbi-dropdown.cbi-button[open] > span.open, .fluent-custom-select.btn:active > span.open, .fluent-custom-select.btn.focus > span.open, .fluent-custom-select.btn:focus-within > span.open, .fluent-custom-select.btn[open] > span.open, .fluent-custom-select.cbi-button:active > span.open, .fluent-custom-select.cbi-button.focus > span.open, .fluent-custom-select.cbi-button:focus-within > span.open, .fluent-custom-select.cbi-button[open] > span.open { background: none; } cbi-dropdown:not([empty]) > span.more, .cbi-dropdown:not([empty]) > span.more, .fluent-custom-select:not([empty]) > span.more { display: none; } cbi-dropdown[empty] > ul.preview, cbi-dropdown[empty] > ul:not(.dropdown), cbi-dropdown[empty]:not([open]) > ul.dropdown, .cbi-dropdown[empty] > ul.preview, .cbi-dropdown[empty] > ul:not(.dropdown), .cbi-dropdown[empty]:not([open]) > ul.dropdown, .fluent-custom-select[empty] > ul.preview, .fluent-custom-select[empty] > ul:not(.dropdown), .fluent-custom-select[empty]:not([open]) > ul.dropdown { display: none !important; } cbi-dropdown:not([open]):has( > ul:not(.dropdown)) > ul.dropdown { display: none !important; } cbi-dropdown:not([open]):has( > ul.preview) > ul.dropdown:not(.preview) { display: none !important; } .cbi-dropdown:not([open]):has( > ul:not(.dropdown)) > ul.dropdown { display: none !important; } .cbi-dropdown:not([open]):has( > ul.preview) > ul.dropdown:not(.preview) { display: none !important; } .fluent-custom-select:not([open]):has( > ul:not(.dropdown)) > ul.dropdown { display: none !important; } .fluent-custom-select:not([open]):has( > ul.preview) > ul.dropdown:not(.preview) { display: none !important; } cbi-dropdown > ul.dropdown:not(.preview), .cbi-dropdown > ul.dropdown:not(.preview), .fluent-custom-select > ul.dropdown:not(.preview) { margin: 0; padding: 0; list-style: none; } cbi-dropdown[open] > ul.dropdown:not(.preview), .cbi-dropdown[open] > ul.dropdown:not(.preview), .fluent-custom-select[open] > ul.dropdown:not(.preview) { box-sizing: border-box; background-color: var(--fluent-dropdown-bg); border: 1px solid var(--fluent-dropdown-border); border-radius: var(--fluent-radius-md); box-shadow: var(--fluent-dropdown-shadow); min-width: 100%; z-index: var(--fluent-zindex-dropdown); padding: var(--fluent-space-xxs); margin: 0; margin-top: var(--fluent-space-xxs); transform-origin: top; outline: 1px solid #0000; flex-direction: column; list-style: none; animation: .2s cubic-bezier(.4, 0, .23, 1) forwards fluent-dropdown-slide-in; display: flex; position: absolute; overflow-y: auto; max-width: 80vw !important; max-height: min(var(--fluent-dropdown-max-height-limit),var(--fluent-dropdown-max-height),45dvh) !important; } cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar { width: 8px; } .cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar { width: 8px; } .fluent-custom-select[open] > ul.dropdown:not(.preview)::-webkit-scrollbar { width: 8px; } cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-track { background: none; } .cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-track { background: none; } .fluent-custom-select[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-track { background: none; } cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-thumb { background-color: var(--fluent-scrollbar-thumb-bg); border-radius: var(--fluent-radius-md); background-clip: padding-box; border: 2px solid #0000; } .cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-thumb { background-color: var(--fluent-scrollbar-thumb-bg); border-radius: var(--fluent-radius-md); background-clip: padding-box; border: 2px solid #0000; } .fluent-custom-select[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-thumb { background-color: var(--fluent-scrollbar-thumb-bg); border-radius: var(--fluent-radius-md); background-clip: padding-box; border: 2px solid #0000; } cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-thumb:hover { background-color: var(--fluent-scrollbar-thumb-bg-hover); } .cbi-dropdown[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-thumb:hover { background-color: var(--fluent-scrollbar-thumb-bg-hover); } .fluent-custom-select[open] > ul.dropdown:not(.preview)::-webkit-scrollbar-thumb:hover { background-color: var(--fluent-scrollbar-thumb-bg-hover); } cbi-dropdown[open] > ul.dropdown:not(.preview) > li, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li { box-sizing: border-box; width: 100%; min-height: var(--fluent-input-height); padding: 5px var(--fluent-space-xs); border-radius: var(--fluent-radius-md); color: var(--fluent-text); cursor: pointer; -webkit-user-select: none; user-select: none; font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; align-items: center; line-height: 20px; display: flex; position: relative; overflow: hidden; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(.hide-close) { white-space: normal !important; text-overflow: clip !important; align-items: flex-start !important; height: auto !important; overflow: visible !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(div) { white-space: normal !important; text-overflow: clip !important; align-items: flex-start !important; height: auto !important; overflow: visible !important; } .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(.hide-close) { white-space: normal !important; text-overflow: clip !important; align-items: flex-start !important; height: auto !important; overflow: visible !important; } .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(div) { white-space: normal !important; text-overflow: clip !important; align-items: flex-start !important; height: auto !important; overflow: visible !important; } .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:has(.hide-close) { white-space: normal !important; text-overflow: clip !important; align-items: flex-start !important; height: auto !important; overflow: visible !important; } .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:has(div) { white-space: normal !important; text-overflow: clip !important; align-items: flex-start !important; height: auto !important; overflow: visible !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(.hide-close) label { gap: var(--fluent-space-xs); white-space: normal !important; align-items: center !important; display: inline-flex !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(div) label { gap: var(--fluent-space-xs); white-space: normal !important; align-items: center !important; display: inline-flex !important; } .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(.hide-close) label { gap: var(--fluent-space-xs); white-space: normal !important; align-items: center !important; display: inline-flex !important; } .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(div) label { gap: var(--fluent-space-xs); white-space: normal !important; align-items: center !important; display: inline-flex !important; } .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:has(.hide-close) label { gap: var(--fluent-space-xs); white-space: normal !important; align-items: center !important; display: inline-flex !important; } .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:has(div) label { gap: var(--fluent-space-xs); white-space: normal !important; align-items: center !important; display: inline-flex !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(.hide-close) .hide-close { word-break: break-word; min-width: unset !important; white-space: normal !important; width: 100% !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(div) .hide-close { word-break: break-word; min-width: unset !important; white-space: normal !important; width: 100% !important; } .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(.hide-close) .hide-close { word-break: break-word; min-width: unset !important; white-space: normal !important; width: 100% !important; } .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:has(div) .hide-close { word-break: break-word; min-width: unset !important; white-space: normal !important; width: 100% !important; } .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:has(.hide-close) .hide-close { word-break: break-word; min-width: unset !important; white-space: normal !important; width: 100% !important; } .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:has(div) .hide-close { word-break: break-word; min-width: unset !important; white-space: normal !important; width: 100% !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li { transition: background-color 50ms var(--fluent-easing-standard),color 50ms var(--fluent-easing-standard); } cbi-dropdown[open] > ul.dropdown:not(.preview) > li > span, cbi-dropdown[open] > ul.dropdown:not(.preview) > li > .ifacebadge, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li > span, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li > .ifacebadge, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li > span, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li > .ifacebadge { align-items: center; gap: var(--fluent-space-xxs); width: 100%; display: flex; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li:hover, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:hover, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:hover { background-color: var(--fluent-dropdown-option-hover); color: var(--fluent-text); } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[selected], .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[selected], .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[selected] { background-color: var(--fluent-dropdown-option-selected); color: var(--fluent-text); font-weight: var(--fluent-font-weight-semibold); } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[selected]:hover, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[selected]:hover, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[selected]:hover { background-color: var(--fluent-primary-lighter); } cbi-dropdown[open] > ul.dropdown:not(.preview) > li.focus, cbi-dropdown[open] > ul.dropdown:not(.preview) > li:active, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li.focus, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li:active, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li.focus, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li:active { background-color: var(--fluent-bg-active); color: var(--fluent-text); } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[disabled], cbi-dropdown[open] > ul.dropdown:not(.preview) > li[unselectable], .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[disabled], .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[unselectable], .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[disabled], .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[unselectable] { color: var(--fluent-text-disabled); cursor: not-allowed; pointer-events: none; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"], .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"], .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[data-value="-"] { cursor: default; pointer-events: all; padding: var(--fluent-space-xxs) !important; background-color: #0000 !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"] form, cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"] input[type="checkbox"], .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"] form, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"] input[type="checkbox"], .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[data-value="-"] form, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[data-value="-"] input[type="checkbox"] { display: none !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"], .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"], .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[data-value="-"] { padding-inline-start: var(--fluent-space-xxs) !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"]:before, cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"]:after, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"]:before, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li[data-value="-"]:after, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[data-value="-"]:before, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li[data-value="-"]:after { content: none !important; display: none !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li .create-item-input, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li .create-item-input, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li .create-item-input { width: 100%; min-height: 24px; padding: 2px var(--fluent-space-xs); box-sizing: border-box; background-color: var(--fluent-bg); border: 1px solid var(--fluent-input-border); border-radius: var(--fluent-radius-sm); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); color: var(--fluent-text); transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard); outline: none; } cbi-dropdown > select, .cbi-dropdown > select, .fluent-custom-select > select { box-sizing: border-box; width: 100%; cursor: pointer; padding-inline-end: var(--fluent-space-xl); } cbi-dropdown > .cbi-input-select, .cbi-dropdown > .cbi-input-select, .fluent-custom-select > .cbi-input-select { background-image: linear-gradient(var(--fluent-input-border-bottom-focus), var(--fluent-input-border-bottom-focus)),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEgMWw0IDQgNC00IiBzdHJva2U9IiM2MTYxNjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==); background-position: bottom, right 10px center; background-repeat: no-repeat; background-size: 0 2px, 10px 6px; background-origin: border-box; } html[dir="rtl"] cbi-dropdown > .cbi-input-select, body[data-fluent-dir="rtl"] cbi-dropdown > .cbi-input-select, html[dir="rtl"] .cbi-dropdown > .cbi-input-select, body[data-fluent-dir="rtl"] .cbi-dropdown > .cbi-input-select, html[dir="rtl"] .fluent-custom-select > .cbi-input-select, body[data-fluent-dir="rtl"] .fluent-custom-select > .cbi-input-select { background-position: bottom, 10px; } cbi-dropdown > .cbi-input-select, .cbi-dropdown > .cbi-input-select, .fluent-custom-select > .cbi-input-select { transition: background-size var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard); background-repeat: no-repeat; background-origin: border-box; } cbi-dropdown > .cbi-input-select:hover:not([disabled]):not(:focus), .cbi-dropdown > .cbi-input-select:hover:not([disabled]):not(:focus), .fluent-custom-select > .cbi-input-select:hover:not([disabled]):not(:focus) { border-color: var(--fluent-input-border-hover); border-bottom-color: var(--fluent-input-border-bottom-hover); } cbi-dropdown > .cbi-input-select:focus, .cbi-dropdown > .cbi-input-select:focus, .fluent-custom-select > .cbi-input-select:focus { border-bottom-color: var(--fluent-input-border-bottom-focus); background-size: 100% 2px, 10px 6px; outline: none; } cbi-dropdown > .cbi-input-select, .cbi-dropdown > .cbi-input-select, .fluent-custom-select > .cbi-input-select { box-sizing: border-box; width: 100%; cursor: pointer; padding-inline-end: var(--fluent-space-xl); } cbi-dropdown .ifacebadge, .cbi-dropdown .ifacebadge, .fluent-custom-select .ifacebadge { box-shadow: none !important; color: inherit !important; min-height: unset !important; background: none !important; border: none !important; padding: 0 !important; } cbi-dropdown li .hide-close, .cbi-dropdown li .hide-close, .fluent-custom-select li .hide-close { display: none !important; } cbi-dropdown li .hide-open, .cbi-dropdown li .hide-open, .fluent-custom-select li .hide-open { display: inline-block; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li .hide-open, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li .hide-open, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li .hide-open { display: none !important; } cbi-dropdown[open] > ul.dropdown:not(.preview) > li .hide-close, .cbi-dropdown[open] > ul.dropdown:not(.preview) > li .hide-close, .fluent-custom-select[open] > ul.dropdown:not(.preview) > li .hide-close { display: inline-block !important; } cbi-dropdown ul.dropdown:not(.preview) > li form, .cbi-dropdown ul.dropdown:not(.preview) > li form, .fluent-custom-select ul.dropdown:not(.preview) > li form { flex-shrink: 0; align-items: center !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; } cbi-dropdown ul.dropdown:not(.preview) > li label, .cbi-dropdown ul.dropdown:not(.preview) > li label, .fluent-custom-select ul.dropdown:not(.preview) > li label { font-weight: inherit; color: inherit; white-space: nowrap; text-overflow: ellipsis; gap: var(--fluent-space-xs); flex: 1; overflow: hidden; cursor: pointer !important; align-items: center !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; } cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"], .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"], .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"] { appearance: none !important; border: 1px solid var(--fluent-checkbox-border) !important; background-color: var(--fluent-checkbox-bg) !important; width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; cursor: pointer !important; vertical-align: middle !important; box-sizing: border-box !important; background-image: none !important; border-radius: 4px !important; justify-content: center !important; align-items: center !important; margin: 0 !important; margin-inline-end: var(--fluent-space-sm) !important; transition: background-color .1s, border-color .1s !important; display: inline-flex !important; position: relative !important; -webkit-mask-image: none !important; mask-image: none !important; } cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:before, .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:before, .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:before { content: none !important; display: none !important; } cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:hover:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:hover:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:hover:not(:disabled) { border-color: var(--fluent-checkbox-hover-border) !important; background-color: var(--fluent-bg-hover) !important; background-image: none !important; } cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:disabled, .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:disabled, .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:disabled { background-color: var(--fluent-input-bg-disabled) !important; border-color: var(--fluent-border-hover) !important; cursor: not-allowed !important; opacity: 1 !important; background-image: none !important; } cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"], .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"], .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"] { pointer-events: none; border-radius: var(--fluent-radius-sm) !important; } cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"], cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked, cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:hover, cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:hover, cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:focus, cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:focus, cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:active, cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:active, cbi-dropdown ul.dropdown:not(.preview) > li:hover input[type="checkbox"]:checked, cbi-dropdown ul.dropdown:not(.preview) > li[selected]:hover input[type="checkbox"], cbi-dropdown ul.dropdown:not(.preview) > li.focus input[type="checkbox"]:checked, cbi-dropdown ul.dropdown:not(.preview) > li[selected].focus input[type="checkbox"], .cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"], .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked, .cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:hover, .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:hover, .cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:focus, .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:focus, .cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:active, .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:active, .cbi-dropdown ul.dropdown:not(.preview) > li:hover input[type="checkbox"]:checked, .cbi-dropdown ul.dropdown:not(.preview) > li[selected]:hover input[type="checkbox"], .cbi-dropdown ul.dropdown:not(.preview) > li.focus input[type="checkbox"]:checked, .cbi-dropdown ul.dropdown:not(.preview) > li[selected].focus input[type="checkbox"], .fluent-custom-select ul.dropdown:not(.preview) > li[selected] input[type="checkbox"], .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:checked, .fluent-custom-select ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:hover, .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:hover, .fluent-custom-select ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:focus, .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:focus, .fluent-custom-select ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:active, .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:active, .fluent-custom-select ul.dropdown:not(.preview) > li:hover input[type="checkbox"]:checked, .fluent-custom-select ul.dropdown:not(.preview) > li[selected]:hover input[type="checkbox"], .fluent-custom-select ul.dropdown:not(.preview) > li.focus input[type="checkbox"]:checked, .fluent-custom-select ul.dropdown:not(.preview) > li[selected].focus input[type="checkbox"] { border: 1px solid var(--fluent-primary) !important; background-color: var(--fluent-primary) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; -webkit-mask-image: none !important; mask-image: none !important; } cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:hover:not(:disabled), cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:hover:not(:disabled), cbi-dropdown ul.dropdown:not(.preview) > li[selected]:hover input[type="checkbox"]:not(:disabled), cbi-dropdown ul.dropdown:not(.preview) > li:hover input[type="checkbox"]:checked:not(:disabled), cbi-dropdown ul.dropdown:not(.preview) > li[selected].focus input[type="checkbox"]:not(:disabled), cbi-dropdown ul.dropdown:not(.preview) > li.focus input[type="checkbox"]:checked:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:hover:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:hover:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li[selected]:hover input[type="checkbox"]:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li:hover input[type="checkbox"]:checked:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li[selected].focus input[type="checkbox"]:not(:disabled), .cbi-dropdown ul.dropdown:not(.preview) > li.focus input[type="checkbox"]:checked:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:hover:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:hover:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li[selected]:hover input[type="checkbox"]:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li:hover input[type="checkbox"]:checked:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li[selected].focus input[type="checkbox"]:not(:disabled), .fluent-custom-select ul.dropdown:not(.preview) > li.focus input[type="checkbox"]:checked:not(:disabled) { background-color: var(--fluent-primary-hover) !important; border-color: var(--fluent-primary-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; } cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:disabled, cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:disabled, .cbi-dropdown ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:disabled, .cbi-dropdown ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:disabled, .fluent-custom-select ul.dropdown:not(.preview) > li[selected] input[type="checkbox"]:disabled, .fluent-custom-select ul.dropdown:not(.preview) > li input[type="checkbox"]:checked:disabled { background-color: var(--fluent-border-hover) !important; border-color: var(--fluent-border-hover) !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMy44NTQgMy42NDZhLjUuNSAwIDAgMSAwIC43MDhsLTcgN2EuNS41IDAgMCAxLS43MDggMGwtMy41LTMuNWEuNS41IDAgMSAxIC43MDgtLjcwOEw2LjUgMTAuMjkzbDYuNjQ2LTYuNjQ3YS41LjUgMCAwIDEgLjcwOCAweiIvPgo8L3N2Zz4K) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; } cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li, .cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li, .fluent-custom-select:not([multiple]) > ul.dropdown:not(.preview) > li { padding-inline-start: 32px; position: relative !important; } cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li:before, .cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li:before, .fluent-custom-select:not([multiple]) > ul.dropdown:not(.preview) > li:before { --icon-check: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEzLjg1NCAzLjY0NmEuNS41IDAgMCAxIDAgLjcwOGwtNyA3YS41LjUgMCAwIDEtLjcwOCAwbC0zLjUtMy41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDYuNSAxMC4yOTNsNi42NDYtNi42NDdhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPgo=); content: "" !important; inset-inline-start: 8px !important; z-index: 2 !important; width: 16px !important; height: 16px !important; -webkit-mask-image: var(--icon-check) !important; mask-image: var(--icon-check) !important; background-color: #0000 !important; transition: background-color .1s !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; } cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li[selected]:before, .cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li[selected]:before, .fluent-custom-select:not([multiple]) > ul.dropdown:not(.preview) > li[selected]:before { background-color: var(--fluent-text) !important; } cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li[disabled][selected]:before, cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li[unselectable][selected]:before, .cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li[disabled][selected]:before, .cbi-dropdown:not([multiple]) > ul.dropdown:not(.preview) > li[unselectable][selected]:before, .fluent-custom-select:not([multiple]) > ul.dropdown:not(.preview) > li[disabled][selected]:before, .fluent-custom-select:not([multiple]) > ul.dropdown:not(.preview) > li[unselectable][selected]:before { background-color: var(--fluent-text-disabled) !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) { background: none !important; padding: 0 !important; padding-inline-start: 0 !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) { background: none !important; padding: 0 !important; padding-inline-start: 0 !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) { background: none !important; padding: 0 !important; padding-inline-start: 0 !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge):before { content: none !important; display: none !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge):before { content: none !important; display: none !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge):before { content: none !important; display: none !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) > form { margin-inline-start: var(--fluent-space-xs) !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) > form { margin-inline-start: var(--fluent-space-xs) !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) > form { margin-inline-start: var(--fluent-space-xs) !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge { justify-content: flex-start !important; align-items: center !important; gap: 4px var(--fluent-space-xs) !important; width: 100% !important; height: 100% !important; min-height: var(--fluent-input-height) !important; box-sizing: border-box !important; border-radius: inherit !important; box-shadow: none !important; padding: 5px var(--fluent-space-xs) !important; color: var(--fluent-zonebadge-text) !important; border: none !important; flex-wrap: wrap !important; margin: 0 !important; display: flex !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge { justify-content: flex-start !important; align-items: center !important; gap: 4px var(--fluent-space-xs) !important; width: 100% !important; height: 100% !important; min-height: var(--fluent-input-height) !important; box-sizing: border-box !important; border-radius: inherit !important; box-shadow: none !important; padding: 5px var(--fluent-space-xs) !important; color: var(--fluent-zonebadge-text) !important; border: none !important; flex-wrap: wrap !important; margin: 0 !important; display: flex !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge { justify-content: flex-start !important; align-items: center !important; gap: 4px var(--fluent-space-xs) !important; width: 100% !important; height: 100% !important; min-height: var(--fluent-input-height) !important; box-sizing: border-box !important; border-radius: inherit !important; box-shadow: none !important; padding: 5px var(--fluent-space-xs) !important; color: var(--fluent-zonebadge-text) !important; border: none !important; flex-wrap: wrap !important; margin: 0 !important; display: flex !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge strong { color: inherit !important; align-items: center !important; line-height: 1.2 !important; display: inline-flex !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge em { color: inherit !important; align-items: center !important; line-height: 1.2 !important; display: inline-flex !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge strong { color: inherit !important; align-items: center !important; line-height: 1.2 !important; display: inline-flex !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge em { color: inherit !important; align-items: center !important; line-height: 1.2 !important; display: inline-flex !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge strong { color: inherit !important; align-items: center !important; line-height: 1.2 !important; display: inline-flex !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge em { color: inherit !important; align-items: center !important; line-height: 1.2 !important; display: inline-flex !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge { color: var(--fluent-zonebadge-text) !important; min-height: unset !important; border-radius: var(--fluent-radius-sm) !important; height: auto !important; line-height: 1.2 !important; font-size: var(--fluent-font-size-xs) !important; background: #fff9 !important; border-color: #0000001a !important; justify-content: center !important; align-items: center !important; gap: 4px !important; padding: 1px 5px !important; display: inline-flex !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge { color: var(--fluent-zonebadge-text) !important; min-height: unset !important; border-radius: var(--fluent-radius-sm) !important; height: auto !important; line-height: 1.2 !important; font-size: var(--fluent-font-size-xs) !important; background: #fff9 !important; border-color: #0000001a !important; justify-content: center !important; align-items: center !important; gap: 4px !important; padding: 1px 5px !important; display: inline-flex !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge { color: var(--fluent-zonebadge-text) !important; min-height: unset !important; border-radius: var(--fluent-radius-sm) !important; height: auto !important; line-height: 1.2 !important; font-size: var(--fluent-font-size-xs) !important; background: #fff9 !important; border-color: #0000001a !important; justify-content: center !important; align-items: center !important; gap: 4px !important; padding: 1px 5px !important; display: inline-flex !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge em { color: inherit !important; line-height: inherit !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge strong { color: inherit !important; line-height: inherit !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge span { color: inherit !important; line-height: inherit !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge em { color: inherit !important; line-height: inherit !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge strong { color: inherit !important; line-height: inherit !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge span { color: inherit !important; line-height: inherit !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge em { color: inherit !important; line-height: inherit !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge strong { color: inherit !important; line-height: inherit !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge span { color: inherit !important; line-height: inherit !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge img { vertical-align: middle !important; background: currentColor !important; width: 14px !important; height: 14px !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge img { vertical-align: middle !important; background: currentColor !important; width: 14px !important; height: 14px !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge) .zonebadge .ifacebadge img { vertical-align: middle !important; background: currentColor !important; width: 14px !important; height: 14px !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge):hover .zonebadge { background-image: linear-gradient(#0000000d, #0000000d) !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge):hover .zonebadge { background-image: linear-gradient(#0000000d, #0000000d) !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge):hover .zonebadge { background-image: linear-gradient(#0000000d, #0000000d) !important; } cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge).focus .zonebadge { background-image: linear-gradient(#00000014, #00000014) !important; } .cbi-dropdown[open] > ul:not(.preview) > li:has(.zonebadge).focus .zonebadge { background-image: linear-gradient(#00000014, #00000014) !important; } .fluent-custom-select[open] > ul:not(.preview) > li:has(.zonebadge).focus .zonebadge { background-image: linear-gradient(#00000014, #00000014) !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge) { display: none; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge) { display: none; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge) { display: none; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge) { display: none; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge) { display: none; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge) { display: none; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge)[selected] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge)[display] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge)[selected] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge)[display] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge)[selected] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge)[display] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge)[selected] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge)[display] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge)[selected] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge)[display] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge)[selected] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge)[display] { border-radius: var(--fluent-radius-sm) !important; background: none !important; border: none !important; align-items: center !important; margin: 2px !important; padding: 0 !important; display: inline-flex !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge { padding: 2px var(--fluent-space-sm) !important; border-radius: var(--fluent-radius-sm) !important; height: 20px !important; min-height: 20px !important; font-size: var(--fluent-font-size-sm) !important; box-shadow: none !important; color: var(--fluent-zonebadge-text) !important; border: none !important; align-items: center !important; padding-inline-start: var(--fluent-space-sm) !important; display: inline-flex !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge { padding: 2px var(--fluent-space-sm) !important; border-radius: var(--fluent-radius-sm) !important; height: 20px !important; min-height: 20px !important; font-size: var(--fluent-font-size-sm) !important; box-shadow: none !important; color: var(--fluent-zonebadge-text) !important; border: none !important; align-items: center !important; padding-inline-start: var(--fluent-space-sm) !important; display: inline-flex !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge { padding: 2px var(--fluent-space-sm) !important; border-radius: var(--fluent-radius-sm) !important; height: 20px !important; min-height: 20px !important; font-size: var(--fluent-font-size-sm) !important; box-shadow: none !important; color: var(--fluent-zonebadge-text) !important; border: none !important; align-items: center !important; padding-inline-start: var(--fluent-space-sm) !important; display: inline-flex !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge { padding: 2px var(--fluent-space-sm) !important; border-radius: var(--fluent-radius-sm) !important; height: 20px !important; min-height: 20px !important; font-size: var(--fluent-font-size-sm) !important; box-shadow: none !important; color: var(--fluent-zonebadge-text) !important; border: none !important; align-items: center !important; padding-inline-start: var(--fluent-space-sm) !important; display: inline-flex !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge) .zonebadge { padding: 2px var(--fluent-space-sm) !important; border-radius: var(--fluent-radius-sm) !important; height: 20px !important; min-height: 20px !important; font-size: var(--fluent-font-size-sm) !important; box-shadow: none !important; color: var(--fluent-zonebadge-text) !important; border: none !important; align-items: center !important; padding-inline-start: var(--fluent-space-sm) !important; display: inline-flex !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge) .zonebadge { padding: 2px var(--fluent-space-sm) !important; border-radius: var(--fluent-radius-sm) !important; height: 20px !important; min-height: 20px !important; font-size: var(--fluent-font-size-sm) !important; box-shadow: none !important; color: var(--fluent-zonebadge-text) !important; border: none !important; align-items: center !important; padding-inline-start: var(--fluent-space-sm) !important; display: inline-flex !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge strong { color: inherit !important; font-size: inherit !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge em { color: inherit !important; font-size: inherit !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge span { color: inherit !important; font-size: inherit !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge strong { color: inherit !important; font-size: inherit !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge em { color: inherit !important; font-size: inherit !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge span { color: inherit !important; font-size: inherit !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge strong { color: inherit !important; font-size: inherit !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge em { color: inherit !important; font-size: inherit !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge span { color: inherit !important; font-size: inherit !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge strong { color: inherit !important; font-size: inherit !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge em { color: inherit !important; font-size: inherit !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge span { color: inherit !important; font-size: inherit !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge) .zonebadge strong { color: inherit !important; font-size: inherit !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge) .zonebadge em { color: inherit !important; font-size: inherit !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge) .zonebadge span { color: inherit !important; font-size: inherit !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge) .zonebadge strong { color: inherit !important; font-size: inherit !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge) .zonebadge em { color: inherit !important; font-size: inherit !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge) .zonebadge span { color: inherit !important; font-size: inherit !important; } cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge .ifacebadge { display: none !important; } cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge .ifacebadge { display: none !important; } .cbi-dropdown:not([open]) > ul > li:has(.zonebadge) .zonebadge .ifacebadge { display: none !important; } .cbi-dropdown[open] > ul.preview > li:has(.zonebadge) .zonebadge .ifacebadge { display: none !important; } .fluent-custom-select:not([open]) > ul > li:has(.zonebadge) .zonebadge .ifacebadge { display: none !important; } .fluent-custom-select[open] > ul.preview > li:has(.zonebadge) .zonebadge .ifacebadge { display: none !important; } cbi-dropdown.fluent-custom-select[data-open-direction="up"][open] > ul.dropdown:not(.preview), .cbi-dropdown.fluent-custom-select[data-open-direction="up"][open] > ul.dropdown:not(.preview), .fluent-custom-select.fluent-custom-select[data-open-direction="up"][open] > ul.dropdown:not(.preview) { width: max-content; min-width: 100%; bottom: 100%; margin-top: 0 !important; margin-bottom: var(--fluent-space-xxs) !important; transform-origin: bottom !important; top: auto !important; animation: .2s cubic-bezier(.4, 0, .23, 1) forwards fluent-dropdown-slide-in-up !important; inset-inline-end: auto !important; } cbi-dropdown.fluent-custom-select[data-open-direction="down"][open] > ul.dropdown:not(.preview), .cbi-dropdown.fluent-custom-select[data-open-direction="down"][open] > ul.dropdown:not(.preview), .fluent-custom-select.fluent-custom-select[data-open-direction="down"][open] > ul.dropdown:not(.preview) { width: max-content; min-width: 100%; top: 100%; margin-bottom: 0 !important; margin-top: var(--fluent-space-xxs) !important; transform-origin: top !important; bottom: auto !important; animation: .2s cubic-bezier(.4, 0, .23, 1) forwards fluent-dropdown-slide-in !important; inset-inline-end: auto !important; } cbi-dropdown.fluent-custom-select[data-fluent-floating="modal"][open] > ul.dropdown:not(.preview), .cbi-dropdown.fluent-custom-select[data-fluent-floating="modal"][open] > ul.dropdown:not(.preview), .fluent-custom-select.fluent-custom-select[data-fluent-floating="modal"][open] > ul.dropdown:not(.preview) { min-width: var(--fluent-dropdown-width); max-height: var(--fluent-dropdown-max-height); z-index: calc(var(--fluent-zindex-dropdown) + 1); position: fixed; top: var(--fluent-dropdown-top) !important; bottom: auto !important; margin: 0 !important; inset-inline-start: var(--fluent-dropdown-left) !important; inset-inline-end: auto !important; } @supports (anchor-name: --a) { cbi-dropdown[open] > ul.dropdown:not(.preview), .cbi-dropdown[open] > ul.dropdown:not(.preview), .fluent-custom-select[open] > ul.dropdown:not(.preview) { position-anchor: --fluent-cbi-dropdown-active !important; position-try-fallbacks: flip-block !important; min-width: anchor-size(width) !important; max-height: min(var(--fluent-dropdown-max-height-limit),var(--fluent-dropdown-max-height),45dvh) !important; margin: 0 !important; margin-top: var(--fluent-space-xxs) !important; left: anchor(left) !important; position: fixed !important; right: auto !important; } html[dir="rtl"] cbi-dropdown[open] > ul.dropdown:not(.preview), body[data-fluent-dir="rtl"] cbi-dropdown[open] > ul.dropdown:not(.preview), html[dir="rtl"] .cbi-dropdown[open] > ul.dropdown:not(.preview), body[data-fluent-dir="rtl"] .cbi-dropdown[open] > ul.dropdown:not(.preview), html[dir="rtl"] .fluent-custom-select[open] > ul.dropdown:not(.preview), body[data-fluent-dir="rtl"] .fluent-custom-select[open] > ul.dropdown:not(.preview) { right: anchor(right) !important; left: auto !important; } cbi-dropdown[open] > ul.dropdown:not(.preview), .cbi-dropdown[open] > ul.dropdown:not(.preview), .fluent-custom-select[open] > ul.dropdown:not(.preview) { top: anchor(bottom) !important; bottom: auto !important; } cbi-dropdown[open] > ul.dropdown:not(.preview)[style*="bottom"], .cbi-dropdown[open] > ul.dropdown:not(.preview)[style*="bottom"], .fluent-custom-select[open] > ul.dropdown:not(.preview)[style*="bottom"] { top: auto !important; bottom: anchor(top) !important; margin-top: 0 !important; margin-bottom: var(--fluent-space-xxs) !important; max-height: min(var(--fluent-dropdown-max-height-limit),var(--fluent-dropdown-max-height),45dvh) !important; transform-origin: bottom !important; animation: .2s cubic-bezier(.4, 0, .23, 1) forwards fluent-dropdown-slide-in-up !important; } } cbi-dropdown[data-open-direction="up"][open] > ul.dropdown:not(.preview), .cbi-dropdown[data-open-direction="up"][open] > ul.dropdown:not(.preview), .fluent-custom-select[data-open-direction="up"][open] > ul.dropdown:not(.preview) { margin-top: 0 !important; margin-bottom: var(--fluent-space-xxs) !important; transform-origin: bottom !important; animation: .2s cubic-bezier(.4, 0, .23, 1) forwards fluent-dropdown-slide-in-up !important; top: auto !important; bottom: 100% !important; } @supports (anchor-name: --a) { cbi-dropdown[data-open-direction="up"][open] > ul.dropdown:not(.preview), .cbi-dropdown[data-open-direction="up"][open] > ul.dropdown:not(.preview), .fluent-custom-select[data-open-direction="up"][open] > ul.dropdown:not(.preview) { top: auto !important; bottom: anchor(top) !important; margin-top: 0 !important; margin-bottom: var(--fluent-space-xxs) !important; max-height: min(var(--fluent-dropdown-max-height-limit),var(--fluent-dropdown-max-height),45dvh) !important; } } .cbi-value-field.cbi-dropdown-open { position: relative; z-index: 2000 !important; } .cbi-value:has(.cbi-dropdown-open) { position: relative; z-index: 2000 !important; } .cbi-section:has(.cbi-dropdown-open) { position: relative; z-index: 2000 !important; } .cbi-map:has(.cbi-dropdown-open) { position: relative; z-index: 2000 !important; } cbi-dropdown:not([optional]) > ul.dropdown > li[placeholder]:not(:only-child), .cbi-dropdown:not([optional]) > ul.dropdown > li[placeholder]:not(:only-child), .fluent-custom-select:not([optional]) > ul.dropdown > li[placeholder]:not(:only-child) { display: none; } .cbi-dropdown.cbi-button, .cbi-dropdown.btn { border-bottom-color: var(--fluent-btn-secondary-border); --menu-btn-bg-default: var(--fluent-btn-secondary-bg); --menu-btn-bg-hover: var(--fluent-btn-secondary-bg-hover); --menu-btn-bg-active: var(--fluent-btn-secondary-bg-active); background: var(--menu-btn-bg-default); box-sizing: border-box; vertical-align: middle; cursor: pointer; justify-content: center; align-items: center; display: inline-flex; position: relative; } html[dir="rtl"] .cbi-dropdown.cbi-button, body[data-fluent-dir="rtl"] .cbi-dropdown.cbi-button, html[dir="rtl"] .cbi-dropdown.btn, body[data-fluent-dir="rtl"] .cbi-dropdown.btn { direction: rtl; } .cbi-dropdown.cbi-button, .cbi-dropdown.btn { min-width: unset; width: auto; transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; gap: 0 !important; padding: 0 !important; } .cbi-dropdown.cbi-button:after, .cbi-dropdown.btn:after { content: none !important; display: none !important; } .cbi-dropdown.cbi-button:hover:not([disabled]), .cbi-dropdown.btn:hover:not([disabled]) { background: var(--menu-btn-bg-default); border-color: var(--fluent-btn-secondary-border-hover) !important; border-bottom-color: var(--fluent-btn-secondary-border-hover) !important; } .cbi-dropdown.cbi-button:active, .cbi-dropdown.cbi-button:active:not([disabled]), .cbi-dropdown.btn:active, .cbi-dropdown.btn:active:not([disabled]) { background: var(--menu-btn-bg-default); border-color: var(--fluent-btn-secondary-border-active) !important; border-bottom-color: var(--fluent-btn-secondary-border-active) !important; } .cbi-dropdown.cbi-button:focus, .cbi-dropdown.cbi-button.focus, .cbi-dropdown.cbi-button[open], .cbi-dropdown.btn:focus, .cbi-dropdown.btn.focus, .cbi-dropdown.btn[open] { outline: none; border-color: var(--fluent-btn-secondary-border-active) !important; border-bottom-color: var(--fluent-btn-secondary-border-active) !important; } .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative), .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative) { --menu-btn-bg-default: var(--fluent-btn-primary-bg); --menu-btn-bg-hover: var(--fluent-btn-primary-bg-hover); --menu-btn-bg-active: var(--fluent-btn-primary-bg-active); background: var(--menu-btn-bg-default); border: 0 !important; } .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative):hover:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]), .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative):active, .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative):active:not([disabled]) { background: var(--menu-btn-bg-default); border: 0 !important; } .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative)[open], .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative):focus, .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative).focus, .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative)[open] { border: 0 !important; } .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li, .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative) > ul.preview > li, .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative) > ul:not(.dropdown) > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative):not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.cbi-button.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.cbi-button.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.cbi-button.important:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.btn.cbi-button-apply:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.btn.cbi-button-save:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.btn.cbi-button-positive:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before, .cbi-dropdown.btn.important:not(.cbi-button-remove):not(.cbi-button-negative) > span.open:before { border-color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-remove, .cbi-dropdown.cbi-button.cbi-button-negative, .cbi-dropdown.btn.cbi-button-remove, .cbi-dropdown.btn.cbi-button-negative { --menu-btn-bg-default: var(--fluent-error); --menu-btn-bg-hover: var(--fluent-error-hover); --menu-btn-bg-active: var(--fluent-error-active); background: var(--menu-btn-bg-default); color: var(--fluent-text-on-primary); border: 0 !important; } .cbi-dropdown.cbi-button.cbi-button-remove:hover:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-negative:hover:not([disabled]), .cbi-dropdown.btn.cbi-button-remove:hover:not([disabled]), .cbi-dropdown.btn.cbi-button-negative:hover:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-remove:active, .cbi-dropdown.cbi-button.cbi-button-remove:active:not([disabled]), .cbi-dropdown.cbi-button.cbi-button-negative:active, .cbi-dropdown.cbi-button.cbi-button-negative:active:not([disabled]), .cbi-dropdown.btn.cbi-button-remove:active, .cbi-dropdown.btn.cbi-button-remove:active:not([disabled]), .cbi-dropdown.btn.cbi-button-negative:active, .cbi-dropdown.btn.cbi-button-negative:active:not([disabled]) { background: var(--menu-btn-bg-default); border: 0 !important; } .cbi-dropdown.cbi-button.cbi-button-remove:focus, .cbi-dropdown.cbi-button.cbi-button-remove.focus, .cbi-dropdown.cbi-button.cbi-button-remove[open], .cbi-dropdown.cbi-button.cbi-button-negative:focus, .cbi-dropdown.cbi-button.cbi-button-negative.focus, .cbi-dropdown.cbi-button.cbi-button-negative[open], .cbi-dropdown.btn.cbi-button-remove:focus, .cbi-dropdown.btn.cbi-button-remove.focus, .cbi-dropdown.btn.cbi-button-remove[open], .cbi-dropdown.btn.cbi-button-negative:focus, .cbi-dropdown.btn.cbi-button-negative.focus, .cbi-dropdown.btn.cbi-button-negative[open] { border: 0 !important; } .cbi-dropdown.cbi-button.cbi-button-remove > ul.preview > li, .cbi-dropdown.cbi-button.cbi-button-remove > ul:not(.dropdown) > li, .cbi-dropdown.cbi-button.cbi-button-negative > ul.preview > li, .cbi-dropdown.cbi-button.cbi-button-negative > ul:not(.dropdown) > li, .cbi-dropdown.btn.cbi-button-remove > ul.preview > li, .cbi-dropdown.btn.cbi-button-remove > ul:not(.dropdown) > li, .cbi-dropdown.btn.cbi-button-negative > ul.preview > li, .cbi-dropdown.btn.cbi-button-negative > ul:not(.dropdown) > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-remove:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-negative:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.btn.cbi-button-remove:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.btn.cbi-button-negative:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button.cbi-button-remove > span.open:before, .cbi-dropdown.cbi-button.cbi-button-negative > span.open:before, .cbi-dropdown.btn.cbi-button-remove > span.open:before, .cbi-dropdown.btn.cbi-button-negative > span.open:before { border-color: var(--fluent-text-on-primary) !important; } .cbi-dropdown.cbi-button > ul.preview, .cbi-dropdown.cbi-button > ul:not(.dropdown), .cbi-dropdown.cbi-button > span.more, .cbi-dropdown.btn > ul.preview, .cbi-dropdown.btn > ul:not(.dropdown), .cbi-dropdown.btn > span.more { border-start-start-radius: calc(var(--fluent-radius-md) - 1px); border-end-start-radius: calc(var(--fluent-radius-md) - 1px); align-self: stretch; pointer-events: auto !important; flex: 1 !important; padding-inline-start: var(--fluent-space-md) !important; padding-inline-end: var(--fluent-space-sm) !important; transition: none !important; } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { border-start-start-radius: calc(var(--fluent-radius-md) - 1px); border-end-start-radius: calc(var(--fluent-radius-md) - 1px); align-self: stretch; pointer-events: auto !important; flex: 1 !important; padding-inline-start: var(--fluent-space-md) !important; padding-inline-end: var(--fluent-space-sm) !important; transition: none !important; } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { border-start-start-radius: calc(var(--fluent-radius-md) - 1px); border-end-start-radius: calc(var(--fluent-radius-md) - 1px); align-self: stretch; pointer-events: auto !important; flex: 1 !important; padding-inline-start: var(--fluent-space-md) !important; padding-inline-end: var(--fluent-space-sm) !important; transition: none !important; } .cbi-dropdown.cbi-button > ul.preview:hover:not([disabled]), .cbi-dropdown.cbi-button > ul:not(.dropdown):hover:not([disabled]), .cbi-dropdown.cbi-button > span.more:hover:not([disabled]), .cbi-dropdown.btn > ul.preview:hover:not([disabled]), .cbi-dropdown.btn > ul:not(.dropdown):hover:not([disabled]), .cbi-dropdown.btn > span.more:hover:not([disabled]) { background: var(--menu-btn-bg-hover); } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:hover:not([disabled]) { background: var(--menu-btn-bg-hover); } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:hover:not([disabled]) { background: var(--menu-btn-bg-hover); } .cbi-dropdown.cbi-button > ul.preview:active:not([disabled]), .cbi-dropdown.cbi-button > ul:not(.dropdown):active:not([disabled]), .cbi-dropdown.cbi-button > span.more:active:not([disabled]), .cbi-dropdown.btn > ul.preview:active:not([disabled]), .cbi-dropdown.btn > ul:not(.dropdown):active:not([disabled]), .cbi-dropdown.btn > span.more:active:not([disabled]) { background: var(--menu-btn-bg-active); } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:active:not([disabled]) { background: var(--menu-btn-bg-active); } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown:active:not([disabled]) { background: var(--menu-btn-bg-active); } .cbi-dropdown.cbi-button > ul.preview, .cbi-dropdown.cbi-button > ul:not(.dropdown), .cbi-dropdown.btn > ul.preview, .cbi-dropdown.btn > ul:not(.dropdown) { height: 100%; min-height: unset; align-items: center; margin: 0; padding-block: 0; display: flex; -webkit-mask-image: none !important; mask-image: none !important; } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { height: 100%; min-height: unset; align-items: center; margin: 0; padding-block: 0; display: flex; -webkit-mask-image: none !important; mask-image: none !important; } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { height: 100%; min-height: unset; align-items: center; margin: 0; padding-block: 0; display: flex; -webkit-mask-image: none !important; mask-image: none !important; } .cbi-dropdown.cbi-button > ul.preview > li, .cbi-dropdown.cbi-button > ul:not(.dropdown) > li, .cbi-dropdown.btn > ul.preview > li, .cbi-dropdown.btn > ul:not(.dropdown) > li { font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); color: inherit; } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); color: inherit; } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); color: inherit; } .cbi-dropdown.cbi-button > ul.preview > li[selected], .cbi-dropdown.cbi-button > ul.preview > li[display], .cbi-dropdown.cbi-button > ul:not(.dropdown) > li[selected], .cbi-dropdown.cbi-button > ul:not(.dropdown) > li[display], .cbi-dropdown.btn > ul.preview > li[selected], .cbi-dropdown.btn > ul.preview > li[display], .cbi-dropdown.btn > ul:not(.dropdown) > li[selected], .cbi-dropdown.btn > ul:not(.dropdown) > li[display] { align-items: center; display: inline-flex; } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[selected] { align-items: center; display: inline-flex; } .cbi-dropdown.cbi-button:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] { align-items: center; display: inline-flex; } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[selected] { align-items: center; display: inline-flex; } .cbi-dropdown.btn:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li[display] { align-items: center; display: inline-flex; } .cbi-dropdown.cbi-button > span.open, .cbi-dropdown.btn > span.open { width: 30px; height: 100%; color: inherit; border-start-end-radius: calc(var(--fluent-radius-md) - 1px); border-end-end-radius: calc(var(--fluent-radius-md) - 1px); justify-content: center; align-items: center; margin-inline-end: 0; font-size: 0; display: inline-flex; pointer-events: auto !important; transition: color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; margin-inline-start: 0 !important; } .cbi-dropdown.cbi-button > span.open:before, .cbi-dropdown.btn > span.open:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-chevron-down-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-chevron-down-20-regular); mask-image: var(--fluent-mask-chevron-down-20-regular); -webkit-user-select: none; user-select: none; content: ""; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; transition: transform .2s cubic-bezier(.4, 0, .23, 1) !important; } .cbi-dropdown.cbi-button > span.open svg, .cbi-dropdown.btn > span.open svg { width: 16px; height: 16px; color: inherit !important; } .cbi-dropdown.cbi-button > span.open:has(svg):before { display: none !important; } .cbi-dropdown.btn > span.open:has(svg):before { display: none !important; } .cbi-dropdown.cbi-button > span.open:hover:not([disabled]), .cbi-dropdown.btn > span.open:hover:not([disabled]) { background: var(--menu-btn-bg-hover); } .cbi-dropdown.cbi-button > span.open:active:not([disabled]), .cbi-dropdown.btn > span.open:active:not([disabled]), .cbi-dropdown.cbi-button[open] > span.open, .cbi-dropdown.btn[open] > span.open { background: var(--menu-btn-bg-active); } .cbi-dropdown.cbi-button[open] > span.open:before, .cbi-dropdown.btn[open] > span.open:before { transform: rotate(180deg); } .cbi-dropdown.cbi-button:focus-visible, .cbi-dropdown.btn:focus-visible { outline: 2px solid var(--fluent-focus-color); outline-offset: 2px; } .cbi-dropdown.cbi-button[disabled], .cbi-dropdown.btn[disabled] { opacity: 1; cursor: not-allowed; background: var(--fluent-bg-active) !important; border-color: var(--fluent-bg-active) !important; border-bottom-color: var(--fluent-bg-active) !important; color: var(--fluent-text-disabled) !important; pointer-events: none !important; } .cbi-dropdown.cbi-button[disabled] *, .cbi-dropdown.btn[disabled] * { pointer-events: none !important; } .cbi-dropdown.cbi-button[disabled] > ul.preview > li, .cbi-dropdown.cbi-button[disabled] > ul:not(.dropdown) > li, .cbi-dropdown.btn[disabled] > ul.preview > li, .cbi-dropdown.btn[disabled] > ul:not(.dropdown) > li { color: var(--fluent-text-disabled) !important; } .cbi-dropdown.cbi-button[disabled]:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-disabled) !important; } .cbi-dropdown.btn[disabled]:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown > li { color: var(--fluent-text-disabled) !important; } .cbi-dropdown.cbi-button[disabled] > span.open:before, .cbi-dropdown.btn[disabled] > span.open:before { border-color: var(--fluent-text-disabled) !important; } .cbi-dropdown.cbi-button.spinning, .cbi-dropdown.btn.spinning { pointer-events: none !important; padding-inline-start: 0 !important; } .cbi-dropdown.cbi-button.spinning *, .cbi-dropdown.btn.spinning * { pointer-events: none !important; } .cbi-dropdown.cbi-button.spinning:before, .cbi-dropdown.btn.spinning:before { content: ""; inset-inline-start: 12px; --size: 16px; --indicator-size: 2px; height: var(--size); width: var(--size); box-sizing: border-box; border: var(--indicator-size) solid color-mix(in srgb, currentColor 20%, transparent); z-index: 2; background: none; border-top-color: currentColor; border-right-color: currentColor; border-radius: 50%; animation: 1s infinite fluent-spin-swing; position: absolute; top: 50%; transform: translateY(-50%); } .cbi-dropdown.cbi-button.spinning > ul.preview, .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown), .cbi-dropdown.cbi-button.spinning > span.more, .cbi-dropdown.btn.spinning > ul.preview, .cbi-dropdown.btn.spinning > ul:not(.dropdown), .cbi-dropdown.btn.spinning > span.more { padding-inline-start: 36px !important; } .cbi-dropdown.cbi-button.spinning:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { padding-inline-start: 36px !important; } .cbi-dropdown.btn.spinning:not([open]):not(:has( > ul:not(.dropdown))):not(:has( > ul.preview)) > ul.dropdown { padding-inline-start: 36px !important; } .cbi-dynlist { align-items: stretch; gap: var(--fluent-space-sm, 8px); cursor: text; flex-direction: column; width: 100%; max-width: 400px; min-height: 30px; line-height: 1.3; display: flex; position: relative; } .cbi-dynlist[name="sshkeys"], .cbi-dynlist[name="sshkeys"] > .item { max-width: none; } .cbi-dynlist > .item { pointer-events: auto; width: 100%; max-width: 100%; color: var(--fluent-text); cursor: move; -webkit-user-select: text; user-select: text; outline: 0; display: block; position: relative; } .cbi-dynlist > .item.drag-over { border-top: 1px solid var(--fluent-primary); } .cbi-dynlist > .item.dragging { opacity: .5; } .cbi-dynlist > .item > span { pointer-events: none; white-space: normal; word-break: break-all; min-height: var(--fluent-input-height); padding-block: var(--fluent-space-xs); padding-inline: var(--fluent-space-sm) 42px; color: var(--fluent-text); background: var(--fluent-bg-hover); border: 1px solid var(--fluent-border); border-bottom-width: 2px; border-bottom-color: var(--fluent-border); border-radius: var(--fluent-radius-md); box-sizing: border-box; outline: 0; align-items: center; display: flex; } .cbi-dynlist > .item:hover > span { background: var(--fluent-bg-active); border-color: var(--fluent-border-hover); border-bottom-color: var(--fluent-border-hover); } .cbi-dynlist > .item:after { content: ""; inset-inline-end: 2px; pointer-events: auto; border-radius: var(--fluent-radius-round, 50%); cursor: pointer; z-index: 2; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard); background-color: #0000; background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; border: none; outline: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 28px !important; height: 28px !important; } .cbi-dynlist > .item:after:hover { background-color: var(--fluent-error-light); background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } .cbi-dynlist > .item:after:active { background-color: var(--fluent-error-hover); background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } [data-theme="dark"] .cbi-dynlist > .item:after { background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } [data-theme="dark"] .cbi-dynlist > .item:after:hover { background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } [data-theme="dark"] .cbi-dynlist > .item:after:active { background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } .cbi-dynlist > .add-item { box-sizing: border-box; align-items: center; gap: 0; width: 100%; min-width: 0; max-width: 100%; display: flex; } .cbi-dynlist > .add-item > input, .cbi-dynlist > .add-item > .cbi-dropdown { box-sizing: border-box; flex: auto; width: 100%; min-width: 0; max-width: 100%; } .cbi-dynlist > .add-item > input { border-inline-end: none; border-start-end-radius: 0; border-end-end-radius: 0; } .cbi-dynlist > .add-item > input:focus { border-inline-end: none; } .cbi-dynlist > .add-item > input.drag-over { border-top: 1px solid var(--fluent-primary); } .cbi-dynlist > .add-item > .cbi-dropdown { height: var(--fluent-input-height); min-height: var(--fluent-input-height); } .cbi-dynlist > .add-item > .cbi-button-add { flex: 0 0 var(--fluent-input-height); max-width: var(--fluent-input-height); height: var(--fluent-input-height); border-bottom-width: 2px; border-bottom-color: var(--fluent-btn-primary-bg); cursor: pointer; box-sizing: border-box; background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; border-start-start-radius: 0; border-start-end-radius: var(--fluent-radius-md); border-end-end-radius: var(--fluent-radius-md); border-end-start-radius: 0; justify-content: center; align-items: center; display: flex; width: var(--fluent-input-height) !important; min-width: var(--fluent-input-height) !important; color: #0000 !important; padding: 0 !important; font-size: 0 !important; } .cbi-dynlist > .add-item > .cbi-button-add:hover { background-color: var(--fluent-btn-primary-bg-hover); border-color: var(--fluent-btn-primary-bg-hover); border-bottom-color: var(--fluent-btn-primary-bg-hover); background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; } .cbi-dynlist > .add-item > .cbi-button-add:active { background-color: var(--fluent-btn-primary-bg-active); border-color: var(--fluent-btn-primary-bg-active); border-bottom-color: var(--fluent-btn-primary-bg-active); background-image: url("data:image/svg+xml,"); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; } .cbi-dynlist > .add-item > .cbi-button-add.drag-over { border-top: 1px solid var(--fluent-primary); } .cbi-dynlist > .add-item:has( > .cbi-button-add) > input { border-start-end-radius: 0; border-end-end-radius: 0; } .cbi-dynlist > .add-item:has( > .cbi-button-add) > .cbi-dropdown { border-start-end-radius: 0; border-end-end-radius: 0; } .cbi-dynlist > .add-item:not(:has( > .cbi-button-add)) > input { border-radius: var(--fluent-radius-md); } .cbi-dynlist > .add-item:not(:has( > .cbi-button-add)) > .cbi-dropdown { border-radius: var(--fluent-radius-md); } .cbi-dynlist > .cbi-dynlist > .add-item[ondrop] > input { min-width: 13rem; } .cbi-dynlist cbi-dropdown > ul.dropdown > li[placeholder], .cbi-dynlist .cbi-dropdown > ul.dropdown > li[placeholder] { display: none !important; } .cbi-dynlist cbi-dropdown > ul.dropdown > li, .cbi-dynlist .cbi-dropdown > ul.dropdown > li { padding-inline-start: var(--fluent-space-xs) !important; } .cbi-dynlist cbi-dropdown > ul.dropdown > li:before, .cbi-dynlist cbi-dropdown > ul.dropdown > li:after, .cbi-dynlist .cbi-dropdown > ul.dropdown > li:before, .cbi-dynlist .cbi-dropdown > ul.dropdown > li:after { content: none !important; display: none !important; } .control-group:has( > input.cbi-input-password) > input.cbi-input-password + .cbi-button { justify-content: center; align-items: center; display: inline-flex; width: var(--fluent-input-height) !important; padding: 0 !important; font-size: 0 !important; } .control-group:has( > input.cbi-input-password[type="password"]) > input.cbi-input-password + .cbi-button:after { content: url("data:image/svg+xml;utf8,"); --fluent-mask-eye-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-eye-20-regular); mask-image: var(--fluent-mask-eye-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } .control-group:has( > input.cbi-input-password[type="password"]) > input.cbi-input-password + .cbi-button:hover:after { background: var(--fluent-text) !important; } .control-group:has( > input.cbi-input-password[type="text"]) > input.cbi-input-password + .cbi-button:after { content: url("data:image/svg+xml;utf8,"); --fluent-mask-eye-off-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-eye-off-20-regular); mask-image: var(--fluent-mask-eye-off-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } .control-group:has( > input.cbi-input-password[type="text"]) > input.cbi-input-password + .cbi-button:hover:after { background: var(--fluent-text) !important; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) { position: relative; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)):hover:not([disabled]):not(:focus):not(:focus-within):not(.focus):not([open]) { border-color: var(--fluent-input-border-hover); border-bottom-color: var(--fluent-input-border-bottom-hover); } :is(.control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)):focus, .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)):focus-within, .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)).focus, .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button))[open]) { border-bottom-color: var(--fluent-input-border-bottom-focus); outline: none; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)):focus:after { transform: scaleX(1); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)):focus-within:after { transform: scaleX(1); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)).focus:after { transform: scaleX(1); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button))[open]:after { transform: scaleX(1); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)):after { box-sizing: border-box; content: ""; inset-inline-start: 1px; bottom: -1px; background: var(--fluent-input-border-bottom-focus); height: 2px; transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard); pointer-events: none; border-end-end-radius: var(--fluent-radius-sm); border-end-start-radius: var(--fluent-radius-sm); position: absolute; inset-inline-end: 1px; transform: scaleX(0); } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) { align-items: stretch; gap: 0; display: flex; padding: 0 !important; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) > input.cbi-input-password { min-width: 0; color: var(--fluent-text); flex: 1; box-shadow: none !important; height: 100% !important; padding: 0 var(--fluent-space-sm) !important; background: none !important; border: none !important; outline: none !important; margin: 0 !important; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) > input.cbi-input-password + .cbi-button { border-start-start-radius: 0; border-start-end-radius: var(--fluent-radius-md); border-end-end-radius: var(--fluent-radius-md); border-end-start-radius: 0; flex-shrink: 0; box-shadow: none !important; background: none !important; border: none !important; height: 100% !important; margin: 0 !important; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) > input.cbi-input-password + .cbi-button:hover { background: var(--fluent-bg-hover) !important; } .control-group:has( > input.cbi-input-password):not(:has( > .cbi-button ~ .cbi-button)) > input.cbi-input-password + .cbi-button:active { background: var(--fluent-bg-active) !important; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button) { align-items: center; gap: 0; display: flex; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button) > input.cbi-input-password { flex: 1; min-width: 0; border-inline-end: none !important; border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; margin: 0 !important; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button) > input.cbi-input-password + .cbi-button { flex-shrink: 0; background: var(--fluent-input-bg) !important; border-inline-start: none !important; border-color: var(--fluent-input-border) !important; border-bottom-color: var(--fluent-input-border-bottom) !important; border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; margin: 0 !important; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button) > input.cbi-input-password + .cbi-button:hover { background: var(--fluent-bg-hover) !important; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button) > .cbi-button ~ .cbi-button { margin-inline-start: var(--fluent-space-sm) !important; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button):has( > input.cbi-input-password:hover) > input.cbi-input-password + .cbi-button { border-color: var(--fluent-input-border-hover) !important; border-bottom-color: var(--fluent-input-border-bottom-hover) !important; } .control-group:has( > input.cbi-input-password):has( > .cbi-button ~ .cbi-button):has( > input.cbi-input-password:focus) > input.cbi-input-password + .cbi-button { border-bottom-color: var(--fluent-input-border-bottom-focus) !important; } .password-input { align-items: stretch; display: flex; position: relative; } .password-input input { box-sizing: border-box; width: 100%; flex: 1; padding-inline-end: var(--fluent-space-xl); } .password-input .toggle-password { inset-inline-end: 1px; height: calc(var(--fluent-input-height) - 2px); width: calc(var(--fluent-input-height) - 2px); color: var(--fluent-text-secondary); cursor: pointer; background: none; border: none; border-start-start-radius: 0; border-start-end-radius: var(--fluent-radius-md); border-end-end-radius: var(--fluent-radius-md); border-end-start-radius: 0; padding: 0; position: absolute; top: 1px; } .password-input .toggle-password:hover { color: var(--fluent-text); background: var(--fluent-bg-hover); } .password-input .toggle-password svg { width: 16px; height: 16px; } .password-strength { gap: var(--fluent-space-xxs); margin-top: var(--fluent-space-xxs); display: flex; } .password-strength .strength-bar { background: var(--fluent-border); height: 3px; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); border-radius: 2px; flex: 1; } .password-strength.strength-weak .strength-bar:nth-child(-n+1) { background: var(--fluent-error); } .password-strength.strength-medium .strength-bar:nth-child(-n+2) { background: var(--fluent-warning); } .password-strength.strength-strong .strength-bar { background: var(--fluent-success); } input[type="text"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="text"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="text"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } input[type="password"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="password"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="password"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } input[type="email"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="email"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="email"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } input[type="number"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="number"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="number"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } input[type="search"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="search"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="search"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } input[type="tel"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="tel"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="tel"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } input[type="url"].cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } input[type="url"].cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } input[type="url"].cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } select.cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } select.cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } select.cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } .cbi-dropdown.cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } .cbi-dropdown.cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } .cbi-dropdown.cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } .fluent-custom-select.cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } .fluent-custom-select.cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } .fluent-custom-select.cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } .cbi-input-text.cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } .cbi-input-text.cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } .cbi-input-text.cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } .cbi-input-password.cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } .cbi-input-password.cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } .cbi-input-password.cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } .password-input.cbi-input-invalid { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; background-image: linear-gradient(0deg, var(--fluent-error) 0%, var(--fluent-error) 100%) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; } .password-input.cbi-input-invalid:hover:not(:focus) { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } .password-input.cbi-input-invalid:focus { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; box-shadow: 0 0 0 1px var(--fluent-error) inset !important; background-size: 100% 2px !important; } .fluent-error-message { color: var(--fluent-error); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-regular); animation: fluent-error-fade-in .15s var(--fluent-easing-standard) forwards; align-items: center; gap: 6px; margin-top: 4px; line-height: 16px; display: flex; } .fluent-error-message svg { color: var(--fluent-error); flex-shrink: 0; } @keyframes fluent-error-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } input[data-tooltip-style="error"], .cbi-input-invalid[data-tooltip-style="error"] { border-color: var(--fluent-error) !important; border-bottom-color: var(--fluent-error) !important; } .errorbox { background: var(--fluent-error-light); border: 1px solid var(--fluent-error); border-radius: var(--fluent-radius-md); padding: var(--fluent-space-md); margin-bottom: var(--fluent-space-md); color: var(--fluent-error); font-size: var(--fluent-font-size-base); } .errorbox h4 { font-weight: var(--fluent-font-weight-semibold); margin: 0 0 var(--fluent-space-xs); } textarea, .cbi-input-textarea { height: unset; } textarea::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .cbi-input-textarea::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } textarea::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .cbi-input-textarea::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } textarea::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .cbi-input-textarea::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } textarea::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .cbi-input-textarea::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } textarea::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .cbi-input-textarea::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } textarea::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .cbi-input-textarea::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } textarea::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .cbi-input-textarea::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } textarea::-webkit-scrollbar-corner { background: none; display: none; } .cbi-input-textarea::-webkit-scrollbar-corner { background: none; display: none; } textarea::-webkit-resizer { background: none; } .cbi-input-textarea::-webkit-resizer { background: none; } textarea, .cbi-input-textarea { width: 100%; max-width: 100%; min-height: 80px; padding: var(--fluent-space-sm); resize: vertical; box-sizing: border-box; line-height: var(--fluent-line-height-relaxed); } textarea:disabled, .cbi-input-textarea:disabled { background: var(--fluent-input-bg-disabled); color: var(--fluent-text-disabled); cursor: not-allowed; border-color: var(--fluent-border); resize: none; background-image: none; } .textarea-wrapper { position: relative; } .textarea-wrapper textarea, .textarea-wrapper .cbi-input-textarea { padding-bottom: calc(var(--fluent-space-xl) + var(--fluent-space-xs)); } .textarea-wrapper .char-count { bottom: var(--fluent-space-xs); font-size: var(--fluent-font-size-xs); color: var(--fluent-text-disabled); position: absolute; inset-inline-end: var(--fluent-space-sm); } select { appearance: none; cursor: pointer; padding-inline-end: var(--fluent-space-xl); } select:after { content: ""; } select.cbi-input-select { background-image: linear-gradient(var(--fluent-input-border-bottom-focus), var(--fluent-input-border-bottom-focus)),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTAgNiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEgMWw0IDQgNC00IiBzdHJva2U9IiM2MTYxNjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==); background-position: bottom, right 10px center; background-repeat: no-repeat; background-size: 0 2px, 10px 6px; background-origin: border-box; } html[dir="rtl"] select.cbi-input-select, body[data-fluent-dir="rtl"] select.cbi-input-select { background-position: bottom, 10px; } select.cbi-input-select { transition: background-size var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard); background-repeat: no-repeat; background-origin: border-box; } select.cbi-input-select:hover:not([disabled]):not(:focus) { border-color: var(--fluent-input-border-hover); border-bottom-color: var(--fluent-input-border-bottom-hover); } select.cbi-input-select:focus { border-bottom-color: var(--fluent-input-border-bottom-focus); background-size: 100% 2px, 10px 6px; outline: none; } select.cbi-input-select { appearance: none; cursor: pointer; box-sizing: border-box; max-width: 100%; padding-inline-end: var(--fluent-space-xl); } select.cbi-input-select[multiple] { height: auto; min-height: calc(var(--fluent-input-height)*4); padding: var(--fluent-space-xxs); background-image: none !important; background-position: initial !important; background-size: initial !important; } select.cbi-input-select[multiple] option { padding: var(--fluent-space-xxs) var(--fluent-space-xs); border-radius: var(--fluent-radius-sm); } select.cbi-input-select[multiple] option:checked { background: var(--fluent-primary-lightest); color: var(--fluent-primary); } select.cbi-input-select[multiple] option:hover { background: var(--fluent-bg-hover); } select:disabled { background-color: var(--fluent-input-bg-disabled); color: var(--fluent-text-disabled); cursor: not-allowed; border-color: var(--fluent-border); background-image: none; } .Dashboard table.table { box-sizing: border-box; border-collapse: collapse !important; table-layout: auto !important; width: 100% !important; display: table !important; } .Dashboard table.table thead, .Dashboard table.table tbody, .Dashboard table.table tfoot { display: table-header-group !important; } .Dashboard table.table tr, .Dashboard table.table .tr { background: none; display: table-row !important; } .Dashboard table.table tr:hover, .Dashboard table.table .tr:hover { background-color: var(--fluent-table-row-hover); } .Dashboard table.table th, .Dashboard table.table .th, .Dashboard table.table td, .Dashboard table.table .td { font-size: var(--fluent-font-size-sm) !important; color: var(--fluent-text) !important; border-bottom: 1px solid var(--fluent-table-border) !important; vertical-align: middle !important; text-align: left !important; white-space: nowrap !important; padding: 8px 12px !important; display: table-cell !important; } .Dashboard table.table th { background: var(--fluent-table-header-bg) !important; font-weight: var(--fluent-font-weight-semibold) !important; border-bottom: 2px solid var(--fluent-table-border) !important; color: var(--fluent-text-secondary) !important; } .Dashboard table.table tfoot { display: table-footer-group !important; } .Dashboard table.table tfoot td { font-weight: var(--fluent-font-weight-semibold) !important; border-top: 2px solid var(--fluent-table-border) !important; border-bottom: none !important; } .cbi-value-description abbr[title] { cursor: help; color: var(--fluent-text-link); border-bottom: 1px dotted var(--fluent-border-hover); text-decoration: none; display: inline-block; position: relative; } .cbi-value-description abbr[title]:after { content: attr(title); box-sizing: border-box; width: max-content; max-width: 280px; padding: var(--fluent-space-xs) var(--fluent-space-sm); border-radius: var(--fluent-radius-md); background: var(--fluent-tooltip-bg); color: var(--fluent-tooltip-text); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-sm); line-height: 1.4; font-weight: var(--fluent-font-weight-regular); text-align: start; box-shadow: var(--fluent-shadow-md); opacity: 0; visibility: hidden; pointer-events: none; z-index: var(--fluent-zindex-tooltip); transition: opacity .12s var(--fluent-easing-standard),transform .12s var(--fluent-easing-standard),visibility .12s var(--fluent-easing-standard); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); } .cbi-value-description abbr[title]:before { content: ""; background: var(--fluent-tooltip-bg); opacity: 0; visibility: hidden; pointer-events: none; width: 8px; height: 8px; z-index: calc(var(--fluent-zindex-tooltip) - 1); transition: opacity .12s var(--fluent-easing-standard),transform .12s var(--fluent-easing-standard),visibility .12s var(--fluent-easing-standard); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px) rotate(45deg); } .cbi-value-description abbr[title]:hover:after, .cbi-value-description abbr[title]:hover:before { opacity: 1; visibility: visible; } .cbi-value-description abbr[title]:hover:after { transform: translateX(-50%) translateY(0); } .cbi-value-description abbr[title]:hover:before { transform: translateX(-50%) translateY(0) rotate(45deg); } .cbi-tooltip-container { align-items: center; gap: var(--fluent-space-xs); display: inline-flex; position: relative; } .cbi-tooltip { top: calc(100% + var(--fluent-space-xs)); min-width: 12rem; max-width: min(20rem, 80vw); padding: var(--fluent-space-sm) var(--fluent-space-md); background: var(--fluent-bg-card); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-md); box-shadow: var(--fluent-shadow-md); color: var(--fluent-text); font-family: var(--fluent-font-family); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); opacity: 0; transform: translateY(var(--fluent-space-xs)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard),transform var(--fluent-duration-fast) var(--fluent-easing-standard),display var(--fluent-duration-fast) var(--fluent-easing-standard) allow-discrete; pointer-events: none; z-index: var(--fluent-zindex-tooltip); display: none; position: absolute; inset-inline-start: 0; } .cbi-tooltip:before { content: ""; top: -4px; background-color: var(--fluent-bg-card); border-inline-start: 1px solid var(--fluent-border); border-top: 1px solid var(--fluent-border); width: 8px; height: 8px; position: absolute; inset-inline-start: 30px; transform: rotate(45deg); } .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { opacity: 1; pointer-events: auto; display: block; transform: translateY(0); } @starting-style { .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { opacity: 0; transform: translateY(var(--fluent-space-xs)); } } span[data-tooltip] { align-items: center; gap: var(--fluent-space-xs); cursor: help; color: var(--fluent-text-secondary); display: inline-flex; position: relative; } span[data-tooltip] .label { color: var(--fluent-text); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); border-bottom: 1px dashed var(--fluent-border-hover); } label[data-tooltip] { align-items: center; gap: var(--fluent-space-xs); min-height: var(--fluent-checkbox-size); color: var(--fluent-text); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); cursor: help; display: inline-flex; position: relative; } label[data-tooltip] > input[type="radio"], label[data-tooltip] > input[type="checkbox"] { inline-size: var(--fluent-checkbox-size); block-size: var(--fluent-checkbox-size); flex: none; margin: 0; } label[data-tooltip]:after { content: attr(data-tooltip); top: calc(100% + var(--fluent-space-xs)); min-width: 12rem; max-width: min(20rem, 80vw); padding: var(--fluent-space-sm) var(--fluent-space-md); background: var(--fluent-bg-card); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-md); box-shadow: var(--fluent-shadow-md); color: var(--fluent-text); font-size: var(--fluent-font-size-sm); line-height: var(--fluent-line-height-normal); white-space: normal; opacity: 0; visibility: hidden; transform: translateY(var(--fluent-space-xs)); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard),transform var(--fluent-duration-fast) var(--fluent-easing-standard),visibility var(--fluent-duration-fast) var(--fluent-easing-standard); pointer-events: none; z-index: var(--fluent-zindex-tooltip); position: absolute; inset-inline-start: 0; } label[data-tooltip]:before { content: ""; top: calc(100% + var(--fluent-space-xs) - 4px); background-color: var(--fluent-bg-card); border-inline-start: 1px solid var(--fluent-border); border-top: 1px solid var(--fluent-border); opacity: 0; visibility: hidden; width: 8px; height: 8px; transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard),visibility var(--fluent-duration-fast) var(--fluent-easing-standard); pointer-events: none; z-index: calc(var(--fluent-zindex-tooltip) + 1); position: absolute; inset-inline-start: 30px; transform: rotate(45deg); } label[data-tooltip]:hover:after, label[data-tooltip]:focus-within:after, label[data-tooltip]:hover:before, label[data-tooltip]:focus-within:before { opacity: 1; visibility: visible; } label[data-tooltip]:hover:after, label[data-tooltip]:focus-within:after { transform: translateY(0); } .zonebadge .cbi-tooltip { transform: translateX(-50%) translateY(var(--fluent-space-xs)); left: 50%; } .zonebadge .cbi-tooltip:before { left: 50%; transform: translateX(-50%) rotate(45deg); } .zonebadge:hover .cbi-tooltip:not(:empty) { opacity: 1; pointer-events: auto; display: block; transform: translateX(-50%) translateY(0); } @starting-style { .zonebadge:hover .cbi-tooltip:not(:empty) { opacity: 0; transform: translateX(-50%) translateY(var(--fluent-space-xs)); } } @media (min-width: 768px) { .zonebadge .cbi-tooltip { transform: translateY(var(--fluent-space-xs)); inset-inline-start: 0; } .zonebadge .cbi-tooltip:before { inset-inline-start: 30px; transform: rotate(45deg); } .zonebadge:hover .cbi-tooltip:not(:empty) { opacity: 1; pointer-events: auto; display: block; transform: translateY(0); } @starting-style { .zonebadge:hover .cbi-tooltip:not(:empty) { opacity: 0; transform: translateY(var(--fluent-space-xs)); } } } label[data-tooltip] { align-items: center !important; gap: var(--fluent-space-sm) !important; cursor: help !important; color: var(--fluent-text-secondary) !important; display: inline-flex !important; } :is(.cbi-section:has(.cbi-tooltip-container:hover), .controls:has(label[data-tooltip]:hover)) { z-index: 100 !important; } .fluent-menu-search { flex-shrink: 0; width: min(420px, 100%); position: relative; } .fluent-menu-search .fluent-menu-search-input { border-radius: var(--fluent-radius-md); border: 1px solid var(--fluent-border); background: var(--fluent-bg-hover); width: 100%; height: 32px; color: var(--fluent-text); font-size: var(--fluent-font-size-base); transition: all var(--fluent-duration-fast) var(--fluent-easing-standard); box-sizing: border-box; padding-block: 0; padding-inline: 32px 52px; box-shadow: inset 0 1px #ffffff14; } .fluent-menu-search .fluent-menu-search-input:hover { border-color: var(--fluent-input-border-hover); } .fluent-menu-search .fluent-menu-search-input:focus { border-color: var(--fluent-primary); box-shadow: 0 0 0 1px var(--fluent-primary); background: var(--fluent-input-bg); outline: none; } .fluent-menu-search .fluent-menu-search-input::placeholder { color: var(--fluent-text-secondary); opacity: .8; } .fluent-menu-search .fluent-menu-search-input::-webkit-search-cancel-button { appearance: none; display: none; } @media (max-width: 767px) { .fluent-menu-search .fluent-menu-search-input { padding-inline-end: var(--fluent-space-sm); } } .fluent-menu-search .fluent-menu-search-hotkey { inset-inline-end: 8px; background: var(--fluent-bg); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-sm); color: var(--fluent-text-secondary); pointer-events: none; justify-content: center; align-items: center; padding: 4px 6px; font-size: 11px; line-height: 1; display: flex; position: absolute; top: 50%; transform: translateY(-50%); } @media (max-width: 767px) { .fluent-menu-search .fluent-menu-search-hotkey { display: none; } } .fluent-menu-search:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-search-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-search-20-regular); mask-image: var(--fluent-mask-search-20-regular); -webkit-user-select: none; user-select: none; top: 50%; pointer-events: none; z-index: 1; display: inline-block; position: absolute; inset-inline-start: 10px; transform: translateY(-50%); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } .fluent-menu-search .fluent-menu-search-overlay { background: var(--fluent-card-bg); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-md); box-shadow: var(--fluent-shadow-medium); z-index: var(--fluent-zindex-popover, 1050); max-height: 400px; position: absolute; overflow-y: auto; inset-inline: 0 !important; top: calc(100% + 4px) !important; } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .fluent-menu-search .fluent-menu-search-overlay::-webkit-scrollbar-corner { background: none; display: none; } .fluent-menu-search .fluent-menu-search-overlay::-webkit-resizer { background: none; } .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list { padding: var(--fluent-space-xs) 0; margin: 0; list-style: none; } .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list .fluent-menu-search-item { padding: var(--fluent-space-xs) var(--fluent-space-sm); cursor: pointer; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); -webkit-user-select: none; user-select: none; flex-direction: column; gap: 2px; display: flex; } .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list .fluent-menu-search-item:hover, .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list .fluent-menu-search-item.selected { background: var(--fluent-sidebar-item-hover); } .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list .fluent-menu-search-item .fluent-menu-search-label { color: var(--fluent-text); font-weight: var(--fluent-font-weight-regular); font-size: 13px; } .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list .fluent-menu-search-item .fluent-menu-search-path { color: var(--fluent-text-secondary); font-size: 11px; } .fluent-menu-search .fluent-menu-search-overlay .fluent-menu-search-list .fluent-menu-search-more { padding: var(--fluent-space-xs) var(--fluent-space-sm); color: var(--fluent-text-secondary); text-align: center; font-size: 11px; font-style: italic; } .modal:has(.fluent-menu-editor__rename-dialog) { max-width: 480px; } .fluent-menu-editor__rename-dialog { gap: var(--fluent-space-sm); flex-direction: column; display: flex; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control { position: relative; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:hover:not([disabled]):not(:focus):not(:focus-within):not(.focus):not([open]) { border-color: var(--fluent-input-border-hover); border-bottom-color: var(--fluent-input-border-bottom-hover); } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:focus, .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:focus-within, .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control.focus, .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control[open] { border-bottom-color: var(--fluent-input-border-bottom-focus); outline: none; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:focus:after, .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:focus-within:after, .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control.focus:after, .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control[open]:after { transform: scaleX(1); } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control:after { box-sizing: border-box; content: ""; inset-inline-start: 1px; bottom: -1px; background: var(--fluent-input-border-bottom-focus); height: 2px; transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard); pointer-events: none; border-end-end-radius: var(--fluent-radius-sm); border-end-start-radius: var(--fluent-radius-sm); position: absolute; inset-inline-end: 1px; transform: scaleX(0); } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control { align-items: stretch; gap: 0; min-width: 0; padding: 0; display: flex; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control > .cbi-input-text { min-width: 0; height: 100%; padding: 0 var(--fluent-space-sm); color: var(--fluent-text); box-shadow: none; background: none; border: 0; outline: none; flex: auto; margin: 0; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control > .fluent-menu-editor__item-reset { flex: 0 0 var(--fluent-input-height); width: var(--fluent-input-height); height: 100%; box-shadow: none; background: none; border: 0; border-start-start-radius: 0; border-end-start-radius: 0; margin: 0; } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control > .fluent-menu-editor__item-reset:hover { background: var(--fluent-bg-hover); } .fluent-menu-editor__rename-dialog > .fluent-menu-editor__rename-control > .fluent-menu-editor__item-reset:active { background: var(--fluent-bg-active); } .fluent-menu-editor__rename-dialog > .right { justify-content: flex-end; gap: var(--fluent-space-sm); margin-top: var(--fluent-space-xs); display: flex; } .fluent-menu-editor { gap: var(--fluent-space-md); flex-direction: column; width: 100%; display: flex; } .fluent-menu-editor__actions { justify-content: flex-end; gap: var(--fluent-space-sm); flex-wrap: wrap; display: flex; } .fluent-menu-editor__notice, .fluent-menu-editor__validation { padding: var(--fluent-space-sm) var(--fluent-space-md); color: var(--fluent-error); background: var(--fluent-error-light); border: 1px solid var(--fluent-error); border-radius: var(--fluent-radius-md); } .fluent-menu-editor__validation:empty { display: none; } .fluent-menu-editor__categories { align-items: start; gap: var(--fluent-space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); display: grid; } .fluent-menu-editor__category { --fluent-menu-drop-offset: calc(var(--fluent-space-sm) * -1); min-width: 0; padding: var(--fluent-space-sm); background: var(--fluent-bg-card); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-lg); transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard),opacity var(--fluent-duration-fast) var(--fluent-easing-standard); position: relative; } .fluent-menu-editor__category.is-hidden { opacity: .55; } .fluent-menu-editor__category.is-invalid { border-color: var(--fluent-error); } .fluent-menu-editor__category.is-dragging { opacity: .55; } .fluent-menu-editor__category.is-drag-over { border-color: var(--fluent-primary); background: var(--fluent-primary-lightest); } .fluent-menu-editor__category-header { align-items: center; gap: var(--fluent-space-xs); cursor: pointer; min-width: 0; list-style: none; display: flex; } .fluent-menu-editor__category-header::-webkit-details-marker { display: none; } .fluent-menu-editor__category-header:after { content: url("data:image/svg+xml;utf8,"); --fluent-mask-chevron-right-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-chevron-right-20-regular); mask-image: var(--fluent-mask-chevron-right-20-regular); -webkit-user-select: none; user-select: none; transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard); margin-inline-start: auto; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } html[dir="rtl"] .fluent-menu-editor__category-header:after, body[data-fluent-dir="rtl"] .fluent-menu-editor__category-header:after { transform: rotate(180deg); } .fluent-menu-editor__category[open] .fluent-menu-editor__category-header:after { transform: rotate(90deg); } .fluent-menu-editor__category-name { text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; } .fluent-menu-editor__category-count { min-width: var(--fluent-space-xl); height: var(--fluent-space-xl); padding-inline: var(--fluent-space-xs); color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-sm); background: var(--fluent-bg-hover); border-radius: var(--fluent-radius-circular); justify-content: center; align-items: center; display: inline-flex; } .fluent-menu-editor__category-delete, .fluent-menu-editor__category-edit, .fluent-menu-editor__item-reset { flex: 0 0 var(--fluent-space-xxl); width: var(--fluent-space-xxl); height: var(--fluent-space-xxl); color: var(--fluent-text-secondary); cursor: pointer; border-radius: var(--fluent-radius-md); background: none; border: 0; justify-content: center; align-items: center; padding: 0; display: inline-flex; } .fluent-menu-editor__category-delete:hover, .fluent-menu-editor__category-edit:hover, .fluent-menu-editor__item-reset:hover { color: var(--fluent-text); background: var(--fluent-bg-hover); } .fluent-menu-editor__category-delete:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-delete-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-delete-20-regular); mask-image: var(--fluent-mask-delete-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-menu-editor__category-delete:hover { color: var(--fluent-error); background: var(--fluent-error-light); } .fluent-menu-editor__category-error { margin-top: var(--fluent-space-xs); color: var(--fluent-error); font-size: var(--fluent-font-size-sm); } .fluent-menu-editor__category-error:empty { display: none; } .fluent-menu-editor__category.is-drop-before:after, .fluent-menu-editor__category.is-drop-after:after, .fluent-menu-editor__item.is-drop-before:after, .fluent-menu-editor__item.is-drop-after:after { z-index: 1; inset-inline: var(--fluent-space-xs); height: var(--fluent-space-xxs); pointer-events: none; content: ""; background: var(--fluent-primary); border-radius: var(--fluent-radius-circular); position: absolute; } .fluent-menu-editor__category.is-drop-before:after, .fluent-menu-editor__item.is-drop-before:after { top: var(--fluent-menu-drop-offset); } .fluent-menu-editor__category.is-drop-after:after, .fluent-menu-editor__item.is-drop-after:after { bottom: var(--fluent-menu-drop-offset); } .fluent-menu-editor__drop-placeholder { box-sizing: border-box; pointer-events: none; background: var(--fluent-primary-lightest); border: 1px dashed var(--fluent-primary); min-width: 0; } .fluent-menu-editor__drop-placeholder--category { border-radius: var(--fluent-radius-lg); } .fluent-menu-editor__drop-placeholder--item { border-radius: var(--fluent-radius-md); } .fluent-menu-editor__drag-handle { width: 24px; height: 32px; color: var(--fluent-text-secondary); cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none; justify-content: center; align-items: center; display: inline-flex; } .fluent-menu-editor__drag-handle:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-re-order-dots-vertical-20-filled: url("data:image/svg+xml,"); width: 20px; height: 20px; -webkit-mask-image: var(--fluent-mask-fluent-re-order-dots-vertical-20-filled); mask-image: var(--fluent-mask-fluent-re-order-dots-vertical-20-filled); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-menu-editor__drag-handle:active { cursor: grabbing; } .fluent-menu-editor__drag-preview { z-index: var(--fluent-zindex-tooltip); pointer-events: none; opacity: .9; box-shadow: var(--fluent-shadow-medium); will-change: left,top; position: fixed; } .fluent-menu-editor__item.fluent-menu-editor__drag-preview { position: fixed; } .fluent-menu-editor__items { align-items: start; gap: var(--fluent-space-xs); margin-top: var(--fluent-space-sm); min-height: 44px; max-height: 55vh; padding: var(--fluent-space-xs); border-radius: var(--fluent-radius-md); border: 1px dashed #0000; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); display: grid; overflow-y: auto; } .fluent-menu-editor__items.is-drag-over { border-color: var(--fluent-primary); background: var(--fluent-primary-lightest); } .fluent-menu-editor__items:has( > .fluent-menu-editor__drop-placeholder) > .fluent-menu-editor__empty { display: none; } .fluent-menu-editor__item { --fluent-menu-drop-offset: calc(var(--fluent-space-xs) * -1); grid-template-columns: auto auto minmax(0, 1fr) var(--fluent-space-xxl) auto; align-items: center; gap: var(--fluent-space-sm); min-width: 0; padding: var(--fluent-space-xs) var(--fluent-space-sm); background: var(--fluent-bg); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-md); transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard); display: grid; position: relative; } .fluent-menu-editor__item > .fluent-menu-editor__item-reset { grid-column: 4; } .fluent-menu-editor__item > input[type="checkbox"] { grid-column: 5; } .fluent-menu-editor__item.is-hidden { opacity: .55; } .fluent-menu-editor__item.is-dragging { opacity: .35; } .fluent-menu-editor__category.is-drag-source, .fluent-menu-editor__item.is-drag-source { opacity: 0; pointer-events: none; transition: none; position: absolute; } .fluent-menu-editor__category-edit:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-edit-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-edit-20-regular); mask-image: var(--fluent-mask-edit-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-menu-editor__item-reset:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-arrow-clockwise-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-arrow-clockwise-20-regular); mask-image: var(--fluent-mask-arrow-clockwise-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-menu-editor__item-label { min-width: 0; color: var(--fluent-text); flex-direction: column; display: flex; } .fluent-menu-editor__item-label strong, .fluent-menu-editor__item-label small { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .fluent-menu-editor__item-label small { color: var(--fluent-text-secondary); } .fluent-menu-editor__empty { min-height: 44px; color: var(--fluent-text-secondary); border: 1px dashed var(--fluent-border); border-radius: var(--fluent-radius-md); justify-content: center; align-items: center; display: flex; } .fluent-about-manager { max-width: 600px; padding: var(--fluent-card-padding); background-color: var(--fluent-bg-card); border-radius: var(--fluent-radius-md); flex-direction: column; gap: 16px; margin: 0 auto; display: flex; } .fluent-about-manager h3 { color: var(--fluent-text); margin: 8px 0 4px; font-size: 16px; font-weight: 600; } .fluent-about-logo { text-align: center; flex-direction: column; align-items: center; padding: 12px 0; display: flex; } .fluent-about-logo img { width: 64px; height: 64px; margin-bottom: 12px; } .fluent-about-logo h2 { color: var(--fluent-text); margin: 0; font-size: 20px; font-weight: 600; } .fluent-about-logo .fluent-about-subtitle { color: var(--fluent-text-secondary); margin: 4px 0 0; font-size: 13px; } .fluent-about-details { flex-direction: column; gap: 8px; padding: 8px 0; display: flex; } .fluent-about-details .fluent-about-detail-row { color: var(--fluent-text); justify-content: space-between; font-size: 13px; display: flex; } .fluent-about-details .fluent-about-detail-row strong { color: var(--fluent-text-secondary); font-weight: 500; } .fluent-about-details .fluent-about-detail-row a { color: var(--fluent-primary); text-decoration: none; } .fluent-about-details .fluent-about-detail-row a:hover { text-decoration: underline; } .fluent-about-divider { border: none; border-top: 1px solid var(--fluent-border); margin: 8px 0; } .fluent-update-controls { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; display: flex; } .fluent-update-controls .fluent-update-channel-selector { color: var(--fluent-text); align-items: center; gap: 8px; font-size: 13px; display: flex; } .fluent-update-controls .fluent-update-channel-selector label { color: var(--fluent-text-secondary); } .fluent-update-controls .fluent-update-channel-selector select { min-width: 140px; padding: 4px 8px; } .fluent-update-status { border-radius: var(--fluent-radius-sm); background-color: var(--fluent-bg); color: var(--fluent-text); border-left: 3px solid #0000; padding: 8px 12px; font-size: 13px; } .fluent-update-status.status-info { border-left-color: var(--fluent-primary); } .fluent-update-status.status-success { background-color: #107c410d; border-left-color: #107c41; } .fluent-update-status.status-warn { background-color: #ffb9000d; border-left-color: #ffb900; } .fluent-update-status.status-error { color: #a80000; background-color: #a800000d; border-left-color: #a80000; } .fluent-update-card { border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-sm); background-color: var(--fluent-bg); flex-direction: column; gap: 12px; padding: 12px; display: flex; } .fluent-update-card .fluent-update-header { justify-content: space-between; align-items: center; display: flex; } .fluent-update-card .fluent-update-header .fluent-update-badge { background-color: var(--fluent-primary); color: #fff; border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 600; } .fluent-update-card .fluent-update-header .fluent-update-date { color: var(--fluent-text-secondary); font-size: 12px; } .fluent-update-card .fluent-update-changelog { color: var(--fluent-text); background-color: var(--fluent-bg-card); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-sm); white-space: pre-wrap; max-height: 120px; margin: 0; padding: 8px; font-family: inherit; font-size: 12px; overflow-y: auto; } .fluent-update-card .fluent-update-footer { justify-content: flex-end; display: flex; } .fluent-update-card .fluent-update-success { text-align: center; padding: 8px 0; } .fluent-update-card .fluent-update-success h4 { color: #107c41; margin: 0 0 8px; font-weight: 600; } .fluent-update-card .fluent-update-success p { color: var(--fluent-text-secondary); margin: 0; font-size: 13px; } .fluent-progress-bar { background-color: var(--fluent-border); border-radius: 2px; width: 100%; height: 4px; position: relative; overflow: hidden; } .fluent-progress-bar__fill { background-color: var(--fluent-primary); border-radius: 2px; height: 100%; transition: width .2s ease-in-out; } .fluent-progress-bar__fill.fill-verify, .fluent-progress-bar__fill.fill-install { transform-origin: 0; animation: 1.5s linear infinite fluent-indeterminate-progress; width: 100% !important; } .fluent-progress-text { color: var(--fluent-text-secondary); text-align: center; margin-top: -8px; font-size: 12px; } @keyframes fluent-indeterminate-progress { 0% { transform: translateX(-100%) scaleX(.2); } 50% { transform: translateX(-20%) scaleX(.5); } 100% { transform: translateX(100%) scaleX(.2); } } .fluent-mac-selector-group { align-items: center; gap: var(--fluent-space-xs); box-sizing: border-box; width: 100%; max-width: 100%; display: flex; } .fluent-mac-selector-group > input.cbi-input-text { flex: auto !important; width: 100% !important; min-width: 160px !important; } .fluent-mac-selector-group > .fluent-mac-edit-btn { border-radius: var(--fluent-radius-md); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; width: var(--fluent-input-height) !important; height: var(--fluent-input-height) !important; min-width: var(--fluent-input-height) !important; padding: 0 !important; } .fluent-mac-selector-group > .fluent-mac-edit-btn:after { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-edit-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-edit-20-regular); mask-image: var(--fluent-mask-fluent-edit-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-mac-overlay-backdrop { z-index: 2500; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: var(--fluent-space-lg); background: #0006; justify-content: center; align-items: center; animation: .2s cubic-bezier(0, 0, .2, 1) fluent-mac-fade-in; display: flex; position: fixed; inset: 0; } @keyframes fluent-mac-fade-in { from { opacity: 0; } to { opacity: 1; } } .fluent-mac-overlay-card { background: var(--fluent-bg-card); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-lg); box-shadow: var(--fluent-shadow-lg, 0 12px 32px #0000004d); flex-direction: column; width: min(90vw, 440px); max-width: 100%; animation: .2s cubic-bezier(0, 0, .2, 1) fluent-mac-pop-in; display: flex; position: relative; overflow: visible !important; } .fluent-mac-overlay-card .fluent-mac-overlay-header { padding: var(--fluent-space-lg) var(--fluent-space-xl); border-bottom: 1px solid var(--fluent-border); border-top-left-radius: inherit; border-top-right-radius: inherit; justify-content: space-between; align-items: center; display: flex; } .fluent-mac-overlay-card .fluent-mac-overlay-header h3 { font-size: var(--fluent-font-size-md); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); margin: 0; } .fluent-mac-overlay-card .fluent-mac-overlay-header .fluent-mac-overlay-close { width: 32px; height: 32px; color: var(--fluent-text-secondary); cursor: pointer; background: none; border: none; justify-content: center; align-items: center; padding: 0; display: inline-flex; } .fluent-mac-overlay-card .fluent-mac-overlay-header .fluent-mac-overlay-close:after { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-dismiss-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-dismiss-20-regular); mask-image: var(--fluent-mask-fluent-dismiss-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-mac-overlay-card .fluent-mac-overlay-header .fluent-mac-overlay-close:hover { background: var(--fluent-bg-hover); color: var(--fluent-text); } .fluent-mac-overlay-card .fluent-mac-overlay-body { padding: var(--fluent-space-xl); gap: var(--fluent-space-lg); flex-direction: column; display: flex; overflow: visible !important; } .fluent-mac-overlay-card .fluent-mac-field-block { gap: var(--fluent-space-xs); flex-direction: column; display: flex; position: relative; overflow: visible !important; } .fluent-mac-overlay-card .fluent-mac-field-block .fluent-mac-label { font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text-secondary); } .fluent-mac-overlay-card .fluent-mac-field-block .fluent-mac-modal-input { width: 100%; font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: var(--fluent-font-size-md); font-weight: var(--fluent-font-weight-semibold); text-align: center; letter-spacing: 1px; padding: var(--fluent-space-sm); } .fluent-mac-overlay-card .fluent-mac-picker-row { align-items: center; gap: var(--fluent-space-sm); width: 100%; display: flex; overflow: visible !important; } .fluent-mac-overlay-card .fluent-mac-picker-row .fluent-mac-random-btn { white-space: nowrap; align-items: center; gap: var(--fluent-space-xs); flex-shrink: 0; display: inline-flex; } .fluent-mac-overlay-card .fluent-mac-picker-row .fluent-mac-random-btn:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-arrow-clockwise-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-arrow-clockwise-20-regular); mask-image: var(--fluent-mask-fluent-arrow-clockwise-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } .fluent-mac-overlay-card .fluent-mac-vendor-picker-wrap { flex: 1; min-width: 0; position: relative; overflow: visible !important; } .fluent-mac-overlay-card .fluent-mac-overlay-footer { justify-content: flex-end; align-items: center; gap: var(--fluent-space-sm); padding: var(--fluent-space-md) var(--fluent-space-xl); border-top: 1px solid var(--fluent-border); background: var(--fluent-bg-secondary); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; display: flex; } @keyframes fluent-mac-pop-in { from { opacity: 0; transform: scale(.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } img[src="/luci-static/resources/icons/port_down.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iNzUgNzUgMzYyIDM2MiIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsbGVkYnk9InRpdGxlIGRlc2MiPgogIDx0aXRsZSBpZD0idGl0bGUiPkV0aGVybmV0IHBvcnQgd2l0aCBkaXNjb25uZWN0ZWQgcGx1ZzwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgRmx1ZW50IFVJIHN0eWxlIGV0aGVybmV0IHBvcnQgaWNvbiB3aXRoIGVpZ2h0IFJKNDUgY29udGFjdHMgYW5kIGEgcGx1ZyBkaXNjb25uZWN0ZWQgc3ltYm9sLjwvZGVzYz4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiM0MjQyNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMzMzIDEzNUgxMzljLTguOCAwLTE2IDcuMi0xNiAxNnYyMjFjMCA4LjggNy4yIDE2IDE2IDE2aDIzOWM4LjggMCAxNi03LjIgMTYtMTZWMjA2IiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgICA8cGF0aCBkPSJNMTcxIDIwOWgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yODUgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMjExdjI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICA8L2c+CiAgPHBhdGggZmlsbD0iIzQyNDI0MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzEyIDg2KSBzY2FsZSg2LjYpIiBkPSJNMTcuODU0IDIuMTQ2YS41LjUgMCAwIDEgMCAuNzA4bC0xLjY2OCAxLjY2OGE0LjA0IDQuMDQgMCAwIDEtLjMzMiA1LjMzMWwtLjMuM2wtLjAwMy4wMDNsLS4zMDkuMzA5YTEuMDUgMS4wNSAwIDAgMS0xLjQ4NCAwTDkuNTM1IDYuMjQyYTEuMDUgMS4wNSAwIDAgMSAwLTEuNDg1bC42MTEtLjYxYTQuMDM2IDQuMDM2IDAgMCAxIDUuMzMyLS4zMzJsMS42NjgtMS42NjlhLjUuNSAwIDAgMSAuNzA4IDBNMTUuMTQgNC44NDdhMy4wMzcgMy4wMzcgMCAwIDAtNC4yODYuMDA2bC0uMy4zYS40OS40OSAwIDAgMCAwIC42OTNsMy42IDMuNmMuMTkuMTkxLjUuMTkyLjY5MS4wMDJsLjAwMi0uMDAybC4zLS4zYTMuMDM2IDMuMDM2IDAgMCAwIC4wMDYtNC4yODZsLS4wMDctLjAwNnptLTUuNzg2IDMuOGEuNS41IDAgMCAxIDAgLjcwN0w3LjcwNyAxMUw5IDEyLjI5M2wxLjY0Ni0xLjY0N2EuNS41IDAgMCAxIC43MDguNzA4TDkuNzA3IDEzbC40NDcuNDQ3YTEuNDkgMS40OSAwIDAgMSAwIDIuMTA3bC0uMy4zYTQuMDM2IDQuMDM2IDAgMCAxLTUuMzMyLjMzMmwtMS42NjggMS42NjhhLjUuNSAwIDAgMS0uNzA4LS43MDhsMS42NjktMS42NjhhNC4wMzYgNC4wMzYgMCAwIDEgLjMzMS01LjMzMWwuMy0uM2ExLjQ5IDEuNDkgMCAwIDEgMi4xMDggMGwuNDQ2LjQ0NmwxLjY0Ni0xLjY0N2EuNS41IDAgMCAxIC43MDggMG0tNC40OTUgNi41MDVhMy4wMzYgMy4wMzYgMCAwIDAgNC4yODctLjAwNWwuMy0uM2EuNDkuNDkgMCAwIDAgMC0uNjkzbC0zLjYtMy42YS40OS40OSAwIDAgMC0uNjkyIDBsLS4zLjNhMy4wMzYgMy4wMzYgMCAwIDAgMCA0LjI5MnoiLz4KPC9zdmc+Cg==); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/port_up.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iNzUgNzUgMzYyIDM2MiIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsbGVkYnk9InRpdGxlIGRlc2MiPgogIDx0aXRsZSBpZD0idGl0bGUiPkV0aGVybmV0IHBvcnQgd2l0aCBjb25uZWN0ZWQgcGx1ZzwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgRmx1ZW50IFVJIHN0eWxlIGV0aGVybmV0IHBvcnQgaWNvbiB3aXRoIGVpZ2h0IFJKNDUgY29udGFjdHMgYW5kIGEgcGx1ZyBjb25uZWN0ZWQgY2hlY2ttYXJrIHN5bWJvbC48L2Rlc2M+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDI0MjQyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTMzMyAxMzVIMTM5Yy04LjggMC0xNiA3LjItMTYgMTZ2MjIxYzAgOC44IDcuMiAxNiAxNiAxNmgyMzljOC44IDAgMTYtNy4yIDE2LTE2VjIwNiIgc3Ryb2tlLXdpZHRoPSIxMCIvPgogICAgPHBhdGggZD0iTTE3MSAyMDloMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgICA8cGF0aCBkPSJNMTk1IDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjEzIDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjMxIDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjQ5IDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjY3IDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjg1IDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMzAzIDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMzIxIDIxMXYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgPC9nPgogIDxwYXRoIGZpbGw9IiM0MjQyNDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMiA4Nikgc2NhbGUoNi42KSIgZD0iTTE3Ljg1NCAyLjg1NGEuNS41IDAgMCAwLS43MDgtLjcwOGwtMi42NjggMi42NjlhNC4wMzYgNC4wMzYgMCAwIDAtNS4zMzIuMzMxbC0uMy4zYTEuNDkgMS40OSAwIDAgMCAwIDIuMTA4bDIuNDY1IDIuNDY0cS40MjEtLjMuODk1LS41MThMOS41NTMgNi44NDZhLjQ5LjQ5IDAgMCAxIDAtLjY5MmwuMy0uM2EzLjAzNiAzLjAzNiAwIDAgMSA1LjAxIDMuMTU4cS41MTQuMDM0IDEgLjE1OGE0LjA0IDQuMDQgMCAwIDAtLjY3OC0zLjY0OHptLTEwLjMgNS45OTJsMi40NjQgMi40NjVxLS4zLjQyMS0uNTE4Ljg5NUw2Ljg0NyA5LjU1NGEuNDkuNDkgMCAwIDAtLjY5MyAwbC0uMy4zYTMuMDM1IDMuMDM1IDAgMCAwIDMuMTU4IDUuMDA5cS4wMzQuNTE1LjE1OCAxYTQuMDQgNC4wNCAwIDAgMS0zLjY0OC0uNjc4bC0yLjY2OCAyLjY2OWEuNS41IDAgMCAxLS43MDgtLjcwOGwyLjY2OS0yLjY2OGE0LjAzNiA0LjAzNiAwIDAgMSAuMzMyLTUuMzMybC4zLS4zYTEuNDkgMS40OSAwIDAgMSAyLjEwNyAwTTE5IDE0LjVhNC41IDQuNSAwIDEgMS05IDBhNC41IDQuNSAwIDAgMSA5IDBtLTIuMTQ2LTEuODU0YS41LjUgMCAwIDAtLjcwOCAwTDEzLjUgMTUuMjkzbC0uNjQ2LS42NDdhLjUuNSAwIDAgMC0uNzA4LjcwOGwxIDFhLjUuNSAwIDAgMCAuNzA4IDBsMy0zYS41LjUgMCAwIDAgMC0uNzA4Ii8+Cjwvc3ZnPgo=); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-primary) !important; } img[src="/luci-static/resources/icons/ethernet.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMTE1IDgwIDMzNCAzMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5FdGhlcm5ldCBwb3J0PC90aXRsZT4KICA8ZGVzYyBpZD0iZGVzYyI+QSBGbHVlbnQgVUkgc3R5bGUgZXRoZXJuZXQgcG9ydCBpY29uIHdpdGggZWlnaHQgUko0NSBjb250YWN0cy48L2Rlc2M+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDI0MjQyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYyMjFjMCA4LjgtNy4yIDE2LTE2IDE2SDEzOWMtOC44IDAtMTYtNy4yLTE2LTE2VjE1MWMwLTguOCA3LjItMTYgMTYtMTZ6IiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICA8L2c+Cjwvc3ZnPgo=); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/ethernet_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMTE1IDgwIDMzNCAzMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5OZXR3b3JrIHR1bm5lbCAoZGlzYWJsZWQpPC90aXRsZT4KICA8ZGVzYyBpZD0iZGVzYyI+QSBGbHVlbnQgVUkgc3R5bGUgZXRoZXJuZXQgcG9ydCBpY29uIGluIGEgZGlzYWJsZWQgc3RhdGUsIHNob3dpbmcgYW4gb2ZmbGluZSBiYWRnZS48L2Rlc2M+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDI0MjQyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPCEtLSBDdXRvdXQgb3V0ZXIgYm94IC0tPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYyMjFjMCA4LjgtNy4yIDE2LTE2IDE2SDIwNSBNMTIzIDMyNFYxNTFjMC04LjggNy4yLTE2IDE2LTE2IiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICA8L2c+CiAgPCEtLSBPZmZsaW5lIEJhZGdlIChCb3R0b20tTGVmdCkgLS0+CiAgPHBhdGggZmlsbD0iIzQyNDI0MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIzIDMyNCkgc2NhbGUoOCkiIGQ9Ik02Ljg1NCAzLjE0NmEuNS41IDAgMCAxIDAgLjcwOEw1LjcwNyA1bDEuMTQ3IDEuMTQ2YS41LjUgMCAxIDEtLjcwOC43MDhMNSA1LjcwN0wzLjg1NCA2Ljg1NGEuNS41IDAgMSAxLS43MDgtLjcwOEw0LjI5MyA1TDMuMTQ2IDMuODU0YS41LjUgMCAxIDEgLjcwOC0uNzA4TDUgNC4yOTNsMS4xNDYtMS4xNDdhLjUuNSAwIDAgMSAuNzA4IDBNMCA1YTUgNSAwIDEgMSAxMCAwQTUgNSAwIDAgMSAwIDVtNS00YTQgNCAwIDEgMCAwIDhhNCA0IDAgMCAwIDAtOCIvPgo8L3N2Zz4K); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/bridge.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+TmV0d29yayBicmlkZ2U8L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5BIEZsdWVudCBVSSBzdHlsZSBuZXR3b3JrIGJyaWRnZSBpY29uIHNob3dpbmcgdHdvIGJyaWRnZWQgZXRoZXJuZXQgcG9ydHMuPC9kZXNjPgogIAogIDwhLS0gQ29ubmVjdGlvbiBMLWxpbmUgZG90cyAtLT4KICA8ZyBmaWxsPSIjMDA3OEQ0Ij4KICAgICAgPGNpcmNsZSBjeD0iMjYiIGN5PSIxMy41IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMTMuNSIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjEzLjUiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIxNy41IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjM0IiBjeT0iMjEuNSIgcj0iMS41IiAvPgogIDwvZz4KCiAgPCEtLSBQb3J0IDEgKFRvcC1MZWZ0KSAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LCA0KSBzY2FsZSgwLjA3NCkgdHJhbnNsYXRlKC0xMjMsIC0xMzUpIiBzdHJva2U9IiMwMDc4RDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djIyMWMwIDguOC03LjIgMTYtMTYgMTZIMTM5Yy04LjggMC0xNi03LjItMTYtMTZWMTUxYzAtOC44IDcuMi0xNiAxNi0xNnoiIHN0cm9rZS13aWR0aD0iMC43NSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjAuNiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE5NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjEzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI0OSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjY3IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMwMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzIxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICA8L2c+CgogIDwhLS0gUG9ydCAyIChCb3R0b20tUmlnaHQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LCAyNSkgc2NhbGUoMC4wNzQpIHRyYW5zbGF0ZSgtMTIzLCAtMTM1KSIgc3Ryb2tlPSIjMDA3OEQ0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYyMjFjMCA4LjgtNy4yIDE2LTE2IDE2SDEzOWMtOC44IDAtMTYtNy4yLTE2LTE2VjE1MWMwLTguOCA3LjItMTYgMTYtMTZ6IiBzdHJva2Utd2lkdGg9IjAuNzUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xNzEgMTg2aDE3M3YxMDFoLTMzdjI3aC0yN3YyM2gtNTV2LTIzaC0yN3YtMjdoLTMxeiIgc3Ryb2tlLXdpZHRoPSIwLjYiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIxMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjMxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI2NyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjg1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMyMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgPC9nPgo8L3N2Zz4K); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/bridge_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+TmV0d29yayBicmlkZ2UgKGRpc2FibGVkKTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgRmx1ZW50IFVJIHN0eWxlIG5ldHdvcmsgYnJpZGdlIGljb24gc2hvd2luZyB0d28gYnJpZGdlZCBldGhlcm5ldCBwb3J0cyBpbiBhIGRpc2FibGVkIHN0YXRlLjwvZGVzYz4KICAKICA8IS0tIENvbm5lY3Rpb24gTC1saW5lIGRvdHMgLS0+CiAgPGcgZmlsbD0iIzAwNzhENCI+CiAgICAgIDxjaXJjbGUgY3g9IjI2IiBjeT0iMTMuNSIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzMCIgY3k9IjEzLjUiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIxMy41IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjM0IiBjeT0iMTcuNSIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjIxLjUiIHI9IjEuNSIgLz4KICA8L2c+CgogIDwhLS0gT2ZmbGluZSBCYWRnZSAoQm90dG9tLUxlZnQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMsIDI5KSBzY2FsZSgxLjYpIiBmaWxsPSIjMDA3OEQ0Ij4KICAgICAgPHBhdGggZD0iTTYuODU0IDMuMTQ2YS41LjUgMCAwIDEgMCAuNzA4TDUuNzA3IDVsMS4xNDcgMS4xNDZhLjUuNSAwIDEgMS0uNzA4LjcwOEw1IDUuNzA3TDMuODU0IDYuODU0YS41LjUgMCAxIDEtLjcwOC0uNzA4TDQuMjkzIDVMMy4xNDYgMy44NTRhLjUuNSAwIDEgMSAuNzA4LS43MDhMNSA0LjI5M2wxLjE0Ni0xLjE0N2EuNS41IDAgMCAxIC43MDggME0wIDVhNSA1IDAgMSAxIDEwIDBBNSA1IDAgMCAxIDAgNW01LTRhNCA0IDAgMSAwIDAgOGE0IDQgMCAwIDAgMC04Ii8+CiAgPC9nPgoKICA8IS0tIFBvcnQgMSAoVG9wLUxlZnQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQsIDQpIHNjYWxlKDAuMDc0KSB0cmFuc2xhdGUoLTEyMywgLTEzNSkiIHN0cm9rZT0iIzAwNzhENCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0xMzkgMTM1aDIzOWM4LjggMCAxNiA3LjIgMTYgMTZ2MjIxYzAgOC44LTcuMiAxNi0xNiAxNkgxMzljLTguOCAwLTE2LTcuMi0xNi0xNlYxNTFjMC04LjggNy4yLTE2IDE2LTE2eiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMC42IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTk1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIzMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjQ5IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI4NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzAzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogIDwvZz4KCiAgPCEtLSBQb3J0IDIgKEJvdHRvbS1SaWdodCkgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQsIDI1KSBzY2FsZSgwLjA3NCkgdHJhbnNsYXRlKC0xMjMsIC0xMzUpIiBzdHJva2U9IiMwMDc4RDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djIyMWMwIDguOC03LjIgMTYtMTYgMTZIMTM5Yy04LjggMC0xNi03LjItMTYtMTZWMTUxYzAtOC44IDcuMi0xNiAxNi0xNnoiIHN0cm9rZS13aWR0aD0iMC43NSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjAuNiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE5NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjEzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI0OSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjY3IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMwMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzIxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICA8L2c+Cjwvc3ZnPgo=); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/tunnel.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+TmV0d29yayB0dW5uZWw8L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5BIEZsdWVudCBVSSBzdHlsZSBuZXR3b3JrIHR1bm5lbCBpY29uIHNob3dpbmcgdHdvIGV0aGVybmV0IHBvcnRzIGNvbm5lY3RlZCB2aWEgYSBnbG9iYWwgdHVubmVsLjwvZGVzYz4KICAKICA8IS0tIENvbm5lY3Rpb24gTC1saW5lIGRvdHMgLS0+CiAgPGcgZmlsbD0iIzAwNzhENCI+CiAgICAgIDxjaXJjbGUgY3g9IjI1IiBjeT0iMTMuNSIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjIyLjc1IiByPSIxLjUiIC8+CiAgPC9nPgoKICA8IS0tIENvbm5lY3Rpb24gRWFydGggSWNvbiAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS42LCA1LjEpIHNjYWxlKDEuNCkiIGZpbGw9IiMwMDc4RDQiPgogICAgICA8cGF0aCBkPSJNMTEgNkE1IDUgMCAxIDAgMSA2YTUgNSAwIDAgMCAxMCAwbS02Ljk5LjVjLjA1MiAxLjMwNy4zMDUgMi40NjcuNjgxIDMuMjgxQTQgNCAwIDAgMSAyLjAzMSA2LjV6bTEgMGgxLjk4Yy0uMDQ3IDEuMDc1LS4yNCAyLjAwNS0uNTA0IDIuNjY0Yy0uMTUzLjM4My0uMzEuNjI1LS40MzQuNzU2TDYgOS45N2wtLjA1Mi0uMDVjLS4xMjMtLjEzLS4yOC0uMzczLS40MzQtLjc1NmMtLjI2NC0uNjYtLjQ1Ny0xLjU4OS0uNTAzLTIuNjY0bTEuOTgtMUg1LjAxYy4wNDctMS4wNzUuMjQtMi4wMDUuNTA0LTIuNjY0Yy4xNTMtLjM4My4zMS0uNjI1LjQzNC0uNzU2TDYgMi4wM2wuMDUyLjA1Yy4xMjMuMTMuMjguMzczLjQzNC43NTZjLjI2NC42Ni40NTcgMS41ODkuNTAzIDIuNjY0bTEgMUg5Ljk3YTQgNCAwIDAgMS0yLjY2IDMuMjgxYy4zNzYtLjgxNC42My0xLjk3NC42ODEtMy4yODFtMS45NzktMUg3Ljk5Yy0uMDUyLTEuMzA3LS4zMDUtMi40NjctLjY4MS0zLjI4MUE0IDQgMCAwIDEgOS45NjkgNS41bS01Ljk2IDBIMi4wMzJhNCA0IDAgMCAxIDIuNjYtMy4yODFjLS4zNzYuODE0LS42MyAxLjk3NC0uNjgxIDMuMjgxIi8+CiAgPC9nPgoKICA8IS0tIFBvcnQgMSAoVG9wLUxlZnQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQsIDQpIHNjYWxlKDAuMDc0KSB0cmFuc2xhdGUoLTEyMywgLTEzNSkiIHN0cm9rZT0iIzAwNzhENCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0xMzkgMTM1aDIzOWM4LjggMCAxNiA3LjIgMTYgMTZ2MjIxYzAgOC44LTcuMiAxNi0xNiAxNkgxMzljLTguOCAwLTE2LTcuMi0xNi0xNlYxNTFjMC04LjggNy4yLTE2IDE2LTE2eiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMC42IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTk1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIzMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjQ5IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI4NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzAzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogIDwvZz4KCiAgPCEtLSBQb3J0IDIgKEJvdHRvbS1SaWdodCkgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQsIDI1KSBzY2FsZSgwLjA3NCkgdHJhbnNsYXRlKC0xMjMsIC0xMzUpIiBzdHJva2U9IiMwMDc4RDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djIyMWMwIDguOC03LjIgMTYtMTYgMTZIMTM5Yy04LjggMC0xNi03LjItMTYtMTZWMTUxYzAtOC44IDcuMi0xNiAxNi0xNnoiIHN0cm9rZS13aWR0aD0iMC43NSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjAuNiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE5NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjEzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI0OSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjY3IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMwMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzIxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICA8L2c+Cjwvc3ZnPgo=); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/tunnel_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+TmV0d29yayB0dW5uZWwgKGRpc2FibGVkKTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgRmx1ZW50IFVJIHN0eWxlIG5ldHdvcmsgdHVubmVsIGljb24gc2hvd2luZyB0d28gZXRoZXJuZXQgcG9ydHMgY29ubmVjdGVkIHZpYSBhIGdsb2JhbCB0dW5uZWwgaW4gYSBkaXNhYmxlZCBzdGF0ZS48L2Rlc2M+CiAgCiAgPCEtLSBDb25uZWN0aW9uIEwtbGluZSBkb3RzIC0tPgogIDxnIGZpbGw9IiMwMDc4RDQiPgogICAgICA8Y2lyY2xlIGN4PSIyNSIgY3k9IjEzLjUiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIyMi43NSIgcj0iMS41IiAvPgogIDwvZz4KCiAgPCEtLSBDb25uZWN0aW9uIEVhcnRoIEljb24gLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUuNiwgNS4xKSBzY2FsZSgxLjQpIiBmaWxsPSIjMDA3OEQ0Ij4KICAgICAgPHBhdGggZD0iTTExIDZBNSA1IDAgMSAwIDEgNmE1IDUgMCAwIDAgMTAgMG0tNi45OS41Yy4wNTIgMS4zMDcuMzA1IDIuNDY3LjY4MSAzLjI4MUE0IDQgMCAwIDEgMi4wMzEgNi41em0xIDBoMS45OGMtLjA0NyAxLjA3NS0uMjQgMi4wMDUtLjUwNCAyLjY2NGMtLjE1My4zODMtLjMxLjYyNS0uNDM0Ljc1Nkw2IDkuOTdsLS4wNTItLjA1Yy0uMTIzLS4xMy0uMjgtLjM3My0uNDM0LS43NTZjLS4yNjQtLjY2LS40NTctMS41ODktLjUwMy0yLjY2NG0xLjk4LTFINS4wMWMuMDQ3LTEuMDc1LjI0LTIuMDA1LjUwNC0yLjY2NGMuMTUzLS4zODMuMzEtLjYyNS40MzQtLjc1Nkw2IDIuMDNsLjA1Mi4wNWMuMTIzLjEzLjI4LjM3My40MzQuNzU2Yy4yNjQuNjYuNDU3IDEuNTg5LjUwMyAyLjY2NG0xIDFIOS45N2E0IDQgMCAwIDEtMi42NiAzLjI4MWMuMzc2LS44MTQuNjMtMS45NzQuNjgxLTMuMjgxbTEuOTc5LTFINy45OWMtLjA1Mi0xLjMwNy0uMzA1LTIuNDY3LS42ODEtMy4yODFBNCA0IDAgMCAxIDkuOTY5IDUuNW0tNS45NiAwSDIuMDMyYTQgNCAwIDAgMSAyLjY2LTMuMjgxYy0uMzc2LjgxNC0uNjMgMS45NzQtLjY4MSAzLjI4MSIvPgogIDwvZz4KCiAgPCEtLSBPZmZsaW5lIEJhZGdlIChCb3R0b20tTGVmdCkgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMywgMjkpIHNjYWxlKDEuNikiIGZpbGw9IiMwMDc4RDQiPgogICAgICA8cGF0aCBkPSJNNi44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhMNS43MDcgNWwxLjE0NyAxLjE0NmEuNS41IDAgMSAxLS43MDguNzA4TDUgNS43MDdMMy44NTQgNi44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMNC4yOTMgNUwzLjE0NiAzLjg1NGEuNS41IDAgMSAxIC43MDgtLjcwOEw1IDQuMjkzbDEuMTQ2LTEuMTQ3YS41LjUgMCAwIDEgLjcwOCAwTTAgNWE1IDUgMCAxIDEgMTAgMEE1IDUgMCAwIDEgMCA1bTUtNGE0IDQgMCAxIDAgMCA4YTQgNCAwIDAgMCAwLTgiLz4KICA8L2c+CgogIDwhLS0gUG9ydCAxIChUb3AtTGVmdCkgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCwgNCkgc2NhbGUoMC4wNzQpIHRyYW5zbGF0ZSgtMTIzLCAtMTM1KSIgc3Ryb2tlPSIjMDA3OEQ0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYyMjFjMCA4LjgtNy4yIDE2LTE2IDE2SDEzOWMtOC44IDAtMTYtNy4yLTE2LTE2VjE1MWMwLTguOCA3LjItMTYgMTYtMTZ6IiBzdHJva2Utd2lkdGg9IjAuNzUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xNzEgMTg2aDE3M3YxMDFoLTMzdjI3aC0yN3YyM2gtNTV2LTIzaC0yN3YtMjdoLTMxeiIgc3Ryb2tlLXdpZHRoPSIwLjYiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIxMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjMxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI2NyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjg1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMyMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgPC9nPgoKICA8IS0tIFBvcnQgMiAoQm90dG9tLVJpZ2h0KSAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNCwgMjUpIHNjYWxlKDAuMDc0KSB0cmFuc2xhdGUoLTEyMywgLTEzNSkiIHN0cm9rZT0iIzAwNzhENCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0xMzkgMTM1aDIzOWM4LjggMCAxNiA3LjIgMTYgMTZ2MjIxYzAgOC44LTcuMiAxNi0xNiAxNkgxMzljLTguOCAwLTE2LTcuMi0xNi0xNlYxNTFjMC04LjggNy4yLTE2IDE2LTE2eiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMC42IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTk1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIzMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjQ5IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI4NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzAzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogIDwvZz4KPC9zdmc+Cg==); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/vlan.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMTE1IDgwIDMzNCAzMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5OZXR3b3JrIFZMQU48L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5BIEZsdWVudCBVSSBzdHlsZSBldGhlcm5ldCBwb3J0IGljb24gc2hvd2luZyBhIFZMQU4gdGFnIGJhZGdlLjwvZGVzYz4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiM0MjQyNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8IS0tIEN1dG91dCBvdXRlciBib3ggZm9yIGJvdHRvbS1yaWdodCBiYWRnZSAtLT4KICAgIDxwYXRoIGQ9Ik0xMzkgMTM1aDIzOWM4LjggMCAxNiA3LjIgMTYgMTZ2MTIwIE0yNzUgMzg4IEgxMzljLTguOCAwLTE2LTcuMi0xNi0xNlYxNTFjMC04LjggNy4yLTE2IDE2LTE2IiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg2djI2IiBzdHJva2Utd2lkdGg9IjkiLz4KICA8L2c+CiAgPCEtLSBWTEFOIFRhZyBCYWRnZSAoQm90dG9tLVJpZ2h0KSAtLT4KICA8cGF0aCBmaWxsPSIjNDI0MjQyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzUgMjc3KSBzY2FsZSg4LjI1KSIgZD0iTTIuNTg3IDcuMzE0YTEuOTkgMS45OSAwIDAgMCAwIDIuODIybDMuMjk2IDMuMjhhMi4wMTMgMi4wMTMgMCAwIDAgMi44MzYgMGw0LjY3LTQuNjQ3YTIgMiAwIDAgMCAuNTg3LTEuMzk3TDE0IDQuMDFBMiAyIDAgMCAwIDExLjk4NyAybC0zLjI1LjAxNGEyIDIgMCAwIDAtMS40MS41ODR6TTExIDZhMSAxIDAgMSAxIDAtMmExIDEgMCAwIDEgMCAyIiAvPgo8L3N2Zz4K); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/vlan_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMTE1IDgwIDMzNCAzMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5OZXR3b3JrIFZMQU4gKGRpc2FibGVkKTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgRmx1ZW50IFVJIHN0eWxlIGV0aGVybmV0IHBvcnQgaWNvbiBpbiBhIGRpc2FibGVkIHN0YXRlLCBzaG93aW5nIGEgVkxBTiB0YWcgYmFkZ2UgYW5kIGFuIG9mZmxpbmUgYmFkZ2UuPC9kZXNjPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQyNDI0MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDwhLS0gQ3V0b3V0IG91dGVyIGJveCBmb3IgYm90dG9tLWxlZnQgYW5kIGJvdHRvbS1yaWdodCBiYWRnZXMgLS0+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djEyMCBNMjc1IDM4OCBIMjA1IE0xMjMgMzI0VjE1MWMwLTguOCA3LjItMTYgMTYtMTYiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0xNzEgMTg2aDE3M3YxMDFoLTMzdjI3aC0yN3YyM2gtNTV2LTIzaC0yN3YtMjdoLTMxeiIgc3Ryb2tlLXdpZHRoPSIxMCIvPgogICAgPHBhdGggZD0iTTE5NSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTIxMyAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTIzMSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTI0OSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTI2NyAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTI4NSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTMwMyAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTMyMSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogIDwvZz4KICA8IS0tIFZMQU4gVGFnIEJhZGdlIChCb3R0b20tUmlnaHQpIC0tPgogIDxwYXRoIGZpbGw9IiM0MjQyNDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3NSAyNzcpIHNjYWxlKDguMjUpIiBkPSJNMi41ODcgNy4zMTRhMS45OSAxLjk5IDAgMCAwIDAgMi44MjJsMy4yOTYgMy4yOGEyLjAxMyAyLjAxMyAwIDAgMCAyLjgzNiAwbDQuNjctNC42NDdhMiAyIDAgMCAwIC41ODctMS4zOTdMMTQgNC4wMUEyIDIgMCAwIDAgMTEuOTg3IDJsLTMuMjUuMDE0YTIgMiAwIDAgMC0xLjQxLjU4NHpNMTEgNmExIDEgMCAxIDEgMC0yYTEgMSAwIDAgMSAwIDIiIC8+CiAgPCEtLSBPZmZsaW5lIEJhZGdlIChCb3R0b20tTGVmdCkgLS0+CiAgPHBhdGggZmlsbD0iIzQyNDI0MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIzIDMyNCkgc2NhbGUoOCkiIGQ9Ik02Ljg1NCAzLjE0NmEuNS41IDAgMCAxIDAgLjcwOEw1LjcwNyA1bDEuMTQ3IDEuMTQ2YS41LjUgMCAxIDEtLjcwOC43MDhMNSA1LjcwN0wzLjg1NCA2Ljg1NGEuNS41IDAgMSAxLS43MDgtLjcwOEw0LjI5MyA1TDMuMTQ2IDMuODU0YS41LjUgMCAxIDEgLjcwOC0uNzA4TDUgNC4yOTNsMS4xNDYtMS4xNDdhLjUuNSAwIDAgMSAuNzA4IDBNMCA1YTUgNSAwIDEgMSAxMCAwQTUgNSAwIDAgMSAwIDVtNS00YTQgNCAwIDEgMCAwIDhhNCA0IDAgMCAwIDAtOCIvPgo8L3N2Zz4K); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/alias.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMTE1IDgwIDMzNCAzMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5OZXR3b3JrIGFsaWFzPC90aXRsZT4KICA8ZGVzYyBpZD0iZGVzYyI+QSBGbHVlbnQgVUkgc3R5bGUgZXRoZXJuZXQgcG9ydCBpY29uIHNob3dpbmcgYW4gYWxpYXMgYmFkZ2UuPC9kZXNjPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQyNDI0MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDwhLS0gQ3V0b3V0IG91dGVyIGJveCBmb3IgYm90dG9tLXJpZ2h0IGJhZGdlIC0tPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYxNjAgTTMxNCAzODggSDEzOWMtOC44IDAtMTYtNy4yLTE2LTE2VjE1MWMwLTguOCA3LjItMTYgMTYtMTYiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0xNzEgMTg2aDE3M3YxMDFoLTMzdjI3aC0yN3YyM2gtNTV2LTIzaC0yN3YtMjdoLTMxeiIgc3Ryb2tlLXdpZHRoPSIxMCIvPgogICAgPHBhdGggZD0iTTE5NSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTIxMyAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTIzMSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTI0OSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTI2NyAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTI4NSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTMwMyAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogICAgPHBhdGggZD0iTTMyMSAxODZ2MjYiIHN0cm9rZS13aWR0aD0iOSIvPgogIDwvZz4KICA8IS0tIEFsaWFzIEJhZGdlIChCb3R0b20tUmlnaHQpIC0tPgogIDxwYXRoIGZpbGw9IiM0MjQyNDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwNiAzMDEuNSkgc2NhbGUoNikgcm90YXRlKC00NSA4IDgpIiBkPSJNOS4yMiA0LjI4YS43NS43NSAwIDAgMSAxLjA2LTEuMDZsMy41IDMuNWEuNzUuNzUgMCAwIDEgMCAxLjA2bC0zLjUgMy41YS43NS43NSAwIDEgMS0xLjA2LTEuMDZMMTEuNDQgOEg3Ljc1YTQuMjUgNC4yNSAwIDAgMC00LjI1IDQuMjVhLjc1Ljc1IDAgMCAxLTEuNSAwQTUuNzUgNS43NSAwIDAgMSA3Ljc1IDYuNWgzLjY5eiIgLz4KPC9zdmc+Cg==); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/alias_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMTE1IDgwIDMzNCAzMzQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSBkZXNjIj4KICA8dGl0bGUgaWQ9InRpdGxlIj5OZXR3b3JrIGFsaWFzIChkaXNhYmxlZCk8L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5BIEZsdWVudCBVSSBzdHlsZSBldGhlcm5ldCBwb3J0IGljb24gaW4gYSBkaXNhYmxlZCBzdGF0ZSwgc2hvd2luZyBhbiBhbGlhcyBiYWRnZSBhbmQgYW4gb2ZmbGluZSBiYWRnZS48L2Rlc2M+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDI0MjQyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPCEtLSBDdXRvdXQgb3V0ZXIgYm94IGZvciBib3R0b20tbGVmdCBhbmQgYm90dG9tLXJpZ2h0IGJhZGdlcyAtLT4KICAgIDxwYXRoIGQ9Ik0xMzkgMTM1aDIzOWM4LjggMCAxNiA3LjIgMTYgMTZ2MTYwIE0zMTQgMzg4IEgyMDUgTTEyMyAzMjRWMTUxYzAtOC44IDcuMi0xNiAxNi0xNiIgc3Ryb2tlLXdpZHRoPSIxMCIvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgICA8cGF0aCBkPSJNMTk1IDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjEzIDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjMxIDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjQ5IDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjY3IDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMjg1IDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMzAzIDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgICA8cGF0aCBkPSJNMzIxIDE4NnYyNiIgc3Ryb2tlLXdpZHRoPSI5Ii8+CiAgPC9nPgogIDwhLS0gQWxpYXMgQmFkZ2UgKEJvdHRvbS1SaWdodCkgLS0+CiAgPHBhdGggZmlsbD0iIzQyNDI0MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzA2IDMwMS41KSBzY2FsZSg2KSByb3RhdGUoLTQ1IDggOCkiIGQ9Ik05LjIyIDQuMjhhLjc1Ljc1IDAgMCAxIDEuMDYtMS4wNmwzLjUgMy41YS43NS43NSAwIDAgMSAwIDEuMDZsLTMuNSAzLjVhLjc1Ljc1IDAgMSAxLTEuMDYtMS4wNkwxMS40NCA4SDcuNzVhNC4yNSA0LjI1IDAgMCAwLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS41IDBBNS43NSA1Ljc1IDAgMCAxIDcuNzUgNi41aDMuNjl6IiAvPgogIDwhLS0gT2ZmbGluZSBCYWRnZSAoQm90dG9tLUxlZnQpIC0tPgogIDxwYXRoIGZpbGw9IiM0MjQyNDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMyAzMjQpIHNjYWxlKDgpIiBkPSJNNi44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhMNS43MDcgNWwxLjE0NyAxLjE0NmEuNS41IDAgMSAxLS43MDguNzA4TDUgNS43MDdMMy44NTQgNi44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMNC4yOTMgNUwzLjE0NiAzLjg1NGEuNS41IDAgMSAxIC43MDgtLjcwOEw1IDQuMjkzbDEuMTQ2LTEuMTQ3YS41LjUgMCAwIDEgLjcwOCAwTTAgNWE1IDUgMCAxIDEgMTAgMEE1IDUgMCAwIDEgMCA1bTUtNGE0IDQgMCAxIDAgMCA4YTQgNCAwIDAgMCAwLTgiLz4KPC9zdmc+Cg==); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/switch.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+TmV0d29yayBzd2l0Y2g8L3RpdGxlPgogIDxkZXNjIGlkPSJkZXNjIj5BIEZsdWVudCBVSSBzdHlsZSBuZXR3b3JrIHN3aXRjaCBpY29uIHNob3dpbmcgdGhyZWUgZXRoZXJuZXQgcG9ydHMgY29ubmVjdGVkIHZpYSBhIGNlbnRyYWwgYnVzLjwvZGVzYz4KICAKICA8IS0tIENvbm5lY3Rpb24gYnVzIGRvdHMgLS0+CiAgPGcgZmlsbD0iIzAwNzhENCI+CiAgICAgIDxjaXJjbGUgY3g9IjEzLjUiIGN5PSIyNCIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIxNy4xNiIgY3k9IjI0IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjIwLjgzIiBjeT0iMjQiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMjQuNSIgY3k9IjI0IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjI4LjE2IiBjeT0iMjQiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMzEuODMiIGN5PSIyNCIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzNS41IiBjeT0iMjQiIHI9IjEuNSIgLz4KICA8L2c+CgogIDwhLS0gUG9ydCAxIChUb3AtTGVmdCkgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCwgMikgc2NhbGUoMC4wNzQpIHRyYW5zbGF0ZSgtMTIzLCAtMTM1KSIgc3Ryb2tlPSIjMDA3OEQ0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYyMjFjMCA4LjgtNy4yIDE2LTE2IDE2SDEzOWMtOC44IDAtMTYtNy4yLTE2LTE2VjE1MWMwLTguOCA3LjItMTYgMTYtMTZ6IiBzdHJva2Utd2lkdGg9IjAuNzUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xNzEgMTg2aDE3M3YxMDFoLTMzdjI3aC0yN3YyM2gtNTV2LTIzaC0yN3YtMjdoLTMxeiIgc3Ryb2tlLXdpZHRoPSIwLjYiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIxMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjMxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI2NyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjg1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMyMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgPC9nPgoKICA8IS0tIFBvcnQgMiAoVG9wLVJpZ2h0KSAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNiwgMikgc2NhbGUoMC4wNzQpIHRyYW5zbGF0ZSgtMTIzLCAtMTM1KSIgc3Ryb2tlPSIjMDA3OEQ0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPHBhdGggZD0iTTEzOSAxMzVoMjM5YzguOCAwIDE2IDcuMiAxNiAxNnYyMjFjMCA4LjgtNy4yIDE2LTE2IDE2SDEzOWMtOC44IDAtMTYtNy4yLTE2LTE2VjE1MWMwLTguOCA3LjItMTYgMTYtMTZ6IiBzdHJva2Utd2lkdGg9IjAuNzUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xNzEgMTg2aDE3M3YxMDFoLTMzdjI3aC0yN3YyM2gtNTV2LTIzaC0yN3YtMjdoLTMxeiIgc3Ryb2tlLXdpZHRoPSIwLjYiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0xOTUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIxMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjMxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNDkgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI2NyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjg1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMDMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMyMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgPC9nPgoKICA8IS0tIFBvcnQgMyAoQm90dG9tLUNlbnRlcikgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUsIDI3KSBzY2FsZSgwLjA3NCkgdHJhbnNsYXRlKC0xMjMsIC0xMzUpIiBzdHJva2U9IiMwMDc4RDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djIyMWMwIDguOC03LjIgMTYtMTYgMTZIMTM5Yy04LjggMC0xNi03LjItMTYtMTZWMTUxYzAtOC44IDcuMi0xNiAxNi0xNnoiIHN0cm9rZS13aWR0aD0iMC43NSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjAuNiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE5NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjEzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI0OSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjY3IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMwMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzIxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICA8L2c+Cjwvc3ZnPgo=); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/switch_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --icon-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+TmV0d29yayBzd2l0Y2ggKGRpc2FibGVkKTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgRmx1ZW50IFVJIHN0eWxlIG5ldHdvcmsgc3dpdGNoIGljb24gc2hvd2luZyB0aHJlZSBldGhlcm5ldCBwb3J0cyBjb25uZWN0ZWQgdmlhIGEgY2VudHJhbCBidXMgaW4gYSBkaXNhYmxlZCBzdGF0ZS48L2Rlc2M+CiAgCiAgPCEtLSBDb25uZWN0aW9uIGJ1cyBkb3RzIC0tPgogIDxnIGZpbGw9IiMwMDc4RDQiPgogICAgICA8Y2lyY2xlIGN4PSIxMy41IiBjeT0iMjQiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMTcuMTYiIGN5PSIyNCIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIyMC44MyIgY3k9IjI0IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjI0LjUiIGN5PSIyNCIgcj0iMS41IiAvPgogICAgICA8Y2lyY2xlIGN4PSIyOC4xNiIgY3k9IjI0IiByPSIxLjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjMxLjgzIiBjeT0iMjQiIHI9IjEuNSIgLz4KICAgICAgPGNpcmNsZSBjeD0iMzUuNSIgY3k9IjI0IiByPSIxLjUiIC8+CiAgPC9nPgoKICA8IS0tIE9mZmxpbmUgQmFkZ2UgKEJvdHRvbS1MZWZ0KSAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLCAyOSkgc2NhbGUoMS42KSIgZmlsbD0iIzAwNzhENCI+CiAgICAgIDxwYXRoIGQ9Ik02Ljg1NCAzLjE0NmEuNS41IDAgMCAxIDAgLjcwOEw1LjcwNyA1bDEuMTQ3IDEuMTQ2YS41LjUgMCAxIDEtLjcwOC43MDhMNSA1LjcwN0wzLjg1NCA2Ljg1NGEuNS41IDAgMSAxLS43MDgtLjcwOEw0LjI5MyA1TDMuMTQ2IDMuODU0YS41LjUgMCAxIDEgLjcwOC0uNzA4TDUgNC4yOTNsMS4xNDYtMS4xNDdhLjUuNSAwIDAgMSAuNzA4IDBNMCA1YTUgNSAwIDEgMSAxMCAwQTUgNSAwIDAgMSAwIDVtNS00YTQgNCAwIDEgMCAwIDhhNCA0IDAgMCAwIDAtOCIvPgogIDwvZz4KCiAgPCEtLSBQb3J0IDEgKFRvcC1MZWZ0KSAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LCAyKSBzY2FsZSgwLjA3NCkgdHJhbnNsYXRlKC0xMjMsIC0xMzUpIiBzdHJva2U9IiMwMDc4RDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djIyMWMwIDguOC03LjIgMTYtMTYgMTZIMTM5Yy04LjggMC0xNi03LjItMTYtMTZWMTUxYzAtOC44IDcuMi0xNiAxNi0xNnoiIHN0cm9rZS13aWR0aD0iMC43NSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjAuNiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE5NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjEzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI0OSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjY3IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMwMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzIxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICA8L2c+CgogIDwhLS0gUG9ydCAyIChUb3AtUmlnaHQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LCAyKSBzY2FsZSgwLjA3NCkgdHJhbnNsYXRlKC0xMjMsIC0xMzUpIiBzdHJva2U9IiMwMDc4RDQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMTM5IDEzNWgyMzljOC44IDAgMTYgNy4yIDE2IDE2djIyMWMwIDguOC03LjIgMTYtMTYgMTZIMTM5Yy04LjggMC0xNi03LjItMTYtMTZWMTUxYzAtOC44IDcuMi0xNiAxNi0xNnoiIHN0cm9rZS13aWR0aD0iMC43NSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE3MSAxODZoMTczdjEwMWgtMzN2MjdoLTI3djIzaC01NXYtMjNoLTI3di0yN2gtMzF6IiBzdHJva2Utd2lkdGg9IjAuNiIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTE5NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjEzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMzEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI0OSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjY3IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yODUgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTMwMyAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzIxIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICA8L2c+CgogIDwhLS0gUG9ydCAzIChCb3R0b20tQ2VudGVyKSAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNSwgMjcpIHNjYWxlKDAuMDc0KSB0cmFuc2xhdGUoLTEyMywgLTEzNSkiIHN0cm9rZT0iIzAwNzhENCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0xMzkgMTM1aDIzOWM4LjggMCAxNiA3LjIgMTYgMTZ2MjIxYzAgOC44LTcuMiAxNi0xNiAxNkgxMzljLTguOCAwLTE2LTcuMi0xNi0xNlYxNTFjMC04LjggNy4yLTE2IDE2LTE2eiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTcxIDE4NmgxNzN2MTAxaC0zM3YyN2gtMjd2MjNoLTU1di0yM2gtMjd2LTI3aC0zMXoiIHN0cm9rZS13aWR0aD0iMC42IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMTk1IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yMTMgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTIzMSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMjQ5IDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0yNjcgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogICAgPHBhdGggZD0iTTI4NSAxODh2MjYiIHN0cm9rZS13aWR0aD0iMC40IiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+CiAgICA8cGF0aCBkPSJNMzAzIDE4OHYyNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz4KICAgIDxwYXRoIGQ9Ik0zMjEgMTg4djI2IiBzdHJva2Utd2lkdGg9IjAuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPgogIDwvZz4KPC9zdmc+Cg==); width: 24px; height: 24px; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/signal-000-000.svg"] { vertical-align: middle; width: 24px; height: 24px; display: inline-block; content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(0,0,0,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23616161%27%20d=%27M4.75%2012a.75.75%200%200%201%20.743.64l.008.11v2.503a.75.75%200%200%201-1.493.11L4%2015.254V12.75a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } [data-theme="dark"] img[src="/luci-static/resources/icons/signal-000-000.svg"] { content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(255,255,255,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23adadad%27%20d=%27M4.75%2012a.75.75%200%200%201%20.743.64l.008.11v2.503a.75.75%200%200%201-1.493.11L4%2015.254V12.75a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } img[src="/luci-static/resources/icons/signal-000-025.svg"] { vertical-align: middle; width: 24px; height: 24px; display: inline-block; content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(0,0,0,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23616161%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } [data-theme="dark"] img[src="/luci-static/resources/icons/signal-000-025.svg"] { content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(255,255,255,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23adadad%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } img[src="/luci-static/resources/icons/signal-025-050.svg"] { vertical-align: middle; width: 24px; height: 24px; display: inline-block; content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(0,0,0,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23616161%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.496a.75.75%200%200%201-1.492.11L4%2015.246V12.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.496a.75.75%200%200%201-1.492.11L7%2015.246V10.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } [data-theme="dark"] img[src="/luci-static/resources/icons/signal-025-050.svg"] { content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(255,255,255,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23adadad%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.496a.75.75%200%200%201-1.492.11L4%2015.246V12.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.496a.75.75%200%200%201-1.492.11L7%2015.246V10.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } img[src="/luci-static/resources/icons/signal-050-075.svg"] { vertical-align: middle; width: 24px; height: 24px; display: inline-block; content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(0,0,0,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23616161%27%20d=%27M4.75%2012a.75.75%200%200%201%20.741.639l.009.11v2.496a.75.75%200%200%201-1.492.11L4%2015.246V12.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.741.639l.009.11v4.496a.75.75%200%200%201-1.492.11L7%2015.246V10.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.741.639l.008.11v6.501a.75.75%200%200%201-1.49.111l-.009-.11V8.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.741.639l.008.11v8.501a.75.75%200%200%201-1.49.111l-.009-.11V6.75a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } [data-theme="dark"] img[src="/luci-static/resources/icons/signal-050-075.svg"] { content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(255,255,255,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23adadad%27%20d=%27M4.75%2012a.75.75%200%200%201%20.741.639l.009.11v2.496a.75.75%200%200%201-1.492.11L4%2015.246V12.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.741.639l.009.11v4.496a.75.75%200%200%201-1.492.11L7%2015.246V10.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.741.639l.008.11v6.501a.75.75%200%200%201-1.49.111l-.009-.11V8.75a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.741.639l.008.11v8.501a.75.75%200%200%201-1.49.111l-.009-.11V6.75a.75.75%200%200%201%20.75-.75%27/%3E%3C/svg%3E") !important; } img[src="/luci-static/resources/icons/signal-075-100.svg"] { vertical-align: middle; width: 24px; height: 24px; display: inline-block; content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(0,0,0,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23616161%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3C/svg%3E") !important; } [data-theme="dark"] img[src="/luci-static/resources/icons/signal-075-100.svg"] { content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%20viewBox=%270%200%2020%2020%27%20fill=%27none%27%3E%3Cpath%20fill=%27rgba(255,255,255,0.18)%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3Cpath%20fill=%27%23adadad%27%20d=%27M4.75%2012a.75.75%200%200%201%20.742.64l.008.11v2.5a.75.75%200%200%201-1.492.11L4%2015.25v-2.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v4.5a.75.75%200%200%201-1.492.11L7%2015.25v-4.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v6.5a.75.75%200%200%201-1.492.11L10%2015.25v-6.5a.75.75%200%200%201%20.75-.75m3-2a.75.75%200%200%201%20.742.64l.008.11v8.499a.75.75%200%200%201-1.492.11L13%2015.25v-8.5a.75.75%200%200%201%20.75-.75m3-2a.74.74%200%200%201%20.74.626l.01.11l-.014%2010.515a.743.743%200%200%201-1.477.124l-.009-.11l.014-10.515A.743.743%200%200%201%2016.75%204%27/%3E%3C/svg%3E") !important; } img[src="/luci-static/resources/icons/signal-none.svg"] { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-cellular-warning-20-filled: url("data:image/svg+xml,"); width: 24px; height: 24px; -webkit-mask-image: var(--fluent-mask-fluent-cellular-warning-20-filled); mask-image: var(--fluent-mask-fluent-cellular-warning-20-filled); -webkit-user-select: none; user-select: none; content: url("data:image/svg+xml;utf8,"); display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/wifi.svg"] { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-wifi-1-20-filled: url("data:image/svg+xml,"); width: 24px; height: 24px; -webkit-mask-image: var(--fluent-mask-fluent-wifi-1-20-filled); mask-image: var(--fluent-mask-fluent-wifi-1-20-filled); -webkit-user-select: none; user-select: none; content: url("data:image/svg+xml;utf8,"); display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } img[src="/luci-static/resources/icons/wifi_disabled.svg"] { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-wifi-off-20-filled: url("data:image/svg+xml,"); width: 24px; height: 24px; -webkit-mask-image: var(--fluent-mask-fluent-wifi-off-20-filled); mask-image: var(--fluent-mask-fluent-wifi-off-20-filled); -webkit-user-select: none; user-select: none; content: url("data:image/svg+xml;utf8,"); display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent { --text-color-high: var(--fluent-text); --text-color-medium: var(--fluent-text-secondary); --text-color-low: var(--fluent-text-secondary); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .dashboard-bg { background: var(--fluent-card-bg); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-card-radius); box-shadow: var(--fluent-card-shadow); padding: var(--fluent-card-padding); flex: 1 1 calc(50% - var(--fluent-space-lg)); box-sizing: border-box; min-width: 320px; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .router-status-wifi .settings-info { gap: var(--fluent-space-md); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); display: grid; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .radio-info { background: var(--fluent-bg); border: 1px solid var(--fluent-table-border); border-radius: var(--fluent-radius-md); padding: var(--fluent-space-sm) var(--fluent-space-md); font-size: var(--fluent-font-size-sm); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .radio-info p { line-height: var(--fluent-line-height-normal); margin: 3px 0; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .radio-info p > span:first-child { color: var(--fluent-text-secondary); min-width: 100px; display: inline-block; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .label { border-radius: var(--fluent-radius-sm); font-size: var(--fluent-font-size-xs); font-weight: var(--fluent-font-weight-semibold); text-transform: uppercase; letter-spacing: .03em; padding: 1px 8px; line-height: 1.6; display: inline-block; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .label-success { background: var(--fluent-success-light); color: var(--fluent-success); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .label-danger { background: var(--fluent-error-light); color: var(--fluent-error); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .label-warning { background: var(--fluent-warning-light); color: #866b00; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist { border-collapse: collapse; width: 100%; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist .thead { background: var(--fluent-table-header-bg); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist .th { font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text-secondary); border-bottom: 2px solid var(--fluent-table-border); white-space: nowrap; text-align: left; padding: 8px 12px; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist .td { font-size: var(--fluent-font-size-sm); color: var(--fluent-text); border-bottom: 1px solid var(--fluent-table-border); vertical-align: middle; padding: 8px 12px; position: static; top: auto; overflow: visible; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist .td:nth-child(3) { min-width: 140px; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist .tr:hover .td { background: var(--fluent-table-row-hover); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .devices-list .table.assoclist .tfoot .td { font-weight: var(--fluent-font-weight-semibold); border-top: 2px solid var(--fluent-table-border); border-bottom: none; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .wireless-table-transfer br + span { font-size: var(--fluent-font-size-xs); } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .cbi-progressbar { min-width: 120px; background: none !important; } @media (max-width: 767px) { body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .dashboard-bg { flex: 100%; min-width: 0; } body[data-page="admin-dashboard"] > .main > .main-right > #maincontent .settings-info { grid-template-columns: 1fr !important; } } body[data-page="admin-status-nftables-iptables"] > .main > .main-right > #maincontent #view > div.right { margin-top: 4px; margin-bottom: 0 !important; } body[data-page="admin-status-channel_analysis"] > .main > .main-right > #maincontent #view > div > div.cbi-title-section { display: flex; } body[data-page="admin-status-channel_analysis"] > .main > .main-right > #maincontent #view > div > div.cbi-title-section > div { margin-left: auto; } body[data-page="admin-status-channel_analysis"] > .main > .main-right > #maincontent #channel_graph { border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-card-radius); background: var(--fluent-card-bg) !important; } body[data-page="admin-status-channel_analysis"] > .main > .main-right > #maincontent #channel_graph svg line[style*="stroke:black"] { stroke: var(--fluent-text-secondary) !important; } body[data-page="admin-status-channel_analysis"] > .main > .main-right > #maincontent div[data-tab]:not([data-tab-active="true"]):not([tab-active="true"]) { visibility: hidden !important; width: 100% !important; height: 0 !important; display: block !important; position: absolute !important; overflow: hidden !important; } body[data-page^="admin-status-realtime"] > .main > .main-right > #maincontent .cbi-section div[style*="background:#fff"] { background: var(--fluent-card-bg) !important; border-radius: var(--fluent-card-radius) !important; border: none !important; } body[data-page^="admin-status-realtime"] > .main > .main-right > #maincontent .cbi-section svg line[style*="stroke:black"] { stroke: var(--fluent-text-secondary) !important; } body[data-page^="admin-status-overview"] > .main > .main-right > #maincontent .ifacebox > .ifacebox-body > br { display: none; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager { justify-content: center; gap: var(--fluent-space-xs); box-sizing: border-box; width: 100%; padding: 0; align-items: center !important; display: flex !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button { border-radius: var(--fluent-radius-md); min-width: 32px; height: 32px; font-weight: var(--fluent-font-weight-semibold); color: var(--fluent-text); background: var(--fluent-btn-secondary-bg); border: 1px solid var(--fluent-btn-secondary-border); cursor: pointer; -webkit-user-select: none; user-select: none; box-sizing: border-box; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard),transform var(--fluent-duration-fast) var(--fluent-easing-standard); justify-content: center; align-items: center; margin: 0; display: inline-flex; flex: none !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn.prev, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn.next, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button.prev, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button.next, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button.prev, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button.next { width: 32px; padding: 0; font-size: 0 !important; line-height: 0 !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn.prev:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn.next:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button.prev:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button.next:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button.prev:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button.next:before { content: ""; width: 16px; height: 16px; display: inline-block; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn.prev:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button.prev:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button.prev:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-chevron-left-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-chevron-left-20-regular); mask-image: var(--fluent-mask-chevron-left-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .btn.next:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .cbi-button.next:before, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > button.next:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-chevron-right-20-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-chevron-right-20-regular); mask-image: var(--fluent-mask-chevron-right-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > .text, body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .pager > span { padding: 0 var(--fluent-space-md); font-size: var(--fluent-font-size-sm); color: var(--fluent-text-secondary); font-weight: var(--fluent-font-weight-normal); -webkit-user-select: none; user-select: none; white-space: nowrap; line-height: 32px; flex: none !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .controls > .pager { flex: 100% !important; max-width: 100% !important; } body[data-page="admin-system-package-manager"] > .main > .main-right > #maincontent .controls > .pager > * { flex: none !important; align-self: center !important; } body[data-page="admin-system-package-manager"] > #modal_overlay div.modal > .modal-content-wrap > ul:first-child { max-height: calc(85dvh - 300px); overflow-y: auto; } body[data-page="admin-system-package-manager"] > #modal_overlay div.modal > .modal-content-wrap > ul.errors { margin-left: unset !important; padding-inline-start: unset !important; } body[data-page="admin-system-package-manager"] > #modal_overlay div.modal > div:has(hr:first-child) > hr:first-child { display: none; } body[data-page="admin-system-package-manager"] > #modal_overlay div.modal > div:has(hr:first-child) > p:nth-child(2) { margin-top: var(--fluent-space-lg) !important; margin-bottom: unset !important; } body[data-page^="admin-status-logs-syslog"] textarea#syslog, body[data-page^="admin-status-logs-dmesg"] textarea#syslog { display: none; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer { background-color: var(--fluent-card-bg); border: 1px solid var(--fluent-card-border); border-radius: var(--fluent-card-radius); box-shadow: var(--fluent-card-shadow); margin-bottom: var(--fluent-space-lg); transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard),box-shadow var(--fluent-duration-fast) var(--fluent-easing-standard); flex-direction: column; display: flex; overflow: hidden; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__header, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__header { justify-content: space-between; align-items: center; gap: var(--fluent-space-sm); padding: var(--fluent-space-sm) var(--fluent-space-md); background-color: var(--fluent-bg-hover); border-bottom: 1px solid var(--fluent-card-border); flex-wrap: wrap; display: flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__stats, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__stats { align-items: center; gap: var(--fluent-space-xs); flex-wrap: wrap; display: flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge { border-radius: var(--fluent-radius-circular); font-size: var(--fluent-font-size-sm); font-weight: var(--fluent-font-weight-semibold); align-items: center; gap: 4px; padding: 3px 10px; line-height: 1; display: inline-flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge--lines, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge--lines { background-color: color-mix(in srgb, var(--fluent-text-secondary) 12%, transparent); color: var(--fluent-text-secondary); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge--errors, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge--errors { background-color: var(--fluent-error-light); color: var(--fluent-error); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge--warnings, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge--warnings { background-color: var(--fluent-warning-light); color: var(--fluent-warning); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge--disconnects, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge--disconnects { background-color: var(--fluent-purple-light); color: var(--fluent-purple); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge-icon, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge-icon { width: 14px; height: 14px; display: inline-block; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge-icon--lines, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge-icon--lines { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-document-16-regular: url("data:image/svg+xml,"); width: 14px; height: 14px; -webkit-mask-image: var(--fluent-mask-fluent-document-16-regular); mask-image: var(--fluent-mask-fluent-document-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge-icon--errors, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge-icon--errors { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-error-circle-16-regular: url("data:image/svg+xml,"); width: 14px; height: 14px; -webkit-mask-image: var(--fluent-mask-fluent-error-circle-16-regular); mask-image: var(--fluent-mask-fluent-error-circle-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge-icon--warnings, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge-icon--warnings { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-warning-16-regular: url("data:image/svg+xml,"); width: 14px; height: 14px; -webkit-mask-image: var(--fluent-mask-fluent-warning-16-regular); mask-image: var(--fluent-mask-fluent-warning-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__badge-icon--disconnects, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__badge-icon--disconnects { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-plug-disconnected-16-regular: url("data:image/svg+xml,"); width: 14px; height: 14px; -webkit-mask-image: var(--fluent-mask-fluent-plug-disconnected-16-regular); mask-image: var(--fluent-mask-fluent-plug-disconnected-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__toolbar, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__toolbar { align-items: center; gap: 2px; display: flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__tool-btn, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__tool-btn { border-radius: var(--fluent-radius-md); width: 32px; height: 32px; color: var(--fluent-text-secondary); cursor: pointer; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard); background: none; border: none; outline: none; justify-content: center; align-items: center; padding: 0; display: inline-flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__tool-btn:hover, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__tool-btn:hover { background-color: var(--fluent-bg-hover); color: var(--fluent-text); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__tool-btn:focus-visible, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__tool-btn:focus-visible { outline: 2px solid var(--fluent-primary); outline-offset: -2px; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__tool-btn.active, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__tool-btn.active { background-color: var(--fluent-bg-active); color: var(--fluent-primary); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__tool-btn--feedback, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__tool-btn--feedback { background-color: var(--fluent-success-light); color: var(--fluent-success); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon { width: 16px; height: 16px; display: inline-block; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--wrap, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--wrap { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-text-wrap-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-text-wrap-16-regular); mask-image: var(--fluent-mask-fluent-text-wrap-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--autoscroll, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--autoscroll { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-clock-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-clock-16-regular); mask-image: var(--fluent-mask-fluent-clock-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--copy, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--copy { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-copy-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-copy-16-regular); mask-image: var(--fluent-mask-fluent-copy-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--download, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--download { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-arrow-download-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-arrow-download-16-regular); mask-image: var(--fluent-mask-fluent-arrow-download-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--scroll-top, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--scroll-top { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-arrow-up-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-arrow-up-16-regular); mask-image: var(--fluent-mask-fluent-arrow-up-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--scroll-bottom, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--scroll-bottom { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-arrow-down-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-arrow-down-16-regular); mask-image: var(--fluent-mask-fluent-arrow-down-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--fullscreen, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--fullscreen { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-full-screen-maximize-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-full-screen-maximize-16-regular); mask-image: var(--fluent-mask-fluent-full-screen-maximize-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__icon--fullscreen-exit, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__icon--fullscreen-exit { content: url("data:image/svg+xml;utf8,"); --fluent-mask-fluent-full-screen-minimize-16-regular: url("data:image/svg+xml,"); width: 16px; height: 16px; -webkit-mask-image: var(--fluent-mask-fluent-full-screen-minimize-16-regular); mask-image: var(--fluent-mask-fluent-full-screen-minimize-16-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__body, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__body { max-height: 600px; font-family: var(--fluent-font-mono, Consolas, Monaco, "Courier New", monospace); font-size: var(--fluent-font-size-sm); background-color: var(--fluent-bg-card); color: var(--fluent-text); padding: var(--fluent-space-xs) 0; scroll-behavior: smooth; line-height: 1.6; overflow: auto; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__content, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__content { box-sizing: border-box; flex-direction: column; width: 100%; min-width: max-content; display: flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line { padding: 1px var(--fluent-space-sm); white-space: pre; box-sizing: border-box; align-items: baseline; gap: 6px; min-width: 0; display: flex; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line:hover, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line:hover { background-color: var(--fluent-bg-hover); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--err, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--err { background-color: color-mix(in srgb, var(--fluent-error) 8%, transparent); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--err .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--err .fluent-log-viewer__line-number { border-left-color: var(--fluent-error); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--warn, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--warn { background-color: color-mix(in srgb, var(--fluent-warning) 8%, transparent); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--warn .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--warn .fluent-log-viewer__line-number { border-left-color: var(--fluent-warning); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--info .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--notice .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--info .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--notice .fluent-log-viewer__line-number { border-left-color: var(--fluent-info); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line--disconnect .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line--disconnect .fluent-log-viewer__line-number { border-left-color: var(--fluent-purple); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line-number, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line-number { text-align: right; -webkit-user-select: none; user-select: none; min-width: 34px; color: var(--fluent-text-disabled); border-left: 2px solid #0000; flex-shrink: 0; padding: 0 4px 0 6px; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__line-time, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__line-time { color: var(--fluent-text-secondary); font-size: var(--fluent-font-size-xs); flex-shrink: 0; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level { border-radius: var(--fluent-radius-sm); font-size: var(--fluent-font-size-xs); font-weight: var(--fluent-font-weight-semibold); background-color: var(--fluent-bg-hover); color: var(--fluent-text); flex-shrink: 0; padding: 1px 6px; display: inline-block; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--err, body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--crit, body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--alert, body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--emerg, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--err, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--crit, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--alert, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--emerg { background-color: var(--fluent-error-light); color: var(--fluent-error); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--warn, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--warn { background-color: var(--fluent-warning-light); color: var(--fluent-warning); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--info, body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__level--notice, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--info, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__level--notice { background-color: var(--fluent-info-light); color: var(--fluent-info); } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__tag, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__tag { color: var(--fluent-primary); font-weight: var(--fluent-font-weight-semibold); flex-shrink: 0; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer__text, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer__text { color: var(--fluent-text); flex: 1; min-width: 0; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer--wrap .fluent-log-viewer__body, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer--wrap .fluent-log-viewer__body { overflow-x: hidden !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer--wrap .fluent-log-viewer__content, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer--wrap .fluent-log-viewer__content { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer--wrap .fluent-log-viewer__line, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer--wrap .fluent-log-viewer__line { white-space: pre-wrap !important; word-break: break-all !important; overflow-wrap: anywhere !important; width: 100% !important; max-width: 100% !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer--wrap .fluent-log-viewer__text, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer--wrap .fluent-log-viewer__text { white-space: pre-wrap !important; word-break: break-all !important; overflow-wrap: anywhere !important; flex: 1 !important; min-width: 0 !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer--fullscreen, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer--fullscreen { z-index: 999999 !important; background-color: var(--fluent-card-bg) !important; width: 100vw !important; height: 100dvh !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; position: fixed !important; inset: 0 !important; } body[data-page^="admin-status-logs-syslog"] .fluent-log-viewer--fullscreen .fluent-log-viewer__body, body[data-page^="admin-status-logs-dmesg"] .fluent-log-viewer--fullscreen .fluent-log-viewer__body { flex: 1 !important; max-height: none !important; } body.fluent-log-fullscreen { overflow: hidden !important; } body[data-page="admin-network-wireless"] > #modal_overlay > .modal { max-height: 90% !important; } body[data-page^="admin-services-appfilter"] > .main > .main-right > #maincontent .slider { background-color: var(--background-color-medium); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent { --pb-input-bg: var(--fluent-input-bg); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-preview-box { background: var(--fluent-card-bg); color: var(--fluent-text-secondary); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-tab:hover:not(.is-active) { background: var(--fluent-bg-hover); border-color: var(--fluent-border-hover); color: var(--fluent-text); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-mode-card { background: var(--fluent-card-bg); border-color: var(--fluent-card-border); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-inline-field { background: var(--fluent-input-bg); border-color: var(--fluent-input-border); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-card-title { color: var(--fluent-text); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-card-subtitle, :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-inline-title, :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-inline-description, :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-tab { color: var(--fluent-text-secondary); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-tab-bar { background: var(--fluent-bg-hover); border-color: var(--fluent-border); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-tab.is-active { background: var(--fluent-card-bg); color: var(--fluent-text); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-choice-button:not(.is-on) { background: var(--fluent-btn-secondary-bg); border-color: var(--fluent-btn-secondary-border); color: var(--fluent-text); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-sel-list { background: var(--fluent-card-bg); border-color: var(--fluent-card-border); } :root[data-theme="dark"] body[data-page="admin-services-pushbot"] > .main > .main-right > #maincontent .pushbot-sel-item { color: var(--fluent-text); } :root, [data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; --fluent-primary: #0078d4; --fluent-primary-hover: var(--fluent-brand-70); --fluent-primary-active: var(--fluent-brand-60); --fluent-primary-light: var(--fluent-brand-140); --fluent-primary-lighter: var(--fluent-brand-150); --fluent-primary-lightest: var(--fluent-brand-160); --fluent-selection-bg: var(--fluent-primary-light); --fluent-selection-text: var(--fluent-text); --fluent-white: #fff; --fluent-black: #000; --fluent-bg: #fff; --fluent-bg-hover: #f5f5f5; --fluent-bg-active: #ebebeb; --fluent-bg-card: #fff; --fluent-bg-page: #fafafa; --fluent-text: #242424; --fluent-text-secondary: #616161; --fluent-text-disabled: #a0a0a0; --fluent-text-on-primary: #fff; --fluent-text-link: var(--fluent-primary); --fluent-text-link-hover: var(--fluent-primary-hover); --fluent-border: #d1d1d1; --fluent-border-hover: #a0a0a0; --fluent-border-active: var(--fluent-primary); --fluent-success: #107c10; --fluent-success-light: #f1faf1; --fluent-warning: #ffb900; --fluent-warning-light: #fff4ce; --fluent-error: #d13438; --fluent-error-hover: #b42b2f; --fluent-error-active: #9a2226; --fluent-error-light: #fde7e9; --fluent-info: var(--fluent-primary); --fluent-info-light: var(--fluent-primary-lightest); --fluent-purple: #7e22ce; --fluent-purple-light: #f3e8ff; --fluent-shadow-sm: 0 2px 4px #0000000a, 0 2px 10px #0000000f; --fluent-shadow-md: 0 4px 8px #0000000f, 0 4px 18px #00000014; --fluent-shadow-lg: 0 8px 16px #00000014, 0 8px 32px #0000001a; --fluent-shadow-xl: 0 20px 40px #0000001f, 0 10px 20px #00000014; --fluent-sidebar-bg: #f3f3f3; --fluent-sidebar-item-hover: #0000000a; --fluent-sidebar-item-active: color-mix(in srgb, var(--fluent-primary) 6%, transparent); --fluent-header-bg: var(--fluent-primary); --fluent-header-text: #fff; --fluent-input-border: #d1d1d1; --fluent-input-border-bottom: #616161; --fluent-input-border-hover: #c7c7c7; --fluent-input-border-bottom-hover: #575757; --fluent-input-border-bottom-focus: var(--fluent-primary); --fluent-input-bg: #fff; --fluent-input-bg-disabled: #f0f0f0; --fluent-input-bg-hover: #f5f5f5; --fluent-calendar-picker-invert: 0; --fluent-btn-primary-bg: var(--fluent-primary); --fluent-btn-primary-bg-hover: var(--fluent-primary-hover); --fluent-btn-primary-bg-active: var(--fluent-primary-active); --fluent-btn-secondary-bg: #fff; --fluent-btn-secondary-bg-hover: #f5f5f5; --fluent-btn-secondary-bg-active: #e0e0e0; --fluent-btn-secondary-border: #d1d1d1; --fluent-btn-secondary-border-hover: #d1d1d1; --fluent-btn-secondary-border-active: #d1d1d1; --fluent-card-bg: #fff; --fluent-card-border: #e0e0e0; --fluent-card-shadow: var(--fluent-shadow-sm); --fluent-table-header-bg: #f5f5f5; --fluent-table-row-hover: #f5f5f5; --fluent-table-row-selected: var(--fluent-primary-lightest); --fluent-table-border: #e0e0e0; --fluent-modal-bg: #fff; --fluent-modal-overlay: #0006; --fluent-tab-indicator-color: var(--fluent-primary); --fluent-checkbox-border: #616161; --fluent-checkbox-bg: #fff; --fluent-checkbox-checked-bg: var(--fluent-primary); --fluent-checkbox-checked-border: var(--fluent-primary); --fluent-checkbox-hover-border: #242424; --fluent-scrollbar-thumb-bg: #c2c2c2; --fluent-scrollbar-thumb-bg-hover: #a0a0a0; --fluent-scrollbar-thumb-horizontal-bg: #00000026; --fluent-scrollbar-thumb-horizontal-bg-hover: #00000059; --fluent-progress-bg: #e0e0e0; --fluent-progress-bar-bg: var(--fluent-primary); --fluent-badge-bg: var(--fluent-primary); --fluent-badge-text: #fff; --fluent-toast-bg: #fff; --fluent-toast-shadow: var(--fluent-shadow-lg); --fluent-login-bg: #ffffffeb; --fluent-login-border: #ffffffb3; --fluent-login-icon-color: var(--fluent-text-secondary); --fluent-tooltip-bg: #242424; --fluent-tooltip-text: #fff; --fluent-dropdown-bg: var(--fluent-bg-card); --fluent-dropdown-border: var(--fluent-input-border); --fluent-dropdown-shadow: 0 8px 16px #00000024, 0 0 2px #0000001f; --fluent-dropdown-option-hover: var(--fluent-bg-hover); --fluent-dropdown-option-selected: var(--fluent-primary-lightest); --fluent-focus-color: #000; --fluent-focus-inner-color: #fff; } body[data-page^="admin-quickstart"] .network_container canvas, body[data-page^="admin-network_guide"] .network_container canvas, body[data-page^="admin-nas-raid"] .network_container canvas, body[data-page^="admin-network-interfaceconfig"] .network_container canvas { filter: invert() hue-rotate(180deg) contrast(1.25) brightness(1.1); } body[data-page^="admin-quickstart"] #actioner, body[data-page^="admin-network_guide"] #actioner, body[data-page^="admin-nas-raid"] #actioner, body[data-page^="admin-network-interfaceconfig"] #actioner { z-index: 9999; } body[data-page^="admin-quickstart"] #actioner form, body[data-page^="admin-network_guide"] #actioner form, body[data-page^="admin-nas-raid"] #actioner form, body[data-page^="admin-network-interfaceconfig"] #actioner form { background-color: var(--fluent-card-bg) !important; } body[data-page^="admin-quickstart"] #actioner > form, body[data-page^="admin-quickstart"] > #modal_overlay, body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent, body[data-page^="admin-network_guide"] #actioner > form, body[data-page^="admin-network_guide"] > #modal_overlay, body[data-page^="admin-network_guide"] > .main > .main-right > #maincontent, body[data-page^="admin-nas-raid"] #actioner > form, body[data-page^="admin-nas-raid"] > #modal_overlay, body[data-page^="admin-nas-raid"] > .main > .main-right > #maincontent, body[data-page^="admin-network-interfaceconfig"] #actioner > form, body[data-page^="admin-network-interfaceconfig"] > #modal_overlay, body[data-page^="admin-network-interfaceconfig"] > .main > .main-right > #maincontent { --flow-bg-color: var(--fluent-card-bg); --flow-span-color: var(--fluent-text-secondary); --card-bg-color: var(--fluent-card-bg); --card-box-shadow: var(--fluent-card-shadow); --app-container_title-color: var(--fluent-text); --app-container_status-label_block: var(--fluent-text-secondary); --item-label_key-span-color: var(--fluent-text-secondary); --item-label_value-span-color: var(--fluent-text); --app-container_status-label_bg: var(--fluent-bg-hover); --item_btn-border: 1px solid var(--fluent-primary); --item_btn-color: var(--fluent-primary); --tit-color: var(--fluent-text); --popup-bg-color: var(--fluent-modal-bg); --tag-bg-color: var(--fluent-bg-hover); --gradient-bg-color: linear-gradient(90deg, transparent 0%, var(--fluent-card-bg) 62%, var(--fluent-card-bg) 100%); --breadcrumbs-tit-color: var(--fluent-text-secondary); --breadcrumbs-tit-color1: var(--fluent-text); --border-color: var(--fluent-card-border); --SystemUpdateBanner-bg-color: var(--fluent-bg-hover); --SystemUpdateBanner-border-color: var(--fluent-card-border); --btn-border-color: var(--fluent-border); --card-txt-color: var(--fluent-text); --SystemInfo-bg-color: var(--fluent-card-bg); } [data-theme="dark"] body[data-page^="admin-network_guide"] .title { color: var(--fluent-text) !important; } [data-theme="dark"] body[data-page^="admin-network_guide"] .desc { color: var(--fluent-text-secondary) !important; } [data-theme="dark"] body[data-page^="admin-network_guide"] .title, [data-theme="dark"] body[data-page^="admin-network_guide"] .desc, [data-theme="dark"] body[data-page^="admin-network_guide"] code { background-color: unset !important; } [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; --fluent-primary: #0078d4; --fluent-primary-hover: var(--fluent-brand-70); --fluent-primary-active: var(--fluent-brand-60); --fluent-primary-light: var(--fluent-brand-140); --fluent-primary-lighter: var(--fluent-brand-150); --fluent-primary-lightest: var(--fluent-brand-160); --fluent-selection-bg: var(--fluent-primary-light); --fluent-selection-text: var(--fluent-text); --fluent-white: #fff; --fluent-black: #000; --fluent-bg: #fff; --fluent-bg-hover: #f5f5f5; --fluent-bg-active: #ebebeb; --fluent-bg-card: #fff; --fluent-bg-page: #fafafa; --fluent-text: #242424; --fluent-text-secondary: #616161; --fluent-text-disabled: #a0a0a0; --fluent-text-on-primary: #fff; --fluent-text-link: var(--fluent-primary); --fluent-text-link-hover: var(--fluent-primary-hover); --fluent-border: #d1d1d1; --fluent-border-hover: #a0a0a0; --fluent-border-active: var(--fluent-primary); --fluent-success: #107c10; --fluent-success-light: #f1faf1; --fluent-warning: #ffb900; --fluent-warning-light: #fff4ce; --fluent-error: #d13438; --fluent-error-hover: #b42b2f; --fluent-error-active: #9a2226; --fluent-error-light: #fde7e9; --fluent-info: var(--fluent-primary); --fluent-info-light: var(--fluent-primary-lightest); --fluent-purple: #7e22ce; --fluent-purple-light: #f3e8ff; --fluent-shadow-sm: 0 2px 4px #0000000a, 0 2px 10px #0000000f; --fluent-shadow-md: 0 4px 8px #0000000f, 0 4px 18px #00000014; --fluent-shadow-lg: 0 8px 16px #00000014, 0 8px 32px #0000001a; --fluent-shadow-xl: 0 20px 40px #0000001f, 0 10px 20px #00000014; --fluent-sidebar-bg: #f3f3f3; --fluent-sidebar-item-hover: #0000000a; --fluent-sidebar-item-active: color-mix(in srgb, var(--fluent-primary) 6%, transparent); --fluent-header-bg: var(--fluent-primary); --fluent-header-text: #fff; --fluent-input-border: #d1d1d1; --fluent-input-border-bottom: #616161; --fluent-input-border-hover: #c7c7c7; --fluent-input-border-bottom-hover: #575757; --fluent-input-border-bottom-focus: var(--fluent-primary); --fluent-input-bg: #fff; --fluent-input-bg-disabled: #f0f0f0; --fluent-input-bg-hover: #f5f5f5; --fluent-calendar-picker-invert: 0; --fluent-btn-primary-bg: var(--fluent-primary); --fluent-btn-primary-bg-hover: var(--fluent-primary-hover); --fluent-btn-primary-bg-active: var(--fluent-primary-active); --fluent-btn-secondary-bg: #fff; --fluent-btn-secondary-bg-hover: #f5f5f5; --fluent-btn-secondary-bg-active: #e0e0e0; --fluent-btn-secondary-border: #d1d1d1; --fluent-btn-secondary-border-hover: #d1d1d1; --fluent-btn-secondary-border-active: #d1d1d1; --fluent-card-bg: #fff; --fluent-card-border: #e0e0e0; --fluent-card-shadow: var(--fluent-shadow-sm); --fluent-table-header-bg: #f5f5f5; --fluent-table-row-hover: #f5f5f5; --fluent-table-row-selected: var(--fluent-primary-lightest); --fluent-table-border: #e0e0e0; --fluent-modal-bg: #fff; --fluent-modal-overlay: #0006; --fluent-tab-indicator-color: var(--fluent-primary); --fluent-checkbox-border: #616161; --fluent-checkbox-bg: #fff; --fluent-checkbox-checked-bg: var(--fluent-primary); --fluent-checkbox-checked-border: var(--fluent-primary); --fluent-checkbox-hover-border: #242424; --fluent-scrollbar-thumb-bg: #c2c2c2; --fluent-scrollbar-thumb-bg-hover: #a0a0a0; --fluent-scrollbar-thumb-horizontal-bg: #00000026; --fluent-scrollbar-thumb-horizontal-bg-hover: #00000059; --fluent-progress-bg: #e0e0e0; --fluent-progress-bar-bg: var(--fluent-primary); --fluent-badge-bg: var(--fluent-primary); --fluent-badge-text: #fff; --fluent-toast-bg: #fff; --fluent-toast-shadow: var(--fluent-shadow-lg); --fluent-login-bg: #ffffffeb; --fluent-login-border: #ffffffb3; --fluent-login-icon-color: var(--fluent-text-secondary); --fluent-tooltip-bg: #242424; --fluent-tooltip-text: #fff; --fluent-dropdown-bg: var(--fluent-bg-card); --fluent-dropdown-border: var(--fluent-input-border); --fluent-dropdown-shadow: 0 8px 16px #00000024, 0 0 2px #0000001f; --fluent-dropdown-option-hover: var(--fluent-bg-hover); --fluent-dropdown-option-selected: var(--fluent-primary-lightest); --fluent-focus-color: #000; --fluent-focus-inner-color: #fff; --flow-bg-color: #d6d6d6; --flow-span-color: #525252; --card-bg-color: #d6d6d6; --card-box-shadow: 0 0 10px 1px #0006; --app-container_title-color: #000; --app-container_status-label_block: #000; --item-label_key-span-color: #525252; --item-label_value-span-color: #000; --app-container_status-label_bg: #ccc; --item_btn-border: 1px solid #0078d4; --item_btn-color: #0078d4; --tit-color: #000; --popup-bg-color: #d6d6d6; --tag-bg-color: #ccc; --gradient-bg-color: linear-gradient(90deg, #d6d6d600 0%, #d6d6d6cc 62%, #d6d6d6 100%); --breadcrumbs-tit-color: #525252; --breadcrumbs-tit-color1: #000; --border-color: #c2c2c2; --SystemUpdateBanner-bg-color: #eff6ff; --SystemUpdateBanner-border-color: #bedbff; --btn-border-color: #c2c2c2; --card-txt-color: #000; --SystemInfo-bg-color: #d6d6d6; color: #000; border-radius: var(--fluent-card-radius); filter: invert() hue-rotate(180deg); transition: filter var(--fluent-duration-normal) var(--fluent-easing-standard); background-color: #e5e5e5; --lightningcss-light: !important; --lightningcss-dark: initial !important; color-scheme: dark !important; } [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form #main > div > .card-container > .feature-card > div > .header > div > svg, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form img, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form canvas, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form div.network-containers .model_btn, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay #main > div > .card-container > .feature-card > div > .header > div > svg, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay img, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay canvas, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay div.network-containers .model_btn, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent #main > div > .card-container > .feature-card > div > .header > div > svg, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent img, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent canvas, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent div.network-containers .model_btn { filter: invert() hue-rotate(180deg); } [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form #main > div > div:first-child > div:has( > a:first-child):has(svg) { filter: invert() hue-rotate(180deg); } [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay #main > div > div:first-child > div:has( > a:first-child):has(svg) { filter: invert() hue-rotate(180deg); } [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent #main > div > div:first-child > div:has( > a:first-child):has(svg) { filter: invert() hue-rotate(180deg); } [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .del-button, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .footer-btn, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .app-back, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .btn-pink, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .del-button, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .footer-btn, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .app-back, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .btn-pink, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .del-button, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .footer-btn, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .app-back, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .btn-pink { filter: invert() hue-rotate(180deg) !important; background: var(--fluent-error) !important; color: var(--fluent-text-on-primary) !important; border-color: var(--fluent-error) !important; } [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .cbi-button, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .modal-button.confirm, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .add-button, [data-theme="dark"] body[data-page^="admin-quickstart"] #actioner > form .app-next, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .cbi-button, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .modal-button.confirm, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .add-button, [data-theme="dark"] body[data-page^="admin-quickstart"] > #modal_overlay .app-next, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .cbi-button, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .modal-button.confirm, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .add-button, [data-theme="dark"] body[data-page^="admin-quickstart"] > .main > .main-right > #maincontent .app-next { filter: invert() hue-rotate(180deg) !important; background: var(--fluent-primary) !important; color: var(--fluent-text-on-primary) !important; border-color: var(--fluent-primary) !important; } body.login-page { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin: 0 !important; overflow-x: hidden !important; } .login-page { box-sizing: border-box !important; background: radial-gradient(circle, #f3f4f6 0%, #d1d5db 100%) !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; display: flex !important; position: relative !important; overflow: hidden !important; } .login-page .main-bg { z-index: 1 !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } .login-page .video { background-color: var(--fluent-black) !important; z-index: 1 !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; display: flex !important; position: absolute !important; inset: 0 !important; overflow: hidden !important; } .login-page .video video { object-fit: cover !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; transform: none !important; } .login-page .volume-control { z-index: 5000 !important; cursor: pointer !important; opacity: .6 !important; width: 24px !important; height: 24px !important; transition: opacity var(--fluent-duration-fast) var(--fluent-easing-standard) !important; background-image: url("./img/volume_high.svg") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; position: fixed !important; inset-block-start: 20px !important; inset-inline-end: 20px !important; } .login-page .volume-control:hover { opacity: 1 !important; } .login-page .volume-control.mute { background-image: url("./img/volume_off.svg") !important; } .login-page .login-container { -webkit-backdrop-filter: blur(var(--fluent-blur-radius)) !important; top: auto !important; width: 100% !important; max-width: 488px !important; height: auto !important; box-shadow: none !important; z-index: 2 !important; box-sizing: border-box !important; background: none !important; flex-direction: column !important; flex: auto !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 24px 24px 104px !important; display: flex !important; position: relative !important; inset-inline-start: auto !important; transform: none !important; } .login-page .login-container .login-form { will-change: transform,opacity; animation: fluent-login-fade-in var(--fluent-duration-slow) var(--fluent-easing-easy-ease); box-sizing: border-box !important; background: color-mix(in srgb, var(--fluent-bg-card) calc(var(--fluent-blur-opacity) * 100%), transparent) !important; border: 1px solid var(--fluent-border) !important; border-radius: 12px !important; flex-direction: column !important; width: 100% !important; min-height: 386px !important; padding: 40px !important; display: flex !important; position: relative !important; box-shadow: 0 0 2px #0000001f, 0 8px 16px #00000024 !important; } .login-page .login-container .login-form .ms-card-header { justify-content: center !important; align-items: center !important; width: 100% !important; min-height: 48px !important; margin-bottom: 28px !important; padding-inline: 36px !important; display: flex !important; position: relative !important; } .login-page .login-container .login-form .ms-back-button { display: none; inset-inline-start: -12px !important; cursor: pointer !important; color: var(--fluent-text) !important; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; background: none !important; border: none !important; border-radius: 50% !important; justify-content: center !important; align-items: center !important; padding: 8px !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; } .login-page .login-container .login-form .ms-back-button svg { width: 20px !important; height: 24px !important; } html[dir="rtl"] .login-page .login-container .login-form .ms-back-button svg, body[data-fluent-dir="rtl"] .login-page .login-container .login-form .ms-back-button svg { transform: scaleX(-1); } .login-page .login-container .login-form .ms-back-button:hover { background-color: #80808026 !important; } .login-page .login-container .login-form .ms-back-button:focus-visible { outline: 2px solid var(--fluent-focus-color) !important; background-color: #80808026 !important; } .login-page .login-container .login-form .brand { justify-content: center !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; display: flex !important; } .login-page .login-container .login-form .brand .icon { width: 48px !important; height: 48px !important; } .login-page .login-container .login-form .brand .brand-text { font-family: var(--fluent-font-family) !important; font-size: 26px !important; font-weight: var(--fluent-font-weight-bold, 700) !important; color: var(--fluent-text-secondary) !important; margin: 0 !important; line-height: 1.1 !important; } .login-page .login-container .login-form .login-title { font-family: var(--fluent-font-family) !important; font-size: 24px !important; font-weight: var(--fluent-font-weight-semibold) !important; color: var(--fluent-text) !important; text-align: center !important; background: none !important; border: none !important; margin: 0 0 10px !important; padding: 0 !important; line-height: 30px !important; } .login-page .login-container .login-form .login-subtitle { font-family: var(--fluent-font-family) !important; color: var(--fluent-text-secondary) !important; text-align: center !important; margin: 0 0 24px !important; font-size: 13px !important; line-height: 18px !important; } .login-page .login-container .login-form .form-login { background: none !important; grid-template-rows: 1fr !important; grid-template-columns: 1fr !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; position: relative !important; overflow: hidden !important; } .login-page .login-container .login-form .form-login .step-container { grid-area: 1 / 1 / -1 / -1 !important; width: 100% !important; transition: transform .35s cubic-bezier(.1, .9, .2, 1), opacity .25s cubic-bezier(.1, .9, .2, 1) !important; } .login-page .login-container .login-form .form-login { --login-step-enter-offset: 40px; --login-step-exit-offset: -40px; } html[dir="rtl"] .login-page .login-container .login-form .form-login, body[data-fluent-dir="rtl"] .login-page .login-container .login-form .form-login { --login-step-enter-offset: -40px; --login-step-exit-offset: 40px; } .login-page .login-container .login-form .form-login #step-username { opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; } .login-page .login-container .login-form .form-login #step-password { transform: translateX(var(--login-step-enter-offset)) !important; opacity: 0 !important; visibility: hidden !important; } .login-page .login-container .login-form .form-login.show-step2 #step-username { transform: translateX(var(--login-step-exit-offset)) !important; opacity: 0 !important; visibility: hidden !important; } .login-page .login-container .login-form .form-login.show-step2 #step-password { opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; } .login-page .login-container .login-form .form-login.no-transition .step-container { transition: none !important; } .login-page .login-container .login-form .form-login .errorbox { text-align: start !important; box-shadow: none !important; color: #e81123 !important; font-family: var(--fluent-font-family) !important; font-size: 12px !important; font-weight: var(--fluent-font-weight-regular) !important; box-sizing: border-box !important; background: none !important; border: none !important; border-radius: 0 !important; margin: 2px 0 0 !important; padding: 0 !important; padding-inline-start: 16px !important; line-height: 16px !important; display: block !important; position: relative !important; } .login-page .login-container .login-form .form-login .errorbox:before { display: none !important; } .login-page .login-container .login-form .form-login .errorbox:after { content: "" !important; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAwIDggMWE3IDcgMCAwIDAgMCAxNHoiIGZpbGw9IiNlODExMjMiLz4KICA8cGF0aCBkPSJNOCA0YS43NS43NSAwIDAgMSAuNzUuNzV2NC41YS43NS43NSAwIDAgMS0xLjUgMHYtNC41QS43NS43NSAwIDAgMSA4IDR6bTAgOC4yNWEuODc1Ljg3NSAwIDEgMSAwLTEuNzUuODc1Ljg3NSAwIDAgMSAwIDEuNzV6IiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPgo=) !important; background-repeat: no-repeat !important; background-size: contain !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; display: block !important; position: absolute !important; inset-block-start: 1px !important; inset-inline-start: 0 !important; } .login-page .login-container .login-form .form-login .input-container { flex-direction: column !important; gap: 0 !important; margin-bottom: 0 !important; display: flex !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper { width: 100% !important; position: relative !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input { box-sizing: border-box !important; background-color: var(--fluent-input-bg) !important; border: 1px solid var(--fluent-input-border) !important; border-bottom: 1px solid var(--fluent-input-border) !important; width: 100% !important; height: 38px !important; min-height: 38px !important; font-family: var(--fluent-font-family) !important; color: var(--fluent-text) !important; box-shadow: none !important; background-image: linear-gradient(0deg, var(--fluent-primary) 0%, var(--fluent-primary) 100%) !important; transition: border-color var(--fluent-duration-fast) var(--fluent-easing-standard),background-color var(--fluent-duration-fast) var(--fluent-easing-standard),background-size var(--fluent-duration-fast) var(--fluent-easing-standard) !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 0 2px !important; border-radius: 4px !important; outline: none !important; margin: 0 !important; padding: 0 10px !important; font-size: 14px !important; line-height: normal !important; display: block !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input:hover:not(:focus):not(:disabled) { border-color: var(--fluent-input-border-hover) !important; border-bottom-color: var(--fluent-text) !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input:focus { border-color: var(--fluent-input-border) !important; border-bottom-color: var(--fluent-primary) !important; box-shadow: 0 0 0 1px var(--fluent-primary) inset !important; background-size: 100% 2px !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid { background-image: linear-gradient(0deg, #e81123 0% 100%) !important; background-size: 0 2px !important; border-color: #e81123 !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid:hover:not(:focus):not(:disabled) { border-color: #e81123 !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid:focus { background-size: 100% 2px !important; border-color: #e81123 !important; box-shadow: inset 0 0 0 1px #e81123 !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-label { inset-inline-start: 10px !important; background-color: var(--fluent-bg-card) !important; color: var(--fluent-text-secondary) !important; font-family: var(--fluent-font-family) !important; pointer-events: none !important; transition: all var(--fluent-duration-fast) var(--fluent-easing-standard) !important; padding-inline: 4px !important; font-size: 14px !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input:focus ~ .ms-label, .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input:not(:placeholder-shown) ~ .ms-label { color: var(--fluent-primary) !important; font-size: 12px !important; top: 0 !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input:not(:focus):not(:placeholder-shown) ~ .ms-label { color: var(--fluent-text-secondary) !important; } .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid:focus ~ .ms-label, .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid:not(:placeholder-shown) ~ .ms-label { color: #e81123 !important; } .login-page .login-container .login-form .form-login .password-wrapper .ms-input { padding-inline: 10px 36px !important; } .login-page .login-container .login-form .form-login .ms-password-toggle { border-start-start-radius: 0; border-start-end-radius: 1px; border-end-end-radius: 1px; border-end-start-radius: 0; cursor: pointer !important; width: 32px !important; color: var(--fluent-text-secondary) !important; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; background: none !important; border: none !important; outline: none !important; justify-content: center !important; align-items: center !important; display: flex !important; position: absolute !important; inset-block: 1px 2px !important; inset-inline-end: 1px !important; } .login-page .login-container .login-form .form-login .ms-password-toggle:hover { color: var(--fluent-text) !important; background-color: #8080801a !important; } .login-page .login-container .login-form .form-login .ms-password-toggle:focus-visible { outline: 1px solid var(--fluent-primary) !important; background-color: #8080801a !important; } .login-page .login-container .login-form .form-login .ms-password-toggle svg { color: inherit !important; stroke: currentColor !important; pointer-events: none !important; } .login-page .login-container .login-form .button-container { justify-content: center !important; width: 100% !important; margin-top: 20px !important; display: flex !important; } .login-page .login-container .login-form .ms-button { background: var(--fluent-btn-primary-bg) !important; border: 1px solid var(--fluent-btn-primary-bg) !important; width: 100% !important; height: 38px !important; color: var(--fluent-text-on-primary) !important; font-family: var(--fluent-font-family) !important; text-align: center !important; cursor: pointer !important; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; border-radius: 4px !important; outline: none !important; justify-content: center !important; align-items: center !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; display: flex !important; } .login-page .login-container .login-form .ms-button:hover { background: var(--fluent-btn-primary-bg-hover) !important; border-color: var(--fluent-btn-primary-bg-hover) !important; } .login-page .login-container .login-form .ms-button:active { background: var(--fluent-btn-primary-bg-active) !important; border-color: var(--fluent-btn-primary-bg-active) !important; } .login-page .login-container .login-form .ms-button:focus-visible { outline: 2px solid var(--fluent-focus-color) !important; outline-offset: 2px !important; } .login-page .login-container .login-form .login-account-pill-wrapper { justify-content: center !important; width: 100% !important; margin-bottom: 18px !important; display: flex !important; } .login-page .login-container .login-form .login-account-pill { box-sizing: border-box !important; max-width: 100% !important; height: 32px !important; color: var(--fluent-text) !important; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; background: none !important; border: 1px solid #00000040 !important; border-radius: 100px !important; justify-content: center !important; align-items: center !important; padding: 0 12px !important; font-size: 12px !important; display: inline-flex !important; } .login-page .login-container .login-form .login-account-pill:hover { background-color: #0000000d !important; } .login-page .login-container .login-form .login-account-pill__text { text-overflow: ellipsis !important; white-space: nowrap !important; font-family: var(--fluent-font-family) !important; color: var(--fluent-text) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; display: block !important; overflow: hidden !important; } .login-page footer { text-align: center !important; z-index: 10 !important; width: 100% !important; box-shadow: none !important; background: none !important; border: none !important; margin: 0 !important; padding: 0 24px !important; position: fixed !important; inset-block-end: 18px !important; inset-inline: 0 !important; } .login-page footer div { color: var(--fluent-text-secondary) !important; opacity: .75 !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 16px !important; width: auto !important; max-width: 100% !important; font-size: 12px !important; display: inline-flex !important; } .login-page footer a.luci-link { color: var(--fluent-text-secondary) !important; transition: color var(--fluent-duration-fast) var(--fluent-easing-standard) !important; font-weight: normal !important; text-decoration: none !important; } .login-page footer a.luci-link:hover { color: var(--fluent-text) !important; text-decoration: underline !important; } [data-theme="dark"] .login-page { background: radial-gradient(circle, #171c26 0%, #0b0e14 100%) !important; } [data-theme="dark"] .login-page .login-container { -webkit-backdrop-filter: blur(var(--fluent-blur-radius-dark)) !important; } [data-theme="dark"] .login-page .login-container .login-form { background: color-mix(in srgb, var(--fluent-bg-card) calc(var(--fluent-blur-opacity-dark) * 100%), transparent) !important; border-color: #ffffff1a !important; box-shadow: 0 0 2px #0000003d, 0 8px 16px #00000047 !important; } [data-theme="dark"] .login-page .login-container .login-form .brand .brand-text { color: #a3a3a3 !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .errorbox { color: #e37d80 !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .errorbox:after { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAwIDggMWE3IDcgMCAwIDAgMCAxNHoiIGZpbGw9IiNlMzdkODAiLz4KICA8cGF0aCBkPSJNOCA0YS43NS43NSAwIDAgMSAuNzUuNzV2NC41YS43NS43NSAwIDAgMS0xLjUgMHYtNC41QS43NS43NSAwIDAgMSA4IDR6bTAgOC4yNWEuODc1Ljg3NSAwIDEgMSAwLTEuNzUuODc1Ljg3NSAwIDAgMSAwIDEuNzV6IiBmaWxsPSIjMjkyOTI5Ii8+Cjwvc3ZnPgo=) !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid { background-image: linear-gradient(0deg, #e37d80 0% 100%) !important; background-size: 0 2px !important; border-color: #e37d80 !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid:hover:not(:focus):not(:disabled) { border-color: #e37d80 !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .ms-input-wrapper .ms-input.cbi-input-invalid:focus { background-size: 100% 2px !important; border-color: #e37d80 !important; box-shadow: inset 0 0 0 1px #e37d80 !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .login-account-pill { border-color: #ffffff40 !important; } [data-theme="dark"] .login-page .login-container .login-form .form-login .login-account-pill:hover { background-color: #ffffff1a !important; } @media (max-width: 575px) { .login-page { justify-content: flex-start !important; align-items: stretch !important; padding: 0 !important; } .login-page .login-container { justify-content: flex-start !important; align-items: stretch !important; max-width: 100% !important; min-height: 100dvh !important; padding: 0 0 112px !important; } .login-page .login-container .login-form { min-height: auto !important; box-shadow: none !important; background: var(--fluent-bg-card) !important; border: none !important; border-radius: 0 !important; padding: 22px 24px 24px !important; } .login-page .login-container .login-form .ms-card-header { margin-bottom: 24px !important; } .login-page .login-container .login-form .login-account-pill-wrapper { margin-bottom: 12px !important; } .login-page .login-container .login-form .login-title { margin-bottom: 12px !important; font-size: 20px !important; line-height: 26px !important; } .login-page .login-container .login-form .login-subtitle { margin-bottom: 20px !important; } .login-page .login-container .login-form .form-login .input-container { gap: 0 !important; margin-bottom: 0 !important; } .login-page footer { padding: 0 16px !important; bottom: 12px !important; } .login-page footer div { flex-direction: column !important; gap: 6px !important; width: 100% !important; display: flex !important; } } .main-left .nav > li > a:first-child[data-title="Dashboard"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Dashboard"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Dashboard"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Dashboard"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M11.003 2.388a1.5 1.5 0 0 0-2.005 0l-5.5 4.942A1.5 1.5 0 0 0 3 8.445V15.5A1.5 1.5 0 0 0 4.5 17h2A1.5 1.5 0 0 0 8 15.5v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5V8.445a1.5 1.5 0 0 0-.497-1.115z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Dashboard"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Fluent Dashboard"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Fluent Dashboard"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Fluent Dashboard"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Fluent Dashboard"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M11.003 2.388a1.5 1.5 0 0 0-2.005 0l-5.5 4.942A1.5 1.5 0 0 0 3 8.445V15.5A1.5 1.5 0 0 0 4.5 17h2A1.5 1.5 0 0 0 8 15.5v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5V8.445a1.5 1.5 0 0 0-.497-1.115z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Fluent Dashboard"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="QuickStart"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="QuickStart"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M6.19 2.77c.131-.456.548-.77 1.022-.77h5.25c.725 0 1.237.71 1.007 1.398l-.002.008L12.205 7h2.564c.947 0 1.407 1.144.767 1.811l-.004.004l-8.676 8.858c-.755.782-2.06.06-1.796-.996l1.17-4.679H4.963a1.062 1.062 0 0 1-1.022-1.354zM7.213 3a.06.06 0 0 0-.06.045l-2.25 7.874c-.01.04.02.08.06.08H6.87a.5.5 0 0 1 .485.62l-1.325 5.3a.1.1 0 0 0-.003.03q0 .006.003.011q.005.013.03.03c.018.01.034.01.042.01l.01-.004a.1.1 0 0 0 .024-.018l.004-.004l8.675-8.856a.06.06 0 0 0 .017-.032a.1.1 0 0 0-.007-.044a.1.1 0 0 0-.025-.034q-.006-.007-.03-.008H11.5a.5.5 0 0 1-.472-.666l1.493-4.254a.062.062 0 0 0-.06-.08z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="QuickStart"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="QuickStart"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.212 2c-.474 0-.89.314-1.021.77l-2.25 7.874a1.062 1.062 0 0 0 1.022 1.354H6.23l-1.17 4.68c-.264 1.055 1.041 1.777 1.796.995l8.676-8.858l.004-.004c.64-.667.18-1.811-.767-1.811h-2.564l1.262-3.594l.002-.008A1.062 1.062 0 0 0 12.461 2z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="QuickStart"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Home"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Home"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2.5 5.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m15.75-.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-8.046-.706a.5.5 0 0 0-.408 0h-.002l-.003.002l-.012.005l-.04.02l-.151.07a14.6 14.6 0 0 0-2.13 1.271c-.584.423-1.187.939-1.648 1.528C5.35 7.527 5 8.225 5 9c0 .711.148 1.387.416 2H3V6.5a.5.5 0 0 0-1 0V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6.5a.5.5 0 0 0-1 0V11h-2.416A5 5 0 0 0 15 9c0-.775-.35-1.473-.81-2.06c-.461-.589-1.064-1.105-1.647-1.527a14.6 14.6 0 0 0-2.281-1.343l-.041-.019l-.012-.005l-.003-.002zM17 17h-5v-2a2 2 0 1 0-4 0v2H3v-5h14zm-7-3a1 1 0 0 1 1 1v2H9v-2a1 1 0 0 1 1-1m3.403-6.443c.384.49.597.975.597 1.443c0 .729-.195 1.412-.535 2h-6.93A4 4 0 0 1 6 9c0-.468.213-.953.597-1.443c.382-.488.904-.941 1.446-1.334A13.6 13.6 0 0 1 10 5.053a13.6 13.6 0 0 1 1.957 1.17c.542.393 1.064.846 1.446 1.334'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Home"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Home"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3.25 4.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m14.25.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m-7.296-1.456a.5.5 0 0 0-.408 0h-.002l-.003.002l-.012.005l-.04.02l-.151.07a14.6 14.6 0 0 0-2.13 1.271c-.584.423-1.187.939-1.648 1.528C5.35 7.527 5 8.225 5 9c0 .711.148 1.387.416 2H3V6.5a.5.5 0 0 0-1 0V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V6.5a.5.5 0 0 0-1 0V11h-2.416A5 5 0 0 0 15 9c0-.775-.35-1.473-.81-2.06c-.461-.589-1.064-1.105-1.647-1.527a14.6 14.6 0 0 0-2.281-1.343l-.041-.019l-.012-.005l-.003-.002z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Home"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="NetworkGuide"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="NetworkGuide"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0m7-8a8 8 0 1 0 0 16a8 8 0 0 0 0-16M6.097 7.42c-.383-.84.482-1.706 1.324-1.323l3.262 1.482a3.5 3.5 0 0 1 1.738 1.738l1.482 3.262c.383.841-.483 1.707-1.324 1.324l-3.262-1.482a3.5 3.5 0 0 1-1.738-1.738zm4.172 1.07L7.007 7.007l1.483 3.262a2.5 2.5 0 0 0 1.24 1.241l3.262 1.483l-1.483-3.262A2.5 2.5 0 0 0 10.27 8.49'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="NetworkGuide"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="NetworkGuide"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16M7.316 6.323c-.632-.291-1.286.363-.995.995l1.502 3.264c.324.704.89 1.269 1.593 1.593l3.265 1.502c.632.29 1.286-.363.995-.995l-1.503-3.263a3.25 3.25 0 0 0-1.593-1.593z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="NetworkGuide"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Status"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Status"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.497 16.803L15.253 12H14.25q-.184 0-.36-.044l-3.865 3.902l-3.863-3.902Q5.986 12 5.8 12H4.799l4.755 4.803c.26.263.682.263.942 0m6.227-12.49a4.42 4.42 0 0 1 .978 4.7A2 2 0 0 0 17.5 9h-.889a3.415 3.415 0 0 0-.598-3.984A3.306 3.306 0 0 0 11.3 5l-.951.963a.5.5 0 0 1-.711 0l-.96-.97a3.3 3.3 0 0 0-4.706-.016C2.899 6.061 2.713 7.711 3.42 9H2.5q-.09 0-.18.01a4.4 4.4 0 0 1 .941-4.736a4.3 4.3 0 0 1 6.127.016l.605.61l.596-.603l.109-.106a4.306 4.306 0 0 1 6.026.121M7.962 6.307a.5.5 0 0 0-.922-.004L5.47 10H2.5a.5.5 0 0 0 0 1h3.3a.5.5 0 0 0 .46-.304l1.235-2.907l2.043 4.903a.5.5 0 0 0 .886.073l2.143-3.429l1.307 1.493a.5.5 0 0 0 .376.171h3.25a.5.5 0 0 0 0-1h-3.023l-1.6-1.83a.5.5 0 0 0-.801.065l-1.987 3.179z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Status"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Status"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.388 4.29a4.3 4.3 0 0 0-6.127-.016a4.4 4.4 0 0 0-.94 4.737Q2.408 9 2.5 9h2.308L6.12 5.913a1.5 1.5 0 0 1 2.765.01l1.383 3.319l.96-1.537a1.5 1.5 0 0 1 2.4-.193L14.932 9H17.5q.103 0 .202.014a4.42 4.42 0 0 0-.978-4.702a4.305 4.305 0 0 0-6.135-.015l-.596.603zm.166 12.513L4.799 12H5.8a1.5 1.5 0 0 0 1.38-.913l.306-.72l1.13 2.71a1.5 1.5 0 0 0 2.656.218l1.43-2.287l.42.48A1.5 1.5 0 0 0 14.25 12h1.004l-4.757 4.803a.66.66 0 0 1-.943 0M7.962 6.308a.5.5 0 0 0-.922-.004L5.47 10H2.5a.5.5 0 0 0 0 1h3.3a.5.5 0 0 0 .46-.304l1.235-2.907l2.043 4.903a.5.5 0 0 0 .886.073l2.143-3.429l1.307 1.493a.5.5 0 0 0 .376.171h3.25a.5.5 0 0 0 0-1h-3.023l-1.6-1.83a.5.5 0 0 0-.801.065l-1.987 3.179z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Status"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="System"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="System"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535m1.06-.006l1.294 1.098a2 2 0 0 1 0 3.05l-1.293 1.098c.292.782.713 1.51 1.244 2.152l1.596-.57q.155-.055.315-.085a2 2 0 0 1 2.326 1.609l.304 1.669a7.6 7.6 0 0 0 2.486 0l.304-1.67a1.998 1.998 0 0 1 2.641-1.524l1.596.571a7.5 7.5 0 0 0 1.245-2.152l-1.294-1.098a1.998 1.998 0 0 1 0-3.05l1.294-1.098a7.5 7.5 0 0 0-1.245-2.152l-1.596.57a2 2 0 0 1-2.64-1.524l-.305-1.669a7.6 7.6 0 0 0-2.486 0l-.304 1.669a2 2 0 0 1-2.64 1.525l-1.597-.571a7.5 7.5 0 0 0-1.244 2.152M7.502 10a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m1 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="System"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="System"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535M8.001 10a2 2 0 1 0 4 0a2 2 0 0 0-4 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="System"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Services"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Services"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 17a1.5 1.5 0 0 1-1.493-1.355L3 15.501v-11a1.5 1.5 0 0 1 1.356-1.493L4.5 3H9a1.5 1.5 0 0 1 1.493 1.355l.007.145v.254l2.189-2.269a1.5 1.5 0 0 1 2.007-.138l.116.101l2.757 2.725a1.5 1.5 0 0 1 .111 2.011l-.103.116l-2.311 2.2h.234a1.5 1.5 0 0 1 1.493 1.356L17 11v4.5a1.5 1.5 0 0 1-1.355 1.493L15.5 17zm5-6.5H4v5a.5.5 0 0 0 .326.47l.084.023l.09.008h5zm6 0h-5V16h5a.5.5 0 0 0 .492-.41L16 15.5V11a.5.5 0 0 0-.41-.491zm-5-2.79V9.5h1.79zM9 4H4.5a.5.5 0 0 0-.492.411L4 4.501v5h5.5v-5a.5.5 0 0 0-.326-.469L9.09 4.01zm5.122-.826a.5.5 0 0 0-.645-.053l-.068.06l-2.616 2.713a.5.5 0 0 0-.057.623l.063.078l2.616 2.615a.5.5 0 0 0 .62.07l.078-.061l2.758-2.627a.5.5 0 0 0 .054-.638l-.059-.069z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Services"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Services"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 17a1.5 1.5 0 0 1-1.493-1.355L3 15.501v-11a1.5 1.5 0 0 1 1.356-1.493L4.5 3H9a1.5 1.5 0 0 1 1.493 1.355l.007.145v.254l2.189-2.269a1.5 1.5 0 0 1 2.007-.138l.116.101l2.757 2.725a1.5 1.5 0 0 1 .111 2.011l-.103.116l-2.311 2.2h.234a1.5 1.5 0 0 1 1.493 1.356L17 11v4.5a1.5 1.5 0 0 1-1.355 1.493L15.5 17zm5-6.5H4v5a.5.5 0 0 0 .326.47l.084.023l.09.008h5zm6 0h-5V16h5a.5.5 0 0 0 .492-.41L16 15.5V11a.5.5 0 0 0-.41-.491zm-5-2.79V9.5h1.79zM9 4H4.5a.5.5 0 0 0-.492.411L4 4.501v5h5.5v-5a.5.5 0 0 0-.326-.469L9.09 4.01z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Services"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="iStore"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="iStore"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='currentColor' d='M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3zm0 1.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.784 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75V6.25a1.75 1.75 0 0 0-1.75-1.75M9.369 15.254l-.51.872a.75.75 0 0 1-1.34-.665l.045-.091l.067-.116zm3.924-5.23l1.719 2.98h1.74a.75.75 0 0 1 .743.65l.007.1a.75.75 0 0 1-.648.744l-.102.007h-.875l.502.87a.75.75 0 0 1-1.243.834l-.056-.085l-2.658-4.608zm-.03-2.923a.75.75 0 0 1 .315.935l-.046.091l-2.85 4.877h1.732l.865 1.5H7.252a.75.75 0 0 1-.102-1.492l.102-.007h1.694l2.18-3.734l-.662-1.147a.75.75 0 0 1 .19-.968l.085-.057a.75.75 0 0 1 .968.19l.056.085l.233.406l.241-.41a.75.75 0 0 1 1.026-.269'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="iStore"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="iStore"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='currentColor' d='M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3zM9.369 15.254H7.63l-.067.116l-.045.091a.75.75 0 0 0 1.283.75l.057-.085zm3.924-5.23l-.871 1.492l2.658 4.608l.056.085a.75.75 0 0 0 1.288-.743l-.045-.092l-.502-.87h.875l.102-.006a.75.75 0 0 0 .641-.641l.007-.102l-.007-.102a.75.75 0 0 0-.641-.641l-.102-.007h-1.74zm-.03-2.923a.75.75 0 0 0-.969.185l-.057.085l-.24.409l-.234-.406l-.056-.084a.75.75 0 0 0-.867-.24l-.101.05l-.085.056a.75.75 0 0 0-.239.867l.05.1l.662 1.148l-2.181 3.734H7.252l-.102.007a.75.75 0 0 0 0 1.486l.102.007h6.027l-.865-1.5l-1.731-.001l2.85-4.877l.045-.091a.75.75 0 0 0-.315-.935'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="iStore"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Docker"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Docker"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M11.3 2.48a3.5 3.5 0 0 0-2.6 0L2.943 4.785A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518a3.5 3.5 0 0 0 2.6 0l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176a1.5 1.5 0 0 0-.943-1.392zm-2.228.93a2.5 2.5 0 0 1 1.857 0l5.225 2.09l-2.279.91l-6.154-2.46zM6.375 4.487l6.154 2.461L10 7.961L3.846 5.499zm4.125 4.35l6.5-2.6v7.584a.5.5 0 0 1-.314.465l-5.757 2.303q-.21.083-.429.128zm-1 0v7.88a2.5 2.5 0 0 1-.428-.128l-5.758-2.303A.5.5 0 0 1 3 13.822V6.238z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Docker"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Docker"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='m10 7.96l3.029-1.21l-7.5-3l-2.586 1.034a1.5 1.5 0 0 0-.364.208zM2.035 5.853A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518q.391.156.8.214V8.838zm8.465 11.88a3.5 3.5 0 0 0 .8-.214l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176q0-.166-.035-.324L10.5 8.838zm6.921-12.74l-3.046 1.219l-7.5-3L8.7 2.48a3.5 3.5 0 0 1 2.6 0l5.757 2.303a1.5 1.5 0 0 1 .364.208'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Docker"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="NAS"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="NAS"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4 5c0-1.007.875-1.755 1.904-2.223C6.978 2.289 8.427 2 10 2s3.022.289 4.096.777C15.125 3.245 16 3.993 16 5v10c0 1.007-.875 1.755-1.904 2.223C13.022 17.71 11.573 18 10 18s-3.022-.289-4.096-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313C7.234 6.729 8.536 7 10 7s2.766-.27 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313C12.766 3.271 11.464 3 10 3s-2.766.27-3.682.687C5.356 4.125 5 4.627 5 5m10 1.698a5 5 0 0 1-.904.525C13.022 7.711 11.573 8 10 8s-3.022-.289-4.096-.777A5 5 0 0 1 5 6.698V15c0 .374.356.875 1.318 1.313c.916.416 2.218.687 3.682.687s2.766-.27 3.682-.687C14.644 15.875 15 15.373 15 15z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="NAS"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="NAS"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 8c3.314 0 6-1.343 6-3s-2.686-3-6-3s-6 1.343-6 3s2.686 3 6 3m4.69.016c.47-.235.927-.534 1.31-.896V15c0 1.657-2.686 3-6 3s-6-1.343-6-3V7.12c.383.362.84.661 1.31.896C6.562 8.642 8.222 9 10 9s3.438-.358 4.69-.984'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="NAS"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="VPN"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="VPN"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.341a3 3 0 0 0-1-.94V5.428a16 16 0 0 1-5.6-2.082l-.4-.249l-.4.249A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463V17c0 .342.086.663.237.945l-.057.022a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M12.5 12v-1a2 2 0 1 1 4 0v1h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1-1v1h2v-1a1 1 0 1 0-2 0m1.75 4a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="VPN"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="VPN"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.5 12v-1a2 2 0 1 1 4 0v1h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1-1v1h2v-1a1 1 0 1 0-2 0m1.75 4a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.341A3 3 0 0 0 11.5 11v.063A2 2 0 0 0 10 13v4c0 .342.086.663.237.945l-.057.022a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="VPN"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Network"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Network"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3.5 9.5a6.5 6.5 0 0 1 13 0a.5.5 0 0 0 1 0a7.5 7.5 0 0 0-15 0a.5.5 0 0 0 1 0m6.5-4a4 4 0 0 0-4 4a.5.5 0 0 1-1 0a5 5 0 0 1 10 0a.5.5 0 0 1-1 0a4 4 0 0 0-4-4M7.75 9.25a2.25 2.25 0 1 1 2.75 2.194V13h4a2.5 2.5 0 0 1 0 5h-9a2.5 2.5 0 0 1 0-5h4v-1.556A2.25 2.25 0 0 1 7.75 9.25M10 8a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 10 8m-4.5 6a1.5 1.5 0 0 0 0 3h9a1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Network"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Network"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3.5 9.5a6.5 6.5 0 0 1 13 0a.5.5 0 0 0 1 0a7.5 7.5 0 0 0-15 0a.5.5 0 0 0 1 0m6.5-4a4 4 0 0 0-4 4a.5.5 0 0 1-1 0a5 5 0 0 1 10 0a.5.5 0 0 1-1 0a4 4 0 0 0-4-4M7.75 9.25a2.25 2.25 0 1 1 2.75 2.194V13h4a2.5 2.5 0 0 1 0 5h-9a2.5 2.5 0 0 1 0-5h4v-1.556A2.25 2.25 0 0 1 7.75 9.25'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Network"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Statistics"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Statistics"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2.5 2a.5.5 0 0 1 .5.5v13A1.5 1.5 0 0 0 4.5 17h13a.5.5 0 0 1 0 1h-13A2.5 2.5 0 0 1 2 15.5v-13a.5.5 0 0 1 .5-.5M12 5.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6.707l-4.646 4.647a.5.5 0 0 1-.708 0L9 9.707l-3.146 3.147a.5.5 0 0 1-.708-.708l3.5-3.5a.5.5 0 0 1 .708 0L11 10.293L15.293 6H12.5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Statistics"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Statistics"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2.75 2a.75.75 0 0 1 .75.75v12.5c0 .69.56 1.25 1.25 1.25h12.5a.75.75 0 0 1 0 1.5H4.75A2.75 2.75 0 0 1 2 15.25V2.75A.75.75 0 0 1 2.75 2M12 5.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0V7.56l-3.97 3.97a.75.75 0 0 1-1.06 0L9 10.06l-2.22 2.22a.75.75 0 0 1-1.06-1.06l2.75-2.75a.75.75 0 0 1 1.06 0L11 9.94l3.44-3.44h-1.69a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Statistics"] li a .menu-icon { display: inline-flex; } .main-left .nav > li > a:first-child[data-title="Log_out"] .menu-icon:before, .main-left .nav li.slide .slide-menu[data-parent="Log_out"] li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.5 17a.5.5 0 0 0 0-1H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6.5a.5.5 0 0 0 0-1H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3zm1.146-10.854a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708l2.647-2.646H7.5a.5.5 0 0 1 0-1h8.793l-2.647-2.646a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E"); } .main-left .nav > li > a:first-child[data-title="Log_out"] .menu-icon:after, .main-left .nav li.slide .slide-menu[data-parent="Log_out"] li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.25 17.5a.75.75 0 0 0 0-1.5H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6.25a.75.75 0 0 0 0-1.5H6A3.5 3.5 0 0 0 2.5 6v8A3.5 3.5 0 0 0 6 17.5zm1.491-11.301a.75.75 0 0 1 1.06.042l3 3.25a.75.75 0 0 1 0 1.018l-3 3.25A.75.75 0 1 1 13.7 12.74l1.838-1.991H7.75a.75.75 0 0 1 0-1.5h7.787l-1.838-1.991a.75.75 0 0 1 .042-1.06'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu[data-parent="Log_out"] li a .menu-icon { display: inline-flex; } .main-left { top: var(--fluent-header-height, 48px); width: var(--fluent-sidebar-width, 260px); height: calc(100dvh - var(--fluent-header-height, 48px)); background: var(--fluent-sidebar-bg); border-inline-end: 1px solid var(--fluent-border); z-index: var(--fluent-zindex-menu); transition: width var(--fluent-duration-normal) var(--fluent-easing-standard),transform var(--fluent-duration-normal) var(--fluent-easing-standard); position: fixed; inset-inline-start: 0; overflow: hidden auto; } .main-left::-webkit-scrollbar { width: var(--fluent-scrollbar-width); height: var(--fluent-scrollbar-width); } .main-left::-webkit-scrollbar:horizontal { height: var(--fluent-scrollbar-horizontal-height, 5px); } .main-left::-webkit-scrollbar-track { background: var(--fluent-scrollbar-track-bg); } .main-left::-webkit-scrollbar-thumb { background: var(--fluent-scrollbar-thumb-bg); border-radius: 3px; } .main-left::-webkit-scrollbar-thumb:hover { background: var(--fluent-scrollbar-thumb-bg-hover); } .main-left::-webkit-scrollbar-thumb:horizontal { background: var(--fluent-scrollbar-thumb-horizontal-bg); border-radius: var(--fluent-radius-circular, 10000px); } .main-left::-webkit-scrollbar-thumb:horizontal:hover { background: var(--fluent-scrollbar-thumb-horizontal-bg-hover); } .main-left::-webkit-scrollbar-corner { background: none; display: none; } .main-left::-webkit-resizer { background: none; } .main-left .sidebar__search-slot { padding: var(--fluent-space-sm) var(--fluent-space-sm) 0; margin-bottom: var(--fluent-space-xs); flex-shrink: 0; display: none; } .main-right { height: 100dvh; padding-top: var(--fluent-header-height, 48px); transition: margin-inline-start var(--fluent-duration-normal) var(--fluent-easing-standard); flex-direction: column; margin-inline-start: var(--fluent-sidebar-width, 260px); display: flex; overflow: hidden; } .main-left .nav { padding: var(--fluent-space-xs) var(--fluent-space-sm) var(--fluent-space-sm); margin: 0; list-style: none; position: relative; } .main-left .nav .fluent-sidebar-parent-slider { background-color: var(--fluent-primary); width: 3px; transition: top var(--fluent-duration-normal) var(--fluent-easing-standard),height var(--fluent-duration-normal) var(--fluent-easing-standard),opacity var(--fluent-duration-normal) var(--fluent-easing-standard); pointer-events: none; z-index: 10; border-radius: 999px; position: absolute; inset-inline-start: 3px; } body[data-tab-animation="0"] .main-left .nav .fluent-sidebar-parent-slider, body[data-reduce-motion="true"] .main-left .nav .fluent-sidebar-parent-slider { transition: none !important; } .main-left .nav > li > a:first-child { align-items: center; gap: var(--fluent-space-sm); padding-block: 0; padding-inline: 6px var(--fluent-space-sm); border-radius: var(--fluent-radius-md); cursor: pointer; min-width: 0; height: 36px; font-size: var(--fluent-font-size-base); font-weight: var(--fluent-font-weight-regular); color: var(--fluent-text); box-shadow: none; transition: background var(--fluent-duration-fast) var(--fluent-easing-standard),color var(--fluent-duration-fast) var(--fluent-easing-standard),border-color var(--fluent-duration-fast) var(--fluent-easing-standard); background: none; margin: 2px 0; text-decoration: none; display: flex; position: relative; } .main-left .nav > li > a:first-child .menu-icon { width: 20px; height: 20px; color: var(--fluent-text-secondary); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; } .main-left .nav > li > a:first-child .menu-icon:before, .main-left .nav > li > a:first-child .menu-icon:after { content: ""; top: 0; width: 100%; height: 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-mask-image: var(--icon-data); transition: opacity var(--fluent-duration-normal) var(--fluent-easing-standard); background-color: currentColor; position: absolute; inset-inline-start: 0; } .main-left .nav > li > a:first-child .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 17a1.5 1.5 0 0 1-1.493-1.355L3 15.501v-11a1.5 1.5 0 0 1 1.356-1.493L4.5 3H9a1.5 1.5 0 0 1 1.493 1.355l.007.145v.254l2.189-2.269a1.5 1.5 0 0 1 2.007-.138l.116.101l2.757 2.725a1.5 1.5 0 0 1 .111 2.011l-.103.116l-2.311 2.2h.234a1.5 1.5 0 0 1 1.493 1.356L17 11v4.5a1.5 1.5 0 0 1-1.355 1.493L15.5 17zm5-6.5H4v5a.5.5 0 0 0 .326.47l.084.023l.09.008h5zm6 0h-5V16h5a.5.5 0 0 0 .492-.41L16 15.5V11a.5.5 0 0 0-.41-.491zm-5-2.79V9.5h1.79zM9 4H4.5a.5.5 0 0 0-.492.411L4 4.501v5h5.5v-5a.5.5 0 0 0-.326-.469L9.09 4.01zm5.122-.826a.5.5 0 0 0-.645-.053l-.068.06l-2.616 2.713a.5.5 0 0 0-.057.623l.063.078l2.616 2.615a.5.5 0 0 0 .62.07l.078-.061l2.758-2.627a.5.5 0 0 0 .054-.638l-.059-.069z'/%3E%3C/svg%3E"); opacity: 1; } .main-left .nav > li > a:first-child .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 17a1.5 1.5 0 0 1-1.493-1.355L3 15.501v-11a1.5 1.5 0 0 1 1.356-1.493L4.5 3H9a1.5 1.5 0 0 1 1.493 1.355l.007.145v.254l2.189-2.269a1.5 1.5 0 0 1 2.007-.138l.116.101l2.757 2.725a1.5 1.5 0 0 1 .111 2.011l-.103.116l-2.311 2.2h.234a1.5 1.5 0 0 1 1.493 1.356L17 11v4.5a1.5 1.5 0 0 1-1.355 1.493L15.5 17zm5-6.5H4v5a.5.5 0 0 0 .326.47l.084.023l.09.008h5zm6 0h-5V16h5a.5.5 0 0 0 .492-.41L16 15.5V11a.5.5 0 0 0-.41-.491zm-5-2.79V9.5h1.79zM9 4H4.5a.5.5 0 0 0-.492.411L4 4.501v5h5.5v-5a.5.5 0 0 0-.326-.469L9.09 4.01z'/%3E%3C/svg%3E"); opacity: 0; } .main-left .nav > li > a:first-child .menu-label { white-space: nowrap; text-overflow: ellipsis; flex: auto; min-width: 0; overflow: hidden; } .main-left .nav > li > a:first-child:hover .menu-icon:before, .main-left .nav > li > a:first-child.active .menu-icon:before { opacity: 0; } .main-left .nav > li > a:first-child:hover .menu-icon:after, .main-left .nav > li > a:first-child.active .menu-icon:after { opacity: 1; } .main-left .nav > li > a:first-child:hover { background: var(--fluent-sidebar-item-hover); color: var(--fluent-text); } .main-left .nav > li > a:first-child:hover .menu-icon { color: var(--fluent-text); } .main-left .nav > li > a:first-child:focus-visible { outline: 2px solid var(--fluent-focus-color); outline-offset: -2px; } .main-left .nav > li > a:first-child.active { color: var(--fluent-text); background: var(--fluent-sidebar-item-active); font-weight: var(--fluent-font-weight-semibold); } .main-left .nav > li > a:first-child.active .menu-icon { color: var(--fluent-primary); } .main-left .nav li { cursor: pointer; -webkit-user-select: none; user-select: none; transition: all var(--fluent-duration-normal) var(--fluent-easing-standard); padding: 0; list-style: none; } .main-left .nav li a { color: var(--fluent-text); font-weight: var(--fluent-font-weight-regular); box-shadow: none; display: block; } .main-left .nav li.slide { padding: 0; } .main-left .nav li.slide:hover { background: none; } .main-left .nav li.slide ul { display: none; overflow: hidden; } .main-left .nav li.slide .slide-menu { margin: 0 0 var(--fluent-space-xs) 0; transition: all var(--fluent-duration-normal) var(--fluent-easing-standard); background: none; border-radius: 0; margin-inline-start: 36px; padding: 0; position: relative; } .main-left .nav li.slide .slide-menu .fluent-sidebar-slider { background-color: var(--fluent-primary); border-radius: var(--fluent-radius-sm); width: 3px; transition: top var(--fluent-duration-normal) var(--fluent-easing-standard),height var(--fluent-duration-normal) var(--fluent-easing-standard); pointer-events: none; z-index: 10; position: absolute; inset-inline-start: 0; } body[data-tab-animation="0"] .main-left .nav li.slide .slide-menu .fluent-sidebar-slider, body[data-reduce-motion="true"] .main-left .nav li.slide .slide-menu .fluent-sidebar-slider { transition: none !important; } .main-left .nav li.slide .slide-menu.has-slider li.active:before { background-color: #0000 !important; } .main-left .nav li.slide .slide-menu.active { display: block; } .main-left .nav li.slide .slide-menu li { border-radius: var(--fluent-radius-md); transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); background: none; margin: 2px 0; position: relative; } .main-left .nav li.slide .slide-menu li:before { content: ""; inset-inline-start: 0; border-radius: var(--fluent-radius-sm); width: 3px; height: 70%; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard); background-color: #0000; position: absolute; top: 15%; } .main-left .nav li.slide .slide-menu li:after { content: none; display: none; } .main-left .nav li.slide .slide-menu li a { padding: 0 var(--fluent-space-sm); border-radius: var(--fluent-radius-md); align-items: center; gap: var(--fluent-space-xs); height: 32px; box-shadow: none; transition: color var(--fluent-duration-fast) var(--fluent-easing-standard),background var(--fluent-duration-fast) var(--fluent-easing-standard); text-decoration: none; display: flex; } .main-left .nav li.slide .slide-menu li a .menu-icon { width: 16px; height: 16px; color: inherit; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; position: relative; } .main-left .nav li.slide .slide-menu li a .menu-icon:before, .main-left .nav li.slide .slide-menu li a .menu-icon:after { content: ""; top: 0; width: 100%; height: 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--icon-data); mask-image: var(--icon-data); -webkit-mask-image: var(--icon-data); transition: opacity var(--fluent-duration-normal) var(--fluent-easing-standard); background-color: currentColor; position: absolute; inset-inline-start: 0; } .main-left .nav li.slide .slide-menu li a .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 17a1.5 1.5 0 0 1-1.493-1.355L3 15.501v-11a1.5 1.5 0 0 1 1.356-1.493L4.5 3H9a1.5 1.5 0 0 1 1.493 1.355l.007.145v.254l2.189-2.269a1.5 1.5 0 0 1 2.007-.138l.116.101l2.757 2.725a1.5 1.5 0 0 1 .111 2.011l-.103.116l-2.311 2.2h.234a1.5 1.5 0 0 1 1.493 1.356L17 11v4.5a1.5 1.5 0 0 1-1.355 1.493L15.5 17zm5-6.5H4v5a.5.5 0 0 0 .326.47l.084.023l.09.008h5zm6 0h-5V16h5a.5.5 0 0 0 .492-.41L16 15.5V11a.5.5 0 0 0-.41-.491zm-5-2.79V9.5h1.79zM9 4H4.5a.5.5 0 0 0-.492.411L4 4.501v5h5.5v-5a.5.5 0 0 0-.326-.469L9.09 4.01zm5.122-.826a.5.5 0 0 0-.645-.053l-.068.06l-2.616 2.713a.5.5 0 0 0-.057.623l.063.078l2.616 2.615a.5.5 0 0 0 .62.07l.078-.061l2.758-2.627a.5.5 0 0 0 .054-.638l-.059-.069z'/%3E%3C/svg%3E"); opacity: 1; } .main-left .nav li.slide .slide-menu li a .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 17a1.5 1.5 0 0 1-1.493-1.355L3 15.501v-11a1.5 1.5 0 0 1 1.356-1.493L4.5 3H9a1.5 1.5 0 0 1 1.493 1.355l.007.145v.254l2.189-2.269a1.5 1.5 0 0 1 2.007-.138l.116.101l2.757 2.725a1.5 1.5 0 0 1 .111 2.011l-.103.116l-2.311 2.2h.234a1.5 1.5 0 0 1 1.493 1.356L17 11v4.5a1.5 1.5 0 0 1-1.355 1.493L15.5 17zm5-6.5H4v5a.5.5 0 0 0 .326.47l.084.023l.09.008h5zm6 0h-5V16h5a.5.5 0 0 0 .492-.41L16 15.5V11a.5.5 0 0 0-.41-.491zm-5-2.79V9.5h1.79zM9 4H4.5a.5.5 0 0 0-.492.411L4 4.501v5h5.5v-5a.5.5 0 0 0-.326-.469L9.09 4.01z'/%3E%3C/svg%3E"); opacity: 0; } .main-left .nav li.slide .slide-menu li a .menu-label { white-space: nowrap; text-overflow: ellipsis; flex: auto; min-width: 0; font-size: 13px; overflow: hidden; } .main-left .nav li.slide .slide-menu li a[data-title="WireGuard"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="wall" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="clash" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="ssr" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="vpn" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="ipsec" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="tailscale" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="nikki" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="daed" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title$="tunnel" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title$="tier" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title$="proxy" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="WireGuard"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="wall" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="clash" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="ssr" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="vpn" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="ipsec" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="tailscale" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="nikki" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="daed" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title$="tunnel" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title$="tier" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title$="proxy" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.341a3 3 0 0 0-1-.94V5.428a16 16 0 0 1-5.6-2.082l-.4-.249l-.4.249A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463V17c0 .342.086.663.237.945l-.057.022a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M12.5 12v-1a2 2 0 1 1 4 0v1h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1-1v1h2v-1a1 1 0 1 0-2 0m1.75 4a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="WireGuard"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="wall" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="clash" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="ssr" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="vpn" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="ipsec" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="tailscale" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="nikki" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="daed" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title$="tunnel" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title$="tier" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title$="proxy" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.5 12v-1a2 2 0 1 1 4 0v1h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1-1v1h2v-1a1 1 0 1 0-2 0m1.75 4a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.341A3 3 0 0 0 11.5 11v.063A2 2 0 0 0 10 13v4c0 .342.086.663.237.945l-.057.022a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="bypass" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="bypass" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.854 7.146a.5.5 0 1 0-.708.708L9.293 10l-2.147 2.146a.5.5 0 0 0 .708.708L10 10.707l2.146 2.147a.5.5 0 0 0 .708-.708L10.707 10l2.147-2.146a.5.5 0 0 0-.708-.708L10 9.293zm2.423-5.062a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M4 5.428a16 16 0 0 0 5.6-2.082l.4-.249l.4.249A16 16 0 0 0 16 5.428V9.5c0 3.392-1.968 5.863-6 7.463c-4.032-1.6-6-4.071-6-7.463z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="bypass" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.277 2.084a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421a.5.5 0 0 1 .554 0M8.03 6.97a.75.75 0 0 0-1.06 1.06L8.94 10l-1.97 1.97a.75.75 0 1 0 1.06 1.06L10 11.06l1.97 1.97a.75.75 0 1 0 1.06-1.06L11.06 10l1.97-1.97a.75.75 0 0 0-1.06-1.06L10 8.94z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="guard" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="guard" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.6a5.5 5.5 0 0 0-1-.393v-3.78a16 16 0 0 1-5.6-2.081l-.4-.249l-.4.249A16 16 0 0 1 4 5.428V9.5c0 3.242 1.798 5.643 5.478 7.246c.195.435.444.84.74 1.206l-.038.015a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="guard" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.6a5.5 5.5 0 0 0-6.782 8.352l-.038.015a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M19 14.5a4.5 4.5 0 1 0-9 0a4.5 4.5 0 0 0 9 0m-2.146-1.854a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1-1a.5.5 0 0 1 .708-.708l.646.647l2.646-2.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="dns" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="dns" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 18q.74 0 1.442-.13a6 6 0 0 1-.755-1.077c-.233.14-.465.207-.687.207c-.657 0-1.407-.59-2.022-1.908A9.3 9.3 0 0 1 7.42 13.5H10v-1H7.206A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.096.561.161 1.157.19 1.779a6.3 6.3 0 0 0 .867-.74q.038-.039.078-.074q-.047-.495-.122-.965h2.733c.21.55.354 1.132.419 1.738c.31.224.662.429 1.039.57A8 8 0 1 0 10 18m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm5.897-10.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103m6.215 7.583c-1.37-.193-2.486-1.134-3.066-1.726a.624.624 0 0 0-.87 0c-.58.592-1.695 1.533-3.066 1.726c-.274.038-.499.259-.499.535V14c0 3.468 3.182 4.727 3.87 4.959a.4.4 0 0 0 .26 0C15.818 18.727 19 17.469 19 14v-2.5c0-.276-.225-.497-.499-.535'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="dns" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.987 4.18a12.2 12.2 0 0 0-.669 2.32h5.364a12.2 12.2 0 0 0-.67-2.32c-.301-.733-.648-1.294-1.008-1.663C10.646 2.149 10.307 2 10 2s-.646.149-1.004.517c-.36.37-.707.93-1.009 1.663m-.096-1.899c-.314.426-.59.941-.828 1.518c-.32.78-.58 1.694-.762 2.701H2.804a8.02 8.02 0 0 1 5.087-4.219m4.219 0c.313.426.59.941.827 1.518c.32.78.58 1.694.762 2.701h3.497a8.02 8.02 0 0 0-5.087-4.219M17.602 7.5H13.85q.057.466.094.952a1.626 1.626 0 0 1 2.205.087c.424.433 1.083.983 1.849 1.269a8 8 0 0 0-.396-2.308m-4.76 0q.111.85.145 1.776c-.47.33-1.03.614-1.628.698c-.68.096-1.36.669-1.359 1.526v1H7.158A19 19 0 0 1 7 10c0-.875.056-1.715.158-2.5zm-5.524 6H10v.5c0 1.424.454 2.547 1.074 3.409l-.07.074c-.358.368-.697.517-1.004.517s-.646-.149-1.004-.517c-.36-.37-.707-.93-1.009-1.663a12.2 12.2 0 0 1-.669-2.32m.573 4.219A8.02 8.02 0 0 1 2.804 13.5h3.497c.182 1.007.441 1.922.762 2.7c.237.578.514 1.093.828 1.519M2.398 12.5H6.15A21 21 0 0 1 6 10c0-.866.052-1.705.15-2.5H2.398A8 8 0 0 0 2 10c0 .873.14 1.713.398 2.5m16.103-1.535c-1.37-.193-2.486-1.134-3.066-1.726a.624.624 0 0 0-.87 0c-.58.592-1.695 1.533-3.066 1.726c-.274.038-.499.259-.499.535V14c0 3.468 3.182 4.727 3.87 4.959a.4.4 0 0 0 .26 0C15.818 18.727 19 17.469 19 14v-2.5c0-.276-.225-.497-.499-.535'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="ddns" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="ddns" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 18q.128 0 .254-.004a5.5 5.5 0 0 1-.698-1.083c-.536-.207-1.098-.793-1.578-1.821A9.3 9.3 0 0 1 7.42 13.5h1.672q.096-.52.284-1h-2.17A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.092.541.156 1.115.186 1.713q.48-.138.992-.188a16 16 0 0 0-.165-1.525h2.733c.251.656.406 1.36.448 2.094q.543.276 1.008.66A8 8 0 1 0 10 18m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm5.897-10.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4.854-2.353l-2 2a.5.5 0 0 0 .708.707L14 13.707V16.5a.5.5 0 0 0 1 0v-2.793l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.351-.146h-.006a.5.5 0 0 0-.348.144z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="ddns" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.987 4.18a12.2 12.2 0 0 0-.669 2.32h5.364a12.2 12.2 0 0 0-.67-2.32c-.301-.733-.648-1.294-1.008-1.663C10.646 2.149 10.307 2 10 2s-.646.149-1.004.517c-.36.37-.707.93-1.009 1.663m-.096-1.899c-.314.426-.59.941-.828 1.518c-.32.78-.58 1.694-.762 2.701H2.804a8.02 8.02 0 0 1 5.087-4.219m4.219 0c.313.426.59.941.827 1.518c.32.78.58 1.694.762 2.701h3.497a8.02 8.02 0 0 0-5.087-4.219M17.602 7.5H13.85q.091.74.128 1.524Q14.236 9 14.5 9c1.328 0 2.546.47 3.496 1.254a8 8 0 0 0-.394-2.754m-4.76 0c.071.546.12 1.119.143 1.711a5.51 5.51 0 0 0-3.61 3.289H7.158A19 19 0 0 1 7 10c0-.875.056-1.715.158-2.5zm-5.524 6h1.773q-.09.487-.091 1c0 1.316.462 2.525 1.234 3.471A1 1 0 0 1 10 18c-.307 0-.646-.149-1.004-.517c-.36-.37-.707-.93-1.009-1.663a12.2 12.2 0 0 1-.669-2.32m.573 4.219A8.02 8.02 0 0 1 2.804 13.5h3.497c.182 1.007.441 1.922.762 2.7c.237.578.514 1.093.828 1.519M2.398 12.5H6.15A21 21 0 0 1 6 10c0-.866.052-1.705.15-2.5H2.398A8 8 0 0 0 2 10c0 .873.14 1.713.398 2.5M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4.854-2.353l-2 2a.5.5 0 0 0 .708.707L14 13.707V16.5a.5.5 0 0 0 1 0v-2.793l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.351-.146h-.006a.5.5 0 0 0-.348.144z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Containers"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title="Software"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="docker" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Containers"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title="Software"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="docker" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M11.3 2.48a3.5 3.5 0 0 0-2.6 0L2.943 4.785A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518a3.5 3.5 0 0 0 2.6 0l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176a1.5 1.5 0 0 0-.943-1.392zm-2.228.93a2.5 2.5 0 0 1 1.857 0l5.225 2.09l-2.279.91l-6.154-2.46zM6.375 4.487l6.154 2.461L10 7.961L3.846 5.499zm4.125 4.35l6.5-2.6v7.584a.5.5 0 0 1-.314.465l-5.757 2.303q-.21.083-.429.128zm-1 0v7.88a2.5 2.5 0 0 1-.428-.128l-5.758-2.303A.5.5 0 0 1 3 13.822V6.238z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Containers"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title="Software"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="docker" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='m10 7.96l3.029-1.21l-7.5-3l-2.586 1.034a1.5 1.5 0 0 0-.364.208zM2.035 5.853A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518q.391.156.8.214V8.838zm8.465 11.88a3.5 3.5 0 0 0 .8-.214l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176q0-.166-.035-.324L10.5 8.838zm6.921-12.74l-3.046 1.219l-7.5-3L8.7 2.48a3.5 3.5 0 0 1 2.6 0l5.757 2.303a1.5 1.5 0 0 1 .364.208'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Quick_File_Manager"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="file" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Quick_File_Manager"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="file" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3 5.5v6.604l1.5-2.6a3 3 0 0 1 2.599-1.5H15V7.5A1.5 1.5 0 0 0 13.5 6h-4a.5.5 0 0 1-.353-.146L7.44 4.146A.5.5 0 0 0 7.086 4H4.5A1.5 1.5 0 0 0 3 5.5m1.284 10.485q.106.015.22.015H13.9a2 2 0 0 0 1.732-1l2.163-3.745a1.5 1.5 0 0 0-1.3-2.25H7.1a2 2 0 0 0-1.732 1L3.205 13.75a1.5 1.5 0 0 0 1.079 2.235M2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.586a1.5 1.5 0 0 1 1.06.44L9.708 5H13.5A2.5 2.5 0 0 1 16 7.5v.505h.496c1.925 0 3.128 2.083 2.166 3.75L16.499 15.5a3 3 0 0 1-2.598 1.5h-9.4q-.095 0-.186-.007a2.46 2.46 0 0 1-1.438-.592A2.5 2.5 0 0 1 2 14.461'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Quick_File_Manager"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="file" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 3A2.5 2.5 0 0 0 2 5.5v6.971l1.568-2.716A3.5 3.5 0 0 1 6.6 8.005H16V7.5A2.5 2.5 0 0 0 13.5 5H9.707l-1.56-1.56A1.5 1.5 0 0 0 7.085 3zm-.066 7.255A2.5 2.5 0 0 1 6.6 9.005h10.396c1.54 0 2.502 1.666 1.732 3l-2.162 3.745A2.5 2.5 0 0 1 14.4 17H4.004c-1.54 0-2.502-1.667-1.732-3z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Argon_Config"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title="Fluent_Theme"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="theme" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Argon_Config"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title="Fluent_Theme"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="theme" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M5.5 1.999a.5.5 0 0 0-.5.5v8.504a2 2 0 0 0 2 2h1.004v2.998a2 2 0 1 0 4 0v-2.998H13a2 2 0 0 0 2-2V2.5a.5.5 0 0 0-.5-.5zm.5 8.004h8v1a1 1 0 0 1-1 1h-1.496a.5.5 0 0 0-.5.5v3.498a1 1 0 1 1-2 0v-3.498a.5.5 0 0 0-.5-.5H7a1 1 0 0 1-1-1zm8-1H6V3h4v1.5a.5.5 0 0 0 1 0V3h1v2.502a.5.5 0 0 0 1 0V3h1z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Argon_Config"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title="Fluent_Theme"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="theme" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 4.499v-2.5H5.5a.5.5 0 0 0-.5.5v6.5h10V2.5a.5.5 0 0 0-.5-.5H13v3.502a.5.5 0 0 1-1 0V2h-1v2.5a.5.5 0 0 1-1 0m5 5.5H5v1.004a2 2 0 0 0 2 2h1.5v3.498a1.5 1.5 0 1 0 3 0v-3.498H13a2 2 0 0 0 2-2z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Configuration"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title="System"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="config" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="setting" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Configuration"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title="System"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="config" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="setting" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535m1.06-.006l1.294 1.098a2 2 0 0 1 0 3.05l-1.293 1.098c.292.782.713 1.51 1.244 2.152l1.596-.57q.155-.055.315-.085a2 2 0 0 1 2.326 1.609l.304 1.669a7.6 7.6 0 0 0 2.486 0l.304-1.67a1.998 1.998 0 0 1 2.641-1.524l1.596.571a7.5 7.5 0 0 0 1.245-2.152l-1.294-1.098a1.998 1.998 0 0 1 0-3.05l1.294-1.098a7.5 7.5 0 0 0-1.245-2.152l-1.596.57a2 2 0 0 1-2.64-1.524l-.305-1.669a7.6 7.6 0 0 0-2.486 0l-.304 1.669a2 2 0 0 1-2.64 1.525l-1.597-.571a7.5 7.5 0 0 0-1.244 2.152M7.502 10a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m1 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Configuration"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title="System"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="config" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="setting" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535M8.001 10a2 2 0 1 0 4 0a2 2 0 0 0-4 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Reboot"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="reboot" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Reboot"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="reboot" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.5 2.5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM13.743 4a.5.5 0 1 0-.499.867a6.5 6.5 0 1 1-6.494.004a.5.5 0 1 0-.5-.866A7.5 7.5 0 1 0 13.743 4'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Reboot"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="reboot" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.75 2.5a.75.75 0 0 0-1.5 0v6a.75.75 0 0 0 1.5 0zM13.743 4a.75.75 0 1 0-.748 1.3A6 6 0 1 1 7 5.305a.75.75 0 1 0-.75-1.3a7.5 7.5 0 1 0 7.493-.003'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Events"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title="System_Log"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="log" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Events"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title="System_Log"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="log" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4.257a5.5 5.5 0 0 1-.657-1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v1.022q.516.047 1 .185V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207zM9 14.5q0-.252.022-.5H8.5a.5.5 0 0 0 0 1h.522A6 6 0 0 1 9 14.5m.207-1.5q.149-.524.393-1H8.5a.5.5 0 0 0 0 1zm1.05-2c.313-.38.677-.716 1.08-1H8.5a.5.5 0 0 0 0 1zM6.5 10a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1M6 12.5a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0m0 2a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0m13 0a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 0-1H15z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Events"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title="System_Log"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="log" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg fill='currentColor'%3E%3Cpath d='M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h4.757a5.5 5.5 0 0 1-1.235-3H8.5a.5.5 0 0 1 0-1h.522a5.5 5.5 0 0 1 .185-1H8.5a.5.5 0 0 1 0-1h1.1q.276-.538.657-1H8.5a.5.5 0 0 1 0-1h2.837c.895-.63 1.986-1 3.163-1a5.5 5.5 0 0 1 1.5.207V8h-4.5A1.5 1.5 0 0 1 10 6.5m-4 4a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0m0 2a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0m.5 1.5a.5.5 0 1 1 0 1a.5.5 0 0 1 0-1'/%3E%3Cpath d='M11 6.5V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5m8 8a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 0-1H15z'/%3E%3C/g%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Traffic_Monitor"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="monitor" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="statistics" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="bandix" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="Graphs" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Traffic_Monitor"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="monitor" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="statistics" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="bandix" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="Graphs" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 10a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5M6 8.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0zM13.5 6a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5M3 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm1 0v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Traffic_Monitor"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="monitor" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="statistics" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="bandix" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="Graphs" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm5 7a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5M6 8.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0zM13.5 6a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="S.M.A.R.T." i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="info" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="S.M.A.R.T." i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="info" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0M18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0M3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="S.M.A.R.T." i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="info" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0M9.508 8.91a.5.5 0 0 1 .984 0L10.5 9v4.502l-.008.09a.5.5 0 0 1-.984 0l-.008-.09V9zM9.25 6.75a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="Setup" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="Setup" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M15 11q.221 0 .435.023c.2.022.355.178.397.373l.222 1.036a.5.5 0 0 0 .642.37l1.006-.325a.46.46 0 0 1 .52.156q.26.352.439.758a.465.465 0 0 1-.125.529l-.785.709a.5.5 0 0 0 0 .742l.785.708a.465.465 0 0 1 .125.53q-.178.405-.439.757a.465.465 0 0 1-.52.157l-1.006-.326a.5.5 0 0 0-.642.371l-.222 1.034a.47.47 0 0 1-.397.374a4 4 0 0 1-.873 0a.465.465 0 0 1-.396-.373l-.22-1.035a.5.5 0 0 0-.643-.37l-1.006.325a.46.46 0 0 1-.52-.157a4 4 0 0 1-.44-.758a.46.46 0 0 1 .126-.529l.785-.708a.5.5 0 0 0 0-.742l-.785-.71a.46.46 0 0 1-.125-.528q.179-.406.438-.758a.46.46 0 0 1 .52-.156l1.007.326a.5.5 0 0 0 .642-.371l.22-1.036a.465.465 0 0 1 .397-.373Q14.778 11 15 11m0 3a1 1 0 1 0 0 2a1 1 0 0 0 0-2M7.499 1q.455 0 .892.063l.288.045l.073.02a.5.5 0 0 1 .326.368l.395 1.844a.5.5 0 0 0 .642.37l1.792-.58l.073-.018a.5.5 0 0 1 .461.168c.51.598.915 1.29 1.184 2.046a.5.5 0 0 1-.137.538l-1.4 1.265a.5.5 0 0 0 0 .742l1.4 1.264a.5.5 0 0 1 .137.538a6.5 6.5 0 0 1-1.184 2.046a.5.5 0 0 1-.534.15l-1.792-.58a.5.5 0 0 0-.642.371l-.395 1.843a.5.5 0 0 1-.4.388q-.57.107-1.18.109c-.404 0-.8-.04-1.18-.11a.5.5 0 0 1-.4-.387l-.393-1.843a.5.5 0 0 0-.642-.37l-1.793.58a.5.5 0 0 1-.534-.151a6.5 6.5 0 0 1-1.184-2.046a.5.5 0 0 1 .137-.538l1.4-1.264a.5.5 0 0 0 .072-.661l-.072-.081l-1.4-1.265a.5.5 0 0 1-.137-.538A6.5 6.5 0 0 1 2.556 3.28l.052-.052a.5.5 0 0 1 .482-.098l1.793.58a.5.5 0 0 0 .642-.37l.394-1.844l.021-.072a.5.5 0 0 1 .377-.316Q6.891 1.001 7.5 1m0 1q-.342 0-.674.043l-.321 1.506a1.5 1.5 0 0 1-1.93 1.113L3.11 4.188q-.407.537-.676 1.166L3.58 6.387l.116.116a1.5 1.5 0 0 1-.116 2.11L2.434 9.645c.178.417.406.808.676 1.165l1.464-.472a1.5 1.5 0 0 1 1.93 1.113l.321 1.504q.333.043.674.045q.34-.002.673-.045l.322-1.504a1.5 1.5 0 0 1 1.93-1.113l1.462.473c.27-.358.498-.749.675-1.166L11.42 8.613a1.5 1.5 0 0 1 0-2.226l1.142-1.033a5.5 5.5 0 0 0-.675-1.166l-1.462.474a1.5 1.5 0 0 1-1.93-1.113l-.322-1.506A6 6 0 0 0 7.499 2m0 3.25a2.25 2.25 0 1 1 0 4.5a2.25 2.25 0 0 1 0-4.5m0 1a1.25 1.25 0 1 0 .002 2.501A1.25 1.25 0 0 0 7.5 6.25'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="Setup" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M15.003 11q.221 0 .436.023c.2.022.355.178.397.373l.222 1.036a.5.5 0 0 0 .642.37l1.005-.325a.47.47 0 0 1 .522.156q.26.352.438.757a.465.465 0 0 1-.125.529l-.786.71a.5.5 0 0 0 0 .742l.786.71a.465.465 0 0 1 .125.528q-.18.405-.438.757a.47.47 0 0 1-.522.157l-1.005-.326a.5.5 0 0 0-.642.371l-.222 1.034a.47.47 0 0 1-.396.374a4 4 0 0 1-.874 0a.465.465 0 0 1-.396-.373l-.22-1.035a.5.5 0 0 0-.644-.37l-1.006.325a.46.46 0 0 1-.52-.157a4 4 0 0 1-.438-.758a.465.465 0 0 1 .125-.529l.785-.708a.5.5 0 0 0 0-.742l-.785-.71a.465.465 0 0 1-.125-.528q.178-.406.437-.758a.46.46 0 0 1 .52-.156l1.007.326a.5.5 0 0 0 .643-.371l.22-1.036a.465.465 0 0 1 .397-.373q.216-.023.437-.023m0 3a1 1 0 1 0 0 2a1 1 0 0 0 0-2M7.5 1q.455 0 .892.063l.288.045l.073.02a.5.5 0 0 1 .326.368l.395 1.844a.5.5 0 0 0 .642.37l1.792-.58l.073-.018a.5.5 0 0 1 .461.168a6.5 6.5 0 0 1 1.184 2.046a.5.5 0 0 1-.137.538l-1.4 1.265a.5.5 0 0 0 0 .742l1.4 1.264a.5.5 0 0 1 .137.538a6.5 6.5 0 0 1-1.184 2.046a.5.5 0 0 1-.534.15l-1.792-.58a.5.5 0 0 0-.642.371l-.395 1.843a.5.5 0 0 1-.4.388q-.57.107-1.179.109c-.405 0-.8-.04-1.182-.11a.5.5 0 0 1-.398-.387l-.394-1.843a.5.5 0 0 0-.642-.37l-1.793.58a.5.5 0 0 1-.534-.151a6.5 6.5 0 0 1-1.184-2.046a.5.5 0 0 1 .137-.538l1.4-1.264a.5.5 0 0 0 .072-.661l-.072-.081l-1.4-1.265a.5.5 0 0 1-.137-.538A6.5 6.5 0 0 1 2.556 3.28l.052-.052a.5.5 0 0 1 .482-.098l1.793.58a.5.5 0 0 0 .642-.37l.394-1.844l.021-.072a.5.5 0 0 1 .377-.316Q6.891 1.001 7.5 1m0 4.75a1.75 1.75 0 1 0 0 3.5a1.75 1.75 0 0 0 0-3.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="CPU_Freq"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="cpu" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="CPU_Freq"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="cpu" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6m-2 3a2 2 0 1 1 4 0a2 2 0 0 1-4 0m-.5-8a.5.5 0 0 1 .5.5V4h1.5V2.5a.5.5 0 0 1 1 0V4H12V2.5a.5.5 0 0 1 1 0V4h.5A2.5 2.5 0 0 1 16 6.5V7h1.5a.5.5 0 0 1 0 1H16v1.5h1.5a.5.5 0 0 1 0 1H16V12h1.5a.5.5 0 0 1 0 1H16v.5a2.5 2.5 0 0 1-2.5 2.5H13v1.5a.5.5 0 0 1-1 0V16h-1.5v1.5a.5.5 0 0 1-1 0V16H8v1.5a.5.5 0 0 1-1 0V16h-.5A2.5 2.5 0 0 1 4 13.5V13H2.5a.5.5 0 0 1 0-1H4v-1.5H2.5a.5.5 0 0 1 0-1H4V8H2.5a.5.5 0 0 1 0-1H4v-.5A2.5 2.5 0 0 1 6.5 4H7V2.5a.5.5 0 0 1 .5-.5M15 6.5A1.5 1.5 0 0 0 13.5 5h-7A1.5 1.5 0 0 0 5 6.5v7A1.5 1.5 0 0 0 6.5 15h7a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="CPU_Freq"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="cpu" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 12a2 2 0 1 0 0-4a2 2 0 0 0 0 4M8 2.5a.5.5 0 0 0-1 0V4h-.5A2.5 2.5 0 0 0 4 6.5V7H2.5a.5.5 0 0 0 0 1H4v1.5H2.5a.5.5 0 0 0 0 1H4V12H2.5a.5.5 0 0 0 0 1H4v.5A2.5 2.5 0 0 0 6.5 16H7v1.5a.5.5 0 0 0 1 0V16h1.5v1.5a.5.5 0 0 0 1 0V16H12v1.5a.5.5 0 0 0 1 0V16h.5a2.5 2.5 0 0 0 2.5-2.5V13h1.5a.5.5 0 0 0 0-1H16v-1.5h1.5a.5.5 0 0 0 0-1H16V8h1.5a.5.5 0 0 0 0-1H16v-.5A2.5 2.5 0 0 0 13.5 4H13V2.5a.5.5 0 0 0-1 0V4h-1.5V2.5a.5.5 0 0 0-1 0V4H8zm5 7.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="LED_Configuration"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="led" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="LED_Configuration"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="led" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 2c3.314 0 6 2.597 6 5.8c0 1.677-.745 3.216-2.204 4.594a.6.6 0 0 0-.145.213l-.026.081l-.936 3.917c-.184.771-.865 1.33-1.67 1.39l-.144.005h-1.75c-.818 0-1.535-.516-1.776-1.262l-.038-.133l-.935-3.916a.6.6 0 0 0-.17-.295c-1.39-1.312-2.133-2.77-2.2-4.355L4 7.8l.003-.191C4.108 4.494 6.753 2 10 2m2.045 13h-4.09l.319 1.334l.026.096c.097.3.376.522.712.563l.113.007h1.713l.106-.003a.86.86 0 0 0 .741-.525l.031-.1zM10 3C7.368 3 5.212 4.953 5.015 7.414l-.012.212L5 7.779l.004.217c.056 1.304.674 2.525 1.888 3.671c.188.178.33.398.414.64l.043.15L7.716 14h4.569l.387-1.615l.051-.15c.086-.215.218-.409.386-.568C14.383 10.465 15 9.181 15 7.8C15 5.157 12.769 3 10 3'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="LED_Configuration"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="led" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='m13.073 15l-.384 1.605c-.184.771-.865 1.33-1.67 1.39l-.144.005h-1.75c-.818 0-1.535-.516-1.776-1.262l-.038-.133L6.928 15zM10 2c3.314 0 6 2.597 6 5.8c0 1.677-.745 3.216-2.204 4.594a.6.6 0 0 0-.145.213l-.026.081L13.311 14H6.689l-.313-1.311a.6.6 0 0 0-.17-.295c-1.39-1.312-2.133-2.77-2.2-4.355L4 7.8l.003-.191C4.108 4.494 6.753 2 10 2'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Administration"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="kms" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Administration"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="kms" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M15 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-2.5-4C9.424 2 7 4.424 7 7.5c0 .397.04.796.122 1.175c.058.27-.008.504-.142.638l-4.54 4.54A1.5 1.5 0 0 0 2 14.915V16.5A1.5 1.5 0 0 0 3.5 18h2A1.5 1.5 0 0 0 7 16.5V16h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-.18c.493.134 1.007.18 1.5.18c3.076 0 5.5-2.424 5.5-5.5S15.576 2 12.5 2M8 7.5C8 4.976 9.976 3 12.5 3S17 4.976 17 7.5S15.024 12 12.5 12c-.66 0-1.273-.095-1.776-.347A.5.5 0 0 0 10 12.1v.9H9a1 1 0 0 0-1 1v1H7a1 1 0 0 0-1 1v.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.586a.5.5 0 0 1 .146-.353l4.541-4.541c.432-.432.522-1.044.412-1.556A4.6 4.6 0 0 1 8 7.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Administration"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="kms" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7 7.5C7 4.424 9.424 2 12.5 2S18 4.424 18 7.5S15.576 13 12.5 13a5.8 5.8 0 0 1-1.5-.18V13a1 1 0 0 1-1 1H9v1a1 1 0 0 1-1 1H7v.5A1.5 1.5 0 0 1 5.5 18h-2A1.5 1.5 0 0 1 2 16.5v-1.586c0-.398.158-.78.44-1.06l4.54-4.541c.134-.134.2-.368.142-.638A5.6 5.6 0 0 1 7 7.5M15 6a1 1 0 1 0-2 0a1 1 0 0 0 2 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="DHCP"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="upnp" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="DHCP"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="upnp" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.5 5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM7 12.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m.5 1.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 4.5A2.5 2.5 0 0 1 7.5 2h5A2.5 2.5 0 0 1 15 4.5v11a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 5 15.5zM7.5 3A1.5 1.5 0 0 0 6 4.5v11A1.5 1.5 0 0 0 7.5 17h5a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 12.5 3z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="DHCP"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="upnp" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.5 2A2.5 2.5 0 0 0 5 4.5v11A2.5 2.5 0 0 0 7.5 18h5a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 12.5 2zM7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 7a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Interfaces"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="network" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Interfaces"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="network" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill='currentColor' d='M4 6.5v3a.5.5 0 1 1-1 0v-3a.5.5 0 1 1 1 0M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 1 0 1 0v-3a.5.5 0 0 0-.5-.5m3 0a.5.5 0 0 0-.5.5v3a.5.5 0 1 0 1 0v-3a.5.5 0 0 0-.5-.5m3 0a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5m2.5-.5v5a1.5 1.5 0 0 1-1.5 1.5H13v1.5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5V12H2v1.5a.5.5 0 0 1-1 0V3H.5a.5.5 0 0 1 0-1H1a1 1 0 0 1 1 1v1h11.5A1.5 1.5 0 0 1 15 5.5M7 13h2v-1H7zm5-1h-2v1h2zm2-6.5a.5.5 0 0 0-.5-.5H2v6h11.5a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Interfaces"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="network" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill='currentColor' d='M14.561 4.439A1.5 1.5 0 0 0 13.5 4H2V3a.997.997 0 0 0-1-1H.5a.5.5 0 1 0 0 1H1v10.5a.5.5 0 1 0 1 0V12h4v1.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V12h.5a1.503 1.503 0 0 0 1.5-1.5v-5c0-.398-.158-.779-.439-1.061M4 9.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 1 1 1 0zm2.5.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 1 1 1 0v3a.5.5 0 0 1-.5.5M9 13H7v-1h2zm.5-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 1 1 1 0v3a.5.5 0 0 1-.5.5m2.5 3h-2v-1h2zm1-3.5a.5.5 0 1 1-1 0v-3a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Wireless"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="wireless" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Wireless"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="wireless" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M16.832 7.384c.41.409.796.877 1.133 1.365a.5.5 0 0 1-.823.568A8.612 8.612 0 0 0 3.946 8.091c-.348.348-.693.77-1.007 1.222a.5.5 0 0 1-.821-.57a10 10 0 0 1 1.121-1.36a9.61 9.61 0 0 1 13.593 0m-2.236 1.973a6.6 6.6 0 0 1 1.194 1.656a.5.5 0 0 1-.89.455a5.6 5.6 0 0 0-1.01-1.404a5.45 5.45 0 0 0-8.716 1.39a.5.5 0 1 1-.892-.452a6.45 6.45 0 0 1 10.315-1.645m-1.709 2.497c.355.354.647.79.85 1.254a.5.5 0 0 1-.916.401a3.1 3.1 0 0 0-.64-.948a3.033 3.033 0 0 0-4.29 0a3 3 0 0 0-.631.938a.5.5 0 1 1-.916-.401a4 4 0 0 1 .84-1.244a4.033 4.033 0 0 1 5.703 0m-1.924 1.933a1.298 1.298 0 1 1-1.836 1.836a1.298 1.298 0 0 1 1.836-1.836'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Wireless"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="wireless" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M16.73 7.563c.403.404.783.864 1.115 1.344a.75.75 0 0 1-1.235.852A7.968 7.968 0 0 0 4.4 8.623c-.32.322-.64.712-.932 1.133a.75.75 0 1 1-1.233-.855c.34-.49.716-.95 1.105-1.338a9.47 9.47 0 0 1 13.39 0m-2.14 1.888c.473.473.88 1.045 1.192 1.653a.75.75 0 1 1-1.335.683a5.1 5.1 0 0 0-.918-1.275a4.943 4.943 0 0 0-7.904 1.26a.75.75 0 0 1-1.338-.677A6.443 6.443 0 0 1 14.59 9.451m-1.635 2.39c.363.363.662.808.87 1.282a.75.75 0 0 1-1.375.602a2.7 2.7 0 0 0-.556-.824a2.63 2.63 0 0 0-3.72 0a2.7 2.7 0 0 0-.547.814a.75.75 0 1 1-1.374-.601a4.2 4.2 0 0 1 .86-1.274a4.13 4.13 0 0 1 5.842 0m-2.034 2.04a1.242 1.242 0 1 1-1.757 1.758a1.242 1.242 0 0 1 1.757-1.757'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="address" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="address" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.5 4A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4zM3 6.5A1.5 1.5 0 0 1 4.5 5h11A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 13.5zM4.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h8a.5.5 0 0 0 0-1zm.5 3a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="address" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2 6.5A2.5 2.5 0 0 1 4.5 4h11A2.5 2.5 0 0 1 18 6.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zM9.5 6h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1m3 2h-8a.5.5 0 0 0 0 1h8a.5.5 0 0 0 0-1M5 11a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="qos" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="qos" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2 4a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2m2-1a1 1 0 0 0 0 2h12a1 1 0 1 0 0-2zm0 7a2 2 0 0 1 2-2h8a2 2 0 1 1 0 4H6a2 2 0 0 1-2-2m2-1a1 1 0 0 0 0 2h8a1 1 0 1 0 0-2zm2 5a2 2 0 1 0 0 4h4a2 2 0 1 0 0-4zm-1 2a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="qos" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2 4a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2m2 6a2 2 0 0 1 2-2h8a2 2 0 1 1 0 4H6a2 2 0 0 1-2-2m4 4a2 2 0 1 0 0 4h4a2 2 0 1 0 0-4z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="PortWeaver" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="socat" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="PortWeaver" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="socat" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.146 3.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L14.293 7H4.5a.5.5 0 0 1 0-1h9.793l-2.147-2.146a.5.5 0 0 1 0-.708m-4.292 7a.5.5 0 0 1 0 .708L5.707 13H15.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="PortWeaver" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="socat" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.78 3.22a.75.75 0 1 0-1.06 1.06L13.44 6H4.75a.75.75 0 0 0 0 1.5h8.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06zm-4.5 7.56a.75.75 0 1 0-1.06-1.06l-3 3a.75.75 0 0 0 0 1.06l3 3a.75.75 0 0 0 1.06-1.06L6.56 14h8.69a.75.75 0 0 0 0-1.5H6.56z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="usteer" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="roam" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="mesh" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="usteer" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="roam" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="mesh" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M5.879 6.586a2.5 2.5 0 1 1 .707-.707L8.62 7.914A2.5 2.5 0 0 1 9.999 7.5c.51 0 .983.152 1.379.414l2.035-2.035a2.5 2.5 0 1 1 .707.707L12.086 8.62c.262.396.414.87.414 1.379c0 .51-.152.983-.414 1.379l2.035 2.035a2.5 2.5 0 1 1-.707.707l-2.035-2.035a2.5 2.5 0 0 1-1.379.414c-.51 0-.983-.152-1.379-.414L6.586 14.12a2.5 2.5 0 1 1-.707-.707l2.035-2.035A2.5 2.5 0 0 1 7.5 10c0-.51.152-.983.414-1.379zM6 4.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0m11 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0M4.5 17a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M17 15.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0M11.5 10a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="usteer" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="roam" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="mesh" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7 4.5c0 .51-.152.983-.414 1.379L8.62 7.914A2.5 2.5 0 0 1 9.999 7.5c.51 0 .983.152 1.379.414l2.035-2.035a2.5 2.5 0 1 1 .707.707L12.086 8.62c.262.396.414.87.414 1.379c0 .51-.152.983-.414 1.379l2.035 2.035a2.5 2.5 0 1 1-.707.707l-2.035-2.035a2.5 2.5 0 0 1-1.379.414c-.51 0-.983-.152-1.379-.414L6.586 14.12a2.5 2.5 0 1 1-.707-.707l2.035-2.035A2.5 2.5 0 0 1 7.5 10c0-.51.152-.983.414-1.379L5.88 6.586A2.5 2.5 0 1 1 7 4.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="share" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="share" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12 5.502a2.502 2.502 0 1 1 .531 1.541L7.915 9.351a2.5 2.5 0 0 1 0 1.297l4.618 2.31a2.5 2.5 0 1 1-.448.894l-4.618-2.31a2.5 2.5 0 1 1 0-3.086l4.618-2.307A2.5 2.5 0 0 1 12 5.502M14.502 4a1.501 1.501 0 1 0 0 3.003a1.501 1.501 0 0 0 0-3.003m-.002 9a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M4 10a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="share" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M17 5.5a2.5 2.5 0 0 1-4.467 1.543L7.915 9.352a2.5 2.5 0 0 1 0 1.297l4.618 2.308a2.5 2.5 0 1 1-.448.894l-4.618-2.308a2.5 2.5 0 1 1 0-3.085l4.618-2.31A2.504 2.504 0 0 1 14.5 3A2.5 2.5 0 0 1 17 5.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="usb" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="usb" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.5 2h5a.5.5 0 0 1 .5.5V6h.079C14.137 6 15 6.853 15 7.912v5.176A1.916 1.916 0 0 1 13.079 15H12v2.5a.5.5 0 0 1-1 0V15H9v2.5a.5.5 0 0 1-1 0V15H6.921A1.916 1.916 0 0 1 5 13.088V7.912C5 6.852 5.863 6 6.921 6H7V2.5a.5.5 0 0 1 .5-.5m5.579 12a.916.916 0 0 0 .921-.912V7.912c0-.5-.41-.912-.921-.912H6.92a.916.916 0 0 0-.92.912v5.176c0 .5.41.912.921.912zM12 6V3H8v3z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="usb" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5V6h.079C14.137 6 15 6.853 15 7.912v5.176A1.916 1.916 0 0 1 13.079 15H12v2.5a.5.5 0 0 1-1 0V15H9v2.5a.5.5 0 0 1-1 0V15H6.921A1.916 1.916 0 0 1 5 13.088V7.912C5 6.852 5.863 6 6.921 6H7zM8 6h4V3H8z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="raid" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="raid" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4 5c0-1.007.875-1.755 1.904-2.223C6.978 2.289 8.427 2 10 2s3.022.289 4.096.777C15.125 3.245 16 3.993 16 5v6h-1V6.698a5 5 0 0 1-.904.525C13.022 7.711 11.573 8 10 8s-3.022-.289-4.096-.777A5 5 0 0 1 5 6.698V15c0 .374.356.875 1.318 1.313c.916.416 2.218.687 3.682.687h.05c.434.425.978.738 1.585.892c-.521.07-1.07.108-1.635.108c-1.573 0-3.022-.289-4.096-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313C7.234 6.729 8.536 7 10 7s2.766-.27 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313C12.766 3.271 11.464 3 10 3s-2.766.27-3.682.687C5.356 4.125 5 4.627 5 5m7.5 7a2.5 2.5 0 0 0 0 5h.5a.5.5 0 0 0 0-1h-.5a1.5 1.5 0 0 1 0-3h.5a.5.5 0 0 0 0-1zm3.5 0a.5.5 0 0 0 0 1h.5a1.5 1.5 0 0 1 0 3H16a.5.5 0 0 0 0 1h.5a2.5 2.5 0 0 0 0-5zm-4 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="raid" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 8c3.314 0 6-1.343 6-3s-2.686-3-6-3s-6 1.343-6 3s2.686 3 6 3m4.69.016c.47-.235.927-.534 1.31-.896V11h-3.5a3.5 3.5 0 0 0-.878 6.889c-.516.072-1.06.111-1.622.111c-3.314 0-6-1.343-6-3V7.12c.383.362.84.661 1.31.896C6.562 8.642 8.222 9 10 9s3.438-.358 4.69-.984M12.5 12a2.5 2.5 0 0 0 0 5h.5a.5.5 0 0 0 0-1h-.5a1.5 1.5 0 0 1 0-3h.5a.5.5 0 0 0 0-1zm3.5 0a.5.5 0 0 0 0 1h.5a1.5 1.5 0 0 1 0 3H16a.5.5 0 0 0 0 1h.5a2.5 2.5 0 0 0 0-5zm-4 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="filter" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="filter" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.5 13h5a.5.5 0 0 1 .09.992L12.5 14h-5a.5.5 0 0 1-.09-.992zh5zm-2-4h9a.5.5 0 0 1 .09.992L14.5 10h-9a.5.5 0 0 1-.09-.992zh9zm-2-4h13a.5.5 0 0 1 .09.992L16.5 6h-13a.5.5 0 0 1-.09-.992zh13z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="filter" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M12.25 13.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5zm2-4.25a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5zm2-4.25a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1 0-1.5z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="speed" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="homebox" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="speed" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="homebox" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 2a8 8 0 0 1 5.44 13.866l-.082.062a.5.5 0 0 1-.6-.794l.254-.246A6.97 6.97 0 0 0 16.98 10.5h-1.503A.49.49 0 0 1 15 10c0-.268.208-.5.477-.5h1.503a7 7 0 0 0-6.479-6.48v1.502A.49.49 0 0 1 10 5a.49.49 0 0 1-.499-.476V3.02a6.97 6.97 0 0 0-4.083 1.69l1.063 1.063a.49.49 0 0 1-.016.69a.49.49 0 0 1-.69.017L4.71 5.417A6.97 6.97 0 0 0 3.02 9.5h1.503A.49.49 0 0 1 5 10a.49.49 0 0 1-.477.5H3.02a6.97 6.97 0 0 0 1.968 4.388l.253.246l.067.075a.5.5 0 0 1-.747.657A8 8 0 0 1 10 2m3.196 4.102a.502.502 0 0 1 .74.64v.002l-.001.002l-.005.009l-.02.037l-.078.138a195 195 0 0 1-1.15 2.026a80 80 0 0 1-.947 1.61c-.141.232-.271.44-.38.603a3 3 0 0 1-.295.391a1.5 1.5 0 0 1-2.12-2.12c.123-.124.464-.4.865-.718c.415-.33.93-.73 1.432-1.118a347 347 0 0 1 1.795-1.376l.121-.093l.032-.025l.01-.006z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="speed" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="homebox" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 2a8 8 0 0 1 5.518 13.793a.75.75 0 0 1-1.036-1.086A6.5 6.5 0 0 0 16.422 11h-1.174a.75.75 0 0 1 0-1.5h1.232a6.5 6.5 0 0 0-5.729-5.956v1.265c0 .394-.356.691-.751.691c-.394 0-.749-.297-.749-.69V3.544a6.47 6.47 0 0 0-3.285 1.36l.811.812a.75.75 0 0 1-1.06 1.06l-.812-.811A6.47 6.47 0 0 0 3.521 9.5h1.227l.076.004a.75.75 0 0 1 0 1.492L4.748 11h-1.17a6.5 6.5 0 0 0 1.712 3.48l.228.227l.052.056a.75.75 0 0 1-1.088 1.03A8 8 0 0 1 10 2m3.196 4.102a.502.502 0 0 1 .74.64v.002l-.001.002l-.005.009l-.02.037l-.078.138a195 195 0 0 1-1.15 2.026a80 80 0 0 1-.947 1.61c-.141.232-.271.44-.38.603a3 3 0 0 1-.295.391a1.5 1.5 0 0 1-2.12-2.12c.123-.124.464-.4.865-.718c.415-.33.93-.73 1.432-1.118a347 347 0 0 1 1.795-1.376l.121-.093l.032-.025l.01-.006z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="sim" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="modem" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title^="4g" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title^="lte" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title^="5g" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="sim" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="modem" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title^="4g" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title^="lte" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title^="5g" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M15 3a2 2 0 0 1 2 2v4.6a5.5 5.5 0 0 0-1-.393V5a1 1 0 1 0-2 0v4.022a5.5 5.5 0 0 0-1 .185V5a2 2 0 0 1 2-2M9.067 15.36c.089.565.263 1.101.51 1.595A2 2 0 0 1 8 15V8a2 2 0 1 1 4 0v1.6a5.5 5.5 0 0 0-1 .657V8a1 1 0 1 0-2 0v7q.001.192.067.36M5 9a2 2 0 0 1 2 2v4a2 2 0 1 1-4 0v-4a2 2 0 0 1 2-2m1 2a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0zm13 3.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4.024-2.64a.494.494 0 0 0-.952 0l-.477 1.532H12c-.484 0-.686.647-.294.944l1.25.947l-.477 1.532c-.15.48.378.88.77.583l1.25-.947l1.25.947c.392.297.92-.103.77-.583l-.477-1.532l1.25-.947c.392-.297.19-.944-.294-.944h-1.545z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="sim" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="modem" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title^="4g" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title^="lte" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title^="5g" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M15 3a2 2 0 0 1 2 2v4.6a5.5 5.5 0 0 0-2.5-.6a5.5 5.5 0 0 0-1.5.207V5a2 2 0 0 1 2-2M9 14.5c0 .882.208 1.716.577 2.455A2 2 0 0 1 8 15V8a2 2 0 1 1 4 0v1.6a5.5 5.5 0 0 0-3 4.9M7 11a2 2 0 1 0-4 0v4a2 2 0 1 0 4 0zm12 3.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4.024-2.64a.494.494 0 0 0-.952 0l-.477 1.532H12c-.484 0-.686.647-.294.944l1.25.947l-.477 1.532c-.15.48.378.88.77.583l1.25-.947l1.25.947c.392.297.92-.103.77-.583l-.477-1.532l1.25-.947c.392-.297.19-.944-.294-.944h-1.545z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Routing"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="routing" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Routing"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="routing" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M14.314 3.146a.5.5 0 0 0-.707.708L16.253 6.5H12A2.5 2.5 0 0 0 9.5 9v2A1.5 1.5 0 0 1 8 12.5h-.041a3 3 0 1 0 0 1H8a2.5 2.5 0 0 0 2.5-2.5V9A1.5 1.5 0 0 1 12 7.5h4.253l-2.646 2.646a.5.5 0 1 0 .707.707l3.5-3.5a.5.5 0 0 0 0-.707zM7 13a2 2 0 1 1-4 0a2 2 0 0 1 4 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Routing"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="routing" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M14.314 3.146a.5.5 0 0 0-.707.708L16.253 6.5H12A2.5 2.5 0 0 0 9.5 9v2A1.5 1.5 0 0 1 8 12.5h-.041a3 3 0 1 0 0 1H8a2.5 2.5 0 0 0 2.5-2.5V9A1.5 1.5 0 0 1 12 7.5h4.253l-2.646 2.646a.5.5 0 1 0 .707.707l3.5-3.5a.5.5 0 0 0 0-.707z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="Wake_on_LAN" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="wol" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="timer" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title*="Wake_on_LAN" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="wol" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="timer" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M13.264 2.078a.5.5 0 1 0-.523.852c2.258 1.384 4.12 3.414 4.26 7.09A.5.5 0 0 0 18 9.982c-.157-4.099-2.278-6.398-4.736-7.904m-1.178 2.65a.5.5 0 0 1 .694-.134c1.607 1.085 2.715 2.638 2.888 4.424q.024.24.024.487a.5.5 0 0 1-1 0q0-.198-.02-.39c-.136-1.418-1.024-2.728-2.452-3.693a.5.5 0 0 1-.134-.694m-7.006.71a5.16 5.16 0 0 0-2.614 6.811l1.223 2.749l.09 2.32a.75.75 0 0 0 1.054.656l9.727-4.33a.75.75 0 0 0 .218-1.223l-1.664-1.619l-1.224-2.749a5.16 5.16 0 0 0-6.81-2.614m-1.7 6.404a4.158 4.158 0 0 1 7.596-3.382l1.302 2.925l1.538 1.495l-9.052 4.03l-.083-2.143zm7.298 6.034a1.49 1.49 0 0 1-1.848-.54l2.685-1.194a1.49 1.49 0 0 1-.837 1.734'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title*="Wake_on_LAN" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="wol" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="timer" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2.466 12.25a5.158 5.158 0 0 1 9.424-4.197l1.224 2.749l1.664 1.619a.75.75 0 0 1-.218 1.222l-9.727 4.331a.75.75 0 0 1-1.054-.656l-.09-2.32zm6.364 5.087a1.49 1.49 0 0 0 2.685-1.195zm3.256-12.609a.5.5 0 0 1 .694-.134c1.608 1.085 2.715 2.638 2.888 4.424q.024.24.024.487a.5.5 0 1 1-1 0a4 4 0 0 0-.02-.39c-.136-1.418-1.024-2.728-2.452-3.693a.5.5 0 0 1-.134-.694m.49-2.485a.5.5 0 0 1 .688-.165c2.458 1.506 4.58 3.805 4.736 7.904a.5.5 0 0 1-1 .038c-.14-3.676-2-5.706-4.259-7.09a.5.5 0 0 1-.165-.687'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Images"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="plugin" i] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title*="kit" i] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Images"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="plugin" i] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title*="kit" i] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M13.577 2.38a3 3 0 0 0-2.154 0L7.962 3.71A1.5 1.5 0 0 0 7 5.11v1.101a4 4 0 0 1 1 0v-1.1a.5.5 0 0 1 .32-.467l3.462-1.331a2 2 0 0 1 1.436 0l3.461 1.331a.5.5 0 0 1 .32.467v7.78a.5.5 0 0 1-.32.466l-2.68 1.031v.503q0 .307-.072.596l3.111-1.196a1.5 1.5 0 0 0 .962-1.4V5.11a1.5 1.5 0 0 0-.962-1.4zm2.514 2.915a.5.5 0 0 0-.646-.287l-2.766 1.064a.5.5 0 0 1-.359 0L9.554 5.008a.5.5 0 1 0-.359.933l2.766 1.064a1.5 1.5 0 0 0 1.077 0l2.766-1.064a.5.5 0 0 0 .287-.646m-5 5a.5.5 0 0 0-.646-.287L7.5 11.141l-2.946-1.133a.5.5 0 0 0-.359.934L7 12.02v2.49a.5.5 0 1 0 1 0v-2.49l2.804-1.078a.5.5 0 0 0 .287-.647M8.577 7.38a3 3 0 0 0-2.154 0L2.962 8.71A1.5 1.5 0 0 0 2 10.11v4.78a1.5 1.5 0 0 0 .962 1.4l3.46 1.332a3 3 0 0 0 2.155 0l3.461-1.331a1.5 1.5 0 0 0 .961-1.4v-4.78a1.5 1.5 0 0 0-.961-1.4zm-1.795.933a2 2 0 0 1 1.436 0l3.461 1.331a.5.5 0 0 1 .32.467v4.78a.5.5 0 0 1-.32.466L8.218 16.69a2 2 0 0 1-1.436 0L3.32 15.357a.5.5 0 0 1-.32-.465v-4.78a.5.5 0 0 1 .32-.467z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Images"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="plugin" i] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title*="kit" i] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M13.577 2.378a3 3 0 0 0-2.154 0L7.962 3.709A1.5 1.5 0 0 0 7 5.109v1.1a4 4 0 0 1 1.936.235l3.46 1.332A2.5 2.5 0 0 1 14 10.109v4.78a2.5 2.5 0 0 1-.072.596l3.111-1.196a1.5 1.5 0 0 0 .962-1.4v-7.78a1.5 1.5 0 0 0-.962-1.4zm1.868 2.154a.5.5 0 1 1 .359.934l-2.766 1.063a1.5 1.5 0 0 1-1.077 0L9.195 5.466a.5.5 0 0 1 .36-.934l2.765 1.064a.5.5 0 0 0 .36 0zM6.423 7.378a3 3 0 0 1 2.154 0l3.461 1.331c.58.223.961.78.961 1.4v4.78a1.5 1.5 0 0 1-.961 1.4L8.577 17.62a3 3 0 0 1-2.154 0l-3.461-1.33A1.5 1.5 0 0 1 2 14.89v-4.78a1.5 1.5 0 0 1 .962-1.4zm4.668 2.915a.5.5 0 0 0-.646-.287L7.5 11.139l-2.946-1.133a.5.5 0 1 0-.359.933L7 12.018v2.49a.5.5 0 0 0 1 0v-2.49l2.804-1.079a.5.5 0 0 0 .287-.646'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Overview"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Overview"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Overview"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 10 6.5M6.5 10h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1m0 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1m0 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1M11 6.5V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Networks"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Networks"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.825 6.12a.5.5 0 0 1 .055.705L2.159 10l2.72 3.175a.5.5 0 1 1-.759.65l-3-3.5a.5.5 0 0 1 0-.65l3-3.5a.5.5 0 0 1 .705-.055m10.295 7.055a.5.5 0 0 0 .76.65l3-3.5a.5.5 0 0 0 0-.65l-3-3.5a.5.5 0 1 0-.76.65L17.842 10zM6 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m5-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Networks"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4.707 6.156a.75.75 0 0 1 .137 1.051L2.696 10l2.148 2.793a.75.75 0 1 1-1.188.914l-2.5-3.25a.75.75 0 0 1 0-.914l2.5-3.25a.75.75 0 0 1 1.051-.137m10.449 6.637a.75.75 0 1 0 1.188.914l2.5-3.25a.75.75 0 0 0 0-.914l-2.5-3.25a.75.75 0 1 0-1.188.914L17.304 10zM6 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m5-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Volumes"] .menu-icon, .main-left .nav li.slide .slide-menu li a[data-title="Disk_Man"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Volumes"] .menu-icon:before, .main-left .nav li.slide .slide-menu li a[data-title="Disk_Man"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M13 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2M2 8.5A2.5 2.5 0 0 1 4.5 6h11A2.5 2.5 0 0 1 18 8.5v3a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 11.5zM4.5 7A1.5 1.5 0 0 0 3 8.5v3A1.5 1.5 0 0 0 4.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 15.5 7z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Volumes"] .menu-icon:after, .main-left .nav li.slide .slide-menu li a[data-title="Disk_Man"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2 8.5A2.5 2.5 0 0 1 4.5 6h11A2.5 2.5 0 0 1 18 8.5v3a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 11.5zM13 9a1 1 0 1 0-2 0a1 1 0 0 0 2 0m3 0a1 1 0 1 0-2 0a1 1 0 0 0 2 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Firewall"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Firewall"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Firewall"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="DNS"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="DNS"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm1.03 0h5.162a9.3 9.3 0 0 1-.56 1.592C11.408 16.41 10.658 17 10 17s-1.407-.59-2.022-1.908A9.3 9.3 0 0 1 7.42 13.5m5.375-1H7.206A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.133.775.206 1.617.206 2.5s-.073 1.725-.206 2.5m.817 1h2.453a7.02 7.02 0 0 1-3.778 3.118c.241-.33.456-.704.642-1.103c.276-.593.507-1.272.683-2.015m2.93-1h-2.734c.126-.788.193-1.63.193-2.5s-.067-1.712-.193-2.5h2.733c.297.776.46 1.62.46 2.5s-.163 1.724-.46 2.5m-4.255-9.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="DNS"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.987 4.18a12.2 12.2 0 0 0-.669 2.32h5.364a12.2 12.2 0 0 0-.67-2.32c-.301-.733-.648-1.294-1.008-1.663C10.646 2.149 10.307 2 10 2s-.646.149-1.004.517c-.36.37-.707.93-1.009 1.663m-.096-1.899c-.314.426-.59.941-.828 1.518c-.32.78-.58 1.694-.762 2.701H2.804a8.02 8.02 0 0 1 5.087-4.219m4.219 0c.313.426.59.941.827 1.518c.32.78.58 1.694.762 2.701h3.497a8.02 8.02 0 0 0-5.087-4.219M17.602 7.5H13.85c.098.795.15 1.634.15 2.5s-.052 1.705-.15 2.5h3.752A8 8 0 0 0 18 10a8 8 0 0 0-.398-2.5m-.406 6h-3.497c-.182 1.007-.441 1.922-.762 2.7a7.2 7.2 0 0 1-.827 1.519a8.02 8.02 0 0 0 5.086-4.219M10 18c.307 0 .646-.149 1.004-.517c.36-.37.707-.93 1.008-1.663a12.2 12.2 0 0 0 .67-2.32H7.318c.168.873.397 1.657.67 2.32c.301.733.648 1.294 1.008 1.663c.358.368.697.517 1.004.517m-2.11-.281A8.02 8.02 0 0 1 2.805 13.5h3.497c.182 1.007.441 1.922.762 2.7c.237.578.514 1.093.828 1.519M2.399 12.5H6.15A21 21 0 0 1 6 10c0-.866.052-1.705.15-2.5H2.398A8 8 0 0 0 2 10c0 .873.14 1.713.398 2.5M7 10c0-.875.056-1.715.158-2.5h5.684c.102.785.158 1.625.158 2.5s-.056 1.714-.158 2.5H7.158A19 19 0 0 1 7 10'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Diagnostics"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Diagnostics"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.497 16.803L15.253 12H14.25q-.184 0-.36-.044l-3.865 3.902l-3.863-3.902Q5.986 12 5.8 12H4.799l4.755 4.803c.26.263.682.263.942 0m6.227-12.49a4.42 4.42 0 0 1 .978 4.7A2 2 0 0 0 17.5 9h-.889a3.415 3.415 0 0 0-.598-3.984A3.306 3.306 0 0 0 11.3 5l-.951.963a.5.5 0 0 1-.711 0l-.96-.97a3.3 3.3 0 0 0-4.706-.016C2.899 6.061 2.713 7.711 3.42 9H2.5q-.09 0-.18.01a4.4 4.4 0 0 1 .941-4.736a4.3 4.3 0 0 1 6.127.016l.605.61l.596-.603l.109-.106a4.306 4.306 0 0 1 6.026.121M7.962 6.307a.5.5 0 0 0-.922-.004L5.47 10H2.5a.5.5 0 0 0 0 1h3.3a.5.5 0 0 0 .46-.304l1.235-2.907l2.043 4.903a.5.5 0 0 0 .886.073l2.143-3.429l1.307 1.493a.5.5 0 0 0 .376.171h3.25a.5.5 0 0 0 0-1h-3.023l-1.6-1.83a.5.5 0 0 0-.801.065l-1.987 3.179z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Diagnostics"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.388 4.29a4.3 4.3 0 0 0-6.127-.016a4.4 4.4 0 0 0-.94 4.737Q2.408 9 2.5 9h2.308L6.12 5.913a1.5 1.5 0 0 1 2.765.01l1.383 3.319l.96-1.537a1.5 1.5 0 0 1 2.4-.193L14.932 9H17.5q.103 0 .202.014a4.42 4.42 0 0 0-.978-4.702a4.305 4.305 0 0 0-6.135-.015l-.596.603zm.166 12.513L4.799 12H5.8a1.5 1.5 0 0 0 1.38-.913l.306-.72l1.13 2.71a1.5 1.5 0 0 0 2.656.218l1.43-2.287l.42.48A1.5 1.5 0 0 0 14.25 12h1.004l-4.757 4.803a.66.66 0 0 1-.943 0M7.962 6.308a.5.5 0 0 0-.922-.004L5.47 10H2.5a.5.5 0 0 0 0 1h3.3a.5.5 0 0 0 .46-.304l1.235-2.907l2.043 4.903a.5.5 0 0 0 .886.073l2.143-3.429l1.307 1.493a.5.5 0 0 0 .376.171h3.25a.5.5 0 0 0 0-1h-3.023l-1.6-1.83a.5.5 0 0 0-.801.065l-1.987 3.179z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Startup"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Startup"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M17.22 8.687a1.498 1.498 0 0 1 0 2.626l-9.997 5.499A1.5 1.5 0 0 1 5 15.499V4.501a1.5 1.5 0 0 1 2.223-1.313zm-.482 1.75a.5.5 0 0 0 0-.875L6.741 4.063A.5.5 0 0 0 6 4.501v10.998a.5.5 0 0 0 .741.438z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Startup"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M17.222 8.685a1.5 1.5 0 0 1 0 2.628l-10 5.498A1.5 1.5 0 0 1 5 15.496V4.502a1.5 1.5 0 0 1 2.223-1.314z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Scheduled_Tasks"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Scheduled_Tasks"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-.5 2a.5.5 0 0 1 .492.41L10 5.5V10h2.5a.5.5 0 0 1 .09.992L12.5 11h-3a.5.5 0 0 1-.492-.41L9 10.5v-5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Scheduled_Tasks"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m-.5 3a.5.5 0 0 0-.5.5v5l.008.09A.5.5 0 0 0 9.5 11h3l.09-.008A.5.5 0 0 0 12.5 10H10V5.5l-.008-.09A.5.5 0 0 0 9.5 5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Mount_Points"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Mount_Points"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2 12c0-.398.08-.791.237-1.156l2.414-5.632A2 2 0 0 1 6.489 4h7.104c.742 0 1.43.41 1.763 1.088c.571 1.162 1.633 3.424 2.454 5.774c.13.369.19.754.19 1.138v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm11.593-7H6.49a1 1 0 0 0-.919.606l-1.894 4.42Q3.834 10 4 10h12q.231 0 .447.05a57 57 0 0 0-1.988-4.521a.96.96 0 0 0-.866-.529M16 15a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1zm-1.25-1.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Mount_Points"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4 10c-.588 0-1.136.169-1.599.461l2.25-5.249A2 2 0 0 1 6.489 4h7.104c.742 0 1.43.41 1.763 1.088c.544 1.106 1.53 3.207 2.333 5.432A3 3 0 0 0 16 10zm12 1a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H3.987A2 2 0 0 1 2 14v-1a2 2 0 0 1 2-2zm-.5 3.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Backup_/_Flash_Firmware"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Backup_/_Flash_Firmware"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8A6.5 6.5 0 0 1 10.066 3.5q.037 0 .073-.005L8.586 5.049a.5.5 0 0 0 .707.707zM8.586 16.363a.5.5 0 0 0 0 .707l2.121 2.121a.5.5 0 0 0 .707-.707l-.997-.997a7.5 7.5 0 0 0 4.075-13.495a.5.5 0 1 0-.6.8q.369.277.704.61A6.5 6.5 0 0 1 9.934 16.5l-.074.004l1.554-1.554a.5.5 0 1 0-.707-.707z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Backup_/_Flash_Firmware"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9.885 3.75a6.25 6.25 0 0 0-3.628 11.256a.75.75 0 0 1-.9 1.2a7.75 7.75 0 0 1 3.99-13.93l-.584-.586A.75.75 0 0 1 9.823.63l2.122 2.121a.75.75 0 0 1 0 1.06L9.823 5.934a.75.75 0 0 1-1.06-1.06zm.23 12.498a6.25 6.25 0 0 0 3.628-11.256a.75.75 0 0 1 .9-1.2q.439.33.837.727a7.75 7.75 0 0 1-4.828 13.203l.585.585a.75.75 0 1 1-1.06 1.061l-2.122-2.121a.75.75 0 0 1 0-1.06l2.122-2.122a.75.75 0 1 1 1.06 1.06z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Terminal"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Terminal"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm13 .5v-.5a1.5 1.5 0 0 0-1.5-1.5h-9a1.5 1.5 0 0 0-1.5 1.5V6zm-12 1v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Terminal"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm1 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Processes"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Processes"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2.03a4.5 4.5 0 0 0-1-.004V7H4v7a2 2 0 0 0 2 2h3.492a2.5 2.5 0 0 0-.443 1H6a3 3 0 0 1-3-3zm10.044 3.587l-1.44-1.44a.5.5 0 0 0-.708.707l1.578 1.577q.232-.447.57-.844M6 4a2 2 0 0 0-2 2h12a2 2 0 0 0-2-2zm3.104 4.854a.5.5 0 1 0-.708-.708l-2.5 2.5a.5.5 0 0 0 0 .708l2.5 2.5a.5.5 0 0 0 .708-.708L6.957 11zm7.788.17c.366.042.471.48.21.742l-.975.975a1.507 1.507 0 1 0 2.132 2.132l.975-.975c.261-.261.7-.156.742.21a3.518 3.518 0 0 1-4.676 3.723l-2.726 2.727a1.507 1.507 0 1 1-2.132-2.132l2.726-2.726a3.518 3.518 0 0 1 3.724-4.676'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Processes"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2.03a4.5 4.5 0 0 0-1-.004V7H4v7a2 2 0 0 0 2 2h3.492a2.5 2.5 0 0 0-.443 1H6a3 3 0 0 1-3-3zm10.044 3.587l-1.44-1.44a.5.5 0 0 0-.708.707l1.578 1.577q.232-.447.57-.844m-3.94-.733a.5.5 0 1 0-.708-.708l-2.5 2.5a.5.5 0 0 0 0 .708l2.5 2.5a.5.5 0 0 0 .708-.708L6.957 11zm7.788.17c.366.042.471.48.21.742l-.975.975a1.507 1.507 0 1 0 2.132 2.132l.975-.975c.261-.261.7-.156.742.21a3.518 3.518 0 0 1-4.676 3.723l-2.726 2.727a1.507 1.507 0 1 1-2.132-2.132l2.726-2.726a3.518 3.518 0 0 1 3.724-4.676'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Channel_Analysis"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Channel_Analysis"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='m14.497 3.382l-.722.722A7 7 0 1 0 14.95 14.95a.5.5 0 0 1 .707.707a8 8 0 1 1-1.16-12.275m-2.935 2.935l.751-.751a5.002 5.002 0 0 0-5.849 7.97a5 5 0 0 0 7.072 0a.5.5 0 1 0-.708-.708a4 4 0 1 1-1.266-6.511m4.292-2.17a.5.5 0 0 1 0 .707L10.966 9.74a1.001 1.001 0 1 1-.707-.707l4.887-4.888a.5.5 0 0 1 .708 0M17 13.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M16.5 7a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m1.5 4.25a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0m-.5-2a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m-2.5 2a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0m-.5-2a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Channel_Analysis"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M14.284 3.241L13.19 4.335a6.5 6.5 0 1 0 1.406 10.261a.75.75 0 0 1 1.06 1.06a8 8 0 1 1-1.372-12.415m-3.296 3.296l1.163-1.163a5.102 5.102 0 0 0-5.757 8.232a5.1 5.1 0 0 0 7.212 0a.75.75 0 1 0-1.06-1.06a3.6 3.6 0 1 1-1.558-6.009M15.78 4.22a.75.75 0 0 1 0 1.06l-4.33 4.331q.049.187.05.389a1.5 1.5 0 1 1-1.111-1.45l4.33-4.33a.75.75 0 0 1 1.061 0m1.47 9.03a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M16.5 7.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m1.5 3.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-.75-1.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M15 11.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-.75-1.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Realtime_Graphs"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Realtime_Graphs"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4 2a2 2 0 0 0-2 2v4h1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v4h1V4a2 2 0 0 0-2-2zM2 13v-2h1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2h1v2a2 2 0 0 1-2 2h-3v2h1.5a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1H7v-2H4a2 2 0 0 1-2-2m10 2H8v2h4zM7.977 4.35a.5.5 0 0 0-.941-.036L5.162 9H2.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .465-.314L7.442 5.99l2.08 6.658a.5.5 0 0 0 .925.075L13 7.618l1.052 2.106A.5.5 0 0 0 14.5 10h3a.5.5 0 1 0 0-1h-2.691l-1.362-2.724a.5.5 0 0 0-.894 0l-2.446 4.891z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Realtime_Graphs"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M2 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4h-2.573l-1.085-2.17a1.5 1.5 0 0 0-2.684 0l-1.336 2.672l-1.39-4.45a1.5 1.5 0 0 0-2.825-.109L4.485 8H2zm12.5 7H18v2a2 2 0 0 1-2 2h-3v2h1.5a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1H7v-2H4a2 2 0 0 1-2-2v-2h3.5a1.5 1.5 0 0 0 1.394-.943l.433-1.083l1.241 3.973a1.5 1.5 0 0 0 2.774.224L13 9.854l.158.317A1.5 1.5 0 0 0 14.5 11M12 17v-2H8v2zM7.977 4.35a.5.5 0 0 0-.941-.036L5.162 9H2.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .465-.314L7.442 5.99l2.08 6.658a.5.5 0 0 0 .925.075L13 7.618l1.053 2.106A.5.5 0 0 0 14.5 10h3a.5.5 0 0 0 0-1h-2.691l-1.362-2.724a.5.5 0 0 0-.894 0l-2.446 4.891z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="AmneziaWG"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="AmneziaWG"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M11.5 9a1.5 1.5 0 0 1-1 1.415V12.5a.5.5 0 0 1-1 0v-2.085A1.5 1.5 0 1 1 11.5 9m-1.223-6.916a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M4 5.428a16 16 0 0 0 5.6-2.082l.4-.249l.4.249A16 16 0 0 0 16 5.428V9.5c0 3.392-1.968 5.863-6 7.463c-4.032-1.6-6-4.071-6-7.463z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="AmneziaWG"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M10.277 2.084a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M11.5 9a1.5 1.5 0 0 1-1 1.415V12.5a.5.5 0 0 1-1 0v-2.085A1.5 1.5 0 1 1 11.5 9'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Release_RAM"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Release_RAM"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M17.91 2.182a.5.5 0 0 1 0 .707L12.587 8.21a4.5 4.5 0 0 1-.334 5.991l-.664.664l-2.09 3.483a.5.5 0 0 1-.781.096l-7.072-7.071a.5.5 0 0 1 .097-.782l3.483-2.09l.663-.664a4.5 4.5 0 0 1 5.991-.334l5.323-5.322a.5.5 0 0 1 .707 0M6.243 8.899l4.95 4.95l.353-.354a3.5 3.5 0 1 0-4.95-4.95zm-.785.63l-2.652 1.59l6.166 6.166l1.59-2.652z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Release_RAM"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M17.91 2.182a.5.5 0 0 1 0 .707L13.298 7.5a5.6 5.6 0 0 0-.707-.707l4.612-4.612a.5.5 0 0 1 .707 0m-5.657 5.656a4.5 4.5 0 0 0-6.364 0l-.421.422l6.364 6.364l.421-.422a4.5 4.5 0 0 0 0-6.364m-10.51 2.754L4.644 8.85l.002.002l6.5 6.5a.5.5 0 0 0 .103.08L9.5 18.348a.5.5 0 0 1-.781.096l-7.072-7.071a.5.5 0 0 1 .097-.782'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Advanced_plus"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Advanced_plus"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M9 6.5a4.5 4.5 0 0 1 6.353-4.102a.5.5 0 0 1 .148.809L13.208 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .81.147c.255.566.397 1.194.397 1.853c0 1.162-.44 2.221-1.163 3.02a5.5 5.5 0 0 0-1.051-.369a3.49 3.49 0 0 0 1.14-3.37l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.5 3.5 0 0 0-4.106 4.312a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l4.057-4.11a5.5 5.5 0 0 0-.372 1.8l-2.973 3.012a2.357 2.357 0 0 1-3.374-3.293L9.083 7.36A4.5 4.5 0 0 1 9 6.5m1.635 7.42a2 2 0 0 0 1.43-2.478l-.155-.557q.382-.293.821-.497l.338.358a2 2 0 0 0 2.91.001l.324-.344q.448.212.835.519l-.126.422a2 2 0 0 0 1.456 2.519l.349.082a4.7 4.7 0 0 1 .01 1.017l-.46.118a2 2 0 0 0-1.431 2.478l.156.556q-.383.295-.822.498l-.338-.358a2 2 0 0 0-2.909-.002l-.325.345a4.3 4.3 0 0 1-.835-.518l.127-.423a2 2 0 0 0-1.456-2.52l-.35-.082a4.7 4.7 0 0 1-.01-1.016zm2.865.58a1 1 0 1 0 2 0a1 1 0 0 0-2 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Advanced_plus"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M13.5 2a4.5 4.5 0 0 0-4.417 5.36l-6.426 6.658a2.357 2.357 0 0 0 3.374 3.293L9.004 14.3a5.5 5.5 0 0 1 7.833-4.78a4.51 4.51 0 0 0 1.05-4.03a.5.5 0 0 0-.841-.242L14.5 7.793L12.208 5.5l2.545-2.545a.5.5 0 0 0-.242-.84A4.5 4.5 0 0 0 13.501 2m-2.865 11.92a2 2 0 0 0 1.43-2.478l-.155-.557q.382-.293.821-.497l.338.358a2 2 0 0 0 2.91.001l.324-.344q.448.212.835.519l-.126.422a2 2 0 0 0 1.456 2.519l.349.082a4.7 4.7 0 0 1 .01 1.017l-.46.118a2 2 0 0 0-1.431 2.478l.156.556q-.383.295-.822.498l-.338-.358a2 2 0 0 0-2.909-.002l-.325.345a4.3 4.3 0 0 1-.835-.518l.127-.423a2 2 0 0 0-1.456-2.52l-.35-.082a4.7 4.7 0 0 1-.01-1.016zm2.865.58a1 1 0 1 0 2 0a1 1 0 0 0-2 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Athena_LED_Ctrl"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Athena_LED_Ctrl"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M4 2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm8 13v2H8v-2zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Athena_LED_Ctrl"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M3.5 2A1.5 1.5 0 0 0 2 3.5v10A1.5 1.5 0 0 0 3.5 15H7v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 16.5 2zM12 15v2H8v-2z'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Scheduled_Reboot"] .menu-icon { display: inline-flex; } .main-left .nav li.slide .slide-menu li a[data-title="Scheduled_Reboot"] .menu-icon:before { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7.5 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm7.656 1.929a.5.5 0 1 0-.707.707l1.414 1.414a.5.5 0 1 0 .707-.707zM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5m0 12a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-1a6 6 0 1 1 0-12a6 6 0 0 1 0 12'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li a[data-title="Scheduled_Reboot"] .menu-icon:after { --icon-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='currentColor' d='M7 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m7.45 1.429a.5.5 0 0 1 .706 0l1.414 1.414a.5.5 0 1 1-.707.707L14.45 4.636a.5.5 0 0 1 0-.707M16.5 11a7 7 0 1 1-14 0a7 7 0 0 1 14 0M9 6.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-1 0'/%3E%3C/svg%3E"); } .main-left .nav li.slide .slide-menu li:hover { background: var(--fluent-sidebar-item-hover); } .main-left .nav li.slide .slide-menu li:hover:before { background-color: color-mix(in srgb, var(--fluent-primary) 30%, transparent); } .main-left .nav li.slide .slide-menu li:hover a { color: var(--fluent-text); } .main-left .nav li.slide .slide-menu li:hover a .menu-icon:before { opacity: 0; } .main-left .nav li.slide .slide-menu li:hover a .menu-icon:after { opacity: 1; } .main-left .nav li.slide .slide-menu li.active { background: var(--fluent-sidebar-item-active); color: var(--fluent-text); } .main-left .nav li.slide .slide-menu li.active:before { background-color: var(--fluent-primary); } .main-left .nav li.slide .slide-menu li.active a { color: var(--fluent-primary); font-weight: var(--fluent-font-weight-semibold); } .main-left .nav li.slide .slide-menu li.active a .menu-icon { color: var(--fluent-primary); } .main-left .nav li.slide .slide-menu li.active a .menu-icon:before { opacity: 0; } .main-left .nav li.slide .slide-menu li.active a .menu-icon:after { opacity: 1; } .main-left .nav li.slide .slide-menu li.active:hover { background: var(--fluent-sidebar-item-active); } .main-left .nav li.slide .slide-menu li.active:hover:before { background-color: var(--fluent-primary); } .main-left .nav li .menu:after { inset-inline-end: var(--fluent-space-sm); transition: transform var(--fluent-duration-fast) var(--fluent-easing-standard),background-color var(--fluent-duration-fast) var(--fluent-easing-standard); content: url("data:image/svg+xml;utf8,"); --fluent-mask-chevron-down-20-regular: url("data:image/svg+xml,"); width: 14px; height: 14px; -webkit-mask-image: var(--fluent-mask-chevron-down-20-regular); mask-image: var(--fluent-mask-chevron-down-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) rotate(-90deg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } .main-left .nav li .menu.active:after { transform: translateY(-50%) rotate(0); background-color: var(--fluent-primary) !important; } html[dir="rtl"] .main-left .nav li .menu:after, body[data-fluent-dir="rtl"] .main-left .nav li .menu:after { transform: translateY(-50%) rotate(90deg); } html[dir="rtl"] .main-left .nav li .menu.active:after, body[data-fluent-dir="rtl"] .main-left .nav li .menu.active:after { transform: translateY(-50%) rotate(0); } body[data-sidebar-state="collapsed"] .main-left { width: var(--fluent-sidebar-collapsed-width, 48px); scrollbar-width: none; overflow-x: visible; } body[data-sidebar-state="collapsed"] .main-left::-webkit-scrollbar { display: none; } body[data-sidebar-state="collapsed"] .main-left .sidenav-header { justify-content: center; gap: 0; padding: 0; } body[data-sidebar-state="collapsed"] .main-left .sidenav-header .brand { display: none; } body[data-sidebar-state="collapsed"] .main-left .sidenav-header .sidebar-collapse-toggle { border-radius: 0; justify-content: center; width: 100%; height: 48px; margin-inline-start: 0; } body[data-sidebar-state="collapsed"] .main-left .sidenav-header .sidebar-collapse-toggle:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-line-horizontal-3-20-regular: url("data:image/svg+xml,"); width: 20px; height: 20px; -webkit-mask-image: var(--fluent-mask-line-horizontal-3-20-regular); mask-image: var(--fluent-mask-line-horizontal-3-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-text-secondary) !important; } body[data-sidebar-state="collapsed"] .main-right { z-index: 1; margin-inline-start: var(--fluent-sidebar-collapsed-width, 48px); position: relative; } body[data-sidebar-state="collapsed"] .main-left .nav { padding-inline: 0; } body[data-sidebar-state="collapsed"] .main-left .nav > li > .slide-menu.active { display: none; } body[data-sidebar-state="collapsed"] .main-left .nav > li { position: relative; } body[data-sidebar-state="collapsed"] .main-left .nav > li > a:first-child { justify-content: flex-start; padding: 0; padding-inline-start: 14px; } body[data-sidebar-state="collapsed"] .main-left .nav > li > a:first-child .menu-icon { margin: 0; } body[data-sidebar-state="collapsed"] .main-left .nav > li > a:first-child .menu-label { opacity: 0; pointer-events: none; width: 0; position: absolute; overflow: hidden; } body[data-sidebar-state="collapsed"] .main-left .nav > li > .slide-menu { top: auto; min-width: 220px; max-height: calc(100dvh - 16px); padding: var(--fluent-space-xs); background: var(--fluent-bg-card, var(--fluent-sidebar-bg)); border: 1px solid var(--fluent-border); border-radius: var(--fluent-radius-lg); box-shadow: var(--fluent-shadow-lg); z-index: calc(var(--fluent-zindex-menu) + 20); margin: 0; position: fixed; inset-inline-start: calc(var(--fluent-sidebar-collapsed-width, 48px) + var(--fluent-space-sm)); overflow: hidden auto; } body[data-sidebar-state="collapsed"] .main-left .nav > li > .slide-menu li a { padding: 0 var(--fluent-space-sm); } body[data-sidebar-state="collapsed"] .main-left .nav > li > .slide-menu.popup-open { display: block; } body[data-sidebar-state="collapsed"] .main-left .nav .menu:after { display: none; } body[data-sidebar-state="collapsed"] .main-left .nav > li > a.menu.popup-open { background: var(--fluent-sidebar-item-active); } body[data-sidebar-state="collapsed"] .main-left .nav > li > a.menu.popup-open:before { content: ""; background: var(--fluent-primary); border-radius: 999px; width: 3px; height: 60%; position: absolute; inset-inline-start: 3px; } body[data-sidebar-state="collapsed"] .main-left .nav > li > a.menu.popup-open .menu-icon { color: var(--fluent-primary); } body[data-sidebar-state="collapsed"] .main-left .nav > li > a.menu.popup-open .menu-icon:before { opacity: 0; } body[data-sidebar-state="collapsed"] .main-left .nav > li > a.menu.popup-open .menu-icon:after { opacity: 1; } @media (max-width: 767px) { html[dir="ltr"] .main-left, body[data-fluent-dir="ltr"] .main-left { transform: translateX(-100%); } html[dir="ltr"] .main-left.active, body[data-fluent-dir="ltr"] .main-left.active { transform: translateX(0); } html[dir="rtl"] .main-left, body[data-fluent-dir="rtl"] .main-left { transform: translateX(100%); } html[dir="rtl"] .main-left.active, body[data-fluent-dir="rtl"] .main-left.active { transform: translateX(0); } .main-left { z-index: calc(var(--fluent-zindex-modal) + 150); height: 100dvh; top: 0; } .main-left .sidebar__search-slot { padding-top: 16px; display: block; } .main-right, body[data-sidebar-state="collapsed"] .main-right { margin-inline-start: 0; } .darkMask { top: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: calc(var(--fluent-zindex-modal) + 149); opacity: 0; pointer-events: none; transition: opacity var(--fluent-duration-normal) var(--fluent-easing-standard); background-color: #0006; position: fixed; inset: 0; } .darkMask.active { opacity: 1; pointer-events: auto; } } @keyframes fluent-poll-pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.8); } 100% { opacity: 1; transform: scale(1); } } body > div.main > div.main-right > header { align-items: center; gap: var(--fluent-space-md); padding: 0 var(--fluent-space-sm); background: var(--fluent-bg); border-bottom: 1px solid var(--fluent-border); height: var(--fluent-header-height, 48px); top: 0; width: 100%; z-index: var(--fluent-zindex-actions, 1000); transition: background var(--fluent-duration-normal) var(--fluent-easing-standard); display: flex; position: fixed; inset-inline-start: 0; } body > div.main > div.main-right > header .header__brand { align-items: center; gap: var(--fluent-space-sm); flex: none; min-width: 0; display: flex; } body > div.main > div.main-right > header .header__title { min-width: 0; color: var(--fluent-text); font-size: var(--fluent-font-size-md); font-weight: var(--fluent-font-weight-semibold); line-height: var(--fluent-line-height-tight); white-space: nowrap; text-overflow: ellipsis; align-items: center; text-decoration: none; display: flex; overflow: hidden; } body > div.main > div.main-right > header .header__title .icon { flex-shrink: 0; width: 18px; height: 18px; margin-inline-end: 12px; } body > div.main > div.main-right > header .header__search-slot { flex: auto; justify-content: center; align-items: center; min-width: 0; display: flex; } body > div.main > div.main-right > header .header__search-placeholder { border-radius: var(--fluent-radius-md); border: 1px solid var(--fluent-border); background: var(--fluent-bg-hover); width: min(420px, 100%); height: 32px; box-shadow: inset 0 1px #ffffff14; } body > div.main > div.main-right > header .header__toggle, body > div.main > div.main-right > header .desktop-toggle { width: 36px; height: 36px; color: var(--fluent-text); cursor: pointer; border-radius: var(--fluent-radius-md); transition: background var(--fluent-duration-fast) var(--fluent-easing-standard); background: none; border: none; justify-content: center; align-items: center; padding: 0; display: flex; } body > div.main > div.main-right > header .header__toggle:before, body > div.main > div.main-right > header .desktop-toggle:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-line-horizontal-3-20-regular: url("data:image/svg+xml,"); width: 20px; height: 20px; -webkit-mask-image: var(--fluent-mask-line-horizontal-3-20-regular); mask-image: var(--fluent-mask-line-horizontal-3-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body > div.main > div.main-right > header .header__toggle:hover, body > div.main > div.main-right > header .desktop-toggle:hover { background: var(--fluent-bg-hover); } body > div.main > div.main-right > header .mobile-toggle { display: none !important; } @media (max-width: 767px) { body > div.main > div.main-right > header .mobile-toggle { display: flex !important; } } body > div.main > div.main-right > header .desktop-toggle { display: flex !important; } @media (max-width: 767px) { body > div.main > div.main-right > header .desktop-toggle { display: none !important; } } body > div.main > div.main-right > header .theme-toggle { box-sizing: border-box; width: 32px; height: 32px; color: var(--fluent-text-secondary); cursor: pointer; border-radius: var(--fluent-radius-sm); transition: all var(--fluent-transition-fast); opacity: 0; pointer-events: none; background: none; border: none; flex: 0 0 32px; justify-content: center; align-items: center; padding: 0; display: inline-flex; position: relative; overflow: visible; } body > div.main > div.main-right > header .theme-toggle.visible { opacity: 1; pointer-events: auto; } body > div.main > div.main-right > header .theme-toggle:hover { background: var(--fluent-bg-hover); color: var(--fluent-text); } body > div.main > div.main-right > header .theme-toggle:active { transform: scale(.95); } body > div.main > div.main-right > header .theme-toggle:before, body > div.main > div.main-right > header .theme-toggle:after { pointer-events: none; transition: opacity var(--fluent-transition-fast),transform var(--fluent-transition-fast),background-color var(--fluent-transition-fast); position: absolute; } body > div.main > div.main-right > header .theme-toggle:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-weather-sunny-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-weather-sunny-20-regular); mask-image: var(--fluent-mask-weather-sunny-20-regular); -webkit-user-select: none; user-select: none; backface-visibility: hidden; opacity: 1; display: inline-block; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) rotate(0); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body > div.main > div.main-right > header .theme-toggle:after { content: url("data:image/svg+xml;utf8,"); --fluent-mask-link-16-filled: url("data:image/svg+xml,"); width: 12px; height: 12px; -webkit-mask-image: var(--fluent-mask-link-16-filled); mask-image: var(--fluent-mask-link-16-filled); -webkit-user-select: none; user-select: none; inset-inline-end: 2px; opacity: 0; display: inline-block; bottom: 2px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body > div.main > div.main-right > header .theme-toggle[data-active-theme="dark"]:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-weather-moon-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-weather-moon-20-regular); mask-image: var(--fluent-mask-weather-moon-20-regular); -webkit-user-select: none; user-select: none; display: inline-block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor !important; } body > div.main > div.main-right > header .theme-toggle[data-mode="auto"]:before { -webkit-mask-image: var(--fluent-mask-weather-sunny-20-regular),radial-gradient(ellipse 6.5px 4.5px at 17px 17px, transparent 90%, black 100%); mask-image: var(--fluent-mask-weather-sunny-20-regular),radial-gradient(ellipse 6.5px 4.5px at 17px 17px, transparent 90%, black 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } html[dir="rtl"] body > div.main > div.main-right > header .theme-toggle[data-mode="auto"]:before, body[data-fluent-dir="rtl"] body > div.main > div.main-right > header .theme-toggle[data-mode="auto"]:before { -webkit-mask-image: var(--fluent-mask-weather-sunny-20-regular),radial-gradient(ellipse 6.5px 4.5px at 1px 17px, transparent 90%, black 100%); mask-image: var(--fluent-mask-weather-sunny-20-regular),radial-gradient(ellipse 6.5px 4.5px at 1px 17px, transparent 90%, black 100%); } body > div.main > div.main-right > header .theme-toggle[data-active-theme="dark"][data-mode="auto"]:before { -webkit-mask-image: var(--fluent-mask-weather-moon-20-regular),radial-gradient(ellipse 6.5px 4.5px at 17px 17px, transparent 90%, black 100%); mask-image: var(--fluent-mask-weather-moon-20-regular),radial-gradient(ellipse 6.5px 4.5px at 17px 17px, transparent 90%, black 100%); } html[dir="rtl"] body > div.main > div.main-right > header .theme-toggle[data-active-theme="dark"][data-mode="auto"]:before, body[data-fluent-dir="rtl"] body > div.main > div.main-right > header .theme-toggle[data-active-theme="dark"][data-mode="auto"]:before { -webkit-mask-image: var(--fluent-mask-weather-moon-20-regular),radial-gradient(ellipse 6.5px 4.5px at 1px 17px, transparent 90%, black 100%); mask-image: var(--fluent-mask-weather-moon-20-regular),radial-gradient(ellipse 6.5px 4.5px at 1px 17px, transparent 90%, black 100%); } body > div.main > div.main-right > header .theme-toggle[data-mode="auto"]:after { opacity: 1; } body > div.main > div.main-right > header .header-actions { align-items: center; gap: var(--fluent-space-sm); flex: none; display: flex; } body > div.main > div.main-right > header .header-actions > * { flex-shrink: 0; } body > div.main > div.main-right > header .status { align-items: center; display: flex; } body > div.main > div.main-right > header .status #xhr_poll_status, body > div.main > div.main-right > header .status [data-indicator="poll-status"], body > div.main > div.main-right > header .status [data-indicator="poll"] { cursor: pointer; border-radius: var(--fluent-radius-sm); -webkit-user-select: none; user-select: none; transition: all var(--fluent-duration-fast) var(--fluent-easing-standard); box-sizing: border-box; justify-content: center; align-items: center; position: relative; overflow: visible; color: #0000 !important; background-color: #0000 !important; border: none !important; width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; font-size: 0 !important; display: inline-flex !important; } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="active"], body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="active"], body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="active"] { --fluent-poll-icon: var(--fluent-text-secondary); } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="active"]:before, body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="active"]:before, body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="active"]:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-arrow-sync-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-arrow-sync-20-regular); mask-image: var(--fluent-mask-arrow-sync-20-regular); -webkit-user-select: none; user-select: none; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard); display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-poll-icon) !important; } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="active"]:after, body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="active"]:after, body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="active"]:after { content: ""; inset-inline-end: 2px; background-color: var(--fluent-success); border: 2px solid var(--fluent-bg); border-radius: 50%; width: 8px; height: 8px; animation: 1.5s ease-in-out infinite fluent-poll-pulse; position: absolute; bottom: 2px; } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="active"]:hover, body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="active"]:hover, body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="active"]:hover { --fluent-poll-icon: var(--fluent-text); background-color: var(--fluent-bg-hover) !important; } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="inactive"], body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="inactive"], body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="inactive"] { --fluent-poll-icon: var(--fluent-text-secondary); } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="inactive"]:before, body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="inactive"]:before, body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="inactive"]:before { content: url("data:image/svg+xml;utf8,"); --fluent-mask-arrow-sync-off-20-regular: url("data:image/svg+xml,"); width: 18px; height: 18px; -webkit-mask-image: var(--fluent-mask-arrow-sync-off-20-regular); mask-image: var(--fluent-mask-arrow-sync-off-20-regular); -webkit-user-select: none; user-select: none; transition: background-color var(--fluent-duration-fast) var(--fluent-easing-standard); display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--fluent-poll-icon) !important; } body > div.main > div.main-right > header .status #xhr_poll_status[data-style="inactive"]:hover, body > div.main > div.main-right > header .status [data-indicator="poll-status"][data-style="inactive"]:hover, body > div.main > div.main-right > header .status [data-indicator="poll"][data-style="inactive"]:hover { --fluent-poll-icon: var(--fluent-text); background-color: var(--fluent-bg-hover) !important; } body > div.main > div.main-right > header [data-theme="dark"] .theme-toggle, body > div.main > div.main-right > header .theme-toggle[data-active-theme="dark"] { color: var(--fluent-text-secondary); } body > div.main > div.main-right > header [data-theme="dark"] .theme-toggle:hover, body > div.main > div.main-right > header .theme-toggle[data-active-theme="dark"]:hover { color: var(--fluent-text); background: #ffffff14; } @media (max-width: 767px) { body > div.main > div.main-right > header { padding: 0 var(--fluent-space-sm); gap: var(--fluent-space-sm); } body > div.main > div.main-right > header .header__brand { flex: auto; } body > div.main > div.main-right > header .header__search-slot { display: none; } body > div.main > div.main-right > header .theme-toggle { flex: 0 0 28px; width: 28px; height: 28px; } } .main > .main-right > #maincontent { box-sizing: border-box; width: 100%; padding: var(--fluent-space-xl); flex-grow: 1; overflow: auto; } .main > .main-right > #maincontent > .container > h2[name="content"] { margin-bottom: 15px; } .main > .main-right > #maincontent > .container > h2, .main > .main-right > #maincontent > .container #view > h2, .main > .main-right > #maincontent > .container #view > div > h2 { padding-inline-start: 12px; position: relative; } .main > .main-right > #maincontent > .container > h2:before, .main > .main-right > #maincontent > .container #view > h2:before, .main > .main-right > #maincontent > .container #view > div > h2:before { content: ""; inset-inline-start: 0; background-color: var(--fluent-primary); border-radius: var(--fluent-radius-sm, 2px); width: 4px; position: absolute; top: 4px; bottom: 4px; } @media (max-width: 767px) { .main > .main-right > #maincontent { padding: var(--fluent-space-md); } } [data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; --fluent-bg: #1f1f1f; --fluent-bg-card: #292929; --fluent-bg-hover: #383838; --fluent-bg-active: #424242; --fluent-bg-page: #1a1a1a; --fluent-primary: #4da6ff; --fluent-primary-hover: var(--fluent-brand-90); --fluent-primary-active: var(--fluent-brand-100); --fluent-primary-light: color-mix(in srgb, var(--fluent-primary) 15%, #000); --fluent-primary-lighter: color-mix(in srgb, var(--fluent-primary) 8%, #000); --fluent-primary-lightest: color-mix(in srgb, var(--fluent-primary) 12%, #000); --fluent-selection-bg: color-mix(in srgb, var(--fluent-primary) 35%, #000); --fluent-selection-text: var(--fluent-text); --fluent-info: var(--fluent-primary); --fluent-info-light: var(--fluent-primary-light); --fluent-success: #6feb6f; --fluent-success-light: #133c13; --fluent-warning: #ff8c00; --fluent-warning-hover: #fa3; --fluent-warning-active: #fb5; --fluent-warning-light: #420; --fluent-error: #ff5f5f; --fluent-error-hover: #ff8080; --fluent-error-active: #ff9f9f; --fluent-error-light: #400; --fluent-purple: #c084fc; --fluent-purple-light: #c084fc2e; --fluent-text: #fff; --fluent-text-secondary: #adadad; --fluent-text-disabled: #6b6b6b; --fluent-text-on-primary: #fff; --fluent-text-link: var(--fluent-primary); --fluent-text-link-hover: var(--fluent-primary-hover); --fluent-border: #525252; --fluent-border-hover: #7a7a7a; --fluent-border-active: var(--fluent-primary); --fluent-shadow-sm: 0 2px 4px #0003, 0 2px 10px #0000004d; --fluent-shadow-md: 0 4px 8px #00000040, 0 4px 18px #00000059; --fluent-shadow-lg: 0 8px 16px #0000004d, 0 8px 32px #0006; --fluent-shadow-xl: 0 20px 40px #0006, 0 10px 20px #0000004d; --fluent-sidebar-bg: #1f1f1f; --fluent-sidebar-item-hover: #ffffff0f; --fluent-sidebar-item-active: color-mix(in srgb, var(--fluent-primary) 8%, transparent); --fluent-input-bg: #292929; --fluent-input-border: #666; --fluent-input-border-bottom: #adadad; --fluent-input-border-hover: #757575; --fluent-input-border-bottom-hover: #bdbdbd; --fluent-input-border-bottom-focus: var(--fluent-primary); --fluent-input-bg-disabled: #333; --fluent-input-bg-hover: #333; --fluent-calendar-picker-invert: 1; --fluent-btn-primary-bg: color-mix(in srgb, var(--fluent-primary) 65%, #000); --fluent-btn-primary-bg-hover: color-mix(in srgb, var(--fluent-primary) 75%, #000); --fluent-btn-primary-bg-active: color-mix(in srgb, var(--fluent-primary) 50%, #000); --fluent-btn-secondary-bg: #292929; --fluent-btn-secondary-bg-hover: #3d3d3d; --fluent-btn-secondary-bg-active: #1f1f1f; --fluent-btn-secondary-border: #666; --fluent-btn-secondary-border-hover: #757575; --fluent-btn-secondary-border-active: #757575; --fluent-card-bg: #292929; --fluent-card-border: #3d3d3d; --fluent-table-header-bg: #292929; --fluent-table-row-hover: #383838; --fluent-table-row-selected: color-mix(in srgb, var(--fluent-primary) 25%, #000); --fluent-table-border: #3d3d3d; --fluent-modal-bg: #292929; --fluent-modal-overlay: #0009; --fluent-checkbox-border: #adadad; --fluent-checkbox-bg: #292929; --fluent-checkbox-checked-bg: var(--fluent-primary); --fluent-checkbox-checked-border: var(--fluent-primary); --fluent-checkbox-hover-border: #fff; --fluent-scrollbar-thumb-bg: #525252; --fluent-scrollbar-thumb-bg-hover: #7a7a7a; --fluent-scrollbar-thumb-horizontal-bg: #ffffff26; --fluent-scrollbar-thumb-horizontal-bg-hover: #ffffff59; --fluent-progress-bg: #3d3d3d; --fluent-progress-bar-bg: var(--fluent-primary); --fluent-login-bg: #1f1f1feb; --fluent-login-border: #525252b3; --fluent-login-icon-color: var(--fluent-text-secondary); --fluent-tooltip-bg: #292929; --fluent-tooltip-text: #fff; --fluent-dropdown-bg: var(--fluent-bg-card); --fluent-dropdown-border: var(--fluent-input-border); --fluent-dropdown-shadow: 0 8px 16px #00000047, 0 0 2px #0000003d; --fluent-dropdown-option-hover: var(--fluent-bg-hover); --fluent-dropdown-option-selected: #4da6ff1a; --fluent-focus-color: #fff; --fluent-focus-inner-color: #000; }