.navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color:#000 !important;
    }

    .container{
      padding-right: 2%;
      padding-left: 2%;
    }
    .container-content{
      margin-top:110px;
    }
    nav>.nav>li>a {
      color: #555;
      background-color: #e7e7e7 !important;
    }
    .navbar-default .navbar-nav>li>a, .navbar-brand {
        color: #fff !important;

    }
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        color: #555 !important;
        background-color: #e7e7e7;
    }

    .navbar-default .navbar-nav>li>a{
        border-top:2px solid #2e5f97;
    }

    .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
        color: #555 !important;
        background-color: #e7e7e7;
        border-top:2px solid #880000;
    }
    .navbar-toggle{
        background-color: #e3e3e3;
    }
    .head{
      background-color:#fff; color:#8a8a8a; width:100%
    }
    .head small{
      text-transform: capitalize;
      font-size:10px;
    }
    .navbar{
      background-color:#2e5f97;
    }
    .title-head{
      padding:6px;
      padding-right: 7.5%;
      padding-left: 7.5%;
    }
    .subtitle{
      font-weight:bold;
    }
    .box-sidebar{
       box-shadow: 0px 10px 18px -9px #666; padding:20px 15px; border-top:4px solid #880000
    }
    .sidebar-title{
      border-bottom:1px solid #880000;
      font-weight:bold;
      margin-top:13px;
      padding-bottom:5px;
    }
    .sidebar-title.top{
      border-bottom:1px solid #880000;
      font-weight:bold;
      margin-top:-10px;
    }
    .jumbotron {
      padding: 0px;
      margin-bottom: 30px;
      color: inherit;
      background-color: #eee;
    }
    .jumbotron p {
      margin-bottom: 15px;
      font-size: 14px;
      font-weight: 200;
    }
    .container .jumbotron, .container-fluid .jumbotron {
        padding-right: 0px;
        padding-left: 0px;
    }

    #myTabs li{
      width:25%;
    }
    #myTabs li a{
      text-align: center;
      font-weight: bold;
    }
    hr{
      padding:0px;
      margin:5px 0px 8px 0px;
    }
    .date{
      display:block;
      font-size:11px;
    }

    .text-footer{
      display:block;
      font-size:11px;
      padding:15px;
    }

    label.error {
      color: red; 
      padding-left: .5em;
      font-style:italic;
      font-size:12px;
      background-color: #eee;
      display:block;
      padding: 5px;
      font-weight: none;
      border-bottom:1px solid #ccc;
    }

    .overflow{
      overflow:hidden; height:110px; width:100%; background:#cecece;
    }



* {margin: 0; padding: 0;}
.tree ul {
  padding-top: 20px; position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 3px 0 3px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #337ab7;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #337ab7;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;

}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #337ab7;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #337ab7;
  width: 0; height: 20px;
}

.tree li .link{
  border: 1px solid #337ab7;
  padding: 6px 6px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  background-color: #337ab7;
  border-radius: 5px 5px 0px 0px;
  width:101px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li .link0{
  border: 1px solid #8a8a8a;
  padding: 5px 5px;
  text-decoration: none;
  color: red;
  font-weight: bold;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  background-color: #cecece;
  border-radius: 5px 5px 0px 0px;
  width:101px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
  color: #000; border: 1px solid #94a0b4;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  red;
}

.image0{
  border-radius:60px; width:50px;
  border:2px solid #fff;
}

.image{
  border-radius:60px; width:40px;
  border:2px solid #fff;
}

.image2{
  border-radius:60px; width:37px;
  border:2px solid #fff;
}

.judul {
    font-weight: bold;
}