div.show-branching-container {
    opacity: 1 !important;
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 70px;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


div.button-show-branching {
    margin: 10px;
    left: 0;
    min-width: 80px;
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: hsl(0, 0%, 100%) !important;
    background-color: hsl(195, 100%, 35%) !important;
    border: solid 1px hsl(195, 100%, 35%) !important;
    position: relative;
    text-align: center;
    width: auto;
}

div.button-show-branching:hover {
    background-color: hsla(195, 100%, 35%, 0.9) !important;
}

/*branch node icons*/

div.branch-section-node, .branch-info-node, .branch-end-node {
    cursor: pointer;
    pointer-events: all;
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: auto;
    border-radius: 5px;
    margin: 10px;
    border: 2px solid hsl(195, 100%, 35%) !important;
    background-color: hsl(0, 0%, 100%);
    color: hsl(195, 100%, 35%) !important;;
}

.branch-info-node, .branch-end-node {
    cursor: default !important;
}

div.branch-section-node p {
    color: hsl(195, 100%, 35%) !important;;

}

div.branch-node {
    cursor: pointer;
    border-radius: 5px;
    align-items: center;
    color: hsl(0, 0%, 0%);
    position: relative;
    display: flex;
    justify-content: space-evenly;
    margin: 10px;
    border: 2px solid hsl(0, 0%, 0%);
    min-height: 60px;
    min-width: 100px;
    z-index: 105;
}

div.branch-node > div, div.branch-node > p {
    pointer-events: none !important;
}

div.branch-node:hover {
    background-color: hsl(0, 0%, 90%);
}

div.branch-connector {}

p.branch-node-label {
    line-height: 60px;
    color: hsl(0, 0%, 0%);
}

p.branch-line-label {
    display: none;
    cursor: pointer;
    pointer-events: all ;
    position: absolute;
    font-size: 10pt;
    color: hsl(0, 0%, 60%);
    word-break: unset !important;
    white-space: nowrap;
    top: -15px;
}

img.branch-node-img {
    pointer-events: none;
    opacity: 0.5;
    display: block;
    position: relative;
    height: 23px;
    width: 23px;
}

/*question flow tooltip*/

div.question-flow-tooltip-container {
}


div.question-flow-tooltip {
    z-index: 101;
    background-color: hsl(0, 0%, 100%);
    display: block;
    position: absolute;
    max-width: 30%;
    /*max-height: calc(100% - 95px);*/
    width: auto;
    height: auto;
    /*min-height: 43px;*/
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    overflow-y: auto;
    color: black;
    /*bottom: 0;*/
}


/*rescale question view mode for info panel */
div.question-flow-tooltip p.questionNumber, div.question-flow-tooltip p.questionType {
    font-size: 14pt;
    color: hsl(0, 0%, 40%);
    padding: 5px !important;
    top: 5px;
    min-height: 30px;

    /*padding: 10px;*/
}

div.question-flow-tooltip p.questionType {
    top: 15px;
    font-size: 12pt;
    color: hsl(0, 0%, 40%);
}

div.question-flow-tooltip p {
    font-size: 10pt;
    min-height: 25px;
}

div.question-flow-tooltip p.goto {
    font-size: 10pt;
}

div.question-flow-tooltip p.questionText {
    display: flex;
    align-items: center;
    padding: 5px 10px !important;
}

div.question-flow-tooltip td {
    padding: 5px;
}

div.question-flow-tooltip div.questionnaireOptions {
    padding: 0px;
    display: flex;
    flex-direction: column;
}

div.question-flow-tooltip p {
    width: auto;
}

/*div.question-flow-tooltip td {*/
/*    max-width: ;*/
/*}*/

div.question-flow-tooltip div.optionsWrapper {
    padding: 6px;
}

div.question-flow-tooltip div.questionOptionShape {
    height: 20px;
    width: 20px;
}

div.question-flow-tooltip div.answerBubbleViewMode {
    top: 3px;
    height: 20px;
    width: 20px;
}

div.question-flow-tooltip p.goto-label  {
    margin-left: 10px;
    max-width: 87px;
}


/*question flow info panel*/
/*info panels that display to left of question flow diagram*/


div.question-flow-info-panel {
    display: block;
    position: absolute;
    max-height: calc(100% - 100px);
    top: 15px;
    left: 15px;
    width: 30%;
    height: auto;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    overflow-y: scroll;
    pointer-events: all;
    z-index: 2;
    background-color: hsla(0, 0%, 100%, 0.65);
}

div.question-flow-info-panel {

}

/*rescale question view mode for info panel */
div.question-flow-info-panel p.questionNumber {
    font-size: 16pt;
}

div.question-flow-info-panel p.questionType {
    top: 12px;
    font-size: 14pt;
}

div.question-flow-info-panel p {
    font-size: 12pt;
}

div.question-flow-info-panel p.goto {
    font-size: 12pt;
}

div.question-flow-info-panel p.questionText {
    padding: 20px 7px !important;
}

div.question-flow-info-panel td {
    padding: 5px;
}

div.question-flow-info-panel div.questionnaireOptions {
    padding: 0px;
    display: flex;
    flex-direction: column;
}

div.question-flow-info-panel p {
    width: auto;
}

div.question-flow-info-panel div.optionsWrapper {
    padding: 6px;
}

div.question-flow-info-panel div.questionOptionShape {
    height: 20px;
    width: 20px;
}

div.question-flow-info-panel div.answerBubbleViewMode {
    top: 3px;
    height: 20px;
    width: 20px;
}

div.question-flow-info-panel p.goto-label  {
    margin-left: 0;
    max-width: 87px;
}

/*tool tip*/

.branch-tooltip-close-icon {
    cursor: pointer;
    width: 25px;
    height: 25px;
    fill: hsl(0, 0%, 40%);
    padding: 7px;
}

div.branch-tooltip-icon:hover {
    background-color: hsl(0, 0%, 90%);
}

div.branch-tooltip-icon {
    cursor: pointer;
    pointer-events: all;
    display: flex;
    position: absolute;
    width: 25px;
    height: 25px;
    font-size: 16pt;
    font-weight: bold;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    align-items: center;
    justify-content: center;
    top: 5px;
    right: 5px;
    color: hsl(0, 0%,40%);
    border: 2px solid hsl(0, 0%, 80%);
    border-radius: 20px;
}

div.branch-tooltip-header {
    display: block;
    width: 100%;
    position: relative;
    top: 0;
    height: 39px;
}

p.tooltip-header-label {
    font-size: 15pt;
    width: calc(100% - 60px);
    position: relative;
    line-height: 43px;
    display: block;
    white-space: normal;
    color: hsl(0, 0%, 0%);
    text-align: left;
    left: 0;
    right: 25px;
    padding: 0 10px;
}

p.tooltip-content-label {
    text-align: left;
    line-height: 135%;
    font-size: 12pt;
    color: hsl(0, 0%, 0%);
    position: relative;
    display: block;
    height: auto;
}

div.branch-tooltip-contents {
    padding: 10px;
    display: block;
    height: auto;
    position: relative;
}

div.branch-goto-tooltip-contents {
    width: 100%;
    padding: 10px 0;
    display: table;
    height: auto;
    position: relative;
}

.tooltip-collapsed div.branch-goto-tooltip-contents,
.tooltip-collapsed div.branch-tooltip-contents {
    display: none;
}

/*graphics*/

div.branch-line-wrapper, div.branch-line-wrapper-clone {
    position: absolute;
}

.branch-node-selected, .branch-node-selected:hover {
    background-color: hsl(150, 100%, 55%) !important;
}

div.branch-line-wrapper polyline, div.branch-line-wrapper polygon, div.branch-line-wrapper-clone polyline {
    cursor: default;
    stroke: hsl(0, 0%, 70%);
    fill: none;
    stroke-width: 3;
    pointer-events: none !important;
}

div.branch-line-wrapper-clone polyline, div.branch-line-wrapper-clone polygon {
    pointer-events: stroke !important;
    cursor: pointer;
    stroke: hsl(0, 0%, 70%);
    fill: none;
    stroke-width: 25;
    opacity: 0 !important;
    z-index: 1;
}

svg.branch-line {
    margin-left: 52px;
    position: absolute;
    display: block;
    border: 3px;
    pointer-events: none !important;
    cursor: default !important;
}


div.branch-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid hsl(0, 0%, 70%);
}

