/* CSS変数の定義 */
/* 画面表示の優先順位（z-index）*/
:root {
    --z-loadingScreen: 9999;
    --z-modal: 1100;
}


/* エラーメッセージのスタイル */
.error-message {
    color: red;
}

/* ドロップダウンリスト 非活性時のスタイル */
option:disabled {
    color: light-dark(graytext, rgb(170, 170, 170));
    background-color: rgb(150, 150, 150);
}

/* 検索フォームのラベルのスタイル */
.form-search-label {
    display: inline-block;
    margin-bottom: 5px !important;
    width: 35% !important;
    font-size: larger;
}

/* 検索フォームの入力欄のスタイル1 */
.form-search-input1 {
    display: inline-block;
    width: 30% !important;
    height: 20px !important;
    font-size: 85% !important;
}

/* 検索フォームの入力欄のスタイル2 */
.form-search-input2 {
    display: inline-block;
    width: 28% !important;
    height: 20px !important;
    font-size: 85% !important;
}

/* 検索フォームの入力欄のスタイル3 */
.form-search-input3 {
    display: inline-block;
    width: 28% !important;
    height: 35px !important;
    font-size: 85% !important;
}

/* 検索フォーム全体のスタイル */
ul.search li {
    list-style: none;
    margin-left: 15px;

    label {
        margin-right: 10px;
        width: 200px;
        float: left;
    }
}

/* CSV取込機能フォーム全体のスタイル */
ul.csv li {
    list-style: none;

    label {
        margin-right: 10px;
        width: wrap;
        float: left;
    }
}

summary {
    font-size: 1.8rem;
    padding-bottom: 15px;
    cursor: pointer;
}

summary:hover {
    color: rgb(19, 115, 210);
}

/* details　表示時のスタイル */
details[open] {
    padding-bottom: 15px;
    margin-bottom: 70px;
    background-color: rgb(248, 248, 248);
}

details input {
    max-width: 25%;
}

details select {
    max-width: 24%;
}


/* ローディングアニメーションのスタイル */
.loadingScreen {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: var(--z-loading-animation);
    display: none;
}

.loadingScreen p {
    top: 55%;
    left: 46%;
    position: absolute;
    font-weight: bold;
    font-size: 1.5em;
}

.fa-solid.fa-spinner.fa-spin {
    top: 45%;
    left: 50%;
    position: absolute;
    font-size: 3em;
}

/* 非活性項目のスタイル */
input:disabled,
select:disabled {
    background-color: silver;
}

/* 右側のサイドバーのスタイル */
#right_sidebar {
    font-family: system-ui;
}


/* サイドバーaタグのスタイル */
#right_sidebar ul.sidebar-nav a {
    list-style-type: none !important;
    color: rgb(209, 207, 207);
}

/* サイドバーaタグホバー時のスタイル */
#sidebar ul.sidebar-nav li.page:hover {
    background-color: white;
    color: #111c;
}

#sidebar ul.sidebar-nav li.select {
    background-color: white;
    color: #111c;
}
#sidebar ul.sidebar-nav li.select a {
    color: #111c;
}

#right_sidebar ul.sidebar-nav>li.nav-section-heading {
    padding: 15px 18px 15px 1em;
    opacity: 1;
    text-align: center;
}

thead {
    background-color: #807e7e;
    color: white;

    th a {
        color: white;
    }
}

/* 画面下余白 */
.content {
    margin-bottom: 50px;
}

/* PDF表示用画面の影を削除 */
.reports.view.content {
    box-shadow: none;
}

/* 一覧画面レコード行 */
#content-list {
    cursor: pointer;

}

/* 一覧画面レコード偶数行 */
#content-list tr:nth-child(even),
#content-list-nopointer tr:nth-child(even) {
    background-color: #dcddde;
}

/* 不具合情報詳細画面 不具合情報明細欄のスタイル */
/* #defect-details th,td{
    text-align: center;
} */

/* 不具合詳細画面スタイル */
.defect-details th {
    width: 60%;
}

