.fonticon {font-family: toff,icons,Arial,Verdana;}






  /*flexdirction v. */
  .flexbox {width:100%;
            /*display:flex; flex-wrap:wrap; width:100%; height:100%; border:1px solid green;*/
            display:flex; flex-direction:column; justify-content: flex-start; flex-wrap: wrap;
            align-items:space-between;
   }

  .f-column {flex-direction: column;}
  .f-row {flex-direction: row;}

  .fc-mittig {align-items:center;}


  .f-anfang {align-items: flex-start;}
  .f-ende {align-items: flex-end;}


  .fc-stretch {
        align-content: space-around;
        }
  .f-stretch {
        align-items: baseline;
  }

  .f-justify {
        justify-content: space-between;
  }

  .container {background-image:linear-gradient(90deg, rgba(var(--mainhlcolor),0.6) 3px, rgba(var(--mainhlcolor),0) 3px),
                               linear-gradient(120deg, rgba(var(--maincontainercolor),0.8) 0%, rgba(var(--maincontainercolor),0.85) 50%, rgba(var(--maincontainercolor),0.75) 100%);
              background-attachment: scroll;
              color:rgb(var(--darktextcolor));
              font-size:1em;
              line-height:1.4em;
              padding: 1em 1em;
              margin: 0.6em;
              border-radius: .2em 1em .2em .2em;
              box-shadow: 0em 0em 0.75em #2F2F2F;
              -moz-transition:all 200ms backward;
              -webkit-transition:all 200ms backward;
              -o-transition:all 200ms backward;
              -transition:all 200ms backward;
              flex:auto;
              overflow: auto;
              }


  .container .pagetopic {
                        flex:auto;
                        }

             .topic {font-size:1.2em;
                     padding-left:1em;
                     font-weight:bold;
                     border-bottom:1px solid rgb(var(--mainhlcolor));
                     }

             .topiccontent  {font-size:0.9em;
                             padding-left:0.4em;
             }

             .positive {background-image:linear-gradient(90deg, var(--cb-backgroundpositive) 0%,  var(--cb-backgroundpositive) 100%);
             }

             .warning   { background-image:linear-gradient(90deg, var(--cb-backgroundwarning) 0%,  var(--cb-backgroundwarning) 100%);
             }

             .negative   {background-image:linear-gradient(90deg, var(--cb-backgroundnegative) 0%,  var(--cb-backgroundnegative) 100%);
             }

  .container table {
              color:rgb(var(--darktextcolor));
              font-size:1em;
              margin:1em 0em;
              }

  .container .listelement { font-size:1.2em;
                            margin-top:0.5em; margin-bottom:0.5em;
                            background-image:linear-gradient(0deg, rgba(var(--InfoBoxBackColor:),0.4) 100%, rgba(var(--InfoBoxBackColor:),0.35) 50%, rgba(var(--InfoBoxBackColor:),0.25) 0%);
                            display:flex;

                            }





  .input-container {
              flex: 1;
  }

  .zoombutton {
              text-align:center;
              position: fixed;
              top:var(--topmenueheight);
              right:20px;
              width:36px;
              background-image:linear-gradient(90deg, rgba(var(--mainhlcolor),0.6) 3px, rgba(var(--mainhlcolor),0) 3px),
                               linear-gradient(120deg, rgba(var(--maincontainercolor),0.8) 0%, rgba(var(--maincontainercolor),0.85) 50%, rgba(var(--maincontainercolor),0.75) 100%);
              color:rgb(var(--darktextcolor));
              font-size:1em;
              line-height:1.4em;
              padding: 0.5em 0.5em;
              border-radius: 0em 0em 0.2em 1em;
              box-shadow: 0em 0em 0.75em #2F2F2F;
              -moz-transition:all 200ms backward;
              -webkit-transition:all 200ms backward;
              -o-transition:all 200ms backward;
              -transition:all 200ms backward;
              }

