/*General Styl*/
body{
    background:#B4BBC1;
    font-size:100%;
    margin:0em;
    padding:0em;
    font-family:Helvetica;
    --farbemarkhalb:rgba(122, 42, 109, 0.5);
    --farbehaupt:#627E91;
    --farbemenu:#627E91;
    --farbemenühalb:rgba(98, 126, 145,0.5);
    --farberand:#7B2A6E;
    --farbefooter:#08314E;

}
html{
    overflow: hidden;
}
#body100{
    display: block;
    height:-webkit-fill-available;
}
h1{
    float: left;
    clear:left;
    width: calc(100% - 0.1875em - 0.1875em);
    font-size: 1.3em
    font-weight: 100;
    color:black;
    margin:0.1875em;


}

ul.untermenu + h1, ul.untermenu + h2, ul.untermenu + div, ul.untermenu + table, ul.untermenu + form {
  margin-top: 1.65em!important;
}
h2{
    float: left;
    clear:left;
    width: calc(100% - 0.1875em - 0.1875em);
    font-size:1.113em;
    font-weight: 100;
    color:black;
    margin:0.1875em;
    background-color: rgba(122, 42, 109, 0.5);
}
h3{
    float: left;
    clear:left;
    width: 100%;
    font-size:1.125em
    font-weight: 100;
    color:black;
    margin:0.1875em;


}
p{
    float:left;
}
p.zusatzinfo{
    margin-top:0;
    margin-left:3px;
    line-height: 1em;
}
p.listmenu{
  float:inherit;
  margin: 0;
}


table{
  float:left;
  clear:left;
}
ul{

    margin:0px;
    padding: 0px;
}
a:link{
    text-decoration:none;



}
a:visited{
  color: blue;

}
a.icons{
  color: inherit;

}

div{
    float: left;
}
div.absatz{
    width:100%;
}
div.infotext{

    float:left;
    clear:left;
    margin:0.1875em;
    margin-bottom: 1em;
    margin-top: 1em;
   background-color: rgb(236, 236, 236);
   word-wrap: break-word;
   word-break: break-all;

}
div.imeldung{

    float:left;
    clear:left;
    width: 90%;
    margin:0.1875em;
    margin-bottom: 1em;
    margin-top: 1em;
    background: lightgreen;

}
#imeldung2{
  float:left;
  clear:left;
  width: 90%;
  margin:0.1875em;
  margin-bottom: 1em;
  margin-top: 1em;
  background: lightgreen;

}
#fmeldung2{
  float:left;
  clear:left;
  width: 90%;
  margin:0.1875em;
  margin-bottom: 1em;
  margin-top: 1em;
  background: rgb(207, 84, 71) ;

}
div.fmeldung{

    float:left;
    clear:left;
    width: 90%;
    margin:0.1875em;
    margin-bottom: 1em;
    margin-top: 1em;
    background: rgb(207, 84, 71);

}
div.textfluss{
  padding-left: 1em;
}
.infowichtig{
  background-color: red;
  color:white;
}
div.vollebreite{
  width: 100%;
}
hr{
    float:left;
    clear: left;
    width: 100%

}
/*********************************************************************************
Login
*********************************************************************************/

/* width */
::-webkit-scrollbar {
  width: 8px;
}



/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--farberand);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}

/*********************************************************************************
Login
*********************************************************************************/
#login {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.9);
    z-index:600;

}
#loginout {
    position:absolute;
    width: 0px;
    height: 0px;
    visibility: hidden;
    background:rgba(0,0,0,0.9);

}
#login .rahmenpopup{
    position:absolute;
    background:#A06897;
    border: #8FA639 solid 2px ;
    top: 50%;
     left: 50%;
    width: 500px;
    height: 200px;
    margin-top: -100px; /* Half the height */
    margin-left: -250px; /* Half the width */
    padding: 10px;


}
#loginout .rahmenpopup{
    visibility: hidden;


}
/****************************************************************************************************************************************
popup
******************************************************************************************************************************************/
#popup {
    position:absolute;
    width: 0%;
    height: 0%;
    background:rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 599;

}
#popup .rahmenpopup{
    position:absolute;
    background:var(--farbefooter);
    border: #7b2a6e solid 2px ;
    top: 50px;
    left: 50px;
    width: calc(100% - 100px);
    height: calc(100% - 200px);

    padding: 10px;
}

