/**
 * 共通スタイル定義
 * 複数のTwigファイルで使用される共通のスタイルを定義
 * 作成日: 2024-12-19
 */

/* ============================================
   ラッパー
   ============================================ */

/* メインラッパー */
#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh; /* 高さを確定させる */
}

/* ============================================
   ヘッダー部分
   ============================================ */

/* ヘッダーラッパー */
#header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

/* ロゴ画像（ヘッダー用） */
.logo-header {
        /* width: 214px;
        height: 64px; */
    height: 56px;
    width: auto;
}

/* ユーザー情報セクション */
.user-info-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ユーザー情報テキスト */
.user-info-text {
    font-weight: bold;
    text-align: left;
}

/* ユーザー詳細情報 */
.user-detail {
    text-align: left;
}

/* ============================================
   メニュー部分
   ============================================ */

/* メニューラッパー */
#menu-wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
}

/* メニューラッパー（h-100クラス用） */
#menu-wrapper.h-100 {
    align-self: stretch; /* flexコンテナ内で親の高さいっぱいに伸ばす */
}

/* メニューリスト */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================
   コンテンツラッパー
   ============================================ */

/* コンテンツラッパー（基本） */
#content-wrapper {
    text-align: left;
}

/* コンテンツラッパー（マージン付き） */
#content-wrapper.content-wrapper-margin {
    margin: 20px;
}

/* コンテンツラッパー（フレックス） */
#content-wrapper.content-wrapper-flex {
    flex: 1;
    padding: 20px;
}

#content-wrapper.content-wrapper-flex.order-list-content-wrapper {
    padding: 0 10px 10px 0;
    background-color: #f5f6f8;
}
#content-wrapper.content-wrapper-flex.user-info-content-wrapper {
    padding: 0 10px 10px 0;
    background-color: #f5f6f8;
}
.user-info-content {
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #e6e8ee;
}

.order-list-content {
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #e6e8ee;
}

.user-info-content .control {
    max-width: 768px;
    margin: 0 auto;
}

.user-info-content .page-header {
    text-align: center;
    max-width: 768px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ============================================
   ロゴ画像
   ============================================ */

/* ロゴ画像（大） */
.logo-large {
    /* width: 214px; */
    /* height: 64px; */
    height: 56px;
    width: auto;
}

/* ロゴ画像（中） */
.logo-middle {
    width: 120px;
    height: 36px;
}

/* ロゴ画像（小） */
.logo-small {
    width: 32px;
    height: 32px;
}

/* ============================================
   ページヘッダー・タイトル
   ============================================ */

/* ページヘッダーセクション */
.page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.25em;
    font-weight: bold;
}

.page-header.-order-page-header {
    padding-bottom: 10px;
}


.page-header.mb-0 {
    margin-bottom: 0;
}

.page-header.-md-1 {
    padding-top: 40px;
    margin-bottom: 0;
    padding-left: 32px;
}

/* タイトル（全幅） */
.title-full-width {
    width: 100%;
}

/* タイトル（44%幅） */
.title-width-44 {
    width: 44%;
}

/* ページタイトル（太字） */
.page-title {
    font-size: 1.2em;
    font-weight: bold;
}

/* 中央配置セクション */
.center-section {
    text-align: center;
    margin-bottom: 20px;
}

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

/* 左配置セクション */
.left-section {
    text-align: left;
    margin-bottom: 20px;
}

/* ============================================
   フォーム要素
   ============================================ */

/* フォームラベル */
.form-label {
    /* 空のstyle属性を置き換え */
}

/* フォーム入力（300px幅） */
.form-input-300 {
    width: 100%;
    margin-bottom: 5px;
}

/* フォーム入力（300px幅、マージンなし） */
.form-input-300-no-margin {
    width: 300px;
    margin-bottom: 0px;
}

/* フォーム入力（読み取り専用背景） */
.form-input-readonly {
    background-color: #f5f5f5;
}

/* エラー状態の入力フィールド */
.form-input-error {
    background-color: #fef3f4;
}

/* 正常状態の入力フィールド */
.form-input-normal {
    background-color: #FFFFFF;
}

/* ============================================
   エラーメッセージ
   ============================================ */

