@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap);

* {
    box-sizing: border-box;
    padding: 0
}

*,
body {
    margin: 0
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

html {
    scroll-behavior: smooth
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: #555
}

::view-transition-new(root),
::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal
}

::view-transition-old(root) {
    z-index: 1
}

::view-transition-new(root) {
    z-index: 9999
}

.react-flow__attribution {
    display: none
}

.react-flow {
    direction: ltr
}

.react-flow__container {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.react-flow__pane {
    cursor: grab;
    z-index: 1
}

.react-flow__pane.selection {
    cursor: pointer
}

.react-flow__pane.dragging {
    cursor: grabbing
}

.react-flow__viewport {
    pointer-events: none;
    transform-origin: 0 0;
    z-index: 2
}

.react-flow__renderer {
    z-index: 4
}

.react-flow__selection {
    z-index: 6
}

.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
    outline: none
}

.react-flow .react-flow__edges {
    overflow: visible;
    pointer-events: none
}

.react-flow__connection-path,
.react-flow__edge-path {
    stroke: #b1b1b7;
    stroke-width: 1;
    fill: none
}

.react-flow__edge {
    cursor: pointer;
    pointer-events: visibleStroke
}

.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw .5s linear infinite
}

.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none
}

.react-flow__edge.inactive {
    pointer-events: none
}

.react-flow__edge.selected,
.react-flow__edge:focus,
.react-flow__edge:focus-visible {
    outline: none
}

.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge:focus .react-flow__edge-path,
.react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555
}

.react-flow__edge-textwrapper {
    pointer-events: all
}

.react-flow__edge-textbg {
    fill: #fff
}

.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.react-flow__connection {
    pointer-events: none
}

.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw .5s linear infinite
}

.react-flow__connectionline {
    z-index: 1001
}

.react-flow__nodes {
    pointer-events: none;
    transform-origin: 0 0
}

.react-flow__node {
    box-sizing: border-box;
    cursor: grab;
    pointer-events: all;
    position: absolute;
    transform-origin: 0 0;
    -webkit-user-select: none;
    user-select: none
}

.react-flow__node.dragging {
    cursor: grabbing
}

.react-flow__nodesselection {
    pointer-events: none;
    transform-origin: left top;
    z-index: 3
}

.react-flow__nodesselection-rect {
    cursor: grab;
    pointer-events: all;
    position: absolute
}

.react-flow__handle {
    background: #1a192b;
    border: 1px solid #fff;
    border-radius: 100%;
    height: 6px;
    min-height: 5px;
    min-width: 5px;
    pointer-events: none;
    position: absolute;
    width: 6px
}

.react-flow__handle.connectionindicator {
    cursor: crosshair;
    pointer-events: all
}

.react-flow__handle-bottom {
    bottom: -4px;
    left: 50%;
    top: auto;
    transform: translate(-50%)
}

.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%)
}

.react-flow__handle-left {
    left: -4px;
    top: 50%;
    transform: translateY(-50%)
}

.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translateY(-50%)
}

.react-flow__edgeupdater {
    cursor: move;
    pointer-events: all
}

.react-flow__panel {
    margin: 15px;
    position: absolute;
    z-index: 5
}

.react-flow__panel.top {
    top: 0
}

.react-flow__panel.bottom {
    bottom: 0
}

.react-flow__panel.left {
    left: 0
}

.react-flow__panel.right {
    right: 0
}

.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%)
}

.react-flow__attribution {
    background: #ffffff80;
    font-size: 10px;
    margin: 0;
    padding: 2px 3px
}

.react-flow__attribution a {
    color: #999;
    text-decoration: none
}

@keyframes dashdraw {
    0% {
        stroke-dashoffset: 10
    }
}

.react-flow__edgelabel-renderer {
    height: 100%;
    pointer-events: none;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    width: 100%
}

.react-flow__edge.updating .react-flow__edge-path {
    stroke: #777
}

.react-flow__edge-text {
    font-size: 10px
}

.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
    outline: none
}

.react-flow__node-default,
.react-flow__node-group,
.react-flow__node-input,
.react-flow__node-output {
    background-color: #fff;
    border: 1px solid #1a192b;
    border-radius: 3px;
    color: #222;
    font-size: 12px;
    padding: 10px;
    text-align: center;
    width: 150px
}

.react-flow__node-default.selectable:hover,
.react-flow__node-group.selectable:hover,
.react-flow__node-input.selectable:hover,
.react-flow__node-output.selectable:hover {
    box-shadow: 0 1px 4px 1px #00000014
}

.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.selectable:focus-visible,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible,
.react-flow__node-input.selectable.selected,
.react-flow__node-input.selectable:focus,
.react-flow__node-input.selectable:focus-visible,
.react-flow__node-output.selectable.selected,
.react-flow__node-output.selectable:focus,
.react-flow__node-output.selectable:focus-visible {
    box-shadow: 0 0 0 .5px #1a192b
}

.react-flow__node-group {
    background-color: #f0f0f040
}

.react-flow__nodesselection-rect,
.react-flow__selection {
    background: #0059dc14;
    border: 1px dotted #0059dccc
}

.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible,
.react-flow__selection:focus,
.react-flow__selection:focus-visible {
    outline: none
}

.react-flow__controls {
    box-shadow: 0 0 2px 1px #00000014
}

