/**
 * Standard styling for configuration forms and widgets.
 *
 * This contains some formal structure and styles for configuration forms
 * and multi-sub-page layout, useful for account settings and administrative
 * pages.
 *
 * .. note::
 *
 *    Many of the styles here are old and cobbled together from some of our
 *    other codebases. We're working to deprecate anything not in the
 *    ``djblets-*`` namespace, and may even alter and remove some styles within
 *    those.
 *
 *    Also worth noting that, due to a LessCSS bug, we can't use our standard
 *    component pattern of defining sub-element styles using ``&__subelement``.
 *    It doesn't work with the ``&:extend()`` pattern we're using for
 *    backwards-compatibility.
 */
/****************************************************************************
 * Base styling for config forms
 ****************************************************************************/
/**
 * A full-page configuration UI with navigation panels and subpages.
 *
 * Modifiers:
 *     -has-sidebar:
 *         Whether there's a ``.djblets-c-config-forms-side-nav`` sidebar
 *         on the page.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-page -has-sidebar">
 *      <div class="djblets-c-config-forms-side-nav">
 *       ...
 *      </div>
 *      <div class="djblets-c-config-forms-page__content">
 *       <div class="djblets-c-config-forms-subpage">
 *        ...
 *       </div>
 *       ...
 *      </div>
 *     </div>
 */
.djblets-c-config-forms-page,
.config-forms-container {
  font-size: 9pt;
  margin: 0 auto;
}
.djblets-c-config-forms-page.-has-sidebar .djblets-c-config-forms-page__content,
.config-forms-container.-has-sidebar .djblets-c-config-forms-page__content,
.config-forms-container.config-forms-has-sidebar .config-forms-page-content,
.djblets-c-config-forms-page.-has-sidebar .config-forms-page-content {
  float: left;
  margin-left: 2em;
}
.djblets-c-config-forms-page a,
.config-forms-container a {
  color: blue;
  text-decoration: none;
}
.djblets-c-config-forms-page a.btn,
.config-forms-container a.btn {
  color: black;
}
.djblets-c-config-forms-page .box,
.config-forms-container .box {
  background: #F3F3F3;
  margin: 0 0 2em 0;
}
.djblets-c-config-forms-page .box-container,
.config-forms-container .box-container {
  margin: 0;
  width: auto;
}
.djblets-c-config-forms-page .box-inner,
.config-forms-container .box-inner {
  background: transparent;
}
.djblets-c-config-forms-page .box-main,
.config-forms-container .box-main {
  padding: 0;
}
/**
 * The content area of a full-page configuration UI.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-page__content">
 *      <div class="djblets-c-config-forms-subpage">
 *       ...
 *      </div>
 *      ...
 *     </div>
 */