/* エラーテキスト */
.error-text {
    color: #dc3545;
}

/* エラーテキスト（大） */
.error-text-large {
    font-size: 20px;
    color: #dc3545;
}

/* ============================================
   モーダル
   ============================================ */

/* モーダルボディ */
.modal-body {
    text-align: center;
}

/* モーダルフッター */
.modal-footer {
    margin-top: 40px;
    text-align: center;
}

/* ============================================
   フッター
   ============================================ */

/* フッター（ダーク） */
.footer-dark {
    display: none;
    /* padding: 10px;
    background-color: #333;
    color: white;
    text-align: center;
    margin-top: 20px; */
    clear: both;
}

/* フッターテキスト */
.footer-text {
    display: none;
    margin: 0;
}

/* フッターリンク（白） */
.footer-link-white {
    display: none;
    color: white;
    text-decoration: underline;
}

/* フッターリンク（基本） */
.footer-link {
    display: none;
    color: white;
}

/* ============================================
   ボタン
   ============================================ */

/* ボタン右寄せ */
.button-right {
    float: right;
}

/* ボタン（最小幅120px） */
.btn-min-width-120 {
    min-width: 120px;
}

/* ボタン（最小幅150px） */
.btn-min-width-150 {
    min-width: 150px;
}

/* ============================================
   テーブル
   ============================================ */

/* テーブルヘッダー（最小幅210px） */
.table-header-min {
    min-width: 210px;
}

/* テーブルヘッダー（最小幅200px） */
.table-header-min-200 {
    min-width: 200px;
}

/* テーブルヘッダー（中央揃え） */
.table-header-center {
    text-align: center;
}

/* テーブルヘッダー（右揃え） */
.table-header-right {
    text-align: right;
}

/* ============================================
   その他
   ============================================ */

/* 全幅 */
.full-width {
    width: 100%;
}

/* 行の高さ（通常） */
/* .line-height-normal {
    line-height: 1.2;
} */

/* ラベル（通常） */
.label-normal {
    font-weight: normal;
    margin-right: 10px;
}

/* 必須項目テキスト */
.required-text {
    color: #dc3545;
}

/* 警告テキスト */
.warning-text {
    color: #dc3545;
    margin-left: 20px;
}

/* マージン（下10px） */
.margin-bottom-10 {
    margin-bottom: 10px;
}

/* マージン（下20px） */
.margin-bottom-20 {
    margin-bottom: 20px;
}

/* マージン（下10px） */
.margin-bottom-10 {
    margin-bottom: 10px;
}

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

/* ファイル入力（非表示） */
.file-input-hidden {
    display: none;
}

/* 月ラベル（日付ピッカー用） */
.month-label {
    margin-left: 3px;
}

/* テキスト左寄せ（JavaScriptで動的生成される要素用） */
.text-align-left {
    text-align: left;
}

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

/* ラベル（太字） */
.label-bold {
    font-weight: bold;
}

/* マージン（右10px） */
.margin-right-10 {
    margin-right: 10px;
}

/* テキスト（青色） */
.text-blue {
    color: #0000ff;
}

/* 表示（ブロック） */
.display-block {
    display: block;
}

/* フォントサイズ（1.5em） */
.font-size-1-5em {
    font-size: 1.5em;
}

/* 矢印（有効） */
.arrow-enabled {
    color: black;
}

/* 矢印（無効） */
.arrow-disabled {
    color: #bdbdbd;
}

/* ボタン（中央配置、大） */
.btn-center-large {
    float: none !important;
    display: inline-block !important;
    font-size: 1.5em !important;
    margin: 0 auto !important;
}

/* ボタンエリア（中央配置） */
.xcConfirm .popBox .sgBtnArea.text-align-center {
    text-align: center !important;
}

/* 日付ピッカーの月セレクト（jQuery UI内部要素用） */
.ui-datepicker-month {
    width: auto;
    /* min-width: 40px; */
}

/* 日付ピッカーの年セレクト（jQuery UI内部要素用） */
.ui-datepicker-year {
    width: auto;
    /* min-width: 60px; */
}



/* ============================================
   2026/01/08 追加スタイル
   ============================================ */

