@import url('/m459hxkdpg/bootstrap/bootstrap-icons-0b67640388d0c3646efaa17183b50161.css');

/**************************
  base
**************************/

@font-face {
  font-family: 'Noto Sans JP';
  src: url(/m459hxkdpg/font/NotoSansJP-Regular-ecfed48e463db4e31d1691c8af367730.otf);
}

:root {
  /* 不備指摘背景色 */
  --mistake-indicate-bg-yellow: yellow;
}

/* htmlの表示範囲設定 */
html {
  height: 100%;
  width: 100%;
}

/* bodyタグ内に対するフォント設定 */
body {
  font-family: 'Noto Sans JP',
    'Helvetica Neue',
    'Helvetica',
    'Hiragino Sans',
    'Hiragino Kaku Gothic ProN',
    'Arial',
    'Yu Gothic',
    'Meiryo',
    sans-serif;
}

/* ヘッダー等用背景色：システム内のテーマカラー */
.bg-base {
  background-color: #0073EB;
}

/* ツールチップの表示幅指定 */
.tooltip-inner {
  max-width: 400px;
}

/**************************
  header
**************************/
@media (max-width: 1279px) {

  /* ヘッダーの高さ指定 */
  header {
    height: 3rem;
  }

  /* ヘッダーのロゴ位置調整(サイドバーボタンに位置が被らないように調整) */
  header #headerNavbar .navbar-brand-box {
    padding-left: 3.5rem;
  }

  /* ヘッダーのロゴ位置調整(上下の位置およびフォントサイズ) */
  header #headerNavbar .navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
  }

  /* 通知ボタンの通知バッチ位置調整 */
  header #headerNavbar .notify .badge {
    position: absolute;
    top: 2px;
  }

  /* ユーザー名の位置調整 */
  header #headerNavbar .user p {
    margin: 0;
    line-height: 1;
  }

  /* ユーザーアイコンの位置調整 */
  header #headerNavbar .user i {
    margin-left: 1rem;
  }

  /* 疑問符アイコンの位置調整 */
  .question {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* 小サイズに必要のない部分を非表示にする */
  .header-display-item {
    display: none !important;
  }
}

.before-login-heder-navbar {
  height: 3rem;
}

@media (min-width: 1280px) {

  /* ヘッダーの高さ指定 */
  header {
    height: 3rem;
  }

  #headerNavbar {
    height: 100%;
  }

  /* ヘッダーのロゴ位置調整(サイドバーボタンに位置が被らないように調整) */
  header #headerNavbar .navbar-brand-box {
    padding-left: 3.5rem;
  }

  /* ヘッダーのロゴ位置調整(上下の位置およびフォントサイズ) */
  header #headerNavbar .navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
  }

  /* 通知ボタンの通知バッチ位置調整 */
  header #headerNavbar .notify .badge {
    position: absolute;
    top: 2px;
  }

  /* ユーザー名の位置調整 */
  header #headerNavbar .user p {
    margin: 0;
    line-height: 1;
  }

  /* ユーザーアイコンの位置調整 */
  header #headerNavbar .user i {
    margin-left: 1rem;
  }

  /* 疑問符アイコンの位置調整 */
  .question {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ヘッダーのロゴ・ドロップダウンの色を白に統一する */
header #headerNavbar .navbar-brand,
header #headerNavbar .nav-link,
header #headerNavbar .nav-link:focus,
header #headerNavbar .nav-link:hover {
  color: #ffffff;
}

/* 通知ボタンの色指定 */
header #headerNavbar .notify {
  background-color: #ff8a80;
  color: #ffffff;
}

/* 通知ボタンフォーカス時の色指定 */
header #headerNavbar .notify:focus {
  box-shadow: 0 0 0 0.25rem rgba(253, 38, 56, 0.25);
}

/* 通知ボタンホバー時の色指定 */
header #headerNavbar .notify:hover {
  color: #eeeeee;
}

/* 通知ボタンバッチアニメーション */
.rotation {
  animation: 2s linear 1 rotation;
}

/* 通知ボタンバッチアニメーション(回転) */
@keyframes rotation {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(360deg);
  }
}

/* 通知ボタンバッチ色指定 */
.bg-danger {
  background-color: #D10000 !important;
}

