:root {
    --bs-lightPrimary: rgba(0, 120, 212, 0.3);
    --bs-lightSuccess: rgba(50, 180, 110, 0.3);
    --bs-lightInfo: rgba(150, 60, 230, 0.3);
    --bs-lightWarning: rgba(240, 190, 0, 0.3);
    --bs-lightDanger: rgba(220, 40, 30, 0.3);
}

.wfIcon1 {
    display: flex;
    padding-left: 5px;
    padding-right: 5px;
    align-items: center;
}

    .wfIcon1 .wf-Code {
        background-image: url(images/code.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon1 .wf-Condition {
        background-image: url(images/condition.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon1 .wf-Email {
        background-image: url(images/envelope.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon1 .wf-Queue {
        background-image: url(images/queue.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon1 .wf-Task {
        background-image: url(images/task.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

.wfIcon2 {
    display: inline-block;
    padding-right: 7px;
}

    .wfIcon2 .wf-Code {
        background-image: url(images/code.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon2 .wf-Condition {
        background-image: url(images/condition.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon2 .wf-Email {
        background-image: url(images/envelope.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon2 .wf-Queue {
        background-image: url(images/queue.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon2 .wf-Task {
        background-image: url(images/task.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

    .wfIcon2 .wf-Publish {
        background-image: url(images/publish.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
    }

.lightBgPrimary {
    background-color: var(--bs-lightPrimary);
}

.lightBgSuccess {
    background-color: var(--bs-lightSuccess);
}

.lightBgInfo {
    background-color: var(--bs-lightInfo);
}

.lightBgWarning {
    background-color: var(--bs-lightWarning);
}

.lightBgDanger {
    background-color: var(--bs-lightDanger);
}

.codeEditor textarea {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-size: 14px;
    width: 100%;
    height: 320px;
    overflow-y: auto;
    resize: none;
    padding-left: 20px;
    padding-top: 10px;
    border-color: #ccc;
}

.diagram-port {
    height: 10px;
    width: 10px;
    margin: -10px;
}

.activity {
    height: 35px;
    width: 150px;
    border-radius: 5px;
}

.activity-Start {
    background-color: var(--bs-lightSuccess);
    font-weight: 600;
}

.activity-Finish {
    background-color: var(--bs-lightDanger);
    font-weight: 600;
}

.activity-state-Finished {
    background-color: var(--bs-lightSuccess);
}

.activity-state-Waiting {
    background-color: lightskyblue;
}

.activity-state-Returned {
    background-color: orange;
}

.activity-state-Cancelled {
    background-color: #ee0000;
}

.activityLink-state-Waiting {
    stroke-dasharray: 10;
    stroke-dashoffset: 100;
    stroke-width:3;
    animation: flow 2.5s linear infinite;
}

.activityLink-state-Finished {
    stroke-dasharray: 10;
    stroke-dashoffset: 100;
    stroke-width:3;
    animation: flow 2.5s linear infinite;
}


@keyframes flow {
    100% {
        stroke-dashoffset: 0;
    }
}

.angle-triangle-success {
    width: 0;
    height: 0;
    border-top: 9px solid var(--bs-success);
    border-right: 9px solid transparent;
}

.angle-triangle-danger {
    width: 0;
    height: 0;
    border-top: 9px solid var(--bs-danger);
    border-right: 9px solid transparent;
}

.list-group-item {
    background-color: transparent;
}

    .list-group-item:hover {
        background-color: #fff;
    }

.invalidField {
    border-color: rgba(213, 25, 35, 0.5) !important;
}

.visualBlock {
    position: relative;
    transition: all .3s;
}

    .visualBlock .visualHeader {
        background-color: var(--bs-gray-300);
    }

    .visualBlock active {
        margin-left: -12vw;
    }

.tree-nav__item {
    display: block;
    white-space: nowrap;
    color: #333;
    position: relative;
}

    .tree-nav__item .tree-nav__item {
        margin-left: 2rem;
    }

    .tree-nav__item.is-expandable[open] > .tree-nav__item-title::before {
        font-family: "ionicons";
        transform: rotate(90deg);
    }

    .tree-nav__item.is-expandable > .tree-nav__item-title {
        padding-left: 1.5rem;
    }

        .tree-nav__item.is-expandable > .tree-nav__item-title::before {
            position: absolute;
            will-change: transform;
            transition: transform 300ms ease;
            color: #aaa;
            font-size: 0.8rem;
            content: "►";
            left: 4px;
            top: 7px;
            display: inline-block;
            text-align: center;
        }

.tree-nav__item-title {
    cursor: pointer;
    display: block;
    outline: 0;
    color: rgba(0, 0, 0, 0.7);
}

    .tree-nav__item-title .icon {
        display: inline;
        padding-left: 1.6rem;
        margin-right: 0.8rem;
        color: #666;
        position: relative;
    }

        .tree-nav__item-title .icon::before {
            top: 0;
            position: absolute;
            left: 0;
            display: inline-block;
            width: 1.6rem;
            text-align: center;
        }

.nav-line-tabs .nav-item .nav-link.active i {
    color: #000;
}