/* 基本リセット */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* HTML & Body 基本設定 */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%; /* iOS Safari */
    -ms-text-size-adjust: 100%; /* IE */
    text-size-adjust: 100%;
    line-height: 1.5;
}

body {
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", "MS PGothic", "Segoe UI", Roboto, "Yu Gothic UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1f1f1f;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 日本語フォント設定（レガシー対応） */
/* Windows: Meiryo, MS PGothic, MS Gothic */
/* Mac: Hiragino Kaku Gothic ProN, Hiragino Sans */
/* モダン: Noto Sans JP, Yu Gothic */

/* 見出し要素のリセット */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

/* リストのリセット */
ul, ol {
    list-style: none;
}

/* リンクの基本設定 */
a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* 画像の基本設定 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}

/* テーブルのリセット */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* フォーム要素のリセット */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    vertical-align: baseline;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

label{
    font-size: 15px;
}

/* 入力フィールドの基本設定 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* ラジオボタンとチェックボックスはデフォルト表示を維持 */
input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    width: auto;
    height: auto;
    margin: 0 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

/* ラジオボタンのスタイル（レガシー対応） */
input[type="radio"] {
    width: 16px;
    height: 16px;
    border: 1px solid #999;
    border-radius: 50%;
    background-color: #fff;
}

input[type="radio"]:checked {
    background-color: #4c8dff;
    border-color: #4c8dff;
    background-image: radial-gradient(circle, #fff 30%, transparent 30%);
}

/* チェックボックスのスタイル（レガシー対応） */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #999;
    border-radius: 6px;
    background-color: #fff;
    vertical-align: middle;
}

input[type="checkbox"]:checked {
    background-color: #4c8dff;
    border-color: #4c8dff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M10 3L4.5 8.5L2 6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* IE11対応（チェックマークの代替） */
input[type="checkbox"]:checked::before {
    content: "✓";
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
}

/* セレクトボックスのスタイル */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    padding-right: 32px;
    padding-left: 8px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    min-height: 40px;
}

/* IE11対応（セレクトボックスの矢印） */
select::-ms-expand {
    display: block;
}

/* セレクトボックスのフォーカス */
select:focus {
    outline: none;
    border-color: #4c8dff;
    box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.18);
}

/* ボタンの基本スタイル */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    padding: 8px 16px;
    /* font-size: 16px;
    line-height: 1.5; */
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background-color: #fff;
    color: #1f1f1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
    background-color: #e0e0e0;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: none;
    border-color: #4c8dff;
    box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.18);
}

/* ファイル入力のスタイル */
input[type="file"] {
    padding: 4px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
}

input[type="file"]:focus {
    outline: none;
    border-color: #4c8dff;
    box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.18);
}

/* IE11対応 */
input::-ms-clear {
    display: none;
}

input::-ms-reveal {
    display: none;
}

/* フォーカス表示（アクセシビリティ） */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #4c8dff;
    outline-offset: 2px;
}

/* スクロールバーのスタイル（Webkit系） */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 選択時の色 */
::selection {
    background-color: #4c8dff;
    color: #fff;
}

::-moz-selection {
    background-color: #4c8dff;
    color: #fff;
}

/* 文字周りの設定 */
p {
    margin: 0;
    padding: 0;
}

/* 日本語の禁則処理 */
p,
span,
div,
td,
th {
    word-break: break-word;
    overflow-wrap: break-word;
    -ms-word-break: break-word;
    -ms-word-wrap: break-word;
}

/* 長いURLや英数字の折り返し */
pre,
code {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* 日本語の行間調整 */
p,
li,
td,
th {
    line-height: 1.8;
}

/* 文字間隔の調整 */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.05em;
}

/* レガシーブラウザ対応（IE11以下は無視される） */
@supports not (display: grid) {
    /* グリッド未対応ブラウザ用のフォールバック */
}

/* 印刷時の設定 */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2,
    h3 {
        page-break-after: avoid;
    }
}

   
/* ============================================
   フォーム要素 - 基本スタイル（order.cssから共通化）
   ============================================ */
   input[type="search"],
   input[type="search"]:focus,
   input[type="search"]:active,
   input[type="search"]:hover {
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background: #fff;
   }