#popup .leiste{
  position: relative;
  float:left;
  width:calc(100% - 8px);
  background:#7b2a6e;
  text-align:right;
  padding:4px;
}
#popupleiste{
  position: relative;
  float: left;
  color:white;
  font-weight: bold;
}

#popup #popupinhalt{
  position: relative;
  float:left;
  width:calc(100% - 8px);
  color: white;

  padding:4px;


}
/****************************************************************************************************************************************
On Tob bar
******************************************************************************************************************************************/

#menubar{
    position: fixed;
    top:0em;
    display:block;
    Background:var(--farbefooter);
    border-bottom: #7B2A6E solid 0.176em;
    text-align:center;
    width: 100%;
    height: 2.5em;
    z-index: 4;
}
#menubar ul{
    display: block;
}
#menubar ul li{
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}
#menubar ul li a{
    color:  white;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 2em;
    padding: 0.5em;
    transition: background-color 0.5s;
    -webkit-transition:background 0.5s;

}
#menubar ul li a.aktiviert{
    background-color: #560349;
}
#menubar ul li a:hover{
    background-color: #7B2A6E;
}



}

li.info{
    font-size: 0.71em;
    color: rgb(42, 196, 58);

}
/*haubtbereich GESAMT*/
#gesamt{
    margin-top:2.676em;
    margin-bottom:1.5em;
    display: flex;
    height: -webkit-fill-available;

}

#nummernkreisauswahl{
  width:150px;
}
#nummernkreisauswahl select{
  -moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
-moz-padding-start: calc(10px - 3px);
  margin:10px;
  width: 200px;
  height: 20px;
  padding-left: 10px;
  background: #395A71;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
  border-radius: 3px;
  outline: none;
}

.select-wrapper {
  /* ... */
  position: relative;
}

.select-wrapper::before {
  color: #fff;
  font-size: 14px;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 13px;
}
select {
  /* ... */
  cursor: pointer;
}
/********************************************************************************************************************************
Seitenmenü Navigation
**********************************************************************************************************************************/
nav{
    position: fixed;
    height: 100%;
    width:10em;
    background:#627E91;
    border-left:  #7B2A6E solid 2px;

}

nav ul{
    display:block;
}
nav ul li{
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}
nav ul li a,nav ul li a:visited{
    color:  white;
    font-size: 1.25em;
    font-weight:  normal;
    line-height: 2em;
    padding: 0.5em;
    transition: background-color 0.5s;
    -webkit-transition:background 0.5s;
    width:100%;

}
nav ul li a:hover{
  background-color: #7B2A6E;

}

nav ul li a.side{

    font-size: 1em;
    float:left;
    clear:left;


}
main{
  position:fixed;
  left:0;
  top:2.676em;
  right:0;
  bottom:1.5em;
  overflow: auto;
  overflow-y: scroll;




  background: white;
  margin:0px;




}
/********************************************************************************************************************************
Untermenü Navigation
**********************************************************************************************************************************/

ul.untermenu{
  position:fixed;
  width: calc(100%  - 8px); /* Abzug menüleiste links und scrollbalken rechts*/
  height:1.65em;
  background:#627E91;
  display:block;
}

h2.untermenu{
  position: parseFloat;
  display:block;
}

h2.untermenu li, ul.untermenu li{
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}

ul.untermenu li a{
  color:  white;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 2em;
  padding: 0.5em;
  transition: background-color 0.5s;
  -webkit-transition:background 0.5s;
}


ul.untermenu li a:hover{

    background:#7B2A6E;
}

ul.untermenu li select,ul.untermenu li input, h2.untermenu  select, h2.untermenu input{

  width:auto;
  float: none;
}
ul.untermenu li input{
  height: 16px;
}

