.ui-widget-header.ui-corner-tl.ui-corner-tr.level-2 {
  color: aqua; }

.small-style .tree li {
  line-height: 4px;
  padding-top: 2px; }
  .small-style .tree li.level-1, .small-style .tree li.level-2 {
    line-height: 12px; }
    .small-style .tree li.level-1 > .after, .small-style .tree li.level-1 > .before, .small-style .tree li.level-2 > .after, .small-style .tree li.level-2 > .before {
      border-style: none; }
    .small-style .tree li.level-1 > .trcont, .small-style .tree li.level-2 > .trcont {
      font-size: 12px; }
  .small-style .tree li.level-3 > .after, .small-style .tree li.level-3 > .before {
    border-width: 2px; }
  .small-style .tree li .trcont {
    font-size: 4px; }
    .small-style .tree li .trcont .ui-widget-content {
      display: none; }
    .small-style .tree li .trcont:hover .ui-widget-content {
      display: block; }

.tree li.level-1 > .trcont > .ui-widget-header > a, .tree li.level-2 > .trcont > .ui-widget-header > a {
  -webkit-writing-mode: inherit;
  writing-mode: inherit; }

.tree li.level-3 > .after, .tree li.level-3 > .before {
  border-width: 2px; }

.tree li .trcont .ui-widget-header {
  color: #FFFFFF; }
  .tree li .trcont .ui-widget-header.ui-state-focus {
    background-color: #9c27b0;
    border-color: #9c27b0; }
  .tree li .trcont .ui-widget-header a {
    color: #FFFFFF;
    -webkit-writing-mode: vertical-rl;
    writing-mode: tb-rl; }
    .tree li .trcont .ui-widget-header a:focus, .tree li .trcont .ui-widget-header a:hover, .tree li .trcont .ui-widget-header a:active {
      color: #FFFFFF; }

.tree li .trcont.InProcess > .ui-widget-header {
  font-weight: bold;
  color: #09477b;
  background-color: #37b0e9;
  border-color: #37b0e9; }
  .tree li .trcont.InProcess > .ui-widget-header.ui-state-focus {
    background-color: #9c27b0;
    border-color: #9c27b0; }
  .tree li .trcont.InProcess > .ui-widget-header a {
    color: #09477b; }

.tree li .trcont.Rejected > .ui-widget-header {
  font-weight: bold;
  background-color: #8e5a47;
  border-color: #8e5a47; }
  .tree li .trcont.Rejected > .ui-widget-header.ui-state-focus {
    background-color: #8e5a47;
    border-color: #8e5a47; }

.tree li .trcont.Declined > .ui-widget-header {
  font-weight: bold;
  color: #ffeb3b;
  background-color: #8e5a47;
  border-color: #8e5a47; }
  .tree li .trcont.Declined > .ui-widget-header.ui-state-focus {
    background-color: #8e5a47;
    border-color: #8e5a47; }
  .tree li .trcont.Declined > .ui-widget-header a {
    color: #ffeb3b; }

.tree li .trcont.Error > .ui-widget-header, .tree li .trcont.Error.Declined > .ui-widget-header, .tree li .trcont.Error.Rejected > .ui-widget-header, .tree li .trcont.Error.InProcess > .ui-widget-header {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #ff0000;
  border-color: #ff0000; }
  .tree li .trcont.Error > .ui-widget-header.ui-state-focus, .tree li .trcont.Error.Declined > .ui-widget-header.ui-state-focus, .tree li .trcont.Error.Rejected > .ui-widget-header.ui-state-focus, .tree li .trcont.Error.InProcess > .ui-widget-header.ui-state-focus {
    background-color: #ff0000;
    border-color: #ff0000; }
  .tree li .trcont.Error > .ui-widget-header a, .tree li .trcont.Error.Declined > .ui-widget-header a, .tree li .trcont.Error.Rejected > .ui-widget-header a, .tree li .trcont.Error.InProcess > .ui-widget-header a {
    color: #FFFFFF; }

.tree {
  /*We will use ::before and ::after to draw the connectors*/
  /*---- For Animation when change to other Class ----------*/ }
  .tree ul#tremainul > li > .trchl > ul > li {
    margin-bottom: 5em; }
  .tree ul#tremainul > li > div.trcont {
    max-width: 300px;
    width: auto; }
    .tree ul#tremainul > li > div.trcont > .ui-widget-content.ui-corner-bl.ui-corner-br {
      white-space: break-spaces;
      word-wrap: break-word; }
  .tree > ul {
    width: 100%; }
  .tree * {
    margin: 0;
    padding: 0; }
  .tree ul {
    white-space: nowrap;
    padding-top: 3px;
    position: relative; }
  .tree li {
    line-height: 9px;
    float: left;
    /*display: inline-block;*/
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 3px 1px 0 1px; }
    .tree li .trcont {
      font-size: 9px;
      /*cursor: pointer;*/
      max-width: 150px;
      width: auto;
      /*border: 1px solid #ccc;
                padding: 5px 10px;*/
      /*text-decoration: none;*/
      /*color: #666;
                font-family: arial, verdana, tahoma;*/
      display: inline-block;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -moz-box-shadow: 3px 3px 3px #888;
      /*-webkit-box-shadow: $size-radius $size-radius $size-radius #888;*/
      /*box-shadow: 3px 4px 4px #888;*/ }
    .tree li .trcont.selected .ui-corner-tl {
      background-color: orange; }
    .tree li .trcont.selected .ui-widget-header {
      border-color: orange; }
    .tree li .trcont.selected .ui-widget-content {
      border-color: orange; }
  .tree ul .trcont .ui-widget-header.ui-corner-tl.ui-corner-tr.level-2 {
    color: aqua; }
  .tree ul .trcont .ui-widget-header {
    font-weight: bolder;
    word-wrap: break-word;
    cursor: pointer;
    background-color: #09477b;
    color: #FFFFFF;
    border-radius: 3px 3px 0 0;
    border: 1px solid #09477b;
    border-bottom: none; }
    .tree ul .trcont .ui-widget-header.select {
      background-color: orange; }
  .tree > ul > li {
    display: inline-block;
    float: none; }
  .tree .tree li .trcont .ui-widget-content:hover,
  .tree .tree li .trcont .ui-widget-content:hover + div ul li .trcont .ui-widget-content {
    background: #c8e4f8;
    color: #000;
    border: 2px solid #94a0b4; }
  .tree .tree li .trcont:hover + ul li .after,
  .tree .tree li .trcont:hover + ul li .before,
  .tree .tree li .trcont:hover + ul .before,
  .tree .tree li .trcont:hover + ul ul .before {
    border-color: #94a0b4; }
  .tree .tree li.ui-draggable-dragging {
    background: green; }
  .tree .before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-top: 1px solid #09477b;
    border-left: 1px solid #09477b;
    width: 50%;
    height: 3px; }
  .tree .after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    /*left: 50%;*/
    /*right: auto;*/
    border-top: 1px solid #09477b;
    width: 50%;
    height: 3px; }
  .tree .bfrul {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #09477b;
    height: 3px; }
  .tree .contaftrdrop {
    border: 1px solid yellow; }
  .tree li .dragactive > .trcont {
    border: 1px solid yellow; }
  .tree li .drophover > .trcont {
    border: 1px solid red; }
  .tree .funcbtnb {
    width: 18px;
    height: 15px;
    margin: 1px 1px 1px 3px;
    cursor: pointer;
    display: none; }
  .tree .funcbtna {
    /*width: 15px;
            height: 15px;*/
    float: right;
    margin-top: 1px;
    margin-right: 3px;
    cursor: pointer;
    display: none; }
  .tree .tfocus {
    border-color: #9c27b0;
    background: #a7c1e8;
    color: #000; }
  .tree .ui-widget-content {
    font-size: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border: 1px solid #09477b;
    border-top: none;
    cursor: pointer; }
  .tree .zomrval {
    border: 0;
    color: #f6931f;
    font-weight: bold; }
  .tree .zmrcntr {
    float: left;
    width: 40px; }