/* 入力フィールドの基本スタイル */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    height: auto;
    min-height: 40px;
    font-size: 16px;
    padding: 6px 12px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background: #fff;
    line-height: 1.4;
    box-sizing: border-box;
    margin-bottom: 0;
    font-family: inherit;
}

input[type="search"] {
    height: auto;
    min-height: 40px;
    font-size: 16px;
    padding: 6px 12px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    line-height: 1.4;
    box-sizing: border-box;
    margin-bottom: 0;
    font-family: inherit;
}

/* テキストエリアの追加スタイル */
textarea {
    min-height: 140px;
    resize: vertical;
    width: 100%;
}

/* フォーカス時のスタイル */
input[type="text"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
textarea:focus:not([readonly]) {
    outline: none;
    border-color: #4c8dff;
    box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.18);
}

/* エラー状態のフォーカス時のスタイル */
input[type="text"].form-input-error:focus:not([readonly]),
input[type="password"].form-input-error:focus:not([readonly]),
input[type="email"].form-input-error:focus:not([readonly]),
input[type="tel"].form-input-error:focus:not([readonly]),
input[type="number"].form-input-error:focus:not([readonly]),
textarea.form-input-error:focus:not([readonly]) {
    outline: none;
    border-color: #dc3545;
    box-shadow: none;
}

/* readonlyのinputフィールドはフォーカス時の見た目を変更しない */
input[readonly],
input[readonly]:focus,
input[readonly]:hover,
textarea[readonly],
textarea[readonly]:focus,
textarea[readonly]:hover {
    outline: none;
    border-color: #d8dde6;
    box-shadow: none;
    cursor: default;
    background-color: #f5f5f5;
}

/* エラー状態の入力フィールド */
.form-input-error,
input.form-input-error,
textarea.form-input-error {
    border: 1px solid #dc3545;
    background-color: #fef3f4;
}

/* エラーテキスト */
.error-text {
    font-size: 13px;
    padding-top: 10px;
    display: block;
    color: #dc3545;
}

/* 警告テキスト */
.warning-text {
    font-size: 13px;
    color: #dc3545;
}

/* 必須項目マーカー */
.form_require:after {
    color: #dc3545;
    content: "*";
    margin-left: 4px;
    font-weight: bold;
}

/* ラベル（通常） */
.label-normal {
    font-weight: normal;
    margin-right: 10px;
}

/* ラベル（通常、マージンなし） */
.label-normal-no-margin {
    font-weight: normal;
}

/* 入力フィールドの幅指定クラス */
input-width-50 {
    width: 50%;
    margin-bottom: 5px;
}

input-width-80 {
    width: 80%;
    margin-bottom: 5px;
}

input-width-120 {
    width: 120px;
    margin-right: 10px;
}

/* テキストエリアの高さ指定 */
.textarea-height-150 {
    height: 150px;
}



.form-radio,
.form-checkbox,
.form-radio-row,
.form-checkbox-row {
  display: flex;
  align-items: center;
}

.form-radio-row,
.form-checkbox-row {
  gap: 16px;
}

.form-input-readonly {
    background-color: #f5f5f5;
}


.backGray {
    background-color: #f5f6f8;
}


.form-checkbox-row + .warning-text {
    margin-left: 0;
    padding-top: 10px;
    display: block;
}

.form-radio-row {
    display: inline-flex;
}
.form-radio-row.form-input-error {
    border-radius: 6px;
    border: 0;
    padding: 2px 8px;
}

/* ============================================
   jQuery UI Datepicker - marumo style
   20260108追加
   ============================================ */
   .ui-datepicker-group{
    position: relative;
   }
.ui-datepicker-group:not(.ui-datepicker-group-last):after {
    content: "";
    display: block;
    width: 1px;
    height: 400px;
    background-color: #e0e0e0;
    position: absolute;
    top: 0;
    right: 0;
}

/* 日付ピッカーの基本スタイル */
.ui-datepicker {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    font-family: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important;
    padding: 0px !important;
    width: auto !important;
    min-width: 280px !important;
    overflow: hidden;
}


/* ヘッダー部分 */
.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    padding: 8px !important;
    margin-bottom: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px!important;
}

/* 前月・次月ボタン */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    top: 10px !important;
    transition: background-color 0.2s ease !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background-color: #f5f5f5 !important;
}

