html {
  background-color: #29293d;
}

.baselogo img {
  float: left;
  width: 84px;
  height: 84px;
  background: #555;
  position : absolute;
  margin-top: 38px;
  margin-left: 18px;
  z-index : 2;
}

h1 {
  font-size: 45px;
  text-align: center;
  
}

h2 {
  font-size: 30px;
  text-align: center;
 
}

h1 {
  margin: 30px 0px 0px 0px; 
  padding: 30px 0px 0px 0px;    
  color:  #333399;
  text-shadow: 3px 3px 1px black;
}

h2 {
  margin: 5px 0px 20px 0px; 
  padding: 5px 0px 20px 0px;    
  color: #29293d;
  }

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}

body {
  width: 1200px;
  margin: 0 auto;
  background-color: #f0f0f5;
  padding: 0 20px 20px 20px;
  border: 5px #b55643;
}

img {
   display: block;
   margin: 0 auto;
}

#btn {
  background-color: #29293d;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  margin: 2px 2px;
  width: 84px;
  height: 40px;
  cursor: pointer;
  border-radius: 18px;
}

form {
  display:inline;
  font-size: 14px;
}

.nrmlogg
{
  background-color:#dfe3ee;
  justify-content: stretch;
  width: 1000px;
  margin: 0 auto;
  padding: 0 20px 20px 20px; 
  border: 1px solid black;

}

.nrmlogg th,
 .nrmlogg td,
    .nrmlogg tr {
      width: 90px;
      text-align: center;
      border: 1px solid black;
}

.nrm36logg
{
  background-color:#dfe3ee;
  justify-content: stretch;
  width: 1000px;
  margin: 0 auto;
  padding: 0 20px 20px 20px; 
  border: 1px solid black;

}

.nrm36logg th,
 .nrm36logg td,
    .nrm36logg tr {
      width: 90px;
      text-align: center;
      border: 1px solid black;

}

.nrm25 
{
  display: grid;

  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 40px 350px 175px;
  width: 1000px; 
  margin: auto;
  grid-gap: 10px;
  text-align: center;
  justify-content: center;
  align-content: center;
  
 }

.nrm25a
{
background-color: #660000;
align-items: center;
justify-content: center;
font-size: 25px;
font-weight: bold;
color: white;
grid-column: 1/3;
grid-row: 1/2;


}

.nrm25b
{
grid-column: 1/2;
grid-row: 2/3;
background-color:white;
justify-content: center;
}

.nrm25b > a {
  position : relative;
    bottom : 42px;
    right : 2px;
    left : 170px;
    z-index : 1;
}

.nrm25c
{
background-color: darkorange;
justify-content: center;
}

.nrm25d
{
background-color:#ffd480;
justify-content: center;
}

.nrm25e
{
background-color:#ffd480 ;
  justify-content: center;
}

caption {
  background-color:darkorange;
  color: rgb(12, 12, 12);
  font-size: 20px;
  font-weight: bold;
  }

.nrm36 
  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40px 350px 175px;
    width: 1000px; 
    margin: auto;
    grid-gap: 10px;
    text-align: center;
    justify-content: center;
    align-content: center;
    
  }
  
  .nrm36a
  {
  background-color: #660000;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  color: white;
  grid-column: 1/3;
  grid-row: 1/2;
    
  }
  
  .nrm36b
  {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color:white;
  justify-content: center;
  }

  .nrm36b > a {
    position : relative;
      bottom : 44px;
      right : 2px;
      left : 170px;
      z-index : 1;
  }
  
  .nrm36c
  {
  background-color: darkorange;
  justify-content: center;
  }
  
  .nrm36d
  {
  background-color:#ffd480;
  justify-content: center;
  }
  
  .nrm36e
  {
  background-color:#ffd480;
    justify-content: center;
  }

 
caption {
    background-color:darkorange;
    color: rgb(12, 12, 12);
    font-size: 20px;
    font-weight: bold;
  }

.pagination {
    display: flex;
    justify-content: center;
    font-size: 20px;
    color:black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



.wellblock 
  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40px 350px 175px;
    width: 1000px; 
    margin: auto;
    grid-gap: 10px;
    text-align: center;
    justify-content: center;
    align-content: center;
        
  }
    
  .wellheading
  {
  background-color: #660000;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  color: white;
  grid-column: 1/3;
  grid-row: 1/2;   
  
  }
    
  .wellimage
  {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color:white;
  justify-content: center;
  }
    
  .wellimage > a {
    position : relative;
    bottom : 42px;
    right : 2px;
    left : 170px;
    z-index : 1;
  }
    
  .wellgraph
  {
  background-color: darkorange;
  justify-content: center;
  }
    
  .welllive
  {
  background-color:#ffd480;
  justify-content: center;
  }
    
  .wellalarm
  {
  background-color:#ffd480;
  justify-content: center;
  }

.wellblock1 
  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40px 350px 175px;
    width: 1000px; 
    margin: auto;
    grid-gap: 10px;
    text-align: center;
    justify-content: center;
    align-content: center;
        
  }
    
  .wellheading
  {
  background-color: #660000;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  color: white;
  grid-column: 1/3;
  grid-row: 1/2;   
  
  }
    
  .wellimage
  {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color:white;
  justify-content: center;
  }
    
  .wellimage > a {
    position : relative;
    bottom : 42px;
    right : 2px;
    left : 190px;
    z-index : 1;
  }
  .wellimage > b {
    position : relative;   
    bottom : 73px;
    right : 0px;
    left : 90px;
    z-index : 5;
  }    
  .wellgraph
  {
  background-color: darkorange;
  justify-content: center;
  }
    
  .welllive
  {
  background-color:#ffd480;
  justify-content: center;
  }
    
  .wellalarm
  {
  background-color:#ffd480;
  justify-content: center;
  }