/**************************
  breadcrumb
**************************/
/* パンくずリストの表示位置・幅・色設定 */
#breadcrumb {
  /* パンくずリスト自体の高さ */
  height: 2rem;
  background-color: #ffffff;
  transition: 0.3s all ease;
  position: sticky;
  /* ヘッダーの高さ設定によって変動する */
  top: 3rem;
  z-index: 10;
  display: flex;
}

/* パンくずリストの単語毎の間・アイコン・フォントサイズ設定 */
.breadcrumb {
  margin: 0 0 0 0.8rem;
  --bs-breadcrumb-divider: '>';
  font-size: large;
  align-items: center;
}

/* パンくずリストの文字の太さ設定 */
.breadcrumb-item,
.breadcrumb-item.active {
  font-weight: 500;
}

/**************************
  Screen Menu
**************************/
/* 画面メイン部分のヘッダー用css、内容物周囲の表示幅、色指定 */
#screenMenu {
  padding: 0.25rem 0.5rem;
  background-color: #bbdefb;
}

/* 画面メイン部分のヘッダー用css、表示位置固定 */
#screenMenu.sticky-top {
  top: 5rem;
  z-index: 1019;
}

/* 画面メイン部分のヘッダー内容物用css、内容物毎の左右の表示幅指定 */
#screenMenu .screen-menu-item {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* 画面メイン部分のヘッダー用css、内容物がない場合に使用 */
.screen-menu-height {
  height: 46px;
}

/* タブの下部の表示にゆとりを持たせるために使用 */
#myTabContent {
  padding-bottom: 3rem;
}

/* タブの位置を上部で固定するcssクラス */
#tab.sticky-top {
  top: 7.8rem;
  z-index: 1019;
  background-color: #fff;
}

/* タブの位置を上部で固定するcssクラス(参照画面用) */
#tab.sticky-reference-top {
  position: sticky;
  top: 4.8rem;
  z-index: 1019;
  background-color: #fff;
}

/**************************
  sidebar menu
**************************/
/* サイドバー用メインcss、上部の固定位置はヘッダーの高さによって変動する */
#sidebarMenu {
  margin-top: 3rem;
  min-width: 20rem;
  max-width: 20rem;
  padding: 0;
  z-index: 1022;
  position: fixed;
  transform: translateX(-15rem);
  transition: transform 250ms ease-in-out;
  background-color: #fff;
}

/* サイドバー用メインcss、サイドバー自体の表示位置・スクロールなどを制御する */
.sidebar {
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  height: calc(100% - 3rem);
  overflow-y: scroll;
  overflow-x: hidden;
  transition: all 100ms 0s ease;
}

/* サイドバーアコーディオン用css、内容物周囲の表示幅を指定 */
.sidebar .nav-link.accordion-button {
  padding: 1rem;
}

/* サイドバーアコーディオン用css、アコーディオン下部にのみ線を表示・丸みを削除 */
.sidebar .accordion-item {
  border: none;
  border-bottom: 1px solid #dfdfdf;
  border-radius: unset;
}

/* サイドバー内アイコン用css、アイコンのサイズ・表示位置制御 */
.sidebar .navbar-nav .sidebar-menu-icon {
  width: 1.5rem;
  margin-right: 0.5rem;
  text-align: center !important;
}

/* サイドバーアコーディオン内メニュー用css、アコーディオンの内部にあるメニューテキストの幅を制御 */
.sidebar button.nav-link .navbar-nav .sidebar-menu-text {
  width: 12.5rem;
}

/* サイドバー内メニュー用css、文字の表示位置・太さ・色を制御 */
.sidebar a.nav-link {
  padding-left: 1.5rem;
  font-weight: 500;
  color: #333333;
}

/* サイドバー内メニュー用css、アコーディオン不使用の場合の文字表示位置を制御 */
#waterworksBureauDashboard,.construction {
  padding-left: 16px;
}


.sidebar a.nav-link .navbar-nav .sidebar-menu-text {
  width: 13rem;
}

/**************************
  サイドバーダッシュボードメニュー
**************************/

/* サイドバー内メニュー用css、アコーディオン不使用の場合の文字表示幅を制御 */
.sidebar a.nav-link .navbar-nav .dashboard-menu-text {
  width: 13.5rem;
}

/* 通常文字サイズ時の縦幅指定 */
.dashboard-nav-link {
  height: 56px;
}

/* 小文字サイズ時の縦幅・表示位置指定 */
.dashboard-nav-link-small {
  padding-top: 1rem;
  height: 42px;
}

