html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 40px;
}

/* --- 以下、オリジナル --- */

/* アクティブなナビバーの背景色 */
.navbar-nav .nav-item.active {
    background-color: lightgray;
}

/* Edgeでパスワード表示ボタンが表示されるのを抑止 */
::-ms-reveal {
    display: none;
}

/* バリデーションエラーのフィールドの背景色 */
.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

/* readonly 属性の input 要素を disabled と同じように見せる */
form input[readonly] {
    background-color: #e9ecef; /* Bootstrap の disabled の背景色 */
    opacity: 1;
    box-shadow: 0 0 0 1000px #e9ecef inset !important;
}

/* readonly 属性の textarea 要素を disabled と同じように見せる（スクロールは可能） */
form textarea[readonly] {
    background-color: #e9ecef; /* Bootstrap の disabled の背景色 */
    opacity: 1;
}

/* Bootstrap のデフォルトスタイルに合わせるためにフォーカス時のスタイルも調整 */
form input[readonly]:focus,
form textarea[readonly]:focus {
    background-color: #e9ecef; /* フォーカス時の背景色を同じにする */
    box-shadow: none; /* フォーカス時の影を無効にする */
    border: 1px solid #e9ecef; /* フォーカス時の枠線を無効にする */
}

/* ===== フォーカスなし ===== */
.no-focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ===== 処理中  ===== */
#loading {
    background: rgba(0, 0, 0, .5);
    z-index: 10000;
}

/* ===== ログイン画面 ===== */
.login-div {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 0 4px gray;
    padding: 32px 16px;
    width: 100%;
    max-width: 344px;
    border-radius: 8px;
}

/* ===== マスター画面 ===== */
.master-div {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    max-width: 700px;
    border-radius: 8px;
}

.master-div-m {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    max-width: 900px;
    border-radius: 8px;
}

.master-div-l {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    max-width: 1200px;
    border-radius: 8px;
}

.master-div-xl {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    max-width: 1400px;
    border-radius: 8px;
}

.master-div-xxl {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    max-width: 96%;
    border-radius: 8px;
}

.master-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

/* ===== 確定データのリセット画面 ===== */
.reset-data-div {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    width: 450px;
    border-radius: 8px;
}

.reset-data-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.reset-data-footer {
    padding: 1rem;
}

.reset-data-body .fixed-width {
    width: 80px;
    text-align: left;
}

.reset-data-body .fixed-max-width {
    max-width: 300px;
}


/* ===== 従業員一覧画面 ===== */
.workerList {
    max-width: 1280px;
    margin: auto;
}

.month {
    width: 8rem;
}

.tani {
    width: 8rem;
}

.month .wj-btn,
.tani .wj-btn {
    height: 36px !important;
}


/* ===== システム設定画面 ===== */
.config-div {
    left: 50%;
    background: #fff;
    box-shadow: 0 0 3px gray;
    padding: 32px 16px;
    max-width: 700px;
    border-radius: 8px;
}

/* ===== 勤務表画面 ===== */
/* ボタンのボーダーをform-controlと合わせる */
.btn-border {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/* inputにフォーカスが当たったときのボーダーの色 */
.input-border:focus {
    border-color: #dee2e6 !important;
}

/* ヘッダ行のボタン */
.header-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #444; /* 通常時の色 */
    border-radius: 3px;
    margin-top: -1px;
}

/* ヘッダ行のボタン（hover 時に色を変える） */
.header-btn:hover {
    background-color: #565e64; /* Bootstrap primary */
    color: #fff; /* アイコンを白に */
}

/* 再計算ボタン（電卓） */
.wj-rowheaders .wj-cell .bi-calculator-fill {
    opacity: .8;
    transform: scale(.90);
    cursor: pointer;
}

.wj-rowheaders .wj-cell:hover .bi-calculator-fill {
    opacity: 1;
    color: #6c757d;
    transform: scale(1.5);
    transition: all 400ms;
}