﻿

#cont-chart-1 {
    position: absolute;
    top: 0.5vw;
    left: 0.5vw;
    right: 45%;
    margin-right: 0.75vw;
    bottom: 50%;
    margin-bottom: 0.75vw;
    background-color: white;
    color: #ffffff;
    background-image: url(../../FirstNations/Graphics/access-bg.svg?111125-3);
    background-repeat: no-repeat;
    background-size: 125%;
    background-position: left -6vw center;
}

    #cont-chart-1 .aZoomIn, #cont-chart-1 .aZoomOut {
        display: none;
    }

#chart-1-title {
    color: #000000;
    font-size: 170%;
}



#chart-1-gap {
    position: absolute;
    bottom: 75%;
    left: 15%;
    right: 35%;
    font-size: 81%;
    font-family: Inter-SemiBold;
    color: #000000;
    opacity: 0;
    transition: opacity linear 200ms;
}

    #chart-1-gap.visible {
        opacity: 1;
    }
    #chart-1-gap table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0px;
        margin: 0px;
    }
    #chart-1-gap td {
        width: 16.66667%;
        text-align: center;
    }
#chart-1 {
    position: absolute;
    bottom: 27%;
    left: 15%;
    right: 35%;
    top: 25%;
    font-size: 90%;
    opacity: 0;
    transition: opacity linear 200ms;
}
    #chart-1.visible {
        opacity: 1;
    }




#chart-1-1 {
    position: absolute;
    width: 6vw;
    left: 55%;
    top: 20%;
    height: 6vw;
    font-size: 90%;
    transition: all linear 200ms;
}
#chart-1-1-label {
    position: absolute;
    width: 6vw;
    left: 55%;
    top: 20%;
    margin-top: 6.2vw;
    text-align: center;
    color: #000000;
    font-size: 95%;
    font-family: Nunito-ExtraBold;
    transition: all linear 200ms;
}
#chart-1-1.switch, #chart-1-1-label.switch {
    left: 70%;
}


#chart-1-2 {
    position: absolute;
    left: 45%;
    margin-left: -6vw;
    width: 6vw;
    top: 20%;
    height: 6vw;
    font-size: 90%;
    opacity: 0;
    transition: opacity linear 200ms;
}
    #chart-1-2.visible {
        opacity: 1;
    }
#chart-1-2-label {
    position: absolute;
    left: 45%;
    margin-left: -6vw;
    width: 6vw;
    top: 20%;
    margin-top: 6.2vw;
    text-align: center;
    color: #000000;
    font-size: 95%;
    font-family: Nunito-ExtraBold;
    opacity: 0;
    transition: opacity linear 200ms;
}
    #chart-1-2-label.visible {
        opacity: 1;
    }
#chart-1-2-gap {
    position: absolute;
    right: 55%;
    margin-right: 1.6vw;
    top: 20%;
    margin-top: 3.7vw;
    text-align: center;
    color: #000000;
    font-family: Nunito-Black;
    opacity: 0;
    transition: opacity linear 200ms;
}
    #chart-1-2-gap.visible {
        opacity: 1;
    }



    #cont-chart-2 {
        position: absolute;
        top: 0.5vw;
        left: 55%;
        right: 0.5vw;
        margin-left: 0.75vw;
        bottom: 50%;
        margin-bottom: 0.75vw;
        background-color: white;
    }

#chart-2-title {

}

#chart-2 {
    position: absolute;
    bottom: 2.5vw;
    left: 1vw;
    right: 1vw;
    top: 14%;
    font-size: 90%;
}
/*#chart_2-legend {
    position: absolute;
    bottom: 2vw;
    right: 1vw;
    width: 18%;
    height: 70%;
}

    #chart_2-legend .legend-item {
        height: 20%;
        line-height: 90%;
        font-size: 90%;
        margin-top: 0.3vw;
    }*/






#cont-chart-3 {
    position: absolute;
    top: 50%;
    left: 0.5vw;
    right: 66.66%;
    margin-right: 0.75vw;
    bottom: 0.5vw;
    margin-top: 0.75vw;
    background-color: white;
}

#chart-3-title {

}

#chart_3_metric {
    z-index: 500;
    position: absolute;
    top: 1vw;
    right: 1.5vw;
    width: 45%;
    height: 1.2vw;
    margin-top: -0.6vw;
}
#cont-chart-3.zoom #chart_3_metric {
    height: 2vw;
    font-size: 85%;
    right: 2.5vw;
}

    #cont-chart-3.zoom #chart_3_metric .list {
        line-height: 130%;
    }
#chart-3 {
    position: absolute;
    bottom: 2.5vw;
    left: 1vw;
    right: 1vw;
    top: 20%;
    font-size: 90%;
}






#cont-chart-4 {
    position: absolute;
    top: 50%;
    left: 33.33%;
    right: 33.33%;
    margin-left: 0.75%;
    margin-right: 0.75vw;
    bottom: 0.5vw;
    margin-top: 0.75vw;
    background-color: white;
}

#chart-4-title {

}

#chart_4_metric {
    z-index: 500;
    position: absolute;
    top: 1vw;
    right: 1.5vw;
    width: 45%;
    height: 1.2vw;
    margin-top: -0.6vw;
}
    #chart_4_metric .list {
        padding: 0.5vw;
    }
    #chart_4_metric .wrap {
        max-height: 10vw;
        overflow-y: scroll;
    }
    #chart_4_metric .list .item.group {
        width: auto;
        padding-left: 1vw;
    }

#cont-chart-4.zoom #chart_4_metric {
    height: 2vw;
    font-size: 85%;
    right: 2.5vw;
}
#cont-chart-4.zoom #chart_4_metric .list {
    line-height: 130%;
}
#chart-4 {
    position: absolute;
    bottom: 2.5vw;
    left: 1vw;
    right: 1vw;
    top: 20%;
    font-size: 90%;
}







#cont-chart-5 {
    position: absolute;
    top: 50%;
    left: 66.66%;
    right: 0.5vw;
    margin-left: 0.75%;
    bottom: 0.5vw;
    margin-top: 0.75vw;
    background-color: white;
}

#chart-5-title {

}

#chart_5_metric {
    z-index: 500;
    position: absolute;
    top: 1vw;
    right: 1.5vw;
    width: 45%;
    height: 1.2vw;
    margin-top: -0.6vw;
}
    #chart_5_metric .list {
        padding: 0.5vw;
    }

    #chart_5_metric .wrap {
        max-height: 10vw;
        overflow-y: scroll;
    }
#cont-chart-5.zoom .chart-title {
    line-height: 120%;
}
#cont-chart-5.zoom #chart_5_metric {
    height: 2vw;
    font-size: 85%;
    right: 2.5vw;
}

    #cont-chart-5.zoom #chart_5_metric .list {
        line-height: 130%;
    }
#chart-5 {
    position: absolute;
    bottom: 2.5vw;
    left: 1vw;
    right: 1vw;
    top: 20%;
    font-size: 90%;
}
