@charset "UTF-8";

[v-cloak] {
  display: none;
}

html {
  font-size: 18px;
}

/* Bootstrap */
@media (max-width: 768px) {
  .content {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }
  footer.footer {
    width: calc(100vw - 18px);
  }
}

.main {
  padding-top: 65px;
}

body:not([data-sidebar-position=right]) .sidebar.collapsed {
  margin-left: -300px;
}

.sidebar {
  max-width: 300px;
  min-width: 300px;
}

.sidebar,
.sidebar-content {
  background-color: #333;
}

.navbar {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}

@media (min-width: 993px) {
  .navbar {
    width: calc(100% - 300px);
  }
}

@media (min-width: 993px) {
  #app-sidebar.sidebar.collapsed + .main .navbar {
    width: 100%;
  }
}

@media (max-width: 992px) {
  #app-sidebar.sidebar.collapsed + .main .navbar {
    width: calc(100% - 300px);
  }
}

@media (min-width: 1px) and (max-width: 991.98px) {
  body:not([data-sidebar-position=right]) .sidebar {
    margin-left: -300px;
  }
  body:not([data-sidebar-position=right]) .sidebar.collapsed {
    margin-left: 0;
  }
}

#app-sidebar .sidebar-brand span {
  display: block;
  overflow: hidden;
  color: transparent;
  text-indent: 110%;
  white-space: nowrap;
  font-size: 0;
  margin: 0 auto;
  width: 130px;
}
#app-sidebar .sidebar-brand span::before {
  display: block;
  content: "";
  padding-top: 50%;
  background: transparent url(../image/logo_white.png) no-repeat center center;
  background-size: contain;
}

.sidebar-sublink {
  padding-left: 3.25rem !important;
}

.sidebar-link i {
  font-size: 16px;
}

.sidebar-link:hover {
  color: #fff;
}

.sidebar-header.active .sidebar-link i {
  color: #e9ecef;
}

.sidebar-header.active .sidebar-link {
  color: #fff;
}

.sidebar-dropdown .sidebar-item.active .sidebar-link {
  color: #fff;
}

.sidebar-dropdown .sidebar-link {
  padding: .35rem 1.5rem .35rem 5.7rem;
  color: rgba(255, 255, 255, .3);
}

.form-check-inline .form-check-input {
  margin-top: .3125em;
}

.form-check-label {
  user-select: none;
}

label {
  cursor: pointer;
}
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

input[type="number"].no-spin::-webkit-inner-spin-button,
input[type="number"].no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  padding: .25rem;
}

.pre {
  white-space: pre;
}
.pre-wrap {
  white-space: pre-wrap;
}
.nowrap {
  white-space: nowrap;
}

.handle {
  cursor: move;
}

/* Login */
.login h1 {
  overflow: hidden;
  color: transparent;
  text-indent: 110%;
  white-space: nowrap;
  font-size: 0;
  margin: 0 auto 1rem;
  width: 260px;
}
.login h1::before {
  display: block;
  content: "";
  padding-top: 50%;
  background: transparent url(../image/logo.png) no-repeat center center;
  background-size: contain;
}

/* Form Floating */
:not(.form-floating) > input::placeholder,
:not(.form-floating) > textarea::placeholder {
  color: #ccc !important;
}

/* Table */
.table {
  width: 100%;
}
.table > :not(caption) > * > * {
  padding: .5rem .75rem;
}
.table.table-slim th,
.table.table-slim td {
  padding: .25rem .5rem !important;
}
.table .table-disabled {
  --bs-table-bg: #ccc;
  --bs-table-striped-bg: #bbb;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #aaa;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bbb;
  --bs-table-hover-color: #000;
  border-color: #cbccce;
}
.table .table-primary,
.table .table-secondary,
.table .table-success,
.table .table-danger,
.table .table-warning,
.table .table-info,
.table .table-disabled {
  color: #999;
}
.table .table-primary > *,
.table .table-secondary > *,
.table .table-success > *,
.table .table-danger > *,
.table .table-warning > *,
.table .table-info > *,
.table .table-disabled > * {
  color: #666 !important;
}
.table td a {
  text-decoration: underline;
}
.table td a:hover {
  text-decoration: none;
}
.table.table-color th {
  vertical-align: middle;
  background-color: #f4f7f9 !important;
}
.table.table-color .table-primary th {
  background-color: #c2d7f9 !important;
}

