html, body, #container, #main {
    height: 100%
}
body {
    background-color: #fff;
}
body, table, form {
    margin: 0px;
    padding: 0px;
}
table {
    border-collapse: collapse;
}
td,th,div { 
    font-family: Arial;
    color: #333;
    font-size: 12px;
}
td {
    white-space: normal;
    padding: 2px;
}
td.word-break {
    word-break: break-all;
}
th {
    white-space: nowrap;
}
th.printHead {
    white-space: normal;
    padding: 8px 2px;
    border: 1px solid #333;
}
th div {
    position: fixed;
    top: 73px;
    width: 100%;
    text-align: left;
    line-height: 24px;
    margin-left: -6px;
    padding-left: 5px;
    background: #fff;
    border: 1px solid #999;
    z-index: 2;
}
tr.selected {
    background-color: #a6e1ec !important;
}
td.text-white a {
    color: #fff;
}

/* Nur Firefox */
@-moz-document url-prefix() {
    th div {
        margin-left: -6px;
    }
}
.list thead {
    border-right: 1px solid #999;
    z-index: 1;
}
/*.list thead th {
    position: sticky;
    top: 0;
}*/
.static th {
    border: 1px solid #999;
}
a:link { 
    font-family: Arial;
    color: #333;
    font-size: 12px;
    text-decoration: none;
}
a:visited { 
    font-family: Arial;
    color: #333;
    font-size: 12px;
    text-decoration: none;
}
a:hover { 
    font-family: Arial;
    color: #999;
    font-size: 12px;
    text-decoration: none;
}
a:active { 
    font-family: Arial;
    color: #900;
    font-size: 12px;
    text-decoration: none;
}
h1, h2, h3, h4 {
    font-family: Arial;
    margin: 10px 0px;
}
h1 { 
    color: #666;
    font-size: 24px;
}
h2 { 
    color: #fff;
    font-size: 18px;
}	
h3 { 
    color: #333;
    font-size: 14px;
    font-weight: bold;
}
h4 { 
    color: #333;
    font-size: 12px;
    font-weight: bold;
}
.headline h2 {
    color: #555;
    font-weight: normal;
    margin: 10px 0 0;
    font-size: 16px;
}
.text-center { text-align: center; }
.text-right, .quantity { text-align: right; }
.text-red, .text-red a { color: red; }
.text-green, .text-green a { color: green; }
.text-black, .text-black a { color: #000; }
input[type="checkbox"], input[type="radio"] {
    margin: 2px 0px;
}
* {
    box-sizing: border-box;
}
*::before, *::after {
    box-sizing: border-box;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.xdebug-var-dump, .xdebug-error, .xe-notice {
    padding-top: 100px;
}
.error {
    color: red;
    font-weight: bold;
}

/* Main-Menu */
#main {
    overflow-x: auto;
}
#navi, #list, #submenu {
    min-width: 1875px;
}
#navi {
    min-width: 1200px;
    width: 100%;
    height: 33px;
    border-top: 1px solid;
    border-bottom: 2px solid;
    position: fixed;
}
.menu {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.menu li {
    float: left;
    height: 30px;
    min-width: 100px;
    text-align: center;
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc;
    border-top: 0px;
    border-bottom: 0px;
    border-style: outset; 
    border-collapse: collapse;
}
.menu li a {
    font-size: 15px;
    line-height: 30px;
    display: block;
    padding: 0px 10px;
}
.menu li ul, .menu li li ul {
    display: none;
    min-width: 200px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    z-index: 100;
    border: 1px solid #999;
    border-radius: 5px;
    background-color: #fff;
}
.menu li:hover ul.level1 {
    display: block; 
}
.menu li li:hover ul.level2 {
    display: block; 
}
.menu li li li:hover ul.level3 {
    display: block; 
}
.menu li li {
    display: block;
    float: none;
    border: 0px;
    text-align: left;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    border-top: 1px solid #fff;
}
.menu li li {
    background-color: #eee;
}
.menu li li a {
    color: #333;
}
.menu li li a:hover {
    color: #999;
}
.icon {
    opacity: 0.6;
    margin-right: 10px;
}
.fa-icon {
    height: 18px;
    margin: 0 5px;
    cursor: pointer;
}
.menu li li a:hover .icon {
    opacity: 0.3;
}
.active {
    font-weight: bold;
}
.submenu {
    font-weight: normal;
}
.accordion {
    padding: 10px;
}
.accordion .toggler {
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #999;
}
.accordion .toggler::after {
    position: absolute;
    right: 20px;
    top: 0;
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    transform: rotate(45deg);
}
.accordion_body {
    display: none;
}

/**/
.start {
    text-align:center;
    padding-top: 80px;
}
.start .logo {
    width: 400px;
    padding: 30px 10px;
    margin: 50px auto;
    background: #000; /*#261A31;*/
    img { width: 100%; }
} 
.start_bg h1, .start_bg h3 {
    color: #fff;
    font-weight: normal;
}
.start_bg h1  {
    font-size: 32px;
    letter-spacing: 1px;
}
.start_bg h3  {
    font-size: 16px;
    letter-spacing: .5px;
}
.start_bg2 {
    width: 100%;
    height: auto;
    min-height:100%;
    text-align:center;
    position: relative;
}
#loginBox input[type="button"], #loginBox input[type="submit"] {
    font-weight: bold;
}
.message {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    padding: 5px 0px;
}
.msg0 {
    color: #c00;
}
.msg1 {
    color: #090;
}
.select {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.select li {
   padding: 4px 10px;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   border-collapse: collapse; 
}
.select li div {
   font-size: 13px;
   font-weight: bold;
   cursor: pointer;
   padding: 2px;
}
.select li:hover {
    background-color: #B8D2E6;
}

.settings {
    float: right;
    padding: 5px 10px;
    border-left: 1px solid #999;
    cursor: pointer;
}
.home {
    float: left;
    border-style: outset;
    border-width: 0 1px;
    padding: 7px 10px;
}
.pulldown {
    position: relative;
    float: left;
    border-right: 1px solid #CCC; 
    padding: 9px 8px 9px 9px;
}
.naviIcon {
    opacity: 0.6;
    cursor: pointer;
}
.naviIcon:hover {
    opacity: 0.3;
}

.slidemenu {
    display: none;
    position: fixed;
    top: 33px;
    width: 240px;
    border: 1px solid #999;
    border-radius: 7px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 5px 1px #999;
    -moz-box-shadow: 1px 1px 5px 1px #999;
    box-shadow: 1px 1px 5px 1px #999;
    opacity: 1;
    z-index: 2;
    
    h3 {
        margin: 15px 0 5px 0;
    }
}
.slidemenu label {
    width: 100px;
    font-weight: bold;
    text-align: left;
}
.slm_info {
    position: relative;
    top: 100px;
    left: 0;
    margin: 0 auto;
    width: 500px;
    padding: 20px;
    border: 1px solid #999;
    border-radius: 7px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 5px 1px #999;
    -moz-box-shadow: 1px 1px 5px 1px #999;
    box-shadow: 1px 1px 5px 1px #999;
    opacity: 1;
}
.slm_top {
    font-weight: bold;
    color: #fff;
    padding: 5px 10px;
    background: #999;
}
.slm_content {
    padding: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.slm_buttons {
    margin-top: 10px;
    padding: 5px 0;
    border-top: 1px solid #ccc;
    background: #eee
}
.slm_buttons input[type="submit"], .slm_buttons  input[type="button"] {
    min-width: 80px;
}
.slm_bottom {
    padding: 5px;
    background: #999;
}
.actions {
    text-align: center;
    top: 80px;
    left: 60px;
    padding: 10px;
}
.search_more {
    text-align: center;
    top: 72px;
    right: 10px;
    width: 660px;
    padding: 10px 10px 20px 10px;
    
    h3 {
        font-size: 15px;
        padding-bottom: 10px;
        margin-top: 0px;
        border-bottom: 1px solid #999;
    }
    label {
       text-align: left;
       width: 140px;
       padding: 5px 0;
    }
    .row.col-6 label {
        width: 100%;
       text-align: center;
    }
}
.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    /*opacity: 0.2;*/
}
.back {
    text-align: center;
    padding: 5px;
}
.back a {
    font-weight: bold;
    font-size: 14px;
}
.itemList {
    text-align: left;
    padding: 10px 20px 20px 20px;
}
.import h2{
    color: green;
    text-align: center;
    text-transform: uppercase;
    margin: 5px 0;
}
.import .old h2{
    color: red;
}
.flag {
    height: 15px;
    margin: 3px 0;
    border: 1px solid #999;
    cursor: pointer;
}

/* Page-Menu */
#submenu {
    width: 100%;
    height: 40px;
    max-height: 40px;
    float: left;
    border-bottom: 2px solid;
    /*overflow: hidden;*/
}
.submButton {
    position: relative;
    float: left;
    text-align: center;
    margin: 8px 5px;
}
.submButton input[type=button] {
    font-size: 12px;
    padding: 1px 10px;
    border: 2px solid #999; 
    border-radius: 8px;
    min-width: unset;
    margin-top: -1px;
}
.submButton input[type=button].selectable {
    padding-right: 25px
}
.submButton input[type=button].selectable + input[type=checkbox] {
    position: absolute;
    right: 5px;
    top: 4px;
}
.submLink {
   display: inline-block;
   font-weight: bold;
   margin-top: 12px;
   padding: 0 10px;
   border-left: 1px solid #fff;
}
.submTitle {
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin: 8px 20px 0px 10px;
    z-index: 1;
}
.submTitle span {
    font-size: 12px;
}
.submCheckbox {
    float: left;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 30px;
}
.submSearch {
    float: right; 
    padding: 8px 20px 8px 0;
    border-left: 1px solid;
}
.submSearch.extended {
    width: 30px;
    padding: 8px 3px 3px 3px;
    margin: 3px 5px 3px -10px;
    border: 0;
}
.pulldown > label {
    position: relative;
    top: -5px;
    padding: 3px 30px 4px 5px;
    border: 1px solid #999;
    border-radius: 5px;
    background: #fff;
}
.pulldown > label::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
}
.pulldown > label.active {
    border-color: red;
}
.pulldown-inner {
    display: none;
    position: absolute;
    left: 10px;
    top: 35px;
    padding: 5px 15px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 10;
}
.pulldown .submButton {
    float: none;
    text-align: left;
    margin: 0;
}
.pulldown .submButton > div {
    float: none;
    width: 110px;
}
.pulldown .submButton:last-child > div {
    border: none;
}
.rahmen1 { 
    border: 2px solid #DDD; 
    border-style: inset; 
    border-collapse: collapse;
    padding: 1px;
}
.rahmen2 { 
    border: 1px solid #DDD;
    min-width: 70px;
    background-color: #CCDFEE;
    border-style: inset; 
    border-collapse: collapse;
    padding: 1px 5px;
    margin: 0px 5px;
}
.paging, .pages, .pageActiv, .pageName, .dots {
    float: left;
    color: #fff;
    font-weight: bold;
    margin-right: 1px;
}
.paging, .paging a, .pageName, .dots {
    padding: 5px;
}
.paging a {
    color: #fff;
    font-weight: bold;
    display: block;
}
.pages, .dots {
    background: #999;
}
.pageActiv {
    background: #807592;
}
.pages:hover {
    border-bottom: 2px solid #333;
}