/* csv取り込み時エラーメッセージスタイル */
.csv.message.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

/* csv取り込み時警告メッセージスタイル */
.csv.message.warning {
    background: #fffabc;
    color: #8d7b00;
    border-color: #d3b800;
}

/* csv取り込み時警告メッセージスタイル((非取り込み) */
.csv.message.notImport {
    background: #fffabc;
    color: #8d7b00;
    border-color: #d3b800;
}

/* 以下はCSV取り込み時エラー、警告メッセージ共通スタイル */
/*チェックボックスを非表示にする*/
.csv.message input {
    display: none;
}

.csv.message label {
    font-size: 1.6rem;
    font-weight: unset;
    margin-bottom: 0px;
    cursor: pointer;
}

.csv.message label:hover {
    color: gray;
}

/*中身を非表示にしておく*/
.csv.message div {
    height: 0;
    overflow-y: hidden;
    opacity: 0;
}

/*クリックで中身を表示*/
.csv.message input:checked+label+div {
    margin-top: 20px;
    height: auto;
    opacity: 1;
}

/*アイコン*/
.csv.message label::before {
    content: '+';
    font-size: 2.0rem;
    padding-right: 8px;
}

/*クリックでアイコン入れ替え*/
.csv.message input:checked+label::before {
    content: "-";
    font-size: 2.0rem;
    padding-right: 8px;

}

/* 検索ボタンスタイル */
details button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

/* ボタンを非表示にし非活性化するスタイル*/
.disabled-button {
    pointer-events: none; /* クリックを無効にする */
    opacity: 0; /* 完全に透明にする */
    color: transparent; /* テキストを透明にする */
    cursor: default; /* カーソルをデフォルトにする */
}

.detail-form {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

/* 詳細表示画面のスタイル */
.view.content td,
.view.content th {
    font-size: 1.9rem;
    text-wrap: wrap;
}

/* 一覧画面の表のスタイル */
.table-responsive {
    line-height: 1;
    width: 100%;
}

.table-responsive td:first-child,
.table-responsive th:first-child {
    padding-left: 10px;
}

.defect.chkbox td input,
.defect.chkbox td label {
    cursor: pointer;
    line-height: 1;
    margin: 5px 5px;
}

/* 一定以上の長さのテキストを...で省略 */
td.ellipsis {
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 一定以上の長さのヘッダーを折り返し表示する*/
.text-wrap {
    white-space: nowrap;
    min-width: 220px;
}

.text-wrap a {
    word-break: normal;
    white-space: normal;
}

/* コンテナのスタイル */
.image-container {
    padding-bottom: 50px;
    display: flex;
    /* コンテナ内の要素（画像）を左詰め */
    justify-content: flex-start;
    /* 画像を横に並べる */
    align-items: center;
    flex-wrap: wrap;
    /* 必要に応じて折り返す */
    width: 100%;
    margin-left: auto;
    /* コンテナを中央に配置 */
    margin-right: auto;
    /* コンテナを中央に配置 */
}


/* 要素（画像）間の間隔を設定*/
.image-container>* {
    margin-top: 50px;
    /* 2段になった際の上の画像との間隔を設定*/
    margin-right: 100px;
    /* 各要素の横間隔を設定 */
}

/* 一覧画面の画像のリサイズ */
.index-resized-image {
    width: auto;
    height: auto;
}

/* 詳細表示画面の画像のリサイズ */
.view-resized-image {
    width: 300px;
    height: auto;
}

/* 詳細表示画面の動画のリサイズ */
.view-resized-movie {
    width: 300px;
    height: auto;
}

/* 画像が存在しない場合の代替表示イメージ*/
.no-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    /* イメージの大きさは定数で指定*/
    height: 200px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: bold;
    /* フォントを太字に変更*/
    text-align: center;
    border: 2px solid black;
    /* 黒い枠を追加 */
}

/* 画像を表示するモーダルウィンドウの全体のスタイル*/
.modal {
    display: none;/*初期状態では非表示*/
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    /* 背景を半透明の黒に設定 */
}

/* モーダルコンテンツのスタイル */

.modal-content {
    position: absolute;
    /*画面中央に配置*/
    top: 50%;
    /*画面中央に配置*/
    left: 50%;
    /*中央に配置するための変換*/
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    /*モーダルの幅*/
    width: 80%;
    /*モーダルの最大幅*/
    max-width: 600px;
    /*モーダルの最大高さを画面の90%に設定*/
    max-height: 90vh;
    /*コンテンツがモーダルを超える場合にスクロールを有効にする*/
    overflow: auto;
}

/* モーダルウィンドウの閉じるボタンのスタイル */
.close {
    position: absolute;
    right: 0; /* 右端に配置 */
    top: 0; /* 上端に配置 */
    color: #aaa;
    font-size: 20px;
    margin-right: 10px;
    font-weight: bold;
    cursor: pointer; /* カーソルをポインタに変更 */
}

/* 閉じるボタンへのホバーとフォーカス時のスタイル*/
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*モーダルタイトルのスタイル*/
#modalTitle {
    text-align: left;
    /* 左詰め */
    margin: 0 auto;
    /* 中央に配置 */
    font-family: system-ui;
    /* フォントファミリーを変更 */
    font-size: 20px;
    /* フォントサイズを変更 */
    font-weight: bold;
    /* フォントを太字に変更*/
    color: #333;
    /* フォントの色を変更 */
    width: fit-content;
    /* コンテンツに合わせて幅を調整 */
}

