/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* stylelint-disable max-nesting-depth */
@import 'chrome://global/skin/in-content/common.css';
.asrouter-admin {
  font-family: system-ui;
  max-width: 1300px;
  box-sizing: border-box;
  font-size: var(--font-size-root);
  padding-inline-start: 200px;
}
.asrouter-admin .sidebar {
  inset-inline-start: 0;
  position: fixed;
  width: 160px;
}
.asrouter-admin .sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.asrouter-admin .sidebar .category {
  display: block;
  padding: 10px 14px;
  border-radius: 4px;
  margin-inline-start: 20px;
  color: var(--text-color);
  text-decoration: none;
  user-select: none;
}
.asrouter-admin .sidebar .category:hover {
  background-color: var(--button-background-color-hover);
}
.asrouter-admin .sidebar .category:hover:active {
  background-color: var(--button-background-color-active);
}
.asrouter-admin .sidebar .category[data-selected] {
  color: var(--color-accent-primary);
}
.asrouter-admin .main-panel {
  margin-block: 12px;
  margin-inline-end: 12px;
}
.asrouter-admin .button-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asrouter-admin .button-box.baseline {
  align-items: baseline;
}
.asrouter-admin .button-box.vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.asrouter-admin .button-box.vertical input[type=radio] {
  align-self: center;
}
.asrouter-admin .button-box.vertical button {
  margin-block: 0;
}
.asrouter-admin .button-box:not(.vertical) button {
  margin-inline: 0;
}
.asrouter-admin .button-box button {
  padding-block: 0;
  min-height: 32px;
  min-width: 32px;
}
.asrouter-admin .test-only {
  display: block;
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.asrouter-admin .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px;
  -moz-context-properties: fill;
  fill: currentColor;
}
.asrouter-admin .icon.small {
  width: 12px;
  height: 12px;
  background-size: 12px;
}
.asrouter-admin .icon.icon-small-spacer {
  margin-inline-end: 6px;
}
.asrouter-admin .icon.icon-info {
  background-image: url("chrome://global/skin/icons/info.svg");
}
.asrouter-admin .icon.icon-dismiss {
  background-image: url("chrome://global/skin/icons/close.svg");
}
.asrouter-admin .icon.icon-undo {
  background-image: url("chrome://global/skin/icons/undo.svg");
}
.asrouter-admin .icon.icon-arrowhead-down {
  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
}
.asrouter-admin .icon.icon-arrowhead-forward {
  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
}
.asrouter-admin .icon.icon-arrowhead-forward:dir(rtl) {
  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
}
.asrouter-admin h1 {
  font-size: 2rem;
  font-weight: normal;
}
.asrouter-admin h2 button,
.asrouter-admin p button {
  font-size: 1rem;
  padding: 6px 12px;
  margin-inline-start: 8px;
  margin-block: 0;
}
.asrouter-admin h2 button.small,
.asrouter-admin p button.small {
  display: inline-flex;
  font-size: var(--font-size-small);
  padding: 4px 8px;
  margin-inline-start: 8px;
}
.asrouter-admin table {
  border-collapse: collapse;
}
.asrouter-admin table.errorReporting tr {
  border: 1px solid var(--border-color);
}
.asrouter-admin table.errorReporting td {
  padding: 4px;
}
.asrouter-admin table.errorReporting td[rowspan] {
  border: 1px solid var(--border-color);
}
.asrouter-admin table.bordered-table {
  min-width: 100%;
}
.asrouter-admin table.bordered-table tr:first-child td {
  border-top: 1px solid var(--border-color);
}
.asrouter-admin table.bordered-table td {
  vertical-align: top;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}
