/*ALL GRAPHS*/
svg line {
    /*display: none; */
}

svg {
    font-size: 12px;
}

svg .labelsBars{
    font-size: 15px;
    margin-left:-5px;
}
.js-graph table{
    table-layout:fixed;
    width:100%;
}
.sorting_asc, .sorting_desc, .sorting{
    position: relative;
}
.sorting_asc:hover, .sorting_desc:hover{
    cursor:pointer;
}
.sorting_asc:after, .sorting_desc:after, .sorting:after {
    content:" ";
    position:absolute;
    width: 0; 
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom:0;
}
.sorting:hover{
    cursor: pointer;
}
.sorting:hover:after{
    border-color: transparent transparent #eee;
    bottom: 7px;
}
.sorting_asc:after{
    border-color: transparent transparent #E47C46;
    bottom: 7px;
}
.sorting_desc:after{
    border-color: #E47C46 transparent transparent;
}

.dataTables_paginate.paging_simple_numbers{
    display:none;
}
.js-graph {
    font-family: verdana;
    /*font-size: .8em;*/
}

.js-graph table {
    width: 100%;
}

.js-graph table th {
    width:60px;
    text-align: center;
    padding:5px;
    line-height: 1.6;
}

.js-graph table td {
    width:12%;
    text-align: center;
    line-height: 1.2em;
}

/*aster chart - country specific*/

.asterPlot{cursor: pointer;}

.js-graph[data-type='aster'] {
/*    display: none;*/
    position:relative;
    /*overflow: hidden;*/
  
}

.js-graph[data-type='aster'] table{
    display: none;
    /*position:relative;*/
}

.asterInfoSide{
    width:100%;
    overflow: hidden;
    padding-right:50px;
    text-align: justify;
    color:#797979;
}

.asterViz {
    display: flex;
    justify-content: space-around;
    min-height:500;
}

.js-graph h2.govHeading {
    margin-top: -10px;
}

.aster-score{
    font-size: 2.2em;
    font-family: verdana;
    font-weight: 600;
}

.solidArc{
    pointer-events: none;
}
.outlineArc:hover {
    -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
    -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
    transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    fill: #fff;
}

.outlineArc:after {
    -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
    -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
    transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.solidArc {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}


/*bar chart - region specific*/

.js-graph[data-type='bar']{
    position: relative;
}
.js-graph[data-type='bar'] table{
    display:none;
}
.dataTables_length{
    display: none;
}

.showAllTextSpan{
    /*background-color: gray;*/
    text-align: center;
    position: relative;
}
.showAllDotSpan{
    /*background-color: gray;*/
    text-align: center;
    position: relative;
}
.showAllGridSpan{
    /*background-color: gray;*/
    text-align: center;
    position: relative;
}

.showAllTextSpan+* {
  border-top: solid 2px #adac97;
  padding-top: 28px;
  margin-top: -28px;
}
.showAllTextSpan span{
    position:relative;
    border: 1px solid gray;
    padding-left:5px;
    padding-right: 5px;
    background-color: white;
    width:auto;
    z-index: 0;
}
.showAllDotSpan span{
    position:relative;
    border: 1px solid gray;
    padding-left:5px;
    padding-right: 5px;
    background-color: white;
    width:auto;
    z-index: 0;
}
.showAllTextSpan:before span{
    border-bottom: 1px solid #888888;
    display: block;
    height: 1px;
    content: " ";
    width: 100%;
    position: absolute;
    left: 0;
    top: 1.2em;
    /*z-index:10;*/
    -webkit-box-shadow: 0px 2px 5px #888888;
    -moz-box-shadow: 0px 2px 5px #888888;
    box-shadow: 0px 2px 5px #888888;
}
.showAllDotSpan:before {
    border-top: 1px solid gray;
    display: block;
    height: 1px;
    content: " ";
    width: 100%;
    position: absolute;
    left: 0;
    top: 1.2em;
    z-index:10;
}
.showAllGridSpan:before {
    border-top: 1px solid gray;
    display: block;
    height: 1px;
    content: " ";
    width: 100%;
    position: absolute;
    left: 0;
    top: 1.2em;
    z-index:10;
}



#chart2Sort{
    margin-top: 0px;
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
    cursor: pointer;
    margin-right: 0;
    top: 105px;
}

#chart1Sort{
    margin-left: 405px;
    margin-top: 0px;
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
    float:left;
    cursor: pointer;
    top: 105px;
}
.countryNameBar{
    fill:#00A99C;
}
#headersBar1{
 font-size:1.5em;
 fill:#00A99C;
}

svg text {
    fill:#898989;
}

#headersBar2{
font-size:1.5em;
 fill:#00A99C;
}


#rankings + .js-graph[data-type='bar'] table{
    display: none;
    /*position:relative;*/
}


.js-graph[data-type='bar'] rect {
    /*fill: steelblue;*/
    clear: both;
}

.js-graph table thead>tr>td:first-child{
    text-align: right;
    padding-right: 30px;
    font-size: 16px;
    color: #707274;
    font-weight: bold;
    vertical-align: bottom;
    padding-bottom: 15px;
}
.js-graph table tbody>tr td:first-child{
    text-align: right;
    padding-right: 30px;
}