/* 一覧画面のヘッダーを固定するスタイル*/
/* header-rock-1：不具合情報レポート・機種マスタ・インクレイアウトマスタ・出荷済みプリンタマスタ */
.header-rock-1 {
    th {
    white-space: nowrap;
    height: 60px;
    min-width: 200px;
    max-width: 200px;
    }
    th a {
        word-break: normal; /* または break-word */
        white-space: normal;
    }
 
    thead, tbody {
        display: block;
    }
    tbody {
        height: 500px; /* スクロール可能な高さを設定 */
    }
    td {
        min-width: 200px; /* 各セルの幅を設定 */
        max-width: 200px; /* 各セルの幅を設定 */
        word-break: normal; /* または break-word */
        white-space: normal;
    }
}

/* 一覧画面のヘッダーを固定するスタイル*/
/* header-rock-2：ユーザマスタ・販売会社マスタ*/
.header-rock-2 {
    th {
    white-space: nowrap;
    height: 60px;
    min-width: 300px;
    max-width: 300px;
    }
    th a {
        word-break: normal; /* または break-word */
        white-space: normal;
    }
 
    thead, tbody {
        display: block;
    }
    tbody {
        height: 500px; /* スクロール可能な高さを設定 */
    }
    td {
        min-width: 300px; /* 各セルの幅を設定 */
        max-width: 300px; /* 各セルの幅を設定 */
        word-break: normal; /* または break-word */
        white-space: normal;
    }

}

/* 一覧画面のヘッダーを固定するスタイル*/
/* header-rock-3：インク種マスタ・ */
.header-rock-3 {
    th {
    white-space: nowrap;
    height: 60px;
    min-width: 700px;
    max-width: 700px;
    }
    th a {
        word-break: normal; /* または break-word */
        white-space: normal;
    }
 
    thead, tbody {
        display: block;
    }
    tbody {
        height: 500px; /* スクロール可能な高さを設定 */
    }
    td {
        min-width: 700px; /* 各セルの幅を設定 */
        max-width: 700px; /* 各セルの幅を設定 */
        word-break: normal; /* または break-word */
        white-space: normal;
    }
}

/* 一覧画面のヘッダーを固定するスタイル*/
/* header-rock-4：インクセットマスタ・インクカラーマスタ */
.header-rock-4 {
    th {
    white-space: nowrap;
    height: 60px;
    max-width: 990px;
    min-width: 990px;
    }
    th a {
        word-break: normal; /* または break-word */
        white-space: normal;
    }
    
    thead, tbody {
        max-width: 2000px;
        min-width: 2000px;
        display: block;
    }
    tbody {
        height: 500px; /* スクロール可能な高さを設定 */
    }
    td {
        max-width: 990px;
        min-width: 990px;
        word-break: normal; /* または break-word */
        white-space: normal;
    }
}

