.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}

.flowchart-ivr .ivrnode {
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.8;
    width: 110px;
    height: 80px;
    padding: 20px 5px 20px 5px;
    border: 1px dotted lightslategray;
    border-right: 10px solid lightslategray;
    cursor: pointer;
    text-align: center;
    z-index: 20;
    position: absolute;
    background-color: #eeeeef;
    color: black;
    font-family: helvetica, sans-serif;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.flowchart-ivr .ivrnode .nodeLabel {
    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    height: 32px;
}

.flowchart-ivr .ivr-language-selection .nodeLabel,
.flowchart-ivr .ivr-product-selection .nodeLabel,
.flowchart-ivr .ivr-prompt-selection .nodeLabel,
.flowchart-ivr .msg-language-selection .nodeLabel,
.flowchart-ivr .msg-product-selection .nodeLabel,
.flowchart-ivr .msg-prompt-selection .nodeLabel {
    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    height: 180px;
}

.flowchart-ivr .ivrnode:hover .nodeLabel {
    overflow: visible;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
    height: auto;
    display: initial;
    background-color: #eeeeef;
}

.flowchart-ivr .deleteNodeIcon {
    width:16px;
    height:16px;
    left: 0;
    top: 0;
    position: absolute;
    margin-left: -6px;
    margin-top: -6px;
    background-color: #fff;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: #cc0000;
}
.flowchart-ivr .deleteNodeIcon:hover {
    font-size: 1.5em;
    margin-left: -10px;
    margin-top: -10px;
    width: 24px;
    height: 24px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-color: #fff;
}

.flowchart-ivr .editNodeIcon {
    width:16px;
    height:16px;
    left: 20px;
    top: 0;
    position: absolute;
    margin-left: -6px;
    margin-top: -6px;
    background-color: #fff;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #cc0000;
}
.flowchart-ivr .editNodeIcon:hover {
    font-size: 1.5em;
    width: 24px;
    height: 24px;
    margin-left: -10px;
    margin-top: -10px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #fff;
}

.deleteEdgeIcon {
    width:24px;
    height:28px;
    background-color: #fff;
    -moz-border-radius: 14px;
    border-radius: 14px;
    color: #cc0000;
    z-index: 19;
}

.bg-white {
    background-color: #fff;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

.flowchart-ivr .ivr-language-selection,
.flowchart-ivr .ivr-product-selection,
.flowchart-ivr .ivr-prompt-selection,
.flowchart-ivr .msg-language-selection,
.flowchart-ivr .msg-product-selection,
.flowchart-ivr .msg-prompt-selection {
    width: 123px;
    height: 252px;
    border-right: 23px solid lightslategray;
}

.flowchart-ivr .msg-kb,
.flowchart-ivr .msg-virtualagent {
    width: 123px;
    height: 100px;
    border-right: 23px solid lightslategray;
}

.flowchart-ivr .ivr-reroute,
.flowchart-ivr .ivr-branch,
.flowchart-ivr .ivr-non-operation,
.flowchart-ivr .ivr-list,
.flowchart-ivr .ivr-collect-digit,
.flowchart-ivr .ivr-database,
.flowchart-ivr .ivr-webservice,
.flowchart-ivr .msg-branch,
.flowchart-ivr .msg-non-operation,
.flowchart-ivr .msg-list,
.flowchart-ivr .msg-collect-text,
.flowchart-ivr .msg-webservice {
    width: 123px;
    height: 80px;
    border-right: 23px solid lightslategray;
}

.flowchart-ivr .ivr-hangup,
.flowchart-ivr .msg-end {
    border:1px solid lightslategray;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding:10px 0 0 0;
    background-color: #ff4444;
    color: white;
    font-weight: bold;
}

.flowchart-ivr .ivr-start,
.flowchart-ivr .oscript-start,
.flowchart-ivr .msg-start {
    border:1px solid lightslategray;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding:10px 0 0 0;
    background-color: #007E33;
    color: white;
    font-weight: bold;
}

.flowchart-ivr .ivrnode:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
}

.flowchart-ivr .active {
    border-top: 1px dotted green;
    border-left: 1px dotted green;
    border-bottom: 1px dotted green;
}

.flowchart-ivr .hover {
    border-top: 1px dotted red;
    border-left: 1px dotted red;
    border-bottom: 1px dotted red;
}

.flowchart-ivr .jtk-connector {
    z-index: 4;
}

.flowchart-ivr .jtk-endpoint, 
.endpointTargetLabel, 
.endpointSourceLabel {
    z-index: 21;
    cursor: pointer;
    font-weight: bold;
    color: darkslategray;
}

.flowchart-ivr .jtk-endpoint, 
.endpointTargetLabelIcon, 
.endpointSourceLabelIcon {
    z-index: 21;
    cursor: pointer;
    font-family: 'FontAwesomeLatest';
    font-weight: 900;
    color: darkslategray;
}

.flowchart-ivr .aLabel {
    background-color: white;
    color: #444;
    z-index: 19;
    border: 1px dotted gray;
    opacity: 0.8;
    cursor: pointer;
    min-width:20px;
    text-align: center;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0 4px;
    white-space: nowrap;
    font-size: 0.8em;
    font-weight: bold;
    transform: translate(0%, -50%) !important;
}

.flowchart-ivr .aLabel.active {
    background-color: red;
    color: #fff;
    opacity: 1;
}

.aLabelFontAwesome {
    font-family: "FontAwesomeLatest","Helvetica Neue", Helvetica,Arial,sans-serif !important;
    font-weight: 900;
}

.flowchart-ivr .aLabel.jtk-hover {
    background-color: #5C96BC;
    color: white;
    border: 1px solid white;
}

.flowchart-ivr .jtk-connected {
    border-top: 2px solid lightslategray;
    border-left: 2px solid lightslategray;
    border-bottom: 2px solid lightslategray;
}

.jtk-drag {
    outline: 4px solid pink !important;
}

path, .jtk-endpoint {
    cursor: pointer;
}

.jtk-overlay {
    background-color:transparent;
}

.toolbar {
    background-color: white;
    width: 95px;
    border-radius: 5px;
    border:1px solid lightslategray;
    padding: 7px;
    color: #FFF;
    margin-right: 10px;
    position: relative;
    z-index: 100;
    display: none;
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
}
.toolbar i {
    background-color: #0099CC;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px 0 2px 2px;
    width: 21px;
    height: 21px;
    padding: 4px;
}

.controls {
    background-color: white;
    width: 120px;
    border-radius: 5px;
    border:1px solid lightslategray;
    padding: 7px;
    color: #FFF;
    margin-right: 10px;
    position: absolute;
    z-index: 100;
    display: none;
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
}
.controls:before,
.controls:after {
    content:"";
    position: absolute;
    right: 99%;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 10px solid white;
    border-bottom: 7px solid transparent;
    z-index: 101;
}
.controls:before {
    right: 101%;
    z-index: 100;
    border-right-color: lightslategray;
}
.controls i, 
.controls i.flowtype-ivr {
    background-color: #0099CC;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px 0 2px 2px;
    width: 21px;
    height: 21px;
    padding: 4px;
}
.controls i.flowtype-oscript {
    background-color: #007E33;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px 0 2px 2px;
    width: 21px;
    height: 21px;
    padding: 4px;
}
.controls i.flowtype-msg {
    background-color: #007E33;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px 0 2px 2px;
    width: 21px;
    height: 21px;
    padding: 4px;
}
.controls i:hover {
    background-color: #3F729B !important;
}
#btnHangup {
    background-color: #ff4444;
}
.endpointLabelWhite {
    color: #fff;
}
.form-section {
    background-color:#eee; 
    padding:20px 10px 10px 10px;
    border-radius: 10px;
    display: block;
}
.ivr-form-section {
    background-color:#eee; 
    padding:20px 10px 10px 10px !important;
    border-radius: 10px;
}
.ivr-form-section .row section:nth-child(odd) {
    margin-top: 0.5em;
    text-align: center;
}
.title {
    margin: 0 15px 0px 20px;
    font-weight: bold;
}
.editMode {
    background-color: cornsilk;
}
.modal-open .modal {
    overflow: hidden;
}
.modal-header{      
    cursor: move;
}
.modal-scroll-body {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}
i.clickable {
    background-color: #0099CC;
    border-radius: 3px;
    cursor: pointer;
    padding: 2px;
    width: 20px;
    color: white;
}
.maincontent {
    display: block;
}
.editorcontent {
    display: none;
}
.seqeditorcontent {
    display: none;
}
.flowchart-ivr .group-container {
    position: absolute;
    cursor: move;
    border: 1px dashed steelblue;
    display: block;
}
.flowchart-ivr .group-container div.title {
    background-color: steelblue;
    font-size: 1em;
    height: 1.5em;
    color: #fff;
    padding: 3px;
    text-align: center;
}
.flowchart-ivr .group-container.jtk-group-expanded .ivrnode {
    display: block;
}
.flowchart-ivr .group-container.jtk-group-collapsed .ivrnode {
    display: none;
}
.flowchart-ivr .group-container.jtk-group-collapsed {
    width: 150px !important;
    height: 120px !important;
    background-color: azure;
}
.flowchart-ivr .group-container .deleteGroupIcon {
    width:16px;
    height:16px;
    left: 0;
    top: 0;
    position: absolute;
    margin-left: 0px;
    margin-top: -18px;
    background-color: transparent;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: steelblue;
    cursor: pointer;
}
.flowchart-ivr .group-container .deleteGroupIcon:hover {
    font-size: 1.5em;
    margin-left: -4px;
    margin-top: -22px;
    width: 24px;
    height: 24px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    color: darkblue;
    background-color: transparent;
    cursor: pointer;
}
.flowchart-ivr .group-container .editGroupIcon {
    width:16px;
    height:16px;
    left: 22px;
    top: 0;
    position: absolute;
    margin-left: 0px;
    margin-top: -18px;
    background-color: transparent;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: steelblue;
    cursor: pointer;
}
.flowchart-ivr .group-container .editGroupIcon:hover {
    font-size: 1.5em;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    margin-top: -22px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: darkblue;
    background-color: transparent;
    cursor: pointer;
}
.flowchart-ivr .group-container .cloneGroupIcon {
    width:16px;
    height:16px;
    left: 44px;
    top: 0;
    position: absolute;
    margin-left: 0px;
    margin-top: -18px;
    background-color: transparent;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: steelblue;
    cursor: pointer;
}
.flowchart-ivr .group-container .cloneGroupIcon:hover {
    font-size: 1.5em;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    margin-top: -22px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: darkblue;
    background-color: transparent;
    cursor: pointer;
}
.flowchart-ivr .group-container .minMaxGroupIcon {
    width:16px;
    height:16px;
    right: 0px;
    top: 0;
    position: absolute;
    margin-left: 0px;
    margin-top: -18px;
    background-color: transparent;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: steelblue;
    cursor: pointer;
}
.flowchart-ivr .group-container .minMaxGroupIcon:hover {
    font-size: 1.5em;
    width: 24px;
    height: 24px;
    margin-right: -4px;
    margin-top: -22px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: darkblue;
    background-color: transparent;
    cursor: pointer;
}
.flowchart-ivr .group-container .unGroupIcon {
    width: 16px;
    height: 16px;
    right: 24px;
    top: 0;
    position: absolute;
    margin-left: 0px;
    margin-top: -18px;
    background-color: transparent;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: steelblue;
    cursor: pointer;
}
.flowchart-ivr .group-container .unGroupIcon:hover {
    font-size: 1.5em;
    margin-right: -4px;
    margin-top: -22px;
    width: 24px;
    height: 24px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    color: darkblue;
    background-color: transparent;
    cursor: pointer;
}
.flowchart-ivr .group-container .createGroupIcon {
    width:16px;
    height:16px;
    right: 0px;
    top: 0;
    position: absolute;
    margin-left: 0px;
    margin-top: -18px;
    background-color: transparent;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: steelblue;
    cursor: pointer;
}
.flowchart-ivr .group-container .createGroupIcon:hover {
    font-size: 1.5em;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    margin-top: -22px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: darkblue;
    background-color: transparent;
    cursor: pointer;
}
.flowchart-ivr .resize-handle {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid steelblue;
    background: transparent;
}
.flowchart-ivr .resize-handle.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.flowchart-ivr .resize-handle.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.flowchart-ivr .resize-handle.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.flowchart-ivr .resize-handle.resize-handle-se {
    bottom: -3px;
    right: -3px;
    cursor: se-resize;
    border-top: 0;
    border-left: 0;
}