.inspection-pane {
  padding:   1em;
  min-width: 600px;
}

.inspection-button-tray {
  display:     flex;
  align-items: center;
  gap:         1em;
}

.inspection-button {
  cursor:           pointer;
  user-select:      none;
  border-radius:    5px;
  background-color: inherit;
  display:          flex;
  align-items:      center;
}

button.inspection-button {
  border:  none;
  padding: 0;
  font:    inherit;
  color:   inherit;
}

.inspection-dropdown-caret {
  margin-left: 0.2em;
}

.inspection-button img,
.inspection-dropdown-caret {
  opacity:    0.7;
  transition: opacity 0.1s ease;
}

.inspection-button:hover img,
.inspection-button:hover .inspection-dropdown-caret {
  opacity: 1;
}

.inspection-button.selected {
  background-color: lightblue;
}

.inspection-cmd-container {
  margin:         0;
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            1em;
}

.inspection-agent-monitor-container {
  padding:       1em 0 0 0;
  border-radius: 5px;
  min-height:    2em;
}

.inspection-agent-monitor-container-inner {
  display:               grid;
  /* NOTE:  To keep PIXEL-PERFECT placement of the agent monitors, you'll need to make sure the number used here
    is the sum of the width, borders, and padding of each agent monitor */
  grid-template-columns: repeat(auto-fill, 226px);
  justify-content:       space-between;
  row-gap:               1em;
}

.inspection-agent-monitor-container-inner > span {
  grid-column: 1 / -1;
  font-size:   15px;
  padding:     0 1em;
}

/* If you tweak sizes here, make sure to update the inner container's `grid-template-columns` as well */
.inspection-agent-monitor {
  border:           2px solid var(--color-tab-border);
  border-radius:    5px;
  width:            210px;
  padding:          0.5em;
  background-color: #eeeeee;
  display:          flex;
  flex-direction:   column;
  gap:              0.5em;
}

.inspection-agent-monitor-title-bar {
  display:         grid;
  grid:            auto / auto auto;
  justify-content: space-between;
  align-items:     start;
}

.inspection-agent-monitor-title-bar .title {
  font-weight: 700;
}

.inspection-agent-monitor-view-controls {
  display:     grid;
  grid:        auto / auto auto;
  align-items: center;
}

.inspection-agent-monitor-view-controls > input {
  min-width: 0;
}

.inspection-agent-monitor-watch-button {
  width:      min-content;
  padding:    0.5em;
  border:     1px solid gray;
  background: white;
}

.inspection-agent-monitor-property-grid {
  display:     grid;
  grid:        auto-flow / 2fr 3fr;
  gap:         0.2em 0.5em;
  align-items: center;
}

.inspection-agent-monitor-property-grid .inspection-agent-var-name {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.inspection-agent-monitor-property-grid > .inspection-input-container {
  min-width: 0;
}

.inspection-input-container {
  background-color: white;
  border:           1px solid var(--color-tab-border);
  border-radius:    4px;
  overflow:         hidden;
}

.inspection-input-container .netlogo-code {
  border: none;
}

.inspection-cmd-container .netlogo-command-center-editor {
  margin: 0;
}

.inspection-cmd-container .netlogo-code {
  border:        2px solid var(--color-tab-border);
  border-radius: 6px;
  overflow:      hidden;
}

.inspection-cmd-container .netlogo-command-center-editor .CodeMirror {
  border: none;
}

.inspection-cmd-container .CodeMirror .CodeMirror-placeholder {
  color: #aaa;
}

.inspection-close-button {
  position: relative;
}

.inspection-close-dropdown-overlay {
  position: fixed;
  inset:    0;
  z-index:  99;
}

.inspection-close-dropdown {
  position:       absolute;
  top:            100%;
  right:          0;
  background:     white;
  border:         1px solid lightgray;
  border-radius:  5px;
  z-index:        100;
  white-space:    nowrap;
  box-shadow:     0 2px 4px rgba(0, 0, 0, 0.2);
  display:        flex;
  flex-direction: column;
}

button.inspection-close-dropdown-item {
  border:        none;
  font:          inherit;
  color:         inherit;
  padding:       0.4em 0.8em;
  text-align:    left;
  cursor:        pointer;
  border-radius: 5px;
}

button.inspection-close-dropdown-item:hover {
  background-color: rgba(211, 211, 211, 0.5);
}

.inspection-agent-type-select {
  min-width:   70px;
  font-family: 'Open Sans', sans-serif;
  font-size:   12px;
}