/* 大文字サイズ時の縦幅・表示位置指定 */
.dashboard-nav-link-large {
  padding-top: 1rem;
  height: 70px;
}

/* テキストの表示高さ指定 */
.dashboard-nav-link .sidebar-menu-text {
  line-height: 2.5em;
}

/**************************
  サイドバーの出し入れのボタン関連
**************************/
/* サイドバー表示時用css、サイドバーが画面上に表示されている状態にする */
.show-sidebar {
  transform: translateX(0) !important;
}

/* サイドバー表示状態切替チェックボックス用css、チェックボックス自体を非表示にする */
#openSidebarMenu {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

/* サイドバーハンバーガーメニュー用css、表示位置・サイズ制御 */
.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 17px;
  left: 20px;
  height: 22px;
  width: 22px;
}

/* ハンバーガーメニューの線用css */
.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

/* ハンバーガーメニューアイコン時用css */
.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

/* ハンバーガーメニューアイコンの1本目用css */
.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

/* ハンバーガーメニューアイコンの3本目用css */
.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

/* ハンバーガーメニューアイコンの2本目用css、サイドバーを開いている際、非表示にする */
#openSidebarMenu:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

/* ハンバーガーメニューアイコンの1本目用css、サイドバーを開いている際、線の角度を変更する */
#openSidebarMenu:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

/* ハンバーガーメニューアイコンの3本目用css、サイドバーを開いている際、線の角度を変更する */
#openSidebarMenu:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

/* ハンバーガーメニューアイコン用css、サイドバーを開いている際、アイコンの表示位置を調節 */
.hamburger-closelabel {
  position: fixed;
  width: 100%;
  height: calc(100% - 3rem);
  top: 3rem;
  left: 0;
}

/* サイドバーが開いている際にサイドバー以外の部分の色を変更する */
.hamburger-cover {
  position: fixed;
  width: 100%;
  height: calc(100% - 3rem);
  top: 3rem;
  left: 0;
  z-index: 1019;
  background: rgba(3, 3, 3, .5);
  display: block;
}

/**************************
  checklist
**************************/

#handler {
  cursor: ew-resize;
}

#handler::after {
  content: '';
  display: block;
  width: 8px;
  height: 100%;
  margin: 0 auto;
  background-color: #c5c9cd;
}

#handler:hover::after {
  background-color: #5c636a;
}

#handler:active::after {
  background-color: #5c636a;
}

#checklist {
  overflow-y: scroll;
}

/**************************
  dashboard
**************************/

.dashboard-animation-duration {
  --fa-animation-duration: 1s;
}

/**************************
  main
**************************/
/* 画面表示エリアの制御 */
main {
  transition: 0.3s all ease;
  position: relative;
  padding-left: 5rem;
}

/* チェックリストエリアの制御 */
.main-checklist {
  width: 100%;
  position: fixed;
}

/* 参照モード表示時の画面表示エリアの制御 */
.reference-main {
  padding-left: 0rem;
}

/* Todo:takiyta 履歴のレイアウトが効いていなかっためlayout2に移植したけど、いいの？ */
.difference {
  color: #D10000;
}

.difference-target {
  color: #D10000 !important;
  background-color: #FAEBD6 !important;
  border-color: #D10000 !important;
}

.difference-target-check-on {
  color: #fff !important;
  background-color: #D10000 !important;
  border-color: #D10000 !important;
}

.difference-target-check-off {
  color: #fff !important;
  background-color: #fff !important;
  border-color: #D10000 !important;
}


/* 小サイズ文字のフォントサイズ指定 */
.fs-sm {
  font-size: .875em;
}

/* マウスポインターの表示変更 */
.pointer {
  cursor: pointer;
}

/* タブの文字の太さ変更 */
.nav-tabs .nav-link {
  font-weight: bold;
}

/* タブの文字の太さ変更(disabled表示時) */
.nav-tabs .nav-link.disabled {
  font-weight: normal;
}

/* ページ上部に移動するボタン用クラス */
.page-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 500;
}

/**************************
  ChatBot
**************************/

/* チャットボットボタン用クラス */
.chat-bot-area {
  position: fixed;
  bottom: 55px;
  right: 10px;
  z-index: 500;
}

.chat-bot-out {
  width: 400px;
  height: 400px;
  max-width: 1000px;
  min-width: 350px;
  max-height: 700px;
  min-height: 350px;
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 10px;
  right: 10px;
  z-index: 2000;
}

