* {         /* to clear defaults */ 
    margin: 0;
    padding: 0;
  }
  
  body {
    padding: 50px;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  }
  
  .buttonLight {
    background-color: #556B2F;
    border:none;
    border-radius: 8px;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    opacity: 0.5;
}
  .buttonDark {
    background-color: #556B2F;
    border:none;
    border-radius: 8px;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}


#header {
  background-color:rgba(51, 80, 78, 0.356);
  color:#FFF8DC;
  text-align: center;
  padding:3px;
  font-size: 15px;
}

#footerOptions {
  color:#FFF8DC;
  clear:both;
  text-align:left;
  float: left;
  padding:2px; 
  display: flex;
}

#footer {
  background-color:rgba(51, 80, 78, 0.356);
  color:whitesmoke;
  width:100%;
  text-align:right;
  float: right;
  padding:2px; 
  clear:both;
}

#footerMessage{
  font-size: 10px;
  text-align: center;
  opacity: .8;
  padding: 1px;
}

#show-state{
  font-size: 20px;
  text-align: center;
  color:whitesmoke;
}

#displayCurrent{
  font-size: 16px;
  text-align: center;
  color:rgba(51, 80, 78, 0.356);
}

#show-message{
  color:rgb(245, 122, 122);
}

#hDisplayCurrent{
  font-size: 16px;
  text-align: center;
  color:whitesmoke;
}

#w-state{
  font-size: 20px;
}

#hShow-message{
  color:rgb(245, 122, 122);
}

#oShow-warn{
  font-size: 30px;
  color: red;
}

#tawkinDiv {
  color: #556B2F;
  font-size: 100%;
  opacity: .9;
  float: left;
  display: block;
  height: 394;
}

#tawkinForm {
  color: #556B2F;
  font-size: 125%;
  float: left;
  display: block;
}


#tawkins {
  color: #556B2F;
  font-size: 180%;
  display: block;
  cursor: pointer;
}

#mLog li { 
  list-style-type:disc; 
} 

#hLog{
  height: 120;
  overflow: hidden;
}

#hLog li { 
  list-style-type:none; 
} 

#pbLog li { 
  list-style-type:none; 
} 


iframe {
  border: 1px solid black;
  width: 100%;
}

.output {
  background: #eee;
}

#pbShow-subtitle{
  font-size: 22px;
  text-align: center;
  color:rgb(245, 122, 122);
}

#loginStatusSmall{
  font-size: 10px;
}

progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {border: 1px solid whitesmoke;}
::-webkit-progress-bar { background: whitesmoke; }
::-webkit-progress-value { background: #556B2F; }  

#progressContainer {
  position: relative;
  width: 750px;
  height: 2px;
}
#videoBar {
  position: relative;
  width: 725px;  
  height: 5px;
}
#audioBar {
  position: relative;
  width: 725px;  
  height: 5px;
}