.header-sticky-wrapper {
    max-width: 100%;
    max-height: calc(100dvh - 450px);
    overflow: scroll;

    td:first-child,
    th:first-child {
        padding-left: 10px;
    }

}

/*操作列の横幅を指定*/
.fixed-width {
    width: 2000px;
}

.header-sticky-1 {
    border-collapse: collapse;
    
    thead th {
        background-color: #807e7e;
    };

    
    tbody tr:nth-child(even) td:nth-child(1),
    tbody tr:nth-child(even) td:nth-child(2) {
        background-color: #dcddde;
    }
    tbody tr:nth-child(odd) td:nth-child(1),
    tbody tr:nth-child(odd) td:nth-child(2) {
        background-color: white;
    }

    thead tr th:nth-child(1),
    tbody tr th:nth-child(1),
    thead tr td:nth-child(1),
    tbody tr td:nth-child(1),
    thead tr th:nth-child(2),
    tbody tr th:nth-child(2),
    thead tr td:nth-child(2),
    tbody tr td:nth-child(2) {
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    }
    thead tr th:nth-child(1),
    tbody tr th:nth-child(1),
    thead tr td:nth-child(1),
    tbody tr td:nth-child(1) {
    left: 0;
    min-width: 184px;
    }
    
    thead tr th:nth-child(2),
    tbody tr th:nth-child(2),
    thead tr td:nth-child(2),
    tbody tr td:nth-child(2) {
    left: 184px;
    }
    thead tr:nth-child(1) th,
    thead tr:nth-child(2) th {
    position: sticky;
    position: -webkit-sticky;
    z-index: 2;
    }
    thead tr:nth-child(1) th {
    top: 0;
    }
    thead tr:nth-child(2) th {
    top: 2rem;
    }
    thead tr th:nth-child(1),
    thead tr th:nth-child(2) {
    z-index: 3;
    }
      
}

/* table thead tr th:nth-child(1),
table tbody tr th:nth-child(1),
table thead tr td:nth-child(1),
table tbody tr td:nth-child(1),
table thead tr th:nth-child(2),
table tbody tr th:nth-child(2),
table thead tr td:nth-child(2),
table tbody tr td:nth-child(2) {
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
}

table thead tr th:nth-child(1),
table tbody tr th:nth-child(1),
table thead tr td:nth-child(1),
table tbody tr td:nth-child(1) {
  left: 0;
}
table thead tr th:nth-child(2),
table tbody tr th:nth-child(2),
table thead tr td:nth-child(2),
table tbody tr td:nth-child(2) {
  left: 6rem;
} */