/*Formulare*/



  input[type=submit]{
             color:rgb(var(--darkbordercolor));
             border-radius: 5px;
             font-size:1em;
             box-shadow: 0 0 .5em rgba(var(--mainhlcolor),0.7);
             background-color:rgba(var(--mainhlcolor),0.7);
             text-align:center;
             vertical-align:middle;
             cursor:pointer;  
             }

  input[type=date], input[type=text], input[type=file], input[type=datetime-local]{
            font-family:var(--textbodyart);
            -webkit-transform-style: none;
            -webkit-appearance: none;
            appearance: none;
            border-left: 3px solid rgba(var(--mainhlcolor),0.7);
            border-bottom: 1px solid rgba(var(--mainhlcolor),0.7);
            border-right:0px;
            border-top:0px;
            outline: none;
            width: 98%;
            cursor: pointer;
            height: 1.8em;
            padding-left: 0px;
            background-color:rgba(var(--darkbgcolor),0.1);
            background-image:rgba(var(--mainhlcolor),0.7) 95%);
            color: rgb(var(--darktextcolor));
            font-size: 1em;
            font-weight:bold;}

  input[type=submit]:hover {
             box-shadow: 0 0 .5em rgba(var(--mainhlcolor),0.9);
             background-color:rgba(var(--mainhlcolor),0.9);
             cursor:pointer;
  }


  /*input[type=text],input[type=number], input[type=text]:focus, input[type=text]:active{
                -moz-appearance: none;
                -webkit-appearance: none;
                -moz-transition:all 200ms backward;
                -webkit-transition:all 200ms backward;
                -o-transition:all 200ms backward;
                transition:all 200ms backward;

                appearance: none;
                border-left: 3px solid rgba(var(--mainhlcolor),0.7);
                border-bottom: 1px solid rgba(var(--mainhlcolor),0.7);
                border-right:0px;
                border-top:0px;
                outline: none;
                width: 100%;
                cursor: pointer;
                height: 1.8em;
                padding-left: 0.5em;
                background-color:rgba(var(--darkbgcolor),0.1);
                color: rgb(var(--darktextcolor));
                font-size: 1em;
                font-weight:bold;
                padding-right:0px; }*/

  input::-ms-expand {display: none;}
  input:focus::-ms-value {
        background-color: transparent;
  }

  .select-wrapper {  -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            border-left: 3px solid rgba(var(--mainhlcolor),0.7);
            border-bottom: 1px solid rgba(var(--mainhlcolor),0.7);
            border-right:0px;
            border-top:0px;
            outline: none;
            width: 100%;
            cursor: pointer;
            height: 1.8em;
            padding-left: 10px;
            background-color:rgba(var(--darkbgcolor),0.1);
            background-image:linear-gradient(315deg, rgba(var(--mainhlcolor),0.7) 0.5em, transparent 0.5em);
            color: rgb(var(--darktextcolor));
            font-size: 1em;
            font-weight:bold;}

  .select-wrapper::-ms-expand {display: none;}
  .select-wrapper:focus::-ms-value {
        background-color: transparent;
  }

  .select-wrapper optgroup {font-size: 0.8em;}

  /*.select-wrapper option {
        font-size: 1rem;
        color: #2F2F2F;
        border-radius: .2em 1em .2em .2em;
        box-shadow: 0em 0em 0.75em #2F2F2F;
        }*/

   .versionsinfo {
        align-self: flex-end;
              }

   .inputshow { font-size:1em;
                font-weight:bold;

              }



   fieldset .stat {
            font-size:1.8em;
            color: rgb(var( --textmaincolor));
            text-align:center;
            line-height:1.3;}


   .kennzeichen {

            position:relative;
            margin:0.2em auto;
            background-color:#FFFFFF;
            /*border:0.1em solid #2F2F2F;*/
            font-size:1.1em;
            font-family:din1451m;
            width:6.24em;
            height:1.32em;
            color:#2F2F2F;
            font-weight:bold;
            border-radius: 0.1em;
            text-align:right;
            padding-right:.3em;
            box-shadow: inset 0 0 0.1em #2F2F2F,0 0 0 0.1em #2F2F2F,0 0 0 0.15em #FFFFFF, 0 0 0.5em #616161;
            text-shadow: 1em #DEDEDE;
            z-index:0;
            letter-spacing: 0.04em;

   }
   .kennzeichen::before{
          content:'';
          position:absolute;
          z-index:-1;
          top:0;
          left:0;
          bottom:0;
          width:0.545em;
          background-color:#0060FF;
          color:#FFFFFF;
          border-radius:0.1em 0 0 0.1em;
   }
   .kennzeichen::after{
          content:'D';
          position:absolute;
          z-index:1;
          top:0;
          left:0;
          bottom:0;
          width:0.545em;
          color:#FFFFFF;
          font-size:0.6em;
          font-weight: normal;
          transform: translateY(+35%)
  }



  .hr1 {
      flex:auto; border-bottom:1px solid rgb(var(--lightbordercolor)); width:100px; height:1px; margin-top:0.5em; margin-bottom:0.3em; align-self: center;

  }

  .VolPic {
      max-width: 100%;
      height: auto;
      transition: 150ms max-width;
      border:0.1rem solid rgb(var(--textmaincolor));
      border-radius:0.2em;
  }

  .VolPic:hover {
      max-width:300%;
      height:auto;
      z-index:9999 !important;
      border-color:rgb(var(--darkbordercolor));
  }

  .dragfield {
     border:1px dashed;
     border-color: var(--light_text_color);
     background-color: rgba(0, 0, 0, 0.1);
  }