/* ローディング */
#loading-overlay {
    z-index: 1080;
    background-color: rgba(0, 0, 0, 0.3);
}

/* 幅固定ユーティリティ */
.w-35px {
    width: 35px;
}

.w-50px {
    width: 50px;
}

.w-75px {
    width: 75px;
}

.w-80px {
    width: 80px;
}

.w-100px {
    width: 100px;
}

.w-110px {
    width: 110px;
}

.w-120px {
    width: 120px;
}

.w-130px {
    width: 130px;
}

.w-140px {
    width: 140px;
}

.w-150px {
    width: 150px;
}

.w-160px {
    width: 160px;
}

.w-170px {
    width: 170px;
}

.w-180px {
    width: 180px;
}

.w-190px {
    width: 190px;
}

.w-200px {
    width: 200px;
}

.w-250px {
    width: 250px;
}

.w-260px {
    width: 260px;
}

.w-270px {
    width: 270px;
}

.w-280px {
    width: 280px;
}

.w-290px {
    width: 290px;
}

.w-300px {
    width: 300px;
}

.w-310px {
    width: 310px;
}

.w-320px {
    width: 320px;
}

.w-330px {
    width: 330px;
}

.w-340px {
    width: 340px;
}

.w-350px {
    width: 350px;
}

.w-400px {
    width: 400px;
}

.w-500px {
    width: 500px;
}

/* タブコントロールのカスタマイズ */
.nav-underline .nav-item .nav-link {
    color: var(--bs-secondary);
}

    .nav-underline .nav-item .nav-link.active {
        color: var(--bs-primary);
    }

/* パンくずリストのカスタマイズ */
.breadcrumb-item a {
    color: var(--bs-body-color);
    text-decoration: none;
}

/* 間隔広めのテーブル */
.table-lg td, .table-lg th {
    padding: 1rem 1.5rem;
}

/* タイムライン */
.timeline {
    --tl-color: var(--bs-primary);
    position: relative;
    padding-left: 2rem;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 0.75rem;
        top: .25rem;
        bottom: .25rem;
        width: 2px;
        background: var(--tl-color);
    }

.timeline-item {
    position: relative;
    margin: 1rem 0 1.5rem;
}

    .timeline-item::before {
        content: "";
        position: absolute;
        left: -1.2rem;
        top: .2rem;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        border: 2px solid var(--tl-color);
        background: var(--bs-body-bg);
        border-radius: 50%;
        box-sizing: border-box;
    }

/* 枠のみのアラート */
.alert-outline {
    --bs-alert-bg: transparent;
    --bs-alert-color: var(--bs-alert-border-color);
}

/* 色ごとに枠線を指定 */
.alert-outline-primary {
    --bs-alert-border-color: var(--bs-primary);
}

.alert-outline-success {
    --bs-alert-border-color: var(--bs-success);
}

.alert-outline-danger {
    --bs-alert-border-color: var(--bs-danger);
}

.alert-outline-secondary {
    --bs-alert-border-color: var(--bs-secondary);
}

/* フォームラベルのカスタマイズ */
.form-label {
    font-weight: bold;
}

/* チェックボックスのカスタマイズ */
.form-check .form-check-input, .form-check .form-check-label {
    cursor: pointer;
}

/* select2のカスタマイズ */
.select2-container--open .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.select2-container--open .select2-dropdown {
    border-color: var(--bs-primary) !important;
}

.select2-container--open .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-primary) !important;
}

.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color, rgba(var(--bs-primary-rgb), .25)) !important;
    outline: 0;
}

.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5 .select2-selection:focus-within {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color, rgba(var(--bs-primary-rgb), .25)) !important;
    outline: 0;
}

.select2-container--bootstrap-5 .select2-search__field:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color, rgba(var(--bs-primary-rgb), .25)) !important;
    outline: 0;
}

/* 
    テーブルの背景色を設定
    NOTE: DataTablesを使うと、htmlの構造が変わりtheadに背景色を指定しても動作しないので、このクラスを使う
*/
.table-colored thead th, .table-colored tbody th {
    background-color: var(--bs-gray-100) !important;
}

