@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.5.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
    url('fontawesome-webfont.woff2?v=4.5.0') format('woff2'), 
    url('fontawesome-webfont.woff?v=4.5.0') format('woff'), 
    url('fontawesome-webfont.ttf?v=4.5.0') format('truetype'), 
    url('fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proextralight';
    src: url('sourcesanspro-extralight-webfont.eot');
    src: url('sourcesanspro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-extralight-webfont.woff2') format('woff2'),
         url('sourcesanspro-extralight-webfont.woff') format('woff'),
         url('sourcesanspro-extralight-webfont.ttf') format('truetype'),
         url('sourcesanspro-extralight-webfont.svg#source_sans_proextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prolight';
    src: url('sourcesanspro-light-webfont.eot');
    src: url('sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-light-webfont.woff2') format('woff2'),
         url('sourcesanspro-light-webfont.woff') format('woff'),
         url('sourcesanspro-light-webfont.ttf') format('truetype'),
         url('sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
    font-family:  source_sans_prolight;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
.head {
     background-color: #ddd;  
     padding:  10px;
    display: flex;
    flex-direction: column;   
    width: 100%;
    box-sizing: border-box;
    position: fixed;  
}
#contentdata {
  height: calc(100vh - 356px);
  overflow-y: auto;
  position: fixed;
  top: 356px;
  width: 100%;
}
form {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}
.multicheck-search input {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 2px;
  border: 1px solid #ccc;
  font-family: source_sans_prolight;
  font-size: 1em;
}
.multicheck {
  /* flex: 0 0 calc(100% / 3); */
  height: 250px;
  overflow-y: auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
    margin-bottom: 10px;
    border: 1px solid #ccc;  
}
.mcrow {
  border-bottom: 1px solid #ccc;
}
.mcrow-hide {
  display: none;
}
form select {
  width: 50%;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDIwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48L2c+PGc+PHJlY3QgeD0iMC4wNjMiIHk9IjAuMDYzIiBmaWxsPSIjRjBGMEYwIiB3aWR0aD0iMjAuMDYzIiBoZWlnaHQ9IjQ5LjkzOCIvPjxwb2x5Z29uIHBvaW50cz0iNi4wMzMsMjMuMDEzIDEwLjA5NCwyNy4wNSAxNC4xNTQsMjMuMDEzICIvPjwvZz48L3N2Zz4=) center right no-repeat #fff;
  padding-right:24px !important;
  cursor:pointer;    
  box-sizing: border-box;
  padding: 5px 10px;
  font-family:  source_sans_prolight;
  border: 1px solid #ccc;
}
.content {
     background-color: #eee;  
     padding:  10px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table tr {
    background-color: #fff;
}
table tr td {
    vertical-align: top;
}
table tr.trhead td {
    vertical-align: top;
    background-color: #ccc;
}
table tr:nth-child(odd) {
    background-color: #efefef;
}
table tr td:nth-child(1) { width: 3%; text-align: center; }
table tr td:nth-child(2) { width: 18%; }
table tr td:nth-child(3) { width: 18%; }
table tr td:nth-child(4) { width: 20%; }
table tr td:nth-child(5) { width: 20%; }
table tr td:nth-child(6) { width: 10%; }
table tr td:nth-child(7) { width: 10%; }
table tr td:nth-child(8) { width: 10%; }
table tr td:nth-child(9) { width: 3%; }
table tr td:nth-child(10) { width: 3%; }
table tr td:nth-child(11) { width: 3%; }
table tr td:nth-child(12) { width: 3%; }
table tr td:nth-child(13) { width: 3%; }

table .trhead {
  position: sticky;
  top: 0px;
}


table tr td input[type=text] {
    width: 100%;
    height: 24px;
    border: none;
    background-color: transparent;
    font-family: source_sans_prolight;
    font-size: 1em;
}
input.w30 {
    width: 40px !important;
    float: left;
}
input.w70 {
    width: calc(100% - 50px) !important;
    float: left;
}
table tr.is-checked td {
    background-color: rgba(200,255,200,0.5);
}


.mcrow input[type=checkbox] {
    opacity:0;
    position:absolute;
    left:-9000px;
}
.mcrow input[type=checkbox] + label {
    display:inline-flex;
    align-items: center;
    position:relative;
    cursor:pointer;
    font-weight: normal;
    width: 100%;
    height: 100%;
}
.mcrow input[type=checkbox] + label:hover {
    background-color: #eee;
}    
.mcrow input[type=checkbox] + label::before {
    content: "";
    width: 1.75em;
    height: 1.75em;
    background-color: #fff;
    border: 1px solid #aaa;
    margin-right: .25em;
    margin-left: 2px;
}
.mcrow input[type=checkbox]:checked + label::before {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMDA5MjQ1IiBkPSJNNTcuNTA4LDQxLjAwOWMwLjQ5My0wLjA5OCwwLjczNSwwLjMzMywxLjAzLDAuNjI4YzAuNDkzLDAuNDkzLDAuOTM4LDAuOTEzLDEuNDU5LDEuNDMzYzAuMTk1LDAuMTk2LDAuNjQyLDAuNTQ5LDAuNjA0LDAuODNjLTAuMDIsMC4xNDQtMC4zMDgsMC4yNzItMC40NzksMC40MjhjLTEuMDc4LDAuOTgzLTIuMTM3LDIuMTEyLTMuMTQzLDMuMTE4Yy0zLjI3MywzLjI3NC02LjQ3Nyw2LjUwMi05LjgwNiw5LjgzMWMtMC4yOTksMC4yOTktMC42MzQsMC43NDUtMS4wNTYsMC43MjljLTAuMzktMC4wMTQtMC44NC0wLjYzOS0xLjA4MS0wLjg4Yy0xLjk2Ni0xLjk2Ni0zLjgwMy0zLjgyOS01LjgwOC01LjgzM2MtMC4yOTItMC4yOTEtMC44MzctMC42NDYtMC44My0xLjEwNmMwLjAwNi0wLjM0OSwwLjQwNC0wLjYzLDAuNjA0LTAuODNjMC41NTQtMC41NTQsMC44NjUtMC44NjUsMS40MzMtMS40MzNjMC4yNDktMC4yNDksMC40OTYtMC41NjQsMC44OC0wLjU1M2MwLjI4OCwwLjAwOCwwLjUyNSwwLjMyNCwwLjcwNCwwLjUwM2MxLjMzMiwxLjMzMiwyLjU2OCwyLjU2OCwzLjkyMywzLjkyMmMwLjAyOCwwLjAyOCwwLjI5NSwwLjMwMiwwLjMwMiwwLjMwMmMwLjA5OCwwLjAwNCwwLjYwNC0wLjYwNCwwLjcwNC0wLjcwNGMzLjI4LTMuMjc5LDYuNDc1LTYuNDQ5LDkuNzU2LTkuNzNDNTYuOTI1LDQxLjQ0LDU3LjE5Miw0MS4wNzEsNTcuNTA4LDQxLjAwOXoiLz48L2c+PC9zdmc+) no-repeat center center;
}

.mcrow input[type=checkbox]:disabled + label {
    cursor: default;
}
.mcrow input[type=checkbox]:disabled + label::before {
    background-color: #f4f4f4;
    cursor: default;
}


input[type="button"] {
  width: 70%;
  margin: 0 auto;
  background-color: #77ca80;
  border: 1px solid #83b788;
  padding: 5px;
  cursor: pointer;
  box-shadow: 0 0 3px #0006;
  color: #fff;
  font-size: 1.4em;
}
input[type="button"]:hover {
  background-color: #56bd61;  
}




span.link {
    background: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> \ <g style="stroke:rgb(255,255,255);stroke-width:1"> \ <line x1="5" y1="5" x2="5" y2="14" /> \ <line x1="14" y1="9" x2="14" y2="14" /> \ <line x1="5" y1="14" x2="14" y2="14" /> \ <line x1="5" y1="5" x2="9" y2="5" /> \ <line x1="10" y1="2" x2="17" y2="2" /> \ <line x1="17" y1="2" x2="17" y2="9" /> \ <line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" /> \ </g> \ </svg>');
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #bbb;
    cursor: pointer;
}
span.link:hover {
    background-color: #aaa;
}
.updateFeld { 
 color:#0a0;
 background-color:#dafcda !important;
}
.updateFeldError { 
 background-color:#F28589 !important;
}


.box-loader {
 clear:left;
 float:left;
 display:block;
 width:100%;
 height:100px;
 position:relative;   
}
.box-loader .loader {
 width: 60px;
 height: 60px;
 position:absolute;   
 left:50%;
 top:50%;
 margin:-30px 0 0 -30px !important;
}
.box-loader .loader img {
 top:14px;
 left:12px;
 position:absolute;   
}
.box-loader .loader .lcircle {
 background-color: rgba(0,0,0,0) !important;
 border-left: 2px solid #fff !important;
 border-top: 2px solid #ccc !important;
 border-right: 2px solid #ccc !important;
 border-bottom: 2px solid #ccc !important;
 border-radius: 60px;
 width: 60px;
 height: 60px;
 position:absolute;   
 top:0px;
 left:0px;
 -moz-animation: spin .8s infinite linear !important;
 -webkit-animation: spin .8s infinite linear !important;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.scale {
  width: 82%;
  border: 1px solid red;
  display: inline-block;
  height: 20px;
  
}
.scaleinner {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  background: linear-gradient( to right, rgb(255, 0, 0) 0%, rgb(255, 179, 0) 25%, rgb(255, 251, 0) 60%, rgb(199, 255, 0) 80%, rgb(0, 255, 0) 100% );
}