html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ボタンの色 */
/* primaryボタン：初期状態に色があり、フォーカスすると背景色が白になるボタン */

/* ボタン押下時、青色の影を削除 */
.btn:focus,
.btn:hover
{
  box-shadow: none; /* ボタンの押下時の影を消す */
}

/* アイスグレー */
.btn-primary-icegray
{
  background-color: #90B3BA; /* 背景色をアイスグレーに設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border-color: #90B3BA; /* ボーダー色を白に設定 */
}

/* ボタンがフォーカスされたときのスタイル*/
.btn-primary-icegray:focus,
.btn-primary-icegray:hover
{
  background-color: #ffffff; /* 背景色を白に設定 */
  color: #90B3BA; /* 文字色をアイスグレーに設定 */
  border-color: #90B3BA; /* ボーダー色をアイスグレーに設定 */
}

/* オレンジ */
.btn-primary-orange
{
  background-color: #FF745C; /* 背景色をオレンジに設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border-color: #FF745C; /* ボーダー色を白に設定 */
}

/* ボタンがフォーカスされたときのスタイル*/
.btn-primary-orange:focus,
.btn-primary-orange:hover
{
  background-color: #ffffff; /* 背景色を白に設定 */
  color: #FF745C; /* 文字色をオレンジに設定 */
  border-color: #FF745C; /* ボーダー色をオレンジに設定 */
}

/* グレー */
.btn-primary-gray
{
  background-color: #7F7F7F; /* 背景色をグレーに設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border-color: #7F7F7F; /* ボーダー色を白に設定 */
}

/* ボタンがフォーカスされたときのスタイル*/
.btn-primary-gray:focus,
.btn-primary-gray:hover
{
  background-color: #ffffff; /* 背景色を白に設定 */
  color: #7F7F7F; /* 文字色をグレーに設定 */
  border-color: #7F7F7F; /* ボーダー色をグレーに設定 */
}



/* secondaryボタン：初期状態に色がなく、フォーカスすると背景色がつくボタン */
/* アイスグレー */
.btn-secondary-icegray
{
  background-color: #ffffff; /* 背景色を白に設定 */
  color: #90B3BA; /* 文字色をアイスグレーに設定 */
  border-color: #90B3BA; /* ボーダー色をアイスグレーに設定 */
}

/* ボタンがフォーカスされたときのスタイル*/
.btn-secondary-icegray:focus,
.btn-secondary-icegray:hover
{
  background-color: #90B3BA; /* 背景色をアイスグレーに設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border-color: #90B3BA; /* ボーダー色を白に設定 */
}

/* オレンジ */
.btn-secondary-orange
{
  background-color: #ffffff; /* 背景色を白に設定 */
  color: #FF745C; /* 文字色をオレンジに設定 */
  border-color: #FF745C; /* ボーダー色をオレンジに設定 */
}

/* ボタンがフォーカスされたときのスタイル*/
.btn-secondary-orange:focus,
.btn-secondary-orange:hover
{
  background-color: #FF745C; /* 背景色をオレンジに設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border-color: #FF745C; /* ボーダー色を白に設定 */
}

/* グレー */
.btn-secondary-gray
{
  background-color: #ffffff; /* 背景色を白に設定 */
  color: #7F7F7F; /* 文字色をグレーに設定 */
  border-color: #7F7F7F; /* ボーダー色をグレーに設定 */
}

/* ボタンがフォーカスされたときのスタイル*/
.btn-secondary-gray:focus,
.btn-secondary-gray:hover
{
  background-color: #7F7F7F; /* 背景色をグレーに設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border-color: #7F7F7F; /* ボーダー色を白に設定 */
}

