* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    font-family: Segoe UI;
    font-size: 12px;
    background-color: #fff;
}

.ellipsis {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.template,
.hide {
    display: none;
}

.hidePage {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url("images/over.png") repeat center center;
    z-index: 999;
}

    .hidePage .imgHidePage {
        position: relative;
        left: calc(50% - 128px);
        top: calc(50% - 128px);
        width: 256px;
        height: 256px;
        background: url("images/notShown.png") no-repeat center center;
    }

.header {
    position: relative;
    height: 100px;
}

    .header .navigBar {
        position: relative;
    }

    .header #btPrevious {
        position: absolute;
        z-index: 1;
        top: 5px;
        right: 70px;
        width: 60px;
        height: 60px;
        background: url("images/btPrevious_60.png") no-repeat center center;
        cursor: pointer;
    }

        .header #btPrevious:hover {
            background: url("images/btPreviousOver_60.png") no-repeat center center;
        }

        .header #btPrevious:active {
            background: url("images/btPreviousClick_60.png") no-repeat center center;
        }

    .header #btNext {
        position: absolute;
        z-index: 1;
        top: 5px;
        right: 5px;
        width: 60px;
        height: 60px;
        background: url("images/btNext_60.png") no-repeat center center;
        cursor: pointer;
    }

        .header #btNext:hover {
            background: url("images/btNextOver_60.png") no-repeat center center;
        }

        .header #btNext:active {
            background: url("images/btNextClick_60.png") no-repeat center center;
        }

    .header #btSummary {
        position: absolute;
        z-index: 1;
        top: 70px;
        right: 5px;        
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        padding: 2px 10px;
        cursor: pointer;
    }
        .header #btSummary.summaryHidden {
            background-color: #555;
            color: #fff;
        }
        .header #btSummary.summaryVisible {
            background-color: #888;
            color: #fff;
        }
        .header #btSummary:hover {
            background-color: #333;
        }

        .header .navigBar .parents {
            margin: 0px 80px 0px 0px;
            height: 40px;
        }

        .header .navigBar .parents .parent {
            float: left;
            width: calc(33% - 10px);
            height: 100%;
            margin-right: 4px;
            padding-right: 5px;
            line-height: 40px;
            white-space: nowrap;
        }

            .header .navigBar .parents .parent p {
                height: 40px;
                font-size: 16px;
                color: #333;
            }

            .header .navigBar .parents .parent img {
                position: relative;
                vertical-align: middle;
                top: -3px;
            }

    .header .summary {
        position: relative;
        height: 50px;
        color: #fff;
    }

        .header .summary .title {
            position: relative;
            padding: 2px 20px;
            height: 50px;
            font-size: 32px;
            text-align: left;
            line-height: 50px;
            color: #333;
        }

