*::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
    height: 8px;

}

*::-webkit-scrollbar-thumb {
    height: 8px; /* 스크롤바의 길이 */
    background: rgba(33, 122, 244, .5); /* 스크롤바의 색상 */
    border-radius: 2rem;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 122, 244, 1); /* 스크롤바의 색상 */
}

*::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
    border-radius: 2rem;
}

.react-grid-item.react-grid-placeholder {
    border-radius: 0.5rem!important;
    background: rgba(0, 0, 0, 0.50)!important;
    filter: blur(8px) !important;
}

.rst__tree {
    overflow: auto;
    flex-shrink: 1;
    flex-grow: 1;
    height: 25rem;
    /*border: 1px solid #bbb;*/
}

.rst__tree .rst__virtualScrollOverride > div{
    padding-top: 0.5rem;
}
.rst__tree .rst__rowWrapper {
    padding : 0.5rem 0.5rem 0.5rem 0;
}
.rst__tree .rst__rowWrapper .rst__row {
    height:1rem;
}
.rst__tree .rst__rowWrapper .rst__row:focus-within {
    border-color: #5b7eff;
}
.rst__tree .rst__rowWrapper .rst__row .rst__rowSearchMatch {
    border-color: #5b7eff;
    outline: 1px solid #5b7eff;
}
.rst__tree .rst__rowWrapper .rst__row .rst__rowSearchFocus {
    background-color: #5b7eff35;
}

.rst__tree .rst__rowWrapper .rst__moveHandle {
    width: 18px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background-size: 28px;
}

.rst__tree .rst__rowWrapper .rst__rowContents {
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    border: none;
    background-color: transparent;
    min-width: 10rem;
}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowLabel {
    flex: 1 1 0;
    padding: 0;
}
.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowLabel > input {
    width: 100%;
    padding: 0;
    outline: none;
    font-weight: 500;
    text-overflow: ellipsis;
}
.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowLabel > input::placeholder {
    color: #ccc;
}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar {}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton {
    display: flex;
}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton > button {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 2px;
    background-color: #eee;
    color: #fff;
    margin-left: 3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton > button.minus {}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton > button.minus::before {
    content: '';
    width: 0.5rem;
    height: 1px;
    background-color: #5b7eff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton > button.plus {}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton > button.plus::before {
    content: '';
    width: 0.5rem;
    height: 1px;
    background-color: #5b7eff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rst__tree .rst__rowWrapper .rst__rowContents .rst__rowToolbar .rst__toolbarButton > button.plus::after {
    content: '';
    width: 1px;
    height: 8px;
    background-color: #5b7eff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rst__tree .rst__expandButton{
    width: 1rem;
    height: 1rem;
    box-shadow: none;
    object-fit: cover;

    background-size: 1rem;
    top: 1rem;
    padding: 0.5rem !important;
    right: 0 !important;
    background-image: url("../img/category/plusicon.svg");
    background-color: transparent;
    border-radius: 0;
}

.rst__tree .rst__expandButton:hover:not(:active) {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
    border-color: blue;
}

.rst__tree .rst__collapseButton {
    width: 1rem;
    height: 1rem;
    box-shadow: none;
    object-fit: cover;

    background-size: 1rem;
    top: 1rem;
    background-image: url("../img/category/minusicon.svg");
    background-color: transparent;
    border-radius: 0;
}

.rst__tree .rst__collapseButton:hover:not(:active) {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
    border-color: blue;
}
.rst__lineChildren {
    left : -2rem !important;
}
.rst__tree .rst__lineChildren::after {
    background-color: #000;
    display: none;
}
.rst__tree .rst__lineHalfHorizontalRight::before{
    background-color: #000;
    display: none;
}
.rst__tree .rst__lineFullVertical::after{
    background-color: #000;
    display: none;
}
.rst__tree .rst__lineHalfVerticalTop::after{
    background-color: #000;
    display: none;
}
.rst__tree .rst__lineHalfVerticalBottom::after {
    background-color: #000;
    display: none;
}
.rst__lineBlock {
    display: none !important;
}
.rst__node {
    display: flex;
}

.rst__rowTitle {
    font-size: 1rem !important;
    font-weight: normal !important;
    color:var(--bs-dark);
}

.rst__nodeContent {
    top : 0 !important;
}

/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow__container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.react-flow__pane {
    z-index: 1;
    cursor: -webkit-grab;
    cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
}
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.react-flow__viewport {
    transform-origin: 0 0;
    z-index: 2;
    pointer-events: none;
}
.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 {
    pointer-events: none;
    overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
    /*stroke: #b1b1b7;*/
    stroke: var(--bs-gray-500); /*flowcustom 기본 선 색상*/
    stroke-width: 1;
    fill: none;
}
.react-flow__edge {
    pointer-events: visibleStroke;
    cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
    animation: dashdraw 0.5s linear infinite;
}
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: 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;*/
    stroke: var(--bs-primary); /*flowcustom 선택한 선 색상*/
}
.react-flow__edge-textwrapper {
    pointer-events: all;
}
.react-flow__edge-textbg {
    fill: white;
}
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.react-flow__connection {
    pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
    animation: dashdraw 0.5s linear infinite;
}
.react-flow__connectionline {
    z-index: 1001;
}
.react-flow__nodes {
    pointer-events: none;
    transform-origin: 0 0;
}
.react-flow__node {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: all;
    transform-origin: 0 0;
    box-sizing: border-box;
    cursor: -webkit-grab;
    cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.react-flow__nodesselection {
    z-index: 3;
    transform-origin: left top;
    pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
}
.react-flow__handle {
    position: absolute;
    pointer-events: none;
    min-width: 0.5rem;
    min-height: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bs-secondary);
    border: 1px solid white;
    border-radius: 100%;
}
.react-flow__handle:hover {
    background: var(--bs-white);
    border: 1px solid var(--bs-primary);
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
}
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
}
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
}
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
}
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
}
.react-flow__edgeupdater {
    cursor: move;
    pointer-events: all;
}
.react-flow__panel {
    position: absolute;
    z-index: 5;
    margin: 15px;
}
.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 {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 3px;
    margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
}
@-webkit-keyframes dashdraw {
    from {
        stroke-dashoffset: 10;
    }
}
@keyframes dashdraw {
    from {
        stroke-dashoffset: 10;
    }
}
.react-flow__edgelabel-renderer {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
    stroke: #777;
}
.react-flow__edge-text {
    font-size: 0.75rem;
}
.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
    outline: none;
}
/*flowcustom*/
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
    white-space: pre-wrap;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    max-width: 300px;
    font-size: 0.75rem;
    color: var(--bs-dark);
    text-align: left;
    border-width: 1px;
    border-style: solid;
    border-color: var(--bs-gray-500);
    background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--bs-secondary);
}
.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.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,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--bs-primary);
}
.react-flow__node-group {
    background-color: rgba(240, 240, 240, 0.25);
}

