#bulkActionContainer {
  text-align: center;

  & h1, h2, h3 {
    text-align: center;
  }

  & hr {
    width: 60%;
    min-width: calc(min(600px, 90%));
    margin-top: 15px;
  }

  & input[type=text].badInput {
    background-color: #ff414141;
  }

  /** Customization table row/data */
  & tr {
    cursor: default;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  & tr.selectedRow {
    background-color: var(--bulk-action-tr-selected);
  }

  & tr:hover {
    background-color: var(--bulk-action-tr-hover);
  }

  & td {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  & .bulkActionInactive {
    color: var(--bulk-action-inactive-text);
  }

  & .bulkActionOn {
    background: var(--bulk-action-table-green);
  }

  & .bulkActionOn:hover {
    background: var(--bulk-action-table-green-hover);
  }

  & .bulkActionOff {
    background: var(--bulk-action-table-red);
  }

  & .bulkActionOff:hover {
    background: var(--bulk-action-table-red-hover);
  }

  & .bulkActionSemi {
    background: var(--bulk-action-table-yellow);
  }

  & .bulkActionSemi:hover {
    background: var(--bulk-action-table-yellow-hover);
  }

  & .buttonContainer {
    text-align: center;
    width: auto;
  }

  & .multiSelectContainer {
    position: absolute;
    display: inline-block;
  }

  & .multiSelectCheck {
    margin: 5px 2px 5px 2px; /* Default input margin is 5px, but that's a bit too much left/right here */
  }

  & .multiSelectLabel {
    font-size: 13px;
    vertical-align: text-top;
    margin-right: 2px;
  }

  & #bulkActionButtons > .button {
    padding: 3px 5px 3px 5px;
    border-radius: 2px;
    margin: 5px 10px 5px 10px;

    /** Icon-based buttons don't have a border by default, but we want one in the overlay. */
    border: 1px solid var(--bulk-action-button-border);
  }

  & #chapterIndexModeContainer {
    font-size: smaller;
    display: inline-flex;

    & input[type=checkbox] {
      margin: 0;
      vertical-align: text-bottom;
    }

    & #chapterIndexModeHelp {
      margin: 0 0 0 2px;
      padding: 0;
      vertical-align: text-bottom;
      opacity: 0.8;
    }

    & #chapterIndexModeHelp:hover {
      opacity: 1;
    }

    & #chapterIndexModeHelp svg {
      vertical-align: text-bottom;
    }
  }
}