.graph-div-small
{

    box-sizing: border-box;
    
    border: 1px solid silver;
    padding: 20px;
    margin-right: 10px;
    margin-bottom: 4px;
    
}

.svg-container-many
{
    
    display: inline-block;
    
    width: 100%;
    height: 100px;
    margin-top: 5px;
    /*    padding-bottom: 100%; */
    
    
}

.svg-container
{


    display: inline-block;
    width: 100%;
    height: 80%;
   /*    padding-bottom: 100%; */
    overflow: hidden;

}

svg                                             
{

    /*
    fill: #FF0000;

    stroke-opacity: 1;

    opacity: 1;
   */
    
    /*
    width: 100%;
    height: 100%;
   */

    
   /* background-color: rgba(0, 255, 0, 0.1); */
   /* border: 1px solid #FF00FF; */
}

line-test                                             
{
  stroke: green;
   stroke-width: 1;
   stroke-opacity: 1;
   opacity: 1;
}

.littra
{
    fill: #FFFFFF;
}

.littra_1
{
    color: #FFFFFF;
}

rect                                             
{

   fill: blue;

   stroke: green;
   stroke-width: 0;
   stroke-opacity: 1;

   /*                                            
   transition: width 2s;                         
   transition: height 2s;                        
   */

   transition: width 1s ease-in-out;
   transition: height 1s ease-in-out;

}

text                                             
{

    transition: fill-opacity 2s;

}

text:hover
{
    fill-opacity: 0.1;
    font-size: 2em;
    fill: blue;
    stroke: green;
}



rect:hover-a
{
    width: 50%;
    height: 50%;
}


.legend                                                                         
{

    font-size: 2em;
    color: #FFFFFF;

}

.semitr                                                                         
{


  fill-opacity: 0.5;

}

.reds                                                                           
{

    fill: red;

}


text                                                                            
{

    fill: #0000FF;
    stroke-width: 0;
    stroke-color: #FF0000;

}

.axis-label
{

    font-size: 0.2em;
    color: #FFFFFF;
}

viewBox                                                                         
{


}

transform                                                                       
{

    translate: 50,50;
}

preserveAspectRatio                                                             
{

    xMinyMin: meet;
}


/***********************************************************************
*  for d3.js
***********************************************************************/

.y-axis-label
{


    font-size: 0.3em;

}

#rx-graph-div
{
    
    border: 1px solid #0000FF;
    padding: 0px;

    width: 100%;
    height: 100%;

    
}


#rx-graph-div-a > svg
{    
    border: 0px solid #00FF00;
    /*
    height: 100%;
    width: 100%;
   */
    
   /* background-color: #2B2E35; */
}

.graph-small-img
{
    border: 1px solid #0000FF;
    background-color: #FFFFFF;
    opacity: 1.0;
    margin: 10px;

}



.x-axis .tick line
{

    stroke-dasharray: 5 5;
    color: #0000FF;
    
}

.axis-label
{

    font-size: 0.5em;
    color: #0000FF;
}


.x-axis-property-minor
{

    color: #0000FF;
    font-size: 0.4em;
}

.x-axis-property-minor path,
.x-axis-property-minor line
{
    stroke-dasharray:  3, 3;
    stroke-width: 0.1px;
    /* fill: #0000FF; */
}


.x-axis-property
{

     color: #000000;
    font-size: 0.7em;
    color: #0000FF;
}

.x-axis-property-major
{

    font-size: 0.3em;
        fill: #FFFFFF;
}

.x-axis-property-major-extra 
{

    font-size: 0.2em;
    fill: #FFFFFF;
}

.x-axis-property-minor-extra
{

    font-size: 0.15em;
    fill: #FFFFFF;
}

.y-axis-property-extra
{
    font-size: 0.15em;
    fill: #0000FF;
}

.x-axis-property-minor-extra
{
    stroke-width: 0.1px;
    stroke-dasharray: 1 4;
    fill: #FFFFFF;
}

.x-axis-property-major-extra 
{
    stroke-width: 0.15px;
    fill: #FFFFFF;
}

.y-axis-property-extra line
{
    stroke-width: 0.2px;
    fill: #FFFFFF;
}



