.fluxo {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    width: 100%;
    height: 85vh;
}
.fluxo-header {
    width: 100%;
    height: 60px;
    display: flex;
    background-color: rgb(27,135,85);
    
    border: 1px solid #E8E8EF;
}


    .fluxo-header .icon {
        color: #FFF;
        width: 15%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
    }

    .fluxo-header .title {
        width: 60%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        color: #FFF;
        font-size: 24px;
        font-weight: bold;
    }

    .fluxo-header .actions {
        width: 30%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-end;
        align-items: center;
        padding-right: 15px;
        margin: 2px 1px 2px;
    }


    .fluxo-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        height: 85vh;
    }
.fluxo-panel {
    min-width: 610px;
    height: 85vh;
    background-color: #FFF;
    border: 1px solid #E8E8EF;
    padding:15px;
}

    .fluxo-panel .actions-container {
        height: 72vh;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .fluxo-panel .actions-footer{
        height:10vh;
    }



#actions {
    display: none;
}

#NovaMensagem {
    display: none;
}
#NovaPergunta {
    display: none;
}
#novaAlternativa {
    display: none;
}
#NovoRedirecionaCanal {
    display: none;
}
#NovoRedirecionaFluxo {
    display: none;
}
#NovoEncerramento {
    display: none;
}
#listaAlternativas {
    max-height: 15vh;
    overflow-y: scroll;
    overflow-x: hidden; 
}
#NovaRotina {
    display: none;
}
.fluxo-container .left {
    background-color: #FFF;
    border: 1px solid #E8E8EF;
}

.fluxo-container .right {
    background-color: #FFF;
    border: 1px solid #E8E8EF;
}

.fluxo-center-panel {
    height: 85vh;
    width: 100%;
}

#drawflow {
    width: 100%;
    height: 74vh;
    z-index: 0;
    overflow: auto;
}
.fluxo-block {
    margin: 5px;
    border: 1px solid #E8E8EF;
    padding: 2px 0;
    display: flex;
    height: 95px;
    align-content: center;
    align-items: center;
    background-color:#fff;
    border-radius: 10px !important;
    cursor:pointer !important;
    width: 300px;
}
.drag-icon {
    height: 94px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: large;
    cursor: pointer;
    padding: 3px;
    width: 20px;
   
}
.block-title {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    height: 30px;
    border-bottom: 1px solid #E8E8EF;
    padding-left: 8px;
    top: -2px;
}
.block-body {
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.block-caption {
    font-weight: bold;
    margin-left: 5px;
    text-transform: uppercase;
}
.mensagem {
    background-color: #2C3E50;
    border-radius: 10px 0 0 10px !important;
}
.pergunta {
    background-color: #E87E04;
    border-radius: 10px 0 0 10px !important;
}
.rotina {
    background-color: #2AB4C0;
    border-radius: 10px 0 0 10px !important;
}
.blockdisabled {
    background-color: #F0F2F9;
    opacity: .5;
}
.block-selected{
    border: 2px solid blue;
}
#actionPanel{
    display:none;
    z-index:9999;
}
.fluxo-block-active {
    margin: 5px;
    border: 1px solid #E8E8EF;
    padding: 2px 0;
    display: flex;
    flex-direction:column;
    min-height: 95px;
    max-height: 300px;
    width: 300px;
    align-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px !important;
    cursor: pointer !important;
}

.fluxo-block-aux-rotina {
    margin: 5px;
    border: 1px solid #E8E8EF;
    padding: 2px 0;
    display: flex;
    flex-direction:column;
    min-height: 95px;
    max-height: 300px;
    width: 100px;
    align-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px !important;
    cursor: pointer !important;
}




.block-body-active {
    min-height: 60px;
    max-height: 200px;
    width: 300px;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
    white-space: pre-line;
    overflow: auto;
    text-overflow: ellipsis;
    align-content: flex-start;
}

.block-body-aux-rotina {
    min-height: 60px;
    max-height: 200px;
    width: 100px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 8px;
    font-size: 36px;
}



.active-title-mensagem {
    background-color: #2C3E50;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width:300px;

}
.active-title-pergunta {
    background-color: #E87E04;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 300px;
}
.active-title-resposta-invalidae {
    background-color: #c22f2f;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 300px;
}
.active-title-rotina {
    background-color: #2AB4C0;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 300px;
}

.active-title-aux-rotina {
    background-color: #2AB4C0;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 100px;
    font-size: 10px;
    text-align: center;
}