footer{
    bottom:0px;
    position: fixed;
    display:block;
    Background:var(--farbefooter);
    text-align:center;
    width: 100%;
    height: 1.5em;
    color: white;
}
footer .signatur{
    margin: 0.5em;
    font-size: 0.7em;
    position: relative;
    float: right;
    font-weight: bold;
    color: white;

}
footer .status{
    margin: 0.5em;
    font-size: 0.7em;
    position: relative;
    float: left;
    font-weight: bold;
    color: white;

}
footer a,footer a:visited{
    color: white;
}
footer a:hover{
    color: blue;
}


/*******************************************************************************************************************************************
Formular Grundeinstellung
*******************************************************************************************************************************************/
form{

}
label{
  font-size: 90%;
  float:left;
  clear:left;
  width:20%;
  margin:3px;
  line-height: 1.8em;
}
label.lang{
  width:40%;
}
th > label{
  width:100%;
}
label a{
  text-decoration: underline;
  font-weight: bold;
}
input, button.popup {
  width:50%;
  float:left;
  margin:3px;


}
input.ischanged{
  font-style: italic;
  color:darkred;
}

input.provprozent, select.provprozent{
  width:60px;
}

button.vor, button.next{
  width: 30px!important;;

}
button.vor{
  float:left;
  margin-left: inherit!important;
}
button.next{
  float:right;
}

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

input[type=button], button[type=button], input[type=submit], input[type=reset],button[type=submit].popup, button.standart {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  -moz-padding-start: calc(10px - 3px);
  height: 25px;
  background: #395A71;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
  border-radius: 3px;
  outline: none;
  width: calc(80% + 8px);
  margin-left: 10%;
}
input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled{
  background: lightgray;
}
input.center{
  width: 90%;
  margin-left:5%;
  margin-right:5%;
}
input.kurz{
  width:10%;
}
input.bezeichnung{
  width:18.6%;
  clear: left;
}
input.infield{
  margin:0px;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  text-align: right;
}
div.nachbezeichnungdoppelpunkt{
  height: 1em;
  width:1em;
}
textarea{
  width:50%;
  float:left;
  margin:3px;
  height: 5.5em;
}
select{
  width:50%;
  float:left;
  margin:3px;

}
button.getarntalslink{
  width:auto;
  background: none;
  border: none;
  font-size: 12pt;
  font-weight: 100;

}
select.inlinkliste{
  width:60px;
  float:none;
}
button{
  cursor:pointer;

}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    //display: none;
    //-webkit-appearance: none;
    width: 15px;
    padding: 0px;
    margin: 0px;
    //margin-top: 10px;
}

/*Radias in Zeile*/

fieldset.radiobuttonsinzeile{
  width: 50%;
  float: left;
  margin: 3px;
}
fieldset.radiobuttonsinzeile label{
  width: fit-content;
    float: left;
    clear: inherit;
    line-height: inherit;
    padding: 0;
}
fieldset.radiobuttonsinzeile input{

    width: fit-content;
    clear: inherit;
    float: left;

}

/*Filterforumular*/

.filter{
    background-color: rgb(202, 235, 210);
    width: 100%;
    float:left;
}
.filter label{
  width:6em;
  clear:none;
}
.filter input{
  width:12em;
}


/*******************************************************************************************************************************************
Tabellen formate
*******************************************************************************************************************************************/
table{
  border: 1px solid black;
  border-collapse: collapse;
}


table.tb2color tr:nth-child(even) {
   background-color: #d1d9ff;
}
table.tb2color tr:nth-child(odd) {
   background-color: #b8b8b8;
}
table.tb2color {
   border-spacing: 0px;
   margin: 5px;
   font-size: 80%;
}
table.tb2color tr:hover {
  background-color: rgba(122, 42, 109, 0.5);
}
table.tb2color tr.active {
  background-color: rgba(122, 42, 109, 0.6);
}

table.tablefull{
  width:calc(100% - 10px);
}
td.w{
  background-color: white;

}


/*********************************************************************************************
div  Tabellen
**********************************************************************************************/

