html {
  overflow-y: scroll;
}

/* main font */
h1, h2, h3, h4, h5, #menu a, .seemore { 
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body, #bodybg
{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0px auto;
  background-color: white;
  color: #333;
  font-size: 16px;
  line-height: 150%;
}

#bodybg
{
  min-width: 1060px;
  height: 330px;
}

#bodywrapper
{
  margin: 0px auto;
  width: 1000px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 50px;
}

#header
{
  height: 80px;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid black;
}

#header #logo
{
  position: absolute;
  top: 14px;
  left: -7px;
  width: 230px;
  height: 100px;
}

#header .logo-small img { width: 150px; }

#menu
{
  position: absolute;
  right: 0px;
  height: 100px;
}

#menu ul { display: inline-block; list-style: none; margin: 23px -20px 15px 30px; padding: 0; }
#menu ul li { display: inline-block; float: left; position: relative; z-index: 2; }
#menu ul li a { display: inline-block; padding: 15px; text-decoration: none; font-weight: bold; font-size: 18px; color: #888; text-transform: uppercase; }
#menu ul li.selected a { color: black; }

#menu ul li:hover { background-color: #eee; }
#menu ul li.selected:hover { }

#menu ul li ul { display: none; position: absolute; top: 50px; left: 0px; margin: 0; }
#menu ul li ul li { border-top: 1px solid white; background: #eee; display: block; float: none; min-width: 100px; width: 100%; }
#menu ul li ul li a { font-size: 15px; font-weight: normal; text-decoration: none; color: #666 !important; padding: 15px 20px 15px 20px; white-space: nowrap; display: block; width: auto; }
#menu ul li:hover ul { display: block; }
#menu ul li ul li:hover { background-color: #ddd; }

#menu ul li.mobilemenubutton { display: none; }

#content
{
  position: relative;
  overflow: hidden;

  margin-top: 40px;
  margin-bottom: 40px;
}

#footer
{
  font-size: small;
  line-height: 130%;
  text-align: center;
  padding-top: 20px;

  border-top: 1px solid black;
}

table { border-collapse: collapse; }
table th { background-color: #eee; }
table th, table td { padding-left: 7px; padding-right: 7px; }

tr.status_ok { background-color: #efe; }
tr.status_warning { background-color: #fca; }
tr.status_critical { background-color: #f88; }
tr.status_unknown { background-color: #e8e0ff; }

.adminform, .viewform { line-height: 180%; }
.adminform label, .viewform .label { display: inline-block; width: 120px; vertical-align: top; }

.adminform textarea { width: 300px; height: 100px; margin-top: 5px; }

.error { display: block; border: 1px solid red; background-color: #fff0f0;; color: red; font-weight: bold; padding: 5px 15px 5px 15px; margin-bottom: 15px; }
.info  { display: block; border: 1px solid #008000; background-color: #f0fff0; color: #008000; font-weight: bold; padding: 5px 15px 5px 15px; margin-bottom: 15px; }

a, a:visited, .linkcolor { color: #888; }

h2.sectiontitle { margin-top: 0px; margin-bottom: 5px; }

@media screen and (max-width:1080px)
{
  #bodywrapper
  {
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
  }

  #bodybg { min-width: 0px; } 
}

@media screen and (max-width:880px)
{
  #header { height: auto; }
  #header #logo { position: relative; }
  #menu { position: relative; height: auto; }
  #menu ul { position: relative; left: -15px; display: inline-block; list-style: none; margin: 0; padding: 0; margin-bottom: 0px; }
}

@media (max-width: 768px)
{
  table { display: block; width: 100%; border: 0; }

  table thead { display: none; }
  table tbody { display: block; width: 100%; }
  
  table tr
  {
    box-sizing: border-box;
    display: block;
    border: 1px solid black;
    margin-bottom: 10px;
    width: 100%;
    padding: 5px 10px 5px 10px;
  }
  
  table td
  {
    display: block;
    word-break: break-word;
    border: 0;
  }
  
  table td::before
  {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: #6b7280;
    flex-shrink: 0;
  }  
}