﻿#cont-charts .dropdown .arrow {
    right: 6.5%;
    background-size: 0.9vw auto;
}

#cont-charts .zoom .arrow {
    right: 1vw;
    background-size: 1.2vw auto;
}

#cont-charts .zoom .dropdown {
    font-size: 85%;
}

.cont-chart .help {
    cursor: help;
    position: absolute;
    top: 0.8vw;
    right: 0.8vw;
    width: auto;
    height: 1.1vw;
    z-index: 50;
}

    .cont-chart .help.zoom {
        height: 1.7vw;
    }

.chart-title {
    z-index: 100;
    position: absolute;
    top: 0.8vw;
    left: 0.8vw;
    font-weight: bold;
    color: #f44e1a;
    line-height: 100% !important;
    font-size: 120% !important;
}
#cont-chart-1 {
    position: absolute;
    top: 0.5vw;
    left: 0.5vw;
    right: 66.66%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}

#chart-1 {
    position: absolute;
    bottom: 0.8vw;
    left: 4%;
    width: 92%;
    height: 78%;
    font-size: 90%;
}






#chart-1 img {
    cursor: pointer;
    width: 100%;
}

#chart-1-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-1-left img {
    }

#chart-1-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-1-right img {
    }
    #chart-1-left.disabled, #chart-1-right.disabled {
        opacity: 0.2;
    }
#chart-1-left.disabled img:hover, #chart-1-right.disabled img:hover {
    cursor: default;
}
#chart-1-left:not(.disabled):hover, #chart-1-right:not(.disabled):hover {
    opacity: 0.6;
}
#chart-1-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-1-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-1-circle ._circle.off {
            display: none;
        }

#cont-chart-1.zoom ._circle {
    width: 25vw;
    height: 25vw;
}


#chart-1-circle ._circle._1 {
    background-color: #D93923;
    color: #ffffff;
}

#chart-1-circle ._cont {
}

#chart-1-circle ._metric {
    height: 1.8vw;
    font-size: 110%;
    font-weight: bold;
    line-height: 105%;
    text-align: center;
}

#cont-chart-1.zoom ._metric {
    height: 3vw;
}

#chart-1-circle ._score {
    font-size: 350%;
    line-height: 100%;
}

#chart-1-circle ._gap {
    visibility: hidden;
    width: 100%;
    height: 1.8vw;
    text-align: right;
    margin-top: 0vw;
    font-size: 150%;
}








#cont-chart-2 {
    position: absolute;
    top: 0.5vw;
    left: 33.33%;
    margin-left: 0.75vw;
    right: 33.33%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart-2 {
        position: absolute;
        bottom: 1.3vw;
        left: 4%;
        width: 92%;
        height: 79%;
        font-size: 90%;
    }
#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: 69%;
        height: 82%;
        font-size: 90%;
    }
    #chart_3-legend {
        position: absolute;
        bottom: 2vw;
        right: 1vw;
        width: 18%;
        height: 80%;
    }
    #chart_3-legend.legend .legend-item {
       
    }



    /*#chart_3-paginator {
        position: absolute;
        bottom: 0.8vw;
        right: 1vw;
        width: 18%;
        height: 1.2vw;
    }*/
#cont-chart-4 {
    position: absolute;
    bottom: 0.5vw;
    left: 0.5vw;
    right: 66.66%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart_4_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 46%;
        height: 8%;
    }
    #chart-4 {
        position: absolute;
        bottom: 0.8vw;
        left: 0.8vw;
        right: 0.8vw;
        margin-right: -1px;
        height: 80%;
        font-size: 92%;
    }
    #chart-4-title {
        width: 47%;
        max-width: 47%;
    }

    #tbl-header {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: calc(28% + 4px);
    }
        #tbl-header table {
            table-layout: fixed;
            border-collapse: separate;
            width: calc(100% + 8px);
            margin-left: -4px;
            height: 100%;
            position: relative;
            border-spacing: 4px 4px;
        }
        #tbl-header td {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0% 1% 0% 1%;
            text-align: left;
            vertical-align: middle;
            background-color: #0d54ff;
            font-weight: bold;
            color: #ffffff;
        }
            #tbl-header td:not(.zero) {
                height: calc(50% - 8px);
            }
            #tbl-header td.zero {
                height: 0px;
                background-color: transparent;
            }
            #tbl-header td.subgroup {
                cursor: pointer;
                text-align: left;
                width: 42%;
                padding: 0% 1% 0% 3%;
            }
            #tbl-header td.score, #tbl-header td.score1 {
                cursor: pointer;
                width: 15%;
            }
            #tbl-header td.gap, #tbl-header td.gap1 {
                cursor: pointer;
                width: 12%;
            }
        #tbl-header td img {
            position: absolute;
            right: 0.4vw;
            top: 50%;
            margin-top: -0.3vw;
            height: 0.6vw;
            width: auto;
        }
/*@media (max-width: 1200px) {
    #tbl-header td img {
        right: 4px;
        margin-top: -3px;
        height: 6px;
    }
}*/
            #tbl-header td img.desc {
                visibility: hidden;
            }
            #tbl-header td img.asc {
                visibility: hidden;
                -webkit-transform: rotateX(-180deg);
                -moz-transform: rotateX(-180deg);
                 -ms-transform: rotateX(-180deg);
                  -o-transform: rotateX(-180deg);
                     transform: rotateX(-180deg);
            }

.tbl-paging {
    width: 4.4vw;
}

/*#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%;
            }*/
#tbl-body {
    position: absolute;
    top: 28%;
    left: 0%;
    width: 100%;
    height: 64%;
}
        #tbl-body table {
            table-layout: fixed;
            border-collapse: separate;
            width: calc(100% + 8px);
            margin-left: -4px;
            height: 100%;
            border-spacing: 4px 4px;
        }
        #tbl-body td {
            padding: 0% 1% 0% 1%;
            text-align: center;
            vertical-align: middle;
            background-color: #f0f0f0;
        }
            #tbl-body td.subgroup {
                text-align: left;
                width: 42%;
                line-height: 100%;
                padding: 0% 1% 0% 3%;
            }
            #tbl-body td.score, #tbl-body td.score1 {
                width: 15%;
            }
            #tbl-body td.gap, #tbl-body td.gap1 {
                width: 12%;
            }
       







#cont-chart-5 {
    position: absolute;
    bottom: 0.5vw;
    left: 33.33%;
    margin-left: 0.75vw;
    right: 33.33%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart_5_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 46%;
        height: 8%;
    }
    #chart-5 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 82%;
        height: 74%;
        font-size: 90%;
    }
    #chart-5-title {
        width: 47%;
        max-width: 47%;
    }
    #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;
    bottom: 0.5vw;
    right: 0.5vw;
    left: 66.66%;
    margin-left: 0.75vw;
    /*width: 40%;*/
    /*height: 50%;*/
    background-color: white;
}
    #chart_6_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 46%;
        height: 8%;
    }
    #chart-6-title {
        width: 47%;
        max-width: 47%;
    }
    #chart-6 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 69%;
        height: 82%;
        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;
    }*/