.welllogs
  {
  background-color:#dfe3ee;
  justify-content: stretch;
  width: 958px;
  margin: 0 auto;
  padding: 0 20px 20px 20px; 
  border: 1px solid black;
  
  }
  
  .welllogs th,
    .welllogs td,
      .welllogs tr {
      width: 90px;
      text-align: center;
      border: 1px solid black;
  
      }
      
  .flowblock 
      {
        display: grid;
        grid-template-columns: 1000px;
        grid-template-rows: 40px 215px;
        width: 1000px; 
        margin: auto;
        grid-gap: 5px;
        text-align: center;
        justify-content: center;
        align-content: center;   
      }

    .flowheading
      {
      background-color: #1f2a47;
      width: 1000px; 
      margin: auto;
      justify-content: center;
      font-size: 25px;
      font-weight: bold;
      color: white;
      text-align: center;
      grid-column: 1/1;
      grid-row: 1/2;   

      }   

    .flowlogs
      {
      background-color:#dfe3ee;
      justify-content: stretch;
      width: 958px;
      margin: 0 auto;
      padding: 0 20px 20px 20px; 
      border: 1px solid black;
      grid-column: 1/1;
      grid-row: 2/2;  
      
      }
      
      .flowlogs th,
        .flowlogs td,
         .flowlogs tr {
          width: 90px;
          text-align: center;
          border: 1px solid black;
      
          }

.logheading
    {
    background-color: #324670;
    width: 1000px; 
    margin: auto;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: white;   
    }

.loggraph
    {
    background-color: rgb(255, 255, 255);
    width: 1000px; 
    justify-content: center;
    align-items: center;
    margin: auto;
    }

.scroll
    {
    margin: 0;
    padding: 0;
    background-color: transparent;
    position : fixed;
    right: 100px;
    bottom : 120px;
    float: right;
    z-index : 100;
    }

.scrollbtn {
      display: none; /* Hidden by default *//* Make sure it does not overlap */
      border: none; /* Remove borders */
      position : relative;
      outline: none; /* Remove outline */
      background-color: transparent; /* Set a background color */
      color: black; /* Text color */
      cursor: pointer; /* Add a mouse pointer on hover */
      align-content: center;
      padding: 0;
    } 
    
.scrollbtn:hover {
      background-color: transparent; /* Add a dark-grey background on hover */
    } 

.scrolldown
    {
    margin: 0;
    padding: 0;
    background-color: transparent;
    position : fixed;
    right: 100px;
    bottom : 60px;
    float: right;
    z-index : 100;
    }

.downbtn {
      display: none; /* Hidden by default *//* Make sure it does not overlap */
      border: none; /* Remove borders */
      position : relative;
      outline: none; /* Remove outline */
      background-color: transparent; /* Set a background color */
      color: black; /* Text color */
      cursor: pointer; /* Add a mouse pointer on hover */
      align-content: center;
      padding: 0;
    } 
    
.downbtn:hover {
      background-color: transparent; /* Add a dark-grey background on hover */
    } 

    
.export
    {
    margin: 0;
    padding: 0;
    background-color: transparent;
    position : relative;
    right: 100px;
    bottom : 30px;
    float: right;
    z-index : 150;
    }

#expBtn {
    background-color: #59595d;
    border: none;
    color: white;
    padding: 0px 9px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin: 2px 2px;
    width: 78px;
    height: 28px;
    cursor: pointer;
    border-radius: 13px;
    } 
    
#expbtn:hover {
      background-color: rgb(39, 38, 38); /* Add a dark-grey background on hover */    
    }

#para1 {
  width: 990px;
  margin: 0 auto;
  background-color: #f0f0f5;
  padding: 5px 20px;
  border: 1px #f0f0f5;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-style: italic;
  font-size: x-large;
  color: rgb(130, 15, 15);
  text-align: center;
}

#para2 {
  width: 990px;
  margin: 0 auto;
  background-color: #f0f0f5;
  padding: 0 20px;
  border: 1px #f0f0f5;
  color: rgb(7, 1, 36);
  line-height: 20px;
  text-align: justify;
}

.introimg img{
  max-width: 100%;
  height: auto;
}

.introimg {
  background-color: rgb(255, 255, 255);
  width: 850px; 
  height: auto;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.homeheader1
{
background-color: #660000;
margin: auto;
padding: 5px 20px;
width: 960px; 
font-size: 25px;
font-weight: bold;
color: white;
align-items: center;
justify-content: center;
text-align: center;
}

.homeheader2
{
background-color: #1f3667;
margin: auto;
padding: 3px 20px;
width: 960px; 
font-size: 25px;
font-weight: bold;
color: white;
align-items: center;
justify-content: center;
text-align: center;
}

#hmBtn {
  background-color: #29293d;
  border: none;
  color: white;
  padding: 5px 10px; 
  display: inline-block;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 12px;
}

.link{
  display: inline-flex;
  margin-bottom: 0px 20px;
}

#logbtn {
  background-color: #29293d;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  margin: 2px 2px;
  width: 104px;
  height: 34px;
  cursor: pointer;
  border-radius: 15px;
}

#logbtn:hover {
  background-color: rgb(39, 38, 38); /* Add a dark-grey background on hover */ 
}

#loginbtn {
  background-color: #29293d;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  margin: 2px 2px;
  width: 104px;
  height: 32px;
  cursor: pointer;
  border-radius: 15px;
}

.DI2OFF {
  color: #FF0000
}

.DI2ON{
  color: black 
}