@media (min-width: 1301px) {
  .table.table-vertical > tbody > tr > th {
    width: 9em;
    white-space: nowrap;
  }
}
@media (max-width: 1300px) {
  .table.table-vertical > tbody > tr > th,
  .table.table-vertical > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }
  .table.table-vertical > tbody > tr > th {
    border-bottom: 1px solid #dee6ed;
  }
  .table.table-vertical:not(.table-slim) > tbody > tr > td {
    min-height: 3em;
  }
}

/* Table Wrapper */
.table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 1rem;
}
.table-wrapper .table {
  margin-bottom: 0;
}
.table-wrapper .table th,
.table-wrapper .table td {
  white-space: nowrap;
}

/* Scroll Table */
.scroll-table {
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-table .table {
  margin-bottom: 0;
}
.scroll-table .table th,
.scroll-table .table td {
  white-space: nowrap !important;
}
.scroll-table.scroll-x tbody th {
  position: sticky;
  left: 0;
  background-color: #fff !important;
  z-index: 5;
}
.scroll-table.scroll-y {
  overflow-y: auto;
  padding-bottom: 1px;
  min-height: 6em;
}
.scroll-table.scroll-y thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10;
}
.scroll-table.scroll-y tfoot th {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  z-index: 10;
}

/* Flatpickr */
.flatpickr {
  width: 7.25em;
}
.flatpickr.wide {
  width: 10.5em;
}
.flatpickr .btn {
  color: var(--bs-secondary);
}
.flatpickr-current-month {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flatpickr-current-month::after {
  display: inline-block;
  content: "年";
  order: 2;
}
.flatpickr-current-month .numInputWrapper {
  order: 1;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  order: 3;
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(1),
.flatpickr-days .flatpickr-day:not(.selected):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n+1) {
  color: #d9534f;
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(7),
.flatpickr-days .flatpickr-day:not(.selected):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  color: #3f80ea;
}
.flatpickr-days .flatpickr-day:not(.selected):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay).is-holiday {
  color: #d9534f;
}
.flatpickr-days .flatpickr-day:not(.selected):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(:hover).is-disabled {
  background: #c0c0c0;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #3f80ea;
}
.flatpickr-calendar.inline {
  margin: 0 auto;
}
.flatpickr-input.active {
  border-color: #9fc0f5 !important;
  box-shadow: 0 0 0 0.2rem rgb(63 128 234 / 25%) !important;
}

select.form-control.time {
  width: 5.25em;
}
select.form-control.hour,
select.form-control.minute {
  width: 3.25em;
}

/* Modal Dialog Drop */
.modal-dialog-drop {
  --bs-modal-width: 96vw;
}
.modal-dialog-drop .modal-content {
  height: 92vh;
}
.modal-dialog-drop.file-drag .modal-content {
  background-color: #ccc;
}

/* Item Image */
.item-image img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

/* Input */
input[readonly]:focus {
  border-color: transparent !important;
  box-shadow: none;
}

/* Error Message */
.error-message {
  width: 100%;
  font-weight: normal !important;
  text-align: left;
}

/* Form Control */
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgb(63 128 234 / 25%) !important;
}
.form-control[type="number"] {
  padding-right: .1rem;
}

.text-through {
  text-decoration: line-through;
}

.btn {
  white-space: nowrap;
}

.measure,
.reduced-tax {
  background-color: #666 !important;
}

.fw-bold,
b,
strong {
  font-weight: 700 !important;
}

.list-group-striped .list-group-item-action:nth-child(odd) {
  background-color: #f4f7f9;
}

.list-group-striped .list-group-item-action:hover {
  background-color: #e3ebf0;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-container .tooltip-text {
  display: none;
  position: absolute;
  padding: .25em 1em .5em;
  color: #fff;
  white-space: nowrap;
  background-color: #333;
  border-radius: .25em;
  z-index: 1000;
}
.tooltip-container:hover .tooltip-text {
  display: block;
}
.tooltip-container.top .tooltip-text {
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
}
.tooltip-container.bottom .tooltip-text {
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
}
.tooltip-container.left .tooltip-text {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-container.right .tooltip-text {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-container .tooltip-text:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
}
.tooltip-container.top .tooltip-text:before {
  top: 100%;
  left: 50%;
  border-top: 8px solid #333;
}
.tooltip-container.bottom .tooltip-text:before {
  bottom: 100%;
  left: 50%;
  border-bottom: 8px solid #333;
}
.tooltip-container.left .tooltip-text:before {
  left: 100%;
  top: 50%;
  border-left: 8px solid #333;
  transform: translateY(-50%);
}
.tooltip-container.right .tooltip-text:before {
  right: 100%;
  top: 50%;
  border-right: 8px solid #333;
  transform: translateY(-50%);
}