.ui-datepicker .ui-datepicker-prev {
    left: 8px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 8px !important;
}

/* 前月・次月ボタンのアイコン */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    border: 6px solid transparent !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: -2px !important;
    margin-top: -6px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.ui-datepicker .ui-datepicker-prev span {
    border-right-color: #424242 !important;
    border-left: none !important;
}

.ui-datepicker .ui-datepicker-next span {
    border-left-color: #424242 !important;
    border-right: none !important;
}

.ui-widget-header .ui-icon {
    background-image: none!important;
}

/* タイトル（年月表示） */
.ui-datepicker .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212121 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    text-align: center !important;
    margin: 0 40px !important;
}

/* 年月セレクトボックス */
.ui-datepicker .ui-datepicker-title select {
    /* background: transparent !important;
    border: none !important; */
    color: #212121 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* テーブル */
.ui-datepicker table {
    border-collapse: collapse !important;
    margin: 6px!important;
    padding: 0 8px!important;
}

/* 曜日ヘッダー */
.ui-datepicker th {
    color: #757575 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 8px 4px !important;
    text-align: center !important;
    border: none !important;
}

/* 日付セル */
.ui-datepicker td {
    padding: 2px !important;
    text-align: center !important;
    border: none !important;
}

/* 日付リンク */
.ui-datepicker td span,
.ui-datepicker td a {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #212121 !important;
    font-size: 14px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 0px !important;
}

/* 日付リンク - ホバー */
.ui-datepicker td span:hover,
.ui-datepicker td a:hover {
    background-color: #f5f5f5 !important;
    color: #212121 !important;
}

/* 今日の日付 */
.ui-datepicker .ui-datepicker-today a {
    background-color: #e3f2fd !important;
    color: #1f6feb !important;
    font-weight: 500 !important;
}

/* 選択された日付 */
.ui-datepicker .ui-datepicker-current-day a,
.ui-datepicker td.ui-datepicker-current-day a {
    background-color: #1f6feb !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3) !important;
}

/* 他の月の日付 */
.ui-datepicker .ui-datepicker-other-month span,
.ui-datepicker .ui-datepicker-other-month a {
    color: #bdbdbd !important;
}

/* 無効な日付 */
.ui-datepicker .ui-datepicker-unselectable span,
.ui-datepicker .ui-datepicker-unselectable a {
    /* color: #e0e0e0 !important; */
    cursor: default !important;
}

.ui-datepicker .ui-datepicker-unselectable span:hover,
.ui-datepicker .ui-datepicker-unselectable a:hover {
    background-color: transparent !important;
}

/* 月・年のセレクトボックス（内部） */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    /* background: transparent !important; */
    /* border: none !important; */
    color: #212121 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 0px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 0 4px !important;
    min-height: 32px !important;
    background-color: #fafafa!important;
}


.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    padding-right: 32px!important;
}

/* 日付ピッカーのボタン（サイト全体のボタンスタイルに合わせる） */
.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none !important;
    margin: 12px 0 0 0 !important;
    padding: 10px 16px !important;
    border-top: 1px solid #e0e0e0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    display: flex !important;
    justify-content: flex-end!important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0!important;
    background-color: #fff!important;
    position: relative;
}

/* 「今日」ボタンは左寄せ */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    margin-right: auto !important;
}

.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
    background-color: transparent!important;
    border: 1px solid #1a5fd4!important;
    color: #1a5fd4!important;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: none !important;
    display: inline-block !important;
    border: 0 !important;
    background: #1f6feb !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 5px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin: 0!important;
    font-size: 14px !important;
    line-height: 24px !important;
    min-width: 80px !important;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: #1a5fd4 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button:active {
    background: #1859c7 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: none !important;
    background: #fff !important;
    color: #1f6feb !important;
    border: 1px solid #1f6feb !important;
    order: -1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
    background: #1f6feb !important;
    color: #fff !important;
    border-color: #1f6feb !important;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:active {
    background: #1a5fd4 !important;
    border-color: #1a5fd4 !important;
}

.ui-datepicker-trigger:hover,
.ui-datepicker-trigger:focus,
.ui-datepicker-trigger:active {
    cursor: pointer!important;
}

