﻿#cont-charts .dropdown .arrow {
    background-size: 65% auto;
}

.chart-title {
    z-index: 50;
    position: absolute;
    top: 0.8vw;
    left: 0.8vw;
    font-size: 120%;
    font-weight: bold;
    color: #f44e1a;
}
#cont-chart-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 25%;
    /*height: 50%;*/
    background-color: white;
}
    #chart_1 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 92%;
        height: 75%;
        font-size: 90%;
        overflow: auto;
    }
#cont-chart-2 {
    position: absolute;
    top: 0.5vw;
    left: 0.5vw;
    right: 66.66%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart-2 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 92%;
        height: 82%;
        font-size: 90%;
    }
        #chart-2 img {
            cursor: pointer;
            width: 100%;
        }
#chart-2-left {
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5%;
    height: 100%;
}

    #chart-2-left img {
    }

#chart-2-right {
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 5%;
    height: 100%;
}

    #chart-2-right img {
    }
    #chart-2-left.disabled, #chart-2-right.disabled {
        opacity: 0.2;
    }
        #chart-2-left.disabled img:hover, #chart-2-right.disabled img:hover {
            cursor: default;
        }
    #chart-2-left:not(.disabled):hover, #chart-2-right:not(.disabled):hover {
        opacity: 0.6;
    }
#chart-2-circle {
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10%;
    top: 0px;
    width: 80%;
    height: 100%;
}

    #chart-2-circle ._circle {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 11vw;
        height: 11vw;
        border-radius: 50%;
        background-color: #f96449;
        color: #ffffff;
    }

        #chart-2-circle ._circle.off {
            display: none;
        }

#cont-chart-2.zoom ._circle {
    width: 25vw;
    height: 25vw;
}


#chart-2-circle ._circle._1 {
    background-color: #D93923;
    color: #ffffff;
}

#chart-2-circle ._cont {
}

#chart-2-circle ._metric {
    height: 1.8vw;
    font-size: 110%;
    font-weight: bold;
    line-height: 105%;
    text-align: center;
}
#cont-chart-2.zoom ._metric {
    height: 3vw;
}

#chart-2-circle ._score {
    font-size: 350%;
    line-height: 100%;
}

#chart-2-circle ._gap {
    visibility: hidden;
    width: 100%;
    height: 1.8vw;
    text-align: right;
    margin-top: 0vw;
    font-size: 150%;
}





















#cont-chart-3 {
    position: absolute;
    top: 0.5vw;
    right: 0.5vw;
    left: 66.66%;
    margin-left: 0.75vw;
    /*width: 40%;*/
    /*height: 50%;*/
    background-color: white;
}
    #chart-3 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 92%;
        height: 82%;
        font-size: 90%;
    }
    #chart_3-legend {
        position: absolute;
        bottom: 2vw;
        right: 1vw;
        width: 18%;
        height: 75%;
    }
#cont-chart-4 {
    position: absolute;
    bottom: 0.5vw;
    left: 0.5vw;
    right: 33.33%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart_4_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 55%;
        height: 8%;
    }
#chart-4 {
    position: absolute;
    bottom: 1.7vw;
    left: 0.8vw;
    right: 0.8vw;
    margin-right: -1px;
    top: 13%;
    font-size: 92%;
    overflow: auto;
}

#tbl {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 4px 4px;
    line-height: 105%;
}

#tbl-header {
    width: 100%;
}

    #tbl-header th {
        position: relative;
        padding: 0.4% 1.2vw 0.4% 0.8%;
        text-align: center;
        vertical-align: top;
        background-color: #f96449;
        font-weight: bold;
        color: #ffffff;
        text-align: left;
        line-height: 100%;
    }

        #tbl-header th.small {
            font-size: 88%;
            line-height: 100%;
        }

            #tbl-header th.small span.long {
                display: none;
            }

        #tbl-header th.n {
            padding: 1% 1% 1% 1%;
            cursor: pointer;
            text-align: left;
            width: 28%;
            background-color: #CCCCCC;
            color: #000000;
        }

        #tbl-header th.s {
            cursor: pointer;
        }

        #tbl-header th.s0 {
            background-color: #D93923;
            color: #ffffff;
        }

        #tbl-header th img {
            position: absolute;
            right: 0.3vw;
            top: 50%;
            margin-top: -0.25vw;
            height: 0.5vw;
            width: auto;
        }

