@font-face {
  font-family: Helvetica;
  src: url(fonts/Helvetica-Font/Helvetica.ttf);
}
html{
  height: 100%;
  /* overflow: auto; */
}
body{
    height: calc(100% - 16px);
    background-color: rgb(51,51,51);
    font-family: Helvetica, sans-serif;
}
.version{
   color: white;
    margin-left: 10px;
    font: 15px Helvetica, sans-serif;
}
.headerleft{
    text-align: left;
    display: inline-block;
}
.toolbar ul{
  margin: 0;
}
li{
    display: inline-block;
    color: white;
    padding: 3px 10px 4px 10px;
}
ul>li>a>img{
  vertical-align: bottom;
}
li:hover {
  cursor: pointer;
  opacity: .7;
  background-color: rgb(114, 114, 114);
  color: white;
 
}
.headerright{
    float: right;
    display: inline-block;
}
.toolbar{
    display: block;
   text-align: right;
}
h3{
    color: white;
}
.footer{
   text-align: center;
   color: white;
   /* position: fixed; */
   bottom: 5px;
   width: 100%;
   left: 0px;
   right: 0px;
   margin-bottom: 0px;
  font-family: Helvetica, sans-serif;
  margin-top:15px;
}
.main_div{
  height: calc(100% - 90px);
  overflow: auto;
}
  iframe{
    width: 100%;
    height: 100%;
    display: none;
  }
  #iframeDiv{
    width: 100% !important;
    height: calc(100% - 115px) !important;
    margin-top: 10px;
    display: none;
  }
  .active {
    background:  rgb(114,114,114);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  hr {
  border: 5px solid rgb(114,114,114);
  margin: 0;
  }
  /* homepage style */
  .pageblock{
    width: calc((100% - 80px) / 3);
    min-width: 370px;
    max-width: 450px;
    min-height:275px;
    background-color: rgb(114, 114, 114);
    display: inline-table;
    border: 1px solid black;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px black;
    -moz-box-shadow: 0 0 1px 1px black;
    box-shadow: 0 0 1px 1px black;
    margin: 10px;
    cursor: pointer;
}
 p{
    color: white;
    text-align: center;
    /* font-size: 21px; */
    font-size: 25px;
    font-family: Helvetica, sans-serif;
   margin-bottom: 10px;
}

.iconposition{
  display: flex;
  justify-content: center;
  height: 50%;
}
.iconposition img{
  width: 112px;
  height: 112px;
  margin: auto;
}
#homepageMenuicon{
  width: 32px;
  height: 32px;
  margin: auto;
}
#panelinfoMenuicon{
  width: 32px;
  height: 32px;
  margin: auto;
}
#logdataMenuicon{
  width: 32px;
  height: 32px;
  margin: auto;
}
#screenlistMenuicon{
  width: 32px;
  height: 32px;
  margin: auto;
}
#instructionMenuicon{
  width: 32px;
  height: 32px;
  margin: auto;
}
#remoteMenuicon{
  width: 32px;
  height: 32px;
  margin: auto;
}
.firsticodescription{
  height: calc(50% - 15px);
  color: white;
  text-align: center;
  font-size: 25px;
  font-family: Helvetica, sans-serif;
}
.firsticodescription p{
  margin-bottom: 20px;
}
.icodescription{
    height: calc(50% - 50px);
    color: white;
    text-align: center;
    font-size: 25px;
    /* font-size: 21px; */
    font-family: Helvetica, sans-serif;
    /* line-height: 50%; */
    margin-top: 25px;

}
.Eachblock{
    margin: 5px;    
}
table{
  color: white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: Helvetica, sans-serif;
  /* font-size: 19px; */
  font-size: 23px;
}
td:nth-child(1){
  text-align: right;
}
td:nth-child(2){
  padding-right: 10px;
  padding-left: 10px;
}
td:nth-child(3){
  text-align: start;
}
/* //custom scroll bar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.mainheader
{
  display:block; 
  margin-bottom: 10px; 
  border-bottom: 5px solid rgb(114,114,114);
}
/* end custome scrollbar */

