/* CHART */
.bg-light-green {
    background-color: #aef465;
}

.bg-light-black {
    background-color: #4c4d4c;
    color: white;
}

#chart .card-header a,
#chart .card-header a:link,
#chart .card-header a:visited {
    text-decoration: underline dotted!important;
    color: inherit!important;
}

#chart .card-header a:hover {
    text-decoration: underline solid!important;
    color: inherit!important;
}

#chart {
    width: 1500px;
    text-align: center;
    margin: 100px;
}

.flow-node {
    position: relative;
    width: 450px;
    margin: auto;
}

.flow-node-435 {
    width: 435px;
    margin: auto;
}

.flow-node-wide {
    width: 770px;
}

.flow-node-widest {
    width: 100%;
}

.flow-node .card {
    margin: auto;
}

.columns {
    display: flex;
}

.columns-column {
    position: relative;
}

.columns-column + .columns-column {
    margin-left: 75px;
}

.column-half {
    width: 180px;
}

.column-1 {
    width: 450px;
}

.column-2 {
    width: 975px;
}

.column-3 {
    width: 100%;
}

/* ARROWS */
.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
    margin: auto;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid black;
}

.arrow-in-right {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: -10px;
}

.arrow-in-left {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: -10px;
}

/* LINE DOWN */
.line-down {
    position: relative;
    width: 100px;
    margin: auto;
}

.line-down div.line {
    font-size: 0;
    width: 2px;
    height: 50px;
    color: #fff;
    background-color: #000;
    margin: auto;
}

.line-down.l-2 div.line {
    height: 100px;
}

.line-down div.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
    margin: auto;
}

.line-down div.comment {
    position: absolute;
    top: 0px;
    width: max-content;
    white-space: nowrap;
    height: 50px;
    line-height: 50px;
}

.line-down.l-2 div.comment {
    height: 100px;
    line-height: 100px;
}

.line-down div.comment-left {
    right: 50%;
    margin-right: 10px;
    text-align: right;
}

.line-down div.comment-right {
    left: 50%;
    margin-left: 10px;
    text-align: left;
}

div.comment span {
    padding: 10px;
}

/* LINES ACROSS */
.line-across-1-4 {
    position: relative;
    font-size: 0;
    width: 790px;
    height: 2px;
    color: #fff;
    background-color: #000;
    margin-left: 224px;
    margin-right: 486px;
}

.line-across-1-5 {
    position: relative;
    font-size: 0;
    width: 1052px;
    height: 2px;
    color: #fff;
    background-color: #000;
    left: 50%;
    margin-left: -526px;
}

.line-across-3-5 {
    position: relative;
    font-size: 0;
    width: 527px;
    height: 2px;
    color: #fff;
    background-color: #000;
    left: 50%;
    margin-left: -264px;
}

.line-out-right {
    position: absolute;
    top: 50%;
    width: 264px;
    left: 50%;
}

.line-out-right div.line {
    font-size: 0;
    height: 2px;
    color: #fff;
    background-color: #000;
}

.line-out-right div.comment {
    position: absolute;
    left: 50%;
    width: 264px;
    text-align: center;
    white-space: nowrap;
}

.line-out-right div.comment-above {
    bottom: 10px;
}

.line-in-left {
    position: absolute;
    top: 50%;
    width: 264px;
    left: -39px;
}

.line-in-left div.line {
    font-size: 0;
    height: 2px;
    color: #fff;
    background-color: #000;
}

.line-in-left div.arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
    left: 142px;
    position: relative;
    top: -11px;
}