.sortable-tree {
  width: 75%;

  .placeholder {
    border: 1px dashed #4183C4;
    border-radius: 3px;
  }

  .mjs-nestedSortable-error {
    background: #fbe3e4;
    border-color: transparent;
  }

  .mjs-nestedSortable-disabled {
    opacity: 0.6;
  }

  .toggle {
     font-weight: bold;
     padding: 3px 10px;
     font-size: 16px;
     margin: -5px;
     cursor: pointer;
     width: 10px;
     &:before {
       content: '-';
    }
  }

  ol {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-type: none;
    li {
      margin: 5px 0 0 0;
      padding: 0;

      &.collapsed {
        > ol {
          display: none;
        }

        .toggle {
          &:before {
            content: '+';
         }
       }
      }

      .sortable-item-wrapper {
        line-height: 1;
        border: 1px solid #d4d4d4;
        border-radius: 3px;
        border-color: #D4D4D4 #D4D4D4 #BCBCBC;
        padding: 6px;
        margin: 0;
        cursor: move;
        background: #f6f6f6;

        &:after {
          content: "";
          display: table;
          clear: both;
        }
        span {
          float: left;
        }
        &:hover {
          border-left: 2px solid #444;
          padding-left: 5px;
          .controls {
            opacity: 1;
            [data-method="delete"] {
              visibility: visible;
            }
          }
        }
        .controls {
          float: right;
          opacity: 0.3;
          margin-right: -33px;
          a {
            text-decoration: none;
            font-size: 18px;
            color: #666;
            display: block;
            float: left;
            width: 16px;
            height: 16px;
            padding: 0 5px;
            &:hover {
              color: #222;
            }
            &[data-method="delete"] {
              visibility: hidden;
              margin-left: 5px;
              opacity: 0.5;
              &:hover {
                opacity: 1;
                color: #D50000;
              }
            }
          }
        }
      }
    }
  }
  > ol {
    margin: 0;
  }

  .state-label {
    float: right !important;
    display: block;
  }
}

.tree-controls a {
  text-decoration: none;
  font-size: 14px;
  margin-right: 10px;
}

.tree-status {
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  &.pending {
    color: blue;
  }
  &.success {
    color: green;
  }
  &.error {
    color: red;
  }
}