body {margin:0; font-family:Arial; background-color: #FAF6F7}

div.pageLoader {
  position: absolute;
  width: 50%;
  height:30%;
  margin-left: 20%;
  margin-top: 10%;
  z-index: 50;
  background-color: #FAF6F7;
  opacity: 0.8;
  border: 20px solid #FAF6F7;
  border-radius: 30%;
  padding: 10px;
  text-align: center;
  font-size: 1.5em;
  color: rgb(43, 43, 43);
  display: none;
}

.loaderSpinner {
  display: inline;
  transform: translate(-50%, -50%);
  font-size: 7vw;
  color: rgb(41, 196, 243);
}

input:invalid {
  border: 2px solid red;
  background-color: rgb(253, 167, 181);
}

.topnav {
/*  overflow: hidden; */
  background-image: linear-gradient(to bottom, #0c758e 0%, #25a2bf 100%);
  border: 1px solid #115B72;
  min-height: 37px;
  z-index: 6; /* Must be enough to keep it above any graphics elements */
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
}

 .logo-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 38px;
  width: 175px;
  background-color: #f2f2f2;
  border: 1px solid #115B72;
  z-index: 11;
}

.logoImage {
  height: 31px;
  padding: 3px 16px;
}

.toplogo {
  height: 30px;
  margin: 0;
  vertical-align: middle;
}

.topnav div:first-child { /* Space for the logo */
  float: left; 
  display: block;
  background-color: transparent;
  width: 175px;
  height: 10px; /* Necessary for the space to be reserved */
}

.topnav a {
  float: left; 
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  padding: 10px 16px 8px;
  font-size: 17px;
}

.active {
/*  background-color: #; */
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 10px 16px 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  margin-left: 20px;
  min-width: 10%;
  border: 2px #20afdf;
  border-radius: 5%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 15;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #20afdf;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: red;
  border-radius: 10%;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.icon {
  background-color: #20afdf;
}

#refreshIndicate {
  color: white;
  font-size: xx-small;
  display: block;
  text-align: center;
  margin: 8px 8px 5px 5px;
  float: right;
  padding: 2px 3px 2px 3px;
  background-color: #46a546;
  visibility: hidden;
  border: 2px rgb(9, 255, 0);
  border-radius: 10%;
}

.page-container {
  position: absolute;
  top: 35px;
  margin-left: 0;
  margin-right: 30px;
  width: 100%;
}

.page-container h2:first-child {
  text-align: left;
  margin-left: 15px;
  margin-bottom: 5px;
}

.grid-container {
  display: grid;
/*  grid-template-columns:  15% 8% 8% 35% 8% 8% auto; */
  grid-template-columns:  8% 10% 10% 45% 10% 10% auto; 
/*  grid-template-columns:  10% 8% 8% 40% 8% 8% auto; */
  grid-template-rows: auto;
  grid-gap: 5px;
  padding: 0px;
}

#linkOverlay {
  position: relative;
  width: 55%;
  padding-top: 55%;
  margin: auto;
  margin-top: 6%;
  z-index: 3;
  cursor: pointer;
  border; 1px solid black;
}
  
#deviceOverlay {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  cursor: default;
}

#deviceBackground {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: default;
}

.centreContainer {
  position: relative;
  width: auto
}

.centreImage {
  width: 100%;
  height: auto;
}

.sat {
  position: relative;
  margin-bottom: 5px;
}

.sat a {
  visibility: visible;
}

.sat img {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5%;
}

.overlay {
  opacity: 1;
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
}

.overlay p {
  text-align: center;
  font-size: large;
  margin-top: 40%;
  margin-left: 10%;
}

.spinner {
  display: block;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3vw;
  color: white;
}

.footer {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow-x: hidden;
  background-image: linear-gradient(to top, #0f8a8a 0%, #20afdf 100%);  color: #cccccc;
  border-top: 1px solid black;
  padding-left: 30px;
  padding-top: 5px;
  height: 28px;
}

.info {
   display: none;
   visibility: hidden;
   position: fixed;
   min-width: 15%;
   bottom: 10%;
   left: 1%;
   z-index: 5;
}

.info table {
  width: 100%;
  border-collapse: collapse;
  font-size: x-small;
  border: 1px black;
  margin-left: 5px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.info table th, .info table td{
  padding-bottom: 10px;	
}

.info th {
  color: white;
  background-color: #005580;
}

.info table td:first-child{
  font-weight: bold;
  padding-left: 5px;
}

.configTable {
/* A 'fixed' layout means all columns will be evenly distributed across the specified
width. This creates a grid where we can set the number of columns so that the column 
width is equal to the minimum horizontal resolution we want to achieve. Precise 
positioning of cells in the layout is then achieved through column spanning.

The width setting of 900px gives an acceptably tight table. It can be changed if desired,
but keep aware that elements like input fields also have default widths that you may
not want to change, or that do not change automatically.  */
  margin-left: 35px;  
  margin-top: 0px;
  table-layout: fixed;
  width: 900px;
}

.configTable h3 { /* Use to reduce space to next table row */
  border-style: solid;
  border-width: 10px 0px 0px 0px;
  margin-bottom: 10px;
  border-color: transparent;
}

.configTable tr td {
  border-style: solid;
  border-width: 15px 0px 0px 0px;
  border-color: transparent;
  border: 1px transparent;  /* Make non-transparent (e.g. solid grey) for visualising layout */
}

.configTable td input[type=text], input[type=password], input[type=number], select {
  width: 90%; /* Leaves a small clearance on the right */
}

.configTable tr label { 
  padding-left: 0;
  padding-top: 0;
  font-size: medium;
}

.configTable tr.rowSpacer { 
  height: 15px;
}

.configTable td input[type=checkbox] {
  padding-bottom: 0px;
  margin-left: 0;
}

.configTable td.error {
  color: red;
  font-weight: bold;
}

#SysOverview .configTable td:first-child{
  font-weight: bold;
  padding-left: 5px;
}

form textarea {
  margin-left: 5px;
}

.impact {  /* for warnings or alerts */
  font-size: 1.12em;
  color: red;
  font-weight: bold;
}

.impact-light {  /* for emphasis  */
  font-size: 1.1em;
  color: red;
  font-weight: normal;
}

.impactOK {  /* for operation OK alerts */
  font-size: 1.12em;
  color: blue;
  font-weight: normal;
}

.btnShow {
  font-size: x-small;
  color: white;
  background-color: darkblue;
  font-style: normal;
  padding: 0px 2px 0px 2px;
  border-radius: 3px;
}

.btnHide {
  font-size: x-small;
  color: white;
  background-color: red;
  font-style: normal;
  padding: 0px 2px 0px 2px;
  border-radius: 3px;
}

.footer span {
    display: inline;
    box-sizing: border-box;
    padding-top: 0px;
    padding-left: 0%;
    padding-right: 3%;
}

@media screen and (max-width: 1125px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
  }
  .topnav #refreshIndicate {
    display: none;
  }
}

  @media screen and (max-width: 1125px) {
  .topnav.responsive {
    position: fixed;
    right: 0;
    top: 0;
    width: 150px; /* sets width of side menu - better to be fixed rather than proportional */
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive #refreshIndicate {
    display: block;
    float: none;
  }
  .topnav.responsive div:first-child {
    display: none;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
 }
} 

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

.hiddenKey {
  display:none;
}