.x-axis-property path,
.x-axis-property line
{
    stroke-width: 0.2px;
    color: #FFFFFF;
}

.y-axis-property
{

    color: #000000;
    font-size: 1em;
    color: #FFFFFF;
}

.y-axis-property-1
{

    color: #000000;
    font-size: 0.2em;
}

.y-axis-property path,
.y-axis-property line
 {
     stroke: #0000FF;
     stroke-width: 0.2px;
     color: #FFFFFF;
}

.y-axis-property-1 path,
.y-axis-property-1 line
 {
          stroke: #FF0000;
	  stroke-width: 0.2px;
	  color: #FFFFFF;
}



.x-axis-new
{


    font-size: 0.5em;
    color: #FFFFFF;
}

.y-axis-new
{


    font-size: 0.5em;
    color: #0000FF;
}

/*
*/

#dashboard-gt1-gt2
{

    margin-left: 50px;

}

.grid .tick 
{
    stroke: blue;
    opacity: 1.0;
}

.grid path 
{
      stroke-width: 1px;
}

.x-dash.xaxis-dash text
{
    color: #0000FF;
    stroke: #FFFFFF;
    font-family: sans-serif;
    font-size: 0.2em;
}

.y-axis-new-left
{
     font-size: 0.3em;
}

.y-axis-new-right
{
     font-size: 0.3em;
}

.y-axis-new-left path,
.y-axis-new-left line
{

     stroke: #3300FF;
      stroke-width: 0.4px;
}

.y-axis-new-right path,
.y-axis-new-right line
 {
     font-size: 0.2em;
     stroke: #33CC66;
      stroke-width: 0.4px;
}


.y-axis-new path,
.y-axis-new line
{
      stroke-width: 0.2px;
}

.y-dash.yaxis-dash text
{
    color: #0000FF;
    stroke: #FFFFFF;
    font-family: sans-serif;
    font-size: 0.2em;
}

.xaxis-dash path,
.xaxis-dash line 
{
  fill: none;
  stroke: #FFFFFF;
  shape-rendering: crispEdges;
}

.yaxis-dash path,
.yaxis-dash line 
{
  fill: none;
  stroke: #FFFFFF;
  shape-rendering: crispEdges;
}

.graph-label
{
    color: #0000FF;
    font-size: 0.4em;
    color: #FFFFFF;

}

.graph-label-large
{

    font-size: 0.4em;
    color: #FFFFFF;

}

.temp-text
{
    color: #FF0000;
    font-size: 0.4em;
}

.area 
{
 fill: #00FF00;
 stroke: blue;
 stroke-width: 2.0px;
 stroke-opacity: 0.5;
 opacity:0.9;
}

.area_mean
{
 fill: rgb(214,115,203);
 stroke: blue;
 stroke-width: 3.0px;
 stroke-opacity: 0.9;
 opacity:0.5;
}


.x .axis path 
{
   stroke: black;
  /* display: none; */
}

.linea 
{
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}

/** yield graph start **/
path
{ 
    stroke: #000000;
    stroke-width: 0.5px;
    fill: none;
}
  
.axis path,
.axis line
 {
    fill: none;
    stroke: grey;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.label
{
    position: absolute;
}

circle
{
    cursor: pointer;
    fill: red;
}

.temp-dot-gm1
{
    fill: red;

}

.temp-dot
{


}


.temp-text
{

    background-color: #FF0000;
    color: #FF0000;
    
}

.tick line
{
    opacity: 1.0;
}

.littra
{

    fill: #0000FF;
}

.littra_1
{
    fill: #FF0000;
}

/*
Experiment
{

}

svg title
{

    background-color: #00FF00;
    color: #FF0000;

}

svg title
{
    visibility: hidden;
}
        
svg title:hover
{
    visibility: visible;
}
        
title
{
    fill: black;
    font-size: 12px;
    font-family: sans-serif;
}
        
title
{
    fill: yellow;
    stroke: blue;
}
*/

.axis path,                                                                                                                                                                                     
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.axis path,                                                                                                                                                                                     
.axis line {
  fill: none;
  stroke: black;
  opacity: 0.2;
}