/*.tree-graph-container {
    overflow: scroll;
    max-height: 550px;
    max-width: 100%;
    margin-top: 20px;
    z-index: 5;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.tree-graph {
    color: #3e3e3e;
    width:100%;
    min-width: 2060px;
    min-height: 2060px;
    margin:0 auto;
    position: relative;
    scale: 0.5;
}

.zoom {
    height: 40px;
    border: 1px solid red;
    left: 32px;
    position: relative;
}

.tree-graph h2 {
    text-align: center;
}

.tree-graph .row {
    display: flex;
    flex-flow: row nowrap;
}

.tree-graph .row .column {
    padding:5px;
    flex: 1 0 20%;
    box-sizing: border-box;
    text-align:center;
    .row {
        gap: 20px;
        .column {
            padding:0px;
        }
    }
}

.tree-graph .row .column span {
    background: #fff;
    display:inline-flex;
    text-align:center;
    margin: 10px 3px;
    padding: 1rem;
    border: 1px solid #eaedf1;
    border-radius: 7px;
    font-size: 0.9375rem;
    flex-direction: column;
    min-width: 180px;
}

.tree-graph .row .column span[class^="answer-span-"]  {
    padding: 0.55rem 0.25rem;
    min-width: 130px;
}

.tree-graph .row .column span[class^="answer-span-"] > .buttons-container {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
}

.tree-graph .row .column span[class^="chapter-span-"] > .buttons-container {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
}

.tree-graph .row .column .add-button-span {
    min-width: unset;
    z-index: 1;
}

.tree-graph .row .column span .edit-chapter-button{
    display:inline-block;
    padding: 0.185rem 0.65rem;
    font-size: 0.8175rem;
    min-width: unset;
}

.tree-graph .row .column span .edit-answer-button{
    display:inline-block;
    padding: 0.185rem 0.65rem;
    font-size: 0.8175rem;
    min-width: unset;
}


connection {
    border: 3px solid #b51c29;
    border-radius: 50px;
    z-index: -1;
}*/






/*TEST*/


.tree-graph-container {
    overflow: scroll;
    max-height: 750px;
    max-width: 100%;
    min-width: 95%;
    margin-bottom: 20px;
    z-index: 5;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    background:
            linear-gradient(#f7f8f9, #f7f8f9) padding-box, /*this is your grey background*/
            linear-gradient(
                    #80CC11 90px,
                    #00C6B4 180px,
                    #0080BF 270px,
                    #ed3964 360px,
                    #FF9D29 100%
            ) border-box;
    border: 2px solid transparent;
    border-radius: 10px;
    box-shadow: 0 4px 16px 0 rgba(169, 184, 200, 0.15);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tree-graph-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.tree-graph-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.tree-graph {
    color: #3e3e3e;
    width:100%;
    min-width: 2060px;
    min-height: 2060px;
    margin:0 auto;
    position: relative;
    scale: 1;
}

.tree-fable-title {
    padding: 10px 55px;
    min-width: 130px;
    background: #ed3964;
    display:inline-flex;
    text-align:center;
    border: 1px solid #eaedf1;
    border-radius: 7px;
    font-size: 0.9375rem;
    flex-direction: column;
    color: #fff;
}


.tree-graph ul li .answer-span  {
    padding: 0.55rem 0.25rem;
    min-width: 130px;
    max-width: 300px;
    background: #fff;
    display:inline-flex;
    text-align:center;
    border: 1px solid #eaedf1;
    border-radius: 7px;
    font-size: 0.9375rem;
    flex-direction: column;
}
.tree-graph ul li .chapter-span  {
    background: #fff;
    display:inline-flex;
    text-align:center;
    padding: 1rem;
    border: 1px solid #eaedf1;
    border-radius: 7px;
    font-size: 0.9375rem;
    flex-direction: column;
    min-width: 180px;
    max-width: 360px;
}

.tree-graph ul li .answer-span > .buttons-container {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}

.tree-graph ul li .chapter-span > .buttons-container {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}


.tree-graph li .add-button-span {
    min-width: 180px;
    z-index: 1;
    float: unset;
}

.tree-graph ul .add-button-span.second-child span {
    position: relative;
    left: -3px !important;
}

.tree-graph ul .add-button-span span {
    position: relative;
    left: 3px;
}

.tree-graph .edit-chapter-button{
    display:inline-block;
    padding: 0.185rem 0.65rem;
    font-size: 0.8175rem;
    min-width: unset;
    background: #0080BF !important;
    color: white;
}

.tree-graph .delete-button{
    display:inline-block;
    padding: 0.185rem 0.65rem;
    font-size: 0.8175rem;
    min-width: unset;
}

.tree-graph .edit-answer-button{
    display:inline-block;
    padding: 0.185rem 0.65rem;
    font-size: 0.8175rem;
    min-width: unset;
    background: #0080BF !important;
    color: white;
}


.tree-graph ul {
    padding-top: 20px; position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree-graph li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree-graph li::before, .tree-graph li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 5px solid #ccc;
    width: 50%; height: 20px;
}
.tree-graph li::after{
    right: auto; left: 50%;
    border-left: 5px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree-graph li:only-child::after, .tree-graph li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree-graph li:only-child{ padding-top: 0;}


/*Remove left connector from first child and
right connector from last child*/
.tree-graph li:first-child::before, .tree-graph li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree-graph li:last-child::before{
    border-right: 5px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree-graph li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree-graph ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 5px solid #ccc;
    width: 0; height: 20px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/

/*Connector styles on hover*/
.tree-graph li div:hover+ul li::after,
.tree-graph li div:hover+ul li::before,
.tree-graph li div:hover+ul::before,
.tree-graph li div:hover+ul ul::before{
    border-color:  #94a0b4;
}