body > div { margin: 0 auto; font-family: Arial, Helvetica, sans-serif; color: black; background-color: white;}
body { margin: 0; }

/* == Charting CSS == */

div.iChrt * { box-sizing: border-box; }
div.iChrt {  width:100%; height: 100%; z-index: 2; } /* Forces all lines/borders to default to Black - overide as desired */

div.iChrtBar { position: absolute; }

div.iChrtBar > div {  height: 100%; font-size: inherit; box-sizing: border-box; background-color: inherit; }

div.iChrtBar > div.bar3D  { transform: translateY(.5em) translateX(-.5em); z-index: 0 !important; background-image: linear-gradient(to bottom right, rgba(255,255,255,.65), rgba(0,0,0,.25)); }

div.iChrtBar > div.top3D { background-color: inherit;
background-image: linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(255,255,255,.25)); 
position: absolute; top: 0; left: 0; height: .5em; width: 100%; 
transform: skewX(-45deg);  transform-origin: top left; z-index: 0 !important;}

div.iChrtBar div.left3D { background-color: inherit; 
background-image: linear-gradient(to right, rgba(0,0,0,.2), rgba(0,0,0,.6));
position: absolute; top: 0; right: 0; height: 100%; width: .5em; 
transform: skewY(-45deg); transform-origin: top right; z-index: 0 !important;}

div.i3dOffset { position: absolute; top: 0.5em; left: -0.5em; }

div.iChrtBar[data-zero] > div.top3D { border-width: 1px; border-style: solid; border-color: #808080; background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,.25)); }

div.iChrtLine, div.iChrtText { position: absolute; transform-origin: top left; box-sizing: border-box;}
div.iChrtText { white-space: nowrap; }
div.iChrtRect { display: inline-block; position: absolute; box-sizing: border-box; }
div.iChrtCircle { position: absolute; border-radius: 50%; box-sizing: border-box; }
div.iChrtArea {position: absolute; box-sizing: border-box; border-style: solid; border-width: 0;}

div.iPie { position: absolute;   }
div.iPie div { pointer-events: none; box-sizing: border-box; }

div.iSlice{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.iPieHalf { height: calc(50.2% ); overflow: hidden; }
div.iPieHalf > div { height: calc(200.4% ); }
div.iPieFilling { border-radius: 50%; pointer-events: auto !important; }
div.iPieFilling[data-over] { filter: brightness(75%); }
div.iPieTip { pointer-events: none;  }

div.iChrt > div[onclick]:hover > div { filter: sepia(25%) /* brightness(75%)*/ ; z-index: 5; }
div.iChrt > div[onclick] > div.tip, div.iPieTip { display: none; position: absolute; z-index: 5; filter: none; padding: 5px 5px 5px 5px; color: black; height: auto; width: auto; 
border-style: solid; border-radius: 8px; border-width: 1px 1px 1px 1px; background-image: linear-gradient(to right, White 20%, rgba(255,255,255,.7) 100%); 
transform: translateX(-50%); }

div.iChrt > div[onclick] > div.tip { top: 50%; margin-top: 1em; }
div.iChrt > div[onclick]:hover > div.tip { display: block; }
div.AniFade { animation: 1s linear 0s 1 fadein; }
div.AniUp { animation: 1s ease-out 0s 1 growup; }
div.AniDown { animation: 1s ease-out 0s 1 growdown; }
div.AniRight { animation: 1s ease-out 0s 1 growright; }
div.AniLeft { animation: 1s ease-out 0s 1 growleft; }

@keyframes fadein {
    0% { filter: opacity(0%); }
    100% { filter: opacity(100%); }
}

@keyframes growup {
    0% { transform: scaleY(.01); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom;}
}

@keyframes growdown {
    0% { transform: scaleY(.01); transform-origin: top; }
    100% { transform: scaleY(1); transform-origin: top;}
}

@keyframes growright{
    0% { transform: scaleX(.01); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left;}
}
@keyframes growleft {
    0% { transform: scaleX(.01); transform-origin: right; }
    100% { transform: scaleX(1); transform-origin: right;}
}

/* == End Charting CSS == */
#id_toggle { position: absolute; top: 0; right: 0; font-family: "Lucida Console", Courier, monospace; }