.js-graph table thead th:first-child{
    text-align: right;
    padding-right: 30px;
}

.js-graph table thead th:first-child:after{
    margin-right: 30px;
}

.js-graph[data-type='bar'] svg.chart2Number {
    margin-left: -50px;
}

/*
dot-grid graph & black-bar
*/

.js-graph[data-type='grid-dot']  table tr:hover .innerBlockText {
    display: block; 
    color:gray;
    cursor: default;
    /*background-color:rgba(0, 0, 0, 0.4);*/
/*    height:40px;
    padding-top:10px;*/
}
.js-graph table tr:hover .innerBlockText {
    display: block; 
    color:white;
    /*background-color:rgba(0, 0, 0, 0.4);*/
/*    height:40px;
    padding-top:10px;*/
}
.js-graph[data-type='grid-dot']  table tr:hover svg {
    display: none; 
}

/*.js-graph[data-type='grid-dot'] .dataTables_wrapper {
    height: 28em;
    overflow: hidden;
}
.js-graph[data-type='grid-block'] .dataTables_wrapper {
    height: 28.5em;
    overflow: hidden;
}*/


.innerBlockText{
    display:none;
    color: white;
    font-size: 1.2em;
}

.block-graph-block:hover .innerBlockText{
    display: block;
}

.dot-graph-dot:hover .innerBlockText{
    display: inline-block;
    color:black;
}


.js-graph[data-type='block-graph-block'] table th{
    width:15%;
    padding:5px;
}
td.block-graph-block {
    height: 40px;
}

.js-graph table {
    width:100%;
}

.js-graph table th {
    width: 15%;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    vertical-align: bottom;
    padding-bottom: 20px;
}


.dataTables_info{
    display:none;
}

.dataTables_wrapper {
    width: 100%;
}

/*
table bar
*/
/*.js-graph[data-type='bar']  table td:first-child { 
    background-color: #f1f1f1;
 }
.js-graph[data-type='bar']  table td:first-child + td {
    background-color: #f6f6f6;
}
.js-graph[data-type='bar']  table td:first-child + td+td {
    background-color: #f1f1f1;
}
.js-graph[data-type='bar']  table td:first-child + td+td+td {
    background-color: #f6f6f6;
}*/

.js-graph[data-type="bar"] table thead>tr:first-child {
    text-align: right;
    background-color: #249F95 !important;
    padding-right: 30px;
    font-size: 12px;
    color: white;
    font-weight: bold;
    vertical-align: top;
    height: 30px;
}
.js-graph[data-type='bar'] table thead > tr > td:first-child{
    font-size: 12px;
}
.js-graph[data-type='bar']  table tr:hover{ 
    background-color: #EAF6F5;
    cursor: default;
}


.js-graph[data-type="bar"] td {
    width: 12%;
    text-align: center;
    line-height: 1.2em;
    height: 30px;
}
.js-graph[data-type="bar"] thead{
    height: 50px;
    font-size:1.2em;
}
.js-graph[data-type="bar"] thead td{
    padding: 10px ;
}
.js-graph[data-type="bar"] table thead > tr > td:first-child {
    color: white;
    vertical-align: top;
    text-align: left;
}



/*
mobile styling 
*/
@media (max-width: 1600px) {

    #headersBar1,
    #headersBar2{
        font-size: 1.2em;
    }
}
@media (max-width: 1276px) {
    .asterViz {
        display: block;
    }
    .asterInfoSide{
        min-height: 400px;
    }
}

@media (min-width: 992px){

    .govResWrap {
        float: left;
        padding-right: 350px;
        width: 100%;
    }

    svg.asterPlot {
        margin-top: 65px;
        float: left;
        margin-left: -300px;
    }
}
@media (max-width: 991px) {
    .govResWrap {
        width: 100%;
        float: none;
    }

    .infoDiv {
        float: none;
    }
}
@media (max-width: 710px) {
    .js-graph[data-type='bar'] #barChartRank{
        display:none;
    }

    .js-graph[data-type='bar'] table{
        display:block;
    }
    #rankings + .js-graph[data-type='bar'] table {
        display: table;
        border: 1px solid gray;
    }
    #chart1Sort, #chart2Sort{
        display:none;
    }
    .js-graph table tbody > tr td:first-child {
        text-align: right;
        padding-right: 5px;
    }
    .js-graph table {
        font-size: 10px;
    }
    .js-graph table tbody > tr td:first-child {
        text-align: left;
        padding-left: 5px;
    }

    .js-graph.table-responsive table{
        table-layout: auto;
    }
}

@media (max-width: 500px) {

    .accordion-pallet {
        width: 80% !important;
    }
    .asterViz {
        display: block;
    }
    .asterInfoSide{
        min-height: 500px;
    }
/*    .js-graph table th {
        font-size: 7px;
    }*/

    .story {
        margin-left: 0px;
        margin-right: 0px;
    }
    .page-content{
        padding-left: 10px;
        padding-right: 10px;
    }

}