@media (max-width: 1200px) {
    #tbl-header th {
        padding: 0.4% 1vw 0.4% 0.8%;
        word-wrap: break-word;
    }
}

#tbl-header th img.desc {
    visibility: hidden;
}

#tbl-header th img.asc {
    visibility: hidden;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}


#tbl-body {
    width: 100%;
}

    #tbl-body td {
        padding: 0% 1% 0% 1%;
        text-align: center;
        vertical-align: middle;
        background-color: #f0f0f0;
    }

        #tbl-body td.n {
            text-align: left;
            width: 28%;
        }

        #tbl-body td.s0 {
        }




    /*#tbl-paging {
        position: absolute;
        bottom: 0%;
        right: 0%;
        width: 15%;
        height: 5%;
        font-size: 110%;
    }
        #tbl-paging table {
            border-collapse: collapse;
            position: absolute;
            top: 0%;
            left: 20%;
            width: 60%;
            height: 100%;
        }
            #tbl-paging table td {
                text-align: center;
                vertical-align: middle;
                color: #555555;
            }
        #tbl-paging img {
            border: none;
            position: absolute;
            bottom: 0%;
            height: 100%;
            width: auto;
        }
            #tbl-paging img.prev {
                left: 0%;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            #tbl-paging img.next {
                right: 0%;
            }*/


    








#cont-chart-5 {
    position: absolute;
    bottom: 0.5vw;
    right: 0.5vw;
    left: 66.66%;
    margin-left: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart_5_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 56%;
        height: 8%;
    }
    #chart-5-title {
        width: 35%;
        max-width: 35%;
        line-height: 100%;
        font-size: 110%;
    }
    #chart-5 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 92%;
        height: 74%;
        font-size: 90%;
    }
        #chart-5.small {
            height: 68%;
        }
    #chart-5-gap-title {
        cursor: help;
        position: absolute;
        top: 17%;
        right: 1%;
        width: 10%;
        text-align: center;
        font-size: 82%;
        font-weight: bold;
    }
    #chart-5-gap {
        position: absolute;
        bottom: 0.8vw;
        right: 1%;
        width: 10%;
        height: 74%;
        font-size: 82%;
        font-weight: bold;
    }
        #chart-5-gap table {
            width: 100%;
            height: 100%;
        }
        #chart-5-gap td {
            text-align: center;
            vertical-align: middle;
            line-height: 0px;
        }

#cont-chart-6 {
    position: absolute;
    top: 0.5vw;
    left: 33.33%;
    right: 33.33%;
    margin-left: 0.75vw;
    margin-right: 0.75vw;
    /*margin-left: 2vw;*/
    /*width: 40%;*/
    /*height: 50%;*/
    background-color: white;
}
    #chart_6_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 44%;
        height: 8%;
    }
    #chart-6-title {
        width: 50%;
        max-width: 52%;
        line-height: 100%;
    }
    #chart-6 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 69%;
        height: 75%;
        font-size: 90%;
    }
    #chart_6-legend {
        position: absolute;
        bottom: 2vw;
        right: 1vw;
        width: 18%;
        height: 70%;
    }
    #chart_6-legend .legend-item {
        height: 20%;
        line-height: 90%;
        font-size: 90%;
        margin-top: 0.3vw;
    }


    /*#chart_6-paginator {
        position: absolute;
        bottom: 0.8vw;
        right: 1vw;
        width: 18%;
        height: 1.2vw;
    }*/
