electron-devtools-vendor/extensions/ember-inspector/panes-0-0-0/assets/ember-inspector.css

<div align="center"> <h2>electron-devtools-vendor</h2> <img alt="MIT" src="https://img.shields.io/github/license/BlackHole1/electron-devtools-vendor?color=9cf&style=flat-square"> <img alt="GitHub repo size" src="https://img.shields.io/github/r

/**
 APP
 ===
 The layout of the entire
 application.
*/
.app {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: auto;
  flex: auto;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  font-size: 12px; }

.app.is-dragging {
  cursor: col-resize; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: normal; }

html, body {
  height: 100%; }

body, input {
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333; }

body, div, nav {
  margin: 0;
  padding: 0; }

a {
  color: inherit; }

code {
  font-family: Menlo, Monaco, monospace; }

.ember-list-view {
  overflow: auto !important;
  overflow-y: scroll !important;
  position: relative; }

.ember-list-item-view {
  position: absolute; }

/**
 DRAG-HANDLE
 ===========
 The drag handle used for resizing elements
*/
.drag-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 500;
  cursor: col-resize; }

.drag-handle--right {
  margin-right: -3px; }

.drag-handle--left {
  margin-left: -3px; }

.drag-handle__border {
  height: 100%;
  margin-left: 3px;
  width: 1px;
  border-left: 1px solid #A3A3A3;
  pointer-events: none; }

/**
 DROP-DOWN
 =========
*/
.dropdown {
  position: relative;
  -webkit-flex: auto;
  flex: auto; }

.dropdown__select {
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 18px;
  padding: 0 15px 0 5px;
  font-size: 12px;
  color: #303030;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
  border: 0;
  background-color: transparent; }

.dropdown__select:focus {
  outline: none; }

.dropdown__arrow {
  position: absolute;
  right: 4px;
  top: 7px;
  background-image: url(images/arrow_down.svg);
  background-size: 100%;
  opacity: 0.7;
  width: 7px;
  height: 7px;
  display: inline-block;
  pointer-events: none; }

/**
  ERROR-PAGE
  ===========
  An error with possible reaons
  and solutions.
  For example when application
  is not detected.
*/
.data-error-page-container {
  position: relative;
  min-height: 100%;
  padding: 10px; }

.error-page {
  padding: 10px;
  background: #ededed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  color: #505050;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.error-page__content {
  position: relative;
  width: 530px;
  padding: 25px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffffff;
  border: solid 1px #d1d1d1;
  border-radius: 5px;
  margin: auto; }

.error-page__content a {
  color: #f23818;
  text-decoration: none; }

.error-page__header {
  font-weight: bold;
  font-size: 19px;
  padding-top: 15px;
  padding-bottom: 30px;
  margin-bottom: 10px;
  border-bottom: solid 1px #d1d1d1;
  position: relative; }

.error-page__header:after {
  content: ' ';
  width: 128px;
  height: 89px;
  background: url("images/fishy_tomster.png") left center no-repeat;
  position: absolute;
  right: 0px;
  bottom: 0px; }

.error-page__title {
  width: 345px; }

.error-page__reasons {
  font-size: 13px; }

.error-page__reasons-title {
  font-weight: bold; }

.error-page__reasons ul {
  list-style-type: disc; }

.error-page__list {
  padding-left: 16px;
  padding-bottom: 5px;
  border-bottom: solid 1px #d1d1d1; }

.error-page__list li {
  padding: 2px 0; }

.external-link {
  display: inline-block;
  position: relative; }
  .external-link::after {
    content: '';
    width: 9px;
    height: 9px;
    position: absolute;
    right: -12px;
    bottom: 10px;
    background-image: url("images/external_link.svg");
    background-size: 100%; }

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row; }