.react-flow__nodesselection-rect,
.react-flow__selection {
    background: rgba(0, 89, 220, 0.08);
    border: 1px dotted rgba(0, 89, 220, 0.8);
}
.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 {
    border: 1px solid var(--bs-gray-200);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.05);
}

/*flowcustom*/
.react-flow__controls-button {
    border: none;
    background: var(--bs-white);
    border-bottom: 1px solid var(--bs-gray-200);
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 5px;
}
.react-flow__controls-button:hover {
    background: var(--bs-gray-200);
}
.react-flow__controls-button svg {
    width: 100%;
    max-width: 0.75rem;
    max-height: 0.75rem;
}
.react-flow__controls-button:disabled {
    pointer-events: none;
}
.react-flow__controls-button:disabled svg {
    fill-opacity: 0.4;
}
.react-flow__minimap {
    background-color: var(--bs-white);
}
.react-flow__resize-control {
    position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
    cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
    cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
    cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
    cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
    width: 4px;
    height: 4px;
    border: 1px solid #fff;
    border-radius: 1px;
    background-color: #3367d9;
    transform: translate(-50%, -50%);
}
.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.top.left {
    left: 0;
}
.react-flow__resize-control.handle.bottom.left {
    left: 0;
}
.react-flow__resize-control.handle.top.right {
    left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
    left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
    border-color: #3367d9;
    border-width: 0;
    border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
    width: 1px;
    transform: translate(-50%, 0);
    top: 0;
    height: 100%;
}
.react-flow__resize-control.line.left {
    left: 0;
    border-left-width: 1px;
}
.react-flow__resize-control.line.right {
    left: 100%;
    border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
    height: 1px;
    transform: translate(0, -50%);
    left: 0;
    width: 100%;
}
.react-flow__resize-control.line.top {
    top: 0;
    border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
    border-bottom-width: 1px;
    top: 100%;
}

.react-resizable {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.react-resizable-handle {
    cursor: move;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    /*background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='rgb(211, 211, 211)' stroke-width='0' viewBox='0 0 16 16' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.646 10.146a.5.5 0 0 1 .708 0L8 13.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-4.292a.5.5 0 0 0 .708 0L8 2.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708zM1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8z'%3E%3C/path%3E%3C/svg%3E");*/
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
    background-position: bottom right;
    padding: 0 3px 3px 0;
}

.notification-container {
    top: auto !important;
    bottom: 1rem !important;
}