/* Define basic CSS for the entire page */
:root {
  --primary-color: #16316a;
  --white-color: #fff;
  --black-color: #000;
  --orange-color: #fc6f11;
  --red-color: #fa1a1a;
  --text-color: #0f1111;
}

body {
  font-family: "YuGothic", sans-serif;
}

.accordion-button::after {
  background-image: none;
  background-color: white;
  mask-image: var(--bs-accordion-btn-icon);
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  background-color: white;
  mask-image: var(--bs-accordion-btn-active-icon);
}

.btn-danger {
    --bs-btn-disabled-bg: gray !important;
    --bs-btn-disabled-border-color: gray !important;
}

.daterangepicker,
.daterangepicker * {
  font-size: 14px !important;
}

.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: #fff !important;
}

/* ------------------------------
 common style
------------------------------ */
/* equals mb-4 mt-3 */
.cs-title-margin {
  margin-bottom: 1.5rem !important;
  margin-top: 1rem !important;
}

/* equals fw-bold fs-5 */
.cs-title-font {
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}

.cs-container {
  min-width: 720px;
}

.cs-sidebar {
  width: 200px;
  position: fixed;
  top: 0px;
  padding-left: 0%;
  padding-right: 0%;
}

.cs-main {
  width: calc(100% - 200px);
  margin-left: 200px;
}

.cs-main-h100 {
  width: calc(100% - 200px);
  margin-left: 200px;
  max-height: 100%;
}

.cs-year-to-month {
  max-width: 160px;
}

.cs-wide-button {
  width: 120px;
}

.cs-service-logo {
  width: 250px;
}

.cs-with-yen-mark::before {
  content: '￥';
}

.cursor-pointer {
  cursor: pointer;
  user-select: none;
}

/* table */
.sortable-col {
  cursor: pointer;
  user-select: none;
  position: relative;
}

th.sortable-col {
  padding-right: 1.5rem;
}

.sortable-col::before,
.sortable-col::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 7px solid transparent;
  right: 5px;
  top: 50%;
}

.sortable-col::before {
  border-bottom-color: #aaa;
  margin-top: -15px;
}

.sortable-col::after {
  border-top-color: #aaa;
  margin-top: 2px;
}

.sortable-col.asc::before {
  border-bottom-color: black;
}

.sortable-col.desc::after {
  border-top-color: black;
}

.cs-modal-dialog-wide {
  max-width: 75%;
}

table tr td.disabled{
  background-color: gray;
}

.calendar-input {
    background: url('https://cdn-icons-png.flaticon.com/512/747/747310.png') no-repeat right 10px center;
    background-size: 20px 20px;
}

.daterangepicker .applyBtn {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.daterangepicker .applyBtn:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

.daterangepicker .applyBtn:disabled {
    color: #fff;
    background-color: #198754 !important;
    border-color: #198754;
    pointer-events: none;
    opacity: 0.65;
}

.daterangepicker .cancelBtn {
    background-color: #dee2e6;
}

.daterangepicker .cancelBtn:hover {
    background-color: #adb5bd !important;
}

.daterangepicker .ranges li.active {
    color: #fff;
    background-color: #198754 !important;
}

.daterangepicker .ranges li.active:hover {
    color: #fff;
    background-color: #157347 !important;
}

.daterangepicker td.active {
    color: #fff;
    background-color: #198754 !important;
    border-color: #198754;
}

.daterangepicker td.active:hover {
    color: #fff;
    background-color: #157347 !important;
    border-color: #146c43;
}