.form-control[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-control .form-select .form-control-sm .w-50 .text-center .form-select-sm .w-75,
#xValueBody,
#yValueBody {
    box-shadow: none !important;
}

.form-control:focus {
    box-shadow: none !important;
}

#search-box:focus,
#graphTitle:focus,
#layerListDropdown:focus,
.form-control:focus,
#xAxisLabel,
#geometrySelect {
    border-color: #0D1B36;
    box-shadow: none;
}


/* モーダル本体のスクロールを許可 */
.modal-body {
    max-height: 80vh;
    /* 高さを制限してスクロール可能に */
    overflow-y: auto;
}

/* テーブルの幅を自動調整し、一定の幅を維持。スクロール可能に */
#dataTable {
    overflow-x: auto;
    /* 横スクロールを許可 */
    display: block;
    /* スクロール可能にする */
    white-space: nowrap;
    /* カラムを折り返さず横に並べる */
    /*padding-bottom: 10px;*/
    /* スクロールバーと余白が重ならないように */
}

#tableHeader th {
    width: 84px;
    min-width: 84px;
    text-align: center;
    border: none;
}

#attributeTable th,
#attributeTable td {
    color: #141415;
    background-color: #EBEEF3;
}

#tableBody td {
    width: 84px;
    min-width: 84px;
    text-align: center;
}

#graphCanvas {
    width: 100% !important;
    display: block;
}

/* 記録用 */
/* 検索結果のリストのスタイル */
/* #search-results {
    list-style-type: none; 
    padding: 5px;
    border: 1px solid #ccc; 
    border-radius: 5px; 
    background-color: white; 
    position: absolute; 
    z-index: 1000; 
} */

/* 各検索結果のスタイル */
/* #search-results li {
    border-bottom: 1px solid #eee; リストアイテムの間に境界線
    cursor: pointer;
    display: block;
} */

/* 最後のリストアイテムの下の線を消す */
/* #search-results li:last-child {
    border-bottom: none;
} */

/* マウスをホバーしたときの背景色 */
/* #search-results li:hover {
    background-color: #f0f0f0;
} */

.drag-handle:active {
    cursor: grabbing;
}

.table-container {
    display: flex;
    width: 100%;
    max-width: 600px;
}

.draggable-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 77px;
    min-width: 77px;
    position: relative;
    /* 相対配置 */
}

/* グリップのデザインを変更 */
.drag-handle {
    cursor: grab;
    font-size: 14px;
    padding: 5px;
    opacity: 0;
    /* 目立たなくする */
    position: absolute;
    top: -10px;
    /* セルの境界線に重ねる */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    /* 透明度が変わる時のアニメーション効果 */
}

.drag-handle:hover {
    opacity: 1;
    /* ホバー時の透明度 */
}

.header-container {
    display: flex;
    flex-flow: column;
    min-width: 77px;
    font-weight: bold;
}

.header-item {
    flex: 1;
    text-align: center;
    margin: 8px 0px 8px;
}

.margin-grip {
    margin-bottom: 5px;
}

.SI-model-h6-container {
    display: flex;
}

.x-axis-container {
    display: flex;
    justify-content: center;
    /* 左右中央に配置 */
    width: 100%;
    /* 必要に応じて幅を調整 */
}

/* レイヤー選択関連 */
#layerListDropdownButton {
    width: 100%;
    text-align: left;
}

#layerListDropdown {
    width: 100%;
}

#attributeTable td {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 150px;
    /* 最大幅 */
    white-space: normal;
    /* 折り返しを有効化 */
}

/* スクロールバー全体のスタイル */
#attributeTableContainer::-webkit-scrollbar {
    width: 5px;
    /* スクロールバーの幅を小さくする */
    height: 5px;
    /* スクロールバーの幅を小さくする */
    background: transparent;
    /* 背景を透明にして目立たなくする */
}

/* スクロールバーのサム（つまみ部分）のスタイル */
#attributeTableContainer::-webkit-scrollbar-thumb {
    background-color: #888;
    /* サムの色を薄くする */
    border-radius: 10px;
    /* 角を丸くしてソフトに見せる */
}

/* サムをホバーしたときのスタイル */
#attributeTableContainer::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* ホバー時に少し濃くする */
}

.close-SI-model:hover {
    background-color: #DCDFE5;
    border-radius: 4px;
}