/* Grafico de barras */
.barGraph {padding: 2rem 0 2rem 17rem;}
.barGraph, .barGraph ol {position:relative;}
.barGraph .bar {background:#B8A68E; }
.barGraph li,.barGraph .bar {display:block;position:relative;}
.barGraph li {width: 90.90909090%;padding: 0.3rem 0;margin: 0 0.1rem;padding-top: 3.6rem;}
.barGraph.hor span[class*="eje"] {position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;}
.barGraph .bar span {font-size:1.2rem;clear: both;display: block;font-family:Roboto;}
.barGraph .bar span:nth-child(1){font-weight:700;}
.barGraph .niv3 .bar {background:#739363;}
.barGraph .niv2 .bar {background:#f4a85d;}
.barGraph .niv1 .bar {background:#E8CD8B;}
.barGraph ol .imaBox .ima {width:3.5rem;height:3.5rem;border:.2rem solid #de7676;border-radius:100%;display:inline-block;overflow:hidden;margin-left:-5rem;}
.cant {position:absolute;width:13.5rem;margin-left:1rem;margin-top:0.85rem;color:#484848;font-size:1.4rem;}

/* Barras horizontales */
.barGraph.hor .bar {height: 3.2rem !important;float: left;}
.barGraph.hor .ejeX > span {height:100%;border-left: 0.1rem solid rgba(0, 0, 0, 0.1);width:8.3333333%;float: left;position: relative;}
.barGraph.hor .ejeX > span > span{position:absolute;bottom: 0;}
.barGraph.hor .ejeX [data-ejeX]:before {content: attr(data-ejeX);width: 2rem;position: absolute;bottom: -2.5rem;left: -1rem;text-align: center;color:#484848;font-size:1.4rem;font-family:Roboto;font-weight:400;padding:0.5rem 0;background:#fff;z-index:1;}
.barGraph.hor .ejeY > span {width:100%;border-left: 0.1rem solid rgba(0, 0, 0, 0.5);height: 8.815%;float: left;position: relative;margin-bottom: -1.96rem;}
.barGraph.hor .ejeY [data-ejeY]:before {content: attr(data-ejeY);width: 15%;position: absolute;top: 1rem;left: -22%;text-align: center;color:#484848;font-size:1.4rem;font-family:Roboto;font-weight:400;text-align: right;}

.barGraph.hor ol > li > div {position: absolute;top: 0;width: 100%;}
.barGraph li:nth-child(10) {clip:rect(0,0,0,0);position:absolute;overflow:hidden;top:-100%;left:-100%;}

/* Barras verticales */

/* Fuegos artificiales */
.barGraph .niv3 .bar:hover {background:#435639;transition:all ease 0.3s;}
.barGraph .niv2 .bar:hover {background:#db750f;transition:all ease 0.3s;}
.barGraph .niv1 .bar:hover {background:#d7aa37;transition:all ease 0.3s;}
.barGraph li .bar > div {transform:scale(0,0);position:absolute;left: 105%;background:#fff;width:13.5rem;padding:1rem;z-index:1;border-radius:0.3rem;top:-0.25rem;}
.barGraph li .bar:hover > div {transform:scale(1,1);transition:all ease 0.3s;}

/* Arrow panel */
.barGraph li .bar > div {border: 0.2rem solid #ccc;}
.barGraph li .bar > div:after, .barGraph li .bar > div:before {right: 100%;top: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
.barGraph li .bar > div:after {border-color: rgba(255, 255, 255, 0);border-right-color: #ffffff;border-width: 1rem;margin-top: -1rem;}
.barGraph li .bar > div:before {border-color: rgba(204, 204, 204, 0);border-right-color: #ccc;border-width: 1.3rem;margin-top: -1.3rem;}


.barGraph .legend li{display: inline-block;width: auto;margin-left: 2rem;}
.barGraph .legend .ico {width:1.6rem;height:1.6rem;border-radius:100%;position:relative;display: inline-block;overflow:hidden;vertical-align:middle; }
.barGraph .legend img {position:absolute;width:100%;height:100%;}
.barGraph .legend li span {font-size: 1.4rem;display: inline-block;vertical-align: middle;}
.barGraph .legend li span:last-child {padding-left: 61rem;}