/* ↓削除予定！↓ */
/*ボタン 橙*/
.btn-primary
{
  background: white;
  color: #ff745c;
  border: 3px solid #ff745c;
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:active.focus,
.btn-primary.active, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus
{
  background: #ff745c;
  color: white;
  border: 3px solid #ff745c;
  outline: 0;
  box-shadow: none;
}


/*ボタン 水色*/
.btn-info
{
  background: white;
  color: #00d9c3;
  border: 3px solid #00d9c3;
}
.btn-info:hover, .btn-info:focus,
.btn-info:active, .btn-info:active:focus, .btn-info:active:hover, .btn-info:active.focus,
.btn-info.active, .btn-info.active:focus, .btn-info.active:hover, .btn-info.active.focus,
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-info:hover,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info.focus,
.btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus
{
  background: #00d9c3;
  color: white;
  border: 3px solid #00d9c3;
  outline: 0;
  box-shadow: none;
}

/*ボタン 青色*/
.btn-dark
{
  background: white;
  color: #2e75b6;
  border: 3px solid #2e75b6;
}

.btn-dark:hover, .btn-dark:focus,
.btn-dark:active, .btn-dark:active:focus, .btn-dark:active:hover, .btn-dark:active.focus,
.btn-dark.active, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark.active.focus,
.open > .dropdown-toggle.btn-dark,
.open > .dropdown-toggle.btn-dark:hover,
.open > .dropdown-toggle.btn-dark:focus,
.open > .dropdown-toggle.btn-dark.focus,
.btn-dark.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled.focus, .btn-dark[disabled].focus, fieldset[disabled] .btn-dark.focus
{
  background: #2e75b6;
  color: white;
  border: 3px solid #2e75b6;
  outline: 0;
  box-shadow: none;
}

/* ↑削除予定！↑ */

/*ログイン*/
.loginBorder
{
  border: solid;
  border-color: darkgray;
  height: 45vw; /*画面幅に割合に応じて可変*/
  width: 60vw;
  margin:5vw 10vw;
  min-width:700px; /*ボタン位置などがずれないよう、最小のサイズを指定*/
  min-height:500px;
  margin-right:auto;
  margin-left:auto;
}

.right
{
  line-height:50px;
  position: absolute;
  right: 0; /* 右寄せ */
}

a{
  color:black;
}

/*入力フォーム　下線のみ*/
.inputTextForm{
  border:none;
  outline:none;
  border-bottom: 2px solid gray;
  width:20vw;
}
/*オートコンプリート字の背景(水色)をなしにするため、shadowで上書き*/
input:-webkit-autofill
{
  box-shadow: 0 0 0 1000px white inset;
}
/*パスワードの目実装*/
/*デフォルトの目を非表示*/
input[type="password"]::-ms-reveal
{
  display: none;
}
.password_input_form
{
  display: flex;
  width: 20vw;
  border-bottom: 2px solid gray;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}

.password_input
{
  flex: 1;
  outline: none;
  border: none;
  width: 20vw;
}

.password_toggle
{
  width: 40px;
  border: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z'/></svg>") no-repeat center center;
  background-size: 70% ;
  cursor: pointer;
}

.password_toggle.is-visible
{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/></svg>");
}

@media (any-hover: hover)
{
  .password_toggle:hover
  {
    opacity: 0.7;
  }
}

/* 情報一覧のテーブルスタイル */
.list-table-container
{
  max-height: 75vh; /* テーブルの最大高さ */
  overflow-y: auto; /* 垂直方向のスクロールバーを表示する */
  overflow-x: auto; /* 水平方向のスクロールバーを表示する */
  border: 1px solid #ccc; /* テーブルの境界線 */
}

.listTable
{
  border-collapse: collapse;
  border-spacing:0;
  width: 100%;
}

.list-th, .list-td
{
  vertical-align: middle;
  padding: 10px 5px;
  border: 1px solid #fff;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.list-th
{
  background: #D9E1F2;
  color: #000
}

/* 長い文字はセル内で折り返す */
.list-td
{
  background: #ffffff;
  word-wrap: break-word; /*単語の途中での改行を許可*/
  white-space: normal; /* テキストの折り返しや空白文字の扱いを制御 */
}

/* 偶数行のセルの色 */
.listTable tr:nth-child(even) td
{
  background: #E7EAED;
}

._sticky-list-header
{
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}

._sticky-list-header:before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #D9E1F2;
  z-index: -1;
}

/*ツールチップ*/
/*.tooltip
{
  position: absolute;
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

table tr:nth-child(even) td
{
  background-color: white;
}

th:hover .tooltip
{
  visibility: visible;
  opacity: 1;
}*/

/*.scroll{
  overflow:auto;
  height:500px;
}*/


/*ツールチップ*/
.settingTooltip
{
  position: relative;
  cursor: pointer;
  display: inline-block;
  z-index: 2; /* ツールチップをヘッダーよりも背面に表示 */
}

.settingTooltip sapn
{
  margin: 0;
  padding: 0;
}

.tooltipContext
{
  display: none;
  position: absolute;
  padding: 10px;
  font-size: 12px;
  line-height: 1.6em;
  color: #000;
  border-radius: 5px;
  background: #fff;
  width: 230px;
  top: 70px; /* ツールチップと事業所名が被らない配置 */
  left: 0px;
  text-align: left; /* テキストを左寄せにする */
}

.tooltipContext:before
{
  content: "";
  position: absolute;
  top: -24px;
  right: 60%;
  margin-left: -0px;
  transform: rotateZ(180deg);
}

.settingTooltip:hover .tooltipContext
{
  display: inline-block;
}
/*エクスポートアイコンのクリック時の動作*/
.exportButton:focus{
  cursor:pointer;
  
}
.exportIcon:hover
{
  filter: opacity(30%);
}
.importIcon:hover
{
  filter: opacity(30%);
}
.updateIcon:hover
{
  filter: opacity(30%);
}
/* アコーディオンメニューの色カスタマイズ */
.accordion-button.collapsed::after
{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after
{
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus
{
  z-index: 3;
  border-color: #279C88;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(255,255,255,0);
}

.accordionTable
{
  height:200px;
  border: none;
}
.accordionTr
{
  border: none;
  color: black;
  padding: 5px 5px;
  top: 0;
  left: 0;
  background-color: white;
}
.accordionTd
{
  border: none;
  padding: 5px 5px;
  background-color: white;
}

/* アカウント編集 */
.no-edit{
  width: 300px;
}

.unable-edit-item{
  border-bottom:solid 1px black;
  color:lightslategray;
  width:180px;
}

.forEditTable
{
  width: 600px;
  text-align: center;
  border:none;
  /*border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #778ca3;*/
}
.forEditTh
{
  padding: 10px;
  border-bottom: solid 0.5px #778ca3;
  background-color: #d9e1f2;
}
.forEditTd
{
  padding: 10px;
  border-bottom: solid 0.5px #778ca3;
  background-color:white;
}
/*ログアウト用のリンク設定*/
#logoutLink a:link
{
  color: white;
  text-decoration: none;
}

#logoutLink:visited
{
  color: white;
  text-decoration: none;
}

#logoutLink:hover
{
  color: white;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

#logoutLink:active
{
  color: white;
  text-decoration: none;
}

.parent{
  display:flex;
}

.child{
  margin-left:3em;
}

/*
  検索モーダルのテーブル
*/
/* スクロール可能なテーブルのスタイル */
.modal-table-container
{
  max-height: 400px; /* テーブルの最大高さ */
  overflow-y: auto; /* 垂直方向のスクロールバーを表示する */
  border: 1px solid #ccc; /* テーブルの境界線 */
}

.modelTable
{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.modal-th, .modal-td
{
  vertical-align: middle;
  padding: 10px 5px;
  border: 1px solid #fff;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.modal-th
{
  background: #156082;
  color: #fff
}

.modal-td
{
  background: #CCD2D8;
}

/* 偶数行のセルの色 */
.modelTable tr:nth-child(even) td
{
  background: #E7EAED;
}

/* ヘッダ固定 */
._sticky-modal-header
{
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}

._sticky-modal-header:before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #156082;
  z-index: -1;
}

/* 各種リストの編集画面 */
.col-custom
{
  width: calc(33.333% - 100px);
}

.edit-table-container
{
  padding: 0px; /* 左側のパディングを15pxに変更 */
  max-height: 400px; /* テーブルの最大高さ */
  overflow-y: auto; /* 垂直方向のスクロールバーを表示する */
  border: 1px solid #ccc; /* テーブルの境界線 */
}

.editTable
{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.edit-th, .edit-td
{
  vertical-align: middle;
  padding: 10px 3px;
  border: 1px solid #fff;
  color: #000;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.edit-th
{
  background: #156082;
  color: #fff
}

.edit-td
{
  background: #CCD2D8;
}

/* 偶数行のセルの色 */
.editTable tr:nth-child(even) td
{
  background: #E7EAED;
}

._sticky-edit-header
{
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}

._sticky-edit-header:before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #156082;
  z-index: -1;
}

/* 検索店舗と端末の表示 */
.rounded-border
{
  border-radius: 5px;
  border: 1px solid #66ccff;
  padding: 2px;
  font-size: small;
  margin: 5px;
}