body 
{
}
 .tooltip
        {
            border-bottom: 1px dotted #000000;
            color: #FFFFFF;
            outline: none;
            cursor: help;
            text-decoration: none;
            position: relative;
        }
        .tooltip span
        {
            margin-left: -999em;
            position: absolute;
        }
        .tooltip:hover span
        {
            border-radius: 5px 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Arial, Geneva, sans-serif;
            position: absolute;
            left: 1em;
            top: 2em;
            z-index: 99;
            margin-left: 0px;
            text-align: left;
            width: 240px;
        }
        .tooltip:hover img
        {
            border: 0;
            margin: -10px 0 0 -50px;
            float: left;
            position: absolute;
        }
        .tooltip:hover em
        {
            font-family: Calibri, Tahoma, Arial, Geneva, sans-serif;
            font-size: 1.2em;
            font-weight: bold;
            display: block;
            padding: 0.2em 0 0.6em 0;
        }
        
        .custom
        {
            padding: 0.5em 0.8em 2em 2em;
        }
        
        .critical
        {
            background: #FFCCAA;
            border: 1px solid #FF3334;
        }
       
         .tooltipZ
        {
            border-bottom: 1px dotted #000000;
            color: #FFFFFF;
            outline: none;
            cursor: help;
            text-decoration: none;
            position: relative;
        }
        .tooltipZ span
        {
            margin-left: -999em;
            position: absolute;
        }
        .tooltipZ:hover span
        {
            border-radius: 5px 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Arial, Geneva, sans-serif;
            position: absolute;
            left: 1em;
            top: 2em;
            z-index: 99;
            margin-left: -270px;
            text-align: left;
            width: 240px;
        }
        .tooltipZ:hover img
        {
            border: 0;
            margin: -10px 0 0 -50px;
            float: left;
            position: absolute;
        }
        .tooltipZ:hover em
        {
            font-family: Calibri, Tahoma, Arial, Geneva, sans-serif;
            font-size: 1.2em;
            font-weight: bold;
            display: block;
            padding: 0.2em 0 0.6em 0;
        }
        /*---for middle right side*/
        .tooltipM
        {
            
            color: Blue;
            outline: none;
            cursor: help;
            text-decoration: none;
            position: relative;
        }
        .tooltipM span
        {
            margin-left: -999em;
            position: absolute;
        }
        .tooltipM:hover span
        {
            
            position: absolute;
            left: 1em;
            top: 2em;
            z-index: 99;
            margin-left: 50px;
            text-align: left;
            width: 240px;
        }
        .tooltipM:hover img
        {
            border: 0;
            margin: -450px 0 0 -50px;
            float: left;
            position: absolute;
        }
        .tooltipM:hover em
        {
            
        }
        .customM
        {
            
        }
        
        .criticalM
        {
            
        }
        /*---*/

           /*---for scroll popup*/
       .tooltipScroll
        {
            border-bottom: 1px dotted #000000;
            color: #FFFFFF;
            outline: none;
            cursor: help;
            text-decoration: none;
            position: relative;
        }
        .tooltipScroll span
        {
            margin-left: -999em;
            position: absolute;
        }
        .tooltipScroll:hover span
        {
            border-radius: 5px 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            /*box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);*/
            font-family: Calibri, Tahoma, Arial, Geneva, sans-serif;
            position: absolute;
            left: 1em;
            top: 2em;
            z-index: 99;
            margin-left: 0px;
            text-align: left;
            width: 350px;
            min-height:150px;
            height:auto;
        }
        .tooltipScroll:hover img
        {
            border: 0;
            margin: -10px 0 0 -50px;
            float: left;
            position: absolute;
        }
        .tooltipScroll:hover em
        {
            font-family: Calibri, Tahoma, Arial, Geneva, sans-serif;
            /*font-size: 1.2em;*/
            font-size: 1.5em;
            font-weight: bold;
            display: block;
            padding: 0.2em 0 0.6em 0;
        }
        
        .customScroll
        {
            padding: 0.5em 0.8em 2em 2em;
        }
        
        .criticalScroll
        {
            background: #FFCCAA;
            border: 1px solid #FF3334;
        }