.branch-section-arrow-right {
    left: -109px !important;
}

.branch-section-arrow-left {
    left: 102px !important;
}

div.branch-section-arrow {}

div.branch-arrow-left, div.branch-arrow-right {
    position: absolute;
    width: 0;
    height: 0;
    left: 51px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 7px solid hsl(0, 0%, 70%);
}

div.branch-arrow-right {
    left: -59px;
    border-right: none;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid hsl(0, 0%, 70%);
}

/*svg.branch-selected + div.branch-arrow-right {*/
/*    border-left: 8px solid hsl(0, 0%, 0%) !important;*/
/*}*/

/*svg.branch-selected + div.branch-arrow-left {*/
/*    border-right: 8px solid hsl(0, 0%, 0%) !important;*/
/*}*/

svg.branch-selected + div.branch-arrow-right {
    border-left: 8px solid hsl(150, 100%, 35%) !important;
}

svg.branch-selected + div.branch-arrow-left {
    border-right: 8px solid hsl(150, 100%, 35%) !important;
}

svg.branch-selected + p {
    display: block;
}

svg.branch-hover + div.branch-arrow-right {
    border-left: 8px solid hsl(0, 0%, 0%) !important;
}

svg.branch-hover + div.branch-arrow-left {
    border-right: 8px solid hsl(0, 0%, 0%) !important;
}