.asrouter-admin table.bordered-table td.no-wrap {
  white-space: nowrap;
}
.asrouter-admin table.bordered-table td.fixed-width {
  width: 0;
}
.asrouter-admin table.bordered-table td:first-child {
  border-inline-start: 1px solid var(--border-color);
}
.asrouter-admin table.bordered-table td:last-child {
  border-inline-end: 1px solid var(--border-color);
}
.asrouter-admin table input[type=checkbox], .asrouter-admin table input[type=radio] {
  margin: 0;
}
.asrouter-admin .sourceLabel:not(:empty) {
  background: var(--background-color-box);
  padding: 2px 5px;
  border-radius: 3px;
}
.asrouter-admin .sourceLabel:not(:empty).isDisabled {
  background: rgba(215, 0, 34, 0.3);
  color: var(--dialog-warning-text-color);
}
.asrouter-admin .messages-list {
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  margin-block: 12px;
}
.asrouter-admin .message-item {
  display: flex;
  flex-flow: column nowrap;
  gap: 4px;
}
.asrouter-admin .message-item.blocked .message-id,
.asrouter-admin .message-item.blocked .message-stats,
.asrouter-admin .message-item.blocked textarea {
  opacity: 0.5;
}
.asrouter-admin .message-item pre {
  display: flex;
}
.asrouter-admin .message-item pre.collapsed {
  display: none;
}
.asrouter-admin .message-item .message-textarea {
  direction: ltr;
  border-radius: 4px;
  width: auto;
  min-width: 400px;
  resize: vertical;
  flex-grow: 1;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
  margin: 4px 0;
}
.asrouter-admin .small-text {
  font-size: var(--font-size-small);
}
.asrouter-admin pre {
  margin: 0;
  font-size: var(--font-size-small);
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
}
.asrouter-admin .errorState {
  border-color: var(--dialog-warning-text-color);
  outline-color: var(--dialog-warning-text-color);
}
.asrouter-admin .helpLink {
  padding: 10px;
  display: flex;
  background: var(--background-color-box-info);
  border-radius: 3px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}
.asrouter-admin .helpLink ul {
  margin: 0;
  padding-inline-start: 1.25em;
}
.asrouter-admin .helpLink a {
  text-decoration: underline;
}
.asrouter-admin .helpLink .icon {
  min-width: 18px;
  min-height: 18px;
}
.asrouter-admin button.small {
  align-items: center;
  display: flex;
  font-size: var(--font-size-small);
  padding: 4px 8px;
  min-height: 0;
  margin-inline: 0;
}
.asrouter-admin .clearButton {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.asrouter-admin .filters {
  margin-block: 8px;
}
.asrouter-admin .filters h3 {
  margin-block: 8px;
}
.asrouter-admin .filters .row {
  display: flex;
  flex-flow: row nowrap;
  gap: 60px;
}
.asrouter-admin .filters .col {
  display: flex;
  flex-flow: column nowrap;
}
.asrouter-admin moz-toggle::part(label) {
  justify-content: revert;
}
.asrouter-admin .jexl-evaluator-row {
  vertical-align: top;
}
.asrouter-admin .jexl-evaluator {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
}
.asrouter-admin .jexl-evaluator .jexl-evaluator-textareas {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  align-items: flex-start;
}
.asrouter-admin .jexl-evaluator .jexl-evaluator-input {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  align-items: start;
}
.asrouter-admin .jexl-evaluator .jexl-evaluator-output {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  align-items: end;
}
.asrouter-admin textarea[readonly] {
  color: var(--text-color-deemphasized);
  border-color: var(--border-color);
}
.asrouter-admin .monospace {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
}
.asrouter-admin input[type=text].monospace {
  min-height: revert;
}
.asrouter-admin .no-margins,
.asrouter-admin h2 .no-margins,
.asrouter-admin p .no-margins {
  margin: 0;
}
.asrouter-admin .targeting-editor {
  resize: vertical;
}
.asrouter-admin .targeting-editor.small {
  white-space: nowrap;
}
.asrouter-admin .impressions-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 12px;
}
.asrouter-admin .impressions-section .impressions-item {
  display: flex;
  flex-flow: column nowrap;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
}
.asrouter-admin .impressions-section .impressions-item .impressions-inner-box {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
}
.asrouter-admin .impressions-section .impressions-item .impressions-category {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  flex-grow: 0.1;
}
.asrouter-admin .impressions-section .impressions-item .impressions-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asrouter-admin .impressions-section .impressions-item .impressions-buttons button {
  margin: 0;
}
.asrouter-admin .impressions-section .impressions-item .impressions-editor {
  display: flex;
  flex-grow: 1.5;
}
.asrouter-admin .impressions-section .impressions-item .impressions-editor textarea {
  direction: ltr;
  border-radius: 4px;
  width: auto;
  min-width: 400px;
  margin: 0;
  resize: vertical;
  flex-grow: 1;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
}
