#wrapper {
  overflow: auto;
}

@media screen and (min-width: 899px) {
  #header {
    display: none;
  }
}

/* テーブル関連 { */
.lrm-table {
  table-layout: fixed;

  /* position:stickyでborderが適用されるようにする */
  border-collapse: separate;
  border-spacing: 0;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;

  /* Hack for Firefox */
  border-top-width: 0px !important;
  border-left-width: 0px !important;
  border-right-width: 0px !important;
  /* chartの領域と重なるためz-index指定 */
  position: relative;
  z-index: 1;
}

.lrm-table .user.locked {
  color: #999;
}

/* table border-right */
.lrm-table th:last-child,
.lrm-table td:last-child {
  border-right : 1px solid grey;
}

.lrm-table .hidden {
  visibility: hidden;
}

.lrm-table .hidden td {
  border: none;
}

.lrm-table .hidden th {
  border: none;
}

/* 稼働時間のテーブルとチャートをくっつける
 * 禁断のWebkit/Blink用ハック */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .lrm-table.workload {
    margin-top: -19px !important;
  }
}

/* 稼働時間のテーブルとチャートをくっつける
 * Webkit/Blink以外のエンジンではこちらが有効*/
.lrm-table.workload {
  margin-top: -14px;
}

.lrm-table tbody tr th.total {
  background-color: #ffffff;
}

.lrm-table tbody tr.lrm-odd:not(.selected) th.row-key {
  background-color: #ffffff;
}

.lrm-table tbody tr.lrm-even:not(.selected) th.row-key {
  background-color: #f5f5f5;
}

.lrm-table tbody tr.planned {
  background-color: #fffee5;
}

.lrm-table tbody tr.work_plan {
  background-color: #fff8ea;
}

.lrm-table tbody tr.actual {
  background-color: #deedd9;
}

.lrm-table tbody tr.planned.selected {
  background-color: #fffcc7;
}

.lrm-table tbody tr.work_plan.selected {
  background-color: #fdf1d6;
}

.lrm-table tbody tr.actual.selected {
  background-color: #cdedc2;
}

.lrm-table tbody tr:hover > th,
.lrm-table tbody tr:hover > td:not(.over):not(.free) {
  background-color: #faf7bf !important;
}

.lrm-table th,
.lrm-table td {
  border-right: 0;
  border-bottom: 0;
}

.lrm-table tbody th,
.lrm-table tbody td {
  color: #404040;
}

.lrm-table tbody th.row-key {
  word-wrap: break-word;
}

/* ヘッダセル */
.lrm-table thead th {
  word-wrap: break-word;
  white-space: nowrap;
  font-size: 75%;
}

.lrm-table th.row-key-header {
  font-size: 100%;
  white-space: normal;
}

.lrm-table th.row-key-header a {
  color: #5884ad;
}

.lrm-table th.sunday,
.lrm-table th.holiday,
.lrm-table th.saturday.holiday {
  background-color: #f2c7aa;
  color: #b31d23;
}

.lrm-table th a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.lrm-table th.date a,
.lrm-table th.weekday a {
  color: #404040;
}

.lrm-table th.saturday a,
.lrm-table th.sunday a,
.lrm-table th.holiday a {
  color: #b31d23;
}

.lrm-table th.planned-header {
  background-color: #fbeec9;
}

.lrm-table th.actual-header {
  background-color: #e6f0d1;
}

.lrm-table th a:hover {
  color: #169;
}

/* chromeではvisibility:collapseが下のセルのborderを消してしまうため、以下を適用*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .lrm-table tr.column-width-row {
    visibility: visible !important;
    background-color: rgba(0, 0, 0, 0);
  }
}

.lrm-table tr.column-width-row th,
.lrm-table tr.column-width-row td {
  border: none;
}

.lrm-table thead tr.header-row th,
.lrm-table thead tr.header-row td {
  font-size: 13px;
}

.lrm-table thead tr th#row_total {
  background-color: #fbeec9;
}

/* データセル */
.lrm-table tbody td {
  width: 33px;
  text-align: right;
  font-size: 11px;
}

.lrm-table tbody td.free {
  color: #00205d;
  background-color: #b8d4dc !important;
}

.lrm-table tbody td.over {
  color: #641620;
  background-color: #f5c3af !important;
}

/* テーブルの一部を隠すための設定 */

.chart-head {
  /* Hack for Firefox */
  border-bottom-width: 0px !important;
}

/* } */

/* フォーム関連 { */
.query-selected {
  font-weight: bold;
}

.apply-buttons-time-series span {
  font-weight: bold;
}

fieldset#filters table td.search-condition-left-area {
  vertical-align: top;
  padding-right: 10px;
}

fieldset#filters table td.search-condition-apply-button-area {
  vertical-align: bottom;
}

.lrm-target-box {
  width: 400px;
  height: 100px;
  overflow-y: scroll;
  border: 1.5px grey solid;
  overflow-x: hidden;
  white-space: nowrap;
}
/* } */

#indicator {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -2em 0 0 -10em;
  padding: 1em;
  color: #fff;
  font-size: 14px;
  text-align: center;
  z-index: 9999;
  background-color: #000;
}

#tab-header {
  display: flex;
}

#tab-header > * {
  width: 50%;
}

#tab-header-left > * {
  float: left;
  margin-left: 30px;
}

#tab-header-right > * {
  float: right;
  margin-right: 30px;
}

.jsFlash {
  position: fixed;
  top: 100px;
  width: 80%;
  left: 10%;
  z-index: 100;
}

/* テーブル ヘッダー 固定 */
/* 左ヘッダー*/
.lrm-table .left-header {
  position: sticky;
  background-color: #fff;
}

/* スクロールしたときにテーブルborderが消える問題に対応 */
.lrm-table .left-header.leftmost::before {
  content : "";
  position : absolute;
  top : 0;
  left : -1px;
  width : 100%;
  height : 100%;
  border-left : 1px solid grey;
  z-index: -1;
}

.lrm-table .left-header::after {
  content : "";
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  border-right : 1px solid grey;
  z-index: -1;
}

/* テーブル、グラフ部分のみを横スクロールさせる */
#tab-main {
  overflow-x: scroll;
}
/* For IE11 */
@media all and (-ms-high-contrast: none) {
  #tab-main {
    overflow-y: visible;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding-bottom: 20px; /* スクロールバーとコンテンツが重ならないように */
  }
}

/* 上部固定でスクロールしたときにテーブルの左側にコンテンツがはみ出ないようにする */
.lrm-top-fixed-table::before {
  content : "";
  position : fixed;
  top : 0;
  left : 0;
  width : 10px;
  height : 100%;
  background-color: #fff;
  z-index: 5;
}

/* 上部ヘッダー */
.lrm-table .top_fixed {
  position: fixed;
  top: 0;
  left: 10px;
  z-index: 2;
  width: max-content;
}

.lrm-table .top_fixed th::after {
  content : "";
  position : absolute;
  top : 0;
  left: 0;
  width : 100%;
  height : 100%;
  border-bottom : 1px solid grey;
}

.lrm-table .top_fixed th {
  position: fixed;
}

.lrm-table .top_fixed th.weekday {
  background-color: #fff;
}

.lrm-table .top_fixed th {
  height: 18px;
  padding: 2px;
}

.lrm-table .top_fixed th.row-key-header {
  z-index: 3;
}
/* For IE11 */
@media all and (-ms-high-contrast:none){
  .top_fixed th {
    border: 1px solid #333;
  }
}

/* 画面を最終日方向へ横スクロールすると、右側の日時のグラフ部分が表示されない問題に対応 */
#chart-container {
  overflow: visible !important;
}