svg.branch-hover + p {
    display: block;
}

div.branch-line-wrapper svg.branch-faded > polyline, div.branch-line-wrapper svg.branch-faded > polygon {
    opacity: 0.3;
    stroke: hsl(0, 0%, 70%);
}

svg.branch-faded + div.branch-arrow-right, svg.branch-faded + div.branch-arrow-left {
    opacity: 0.3 !important;
}

svg.branch-faded + div.branch-arrow-right {
    border-right-color: hsl(0, 0%, 70%) !important;
}

svg.branch-faded + div.branch-arrow-left {
    border-left-color: hsl(0, 0%, 70%) !important;
}

.show-branching-container polygon {
    stroke-width: 1 !important;
    fill: none;
}

svg.branch-selected:hover > polyline, svg.branch-selected:hover > polygon,
svg.branch-hover > polyline, svg.branch-hover > polygon {
    stroke: hsl(0, 0%, 0%) !important;
    opacity: 1;
    /*z-index: 10000;*/
}

svg.branch-selected > polyline, svg.branch-selected > polygon {
    stroke: hsl(150, 100%, 35%) !important;
}

svg.branch-selected.branch-hover > polyline {
    stroke: hsl(0, 0%, 0%) !important;
    opacity: 1;
}


/* ERROR LINE STYLING */


/*.branch-line-error > svg.branch-hover + div.branch-arrow-left {*/
/*    border-right: 8px solid hsl(0, 100%, 40%) !important;*/
/*}*/

/*.branch-line-error > svg.branch-hover + div.branch-arrow-right {*/
/*    border-right: 8px solid hsl(0, 100%, 40%) !important;*/
/*}*/


.branch-line-error polyline {
    stroke: hsl(0, 100%, 40%) !important;
}

.branch-line-error svg > polyline {
    stroke: hsl(0, 100%, 40%) !important;
    opacity: 1;
}

.branch-line-error svg.branch-faded > polyline {
    stroke: hsl(0, 100%, 70%) !important;
    z-index: 10;

    /*stroke: hsl(0, 100%, 40%) !important;*/
    /*opacity: 0.2 !important;*/
}


.branch-line-error div.branch-arrow-left,
.branch-line-error > svg.branch-hover + div.branch-arrow-left {
    border-right: 8px solid hsl(0, 100%, 40%) !important;
}
.branch-line-error div.branch-arrow-right,
.branch-line-error > svg.branch-hover + div.branch-arrow-right {
    border-left: 8px solid hsl(0, 100%, 40%) !important;
}

.branch-line-error > svg.branch-faded + div.branch-arrow-right {

}


.branch-line-error > svg.branch-faded + div.branch-arrow-left {
    border-right: 8px solid hsl(0, 100%, 70%) !important;
    z-index: 150;
    /*opacity: 0.5 !important;*/

}

.branch-line-error svg.branch-selected > polyline {
    stroke: hsl(0, 100%, 40%) !important;
    opacity: 1;
}

/*.branch-line-error div.branch-arrow-left, .branch-line-error div.branch-arrow-right {*/
/*    border-right: 8px solid hsl(0, 100%, 40%) !important;*/
/*}*/

.branch-line-error svg.branch-selected.branch-hover > polyline {
    stroke: hsl(0, 100%, 40%) !important;
    opacity: 1;
}

/*.branch-line-error >  div.branch-arrow-left,*/
/*.branch-line-error >  div.branch-arrow-right {*/
/*    border-right: 8px solid hsl(0, 100%, 40%) !important;*/
/*}*/

/*svg.branch-selected > polyline, svg.branch-selected > polygon {*/
/*    stroke: hsl(0, 0%, 0%) !important;*/
/*    opacity: 1;*/
/*}*/

.show-branching-container svg {
    pointer-events: none !important;
}

svg.branch-hover {
    pointer-events: none;
    stroke: hsl(0, 0%, 0%) !important;
    /*z-index: 100 !important;*/
}