.djblets-c-config-forms-page__content,
.config-forms-page-content {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 60em;
}
.djblets-c-config-forms-page__content fieldset,
.config-forms-page-content fieldset {
  border: 0;
  margin: 2em 0;
  padding: 0;
}
.djblets-c-config-forms-page__content fieldset h2,
.config-forms-page-content fieldset h2 {
  font-size: 120%;
  margin-top: 0;
}
.djblets-c-config-forms-page__content form,
.config-forms-page-content form {
  margin: 0 auto;
}
.djblets-c-config-forms-page__content input[type=email],
.djblets-c-config-forms-page__content input[type=number],
.djblets-c-config-forms-page__content input[type=password],
.djblets-c-config-forms-page__content input[type=search],
.djblets-c-config-forms-page__content input[type=text],
.djblets-c-config-forms-page__content input[type=url],
.config-forms-page-content input[type=email],
.config-forms-page-content input[type=number],
.config-forms-page-content input[type=password],
.config-forms-page-content input[type=search],
.config-forms-page-content input[type=text],
.config-forms-page-content input[type=url] {
  border: 1px #AAA solid;
  border-radius: 4px;
  box-sizing: border-box;
  width: 30em;
  max-width: 30em;
  font-size: inherit;
  padding: 4px 8px;
}
.djblets-c-config-forms-page__content label,
.config-forms-page-content label {
  display: block;
  margin: 0.25em 0;
}
.djblets-c-config-forms-page__content legend,
.config-forms-page-content legend,
.config-forms-subsection h3 {
  border-bottom: 1px #D0D0D0 solid;
  font-size: 100%;
  font-weight: bold;
  padding: 0 0 0 0.4em;
  margin-bottom: 1em;
}
.djblets-c-config-forms-page__content p,
.config-forms-page-content p {
  font-size: inherit;
  line-height: 1.5;
  margin: 1em 0;
}
.djblets-c-config-forms-page__content select,
.config-forms-page-content select {
  font-size: inherit;
}
.djblets-c-config-forms-page__content #messages,
.config-forms-page-content #messages {
  margin: 0 0 1em 0;
  padding: 0;
}
.djblets-c-config-forms-page__content #messages li,
.config-forms-page-content #messages li {
  background: #FFC url("../images/config-forms/icon_success.08e6b9d922e1.gif") 5px 0.3em no-repeat;
  border: 1px solid #cccc00;
  color: #666;
  display: block;
  font-size: 12px;
  margin: 0 0 3px 0;
  padding: 4px 5px 4px 25px;
}
.djblets-c-config-forms-page__content #messages li.error,
.config-forms-page-content #messages li.error {
  background-image: url("../images/config-forms/icon_error.d0272cd88394.gif");
}
.djblets-c-config-forms-page__content #messages li.warning,
.config-forms-page-content #messages li.warning {
  background-image: url("../images/config-forms/icon_alert.572a03fff47e.gif");
}
.djblets-c-config-forms-page__content .box-main p:first-child,
.config-forms-page-content .box-main p:first-child {
  margin-top: 0;
}
.djblets-c-config-forms-page__content .box-main p:last-child,
.config-forms-page-content .box-main p:last-child {
  margin-bottom: 0;
}
.djblets-c-config-forms-page__content .box-main .description,
.config-forms-page-content .box-main .description {
  margin: 0 0 1em 0;
}
.djblets-c-config-forms-page__content .btn,
.config-forms-page-content .btn {
  padding: 5px 14px 6px;
}
.djblets-c-config-forms-page__content .buttons input[type=reset],
.djblets-c-config-forms-page__content .buttons input[type=submit],
.config-forms-page-content .buttons input[type=reset],
.config-forms-page-content .buttons input[type=submit] {
  text-align: center;
  margin: 0 auto;
}
.djblets-c-config-forms-page__content .checkbox-row .field,
.config-forms-page-content .checkbox-row .field {
  width: 100%;
}
.djblets-c-config-forms-page__content .checkbox-row .field input,
.djblets-c-config-forms-page__content .checkbox-row .field label,
.config-forms-page-content .checkbox-row .field input,
.config-forms-page-content .checkbox-row .field label {
  display: inline;
  width: auto;
}
.djblets-c-config-forms-page__content .checkbox-row .field label,
.config-forms-page-content .checkbox-row .field label {
  color: inherit;
  text-align: left;
  margin-left: 0;
  vertical-align: middle;
}
.djblets-c-config-forms-page__content .checkbox-row .field li,
.config-forms-page-content .checkbox-row .field li {
  margin: 0.5em 0;
}
.djblets-c-config-forms-page__content .checkbox-row .field ul,
.config-forms-page-content .checkbox-row .field ul {
  list-style: none;
  margin: 0 0 0 1em;
  padding: 0;
  overflow: hidden;
}
.djblets-c-config-forms-page__content .checkbox-row .field .help,
.config-forms-page-content .checkbox-row .field .help {
  margin-left: 2em;
}
.djblets-c-config-forms-page__content .errorlist,
.config-forms-page-content .errorlist {
  clear: both;
  display: block;
  padding: 0;
  margin: 0.5em;
  list-style: none;
}
.djblets-c-config-forms-page__content .errorlist li,
.config-forms-page-content .errorlist li {
  display: list-item;
  color: darkred;
}
.djblets-c-config-forms-page__content .fields-row,
.config-forms-page-content .fields-row {
  margin: 0 0 1em 0;
  position: relative;
}
.djblets-c-config-forms-page__content .fields-row:after,
.config-forms-page-content .fields-row:after {
  clear: both;
  display: table;
  content: "";
  line-height: 0;
}
.djblets-c-config-forms-page__content .fields-row:last-child,
.config-forms-page-content .fields-row:last-child {
  margin-bottom: 0;
}
.djblets-c-config-forms-page__content .field,
.config-forms-page-content .field {
  display: block;
  float: left;
  margin-right: 1em;
}
.djblets-c-config-forms-page__content .field:last-child,
.config-forms-page-content .field:last-child {
  margin-right: 0;
}
.djblets-c-config-forms-page__content .field input,
.config-forms-page-content .field input {
  width: 21em;
}
.djblets-c-config-forms-page__content .field input[type=checkbox],
.djblets-c-config-forms-page__content .field input[type=radio],
.config-forms-page-content .field input[type=checkbox],
.config-forms-page-content .field input[type=radio] {
  width: auto;
}
.djblets-c-config-forms-page__content .field p.help,
.config-forms-page-content .field p.help {
  color: #666666;
  font-size: 90%;
  margin: 1em 0;
}
.djblets-c-config-forms-page__content .field .hint,
.config-forms-page-content .field .hint {
  display: block;
  margin: 0.5em 0 0 0.5em;
  font-size: 90%;
}
/**
 * A navigation sidebar for full-page configuration UIs.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-page-nav">
 *      <ul class="djblets-c-config-forms-page-nav__list">
 *       <li class="djblets-c-config-forms-page-nav__item -is-active">...</li>
 *       <li class="djblets-c-config-forms-page-nav__item">...</li>
 *       ...
 *      </ul>
 *     </div>
 */
