:root {
  --base0:#000000;              /* Base high color */
  --base1:#212529;              /* Base primary color */
  --base2a:#666666;             /* Base second color */
  --base2b:#444649;             /* Base second color */
  --base2:#888888;              /* Base second color */
  --base3:#cccccc;              /* Base third color */
  --base4:#dddddd;              /* Base fourth color */
  --base5:#dde4eb;              /* Base fifth color */
  --base6:#f0f0f0;              /* Base sixth color */
  --base7:#f8f8f8;              /* Base seven color */
  --base8:#fcfcfc;              /* Base seven color */
  --baseA:#ffffff;              /* Base active color */
  --primary:#172d88;            /* Primary color */
  --inverse-primary:#D8DBF0;    /* Inverse Primary color */
  --inverse-primary-a:#F2F3FA;  /* Inverse Primary color rgba(216,219,240,0.33) */
  --secondary:#039dca;          /* Secondary color */
  --success:#288a84;            /* Success color */
  --inverse-success:#DAF0EF;    /* Inverse Success color */
  --danger:#f73122;             /* Danger color */
  --inverse-danger:#FEE1E0;     /* Inverse Danger color */
  --inverse-danger-a:#FEF0EF;   /* Inverse Danger color rgba(249, 95, 83, 0.1) */
  --inverse-danger-b:rgba(249, 95, 83, 0.05);   /* Inverse Danger color */
  --warning:#b17c07;            /* Warning color */
  --inverse-warning:#F9ECD4;    /* Inverse Danger color */
  --disabled: #E9ECEF;          /* disalbed color */
  --info:#269eda;               /* Info color */
  --inverse-info:#DFF0F9;       /* Inverse Info color */
  --inverse-info-a: #EFF7FC;    /* Inverse Info color rgba(81, 177, 225, 0.1) */
  --delete:#FE8888;             /* Delete color */
  --light:#d0d0d0;              /* Light color */
  --tableTh: #f8f8fa;           /* Table TH background color */
  --tableThScroll: #ecf1f4;     /* Table TH scrolled background color */
  --tableThBorder: #ddd;        /* Table TH border color */
  --tableHv: #fffaf2;           /* Table hover color */
  --switchBg1: #1F3BB3;         /* Switch background color */
  --switchBg2: #039dca;         /* Switch background color */
  --switchFg: #fff;             /* Switch foreground color */
  --focus: #ffd;                /* Focused control color */
  --or: #FFAF00;                /* Orange */
  --font-monospace: "Menlo", "MSゴシック";
}
body.plain {
  background-color: #fff;
}
  body.plain .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  @media (min-width: 768px){
    body.plain .bd-placeholder-img {
      font-size: 3.5rem;
    }
  }
  @media (min-width: 992px) {
    body.plain .rounded-lg-3 { border-radius: .3rem; }
  }
  body.plain input.form-control::placeholder {
    color: #ccc;
  }
  body.plain p.text-warn {
    font-size: 0.8rem;
    color: #f88;
  }
  body.plain .form-label span.note {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.8rem;
  }

/*------------------------------------------
 * 全体的なページ設定
 -------------------------------------------*/
/* ページボディ */
.content-wrapper {
  padding: 0.5rem 2.187rem 1.5rem 1.5rem;
}
/* タイトル部分への日付時刻の表示 */
.datetime-info {
  font-size: 0.75rem;
  color: var(--base2);
}
a {
  text-decoration: none;
}
.message-container .col:not(:empty) {
  border: 1px solid var(--success);
  border-radius: 6px;
  color: var(--success);
  background-color: var(--inverse-info-a);
  padding: 0.75rem;
  margin: 0 1rem 1.5rem 1rem;
}
.error-container .col:not(:empty) {
  border: 1px solid var(--danger);
  border-radius: 6px;
  color: var(--danger);
  background-color: var(--inverse-warning);
  padding: 0.75rem;
  margin: 0 1rem 1.5rem 1rem;
}
.work-greeting {
  font-size: 1.2rem;
  color: var(--info);
  font-weight: 600;
}
.monospace {
  font-family: var(--font-monospace);
}
.emphasis {
  font-weight: bold;
  font-size: 1.1rem;
}
.fs-small {
  font-size: 0.75rem;
}
  
