html {
   height:100%;
   width:100%;
}

body {
   height:100%;
   margin:0em;
   padding:0em;
   background-color:#fffff7;
   font-size:1em;
   font-family:Arial,Helvetica,sans-serif;
   color:#000000;
   overflow-y:scroll;
}

p {
  margin:0em 0em 0.6em 0em;
}

div {
   overflow:visible;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
}

div.red, p.red {
  color:#990000;
  font-weight:bold;
  border:3px solid #990000;
  margin:1em auto 1em auto;
  padding:0.4em;
}

td, th {
  vertical-align:top;
}


table {
  border-collapse:collapse;
}

.center {
  text-align:center;
}

.border-top {
  border-top:1px solid #000000;
}

img {
   border-width:0px;
}

td#content {
  width:100%;
  padding:2px 2px 0px 8px;
}



input, textarea {
   background-color:#FFFFFF;
   padding-left:3px;
   padding-right:3px;
}

.formbutton {
   background-color:#00A3A6;
   color:#FFFFFF;
   font-size:1.1em;
   padding:3px 10px 3px 10px;
}

h1 { /* Seitentitel */
  margin:0em 0em 0.4em 0em;
  padding:0.2em 0.4em 0.2em 0.4em;
  border:1px solid #999999;
  background-color:#CCCCCC;
  font-size:1.4em;
  font-weight:bold;
}

h2 {
  margin:1em 0em 0.4em 0em;
  padding:0em;
  font-size:1.4em;
  font-weight:bold;
}

h3 {
  margin:0.4em 0em 0.4em 0em;
  padding:0em;
  font-size:1.1em;
  font-weight:bold;
}