.djblets-c-config-forms-page-nav,
.config-forms-side-nav {
  float: left;
  width: 17em;
}
.djblets-c-config-forms-page-nav .box-main {
  padding: 0;
}
/**
 * A clickable item in the navigation sidebar.
 *
 * Modifiers:
 *     -is-active:
 *         Whether this is the currently-active item, corresponding to the
 *         current page.
 *
 * Structure:
 *     <li class="djblets-c-config-forms-page-nav__item -is-active">
 *      <a href="#page-id">label</a>
 *     </li>
 */
.djblets-c-config-forms-page-nav__item,
.config-forms-side-nav li {
  border-bottom: 1px #D9D9D9 solid;
}
.djblets-c-config-forms-page-nav__item:last-child,
.config-forms-side-nav li:last-child {
  border-bottom: 0;
}
.djblets-c-config-forms-page-nav__item:last-child.-is-active,
.djblets-c-config-forms-page-nav__item:last-child:hover,
.config-forms-side-nav li:last-child.-is-active,
.config-forms-side-nav li:last-child:hover,
.config-forms-side-nav li:last-child.active {
  border-radius: 0 0 6px 6px;
}
.djblets-c-config-forms-page-nav__item:hover,
.config-forms-side-nav li:hover {
  background-color: #e6e6e6;
}
.djblets-c-config-forms-page-nav__item.-is-active,
.djblets-c-config-forms-page-nav__item.-is-active:hover,
.config-forms-side-nav li.-is-active,
.config-forms-side-nav li.-is-active:hover,
.config-forms-side-nav li.active,
.config-forms-side-nav li.active:hover {
  background: #FEFEFE;
}
.djblets-c-config-forms-page-nav__item.-is-active a,
.config-forms-side-nav li.-is-active a,
.config-forms-side-nav li.active a {
  cursor: default;
}
.djblets-c-config-forms-page-nav__item a,
.config-forms-side-nav li a {
  color: inherit;
  display: block;
  font-weight: normal;
  outline: none;
  padding: 0.5em 1em;
  text-decoration: none;
}
/**
 * A list of items in the navigation sidebar.
 *
 * Structure:
 *      <ul class="djblets-c-config-forms-page-nav__list">
 *       <li class="djblets-c-config-forms-page-nav__item -is-active">...</li>
 *       <li class="djblets-c-config-forms-page-nav__item">...</li>
 *       ...
 *      </ul>
 */
.djblets-c-config-forms-page-nav__list,
.config-forms-side-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/**
 * A subpage in a full-page configuration UI.
 *
 * This can contain any kind of content, but will usually contain forms.
 *
 * Modifiers:
 *     -is-active:
 *         This is the actively-shown subpage.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-subpage -is-active">
 *      ...
 *     </div>
 */
.djblets-c-config-forms-subpage,
.config-forms-page-content .page {
  display: none;
}
.djblets-c-config-forms-subpage.-is-active,
.config-forms-page-content .page.active {
  display: block;
}
/* Set the default widths for the page. */
.config-forms-container,
.djblets-c-config-forms-page,
.config-forms-container {
  width: 81em;
}
.config-forms-page-content,
.djblets-c-config-forms-page__content,
.config-forms-page-content {
  width: 60em;
}
/****************************************************************************
 * Lists and tables of actionable items
 ****************************************************************************/
/**
 * A single-column or multi-column list of items.
 *
 * The items may have actions associated with it, which can include buttons
 * and dropdown menus.
 *
 * Modifiers:
 *     -all-items-are-multiline:
 *         All list items should be styled to support multi-line content.
 *         This will cause actions and state columns to be vertically-aligned
 *         to the top of the row. This is short-hand for adding
 *         ``-is-multiline` to all list items.
 *
 *     -all-items-have-actions:
 *         All list items have actions shown on the right-hand side. This
 *         is short-hand for adding ``-has-actions`` to all list items.
 *
 *     -all-items-have-icons:
 *         All list items have icons shown on the left-hand side. This
 *         is short-hand for adding ``-has-icons`` to all list items.
 *
 * Structure:
 *     <ul class="djblets-c-config-forms-list">
 *      <li class="djblets-c-config-forms-list__item">...</li>
 *      ...
 *     </ul>
 */
.djblets-c-config-forms-list,
.config-forms-list {
  background: #FFFFFF;
  border-bottom: 1px #AAAAAA solid;
  border-top: 1px #AAAAAA solid;
  margin-bottom: 0;
  padding: 0;
}
.djblets-c-config-forms-list > :last-child,
.config-forms-list > :last-child {
  border-bottom: none;
}
.djblets-c-config-forms-list:empty,
.config-forms-list:empty {
  border: none;
}
/**
 * The table variation on a list of items.
 *
 * This sets some basic styling to allow the table to display correctly.
 *
 * Structure:
 *     <table class="djblets-c-config-forms-list">
 *      <thead>
 *       <tr>
 *        <th class="djblets-c-config-forms-list__column">...</th>
 *        ...
 *       </tr>
 *      </thead>
 *      <tbody>
 *       <tr class="djblets-c-config-forms-list__item">...</tr>
 *       ...
 *      </tbody>
 *     </table>
 */
