@charset "UTF-8";

.bg_blue {
  background-color: #17a2b8 !important;
  color: white;
}

.bg_gray {
  background-color: #cbcbcb !important;
}

.bg_blue_light {
  background-color: #d3eefa !important;
}

.bg_white {
  background-color: white !important;
}

.c_red {
  color: #D1030A;
}

.c_text_blue {
  color: #21a2e3;
}

body {
  background-color: rgb(226, 226, 226);
  padding-bottom: 30px;
}

.main_container {
  max-width: 1600px;
  margin: auto;
}

#header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
}

#header .logout:hover {
  text-decoration: none;
}

#main {
  position: relative;
  top: 60px;
  left: 0px;
  width: 100%;
  padding-bottom: 30px;
}

.main_wrapper {
  background-color: white;
  height: auto;
  min-height: calc(100vh - 150px);
}

table td {
  border-color: #dee2e6 !important;
}

a {
  color: #212529 !important;
}

a:hover {
  color: #212529 !important;
  text-decoration: underline;
}

button:focus {
  box-shadow: none !important;
}

#identify_wrapper {
  width: 800px;
}

#review_wrapper {
  margin: auto;
  margin-top: 15px;
  z-index: 1;
  /*
  tbody .first_col {
      border-right: none;
      width: 170px !important;
      min-width: 170px !important;
      max-width: 170px !important;
  }

  tbody tr:first-child td {
      border-top: solid 1px #cdecfb;
      border-bottom: none;
  }
  tbody .first_col {
      word-break: break-all;
      white-space: normal;
  }
  tbody .second_col {
      word-break: break-all;
      width: 300px !important;
      min-width: 300px !important;
      // max-width: 300px !important;
      white-space: normal;
  }
  .note_col {
      width: 250px !important;
      min-width: 250px !important;
      max-width: 250px !important;
  }
  .checked_status {
      color: $c_red;
  }
  tbody tr td {
      background-color: white !important;
      &.bg_blue {
          background-color: $bg_blue !important;
      }
      &.bg_blue_light {
          background-color: $bg_blue_light !important;
      }
      &.bg_yellow_light {
          background-color: $bg_yellow_light !important;
      }
      &.bg_gray {
          background-color: $bg_gray !important;
      }
  }

  th.c_text_blue {
      color: $c_text_blue;
  }
  */
}

#review_wrapper .overflow_x_hidden {
  overflow-x: hidden !important;
}

#review_wrapper .dataTables_info {
  display: none;
}

#review_wrapper .dataTables_wrapper {
  overflow-x: hidden;
  width: 800px;
  min-width: 100%;
}

#review_wrapper .dataTables_wrapper .dataTables_scrollBody {
  border-right: solid 1px #dee2e6;
  overflow-y: scroll;
}

#review_wrapper .tbl_review {
  width: 100%;
  min-width: 100%;
  position: relative;
  overflow: auto;
  white-space: nowrap;
  padding: 0px !important;
  margin: 0px !important;
  word-wrap: break-word;
  border-spacing: 0;
  border: none;
  table-layout: fixed;
}

#review_wrapper .tbl_review thead th {
  border: none !important;
  background-color: white;
}

#review_wrapper .tbl_review thead .first_row th {
  position: sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -webkit-sticky;
  height: 30px;
  top: 0px;
  z-index: 5;
}

#review_wrapper .tbl_review thead .first_row th.first_col,
#review_wrapper .tbl_review thead .first_row th.second_col {
  z-index: 6;
}

#review_wrapper .tbl_review thead th.c_text_blue {
  color: #21a2e3;
}

#review_wrapper .tbl_review tbody .second_row td {
  position: sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -webkit-sticky;
  height: 30px;
  top: 0px;
  z-index: 5;
  background-color: #17a2b8 !important;
  color: white;
}

#review_wrapper .tbl_review tbody .second_col {
  word-break: break-all;
  width: 330px !important;
  min-width: 330px !important;
  white-space: normal;
}

#review_wrapper .tbl_review tbody .first_col {
  border-right: none;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
}

#review_wrapper .tbl_review tbody th:not(.first_col, .second_col, .note_col),
#review_wrapper .tbl_review tbody td:not(.first_col, .second_col, .note_col) {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  z-index: 1;
}