a:link    { color: #00A3A6; text-decoration: none; font-weight: bold; }
a:visited { color: #00A3A6; text-decoration: none; font-weight: bold; }
a:hover   { color: #000000; text-decoration: underline; }
a:active  { color: #000000; text-decoration: underline; }

a.lb-link:link    { color: #CCC; text-decoration: none; font-weight: bold; }
a.lb-link:visited { color: #CCC; text-decoration: none; font-weight: bold; }
a.lb-link:hover   { color: #FFFFFF; text-decoration: underline; font-weight: bold; }
a.lb-link:active  { color: #FFFFFF; text-decoration: underline; font-weight: bold; }

a.navi {
  display:block;
  width:148px;
   margin-top:5px;
   margin-left:0px;
   margin-right:0px;
   padding-top:5px;
   padding-bottom:5px;
   padding-left:6px;
   padding-right:6px;
  color:#000000;
  border:1px solid #999999;
}

.navigationslinks {
   text-align:left;
   color:#000000;
   width:162px;
   border:1px solid #6b6ba6;
   padding-top:5px;
   padding-bottom:5px;
   padding-left:6px;
   padding-right:6px;
   margin-top:5px;
   margin-left:0px;
   margin-right:0px;
} 

a.navi:link    { background-color:#00A3A6; color:#FFFFFF; text-decoration: none; font-weight: normal; }
a.navi:visited { background-color:#00A3A6; color:#FFFFFF; text-decoration: none; font-weight: normal; }
a.navi:hover   { background-color:#028C8F; color:#FFFFFF; text-decoration: none; border-color:#000000; }
a.navi:active  { background-color:#028C8F; color:#FFFFFF; text-decoration: none; } 

/* a.navi:link    { background-color:#cfd9e9; color:#000000; text-decoration: none; }
a.navi:visited { background-color:#cfd9e9; color:#000000; text-decoration: none; }
a.navi:hover   { background-color:#f1f4f9; color:#000000; text-decoration: none; border-color:#000000; }
a.navi:active  { background-color:#f1f4f9; color:#000000; text-decoration: none; } 
 */
.einschub {
   margin-top:15px;
   margin-left:30px;
   margin-bottom:20px;
}

span.hinweis {
   color:#CC0000;
}

div.hinweis {
   color:#CC0000;
   font-weight:bold;
   background-color:#FFCC66;
   padding:10px;
   margin:5px;
   margin-bottom:12px;
}

.rechtsb {
   text-align:right;
}

.hinterlegt {
   background-color:#EEEEEE;
}

.schedule {
  margin-left:30px;
  margin-bottom:15px;
}

.expenseshiddeninput{
   border:0px;
   width:40px;
   font-weight:bold;
   text-align:right;
   background-color:#EEEEEE;
}

.hyphenless {
/*  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;*/
  text-align: justify;
}



/* Desktop */
@media only screen and (min-width: 1020px) {
  .maintable {
    width:1000px;
  }
}


/* Desktop 2 */
@media only screen and (min-width: 801px) and (max-width: 1019px) {
  .maintable {
    max-width:1000px;
  }
}

/* Tablet */
@media only screen and (min-width: 481px) and (max-width: 800px) {
  .maintable {
    max-width:800px;
  }

  body,input,select,textarea {
    font-size:1.2em;
  }

  h1 {
    font-size:1.8em;
  }

  h2 {
    font-size:1.4em;
  }

  h3 {
    font-size:1.3em;
  }


  .tablelabelsvertical {
    display:none!important;
  }

  div.col1 {
    width:100%;
    margin-top:1.5em;
  }

  div.row1 {
    width:100%;
    margin-top:0px;
  }

  div.inp {
    border-top:0px;
  }

  div.extra {
    margin-top:1em;
    text-align:left;
    border-bottom:1px solid #5D4D3F;
  }

  span.scale {
    display:inline;
  }

  input[type=checkbox],input[type=radio] {
    -ms-transform: scale(1.25,1.25); /* IE */
    -moz-transform: scale(1.25,1.25); /* FF */
    -webkit-transform: scale(1.25,1.25); /* Safari and Chrome */
    -o-transform: scale(1.25,1.25); /* Opera */
    padding: 10px;
  }

  td.erl,div.erl {
    font-size:0.78em;
  }

  #head1 {
    margin-top:12px;
    width:100%;
  }

  #head2 {
    height:150px;
    width:100%;
  }

  div.table,div.tr,div.td {
    display:block;
  }

  .tl1c {
    background-color:#f0f0f0;
  }
}

/* Smartphones */
@media only screen and (max-width: 480px) {
  .maintable {
    max-width:480px;
  }

  body,input,select,textarea {
    font-size:1.4em;
  }


  h1 {
    font-size:1.6em;
  }

  h2 {
    font-size:1.5em;
  }

  h3 {
    font-size:1.4em;
  }


  .tablelabelsvertical {
    display:none!important;
  }

  div.col1 {
    width:100%;
    margin-top:1.5em;
  }

  div.row1 {
    width:100%;
    margin-top:0px;
  }

  div.inp {
    border-top:0px;
  }

  div.extra {
    margin-top:1em;
    text-align:left;
    border-bottom:1px solid #5D4D3F;
  }

  span.scale {
    display:inline;
  }

  #flexleftbutton {
    float:inherit!important;
    padding-bottom:10px;
  }

  input[type=checkbox],input[type=radio] {
    -ms-transform: scale(1.5,1.5); /* IE */
    -moz-transform: scale(1.5,1.5); /* FF */
    -webkit-transform: scale(1.5,1.5); /* Safari and Chrome */
    -o-transform: scale(1.5,1.5); /* Opera */
    padding: 10px;
  }

  .einleitetext {
    padding-left:0px;
    padding-right:0px;
    text-align:left;
  }

  td.erl,div.erl {
    font-size:0.68em;
  }

  #head1 {
    display:none;
  }

  #head2 {
    width:100%;
  }

  div.table,div.tr,div.td {
    display:block;
  }

  .tl1c {
    background-color:#f0f0f0;
  }
}

/*@media only screen and (min-width: 624px) and (max-width: 800px) {*/
@media only screen and (min-width: 598px) and (max-width: 800px) {*/
  .vertical-line:nth-of-type(3){
    visibility:hidden;
  }
}

/*@media only screen and (min-width: 481px) and (max-width: 623px) {*/
@media only screen and (min-width: 481px) and (max-width: 597px) {
  .vertical-line:nth-of-type(3){
    visibility:visible;
  }
  .vertical-line:nth-of-type(2){
    visibility:hidden;
  }
}

@media only screen and (min-width: 453px) and (max-width: 480px) {
  .vertical-line:nth-of-type(1){
    visibility:hidden;
  }
  .vertical-line:nth-of-type(2){
    visibility:visible;
  }
  .vertical-line:nth-of-type(3){
    visibility:hidden;
  }
}

@media only screen and (max-width: 452px) {
  .vertical-line:nth-child(n){
    visibility:hidden;
  }
}





/* The whole item (question and answer area) */
div.item {
  border:1px solid #5D4D3F;
  margin:15px 0px 25px 0px;
  padding:0px;
}

/* Where the question above the form field is in. */
div.itemquestion {
  font-weight:bold;
  margin:0px;
  padding:5px 15px 5px 15px;
  border-bottom:1px solid #5D4D3F;
  background-color:#742128;
  color:#FFFFFF;
}

/* Where the form field is in. */
div.itemanswer {
  margin:0px;
  padding:15px;
  text-align:left;
}


/* Text at the top of the item answer div */
div.toptxt {
/*  font-size:1.0em;*/
  color:#5D4D3F;
  margin-bottom:5px;
}

/* The item("text", ...), item("textarea", ...), and item("select",
   ...) input fields. */
.itemfield {
  border:1px solid #5D4D3F;
  font-family: Arial, Helvetica, Sans-Serif;
/*  font-size:13px;*/
}

/* The item("text", ...) input field. */
input.itemfield {
  width:500px;
  padding:2px;
}

/* The item("textarea", ...) input field. */
textarea.itemfield {
        border:1px solid #5D4D3F;
        font-family: Arial, Helvetica, Sans-Serif;

}

/* The item("select", ...) input field. */
select.itemfield {
/*                font-size:13px;*/
        font-family: Arial, Helvetica, Sans-Serif;
}



/* Where the buttons leading to the next/previous page are in */
#flexbutton {
  text-align:center;
/*  width:800px;*/
  visibility:visible; /* If you use $cfg["submitmsg"] = TRUE, you need this! */
} /* div */


table.button {
  margin-top:-0.75em;
  margin-bottom:0.4em;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
/*  padding-right:20px;*/
}



/* The next/previous page buttons */
input.button {
  width:200px;
  margin:0px 10px 0px 10px;
  border:1px solid #5D4D3F;
}


button.button:focus { border:1px inset #000066; }







/* The left column of item("text", ...) with multiple inputs */
td.textlist {
  text-align:left;
  vertical-align:bottom;
}

/* All cells of a item("rating", ...) table */
td.ratinglist,div.ratinglist {
  border-top:1px solid #5D4D3F;
  vertical-align:middle;
/*  font-size:13px;*/
}

/* The left pole of a rating */
td.ratingleft,div.ratingleft {
/*        font-size:13px;*/
  /* set width to let all ratings be aligned the same way */
}

/* The right pole of a rating */
td.ratingright,div.ratingright {
}

/* The labels in item("rating", ...) with multiple ratings, the
   "middle" label of all ratings and the columns in a checkbox matrix
   */
td.tablelabels,div.tablelabels {
  vertical-align:bottom;
  white-space:nowrap;
/*  font-size:13px;*/
  font-style:italic;
}

/* The "extra" radio or checkbox, e.g. "I don't want to answer." */
td.extrarow,div.extrarow {
  padding-top:15px;
  font-style:italic;
}

/* The "extra" column in tables of multiple radios */
td.extracol,td.extracol {
  width:50px;
}

/* The table of multiple ratings and checkbox matrices */
table.tableratingcheckbox,div.tableratingcheckbox {
	width:100%;
        border-bottom:1px solid #5D4D3F;
  /* Unfortunately, width:100%; can break some designs in
     InternetExplorer */
}


/* Additions to .item if this item is mandatory and has not been
   answered */
div.missingitem {
   background-color:#FFFFFF;
   border:1px solid #3a2961;
  margin:15px 0px 25px 0px;
  padding:0px;
}

/* Additions to .itemquestion if this item is mandatory and has not
   been answered */
div.missingitemquestion {

  font-weight:bold;
  margin:0px;
  padding:5px 15px 5px 15px;
  border-bottom:1px solid #3a2961;
  background-color:#CABA63;
  color:#3a2961;
}

/* Additions to .itemanswer if this item is mandatory and has not
   been answered */
div.missingitemanswer {
        margin:0px;
        padding:15px;
        text-align:left;
}




/* The message that is displayed at the top of the page if there are
   unanswered mandatory items. */
div.missingmsg {
  color:#3a2961;
  border:1px solid #3a2961;
  margin: 10px 0px 30px 0px;
  padding:8px;
  background-color:#CABA63;
}

/* The progress bar */
div.progbarouter {
  height:12px;
  background-color:#CABA63;
  border:1px solid #0b023d;
  font-size:0.1em; /* Needed for IE, otherwise small height not applied. */
  margin:0px 10px 0px 10px;
  overflow:hidden;
}

/* The progress bar's filling */
div.progbarinner {
         /* Why not just height:100% and no overflow above? Because of opera browser! */
  height:15px;
  background-color:#742128;
  font-size:0.1em; /* Needed for IE, otherwise small height not applied. */
}

td.col1,div.col1 {
    width:550px;
}