/*
*/


.jxgbox {
    position:relative;
    overflow:hidden;
    background-color:#FCFCFC;
    border-style:solid;
    border-width:1px;
    border-color:#ccc;
    margin:5px 0px;
}

.jxgoutertopbox, .jxgouterbottombox {
    height:50px;    
}

.jxgoutertopbox {
    width: 100%;
    overflow: visible !important;
    height: 75px;
}

.jxgtopbox {
    height: 100%;
    overflow: visible !important;
    position:relative;
}

.jxgleftbox {
    width: 75px;
    float:left;
    overflow: visible !important;
    position:relative;
}
.jxgchartbox {
    float:left;
    position:relative;
    overflow: visible !important;
}
.jxgrightbox {
    width: 75px;
    position:relative;
    overflow: visible !important;
    
}
.jxgouterbottombox {
    width: 100%;
    height: 75px;
    position:absolute;
    bottom:0px; 
}

.jxgbottombox {
    height: 100%;
    position:relative;
    overflow: visible !important;
}
.jxgbottombox svg, .jxgrightbox svg, .jxgleftbox svg, .jxgtopbox svg {
    overflow: visible !important;
}

.jxgbox_nobg {
    position:relative; /* for IE 7 */
    overflow:hidden;
}

.jxglegendbox {
    position:absolute !important;
    overflow:hidden;
    background-color:#fff;
    width:100%;
    margin-top:6px; 
    border:none;
    outline:none;
    z-index:100;
    -moz-box-shadow:0px 0px 5px #cccccc;
    -webkit-box-shadow:0px 0px 5px #cccccc;
    box-shadow:0px 0px 5px #cccccc;
    top:30px;
    left:8px;
}

.JXGtext {
    background-color: transparent; /* May produce artefacts in IE. Solution: setting a color explicitly. */
    /*font-family: Arial, Helvetica, Geneva;*/
    padding: 0px;
    margin: 0px;
    min-width: 100px;
    min-height: 10px;
    /*line-height:100%;*/ /* This has to be commented out. Otherwise subscripts are not visible in IE */
    /*border-style:dotted;*/
    /*border-width:0.4px;*/
    text-align: center;
}

.jxglegendbox .JXGtext {
    text-align: left;    
}

.navbar {
    color: #aaaaaa;
    background-color: #f5f5f5;
    padding: 2px;
    position: absolute;
    font-size: 10px;
    cursor: pointer;
    z-index: 100;
    right: 5px;
    bottom: 5px;
}

.JSXRefreshing {
    background-color: transparent !important;
    background-image:url('/Images/save_indicator.gif') !important;
    background-position:center center !important;
    background-repeat:no-repeat;
    display:block !important;
    height:20px;
    margin:10px auto;
}

div[class~="jxgbox"] svg, div[class~="jxgbox_nobg"] svg {
    width: 100% !important;
    height: 100%;
}

.JXGAxisTick {
    color: #000000;
    background-color: #000000;
    position: absolute;  
}

.JXGAxisTickText {
    position: absolute;
    color:#999999;
}

.JXGAxisTitle {
    position:absolute;
    font-family:Arial;
    text-rendering: geometricPrecision;
    color:#000000;
    text-align: center;
}

.JXGRotated {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    /*-ms-transform: rotate(270deg);*/
    width: 200px;        
}

.lt-ie10 .JXGRotated { 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    zoom:1;
    background-color:#ffffff;
    /*-transform: translate(80px, -180px);*/
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
    margin-right: -188px !important; 
    margin-bottom: 178px;
}

div[id*="CenChart"] svg {
    width:100%;    
}

.JXGHorizontalZoomBar, .JXGVerticalZoomBar {
    border:none;
    background-color:transparent; 
}

.JXGHorizontalZoomBar {
    position:absolute;
    width:100%;
    height:4px;
    right:0px;
    top:100%;
}

.JXGVerticalZoomBar {
    position:absolute;
    height:100%;
    width:4px;
    top:0px;
    right:100%;
}

.JXGVerticalSlider, .JXGHorizontalSlider {
    border:none;
    z-index: 20;
    width:0px;
    height:0px;
    cursor:pointer;
}

.JXGHorizontalSlider:hover {
     border-bottom-color:#666666;
}

.JXGVerticalSlider:hover {
    border-left-color:#666666;
}

.JXGHorizontalSlider {
    position:absolute;
    -transform: translate(-5px, 0);
    -webkit-transform: translate(-5px, 0);
    -moz-transform: translate(-5px, 0);
    -o-transform: translate(-5px, 0);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #cc0033;
    border-top:none;
    margin-top:4px;    
}

.JXGVerticalSlider {
    position:absolute;
    -transform: translate(0, -5px);
    -webkit-transform: translate(0, -5px);
    -moz-transform: translate(0, -5px);
    -o-transform: translate(0, -5px);    
    border-bottom:7px solid transparent;
    border-top:7px solid transparent;
    border-left:7px solid #0078cc;
    border-right:none;
    margin-left:-4px; 
}

button.jxglegendbutton, button.jxgzoombutton {
    cursor: pointer;
    z-index:20001;    
    background-position:center center;
    background-repeat:no-repeat;
    background-color:transparent;
    background-size:16px 16px;
    border:none;    
    width:18px;
    height:18px;    
}

button.jxglegendbutton:hover, button.jxgzoombutton:hover {
    opacity:0.5;
}

button.jxglegendbutton {
    background-image:url('/Images/chart_legend.png');   
}
button.jxgzoombutton {
    background-image:url('/Images/zoom_tool.png');
    margin-left:5px;  
}

div.jxgoptionscontainer {
    position:absolute;
    top:1px;
    left:5px;    
}

.jxgouterbottombox .JXGAxisTickText {
    line-height:16px !important;    
}

.CenInteractive {    
    background-image:url('/Images/InteractiveIcon.png');
    background-repeat:no-repeat;
    background-position:99% 10px;
}