/* summary */
.summary_container {
    border-left: 1px dotted #ccc;
}
.summary_container ul {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    margin: 0 5px 0 10px;
    color: #555;
    list-style-type: square;
    list-style-position: inside;
}
    .summary_container ul li {        
        padding: 2px 8px;
        border-radius: 12px;
    }
    .summary_container ul li.selected {        
        background-color: #00597d;
        color: #fff;
    }
    .summary_container ul li:hover {
        background-color: #00597d88;
        color: #fff;
        cursor: pointer;
    }

    /* page */
    .page {
        position: relative;
        height: calc(100% - 100px);
    }

    .page .mgTop {
        width: 100%;
        height: 10px;
    }

    .page > .middle {
        position: relative;
        width: 100%;
        height: calc(100% - 20px);
        display: flex;
    }

        .page .middle .mgLeft {
            width: 10px;
            height: 100%;
        }

        .page .middle .middlePage {
            position: relative;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .page .middle .pageContainer {            
            flex-grow: 1;
            height: 100%;
        }

        .page .middle .cmt {            
            display: flex;
            flex-shrink: 0;            
        }

            .page .middle .cmt .img {
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                background: url("images/Comment.png") no-repeat left top;
            }

            .page .middle .cmt .text {
                flex-grow: 1;                
                padding: 5px 10px;
                font-size: 14px;
                color: #00597d;
                overflow-y: auto;
            }

        .page .middle .mgRight {
            min-width: 10px;
            flex-shrink: 0;
            height: 100%;
            overflow-y: auto;
        }

    .page .mgBottom {
        width: 100%;
        height: 10px;
    }

/* help */
.help {
    position: absolute;
    width: 100%;
    height: 35px;
    line-height: 35px;
    bottom: 0px;
    font-size: 16px;
    text-align: center;
    background: url("images/BackHelp.png") repeat left top;
    color: #fff;
}


/* firstPage */
.firstPage:not(.template) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.firstPage .tile {
    /*display: inline-block;
    vertical-align: middle;*/
    line-height: 1.2;
    width: 720px;
    height: 240px;
    background-color: #fff;
    margin: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

        .firstPage .tile .text {
            float: right;
            margin: 20px 20px 20px 240px;
            color: #00597d;
            font-size: 38px;
            text-align: right;
        }

        .firstPage .tile .logo {
            width: 240px;
            height: 240px;
            background: url("../data/logo_240.png") no-repeat center center;
            background-size: 200px auto;
        }

        .firstPage .tile #FirstPageTitle {
            color: #333;
        }

        .firstPage .tile #FirstPageYears {
            margin-top: 5px;
            font-size: 60px;
            color: #680674;
        }

        .firstPage .tile #FirstPageCity {
            height: 80px;
            line-height: 80px;
            margin-top: 5px;
            color: #00597d;
            font-size: 32px;
        }

            .firstPage .tile #FirstPageCity span {
                display: inline-block;
                vertical-align: bottom;
                line-height: 1.2;
            }
    .firstPage #FirstPageImage {
        flex-grow: 1;
        margin-top: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

/* page comment */
.comment,
.commentSrc {
    height: calc(100% - 20px);
    padding: 10px;
    background: url("images/BackCmt.png") repeat left top;
    overflow-y: auto;
}

