*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: "Karla", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1a1a1a;
  text-align: left;
  background-color: #f0f1f5;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.topHeader{ display: flex; justify-content: space-between; align-items: center; padding: 20px 10px; }
.topHeader h1{ font-size: 35px;}

.topHeader .areaDate{ display: flex; justify-content: space-around; align-items: center;}
.topHeader .areaDate h1{ padding: 0 10px; }
.topHeader .areaDate a:first-child{ margin-right: 5px; }
.topHeader .areaDate a{ font-size: 12px; }

.topHeader .areaTitle { width: 290px; display: flex; align-items: center; }
.topHeader .areaTitle a{ margin-left: 10px; }

.topHeader .areaLegend{ width: 290px; }
.topHeader .areaLegend ul{ list-style: none; margin: 0; padding: 0; }
.topHeader .areaLegend ul:after{ content: ""; clear: both; display: table; }
.topHeader .areaLegend ul li{ width: 33.33333%; float: left; font-size: 10.5px; padding: 3px 0; }
.topHeader .areaLegend ul li:last-child{ float: right; }
.topHeader .areaLegend ul li span{ display: inline-block; text-align: center; line-height: 18px; }
.topHeader .areaLegend ul li span.statusLabel_4,
.topHeader .areaLegend ul li span.statusLabel_6{ border: 1px solid #000; width: 18px; height: 18px; border-radius: 100%;   }
.topHeader .areaLegend ul li span.statusLabel_5{ border: 1px solid #000; width: 18px; height: 18px;   }


.table_container{ width: calc(100% - 20px); height: calc(100vh - 92px); margin: 0 10px; overflow: auto; position: relative; }

.fancyTable{ border: 1px solid #b1b1b1; border-collapse: collapse; border-spacing: 0;  table-layout: fixed; }
.fancyTable td, 
.fancyTable th { border: 1px solid #b1b1b1; padding: 3px; font-size: 10.5px; }
.fancyTable tbody tr td { background-color: #fff; color: #262c31; height: 54px; padding: 4px 5px 0; vertical-align: middle; text-align: center; }
.fancyTable tbody tr.odd td { background-color: #f2f2f2; }
.fancyTable tbody tr.today td, 
.fancyTable tbody tr.today th { background: #fbf8c3; }

.fancyTable td.cell_color0{ color: #0070c0; }
.fancyTable td.cell_color1{ color: #000; }
.fancyTable td.cell_color2{ color: #ff0000; }

.fancyTable tbody tr td .status span{ margin: 3px; line-height: 14px; display: inline-block; font-size: 9.5px; }
.fancyTable tbody tr td .status span.statusLabel4,
.fancyTable tbody tr td .status span.statusLabel6{ border: 1px solid #000; width: 15px; height: 15px; border-radius: 100%;   }
.fancyTable tbody tr td .status span.statusLabel5{ border: 1px solid #000; width: 15px; height: 15px;  font-size: 10px;   }

.fancyTable td.cell_color0 .status span.statusLabel4,
.fancyTable td.cell_color0 .status span.statusLabel6,
.fancyTable td.cell_color0 .status span.statusLabel5{ border-color: #0070c0; }
.fancyTable td.cell_color1 .status span.statusLabel4,
.fancyTable td.cell_color1 .status span.statusLabel6,
.fancyTable td.cell_color1 .status span.statusLabel5{ border-color: #000; }
.fancyTable td.cell_color2 .status span.statusLabel4,
.fancyTable td.cell_color2 .status span.statusLabel6,
.fancyTable td.cell_color2 .status span.statusLabel5{ border-color: #ff0000; }

.fancyTable td{ min-width: 82px !important; max-width: 82px !important;  }
.fancyTable th{ background-color: #fcf8e3; font-size: 16px; text-align: center; min-width: 37px !important; max-width: 37px !important; font-weight: normal; }

.fancyTable thead th,
.fancyTable thead td{ position: -webkit-sticky; position: sticky; top: 0; }

.fancyTable th:before,
.fancyTable thead td:before{ content: ""; border: 1px solid #b1b1b1; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; }

.fancyTable thead th:nth-child(1) { position: sticky; left: 0; z-index: 2; }
.fancyTable thead th:nth-child(2) { position: sticky; left: 37px; z-index: 2; }

.fancyTable tbody th:nth-child(1) { position: sticky; left: 0; z-index: 1; }
.fancyTable tbody th:nth-child(2) { position: sticky; left: 37px; z-index: 1; }

.fancyTable tfoot th:nth-child(1) { position: sticky; left: 0; z-index: 2; }
.fancyTable tfoot th:nth-child(2) { position: sticky; left: 37px; z-index: 2; }


.fancyTable thead td{ text-align: center; background-color: #d9e1f2; }
.fancyTable tfoot td{ text-align: right; font-size: 16px; padding-left: 10px; padding-right: 10px; background: #d9e1f2; }

.fancyTable .dayoff th{ color: #f00;}

.fancyTable .dayoff_content{ color: #f00; display: flex;align-items: center; justify-content: center; height: 100%; }

.fancyTable thead td .userType_0{ border-bottom: 1px dotted #262c31; margin-bottom: 3px; padding-bottom: 2px;}
.fancyTable thead td .userType_1{ font-size: 14px;}

#userListModal .user_list{ columns: 2; -webkit-columns: 2; -moz-columns: 2; margin-bottom: 0; }
#userListModal .user_list li{ cursor: move; padding: 3px 10px; }


.pc-view{ display:block; }
.pc-view-table{ display: table }
.pc-view-inline{ display: inline-block }
.sp-view{ display:none !important; }
.sp-view-table{ display:none !important; }
.sp-view-inline{ display:none !important; }
@media screen and (max-width:767px) {
	.pc-view{ display:none !important; }
	.sp-view{ display:block !important; }
	.pc-view-table{ display: none !important }
	.sp-view-table{ display: table !important }
	.pc-view-inline{ display: none !important }
	.sp-view-inline{ display: inline-block !important }

    .topHeader{ display: block; padding: 5px; }

    .topHeader h1{ font-size: 28px;}

    .topHeader .btn{ padding: 0.375em 0.5rem; }

    .topHeader .areaLegend{ width: 100%; }
    .topHeader .areaLegend ul li { display: inline-block; padding: 5px 8px 0 0; float: none; width: auto; font-size: 10px; }
    .topHeader .areaLegend ul li:last-child{ padding-right: 0;}
    .topHeader .areaLegend ul li span{ width: 17px; height: 17px; line-height: 16px; }

    .topHeader .areaDate{ width: 365px; padding: 20px 0; }
    .topHeader .areaDate a { font-size: 11px; }
    .topHeader .areaDate h1{ padding: 0 6px; }

    .table_container{ width: calc(100% - 10px); margin: 0 5px; }
    
}