#chartdiv {
    height: 400px;
    width: 100%;
  }
   @media screen and (orientation:portrait) { 
    #chartdiv {
      height: 400px;
      width: 90vw;
    }

   } 
  @media screen and (orientation:landscape)and (max-width: 980px) { 
    #chartdiv {
    height: 300px;
    width: 80vw;
    }
   }
  #parentDiv {
    
  }
  .lineDiv {
    width:33%;right: 0; height: 500px;
  }
  
  
.line {
fill: none;
stroke: steelblue;
stroke-width: 2.75px;
}

.textElementRect {
  fill: ;
  stroke: black;
  stroke-width:0.75px;
  }

.axisSteelBlue text{
fill: steelblue;
}

.axisRed text{
fill: red;
}

/* Style the dots by assigning a fill and stroke */
.dotblue {
fill: none;
stroke: steelblue;
}
.dotred {
fill: none;
stroke: red;
}

.focus circle {
fill: none;
stroke: black;
}

div.tooltip {	
position: absolute;			
text-align: center;			
width: 125px;					
height: 100px;					
padding: 2px;				
font: 12px sans-serif;		
background: lightsteelblue;	
border: 0px;		
border-radius: 8px;			
pointer-events: none;		
cursor:pointer;		
}
.text { font: 10px sans-serif; }
.textO { font: 14px sans-serif; }
.textC { font: 12px sans-serif; }
.textD { font: 14px sans-serif; }
.textBig{ font: 20px sans-serif; }
.textLittleBig{ font: 18px sans-serif; }
.tick{ font: 10px sans-serif; }

@media only screen and (max-width: 768px) {
  
  .textBig
  {
     font: 12px sans-serif; 
  }
}
html {
  scroll-behavior: smooth;
}
#top
{
  font-size: 2rem;
  text-align: center;
}
#topText{
  font-size: 1.75rem;

}

.section{

padding: 0 !important;
background-color: transparent !important;
margin-top: -2rem !important;
}

@media only screen and (max-width: 767px) {
  .section{

    margin-top: 1rem !important;

    }
    .lineDiv
       {
         height: 100%;
         margin-top: 25px;
    margin-bottom: 25px;
       }
       .margin-top10
       {
         margin-top: 0rem;

       }
  }
  .margin-top10
       {
         margin-top: -10rem;

       }
    @media only screen and (max-width: 980px) {
      /* .col-4
      {
        max-width:100% !important ;

      }
       .col-sm-4
       {
        max-width:100% !important ;
       } 
       .col-md-4
       {
        max-width:100% !important ;
       } 
       .col-lg-4
       {
        max-width:100% !important ;
       } 
       .col-xl-4
       {
        max-width:100% !important ;
       } */
       .lineDiv
       {
         height: 100%;
         margin-top: 25px;
    margin-bottom: 25px;
       }
    }



.footer {
  margin-top:75rem;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.buttonBlack {background-color: #000000 !important ;} /* Black */
.buttonBlue {background-color: #6095FF !important} /* Blue */


.div-place { 
  
  overflow: hidden; 
  text-align: center;
  margin-bottom:1rem;
  /* margin-top:5rem; */
}

.div-place p {
  /* background: #222;
  color: #fff; */
  display: inline-block;
  font-size: 1.2rem;
  width: 100%;
  margin: 0 !important;
  /* float:left;  remove */
  /* margin: 10px 10px 0 0;
  padding: 5px 10px
   */
}
.text2
{
  font-size: 2rem !important;  
}

/********************ComparisionSVG******************************/

#comparisionSVG
{
  margin: 0 auto ;
  height: 100% !important;
}
polyline{
	opacity: .3;
	stroke: black;
	stroke-width: 2px;
	fill: none;
}

@media only screen and (max-width: 500px) {
.placeARInfo
{
height: 50% !important;
}
}