/* summary */
.summar {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

    .summar .title {
        width: 100%;
        height: 40px;
        padding-left: 10px;
        font-size: 18px;
        text-align: left;
        color: #333;
    }

    .summar .container {
        width: 100%;
        height: calc(100% - 40px);
    }

    .summar .content {
        width: 50%;
        height: 100%;
    }

        .summar .content.left {
        }

        .summar .content.right {
            float: right;
        }

    .summar .itemLabel {
        margin: 0 10px 10px 10px;
        width: calc(100% - 20px);
        height: 90px;
        background-color: #ffffffdf;    /* transparence car image de fond possible */
    }

        .summar .itemLabel .left {
            position: relative;
            width: 90px;
            height: 100%;
        }

        .summar .itemLabel .right {
            float: right;
            width: calc(100% - 90px);
            height: 100%;
            line-height: 90px;
        }

        .summar .itemLabel .left p {
            font-size: 22px;
            line-height: 90px;
            text-align: center;
            color: #fff;
        }

        .summar .itemLabel .right p {
            display: inline-block;
            padding: 0px 10px;
            font-size: 18px;
            line-height: 1.5;
            vertical-align: middle;
        }

        .summar .itemLabel .left {
            background-color: #064174;
        }

        .summar .itemLabel.even .left {
            background-color: #680674;
        }




/* graphBar */
.graphBar {
    width: 100%;
    height: 100%;
}

    .graphBar .graph {
        width: 100%;
        height: 100%;
    }

/* graphPie */
.graphPie {
    width: 100%;
    height: 100%;
}

    .graphPie .title {
        height: 25px;
        font-size: 18px;
        text-align: center;
        color: #333;
    }

    .graphPie .graph {
        width: 100%;
        height: 100%;
    }


/* graphTwoPie */
.graphTwoPie {
    width: 100%;
    height: 100%;
}

    .graphTwoPie .title {
        height: 25px;
        font-size: 18px;
        text-align: center;
        color: #333;
    }

    .graphTwoPie .graphPie {
        width: 45%;
        height: 100%;
    }

        .graphTwoPie .graphPie .graph {
            width: 100%;
            height: calc(100% - 25px);
        }

        .graphTwoPie .graphPie .description,
        .graphTwoPie .gauge .description {
            height: 25px;
        }

            .graphTwoPie .graphPie .description p {
                font-weight: bold;
                font-size: 18px;
                text-align: center;
            }

        .graphTwoPie .graphPie.left {
            float: left;
        }

            .graphTwoPie .graphPie.left .description p {
                color: #740606;
            }

        .graphTwoPie .graphPie.right .description p {
            color: #06740b;
        }

    .graphTwoPie .gauge .description p {
        font-weight: bold;
        font-size: 18px;
        color: #064174;
        text-align: center;
    }

    .graphTwoPie .middle {
        float: left;
        width: 10%;
        height: calc(100% - 25px);
    }

    .graphTwoPie .graphPie.right {
        float: right;
    }

    .graphTwoPie .gauge {
        position: absolute;
        width: 26%;
        height: 40%;
        bottom: 0px;
        margin-left: 37%;
    }

        .graphTwoPie .gauge .graph {
            height: calc(100% - 25px);
        }

/* graphOperation */
.graphOperation {
    width: 100%;
    height: 100%;
}

    .graphOperation .title {
        height: 50px;
        font-size: 18px;
        text-align: center;
        color: #333;
    }

    .graphOperation .graph {
        position: relative;
        width: 100%;
        height: 100%;
    }

        .graphOperation .graph .left,
        .graphOperation .graph .middle {
            float: left;
            width: 30%;
            height: 100%;
        }

        .graphOperation .graph .operande {
            float: left;
            width: 5%;
            height: 100%;
        }

        .graphOperation .graph .right {
            float: right;
            width: 30%;
            height: 100%;
        }

        .graphOperation .graph .cylinderA,
        .graphOperation .graph .cylinderB,
        .graphOperation .graph .cylinderC {
            position: relative;
            height: calc(100% - 140px);
        }


        .graphOperation .graph .description {
            height: 80px;
        }

            .graphOperation .graph .description p {
                font-size: 18px;
                color: #333;
                padding: 15px 10px;
                text-align: center;
            }

        .graphOperation .graph .value {
            height: 60px;
        }

            .graphOperation .graph .value p {
                font-size: 24px;
                color: #333;
                padding: 15px 10px;
                text-align: center;
            }

        .graphOperation .graph .left .value p {
            color: #064174;
        }

        .graphOperation .graph .middle .value p {
            color: #740606;
        }

        .graphOperation .graph .right .value p {
            color: #680674;
        }

        .graphOperation .graph .operande {
            position: relative;
        }

            .graphOperation .graph .operande p {
                height: 60px;
                line-height: 60px;
                position: absolute;
                bottom: 80px;
                font-size: 40px;
                color: #333;
                text-align: center;
            }

/* graphBalance */
.graphBalance {
    width: 100%;
    height: 100%;
}

    .graphBalance .title {
        height: 50px;
        font-size: 18px;
        text-align: center;
        color: #333;
    }

    .graphBalance .graph {
        position: relative;
        width: 100%;
        height: 100%;
    }

        .graphBalance .graph .left {
            float: left;
            width: 33%;
            height: 100%;
        }

        .graphBalance .graph .right {
            float: right;
            width: 33%;
            height: 100%;
        }

        .graphBalance .graph .middle {
            float: left;
            width: 34%;
            height: 100%;
        }

        .graphBalance .graph .description {
            height: 80px;
        }

            .graphBalance .graph .description p {
                font-size: 18px;
                color: #333;
                padding: 15px 10px;
            }

        .graphBalance .graph .left .description p {
            text-align: right;
        }

        .graphBalance .graph .right .description p {
            text-align: left;
        }

        .graphBalance .graph .middle .description p {
            text-align: center;
            color: #064174;
        }

        .graphBalance .graph .cylinderA,
        .graphBalance .graph .cylinderB,
        .graphBalance .graph .difference {
            position: relative;
            height: calc(100% - 80px);
        }

        .graphBalance .graph .gauge {
            position: absolute;
            left: 10%;
            width: 80%;
            height: 66%;
            bottom: 0px;
        }

/* listGraphCmt */
.listGraphCmt {
    width: 100%;
    height: 100%;
}

    .listGraphCmt .listGraph {
        width: 100%;
        height: 100%;
    }

        .listGraphCmt .listGraph .list {
            width: 380px;
            height: 100%;
            padding: 0px 10px;
            overflow: auto;
        }

        .listGraphCmt .listGraph .graph {
            float: right;
            width: calc(100% - 400px);
            height: 100%;
        }

/* listGraphCompar */
.listGraphCompar {
    width: 100%;
    height: 100%;
}

    .listGraphCompar .listGraph {
        width: 100%;
        height: 100%;
    }

        .listGraphCompar .listGraph .list {
            width: 380px;
            height: 100%;
            padding: 0px 10px;
            overflow: auto;
        }

        .listGraphCompar .listGraph .graphContainer {
            float: right;
            width: calc(100% - 400px);
            height: 100%;
        }

            .listGraphCompar .listGraph .graphContainer .graphCompar {
                width: 100%;
                height: 30%;
                background: url("images/ArrowDownWhite_48.png") no-repeat center bottom;
            }

            .listGraphCompar .listGraph .graphContainer .graph {
                width: 100%;
                height: 70%;
            }

/* Item of a list */
.listItem {
    position: relative;
    width: 340px;
    height: 70px;
    margin-top: 10px;
}

    .listItem.note,
    .listItem.info {
        margin-top: 30px;
    }

    .listItem .flag {
        float: left;
        width: 10px;
        height: 100%;
    }

    .listItem.normal .flag {
        background-color: #064174;
    }

    .listItem.hot .flag {
        background-color: #680674;
    }

    .listItem.note .flag {
        background-color: #888;
    }

    .listItem.info .flag {
        background-color: #066774;
    }

    .listItem .text {
        float: left;
        width: calc(100% - 10px);
        height: 100%;
        background-color: #fff;
        box-shadow: 2px 2px 2px #888;
    }

    .listItem.addEvol .text {
        width: calc(100% - 83px);
    }

    .listItem.addCompar .text {
        width: calc(100% - 153px);
    }

    .listItem.addEvol.addCompar .text {
        width: calc(100% - 156px);
    }

    .listItem .compar,
    .listItem .evol {
        display: none;
        position: relative;
        float: left;        
        height: 100%;
        margin-left: 3px;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center center;
        box-shadow: 2px 2px 2px #888;
    }

    .listItem .evol {
        width: 70px;
    }

    .listItem.addCompar .compar {
        width: 140px;
    }
   
    .listItem.addEvol.addCompar .compar {
        width: 70px;
    }

    .listItem .text .year {
        height: 20px;
        padding: 5px;
        font-size: 14px;
        text-align: left;
        color: #888;
    }

    .listItem .text .value {
        height: 40px;
        padding: 0px 10px;
        font-size: 28px;
        text-align: right;
        color: #00597d;
    }

    .listItem .evol.upRed {
        background-image: url("images/ArrowUpRed.png");
    }

    .listItem .evol.upGreen {
        background-image: url("images/ArrowUpGreen.png");
    }

    .listItem .evol.downRed {
        background-image: url("images/ArrowDownRed.png");
    }

    .listItem .evol.downGreen {
        background-image: url("images/ArrowDownGreen.png");
    }

    .listItem .evol.equal {
        background-image: url("images/ArrowEqualBlue.png");
    }

    .listItem .compar.up {
        background-image: url("images/ArrowUpWhite2.png");
    }

    .listItem .compar.down {
        background-image: url("images/ArrowDownWhite2.png");
    }


    .listItem .percent {
        position: absolute;
        bottom: 5px;
        width: 100%;
        height: 15px;
        padding-right: 5px;
        line-height: 15px;
        font-size: 12px;
        text-align: center;
        color: #000;
    }

    .listItem .compar {
        background-color: #066774;
    }

        .listItem .compar .value {
            height: 20px;
            line-height: 20px;
            padding: 5px;
            font-size: 20px;
            text-align: center;
            color: #fff;
        }

        .listItem .compar .value,
        .listItem .compar .percent {
            color: #fff;
        }

    .listItem .percent.upRed,
    .listItem .percent.downRed {
        color: #e41e24;
    }

    .listItem .percent.upGreen,
    .listItem .percent.downGreen {
        color: #6ebe45;
    }

    .listItem .compar .label {
        position: absolute;
        bottom: -20px;
        right: 0;
        width: 200px;
        color: #555;
        text-align: right;
        font-size: 12px;
    }



/* Array of synthese */
.arraySynthese {
    width: 100%;
    height: 100%;
}

    .arraySynthese .title {
        height: 40px;
        font-size: 24px;
        text-align: left;
    }

        .arraySynthese .title .mainTitle {
            color: #680674;
        }

        .arraySynthese .title .subTitle {
            padding-left: 10px;
            font-size: 14px;
            color: #333;
        }

    .arraySynthese .info {
        height: 30px;
        font-size: 18px;
    }

    .arraySynthese .wrapper {
        width: 100%;
        height: calc(100% - 105px);
    }

        .arraySynthese .wrapper .array {
            width: calc(50% - 5px);
            height: 100%;
        }

            .arraySynthese .wrapper .array.full {
                width: calc(100% - 10px);
                height: 100%;
            }

            .arraySynthese .wrapper .array .arrayContainer {
                height: 100%;
            }

                .arraySynthese .wrapper .array .arrayContainer .marginLeft {
                    width: 5px;
                    height: 100%;
                }

                .arraySynthese .wrapper .array .arrayContainer .title {
                    float: right;
                    width: calc(100% - 8px);
                }

                .arraySynthese .wrapper .array .arrayContainer .container {
                    position: relative;
                    float: right;
                    height: calc(100% - 40px);
                    width: calc(100% - 8px);
                }

                    .arraySynthese .wrapper .array .arrayContainer .container .content {
                        width: 100%;
                    }

                    .arraySynthese .wrapper .array .arrayContainer .container .footer {
                        position: absolute;
                        bottom: 0px;
                        width: 100%;
                    }

        .arraySynthese .wrapper .depense {
        }

        .arraySynthese .wrapper .recette {
            float: right;
        }

            .arraySynthese .wrapper .recette.full {
                float: none;
            }

        .arraySynthese .wrapper .depense .title {
            color: #740606;
        }

        .arraySynthese .wrapper .recette .title {
            color: #06740b;
        }

    .arraySynthese .itemSynthese {
        margin: 2px 0px;
        width: 100%;
        height: 25px;
    }

        .arraySynthese .itemSynthese.subTotal {
            margin: 4px 0px 10px 0px;
        }

        .arraySynthese .itemSynthese .description {
            margin-right: 164px;
            height: 25px;
            line-height: 25px;
            background-color: #fff;
            padding: 0px 5px;
            font-size: 14px;
            color: #000;
            overflow: hidden;
        }

        .arraySynthese .itemSynthese .value {
            float: right;
            width: 150px;
            height: 25px;
            line-height: 25px;
            padding: 0px 5px;
            font-size: 16px;
            text-align: right;
            color: #fff;
        }

        .arraySynthese .itemSynthese.subTotal .value {
            font-size: 18px;
        }

        .arraySynthese .itemSynthese .tabValDetail {
            float: right;
        }

            .arraySynthese .wrapper .title .itemValDetail,
            .arraySynthese .itemSynthese .tabValDetail .itemValDetail {
                float: right;
                width: 100px;
                padding: 0px 5px;
                font-size: 14px;
                color: #000;
            }

    .arraySynthese .wrapper .title .itemValDetail {
        text-align: center;
    }

        .arraySynthese .wrapper .title .itemValDetail.total {
            width: 150px;
        }

    .arraySynthese .itemSynthese .tabValDetail .itemValDetail {
        text-align: right;
        height: 25px;
        line-height: 25px;
        background-color: #fff;
    }

        .arraySynthese .itemSynthese .tabValDetail .itemValDetail.rappel {
            background-color: #eee;
        }

    .arraySynthese .array.depense .itemSynthese .value {
        background-color: #6c2974; /*#295174; #742929;*/
    }

    .arraySynthese .array.depense .itemSynthese.even .value {
        background-color: #680674; /*#064174; #740606;*/
    }

    .arraySynthese .array.depense .itemSynthese.subTotal .description,
    .arraySynthese .array.depense .itemSynthese.subTotal .value,
    .arraySynthese .array.depense .itemSynthese.subTotal .tabValDetail .itemValDetail {
        color: #fff;
        background-color: #742929;
    }

    .arraySynthese .array.recette .itemSynthese .value {
        background-color: #6c2974; /*#296774; #295174; #29742c;*/
    }

    .arraySynthese .array.recette .itemSynthese.even .value {
        background-color: #680674; /*#066274; #064174; #06740b;*/
    }

    .arraySynthese .array.recette .itemSynthese.subTotal .description,
    .arraySynthese .array.recette .itemSynthese.subTotal .value,
    .arraySynthese .array.recette .itemSynthese.subTotal .tabValDetail .itemValDetail {
        color: #fff;
        background-color: #29742c;
    }


    .arraySynthese .itemEvolSynthese {
        margin: 2px 0px;
        width: 100%;
        height: 45px;
        color: #fff;
    }

    .arraySynthese .footer .itemEvolSynthese {
        margin-top: 4px;
    }

    .arraySynthese .info .itemEvolSynthese {
        margin-top: 20px;
        background-color: #064174;
    }

    .arraySynthese .depense .itemEvolSynthese,
    .arraySynthese .wrapper .array.depense .arrayContainer .marginLeft,
    .arraySynthese .wrapper .array.depense .footer .itemSynthese.subTotal .description,
    .arraySynthese .wrapper .array.depense .footer .itemSynthese.subTotal .value {
        background-color: #740606;
    }

    .arraySynthese .recette .itemEvolSynthese,
    .arraySynthese .wrapper .array.recette .arrayContainer .marginLeft,
    .arraySynthese .wrapper .array.recette .footer .itemSynthese.subTotal .description,
    .arraySynthese .wrapper .array.recette .footer .itemSynthese.subTotal .value {
        background-color: #06740b;
    }

    .arraySynthese .itemEvolSynthese .description {
        margin-right: 274px;
        height: 45px;
        line-height: 45px;
        padding: 0px 5px;
        font-size: 16px;
        overflow: hidden;
    }

    .arraySynthese .itemEvolSynthese .value {
        float: right;
        width: 150px;
        height: 45px;
        line-height: 45px;
        padding: 0px 5px;
        font-size: 18px;
        text-align: right;
    }

    .arraySynthese .itemEvolSynthese .evol {
        float: right;
        width: 100px;
        height: 45px;
        line-height: 45px;
        padding: 0px 5px;
        font-size: 14px;
        text-align: right;
    }

        .arraySynthese .itemEvolSynthese .evol p {
            margin-right: 35px;
        }

        .arraySynthese .itemEvolSynthese .evol .arrow {
            float: right;
            width: 24px;
            height: 45px;
            background: url("images/ArrowEqualWhite.png") no-repeat center center;
        }

            .arraySynthese .itemEvolSynthese .evol .arrow.up {
                background: url("images/ArrowUpWhite.png") no-repeat center center;
            }

            .arraySynthese .itemEvolSynthese .evol .arrow.down {
                background: url("images/ArrowDownWhite.png") no-repeat center center;
            }


/* Array of ratios */
.arrayRatios {
    width: 100%;
    height: 100%;
}

    .arrayRatios .column {
        float: left;
        height: 100%;
    }

        .arrayRatios .column.description {
            width: calc(100% - 580px);
            height: 100%;
        }

        .arrayRatios .column.yearCurrent,
        .arrayRatios .column.yearPrevious {
            float: left;
            width: 280px;
            height: 100%;
            margin-left: 10px;
        }

        .arrayRatios .column .header {
            height: 30px;
            padding: 0px 5px;
            font-size: 18px;
            text-align: left;
            color: #333;
        }

        .arrayRatios .column.yearCurrent .header {
            color: #680674;
        }

        .arrayRatios .column.yearPrevious .header {
            color: #064174;
        }

        .arrayRatios .column .container .title {
            height: 25px;
            padding: 0px 5px;
            font-size: 14px;
            text-align: right;
            color: #333;
        }

    .arrayRatios.itemLabel {
        margin: 2px 5px;
        width: calc(100% - 10px);
        height: 45px;
        background-color: #fff;
    }

        .arrayRatios.itemLabel .left {
            position: relative;
            width: 45px;
            height: 100%;
        }

        .arrayRatios.itemLabel .right {
            float: right;
            width: calc(100% - 45px);
            height: 100%;
            line-height: 45px;
        }

        .arrayRatios.itemLabel.odd.ratioA .left,
        .arrayRatios.itemCompar.odd.ratioA {
            background-color: #295174;
        }

        .arrayRatios.itemLabel.even.ratioA .left,
        .arrayRatios.itemCompar.even.ratioA {
            background-color: #064174;
        }

        .arrayRatios.itemLabel.odd.ratioB .left,
        .arrayRatios.itemCompar.odd.ratioB {
            background-color: #295174;
        }

        .arrayRatios.itemLabel.even.ratioB .left,
        .arrayRatios.itemCompar.even.ratioB {
            background-color: #064174;
        }

    .arrayRatios.itemCompar.odd.current {
        background-color: #6c2974;
    }

    .arrayRatios.itemCompar.even.current {
        background-color: #680674;
    }



    .arrayRatios.itemLabel .left p {
        font-size: 18px;
        line-height: 45px;
        text-align: center;
        color: #fff;
    }

    .arrayRatios.itemLabel .right p {
        display: inline-block;
        padding: 0px 5px;
        font-size: 14px;
        line-height: 1;
        vertical-align: middle;
    }

    .arrayRatios .itemCompar {
        position: relative;
        margin: 2px 5px;
        width: calc(100% - 10px);
        height: 45px;
    }

        .arrayRatios .itemCompar .left {
            position: relative;
            width: 50%;
            height: 100%;
        }

        .arrayRatios .itemCompar .right {
            float: right;
            width: 50%;
            height: 100%;
            background-color: #fff;
        }

        .arrayRatios .itemCompar .left p {
            height: 25px;
            line-height: 25px;
            padding: 10px;
            font-size: 18px;
            text-align: right;
            color: #fff;
        }

        .arrayRatios .itemCompar .right .top,
        .arrayRatios .itemCompar .right .bottom {
            position: relative;
            height: 50%;
        }

            .arrayRatios .itemCompar .right .top p {
                padding: 0px 10px;
                font-size: 16px;
                text-align: right;
                color: #064174;
            }

            .arrayRatios .itemCompar .right .bottom p {
                padding: 5px 10px;
                font-size: 12px;
                text-align: right;
                color: #064174;
            }

                .arrayRatios .itemCompar .right .bottom p.red {
                    color: #740606;
                }

                .arrayRatios .itemCompar .right .bottom p.green {
                    color: #06740b;
                }

            .arrayRatios .itemCompar .right .bottom .arrow {
                position: absolute;
                left: 4px;
                bottom: 4px;
                width: 24px;
                height: 24px;
                background: url("images/ArrowEqualBlue2.png") no-repeat center center; /* default */
            }

                .arrayRatios .itemCompar .right .bottom .arrow.up.green {
                    background: url("images/ArrowUpGreen2.png") no-repeat center center;
                }

                .arrayRatios .itemCompar .right .bottom .arrow.up.red {
                    background: url("images/ArrowUpRed2.png") no-repeat center center;
                }

                .arrayRatios .itemCompar .right .bottom .arrow.down.green {
                    background: url("images/ArrowDownGreen2.png") no-repeat center center;
                }

                .arrayRatios .itemCompar .right .bottom .arrow.down.red {
                    background: url("images/ArrowDownRed2.png") no-repeat center center;
                }

/* iframe */
iframe {
    width: 100%;
    height: 100%;
}