.chat-bot-header {
  border: solid 1px;
  display: flex;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  cursor: move;
}

.chat-bot-out-header-container {
  border-radius: 10px 10px 0px 0px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  z-index: 500;
  cursor: move;
}

.chat-container {
  border: solid 1px;
  flex-grow: 1;
  background-color: #c2c2c2;
  overflow-y: scroll;
  padding: 10px;
}

.chat-bot-footer {
  border-radius: 0px 0px 10px 10px;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  background-color: #000;
  z-index: 10;
}







/* チャットボットウィンドウを閉じるボタン */
.chat-bot-clear-button {
  margin: 5px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  float: right;
}

/* チャットボットUI関連 */
.chat-container {
  width: 100%;
  margin: 0 auto;
}

.chat-history {
  list-style: none;
  padding: 0;
}

.chat-message {
  display: flex;
  margin-bottom: 10px;
}

.chat-message.user {
  justify-content: flex-end;
  margin-top: 30px;
}

.chat-message.bot {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 60%;
  min-width: 10%;
  min-height: 25px;
  padding: 10px;
  border-radius: 15px;
  margin: 5px;
  overflow-wrap: break-word
}

.message-bubble.user {
  background-color: #cff4fc;
  color: #000;
  align-self: flex-end;
  float: left;
  margin: 0;
}

.message-bubble.bot {
  background-color: #fff;
  align-self: flex-start;
  margin: 0;
  position: relative;
  top: 8px;
}

.chat-form {
  display: flex;
  margin: 20px;
  background-color: #212529;
}

.chat-form input {
  flex: 1;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: .25rem;
  margin-right: 10px;
}

.chat-form button {
  padding: 10px;
  border: none;
  background-color: #0dcaf0;
  color: #000000;
  border-radius: .25rem;
}

.triangle-R {
  height: 0;
  border-style: solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #cff4fc;
  border-right: 0;
  margin-left: 0px;
  position: relative;
  top: 12px;
}

.triangle-L {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #fff;
  border-left: 0;
  margin-top: 20px;
  float: left;
}

.choiceBtn {
  width: 100%;
  border-radius: .25rem;
  border: none;
  margin-bottom: 10px;
}

.chat-label {
  margin: 10px;
}

/* チャットボット　ドラッグ・リサイズ関連 */
.resizer {
  width: 10px;
  height: 10px;
  /* background: darkblue; */
  position: absolute;

}