div.tabellefirst, div.tabellelast, div.tabellemittel{
  width:250px;
  text-align: right;
  border:1px solid black;
  background-color: rgba(255, 255, 255, 0.2);
  margin-right: -1px;
  margin-bottom: -1px;
  padding: 2px;
}
div.tabellekurz{
  width:75px;
}
div.nachlabelghost{
  margin-left: calc(20% + 9px);
}
div.tabellefirst
{
  clear: both;
}

div.linkshalbiert{
  width:50%;
  margin:0px;
  margin-left: 0px;
  padding: 0;
  clear:left;
}
div.rechtshalbiert{
  width:50%;
  margin:0px;
  margin-right: 0px;
  padding: 0;
  clear:right;
}
/*  Taberlle neu */
div.table{
  width:100%;
  background-color: lightgray;
  display:  table;
  margin-top: 1px;
  margin-bottom: 1px;

}
div.table .tr{
  display: table-row;
  width:100%;

}
div.table .tr .td,div.table .tr .th{
  display: table-column;
  float:left;
  width: auto;
  min-width: 120px;
  overflow: hidden;

}
div.table .tr .td  label,div.table .tr .th label{

  width: 100%;

}
div.table .tr .td  input,div.table .tr .th input, div.table .tr .td  select, div.table .tr .th select{
  width: 95%;
}
div.table .tr .th,div.table .th{
background-color:gray;
color:white;
}

}
/*******************************************************************************************************************************************
tooltip
*******************************************************************************************************************************************/


