/* 折り返しを防ぐスタイル */
.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* テキストを右揃えする */
.right-align {
  text-align: right;
}

/* テキストを中央揃えする */
.center-align {
  text-align: center;
}

/* テキストの透明度 */
.transparent {
  opacity: 0.5;
}

/* \n だけで改行。行の途中は絶対に折り返さない */
.pre-line {
  white-space: pre !important;
  /* 改行 = \n のみ */
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* セル内の \n を改行表示（必要なセルだけに付ける用） */
.pre-only-newlines {
  white-space: pre-line !important;
}

/* テーブル上部に出す小さな保存インジケータ */
.saving-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  margin-left: 8px;
  color: #333;
}

.saving-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0d6efd;
  border-top-color: transparent;
  animation: saving-rotate 0.8s linear infinite;
}

@keyframes saving-rotate {
  to {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

body {
  background-color: white;
  font-family:"Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3",
    "Meiryo",
    "メイリオ",
    "MS PGothic",
    "Osaka",
    arial,
    helvetica,
    clean,
    sans-serif;
}

.table {
  margin-top: 1px;
  /* 必要に応じてテーブルの上部にマージンを追加 */
}

.table-scroll {
  overflow-x: scroll;
  white-space: nowrap;
}

table.table-color {
  border-color: #000000;
}

table.table-color th {
  background-color: #000000;
  border-color: gray;
  color: white;
}

table.table-color th.total-color {
  color: white;
  background-color: #2e2c2cf8;
}
table.table-color th.total-color-white {
  color: #000000;
  font-size: large;
  background-color: white;
}

table.table-color th.total-color-white_normal {
  color: #000000;
  background-color: white;
}

table.table-color th.food-info{
  color: #000000;
  font-size: medium;
  font-weight: normal;
}

table.table-color th.total-color-variable {
  color: #000000;
  background-color: #fcb045;
  text-align: right;
  font-weight: bold;
}
table.table-color th.total-color-insurance {
  color: #000000;
  background-color: #219c90be;
  text-align: right;
  font-weight: bold;
}
table.table-color th.total-color-fixed {
  color: #000000;
  background-color: #fc5e46;
  text-align: right;
  font-weight: bold;
}
table.table-color th.total-color-average-total {
  background-color: #0E2954;
  font-weight: bold;
  text-align: center;
  border-left-width: 2px;
}

table.table-color th.text-red {
  color: red;
}
table.table-color th.no-border {
  border-right: hidden;
  border-left: hidden;
  border-top: hidden;
}

table.table-color th.no-border_ltb_th {
  border-left: hidden;
  border-top: hidden;
  border-bottom: hidden;
}

table.table-color th.border {
  border-bottom: solid 1px !important;
  border-color: gray!important;
}

table.table-color td.gray-bg {
  background-color: rgb(202, 201, 201) !important;
}

table.table-color td.black-bg {
  background-color: #00215E;
  color: white;
  font-size: weight;
  border-top: solid 1px !important;
  border-color: gray !important;
}

table.table-color td.blue-bg {
  background-color: #013477;
  color: white;
  font-size: weight;
  border-top: solid 1px !important;
  border-color: gray !important;
}

table.table-color td.gray-bc {
  border-top: solid 1px !important;
  border-color: gray !important;
}

table.table-color td.text-negative {
  color: red !important;
}
table.table-color td.total-text {
  text-align: right;
}
table.table-color td.total-color {
  background-color: #e0e4e765;
  text-align: right;
  font-weight: bold;
}
table.table-color td.total-Remaining_color {
  background-color: #e0e4e765;
  text-align: right;
  font-weight: bold;
}
table.table-color td.total-color-balance {
  background-color: rgba(34, 102, 141, 0.479);
  text-align: right;
  font-weight: bold;
}
table.table-color td.life-plan-total-color-balance {
  background-color: rgba(34, 102, 141, 0.479);
  text-align: right;
  font-weight: bold;
  font-size: medium;
}
table.table-color th.life-plan-asset, td.life-plan-asset {
  background-color: rgba(34, 141, 66, 0.479);
  font-weight: bold;
}
table.table-color td.life-plan-total-color-savings {
  background-color: rgba(141, 34, 109, 0.479);
  text-align: right;
  font-weight: bold;
  font-size: medium;
}
table.table-color td.total-color-white {
  color: #000000;
  font-size: large;
  background-color: white;
}
table.table-color td.negative-color {
  background-color: red;
}
table.table-color td.negative-bg-color {
  background-color: #FFFB73;
}
table.table-color td.warning-color {
  background-color: yellow;
}
table.table-color td.total-color-insurance {
  background-color: #219c90be;
}
table.table-color th.change-color,
td.change-color, td.budget-plan-total-change-all{
  background-color: #BED7DC !important;
}
table.table-color th.life-plan-income, td.life-plan-income {
  background-color: #219c90be;
  font-weight: bold;
}
table.table-color th.expense-color, td.expense-color {
  background-color: #F29727 !important;
}
table.table-color th.life-plan-expense-color,
td.life-plan-expense-color {
  background-color: #F29727 !important;
  font-weight: bold;
}
table.table-color td.balance-color {
  background-color: rgba(34, 102, 141, 0.479);
  font-weight: bold;
}

table.table-color td.no-border {
  border-right: hidden;
}
table.table-color th.no-border-right, td.no-border-right {
  border-right: hidden !important;
}
table.table-color th.no-border-left, td.no-border-left {
  border-left: hidden !important;
}
table.table-color th.no-border-bottom, td.no-border-bottom {
  border-bottom: hidden !important;
}
table.table-color th.no-border-top, td.no-border-top {
  border-top: hidden !important;
}
table.table-color td.no-border_all {
  border-top: hidden ;
  --bs-table-bg-type:none;
}
table.table-color td.no-border_ltb_td {
  border-left: hidden;
  border-top: hidden;
  border-bottom: 1px solid #000000;
}

table.table-color th.this,td.this {
  background-color: rgb(255, 238, 0);
}
table.table-color th.this_month,
td.this_month {
  background-color: #6C0345;
}

table.table-color th.this-daily,
td.this-daily {
  background-color: rgba(0, 162, 255, 0.233);
  color: #000;
}

table.table-color td.dotted-border {
  border-left: outset;
}

table.table-color td.budget-plan {
  width: 3em;
}
table.table-color td.budget-plan-average,
td.budget-plan-total,
td.budget-plan-average-expense,
td.budget-plan-total-expense,
td.budget-plan-average-expense-all,
td.budget-plan-average-income,
td.budget-plan-total-income,
td.budget-plan-total-income-all,
td.budget-plan-total-average,
td.budget-plan-total-change-all
{
  width: 4em;
  text-align: right;
  font-weight: bold;
}
table.table-color td.budget-plan-average-expense-all
{
  background-color: #F29727;
}

table.table-color td.budget-plan-total-income-all
{
  background-color: #219c90be;
}

table.table-color td.budget-plan-average-expense,
td.budget-plan-total-expense,
td.budget-plan-total-income-all,
td.budget-plan-total-change-all,
td.budget-plan-total-average
{
  border-left-width: 2px;
  border-left-color: #3333337e;
}

table.table-color td.budget-plan-classification {
  width: 2em;
  font-weight: bold;
}
table.table-color td.budget-plan-item {
  width: 3em;
}
table.table-color td.food_num {
  width: 5em;
}

table.table-color tbody td.btn-decorate {
  white-space: nowrap;
  vertical-align: middle;
  padding-top:1px;
  padding-bottom:1px;
  line-height: 0.5;
}

table.table-color td.wheel_of_life {
  text-align: left;
  white-space: pre-wrap;
    /* CSSで改行を考慮する */
  width: 160px;
}

.issue-textarea{
    width: 100px;
}


/* 変更がある場合の視覚効果 */
textarea.modified {
  border: 2px solid #ff9800;
  /* オレンジ色の枠線 */
  background-color: #fff8e1;
  /* 薄い黄色の背景 */
}

.category-select {
  background-color: #9AD0C2;
}

 .except-special{
  font-size: smaller;
}

.hidden-column,
.hidden-category {
  display: none;
}

button.btn.btn-decorate {
    white-space: nowrap;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    width: 50px;
    margin: auto;
    border-radius: 100vh;
    transition: 0.5s;
    --bs-btn-line-height: 1;
}

button.btn.btn-info-decorate {
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  border-radius: 100vh;
  transition: 0.5s;
  --bs-btn-line-height: 1;
}

button.btn.btn-update {
  white-space: nowrap;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  width: 50px;
  margin: auto;
  border-radius: 100vh;
  transition: 0.5s;
  --bs-btn-line-height: 1;
  color: black;
}

/* 行の上下のパディングを調整 */
.table.table-color tbody tr {
  padding: 4px 0;
}
.table.table-color tbody tr.border-double {
  border-bottom: 3px double #333333;
}
table.table-color tr.gray-bg {
  background-color: rgb(202, 201, 201) !important;
  --bs-table-bg:none;
}

/* セルの上下のパディングを調整 */
.table.table-color tbody td,
.table.table-color tbody th {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.2;
  /* 行の高さを調整 */
}

.table-fixed-width {
  width: 32%;
  margin-left: 5px;
}

.table-fixed-twenty-five-width {
  width: 25%;
  margin-left: 5px;
}

.table-fixed-half-width {
  width: 50%;
  margin-left: 5px;
}

.table-fixed-sixty-width {
  width: 60%;
  margin-left: 5px;
}

.table-fixed-seventy-five-width {
  width: 75%;
  margin-left: 5px;
}

/* 灰色の線 */
.border-bottom-gray {
  border-bottom: 1px solid #6b6a6ade !important;
}

.border-top-gray {
  border-top: 1px solid #6b6a6ade !important;
}

/* 点線 */
.dotted{
  border-top: 2px dotted #6b6a6a44 !important;
}

/* 破線 */
.dashed {
  border-bottom: 2px dashed #6b6a6a44 !important;
}

.dashed-top {
  border-top: 2px dashed #6b6a6a44 !important;
}

/* カレンダー */
.calendar-table {
  border-collapse: collapse;
  margin-bottom: 20px;
  width: 100%;
  table-layout: fixed;
  font-size: small;
}

.calendar-table th,
.calendar-table td {
  border: 1px solid black;
  text-align: left;
  vertical-align: top;
}

.calendar-table th {
  background-color: #f0f0f0;
}

.calendar-row {
  display: flex;
}

.calendar-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-table td {
  min-height: 60px;
  /* 文字3行分の高さを固定 */
  line-height: 20px;
  /* 高さを3行分に分割 */
  overflow: hidden;
  /* 余分なテキストを隠す */
  height: 60px;
  /* セルの高さを固定 */
  align-items: center;
  /* 垂直方向の中央揃え */
  justify-content: center;
  /* 水平方向の中央揃え */
}

.holiday {
  background-color: #9AD0C2;
}

.holiday-name {
  display: block;
  text-align: center;
}

.expanded-text {
  display: block;
  white-space: normal;
}

.weekend {
  background-color: #ADD8E6;
}

.calendar-year {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
}

.calendar-month {
  position: relative;
  flex: 0 0 33.3333%;
  padding: 5px;
  box-sizing: border-box;
}

.day-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.day-info,
.day-event,
.day-expense {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.day-expense {
  align-items: flex-end ;
  margin-bottom: 4px;
}

/* イベントリストのスタイル */
.day-events-list {
  display: block;
  /* 初期状態では非表示 */
}

.day-events-list.show {
  display: block;
  /* 表示切り替え */
}

/* イベントアイテムのスタイル */
.event-item {
  cursor: pointer;
  padding: 3px;
  border-bottom: 1px solid #ccc;
  /* 区切り線 */
  cursor: pointer;
  /* クリック可能なことを示すカーソル */
}

.expanded-event-text {
  display: none;
  /* イベントの詳細テキストを最初は隠す */
  white-space: normal;
  /* テキストを折り返す */
}

.event-name-initial {
  display: inline-block;
  /* 要素をインラインブロックとして表示 */
  font-weight: bold;
  /* テキストを太字にする */
  color: #333;
  /* テキストの色を設定 */
  margin-right: 5px;
  /* 右側にマージンを設定 */
}

.expanded-event-text.show {
  font-weight: bold;
  display: block;
}

.day-budget {
  color: #333;
}

.day-budget-other-zero {
  background-color: #FFF78A;
  padding: 2px;
  border-radius: 10px;
}

.day-budget-zero {
  text-align: right;
  color: rgba(255, 255, 255, 0.349);
 }

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  /* モバイルデバイスでは画面の幅の大部分を使用 */
  max-width: 600px;
  max-height: 60vh;
  overflow-y: auto;
  /* 内容が高さを超える場合、スクロールバーを表示 */
  background-color: #d1ecf1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.modal-content {
  display: flex;
  flex-direction: column;
}

/* フォーム全体のスタイル */
.event-form,
.budget-form {
  display: flex;
  flex-direction: column;
  margin: 4px;
}

/* 日付入力のコンテナスタイル */
.date-container {
  display: flex;
  justify-content: space-between;
  /* 日付フィールドを均等に分散 */
  margin-bottom: 2px;
  /* 下の余白を設定 */
}

.form-row,
.form-row-2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  /* 行と行の間にマージンを追加 */
}

.form-row .form-control, 
.form-row-2 .form-control {
  margin: 3px;
  padding: .1rem .75rem;
  /* 右側の要素に少しスペースを追加 */
}

.buttons-container {
  display: flex;
  justify-content: flex-end;
  /* ボタンを右寄せで表示 */
  gap: 5px;
  /* ボタン同士の間隔 */
  margin-top: 5px;
  margin-bottom: 5px;
}

/* 入力フィールドのスタイル */
.event-form input[type="text"],
.event-form input[type="date"],
.budget-form input[type="text"],
.budget-form input[type="date"] {
  padding: 5px;
  margin: 1px 0;
  border-radius: 4px;
}

.event-form input[type="textarea"],
.budget-form input[type="textarea"] {
  margin: 10px 0;
}

/* 日付の区切り文字のスタイル */
.date-separator {
  padding: 0 5px;
  /* 適切な余白を設定 */
  align-self: center;
  /* フィールドの中央に配置 */
}

/* ボタンのスタイル */
.event-form button,
.budget-form button {
  padding: 3px 19px;
  line-height: 1.5;
  text-decoration: none;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Bootstrapのボタンスタイルをオーバーライド（必要に応じて） */
.event-form .btn,
.budget-form .btn {
  white-space: nowrap;
  border-radius: 4px;
  padding: 5px 10px;
  color: black;
}

.event-form .delete-btn,
.budget-form .delete-btn {
  white-space: nowrap;
  border-radius: 4px;
  padding: 5px 10px;
  color: white;
}

.close-button {
  align-self: flex-end;
  /* 閉じるボタンを右上に配置 */
  cursor: pointer;
  font-size: 1.5em;
}

.close-button {
  font-size: 1.5em;
  /* アイコンの大きさを調整 */
  color: #aaa;
  /* アイコンの色を調整 */
  cursor: pointer;
  padding: 5px 10px;
  /* クリックしやすいようにパディングを追加 */
  border: none;
  background: none;
}

.close-button:hover {
  color: #777;
  /* ホバー時の色を変更 */
}

.expanded-text {
  display: none;
  /* 初期状態では非表示 */
  white-space: normal;
  /* テキストを折り返す */
}

.expanded-text.show {
  display: block;
  /* クリックされた後に表示 */
}

.today-highlight {
  color: #3081D0;
  font-size: x-large;
  display: inline-block ;
  animation: bounce 1s 3;
}

.fixed-column {
  position: sticky;
  left: 0;
}

input[name="budget_total_amount"],
input[name="amount"],
input[name="food_num"],
input[name="main_job_amount"],
input[name="side_1_job_amount"],
input[name="side_2_job_amount"],
input[name="pension_amount"],
input[name="etc_amount"],
input[name="expense_amount"],
input[name="asset_start_amount"],
input[name="asset_savings_amount"]
 {
  text-align: right;
  vertical-align: middle;
  width: 7em;
}
input[name="daily_amount"],
input[name="after_buy_num"]
 {
  text-align: right;
  vertical-align: middle;
  width: 5em;
}
input[name="start_month"] {
  text-align: right;
  vertical-align: middle;
}
input[name="affiliation"] {
  vertical-align: middle;
}

input[name="checkbox"] {
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
input[name="january"],
input[name="february"],
input[name="march"],
input[name="april"],
input[name="may"],
input[name="june"],
input[name="july"],
input[name="august"],
input[name="september"],
input[name="october"],
input[name="november"],
input[name="december"],
input[name="balance"] {
  text-align: right;
  vertical-align: middle;
}

input[name="jan_stock"],input[name="jan_buy"],
input[name="feb_stock"],input[name="feb_buy"],
input[name="mar_stock"],input[name="mar_buy"],
input[name="apr_stock"],input[name="apr_buy"],
input[name="may_stock"],input[name="may_buy"],
input[name="jun_stock"],input[name="jun_buy"],
input[name="jul_stock"],input[name="jul_buy"],
input[name="aug_stock"],input[name="aug_buy"],
input[name="sep_stock"],input[name="sep_buy"],
input[name="oct_stock"],input[name="oct_buy"],
input[name="nov_stock"],input[name="nov_buy"],
input[name="dec_stock"],input[name="dec_buy"]
{
  text-align: right;
  vertical-align: middle;
}
input[readonly] {
  background-color: #f2f2f2;
  /* 灰色の背景 */
}

input[name="start_year"],
input[name="appearance_year"],
input[name="appearance_age"],
input[name="event_year"],
input[name="main_job_rate"],
input[name="main_job_start_age"],
input[name="main_job_end_age"],
input[name="side_1_job_rate"],
input[name="side_1_job_start_age"],
input[name="side_1_job_end_age"],
input[name="side_2_job_rate"],
input[name="side_2_job_start_age"],
input[name="side_2_job_end_age"],
input[name="pension_rate"],
input[name="pension_start_age"],
input[name="pension_end_age"],
input[name="etc_rate"],
input[name="etc_start_age"],
input[name="etc_end_age"],
input[name="expense_rate"],
input[name="expense_start_age"],
input[name="expense_end_age"],
input[name="asset_rate"],
input[name="asset_start_age"],
input[name="asset_end_age"]
{
  text-align: right;
  vertical-align: middle;
  width: 5em;
}

input[name="searchBox"]
{
  width: 10em;
}

input[name="howasaba_speed"] {
  text-align: right;
  vertical-align: middle;
  width: 2em;
}


.input-highlight {
  background-color: #bae2f571 !important;
  /* 薄い水色 */
}
.text-highlight {
  background-color: #bae2f594 !important;
  /* 薄い水色 */
}

.input-gray {
  background-color: gray;
}

.table.table-color tbody td.unnsecessary input {
  background-color:rgba(128, 128, 128, 0.308);
}
.wide-input {
  vertical-align: middle;
  width: 300px;
}

.budget-plan-input {
  vertical-align: middle;
  width: 3em;
}
.month-input{
  vertical-align: middle;
  width: 3em;
}
.daily-stock,
.daily-stock-input {
  vertical-align: middle;
  width: 4em;
  padding: 2px 1px !important;
}
.tables-flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}

.table-wrapper{
  overflow-x: auto;
  max-width: 100%;
  margin-left: 20px;
}
.table-wrapper-flex,
.table-wrapper-flex-1,
.table-wrapper-flex-2,
.table-wrapper-flex-3,
.table-wrapper-flex-4,
.table-wrapper-flex-5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 100%;
  margin-left: 5px;
}
.table-wrapper-plan,
.table-wrapper-cost-detail {
  overflow-x: auto;
  max-width: 100%;
  margin-left: 5px;
}
.table-wrapper-life-plan{
  /* overflow-x: auto; */
  max-width: 100%;
  margin-left: 5px;
  scroll-behavior: smooth;
}
.table-wrapper-inextotal,
.table-wrapper-wish,
.table-wrapper-history,
.table-wrapper-MoneyFoward,
.table-wrapper-stock,
.table-wrapper-cost,
.table-wrapper-wheel {
  overflow-x: auto;
  max-width: 100%;
  margin-left: 5px;
}
.table-wrapper-stock-2,
.table-wrapper-stock-3
{
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse !important;
    /* セル間の隙間をなくす */
}

.table-wrapper-stock-2 th,
.table-wrapper-stock-2 td {
  padding: 0px 4px !important;
  /* セルの内側の余白を調整（上下0px、左右4px） */
}

.table-wrapper-stock-3 th,
.table-wrapper-stock-3 td {
  padding: 1px 4px !important;
  /* セルの内側の余白を調整（上下0px、左右1px） */
}

.table-wrapper-stock-top {
  flex: 1 1 auto !important;
  width: auto;
  min-width: 0;
  margin: 2px;
}

.table-wrapper-stock-profit-loss-1 {
  overflow-x: auto;
  max-width: 120px;
  margin-left: 20px;
}

.table-wrapper-stock-profit-loss-2 {
  overflow-x: auto;
  max-width: 160px;
  margin-left: 20px;
}

.table-wrapper-stock-profit-loss-3 {
  overflow-x: auto;
  max-width: 200px;
  margin-left: 20px;
}

.table-wrapper-stock-profit-loss-4 {
  overflow-x: auto;
  width: 100%;
  margin-left: 20px;
  /* font-size: small; */
}

.table-wrapper-stocks-purchase-simulation-1 {
  overflow-x: auto;
  max-width: 200px;
  margin-left: 20px;
  /* font-size: small; */
}

.table-wrapper-stocks-purchase-simulation-2 {
  overflow-x: auto;
  width: 100%;
  margin-left: 50px;
  /* font-size: small; */
}

/* 固定列の幅（必要に応じて数値調整） */
:root {
  --w-dup: 60px;
  /* 重複列の幅 */
  --w-code: 80px;
  /* 銘柄コード列の幅 */
  --w-name: 180px;
  /* 銘柄名列の幅 */
}

/* 段階的に左オフセットをずらす固定列 */
.sticky-left-1,
.sticky-left-2,
.sticky-left-3 {
  position: sticky;
  z-index: 2;
  background: #fff;
}

/* 1列目（重複） */
.sticky-left-1 {
  left: 0;
  min-width: var(--w-dup);
}

/* 2列目（銘柄コード） */
.sticky-left-2 {
  left: var(--w-dup);
  min-width: var(--w-code);
}

/* 3列目（銘柄名）…既存 .sticky-name と併用、こちらで left を上書き */
.sticky-left-3 {
  left: calc(var(--w-dup) + var(--w-code));
  min-width: var(--w-name);
}

/* ヘッダは前面に */
table.table-color thead th.sticky-left-1,
table.table-color thead th.sticky-left-2,
table.table-color thead th.sticky-left-3,
table.table-color thead th.sticky-name {
  z-index: 3;
}

.table-wrapper-wheel th,
.table-wrapper-wheel td {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

.table-wrapper-wheel td.item {
  background-color: #9AD0C2;
  /* ライトグリーン */
  cursor: pointer;
}
.table-wrapper-wheel td.current {
  background-color: #FEB941;
  /* ライトブルー */
  cursor: pointer;
}

.table-wrapper-wheel td.target {
  background-color: #6DC5D1;
  /* ライトグリーン */
  cursor: pointer;
}

.table-wrapper-wheel td.current:hover,
.table-wrapper-wheel td.target:hover {
  background-color: #f9d923;
}

.table-wrapper-hobbies-howasaba {
  overflow-x: auto;
  max-width: 70%;
  margin-left: 5px;
  padding: 1px 1px !important;
}

.table-wrapper-hobbies-howasaba .table.table-color td,
.table-wrapper-hobbies-howasaba .table.table-color th {
  padding-left: 2px;
  padding-right: 2px;
}

.table-wrapper-hobbies-howasaba td {
  font-size: 12px !important;
  line-height: 1.2;
}

.table-wrapper-hobbies-howasaba input[type="text"] {
  width: 90%;
  margin: 0;
  box-sizing: border-box;
}

.truncate {
  display: inline-block;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

.truncate.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.truncate-cost-perform {
  display: block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  font-size:small;
}

.truncate-cost-perform.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.truncate-cost-perform-column {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.text-negative {
  color: red;
}

.truncate-wish {
  cursor: pointer;
  position: relative;
  max-width: 160px;
  /* 必要に応じて調整 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-wish .short-text {
  display: inline;
}

.truncate-wish .full-text {
  display: none;
}

.truncate-wish.expanded {
  white-space: normal;
}

.truncate-wish.expanded .short-text {
  display: none;
}

.truncate-wish.expanded .full-text {
  display: inline;
}

.gray-text {
  background-color:rgba(128, 128, 128, 0.144) !important;
}
.gray-text-transparent {
  background-color: rgba(128, 128, 128, 0.144) !important;
  color: transparent !important;
}
.gray-text,
.gray-text input,
.gray-text textarea {
  color: gray;
}

.remaining_amount ,
.remaining_amount input,
.remaining_amount textarea {
  background-color: #7ed7c154 !important;
}

.charts-wrapper {
  display: flex;
  justify-content: space-between;
  /* グラフの間にスペースを配置 */
  margin-top: 20px;
  /* 上の余白 */
  margin-bottom: 20px;
  /* 下の余白 */
  overflow-x: auto;
  /* 横方向のスクロールを有効にする */
  white-space: nowrap;
  /* 子要素を折り返し防止 */
}
.charts-wrapper-life-plan
{
  display: flex;
  justify-content: space-between;
  /* グラフの間にスペースを配置 */
  margin-top: 20px;
  /* 上の余白 */
  margin-bottom: 20px;
  /* 下の余白 */
  overflow-x: auto;
  /* 横方向のスクロールを有効にする */
  white-space: nowrap;
  /* 子要素を折り返し防止 */
}

.charts-wrapper-wheel-of-life {
    display: flex;
    flex-wrap: wrap;
}

.chart-container_pie {
  flex: 1;
  /* 各グラフコンテナが利用可能なスペースを均等に分割 */
  margin: 0 10px;
  /* グラフの左右の間に少しマージンを追加 */
}

.chart-container_line {
  flex: 1;
  /* 各グラフコンテナが利用可能なスペースを均等に分割 */
  margin: 0 10px;
  /* グラフの左右の間に少しマージンを追加 */
}

.chart-container_line_stock {
  flex: 1;
  /* 各グラフコンテナが利用可能なスペースを均等に分割 */
  margin: 0 10px;
  /* グラフの左右の間に少しマージンを追加 */
}

.chart-container_line_life_plan {
  flex: 1;
  /* 各グラフコンテナが利用可能なスペースを均等に分割 */
  margin: 0 10px;
  /* グラフの左右の間に少しマージンを追加 */
}

.chart-container_line_year_budget_plan
{
  flex: 1;
  /* 各グラフコンテナが利用可能なスペースを均等に分割 */
  margin: 0 10px;
  /* グラフの左右の間に少しマージンを追加 */
}

.charts-container-wheel-of-life {
   flex-basis: 100%;
  /* モバイルビューでは100%の幅を取る */
  margin: 1 auto;
  /* 中央に配置 */
}

.chart-container_pie canvas {
  height: 300px !important;
  width: 300px !important;
}

.chart-container_line canvas {
  height: 300px !important;
  width: 400px !important;
}

.chart-container_line_stock canvas {
  height: 300px !important;
  width: 400px !important;
}

.chart-container_line_life_plan canvas {
  height: 300px !important;
  width: 400px !important;
}

.chart-container_line_year_budget_plan canvas {
  height: 300px !important;
  width: 400px !important;
}

.charts-container-wheel-of-life canvas {
    width: 100% !important;
    height: 400px !important; /* 高さを400pxに固定 */
}

.alert-user{
  --bs-alert-padding-y: 5px;
}

.alert-success {
  --bs-alert-padding-y: 5px;
}

li {
  font-size: 16px;
}

.folder {
  font-size: 14px;
}

/* 検索クリアボタンの文字を折り返さない */
#clearSearch {
  white-space: nowrap;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* 背景色と半透明度を設定 */
  display: flex;
  /* フレックスボックスを使用して中央揃えを簡単にする */
  align-items: center;
  /* 垂直方向中央揃え */
  justify-content: center;
  /* 水平方向中央揃え */
  z-index: 1000;
  width: 100%;
  height: 100%;
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 30%; /* 画面の80%の幅までとする */
  padding: 20px;
  background: #fff;
  align-self: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  padding: 30px 40px;
  box-sizing: border-box;
  line-height: 1.4em;
  transition: 0.5s;
  text-align: justify;
}

#closePopupButton {
  position: absolute;
  right: 10px;
  top: 10px;
  background: transparent;
  border: none;
  font-size: 1em;
  /* 必要に応じて変更 */
  cursor: pointer;
  background: #f29c9f;
  color: #fff;
  border-radius: 50%;
  line-height: 20px;
  font-weight: bold;
}

#closePopupButton:hover {
  color: #666;
  /* マウスオーバー時の色を変更 */
}

.scroll {
    overflow-x: auto;
    /* 横方向のスクロールを有効にする */
    white-space: nowrap;
}

/* ドロップダウン*/
.dropdown-menu {
  background-color: #343a40;
  /* Navbar background color */
  border: none;
}

.dropdown-item {
  color: #ffffff;
  /* Navbar text color */
  border-bottom: 1px solid #495057;
  /* Slightly darker than the navbar background for separation */
  transition: background-color 0.2s;
  font-size: 15px;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background-color: #495057;
  /* A bit darker for hover effect */
  color: #ffffff;
}

.link {
  color: #000000;
    /* リンクのテキスト色 */
  text-decoration: none;
  /* アンダーラインを消す */
}

.navbar .nav-link {
  font-size: 16px;
}

.navbar .navbar-nav .navbar-brand {
  flex-basis: 5px;
}

.link:hover,
.link:active,
.link-under:hover,
.link-under:active{
  cursor: pointer;
  /* ホバー時にカーソルをポインターに変更 */
  text-decoration: underline;
  /* ホバー時に下線を表示 */
  color: #219c90be;
  /* ホバー時の色 */
}

.link-under {
  color: #219c90be;
  /* リンクのテキスト色 */
}

.img-small {
  width: 50px;
  height: auto;
  vertical-align: middle;
  margin-right: 4px;
}

/* スマートフォン表示の対応 */
@media (max-width: 768px) {

  .tables-flex-container .table-wrapper-cost:not(:first-child),
  .tables-flex-container .table-wrapper-cost-detail:not(:first-child) {
    display: none;
  }

  .table-wrapper-flex {
    display: block;
  }

  .table-wrapper-stock-top {
    overflow-x: auto;
  }

  .calendar-month {
    flex: 0 0 100%;
  }

  .d-flex.align-items-center {
    flex-wrap: wrap;
    /* Flexboxの子要素を折り返す */
  }

  label[for="monthFilter"],
  #monthFilter {
    margin-top: 10px;
    /* 上にマージンを追加して、見た目を整える */
  }

  .modal {
    width: 95%;
    /* スマートフォンではさらに幅を大きく */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    /* モバイルではパディングを少なく */
  }

  #overlay #popup {
    width: 80%;
    /* スマートフォンでは幅を80%にする */
    padding: 20px;
    /* パディングを調整して内容が収まるようにする */
    max-width: none;
    /* max-widthを無効化 */
  }
}


@media (max-width: 480px) {

  .truncate,
  .truncate-cost-perform {
    max-width: 180px;
  }

  #overlay #popup {
    width: 95%;
    /* より小さいデバイスでは幅を95%にする */
  }

}

@keyframes blinking {

  0%,
  100% {
    color: #FF9800;
    /* 元の色 */
    opacity: 1;
    /* 完全に不透明 */
  }

  50% {
    color: black;
    /* 点滅時の色 */
    opacity: 0.5;
    /* 半透明 */
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ===== 保存中オーバーレイ（画面中央・背景ブラー） ===== */
#savingOverlay {
  position: fixed;
  inset: 0;
  /* top/right/bottom/left: 0 */
  display: none;
  /* JS で block に切替 */
  z-index: 2500;
  /* エラー用 #overlay(=3000) より下、画面コンテンツより上 */
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#savingOverlay .saving-overlay__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 180px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  text-align: center;
}

/* スピナー */
.saving-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #ddd;
  border-top-color: #0d6efd;
  /* お好みで */
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.saving-text {
  font-weight: 600;
  letter-spacing: .02em;
}

/* 既に運用中のエラーポップアップが最前面に来るよう優先順位を明示 */
#overlay {
  z-index: 3000;
}