/* ============================================
   ヘッダー・メニュー・ボタン
   ============================================ */

#header-wrapper {
    background-color: #f5f6f8;
    border-bottom: 0;
}

#menu-wrapper {
    width: 200px;
    background-color: #f5f6f8;
    border-right: 0;
}

/* メニューリスト */

.menu-list {
gap: 4px;
display: flex;
flex-direction: column;
}

.menu-list li a,
.menu-list li span {
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    line-height: 24px;
    padding: 8px 16px;
    overflow: hidden;
    border-radius: 6px;
    font-weight: 600;
    display: block;
    transition: background-color 0.2s ease;
}

.menu-list li span.ic-open-window {
    padding: 0;
    display: flex;
    align-items: center;
}

.menu-list li span.ic-open-window:after {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23666666'%3E%3Cpath d='m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    margin-left: 4px;
}

.menu-list li a:hover,
.menu-list li a:focus,
.menu-list li a:active {
    background-color: rgba(0, 0, 0, .05);
    cursor: pointer;
    text-decoration: none;
}

.menu-list li.o span{
    color: rgba(0, 0, 0, .85);
    font-weight: 700;
    background-color: #d3e3fd;
}




/* リンク */
.text-link {
    color: #1f6feb;
    /* text-decoration: underline; */
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
}

.text-link:hover {
    color: #1a5fd4;
}

.text-link.ic-arrow-right {
    display: flex;
    align-items: center;
    /* gap: 4px; */
}

/* input[type="button"]をtext-linkと同じ見た目に */
input[type="button"].text-link,
button.text-link {
    color: #1f6feb;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
}

input[type="button"].text-link:hover,
button.text-link:hover {
    color: #1a5fd4;
}

input[type="button"].text-link.ic-arrow-right,
button.text-link.ic-arrow-right {
    display: inline-flex;
    align-items: center;
}

.text-link.ic-arrow-right:after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f6feb'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* background-position: left 8px center; */
    background-position: center;
    background-size: 24px 24px;
    padding-right: 24px;
}


/* button 基本設定 */

/* ボタン行 */
.btn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.btn-row-order {
    padding-bottom: 40px;
}

/* ボタン */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #1f6feb;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:hover,
.btn:focus,
.btn:active {
    background-color: #1a5fd4;
}

input[type="button"].btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #1f6feb;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #1f6feb;
}

input[type="button"].btn:hover,
input[type="button"].btn:focus,
input[type="button"].btn:active {
    background-color: #1a5fd4;
    border: 1px solid #1a5fd4;
}

input[type="submit"].btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #1f6feb;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #1f6feb;
}

input[type="submit"].btn:hover,
input[type="submit"].btn:focus,
input[type="submit"].btn:active {
    background-color: #1a5fd4;
    border: 1px solid #1a5fd4;
}


/* ボタン（線形） */
.btn-outline {
    background-color: transparent;
    color: #1f6feb;
    border: 1px solid #1f6feb;
    box-sizing: border-box;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
    background-color: #1f6feb;
    border: 1px solid #1f6feb;
    color: #fff;
}

input[type="button"].btn-outline {
    background-color: transparent;
    color: #1f6feb;
    border: 1px solid #1f6feb;
    box-sizing: border-box;
}

input[type="button"].btn-outline:hover,
input[type="button"].btn-outline:focus,
input[type="button"].btn-outline:active {
    background-color: #1f6feb;
    color: #fff;
    border: 1px solid #1f6feb;
}



input[type="button"].btn-outline.btn-cancel-edit {
    background-color: #fff;
    color: #1f6feb;
    border: 1px solid #1f6feb;
}

input[type="button"].btn-outline.btn-cancel-edit:hover,
input[type="button"].btn-outline.btn-cancel-edit:focus,
input[type="button"].btn-outline.btn-cancel-edit:active {
    background-color: #1f6feb;
    color: #fff;
}



.order-list-table th,
.order-list-table td{
    font-size: 14px;
    line-height: 18px;
}

table.dataTable.order-list-table tbody td{
    padding-top: 16px;
    padding-bottom: 16px;
}

table.user-info-table {
    display: flex;
    flex-direction: column;
    border: 0;
}