.react-flow__controls-button {
    align-items: center;
    background: #fefefe;
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: initial;
    cursor: pointer;
    display: flex;
    height: 16px;
    justify-content: center;
    padding: 5px;
    -webkit-user-select: none;
    user-select: none;
    width: 16px
}

.react-flow__controls-button:hover {
    background: #f4f4f4
}

.react-flow__controls-button svg {
    max-height: 12px;
    max-width: 12px;
    width: 100%
}

.react-flow__controls-button:disabled {
    pointer-events: none
}

.react-flow__controls-button:disabled svg {
    fill-opacity: .4
}

.react-flow__minimap {
    background-color: #fff
}

.react-flow__minimap svg {
    display: block
}

.react-flow__resize-control {
    position: absolute
}

.react-flow__resize-control.left,
.react-flow__resize-control.right {
    cursor: ew-resize
}

.react-flow__resize-control.bottom,
.react-flow__resize-control.top {
    cursor: ns-resize
}

.react-flow__resize-control.bottom.right,
.react-flow__resize-control.top.left {
    cursor: nwse-resize
}

.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
    cursor: nesw-resize
}

.react-flow__resize-control.handle {
    background-color: #3367d9;
    border: 1px solid #fff;
    border-radius: 1px;
    height: 4px;
    transform: translate(-50%, -50%);
    width: 4px
}

.react-flow__resize-control.handle.left {
    left: 0;
    top: 50%
}

.react-flow__resize-control.handle.right {
    left: 100%;
    top: 50%
}

.react-flow__resize-control.handle.top {
    left: 50%;
    top: 0
}

.react-flow__resize-control.handle.bottom {
    left: 50%;
    top: 100%
}

.react-flow__resize-control.handle.bottom.left,
.react-flow__resize-control.handle.top.left {
    left: 0
}

.react-flow__resize-control.handle.bottom.right,
.react-flow__resize-control.handle.top.right {
    left: 100%
}

.react-flow__resize-control.line {
    border: 0 solid #3367d9
}

.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
    height: 100%;
    top: 0;
    transform: translate(-50%);
    width: 1px
}

.react-flow__resize-control.line.left {
    border-left-width: 1px;
    left: 0
}

.react-flow__resize-control.line.right {
    border-right-width: 1px;
    left: 100%
}

.react-flow__resize-control.line.bottom,
.react-flow__resize-control.line.top {
    height: 1px;
    left: 0;
    transform: translateY(-50%);
    width: 100%
}

.react-flow__resize-control.line.top {
    border-top-width: 1px;
    top: 0
}

.react-flow__resize-control.line.bottom {
    border-bottom-width: 1px;
    top: 100%
}

[dir="rtl"] .css-cveorv , .css-j2as55{
    margin-left: 8px !important;
    margin-right: -4px !important;
}
[dir="rtl"] .css-1wa282e > :not(style) ~ :not(style){
        margin-right: 6px;
}
[dir="rtl"] .css-1siv2hp {
            margin-right: -2px !important;
    margin-left: 8px !important;
    }

    .css-jmhpx6:hover {
    background-color: rgba(0, 168, 132, 0.12) !important;
}
[dir="rtl"]  .css-1ua9fmt .MuiChip-icon {
    margin-left: -6px !important;
    margin-right: 5px !important;
}

[dir="rtl"]  .css-1d2jnii .MuiChip-icon {
    margin-right: 2.4px;
}
[dir="rtl"]  .css-1tjs6m6 {
    margin-left: -2px !important;
    margin-right: 8px !important;
}
[dir="rtl"] .css-s09lcx > .MuiTab-icon {
    margin-left: 6px !important;
}

  @media (min-width: 900px) {
    [dir="rtl"] .css-1h9jvi6 > :not(style) ~ :not(style) {
        margin-right: 12px !important;
    }
     [dir="rtl"] .css-1i10s1w > :not(style) ~ :not(style) {
        margin-right: 12px !important;
    }
}

 [dir="rtl"] .css-fm445e > :not(style) ~ :not(style) {
    margin-right: 9px !important;
}

 [dir="rtl"] .css-a7r6wh > .MuiTab-icon {
    margin-left: 6px !important;
}

 [dir="rtl"] .css-1x1xdwy > :not(style) ~ :not(style) {
    margin-right: 6px !important; 
}

 [dir="rtl"] .css-12fw7l1 > :not(style) ~ :not(style) {
    margin-right: 9px !important;
}
 [dir="rtl"]  .css-c95xm0 > :not(style) ~ :not(style) {
    margin-right: 7.5px !important;
}
 [dir="rtl"] .css-1r4wdar .MuiChip-icon {
    margin-left: -4px!important;
    margin-right: 4px!important;
}
 [dir="rtl"] .css-e1jzsb .MuiChip-iconSmall {
    margin-right: 2px !important;
}
 [dir="rtl"] .css-1vfrdif > :not(style) ~ :not(style) {
    margin-right: 6px !important;
}
@media (min-width: 600px) {
     [dir="rtl"].css-i5nnd9 > :not(style) ~ :not(style) {
        margin-right: 9px !important;
    }
}

 [dir="rtl"] .css-zxkh6t {
    margin-right: 8px !important;
}
 [dir="rtl"] .css-1vwi36a .MuiChip-iconSmall {
    margin-right: 2px !important;
}