@charset "UTF-8";
/* Locore.css 上書き */

/* プロフィールのモーダル */

.modal-user {
  padding-left: 10px;
  padding-right: 10px;
}

/* タブのコンテンツ背景色 */
.js-tab_content {
  background: #fff;
}

.invisible {
  visibility: hidden !important;
}

/* 読み取り専用 */
input[readonly], select[readonly] {
  border: 0;
  background: rgb(255, 255, 255, 0);
  cursor: text;
}

input[readonly][class~="__masked"], 
textarea[readonly][class~="__masked"]{
  border: 1px solid rgba(0, 40, 100, 0.12);
  background-color: #fff;
  cursor: unset !important;
}

textarea {
  resize: vertical;
  min-height: 3rem;
}


.switchShop{
    font-size: 1.1rem;
    padding-left: 1.5em;
    color: #fefefe;
}


.search-unique-keyword {
    color: #1b7c17 !important;
}
.search-unique::after {
    content: "※";
    color: #1b7c17 !important;
    vertical-align: super;
    font-size: 0.5em;
}

/* 入力不可inputをただのテキストのように見せる */
input.like-text:disabled ,
textarea.like-text:disabled {
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: text;
}

a.disabled{
    pointer-events: none;
}

/* 画像 */
.table-image img {
    min-width: 70px;
}
a.commodity-lightbox {
    display: block;
}

/* バッジ */
.badge-left {
    margin-left: 1.5rem;
}

/* マイナス値の赤字 */
.minus-num {
    color: #dc143c !important;
}

/* ラジオボタン等で横並びにするとき、横並び要素をこれで包んで綺麗に折り返す */
.flexbox{
    display: flex;
    flex-wrap: wrap;
}

.flexbox label {
    padding: 0.25em 2.25em 0.25em 0.25em;
}


/* tableのように綺麗にそろえる */
ul.align-list {
    padding-left: 0  !important;
    margin-bottom: 1em  !important;
}
ul.align-list li {
    list-style: none;
    margin-bottom: 1em  !important;
}
.align-list label {
    width:100px;
    float: left;
}

/* icon少しでかめに */
.icon {
    font-size: 1.1em;
 }

/* フォーム要素に付けるちょっとしたコメント用 */
p.note {
  margin: 2px 0 0 0; }


.very-small-form {
  width: 5rem;
  }


/* 幅バリエーション */
 .inline50 {
   display: inline;
   width: 50%;
 }
 .inline60 {
   display: inline;
   width: 60%;
 }
 .inline70 {
   display: inline;
   width: 70%;
 }
 .inline80 {
   display: inline;
   width: 80%;
 }
 .inline90 {
   display: inline;
   width: 90%;
 }
 span.inline-notice {
   color: #6e7687;
   font-size: 10px;
   display: inline-block;
   vertical-align: middle;
   margin: 0 4px 0 5px;
 }

.width50per {
   width: 50% !important;
}
.width60per {
   width: 60% !important;
}
.width70per {
   width: 70% !important;
}
.width80per {
   width: 80% !important;
}
.width90per {
   width: 90% !important;
}

@media (max-width: 767px) {
  .inline50 {
    display: block;
    width: 100%;
    margin-right: 1em;
  }
  .inline60 {
    display: block;
    width: 100%;
    margin-right: 1em;
  }
  .inline70 {
    display: block;
    width: 100%;
    margin-right: 1em;
  }
  .inline80 {
    display: block;
    width: 100%;
    margin-right: 1em;
  }
  .inline90 {
    display: block;
    width: 100%;
    margin-right: 1em;
  }
  span.inline-notice {
    color: #6e7687;
    font-size: 10px;
    margin: 0 4px 0 0;
  }
  .sp-hidden {
    display: none;
  }
}


/* 全選択・全解除ボタン */

.btn-check {
  padding: 0.25rem 0.5rem;
  font-size: 1.05rem;
  line-height: 1.33333333;
  border-radius: 2px;
}

table.dataTable .btn-check {
  margin-right: 10px;
}

/* Table内のチェックボックス列用 */

td.index {
  width: 1% !important;
  white-space: nowrap;
  text-align: center !important;
}

td.index input[type=checkbox] {
  vertical-align: middle;
}


/* 縦並びのラベル  */
.block-label{
  display:block;
}

@media (max-width: 767px) {
	.block-label{
	  display:inline;
	}
}

/* ヘッダーのロゴ表示 */

.siteHeader .headerTop .siteName h1::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 2.6rem;
  height: 3rem;
  background: url(/locoreweb/img/logo-c4c39140df6455e438c5253ea32e57a0.png) no-repeat 0 0;
  background-size: 2.6rem;
  margin-right: 10px;
}

/* DataTablesのFixedHeaderが幅の変更に連動するようになる */

.contents .fixed-header-block {
  width: 100% !important;
}