#main {
    margin: 0px;
    padding: 33px 0 0 0;
    z-index: 1;
}
#content1 {
    width: 100%;
    height: 96%;
    text-align: center;
    background: #cec;
}
#content2 {
    width: 100%;
    padding: 10px;
    background: #fff;
    padding-top: 33px;
}
#list {
    height: 100%;
    overflow-y: auto;
    height: calc(100% - 40px);
}
#list.status {
    height: calc(100% - 95px)
}

.editHead {
    font-size: 13px;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
    /*padding-top: 38px;*/
}
.editHead2 {
    font-size: 14px;
    padding: 8px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid;
/*    padding-top: 38px;*/
}
.editInfo {
    padding: 10px;
}
.info1, .info2 {
    float: left;
    margin-right: 20px;
    vertical-align: middle;
    line-height: 20px;
    color: #333;
}
.info1 {
    font-size: 18px;
}
.info2 {
    font-size: 14px;
    font-weight: bold;
}
.info3 {
    font-size: 14px;
}
.info4 {
    float: right;
    margin-right: 20px;
    vertical-align: middle;
    line-height: 20px;
    color: #333;
}
.bold {
    font-weight: bold;
}
#navi {
    z-index: 4;
}
#submenu {
    z-index: 2;
}
#actions {
    z-index: 3;
}
#list {
    z-index: 1;
}

