/*
 *  ###########################################################################
 *    アプリケーション共通 CSS
 *  ###########################################################################
 */
/*
 *  #######################################
 *    レイアウト調整
 *  #######################################
 */
html,
body,
div.body-content
{
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* スマホ対応 */
  overflow-x: hidden;
  overflow-y: auto;
  --lte-header-height: 40px;
}

.app-main
{
  padding-bottom: inherit;
  height: calc(100vh - var(--lte-header-height));
  height: calc(100dvh - var(--lte-header-height)); /* スマホ対応 */
}

/* ----------------------------------------
 *   空行
 * ----------------------------------------
 */
.br
{
  width: 0px;
  height: 0px;
  border-style: none;
  overflow: hidden;
}

.br2
{
  height: 2px;
}

.br5
{
  height: 5px;
}

.br10
{
  height: 10px;
}

.br20
{
  height: 20px;
}

.br30
{
  height: 30px;
}

.br50
{
  height: 50px;
}

.br80
{
  height: 80px;
}

.br90
{
  height: 90px;
}

.br110
{
  height: 110px;
}
/* ----------------------------------------
 *   ボタンスタイル
 * ----------------------------------------
 */

.btnBase
{
  min-height: 1.8em;
  vertical-align: middle;
  padding: 0 10px 0 10px;
}

.btnBaseS,
.btnBaseM
{
  min-height: 1.8em;
  vertical-align: middle;
  padding: 0;
}

.btnBaseS
{
  min-width: 60px;
}

.btnBaseM
{
  min-width: 80px;
}

/* ----------------------------------------
 *   表示制御
 * ----------------------------------------
 */

/* 非表示 */
.none
{
  display: none;
}

/* クリア */
.clear
{
  clear: both;
}

/* ----------------------------------------
 *   入力制御
 * ----------------------------------------
 */

/* 大文字 */
input.upperCase,
textarea.upperCase
{
  text-transform: uppercase;
}

/* INPUT無効 */
input.disableInput,
textarea.disableInput
{
  background: gainsboro;
}

/*
 *  #######################################
 *    全体表示設定
 *  #######################################
 */
body,
pre,
input,
select,
textarea,
button,
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button
{
  font-size: 9pt;
  /*  font-family: "Segoe UI","Meiryo UI",sans-serif;*/
  /* Helvetica Neueを入れると、iPhoneのSafariで「※」が半角表示になってしまう */
  /*font-family: "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo UI", sans-serif;*/
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo UI", sans-serif;
  /*font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;*/
  -webkit-text-size-adjust: 100%;
}

/* 画面背景 */
body
{
  margin: 0px;
  padding: 0px;
  -webkit-touch-callout: none; /* ロングタップでの画像保存メニュー無効化 */
}

.body-content
{
  padding-left: 0px;
  padding-right: 0px;
}

body,
.bgColor,
.ui-widget-content.bgColor
{
  background: #e9e9e9;
}

.bodyWidth
{
  min-width: 920px;
}

/*
 *  #######################################
 *    項目
 *  #######################################
 */

input[type="text"],
input[type="date"],
textarea
{
  margin: 0;
  border: solid 1px lightgray;
  border-radius: 1px;
  padding: 2px 2px;
  outline: none;
}

  input[type="text"][disabled],
  textarea[disabled]
  {
    border: solid 1px #cbcbcb;
  }

  /* 読み取り専用 下線ラベルスタイル */
  input[type="text"][readonly].underline
  {
    margin: 0 1px 0 5px;
    background-color: #f3f3f3;
    border: solid 1px transparent;
    border-bottom: solid 1px black;
    border-radius: 0;
    vertical-align: bottom;
    border-left: none; /* エラーアイコンありの場合、左上に罫線が表示されるバグ対策 */
  }

    input[type="text"][readonly].underline:focus
    {
      outline: none;
    }

    /* 必須 */
    .required,
    input[type="text"][readonly].underline.required
    {
/*      background-color: #ffc;*/
    }

/* 変更あり */
.error
{
  color: red;
}

/* 入力エラー */
input.error,
select.error,
select.error + button.ui-multiselect.ui-widget
{
  background-image: linear-gradient(-135deg,red 5px,transparent 0);
}