.cell {
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30px;
  height: 30px;
  opacity: 0.7;
  padding-left: 5px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.row:hover .cell {
  opacity: 1; }

/* ARROW FOR COLLAPSING AND EXPANDING */
.cell__arrow {
  cursor: pointer;
  display: block;
  float: left;
  width: 15px;
  height: 30px;
  position: relative; }

.cell__arrow:before {
  position: absolute;
  right: 5px;
  top: 0px;
  font-size: 75%;
  color: #737373; }

.row_arrow_collapsed .cell__arrow:before {
  content: "\25B6"; }

.row_arrow_expanded .cell__arrow:before {
  content: "\25BC"; }

.row_arrow_collapsed, .row_arrow_expanded {
  cursor: pointer;
  position: relative; }

/* -------------------------------- */
.row-wrapper {
  width: 100%;
  background: #f3f3f3; }

.row-wrapper:nth-of-type(2n) {
  background: #fff; }

.row.row_highlight .cell {
  opacity: 1; }

.cell.cell_size_small {
  flex: none;
  width: 50px; }

.cell.cell_size_medium {
  flex: none;
  width: 130px; }

.cell.cell_size_large {
  flex: none;
  width: 250px; }

.cell.cell_size_larger {
  flex: none;
  width: 350px; }

.cell.cell_size_huge {
  flex: none;
  width: 450px; }

.cell.cell_type_main {
  font-weight: bold; }

.cell.cell_value_numeric {
  min-width: 65px;
  text-align: right;
  padding-right: 10px; }

.cell.cell_type_header {
  color: inherit;
  padding: 0;
  padding-left: 5px;
  opacity: 1;
  font-weight: normal;
  border-left: 1px solid #cacaca; }

.cell.cell_type_header:first-of-type {
  border-left: none; }

.cell_clickable {
  cursor: pointer; }

.row:hover .cell_clickable {
  text-decoration: underline; }

.cell.spacer {
  border: none;
  width: 0px;
  flex: none; }

.list-tree_scrollable {
  overflow-y: scroll; }

.list-tree__right-helper {
  float: right;
  margin-right: 5px; }

.list-tree__limited {
  max-width: calc(100% - 40px);
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left; }

.list-tree__limited_helper_large {
  max-width: calc(100% - 70px); }

.list-tree__limited_helper_very-large {
  max-width: calc(100% - 80px); }

.list-view {
  position: relative;
  font-size: 11px;
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 700px;
  background: white; }

.list-view__header {
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-bottom: 1px solid #cacaca; }

.list-view.list-view_compact {
  min-width: 0; }

.no-results {
  padding: 5px 10px; }

/**
 MIXIN
 =====
 A single mixin inside the object inspector
 It could be the object's own properties
 or a mixin the object extends
*/
.mixin__name {
  margin-top: -1px;
  padding: 2px 2px 2px 5px;
  border-top: 1px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
  background-color: #f0f0f0;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mixin__name:active {
  background-color: #ccc;
  border-top: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2; }

.mixin_props_no .mixin__name:before {
  opacity: 0; }

.mixin.ember-mixin .mixin__name {
  color: #888; }

.mixin__name:before {
  content: "\25B6";
  color: #737373;
  margin-right: 4px;
  position: relative;
  top: -1px;
  font-size: 75%; }

.mixin_state_expanded .mixin__name {
  border-bottom: 1px solid #bdbdbd; }

.mixin_state_expanded .mixin__name:before {
  content: "\25BC"; }

.mixin.ember-mixin .mixin__name:before {
  color: #aaa; }

.mixin__name_errors {
  background-color: #fff; }
  .mixin__name_errors:active {
    background-color: #fff; }

.mixin__properties {
  margin: 5px;
  list-style-type: none;
  padding: 0;
  font-size: 12px;
  font-family: Menlo, Monaco, monospace; }

.mixin__property {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center; }

.mixin__error {
  margin-right: 3px;
  padding: 0px 20px;
  color: red; }

.mixin__property button {
  border: none;
  background: none;
  margin: 0;
  padding: 0; }

.mixin__property button img, .mixin__property span.pad {
  margin-right: 3px;
  width: 20px; }

.mixin__property-overridden-by {
  display: none; }

.mixin__property-name {
  color: #909; }

.mixin__property-value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 14px; }

.mixin__property-value-txt {
  flex: 1;
  border: solid 1px #ccc;
  /*border: none;*/
  box-shadow: 2px 2px 2px #888;
  /*box-shadow: none;*/
  outline: none; }

.mixin__calc-btn_calculated {
  opacity: 0.4; }

.mixin__send-btn {
  width: 20px;
  opacity: 0; }

.mixin__property-value-separator {
  margin-right: 5px; }

.mixin__property .type-function {
  color: #999; }

.mixin__property .type-object {
  color: #999; }

.mixin__property .type-ember-object,
.mixin__property .type-array {
  cursor: pointer; }

.mixin__property-calculated-value {
  flex: 1;
  color: #999; }

.mixin__property .type-null, .mixin__property .type-boolean {
  color: #009; }

.mixin__property .type-descriptor {
  cursor: pointer;
  color: #900; }

.mixin__property_state_overridden {
  text-decoration: line-through; }

.mixin__property:not(.mixin__property_state_overridden):hover {
  background-color: #ffe; }

.mixin__property_state_overridden:hover .mixin__property-overridden-by {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.95);
  right: 0;
  display: inline;
  text-decoration: none; }

.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
  opacity: 1; }

.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn:active {
  opacity: 0.5; }

/**
 Nav
 ===
 Navigation lists and links
*/
.nav__title {
  padding: 3px 5px;
  line-height: 11px;
  height: 15px; }

.nav__title h3 {
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #6e6e6e;
  text-transform: uppercase;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
  float: left;
  padding: 0;
  margin: 0; }

/* List */
.nav ul {
  clear: both;
  list-style-type: none;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.nav li {
  display: block;
  margin-top: 2px; }

.nav li svg {
  position: absolute;
  top: 50%;
  left: 14px;
  margin-top: -10px; }

/* List anchor */
.nav li > a {
  display: block;
  height: 18px;
  line-height: 15px;
  margin-top: 1px;
  padding: 2px 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: none;
  cursor: default; }

.app.is-dragging .nav li > a {
  cursor: col-resize; }

.nav li > a polygon,
.nav li > a path,
.nav li > a rect,
.nav li > a circle {
  fill: #222; }

.nav li > a:focus {
  outline: none; }

.nav li > a.active {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.33);
  background: #3879D9; }

.nav li > a.active polygon,
.nav li > a.active path,
.nav li > a.active rect,
.nav li > a.active circle {
  fill: #fff; }

.app.inactive .nav li > a.active {
  background: #b4b4b4; }

/* Custom navs */
.nav--main li > a {
  position: relative;
  height: 33px;
  padding-left: 40px;
  color: #333;
  line-height: 33px; }

.nav.nav--main .nav__title {
  padding-left: 15px; }

/* Custom nav title */
.nav__title--middle {
  line-height: 21px; }

/**
  NOTICE
  ===========
*/
.notice {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; }

/**
 OBJECT-INSPECTOR
 ================
 The Object inspector
 at the far right of the screen
*/
.object-trail {
  margin-left: 39px;
  word-break: break-all; }

/**
 PILL
 ====
*/
.pill {
  font-size: 12;
  position: relative;
  cursor: default;
  display: inline-block;
  margin: 0 2px;
  padding: 2px 6px;
  line-height: 12px;
  background: transparent;
  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
  border-radius: 8px;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.3); }

.pill_text_clear {
  text-shadow: none;
  font-weight: bold; }

.pill_not-clickable {
  cursor: inherit; }

/** MODIFIER: SIZE = SMALL **/
.pill_size_small {
  font-size: 10px;
  padding: 2px 4px; }

/**
 SEND-TO-CONSOLE
 ================
 Button to send an object
 to the console
*/
.send-to-console {
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  width: 23px;
  opacity: 1;
  cursor: pointer;
  outline: none; }

.send-to-console img {
  margin-right: 3px;
  width: 20px;
  vertical-align: top; }

.send-to-console:hover {
  border-bottom: solid 1px #2b7fb3; }

.send-to-console:active {
  opacity: 0.5; }

.send-trace-to-console {
  background: url("images/send_arrow.png") left center no-repeat;
  background-size: 6px 6px;
  padding-left: 9px;
  font-size: 9px;
  cursor: pointer;
  margin-right: 10px;
  -webkit-user-select: none;
  user-select: none; }

.send-trace-to-console:hover {
  color: black; }

.send-trace-to-console:active {
  opacity: 0.5; }

/**
 SIDEBAR TOGGLE
 ==============
 Button that expands or collapses sidebars
*/
.sidebar-toggle {
  position: absolute;
  top: 2px; }

.sidebar-toggle--right {
  right: -6px; }

.sidebar-toggle--left {
  left: -5px; }

.sidebar-toggle--far-left {
  left: -30px; }

/**
 SPLIT
 =====
 Vertically split panels
*/
/* .split: The container for one or more panels */
.split {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: auto;
  flex: auto;
  -webkit-flex-direction: row;
  flex-direction: row;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/* .split__panel: Contains a body, and optional header and footer elements */
.split__panel {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: auto;
  flex: auto;
  position: relative; }

.split__panel__hd,
.split__panel__bd,
.split__panel__ft {
  position: relative; }

.split__panel__hd,
.split__panel__ft {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: none;
  flex: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1px 2px;
  min-height: 23px;
  line-height: 20px;
  border-color: #cacaca; }

.split__panel__hd {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background: #fff; }

.split__panel__bd {
  -webkit-flex: auto;
  flex: auto;
  overflow: auto; }

.split__panel__ft {
  border-top-width: 1px;
  border-top-style: solid;
  background: #e8e8e8; }

/* Fix visibility issue with phantomjs test runner
   https://github.com/emberjs/ember-inspector/pull/206#issuecomment-55292354 */
.split__panel,
.split__panel__bd {
  z-index: 1;
  /* Fixes bug where empty list-view appears over the top */
  height: 100%; }

/* Custom panels */
.split__panel--sidebar-1 .split__panel__bd {
  background: #e8e8e8; }

.split__panel--sidebar-1 > .split__panel__ft {
  text-align: center; }

.split__panel--sidebar-2 .split__panel__bd {
  background: #f3f3f3; }

/* Fix main list-view scrolling */
.split--main > .split__panel > .split__panel__bd {
  overflow-y: hidden; }

.split--main > .split__panel--sidebar-1 > .split__panel__bd {
  overflow-y: auto; }

/**
 TABLE-TREE
 ==========
 Displays a tree in a table.
 Used for route tree.
*/
.table-tree {
  position: relative;
  padding-top: 30px;
  font-size: 11px;
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  min-width: 100%; }

.table-tree:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #a3a3a3;
  background: linear-gradient(to bottom, #ebebeb, #dadada);
  border-right: 1px solid #b3b3b3;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  content: ' '; }

.table-tree__table-container {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  float: left;
  min-width: 100%; }

.table-tree table {
  min-width: 100%; }

.table-tree thead {
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.table-tree td {
  border-right: 1px solid #dadada;
  white-space: nowrap;
  padding: 8px 0px 8px 5px; }

.table-tree th {
  font-weight: normal;
  padding: 0;
  min-width: 30px; }

.table-tree__cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.table-tree__th-inner {
  position: absolute;
  top: 0;
  width: 100%;
  line-height: 30px;
  border-left: 1px solid #b3b3b3;
  padding-left: 5px;
  margin-left: -1px;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.table-tree th:first-of-type .table-tree__th-inner {
  border-left: none; }

.table-tree tr:nth-of-type(2n) td {
  background: #f3f3f3; }

.table-tree td.table-tree__main-cell {
  font-weight: bold; }

.table-tree td.table-tree__main-cell_state_current {
  opacity: 1; }

.table-tree tbody tr:hover td {
  opacity: 1; }

.table-tree tbody tr:hover .table-tree__clickable {
  cursor: pointer;
  text-decoration: underline; }

.table-tree_color_faded .table-tree__main-cell,
.table-tree_color_faded td {
  opacity: 0.7; }

/* MODIFIER: state = collapsed */
.table-tree_state_collapsed {
  float: none;
  overflow: hidden; }

.table-tree_state_collapsed .table-tree__table-container {
  float: none; }

.table-tree.table-tree_state_collapsed tr td {
  color: #666;
  background: #fff; }

.table-tree.table-tree_state_collapsed .table-tree__row_selected td {
  color: #333;
  font-weight: bold;
  background: #e0e0e0; }

/* MODIFIER: type = advanced */
.table-tree_type_advanced {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column; }

.table-tree_type_advanced .table-tree__table-container {
  height: auto;
  -webkit-flex: 1;
  flex: 1; }

/* Firefox Tweaks */
.table-tree__table-container {
  flex: 1; }

.table-tree__filter {
  flex: 0 1 24px; }

.table-tree__right-helper {
  float: right;
  margin-right: 5px; }

.table-tree__numeric {
  min-width: 65px;
  text-align: right;
  padding-right: 10px; }

.table-tree__limited {
  max-width: 150px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap; }

.toolbar {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  align-items: center; }

.toolbar > * {
  -webkit-flex: none;
  flex: none; }

/**
 Toolbar Title
 =============
*/
.toolbar__title {
  -webkit-flex: auto;
  flex: auto;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/**
 Toolbar Icon Buttons
 ====================
*/
.toolbar__icon-button {
  display: inline-block;
  width: 32px;
  height: 20px;
  margin-left: 0;
  padding: 0;
  vertical-align: top;
  border: 0 transparent none;
  background-color: transparent;
  background: white; }

.toolbar__icon-button:first-child {
  margin-left: -2px; }

.toolbar__icon-button:focus {
  outline: none; }

.toolbar__icon-button .svg-stroke {
  stroke: #676767; }

.toolbar__icon-button .svg-fill {
  fill: #676767; }

.toolbar__icon-button:hover .svg-stroke {
  stroke: #404040; }

.toolbar__icon-button:hover .svg-fill {
  fill: #404040; }

.toolbar__icon-button:active {
  transform: translate(1px, 1px); }

/* active (highlighted) */
.toolbar__icon-button.active .svg-stroke {
  stroke: #4281eb; }

.toolbar__icon-button.active .svg-fill {
  fill: #4281eb; }

/* disabled */
.toolbar__icon-button.disabled {
  pointer-events: none; }

.toolbar__icon-button.disabled:active {
  transform: none; }

.toolbar__icon-button.disabled .svg-stroke {
  stroke: #cacaca; }

.toolbar__icon-button.disabled .svg-fill {
  fill: #cacaca; }

/**
 Toolbar Checkboxes
 ==================
*/
.toolbar__checkbox {
  margin: auto 6px auto 0;
  height: auto;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden; }

/**
 Toolbar Radio Button Pills
 ==========================
*/
.toolbar__radio {
  font-size: 12px;
  line-height: 18px;
  position: relative;
  cursor: default;
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px;
  line-height: 12px;
  background: transparent;
  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
  border: none;
  border-radius: 8px;
  vertical-align: middle; }

.toolbar__radio:active,
.toolbar__radio:hover,
.toolbar__radio:focus,
.toolbar__radio.active {
  outline: none;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0; }

.toolbar__radio:hover {
  background: rgba(0, 0, 0, 0.2); }

.toolbar__radio:active {
  background: rgba(0, 0, 0, 0.5); }

.toolbar__radio.active {
  background: rgba(0, 0, 0, 0.3); }

/**
 Toolbar Search
 ==============
*/
.toolbar__search {
  margin-right: 6px; }

.toolbar__search input {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #b3b3b3;
  border-radius: 2px;
  margin: auto 0;
  padding: 0 3px;
  margin: 0;
  -webkit-appearance: none;
  font-size: 12px;
  background-color: #FFF;
  height: 20px;
  line-height: normal;
  width: 179px; }

.toolbar__search input:focus {
  outline: none; }

.toolbar__search--small input {
  width: 150px; }

/**
 Toolbar Divider
 ===============
*/
.toolbar .divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  position: relative;
  margin-right: 6px;
  background-color: #cacaca; }

/**
 TREE
 ====
 Displays a tree.
 Used for view tree.
*/
.tree {
  font-family: Menlo, sans-serif;
  font-size: 14px; }

.tree__node {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 10px; }

.tree__node-child {
  margin-top: 5px; }

.tree__node-header {
  margin: 0;
  padding: 0; }

.tree__node-name {
  color: #939;
  cursor: pointer; }

.tree__node-controller {
  color: #939;
  cursor: pointer; }

.tree__node-controller.is-pinned,
.tree__node-controller:hover,
.tree__node-name:hover {
  color: #606; }

.tree__node-template, .tree__node-hint {
  color: #595455;
  display: none; }

.tree__node-header:hover .tree__node-hint {
  display: inline; }

.tree__node-details {
  font-size: 13px;
  color: #999; }

.tree__node-details td {
  padding: 0px 5px;
  color: #666; }

.tree__node-details .clickable {
  /*color: #4896ab;*/
  color: #999900;
  cursor: pointer; }