.active-title-canal {
    background-color: #26C281;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 300px;
}

.active-title-fluxo {
    background-color: #8E44AD;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 300px;
}
.active-title-encerramento {
    background-color: #e02612;
    border-radius: 10px 10px 0 0 !important;
    justify-content: space-around !important;
    width: 300px;
}


.block-caption-active {
    font-weight: bold;
    margin-left: 5px;
    text-transform: uppercase;
    color: #FFF;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.block-icon-active{
    color:white;
}
.active-action {
    color: #fff;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 5px !important;
    width: 25px;
}

.active-action:hover{
    background:#fff;
    color: #000;
}

.block-content{
    display:flex;
}

.fluxo-actions{
    width:100%;
    height: 76vh;
}

.actions-footer {
    width: 100%;
    height: 4vh;
}


.zoom-toolbar {
    display: flex;
    flex-direction: row-reverse;
}


.nome-canal {
    font-weight: bold;
    font-size: 20px;
}

:root {
    --dfBackgroundColor: #ffffff;
    --dfBackgroundSize: 20px;
    --dfBackgroundImage: radial-gradient(rgba(224, 222, 222, 1) 1px, transparent 1px);
    --dfNodeType: flex;
    --dfNodeTypeFloat: none;
    --dfNodeBackgroundColor: #ffffff;
    --dfNodeTextColor: #000000;
    --dfNodeBorderSize: 1px;
    --dfNodeBorderColor: #000000;
    --dfNodeBorderRadius: 10px;
    --dfNodeMinHeight: 40px;
    --dfNodeMinWidth: 160px;
    --dfNodePaddingTop: 5px;
    --dfNodePaddingBottom: 5px;
    --dfNodeBoxShadowHL: 0px;
    --dfNodeBoxShadowVL: 1px;
    --dfNodeBoxShadowBR: 5px;
    --dfNodeBoxShadowS: 1px;
    --dfNodeBoxShadowColor: rgba(132, 128, 128, 1);
    --dfNodeHoverBackgroundColor: #ffffff;
    --dfNodeHoverTextColor: #000000;
    --dfNodeHoverBorderSize: 2px;
    --dfNodeHoverBorderColor: #000000;
    --dfNodeHoverBorderRadius: 4px;
    --dfNodeHoverBoxShadowHL: 0px;
    --dfNodeHoverBoxShadowVL: 2px;
    --dfNodeHoverBoxShadowBR: 5px;
    --dfNodeHoverBoxShadowS: 2px;
    --dfNodeHoverBoxShadowColor: #4ea9ff;
    --dfNodeSelectedBackgroundColor: rgba(244, 242, 242, 1);
    --dfNodeSelectedTextColor: rgba(8, 8, 8, 1);
    --dfNodeSelectedBorderSize: 2px;
    --dfNodeSelectedBorderColor: #000000;
    --dfNodeSelectedBorderRadius: 4px;
    --dfNodeSelectedBoxShadowHL: 0px;
    --dfNodeSelectedBoxShadowVL: 2px;
    --dfNodeSelectedBoxShadowBR: 15px;
    --dfNodeSelectedBoxShadowS: 2px;
    --dfNodeSelectedBoxShadowColor: #4ea9ff;
    --dfInputBackgroundColor: #ffffff;
    --dfInputBorderSize: 2px;
    --dfInputBorderColor: #000000;
    --dfInputBorderRadius: 50px;
    --dfInputLeft: -27px;
    --dfInputHeight: 10px;
    --dfInputWidth: 10px;
    --dfInputHoverBackgroundColor: #ffffff;
    --dfInputHoverBorderSize: 2px;
    --dfInputHoverBorderColor: #000000;
    --dfInputHoverBorderRadius: 50px;
    --dfOutputBackgroundColor: #ffffff;
    --dfOutputBorderSize: 2px;
    --dfOutputBorderColor: #000000;
    --dfOutputBorderRadius: 50px;
    --dfOutputRight: -12px;
    --dfOutputHeight: 10px;
    --dfOutputWidth: 10px;
    --dfOutputHoverBackgroundColor: null;
    --dfOutputHoverBorderSize: 2px;
    --dfOutputHoverBorderColor: #000000;
    --dfOutputHoverBorderRadius: 50px;
    --dfLineWidth: 2px;
    --dfLineColor: #4682b4;
    --dfLineHoverColor: #4682b4;
    --dfLineSelectedColor: #43b993;
    --dfRerouteBorderWidth: 2px;
    --dfRerouteBorderColor: #000000;
    --dfRerouteBackgroundColor: #ffffff;
    --dfRerouteHoverBorderWidth: 2px;
    --dfRerouteHoverBorderColor: #000000;
    --dfRerouteHoverBackgroundColor: #ffffff;
    --dfDeleteDisplay: block;
    --dfDeleteColor: rgba(194, 10, 10, 1);
    --dfDeleteBackgroundColor: rgba(255, 255, 255, 1);
    --dfDeleteBorderSize: 2px;
    --dfDeleteBorderColor: rgba(150, 18, 18, 1);
    --dfDeleteBorderRadius: 50px;
    --dfDeleteTop: -15px;
    --dfDeleteHoverColor: #000000;
    --dfDeleteHoverBackgroundColor: #ffffff;
    --dfDeleteHoverBorderSize: 2px;
    --dfDeleteHoverBorderColor: #000000;
    --dfDeleteHoverBorderRadius: 50px;
}