#confirmBox {
    display: none;
    position: absolute;
    top: 200px;
    left: 50%;
    width: 400px;
    /*height: 150px;*/
    margin-left: -200px;
    padding: 20px 20px 30px 20px;
    border: 2px solid #999;
    background: #fff;
}
.confirm-message {
    font-size: 14px;
    margin-bottom: 30px;
}
.confirm-buttons {
    text-align: right;
}
#confirmBox .yes, #confirmBox .no {
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #333;
    margin-top: 20px;
    margin-bottom: 30px;
    cursor: default;
}
#confirmBox .yes {
    margin-right: 10px;
}
#confirmBox .yes:hover, #confirmBox .no:hover {
    background-color: #ddd;
}
#confirmBox .yes:active, #confirmBox .no:active {
    background-color: #ccc;
}

/* Flexbox */
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
}
.flex-col3 {
    flex: 1 40%;
    max-width: 600px !important;
    margin: 15px !important;
}
.row {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px;
}
.row.center-content {
    justify-content: center;
}
.row > .col {
    flex: 1;
    margin: 5px;
}
.row.col-6 > .col {
    max-width: 16.66%;
    margin: 5px 0;
}
.search_more .row.col-6 {
    margin-top: 10px;
    border-top: 1px solid #999;
    > .col > div {
         margin-bottom: 10px;
    }
}
.row.filter {
    padding: 20px 30px;
    border-bottom: 1px solid #999;
    label { margin: 5px 5px 5px 0; }
    input.default { padding: 4px; }
}

/* Tables */
table.list {
    width: 100%;
}
table.list td {
    border: 1px solid #999;
}
table.list a {
    display: block;
}
table.list.status {
    margin-bottom: 53px
}
.tdHead {
    font-weight: bold;
    background-color: #fff;
    padding: 5px;
}
.tdLabel {
    border-bottom: 2px solid;
}
table.sticky {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
table.sticky th, td {
    border: 0;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
table.sticky th {
    position: sticky;
    top: 0;
    text-align: left;
    background: #fff;
    z-index: 1;
    &.center { text-align: center; }
}
table.sticky th a {
    display: block;
}
table.small {
    width: auto;
}
table.small td {
    width: 150px;
}
.clickable {
    cursor: pointer;
}
.checkmark {
    display: block;
    width: 14px;
    opacity:0.6;
    z-index: 1;
}
.service-icon {
    /*display: inline-block;*/
    width: 25px;
    vertical-align: middle;
    z-index: 1;
    &[title="MUSTER"], &[title="OEKO"], &[title="HOLO"] {
        margin: 0 5px;
    }
    &[title="MUSTER"] { width: 16px; }
    &[title="OEKO"] { width: 18px; }
    &[title="HOLO"] { width: 20px; }
}
.week {
    font-size: .9em;
    color: #777;
    font-style: italic;
}
.point {
    font-size: 30px;
    line-height: 14px;
    vertical-align: middle;
    color: #555;
}
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
} 
.clearfix::after {
  clear: both;
}
.table-cell {
    display: inline-block;
    vertical-align: top;
    padding: 3px 5px 3px 0;
    font-size: 14px;
    margin: 3px;
}
.table-cell.input {
    height: 25px;
    text-align: center;
    background-color: #eee;
    border: 1px solid #999;
    margin: 3px;
    vertical-align: middle;
    overflow: hidden;
}
.table-cell.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 10px;
}
#list.print {
    height: auto !important;
    padding: 0 !important;
}
#list.print .report-list {
    width: auto !important;
}
#list:not(.print) .report-list {
    height: calc(100% - 140px)
}
#list:not(.print) .report-list-body {
    height: calc(100% - 140px);
    overflow-y: auto;
    border-top: 1px solid #999;
}
.info-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 3px 10px;
    background: #ccc;
    border-top: 2px solid #999;
}
.info-label {
    display: inline-block;
    padding: 0 5px;
    font-size: 15px;
}
.info-label.margin {
    margin-right: 10px;
}
.info-value {
    display: inline-block;
    padding: 1px 10px;
    font-size: 15px;
    background: #eee;
    border: 1px solid #555;
    border-radius: 7px;
}
.info-box table {
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #777;
}
.info-box td {
    font-size: 13px;
    padding: 0 5px;
}
.info-box td b {
    font-size: 14px;
}
.info-box td .info-value {
    width: 100%;
    font-size: 14px;
    padding: 1px 10px;
}
span.sep {
    border-right: 1px solid #555;
    margin-right: 10px;
}
#list_wrapper {
    width: 1200px;
    padding-top: 50px;
    margin: 0 auto;
}
#list_wrapper.print {
    width: 950px;
}
#list_wrapper.closed {
    width: 1150px;
}
#list_wrapper .label {
    font-size: 18px;
}
#list_wrapper .bottom input[type=button], #list_wrapper .bottom input[type=submit] {
    font-size: 14px;
    height: auto;
    padding: 2px 10px;
}
#list_wrapper .bottom_row {
    font-size: 14px;
    border-top: 1px solid #999;
    padding: 5px 0;
}
.editable {
    margin-top: 30px;
}
.editable td, .editable th {
    font-size: 16px;
    border: 1px solid #333;
}
.editable th a {
    font-size: 16px;
}
#previewBox {
    position: fixed;
    right: 10px;
    top: 110px;
    display: none;
    width: 360px;
    height: 240px;
    background: #fff;
    border: 2px solid #999;
    z-index: 10;
}
.info-icon {
    font-family: serif;
    font-weight: bold;
    border: 1px solid #555;
    border-radius: 50%;
    margin: 0 5px;
    padding: 1px 6px;
    vertical-align: text-top;
    cursor: help;
}


