#flow h1 {
    font-size: 3rem;
}

#flow {
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
}

#svgContainer {
    position: relative;
}

#svg-wrapper {
    border-bottom: 5px solid grey;
    padding-bottom: 5px;
}

#svg {
    background-color: #eff1f3;
}

#svg path {
    fill: none;
    /*stroke: black;*/
}

#flowDiagram {
    background-color: yellow;
}

.barRect {
    stroke: white;
}

.barRect:hover {
    stroke: rgba(255, 255, 255, 0.11);
}

.richBar {
    fill: #9cc291;
}

.poorBar {
    fill: #556455;
}

.richBarRight {
    fill: #f1e4ca;
}

.poorBarRight {
    fill: #faa500;
}

.mediumBar {
    fill: #699673;
}

.strongColor {
    opacity: 1;
    stroke: white;
    stroke-width: 1px;
}

.weakColor {
    opacity: 0.3;
}

.entry {
    rx: 3px;
    ry: 3px;
}

#tooltip {
    position: absolute;
    width: 200px;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 10;
}

#tooltip.hidden {
    display: none;
}

#tooltip p {
    margin: 0;
    font-family: Futura;
    font-size: 16px;
    line-height: 20px;
}

.hidden {
    opacity: 0;
    /*fill: red !important;*/
}

.counter {
    font-size: 18px;
}

#descriptions {
    width: 50px;
    opacity: 0;
}

#descriptions p{
    position: absolute;
    width: 200px;
    margin: -5px 0 0;
    background-color: #e5e5e52b;
    text-align: center;
}

#barChartText {
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
}

#barChartText span {
    padding: 1px 4px;
    border-radius: 2px;
}

#flow button.btn {
    background-color: #699673;
}

#source {
    text-align: right;
    margin-top: 3px;
}

#startButton {
    margin-top: -34px;
}