.event-delegation-process{margin:30px 0;font-family:inherit;background:#f7f7f7;border-radius:12px;width:100%;height:450px;justify-content:space-between;padding:30px 0}.event-delegation-parent,.event-delegation-process{display:flex;flex-direction:column;align-items:center}.event-delegation-parent{padding:10px;border:2px solid #e1e1e1;border-radius:8px;transition:border 1.5s;position:relative}.event-delegation-parent p{margin:0 0 10px;font-size:14px;font-weight:700;color:#333}.event-delegation-parent:before{content:"Parent Element";position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;font-style:italic;color:red}.event-delegation-parent .child-element{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:transparent;color:#222;border:2px solid #e1e1e1}.parent-container{margin-block:0;padding:0;list-style:none;display:flex;gap:10px}.child-element{width:110px;padding:10px;background:#525fe1;border-radius:8px;text-align:center;cursor:pointer;border:2px solid transparent;transition:border .5s ease;color:#fff}.child-element.active{border:2px solid red}.center-vertical-pointer{width:2px;height:70%;background:#e1e1e1;position:relative}.center-vertical-pointer:before{content:"";position:absolute;width:100%;height:0;bottom:0;left:0;background:rgb(56,241,87);transition:height 1s}.center-vertical-pointer.active:before{height:100%}.center-vertical-pointer:after{content:"bubbling phase";position:absolute;top:50%;left:-35px;transform:translateY(-50%);font-size:12px;color:#333;rotate:-90deg;width:100px}