.header1 th {
     height: 2px;
     line-height: 2px;
 }

 * {
     font-family: Arial;
 }

 .header {
     overflow: hidden;
     background-color: #10143f;
     padding: 5px 5px;
 }

 .cent {
     align-content: center;
     align-items: center;
     height: 60px;
     text-align: center;
 }

 .header a,
 p,
 span {
     float: left;
     color: whitesmoke;
     text-align: center;
     padding: 1px 0px 0px 8px;
     /*padding: 0px 0px 0px 8px; */
     text-decoration: none;
     font-size: 14px;
     border-radius: 4px;
 }

 .nolinkpage {
     float: left;
     color: whitesmoke;
     text-align: center;
     padding: 1px 0px 0px 0px;
     text-decoration: none;
     font-size: 14px;
     border-radius: 4px;
     font-weight: bold;
 }

 .header a.logo {
     color: #FFF7E8;
     font-size: 25px;
     font-weight: bold;
 }

 .header-right {
     float: right;
     padding-top: 5px;
}
 .header-right-logout {
     float: right;
     text-decoration-line: underline;
     padding-top: 5px;
}
 @media screen and (max-width: 500px) {
     .header a {
         float: none;
         display: block;
         text-align: left;
    }
     .header-right {
         float: none;
    }
}


 /* Schriftfarbe Link */

 a {
     /* dunkelblau: */
     color: #232d85;
 }

 .linktitle {
     color: #ffe2d1;
 }

 .linktitle:hover {
     color: #fff2eb;
 }

 .linktitle:active {
     color: #edcebb;
 }

 .linktitle:focus {
     color: #edcebb;
 }

 .linkcolumn {
     color: #232d85;
 }

 .linkcolumn:hover {
     color: #3343d4;
 }

 .linkcolumn:active {
     color: #1a2370;
 }

 .linkcolumn:focus {
     color: #1a2370;
 }

 .linkpage {
     color: #ffaa44;
     font-weight: bold;
 }

 .linkpage:hover {
     color: #ffcc55;
     font-weight: bold;
 }

 .linkpage:active {
     color: #ffdd55;
     font-weight: bold;
 }

 .linkLogout {
     color: #ffaa44;
 }

 .linkLogout:hover {
     color: #ffcc55;
 }

 input {
     margin: 4px 2px 4px 2px;
 }

 .notvalid {
     text-align: center;
     color: red;
     font-size: larger;
 }

 .body {
     background: #1d2670;
 }

 body {
     background: #1d2670;
 }

 table {
     /*border-collapse: separate; */
     border-collapse: separate;
     background: #fff;
     border-radius: 5px;
     margin: auto auto;
     width: 100%;
     border-spacing: 0;
 }

 thead {
     border-radius: 5px;
 }

 thead th {
     font-size: 15px;
     /*  font-weight: 400; */
     color: #fff;
     text-shadow: (1px 1px 0px rgba(0, 0, 0, 0.5));
     text-align: center;
     padding: 5px 5px 5px 12px;
     background-image: linear-gradient(#646f7f, #4a5564);
     border-top: 1px solid #858d99;
 }

 tbody tr td {
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     color: #434345;
     font-size: 14px;
     padding: 10px 10px 10px 14px;
     /*padding: 28px 18px 28px 18px; */
     border-bottom: 1px solid #e0e0e0;
 }

 tfoot tr td,
 .bottom {
     color: #fff;
     padding: 3px 10px 3px 0px;
     background-image: linear-gradient(#646f7f, #4a5564);
     font-size: 14px;
     font-weight: 400;
     text-align: left;
 }

 tbody tr:nth-child(2n) {
     /* background: #E0E1F8; */
     background: #dbdcf2;
 }

 tbody tr:last-child td {
     border-bottom: none;
 }

 tbody:hover>tr td {
     /*  opacity: 0.85; */
     opacity: 1;
     /* uncomment for blur effect */
     /* color:transparent;
    @include text-shadow(0px 0px 2px rgba(0,0,0,0.8));*/
 }

 tbody:hover>tr:hover td {
     text-shadow: none;
     color: #1c1c1c;
     opacity: 1.0;
 }


 /* Create a custom checkbox */

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: #eee;
 }


 /* On mouse-over, add a grey background color */

 .container:hover input~.checkmark {
     background-color: #ccc;
 }


 /* When the checkbox is checked, add a blue background */

 .container input:checked~.checkmark {
     background-color: #2196F3;
 }


 /* Create the checkmark/indicator (hidden when not checked) */

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }


 /* Show the checkmark when checked */

 .labely input:checked~.checkmark:after {
     display: block;
 }


 /* Style the checkmark/indicator */

 .labely .checkmark:after {
     left: 9px;
     top: 5px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }


 .btn-delete {
     color: #000 !important;
     text-decoration: none;
     background: #efefef;
     padding: 3px 6px 3px 6px;
     margin: 0px 0px 0px 2px;
     border-radius: 4px;
     display: inline-block;
     border: 1px solid #555555;
     font-size: 11px;
     transition: all 0.4s ease 0s;
 }

 .btn-delete:hover {
     color: #000 !important;
     text-decoration: none;
     background: #e5e5e5;
     padding: 3px 6px 3px 6px;
     margin: 0px 0px 0px 2px;
     border-radius: 4px;
     display: inline-block;
     border: 1px solid #555555;
     font-size: 11px;
     transition: all 0.4s ease 0s;
 }

 .btn-nodelete {
     color: #000 !important;
     text-decoration: dotted line-through;
     background: #efefef;
     padding: 3px 6px 3px 6px;
     margin: 0px 0px 0px 2px;
     border-radius: 4px;
     display: inline-block;
     border: 1px solid #555555;
     font-size: 11px;
     transition: all 0.4s ease 0s;
 }

 .btn-nodelete:hover {
     color: #000;
     text-decoration: dotted line-through;
     background: #e5e5e5;
     padding: 3px 6px 3px 6px;
     margin: 0px 0px 0px 2px;
     border-radius: 4px;
     display: inline-block;
     border: 1px solid #555555;
     font-size: 11px;
     transition: all 0.4s ease 0s;
 }


 .btn-two {
     color: #fff !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #60a3bc;
     padding: 8px 8px 8px 8px;
     margin: 8px 4px 8px 4px;
     border-radius: 5px;
     display: inline-block;
     border-left: 1.5px solid #518fa6;
     border-top: 1.5px solid #518fa6;
     border-right: 1.5px solid #518fa6;
     border-bottom: 1.5px solid #518fa6;
     transition: all 0.4s ease 0s;
 }

 .btn-two:hover {
     color: #fff7e8 !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #458aa5;
     padding: 8px 8px 8px 8px;
     margin: 8px 4px 8px 4px;
     border-radius: 5px;
     display: inline-block;
     border-left: 1.5px solid #39748a;
     border-top: 1.5px solid #39748a;
     border-right: 1.5px solid #39748a;
     border-bottom: 1.5px solid #39748a;
     transition: all 0.4s ease 0s;
 }

 .btn-two:active {
     background-color: #43859e;
     box-shadow: 0 3px #667;
     transform: translateY(3px);
     font-weight: bold;
 }



 .btn-three {
     color: #fff !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #60a3bc;
     padding: 5px 15px 5px 15px;
     margin: 12px 0px 12px 0px;
     border-radius: 3px;
     border: none;
     transition: all 0.4s ease 0s;
}
 .btn-three:hover {
     color: #fff7e8 !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #478fab;
     padding: 5px 15px 5px 15px;
     margin: 12px 0px 12px 0px;
     border-radius: 3px;
     border: none;
     transition: all 0.4s ease 0s;
}
 .btn-three:active {
     background-color: #43859e;
     box-shadow: 0 3px #667;
     transform: translateY(3px);
     font-weight: bold;
}
 .btn-four {
     color: #fff !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #60a3bc;
     padding: 8px 15px 8px 15px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}
 .btn-four:hover {
     color: #fff7e8 !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #478fab;
     padding: 8px 15px 8px 15px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}

