$cOddRowBackground: #f4f5f5;
$cRowBorder: #e8e8e8;
$cRowSelected: #d9e4ec;
$cRowError: rgb(255,87,87);

.ui-sortable > *{
  cursor: move;
}


.disclose{
  cursor: pointer;
  width: 10px;
  display: none;
}



ol.sortable_tree{
  margin: 16px 0px 16px 0px;
  padding-left: 0px;
}

.sortable_tree_wrapper {
  .left {
    float: left !important;
  }
  .right {
    float: right !important;
  }

  ol {
    list-style-type:none;

    li {
      cursor: default !important;

      &.placeholder {
        background: lighten($cOddRowBackground, 10%);
        border: 1px dashed $cRowSelected;
        //.box-sizing(border-box);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        &.cantdoit {
          border: 1px dashed $cRowError;
        }
      }

      .item {
        width: 100%;
        border-top: 1px solid $cRowBorder;
        border-bottom: 1px solid $cRowBorder;

        //.clearfix;
        &::after {
          content: "";
          display: table;
          clear: both;
        }

        &.even {
          background: white;
        }

        &.odd {
          background: $cOddRowBackground;
        }

        &:hover {
          background-color: $cRowSelected;
          cursor: move;
        }

        .cell {
          margin: 0;
          padding: 10px 12px 8px 12px;
        }

        h3.cell {
          font-size: 16px;
          line-height: 14px;
          color: black;
        }
      }
    }

    > li > ol {
      margin-left: 30px;
    }

    li.mjs-nestedSortable-collapsed > ol {
      display: none;
    }

    li.mjs-nestedSortable-branch > div > .disclose {
      display: block;
      float: left;
      padding: 10px 5px 8px 5px;
    }

    li.mjs-nestedSortable-collapsed > div > .disclose > span:before {
      content: '+ ';
    }

    li.mjs-nestedSortable-expanded > div > .disclose > span:before {
      content: '- ';
    }
  }
}