/* Select2 */

.select2-container--default .select2-selection--single {
  border-radius: 3px;
  border: 1px solid rgba(0, 40, 100, 0.12);
}

.select2-container--default .select2-selection--multiple {
  border-radius: 3px;
  border: 1px solid rgba(0, 40, 100, 0.12);
}

.select2.size-ml {
  width: 80%;
  }

.select2.size-ml + .select2 {
  width: 80% !important;
  }

@media (max-width: 767px) {

.select2.size-s {
  width: 100%; }

.select2.size-s + .select2 {
  width: 100% !important; }

.select2.size-m {
  width: 100%;
  }

.select2.size-m + .select2 {
  width: 100% !important;
  }

.select2.size-ml {
  width: 100%;
  }

.select2.size-ml + .select2 {
  width: 100% !important;
}
}

/* Magnific-Popup */
.mfp-wrap,
.mfp-bg {
  z-index: 11000;
}


/* flatPickr */
.flatpickr-current-month {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.flatpickr-current-month .cur-year-div {
  order: 1;
  width: 8ch;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  order: 2;
}

span.flatpickr-weekday:nth-child(1) {
  color: rgba(255, 0, 0, 0.6);
}
span.flatpickr-weekday:nth-child(7) {
  color: rgba(0, 0, 255, 0.6);
}
.flatpickr-day.calendar-saturday {
  color: rgb(0, 0, 255);
}
.flatpickr-day.calendar-sunday,
.flatpickr-day.calendar-holiday {
  color: rgb(255, 0, 0);
}
.flatpickr-day.flatpickr-disabled.calendar-saturday {
  color: rgba(0, 0, 255, 0.1);
}
.flatpickr-day.flatpickr-disabled.calendar-sunday,
.flatpickr-day.flatpickr-disabled.calendar-holiday {
  color: rgba(255, 0, 0, 0.1);
}
.flatpickr-day.prevMonthDay.calendar-saturday,
.flatpickr-day.nextMonthDay.calendar-saturday {
  color: rgba(0, 0, 255, 0.3);
}
.flatpickr-day.prevMonthDay.calendar-sunday,
.flatpickr-day.nextMonthDay.calendar-sunday,
.flatpickr-day.prevMonthDay.calendar-holiday,
.flatpickr-day.nextMonthDay.calendar-holiday {
  color: rgba(255, 0, 0, 0.3);
}
.flatpickr-day.selected.calendar-saturday,
.flatpickr-day.selected.calendar-sunday,
.flatpickr-day.selected.calendar-holiday {
  color: rgb(255, 255, 255);
}

.flatpickr-time input[readonly][class~="flatpickr-minute"],
.flatpickr-time input[readonly][class~="flatpickr-minute"]:hover {
  background-color: gray;
}

.flatpickr-confirm.lightTheme {
  background-color: white;
}
.flatpickr-confirm.lightTheme:hover {
  background-color: #EAEAEA;
}

/* remodalプラグイン */

.remodal-overlay {
  background: rgba(43, 46, 56, 0.5);
}

.remodal.remodal-is-opening, .remodal.remodal-is-closing {
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
}

/* --------------------------------------------------
tree
-------------------------------------------------- */
#categoryTree > li > .btn_tgl {
    display: none;
}
.treemap ul li ul li a:hover::before {
  border: 1px solid #fff; }

.treemap .btn_tgl {
  cursor: pointer;
  background: #f6f6f6;
  color: #33a59a;
  margin-left: 4px; }

.treemap ul li ul li ul {
  display: none; }

.treemap ul.is-block {
  display: block; }

.treemapModal.remodal {
  max-width: 800px; }

/* table.dataTable の中で pre を使う */
table.dataTable pre.tableContent {
  background-color: transparent;
  color: #555;
}

.apexcharts-tooltip-text {
    width: 100%;
}

.apexcharts-tooltip-y-group {
    display: flex;
    justify-content: space-between;
}



.pull .pull-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.pull .pull-center .btn {
  position: static;   /* absolute を無効化 */
  transform: none;
}

/* --------------------------------------------------
納期遅延
-------------------------------------------------- */

/*ツールチップ*/
.l4-tooltip {
  position: relative;
  cursor: pointer;
}

.l4-tooltip .l4-tooltip__content {
  padding: 8px 12px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  top: -5px;
  left: 120%;
  color: #fff;
  transition: .4s;
  opacity: 0;
  visibility: hidden;
  width: 360px;
  font-size: 12px;
}

.l4-tooltip:hover .l4-tooltip__content {
  visibility: visible;
  opacity: 1;
}

.ecBackOrderList tr.reconfirm {
    background-color: #fff8cf;
}
.ecBackOrderList tr.reconfirm td {
    background-color: transparent;
}
.ecBackOrderList tr.replacement {
    background-color: #fdd4c7;
}
.ecBackOrderList tr.replacement td {
    background-color: transparent;
}

.ecBackOrderList tr.statusCompleted label {
  pointer-events: none !important;
  cursor: default;
}

.ecBackOrderList tr.statusCompleted label i {
  color: #2b2b2b !important;
}

.ecBackOrderList tr.statusCompleted button.send, .ecBackOrderList tr.statusCompleted button.sd-status-error, .ecBackOrderList tr.statusCompleted input.targetCheckBox {
  display: none;
}

.ecBackOrderList tr.statusConfirm button.edit, .ecBackOrderList tr.statusConfirm button.sd-status-error  {
  display: none;
}

.ecBackOrderList td.sd-status input[type="radio"]:checked+label {
  transition: .2s ease;
}

td.sd-status input.datepicker, .status input.datepicker:focus {
  border: none !important;
  background: none;
  width: 100px;
  font-size: 12px;
  color: #3e87f0;
  text-decoration: underline;
  outline: none;
  cursor: pointer;
  padding-bottom: 0;
}

td.sd-status input::placeholder {
  color: #3e87f0;
  text-decoration: underline;
}

i.sd-shipped {
  color: #00C851 !important;
}

i.sd-change {
  color: #ffbb33 !important;
}

i.sd-stockout {
  color: #ff4444 !important;
}

.sd-status-btn-group {
  display: flex;
  justify-content: space-around;
}

.sd-status-btn label.sd-status-btn-unchecked, .sd-status-btn label.sd-status-btn-unchecked i,
#resultArea .sd-status-btn label.sd-status-btn-unchecked, #resultArea .sd-status-btn label.sd-status-btn-unchecked i
  {
  color: #ddd !important;
}

.sd-status-btn label.sd-status-btn-unchecked {
  border: 1px solid #ddd;
}

.sd-status-btn input {
  display: none;
}

.sd-status-btn label {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
}

.sd-status-btn label i {
  font-size: 20px;
  display: block;
  margin: 2px 0 2px;
}

input.sd-shipped+label:hover {
  background: #e8f5e9;
  transition: .3s;
  cursor: pointer;
}

input.sd-change+label:hover {
  background: #fffde7;
  transition: .3s;
  cursor: pointer;
}

input.sd-stockout+label:hover {
  background: #ffebee;
  transition: .3s;
  cursor: pointer;
}


.statusCompleted input.datepicker, .statusCompleted input.datepicker:focus,
  .statusCompleted input.datepicker::placeholder {
  color: #666;
  text-decoration: none;
  font-size: 12px;
  cursor: default;
}

.sd-status-date {
  font-size: 12px;
  color: #999;
  margin-left: 0;
  margin-top: 0;
}

.sd-status-date.hidden {
  display: none;
}

button.sd-status-submit {
  background: none;
  border: none;
  text-align: center;
  cursor: pointer;
  color: #3e87f0;
}

button.sd-status-submit i {
  display: block;
  font-size: 26px;
  margin-bottom: 4px;
}

button.sd-status-submit:disabled {
  background: none;
  border: none;
  text-align: center;
  cursor: default;
  color: #ccc;
}

button.sd-status-submit-edit {
  color: #2b2b2b;
}

button.sd-status-submit-edit i {
  font-size: 16px;
}

button.sd-status-error {
  background: none;
  border: none;
  text-align: center;
  cursor: pointer;
  color: #ff4444;
}

button.sd-status-error i {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

textarea.sd-status-comment {
  display: block;
  width: 100%;
  margin-bottom: 0px;
  background: none;
}

tr.statusCompleted textarea.sd-status-comment {
  border: none;
  font-size: 12px;
  width: 100%;
  color: #666;
  display: block;
  background: none;
}

textarea.sd-status-comment::placeholder, textarea.sd-status-comment-readonly::placeholder {
  font-size: 12px;
  color: #c0c0c0;
}

textarea.sd-status-comment:read-only::placeholder, textarea.sd-status-comment-readonly:read-only::placeholder
  {
  visibility: hidden;
}

table.ecBackOrderList tr.statusCompleted td {
  background: #fafafa !important;
}

/* /commodities/commodity/import */
.btn_commodity-import-tab{
  width: calc(100% / 5);
}

#commodity-image .template-upload .preview video {
  max-width: 80px;
}

.files video {
  max-width: 100%;
  max-height: auto;
}

/* 購入点数制限テーブル */
#purchaseLimitTable {
  table-layout: fixed;
}
#purchaseLimitTable td,
#purchaseLimitTable th {
  vertical-align: middle;
  text-align: center;
}

#purchaseLimitTable .purchase-limit-marked-delete td {
  opacity: 0.4;
}

#purchaseLimitTable .purchase-limit-marked-delete .purchase-limit-delete-cell {
  opacity: 1;
}