.tree{transform-origin:50%}.tree ul{position:relative;padding:1em 0;white-space:nowrap;margin:0 auto;text-align:center;&:after{content:"";display:table;clear:both}}.tree li{display:inline-block;vertical-align:top;text-align:center;list-style-type:none;position:relative;padding:1em .5em 0;&:after,&:before{content:"";position:absolute;top:0;right:50%;border-top:1px solid #ccc;width:50%;height:1em}&:after{right:auto;left:50%;border-left:1px solid #ccc}&:only-child:after,&:only-child:before{display:none}&:only-child{padding-top:1em}&:first-child:before,&:last-child:after{border:0}&:last-child:before{border-right:1px solid #ccc;border-radius:0 10em 0 0}&:first-child:after{border-radius:10em 0 0 0}}.tree ul ul:before{content:"";position:absolute;top:0;left:48%;border-left:3px solid #ccc;width:0;height:2em}.tree li .node{padding:.5em 1em;text-decoration:none;display:inline-block;border-radius:10em;position:relative;top:1px;background:#e9453f;color:#fff;border:1px solid #e9453f;.text{display:inline-block}}.tree li .node:hover+ul li:after,.tree li .node:hover+ul li:before,.tree li .node:hover+ul ul:before,.tree li .node:hover+ul:before{border-color:#e9453f}body{font-family:sans-serif;font-size:15px}.tree{justify-content:center;margin-top:30px}.node,.tree{display:flex;flex-direction:column;align-items:center}.node{position:relative}.node.node--left{margin-right:1vw}.node.node--right{margin-left:1vw}.node__bottom-line{height:20px;width:1px;background:#404040}.node__children{display:flex;padding:20px 0;border-top:1px solid #404040}.node__element{width:30px;height:30px;background-color:gray;border-radius:50%;line-height:30px;text-align:center;font-size:12px}.node__element.highlight{background-color:red}.node:not(.node--root) .node__element:before{content:"";height:20px;width:1px;background:#404040;display:block;position:absolute;top:-20px;left:0;right:0;margin:auto}select{background:transparent;width:4em}select:focus-visible{clip-path:border-box}