/*

azul estadão:   #006194
barra estadão:  #393b41
azul política:  #5C869C
azul escuro:    #023d5d
verde:          #8bbd4c
vermelho:       #e6535f

*/

.chart {
    padding: 0 1.6rem;
}

.chart nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.evolution {
    display: flex;
    flex-direction: column;
    max-width: 55rem;
    margin: 0 auto;
}

.evolution {
    
}

.evolution .party {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;

}

.evolution .party {
    margin-top: 10.4rem;
}

.evolution .info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-left: 3.2rem;
}

.evolution .info ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.evolution .info ul li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 75%;
}

.evolution .info ul li:first-child {
    font-size: 100%;
    font-weight: bold;
}

.evolution .bars {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    min-height: 10.4rem !important;
    min-width: 10.4rem;
}

.evolution .bar {
    width: 3.2rem;
    cursor: pointer;
}

.number {
    display: flex;
    justify-content: center;
    transform: translateY( -100% );
    font-size: 66.666%;
}

.evolution .bar .year-info {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 3.2rem;
    font-size: 66%;
    text-align: center;
    line-height: 2;
}

.evolution .relative.perfomance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 66%;
    text-align: center;
}

.year {
    padding-top: .6rem;
    opacity: .5;
}

.obs {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    opacity: .5;
    margin-top: .6rem;
}

.obs h3 {
    margin: 0 0 .6rem;
}

.obs p {
    margin: 0;
}

.numbers {
    display: none;
}

.evolution .candidates {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #e2e2e2;
    transition: height .3s;
}

.evolution .candidates > div {

}

.evolution .rounds {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #e2e2e2;
    transition: height .3s;
}

.evolution .round1 {
    background: #5C869C;
}

.evolution .round2 {
    background: #393b41;
}

.evolution.relative .candidates[data-participated="true"] {
    height: 10.4rem !important;
}

.evolution:not(.relative) .numbers .relative.perfomance {
    opacity: 0;
    transition: opacity .3s;
}

.evolution .numbers .relative.perfomance {
    opacity: 1;
    transition: opacity .3s;
    transition-delay: .3s;
    transform: translateY( 100% );
}

.evolution.relative .numbers .roundall,
.evolution.relative .numbers .candidates,
.evolution.relative .perfomance,
.evolution.relative .numbers .round1,
.evolution.relative .round2 .number {
    opacity: 0;
}

.evolution.relative .numbers .relative.perfomance {
    opacity: 1;
}

.evolution .switch label {
    cursor: pointer;
    display: inline-block;
}

.evolution.relative .switch label:first-child span {
    opacity: .25;
}

.evolution:not(.relative) .switch label:last-child span {
    opacity: .25;
}

.evolution .bar + .bar {
    margin-left: .4rem;
}

.increase {
    color: #8bbd4c;
}

.decrease {
    color: #e6535f;
}

.constant {
    opacity: .5;
}

.evolution .caption > div {
    display: flex;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    z-index: 2;
}

.evolution .caption ul {
    display: flex;
    margin: 0;
    padding: 1.2rem 0;
    list-style-type: none;
    pointer-events: none;
}

.evolution .caption li span {
    display: inline-block;
    height: 1.2rem;
    width: 1.2rem;
    min-width: 1.2rem;
    background: red;
    border-radius: 50%;
    margin-right: .6rem;
}

.evolution .caption li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /*width: 100%;*/
    font-size: 66.666%;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba( 0, 0, 0, .5 );
    line-height: 1.5;
}

.evolution .caption li + li {
    margin-left: 2.4rem;
}

.evolution .caption li:nth-child( 1 ) span {
    background: #cfcfcf;
}

.evolution .caption li:nth-child( 2 ) span {
    background: #5C869C;
}

.evolution .caption li:nth-child( 3 ) span {
    background: #393b41;
}

.sticky .evolution .caption > div {
    position: fixed;
    top: 0;
}

.numbers {
    display: flex;
    align-self: center;
    flex-direction: column;
    margin-bottom: .6rem;
    transition: opacity .3s;
}

.numbers span {
    background: transparent !important;
    font-size: 66.666%;
    line-height: 1.5;
    text-align: center;
}

.numbers .candidates {
    color: #999;
}

.numbers .round1,
.numbers .roundall {
    color: #5C869C;
    z-index: 1;
}

[data-tiny="true"] .numbers .round1,
[data-tiny="true"] .numbers .roundall {
    text-shadow: -1px -1px #fff, 1px 1px #fff, -1px 1px #fff, 1px -1px #fff;
}

.numbers .round2 {
    color: #393b41;
}

.candidates .round2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.candidates .round2 .number {
    width: 100%;
    font-size: 50%;
    display: block;
    text-align: left;
    margin-left: 1.4rem;
    transform: translateX( 100% );
}

[data-elected]:not([data-elected="0"]) {
    min-height: .1rem;
}

@media ( max-width: 480px ) {

    .evolution .caption ul {
        flex-direction: column;
    }

    .evolution .caption li + li {
        margin-left: 0;
        margin-top: 1.2rem;
    }
}