@font-face
{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


@media screen
{
  html
  {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    width:100vw;
    height:100vh;
  }


  body
  {
    margin:auto;
  }


  header
  {
    height: 5.5vh;
    max-height: 5.5vh;
    font-size: 0.5em;
    margin-left: -2px;
  }

  header a
  {
    color: #ffffff;
    text-decoration: none;
  }


  header a:active
  {
    color: #ffffff;
  }

  header a:hover
  {
    color: #ffffff;
  }


  .titel-editmode
  {
    width: 100vw;
    height: 3vh;
    display: flex;
    vertical-align: middle;
    font-size: 2.5em;
    color: #1a237e;
    background-color: #ffffff;
    border: 0px;
    border-bottom: 1px solid;
    border-bottom-color: #1a237e;
    float: none;
    margin-left:0px;
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* ---------------------------------------------------------------------------------------------------------------------------------------
      Im Edit-Mode wird eine andere Funktionsleiste (breiter) gelesen (betroffen: alle edit-screens)
  ----------------------------------------------------------------------------------------------------------------------------------------*/
  .funktionsleiste-editmode
  {
    font-size: 1.2em;
    height: 5vh;
    width: auto;
    color: #1a237e;
    background-color: #ffffff;
    border: 0px;
    border-bottom: 1px solid;
    border-bottom-color: #1a237e;
    float: none;
    margin-top: -10px;
    margin-left:0px;
    margin-right: 0px;
    padding-top: 10px;
    padding-left: 50px;
  }

  .arbeitsbereich-editmode
  {
    font-size: 1.1em;
    width: 800px;
    height: 750px;
    color: #1a237e;
    background-color: #cccccc;
    border: 0px;
    float: none;
    margin-top: 0px;
    margin-left: 70px;
    margin-right: 0px;
    box-shadow: 0px 1px 15px -2px rgba(0,0,0,1);
  }

  .arbeitsbereich-editmode input, textarea
  {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    padding: 3px 5px 3px 5px;
    border-width: 1px;
    border-color: #1a237e;
    background-color: #FFFFFF;
    color: #1a237e;
    border-style: solid;
    border-radius: 3px;
  }


  .arbeitsbereich-editmode-breit
  {
    font-size: 1.1em;
    width: 1400px;
    height: 750px;
    color: #1a237e;
    background-color: #cccccc;
    border: 0px;
    float: none;
    margin-top: 0px;
    margin-left: 70px;
    margin-right: 0px;
    box-shadow: 0px 1px 15px -2px rgba(0,0,0,1);
  }

  .arbeitsbereich-editmode-breit input, textarea
  {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    padding: 3px 5px 3px 5px;
    border-width: 1px;
    border-color: #1a237e;
    background-color: #FFFFFF;
    color: #1a237e;
    border-style: solid;
    border-radius: 3px;
  }



  ul
  {
    list-style: none;
  }

  a
  {
    text-decoration: none;
  }

  a:active
  {
    color: yellow;
  }

  a[title]:hover:
  {
    background-color: #0078ff;
  }

  input
  {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    padding: 3px 5px 3px 5px;
    border-width: 1px;
    border-color: #1a237e;
    background-color: #FFFFFF;
    color: #1a237e;
    border-style: solid;
    border-radius: 3px;
    /*box-shadow: 0px 0px 3px rgba(66,66,66,.75);*/
  }

  /* Eingabefelder im Angebot / Auftrag für Anzahl und Betrag (klein) */
  input.kurz
  {
    font-family: 'Roboto', sans-serif;
    width: 100px;
    font-size: 1em;
    color: #1a237e;
    padding: 3px 5px 3px 5px;
    border-width: 1px;
    border-color: #1a237e;
    background-color: #FFFFFF;
    border-style: solid;
    border-radius: 3px;
  }


  textarea
  {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    padding: 3px 5px 3px 5px;
    font-size: 1.25em;
    border-width: 1px;
    border-color: #1a237e;
    background-color: #FFFFFF;
    color: #1a237e;
    border-style: solid;
    border-radius: 3px;
    /*box-shadow: 0px 0px 3px rgba(66,66,66,.75);*/
  }


  input:focus, textarea:focus, select:focus
  {
    background-color: yellow;
    outline:none;
  }

  input:invalid
  {
    color:red;
  }

  select
  {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 3px;
    outline: 0;
    border: 1px solid #1a237e;
    border-radius: 3px;
    background: #ffffff;
    color: #1a237e;
  }

  select::-ms-expand
  {
      display: none;
  }

  select:hover, select:focus
  {
    font-family: 'Roboto', sans-serif;
    color: #1a237e;
    background: #ffffff;
  }
  select:disabled
  {
    opacity: 0.5;
    pointer-events: none;
  }
  select:hover ~ .select_arrow, select:focus ~ .select_arrow
  {
    border-top-color: #1a237e;
  }
  select:disabled
  {
    border-top-color: #cccccc;
  }

  input[type="checkbox"]:required:invalid + label::before
  {
    content: "\2610";
    color: red;
  }

  input[type="checkbox"]:required:valid + label::before
  {
    content: "\2611";
    color: green;
  }



  .content300
  {
    width: 300px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .content300 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .content500
  {
    width: 500px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .content500 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .content600
  {
    width: 600px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .content600 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .kundenname
  {
    font-size: 20pt;
    color: #1a237e;
    background-color: #ffffff;
  }

  .kunde-content
  {
    padding-top: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .kunde-content h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .kunde-content300
  {
    width: 300px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .kunde-content300 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .kunde-content600
  {
    width: 600px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .kunde-content600 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .kunde-content650
  {
    width: 650px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .kunde-content650 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .kunde-content700
  {
    width: 700px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .kunde-content700 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .kunde-content800
  {
    width: 800px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .kunde-content800 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .produktname
  {
    font-size: 20pt;
    color: #1a237e;
    background-color: #ffffff;
  }

  .produkt-content
  {
    padding-top: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .produkt-content h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .produkt-content600
  {
    width: 600px;
    padding-top: 20px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .produkt-content500 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }


  .benutzer-content1
  {
    width: 600px;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .benutzer-content1 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  .benutzer-content2
  {
    width: 300px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    margin: 10px;
    font-size: 13pt;
    color: #000000;
    background-color: #ffffff;
    float: left;
    border-radius: 5px 5px 5px 5px;
  }

  .benutzer-content2 h1
  {
    font-size: 15pt;
    font-weight: 100;
    color: #1a237e;
  }

  /* --------------------------------------------------------------------------------------------------------------------------------------------------------
    LOGIN
   -------------------------------------------------------------------------------------------------------------------------------------------------------- */
  .login
  {
    width:100vw;
    height: 100vh;
    font-size: 1.25em;
    background-image: url("/images/login-background.png");
    background-color: transparent;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
  }

  .login-kunde
  {
    width:100vw;
    height: 100vh;
    font-size: 1.25em;
    background-image: url("/images/login-background.png");
    background-color: transparent;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    border: none;
  }



  /*-----------------------------------------------------------------------------------------------------------------------------------*/

  main
  {
    width: 100vw;
    height: 85vh;
    margin-top: 1.3vh;
    float: left;
    font-size: 0.8em;
  }

  .main-editmode
  {
    width:100vw;
    height: 93vh;
    min-height: 800px;
    max-height: 93.8vh;
    margin-top: 1.3vh;
    font-size: 0.8em;
    float: left;
    background-color: #cccccc;
  }



  .main-rechnung
  {
    max-width: 1000px;
    font-size: 1.25em;
    height: auto;
  }


  /* --------------------------------------------------------------------------------------------------------------------------------------------------------
    BROWSER Wiedervorlage
   -------------------------------------------------------------------------------------------------------------------------------------------------------- */

  .browser_wiedervorlage
  {
    font-size: 1.1em;
    background-color: #ffffff;
    min-width: 200px;
    width:12vw;
    height: 82vh;
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1a237e;
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable horizontal scroll */
    color: black;
  }

  .browser_wiedervorlage-item
  {
    margin-left: -45px;
    padding-left: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    list-style-type: none;
    background-color: #ffffff;
    text-decoration: none;
    color: black;
    font-size: 1.1em;
    display: block;
  }

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

  .browser_wiedervorlage-item a:active
  {
    color: #000000;
  }

  .browser_wiedervorlage-item:hover
  {
    color: #000000;
    background-color: #efefef;
  }

  .browser_wiedervorlage-item a:visited
  {
    color: #000000;
  }


  /* --------------------------------------------------------------------------------------------------------------------------------------------------------
    BROWSER KUNDENLISTE
   -------------------------------------------------------------------------------------------------------------------------------------------------------- */

  .browser_kundenliste
  {
    background-color: #ffffff;
    min-width: 200px;
    width:12vw;
    height: 80.5vh;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    display: flex;
    position: relative;
    flex-direction: column;
    border-right: 1px solid #1a237e;
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable horizontal scroll */
    color: black;
  }

  .browser_kundenliste-item
  {
    font-size: 0.9em;
    margin-left: -25px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    list-style-type: none;
    background-color: #ffffff;
    text-decoration: none;
    color: black;
    display: block;
  }

  .browser_kundenliste-item-inaktiv
  {
    font-size: 0.9em;
    margin-left: -25px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    list-style-type: none;
    background-color: #ffffff;
    text-decoration: none;
    color: #cccccc;
    display: block;
  }


  .browser_kundenliste-item:hover
  {
    background-color: #efefef;
  }

  .browser_kundenliste-item-inaktiv:hover
  {
    background-color: #efefef;
  }


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

  .browser_kundenliste-item-inaktiv a
  {
    color: #999999;
    text-decoration: none;
  }


  .browser_kundenliste a:active
  {
    color: #000000;
  }

  .browser_kundenliste-item-inaktiv a:active
  {
    color: #999999;
    text-decoration: none;
  }


  .browser_kundenliste a:visited
  {
    color: #000000;
  }

  .browser_kundenliste-item-inaktiv a:visited
  {
    color: #999999;
    text-decoration: none;
  }


  .browser_kundenliste a[title]:hover:
  {
    background-color: #0078ff;
  }

  .suchfeld_kunde
  {
    float: left;
    display: block;
    position: absolute;
    padding-top: 20px;
    padding-right: 15px;
    width: auto;
    font-size: 1.1em;
  }

  .kundenliste
  {
    background-color: #ffffff;
    width:auto;
    max-height: 73.5vh;
    margin-top: 50px;
    padding-right: 30px;
    padding-bottom: 30px;
    list-style-type: none;
    float: left;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Disable horizontal scroll */
    color: black;
    font-size: 1.25em;
  }


  .funktionsleiste-kundeninfo
  {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    display: flex;
    flex-direction: column;
    color: black;
    font-size: 1.25em;
  }


  /* --------------------------------------------------------------------------------------------------------------------------------------------------------
    BROWSER Produktliste
   -------------------------------------------------------------------------------------------------------------------------------------------------------- */

  .browser_produktliste
  {
    background-color: #ffffff;
    min-width: 200px;
    width:12vw;
    height: 80.5vh;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    display: flex;
    position: relative;
    flex-direction: column;
    border-right: 1px solid #1a237e;
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable horizontal scroll */
    color: black;
  }

  .browser_produktliste-item
  {
    font-size: 0.9em;
    margin-left: -25px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    list-style-type: none;
    background-color: #ffffff;
    text-decoration: none;
    color: black;
    display: block;
  }

  .browser_produktliste-item-inaktiv
  {
    font-size: 0.9em;
    margin-left: -25px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    list-style-type: none;
    background-color: #ffffff;
    text-decoration: none;
    color: #cccccc;
    display: block;
  }


  .browser_produktliste-item:hover
  {
    background-color: #efefef;
  }

  .browser_produktliste-item-inaktiv:hover
  {
    background-color: #efefef;
  }


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

  .browser_produktliste-item-inaktiv a
  {
    color: #999999;
    text-decoration: none;
  }


  .browser_produktliste a:active
  {
    color: #000000;
  }

  .browser_produktliste-item-inaktiv a:active
  {
    color: #999999;
    text-decoration: none;
  }


  .browser_produktliste a:visited
  {
    color: #000000;
  }

  .browser_produktliste-item-inaktiv a:visited
  {
    color: #999999;
    text-decoration: none;
  }


  .browser_produktliste a[title]:hover:
  {
    background-color: #0078ff;
  }

  .suchfeld_produkt
  {
    float: left;
    display: block;
    position: absolute;
    padding-top: 20px;
    padding-right: 15px;
    width: auto;
    font-size: 1.1em;
  }

  .produktliste
  {
    background-color: #ffffff;
    width:auto;
    max-height: 73.5vh;
    margin-top: 50px;
    padding-right: 30px;
    padding-bottom: 30px;
    list-style-type: none;
    float: left;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Disable horizontal scroll */
    color: black;
    font-size: 1.25em;
  }


  .funktionsleiste-produktinfo
  {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    display: flex;
    flex-direction: column;
    color: black;
    font-size: 1.25em;
  }





  /* --------------------------------------------------------------------------------------------------------------------------------------------------------

   -------------------------------------------------------------------------------------------------------------------------------------------------------- */



  h1
  {
    font-size: 1.25em;
  }

  h2
  {
    text-align: center;
    margin: 20px auto;
    color: #fff;
  }

  h2.stornobeleg
  {
    text-align: center;
    margin: 24px auto;
    color: #000000;
  }


  h4
  {
    font-size: 8px;
  }

  fieldset.header
  {
    height: 100%;
    display: flex;
    vertical-align: middle;
    font-size: 1.8em;
    background-color: #1a237e;
    opacity: 1;
    border: none;
    float: none;
    margin-left:0px;
    margin-right: 0px;
  }

  fieldset.titel
  {
    width: 86vw;
    height: 3vh;
    display: flex;
    vertical-align: middle;
    font-size: 2.5em;
    color: #1a237e;
    background-color: #ffffff;
    border: 0px;
    border-bottom: 1px solid;
    border-bottom-color: #1a237e;
    float: none;
    margin-top: 1.3vh;
    margin-left:0px;
    margin-right: 0px;
  }


  fieldset.banner
  {
    font-size: 1em;
    width: 1600px;
    background-color:#0078ff;
    border:none;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
  }

  fieldset.funktionsleiste
  {
    font-size: 1.2em;
    width: 84.7vw;
    height: 4vh;
    width: auto;
    color: #1a237e;
    background-color: #ffffff;
    border: 0px;
    border-bottom: 1px solid;
    border-bottom-color: #1a237e;
    float: none;
    margin-top: -10px;
    margin-left:0px;
    margin-right: 0px;
  }

  fieldset.arbeitsfenster
  {
    font-size: 1.2em;
    background-color: #ffffff;
    border: none;
    float: none;
    max-height:78vh;
    height:auto;
    position: relative;
    padding-left: 30px;
    overflow-y:scroll;
    overflow-x:hidden;
  }

  fieldset.arbeitsfenster h1
  {
    font-size: 1.2em;
    font-weight: 100;
    color: #1a237e;
  }


  fieldset.arbeitsfenster-editmode
  {
    font-size: 1.2em;
    color: #000000;
    background-color: #ffffff;
    background-repeat: repeat-y;
    border: none;
    float: none;
    height: 98%;
    position: relative;
    overflow-y:scroll;
    overflow-x:hidden;
  }

  fieldset.arbeitsfenster-editmode h1
  {
    font-size: 1.1em;
    font-weight: 100;
    color: #1a237e;
  }

  fieldset.arbeitsfenster-editmode input, textarea
  {
    font-size: 1em;
    padding: 3px 5px 3px 5px;
    border-width: 1px;
    border-color: #000000;
    background-color: #FFFFFF;
    color: #000000;
    border-style: solid;
    border-radius: 3px;
    /*box-shadow: 0px 0px 3px rgba(66,66,66,.75);*/
  }

  fieldset.arbeitsfenster-editmode-breit
  {
    font-size: 1.2em;
    color: #000000;
    background-color: #ffffff;
    background-repeat: repeat-y;
    border: none;
    float: none;
    height: 98%;
    position: relative;
    overflow-y:scroll;
    overflow-x:hidden;
  }

  fieldset.arbeitsfenster-editmode-breit h1
  {
    font-size: 1.1em;
    font-weight: 100;
    color: #1a237e;
  }

  fieldset.arbeitsfenster-editmode-breit input, textarea
  {
    font-size: 1em;
    padding: 3px 5px 3px 5px;
    border-width: 1px;
    border-color: #000000;
    background-color: #FFFFFF;
    color: #000000;
    border-style: solid;
    border-radius: 3px;
    /*box-shadow: 0px 0px 3px rgba(66,66,66,.75);*/
  }

  fieldset.meldung
  {
    font-size: 1.2em;
    height: auto;
    border: none;
    float: none;
    margin-left:0px;
    margin-right: 0px;
  }


  #meldung-gelb
  {
    font-size: 1.25em;
    width: 100%;
    background-color: yellow;
    border-left: none;
    border-right: none;
    border-top: 1px solid;
    border-top-color: yellow;
    border-bottom: 1px solid;
    border-bottom-color: yellow;
    z-index: 7;
    position: absolute;
    float: none;
    margin-top: -0.2vh;
    margin-left:0px;
    margin-right: 0px;
    padding-left: 0px;
  }

  #meldung-rot
  {
    font-size: 1.25em;
    color: #ffffff;
    width: 100%;
    background-color: red;
    border-left: none;
    border-right: none;
    border-top: 1px solid;
    border-top-color: red;
    border-bottom: 1px solid;
    border-bottom-color: red;
    z-index: 7;
    position: absolute;
    float: none;
    margin-top: -0.2vh;
    margin-left:0px;
    margin-right: 0px;
    padding-left: 0px;
  }

  #meldung-grün
  {
    font-size: 1.25em;
    width: 100%;
    background-color: #B2D9B2;
    border-left: none;
    border-right: none;
    border-top: 1px solid;
    border-top-color: #008000;
    border-bottom: 1px solid;
    border-bottom-color: #008000;
    z-index: 7;
    position: absolute;
    float: none;
    margin-top: -0.2vh;
    margin-left:0px;
    margin-right: 0px;
    padding-left: 0px;
  }

  fieldset.login
  {
    width: 500px;
    height: 500px;
    margin-top: 15vh;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    background-color:#ffffff;
    opacity: 0.93;
    border:1;
    border-color: #ffffff;
    border-radius: 5px 5px 5px 5px;
    font-size: 0.75em;
  }

  fieldset.login table, input
  {
    font-size: 1em;
  }

  fieldset.login-kunde
  {
    width: 500px;
    height: 580px;
    margin-top: 13vh;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    background-color:#ffffff;
    opacity: 0.93;
    border:1;
    border-color: #ffffff;
    border-radius: 5px 5px 5px 5px;
    font-size: 0.75em;
  }

  fieldset.login-kunde table, input
  {
    font-size: 1em;
  }

  /* DIALOG-FENSTER**************************************************************************************************************/

  dialog::backdrop
  {
    background: rgba(0,0,0,0.6);
  }



  /* BUTTONS *****************************************************************************************************************/

  .button
  {
    font-size:1em;
    height:30px;
    width:175px;
  }

  .button_abmelden
  {
  	font-size:0.75em;
  	background-color:transparent;
  	border-radius:3px;
  	border:1px solid #ffffff;
  	display:inline-block;
  	cursor:pointer;
  	color:#ffffff;
    height:22px;
    width:85px;

  	text-decoration:none;
  }

  .button_abmelden:hover
  {
  	background-color:transparent;
  }

  .button_abmelden:active
  {
  	position:relative;
  	top:1px;
  }


  .button_neu
  {
    font-size: 1em;
    background-color: transparent;
    padding: 3px 5px 3px 5px;
  	border-radius:3px;
  	border:1px solid #1a237e;
  	display:inline-block;
  	cursor:pointer;
  	color:#1a237e;
    height: auto;
    width: auto;
  	text-decoration:none;
  }

  .button_neu:hover
  {
  	background-color: transparent;
  }

  .button_neu:active
  {
  	position:relative;
  	top:1px;
  }

  .button_neu_rot
  {
    font-size: 1em;
    background-color: red;
    padding: 3px 5px 3px 5px;
  	border-radius:3px;
  	border:1px solid #1a237e;
  	display:inline-block;
  	cursor:pointer;
  	color:#fff;
    height: auto;
    width: auto;
  	text-decoration:none;
  }


  .button_aktiv
  {
    font-size: 1em;
    background-color: #1a237e;
    padding: 3px 5px 3px 5px;
  	border-radius:3px;
  	border:1px solid #ffffff;
  	display:inline-block;
  	cursor:pointer;
  	color:#ffffff;
    height: auto;
    width: auto;
  	text-decoration:none;
  }

  .button_aktiv:hover
  {
  	background-color: #1a237e;
  }

  .button_aktiv:active
  {
  	position:relative;
  	top:1px;
  }

  .button_grau
  {
    font-size: 1em;
    background-color: transparent;
    padding: 3px 5px 3px 5px;
  	border-radius:3px;
  	border:1px solid #1a237e;
  	display:inline-block;
  	cursor:pointer;
  	color:#cccccc;
    height: auto;
    width: auto;
  	text-decoration:none;
  }


  .button_speichern
  {
    font-size: 1em;
    background-color: #1a237e;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
  }

  .button_speichern_rot
  {
    font-size: 1em;
    background-color: red;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
  }

  .button_speichern_funktionsleiste
  {
    font-size: 1em;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    margin: 2px 1px;
    cursor: pointer;
  }

  /********************************************************************************************************************************/
  /*Tabellen */
  /********************************************************************************************************************************/

  table.header
  {
    font-size: 1em;
    color: #ffffff;
    border: 0px solid #000000;
    width: 100%;
    border-collapse: collapse;
  }

  table.header tr td
  {
    white-space: nowrap;
  }

  table.rechnung
  {
    border: 1px solid #000000;
    width: 100%;
    border-collapse: collapse;
  }


  table.rechnung td, table.rechnung th
  {
  }


  table.rechnung tbody td
  {
    font-size: 12px;
  }


  table.rechnung thead
  {
      border-bottom: 2px solid #000000;
      font-size: 12px;
      font-weight: bold;

  }


  table.blueTable
  {
    border: 0px solid #F5F5F5;
    background-color: #FFFFFF;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
  }


  table.blueTable td, table.blueTable th
  {
    border: 1px solid #AAAAAA;
    padding: 5px 2px;
  }


  table.blueTable tbody td
  {
    font-size: 1em;
    color: #000000;
  }


  table.blueTable tr:nth-child(even)
  {
    background: #F5F5F5;
  }


  table.blueTable thead
  {
      color: #000000;
      border-bottom: 1px solid #616161;
      background: #dcddeb;

  }

  table.blueTable thead th
  {
    font-size: 1em;
    font-weight: bold;
    color: #000000;
    background: #dcddeb;
  }

  table.blueTable tfoot td
  {
    font-size: 1em;
  }

  table.blueTable tfoot .links
  {
    text-align: right;
  }

  table.blueTable tfoot .links a
  {
    display: inline-block;
    background: #1C6EA4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
  }



  /********************************************************************************************************************************/

  footer
  {
    font-family: 'Roboto', sans-serif;
    /*font-family: "Helvetica Neue", Helvetica, sans-serif;*/
    font-size: 1.25em;
    color: #ffffff;
    height:90px;
    border:none;
    width: 1600px;
    background-color: #0078ff;
    float: left;
  }

  footer a:link
  {
    color: yellow;
  }

  footer a:visited
  {
    color: yellow;
  }

  footer table.tr
  {
    line-height: 30px;
  }
}

/********************************************************************************************************************************/

@media print
{
  html, body, main, .main-rechnung
  {
    font-family: 'Roboto', sans-serif;
    font-size: 1.25em;
  }
  .nichtdrucken
  {
    display: none;
  }
  button
  {
    display: none;
  }
  h1
  {
    font-size: 20px;
  }
}