#drawflow {
    background: var(--dfBackgroundColor);
    background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
    background-image: var(--dfBackgroundImage);
}

.drawflow .drawflow-node {
    display: var(--dfNodeType);
    background: var(--dfNodeBackgroundColor);
    color: var(--dfNodeTextColor);
    border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
    border-radius: var(--dfNodeBorderRadius) !important;
    min-height: var(--dfNodeMinHeight);
    width: auto;
    min-width: var(--dfNodeMinWidth);
    padding-top: var(--dfNodePaddingTop);
    padding-bottom: var(--dfNodePaddingBottom);
    -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
    box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
}

    .drawflow .drawflow-node:hover {
        background: var(--dfNodeHoverBackgroundColor);
        color: var(--dfNodeHoverTextColor);
        border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
        border-radius: var(--dfNodeHoverBorderRadius) !important;
        -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
        box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
    }

    .drawflow .drawflow-node.selected {
        background: var(--dfNodeSelectedBackgroundColor);
        color: var(--dfNodeSelectedTextColor);
        border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBorderColor);
        border-radius: var(--dfNodeSelectedBorderRadius) !important;
        -webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
        box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
    }

    .drawflow .drawflow-node .input {
        left: var(--dfInputLeft);
        background: var(--dfInputBackgroundColor);
        border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
        border-radius: var(--dfInputBorderRadius) !important;
        height: var(--dfInputHeight);
        width: var(--dfInputWidth);
    }

        .drawflow .drawflow-node .input:hover {
            background: var(--dfInputHoverBackgroundColor);
            border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
            border-radius: var(--dfInputHoverBorderRadius) !important;
        }

    .drawflow .drawflow-node .outputs {
        float: var(--dfNodeTypeFloat);
    }

    .drawflow .drawflow-node .output {
        right: var(--dfOutputRight);
        background: var(--dfOutputBackgroundColor);
        border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
        border-radius: var(--dfOutputBorderRadius) !important;
        height: var(--dfOutputHeight);
        width: var(--dfOutputWidth);
    }

        .drawflow .drawflow-node .output:hover {
            background: var(--dfOutputHoverBackgroundColor);
            border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
            border-radius: var(--dfOutputHoverBorderRadius) !important;
        }

.drawflow .connection .main-path {
    stroke-width: var(--dfLineWidth);
    stroke: var(--dfLineColor);
}

    .drawflow .connection .main-path:hover {
        stroke: var(--dfLineHoverColor);
    }

    .drawflow .connection .main-path.selected {
        stroke: var(--dfLineSelectedColor);
    }

.drawflow .connection .point {
    stroke: var(--dfRerouteBorderColor);
    stroke-width: var(--dfRerouteBorderWidth);
    fill: var(--dfRerouteBackgroundColor);
}

    .drawflow .connection .point:hover {
        stroke: var(--dfRerouteHoverBorderColor);
        stroke-width: var(--dfRerouteHoverBorderWidth);
        fill: var(--dfRerouteHoverBackgroundColor);
    }

.drawflow-delete {
    display: var(--dfDeleteDisplay);
    color: var(--dfDeleteColor);
    background: var(--dfDeleteBackgroundColor);
    border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
    border-radius: var(--dfDeleteBorderRadius) !important;
}

.parent-node .drawflow-delete {
    top: var(--dfDeleteTop);
}

.drawflow-delete:hover {
    color: var(--dfDeleteHoverColor);
    background: var(--dfDeleteHoverBackgroundColor);
    border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
    border-radius: var(--dfDeleteHoverBorderRadius) !important;
}