*
{
  font-family: 'Roboto', sans-serif;
}

body
{
  background-color: #cccccc;
  overflow-x: hidden;
}

@supports ( -webkit-touch-callout : none)
{
  body
  {
    background-attachment: scroll;
    background-position: center 100vh;
  }
}

#logo
{
  display: none;
  width: 100%;
  position: absolute;
  text-align: center;
  height: 100px;
  background-position: center center;

  background-image: url(/images/logo.webp);
  background-repeat: no-repeat;
}

#content
{
  padding: 16px;
}

a
{
  color: #000000;
  text-decoration: none;
}

p
{
  margin: 0 0 12px 0;
}

a:hover
{
  color: #ff0000;
}

#nav_main > div#h2bar
{
  color: #ffffff;
  background-color: #006633;
  height: 53px;
  overflow: hidden;
  display: block;
  width: 100vw;
  position: fixed;
  top: 0;
}

#h2
{
  display: flex;
  font-size: 24px;
}

#h2titel
{
  flex: 1;
  padding: 12px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#h2 a
{
  display: block;
  color: #ffffff;
  padding: 8px 16px;;
  text-align: center;
}

#h2 a.extranetlogo
{
  display: inline-block;
  padding: 0;
}

#h2 a.extranetlogo > i
{
  margin: 0 12px 0 0;
}

#h2 a:hover
{
  background-color: #00994d;
}


/* Andere Container innerhalb von "inhalt" für Icons */
#inhalt div:not(:first-child)
{
  display: inline-block;
  width: 32px;
}


#main
{
  padding-top: 60px;
  padding-bottom: 60px;
  background: #ffffff;
  width: 100vw;
  min-height: 100vh;
}


/* ############################ globalMessages ############################ */

div#globalMessages
{
  border-radius: 0;
  background: transparent;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

div#globalMessages ul
{
  border-radius: 8px;
  display: block;
  margin: 0;
  min-height: 52px;
  padding: 6px 16px 5px 50px;
  color: #000000;
  font-size: 14px;
  margin: 0 0 10px 0;
}

div#globalMessages ul::before
{
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 32px;
  position: absolute;
  margin-left: -40px;
  margin-top: 12px;
}

div#globalMessages ul#Hinweis
{
  background: #dbecff;
}

div#globalMessages ul#Erfolg
{
  background: #d4ffcd;
}

div#globalMessages ul#Warnung
{
  background: #fefccb;
}

div#globalMessages ul#Fehler
{
  background: #ffd2d3;
}

div#globalMessages ul#Hinweis::before
{
  content: "\f05a";
  color: #2850c1;
}

div#globalMessages ul#Erfolg::before
{
  content: "\f058";
  color: #258815;
}

div#globalMessages ul#Warnung::before
{
  content: "\f06a";
  color: #878314;
}

div#globalMessages ul#Fehler::before
{
  content: "\f057";
  color: #871414;
}


div#globalMessages ul li
{
  padding: 0 0 0 3px;
  margin: 0;
  list-style: none;
  margin-bottom: 5px;
}

div#globalMessages ul li.boxtitle
{
  font-size: 20px;
  padding: 0;
}

div#globalMessages ul#Hinweis li.boxtitle
{
  color: #2850c1;
}

div#globalMessages ul#Erfolg li.boxtitle
{
  color: #258815;
}

div#globalMessages ul#Warnung li.boxtitle
{
  color: #878314;
}

div#globalMessages ul#Fehler li.boxtitle
{
  color: #871414;
}


/* ################################## Tabellen ################################## */

table
{
  border-collapse: separate;
  border-spacing: 5px;
}

table.fullwidth
{
  width: 100%;
}

td, th
{
  background: #e2e2e2;
  padding: 4px 8px;
  border-radius: 2px;
}

th,
table tr td.titlecol
{
  text-align: center;
  color: #ffffff;
  background: #006633;
  padding: 5px 7px !important;
  font-weight: normal;
  font-size: 14px;
}

tr.row1 td
{
  background: #c2c2c2;
}

td.button
{
  padding: 0;
  width: 36px;
  height: 36px;
  overflow: hidden;
  vertical-align: top;
}

td.button > .button
{
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #006633;
  border-radius: 4px;
}


td.button .button:hover
{
  background: #00994d;
}









@media only screen and (orientation: landscape) and (min-width: 1024px)
{
  #main
  {
    padding-top: 200px;
    width: 1024px;
    margin: 0 auto;
    padding-bottom: 100px;
  }

  #logo
  {
    display: block;
  }

  #h2 a:hover
  {
    background-color: #006633;
  }

  #h2titel
  {
    padding: 6px 12px;
  }

  #nav_main > div
  {
    display: block;
  }

  #nav_main > div#h2bar
  {
    background-color: #00331a;
    height: 53px;
    overflow: hidden;
    display: block;
    width: auto;
    position: static;
    top: auto;
  }

  #h2
  {
    margin: 0 auto;
    max-width: 960px;
  }
}



@media only screen and (orientation: landscape) and (max-width: 1023px)
{

}


@media only screen and (max-width: 1023px)
{


}