.tooltip{display:inline-block;position:relative;border-bottom:1px dotted #666;text-align:left}.tooltip .bottom{min-width:230px;top:40px;left:100%;-webkit-transform:translate(-50%);transform:translate(-50%);padding:10px 20px;color:#fff;background-color:#28c76f;font-weight:400;font-size:13px;border-radius:8px;position:absolute;z-index:99999999;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.5);box-shadow:0 1px 8px rgba(0,0,0,.5);display:none}.tooltip:hover .bottom{display:block}.tooltip .bottom i{position:absolute;bottom:100%;left:50%;margin-left:-12px;width:24px;height:12px;overflow:hidden}.tooltip .bottom i:after{content:"";position:absolute;width:12px;height:12px;left:50%;-webkit-transform:translate(-50%,50%) rotate(45deg);transform:translate(-50%,50%) rotate(45deg);background-color:#28c76f;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.5);box-shadow:0 1px 8px rgba(0,0,0,.5)}*{margin:0;padding:0}.tree{padding:20px;width:100%;overflow-x:auto;overflow-y:auto}.tree ul{padding-top:20px}.tree li,.tree ul{position:relative;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s}.tree li{float:left;text-align:center;list-style-type:none;padding:20px 5px 0 5px}.tree li:after,.tree li:before{content:"";position:absolute;top:0;right:50%;border-top:1px solid #ccc;width:50%;height:20px}.tree li:after{right:auto;left:50%;border-left:1px solid #ccc}.tree li:only-child:after,.tree li:only-child:before{display:none}.tree li:only-child{padding-top:0;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tree li:first-child:before,.tree li:last-child:after{border:0 none}.tree li:last-child:before{border-right:1px solid #ccc;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}.tree ul ul:before{content:"";position:absolute;top:0;left:50%;border-left:1px solid #ccc;width:0;height:20px}.tree li a{border:1px solid #ccc;padding:5px 10px;text-decoration:none;color:#666;font-family:arial,verdana,tahoma;font-size:11px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s}.tree li span:hover,.tree li span:hover+ul li span{background:#c8e4f8;color:#000;border:1px solid #94a0b4}.tree li span:hover+ul:before,.tree li span:hover+ul li:after,.tree li span:hover+ul li:before,.tree li span:hover+ul ul:before{border-color:#94a0b4}