/* Tooltip container */
.tooltip {
    position: relative;
    /*display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 420px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/*******************************************************************************************************************************************
Tabmenü allgemein
*******************************************************************************************************************************************/
article.tabmenu{

}
div.tabnav{
  position: fixed;
width: calc(100% - 10em - 8px);
z-index: 1000;
background: white;
margin: 0;
padding: 0;
}
article.tabmenu {
    height: 100%;
}
article.tabmenu section {
  position: absolute;
display: none;
width: calc(100%);
min-height: calc(100% - 2em);
top: 30px;
background-color: #c5d2de;
padding-top: 30px;
}
div.tabnav div.nav {

    float: left;
    top: 0px;
    width: 154px;
    height: 29px;
    font-family: Verdana;
    font-size: 15px;
    margin: 0;
    background-color: #194b7d;
    border-radius: 15px 15px 0 0;
    border: solid #ffffff;
    border-width: 1px 1px 0 0;
    z-index: 0;
}


div.tabnav div a {
    display: block;
    margin: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
}
article.tabmenu section:target {
    color: #000000;
    background-color: #c5d2de;
    z-index: 100;
    display: block;
}
article.tabmenu section:target:before {
    color: #000000;
    background-color: #c5d2de;
    z-index: 100;
}

article.tabmenu section:target h2 a {
    color: #194b7d;
}
article.tabmenu section{

}

/*******************************************************************************************************************************************
Tabmenü automatenabwickeln
*******************************************************************************************************************************************/

article.infobox section {
    position:absolute;
    display: block;
    width: 100%;
    min-height: calc(100% - 7em);


    top:7em;
    background-color: #c5d2de;
}
article.infobox section h2 {
    position: absolute;
    left: 0;
    top: -30px;
    width: 254px;
    height: 29px;
    font-family: Verdana;
    font-size: 15px;
    margin: 0;
    background-color: #194b7d;
    border-radius: 15px 15px 0 0;
    border: solid #ffffff;
    border-width: 1px 1px 0 0;
    z-index: 0;
}
article.infobox section:nth-child(2) h2 {
    left: 250px;
    z-index: 1;
}

article.infobox section:nth-child(3) h2 {
    left: 300px;
    z-index: 2;
}
article.infobox section h2 a {
    display: block;
    margin: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
}
article.infobox section:target, article.infobox section:target h2 {
    color: #000000;
    background-color: #c5d2de;
    z-index: 1;
}

article.infobox section:target h2 a {
    color: #194b7d;
}
/*******************************************************************************************************************************************
Zellenmenü
*******************************************************************************************************************************************/
td.cellmenu p{
 margin: 0px;
 padding: 0px;
 float: inherit;

}
div.cellmenu{
  position:absolute;
  margin-top: 0px;
  border: 2px black solid;
  background:lightgray;
  opacity: 0;
  visibility: hidden;


}
td.cellmenu:hover div.cellmenu{
  visibility: visible;
  opacity: 1;
}
div.cellmenu ul li{
  list-style: none;
  margin-top: 2px;
  margin-bottom: 2px;

}
div.cellmenu ul li a:hover{
  background: green;

}

/*******************************************************************************************************************************************
Diverse
*******************************************************************************************************************************************/
.info, div.adresse{
  margin-right:4em;
  margin-left:4em;
  width: calc(100% - 8em);
}
.boxis{
  width:100%;
  border-bottom:2px solid var(--farbehaupt);
}
.leftbox{
  float: left;
  width: 50%;
  margin-right: -2px;
  border-right:2px solid var(--farbehaupt);
}
.rightbox{
  float:right;
  width: 50%;
}

/*******************************************************************************************************************************************
Liste standart start
*******************************************************************************************************************************************/
ul.start{
  float:left;
  width: 90%;
  margin-left: 5%;
  background:var(--farbehaupt);
}
.start li{
  margin-left:20px;
}
.start ul{
  margin-left:25px;
  list-style: disc;
}
/*******************************************************************************************************************************************
Kundenübersicht verkleinern/vergrößern
*******************************************************************************************************************************************/
div.listeverkleinervergroeßern{
  width:100%;
}
div.listeverkleinervergroeßern div.kurz{
  max-height: 100px;
  overflow: hidden;

}
div.listeverkleinervergroeßern div.kurz:target{
  max-height: inherit;


}

ul.artikelgruppen{
      clear: left;
    width: 96%;
    margin-left: 2%;


}
.artikelgruppen li{
  margin-left:20px;
  margin-top: 4px;
  background:var(--farbehaupt);
}

ul.artikelgruppen li ul{

    width: 96%;
    margin-left: 2%;


}
.artikelgruppen li  ul li{
  margin-left:20px;
  margin-top: 4px;
  background:var(--farbehaupt);
}


/*******************************************************************************************************************************************
Tabs mit radio-Buttons
*******************************************************************************************************************************************/
.tabbed figure {
   display: block;
   margin-left: 0;
   clear: both;
}
div.tabbed{
  width: 96%;
  margin-left: 2%;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
  padding: 20px;
  width: 100%;

  background: var(--farbemenühalb);
  line-height: 1.5em;
  letter-spacing: 0.3px;
  margin-left:2px;
}

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4 ,
#tab5:checked ~ figure .tab5 ,
#tab6:checked ~ figure .tab6  { display: block; }

.tabbed  nav{
  position: inherit;
  height: inherit;
  width: inherit;
  background: none;

}
.tabbed nav label {
   float: left;
   clear: none;
   margin: 0;

   padding: 5px 15px;
   border-radius: 15px 15px  0 0;

   background-color: #194b7d;
   color: #eee;
   width: 154px;
}

/*nav label:nth-child(1) { border-left: 1px solid silver; }*/
nav label:hover { background: hsl(210,50%,40%); }
nav label:active { background-color:  var(--farbemenu) ; }

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"],
#tab4:checked ~ nav label[for="tab4"],
#tab5:checked ~ nav label[for="tab5"],
#tab6:checked ~ nav label[for="tab6"] {
  background-color: var(--farbemenu) ;
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after,
#tab4:checked ~ nav label[for="tab4"]:after,
#tab5:checked ~ nav label[for="tab5"]:after,
#tab6:checked ~ nav label[for="tab6"]:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  background: white;
  left: 0;
}

/*******************************************************************************************************************************************
Formular breit
*******************************************************************************************************************************************/

table.formularbreit{
  width: 90%;
  margin-left: 5%;
}

table.formularbreit input{
  width: 90%;

}

/*******************************************************************************************************************************************
Spezialandwendungen
*******************************************************************************************************************************************/

div.auflistungeneinzel{
background: var(--farbefooter);
color: white;
font-size: 1em;
font-weight: bolder;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
div.auflistungeneinzel:hover{
  background: var(--farbehaupt);
}
div.auflistungeneinzel a{
  color: white;
  text-decoration: none;
}