.resizer.top-left {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

.resizer.top-right {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.resizer.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}

.resizer.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.resizer.top {
  top: -5px;
  left: 5px;
  width: calc(100% - 10px);
  cursor: n-resize;
}

.resizer.left {
  top: 5px;
  left: -5px;
  height: calc(100% - 10px);
  cursor: w-resize;
}

.resizer.right {
  top: 5px;
  right: -5px;
  height: calc(100% - 10px);
  cursor: e-resize;
}

.resizer.bottom {
  bottom: -5px;
  left: 5px;
  width: calc(100% - 10px);
  cursor: s-resize;
}


/**************************
  main
**************************/

/* 画面系共通の表示エリア */
.display-area {
  padding-top: 1rem;
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
  margin-right: auto;
  margin-left: auto;
}

/* 標準のラベル配置かつ申請者ボタン有の配置指定用CSS */
.sub-title-label {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #CFF4FC;
}

/* 見出しタイトル配置用CSS、給水申請の給水装置計画タブ内の給水装置情報用 */
.sub-title-label-left {
  flex: 8;
}

/* 見出しタイトル配置用CSS、給水申請の給水計画タブ内の既設栓用 */
.sub-title-label-right {
  flex: 4;
}

/* マスタ画面の項目の配置・並びの指定用CSS、レスポンシブデザイン */
.master-item-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* マスタ画面の項目に付けるCSS、文字サイズの調整など */
.master-item-area>.master-item {
  padding: 1rem;
  width: 25%;
  min-width: 350px;
  font-size: 1.25em;
  vertical-align: -.075em;
}

/**************************
  button 色変更
**************************/
/* 白枠ボタンのホバー時・チェック時文字色変更 */
.btn-outline-light:hover,
.btn-check:checked+.btn-outline-light {
  color: #0069D6;
}

/* 白枠ボタンの色変更 */
.btn-outline-light {
  color: #ffffff;
  border-color: #ffffff;
}

/**************************
  ダッシュボード画面
**************************/
/* 一覧表示時の受付番号の幅を固定 */
.accept-no-title {
  width: 12rem;
}

/* 一覧表示時の申請区分の幅を固定 */
.apply-type-title {
  width: 11rem;
}

/* 一覧表示時の申請状況の幅を固定 */
.apply-Status-title {
  width: 9rem;
}

/* 一覧表示時の申請日の幅を固定 */
.applied-at-title {
  width: 9rem;
}

/**************************
  申請系画面
**************************/

/* 横並び用CSS、行ごとのラベルを横並びにする */
.application-screen-line {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
}

.application-screen-line-without-flex {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 幅指定と横並び用CSS、行ごとに中央揃えでラベルと要素を横並びにする（画面の横幅の半分） */
.application-screen-item {
  align-items: center;
  display: flex;
  width: 50%;
}

/* 幅指定用CSS、ラベルの横幅と左右の余白を指定する（application-screen-itemで指定した幅の1/3の幅） */
.application-screen-label-area {
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  width: calc(100% / 3);
  height: 100%;
}

.height-unset {
  height: unset;
  width: 100%;
}

/* ラベルが存在せず100%で使える申請内の領域 */
.application-screen-max-width-area {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: 100%;
}

/* 幅指定用CSS、要素の横幅と左右の余白を指定する（application-screen-itemで指定した幅の2/3の幅） */
.application-screen-item>.application-screen-field-area {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: calc(100% - (100% / 3));
}

/* 幅指定と横並び用CSS、行ごとに中央揃えでラベルと要素を指定の幅で横並びにする（画面の横幅全て） */
.application-screen-item-full {
  align-items: center;
  display: flex;
  width: 100%;
}

/* 幅指定用CSS、ラベルの横幅と左右の余白を指定する、（application-screen-item-fullで指定した幅の1/6の幅） */
.application-screen-item-full>.application-screen-label-area {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: calc(100% / 6);
}

/* .application-screen-label {

} */

/* 幅指定用CSS、要素の横幅と左右の余白を指定する、（application-screen-item-fullで指定した幅の5/6の幅） */
.application-screen-item-full>.application-screen-field-area {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: calc(100% - (100% / 6));
}

/* 幅指定用CSS、要素の横幅を指定する、（application-screen-item-fullで指定した幅の5/6の幅） */
.application-screen-item-full>.application-screen-field-split-area {
  width: calc(100% - (100% / 6));

}

/* 横並び用のCSS、子要素を横並びにする */
.item-horizontal {
  display: flex;
  /* flex-wrap: wrap; */
}

/* 幅指定用CSS、要素の横幅と上下左右の余白を指定する、（application-screen-item-fullで指定した幅の4/4の幅） */
.application-screen-item-full>.application-screen-field-split-area .application-screen-field-area-all {
  width: 100%;
  padding: 0.25rem 0.5rem;
}

/* 幅指定用CSS、要素の横幅と上下左右の余白を指定する、（application-screen-item-fullで指定した幅の3/4の幅） */
.application-screen-item-full>.application-screen-field-split-area .application-screen-field-area-three-quarters {
  width: 75%;
  padding: 0.25rem 0.5rem;
}

/* 幅指定用CSS、要素の横幅と上下左右の余白を指定する、（application-screen-item-fullで指定した幅の半分の幅） */
.application-screen-item-full>.application-screen-field-split-area .application-screen-field-area-half {
  width: 50%;
  padding: 0.25rem 0.5rem;
}

/* 幅指定用CSS、要素の横幅と上下左右の余白を指定する、（application-screen-item-fullで指定した幅の1/4の幅） */
.application-screen-item-full>.application-screen-field-split-area .application-screen-field-area-quarter {
  width: 25%;
  padding: 0.25rem 0.5rem;
}

/* 幅と配置指定用CSS、要素の横幅と中央揃えで配置の指定をする */
.application-screen-item-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* 横並び用CSS、要素と要素の単位を横並びにする */
.application-screen-field-area-unit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 単位の配列指定用CSS、平仮名や英文字、記号等の文字列の改行規則をなくす */
.no-break-span {
  white-space: nowrap;
}

/* 右寄せ用のcss */
.right-side {
  width: 100%;
  padding: 0.5rem;
  display: flex;
  justify-content: end;
}

/* 上下中央寄せ用のcss */
.vertical-center {
  display: flex;
  align-items: center;
}

/* 小さいinput用のエリア */
.little-input-area {
  width: 10rem;
}

/* 申請テーブルの幅・追加ボタンの表示位置を内容物に合わせた幅にする */
.application-div,
.application-table {
  width: fit-content;
}

/* 申請テーブル内のselectの幅をautoにする */
.application-table .form-select {
  width: auto;
}

/* 申請テーブル内のselectとinputの横並び表示時の間の幅を指定する */
.application-table-horizonal-item {
  padding: 0rem 0.1rem;
}

/* 横並び配置用CSS */
.application-screen-field-area>.application-screen-field-area-group {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}

/* プルダウンメニューと自由入力の共通サイズ用CSS */
.application-screen-field-area-group>.application-screen-field-area-group-size {
  width: 50%;
}

.table-area {
  padding: 0.5rem;
}

.table-area-not-padding {
  padding-left: 0px;
  padding-right: 0px;
}

/* テーブル用CSS、加入金のようなラベル対フィールドが2個横並びになっているテーブルのラベル用 */
.table-label-area {
  width: calc(100% / 6);
}

/* テーブル用CSS、加入金のようなラベル対フィールドが2個横並びになっているテーブルのフィールド用 */
.table-field-area {
  width: calc(100% / 3);
}

.large-width-button {
  min-width: 8rem;
}

/* ボタンの幅を固定化するためのCSS 中サイス */
.normal-width-button {
  min-width: 6rem;
}

.small-width-button {
  min-width: 4rem;
}

/* ボタン内の文字サイズ調整CSS、標準 */
.normal-font-weight-button {
  font-weight: normal;
}

.horizontal-all-width {
  width: 100%;
}

.horizontal-half-width {
  width: 50%;
}

.horizontal-left-width {
  width: 65%;
}

.horizontal-right-width {
  width: 35%;
}

canvas {
  border: 3px solid #000;
}

.custom-width {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画面幅が768px以下のとき（一般的なタブレットサイズ） */
@media (max-width: 1000px) {
  .custom-width {
    width: 470px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* チェックボックスの配置してい用CSS */
.horizontal-checkbox {
  display: flex;
  /* 横並びにする */
  flex-wrap: wrap;
  /* 要素が多い場合に折り返す（オプション） */
  gap: 10px;
  /* 要素間の間隔を調整 */
  align-items: center;
  /* 縦方向の位置を中央に揃える */
}

/* 除却管空欄用css */
.air-width {
  width: 5rem;
}

/**************************
  行追加テーブル用CSS
**************************/

/* 番号列のセル幅用css 3桁までを想定 */
.table-number {
  width: 5rem;
  min-width: 2rem;
}

/* 削除ボタン列のセル幅用css ラベル「削除」を想定 */
.table-minus-btn {
  width: 4rem;
  min-width: 4rem;
}

/**************************
  複数ファイル
**************************/
/* 複数ファイル機能の追加ボタンなどのボタンサイズ調整用 */
.btn-for-files {
  width: 131px;
}

/**************************
  朱書き
**************************/
/* TODO:一旦そのまま置いているが調整必須 */
.popup {
  line-height: 3rem;
  box-sizing: border-box;
  position: sticky;
  display: none;
  margin-left: 0%;
  -webkit-transform: translate(0%, 0%);
  transform: translate(30%, 0%);
  text-align: right;
}

.popup-element>.popup {
  line-height: 3rem;
  box-sizing: border-box;
  position: sticky;
  display: block;
  width: 100%;
  margin-left: -30%;
  -webkit-transform: translate(0%, 0%);
  transform: translate(30%, 0%);
  text-align: right;
}

.popup-element-icon {
  cursor: pointer;
}

.popup-right:before {
  content: '';
  position: absolute;
  bottom: 45%;
  left: 100%;
  border: 7px solid transparent;
  border-left: 7px solid #333;
}

.popup-bottom:before {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 80%;
  border: 7px solid transparent;
  border-top: 7px solid #333;
}

.popupBtn {
  margin-bottom: 1.0rem;
  padding: 2px;
}

.popupText {
  resize: none;
  overflow-y: scroll;
  width: 100%;
  line-height: 1.3;
  border-radius: 10px;
  margin-top: -10%;
  outline: none;
}

.popupText::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 5px;
}

.popupText::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  padding: 10px;
}

.popupText::-webkit-scrollbar:hover {
  color: black;
}

.popupFile {
  border: 0.2px solid #8d8d8d;
  height: 3rem;
  line-height: 1.3;
  overflow: auto;
  border-radius: 10px;
  padding: 5px;
  text-align: start;
}

.mistakeIndicateChecked {
  background-color: var(--mistake-indicate-bg-yellow);
}

.popup-element {
  width: 100%;
  display: none;
}

.redEdit {
  color: darkred;
}

.scrollArea {
  overflow-y: scroll;
  height: 165px;
}

/**************************
  一覧表示の詳細?検索
**************************/
/* 条件検索用エリアのタイトルエリア */
.list-search-condition-title-area {
  width: 100%;
  background-color: #cff4fc;
  padding: 0.25rem;
  border-top: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

/* 条件検索用エリアのタイトル */
.list-search-condition-title {
  display: flex;
  justify-content: center;
}

/* 条件検索エリア */
.list-search-condition-area {
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6;
}

/* 条件検索エリアの行 */
.list-search-condition-line {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

/* 検索条件 */
.list-search-condition-item {
  align-items: center;
  display: flex;
  width: 50%;
}

/* 検索条件の１つめ */
.list-search-condition-item:first-child {
  border-right: 1px solid #dee2e6;
}

/* 検索条件のラベル */
.list-search-condition-label {
  width: calc(100% / 3);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #dee2e6;
}

/* 検索条件の値入力 */
.list-search-condition-field {
  width: calc(100% - (100% / 3));
  padding: 0.25rem;
}

/* 検索条件が期間の様に複数の要素が並ぶ場所で利用 */
.period-setting {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画面サイズ1300以下辺りで検索条件表示が崩れるため1300以下で調整を入れる */
@media screen and (max-width: 1300px) {
  .list-search-condition-line {
    display: flex;
  }

  .list-search-condition-item {
    width: 100%;
  }

  .list-search-condition-item:first-child {
    border-right: unset;
    border-bottom: 1px solid #dee2e6;
  }
}

/* 画面サイズ740px以下辺りで複数の要素が並ぶ場所の表示が崩れるためそれ用の対策css */
@media screen and (max-width: 740px) {
  .period-setting {
    flex-wrap: wrap;
  }
}

/* ページネーションのボタン幅を制御 */
.btn-page-link {
  width: 2rem;
}

/**************************
  ファイル一括アップロードのモーダル画面にて使用するCSS
**************************/
.drop-zone {
  border: 2px dashed #cccccc;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}

.drop-zone.dragover {
  background-color: #e9ecef;
}

/**************************
  申請画面遷移時のチェックリスト
**************************/
/* チェックリストエリア */
.checklist-container {
  position: relative;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  padding-top: 2rem;
  background: #ffffff;
  z-index: 999;
}

.checklist-contents {
  max-width: 90%;
  margin: 0 auto;
}

.checklist-btn {
  text-align: right;
  padding-top: 20px;
}

/**************************
  工事検査画面
**************************/
/* ボタン無効化 */
.custom-disabled {
  pointer-events: none;
  opacity: 0.6; /* 視覚的に無効化 */
  text-decoration: none;
}

.executionMain {
  padding: 0 0.75rem;
}

/* 検査内容タブの横スクロール専用 */
.meter-table-width {
  min-width: 1800px
}

/**************************
  指定事業者画面
**************************/
/* 技術者選任・解任届出モーダルの幅を調節 */
#leadEngineerModal.modal-dialog {
  max-width: 100% !important;
  width: 100% !important;
}

/**************************
  表形式テーブル関連（集計、ワークフロー全体図）
**************************/

.outer-large-table {
  max-width: calc(100vw - 50px);
}

.large-table-list {
  overflow: auto;
  max-height: calc(100vh - 300px);
}

.large-table-list .header {
  position: sticky;
  top: -1px;
}

.inspection-list td {
      vertical-align:middle;
}

.toggle-switch { 
  position:relative;
  display:inline-block;
  width:42px;
  height:22px;
}

.toggle-switch input {
  opacity:0;
  width:0;
  height:0;
}

.toggle-slider {
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#c9c9c9;
  border-radius:22px;
  transition:.2s;
}

.toggle-slider:before {
  position:absolute;
  content:"";
  height:16px;
  width:16px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background:#2f6fb0;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform:translateX(20px);
}