body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  padding:5px;
  font-size: 12px;
  height: 100%;

}
.box{ overflow: auto;}
.topnav {
  overflow: hidden;
  background-color: grey  ;
  padding: 15px 0px;
  height: 25px;
  text-align: center;
  border: 1px;
  border-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
  font-size: 0px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.header {
    overflow: hidden;
    background-color: white;
    padding: 5px 5px;
  }
  
  .header a {
    float: left;
    color: black;
    text-align: center;
    padding: 5px;
    text-decoration: none;
    font-size: 18px; 
    line-height: 5px;
    border-radius: 4px;
    height: auto;
 
  }

  .header a.logo {
    font-size: 5px;
    font-weight: normal;
  }
  
  .header a:hover {
    background-color:grey;
    color: black;
  }
  
  .header a.active {
    background-color: dodgerblue;
    color: white;
  }
  
  .header-right {
    float: right;
    vertical-align: top;
    text-align:center;
    padding-right: 1px;
    
  }

  .header-center {
    float: none;
    text-align:center;
    padding-top:0px;
    vertical-align:middle ; 
    
  }
  
  
  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
  }


  .header-left {
    float: left;
    text-align:center;
    padding-left: 5px;
    
  }

  .content_center {
    float: none;
    height: 50%;
    width: 50%;
  }
  div.signinout { text-align:left; display: inline-block; vertical-align:middle ; width:150px; padding-top: 0px;}
  div.div_userinfo {
    background-color: white;
    /*border: 1px solid green;*/
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 5px;
    margin: 2px;
    text-align:left;  display: inline-block; vertical-align: text-bottom ;  width:300px;
    
  }


  .header img {
    float: left;
    background: #555;
  }
  
  .header h2 {
    float: left;
    color: green;
    text-align: left;
    padding: 5px;
    text-decoration: none;
    font-size: 20px; 
    line-height: 2px;
    border-radius: 4px;

  }

  .btn {
    background-color: #4CAF50;
    color: white;
    padding: 0px 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border: snow;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
  
  }

  /* Avatar image */
img.hdoa {
  width:auto;
  border: radius 2;
 /* background: #555;*/
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -5px;
  overflow: hidden;
}
.col {
  padding: 1px 1px;
  flex: 25%;
}
img.mobile{
  width:auto;
  border: radius 2;
  height: 40px;
  
}