/** bootstrap変数の上書き */
:root {
}

/** アイコンボタン用のアイコン色調整CSS */
.svg-filter-white {
  filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(166deg) brightness(104%) contrast(102%);
}

.svg-filter-secondary {
  filter: invert(47%) sepia(80%) saturate(4479%) hue-rotate(170deg) brightness(88%) contrast(106%);
}

.filter-secondary:hover .svg-filter-secondary {
  filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(166deg) brightness(104%) contrast(102%);
}

.svg-filter-tertiary {
  filter: invert(35%) sepia(100%) saturate(10000%) hue-rotate(190deg) brightness(85%) contrast(90%);
}

.filter-tertiary:hover .svg-filter-tertiary {
  filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(166deg) brightness(104%) contrast(102%);
}

.svg-filter-delete {
  filter: invert(31%) sepia(89%) saturate(1200%) hue-rotate(338deg) brightness(94%) contrast(90%);
}

/** in-valid時のエラーツールチップ */
.was-validated :invalid~div.invalid-feedback,
.was-validated :invalid~div.invalid-tooltip,
.is-invalid~div.invalid-feedback,
.is-invalid~div.invalid-tooltip {
  display: none;
}

.was-validated:focus-within~div.invalid-feedback ,
.was-validated:focus-within~div.invalid-tooltip,
.is-invalid:focus-within~div.invalid-feedback,
.is-invalid:focus-within~div.invalid-tooltip {
  display: block;
  max-width: none !important;
  &:before {
    content: '';
    position: absolute;
    top: -13px;
    left: 10%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-bottom: 7px solid rgba(var(--bs-danger-rgb));
  }
}

/* 通常のエラー状態: 背景色はピンク */
.is-invalid {
  background-color: #ffe6e6;
}

/* フォーカス中や操作中（ユーザーが選択中）の場合: 背景を白に変更 */
.is-invalid:focus {
  background-color: #ffffff;
}

/* ラジオボタンの文字色を変えない */
.form-check-input.is-invalid~.form-check-label{
  color: inherit !important; /* 親要素から色を継承させる */
}

.section { 
  border-left: solid 0.5rem #DCDCDC;
  text-indent: 0.4em; 
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ハンバーガーメニュー設定 */
.dropdown-menu {
  width: 100vw; /* ビューポートの横幅を最大に設定 */
  left: 0; /* 左端に配置 */
  right: 0; /* 右端に配置 */
  /* border border-dark-subtle; */
  border-radius: 0;
}

@media (min-width: 768px) {
  .dropdown-menu {
    width: auto; /* 通常の幅に戻す */
    left: auto;
    right: auto;
  }
}

/* ヘッダー、ボディ、フッターに24pxのパディングを設定 */
.common-padding {
  padding-left: 24px;
  padding-right: 24px;
}

/* スマホ画面描画時のボタンを画面幅サイズにするためのクラス */
.override-padding {
  margin-left: -24px;
  margin-right: -24px;
}

.radio-tile {
    border: 1px solid transparent;
    border-radius: 0.5rem;
    border-width: medium;
    border-color: #11111111;
}

/* ラジオボタン周りの設定 */
/* チェックされたラジオボタンの親のborder-colorを変える */
.radio-tile:has(input[type="radio"]:checked) {
    border-color: rgba(var(--bs-primary-rgb)); /* チェックされたらborder-primaryに */
}

/* コピーライト設定 */
.copylight {
  font-size: 80%;
  text-align: center;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* 添付ファイルリンク関連 */
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* 各アイテム間のスペース */
}
.attachment-item {
  display: flex;
  align-items: center;
  border: 2px solid #949494; /* ボーダーの色設定 */
  border-radius: 4px; /* 角丸 */
  padding: 2px 5px; /* 内部のスペース */
  background-color: #F2F2F2; /* 背景色 */
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 3px rgba(0, 0, 0, 0.1); /* 内部と外部のシャドウ */
}
.attachment-icon {
    width: 16px; /* アイコンのサイズ */
    height: auto;
    margin-right: 5px; /* アイコンとテキストの間のスペース */
}
.attachment-link {
  color: #1A1A1A; /* リンク文字色 */
  text-decoration: none; /* 下線を削除 */
  font-size: 14px; /* フォントサイズ */
  white-space: nowrap; /* テキストを折り返さない設定 */
  overflow: hidden;
  text-overflow: ellipsis; /* テキストが長すぎる場合の処理 */
   /* トリミングされるまでの最大幅 max-width: 100px;*/
}
.attachment-link:hover {
  text-decoration: underline; /* ホバー時に下線を付加して強調 */
}

/* メッセージ詳細画面の外枠設定 */
.message-container {
  border: 1px solid #949494;
  padding: 20px;
  background-color: #fff;
  margin: 20px 0;
}

/* 添付書類マーク用 */ 
.svg-filter-gray {
  filter: invert(58%) sepia(5%) saturate(0%) hue-rotate(0deg) brightness(92%) contrast(93%);
}

/* 添付書類追加画面の外枠設定 */
.file-container {
  border: 1px solid #949494;
  background-color: #F2F2F2;
  padding: 1rem;
}

/* ログイン画面の手続き概要等のご説明 */
/* 請求情報入力２／２画面の注意事項 */
.note-container {
  border: 2px solid #005574;
  /* border-radius: 5px; */
  padding: 10px;
  background-color: #E9F7F9;
  font-family: Arial, sans-serif;
}
.note-title {
  font-weight: bold;
  color: #005574;
  text-align: center;
  margin-bottom: 20px;
}
.note-text {
  white-space: pre-line; /* 改行を表示する */
}

/** テキストの改行を保持 **/
.text-pre-wrap {
  white-space: pre-wrap;
}

/** ヘルプボタン用のアイコン色調整CSS */
.svg-filter-help {
  filter: invert(55%) sepia(78%) saturate(424%) hue-rotate(155deg) brightness(83%) contrast(90%);
}
.svg-filter-help:hover {
  filter: invert(43%) sepia(62%) saturate(3328%) hue-rotate(168deg) brightness(85%) contrast(101%);
}

/* 添付書類ヘルプ画面のスタイル */
.custom-modal {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
}
.custom-modal-dialog {
  max-width: 800px;
}
.custom-modal-content {
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.custom-modal-header {
  background-color: #f1f5f9;
  padding: 20px;
}
.custom-modal-title {
  font-size: 18px;
  font-weight: bold;
}
.custom-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
}
.custom-modal-body {
  padding: 20px;
}
.custom-modal-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}
.custom-modal-table th, .custom-modal-table td {
  border: 1px solid #aaa;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
.custom-modal-table th {
  background-color: #dbe5f1;
  font-weight: bold;
}
.custom-modal-table td {
  background-color: #fff;
}