.header-sticky-5 {
    border-collapse: collapse;
    
    thead th {
        background-color: #807e7e;
    };

    
    tbody tr:nth-child(even) td:nth-child(1),
    tbody tr:nth-child(even) td:nth-child(2),
    tbody tr:nth-child(even) td:nth-child(3),
    tbody tr:nth-child(even) td:nth-child(4),
    tbody tr:nth-child(even) td:nth-child(5) {
        background-color: #dcddde;
    }
    tbody tr:nth-child(odd) td:nth-child(1),
    tbody tr:nth-child(odd) td:nth-child(2),
    tbody tr:nth-child(odd) td:nth-child(3),
    tbody tr:nth-child(odd) td:nth-child(4),
    tbody tr:nth-child(odd) td:nth-child(5) {
        background-color: white;
    }

    thead tr th:nth-child(1),
    tbody tr th:nth-child(1),
    thead tr td:nth-child(1),
    tbody tr td:nth-child(1),
    thead tr th:nth-child(2),
    tbody tr th:nth-child(2),
    thead tr td:nth-child(2),
    tbody tr td:nth-child(2),
    thead tr th:nth-child(3),
    tbody tr th:nth-child(3),
    thead tr td:nth-child(3),
    tbody tr td:nth-child(3),
    thead tr th:nth-child(4),
    tbody tr th:nth-child(4),
    thead tr td:nth-child(4),
    tbody tr td:nth-child(4),
    thead tr th:nth-child(5),
    tbody tr th:nth-child(5),
    thead tr td:nth-child(5),
    tbody tr td:nth-child(5) {
    position: sticky;
    position: -webkit-sticky;
    z-index: 1;
    }
    thead tr th:nth-child(1),
    tbody tr th:nth-child(1),
    thead tr td:nth-child(1),
    tbody tr td:nth-child(1) {
    left: 0;
    min-width: 200px;
    }
    thead tr th:nth-child(2),
    tbody tr th:nth-child(2),
    thead tr td:nth-child(2),
    tbody tr td:nth-child(2) {
    left: 200px;
    min-width: 300px;
    }
    thead tr th:nth-child(3),
    tbody tr th:nth-child(3),
    thead tr td:nth-child(3),
    tbody tr td:nth-child(3) {
    left: 500px;
    min-width: 200px;
    }
    thead tr th:nth-child(4),
    tbody tr th:nth-child(4),
    thead tr td:nth-child(4),
    tbody tr td:nth-child(4) {
    left: 700px;
    min-width: 200px;
    }
    thead tr th:nth-child(5),
    tbody tr th:nth-child(5),
    thead tr td:nth-child(5),
    tbody tr td:nth-child(5) {
    left: 900px;
    min-width: 200px;
    }
    thead tr:nth-child(1) th,
    thead tr:nth-child(2) th,
    thead tr:nth-child(3) th,
    thead tr:nth-child(4) th,
    thead tr:nth-child(5) th {
    position: sticky;
    position: -webkit-sticky;
    z-index: 2;
    }
    thead tr:nth-child(1) th {
    top: 0;
    }
    thead tr:nth-child(2) th {
    top: 2rem;
    }
    thead tr:nth-child(3) th {
        top: 4rem;
   }
    thead tr:nth-child(4) th {
        top: 6rem;
    }
    thead tr:nth-child(5) th {
        top: 8rem;
    }
    thead tr th:nth-child(1),
    thead tr th:nth-child(2),
    thead tr th:nth-child(3),
    thead tr th:nth-child(4),
    thead tr th:nth-child(5) {
    z-index: 3;
    }
      
}

/*キープサンプル検査結果公開設定画面
　更新ボタンの配置先のスタイル
*/
.update-button-container {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

/*キープサンプル検査結果公開設定画面
　公開ステータス一括設定ボタンの配置先のスタイル
*/
.status-button-container {
    width: 100%;
    text-align: left;
}

.update-button-container button,
.status-button-container button {
    display: inline-block;
}

/*キープサンプル検査結果公開設定画面
　インクロット番号ラベルと「+」ボタンを横並びに配置するスタイル
*/
.form-inline-group {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.form-inline-group h4 {
    margin: 0;
}

.form-inline-input {
    flex: 1;
    min-width: 200px;
}

/*キープサンプル検査結果公開設定画面
　ラジオボタンを横並びに配置するスタイル
*/
.radio-inline-group {
    display: flex;
    align-items: center; /* 垂直中央揃え */
    gap: 30px; /* ラベル間の余白（margin-rightの代わり） */
}


.radio-inline-group label {
    margin-bottom: 0;
}

.content {
    overflow: hidden;
    
    /* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */
  }
  
.content_inner {
padding: 24px 48px;
}

.js-content-for-Keep-sample-settings {
    padding-top: 10px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.content-inner-for-designated-dealer-area {
padding: 10px 10px;
}

.button-content {
    padding: 30px 48px;
}


.flex-container {
  display: flex;
  justify-content: center;
  gap: 5px;
}


.js-content {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.js-details[open] {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

#sidebar-logo {
    max-width: 30%;
}

.sidebar-header div {
    text-align: center;
}