.legend.pie{position:relative; top: 0px; left: 0px; width: 100%; height: auto; margin-top: 10px; line-height: 16px; pointer-events: none; padding: 10px; text-align:center;}
.legend.pie span{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-width: calc(100% - 34px); margin-top: 0px; display:inline-block; vertical-align: middle; font-size: 13px; line-height: 16px; font-weight: normal;}
.legend.pie span:first-child{width: 25px; height: 10px; margin-right: 5px;}
.legend.pie ul{padding: 0px; margin: 0px; list-style: none;}
.legend.pie ul li{position:relative; width:max-content; height:auto; margin: 5px; display:inline-block; vertical-align:middle; white-space:nowrap;}

.legend.bar{position:relative; top: 0px; left: 0px; width: 100%; height: auto; margin-top: 10px; line-height: 16px; pointer-events: none;}
.legend.bar span{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-width: calc(100% - 34px); margin-top: 0px; display:inline-block; vertical-align: middle; font-size: 13px; line-height: 16px; font-weight: normal;}
.legend.bar span:first-child{width: 24px; height: 16px; border-radius: 0px; margin-right: 10px;}
.legend.bar ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style: none; text-align:right;}
.legend.bar ul li{position:relative; top: 0px; left: 0px; width:auto; height:auto; margin: 0px 10px; display: inline-block;}