/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
     #table {
          width:300px;
          position:absolute;
          height:300px;
          bottom:30px;
          right:30px;
          background-color:Aqua;
          color:Black;
          }
          
  #tmplgnd {
        font-family: Arial, sans-serif;
        padding: 10px;
        margin: 10px;
        color :Black;
		position:absolute;
        cursor:move;
		        padding: 10px;
        margin: 10px;
		z-index:99999;
        top:60%;!important
		overflow:hidden;
		left:90%;!important
		
		


   
		
		
      }
	  
	  
	  .tmplgnd{
	  background-color:#FFFFFF;
	  }
  #rainlegend {
font-family: Arial, sans-serif;
        padding: 10px;
        margin: 10px;
        color :Black;
		position:absolute;
        cursor:move;
		z-index:99999;
		background-color:#ffffff;
        top:60%;!important
		overflow:hidden;
		left:80%;!important
	
		
       
      }
      #rainlegend h3 {
        margin-top: 0;
        font-size:small;
        font-weight:bold
      }
       #tmplgnd h3 {
        margin-top: 0;
        font-size:small;
        font-weight:bold
      }
      #rainlegend img {
        vertical-align: middle;
      }
       #wndlgnd,#humidlgnd {
        font-family: Arial, sans-serif;
        padding: 10px;
        margin: 10px;
        color :Black;
		position:absolute;
        cursor:move;
		padding: 10px;
		background-color:#ffffff;
        margin: 10px;
		z-index:99999;
        top:60%;!important
		overflow:hidden;
		left:90%;!important
       
      }
      #wndlgnd h3 ,#humidlgnd h3 {
        margin-top: 0;
        font-size:small;
        font-weight:bold
      }
      
      
      @media (max-width:320px){
       #rainlegend {
           width:38%;
           padding:0px;
           margin:0px;
          cursor:pointer;
      } 
       }

       #rightpanel {
        width:210px;
        float:right;
        background-color:#A9A9A9;
    }

        
          .linkClass tr td
    {
        
        border: 1px solid black;
        padding:6px 10px ;
        font-size:15px;
        color:Black;
        }
        
        .linkClass 
    {
        
        border-collapse:collapse;
        z-index:9999;
        font-weight:bold
     
        
        }
        
              .linkClass4 tr td
    {
        
        border: 1px solid black;
        padding:6px 10px ;
        font-size:15px;
        color:Black;
        background:#ffffff;
        
        }
        
        .linkClass4 
    {
        
        border-collapse:collapse;
        z-index:9999;
        font-weight:bold
     
        
        }
        
        .linkClass4 th
        {
        background-color:#ffffff;
        color:#000000;
        font-weight:bold;
        height:30px;
        line-height:30px;
        padding:0px10px;
        }
        
       #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}