/*
 * Modal
 */
dialog {
    position: fixed;
    left: 0;
    top: 10vh;
    width: 600px;
    max-height: 90vh;
    overflow: auto;
    border: 0;
    padding: 0;
    background: #fff;
    z-index: 100;
    transition: .2s;
}
.dialog-content {
    padding: 20px;
    border: 1px solid #999;
    background: #fff;
}
.dialog-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;

    .dialog-title {
        margin-bottom: 0;
        line-height: 1.5;
    }
    .dialog-close {
        color: #bc0d47;
        font-size: 30px;
        line-height: 0;
        padding: 0 12px;
        margin-top: -6px;
        margin-right: -10px;
    }
}
.dialog-body {
    .container { padding-top: 18px; }
}
dialog::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #00000055;
    z-index: -1;
}
tr.dialog-open, tr.edit {
    cursor: pointer;
    &:hover td { background: #f9f9f9; }
}
#imgLightbox {
    .dialog-body {
        figure {
            width: 100%;
            margin: 0;
        }
        img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 75vh;
        }   
    }
}

/* Auftrag drucken */
#printProfile {
    position: relative;
    width: 680px;
    height: 1030px;
    margin: 0 auto;
    padding: 20px 0;
}
#printProfile.all {
    margin-top: 50px;
}
#printLandscape {
    position: relative;
    width: 980px;
    height: 700px;
    margin: 50px auto 0 auto;
    padding: 20px 0;
}
.editPrintHead {
    height: 50px;
    border-bottom: 1px solid #999;
    margin-bottom: 30px;
}
.editPrintHead .inner {
    width: 750px;
    margin: 0 auto;
}
@media print {
    #printProfile.all {
        page-break-before: always;
        margin-top: 0;
    }
    #printLandscape {
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transform-origin: top right;
        margin-left: -980px;
        margin-top: 0;
        position: relative;
        top: 30px;
        page-break-before: always;
    }
    .editPrintHead {
        display: none;
    }
    #list, #list.status {
        height: auto;
    }
}

/*
 * Produktions-Planung
 */
.table-container {
    height: 100%;
    overflow-y:auto
}
.table-container.production {
    height: calc(100% - 500px);
}
.table-container.production.single {
    height: calc(100% - 150px);
}
.timeline-container {
    position: relative;
    height: 500px;
    background: #fff;
    margin-top: -1px;
    padding-top: 1px;
    padding-left: 140px;
    border-top: 2px solid #999;
}