table.djblets-c-config-forms-list,
table.config-forms-list {
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 0;
  border-bottom: 0;
  width: 100%;
}
table.djblets-c-config-forms-list > tbody > tr:last-child td,
table.djblets-c-config-forms-list > tbody > tr:last-child th,
table.config-forms-list > tbody > tr:last-child td,
table.config-forms-list > tbody > tr:last-child th {
  border-bottom: 0;
}
/**
 * A column in a multi-column list of items.
 *
 * Structure:
 *     <th class="djblets-c-config-forms-list__column">...</th>
 */
.djblets-c-config-forms-list__column,
table.config-forms-list thead th {
  background: #F0F0F3;
  border-bottom: 1px #AAAAAA solid;
  border-right: 1px #CCCCCC solid;
  text-align: left;
  padding: 0.5em 1em;
}
.djblets-c-config-forms-list__column:last-child,
table.config-forms-list thead th:last-child {
  border-right: 0;
}
/**
 * An item in a single or multi-column list.
 *
 * Items may be single-column (found in ``ul.djblets-c-config-forms-list``
 * elements) or multi-column (found in ``table.djblets-c-config-forms-list``
 * elements). They may have an icon docked on the left, and actions docked
 * on the right.
 *
 * By default, items support two modifiers that add a visual indicator as to
 * the item's state, showing a colored border on the left-hand side of the
 * item. These are ``-is-enabled`` and ``-is-disabled``. Additional state
 * modifiers can be defined through
 * ``#djblets-ns-config-forms.list.add-item-state()`.
 *
 * Modifiers:
 *     -has-actions:
 *         The list item has actions shown on the right-hand side. This is
 *         not needed if the parent list has the ``-all-items-have-actions``
 *         modifier.
 *
 *     -has-error:
 *         The list item has an error state. This will show a thick red
 *         border on the left.
 *
 *     -has-icon:
 *         The list item has an icon shown on the left-hand side. This is
 *         not needed if the parent list has the ``-all-items-have-icons``
 *         modifier.
 *
 *     -is-multiline:
 *         The list item should be styled to support multi-line content.
 *         This will cause actions and state columns to be vertically-aligned
 *         to the top of the row. It will also turn off custom line heights
 *         and re-enable line wrapping for contents in a
 *         ``djblets-c-config-forms-list__item-main`` child.
 *
 *     -is-disabled:
 *         The list item has a disabled state. This will show a thick grey
 *         border on the left.
 *
 *     -is-enabled:
 *         The list item has an enabled state. This will show a thick green
 *         border on the left.
 *
 * Structure:
 *     <li class="djblets-c-config-forms-list__item">...</li>
 *     <li class="djblets-c-config-forms-list__item -has-actions">...</li>
 *     <li class="djblets-c-config-forms-list__item -is-enabled">...</li>
 *     ...
 *
 *     Or:
 *
 *     <tr class="djblets-c-config-forms-list__item">...</tr>
 *     <tr class="djblets-c-config-forms-list__item -has-actions">...</tr>
 *     <tr class="djblets-c-config-forms-list__item -is-enabled">...</tr>
 *     ...
 */
