caption {text-align:center;border-bottom:1px solid lightgray;}

colgroup.a {background-color: aliceblue}
colgroup.b {background-color: antiquewhite}

tr.updated td { color: purple !important;background-color: lightyellow !important;}

td.xl, th.xl {width:120px;}
td.xs, th.xs {width:40px;}
td.xxs, th.xxs {width:25px;}

table.wtr {
  border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;
  table-layout: fixed;
  td, th {
    padding: 6px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
  }
  td:last-child, th:last-child { text-align:right; }
  thead { border-bottom: 1px solid var(--border); }
  tfoot { border-top:1px solid var(--border); }
  tbody tr:nth-child(even) { 
    background-color: var(--background);
    button { background-color: var(--background-alt); }
    button:hover { background-color: var(--background-body); }
  }
}

table#shifts {
  white-space: nowrap;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;

  thead {
    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #fff; 
      font-weight: 600;
      color:var(--gapmed-petrol);
      font-size:13px;
      > div { border-bottom:1px solid #ddd; }
    }
    th:first-child { position:sticky; left:0; z-index:2; }
    tr:nth-child(2) th{top:23px;}
    tr:nth-child(3) th{top:44px;}
    tr:nth-child(4) th{top:65px;}
  }
  tbody {
    th {
      font-weight: 400;
      color:var(--gapmed-petrol);
      text-align: center;
      position: sticky;
      left: 0;
      background: white;
      z-index: 1;
    }
  }
  th + th {border-left:1px solid #ccc;}
  th.z + th.w, th.w + th.z, td.z + td.w, td.w + td.z { border-left:1px dashed black; }
  th.corporation {line-height:1.5;}
  td {
    text-align: center;
    position:relative;
    border-bottom:1px solid #ddd;
    b {
      font-size:13px;
      font-weight:normal;
      display:inline-block;
      margin:2px 4px;
    }
    i {
      position:absolute;
      top:0;
      left:0;
      background:#FFFFC2;
      font-size:50%;
      font-style:normal;
    }
  }
  td+td { border-left:1px solid #ddd;}
}

td.area-compensations {
  details {
    font-size:13px;
    kbd, code {font-size:11px;}
  }
}
.timing-filter, .turnover-filter,
.programmings-filter, .rewards-filter {
  select { min-width: 150px; }
}

/* smartphones */
@media screen and (max-width: 375px) {
  table#shifts th.corporation, 
  table#shifts th.kli, 
  table#shifts tr#divisions th:not(:first-child), 
  table#shifts tr#work-area-names th:not(:first-child) {
    position: sticky;
    left: 60px;
    text-align: left;
    border-left: 1px solid #eee;
  }
  table#shifts th.day{position:sticky;top:110px;border-top:2px solid #eee;}
}