.btn-five {
     color: #fff !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #60a3bc;
     padding: 4px 6px 4px 6px;
     margin: 1px 1px 1px 0px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}
 .btn-five:hover {
     color: #fff7e8 !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #478fab;
     padding: 4px 6px 4px 6px;
     margin: 1px 1px 1px 0px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}


.btn-six {
     color: #fff !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #60a3bc;
     padding: 4px 6px 4px 6px;
     margin: 1px 1px 1px 15px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}
 .btn-six:hover {
     color: #fff7e8 !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #478fab;
     padding: 4px 6px 4px 6px;
     margin: 1px 1px 1px 15px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}


.btn-sept {
     color: #fff !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #60a3bc;
     padding: 8px 15px 8px 15px;
     margin: 1px 1px 1px 20px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}
 .btn-sept:hover {
     color: #fff7e8 !important;
     text-transform: uppercase;
     text-decoration: none;
     background: #478fab;
     padding: 8px 15px 8px 15px;
     margin: 1px 1px 1px 20px;
     border-radius: 3px;
     display: inline-block;
     border: none;
     transition: all 0.4s ease 0s;
}



 .recipeno {
     color: #e0e0e0;
     text-align: center;
 }


 /* Popup container - can be anything you want */

 .popup {
     position: relative;
     display: inline-block;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }


 /* The actual popup */

 .popup .popuptext {
     visibility: hidden;
     width: 160px;
     background-color: #555;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 8px 0;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: -80px;
 }


 /* Popup arrow */

 .popup .popuptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
 }


 /* The Close Button */

 .close {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }

 .close:hover,
 .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
 }


 /*Side nav bar*/

 .sidenav {
     width: 200px;
     height: 1000px;
     position: fixed;
     z-index: 1;
     top: 125px;
     left: 10px;
     overflow-x: hidden;
     padding: 18px 0;
     font-weight: bold;
 }

 .sidenav a {
     padding: 6px 8px 6px 16px;
     text-decoration: none;
     font-size: 15px;
     color: #faebd2;
     display: block;
 }

 .sidenav a:hover {
     /*color: #BBDDFD; */
     /*color: #10143f; */
     color: #373e8c;
     font-weight: bold;
 }

 .main {
     margin-left: 205px;
     font-size: 10px;
     padding: 0px 0px;
     border-radius: 15px;
 }


 .main-content-location {
     margin-left: 205px;
     font-size: 10px;
     padding: 0px 10px;
 }

 @media screen and (max-height: 450px) {
     .sidenav {
         padding-top: 15px;
     }

     .sidenav a {
         font-size: 18px;
     }
 }

 .ofa_akkordeonButton {
     width: 100%;
     padding: 8px;
     margin-top: 5px;
     margin-bottom: 5px;
     border: 0px;
     background-color: #99A4B5;
     font-size: 16px;
     font-weight: normal;
     color: #282828;
     cursor: pointer;
     transition: 0.5s;
     border-radius: 4px;
 }

 .ofa_akkordeonButtonAktiv,
 .ofa_akkordeonButton:hover {
     background-color: #889bb5;
     font-weight: bold;
     border-radius: 4px;
 }

 .ofa_akkordeonEinheit {
     background-color: #9facbe;
     padding: 0px 12px 0px 0px;
     overflow: hidden;
     display: none;
     border-radius: 5px;
 }


  .ofa_akkordeonEinheit1 {
     background-color: #99A4B5;
     padding: 8px 8px 8px 8px !important;;
     overflow: hidden;
     display: none;
     border-radius: 5px;
     margin-top: 5px;
     margin-bottom: 5px;
     border: 0px;
     font-size: 16px;
     font-weight: normal;
     color: #282828 !important;
     cursor: pointer;
     transition: 0.5s;
     text-align: center; /* Textzentrierung */
     justify-content: center; /* Horizontale Zentrierung */
     align-items: center; /* Vertikale Zentrierung */
  }


 .formtable {
     width: 100%;
 }

 .bigtable {
     width: 75%;
     height: 0%;
 }

 .smalltable {
     width: 100%;
     height: 100%;
 }

 .employees {
     /* list-style-type: none; */
 }

 .tablelable {
     font-weight: bold;
     padding: 0 10 0 0;
 }

 .tablelableSearch {
     color: white;
     font-weight: bold;
     padding: 0 10 0 0;
 }


 /* tab */
 .tab {
     background-color: #dd00ff;
     padding: 0px 0px;
     margin: 0px 0px;
 }

 /* buttons inside the tab */
 .tab button {
     background-color: #fff;
     position: relative;
     color: black;
     float: left;
     border: none;
     outline: none;
     cursor: pointer;
     font-size: 22px;
     font-weight: bold;
     width: 50%;
     padding: 0px 0px;
     line-height: 50px;
 }

 /* active/current tab */
 .tab button.active {
     background-color: #dfe1e2;
 }

 /* hovered tab */
 .tab button:hover {
     background-color: #bdc5c9;
 }

 /* tab content */
 .tabcontent {
     display: none;
     font-size: 20px;
     padding: 0px 0px;
 }


 /* The Modal (background) */
 .modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 1;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */
     opacity: 1;
     transition: all .5s;
     -wekit-transition: all .3s;
     -moz-transition: all .3s;
 }


 /* Modal Content/Box */
 .modal-content {
     margin: 15% auto;
     /* 15% from the top and centered */
     padding: 20px;
     border: 1px solid #888;
     width: 25%;
     /* Could be more or less, depending on screen size */
     height: 20%;
     font-size: 14px;
     position: relative;
     background-color: #dfdfdf;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;
     animation-duration: 0.4s
 }

 .modal-content-in {
     background-color: #888;
     margin: 15% auto;
     /* 15% from the top and centered */
     width: 60%;
 }

 .modal-content-left {
     float: left;
     background-color: #fefefe;
     width: 60%;
 }

 .modal-content-right {
     float: right;
     background-color: #fefefe;
     width: 40%;
     text-align: right;
 }

 /* Modal Header */
 .modal-header {
     font-weight: bold;
     font-size: 14px;
     padding: 10px 26px 10px 16px;
     background-color: #657285;
     color: white;
 }

 /* Modal Body */
 .modal-body {
     padding: 45px 50px 45px 16px;
 }


 /* The Close Button */

 .close {
     color: #ccc;
     float: right;
     font-size: 28px;
     font-weight: bold;
     padding: 0px 0px 0px 0px;
 }

 .close:hover,
 .close:focus {
     color: white;
     text-decoration: none;
     cursor: pointer;
     padding: 0px 0px 0px 0px;
 }


 /* Add Animation */

 @-webkit-keyframes animatetop {
     from {
         top: -300px;
         opacity: 0
     }

     to {
         top: 0;
         opacity: 1
     }
 }

 @keyframes animatetop {
     from {
         top: -300px;
         opacity: 0
     }

     to {
         top: 0;
         opacity: 1
     }
 }


 /*
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:1}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:1}
  to {top:0; opacity:1}
}
*/

 .border1 {
     border-style: none;
 }

 .tableborder {
     border: none;
 }

 .error {
     /*color: #f0f3f5;*/
     color: #FFF7E8;
     text-align: center;
     font-family: Arial !important;
 }

 h1 {
     /*color: #f0f3f5;*/
     color: #FFF7E8;
     text-align: center;
     font-family: Arial !important;
     padding: 12px 0px 0px 0px;
     margin: 0px;
 }

 .titelue {
     /* color: #f0f3f5; */
     color: #fff7e8;
     text-align: center;
     font-family: Arial !important;
 }

 .tableFixHead {
     overflow-y: auto;
     height: 725px;
     border-collapse: separate;
     background: #fff;
     border-radius: 5px;
     margin: auto auto;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
     width: 85%;
 }

 .tableFixHead thead th {
     position: sticky;
     top: 0;
 }

 th,
 td {
     padding: 0px 0px;
     font-weight: bold;
 }

 th {
     background: #eee;
 }

 .tableFixHead,
 .tableFixHead td {
     box-shadow: inset -1px -1px #000;
     border-collapse: separate;
     background: #e4e5f7;
     border-radius: 0px;
     margin: auto auto;
     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
 }

 .tableFixHead td:nth-child(2n) {
     background: #dfe0f2;
     /*background: #dadbed; */
 }

 .tableFixHead th {
     box-shadow: inset -2px 1px #444, 0 1px #000;
 }

 .tblpaginatingTop {
     padding: 0px 0px 4px 0px !important;
     background: #1d2670;
     border-style: none;
     border-collapse: collapse;
 }

 .tblpaginatingBottom {
     padding: 10px 0px 0px 0px !important;
     background: #1d2670;
     border-style: none;
     border-collapse: collapse;
 }

 .tblSearch {
     padding: 0px 0px 0px 0px !important;
     background: #1d2670;
     border-style: none;
     border-collapse: collapse;
 }

 #searchtable.hide tr {
     display: none;
 }

 #searchtable1.hide tr {
     display: none;
 }

 #searchtable2.hide tr {
     display: block;
 }

 .labelSearch {
     font-weight: bold;
 }

 .HoeheHeader {
     max-height: 3em !important;
 }

 .BreiteDn {
     max-width: 4.0em;
 }

 .BreiteFn {
     max-width: 12em;
 }

 .BreiteVe {
     max-width: 5em;
 }

 .BreiteSf {
     max-width: 13em;
 }

 .BreiteCo {
/*     max-width: 5.5em; */
     max-width: 6.5em;
 }

 .BreiteCoSd {
     max-width: 4em;
 }

 .BreiteCm {
     max-width: 12em;
 }

 .BreiteEd {
     max-width: 3em;
 }

 .imageLupe {
     width: 26px;
     height: 26px;
     position: relative;
     display: inline-block;
     margin: 0px;
 }

 .imageLupe .imageLupe-top {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 99;
 }

 .imageLupe:hover .imageLupe-top {
     display: inline;
 }


 .buttonSearchClear {
     /* Knöpfe Search und Reset Search */
     border-width: 1px;
     border-color: #777777 #777777 #999999 #999999;
     border-radius: 4px;
     font-weight: bold;
 }

 #ButtonSearch {
     /* Knopf Search inaktiv */
     border-width: 1px;
     width: 65px;
     height: 25px;
     /*   background-color: #f5f5f5; */
     background-color: #F5F5F5;
     color: #363535;
 }

 #ButtonSearch:hover {
     /* Knopf Search hover */
     border-width: 1px;
     background-color: #e3e3e3;
     color: #363535;
 }

 #ButtonClear {
     /* Knopf Reset Search inaktiv */
     border-width: 1px;
     width: 65px;
     height: 25px;
     /*    background-color: #f5f5f5; */
     background-color: #F5F5F5;
     color: #363535;
 }

 #ButtonClear:hover {
     /* Knopf Reset Search hover */
     border-width: 1px;
     background-color: #e3e3e3;
     color: #363535;
 }