/*!
 * 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)
 */
 .arrowback{
   width:26px;
   margin:2px;
   border: 1px solid #777777;
   border-radius:50%;
 }
 /*Spinner*/
 .lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin:auto
}
.lds-spinner div {
  transform-origin: 40px 25px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  left: 37px;
  width: 4px;
  height: 12px;
  border-radius: 20%;
  background: darkcyan
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


 .thumbnail_noten {
  border: 1px solid; 
  border-color: lightgrey;
  width:95%;
  height:fit-content;
  object-fit: scale-down;
  object-position: top;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  display:block;
 }
 .search-loading
{
	background: url('images/small-loading.gif') no-repeat;
	height:15px;
	padding-left:25px;
	padding-top:1px;
	display: none;
}
.ftitle-green{
  color:#46b896;
}
 /* Flexbox -------------------------------*/
 div.pool-medienlink{
   height: 82%;
   overflow: hidden;
   text-align: center;
   margin-top:5px;
 }
 div.flex-container {  
  display: flex;
  flex-direction: column;
}
section.flex-item-position {
 
  margin: 8px;
  padding: .5em;
  height: 300px;
  width: 365px;

}
section.flex-item-noten { 
 
  background-color: floralwhite;

}
section.flex-item-audio {
  background-color: honeydew;


}
section.flex-item-video {
  background-color: aliceblue;
 

}
/* große Viewports */
@media all and (min-width: 40em) {
div.flex-container {
    flex-direction: row;
  
  }
}
 .flex-container-db {
  display: flex;
  flex-direction: column;
}
/* große Viewports */
@media all and (min-width: 635px) {
.flex-container-db {
    flex-direction: row;
    justify-content: center;

  }
  .flex-item {
    flex-direction: row;
  }
  .flex-item-noten {
    flex-direction: row;
  }
  .flex-item-audio {
    flex-direction: row;
  }
  section.flex-item {
    
    width: 20em;
    height: 25em;
  }
  section.flex-item-noten div.flex-item-noten {
    background-color: floralwhite; 
 
  }
  section.flex-item-audio div.flex-item-audio {
    background-color:honeydew;

    height: 16em;
  }
  section.flex-item-video div.flex-item-video {
   
    background-color:aliceblue;
    height: 90%;
  }
}
.flex-item {
  border-radius:.5em;
  background-color:white;
}
.flex-item-noten {
  border-radius:.5em;
  background-color: floralwhite;
  height: 90%;
}
.flex-item-audio {
  border-radius:.5em;
  background-color: white;
}
.flex-item-video {
  border-radius:.5em;
  background-color:aliceblue;
 
}
.wrap {
	flex-wrap: wrap;
}
 /* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

/* The search field */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown_navi {
  position: relative;
  display: inline-block;
 
}
.dropdown {
  position: relative;
  width: fit-content;
  margin-top:-30px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display:block;}

 /* Grundlayout für SELFHTML-Beispiele */
 .dropdown-menu{
  border:none;
  margin-top: -5px;
  border:1px solid rgb(238,238,238);
  border-top:none;
}
.dropdown-item{
  color:#777777;
}   
 .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%;
	}
}

#audio_with_controls{
 width:100%;
}
#audio_with_controls:focus
{
 outline: none;
 box-shadow: 0px 0px 2px #0066ff;

}
section.flex-item {
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  padding:10px;
  margin:10px;
  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: #fff
  }
  .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: rgb(245, 245, 245);;
    
  }
   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:#fff;
    /* 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;
   border-top: 1px solid rgb(238, 238, 238);
   border-bottom: 1px solid rgb(238, 238, 238);
   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-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;
      min-width: 140px;
    }
    
    .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: black;
      background-color: #adddcf;
      border-color: #adddcf;
    }
    
    .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;
    }
    .boxsystem_grey{
      background-color:#f5f5f5;
      border-radius: 5px;
      box-shadow:0px 1px 2px rgba(0,0,0,0.05);
      padding-top: 5px;
    }
    .boxsystem_white{
    background-color: #fff;
    color: #fff;
   
    }
    .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: #fff;
      color: #777777;
      border-radius: 4px;
      border:1px solid rgb(238, 238, 238);
      box-shadow: rgb(0 0 0 / 5%) 0px 1px 2px;
    }
    .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;
        
      }
      .nav-item.active{
        background-color: #adddcf;
        margin-bottom: 2px;
        margin-top:2px;
        height:34px;
        display:flex;
        align-items: center;
        border-radius:5px;
      }
      .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;
          padding-left:15px;
          padding-right: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;
       }
       .noten_selectbox {
        display:none;
       }
       .dropdown {
       
        margin-right:auto;
        margin-top:0px;
      }
       .navbar-nav{
          background-color: #abe1fd;
       }
       .nav-item.active{
         background-color: inherit;
       }
       .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 {
        width:95%;
        max-width:600px;
        height:auto;
      }
      .print-anchor, .disp460none{
        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;
           }
        }
     }