/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *
  Goverment-Part */
  body, html {
    height: 100%;
    margin: 0;
  }
  
  .bg {
    /* The image used */
   
    background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 255, 255, 0.45), 
      rgba(255, 255, 255, 0.45)
    ),
    /* bottom, image */
    url("/application/config/grafik/background_start.png");
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
  }
  

 /* gov-ENDE */
 /* Grundlayout für SELFHTML-Beispiele */
 .aufgabenbox{
    background-color:lightcyan;
    border-radius: 5px;
    box-shadow:0px 1px 2px rgba(0,0,0,0.05);
    text-align:center;
  }
  .weekview_h1{
    flex: auto;
    background:white;
  } 
  @media(min-width: 320px) {
      div.h2 {
          font-size: 140%;
      }
  }
  
  @media(min-width: 400px) {
      div.h2 {
          font-size: 180%;
      }
  }
  
  @media(min-width: 480px) {
      div.h2 {
          font-size: 110%;
  
      }
  }
  
  @media(min-width: 560px) {
      div.h2 {
          font-size: 120%;
      }
  }
  
  @media(min-width: 640px) {
      div.h2 {
          font-size: 140%;
      }
  }
  
  @media(min-width: 720px) {
      div.h2 {
          font-size: 200%;
      }
  }
   div.flex-container {  
    display: flex;
    flex-direction: column;
  }
  
  /* große Viewports */
  @media all and (min-width: 40em) {
  div.flex-container {
      flex-direction: row;
    
    }
  }
  #audio_with_controls{
   width:100%;
  }
  #audio_with_controls:focus
  {
   outline: none;
   box-shadow: 0px 0px 2px #0066ff;
  
  }
  section.flex-item {
    flex: auto;
   
    margin: .5em;
    padding: .5em;
  
  }
  /* Ende Flexcontainer
  /* Sets the containers height and width */
  #upload_timer{
    margin-top:5%;
  }
  .base-timer {
    position: relative;
    height: 100px;
    width: 100px;
    margin:auto;
  }
  
  /* Removes SVG styling that would hide the time label */
  .base-timer__circle {
    fill: none;
    stroke: none;
  }
  
  /* The SVG path that displays the timer's progress */
  .base-timer__path-elapsed {
    stroke-width: 3px;
    stroke: #777777;
  }
  .base-timer__label {
    position: absolute;
    
    /* Size should match the parent container */
    width: 100px;
    height: 240px;
    
    /* Keep the label aligned to the top */
    top: 0;
    
    /* Create a flexible box that centers content vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* Sort of an arbitrary number; adjust to your liking */
    font-size: 20px;
  }
    /* Fakturierung */
    #counter {
      width: 50%;
      color:#6c757d;
      border: 2px solid #6c757d;
      border-radius: .3rem;
      padding: 5px;
      text-align: center;
      transition: .3s;
      margin: 0 auto;
    }
    #counter.pauseInterval {
      border-color: red;  
    }
    #loader {
      margin: auto;
      z-index: 1;
      width: 20px;
      height: 20px;
      border: 10px solid rgba(242,242,242,1);
      border-radius: 50%;
      border-top: 10px solid rgba(242,242,242,1);
      width: 60px;
      height: 60px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      position:relative;
      margin-top:-80px;
    }
    #loader_remail {
      position: absolute;
      left: 80%;
      top: 70%;
      z-index: 1;
      width: 20px;
      height: 20px;
      margin: -75px 0 0 -75px;
      border: 10px solid #f3f3f3;
      border-radius: 50%;
      border-top: 10px solid #bfb1d5;
      width: 40px;
      height: 40px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Add animation to "page content" */
    .animate-bottom {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }
    
    @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 } 
      to { bottom:0px; opacity:1 }
    }
    
    @keyframes animatebottom { 
      from{ bottom:-100px; opacity:0 } 
      to{ bottom:0; opacity:1 }
    }
    
    #myDiv {
      display: none;
      text-align: center;
    }
    .hsc_rueckmeldungen{
      border: 1px solid #ccc;
    }
    .backgroundgreen {
      background-color: #adddcf;
    }
    
     /*Datepickerfenster immer im Vordergrund */
     #ui-datepicker-div {
      z-index: 9999999!important;
    }
    .road_activeblink {
      
      -webkit-animation: NAME-YOUR-ANIMATION 2s infinite;  /* Safari 4+ */
      -moz-animation: NAME-YOUR-ANIMATION 2s infinite;  /* Fx 5+ */
      -o-animation: NAME-YOUR-ANIMATION 2s infinite;  /* Opera 12+ */
      animation: NAME-YOUR-ANIMATION 2s infinite;  /* IE 10+, Fx 29+ */
    }
    
    @-webkit-keyframes NAME-YOUR-ANIMATION {
      0%, 49% {
        background-color:#fed1be;
      }  
      50%, 100% {
        background-color:none;
        }
      }
     .loginpagex{
       background-image: url(/application/config/grafik/cartoonbackground.png);
       background-position: center;
       background-repeat: no-repeat;
       background-size:contain;
    margin-top:80px;
     }
     .holalo-body {
      /*background-image: none;
      background: #FFF url(/assets/css/body.png);
      background-image: url(/assets/css/body.png);*/
      min-height: 100%;
      height:auto !important;
      height:100%;
      font-family: Roboto Condensed,Roboto,Helvetiva,Arial,sans-serif!important;
      background-color: rgba(242,242,242,1);
    }
    .audioplayer
  {
    max-height:500px; 
    border: 0.3px solid; 
    border-color:lightgray; 
    border-radius:20px;
  }
  .audioplayer:focus
  {
   outline: none;
   box-shadow: 0px 0px 2px #0066ff;
  
  }
    a {
     /* color:white*/
      text-decoration: none;
    }
    a:hover {
      color:blue;
      text-decoration:none;
    }
    .holalobutton_big{
      width:35px;
    }
    /* drop file zone dateiupload */
    input[type="file"] {
      display: nonex;
    }
    .box__input{
      height:100px;
      align-items:center;
      display:flex;
    }
    .box.is-uploading .box__input {
      visibility: hidden;
    }
    .box.is-uploading .box__uploading {
      display: block;
    }
    .box.is-uploading .box__info {
      display: none;
    }
    .box__dragndrop,
    .box__uploading,
    .box__success,
    .box__error {
      display: none;
    }
    .box.has-advanced-upload {
      background-color: white;
      /*outline: 2px dashed white;*/
      outline-offset: -10px;
    }
    .box.has-advanced-upload .box__dragndrop {
      display: inline;
    }
    .box.is-dragover {
      background-color:#adddcf;
    }
    #drop_file_zone {
        background-color: #EEE;
        border: #999 5px dashed;
        width: 290px;
        height: 200px;
        padding: 8px;
        font-size: 18px;
    }
    #drag_upload_file {
      width:50%;
      margin:0 auto;
    }
    #drag_upload_file p {
      text-align: center;
    }
    #drag_upload_file #selectfile {
      display: none;
    }
    /* navbar mobile */
    /* The sidepanel menu */
    .sidepanel {
      /*height: 250px; /* Specify a height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 1; /* Stay on top */
      top: 35px;
      left: 0;
      background-color:#f0e0a2;
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 30px; /* Place content 60px from the top */
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
    }
    
    /* The sidepanel links */
    .sidepanel a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 20px;
      color:#313131;
      display: block;
      transition: 0.3s;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidepanel a:hover {
      color: #f1f1f1;
    }
    
    /* Position and style the close button (top right corner) */
    .sidepanel .closebtn {
      position: absolute;
      top: -15px;
      right:5px;
      font-size: 36px;
      margin-left: 189px;
    }
    
    /* Style the button that is used to open the sidepanel */
    .openbtn {
      font-size: 24px;
      cursor: pointer;
      background-color: unset;
      color: black;
      padding: 3px 15px;
      border: none;
      margin-left: -15px;
    }
    .openbtn:hover {
      background-color: #f0e0a2;
    }
    .hoverlabel:hover {
      background-color: #f0e0a2;
      cursor: pointer;
    }
    /* icons */
    .customer-edit-icon
    {
        background:url(/assets/edit_blau.png) no-repeat;
        cursor: pointer;
        width: 20px;
        height:20px;
    
        border: none !important;
        padding:0px !important;
        padding-bottom:0px !important;
      margin-left:5px;
      margin-top: 7px;
        display: block;
    }
    .customer-read-icon
    {
        background:url(/assets/info_green.png) no-repeat center;
        cursor: pointer;
        width: 20px;
        height:20px;
        float:right;
        border: none !important;
        padding:0px !important;
        padding-bottom:0px !important;
      margin-left:5px;
      margin-top: 6px;
        display: block;
    }
    .select-control-lg {
      border: none;
      background-color: #e8e7e5;
      text-align-last: center;
      width: 100%;
      height: 50px;
      color:darkblue;
    }
    .select-control-textarea {
      border: none;
      background-color: #e8e7e5;
      width: 100%;
      color:darkblue;
      padding:10px;
    }
    /* Login */
    input.form-control-lg {
      border: none;
      background-color: #e8e7e5;
      
    }
     input[type="checkbox"] {
      width: 20px;
      height: 20px;
      margin-top: 5px;
      margin-right: 5px;
      color:green;
      vertical-align: middle;
      position: relative;
      bottom: 3px;
      margin-bottom: 5px;
    
    }
    input[type="checkbox"] + label::before {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      border: 2px solid #8cad2d;
      background-color: #fff;
      display: block;
      content: "xx";
      float: left;
      margin-right: 5px;
    }
    input[type="checkbox"]:checked+label::before {
      box-shadow: inset 0px 0px 0px 3px #fff;
      background-color: #8cad2d;
    }
    .div.flexigrid {
      font-size: 16px;
    }
    .road_artikeltext {
      font-size: x-large;
      font-weight:bold;
      color:#777777;
    }
    .road_inputfield {
      font-size: large;
    }
    .road-form-control{
      display: block;
      width: 100%;
      height: calc(1.5em + .75rem + 2px);
      padding: .375rem .75rem;
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      text-align:center;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    .road-form-display-as-box{
      font-size: x-large; 
    }
    .field-proof-sum-head{
      padding: 10px; 
    }
    .field-proof-sum-col{
      padding-right: 10px;
      padding-left: 10px;  
    }
    .notiz-button:focus{
     box-shadow:none;
    }
    .notiz-box{
      font-size: medium;
      font-weight: 500;
      background-color: floralwhite;
      font-style:italic;
      margin-bottom: 5px;
      margin-top: -5px;
      padding-bottom:20px;
      padding-left:20px;
      padding-right: 20px;
      margin-left:10px;
      margin-right:10px;
    
    }
    .ptogtitle_office {
      padding: unset;
      margin-bottom: -15px;
    }
    .ptogtitle_tour {
      padding: 2px;
    }
    div#circle {
      color: black;  
      background: gainsboro; 
      width: 30px; 
      height: 30px;
      text-align: start;   
      margin-top: 0px;
      border-radius: 30px;
      border-color:transparent;
      border-style:solid; 
     /* padding-left: 7px;*/
      padding-top: 2px;
      display: inline-block;
    
    }
     .kalenderblatt {
      position:relative;
      margin:10px;
      margin-top: 15px;
      padding:0;
      width:10em;
      text-align:center;
     /* border:2px solid #999;*/
      background: white;
      /*font: 50.01% tahoma , arial,helvetica, sans-serif*/
     } 
     .kalenderblatt span {
      display:block;
     }
     .kalenderblatt span.dd , .kalenderblatt span.mm { /* Jahr  Tag  Monat*/
      line-height:20px;
     }
     
     .kalenderblatt span.jj {
      background:red;
      color:#fff;
      line-height:25px;
      font-weight:400;
     }
      
     .kalenderblatt span.tt { /* Tag */
      line-height:30px;
      font-size:2em;
      font-weight: bold;
      padding-top: 13px;
      padding-bottom: 3px;
     }
     .kalenderblatt span.mm {
      padding-bottom: 10px;
      font-weight:500;
     }
     .kalenderblatt span.zeichen  {  
      position:absolute;
      left:-999px;
    }
    .table-header-brown{
      background-color: #777777;
      color:white;
      font-size: small;
      
     }
    .table-header{
      background-color: #abe1fd;
      color:#777777;
      font-size: medium;
      margin-left: 1px; 
      margin-right: 1px; 
      padding-left: 3px; 
      margin-top: 5px;
     }
     .lalo-header{
      height:70px;
      padding-right:0px;
      padding-left:0px;
      /* background-color: rgba(242,242,242,1);*/
      background: #FFF url(/assets/css/body.png);
      background-image: url(/assets/css/body.png);
      position: fixed;top: 0;
      z-index: 3;
     }
     .lalo-header-road{
      height:70px;
      padding-right:0px;
      padding-left:0px;
      background-color: #adddcf;
      position: fixed;top: 0;
      z-index: 3;
     }
     .lalo-road-navlogo {
      display:none;
    }
     .startpage {
      height:140px;
    }
     tr.klickrow_road {
      font-weight:500;
    }
    .lalo-navigation {
     background:white;
     height: 40px;
     padding-top: 0rem;
     padding-bottom: 0rem;
     position:fixed;
     top:70px;
     z-index:3;
     width: 100%;
    }
    .lalo-navigation_road {
      background: white;
      height: 41px;;
      padding-top: 0rem;
      padding-bottom: 0rem;
      position:fixed;
      top:70px;
      z-index:3;
      width: 100%;
      display:block;
     }
     .lalo-navigation_login {
      /*background: gainsboro;*/
      height: 35px;;
      padding-top: 0rem;
      padding-bottom: 0rem;
      position:fixed;
      top:70px;
      z-index:3;
      width: 100%;
      display:block;
     }
    .lalo-main {
      padding-left: 2%;
      padding-right: 2%;
      padding-top: 1%;
     /* padding-bottom: 0.1rem; */
      /* background-color: white; */
      margin-top: 110px;
     }
     .lalo-main-road {
      padding-left: 15px;
      padding-right: 15px;
     /* padding-bottom: 0.1rem; */
      /* background-color: white; */
      margin-top: 110px;
     }
     .preselect {
      /* background: rgba(73, 140, 182, 1); */
      background: rgba(219,232,240,1);
      padding-left: 33px;
     }
     .tools a img:hover {
       border: 0px solid transparent;
       border-radius: 5px;
       background-color: #f0e0a2;
     }
     .tools img:hover {
      border: 0px solid transparent;
      border-radius: 5px;
      background-color: #f0e0a2;
    }
      a:hover{
        color:green;
      }
      a.selected {
        color: darkblue;
        text-decoration: none;
      }
      a:hover div#circle {
          background: lightgreen; 
      }
      a div#circle {
        color: black;  
        /*background: grey; */
        width: 30px; 
        height: 30px;
        text-align: start;   
        margin-top: 0px;
        border-radius: 30px;
        border-color:black;
        border-style:solid; 
       /* padding-left: 7px;*/
        padding-top: 2px;
        display: inline-block;
      
    }
    a div#circle_big {
      color: black;  
      background: white; 
      width: 60px; 
      height: 60px;
      text-align: start;   
      margin-top: 5px;
      margin-right: 5px;
      border-radius: 300px;
      border-color:green;
      border-style:double;
      font-size: xx-large;
      font-weight:600; 
      text-align:center;
      display: inline-block;
      -moz-border-radius: 10px; /* Firefox alt */ 
    }
    a:hover div#circle_big {    
      background: lightgreen; 
    }
    .btn-login{
      background-color: #adddcf;
      border-color: #adddcf;
    }
    .btn-blue{
      background-color: #abe1fd;
      border-color: #abe1fd;
    }
    .btn-green {
      background-color: #adddcf;
    }
    .btn-pink {
      background-color: #bfb1d5;
    }
    .btn-yellow {
      background-color: #f0e0a2;
    }
    
    .btn-outline-primary {
      background-color: #adddcf;
      color: #313131;
      border-color: #adddcf;
    }
    
    .btn-outline-primary:hover {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    
    .btn-outline-primary:focus, .btn-outline-primary.focus {
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }
    
    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
      color: #007bff;
      background-color: transparent;
    }
    
    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    
    .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }
    /* Delete Button */
    .btn-outline-danger {
      background-color:lightcoral;
      color: white;
      border-color: lightcoral;
    }
    
    .btn-outline-danger:hover {
      color: #fff;
      background-color:red;
      border-color: red;
    }
    
    .btn-outline-danger:focus, .btn-outline-danger.focus {
      box-shadow: 0 0 0 0.2rem white
    }
    
    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
      color: grey;
      background-color: transparent;
      border-color: grey;
    }
    
    .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
    .show > .btn-outline-danger.dropdown-toggle {
      color: #fff;
      background-color: red;
      border-color: red;
    }
    
    .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-danger.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }
    /* Startdiv */
    .flexigrid div.tDiv{
        background-color:none;
    }
    .btn-aktiv {
      color: black;
      border-color: darkgrey;
     
    }
    .btn-aktiv-focus, .btn-aktiv.focus {
      color: white;
      background-color:  #777777;
      border-bottom-style: none;
    }
    .btn-ghostwhite {
      color:#777777;
      border-color: darkgrey;
      background-color: ghostwhite;
    }
    .btn-ghostwhite-notizactive {
      color:#777777;
      border-color: darkgrey;
      background-color: ghostwhite;
      
    }
    .btn-ghostwhite-notizactive:before {
      color:#777777;
      border-color: darkgrey;
      background-color: ghostwhite;
      content: '1';
        color: white; 
        width: 20px;
        height: 20px;
        background: #777777;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        position: absolute;
        right: 10px;
        top: -3px;
    }
    .btn-ghostwhite-notizactive-customer {
      color:#777777;
      border-color: darkgrey;
      background-color: ghostwhite;
      
    }
    .btn-ghostwhite-notizactive-customer:before {
      color:#777777;
      border-color: darkgrey;
      background-color: ghostwhite;
      content: '+';
        color: white; 
        width: 20px;
        height: 20px;
        background: #777777;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        position: absolute;
        left: -10px;
        top: -4px;
    }
    
    .btn-ghostwhite:hover{
      color: #313131;
      border-color: darkgrey;
      background-color: #adddcf;
    }
    
    .btn-ghostwhite-focus, .btn-aktiv.focus {
      color: white;
      background-color:  #777777;
      border-bottom-style: none;
    }
    .btn-liefertage-focus, .btn-aktiv.focus {
      color: white;
      background-image:linear-gradient(160deg, rgba(17, 179, 120, 1) 30%, rgba(17, 179, 120, 1) 70%);
      border-bottom-style: none;
    }
    
      .btn-neuanlage:hover {
        color: green;
        background-color: lightgreen;
        border-color: #28a745;
      }
      
      .btn-neuanlage {
        color: #777777;
        background-color: #f0e0a2;
        border-color: #f0e0a2;
      }
      
      .btn-neuanlage:focus, .btn-neuanlage.focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      
      .btn-neuanlage.disabled, .btn-neuanlage:disabled {
        color: #28a745;
        background-color: transparent;
      }
      
      .btn-neuanlage:not(:disabled):not(.disabled):active, .btn-neuanlage:not(:disabled):not(.disabled).active,
      .show > .btn-neuanlage.dropdown-toggle {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
      }
      
      .btn-neuanlage:not(:disabled):not(.disabled):active:focus, .btn-neuanlage:not(:disabled):not(.disabled).active:focus,
      .show > .btn-neuanlage.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      .btn-ausgeliefert {
        color: white;
        background-color: blue;
        border-color: #28a745;
        padding-left: 10px;
        padding-right: 10px;
      }
      
      .btn-ausgeliefert:hover {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
      }
      
      .btn-ausgeliefert:focus, .btn-ausgeliefert.focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      
      .btn-ausgeliefert.disabled, .btn-neuanlage:disabled {
        color: #28a745;
        background-color: transparent;
      }
      
      .btn-ausgeliefert:not(:disabled):not(.disabled):active, .btn-ausggeliefert:not(:disabled):not(.disabled).active,
      .show > .btn-ausgeliefert.dropdown-toggle {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
      }
      
      .btn-ausgeliefert:not(:disabled):not(.disabled):active:focus, .btn-ausgeliefert:not(:disabled):not(.disabled).active:focus,
      .show > .btn-ausgeliefert.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      .listtitle {
        font-size: 1rem;
        font-weight: 400;
      }
      .selectableHeader {
        font-size: medium;
        font-weight: 400;
        margin-bottom: 0px;
        
      }
      .boxadmin{
        background-color: #fed1be;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
        padding-top: 5px;
      }
      .boxsystemDiv{
        /*  border-radius: 5px;*/
         
          border: 0.2px solid #ccc;
      }
          
      .boxsystem{
        background-color:#adddcf;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
        padding-top: 5px;
      }
      .flexigrid div.mDivOrders {
        /*	background:url(images/wbg.gif) repeat-x top;*/
         /* background-color: #e8e7e5; */
         /* border:1px solid #ccc;*/
          border-radius: 5px 5px 0px 0px;
          border-bottom:0px;
          border-color: #adddcf;
          font-weight:600;
          display:block;
          overflow:hidden;
          white-space:nowrap;
          position:relative;
        }
        .flexigrid div.mDivOrders div {
          /*padding:6px;*/
          /*padding:2px;*/
          white-space:nowrap;
        }
        .flexigrid div.mDivOrders div.ptogtitle {
          position:absolute;
          top:4px;
          right:3px;
          padding:0px;
          height:32px;
          width:28px;
          overflow:hidden;
         
          cursor:pointer;
        }
        .flexigrid div.mDivOrders div.ptogtitle:hover {
          background-position:left -2px;
          border-color:#bbb;
        }
        .flexigrid div.mDivOrders div.ptogtitle span {
          display:block;
         
          width:28px;
          height:20px;
          background:url(/assets/shopping-cart-grey.png) no-repeat center ;
        }
        .flexigrid div.mDivOrders div.ptogtitle.vsble span {
          background:url(/assets/shopping-cart-grey.png) no-repeat center;
        }
      .flexigrid div.mDivUsers{
        background-image:linear-gradient(160deg, lightcoral 30%, red 70%);
        height: 40px;
        color: white;
        padding-top: 5px;
      }
    
      .lieferauftraegebox{
        background-color:white;
        color: #777777;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      div.row.roadtopbox {
        background-color:ghostwhite;
        color: #313131;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.5);
        margin: 8px;
      
      }
      div.flexigrid.roadtourbox {
        background-color:#777777;
        color: #313131;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.5);
        margin: 8px;
        margin-top: 15px;
        padding: 3px;
        
      }
      div.flexigrid.roadtourboxInactive{
        background-color:#777777;
        color: #313131;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.5);
        margin: 12px;
      }        
      .loginpage{
        padding-top:100px;
      } 
      .kundenboxinfo{
        background-color:white;
        color: #777777;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .kundenboxinfo_sub{
        background-color:white;
        color: #777777;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.3);
      }
      .kundenbox{
        background-color: #abe1fd;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .sortelement{
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.3);
      }
      .artikelbox{
        background-color: #f0e0a2;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .tourenbox{
        background-color: #f0e0a2;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .fakturabox{
        background-color: #bfb1d5;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .lieferungbox{
        background-color: #adddcf;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .selectoffen{
        background-color: #f0e0a2;
        background-color:#adddcf;
      }
      .selectboxlabel{
        font-size: 0.9rem;
      }
      .auswertungenbox{
        background-color: #fed1be;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .werbungbox{
        
        background-color: lavender;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .werbungboxminwidth{
        min-width: 1000px;
        background-color: lavender;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .flexigrid div.mDivKunden{
        color: #777777;
        padding-top: 5px;
      }
      .flexigrid div.mDivKundenColor{
        background-color: #abe1fd;
        color: #313131;
        margin-top: 5px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .flexigrid div.mDivLiefertageColor{
        background-color: #adddcf;
        color: #313131;
        margin-top: 5px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      }
      .flexigrid div.mDivArtikel{
        background-image:linear-gradient(160deg, khaki 30%, Gold 70%);
        height: 40px;
        color: darkslategray;
        padding-top: 5px;
        text-align: center;
      }
      .flexigrid div.mDivTouren{
        background-image:linear-gradient(160deg, NavajoWhite 30%, SandyBrown 70%);
        height: 40px;
        color: darkslategray;
        padding-top: 5px;
      }
      .flexigrid div.mDivLieferung{
        background-image:linear-gradient(160deg, rgba(17, 179, 120, 1) 30%, rgba(17, 179, 120, 1) 70%);
        height: 40px;
        color: darkslategray;
        padding-top: 5px;
      }
      .mDivLieferung{
        background-color: #abe1fd;
        border-radius: 20px;
      }
      .mDivLogin{
       /*background-color: #abe1fd;*/
       width: 460px;
       padding: initial;
      margin:0 auto;
      margin-top: 5%;
      }
      .mDivNotiz{
        background:skyblue;
        height: 40px;
        color: darkslategray;
        padding-top: 5px;
        margin-top: 5px;
      }
      .mDivNotizRoad{
        height: 40px;
        color: darkslategray;
        padding-top: 5px;
        margin-top: 5px;
      }
      .mDivroadLieferposition{
        background:#777777;
        height: 40px;
        color: white;
        padding-top: 5px;
        margin-top: 5px;
      }
      .flexigrid .edit-icon-road
    {
        background:url(/assets/edit_road.png) no-repeat;
        cursor: pointer;
        width: 20px;
        height:20px;
        float:right;
        border: none !important;
        padding:0px !important;
        padding-bottom:0px !important;
        margin-left:5px;
        display: block;
    }
    
     .flexigrid div.mDivSelectableGreyOffice  {
        background: ghostwhite;
        border:1px solid #ccc;
        /*border-bottom:0px;*/
        padding-top: 5px;
        font-weight:600;
        display:block; 
        height: 43px;
      }
      .flexigrid div.mDivSelectableInactive  {
        background: ghostwhite;
        /*border-bottom:0px;*/
        padding-top: 5px;
        font-weight:600;
        display:block; 
        padding-bottom: 5px; 
      }
      .flexigrid div.mDivSelectable, .flexigrid div.mDivSelectableGrey  {
        /*	background:url(images/wbg.gif) repeat-x top;*/
          background: white;
          border:1px solid #ccc;
          /*border-bottom:0px;*/
          border-top:0px;
          font-weight:600;
          display:block; 
        }
        .flexigrid div.mDivSelectable div, .flexigrid div.mDivSelectableGrey div {
          padding:3px;
          white-space:nowrap;
        }
        .flexigrid div.mDivSelectable div, .flexigrid div.mDivSelectableRoadInactive div {
          white-space:nowrap;
        }
        
        .flexigrid div.mDivSelectableRoad {
         /* background: rgb(224, 224, 224);*/
          font-weight:600;
          display:block;
          overflow:hidden;
          white-space:nowrap;
          position:relative;
        }
        .flexigrid div.mDivSelectable div.ptogtitle_tour {
          position:absolute;
          top:4px;
          right:3px;
          padding:0px;
          height:16px;
          width:16px;
          overflow:hidden;
         
          cursor:pointer;
        }
        .flexigrid div.mDivSelectable div.ptogtitle {
          position:absolute;
          top:4px;
          right:3px;
          padding:0px;
          height:16px;
          width:16px;
          overflow:hidden;
          border:1px solid #ccc;
          cursor:pointer;
        }
        
        .flexigrid div.mDivSelectable div.ptogtitle:hover {
          background-position:left -2px;
          border-color:#bbb;
        }
        .flexigrid div.mDivSelectable div.ptogtitle span {
          display:block;
          border-left:1px solid #eee;
          border-top:1px solid #fff;
          border-bottom:1px solid #ddd;
          width:14px;
          height:14px;
          padding-top:10px;
          background:url(/assets/up.png) no-repeat center;
        }
        .flexigrid div.mDivSelectable div.ptogtitle.vsble span {
          margin-top:10px;
          background-color:inherit;
          background:url(/assets/dn.png) no-repeat center;
        }
        .flexigrid table tr.hDiv th div.desc {
          background-color:inherit;
        }
        .flexigrid div.mDivSelectable div.ptogtitle_road {
          position:absolute;
          top:4px;
          right:3px;
          padding:0px;
          height:32px;
          width:28px;
          overflow:hidden;
          /*border:1px solid #ccc;*/
          cursor:pointer;
        }
        .flexigrid div.mDivSelectable div.ptogtitle_road:hover {
          background-position:left -2px;
          border-color:#bbb;
        }
        .flexigrid div.mDivSelectable  div.ptogtitle_road span {
          display:block;
          border-left:1px solid #eee;
          border-top:1px solid #fff;
          border-bottom:1px solid #ddd;
          width:28px;
          height:32px;
          background:url(/assets/shopping-cart-22.png) no-repeat center;
        }
        .flexigrid div.mDivSelectable div.ptogtitle_road.vsble  span {
          background:url(/assets/shopping-cart-22.png) no-repeat center;
        }
        .flexigrid div.mDivSelectableRoad div.ptogtitle_road.vsble  span {
          background:url(/assets/shopping-cart-grey.png) no-repeat center;
        }
        .flexigrid div.mDivSelectableGreyOffice div.ptogtitle_office span {
          position:absolute;
          top:10px;
          right:3px;
          padding:0px;
          height:32px;
          width:28px;
          overflow:hidden;
          /*border:1px solid #ccc;*/
          cursor:pointer;
          display:block;
          width:28px;
          height:32px;
          background:url(/assets/shopping-cart-22.png) no-repeat center;
        }
        .flexigrid div.mDivSelectableGrey div.mDivSelectableGreyOffice div.ptogtitle_office span {
          position:absolute;
          top:10px;
          right:3px;
          padding:0px;
          height:32px;
          width:28px;
          overflow:hidden;
          /*border:1px solid #ccc;*/
          cursor:pointer;
          display:block;
          width:28px;
          height:32px;
          background:url(/assets/shopping-cart-22.png) no-repeat center;
        }
        .flexigrid div.mDivSelectableGreyOffice div.ptogtitle_office.vsble span {
          background:url(/assets/shopping-cart-grey.png) no-repeat center;
        }
        .flexigrid div.mDivSelectableGrey div.ptogtitle_office.vsble span {
          background:url(/assets/shopping-cart-grey.png) no-repeat center;
        }
        .flexigrid div.mDivSelectable div.ptogtitle_tour {
          background:url(/assets/shopping-cart-grey16.png) no-repeat center;
        }
        .flexigrid div.mDivSelectable div.ptogtitle_tour.vsble {
          background:url(/assets/shopping-cart-brown16.png) no-repeat center;
        }
        .userinfo_section {
          display:block;
         }
        /* Tourenliste Infoblock ab bestimmter Bildschirmgröße ausblenden und Tourenliste 100% */
        .infobox {
          display: block;
        }
        .table_hausaufgaben{
          display: table-cell;
        }
        .infobox-road {
          display: block;
        }
        .tourenliste {
         padding-left: 35%;
         z-index:1;
        }
        .tourenliste_office {
          padding-left: 25%;
          z-index:1;
         }
        .tourenliste_road {
          padding-left: 0%;
        }
        a.road-btn-ausgeliefert  {
          /*float: right;*/
          width: 140px;
          color: green;
          margin-top: -50px;
        }
        .road-infoblock {
          height: fit-content 100%;
          color: darkblue;
        }
        .lalo-logo {
         padding-top: 5px;
         align-self: flex-end;
        }
        .lalo-logo-road {
          padding-top: 16px;
          align-self: flex-end;
         }
        .lalo-logotext {
          margin-top: 16px;
          height: fit-content; 
         }
        .lalo-logotext-road {
          margin-top: 16px;
          height: fit-content; 
         }
        .lalo-userlogo {
          height: 50px;
          margin-top: 5px;
        }
        .lalo-userlogo-road {
          height: 48px;
          margin-top: 5px;
        }
        .btn-ganzetour  {
          display:none;
        }
        .flexigrid.crud-form{
          margin:auto;
        }
        .navbar-nav {
         
          font-family: Roboto Condensed,Roboto,Helvetiva,Arial,sans-serif!important;
          padding-left:15px;
        }
        .navbar-toggler {
          border:none;
          margin-top:-5px;
         
        }
        .main-table-box {
         /* border: 1px solid #ccc; */
          border-radius: 5px 5px 5px 5px;
        }
        .main-table-box-customer {
         
          margin: 10px 10px 10px 10px;
          padding-bottom:15px; 
        }
        .lalo-road-tourid{
          display:none;
        }
        .ladeliste-on {
          display:none;
        }
        .ladeliste-off {
          display:none;
        }
        .lalo-road-navlogo-startpage {
          display:none;
        }
        .reparam.selected{
          background-color:#777777;
          color:white;
        }
        .maxwidth1200 {
          max-width: 1200px;
          margin-right: auto;
          margin-left: auto;
        }
        .maxwidth1000{
          max-width: 1000px;
          margin-right: auto;
          margin-left: auto;
        }
        .maxwidth800 {
          max-width: 800px;;
          margin-right: auto;
          margin-left: auto;
        }
        .willkommen {
          padding-top:5%;
          margin-bottom: -4%;
        }
        .display_none{
          display:none;
        }
        .newanswer {
   
          position: relative;
          display: inline-block;
          border-radius: 2px;
        }
        .newanswer .badge {
          border-radius: 50%;
          background: #adddcf;
          color: #777777;
          padding:5px 10px;
        }
  
        .faecherid {
          
          color:darkblue;
          
        }
        .read_smallscreen{
          display:none;
        }
        .read_bigscreen{
          display:block;
        }
        .pdf-icon {
          text-align:left;
          margin-top:10px;
          margin-bottom:-10px;
          margin-left:25px
        }
        @media (max-width:800px){
          .read_smallscreen{
            display:block;
          }
          .read_bigscreen{
            display:none;
          }
          .ajax_list {
            font-size: small;
          }
        }
        @media (max-width:1180px){
          .flexigrid.crud-form{
            width: 100%;
            margin:auto;
          }
          .userinfo_section {
            display:none;
           }
        }
       
         /* Optimierung Tablet Quer*/
         @media (max-width:991px){
          
          .table_hausaufgaben{
            display: table-cell;
          }
          .infobox-road {
            display:block;
          }
          .mDivLogin{
            width: 360px;
          }
          .lalo-road-navlogo {
            display:block;
          }
          .lalo-road-navlogo-startpage {
            display:block;
          }
          .lalo-logo-road {
            width:40px;
            margin-top: -17px;
          } 
          .lalo-logotext-road {
            margin-top: 2px;
            height: 30px; 
           }
           .lalo-userlogo-road {
            height: 25px;
            margin-top: -7px;
          } 
          .lalo-header {
            position:inherit;
          }
          .loginpage{
            padding-top:20px;
          } 
          .lalo-main {
            margin-top: 15px;
          } 
          .lalo-navigation  {
            position:inherit;
          }
          #videometa {
            max-height: 350px;
          }
          .btn-ganzetour  {
            display:block;
            float: right;
            margin-top: 1px;
      
          }
          .div-userlogo-road {
            display:none;
          }
          .div_sofakt_searchbox {
            display:none;
          }
          .willkommen{
            padding-top:0%;
            margin-bottom:0px;
           }
          #form-button-save  {
            display:none;
          }
        }
       
        
       
       /* Optimierung Phone hoch */
       @media (max-width:577px){
         .willkommen{
          padding-top:0%;
          margin-bottom:0px;
         }
         .userinfo_section {
          display:none;
         }
         .navbar-nav{
            background-color: #abe1fd;
         }
         .navbar{
           z-index:10000;
         }
         .navbar-collapse{
          z-index:10000;
        }
         .table_hausaufgaben{
            display: none;
          }
          
          .col-lg-12{
            padding-left:0px;
            padding-right:0px;
          }
          .holalo-body{
           /*background-color: #adddcf;*/
           
          }
          .infobox-road {
            display:none;
          }
          .ladeliste-on {
            display:block;
          }
          .ladeliste-off {
            display:block;
          }
         
          .lalo-header{
            background-color: #adddcf;
          }
         .lalo-header-road {
           display:none;
           position: initial;
           height: 0px;
         }
         .lalo-road-tourid{
          display:block;
        }
         .lalo-road-navlogo {
           display:none;
         }
         .lalo-main-road {
          margin-top: 30px;
        }
         .lalo-navigation_road{
          position:fixed;
          background-color: #adddcf;
          height: 41px;
         }
        a.road-btn-ausgeliefert  {
          margin-top: -20px;  
        }
        #form-button-save  {
          display:none;
        }
        .tourenliste_road {
          padding-left: 2px;
          padding-right: 1px;
       }
    
      .ganze-tour {
        padding-right: 8px;
       
      }
      .mDivLogin{
        width: fit-content;
      }
      .flexigrid div.form-button-box {
        float: none;
      }
      }
      @media (max-height:400px){
      .mDivLogin {  
      margin-top: auto;
    
      }
      }
      /* iphone hoch */
      @media (max-width:460px){
        .flexigrid div.form-imput-box{
          width: 320px;
        }
        .flexigrid input[type=text].form-control{
          width: 320px;
        }
        .thumbnail {
          height:120px;
        }
        .print-anchor {
          display:none;
        }
        .pdf-icon {
          text-align:center;
        }
      }  
        /*Tabellenkopf nicht mitscrollen */
        @media (min-width: 680px) {
          .jsSticky {
             
             position: relative;
          }
        }
          .sticky {
             position: fixed;
             top: 0;;
             width: 100%;
          }
       
       
       @supports (position: sticky) or (position: -webkit-sticky) {
          @media (min-width: 680px) {
             .jsSticky {
                position: -webkit-sticky;
                position: sticky;
                top: 120px;
                background: plum;
                z-index: 3;
             }
          }
       }