#review_wrapper .tbl_review tbody .note_col {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  position: relative;
}

#review_wrapper .tbl_review tbody .note_col textarea {
  min-height: 72px;
  border-color: #c3c5c7 !important;
}

#review_wrapper .tbl_review tbody .first_col,
#review_wrapper .tbl_review tbody .second_col {
  border-left: solid 1px #dee2e6;
  border-right: solid 1px #dee2e6;
}

#review_wrapper .tbl_review tbody td {
  background-color: white !important;
}

#review_wrapper .tbl_review tbody td.bg_blue {
  background-color: #17a2b8 !important;
}

#review_wrapper .tbl_review tbody td.bg_blue_light {
  background-color: #d3eefa !important;
}

#review_wrapper .tbl_review tbody td.bg_yellow_light {
  background-color: #fcf6d5 !important;
}

#review_wrapper .tbl_review tbody td.bg_gray {
  background-color: #e9ecef !important;
}

#review_wrapper .tbl_review tbody tr:last-child {
  border-bottom: none !important;
}

#review_wrapper .tbl_review .checked_status {
  color: #D1030A;
}

#review_wrapper .tab_wrapper {
  width: 100%;
}

#review_wrapper .tab_wrapper .nav-item {
  width: 130px;
  text-align: center;
}

#review_wrapper .tab_wrapper .nav-link {
  color: #212529;
  border: solid 1px #dee2e6;
  border-radius: 5px 5px 0px 0px;
}

#review_wrapper .tab_wrapper .nav-link.active {
  background-color: #17a2b8;
  color: white !important;
}

#review_wrapper .tab_wrapper .tab-content {
  height: 550px;
  overflow: auto;
  border-bottom: solid 1px #dee2e6;
}

#review_wrapper .tab_wrapper .row {
  width: 100%;
  margin: 0;
}

#review_wrapper .tab_wrapper .row .col-sm-12 {
  padding: 0px;
}

#review_wrapper .tab_wrapper .tbl_review {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed;
  border-bottom: none;
}

#review_wrapper .tab_wrapper .tbl_review th.first_col {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

#review_wrapper .tab_wrapper .tbl_review tbody tr:last-child {
  border-bottom: none;
}

#review_wrapper.manager_review_wrapper {
  border-bottom: none;
}

#comment_wrapper .nav-tabs {
  border-bottom: none !important;
}

#comment_wrapper .nav-link {
  color: #212529;
  border: solid 1px #dee2e6;
  border-radius: 5px 5px 0px 0px;
}

#comment_wrapper .nav-link.active {
  background-color: #17a2b8;
  color: white !important;
}

#comment_wrapper .nav-item {
  width: 130px;
  text-align: center;
}

#comment_wrapper #staff_name_tabs {
  padding-left: 133px;
}

#comment_wrapper #tab_content .comment_item {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

#comment_wrapper #tab_content .comment_item .title_wrapper {
  width: 150px;
}

#comment_wrapper #tab_content .comment_item .title_wrapper label.comment_title {
  margin-bottom: 0px;
}

#comment_wrapper #tab_content .comment_item .content_wrapper {
  width: 100%;
  border: solid 1px #b2b7bb;
}

#comment_wrapper #tab_content .comment_item .content_wrapper textarea.comment_input {
  width: 50%;
  height: 100%;
  max-height: 100px;
  resize: none;
  border: none;
  border-radius: 0;
}

#comment_wrapper #tab_content .comment_item .content_wrapper textarea.prev_comment {
  border-left: solid 2px #b2b7bb;
}

#comment_wrapper #tab_content .comment_item .content_wrapper textarea.prev_comment:hover {
  cursor: default;
}

#comment_wrapper #tab_content .title_comment_item {
  height: 50px;
}

#comment_wrapper #tab_content .title_comment_item .content_wrapper {
  border-left: none;
  border-right: none;
}

#comment_wrapper #tab_content .title_comment_item .content_wrapper .current_title,
#comment_wrapper #tab_content .title_comment_item .content_wrapper .prev_title {
  width: 50%;
  line-height: 50px;
}

#review_form button {
  width: 100px;
}