#appList.user-info-table th,
#appList.user-info-table td{
    border: 0;
}

table#appList.user-info-table tbody{
    display: flex;
    flex-direction: column;
}

table#appList.user-info-table tbody tr:not(:last-child){
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e8ee;
}

table#appList.user-info-table tbody tr th{
    width: 160px;
    min-width: 160px;
    padding:0;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
}

table#appList.user-info-table tbody tr th label {
    font-size: 13px;
    line-height: 18px;
    opacity: 0.75;
}

table#appList.user-info-table tbody tr td{
    padding:0;
    padding-top: 10px;
    padding-bottom: 10px;
}

table#appList.user-info-table tbody tr td label {
    font-size: 16px;
    line-height: 18px;
}


.content-wrapper-inner {
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #e6e8ee;
    min-height: 100vh;
}



/* ============================================
   パスワード入力欄のスタイル
   ============================================ */

/* パスワード入力フィールドのコンテナ */
.form-col__pass-toggle {
    position: relative;
    display: inline-block;
    width: 100%;
}

.form-col__pass-toggle .toggle-btn {
    margin-left: 0;
}

/* パスワード入力フィールドの右側にパディングを追加（アイコン用） */
.form-col__pass-toggle input[name="log_pass"] {
    padding-right: 40px!important; /* アイコン分のスペース */
}

/* パスワード表示/非表示アイコンのコンテナ */
.form-col__pass-toggle__icon {
    position: absolute;
    right: 0;
    top: 0;
    /* transform: translateY(-50%); */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

/* アイコンボタン */
.form-col__pass-toggle__icon .toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #757575;
    transition: color 0.2s ease;
}

.form-col__pass-toggle__icon .toggle-btn:hover {
    color: #424242;
}

/* スペーサー用のアイコン（非表示） */
.form-col__pass-toggle__icon .toggle-btn-spacer {
    display: none;
}

.error-text.error-text-pass {
    text-align: left;
}


.info .fas.fa-question-circle {
    opacity: 0.8;
}




.page-header-row {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

.page-header__title {
    font-size: 24px;
    line-height: 1.25em;
    font-weight: bold;
}

.page-header__button {
    margin-left: auto;
}

.page-header__button .btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8e8ed;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.app-head-logo{
    height: 56px;
    width: auto;
    margin:0 auto;
    margin-bottom: 20px;
    display: block;
}

.drop-zone__note {
    font-size: 14px;
    line-height: 24px;
}

.drop-zone__note small{
    opacity: 0.85;
}

.order-confirm__modal-container {
    position: relative;
}

.order-confirm__modal-wbody__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    padding: 15px 20px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #e6e8ee;
    z-index: 1;
}

.order-confirm__modal-wbody__footer .policy-link {
    font-size: 14px;
    line-height: 24px;
    color: #1f6feb;
    text-decoration: underline;
    cursor: pointer;
    font-size: 15px;
    line-height: 24px;
}

.order-confirm__modal-wbody__footer.policy-link:hover {
    color: #1a5fd4;
}

.order-confirm__modal-wbody__footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    line-height: 24px;
}

.ui-dialog {
    overflow: hidden;
}

.is-popup .center-section {
    padding: 20px 0 0 0!important;
    margin-bottom: 10px!important;
}