textarea.error
{
  background-image: linear-gradient(-135deg,red 17px,transparent 0);
}

.bold
{
  font-weight: bold;
}

.underline
{
  text-decoration: underline;
}

.wrap
{
  white-space: pre-wrap;
}

/*
 *  #######################################
 *    jquery-ui
 *  #######################################
 */
.ui-widget-content
{
  /*background: #f5f3e5;*/
}

.ui-dialog
{
  padding: inherit!important;
}

/* jQueryUIダイアログのタイトルバー*/
.ui-dialog .ui-dialog-titlebar
{
  padding: .2em .2em .1em .4em;
}

.ui-dialog-title
{
  color: white;
}

/* jQueryUIダイアログのダイアログ境界線*/
.ui-dialog.bgColor
{
  border: 1px solid gray;
}

.ui-widget-header
{
  background: #343a40;
}

/* ハイライト */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight
{
  background: lemonchiffon;
}

/* ボタン */
button.ui-widget.ui-button
{
  height: 1.8em;
  padding: 0 10px 0 10px;
  background: rgb(239, 239, 239);
  border: solid 1px gray;
  cursor: default;
}

  /* 押下中 */
  button.ui-widget.ui-button:active
  {
    color: black;
    background: whitesmoke;
  }

  /* 無効 */
  button.ui-widget.ui-button[disabled]
  {
    background: #e3e3e3;
    color: darkgray;
    border: solid 1px gainsboro;
  }

    button.ui-widget.ui-button[disabled]:hover
    {
      background: #e3e3e3;
      border-color: #cbcbcb;
    }

/*
 *  #######################################
 *   bootstrap override
 *  #######################################
 */
 .btn
 {
  line-height: 10px;
 }

/*
 *  #######################################
 *   peek-a-bar (メッセージ領域)
 *  #######################################
 */
/* メッセージ領域 */
.peek-a-bar
{
  display: flex;
  align-items: center;
  text-align: left;
  height: auto;
  max-height: 300px;
  min-height: 30px;
  width: calc(100% - 30px);
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 2px;
  border: solid 2px;
  border-color: darkgray;
  border-radius: 3px;
  overflow-y: auto;
  color: blue;
  opacity: 1;
  background: #f5f3e5;
  z-index: 200;
}

  /* マウスオーバー時 */
  .peek-a-bar:hover
  {
    cursor: pointer;
  }

  /* エラーメッセージ */
  .peek-a-bar.errorMsg
  {
    color: red;
    background: #ffeeff;
  }

  /* スクロール表示時 */
  .peek-a-bar.scrollShow
  {
    align-items: unset;
  }

  .peek-a-bar pre
  {
    margin: 0;
  }
/*
 *  #######################################
 *   ダイアログメッセージ (MsgDlg.confirm)
 *  #######################################
 */
.ui-dialog[aria-describedby="MessageDialog"]
{
  padding: 0;
}

  .ui-dialog[aria-describedby="MessageDialog"] .ui-widget-content
  {
    background: white;
  }

  .ui-dialog[aria-describedby="MessageDialog"] .ui-dialog-buttonpane
  {
    margin: 0;
    padding: 0;
  }

#MessageDialog
{
  min-width: 300px;
  max-width: 1000px;
}

.ui-widget-overlay.messageDialogOverlay
{
  opacity: 0;
}

/*
 *  #######################################
 *   datepicker
 *  #######################################
 */
/* 「今日」ボタン */
button.ui-state-default.ui-datepicker-current
{
  font-weight: bold;
  opacity: 1;
}

/* ボタン */
.ui-datepicker-buttonpane button.ui-state-default
{
  height: 2.2em;
}

/**
 *  年月選択のみ カレンダーと「今日」ボタン
 */
.datepicker-ym-only .ui-datepicker-calendar,
.datepicker-ym-only .ui-datepicker-current
{
  display: none;
}

/*
 *  #######################################
 *   multiselect
 *  #######################################
 */
button.ui-multiselect
{
  height: 30px;
}

  /* イメージ */
  button.ui-multiselect .ui-multiselect-checkboxes img
  {
    height: auto;
    vertical-align: text-bottom;
    margin: 0 3px 0 2px;
  }

  button.ui-multiselect.ui-state-default:not(.ui-state-active)
  {
    background-color: white;
  }

  button.ui-multiselect:disabled
  {
    opacity: 1;
    background-color: #f3f3f3!important;
  }