/* @media only screen and (min-width:360px) and (max-width : 800px)  {
  .toolbar ul {
      margin: 0;
      display: inline-flex;
  }
  .headerleft {
    text-align: left;
    width: 100%;
    display: inline-block;
}
  .version{
    color: white;
    margin-left: unset;
    font: 13px sans-serif;
    float: right;

 }
  p {
    color: white;
    text-align: center;
    font-size: 22px;
    font-family: sans-serif;
    margin-bottom: 10px;
  }
  table {
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font: 18px sans-serif;
 }
 .pageblock {
  min-width: 330px;
 }
 .icodescription {
  font: 22px sans-serif;
 }
 .footer{
  font: 12px sans-serif;
 }

} */
#home_container
{
  display: block;
  margin-top: 10px;
}
.footer img
{
  position: absolute; 
  display: block;
}
.lockScreen{
  left: 0px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 100%;
  background-color: rgb(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Loading Animation */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 9999px 0 0 -5px #ffffff;
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s;
}

.dot-pulse::before, .dot-pulse::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #ffffff;
  color: #ffffff;
}

.dot-pulse::before {
  box-shadow: 9934px 0 0 -5px #ffffff;
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}

.dot-pulse::after {
  box-shadow: 10064px 0 0 -5px #ffffff;
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}
  
@keyframes dotPulseBefore {
  0% {
    box-shadow: 9934px 0 0 -5px #ffffff;
  }
  30% {
    box-shadow: 9934px 0 0 5px #ffffff;
  }
  60%,
  100% {
    box-shadow: 9934px 0 0 -5px #ffffff;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px #ffffff;
  }
  30% {
    box-shadow: 9999px 0 0 5px #ffffff;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #ffffff;
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10064px 0 0 -5px #ffffff;
  }
  30% {
    box-shadow: 10064px 0 0 5px #ffffff;
  }
  60%,
  100% {
    box-shadow: 10064px 0 0 -5px #ffffff;
  }
}

@media only screen and (max-width:840px) {
  .pageblock{
    width: calc((100% - 80px) / 2);
    min-width: 370px;
    max-width: 450px;
    min-height:275px;
    background-color: rgb(114, 114, 114);
    display: inline-table;
    border: 1px solid black;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px black;
    -moz-box-shadow: 0 0 1px 1px black;
    box-shadow: 0 0 1px 1px black;
    margin: 10px;
  }
  /* #main_div{
    height: calc(100% - 90px);
    overflow-x: auto;
    /* width: calc(100% - 10px); 
    width: 820px;
  } */
  body{
    min-width: 840px;
    overflow-x: auto;
  }    
}
@media only screen and (max-width: 839px) and (min-width:320px)
{
  body {
    height: calc(100% - 16px);
    max-width: 800px;
    min-width: 320px;
  }
  #iframeDiv
  {
    height: calc(100% - 209px)!important;
  }
  header{
    height: 78px;
  }
  .headerleft
  {
    width: 100%;
  }
  .headerright
  {
    text-align: center;
    float: unset;
    width: 100%;
  }
  .nav-tabs
  {
    padding: 0;
  }
  .version
  {
    float:right;
  }
  #main_div
  {
    max-width: 800px;
    min-width: 320px;
    /* max-height: calc(100% - 199px); */
    max-height: calc(100% - 195px);
    overflow-y: auto !important;
    height: auto !important;
    /* overflow: unset !important; */
  }
  .pageblock{
    width: calc((100% - 22px) / 1);
    min-width: 320px;
    max-width: 800px;
    min-height:275px;
    margin: 5px !important;
  }
  .footer
  {
    padding-top: 10px;
  }
  .footer img
  {
    position: unset;
    display: unset;
  }
  .footer_text
  {
    margin-top: 10px;
  }
  .firsticodescription p, .icodescription
  {
    font-size: 20px;
  }
  .firsticodescription table
  {
    font-size: 18px;
  }
}