.is-popup .modal-body .form-col{
    max-width: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.is-popup .modal-body .form-col:not(:last-child){
    margin-bottom: 5px;
}

.is-popup .modal-body .form-col .form-label{
    text-align: left;
}

.is-popup .modal-body .form-col+ .form-col {
    margin-top: 10px;
}

.is-popup .modal-body .form-col .form-label label{
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.is-popup .modal-footer {
    margin-top: 20px;
}

.is-popup .modal-footer .btn{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
    padding-bottom: 12px;
}

.is-popup .modal-footer a.text-link {
    margin-top: 10px;
}

.text-login-desc {
    font-size: 14px;
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.app_tcode-td {
    position: relative;
}

.app_tcode-td:before {
    content: "T";
    color: #1f1f1f;
    font-weight: bold;
    margin-right: 5px;
    font-size: 15px;
    line-height: 24px;
    opacity: 0.8;
    position: absolute;
    left: -24px;
    top: 32px;
    opacity: 0.8;
}


.page-top {
    font-size: 14px;
    text-align: right;
}

.page-top br {
    display: none;
}







/* ============================================
   ユーザー情報ドロップダウン（マテリアルデザイン）
   ============================================ */

/* ドロップダウンコンテナ */
.user-info-dropdown {
    position: relative;
    display: inline-block;
}

/* ドロップダウンボタン */
.user-info-dropdown__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 24px;
    padding: 8px 8px 8px 12px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    /* border: 1px solid #1f6feb; */
}

/* ホバー時のエレベーション */
.user-info-dropdown__btn:hover,
.user-info-dropdown__btn:active,
.user-info-dropdown__btn:focus {
    border: 1px solid #1f6feb;
    background-color: #f2f5fe;
}
/* 開いている状態 */
.user-info-dropdown__btn.is-open {
    background-color: #f2f5fe;
    border: 1px solid #1f6feb;
}

/* ボタン内のアイコン（ユーザー） */
.user-info-dropdown__btn-icon-user {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.user-info-dropdown__btn-icon-user svg {
    width: 24px;
    height: 24px;
}

/* ボタン内のテキスト */
.user-info-dropdown__btn-text {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: bold;
}

.user-info-dropdown__btn-text small {
    margin-left: 2px;
    font-size: 12px;
    opacity: 0.7;
    font-weight: normal;
    padding-left: 4px;
}

/* ボタン内の矢印アイコン */
.user-info-dropdown__btn-icon-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

.user-info-dropdown__btn-icon-arrow svg {
    width: 24px;
    height: 24px;
}

/* 開いている状態の矢印（180度回転） */
.user-info-dropdown__btn.is-open .user-info-dropdown__btn-icon-arrow {
    transform: rotate(180deg);
}

/* ドロップダウンコンテンツ */
.user-info-dropdown__content {
    border: 1px solid #e6e8ee;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-width: 240px;
    /* max-width: 320px; */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top right;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

/* 開いている状態のコンテンツ */
.user-info-dropdown__content.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* タイトル */
.user-info-dropdown__tit {
    padding: 16px 16px 12px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* 詳細情報エリア */
.user-info-dropdown__detail {
    padding: 12px 0;
}

/* 詳細項目 */
.user-info-dropdown__detail-item {
    padding: 8px 16px;
}

.user-info-dropdown__detail-item-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.54);
    margin-bottom: 2px;
    font-weight: 400;
}

.user-info-dropdown__detail-item-value {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 400;
}

.user-info-dropdown__detail-item-value small {
    font-size: 12px;
    padding-left: 4px;
}

/* 区切り線 */
.user-info-section__divider {
    margin: 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    height: 0;
}

/* アクションエリア */
.user-info-section__action {
    /* padding: 8px; */
    padding: 0;
    /* border-top: 1px solid rgba(0, 0, 0, 0.12); */
    overflow: hidden;
}

/* ログアウトボタン */
.btn-logout {
    width: 100%;
    padding: 12px 16px;
    background-color: #fff;
    /* border: 1px solid rgba(0, 0, 0, 0.12); */
    /* border-radius: 6px; */
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border: 0 !important;
}

.btn-logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-logout-icon svg {
    width: 18px;
    height: 18px;
}

.btn-logout:hover,
.btn-logout:active,
.btn-logout:focus {
    background-color: #f5f5f5;
}


.btn-outline {
    padding-top: 4px;
    padding-bottom: 4px;
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: 16px;
}

.btn-filter {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    gap: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

input[type="text"][name="app_compnm"],
input[type="text"][name="app_divnm"] {
    width: 100%;
}


.fm-subtitle {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding-left: 16px;
}

body.childPage table.tablelist tr.bg-color-lime {
    position: relative;
}

body.childPage table.tablelist tr.bg-color-lime th {
    position: relative;
    z-index: 1;
}

body.childPage table.tablelist tr.bg-color-lime th[colspan="2"] {
    width: 100% !important;
    max-width: 100% !important;
    display: table-cell;
}

body.childPage table.tablelist tr.bg-color-lime th[colspan="2"] .fm-subtitle {
    background-color: #22B14C;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
}