.btn_save_temp {
  color: #fff;
  background-color: #b58e1a;
  border-color: #b58e1a;
}

.btn_save_temp:hover {
  color: white;
  background-color: #9f7c17;
  border-color: #9f7c17;
}

.btn_save {
  color: #fff;
  background-color: #5f8b46;
  border-color: #5f8b46;
}

.btn_save:hover {
  color: white;
  background-color: #547a3e;
  border-color: #547a3e;
}

#admin_page .main_wrapper {
  min-height: auto;
  max-height: calc(100vh - 130px);
}

#admin_page #select_staff {
  width: 350px;
}

#admin_page .show_staff_name_wrapper {
  padding-top: 7px;
}

#admin_page .point_wrapper input[type=text] {
  width: 100px;
  margin: 0px 10px;
}

#admin_page .point_wrapper label {
  line-height: 38px;
}

#admin_page #tbl_result_wrapper {
  margin: auto;
  height: calc(100vh - 360px);
  z-index: 1;
  overflow-x: scroll;
  overflow-y: scroll;
  border-bottom: solid 1px #dee2e6;
  border-left: solid 1px #dee2e6;
  border-right: solid 1px #dee2e6;
}

#admin_page #tbl_result_wrapper .dataTables_info {
  display: none;
}

#admin_page #tbl_result_wrapper .tbl_result {
  width: 100%;
  min-width: 100%;
  position: relative;
  overflow: auto;
  white-space: nowrap;
  padding: 0px !important;
  margin: 0px !important;
  border-top: none;
  border-bottom: none;
}

#admin_page #tbl_result_wrapper thead th {
  position: sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -webkit-sticky;
  height: 30px;
  top: 0px;
  z-index: 10;
  border: solid 1px #dee2e6;
}

#admin_page #tbl_result_wrapper tbody .col1st {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  word-break: break-all;
  white-space: normal;
  z-index: 10;
  border-right: solid 1px #dee2e6;
}

#admin_page #tbl_result_wrapper th:not(.col1st),
#admin_page #tbl_result_wrapper td:not(.col1st) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

#admin_page #tbl_result_wrapper th.col1st,
#admin_page #tbl_result_wrapper th.col2nd,
#admin_page #tbl_result_wrapper th.col3rd,
#admin_page #tbl_result_wrapper th.col4th {
  z-index: 12;
}

#admin_page #tbl_result_wrapper td.col1st,
#admin_page #tbl_result_wrapper td.col2nd,
#admin_page #tbl_result_wrapper td.col3rd,
#admin_page #tbl_result_wrapper td.col4th {
  z-index: 11;
}

#admin_page #tbl_result_wrapper tbody tr:first-child td {
  border-top: none;
}

#admin_page #tbl_result_wrapper td.percent_point:after {
  content: "%";
}

#admin_page #tbl_result_wrapper td {
  height: 65px;
  background-color: white;
}

#admin_page #tbl_result_wrapper.no_data {
  height: auto !important;
  border: none;
  overflow: hidden;
}

#admin_page #myself_point,
#admin_page #coworker_point {
  background-color: white;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
}

#admin_page .dataTables_wrapper {
  min-width: 100%;
}

#comment_modal .table_comment_result_wrapper {
  margin: auto;
  width: calc(100% - 80px);
  max-height: 296px;
  z-index: 1;
  overflow: auto;
}

#comment_modal .table_comment_result_wrapper .first_row th {
  position: sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -webkit-sticky;
  height: 30px;
  top: -1px;
  z-index: 5;
  border-top: solid 1px #dee2e6;
}

#comment_modal .table_comment_result_wrapper th:last-child {
  width: 150px;
}

/* ローディング画面 */

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
}

#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  color: #d1030a;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: load4 1.3s infinite linear;
  transform: translateZ(0);
}

/* ローディングアニメーション */

@keyframes load4 {
  0%, 100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

table.dataTable > thead .sorting:before {
  font-family: FontAwesome;
  font-size: 20px;
  content: "\F0DE";
  right: 8px;
  top: 22px;
}

table.dataTable > thead .sorting:after {
  font-family: FontAwesome;
  font-size: 20px;
  content: "\F0DD";
  right: 8px;
  top: 23px;
}