@charset "utf-8";

/*  目次
  - - - - - - - - -
  デフォルトスタイル
  ユーティリティ
  サイトワイド
    ページレイアウト
    ヘッダー
    ナビゲーション
    ページネーション
  各画面固有のスタイル
    - - - - - - - -
 */

:root {
  --bg-alert: #f5c6cb;
  --bg-color-arranged: #ffce7a;
  --bg-color-transfer-to-outsource: #bf774c;
  --bg-filling: #52b4c3;
  --bg-holiday: #ec86b6;
  --bg-ptp-bulk: #00aeef;
  --bg-ptp-filling: #5bc0de;
  --bg-ptp-ship-day: #fff414;
  --bg-ptp-stock-day: #fff414;
  --bg-stock-day: #fff414;
  --bg-transfer: #69d41e;
  --border-color: #dee2e6;
  --font-color-alert: #721c24;
  --header-height: 68px;
}

/* デフォルトスタイル */
body {
  overflow-wrap: break-word;
  overflow-y: scroll;
  word-wrap: break-word;
}

caption {
  caption-side: top;
  padding: 0 0 .5rem 0;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.white-box {
  border: solid 1px;
  width:23px;
  height:19px;
}

.table-responsive .table {
  margin-bottom: 0;
}

.table label {
  margin-bottom: 0;
}

.table td, .table th {
  vertical-align: middle;
}

.table-bordered th, .table-bordered td {
  border-color: var(--dark);
}

.table-bordered thead th {
  border-bottom-color: var(--dark);
}

.table-sm td .ui-datepicker-trigger {
  right: .8rem;
}

.table td .ui-datepicker-trigger {
  right: 1.25rem;
}

.checkbox-form-4lines > .custom-checkbox {
  float: left;
  width: calc(25% - .5rem);
}

.checkbox-form-4lines label {
  display: block;
}

.btn[disabled]:hover {
  cursor: not-allowed;
}

.btn svg, p svg {
  margin-right: .25rem;
  vertical-align: -.125rem;
}

/* 拡大縮小可能なテーブルのコンテナ */
.zoomable-table-container {
  overflow: scroll;
}

.zoomable-table-container .table thead {
  backface-visibility: hidden;
  overflow: hidden;
}

.zoomable-table-container .translate-0-header {
  position: relative;
  z-index: 10;
}

.zoomable-table-container .table-odd {
  backface-visibility: hidden;
  background: var(--light);
  background-clip: padding-box;
  overflow: hidden;
}

.zoomable-table-container .table-even {
  backface-visibility: hidden;
  background: #ebeced;
  background-clip: padding-box;
  overflow: hidden;
}

.zoomable-table-container .x-sticky {
  will-change: transform;
}

.container-table-scrollbar {
  width: calc(100% - 20px);
  height: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.container-table-of-plan {
  
  max-height: 70vh;
  
}

.container-table-title{
  overflow-y: scroll;
  
  /*上下方向にはみ出した要素ををスクロールさせる*/
  overflow-x: scroll;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
/*スクロールバー非表示（Chrome・Safari）*/
.container-table-title::-webkit-scrollbar{
  display:none;
}

.inner-scrollbar {
  height: 1px;
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1320px;
  }
}

.flatpickr-input {
  max-width: 8rem;
}

input[class*="time-picker"][readonly] {
  background-color: var(--white);
}

.flatpickr-input[readonly] {
  pointer-events: none;
}

/* カレンダー入力の土日の文字色を変更 */
/* 日曜日：赤 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1), .flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
  color: var(--red);
}

/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7), .flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  color: var(--blue);
}

/* モードレスダイアログ */
.modal {
  pointer-events: none;
}

.modal-backdrop {
  display: none;
}

/* ヘッダ通知テーブル */
.head-no-notification-table, .head-ok-notification-table{
  margin: auto;
  width: 130px;
}


/* ユーティリティ */
.table-fixed {
  table-layout: fixed;
}

.vertial-wave-dash {
  transform: rotate(90deg);
}

/* サイトワイド */
body > .container-xl, body > form {
  min-width: 64rem;
}

.global-nav .badge-circle {
  height: 1.5rem;
  line-height: 2;
  max-width: 2rem;
  min-width: 1.5rem;
  padding: 0;
  z-index: 10;
}

body[class*="_comp"] .bi-check-circle-fill {
  vertical-align: -.125rem;
}

.table-is-added-item th, .table-is-added-item td, .table-is-added-item2 th, .table-is-added-item2 td{
  width: 13rem;
}

.table-is-added-item th:first-child, .table-is-added-item td:first-child, .table-is-added-item2 th:first-child, .table-is-added-item2 td:first-child {
  width: 1.5rem;
}

.nl2br {
  white-space: pre;
}

.tooltip-inner {
  max-width: 100%;
  white-space: nowrap;
}

.btn-row-del {
  white-space: nowrap;
}

.search-accordion .card-body {
  background-color: var(--white);
}

.search-accordion .position-absolute {
  right: 1.25rem;
}

.modal .action {
  width: 6rem;
}

.y-scrollable {
  min-height: calc(63px * 6 + 4px);
}

.border.table-responsive-frame {
  border-width: 2px !important;
}

.modal-search-result-container {
  position: relative;
}

.modal-search-result-container thead th {
  background-color: var(--white);
  position: sticky;
  top: -2px;
  z-index: 2;
}

.modal-search-result-container thead .id {
  width: 8rem;
}

.modal-backdrop {
  background-color: transparent;
}

.modal .spinner-border {
  bottom: 0;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;
  z-index: 10;
}

.main .badge {
  font-size: 1rem;
}

.embed-responsive-a4::before {
  padding-top: 141.421%; /* a4サイズの縦横比 = 1:√2 */
}

.custom-file-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-title .hint-tooltip {
  line-height: 1;
  margin-left: .25rem;
}

.modal-title {
  align-items: center;
  display: flex;
}

.header-format {
  text-align: center;
  font-size: 0.9rem;
}

.header-format p {
  margin-bottom: 0;
}

.header-logout {
  margin-left: 0.5rem;
}

/* 並び替えアイコンのカスタマイズ */
.table-sorted thead [data-ordered] {
  background-image: url("images/sort-arrows-couple-pointing-up-and-down.svg");
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: .75rem auto;
  padding-right: 1rem;
}

.table-sorted thead .header-desc {
  background-image: url("images/sort-down.svg");
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: .75rem auto;
}

.table-sorted thead .header-asc {
  background-image: url("images/sort-up.svg");
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: .75rem auto;
}

.search-accordion .custom-checkbox[class*="table-"] {
  padding: .5rem 2rem;
}

.btn-sm:hover {
  text-decoration: none;
}

/* ヘッダー */
.bg-custom {
  /* 開発用 */
  border: 2px solid var(--primary);
  /* 本番用 */
  /* background: #b8daff !important;  */ /* Bootstrapの背景色を上書き */
  /* border: 2px solid var(--primary);*/
  padding-bottom: .625rem;
  padding-top: .625rem;
}

.navbar-collapse {
  position: relative;
}

.nav-item-time {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.navbar-nav {
  margin-right: 9rem;
}

.nav-item-time span {
  line-height: 1.25rem;
}

/* 通知のプルダウン */
.notification-dropdown .bi-bell {
  height: 1.25rem;
  width: 1.25rem;
}

.position-relative .badge {
  right: -.5rem;
  top: -.5rem;
}

.notification-dropdown .dropdown-item {
  padding: .75rem 1.5rem;
}

.notification-dropdown .dropdown-item:not(:last-child) {
  border-bottom: 1px solid #e9ecef;
}

.notification-dropdown p {
  color: var(--gray);
  font-size: .875rem;
}

.notification-dropdown .ballon-counter {
  color: var(--dark);
  font-size: 1.5rem;
}

.notification-dropdown .ajax-failed-item {
  background-color: var(--bg-alert);
  color: var(--font-color-alert);
}

/* 各ページの見出し */
.page-header {
  align-items: center;
  background: #F1F1F1;
  border: 2px solid var(--primary);
  color: #0171BD;
  display: flex;
  font-size: 1.75rem;
  font-weight: 400;
  padding: .5rem 1rem;
  white-space: nowrap;
  border-radius: 20px;
}

.page-header .hint-tooltip {
  font-size: 1.25rem;
  line-height: 1;
  margin-left: .5rem;
}

/* ナビゲーション */
.navbar .nav-item .nav-link:focus::before, .navbar .nav-item .nav-link:hover::before {
  display: none;
}

.navbar .btn {
  white-space: nowrap;
  width: 100%;
}

.global-nav .nav-link {
  padding: .5rem .25rem;
}

.global-nav .nav-item:first-child {
  padding-left: 0;
}

.global-nav .nav-item:last-child {
  padding-right: 0;
}

.global-nav .btn-success{
  /*BootStrap上書き*/
  background-color: #0171BD !important;
  border:none !important;
  font-weight: bold;
}
.global-nav .btn-warning{
  /*BootStrap上書き*/
  background-color: #FFF;
  border: solid 1px #0171BD;
  color: #0171BD;
  font-weight: bold;
}
.global-nav .dropdown-item{
  color: #0171BD;
  font-weight: bold;
}
.dropdown-item.active{
  color: #FFF !important;
}
/* バッジ　*/
.global-nav .position-relative .badge {
  position: absolute;
  right: -.25rem;
  top: -.25rem;
}

/* ログイン */
.login .login-form-container {
  margin-top: 10rem;
  width: 20rem;
}

.login input {
  margin-bottom: 1rem;
}

.login input[type="password"] {
  margin-bottom: 2rem;
}

.login .card {
  padding: 1.5rem;
}


/* 検索ボックス */
.search-header{
  color: #0171BD !important;
  border: solid 1px #0171BD;
  border-radius: 20px;
  padding-left: 15px;
  font-weight: bold;
}
.search-button{
  background-color: #0171BD;
  color: #FFF;
}
/* 納品・受領 */

/* 納品・受領一覧 */
.form-inline .form-control.date-picker {
  width: 9rem;
}

.table .thead-green th {
  background-color: #0171BD;
  color: var(--white);
  vertical-align: middle;
}

.table-arranged {
  background: var(--bg-color-arranged);
}

.table-hover .table-arranged:hover {
  background: var(--bg-color-arranged);
}

.badge-arranged {
  background: var(--bg-color-arranged);
}

.badge-final-due-to-date-has-modified svg {
  display: inline-block;
  height: 1rem;
  vertical-align: -.125rem;
  width: 1rem;
}

th, td {
  width: 9rem;
}

.item-w-wide {
  width: 20rem;
}

/* 日付部分 */
.calendar-title {
  /* padding: 18px 0; */
  text-align: center;
}

.calendar-title .btn-monthMove {
  cursor: pointer;
  font-size: 1.8rem;
}

.calendar-title .btn-monthMove.prev {
  margin-right: 24px;
}

.calendar-title .btn-monthMove.next {
  margin-left: 24px;
}

.display-none {
  display: none;
}