li.djblets-c-config-forms-list__item,
.djblets-c-config-forms-list__item > td,
.djblets-c-config-forms-list__item > th,
li.config-forms-list-item,
.config-forms-list-item > td,
.config-forms-list-item > th {
  border-bottom: 1px #E9E9E9 solid;
  padding: 0.5em 1em;
  list-style: none;
  line-height: 32px;
  vertical-align: middle;
  /* Ellipsize the text contents. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
li.djblets-c-config-forms-list__item:last-child,
.djblets-c-config-forms-list__item:last-child > td,
.djblets-c-config-forms-list__item:last-child > th,
li.config-forms-list-item:last-child,
.config-forms-list-item:last-child > td,
.config-forms-list-item:last-child > th {
  border-bottom: 0;
}
.djblets-c-config-forms-list__item:hover,
.config-forms-list-item:hover {
  background: #FAFAFA;
}
li.djblets-c-config-forms-list.-all-items-have-actions .djblets-c-config-forms-list__item,
li.djblets-c-config-forms-list__item.-has-actions,
.djblets-c-config-forms-list.-all-items-have-actions .djblets-c-config-forms-list__item > td:last-child,
.djblets-c-config-forms-list__item.-has-actions > td:last-child,
.djblets-c-config-forms-list.-all-items-have-actions .djblets-c-config-forms-list__item > th:last-child,
.djblets-c-config-forms-list__item.-has-actions > th:last-child,
li.config-forms-list.-all-items-have-actions .djblets-c-config-forms-list__item,
.config-forms-list.-all-items-have-actions .djblets-c-config-forms-list__item > td:last-child,
.config-forms-list.-all-items-have-actions .djblets-c-config-forms-list__item > th:last-child,
li.djblets-c-config-forms-list.-all-items-have-actions .config-forms-list-item,
li.config-forms-list-item.-has-actions,
.djblets-c-config-forms-list.-all-items-have-actions .config-forms-list-item > td:last-child,
.config-forms-list-item.-has-actions > td:last-child,
.djblets-c-config-forms-list.-all-items-have-actions .config-forms-list-item > th:last-child,
.config-forms-list-item.-has-actions > th:last-child,
li.config-forms-list-item,
.config-forms-list-item > td:last-child,
.config-forms-list-item > th:last-child {
  padding-right: 0.5em;
}
li.djblets-c-config-forms-list.-all-items-have-icons .djblets-c-config-forms-list__item,
li.djblets-c-config-forms-list__item.-has-icon,
.djblets-c-config-forms-list.-all-items-have-icons .djblets-c-config-forms-list__item > td:first-child,
.djblets-c-config-forms-list__item.-has-icon > td:first-child,
.djblets-c-config-forms-list.-all-items-have-icons .djblets-c-config-forms-list__item > th:first-child,
.djblets-c-config-forms-list__item.-has-icon > th:first-child,
li.config-forms-list.-all-items-have-icons .djblets-c-config-forms-list__item,
.config-forms-list.-all-items-have-icons .djblets-c-config-forms-list__item > td:first-child,
.config-forms-list.-all-items-have-icons .djblets-c-config-forms-list__item > th:first-child,
li.djblets-c-config-forms-list.-all-items-have-icons .config-forms-list-item,
li.config-forms-list-item.-has-icon,
.djblets-c-config-forms-list.-all-items-have-icons .config-forms-list-item > td:first-child,
.config-forms-list-item.-has-icon > td:first-child,
.djblets-c-config-forms-list.-all-items-have-icons .config-forms-list-item > th:first-child,
.config-forms-list-item.-has-icon > th:first-child {
  padding-left: 0.5em;
}
li.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item,
li.djblets-c-config-forms-list__item.-is-multiline,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > td,
.djblets-c-config-forms-list__item.-is-multiline > td,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > th,
.djblets-c-config-forms-list__item.-is-multiline > th,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > td:first-child,
.djblets-c-config-forms-list__item.-is-multiline > td:first-child,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > th:first-child,
.djblets-c-config-forms-list__item.-is-multiline > th:first-child,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > td:last-child,
.djblets-c-config-forms-list__item.-is-multiline > td:last-child,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > th:last-child,
.djblets-c-config-forms-list__item.-is-multiline > th:last-child,
li.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > td,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > th,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > td:first-child,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > th:first-child,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > td:last-child,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item > th:last-child,
li.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item,
li.config-forms-list-item.-is-multiline,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item > td,
.config-forms-list-item.-is-multiline > td,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item > th,
.config-forms-list-item.-is-multiline > th,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item > td:first-child,
.config-forms-list-item.-is-multiline > td:first-child,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item > th:first-child,
.config-forms-list-item.-is-multiline > th:first-child,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item > td:last-child,
.config-forms-list-item.-is-multiline > td:last-child,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item > th:last-child,
.config-forms-list-item.-is-multiline > th:last-child {
  padding: 1em 1em;
  vertical-align: top;
}
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-actions,
.djblets-c-config-forms-list__item.-is-multiline .djblets-c-config-forms-list__item-actions,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-actions,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item .djblets-c-config-forms-list__item-actions,
.config-forms-list-item.-is-multiline .djblets-c-config-forms-list__item-actions,
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .config-forms-list-item-actions,
.djblets-c-config-forms-list__item.-is-multiline .config-forms-list-item-actions {
  width: 100%;
}
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-action,
.djblets-c-config-forms-list__item.-is-multiline .djblets-c-config-forms-list__item-action,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-action,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item .djblets-c-config-forms-list__item-action,
.config-forms-list-item.-is-multiline .djblets-c-config-forms-list__item-action {
  display: block;
  width: 100%;
}
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-action + .djblets-c-config-forms-list__item-action,
.djblets-c-config-forms-list__item.-is-multiline .djblets-c-config-forms-list__item-action + .djblets-c-config-forms-list__item-action,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-action + .djblets-c-config-forms-list__item-action,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item .djblets-c-config-forms-list__item-action + .djblets-c-config-forms-list__item-action,
.config-forms-list-item.-is-multiline .djblets-c-config-forms-list__item-action + .djblets-c-config-forms-list__item-action {
  margin: 5px 0 0 0;
}
.djblets-c-config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-main,
.djblets-c-config-forms-list__item.-is-multiline .djblets-c-config-forms-list__item-main,
.config-forms-list.-all-items-are-multiline .djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-main,
.djblets-c-config-forms-list.-all-items-are-multiline .config-forms-list-item .djblets-c-config-forms-list__item-main,
.config-forms-list-item.-is-multiline .djblets-c-config-forms-list__item-main {
  line-height: normal;
  white-space: normal;
}
.djblets-c-config-forms-list__item a,
.config-forms-list-item a {
  color: blue;
  font-weight: normal;
  text-decoration: none;
}
.djblets-c-config-forms-list__item img,
.config-forms-list-item img {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
}
/**
 * A list of actions for an item in a list.
 *
 * This is shown on the right-hand side of the list.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-list__item-actions">
 *      <button class="djblets-c-config-forms-list__item-action">...</button>
 *      ...
 *     </div>
 */
li.djblets-c-config-forms-list__item .djblets-c-config-forms-list__item-actions,
li.config-forms-list-item .djblets-c-config-forms-list__item-actions,
li.djblets-c-config-forms-list__item .config-forms-list-item-actions {
  float: right;
}
/**
 * An action for an item.
 *
 * This is shown on the right-hand side of the list.
 *
 * Modifiers:
 *     -is-danger:
 *         Indicates that the action performs an operation that might result
 *         in data loss (such as discarding a form or deleting data).
 *
 *         This is not styled by default. It is up to the consuming
 *         application to provide a style. It will generally be the same
 *         styling used for this modifier on a ``<button>``.
 *
 *     -is-primary:
 *         Indicates that the button is the primary action for the item.
 *
 *         This is not styled by default. It is up to the consuming
 *         application to provide a style. It will generally be the same
 *         styling used for this modifier on a ``<button>``.
 *
 * Structure:
 *     <button class="djblets-c-config-forms-list__item-action">...</button>
 *
 *     <a class="djblets-c-config-forms-list__item-action" role="button"
 *        href="...">...</a>
 */
.djblets-c-config-forms-list__item-action {
  /*
   * In practice, there are stylesheets that have higher specificity and will
   * override some of these styles in ways that make things wildly
   * inconsisten. So, we need to generate some variants to match that.
   */
}
.djblets-c-config-forms-list__item-action,
a.djblets-c-config-forms-list__item-action,
button.djblets-c-config-forms-list__item-action {
  box-sizing: border-box;
  font-size: 110%;
  margin: 0;
  padding: 0.5em 1em;
  text-align: center;
}
.djblets-c-config-forms-list__item-action,
a.djblets-c-config-forms-list__item-action,
button.djblets-c-config-forms-list__item-action,
a.djblets-c-config-forms-list__item-action:link,
a.djblets-c-config-forms-list__item-action:visited {
  color: black;
}
.djblets-c-config-forms-list__item-action + .djblets-c-config-forms-list__item-action {
  margin: 0 0 0 5px;
}
/**
 * The main content of an item.
 *
 * This is an optional child that can define the main content of more complex
 * list items. It is currently required if you want to use list items with
 * the ``-is-multiline`` modifier.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-list__item-main">...</div>
 */
/**
 * A text/icon-based state indicator for an item.
 *
 * This can be used as part of an item to indicate the enabled/disabled/etc.
 * state of an item. It will be color-coded based on the registered item
 * state. This is purely optional and up to the implementation to use.
 *
 * Structure:
 *     <td class="djblets-c-config-forms-list__item-state">
 *      <span class="fa ..."></span> ...
 *     </td>
 */
.djblets-c-config-forms-list__item-state {
  white-space: nowrap;
}
.djblets-c-config-forms-list__item.-is-disabled > td:first-child,
tr.djblets-c-config-forms-list__item.-is-disabled > td:first-child,
.config-forms-list-item.-is-disabled > td:first-child,
tr.config-forms-list-item.-is-disabled > td:first-child {
  border-left: 8px #DDDDDD solid !important;
}
.djblets-c-config-forms-list__item.-is-disabled .djblets-c-config-forms-list__item-state,
tr.djblets-c-config-forms-list__item.-is-disabled .djblets-c-config-forms-list__item-state,
.config-forms-list-item.-is-disabled .djblets-c-config-forms-list__item-state,
tr.config-forms-list-item.-is-disabled .djblets-c-config-forms-list__item-state {
  color: darkred;
}
.djblets-c-config-forms-list__item.-is-disabled .djblets-c-config-forms-list__item-state:before,
tr.djblets-c-config-forms-list__item.-is-disabled .djblets-c-config-forms-list__item-state:before,
.config-forms-list-item.-is-disabled .djblets-c-config-forms-list__item-state:before,
tr.config-forms-list-item.-is-disabled .djblets-c-config-forms-list__item-state:before {
  content: "\f00d";
  display: inline-block;
  font-family: FontAwesome;
  text-align: center;
  width: 1em;
  margin-right: 4px;
}
.djblets-c-config-forms-list__item.-is-enabled > td:first-child,
tr.djblets-c-config-forms-list__item.-is-enabled > td:first-child,
.config-forms-list-item.-is-enabled > td:first-child,
tr.config-forms-list-item.-is-enabled > td:first-child {
  border-left: 8px #53CC53 solid !important;
}
.djblets-c-config-forms-list__item.-is-enabled .djblets-c-config-forms-list__item-state,
tr.djblets-c-config-forms-list__item.-is-enabled .djblets-c-config-forms-list__item-state,
.config-forms-list-item.-is-enabled .djblets-c-config-forms-list__item-state,
tr.config-forms-list-item.-is-enabled .djblets-c-config-forms-list__item-state {
  color: darkgreen;
}
.djblets-c-config-forms-list__item.-is-enabled .djblets-c-config-forms-list__item-state:before,
tr.djblets-c-config-forms-list__item.-is-enabled .djblets-c-config-forms-list__item-state:before,
.config-forms-list-item.-is-enabled .djblets-c-config-forms-list__item-state:before,
tr.config-forms-list-item.-is-enabled .djblets-c-config-forms-list__item-state:before {
  content: "\f00c";
  display: inline-block;
  font-family: FontAwesome;
  text-align: center;
  width: 1em;
  margin-right: 4px;
}
.djblets-c-config-forms-list__item.-has-error > td:first-child,
tr.djblets-c-config-forms-list__item.-has-error > td:first-child,
.config-forms-list-item.-has-error > td:first-child,
tr.config-forms-list-item.-has-error > td:first-child {
  border-left: 8px #E45757 solid !important;
}
.djblets-c-config-forms-list__item.-has-error .djblets-c-config-forms-list__item-state,
tr.djblets-c-config-forms-list__item.-has-error .djblets-c-config-forms-list__item-state,
.config-forms-list-item.-has-error .djblets-c-config-forms-list__item-state,
tr.config-forms-list-item.-has-error .djblets-c-config-forms-list__item-state {
  color: darkred;
}
.djblets-c-config-forms-list__item.-has-error .djblets-c-config-forms-list__item-state:before,
tr.djblets-c-config-forms-list__item.-has-error .djblets-c-config-forms-list__item-state:before,
.config-forms-list-item.-has-error .djblets-c-config-forms-list__item-state:before,
tr.config-forms-list-item.-has-error .djblets-c-config-forms-list__item-state:before {
  content: "\f057";
  display: inline-block;
  font-family: FontAwesome;
  text-align: center;
  width: 1em;
  margin-right: 4px;
}
/**
 * Actions shown above a list component.
 *
 * This should generally be mixed in with a
 * ``.djblets-l-config-forms-container``.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-list-actions
 *                 djblets-l-config-forms-container">
 *      <button class="djblets-c-config-forms-list-actions__acction">
 *       ...
 *      </button>
 *      ...
 *     </div>
 */
.djblets-c-config-forms-list-actions {
  /**
   * An action shown above a list.
   *
   * This does not provide styling for the action, aside from spacing.
   * It's up to consumers to style the actions that they need, or to mix in
   * additional classes.
   *
   * Structure:
   *     <button class="djblets-c-config-forms-list-actions__action">
   *      ...
   *     </button>
   *
   *     <a href="..." class="djblets-c-config-forms-list-actions__action btn">
   *      ...
   *     </a>
   */
}
.djblets-c-config-forms-list-actions__action {
  margin: 0;
}
.djblets-c-config-forms-list-actions__action + .djblets-c-config-forms-list-actions__action {
  margin-left: 0.5em;
}
/****************************************************************************
 * Pop-up menu component
 ****************************************************************************/
/**
 * A pop-up menu of items.
 *
 * Structure:
 *     <div class="djblets-c-config-forms-popup-menu">
 *      <ul class="djblets-c-config-forms-popup-menu__items">
 *       <li class="djblets-c-config-forms-popup-menu__item">
 *        <input type="checkbox" />
 *        <label>...</label>
 *       </li>
 *       <li class="djblets-c-config-forms-popup-menu__item">
 *        <a href="...">...</a>
 *       </li>
 *       ...
 *      </ul>
 *     </div>
 */
.djblets-c-config-forms-popup-menu,
.config-forms-list-item ul {
  background: #FFFFF0;
  border: 1px #BBBBB0 solid;
}
/**
 * A list of items in a pop-up menu.
 *
 * Structure:
 *     <ul class="djblets-c-config-forms-popup-menu__items">
 *      <li class="djblets-c-config-forms-popup-menu__item">...</li>
 *      ...
 *     </ul>
 */
.djblets-c-config-forms-popup-menu__items,
.config-forms-list-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/**
 * An item in a pop-up menu.
 *
 * Structure:
 *     <li class="djblets-c-config-forms-popup-menu__item">...</li>
 */
.djblets-c-config-forms-popup-menu__item,
.config-forms-list-item ul li {
  padding: 0 0.5em;
}
.djblets-c-config-forms-popup-menu__item input,
.config-forms-list-item ul li input {
  vertical-align: middle;
}
.djblets-c-config-forms-popup-menu__item label,
.config-forms-list-item ul li label {
  display: inline;
  margin-left: 0.2em;
  vertical-align: middle;
}
/****************************************************************************
 * Standard layout containers
 ****************************************************************************/
/**
 * A container within a config form, containing margins and content.
 *
 * Containers are meant to contain other content within a config form, such
 * as form elements, text descriptions, images, or more complex components.
 *
 * It's recommended to use containers for any margins rather than applying
 * padding to the parent, so that margins can be better controlled in a
 * consistent way.
 *
 * By default, containers have a consistent margin on all sides, separating
 * it from other containers and from its parent. However, they can also be
 * set in a recessed mode, which removes the left/right margins in order to
 * make the contents flush with the parent container.
 *
 * Modifiers:
 *     -is-bottom-flush:
 *         Removes the bottom margin (and border, if using ``-is-recessed``) in
 *         order to make the container flush with the bottom of the parent.
 *
 *     -is-recessed:
 *         Recesses the container, removing the left and right margins.
 *
 *     -is-top-flush:
 *         Removes the top margin (and border, if using ``-is-recessed``) in
 *         order to make the container flush with the top of the parent.
 *
 * Structure:
 *     <div class="djblets-l-config-forms-container -is-recessed">
 *      ...
 *     </div>
 */
.djblets-l-config-forms-container {
  margin: 1em;
}
.djblets-l-config-forms-container.-is-bottom-flush {
  margin-bottom: 0;
}
.djblets-l-config-forms-container.-is-top-flush {
  margin-top: 0;
}
.djblets-l-config-forms-container.-is-recessed {
  margin-left: 0;
  margin-right: 0;
  border-top: 1px #AAAAAA solid;
  border-bottom: 1px #AAAAAA solid;
}
.djblets-l-config-forms-container.-is-recessed.-is-bottom-flush {
  border-bottom: 0;
}
.djblets-l-config-forms-container.-is-recessed.-is-top-flush {
  border-top: 0;
}
/****************************************************************************
 * Utility objects
 ****************************************************************************/
/**
 * A spinner widget.
 *
 * This is suited for appearing in an item when an action is being taken.
 * It's meant to be used with the ``fa fa-spinner fa-pulse`` classes.
 *
 * Deprecated:
 *     2.0:
 *     Consumers should use ``djblets-o-spinner`` instead.
 *
 * Structure:
 *     <span class="fa fa-spinner fa-pulse djblets-o-config-forms-spinner">
 *     </span>
 */
.djblets-o-config-forms-spinner,
.config-forms-list-item-spinner {
  /*
       * We need !important in order to ensure that .fa's default size is
       * overridden.
       */
  font-size: 16px !important;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 1px;
  vertical-align: middle;
}
/**
 * An Add icon for buttons and other widgets.
 */
.djblets-o-config-forms-icon-add {
  color: #00AA00;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 120%;
  vertical-align: text-bottom;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.djblets-o-config-forms-icon-add:before {
  content: "\f055";
  /* Code for fa-plus-circle */
}
/****************************************************************************
 * Deprecated styles
 ****************************************************************************/
.config-forms-container {
  padding: 1em;
}
.config-forms-container .djblets-l-config-forms-container {
  padding: 0;
}
.config-forms-list:empty ~ .config-forms-list-empty {
  display: block;
}
.config-forms-list-actions {
  margin: 1em 0 0 0em;
}
.config-forms-list-full {
  margin-top: 1em;
}
.config-forms-list-full p {
  margin: 0;
}
.config-forms-list-header-actions {
  margin: 0 0 1em 0;
}
.config-forms-list-item.disabled label {
  color: #C0C0C0;
}
.config-forms-list-item-empty {
  background: #FFFFFF;
  border-bottom: 1px solid #AAAAAA;
  border-top: 1px solid #AAAAAA;
  display: none;
  line-height: 32px;
  padding: 0.5em 1em;
}
.config-forms-page-content .box-main {
  padding: 1em;
}
.config-forms-page-content .box-recessed {
  margin: 0 -1em;
}
.config-forms-page-content .djblets-l-config-forms-container {
  margin-left: 0;
  margin-right: 0;
}
.config-forms-page-content .djblets-l-config-forms-container.-is-recessed {
  margin-left: -1em;
  margin-right: -1em;
}
.config-forms-page-content .search {
  margin: 0 0 1em 0;
  padding: 0;
}
.config-forms-page-content .search input {
  margin-left: 0.5em;
  max-width: 100%;
  width: 53em;
}
.config-forms-subsection {
  margin: 2em 0;
}
/*
 * These were part of Review Board/RBCommons and were never supposed to be
 * left in. They're scheduled for removal in Djblets 2.0.
 */
.config-group-display-name {
  color: #A0A0A0;
  font-size: 90%;
}
.config-group-name {
  display: inline-block;
  min-width: 15em;
  padding-right: 2em;
}
.config-forms-list-action-join,
.config-forms-list-action-leave {
  min-width: 3em;
}
.config-forms-list-item .rb-icon {
  margin-right: 0.5em;
  vertical-align: top;
}
.config-forms-list-item-actions .btn .rb-icon {
  margin-right: 0;
  vertical-align: middle;
}
/*# sourceMappingURL=config-forms.css.map */