body{
 font-family: "Rubik", sans-serif;
 }
 
 /*-------------vertical-tree-view------------*/
 .vertical-tree{
 padding-top: 0px;
 padding-bottom: 0px;
 }
 .vertical-tree ul{
 padding-left: 30px;
 }
 .vertical-tree li {
 margin: 0px 0;
 list-style-type: none;
 position: relative;
 padding: 20px 5px 0px 5px;
 }
 .vertical-tree li::before{
 content: '';
 position: absolute; 
 top: 0;
 width: 1px; 
 height: 100%;
 right: auto; 
 left: -20px;
 border-left: 2px solid #ccc;
 bottom: 50px;
 }
 .vertical-tree li::after{
 content: '';
 position: absolute; 
 top: 34px; 
 width: 25px; 
 height: 20px;
 right: auto; 
 left: -20px;
 border-top: 2px solid #ccc;
 }
 .vertical-tree li a{
 display: inline-block;
 padding: 8px 10px;
 text-decoration: none;
 background-color: #f5a425;
 color: #000;
 border: 1px solid #ffffff;
 font-size: 14px;
 border-radius: 4px;
 }
 .vertical-tree > ul > li::before, 
 .vertical-tree > ul > li::after{
 border: 0;
 }
 .vertical-tree li:last-child::before{ 
 height: 34px;
 }
 .vertical-tree li a:hover, 
 .vertical-tree li a:hover+ul li a {
 background-color: #5a8dee;
 color: #fff;
 border: 1px solid #ffffff;
 }
 .vertical-tree li a:hover+ul li::after, 
 .vertical-tree li a:hover+ul li::before, 
 .vertical-tree li a:hover+ul::before, 
 .vertical-tree li a:hover+ul ul::before{
 border-color: #fbba00;
 }