@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap";.background-color-blue{background-color:#1d2786}body{font-family:Poppins,sans-serif}.animated-gradient{background:linear-gradient(-45deg,#fff,#f0f9ff,#e6f7ff,#d9f2ff);background-size:400% 400%;animation:gradientBG 20s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes slow-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotate-slow{animation:slow-rotate 20s linear infinite}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-slide-in-left{animation:slideInLeft 1s ease-out forwards}.animate-slide-in-right{animation:slideInRight 1s ease-out forwards}.animate-fade-in{animation:fadeIn 1.2s ease-in}.fade-in-delay{animation:fadeIn 1.8s ease-in}.fade-in-delay-slow{animation:fadeIn 2.2s ease-in}.animated-btn{transition:transform .3s ease,background-color .3s ease}.animated-btn:hover{transform:scale(1.05)}.glowing-text{animation:glow 2.5s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 5px #60a5fa,0 0 10px #60a5fa}to{text-shadow:0 0 15px #3b82f6,0 0 30px #3b82f6}}.step-container{display:flex;gap:24px;align-items:center;justify-content:center;position:relative}.step-icon{background-color:#fff;padding:16px;border-radius:50%;box-shadow:0 4px 8px #0003;border:2px solid #e0e0e0;z-index:1}.step-content{background-color:#fff;padding:16px;border-radius:8px;box-shadow:0 4px 8px #0003;border:2px solid #e0e0e0;width:100%}.step-container .step-icon{animation:iconFadeIn .6s ease-in-out}.step-container .step-content{animation:contentSlideIn .6s ease-in-out}.step-container:nth-child(odd) .step-content{animation-delay:.1s}.step-container:nth-child(2n) .step-content{animation-delay:.2s}.line{position:absolute;top:0;left:50%;width:4px;border-left:4px dotted #1e3a8a;z-index:0;height:100%;animation:drawLine 1s ease-in-out forwards}@keyframes iconFadeIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes contentSlideIn{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes drawLine{0%{height:0}to{height:100%}}.sidebar-tooltip{position:absolute;left:100%;margin-left:.5rem;padding:.25rem .5rem;font-size:.75rem;font-weight:500;color:#fff;background-color:#1f2937;border-radius:.25rem;box-shadow:0 4px 10px #00000026;transform:translateY(-50%) scale(0);transform-origin:left;transition:all .2s ease;white-space:nowrap;z-index:10;pointer-events:none;top:50%}.group:hover .sidebar-tooltip{transform:translateY(-50%) scale(1)}.tree-container{position:relative;width:100%;min-height:100vh;height:auto;display:flex;justify-content:flex-start;align-items:flex-start;background:linear-gradient(135deg,#eef2f3,#d9e7ff);overflow-x:auto;overflow-y:auto;padding:50px;transform-origin:top left;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 4px 10px #0000001a;border-radius:10px}.tree-container:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(0,128,255,.05),transparent);top:20%;left:20%;border-radius:50%;animation:glowing 4s infinite alternate ease-in-out;z-index:-1}.svg-layer{color:#0ff!important;position:absolute;top:0;left:0;width:100vw;height:100vh;min-width:100%;min-height:100%;pointer-events:none;overflow:visible;margin-bottom:100px!important}.node-box{position:absolute;cursor:grab;padding:20px;background:#fff;border-radius:8px;box-shadow:2px 4px 8px #00000026;text-align:center;display:flex;flex-direction:column;align-items:center;z-index:10;border:1px solid #ddd;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.node-box:active{cursor:grabbing}.node-box:hover{transform:translateY(-2px);box-shadow:3px 6px 12px #0003}.node-box{position:absolute;background:#fff;border-radius:0;padding:0;box-shadow:3px 5px 10px #00000026;border:1px solid #ddd;transition:transform .2s ease,box-shadow .2s ease;max-width:220px;min-width:180px!important;width:auto!important;text-align:center}.node-box:hover{transform:translateY(-3px);box-shadow:5px 8px 15px #0003}.node-text{background-color:#f93;text-align:left;cursor:grab;font-weight:700;font-size:1rem;color:#222;margin-bottom:8px;word-wrap:break-word;max-width:100%;text-transform:capitalize}.button-group{border-radius:10px;gap:6px}.btn-flow-builder{border:1px solid #007bff!important;background-color:#fff!important;color:#007bff!important;padding:6px 12px;cursor:pointer;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:90px;margin:5px!important}.btn:hover{background:#ddd;transform:scale(1.07);box-shadow:3px 4px 8px #0003}.btn:active{transform:scale(.98)}.arrow{stroke:#007bff;stroke-width:2.5px;stroke-dasharray:5,5;fill:none;transition:stroke-dasharray .2s ease,stroke-width .2s ease}.arrow.dragging{stroke-dasharray:2,6;stroke-width:3px}@media (max-width: 500px){.node-box{max-width:180px;padding:10px}.btn{font-size:11px;min-width:80px}}line{stroke:#000;stroke-width:2}.flowbuilder-select-container{display:flex;align-items:center;justify-content:center;padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;max-width:320px;margin:10px auto;position:relative}