#pages {
  width: 100%;

  th {
    white-space: nowrap;
  }

  td:nth-child(2) {
    white-space: nowrap;
  }

  td:nth-child(3), td:nth-child(4) {
    text-align: center;
  }

  tbody tr:nth-child(even) {
    background-color: #f5f5f5;
  }

  th.page_name {
    width: 100%;
  }

  td.page_name {
    width: 100%;

    .page_name_content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 0;
      min-width: 100%;
    }
  }
}

.families{
	margin: 0 0 0 50px;
}

.auto_select{
display: inline;

}


/* The list is rendered by app/javascript/application.js (page_name
   autocomplete). Everything above `background-color` is the original jQuery UI
   styling; the four properties after it are what the widget itself used to
   supply and now has to come from here: the list is appended to <body>, so it
   needs to paint above the form, and 100 rows have to scroll rather than run
   off the page. */
ul.ui-autocomplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  background-color: #FFF;
  z-index: 1000;
  max-height: 20em;
  overflow-y: auto;
  li {
    background-color: #FFF;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 0;
    a {
      color: #000;
      display: block;
      padding: 3px;
      text-align: left;
      text-decoration: none;
    }
    a.ui-state-hover, a.ui-state-active {
      background-color: #FFFCB2;
    }
  }
}

.button_to {
  display: inline;
}

.button_to div {
  display: inline;
}

#spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}