/*------------------------------------------
 * サイドバー
 -------------------------------------------*/
.sidebar .nav.sub-menu {
  border-radius: 0px 0px 20px 0px;
}

/*------------------------------------------
 * サブメニューバー
 -------------------------------------------*/
.submenubar .nav :not(:first-child) .nav-link {
  border-left: 1px solid var(--base3);
  padding: 0 0.75rem;
  margin: 0.5rem 0;
}
.submenubar .nav span.nav-link {
  color: var(--base1);
}

/*------------------------------------------
 * ボタン
 -------------------------------------------*/
.btn.btn-sm {
  padding: 0.5rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 7px;
}
.btn.btn-sm:not(.dropdown-toggle) {
  min-width: 6rem;
}
.btn.btn-sl {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.btn.btn-sl:not(.dropdown-toggle) {
  min-width: 7.5rem;
}
.btn-group .btn.btn-sl:not(.dropdown-toggle) {
  min-width: 6rem;
}
.dropdown .btn.btn-sl.dropdown-toggle {
  min-width: 7.5rem;
}
.dropdown .btn.btn-sl.dropdown-toggle:after {
  position: absolute;
  right: 1rem;
  top: 0.55rem;
}
.btn-inverse-primary:hover {
  color: var(--baseA);
  background-color: var(--primary);
}
.btn-inverse-secondary:hover {
  color: var(--baseA);
  background-color: var(--secondary);
}
.btn-inverse-success:hover {
  color: var(--baseA);
  background-color: var(--success);
}
.btn-inverse-danger:hover {
  color: var(--baseA);
  background-color: var(--danger);
}
.btn-inverse-warning:hover {
  color: var(--baseA);
  background-color: var(--warning);
}
.btn-inverse-info:hover {
  color: var(--baseA);
  background-color: var(--info);
}
.btn-inverse-light:hover {
  color: var(--baseA);
  background-color: var(--light);
}
.btn-delete {
  color: var(--delete);
  background-color: var(--baseA);
}
.btn-delete:not(:disabled):hover {
  color: var(--danger);
}
.btn-delete:disabled {
  color: var(--base3);
  background-color: var(--baseA);
}
a.btn.ml-1,
button.btn.ml-1 {
  margin-left: 0.25rem;
}
a.btn.ml-2,
button.btn.ml-2 {
  margin-left: 0.5rem;
}
a.btn.ml-3,
button.btn.ml-3 {
  margin-left: 1rem;
}
.dropdown-inverse-primary {
  background-color: var(--inverse-primary-a);
}
.dropdown-menu .dropdown-item {
  font-size: 0.75rem;
}
.dropdown-inverse-primary .dropdown-item {
  color: var(--primary);
}
.dropdown-inverse-primary .dropdown-item:hover {
  background-color: var(--primary);
  color: var(--baseA);
}
.dropdown-inverse-primary .dropdown-item.inverse-danger {
  background-color: var(--inverse-danger);
  color: var(--danger);
}
.dropdown-inverse-primary .dropdown-item.inverse-danger:hover {
  background-color: var(--danger);
  color: var(--baseA);
}
.dropdown-menu .dropdown-item:disabled {
  color: var(--base3);
  background-color: var(--disabled);
}

/*------------------------------------------
 * Badge
 -------------------------------------------*/
.badge.badge-id {
  background-color: var(--base3);
  color: var(--bs-body-color);
}
.badge.badge-disable {
  background-color: var(--base3);
  color: var(--base2a);
}
.badge.badge-holiday {
  background-color: var(--inverse-danger);
  color: var(--base2a);
}
.badge.badge-holiday-workday {
  background-color: var(--info);
  color: var(--baseA);
}
.badge.badge-workingday {
  background-color: var(--info);
  color: var(--baseA);
}
.badge.badge-workday-holiday {
  background-color: var(--or);
  color: var(--baseA);
}
.badge.badge-work-record-accepted {
  font-size: 12px;
  background-color: var(--base4);
  color: var(--base2b);
  margin-left: 0.25rem;
  border-radius: 160px;
}
.badge.badge-work-record-fixed {
  font-size: 12px;
  background-color: var(--base2);
  margin-left: 0.25rem;
  border-radius: 160px;
}
.badge-inverse-primary {
  background-color: var(--inverse-primary);
  color:var(--primary);
}
.badge-inverse-success {
  background-color: var(--inverse-success);
  color:var(--success);
}
td.dt-center {
  text-align:center;
}

/*------------------------------------------
 * Card data
 -------------------------------------------*/
.data-sheet > .row.form-group {
  margin: 0;
}
.data-sheet > .row.form-group > * {
  padding: 0.5rem 0.5rem;
}
form .data-sheet > .row.form-group > .col-form-label {
  padding-top: 1rem;
}
.data-sheet > .row:not(:last-child) > * {
  border-bottom: 1px solid #f0f0f0;
}
.data-sheet input[type="text"],
.data-sheet input[type="number"] {
  padding: 0.5rem 0.75rem;
  height: 2.5rem;
}
.data-sheet span.updated-name {
  font-size: 0.8rem;
  margin-left: 0.5rem;
}
.data-sheet textarea {
  padding: 0.5rem 0.75rem;
  height: inherit;
}
.data-sheet input[type="text"]:focus:not(:disabled),
.data-sheet input[type="text"]:focus:not(:read-only),
.data-sheet input[type="number"]:focus:not(:disabled),
.data-sheet input[type="number"]:focus:not(:read-only),
.data-sheet textarea:focus:not(:disabled),
.data-sheet textarea:focus:not(:read-only),
.data-sheet .select2-container--default.select2-container--focus .select2-selection--single:not(:disabled),
.data-sheet .select2-container--default.select2-container--focus .select2-selection--single:not(:read-only),
.data-sheet .select2-container--default.select2-container--focus .select2-selection--multiple:not(:disabled),
.data-sheet .select2-container--default.select2-container--focus .select2-selection--multiple:not(:read-only) {
  background-color: var(--focus);
}
.data-sheet .select2-container--default .select2-selection--single {
  padding: 0.75rem 0.25rem;
  min-height: 40px;
}
.data-sheet .select2-container--default.select2-container--disabled .select2-selection--single:focus {
  background-color: var(--disabled);
}
.data-sheet .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0.4rem;
  right: 0.6rem;
}
.select2-results__option {
  padding-left: 0.75rem;
}
.data-sheet .select2-container--default .select2-selection--multiple {
  padding: 0.15rem 0.25rem;
}
.data-sheet .select2-container--default .select2-selection--multiple .select2-selection__choice {
  font-size: 0.875rem;
}
.data-sheet .input-guide {
  color: #888;
  margin-bottom: 0;
}
.data-sheet .input-guide .project-code {
  font-family: var(--font-monospace);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
}
.data-sheet .input-alert {
  margin-bottom: 0;
  color: var(--danger);
}
.data-sheet .col-form-label {
  line-height: inherit;
  color: var(--base2b);
  font-size: 0.9rem;
}
.data-sheet pre:not(.ace_editor) {
  padding: 0.25rem;
  margin: 0;
  background-color: #f0f0f0;
}
.data-sheet .ace_editor .ace_content {
  font-size: 14px; /* JavaScript によるAceEditor の setFontSize() と同じ値である必要がある */
}
.data-action > .row.form-group {
  margin-top: 0.75rem;
}
.data-sheet input[type="text"].form-control.invalid-value:not(:disabled),
.data-sheet input[type="number"].form-control.invalid-value:not(:disabled) {
  border-color: var(--danger);
}
.data-sheet .datepicker .input-group-prepend .input-group-text,
.data-sheet .datepicker .input-group-append .input-group-text {
  height: 40px;
  color: var(--base2);
  background-color: var(--inverse-primary);
}
.data-sheet .datepicker input:read-only~.input-group-append .input-group-text,
.data-sheet .datepicker input:disabled~.input-group-append .input-group-text {
  color: var(--base3);
  background-color: var(--disabled); 
}
.data-sheet .datepicker .input-group-prepend .input-group-text,
.data-sheet .datepicker .input-group-append .input-group-text {
  height: 40px;
  border: none;
  background-color: var(--inverse-primary);
}
.data-sheet .datepicker.input-group.invalid-value:not(:disabled) {
  border-color: var(--danger);
}
.data-sheet .btn:disabled,
.data-action .btn:disabled {
  background-color: var(--disabled);
  color: var(--base2);
}
.data-sheet .btn-delete:disabled,
.data-action .btn-delete:disabled {
  background-color: var(--baseA);
}
.data-sheet .work-record-title {
  padding-top: 0.5rem;
}
.data-sheet .project-plan-order-amount {
  font-weight: 700;
}
.data-sheet .project-plan-estimate-cost-amount,
.data-sheet .project-plan-actual-cost-amount {
  font-weight: 700;
}
.data-sheet .project-plan-estimate-profit-margin-info,
.data-sheet .project-plan-actual-profit-margin-info {
  margin-left: 0.5rem;
  font-size: 0.9rem;
}
.data-sheet .project-plan-estimate-profit-margin-rate,
.data-sheet .project-plan-actual-profit-margin-rate {
  padding-left: 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.data-sheet .project-code-prefix {
  padding-top: 0.75rem;
  padding-right: 0;
  letter-spacing: 0.15rem;
  font-family: var(--font-monospace);
}
.modal-dialog .data-sheet .row.form-group .col-form-input-label {
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}
.modal-dialog .data-sheet .row.form-group .col-form-input-delete {
  padding: 0.45rem 0.2rem 0.5rem 0.75rem;
}
.modal-dialog .data-sheet .row.form-group .col-form-input-delete .btn {
  padding: 0.25rem;
}
.modal-dialog .data-sheet .row.form-group {
  margin-bottom: 0.25rem;
}
.modal-dialog .work-record-day-button-container {
  display: inline-block;
  vertical-align: top;
  padding-top: 0.2rem;
}
.modal-dialog .btn-work-record-day {
  border: none;
  background: transparent;
  font-size: 1.75rem;
  padding: 0;
  color: var(--base2a);
}
.modal-dialog .btn-work-record-day:hover:not(:disabled) {
  color: var(--base1);
}
.modal-dialog .btn-work-record-day:disabled {
  color: var(--base3);
}
.timecard .data-sheet .project-name {
  font-size: 0.95rem;
}
.timecard .data-sheet .project-time-list>.row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.timecard .data-sheet .project-time-list>.row:not(:last-child) {
  border-bottom: 1px solid var(--base3);
}
.timecard .data-sheet .project-hours {
  font-size: 0.75rem;
}
.timecard .data-sheet .project-hours-value {
  font-size: 1.0rem;
  font-weight: 700;
}
.date-info {
  color: var(--base2a);
  font-size: 0.8rem;
}
ul.alert-message {
  margin-top: 1.5rem;
  font-size: 1rem;
}
ul.alert-message li {
  margin-left: 1rem;
}

/* サブカード */
.subcard {
  padding: 1.5rem;
}
.subcard-rounded {
  border-radius: 15px;
  box-shadow: none;
  border: none;
}
.subcard-inverse-primary {
  background-color: var(--inverse-primary);
}
.subcard-opacity-primary {
  background-color: var(--inverse-primary-a);
}

/*------------------------------------------
 * DataTables
 -------------------------------------------*/
.table > :not(:last-child) > :last-child > * {
  border-bottom: 2px solid var(--tableThBorder);
}
table.dataTable.table-hover>tbody>tr:hover>* {
  box-shadow: none;
}
.table.table-border {
  border: 1px solid var(--base3);
}
.table.table-grid-border tr th:not(:first-child),
.table.table-grid-border tr td:not(:first-child) {
  border-left: 1px solid var(--base6);
}
.table td span.invalid-value {
  color: var(--danger);
  font-weight: bold;
}
.dataTables_wrapper .dataTable thead th,
.dataTables_wrapper .dataTable tbody td {
  padding: 1rem;
}
.dataTables_wrapper .dataTable thead th {
  background-color: var(--tableTh);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 1.8rem;
  margin-bottom: 0.25rem;
}
.dataTables_wrapper .table-hover tbody tr:hover>td {
  background-color: var(--tableHv);
}
.dataTables_wrapper .dataTables_paginate ul li {
  line-height: 1.2rem;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: none;
  border-radius: 1.25rem;
  border: none;
  font-size: 1.25rem;
  font-weight: bold;
  border: 1px solid var(--base4);
  background-color: var(--info);
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
  background-color: var(--warning);
}
table.dataTable>tbody>tr.child ul.dtr-details {
  padding-left: 50%;
  padding-right: 140px;
  width: 100%;
}
table.dataTable>tbody>tr.child ul.dtr-details li {
  display: flex;
  justify-content: space-between;
}
table.dataTable>tbody>tr.child ul.dtr-details li .dtr-title {
  font-size: 0.875rem;
  font-weight: normal;
}
table.dataTable>tbody>tr.child ul.dtr-details li .dtr-data {
  text-align: right;
}
.dataTables_wrapper .dataTable thead th span.title-note {
  font-weight: normal;
  font-size: 0.6rem;
  color: var(--base2b);
}
.dataTables_wrapper .dataTable .checkbox-column {
  padding-right: 0;
}
.dataTables_wrapper .dataTables_filter .dropdown {
  display: inline-block;
}

/* 薄型テーブル */
.dataTables_wrapper .dataTable.table-narrow thead th {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.dataTables_wrapper .dataTable.table-narrow tbody td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* スクロールテーブル */
div.dataTables_scrollBody {
  border-left: none !important;
}
.dataTables_scroll.dtfc-has-left table.dataTable thead th,
.dataTables_scroll.dtfc-has-right table.dataTable thead th {
  background-color: var(--tableThScroll);
}
.dataTables_scroll.dtfc-has-left table.dataTable thead tr>.dtfc-fixed-left,
.dataTables_scroll.dtfc-has-right table.dataTable thead tr>.dtfc-fixed-right,
.dataTables_scroll.dtfc-has-left table.dataTable tfoot tr>.dtfc-fixed-left,
.dataTables_scroll.dtfc-has-right table.dataTable tfoot tr>.dtfc-fixed-right {
  background-color: var(--tableTh);
}

/* タイムシートリスト */
.dataTables_wrapper .dataTable .work-record-date {
  padding-right: 0.5rem;
}
.dataTables_wrapper .dataTable .attendance-class-label {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.dataTables_wrapper .dataTable .order-amount,
.dataTables_wrapper .dataTable .estimate-hours,
.dataTables_wrapper .dataTable .actual-hours,
.dataTables_wrapper .dataTable .work-min,
.dataTables_wrapper .dataTable .not-entered-days,
.dataTables_wrapper .dataTable .project-start-date {
  border-left: 1px solid var(--base6);
}
.dataTables_wrapper .dataTable .project-hours,
.dataTables_wrapper .dataTable .not-accepted-days,
.dataTables_wrapper .dataTable .recess-min,
.dataTables_wrapper .dataTable .work-record-note {
  border-right: 1px solid var(--base6);
}
.dataTables_wrapper .dataTable td.dtfc-fixed-left.work-record-note {
  position: sticky;
}
.dataTables_wrapper .dataTable td.order-amount,
.dataTables_wrapper .dataTable td.estimate-hours,
.dataTables_wrapper .dataTable td.estimate-amount,
.dataTables_wrapper .dataTable td.estimate-sales,
.dataTables_wrapper .dataTable td.estimate-profit-margin,
.dataTables_wrapper .dataTable td.actual-hours,
.dataTables_wrapper .dataTable td.actual-amount,
.dataTables_wrapper .dataTable td.actual-sales,
.dataTables_wrapper .dataTable td.project-hours,
.dataTables_wrapper .dataTable td.work-min,
.dataTables_wrapper .dataTable td.paid-holidays,
.dataTables_wrapper .dataTable td.recess-min {
  text-align: right;
  font-family: var(--font-monospace);
}

.dataTables_wrapper .dataTable td.not-entered-days,
.dataTables_wrapper .dataTable td.not-accepted-days {
  text-align: right;
}
.dataTables_wrapper .dataTable tbody tr.timesheet-list-holiday>td {
  background-color: var(--inverse-danger-a);
}

/* プロジェクト計画テーブル */
.dataTables_wrapper .dataTable.project-plan-table th,
.dataTables_wrapper .dataTable.project-plan-table td {
  padding: 0.5rem;
}
.dataTables_wrapper .dataTable.project-plan-table td {
  vertical-align: top;
}
.dataTables_wrapper .dataTable.project-plan-table th:not(:first-child),
.dataTables_wrapper .dataTable.project-plan-table td:not(:first-child) {
  border-left: 1px solid var(--base6);
}
.dataTables_wrapper .dataTable.project-plan-table th.fixed-month {
  background-color: var(--base6);
}
.dataTables_wrapper .dataTable.project-plan-table td.fixed-month {
  background-color: var(--base7);
}

.dataTables_wrapper .dataTable.project-plan-table .default-work-min {
  color: var(--base2a);
  font-size: 0.75rem;
  padding-top: 0.25rem;
  margin-bottom: 0;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-staff {
  font-size: 0.9rem;
  font-weight: 600;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-staff .resource-company {
  font-size: 0.75rem;
  margin-left: 0.25rem;
  color: var(--base2a);
}
.dataTables_wrapper .dataTable.project-plan-table .resource-grade,
.dataTables_wrapper .dataTable.project-plan-table .resource-contract {
  padding-top: 0.25rem;
  color: var(--base2a);
}
.dataTables_wrapper .dataTable.project-plan-table .resource-grade .resource-company {
  margin-right: 0.25rem;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-grade-name .resource-company {
  font-size: 0.75rem;
  margin-left: 0.25rem;
  color: var(--base2a);
}
.dataTables_wrapper .dataTable.project-plan-table .cost-name {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-default-work-min {
  color: var(--base2a);
  font-size: 0.75rem;
  padding-top: 0.25rem;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-hours,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-manmonth,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-cost,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-prate,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-sales,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-hours,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-manmonth,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-cost,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-prate,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-sales,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-drate {
  display:flex;
  justify-content: spece-between;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-hours,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-manmonth,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-cost,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-sales,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-prate {
  color: var(--base2);
}
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-hours,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-manmonth,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-cost,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-sales,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-prate,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-drate {
  color: var(--base1);
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-hours :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-manmonth :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-cost :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-sales :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-prate :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-hours :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-cost :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-manmonth :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-sales :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-prate :first-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-drate :first-child {
  font-size: 0.72rem;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-hours :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-manmonth :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-cost :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-sales :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-prate :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-hours :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-manmonth :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-cost :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-sales :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-prate :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-drate :last-child {
  padding-left: 0.2rem;
  width: 100%;
  text-align: right;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-hours.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-manmonth.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-cost.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-sales.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-prate.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-hours.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-manmonth.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-cost.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-sales.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-prate.not-zero :last-child,
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-drate.not-zero :last-child {
  font-weight: 700;
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-prate:not(:last-child) {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--base2);
}
.dataTables_wrapper .dataTable.project-plan-table .resource-estimate-sales {
  color: var(--primary);
}
.dataTables_wrapper .dataTable.project-plan-table .resource-actual-sales {
  background-color: var(--inverse-warning);
}
.dataTables_wrapper .dataTable.project-plan-table input.cost-name-edit,
.dataTables_wrapper .dataTable.project-plan-table input.cost-amount-edit,
.dataTables_wrapper .dataTable.project-plan-table input.resource-time-edit,
.dataTables_wrapper .dataTable.project-plan-table input.resource-ratio-edit {
  width: 4rem;
  padding: 0.125rem;
  height: 1.8rem;
  border-radius: 2px;
  border: 1px solid var(--base4);
  font-weight: 600;
}
.dataTables_wrapper .dataTable.project-plan-table input.cost-name-edit:disabled,
.dataTables_wrapper .dataTable.project-plan-table input.cost-amount-edit:disabled,
.dataTables_wrapper .dataTable.project-plan-table input.resource-time-edit:disabled,
.dataTables_wrapper .dataTable.project-plan-table input.resource-ratio-edit:disabled,
.dataTables_wrapper .dataTable.project-plan-table input.cost-name-edit:read-only,
.dataTables_wrapper .dataTable.project-plan-table input.cost-amount-edit:read-only,
.dataTables_wrapper .dataTable.project-plan-table input.resource-time-edit:read-only,
.dataTables_wrapper .dataTable.project-plan-table input.resource-ratio-edit:read-only {
  color: var(--base2);
  background-color: var(--disabled); 
}
.dataTables_wrapper .dataTable.project-plan-table .resource-time-sup,
.dataTables_wrapper .dataTable.project-plan-table .resource-ratio-sup {
  display: inline;
  margin-left: 0.25rem;
}
.dataTables_wrapper .dataTable.project-plan-table .cost-item {
  margin-bottom: 0.5rem;
}
.dataTables_wrapper .dataTable.project-plan-table span.cost-name-prefix,
.dataTables_wrapper .dataTable.project-plan-table span.cost-amount-prefix {
  display: inline-block;
  width: 1.8rem;
  margin-right: 0.2rem;
  font-size: 0.72rem;
  color: var(--base2);
}
.dataTables_wrapper .dataTable.project-plan-table span.cost-amount-prefix {
  padding-right: 0.2rem;
}
.dataTables_wrapper .dataTable.project-plan-table span.cost-amount-prefix {
  text-align: right;
}
.dataTables_wrapper .dataTable.project-plan-table input.cost-name-edit,
.dataTables_wrapper .dataTable.project-plan-table input.cost-amount-edit {
  width: 8rem;
}
.dataTables_wrapper .dataTable.project-plan-table input.cost-amount-edit.invalid-value:not(:disabled) {
  border-color: var(--danger);
}
.dataTables_wrapper .dataTable.project-plan-table .cost-name-edit-wrapper,
.dataTables_wrapper .dataTable.project-plan-table .cost-amount-edit-wrapper {
  //-display: inline-block;
  margin-bottom: 0.2rem;
}
.dataTables_wrapper .dataTable.project-plan-table .cost-column-action {
  text-align: right;
}
.dataTables_wrapper .dataTable.project-plan-table .add-cost-column-item {
  background-color: transparent;
  border: none;
  padding: 0;
  color: var(--info);
  font-size: 1.2rem;
}
.dataTables_wrapper .dataTable.project-plan-table .add-cost-column-item:hover {
  color: var(--success);
}

/*------------------------------------------
 * Bootstrap Timepicker
 -------------------------------------------*/
.bootstrap-timepicker-widget .bootstrap-timepicker-hour,
.bootstrap-timepicker-widget .bootstrap-timepicker-minute {
  border: none;
}
.bootstrap-timepicker .input-group-addon .input-group-text {
  height: 40px;
  width: 40px;
  padding-top: 0.75rem;
  color: var(--base2);
  background-color: var(--inverse-primary);
  border-color: #dee2e6;
}
.bootstrap-timepicker input[type="text"]:focus:read-only {
  background-color: var(--disabled);
  border-color: var(--disabled);
}
.bootstrap-timepicker .input-group-addon i:hover {
  color: var(--primary);
}
.bootstrap-timepicker input.form-control:read-only~.input-group-addon .input-group-text,
.bootstrap-timepicker input.form-control:disabled~.input-group-addon .input-group-text {
  color: var(--base3);
  background-color: var(--disabled); 
}
.bootstrap-timepicker input.form-control.invalid-value:not(:read-only)~.input-group-addon .input-group-text,
.bootstrap-timepicker input.form-control.invalid-value:not(:disabled)~.input-group-addon .input-group-text {
  border-color: var(--danger);
}

/*------------------------------------------
 * Item detail
 -------------------------------------------*/
.item-detail {
  margin: 0 1rem;
}
.item-detail .row {
  padding: 0.5rem 0;
}
.item-detail-bb > .row:not(:last-child) {
  border-bottom: 1px solid var(--base6);
}

/*------------------------------------------
 * Checkbox
 -------------------------------------------*/
.form-check {
  margin: 5px 0;
}
.table .checkbox-column .form-check {
  margin: 0;
  min-height: 0;
}
.table .checkbox-column .form-check i {
  margin-left: 0;
}
.table .checkbox-column .form-check .form-check-label {
  margin-left: 1.25rem;
}
.form-check .form-check-label input[type="checkbox"] + .input-helper:before {
  background-color: #fff;
  border: 1px solid #1F3BB3;
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before {
  border: 1px solid #1F3BB3;
}
.form-check .form-check-label input[type="checkbox"] + .input-helper:after {
  -webkit-transition-duration: unset;
  transition-duration: unset;
}
.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:after {
  height: 20px;
  width: 20px;
  top: 1.5px;
}

/*------------------------------------------
 * Font size
 -------------------------------------------*/
.font-size-1 {
  font-size: 1rem;
}

/*------------------------------------------
 * Modal
 -------------------------------------------*/
.modal.modal-inverse-primary .modal-header {
  background-color: var(--inverse-primary);
}
.modal.modal-inverse-success .modal-header {
  background-color: var(--inverse-success);
}
.modal.modal-inverse-danger .modal-header {
  background-color: var(--inverse-danger);
}
.modal .modal-dialog .modal-content .modal-footer {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 800px;
  }
}

/*------------------------------------------
 * toggle switch
 -------------------------------------------*/
.switch-area {
  text-align: center;
  position: relative;
  width: 80px;
  margin-top: 0.6rem;
  margin-left: auto;
  margin-right: 1.5rem;
  line-height: 1.25;
}
.switch-area input[type="checkbox"] {
  display: none;
}
.switch-area label {
  display: block;
  box-sizing: border-box;
  height: 1.5rem;
  border: 1px solid var(--switchFg);
  background-color: var(--switchBg1);
  border-radius: 0.75rem;
  cursor: pointer;
  padding-top: 0.15rem;
  font-size: 0.85rem;
  margin-bottom: 0;
}
.switch-area input[type="checkbox"]:checked +label {
  border-color: var(--switchFg);
  background-color: var(--switchBg2);
}
.switch-area #swImg {
  position: absolute;
  width: 1.005rem;
  height: 1.005rem;
  background: var(--switchFg);
  top: 0.25rem;
  left: 0.25rem;
  border-radius: 0.5rem;
  transition: .3s;
}
.switch-area input[type="checkbox"]:checked ~ #swImg {
  transform: translateX(56px);
  background: var(--switchFg);
}
/* グループユーザーを展開トグルスイッチ */
.switch-area.switch-joined-users {
  margin-top: 0;
  width: 170px;
  margin-right: 0.25rem;
}
.switch-area.switch-joined-users input[type="checkbox"]:checked ~ #swImg {
  transform: translateX(146px);
}
.switch-area.switch-joined-users input[type="checkbox"]:checked +label {
  border-color: var(--switchFg);
}
.switch-area.switch-joined-users label span:after{
  content: "サブグループを展開";
  padding: 0 0 0 7px;
  color: var(--switchFg);
  font-size: 0.8rem;
}
.switch-area.switch-joined-users input[type="checkbox"]:checked + label span:after{
  content: "サブグループを表示";
  padding: 0 3px 0 0;
  color: var(--switchFg);
  font-size: 0.8rem;
}
/* 割合で入力トグルスイッチ */
.switch-area.switch-by-ratio {
  margin-top: 0;
  width: 120px;
  margin-right: 0.25rem;
}
.switch-area.switch-by-ratio input[type="checkbox"]:checked ~ #swImg {
  transform: translateX(96px);
}
.switch-area.switch-by-ratio input[type="checkbox"]:checked +label {
  border-color: var(--switchFg);
}
.switch-area.switch-by-ratio label span:after{
  content: "時間で入力";
  padding: 0 0 0 7px;
  color: var(--switchFg);
  font-size: 0.8rem;
}
.switch-area.switch-by-ratio input[type="checkbox"]:checked + label span:after{
  content: "割合で入力";
  padding: 0 3px 0 0;
  color: var(--switchFg);
  font-size: 0.8rem;
}
/* カレンダーバー */
.sked-tape__event {
  background-color: var(--info) !important;
  border: 2px solid var(--info) !important;
  color: white;
}
.sked-tape__event:hover {
  background-color: var(--info) !important;
  border-color: var(--danger) !important;
  color: white;
  text-decoration: underline;
}

/*------------------------------------------
 * 社員 写真
 * -----------------------------------------*/
.photo-portrait_mini {
  border-radius: 15px;
  width: 180px;
  height: 240px;
}
.photo-portrait-unknown_mini {
  background-color: var(--disabled);
  color: var(--base3);
  font-size: 11rem;
}
/*------------------------------------------
 * page loader
 -------------------------------------------*/
.jumping-dots-loader span {
  width: 0.75rem;
  height: 0.75rem;
}