.header1 th {
     height: 2px;
     line-height: 2px;
}
 * {
     font-family: Arial;
}
 .header {
     overflow: hidden;
     background-color: #451621;
     padding: 5px 5px;
}
 .cent {
     align-content: center;
     align-items: center;
     height: 50px;
     text-align: center;
}
 .header a, p, span {
     float: left;
     color: whitesmoke;
     text-align: center;
     padding: 1px 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;
     font-weight: bold;
     border-radius: 4px;
}
 .header a.logo {
     font-size: 25px;
     font-weight: bold;
}
 .logo{
     color: #fff7e8;
}
 .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: #752537;
}
 .linkcolumn:active {
     color: #232d85;
}
 .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: #662822;
     */
    /* background: #073d2c;
     */
    /* background: #273F3D;
     */
     background: #752537;
}
 body {
    /* background: #662822;
     */
    /* background: #073d2c;
     */
    /* background: #273F3D;
     */
     background: #752537;
}
 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: #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-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: 3px 6px 3px 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: 3px 6px 3px 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;
}


 .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;
}
 .tabletitle {
     margin: 10px 0px 10px 0px;
}
 .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: #ffecdf;
     display: block;
}
 .sidenav a:hover {
    /*color: #BBDDFD;
     */
    /*color: #10143f;
     */
    /*color: #373e8c;
     */
     color: #690101;
     font-weight: bold;
}
 .main {
     margin-left: 205px;
     font-size: 10px;
     padding: 0px 0px;
     border-radius: 15px;
}
 .main1 {
     margin-left: 0px;
     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: #76859c;
     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: #76859c;
     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%;
}
 .bigtable1 {
     margin-top: 6px;
     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: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
}
 .close:hover, .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
}
/* 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;
     text-align: center;
     font-family: Arial !important;
}
 h1 {
     color: #f0f3f5;
     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 #1a4d3d;
     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 #1a4d3d;
}
 .tblpaginatingTop {
     padding: 0px 0px 4px 0px !important;
     background: #752537;
     border-style: none;
     border-collapse: collapse;
}
 .tblpaginatingBottom {
     padding: 10px 0px 0px 0px !important;
     background: #752537;
     border-style: none;
     border-collapse: collapse;
}
 .tblSearch {
     padding: 0px 0px 0px 0px !important;
     background: #752537;
     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: 3em;
}
 .BreiteFn {
     max-width: 12em;
}
 .BreiteVe {
     max-width: 5em;
}
 .BreiteSf {
     max-width: 13em;
}
 .BreiteCo {
     max-width: 6.0em;
}
 .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;
     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;
     color: #363535;
}
 #ButtonClear:hover {
    /* Knopf Reset Search hover */
     border-width: 1px;
     background-color: #e3e3e3;
     color: #363535;
}


/* aufklappbare Anzeige der approver im Document */
 summary:hover {
     font-size: 14px;
     color: #484663;
    /* font-weight: 500px;
     +/
    /* font-weight: bolder;
     */
}