/* Copyright 2008-2019 Pvx Plus technologies. All rights reserved */ 

a.iCmnVal:focus, input.iCmnVal:focus { outline: none; }

#id_0 { background: transparent; width: 1px; height: 1px; border: none; }

table { border-collapse: separate; }
body, input, textarea, select, button { font-family: Tahoma, Helvetica, Sans-serif; font-size: 12px; resize: none;}
button, input[type="button"]{ white-space: normal; }
body.on_ipad button, body.on_iphone button { -webkit-appearance: none; }   /* Remove iPad rounded buttons */

/* Main table containing panel */

#id_Main { white-space: nowrap; }

.iPanelDiv { position: relative; }
td.iPnl { overflow: hidden; }

.iPanel { position: relative;  z-index: 1; border-collapse: separate; table-layout: fixed;}
* {	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
	
.iTable { border-collapse: separate; table-layout: fixed; margin: 10px; }
#id_Root { position: relative; display: inline-block; width: 100%;}

tr.iRgn, td.iRgn  { margin: 2px 0px 2px 0px; padding: 2px 0px 2px 0px; } /* DONT CHANGE Cell definitions for each panel entry */

.iImgScroll { position: relative; overflow: auto; }
.iImgZoom {  background-color: #666; }
.iImgCrop { overflow: hidden; }
.iImg { display: block; }

.iMenuDiv { position: relative; z-index: 10; cursor:default; max-height: 100%; overflow: auto;}

#ce_Div { position: absolute; display: none; width: 100%; height: 100%; display: none; }
#ce_Text { width: 100%; height: 100%; padding: 0; line-height: 100%; border: none; }

/* Bottom copyright notice */
.iNotice, div.iNotice a:link, div.iNotice a:visited { font-family: Tahoma, Helvetica, Sans-serif; font-size: 9px; text-align: center; color: #85854F; }
#iNmdScript a { text-decoration: none; }

.iWebDivBord { border: solid 1px Silver; }
.iWebDiv { border: none; }

/* Title close button */
#id_Close { display: inline-block; vertical-align:top;}
.iClsBtn { width: 18px; display: inline-block;
	background-image: URL(/sysimage/close_gray.png); 
	background-position: center; background-repeat: no-repeat;  }
.iClsBtn:hover { background-image: URL(/sysimage/close.png); }

/* Message Box definitions */

.iMbxDiv { text-align: left; border: solid 1px black; background: White; z-index: 10; }
.iMbxTbl { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; }
.iMbxTtl { font-size: 16px; color: Black; padding: 4px 4px 4px 6px ; border-bottom: solid 1px Silver; }
.iMbxMin { width: 200px; height: 1px; } /* Forces minimum width */
.iMbxImg { vertical-align: top; padding: 10px 10px 10px 10px;}
.iMbxTop { vertical-align: middle; padding: 10px 10px 10px 10px; font-weight: bold;}
.iMbxBtm { background: #E8ECF0; text-align: center; padding: 10px 0 10px 0; }
.iMbxBtn { min-width: 75px; }

/* Query definitions */

.iQryTtl { font-size: 200%; }
#iQryLine { background: #FFFFFF; color: #000000; }
#iQryLineAlt { background: #E6FFE6; color: #000000; }
#iQryLineOver  { background: #BCB; }

a.iQryDrill:link  { color: #000080; }
a.iQryDrill:visited  { color: #000080; }
.iQryDrill:hover  { color: #FFFF00; }

.iQryHdr { background: silver; text-align: center; }

#iQryHdrNorm { border-right-style: groove; border-right-width: 2px; border-right-color: gray; 
              border-bottom-style: solid; border-bottom-color: #666; }

#iQryHdrOver { border-right-style: groove; border-right-width: 2px; border-right-color: gray; 
              border-bottom-style: solid; border-bottom-color: #64E664; }

#iQryHdrPad { border-bottom-style: solid; border-bottom-color: #666; }

.iQryFrame { background: gray; }

div.iQry { display: inline; } 
/* div.iQry div { position: relative; top: -1px; }  */

/* Frame definitions *?

/* The following frame (prefered) using background images for frame and header */
#iFrameTL { background-image: url(/sysimage/frameTL.gif); background-repeat: no-repeat;  background-position: bottom left;}
#iFrameTR { background-image: url(/sysimage/frameTR.gif); background-repeat: no-repeat; background-position: bottom right; }
#iFrameT { background-image: url(/sysimage/frameT.gif); background-repeat: repeat-x; background-position: bottom; }

#iFrameHL { background-image: url(/sysimage/frameHL.gif); background-repeat: no-repeat;  background-position: top left;}
#iFrameHR { background-image: url(/sysimage/frameHR.gif); background-repeat: no-repeat; background-position: top right; }
#iFrameH { background-image: url(/sysimage/frameH.gif); background-repeat: repeat-x; background-position: top; color: White; }

#iFrameBL { background-image: url(/sysimage/frameBL.gif); background-position: bottom left; }
#iFrameBR { background-image: url(/sysimage/frameBR.gif); background-position: bottom right; }
#iFrameB { background-image: url(/sysimage/frameB.gif); background-repeat: repeat-x; background-position: bottom; }

#iFrameL { background-image: url(/sysimage/frameEdge.gif); background-repeat: repeat-y; background-position: top left; }
#iFrameR { background-image: url(/sysimage/frameEdge.gif); background-repeat: repeat-y; background-position: top right; }

#iFrameBack { }
.iFrameText { }

/* Absolute rendering Frame template */

table.iFrm, table.iFrm tbody { width: 100%; height: 100%; table-layout: fixed;}

td.iFrmHL { width: 10px; background-image: url(/sysimage/frameHL.gif); background-repeat: no-repeat;  background-position: top left;}
td.iFrmHC { background-image: url(/sysimage/frameH.gif); background-repeat: repeat-x; background-position: top; color: White; }
td.iFrmHR { width: 10px; background-image: url(/sysimage/frameHR.gif); background-repeat: no-repeat; background-position: top right; }

td.iFrmTL { width: 10px; background-image: url(/sysimage/frameATL.gif); background-repeat: no-repeat;  background-position: top left;}
td.iFrmTC { background-image: url(/sysimage/frameAT.gif); background-repeat: repeat-x; background-position: top; }
td.iFrmTR { width: 10px; background-image: url(/sysimage/frameATR.gif); background-repeat: no-repeat; background-position: top right; }

td.iFrmML { width: 10px; background-image: url(/sysimage/frameEdge.gif); background-repeat: repeat-y; background-position: top left; }
td.iFrmMC { }
td.iFrmMR { width: 10px; background-image: url(/sysimage/frameEdge.gif); background-repeat: repeat-y; background-position: top right; }

td.iFrmBL { width: 10px; background-image: url(/sysimage/frameBL.gif); background-position: bottom left; }
td.iFrmBC { background-image: url(/sysimage/frameB.gif); background-repeat: repeat-x; background-position: bottom; }
td.iFrmBR { width: 10px; background-image: url(/sysimage/frameBR.gif); background-position: bottom right; }

/* Multi-line
	iMultiLine - Normal
	iMultiLineNB - Borderless
*/

.iMultiLineNB { border: 0px none Black; height:inherit; padding: 0; margin: 0;}
.iMultiLineNB[readonly], .iMultiLineNB[nmdLock='true'] { background-color: transparent; }
.iMlQryEmbed { padding-right: 20px; }

/* Drop box -- iNomads emulated control */

.iVDrop { background: white; color: black; padding: 0px 0px 0px 0px; position: relative; white-space: nowrap; width: 100%; }
.iVDropBtn { width: 20px; height: 100%; vertical-align: middle;  text-align: center; position: absolute; right: 0; top: 0;}
.iVDropBtn div { display: inline-block; vertical-align: middle; font-size: 60%; }
.iVDropTxt { color: inherit; background-color: inherit; width: 100%; margin: 0;  text-indent: 3px;}
.iVDropList { display: none; position: absolute; border: solid 1px black; top: 0; left: 0; z-index: 15;}
.iVList_box { width: 100%; }

 select:focus option { background-color: White; color: Black;}

 /* Special iPad/iPhone drop boxes */

.iPadDb { position: fixed; border: solid 1px Black; top: 0; left: 0; padding: 10%; display:none; overflow: auto; width: 100vw; height: 100vh; z-index: 100; background-image: radial-gradient(rgba(0,0,0,.3), rgba(0,0,0,.6)); }
.iPadDb div { padding: 5px 5px 5px 20px; text-indent: 1em; position: relative; background-color: white; font-size: 3vh; border-bottom: dotted 1px #888;
white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; color: Black;}
.iPadDb div:hover { background-color: #CCC !important; }
.iPadDb div[selected]::before { position: absolute; content:"\2713 "; font-weight: bold; left: -.7em; }
.iPadDb div[selected] { background-color: #EEEEEE; }

/* Button - use data-bt-? to test button attributes:
**	 f=flat, x=flat-nobox, w=web, t=transparent, c=has colour, u=underline, v=hover color
*/

.iBtn { vertical-align: middle; margin: 0; overflow: hidden;}
.iBtn[data-bt-f], .iBtn[data-bt-x] { border: solid 1px transparent; padding: 1px;}
.iBtn[data-bt-w] { border: none; padding: 1px;}

.iBtn[data-bt-w] { background: none; filter: none;}
.iBtn[data-bt-t] { background: none; border: solid 1px #666; -moz-border-radius: 5px; border-radius: 5px; filter: none; }
.iBtn[data-bt-t][data-bt-f],.iBtn[data-bt-t][data-bt-x] { border: solid 1px transparent; }
button.iBtn[disabled]:not([data-bt-brd]), .iBtn[disabled][data-bt-f], .iBtn[disabled][data-bt-x], .iBtn[disabled][data-bt-w], div.iBtn[data-disabled]{ filter:alpha(opacity=60); opacity:0.6; }

.iBtn[data-bt-v]:hover,.iBtn[data-bt-w]:hover { color: Blue; }
.iBtn[data-bt-u],.iBtn[data-bt-w]:hover, .iLink .btTxt:hover { text-decoration: underline; }
.iBtn[data-bt-v][disabled]:hover { color: Grey;  }
.iBtn[data-bt-u][disabled]:hover { text-decoration: none; }
.iBtn[data-bt-f][disabled]:hover { border: solid 1px transparent; background-image: none; filter: none;}
.iBtn[data-bt-szr="H"] { margin-left: 20%; width: 60% !important; cursor: e-resize; }
.iBtn[data-bt-szr="V"] { height: 80% !important; cursor: n-resize;}
.iBtn[data-bt-szr] { padding: 0; border: solid 1px silver; border-radius: 5px; }
.iBtn[data-bt-szr]:hover, .iBtn[data-bt-move="Y"] { -moz-box-shadow: 0 0 6px 6px #FF8; -webkit-box-shadow: 0 0 6px 6px #FF8; box-shadow: 0 0 6px 6px #FF8; z-index: 50;}
.iBtn[data-bt-move="Y"] { cursor:move; }

/* Button rendering styles */

.btTxt { width: 100%; max-height: 100%; overflow: hidden; }
div.btTxtBtm { width: 100%; text-align: center; padding-top: 6px;}
div.btTxtTop { width: 100%; text-align: center; padding-bottom: 6px;}                            
div.btImgLft { max-width: 50%; float: left; } 
div.btImgRht { max-width: 50%; float: right; }
div.btTxtOver { position:relative; width: 100%; height: 100%; }
div.btTxtOver > div { position: absolute; top: 0; left: 0; }

button .btDn, button:active .btUp { display: none;}
button .btUp, button:active .btDn { display: inline-block; }

.btTxtDiv { height: 100%; overflow: hidden; }
.btTxt { vertical-align: middle; display: inline-block; max-width: 99%; max-height: 100%; overflow: hidden;  }

.iBtn[data-bt-w] .btTxt { height: 100%; }

.btVCent { vertical-align: middle; display: inline-block; width: .1%; height: 100%;  }

.btTbl { padding:0; margin: 0; width: 100%; height: 100%; table-layout: fixed; border: none; border-spacing: 0;}
.btTbl td { vertical-align: middle; height: 50%; width: 100%; }
				
/* Button outline for flat when hovering, colored or radio-button with image */
.iBtn[data-bt-f]:hover,.iBtn[data-bt-c], .iBtn[data-rb-s='0'] { border: solid 1px #666; -moz-border-radius: 3px; border-radius: 3px; }
.iBtn[data-bt-f]:not([data-bt-t]):hover,.iBtn[data-bt-c]:not([data-bt-brd]), .iBtn[data-rb-s='0']:not([data-bt-t]) {
 background-image: -webkit-linear-gradient(rgba(255,255,255,.75), rgba(128,128,128,.5));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0FFFFFF, endColorstr=#80808080);
 background-image: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(128,128,128,.5));
}

/* Radio_button down */

.iBtn[data-rb-s='1'] { border: solid 1px #666 !important; -moz-border-radius: 3px; border-radius: 3px; }
.iBtn[data-rb-s='1']:not([data-bt-t]) {
 background-image: -webkit-linear-gradient(rgba(128,128,128,.5), rgba(255,255,255,.75));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80808080, endColorstr=#C0FFFFFF);
 background-image: linear-gradient(to bottom, rgba(128,128,128,.5), rgba(255,255,255,.75));
}

/* Tri-state check box definitions */

.iCbox[data-cb-down] { position: relative; display: block; }
.iCbox[data-cb-down]::after { 
    content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL(/sysimage/xover.png); background-size: 100% 100%; 
    }
.iCbox[data-cb-rev] { color: White; background-image: linear-gradient( rgba(80,80,80,.25), rgba(80,80,80,.70)); height: 100%; width: 100%; display: block; }

.iCbox { position: relative; top: -2px; }
.iCboxClr, .iCbox3  { padding: 0; margin:1px 1px 1px 1px; width:14px; height:14px; border: inset 1px Gray; color: #4B4; 
	background-color: White; font-size: 10px; }
.iCbox3 { background-image: url(/shades/gray_in/light.gif); }
.iCboxClr[data-cb-s='2'], .iCbox3[data-cb-s='2'] { color: Maroon; }

.iCbT, .iRbT { height: 100%; width: 100%; }
.iCbT tr, .iRbT tr { vertical-align: top;}
.iCbX, .iRbX { width: 20px;}
.iCbX[data-cb-r], .iRbX[data-rb-r] { text-align: right; }
.iCbL, .iRbL { white-space: normal; overflow: hidden; }
.iCbL label, .iRbL label { overflow:hidden; display:inline-block; }

/* Firefox fix for buttons */
button::-moz-focus-inner { border: 0; padding: 0; }

/* Rocker button */

.iRckImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
table.iRckImg tr td {  vertical-align:middle; text-align: center; }
.iRckDiv { position: absolute; display: table;}
.iRckArw { color: Gray; text-shadow: 1px 1px White; position: absolute; font-weight: bold; text-align: center; }
.iRckArw:hover { color: White;  }

/* Spinner button */

.iSpnrImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
table.iSpnrImg tr td {  vertical-align:middle; text-align: center; }
.iSpnrDiv { position: absolute; display: table;}
.iSpnrArw { color: Gray; position: absolute; font-weight: bold; text-align: center; }
.iSpnrArw:hover { color: White;  }

/* Folders and folder tabs */

.iFolder { border-collapse: separate; table-layout: fixed; }
div.iFolderDiv { position: relative; vertical-align: top;}
td.iFolderPanel, .iTabActive, .iTabNormal, .iTabDisabled
{ 	border-left: 1px outset;
	border-right: 1px outset;
}

td.iFolderPanel 
{	border-bottom: 1px outset;
	background-color: #FAFAFA;
}
.iTabActive 
{	border-top: 2px outset;
	background-color: #FAFAFA;
	padding: 0px 0px 0px 0px;
}
.iTabNormal 
{	border-top: 2px outset;
	border-bottom: 1px inset;
	padding: 2px 0px 0px 0px;
	text-decoration: underline;
}

.iTabNormal:hover
{   border-top: 2px solid orange;
	background-color:  #F8F8F8;
}
.iTabDisabled 
{	border-top: 2px outset Silver;
	border-bottom: 1px inset Silver;
	padding: 2px 0px 0px 0px;
	color: Silver;
}

.iTabEmpty { border-bottom: 1px inset; }
.iTabImage { float: left; border: none; padding-right: 3px; }
.iTabDiv { position: relative; width: 100%; height: 100%; padding-left: 3px; padding-right: 6px;}
.iTabTxt { display: inline-block;  vertical-align: top; }
.iTabTxt a { color: Black; text-decoration: none; }
.iTabDiv:hover a { text-decoration: underline; }

/* Side tabs */
.iSdBtn { margin-bottom: 1px; }
.iSdTab > div { display: inline-block; }
.iSdBtn > button { border-radius: 0px; text-align: left; width:100%; height: 100%; white-space: normal; padding: 1px 3px;}
button.iSdTabNrm { background: linear-gradient(#F5F5F5,#DEDEDE); color: Black;}
button.iSdTabDis { background: linear-gradient(#F5F5F5,#DEDEDE); color: Gray;}
button.iSdTabCur { background: linear-gradient(#E9E9E9,#707070); color: White; }
.iSdBtn  .iTabImage { padding-left: 0; vertical-align: text-bottom; }
.iSdLeft  { text-align: left; }
.iSdRight { float: right; text-align: right; }
.iSdRight > .iSdBtn, .iSdRight > .iSdBtn .iTabImage { float: right; }
.iSdTab .iFolderDiv[data-frm="5"] { border-top: groove 1px Silver; border-bottom: groove 1px Silver; }
.iSdTab .iFolderDiv[data-frm="4"] { border:ridge 1px Silver;}

/* Web style folder tabs -- Vertical tab separators
	WtbCur - Current tab
	WtbNrm - Active Selectable tab
	WtbDis - Disabled tab
 */

.iWtbCur, .iWtbNrm, .iWtbDis { margin: 5px 0 0 0; font-size: 125%; padding: 3px 10px 0px;
	background-color: #888; }
	
.iWtbCur div, .iWtbNrm div, .iWtbDis div { display: inline-block;}
.iWtbCur a { color: White; text-decoration: none; }
.iWtbNrm a { color: White; }
.iWtbDis a { color: Silver;}
.iWtbTxt { padding-left: 5px; }
.iWtbCur .iWtbInd { width: 20px; background-image: url(/sysimage/right.png); background-repeat: no-repeat; }
.iWtbNrm .iWtbInd { width: 20px; background-image: url(/sysimage/down.png);background-repeat: no-repeat; }
.iWtbDis .iWtbInd { width: 20px; background-image: url(/sysimage/x.png); background-repeat: no-repeat; }

/* Popup menu and MenuBar  defintions
	iMenuDiv	: Surrounding box
	iMenuNul	: Hidden menu bar region
	iMenu		: Item
	iMenuOpen	: Open/Selected item
	iMenuDis	: Disabled item */
   
.iMenuDiv { border: solid 1px #ddd; text-align: left; background: #fdfdfd; margin: 2px; padding: 4px;  }
.iMenu, .iMenuOpen, .iMenuDis { height: 20px; }
.iMenuNul { display: block; /* none */ }
.iMenu:hover { background:linear-gradient(to bottom, #b0bed5, #f1f6ff); }  /* Hover highlight */
.iMenuOpen { color: White; background-image: url(/shades/blue_in/dark.gif); }
.iMenuDis { color: rgba(0,0,0,0.3); }
.iMenuCol3 { color: #777; }
tr.iMenu img { max-height: 32px; }
.iLbx, .iList_box { height: 100%; }

/* Common elements for compound controls: Formatter List box, List View, Grid
	iCmnDiv				: Block around the compound control
	iCmnDivBord			: Block around control when Border reqd
	iCmnDivTbl			: Table used to layout control
	iCmnData			: Data area in control which will be scrolled
	iCmnVal				: Actual value -- used to capture key and tabindx
	iCmnSizeH/V			: Div used to mark resize region
    iHSbar / iCSbar     : Scroll bar definitions
	iCorner				: Bottom Right corner when needed */


.iCmnDiv { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: White; }
.iCmnDivBord { margin: 0; padding: 0; background-color: White; border: solid 1px Silver; }
.iCmnDivBord tr td, .iCmnDivBord ts{ margin: 0; padding: 0; }
.iCmnDivDiv { padding: 0; margin: 0; overflow: auto; }
.iCmnDivTbl { border: none; border-collapse: collapse; table-layout: fixed;
	vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
	 }
.iCmnData { overflow: hidden; padding: 0; margin: 0;}
.iCmnVal { width: 1px; height: 1px; border: none ; left: -10px; position: absolute; background-color: transparent; }
.iCmnSizeH { border: solid 1px Blue; background-color: #9CF; border-right: solid 3px Red;
  filter:alpha(opacity=50); z-index: 10;  /* CSS3 standard */  opacity:0.5; }
.iCmnSizeV { border: solid 1px Blue; background-color: #9CF; border-bottom: solid 3px Red;
  filter:alpha(opacity=50); z-index: 10;  /* CSS3 standard */  opacity:0.5; }

.iCmnMask { background-color: Black;
  filter:alpha(opacity=5);  /* CSS3 standard */  opacity:0.05;  z-index: 5; }
iframe.iPopFrm { background-color: White; z-index: 10; border: solid 1px Black; position: absolute; }

.iCmnSubWdw { background-color: #FC9; border: solid 1px Black; }

.iRowSel { color: #CCD; background-image: url(/shades/blue_in/dark.gif); }
.iRowSelFcs { color: White; background-image: url(/shades/blue_in/dark.gif); }
.iRow:hover { background:linear-gradient(to bottom, #b0bed5, #f1f6ff); }

span.iPad { display: inline-block; }

.iHSbar { display: inline-block; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(128,128,128,.5)); padding: 1px 0; border: solid 1px #555;}
.iHSbar div { position: relative; min-width: 12px; height: 100%; border: solid 1px #888; border-radius: 3px; background-color: #EEEEEE ; box-shadow: 0 0 8px inset #BBBBBB; }
.iHSbar div:hover  { background-color: #CCC; }
.iHSbtn {  width: 18px; height: 100%;  padding: 0; font-size: 80%; }

.iVSbar { display: block; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,.75), rgba(128,128,128,.5)); padding: 1px 0; border: solid 1px #555;}
.iVSbar div { position: relative; min-height: 12px; width: 100%; border: solid 1px #888; border-radius: 3px; background-color: #EEEEEE ; box-shadow: 0 0 8px inset #BBBBBB; }
.iVSbar div:hover  { background-color: #CCC; }
.iVSbtn {  display: block; height: 18px; width: 100%;  padding: 0; font-size: 80%; }

.iCorner { background-image: url(/sysimage/corner.gif); background-repeat: no-repeat;
	background-position: center center;
	background-color: #EEE; 
	border-top: solid 1px #666; border-left: solid 1px #666;}

/* New List View Styles */

.iLv { white-space: nowrap; position: relative; background-color: White; } 
.iLv[data-lv-b] { border: solid 1px Silver; }
.iLv[data-disabled] { color: Silver; }

.iPgBar, .iLvHdr { width: 100%; z-index: 8; position: relative; }
	
.iPgBar { position: absolute; left: 0px; bottom: 0px; padding-top: 2px; }
.iPgCol { position: absolute; top: 0px; right: 5px; font-size: 125%; }
.iPgCol a { text-decoration: none; }
.iPgCol a:hover { text-decoration: underline; }

.iLvData { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; z-index: 4;}
.iLvScrl { position: absolute; top: 0; left: 0; overflow: auto; width: 100%; height: 100%; }
.iLvScrl::-webkit-scrollbar-corner { background-color: #EEE;}

.iLvFill { visibility: hidden; }

.iLvTL, .iLvBL { display: inline-block; z-index: 4; position: relative; }	/* 4 zones Top Left/Right Btm Left/right */
.iLvTR, .iLvBR { display: inline-block; position: relative; }

.iLvHRow { height: 100%;}
.iGdRow { position: absolute; left: 0px; background-color: White; }
.iLvRow { position: absolute; left: 0px; border-bottom: solid 1px transparent; border-top: solid 1px transparent; width: 100%;}

.iLvRow:hover .iLvCol { background-image: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(128,128,128,.25));  }
.iLv[data-fcs] .iLvRow[data-sel] .iLvCol { color: White; background-color: rgb(128,128,128); }
.iLv .iLvRow[data-sel] .iLvCol { color: Black; background-color: rgb(220,220,220); }

.iLvLink:hover { text-decoration: underline; }
.iLv[data-disabled] .iLvRow:hover { background-image:none; }


.iLvHCol, .iLvCol, .iLvCell { display: inline-block; height: 100%; white-space: nowrap; position: relative; }
.iLvHCol, .iLvCol {  overflow: hidden; text-overflow: ellipsis; padding-right: 3px; }
.iGdRow .iLvCell { vertical-align: top; }
.iLvCell[rowspan] { z-index: 1; }
.iLvHCol { text-align: center;
	border-right-style: groove; border-right-width: 1px; border-right-color: gray; cursor:default; }

.iLvGray { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #666; 
	background-image: url(/shades/lite_ontop.png); background-size: 100% 100%; background-repeat: no-repeat; 
	background-color: #F6F8FA; }
.on_msie8 .iLvGray { background-repeat: repeat-x; }
.iLvClkOk:hover { border-bottom: solid 1px Orange; background:linear-gradient(to bottom, #b0bed5, #f1f6ff);
    text-decoration: underline; }

:root { --line-clr: #EEE; }
div.iLv[data-xl='2'] .iLvCell, div.iLv[data-xl='1'] .iLvCell { border-right-style: solid; border-right-width: 1px; border-right-color: var(--line-clr);  }
div.iLv[data-xl='3'] .iLvCell, div.iLv[data-xl='1'] .iLvCell  { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--line-clr); }
div.iLv[data-xl='2'] .iLvCol, div.iLv[data-xl='1'] .iLvCol { border-right-style: solid; border-right-width: 1px; border-right-color: var(--line-clr);  }
div.iLv[data-xl='3'] .iLvCol, div.iLv[data-xl='1'] .iLvCol  { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--line-clr); }

.iLvCell[data-lockend] { border-right: solid 1px Black;}

.iLvHSort { text-decoration: none; display: inline-block; position: absolute; top: 0; right: 2px; width: 14px; height: 100%; }
.iLvHSort[data='up']::after { display: inline-block; position: absolute; top: 0; right: 0px; content: "\25B2"; font-size: 80%; }
.iLvHSort[data='dn']::after { display: inline-block; position: absolute; top: 0; right: 0px; content: "\25BC"; font-size: 80%; }

.iLvRow[inBk='1'] { background-color: #CCDDFF; }
.iLvRow[inBk='2'] { background-color: #E8E8F8; }

.iLvHSizR { width: 4px; height: 100%; position: absolute; top: 0px; right: -2px; cursor: e-resize; }
.iLvHSizB { width: 100%; height: 4px; position: absolute; bottom: -2px; cursor: n-resize; }

/* Images in List view */
div.lvImg > span { display:inline-block; height: 100%; vertical-align: middle;}
div.lvImg > img {  max-width: 100%; max-height: 100%; vertical-align: middle; }
div.lvImg { display:inline-block; text-align: center; }
div.lvBar { display: inline-block; height: 100%; margin: 1px; vertical-align: middle; }
div.lvBar + div.lvBar { margin-left: -2px; }

/* Grid styles 
	iGridTbl	: Actual grid table
	iGridHdr	: Header lines
	iGridCell	: Cells (iGridCellXL is with Excelstyle=1 - default) */

.iGridTbl { table-layout: fixed; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.iGridTbl tr td, .iGridTbl tr { vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

.iGridHdr { background-image: url(/shades/gray/light.gif); background-position: bottom; background-repeat: repeat-x;
	text-align: center; white-space: normal; overflow: hidden; vertical-align: middle;
	border-right: solid 1px #666; border-bottom: solid 1px #666; 
	border-left: none; border-top: none; }

.iGridCell {  background-color: White; white-space: nowrap; 
	border-right-style: solid; border-right-width: 1px; border-right-color: White; 
	border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: White;
	border-left: none; border-top: none; }

/* .iLvCell[data-sts="E"], .iLvCell[data-sts="F"] { background-image: url(/sysimage/gridfocus.png); background-size:100% 100%;
	background-repeat: repeat-x; }
*/
.iLvCell[data-sts="E"], .iLvCell[data-sts="F"] { box-shadow: 0 0 4px 4px Silver inset;}

/* Data Display cell */

.iGdCell, .iGdHCell { padding: 1px  1px 1px 1px; overflow: hidden; white-space: pre; }
.iGdCell[data-t="multi_line"] { white-space: pre-wrap; }
.iGdCell[data-t*="ellipsis"] { text-overflow: ellipsis; }
.iGdCell[data-t^="check"] { text-indent: 20px; background-image: url(/sysimage/emptybox.png); background-repeat: no-repeat; background-position: left;}
.iGdCell[data-v="1"][data-t^="checkbox"] { background-image: url(/sysimage/xinbox.png);}
.iGdCell[data-v="1"][data-t^="checkmark"] { background-image: url(/sysimage/checkedbox.png);}
.iGdCell[data-rd="L"] { background-color: rgba(220, 220, 224, 0.25); }
.iGdCell[data-t*="drop"], .iGdCell[data-t^="lookup"], .iGdCell[data-t^="query"] { text-overflow: ellipsis; }

.iGdHdrUp { background-image: url(/sysimage/smlup.gif); background-position: right center ; background-repeat: no-repeat;}
.iGdHdrDown { background-image: url(/sysimage/smldown.gif); background-position: right center;  background-repeat: no-repeat;}

.iGdCell img { max-height: 100%; max-width: 100%; margin-bottom: 1px; }

.iLvCell[data-sts="E"] .iGdCell { visibility: hidden; } /* Hide while editing */

/* Edit overlay */
.iGdEdit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; overflow: hidden; 
	padding: 0px 1px 0px 1px; background-color: transparent; }
.iLvCell[data-sts="F"] .iGdEdit::-ms-clear { display: none; }

/* Grid Query buttons */
.iGdQry {  display: inline-block; z-index: 9; vertical-align: middle; text-align: center; padding-left: 2px; 
		float: right; min-width: 10px; /* position: absolute; top: 0px; right: 0px; */ }

.iGdQryHd { display: none; }
.iLvCell[data-sts="F"] .iGdQryHd { display: block;}
.iLvCell[data-sts="E"] .iGdQry { display: none; }

/* Grid Drop box */

.iGdDrp { position: absolute; width: 100%; z-index: 40; }
div.iGdDrpFrm { position: absolute; width: 100%; } /* Frame */
div.iGdDrpList { width: 100%; max-height: 100px; min-height: 10px; overflow: auto; border: solid 1px #333; color: Black; background-color: White; }
div.iGdDrpList div:hover { background-color: rgb(240, 240, 240); }
div.iGdDrpList div[data-s="Y"] { color: White; background-color: rgb(40,40,128); }

/* Grid Button cell type */
.iGrdBtn { border: outset 1px #EEF; width: 100%; height: 100%; border-radius: 3px; }
.iGbFlt { width: 100%; height: 100%; }
.iGbFltIn:active { border-top: solid 1px #333; border-left: solid 1px #333; }
.iGbSpn { display:inline-block; height: 100%; vertical-align: middle; }
.iGbSpn + span { display: inline; vertical-align: inherit;  }
.iGdCell[data-t*="textbutton"] div .iGbSpn + span { display: inline-block; white-space: normal; }

.iGrdDBtn {  background-color: #DDE; border-style: solid;  border-width: 1px;
	background-image: url(/sysimage/smldown.gif); background-position: center center; background-repeat: no-repeat;
	border-color: #666; width: 14px; vertical-align: middle; text-align: center; }

/* Grid top/bottom ticks */
.iTickTL, .iTickBL { position: absolute; left: 0; width: 0px; height: 0px; border-style: solid; border-color: transparent;}
.iTickTL { top: 0; border-width: 6px 6px 0 0; }
.iTickBL { bottom: 0; border-width: 6px 0 0 6px; }

/* Tree views */

.iTv { display: block; white-space: nowrap;  }
.iTvMid { background: url(/sysimage/tvmid.gif) repeat-y top left; width: 20px; vertical-align: top;}
.iTvBtm { background: url(/sysimage/tvbtm.gif) no-repeat top left; width: 20px; vertical-align: top;}
.iTvNul { width:8px; vertical-align: top;}
.iTvText { padding:0 3px 0 3px; white-space: nowrap; cursor: default; }
.iTvTextFcs { padding:0 3px 0 3px;  }
.iTvTextSel { background: #DDD;  padding:0 3px 0 3px; }
.iTvTextSelFcs { color: White; background-image:  url(/shades/blue_in/dark.gif); padding:0 3px 0 3px; }

/* Charting/OCX control
	iChrtDiv - Standard chart region
	iNoChrtDiv - dummy entry issued when no charting control exists
	iOcxDiv - dummy entry used if application tries to use OCX control not supported on Web
 */

.iChrtDiv { background-color: White; }
.iNoChrtDiv { background-image: url(/sysimage/nocharts.jpg); background-repeat: no-repeat;
	background-color: White; background-position: center center; }
.iOcxDiv { background-image: url(/sysimage/noocx.jpg); background-repeat: no-repeat;
	background-color: White; background-position: center center; border-color: Silver;}
	
/* Caculator */

.iClcFrame, iClcBtns { margin: 1px; padding: 0; }
.iClcDiv { background: White; border:solid 1px #666; z-index: 30; }
.iClcBtn {  background-image: url(/shades/gray/light.gif); text-align: center; width: 30px; height: 13px; border: solid 1px #666; }
.iClcBtn:hover {  background-image: url(/shades/blue_in/dark.gif); color: White; }
.iClcErr { width: 95px; background: #F88; }
.iClcInp { width: 95px; }

#ic_Rtrn { background-image: url(/sysimage/checkmark.png);
	background-repeat: no-repeat;
	background-position: center center;
}
#ic_Rtrn:hover { background-color: #EFE; }
#ic_Exit { background-image: url(/sysimage/x.png);
	background-repeat: no-repeat;
	background-position: center center;
}
#ic_Exit:hover { background-color: #FEE; }

/* Calendar */

.iDteDiv { background: White; border:solid 1px #666; z-index: 30; }
.iDteHdr { font-weight: bold; background-image: url(/shades/blue_in/dark.gif); height: 18px; border-bottom: solid 1px Black; color: White; }
.iDteArw { width: 20px; color: White; }
.iDteMon { text-align: center; width: 150px; }
.iDteMon span:hover, .iDteArw:hover { text-decoration: underline overline; color: Yellow; }
.iDteDay { text-align: center; }
.iDteBad { color: #F3F3F3; }
.iDteOky { background-color: White; color: Black;}
.iDteNow { background-color: Yellow; color: #066;}
.iDteSel { background-color: White; background:linear-gradient(to bottom, #b0bed5, #f1f6ff); color: Black;}
.iDteTbl { padding: 0; margin: 0;}

/* Progbar */

.iPbrTbl { width: 400px}
.iPbrTtl { font-size: 14px; color: white; font-weight: bold; background: #68B; padding: 4px 4px 4px 6px ; }
.iPbrTop { vertical-align: middle; padding: 10px 10px 10px 10px;}
.iPbrBtm { background: white; text-align: right; padding: 10px 10px 10px 10px;}
.iPbrBtn { width: 75px;}
#pb_Box { display: block; padding: 2px 2px 2px 2px; margin-left: 10px; margin-right: 10px; border: solid 1px #E6E6E6; border-radius: 10px; background-color: #E6E6E6; height: 20px; }
#pb_Bar { display: block; border: none; border-radius: 10px; background-image: url(/shades/blue_in/medium.gif);
		   height: 15px; }

/* Drag and Drop divs */
.iDragDiv {  position: absolute; background-color: #FDD; color: #800; z-index: 40; 
	filter:alpha(opacity=60);  /* CSS3 standard */  opacity:0.6;  border: 2px solid Orange; padding: 2px;
	-moz-box-shadow: 0 0 6px 6px Orange; -webkit-box-shadow: 0 0 6px 6px Orange; box-shadow: 0 0 6px 6px Orange;
	border-radius: 3px; }
.iDropDiv {  position: absolute; background-color: #DFD; color: Black; border: 2px solid #006400; z-index: 40;  padding: 2px;
	-moz-box-shadow: 0 0 6px 6px #228b22; -webkit-box-shadow: 0 0 6px 6px #228b22; box-shadow: 0 0 6px 6px #228b22;
	border-radius: 3px;	}
.iDragMsk {	z-index: 40; cursor: wait;
	background: White;
	filter:alpha(opacity=5);  /* CSS3 standard */  opacity:0.05;  }  

/* Touch screen emulation styles
 - used to generate a touch bar that replace scroll bars since touch screens dont support them
 */
.iTouchBtn { height: 17px; width: 17px; color: #333; 
	  background-image: url(/shades/gray/light.gif);
	  border: solid 1px #666; text-align: center; }
.iTouchBtn:hover { color: #666; }
.iTouchVBar { width: 18px; background-image: url(/shades/gray/medium_v.gif); border-left:groove 1px #333; }
.iTouchVPos { width: 18px; height: 1px; background-image: url(/shades/gray/dark_v.gif); }
.iTouchHBar { height: 18px; background-image: url(/shades/gray_in/medium.gif); border-left:groove 1px #333; }
.iTouchHPos { height: 18px; width: 1px; background-image: url(/shades/gray_in/dark.gif); }

/* Spinner */
.iSpinInc, .iSpinDec { font-size: 65%; text-decoration: none; }

/* Special debugger text area used to display text screen image */

textarea[nmdClass="DBG_SNAPSHOT"] { background: Black; color: White; 
	font-family: Courier New, Courier, Andale Mono, Consolas; font-size: 10px;
}

/* Class used when sending hidden control in html */

.iHide { visibility: hidden; } 

/* Floatable child window styles */

.iChild { vertical-align: top; position: absolute; z-index: 50; }
.iChildHR { cursor: n-resize; }
.iChildHd { background-color: Silver; display: inline-block; cursor: move;}
.iChildTtl { overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.iCols, tr.iCols td { height: 0px; }
.iChildDv { height: 100%; border: solid 1px #666; background-color: White; position: relative;}
div.iChildDv table.iTable { margin-top: 0px; }


/* Shadowed regions */
div.iMbxDiv { -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; box-shadow: 5px 5px 5px #666; }

/* Un comment if you want larger message boxes on mobile devices
body.is_mobile div.iMbxDiv { transform: scale(2,2);  }
*/

/* Custom template defintions */
div.dvCustom { display: block; position: relative; height:100%; width: 100%; }
div.dvCustom a { text-decoration: none; }
div.dvPanel { z-index: 0;}
div._Top, div._Mid, div._Btm { position:absolute;}
div._Top { top: 0; }
div._Mid { top: 50%; height:2px; line-height:2px; margin-top:-1px; }
div._Btm { bottom: 0px; }
div._Left { left: 1px; z-index: 2; }
div._Center { left: 0%; width: 100%; text-align: center; z-index: 1; }
div._Right { right: 1px; z-index: 2; }
div.imgCustom { position: absolute; top: 0; width: 100%; height: 100%; }
div.imgCustom > span { display: inline-block; height: 100%; }
div.imgCustom img { z-index: 2; border: none;}
table.tbCustom { width: 100%; }
span.subMenu { float: right; }
body { margin: 0; padding: 0; }

.iPopMask { background-image: URL(/sysimage/popmask.gif); z-index: 15; } 

/* Title bar settings */
#iTitle { white-space: normal; width: 100%; }
#iTtlBtns { float: right; padding: 2px 3px 0 0;}
#iTtlBlk { white-space:nowrap; cursor: move; }
#iTtlText { font-weight: bold; display: inline-block; overflow:hidden; text-overflow: ellipsis; width:100%; }
#id_3Lines { display: none; padding-right: 4px; cursor:pointer; }

.iTtlBtn, .iTtlBtnOn { display: inline; width: 20px; }
.iTtlBtn img:hover { -moz-box-shadow: 0 0 6px 6px White; -webkit-box-shadow: 0 0 6px 6px White; box-shadow: 0 0 6px 6px White;
	background-color: #EFF; filter:alpha(opacity=60);  opacity:0.6; }
.iTtlBtnOn img { -moz-box-shadow: 0 0 6px 6px #8F8; -webkit-box-shadow: 0 0 6px 6px #8F8; box-shadow: 0 0 6px 6px #8F8; 
	background-color: #EFF; filter:alpha(opacity=60);  opacity:0.6; }
/* Function keys */
div.iFky { display: inline-block; padding: 0 2px; }
#iFkyBtn { position: relative; }
#iFkyDrp { display: none; background: Silver; position: absolute; top: 20px; left: -80px; z-index: 40;
	-moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; box-shadow: 5px 5px 5px #666; }
#iFkyTbl { width: 160px; color: Black; }
td.iFkyCol { width: 40px; }
#iFkyTbl td { padding: 3px; border: outset 2px #BBB; text-align: center; background-color: #DDD; }
#iFkyTbl td:hover { background-color: #EEE; -moz-box-shadow: 0 0 4px 4px #EEE; -webkit-box-shadow: 0 0 4px 4px #EEE; box-shadow: 0 0 4px 4px #EEE;}
#iFkyTbl td.iFkyKeyOn { background-color: #EEC; border-color: #FF8; }
#fk_dd { display: none; }

/* Rectangle */
.iRect { width: 100%; height: 100%; }

/* Message bar */
table.iMsgBar { width: 80%; margin: 0 auto; }
table.iMsgBar td { overflow: hidden; border-style: inset; border-width: 2px; } 
#Msgbar1, #Msgbar2, #Msgbar3 { display: none; }

/* .iTabTxt { vertical-align: middle; } */
#id_Folder { margin-top: 5px; }

/* Popup Qry highlight */
#dv_09999 { box-shadow: 6px 6px 2px 2px rgba(0,0,0,.5); }

/* iTip */
#iTip { display: none; position: absolute; z-index: 30; width: 500px;}
#iTipPtr
{  display: inline-block; position: absolute; top: 8px; left: 2px;
   width: 0; height: 0; z-index: 40;
   border-top: 10px solid transparent;
   border-right: 20px solid #7C0A0A;
   border-bottom: 10px solid transparent;
}
#iTipTxt
{	display: inline-table; min-width: 80px; max-width: 400px; padding: 10px;
	background-color: #CCC;  position: absolute; left: 21px;
	background: linear-gradient(#FEFEFE,#F0F0F0);
	border: solid 1px #888;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
	-moz-box-shadow: 5px 5px 8px #ccc; -webkit-box-shadow: 5px 5px 8px #ccc; box-shadow: 5px 5px 8px #ccc;
}

#iTipTxt h1 {border-bottom: Solid 2px #7C0A0A; font-weight: bold; font-size: 14px; margin: 0 0 3px; white-space:nowrap; }

div.iNomadsHidden { display: none; }

iframe.iPush2 { position:absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 50;  background-color: rgba(80,80,80,.3); }
body.iFramed { background-color: Transparent; background-image: none !important; }
.iFramed .iNotice { position: fixed; bottom:0; right: 0; margin: 0; }
.iFramed .iDiv { background-color: White; border: solid 1px Black; visibility: hidden; position: absolute; box-shadow: 6px 6px 2px 2px rgba(0,0,0,.5); }
.iFramed #iTitle { background-color: #EEE; }
#iSizeDrag { position: absolute; right: 0px; bottom: 0px; cursor:se-resize; z-index: 49;} 
#iSizeDiv { position: absolute; top: 0; left: 0; border: solid 1px Red; z-index: 48; }

.iBtnX { position: absolute; top: 0; right: 0; width: 20px; height: 100%; z-index: 1; background-repeat: no-repeat; background-position: center;}
button:hover .iBtnX { background-image: url(/sysimage/close_gray.png); }
button:hover .iBtnX:hover { background-image: url(/sysimage/close.png); }

select.iDropMob { top: 1px !important; left: 1px !important; background: transparent; }

/* == Charting CSS == */

div.iChrt * { box-sizing: border-box; }
div.iChrt { color: Black; width:100%; height: 100%; z-index: 2; } /* Forces all lines/borders to default to Black - overid is 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; }

div.iSlice{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.iPieHalf { height: calc(50% + .25px); overflow: hidden; }
div.iPieHalf > div { height: calc(200% - .5px); }
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 == */