/* テーブルの行が選択されたとき */
table tr.selected-row > * {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.table-vmiddle {
    vertical-align: middle !important;
}

/* DataTablesのカスタマイズ */
.dt-container .dt-info {
    font-size: 1.05rem;
    font-weight: 600;
}

.dt-container .dt-top {
    margin-bottom: 0.75rem; /* 好みで調整 */
}

/* フォントサイズのカスタマイズ */
.fs-7 {
    font-size: 0.9rem !important;
}

.fs-8 {
    font-size: 0.7rem !important;
}

/* 警告カラーのチェックボックス */
.form-check-input.warning-checkbox:checked {
    background-color: var(--bs-yellow);
    border-color: var(--bs-yellow);
}

.form-check label {
    cursor: pointer;
}

/* アウトラインのバッチ */
.badge-outline-info {
    color: var(--bs-info);
    background-color: transparent;
    border: 1px solid var(--bs-info);
}

/* 特大モーダル */
.modal-xxl {
    max-width: 1400px;
}

@media (min-width: 1200px) {
    .modal-xxl {
        max-width: 1400px;
    }
}

/* 改行をそのまま表示する */
.text-pre-wrap {
        white-space: pre-wrap;
}

/* 幅最大値ユーティリティ */
.mw-50px {
    max-width: 50px;
}

.mw-60px {
    max-width: 60px;
}

.mw-70px {
    max-width: 70px;
}

.mw-80px {
    max-width: 80px;
}

.mw-90px {
    max-width: 90px;
}

.mw-100px {
    max-width: 100px;
}

.mw-110px {
    max-width: 110px;
}

.mw-120px {
    max-width: 120px;
}

.mw-130px {
    max-width: 130px;
}

.mw-140px {
    max-width: 140px;
}

.mw-150px {
    max-width: 150px;
}

.mw-160px {
    max-width: 160px;
}

.mw-170px {
    max-width: 170px;
}

.mw-180px {
    max-width: 180px;
}

.mw-190px {
    max-width: 190px;
}

.mw-200px {
    max-width: 200px;
}

.mw-210px {
    max-width: 210px;
}

.mw-220px {
    max-width: 220px;
}

.mw-230px {
    max-width: 230px;
}

.mw-240px {
    max-width: 240px;
}

.mw-250px {
    max-width: 250px;
}

.mw-260px {
    max-width: 260px;
}

.mw-270px {
    max-width: 270px;
}

.mw-280px {
    max-width: 280px;
}

.mw-290px {
    max-width: 290px;
}

.mw-300px {
    max-width: 300px;
}

.mw-310px {
    max-width: 310px;
}

.mw-320px {
    max-width: 320px;
}

.mw-330px {
    max-width: 330px;
}

.mw-340px {
    max-width: 340px;
}

.mw-350px {
    max-width: 350px;
}

.mw-360px {
    max-width: 360px;
}

.mw-370px {
    max-width: 370px;
}

.mw-380px {
    max-width: 380px;
}

.mw-390px {
    max-width: 390px;
}

.mw-400px {
    max-width: 400px;
}

.mw-410px {
    max-width: 410px;
}

.mw-420px {
    max-width: 420px;
}

.mw-430px {
    max-width: 430px;
}

.mw-440px {
    max-width: 440px;
}

.mw-450px {
    max-width: 450px;
}

.mw-460px {
    max-width: 460px;
}

.mw-470px {
    max-width: 470px;
}

.mw-480px {
    max-width: 480px;
}

.mw-490px {
    max-width: 490px;
}

.mw-500px {
    max-width: 500px;
}

/* 任意機能ボタン */
.custom-button {
    display: inline-block;
    padding: 0.2rem 1.2rem;
    border-radius: 50rem;
    text-decoration: none;
    background-color: var(--custom-button-bg);
    color: var(--custom-button-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    min-width: 160px;
    text-align: center;
}

    .custom-button:hover,
    .custom-button:focus {
        background-color: var(--custom-button-hover-bg);
        color: var(--custom-button-hover-text);
        text-decoration: none;
    }

/* 画面幅が768px以上の場合、width を auto に設定する */
@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

/* 無効化されたボタンのカーソルをnot-allowedにする */
.btn:disabled {
    cursor: not-allowed;
    pointer-events: auto;
}