.ui-corner-all
{
  padding: 3px 5px;
}

.ui-corner-all > span
{
  font-size: 14px;
}

/* メニューヘッダー非表示 */
.ui-multiselect-header.ui-widget-header.ui-corner-all.ui-helper-clearfix
{
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.ui-multiselect-header.ui-widget-header > *
{
  display: none;
}

/*
 *  #######################################
 *    month-picker
 *  #######################################
 */
/* ボタン */
.month-picker-month-table .ui-button
{
  width: 2.5em;
}

/* セル */
.month-picker-month-table td
{
  height: 5px;
}

/*
 *  #######################################
 *    pqGrid
 *  #######################################
 */
.pq-grid
{
}

  /* テーマ */
  .pq-grid div.pq-theme,
  .pq-grid .pq-grid-row
  {
    background: #f5f3e5;
  }

  .pq-grid .pq-theme *:focus
  {
    outline: none;
  }

  /* Tooltip設定セルのデフォルトアイコン */
  .pq-grid .pq-grid-cell[title]
  {
    background-image: none;
  }

  /* エラーセルのアイコン */
  .pq-grid .pq-cell-red-tr.pq-grid-cell[title]
  {
    background-image: linear-gradient(-135deg,red 5px,transparent 0);
  }

  /* 行色 */
  .pq-grid .pq-body-outer .pq-cont-left
  {
    border-right: none;
  }

  /* フォーカス */
  .pq-grid .pq-grid-cell:focus
  {
    border: solid 1px gray;
  }

  .pq-grid .pq-table > .pq-grid-row > .pq-grid-cell.pq-focus
  {
    border: none;
    border-right: solid 1px #cbcbcb;
    border-bottom: solid 1px #cbcbcb;
  }

  /* ヘッダoverlay */
  .pq-grid .pq-head-overlay
  {
    background: none;
  }

  /* ソート時のヘッダ背景色 */
  .pq-grid .pq-col-sort-asc,
  .pq-grid .pq-col-sort-desc
  {
    background: none;
  }

  /* 罫線 */
  .pq-grid .pq-grid-cell,
  .pq-grid .pq-grid-number-cell,
  .pq-grid .pq-grid-col,
  .pq-grid .pq-grid-number-col
  {
    border-color: gainsboro;
    border-width: 0 1px 1px 0;
    border-style: solid;
  }

  /* ヘッダの罫線上部 */
  .pq-grid .pq-grid-row:first-child > .pq-grid-col
  {
    border-top-color: gainsboro;
  }

  /* ヘッダの罫線下部 */
  .pq-grid .pq-grid-row:not(:last-child) > .pq-grid-col
  {
    border-bottom-color: gainsboro;
  }

  /* 編集済 */
  .pq-grid .pq-grid-cell.dirtyCell
  {
    color: red;
  }

  /* 行番号背景色 */
  .pq-grid .pq-grid-number-col,
  .pq-grid .pq-grid-number-cell
  {
    background-color: #ece8da;
  }

  .pq-grid .pq-state-select.ui-state-highlight .pq-grid-number-cell
  {
    background-color: gainsboro;
  }

  /* 行番号列 */
  .pq-grid .pq-grid-number-col
  {
    text-align: center;
  }

    .pq-grid .pq-grid-number-col div:hover
    {
      text-decoration: none;
      cursor: default;
    }

  /* ツールバー */
  .pq-grid .pq-toolbar
  {
    padding: 1px;
    background-color: #eaeaea
  }

  /* ヘッダー ソート無効 */
  .pq-grid div.noSort span:hover
  {
    text-decoration: none;
    cursor: default;
  }

  .pq-grid div.noSort.pq-grid-col
  {
    cursor: default;
  }

    .pq-grid div.noSort.pq-grid-col:hover
    {
      background: inherit;
    }

  /* チェックボックス */
  .pq-grid input[type='checkbox']
  {
    vertical-align: top;
  }

  /* 選択セル */
  .pq-grid .pq-grid-cell:focus
  {
    outline: 0px;
  }

  /* 固定列の区切り */
  .pq-grid .pqg-vert-frozen-line
  {
    display: none;
  }

  /* 選択 */
  .pq-grid .ui-state-highlight
  {
    background-color: paleturquoise;
    color: black;
  }

  /* 編集可 未選択 */
  .pq-grid .editRow
  {
    background-color: #FFE5FF;
  }

  /* 編集可 選択 */
  .pq-grid .pq-state-select.ui-state-highlight.editRow,
  .pq-grid .pq-state-select.ui-state-highlight .editRow
  {
    background-color: #FFBCFF;
  }

/* マルチセレクトフィルターのポップアップグリッド */
.pq-popup
{
  width: auto !important;
}

  .pq-popup .pq-grid .pq-grid-cell:focus
  {
    border: none;
  }

/* 明細セル - ボタン */
.pq-grid-cell button
{
  margin: 0px 1px;
}

/* 明細セル - チェックボックス中央 */
.pq-grid-cell input[type="checkbox"],
.pq-td-div .pq-title-span input[type="checkbox"] {
  top: 1px;
}

/*
 *  ###########################################################################
 *    Loading画面
 *  ###########################################################################
 */
#LoadingArea
{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  z-index: 9999;
}

  #LoadingArea .loading
  {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    border: 0.4em solid #ccc;
    border-top-color: #333;
    animation: spinner 2s linear infinite;
    z-index: 9999;
  }

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

/*
 *  ###########################################################################
 *    ヒントアイコン
 *  ###########################################################################
 */
.hintIcon
{
  margin-left: 5px;
  background: #4D4D4F;
  color: #F6F5EA;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  font-weight: bold;
  cursor: default;
  transition: background-color 0.2s, color 0.2s;
}

  .hintIcon:hover
  {
    background-color: #BFC5CA;
    color: #333333;
  }

  .hintIcon.inline
  {
    display: inline-block;
  }

  .hintIcon.gridCol
  {
    display: inline-block;
    margin: auto;
  }

/*
 *  ###########################################################################
 *    tooltip
 *  ###########################################################################
 */
.ui-tooltip
{
  max-width: none;
}

  /* ヒントアイコン用 */
  .ui-tooltip.hintTooltip
  {
    background-color: white;
  }

    .ui-tooltip.hintTooltip .ui-tooltip-content
    {
      font-size: 14px;
    }

  /* HACK: pqgridのtooltipがui-state-errorを安定して付与できない対策 */
  .ui-tooltip.ui-state-error .ui-icon.ui-icon-alert
  {
    background-image: url(img/ui-icons_444444_256x240.png);
  }

  /* HACK: pqgridのtooltipがui-state-errorを安定して付与できない対策 */
  .ui-tooltip.ui-state-error
  {
    background-color: #f5f3e5;
    border: 1px solid #c5c5c5;
  }

/*
 *  ###########################################################################
 *    select2
 *  ###########################################################################
 */
/* セレクトリストのメイン枠 */
.select2-container--default .select2-selection--single
{
  height: 22px;
  border-radius: 2px;
  border: solid 1px #666666;
}

  /* テキスト */
  .select2-container--default .select2-selection--single .select2-selection__rendered
  {
    line-height: 20px;
  }

  /* 矢印 */
  .select2-container--default .select2-selection--single .select2-selection__arrow
  {
    height: 22px;
  }

/* 選択肢 */
.select2-results__option
{
  min-height: 15px;
  padding: 2px 4px;
}

/*
 *  #######################################
 *    checkboxradio
 *  #######################################
 */
.ui-checkboxradio-radio-label
{
}

  .ui-checkboxradio-radio-label .ui-checkboxradio-icon.ui-icon-background
  {
    background-color: aliceblue;
  }

  .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
  .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon:hover,
  .ui-checkboxradio-radio-label.ui-icon,
  .ui-checkboxradio-radio-label.ui-icon:hover
  {
    border-color: #53bd1e;
  }


/*
 *  #######################################
 *    全体共通
 *  #######################################
 */
/* ヘッダーデザイン */
.login-nav-header
{
  background-color: rgb(52, 58, 64) !important;
  color: rgba(255, 255, 255, 0.8);
}

.nav-header-block
{
  padding: 4px 16px;
}

.system-title
{
  font-size: 1.25rem;
}

.no-disp {
  display: none!important;
}

.card
{
  padding: 30px 10px;
}

.input-block
{
  padding-bottom: 4px;
}

.searchInputArea
{
  display: flex;
  flex-direction: row;
}

details
{
  width: 100%;
}

details > summary {
  padding: 2px 6px;
  width: 100%;
  background-image: linear-gradient(90deg, #343a40 0%, #6e7781 100%);
  color: white;
  border: none;
  cursor: pointer;
}

.blockArea
{
  display: flex;
  flex-direction: row;
}

  .blockArea > .label
  {
    display: flex;
    align-items: center;
    padding-left: 6px;
    width: 140px;
    background: lightgray;
    color: black;
  }

.range-split
{
  margin: 0px 10px;
}

/*
 *  #######################################
 *    タイトル領域
 *  #######################################
 */
/* 領域 */
.titArea
{
  min-height: 26px;
  display: flex;
  align-items: center;
  /*background: #f2f2f2;*/
  /*background: #1391af;*/
  /*background: #343a40;*/
  background-image: linear-gradient(90deg, #343a40 0%, #6e7781 100%);
  color: white;
}

  .titArea .titItem
  {
    display: flex;
    align-items: center;
  }

    /* 先頭項目 */
    .titArea .titItem:first-child
    {
      flex: 1;
    }

  /* ページ名 */
  .titArea .pageName
  {
    font-size: 12pt;
    margin-left: 15px;
  }

  /* 窓口メールアドレス */
  .titArea .contact
  {
    margin-left: 15px;
    font-size: 8pt;
  }

  /* フォント */
  .titArea .titAreaFont
  {
    font-family: HGMaruGothicMPRO,sans-serif;
  }

  /* 右エリア */
  .titArea .titItemRight
  {
    display: flex;
    padding-right: 15px;
  }

  /* ユーザー情報 */
  .titArea .userInfo
  {
    display: flex;
    align-items: center;
    padding-right: 25px;
  }

    .titArea .userInfo img
    {
      width: 16px;
      padding-right: 10px;
    }

  /* ボタン */
  .titArea button
  {
    min-width: 100px;
    margin-right: 5px;
  }

ul.navbar-nav .nav-link
{
  font-size: large;
}

/*
 *  #######################################
 *    明細
 *  #######################################
 */
div.pq-theme i
{
  font-family: 'Font Awesome 6 Free';
}


div.pq-theme label.ui-button
{
  background: #ffc107;
  border-color: #ffc107;
  border-radius: 6px;
  border-style: solid;
  border-width: 0.8px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  padding: 0.35rem 0.75rem;
  box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 1px 1px 0px;
}

div.pq-theme label.ui-button:hover
{
  color: rgb(0, 0, 0);
  background: #ffc720;
  border-color: #ffc720;
}

/* ----------------------------------------
 *   明細内アイコンボタン
 * ----------------------------------------
 */
.gridIconBtn
{
  border: 1px solid gray;
  height: 24px;
  width: 28px;
}


/**
 * 
 */
span.errMsg, div.errMsg
{
  color: red;
  font-weight: bold;
}

/* ----------------------------------------
 *   Welpo予約ステータス配色設定
 * ----------------------------------------
 */
.welpo-yykst-noyoyaku
{
  background-color: #ffffff;
}
.welpo-yykst-idou-kari-yoyaku
{
  background-color: #FFC000;
}
.welpo-yykst-comp-yoyaku
{
  background-color: #0070C0;
  color: white;
}
.welpo-yykst-cancel
{
  background-color: #808080;
  color: white;
}
.welpo-yykst-kakuho
{
  background-color: #FFFF00;
}
.welpo-yykst-outer-yoyaku
{
  background-color: #C00000;
  color: white;
}
.welpo-yykst-lottery
{
  background-color: #00B050;
  color: white;
}


/* ----------------------------------------
 *   設定ボタン
 * ----------------------------------------
 */
#settingBtn
{
  display: inline;
  background: white;
  color: black;
  padding: 5px 10px;
  border-radius: .375rem;
}

/* ----------------------------------------
 *   ヘッダー幅とサイドバー
 * ----------------------------------------
 */
.sidebar-brand
{
  border-bottom: inherit;
}

.sidebar-brand .brand-text
{
  color: #FFFFFF;
}

/* スマホ用　ヘッダーのタイトルと設定ボタンを離す */
/**********************************************
 * CSSハック：padding
 **********************************************/
/* for mini-SP */
@media screen and (max-width:350px)
{
  /* override */
  .sidebar-brand .brand-text
  {
    margin-left: 0;
  }
  .navbar-expand .navbar-nav .nav-link
  {
    padding-right: .5rem;
    padding-left: .5rem;
  }
}

.app-wrapper
{
  grid-template-areas: "lte-app-header lte-app-header" "lte-app-main lte-app-sidebar" "lte-app-footer lte-app-sidebar";
  grid-template-columns: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh; /* スマホ対応 */
}

.sidebar-wrapper .nav-header
{
  color: #EBEBEB;
}

.sidebar-wrapper a
{
  color: #EBEBEB;
}

.app-header
{
  height: 40px;
  /*--lte-header-height: 40px;*/
}

.app-sidebar .nav-header,
.app-sidebar .nav-item
{
  font-size: 14px;
}

.sidebar-wrapper .nav-link p
{
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

@media (min-width: 992px) {
  .sidebar-expand-lg.layout-fixed .app-sidebar
  {
    position: fixed;
    top: var(--lte-header-height);
    left: 100vw;
    max-height: calc(100vh - var(--lte-header-height));
    max-height: calc(100dvh - var(--lte-header-height)); /* スマホ対応 */
  }

  .sidebar-expand-lg.sidebar-open .app-sidebar
  {
    margin-left: calc(var(--lte-sidebar-width) * -1);
  }

  .sidebar-expand-lg.sidebar-collapse .app-sidebar
  {
    margin-left: 0px;
  }

  /* 画面幅が大きいときの初期値がsidebar-collapseになったら追加する */
  .sidebar-expand-lg.sidebar-open .sidebar-overlay
  {
    position: absolute;
    inset: 0;
    z-index: 1037;
    width: 100%;
    height: 100%;
    cursor: pointer;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.2);
    animation-name: fadeIn;
    animation-fill-mode: both;
  }
}


@media (max-width: 991.98px)
{
  .sidebar-expand-lg.layout-fixed .app-sidebar
  {
    position: fixed;
    top: var(--lte-header-height);
    left: 100vw;
    max-height: calc(100vh - var(--lte-header-height));
    max-height: calc(100dvh - var(--lte-header-height)); /* スマホ対応 */
  }

  .sidebar-expand-lg.sidebar-open .app-sidebar
  {
    margin-left: calc(var(--lte-sidebar-width) * -1);
  }

  .sidebar-expand-lg.sidebar-collapse .app-sidebar
  {
    margin-left: 0px;
  }
}

/*********************************************
 * ダイアログ - ログアウト
 *********************************************/
/* .logoutDialog */
.logoutDialog
{
  display: none;
  font-size: 1rem;
}

.logoutDialogOut
{
  z-index: 1039; /* 下のoverlayより上 */
}

  .logoutDialogOut + div.ui-widget-overlay
  {
    z-index: 1038; /* sidebarのoverlay=1037より上 */
  }

  .logoutDialogOut .ui-dialog-buttonpane
  {
    padding: .5em 1em;
  }

    .logoutDialogOut .ui-dialog-buttonpane .ui-dialog-buttonset
    {
      float: inherit;
      display: flex;
      justify-content: space-evenly;
    }

      .logoutDialogOut .ui-dialog-buttonpane .ui-dialog-buttonset button
      {
        width: 7rem;
        border-radius: .375rem;
        border: inherit;
        background: #0471db;
        color: white;
        font-size: 1rem;
        padding: .5rem 1rem;
        margin: 0;
        white-space: nowrap;
      }

/*********************************************
 * CSS ハック
 *********************************************/
@media screen and (min-width:320px) and (max-width:767px)
{
  .container {
    --bs-gutter-x: 0.5rem;
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  @media screen and (min-width:320px) and (max-width:512px)
  {
    .card {
      padding: 20px 10px;
    }
  }
}
@media screen and (min-width: 768px) and (max-width:911px) {
  .container {
    --bs-gutter-x: 0.5rem;
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media screen and (min-width: 912px) {
  .container {
    --bs-gutter-x: 1.5rem;
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/*********************************************
 * スクロールボタン
 *********************************************/
#BtnScroll
{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
}

  #BtnScroll a
  {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    background: #544bfb;
    margin-left: auto;
  }

    #BtnScroll a::before
    {
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: '\f062';
      font-size: 25px;
      color: #fff;
      position: absolute;
      width: 25px;
      height: 25px;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      text-align: center;
      line-height: 1;
    }


/*********************************************
 * 色セット
 *********************************************/
.red
{
/*  color: red;*/
  color: #FF3232; /* 真っ赤より見やすい */
}
    
/*********************************************
 * 画面共通部品
 *********************************************/
/* ログインユーザー名 */
.userArea
{
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  border-bottom: 2px solid lightblue;
}

.userAreaInner
{
  display: flex;
  flex-wrap: wrap;
}

  .userAreaInner > .userNameArea
  {
    margin-right: 5px;
  }

/* ログイン者 設定状況ラベル用 */
  .userAreaInner > .settingMsgArea
  {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
  }

/* ログイン者 登録未完了通知ラベル用 */
.notCompleteReservationMsg
{
  color: red;
  font-weight: bold;
}

/**********************************************
 * CSSハック：受診者 - フォントサイズ
 **********************************************/
/* for mini-SP */
@media screen and (max-width:411px)
{
  .userAreaInner > .userNameArea > .loginUserName
  {
    font-size: 1rem;
  }
  .userAreaInner > .settingMsgArea span
  {
    font-size: 0.7rem;
  }
}

/* for mini-SP */
@media screen and (min-width:412px) and (max-width:512px)
{
  .userAreaInner > .userNameArea > .loginUserName
  {
    font-size: 1.2rem;
  }
  .userAreaInner > .settingMsgArea span
  {
    font-size: 0.8rem;
  }
}

/* for SP */
@media screen and (min-width:513px) and (max-width:576px)
{
  .userAreaInner > .userNameArea > .loginUserName
  {
    font-size: 1.4rem;
  }
  .userAreaInner > .settingMsgArea span
  {
    font-size: 0.9rem;
  }
}

@media screen and (min-width:577px) and (max-width:680px)
{
  .userAreaInner > .userNameArea > .loginUserName
  {
    font-size: 1.6rem;
  }
  .userAreaInner > .settingMsgArea span
  {
    font-size: 1rem;
  }
}

@media screen and (min-width:681px) and (max-width:786px)
{
  .userAreaInner > .userNameArea > .loginUserName
  {
    font-size: 1.8rem
  }
  .userAreaInner > .settingMsgArea span
  {
    font-size: 1.1rem;
  }
}

/* for tablet */
@media screen and (min-width:787px)
{
  .userAreaInner > .userNameArea > .loginUserName
  {
    font-size: 2rem;
  }
  .userAreaInner > .settingMsgArea span
  {
    font-size: 1.2rem;
  }
}

/* for PC */
@media screen and (min-width:1025px)
{

}


/**********************************************
 * 進捗表示
 **********************************************/
.positionArea
{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

.position
{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
}

.positionCircle
{
  width: 30px;
  height: 30px;
  border: 2px solid #69abf6;
  border-radius: 50%;
}

.positionText
{
  white-space: nowrap;
  font-size: 14px;
}

.positionBar
{
  width: 50px;
  max-width: 100px;
  border-top: 2px solid cornflowerblue;
  padding-bottom: 15px;
  flex: 1;
}

/* for mini-SP */
@media screen and (max-width:350px)
{
  .positionCircle
  {
    width: 25px;
    height: 25px;
  }

  .positionText
  {
    font-size: 12px;
  }
}

/**********************************************
 * 字下げ・インデント
 **********************************************/
.indentTitle
{
  padding-left: 1em !important;
  text-indent: -1em;
}

.indentTitleHalf
{
  padding-left: 0.5em !important;
  text-indent: -0.5em;
}