body {
}

.label-bg {
    background-color: lightblue;
    padding: 4px 8px; /* 余白つけると見栄えよし */
    border-radius: 4px; /* 角丸もつけてもGood */
}

.title-bg {
    background-color: #00ACC1;
    border: 1px solid #80BFCF;
    color: white;
    transition: background-color 0.2s ease;
}

.thick-red-outline .mud-input-outlined-border {
    background-color: #ffe5e5 !important; /* 薄い赤 */
    color: #000 !important;
}

    /* フォーカス時も同様に太く赤くする */
.thick-red-outline .mud-input-outlined.mud-input-focused {
    background-color: #ffe5e5 !important; /* 薄い赤 */
    color: #000 !important;
}


.my-select .mud-input-root {
    background-color: #ffe5e5 !important; /* 薄い赤背景 */
    color: #000 !important; /* 文字色は黒 */
}

.my-select input {
    background-color: transparent !important;
    color: #000 !important;
}

/*これを更新するとなんか色変わる*/
.my-select .mud-select-item {
    background-color: white !important; /* ドロップダウンリストの背景 */
    color: black !important; /* ドロップダウン内の文字色 */
}

.custom-textfield .mud-input-root {
    background-color: #ffe5e5 !important; /* 背景色：薄い青など */
    color: #000 !important; /* 入力中テキストの色 */
}

.custom-textfield input {
    background-color: transparent !important; /* 重ね防止 */
    color: #000 !important; /* プレースホルダーや入力文字 */
}

.check-textfield input:disabled {
    color: black !important;
    -webkit-text-fill-color: black !important;
    opacity: 1 !important;
    border: none !important;
    box-shadow: none !important;
}

.disabled-black input.MudInput-input:disabled {
    color: black !important;
    -webkit-text-fill-color: black !important;
    opacity: 1 !important;
}

/* 選択中以外のタブにだけホバー色を適用 */
.mud-tab.title-bg:not(.mud-tab-active):hover {
    background-color: #D84315; /* ← ホバー時の色 */
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.mud-tab.title-bg.mud-tab-active {
    color: black;
}

.drawer-header-align {
    height: 64px;
    display: flex;
    align-items: center;
}

.column-bg {
    background-color: #FFE3DC !important;
    color: #4D2C27 !important;
    padding: 0.25rem !important;
}


.custom-label label {
    font-size: 1.5rem;
}

/* フッター用 */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    flex: 1;
}

footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
    color: #666;
}
/*フッターオプションここまで*/

.hide-dropdown-icon-when-disabled .mud-select-input-disabled .mud-select-arrow {
    display: none !important;
}

[pickerclass="month-picker"] .mud-picker-toolbar {
    display: none;
}

.month-picker .mud-picker-toolbar {
    display: none;
}