﻿#cont-charts .dropdown .arrow {
    right: 5%;
    background-size: 94% auto;
}

#cont-charts .zoom .arrow {
    right: 1vw;
    background-size: 1.2vw auto;
}

#cont-charts .zoom .dropdown {
    font-size: 85%;
}

.chart-title {
    z-index: 100;
    position: absolute;
    top: 0.8vw;
    left: 0.8vw;
    right: 0.8vw;
    font-size: 120%;
    font-weight: bold;
    color: #f44e1a;
}
    .chart-title a {
        text-decoration: underline;
        color: #f44e1a;
    }
        .chart-title a:hover, .chart-title a:visited:hover {
            text-decoration: none;
            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: 65%;
    margin-right: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart-2 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 92%;
        height: 78%;
        font-size: 90%;
    }
    /*#chart-2-title span {
        cursor: help;
        text-decoration: underline;
        color: #f96449;
    }
        #chart-2-title span:hover {
            text-decoration: none;
            color: #f96449;
        }*/




#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;
    bottom: 0.5vw;
    left: 0.5vw;
    right: 65%;
    margin-right: 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%;
    }*/

    #chart_3-paginator {
        position: absolute;
        bottom: 0.8vw;
        right: 1vw;
        width: 18%;
        height: 1.2vw;
    }

#cont-chart-4 {
    position: absolute;
    top: 0.5vw;
    bottom: 0.5vw;
    right: 0.5vw;
    left: 70%;
    margin-left: 0.75vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart_4_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 52%;
        height: 8%;
    }
    #chart-4 {
        position: absolute;
        bottom: 0.2vw;
        left: 0.8vw;
        right: 0.8vw;
        margin-right: -1px;
        height: 92%;
        font-size: 92%;
    }
    #break1 {
        display: none;
    }
    #tbl-header {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: calc(10% + 4px);
        font-size: 90%;
    }
        #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% 3%;
            text-align: left;
            vertical-align: middle;
            background-color: #0d54ff;
            font-weight: bold;
            color: #ffffff;
        }
            #tbl-header td:not(.zero) {
                height: calc(50% - 12px);
            }
            #tbl-header td.zero {
                height: 0px;
                background-color: transparent;
            }
            #tbl-header td.n {
                cursor: pointer;
                text-align: left;
                width: 57%;
            }
            #tbl-header td.s {
                cursor: pointer;
                width: 26%;
            }
            /*#tbl-header td.s1, #tbl-header td.s2 {
                cursor: pointer;
                width: 19%;
                line-height: 100%;
            }*/
            #tbl-header td.g {
                cursor: pointer;
                width: 15%;
            }
        #tbl-header td img {
            position: absolute;
            right: 0.4vw;
            top: 50%;
            margin-top: -0.3vw;
            height: 0.6vw;
            width: auto;
        }
        #tbl-header td.s1 img, #tbl-header td.s2 img {
            position: absolute;
            right: 0.4vw;
            top: 0.3vw;
            margin-top: 0px;
            height: 0.6vw;
            width: auto;
        }
@media (max-width: 1200px) {
    #chart-4 {
        height: 90%;
    }
    #break1 {
        display: inline;
    }
    #tbl-header td.s1 img, #tbl-header td.s2 img {
            top: 0.2vw;
        }
}
            #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 {
        position: absolute;
        bottom: 0%;
        right: 0%;
        width: 12%;
        height: 3%;
    }
        #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: 10%;
        left: 0%;
        width: 100%;
        height: 84%;
    }
        #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.n {
                text-align: left;
                width: 57%;
                padding: 0% 1% 0% 3%;
            }
            #tbl-body td.s {
                width: 26%;
            }
            /*#tbl-body td.s1, #tbl-body td.s2 {
                width: 19%;
            }*/
            #tbl-body td.g {
                width: 15%;
            }
       







#cont-chart-5 {
    position: absolute;
    top: 0.5vw;
    left: 35%;
    margin-left: 0.75vw;
    right: 30%;
    margin-right: 1vw;
    /*height: 50%;*/
    background-color: white;
}
    #chart-5-title {
        width: 50%;
        font-size: 105%;
        line-height: 105%;
    }
    #chart_5_metric {
        z-index: 500;
        position: absolute;
        top: 0.8vw;
        right: 0.8vw;
        width: 40%;
        height: 8%;
    }
    #chart-5 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 92%;
        height: 67%;
        font-size: 90%;
    }

#cont-chart-6 {
    position: absolute;
    bottom: 0.5vw;
    left: 35%;
    right: 30%;
    margin-left: 0.75vw;
    margin-right: 0.75vw;
    /*width: 40%;*/
    /*height: 50%;*/
    background-color: white;
}
/*#chart-6-title {
    right: 55%;
    font-size: 105%;
    line-height: 105%;
}*/
#chart_6_metric {
    z-index: 500;
    position: absolute;
    top: 0.8vw;
    right: 0.8vw;
    width: 50%;
    height: 8%;
}
    #chart_6_metric .arrow {
        right: 5% !important;
        width: 6% !important;
    }
    #chart-6 {
        position: absolute;
        bottom: 0.8vw;
        left: 4%;
        width: 94%;
        height: 82%;
        font-size: 90%;
    }