.timeline-container.single {
    height: 150px;
}
.timeline-content {
    height: 100%;
    overflow-x: auto;
}
.timeline-content-inner {
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-right: 50px;
}
.tl-machines {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    background: #fff;
    border-right: 2px solid #ccc;
}
.tl-machines div {
    height: 44px;
    font-size: 18px;
    font-weight: bold;
    line-height: 44px;
    padding: 0 15px;
    border-bottom: 1px solid #ccc;
}
.tl-machines div.top1 {
    height: 41px;
}
.tl-machines div.last {
    height: 24px;
    border-bottom: none;
}
.tl-first {
    width: 140px;
}
.tl-flex {
    display: flex;
}
.tl-head-date, .tl-head-hour {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.tl-head-date {
    height: 40px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    padding-top: 14px;
}
.tl-head-hour {
    font-size: 16px;
    text-align: center;
    padding: 20px 0 5px 0;
}
.tl-body-row {
    position: relative;
}
.tl-row-quarter {
    position: relative;
    height: 44px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.tl-row-quarter.inactive {
    background: #eee;
    z-index: 6;
}
.tl-row-quarter.pause {
    background: #675796;
    z-index: 5;
}
.tl-jobs {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.tl-job {
    position: relative;
    display: inline-block;
    height: calc(100% - 1px);
    background: #bdf;
    border-right: 1px solid #555;
    cursor: pointer;
}
.tl-setupTime1, .tl-setupTime2, .tl-prodTime, .tl-diffTime {
    display: inline-block;
    height: 100%;
    background: #bec;
    border-left: 1px solid #999;
    margin-right: -4px;
}
.tl-setupTime2 {
    float: right;
    margin-right: 0;
    background: #eeb;
}
.tl-prodTime {
    background: #6af;
}
.tl-diffTime {
    background: #fa9;
}
.tl-row-title {
    position: absolute;
    left: -1px;
    top: 0;
    right: 0;
    height: 15px;
    padding-left: 5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f33;
    border-left: 1px solid #000;
    z-index: 15;
}
.tl-row-title.status-40 {
    background: #aaa;
}
.timeline-content #now {
    position: absolute;
    left: 200px;
    top: 35px;
    width: max-content;
    color: #7c93bc;
    font-size: 16px;
    font-weight: bold;
    padding: 3px 5px;
    border: 1px solid #97aad2;
    background: #fff;
    z-index: 10;
}
.timeline-content #now::after {
    position: absolute;
    left: 50%; /*calc(50% - 1px);*/
    top: 25px;
    width: 6px;
    height: 600px;
    content: '';
    background: #0ff;
}
/* Tablet */
.tablet .timeline-container.single {
    height: 190px;
}
.tablet .table-container.production.single {
    height: calc(100% - 190px);
}
.tablet .timeline-content #now {
    top: 25px;
    font-size: 19px;
}
.tablet .timeline-content #now::after {
    top: 30px;
}
.tablet .tl-row-quarter, .tablet .tl-machines div:not(.top1, .top2, .last) {
    height: 80px;
}
.tablet .tl-head-date {
    font-size: 20px;
}
.tablet .tl-head-hour {
    font-size: 22px;
    padding-top: 12px;
}
.tablet .tl-row-title {
    height: 24px;
    font-size: 19px;
}

/* 
 * Tablet 
 */
.tablet #navi, .tablet #main, .tablet #submenu {
    min-width: 1200px;
}
.tablet #navi {
    height: 43px;
    background-size: auto 40px;
}
.tablet .menu li {
    height: 40px;
}
.tablet .menu li a {
    font-size: 20px;
    padding: 5px 15px;
}
.tablet #submenu {
    top: 43px;
    height: 50px;
}
.tablet .submTitle {
    font-size: 20px;
}
.tablet .submTitle span {
    font-size: 16px;
}
.tablet .settings {
    padding: 6px 20px;
}
.tablet .naviIcon {
    width: 25px;
}
.tablet .slidemenu {
    top: 43px;
}

/* Tabelle */
.tablet #list {
    height: calc(100% - 106px);
}
.tablet .submTitle {
    margin-top: 13px
}
.tablet input[type="image"].search {
    height: 23px;
}
.tablet select.default, input[type="text"].default, input[type="text"].inactive {
    width: 350px;
    height: 32px;
}
.tablet .submSearch.extended {
    display: none;
}
.tablet input[type="image"].overlay {
    top: 5px;
}
.tablet td, .tablet th, .tablet th div, .tablet th a, .tablet td a {
    font-family: 'Arial MT Std', Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
}
.tablet td, .tablet th {
    padding: 15px 5px;
}
.tdHead {
    font-weight: normal;
}
.tablet table.list td, .tablet table.list th, .tablet table.list div {
    padding: 15px 5px;
}

/* Edit */
.tablet .tab-bar {
    position: relative;
    width: 1220px;
}
.tablet #formBorder.order {
    width: 1220px;
}
.tablet .formActions.edit {
    width: 1220px;
}
.tablet input[type="submit"].default,
.tablet input[type="button"].default,
.tablet input[type="button"].formButton {
    height: 32px;
}
.tablet .tab-content .panel label.order,
.tablet .tab-content .panel label.order2 {
    width: 190px;
    font-size: 16px;
    margin: 10px 0;
}
label span.lower {
    text-transform: none;
}
.tablet .tab-content .accordion .title {
    width: 180px;
    font-size: 17px;
    padding: 10px 0;
}
.tablet .panel div.default.label,
.tablet .panel div.short.label,
.tablet .panel div.short2.label,
.tablet .panel .size {
    font-size: 17px;
}
.tablet .tab-content .nolabel {
    margin-left: 195px;
}
.tablet div.short2 {
    width: 380px;
    padding: 5px 0 5px 5px;
    line-height: 2;
}
.tablet div.default, .tablet div.flexbox {
    width: 380px;
}
.tablet .article-header div.default, 
.tablet #article-container div.default {
    width: 320px;
}
.tablet #article-container div.default.phase {
    width: 458px;
}
.tablet .phase button {
    position: relative;
    z-index: 200;
}
.tablet #article-container .default.label{
    width: 510px;
}
.tablet .panel .size input {
    width: 50px !important;
}
.tablet .panel .articles-sum input {
    width: 80px !important;
}
.tablet select.default, 
.tablet input[type="text"].default, 
.tablet input[type="text"].inactive {
    width: 370px;
    height: 32px;
}
.tablet div, .tablet a {
    font-size: 17px;
}
.tablet input[type="text"].default.date {
    width: 120px;
}
.tablet input[type="text"].default.short,
.tablet select.default.short {
    width: 200px;
}
.tablet .optionBox {
    width: 150px;
}
.tablet .optionBox input[type="text"] {
    width: 50px !important;
}
.tablet .info-box td, .tablet .info-box td b, .tablet .info-box td .info-value {
    font-size: 16px;
    
}
.tablet .info-box td {
    font-weight: normal;
}
.tablet div.td200 {
    width: 240px;
    height: 40px;
    padding-top: 10px;
}
.tablet .positions-header .default.count {
    width: 240px;
}
.tablet .positions-header .default.label {
    width: 440px;
}
.tablet .positions-header .short.label {
    width: 75px;
}
.tablet #position-container .default.select {
    width: 240px;
}
.tablet #position-container select {
    width: 235px;
}
.tablet #position-container .default.color {
    width: 445px;
}
.tablet #position-container .default.color textarea {
    width: 380px;
}
.tablet #position-container .short.measure {
    width: 75px;
}
.tablet .col66 object {
    width: 500px;
    height: 350px;
}
.tablet #artwork_remark {
    width: 270px;
    height: 200px;
}
.tablet .legend {
    width: 1220px;
}
.tablet .optionContainer.prepared {
    width: 200px;
}
.tablet .panel .cart input[type="text"] {
    width: 150px;
}
.tablet .cart {
    max-width: 250px;
}
.tablet .button_small {
    padding: 5px 15px;
}
.tablet div.short.color_system {
    width: 280px;
}
.tablet .modal {
    margin-top: 150px;
}
.tablet .modal input.action {
    font-size: 24px;
    height: auto;
    padding: 10px 20px;
    margin: 10px;
}
.tablet h3 {
    font-size: 22px;
}
.tablet .modal h3 {
    font-size: 18px;
}

