/** CSS for the "toChecklist" jQuery plugin, by Scott Horlbeck */
div.checklistContainer {
  padding: 4px;
  background: #F7F7F7;
  border: 1px solid #AAAAAA;
  margin-bottom: 10px;
  font-family: Helvetica, arial, verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6em;

  &.checklistHighlighted {
    overflow-y: auto;
    overflow-x: hidden; /* If you don't want scrollbars, leave this one blank. */
    border: 1px solid #5897FB;
  }

  div.findInList {
    margin-bottom: 5px;

    input {
      width: 100% !important;
      padding: 2px 2px 2px 4px !important;
      margin: 0;
      outline: 0;
      border: 1px solid #aaa;
      min-height: 17px;
      background: #fff url('@{icon-tools-select2-image-path}') no-repeat 100% -22px;
      background: url('@{icon-tools-select2-image-path}') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
      background: url('@{icon-tools-select2-image-path}') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
      background: url('@{icon-tools-select2-image-path}') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
      background: url('@{icon-tools-select2-image-path}') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);

      &.blurred {
        color: gray;
      }
    }
  }

  div.checklist {
    overflow-y: auto;
    overflow-x: hidden; /* If you don't want scrollbars, leave this one blank. */
    border: 1px solid #AAAAAA;
    color: #555555;
    background: #FFFFFF;

    ul.checklist {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        padding: 3px;
        margin-left: 0;

        &.even {
          background-color: #FFFFFF;
        }

        &.odd {
          background-color: #F7F7F7;
        }

        &.even:hover,
        &.odd:hover,
        &.focused {
          background-color: #3875D7;
          color: #FFFFFF;
        }
        &:hover {
          label {
            background-color: #3875D7;
            color: #FFFFFF;
          }
        }
        &.checked {
          background: #3875D7;
          color: #FFFFFF;

          &:hover {
            background: #3875D7;

            label {
              background: #3875D7;
            }
          }

          span.checklist_min_transform {
            color: #FFFFFF
          }
        }

        &.optgroup {
          font-size: 1.1em;
          font-weight: bold;
          font-style: italic;
          background-color: #CCCCCC;
          padding-left: 7px;

          &:hover {
            background-color: #CCCCCC;
            color: #555555;
          }
        }

        input {
          display: block;
          float: left;
          margin-left: 2px;
        }

        label {
          display: block !important;
          margin: 0;
          padding: 0;

          &.leaveRoomForCheckbox {
            display: block;
            padding-left: 20px; /* If hiding checkboxes, set padding-left to 3px */
          }

          &.disabled {
            color: #DDDDDD;
          }
        }
      }
    }
  }

  ul.showSelectedItems {
    color: #770;
    font-size: .8em;
    list-style-position: outside;
    margin-left: 0;
    padding-left: 1.4em;

    li:hover {
      cursor: pointer;
      color: red;
      text-decoration: line-through;
    }
  }

  div.actionButtons {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.6em;
    margin-top: 3px;

    span {
      text-decoration: none;
      color: #555555;
      font-weight: 600;

      &:hover {
        text-decoration: underline;
        cursor: pointer;
        //color: #9F1A5C;
      }
    }
  }

  span.checklist_min_transform {
    font-size: 10px;
    color: #888888;
    font-style: italic;
  }
}