/* tema: Turquoise */;
ul, #myUL {
  list-style-type: none;
}
#myUL {
  margin: 0;
  padding: 0;
}
.mysilsilah{
  width: 100%px;
  background: #f5f5f5;
  padding: 10px;
  overflow: scroll;
  height: auto;
    white-space: nowrap;
  /*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: #FFE8C1; 
  scrollbar-arrow-color: #6F4709;
  border: 5px outset #599bb3;
}


}
.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::after {
  content: "\f103";
  color: #599bb3;
  font-size: 20px;
  font-weight: bold;
  line-height:10px;
  display: inline-block;
  font-family:FontAwesome;
  margin-right: 6px;
  margin-left:5px;
      padding:5px;
    width:13px;
    height: 11px;
    border-radius: 0 0 20px 20px;
cursor:pointer;
cursor:hand;
-moz-cursor:pointer;

}

.caret-down::after {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  

}

.nested {
  display: none;
}

.active {
  display: block;
}

.tree ul {
    margin-left: 20px;
}

.tree li {
    list-style-type: none;
    margin:20px;
    position: relative;
}

.tree li::before {
    content: "";
    position: absolute;
    top:-15px;
    left:-20px;
    border-left: 2px ridge #599bb3;
    border-bottom:2px ridge #599bb3;
    border-radius:0 0 0 0px;
    width:18px;
    height:27px;


}

.tree li::after {
    position:absolute;
    content:"";
    top:12px;
    left:-20px;
    border-left: 2px ridge #599bb3;
    border-top:2px ridge #599bb3;
    padding:5px;
    border-radius:0px 0 0 0;
    width:8px;
    height:100%;


}

.tree li:last-child::after  {
    display:none;
}

.tree li:last-child:before{
    border-radius: 0 0 0 5px;
}

ul.tree>li:first-child::before {
    display:none;
}

ul.tree>li:first-child::after {
    border-radius:5px 0 0 0;
}

.tree li a {

    border-radius: 5px;
    padding:5px 10px 5px 10px;
    text-decoration:none;
      font-family: 'Roboto', sans-serif;
  -moz-box-shadow: 0px 10px 14px -7px #276873;
  -webkit-box-shadow: 0px 10px 14px -7px #276873;
  box-shadow: 0px 10px 14px -7px #276873;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
  background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
  background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
  background-color:#599bb3;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
    color:#ffffff;

  font-size:16px;
  font-weight:normal;
  text-shadow:0px 1px 0px #3d768a;

}

.tree li a:hover, .tree li a:hover+ul li a,
.tree li a:focus, .tree li a:focus+ul li a {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
  background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
  background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
  background-color:#408c99;

}

.tree li a:hover+ul li::after, .tree li a:focus+ul li::after,
.tree li a:hover+ul li::before, .tree li a:focus+ul li::before 
.tree li a:hover+ul::before, .tree li a:focus+ul::before 
.tree li a:hover+ul ul::before, .tree li a:focus+ul ul::before{
    border-color:  #000; /*connector color on hover*/
}