/* 
 * Drucprotokoll 
 */
.printlog img {
    width: 100%;
    image-orientation: from-image;
}
.print-page {
    width: 720px;
    /*page-break-after: always;*/
}

/* Scheduler */
#scheduler_wrapper {
    width: 1200px;
    max-width: 100%;
    /*padding-top: 30px;*/
    margin: 0 auto;
    page-break-inside: avoid;
    
    .inline {
        display: inline-block;
        vertical-align: top;
    }
    .inline.first {
        border-left: 1px solid #999;
    }
    .inline.edit {
        border: 1px solid #999;
    }
    .inline.bottom {
        border: 0;
        text-align: center;
    }
    .shift {
        display: inline-block;
        width: 100%;
        height: 560px;
        padding: 0 5px;
        overflow: auto;
    }
    .shift.edit {
        height: 670px;
    }
    .shift.edit.col2 .employee {
        display: inline-block;
        margin: 3px 0;
        width: 100%;
    }
    .shift.view {
        height: 675px;
        padding: 2px;
    }
    .col5 {
        width: 20%;
    }
    .col6 {
        width: 16.66%;
    }
    .col7 {
        width: 14.28%;
    }
    .col8 {
        width: 12%;
    }
    .col12 {
        width: 8.33%;
    }
    .label {
        display: inline-block;
        vertical-align: top;
        margin-top: 2px;
    }
    .label, .col_head {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .noborder {
        border: 0;
    }
    .footer {
        text-align: center;
        border: 0;
        margin-top: 10px;
    }
    .info {
        font-size: 14px;
        font-weight: normal;
        color: #c00;
    }
    .select_kw {
        display: inline-block;
        margin: 0 5px 0 5px;
        vertical-align: top;
    }
    .select_hours {
        width: 40px;
        margin: 2px auto 0 auto;
    }
    .shift_date {
        font-weight: normal;
        font-style: italic;
    }
    .show {
        display: inline-block;
    }
    .back {
        float:right;
    }
    .total {
        display: inline-block;
        width: 40px;
        padding: 5px 0;
        background-color: #F7FF99;
        border: 1px solid #999;
    }
    .col_head {
        text-align: center;
        padding: 5px 0;
        border-bottom: 1px solid #999;
    }
    .shift-box {
        width: 27%;
        border: 0;
        padding: 0;
        margin: 0 5px 0 0;
    }
    .shift-container {
        margin-bottom: 20px;
    }
    .container-team {
        display: inline-block;
        width: calc(50% - 2px);
    }
    .mashine-box {
        border: 3px solid #333;
        border-bottom: 0;
        
        &.header {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            padding: 5px;
            border: 4px solid #333;
            border-bottom: 0;
        }
        .employee {
            margin: 0;
        }
    }
    .block_head {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        padding: 5px 0;
        border: 2px solid #333;
        border-bottom: 0;
    }
    .activity-header {
        font-size: 18px;
        text-align: center;
        padding: 3px 0;
        border: 1px solid #333;
        border-bottom: 3px solid #333;
    }
    .rowM {
        display: flex;
        flex-wrap: wrap;
        border-left: 1px solid #333;
        border-bottom: 3px solid #333;
    }
    .colE, .colM {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0 2px;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
    }
    .colE {
        width: 33.33%;
        height: 56px;
    }
    .colM {
        width: 13%;
        font-size: 16px;
        text-align: center;
    }
    .colE.sf {
        width: 43.5%;
    }
    .no-team .colE {
        width: 16.66%;
    }
    .no-team-show .colE {
        width: 8.33%;
    }
    #scheduler_edit img {
        width: 28px;
        cursor: pointer;
    }
    .employee, .name {
        text-align: center;
        hyphens: auto;
        padding: 3px;
        margin: 5px 0;
        border: 1px solid #999;
        border-radius: 5px;
        background-color: #fff;
    }
    .employee {
        cursor: move;
    }
    .employee.dragged {
        color: #000;
        background-color: #cff;
    }
    .bottom {
        text-align: center;
        margin-top: 30px;
    }
    .bottom input[type=button], .bottom input[type=submit] {
        font-size: 14px;
        height: auto;
        padding: 2px 10px;
    }
    .green { background-color: #cee4b6; }
    .lightgreen { background-color: #edffed; }
    .sandy { background-color: #eee0c5; }
    .lightsandy { background-color: #fcf9f2; }
    .purple { background-color: #E6C3C3; }
    .lightpurple { background-color: #f6f0f0; }
    .yellow { background-color: #F7FF99; }
    .lightyellow { background-color: #fbffdd; }
    .grey { background-color: #ddd; }
    .lightgrey { background-color: #f9f9f9; }
    .blue { background-color: #ADC0FF; }
    .lightblue { background-color: #E9EEFF; }
    .turquois { background-color: #B6E0E4; }
    .lightturquois { background-color: #F2FEFF; }
    .orange { background-color: #ffc90e; }

    .section_black { background-color: #000; }
    .section_red { background-color: #cc2628; }
    .section_blue { background-color: #32458a; }
    .section_grey { background-color: #c7c7c9; }
    .section_green { background-color: #91c489; }
    .section_light-blue { background-color: #5d98d2; }
    .section_pink { background-color: #a0539b; }
    .section_black, .section_red, .section_blue,
    .section_green, .section_light-blue, .section_pink {
        color: #fff;
    }
    
    .legend {
        margin: 40px 0;
        
        .col {  margin-right: 30px; } 
        .section {
            display: inline-block;
            width: 30px;
        }
    }
}
#scheduler_head {
    padding: 10px;
    background-color: #fff;
    margin: 20px 0;
    border-bottom: 2px solid #ccc;
}
#scheduler_head input[type=text] {
    height: 23px;
}
#scheduler_body {
    background-color: #fff;
}

#scheduler_head select {
    height: 23px;
}



/*
 * Ladegrafik
 */
#loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
#loading.active {
    display: flex;
}
.spinner {
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}
@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #555, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #555, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #555, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #555, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #555, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #555, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #555, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #555;
  }
}

@media only screen and (max-width: 960px) {
    #scheduler_wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #scheduler_head {
        height: auto;
        margin: 0;
        padding: 15px 0;
        font-size: 14px;
        text-align: center;
    }
    #scheduler_wrapper .label, #scheduler_wrapper .col_head {
        display: block;
        font-size: 24px;
    }
    #scheduler_wrapper .label.kw {
        display: inline-block;
        margin: 10px 0;
    }
    #scheduler_wrapper .label.kw2 {
        display: inline-block;
        font-size: 32px;
        margin: 5px 0;
    }
    #scheduler_wrapper .select_kw {
        display: inline-block;
        margin: 20px 0;
        vertical-align: middle;
    }
    #scheduler_wrapper .shift_date {
        display: inline;
        margin-top: 0;
        font-size: 20px;
    }
    #scheduler_wrapper .show {
        display: block;
    }
    #scheduler_wrapper .back, #scheduler_wrapper .show {
        float: none;
        margin: 0;
    }
    #scheduler_wrapper .label, #scheduler_wrapper .show, #scheduler_wrapper .back {
         padding: 10px 0;
    }
    #scheduler_wrapper .inline {
        display: block;
        vertical-align: top;
        border: 1px solid #999;
    }
    #scheduler_wrapper .shift-box, #scheduler_wrapper .col8, #scheduler_wrapper .col12, #scheduler_wrapper .colM, #scheduler_wrapper .colE, #scheduler_wrapper .colE.sf {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }
    #scheduler_wrapper .rowM {
        height: auto;
    }
    #scheduler_wrapper .colM, #scheduler_wrapper .colE {
        border: 0;
    }
    #scheduler_wrapper .colM {
        font-size: 24px;
        padding: 5px;
        border-bottom: 2px solid #333;
    }
    #scheduler_wrapper .colE {
        min-height: 15px;
    }
    #scheduler_wrapper .block_head {
        font-size: 24px;
        padding: 10px 0;
    }
    #scheduler_wrapper .employee, #scheduler_wrapper .name {
        font-size: 18px;
        padding: 10px 5px;
        margin: 5px;
    }
    #scheduler_wrapper .col_head {
        border: 2px solid #333;
    }
    #scheduler_wrapper .shift.edit, #scheduler_wrapper .shift.view {
        min-height: 30px;
        height: auto;
        border: 5px solid #333;
    }
    select, input {
        font-size: 22px;
        height: auto !important;
    }
    input[type=submit], input[type=button]  {
        color: #fff;
        padding: 8px 30px;
        background-color: #1A65B3;
    }
    .hideonmobile {
        display: none;
    }
}

@media print {
    #scheduler_wrapper {
        width: 1000px;
        padding: 0;
        margin: 0;
    }
    #scheduler_head {
        height: auto;
    }
    #scheduler_wrapper .col_head {
        border-bottom: 2px solid #333;
    }
    #scheduler_wrapper .inline.edit {
        height: 548px;
        border: 2px solid #333;
    }
    #scheduler_wrapper .name {
        padding: 2px;
        margin: 2px;
    }
    .hideonprint {
        display: none !important;
    }
    
    body { overflow: visible }
    #main { overflow-x: visible !important; }
    #main, #content2 { padding-top: 0; }
    #navi, .editHead, .editHead2, label.tab-label, .formActions, .legend, .before-form { display: none; }
    #formBorder.order.protocol {
        width: auto;
        padding: 0;
        border: none;
    }
    .protocol .row.bottom { display: none; }
    .protocol .inside { page-break-before: always; }
    .protocol .inside.first { page-break-before: avoid; }
    .protocol .inside { border: none; }
}

/*
 * Auswertung
 */
.reports {
    margin: 30px;
    
    .row {
        flex-flow: nowrap;
        margin: 0;
        > * { flex-shrink: 0; }
        
        .section {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            padding: 5px;
            border-bottom: 1px solid #fff;
        }
        .hidden {
            width: 60px;
            color: transparent;
            padding: 5px;
        }
        .name, .col1, .col2 {
            padding: 4px;
            border: 1px solid #999;
            &.noborder { border: none; }
        }
        .col1, .col2 {
            text-align: center;
            &.actual { background: #fe9; }
            &.open { background: #fcc; }
            &.finished { background: #cfc; }
        }
        .name {
            display: flex;
            align-items: center;
            width: 200px;
            font-weight: bold;
        }
        .col1 { width: 75px; }
        .col2 { width: 150px; }
        &.header { 
            .col1, .name { background: #ddd; }
            .col1 { padding: 8px 0; }
        }
        h3 { 
            font-size: 1.1rem;
            color: darkorange;
            margin: 3px 0;
        }
        .inverted, .inverted .name, .inverted .col2 {
            color: #fff;
            background: #333;
        }
        .grey, .grey .name, .grey .col2 {
            color: #fff;
            background: #667;
        }
        .dark1 {
            color: #fff;
            background: #78a1a5;
            border: 1px solid #000;
        }
        .dark2 {
            color: #fff;
            background: #7e7ba3;
            border: 1px solid #000;
        }
        &.pieces { background: #ffc; }
        .capacity {
            width: 120px;
            input { 
                width: 70px;
                text-align: center;
            }
        }
    }
    .report-container {
        margin-bottom: 30px;
        &.target { 
            margin-right: 30px;
            h3 { 
                color: #333;
                margin: 10px 0;
            }  
        }
        &.target-vas {
            h4 {
                font-size: 14px;
                padding-left: 50px;
                margin-bottom: 10px;
            }
            tbody {
                border-top: 1px solid #999;
                border-left: 1px solid #999;
            }
            input {
                width: 40px;
                margin: 3px 5px;
                text-align: center;
            }
        }
    }
}
.report-list-head {
    margin: 5px 0;
}
.report_row {
    display: flex;
    flex-wrap: nowrap;
    margin: 3px 0;
}
.report_cell, .report_label {
    flex: 5%;
    font-size: 14px;
    padding: 3px 5px;
    margin: 0 2px;
    /*background-color: #f9f9f9;*/
}
.report_label {
    display: flex;
    align-items: self-end;
}
.report_cell {
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #999;
}
.numbers .report_cell {
    background-color: #eee;
}
.report_cell.small, .report_label.small {
    flex: 2%;
}
.report_cell.large, .report_label.large {
    flex: 10%;
    text-align: unset;
}
.report_cell.xl, .report_label.xl {
    flex: 15%;
    text-align: unset;
}
#list .formgroup.checkbox {
    margin: 35px 10px 0 10px;
}
.reports-sum {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #999;
}
.reports .table {
    width: 100%;
    border: 2px solid #333;
    
    .hours { background: #a9d08e; }
    .orders { background: #c6e0b4; }
    .total { background: #daf2d0; }
    .delivery { background: #ff0; }
    .border-right { border-right: 2px solid #333; }
    th { 
        text-align: center;
        font-weight: normal;
        border: 1px solid #333;
    }
    td { 
        text-align: right;
        border: 1px solid #333;
    }
    td.center { text-align: center; }
    thead {
        .row1 th, .bold { font-weight: bold; }
        .row1 th { padding: 10px 0; }
        .row2 th { padding: 3px 0; }
        .shift1 { background: #f7c7ac; }
        .shift2 { background: #83cceb; }
        .row3 th { width: 70px; }
        th.shift1, th.shift2 { width: 45px; }
    }
    tbody {
        .shift1 { background: #f7c7ac; }
        .shift2 { background: #dae9f8; }
    }
    &.vas_gg {
        .hours { background: #4D93D9; }
        .orders { background: #A6C9EC; }
        .total { background: #DAE9F8; }
    }
    &.vas_hft {
        .hours { background: #F1A983; }
        .orders { background: #F7C7AC; }
        .total { background: #FBE2D5; }
    }
}
.reports .table.daily {
    width: auto;
    .title, .date {
        font-size: 22px;
        font-weight: bold;
    }
    .title { text-transform: uppercase; }
    .date { color: red; }
    th, td { 
        font-weight: bold;
        text-align: center;
        padding: 3px;
    }
    .vas_da td { background: #a9d08e; }
    .vas_gg td { background: #4D93D9; }
    .vas_hft td { background: #F1A983; }
    /*td.lighten { background: #c5e0b3; }*/
    td.lighten { box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4); }
    .sum td { color: red; }
    h3 { font-size: 18px; }
    textarea {
        width: 100%;
        height: 70px;
    }
    .submit { margin: 5px 0; }
}

/*
 * Fonts
 */
@font-face {
    font-family: 'Arial MT Std';
    src: url('../fonts/ArialMTStd/ArialMTStd-Medium.woff2') format('woff2'),
        url('../fonts/ArialMTStd/ArialMTStd-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial MT Std';
    src: url('../fonts/ArialMTStd/ArialMTStd-MediumItalic.woff2') format('woff2'),
        url('../fonts/ArialMTStd/ArialMTStd-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}