.gray {color:#888888;}
.red {color:red;}
.black {color:000;}
/*align*/
.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
/* main */
body,html {margin:0px; padding:0px; width:100%;position:relative;height:100%;}
th {
	text-align:center;
}
h3 {
    font-size: 20px;
    margin: 0; /* 上下の余白をなくす */
    line-height: 50px; /* ヘッダーの高さと同じにする */
    text-align: center; /* 中央揃え */
}
.alart {
	color:red;
	font-size:11px;
}
#header {
    width: 100%;
        background-color: #cccccc;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
}
#container {
    padding: 20px;
    width: 100%;
    box-sizing: border-box; /* パディングとボーダーを含む */
min-height:800px;
min-width:1900px;
}
#logout-button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
    #logout-button:hover {
        background-color: #45a049;
    }
table {
        width: 100%;
        margin: 0 auto;
        border-collapse: collapse;
    }
    td {
        padding: 10px;
        vertical-align: middle;
    }
    label {
        font-weight: 500;
    }
    input[type="text"], input[type="password"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
margin-bottom:5px;
    }
    .c-form-submit-button {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
    .c-form-submit-button:hover {
        background-color: #45a049;
    }
.title1 {
	width:100%;
	height:40px;
	display:block;
	text-align:center;
	background-color:orange;
color:white;
line-height:40px;
}
  .menu {
        display: inline-block;
        padding: 10px 20px;
        margin: 5px;
        border: 2px solid orange;
        border-radius: 12px;
        background-color: #f9f9f9;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    .menu:hover {
        background-color: #e0e0e0;
    }
  .menu a {
        text-decoration: none;
        color: inherit;
        display: block;
    }
.smallinfo {
	font-size:11px;
}

.pan a {
    text-decoration: none;
    color: #4CAF50;
}
.pan a::after {
    content: '->';
    margin-left: 5px;
}
.pan a:last-child::after {
    content: '';
}
.email-change-popup,
.password-change-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000; /* ポップアップの表示を優先するために値を増やす */
  display: none;
  /* 以下はポップアップのスタイルを適切に設定してください */
}
.popup-form {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popup-trigger {
  margin-top: 10px;
}

.popup-trigger:hover {
  cursor: pointer;
  text-decoration: underline;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.overlay-active {
  overflow: hidden;
}

.overlay-active .overlay {
  display: block;
}

.userinfotable {
    width: 100%;
    max-width: 860px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.userinfotable td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}
.userinfotable th {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.userinfotable label {
    font-weight: bold;
}

.userinfotable .black {
    color: #333;
}

.userinfotable button {
    padding: 8px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.userinfotable button:hover {
    background-color: #45a049;
}

.compinfotable {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.compinfotable th, .compinfotable td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.compinfotable .action {
    width: 150px; /* 操作列の幅を固定 */
    text-align: center; /* 中央揃え */
}

.compinfotable .editbutton, .compinfotable .savebutton {
    width: 100px; /* ボタンの幅を広く */
    padding: 8px 20px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.compinfotable .editbutton {
    background-color: #4CAF50;
}

.compinfotable .editbutton:hover {
    background-color: #45a049;
}

.compinfotable .savebutton {
    background-color: red;
}

.compinfotable .savebutton:hover {
    background-color: darkred;
}

.compinfotable .compinfo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}

.compinfotable th {
	text-align:center;
}

.c-form-select {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
    margin: 20px 0;
height:35px;
}

.c-form-select select {
    display: inline-block;
    width: 100%;
    padding: 6px 15px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.c-form-select select:focus {
    border-color: black;
    outline: 0;
}

.c-form-select::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 10px;
    pointer-events: none;
    transform: translateY(-50%);
    color: #495057;
}
   .list {
            width: 900px;
            border-collapse: collapse;
        }
        .list th, .list td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .list th {
            background-color: #f2f2f2;
text-align:center;
        }
        .c-form-submit-buttona {
            padding: 8px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }
        .c-form-submit-buttona:hover {
            background-color: #45a049;
        }
 body, html {
scroll-behavior: smooth;
            position: relative;
        }
        .popup {
            display: none;
            position: fixed;
            background-color: #ffffcc;
            border: 1px solid orange;
            padding: 10px;
            border-radius: 5px;
            text-align: left;
            z-index: 1000;
        }
        .hoverable {
            cursor: pointer;
        }
.small_title {
	width:100%;
	border-bottom:1px solid gray;
	height:30px;
margin-bottom:10px;
margin-top:10px;
}
       .small_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .small_title a {
            margin-left: auto;
        }
   .small_menu {
            display: inline-block;
            margin-right: 5px;
            padding: 5px 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: background-color 0.3s, border-color 0.3s;
        }
        .small_menu a {
            text-decoration: none;
            color: #333;
        }
        .small_menu:hover {
            background-color: #e0e0e0;
            border-color: #999;
        }
#footer {
	width:100%;
	text-align:center;
}
   .search-form {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .search-input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 200px; /* 幅を200pxに設定 */
            margin-right: 10px;
            box-sizing: border-box; /* 幅にパディングとボーダーを含める */
        }
        .search-button {
            padding: 10px 15px;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
        .search-button:hover {
            background-color: #0056b3;
        }

/* CSSを追加してdate inputをスタイリング */
input[type="date"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #f9f9f9;
margin-bottom:5px;
}

input[type="date"]:focus {
    border-color: #007BFF;
    background-color: #fff;
    outline: none;
}
   /* select inputをスタイリング */
        select {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 100%;
            box-sizing: border-box;
            font-size: 14px;
            background-color: #f9f9f9;
        }

        select:focus {
            border-color: #007BFF;
            background-color: #fff;
            outline: none;
        }

/* .nline クラスのテーブルに枠線をなしにするスタイルを適用 */
.nline {
    border-collapse: collapse;
}

.nline td {
    border: none;
    padding: 10px 5px;
}
 input[readonly] {
            background-color: #cccccc; /* Light gray background for readonly inputs */
            border: 1px solid #ccc; /* Gray border */
            color: #666; /* Gray text color */
        }

 .button-container {
            display: flex;
            justify-content: space-between;
            width: 800px; /* ボタンの幅と間隔に応じて調整 */
            margin: 20px auto; /* 中央寄せ */
        }
.small_title {
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .pdf-button {
            background-color: #4CAF50; /* 緑色の背景色 */
            color: white; /* 白色のテキスト */
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap; /* 改行を防ぐ */
            min-width: 150px; /* ボタンの最小幅を指定 */
            text-align: center;
            margin-left: 20px; /* ボタンとテキストの間にスペースを追加 */
margin-bottom:15px;
min-width:200px;
        }
        .pdf-button:hover {
            background-color: #45a049; /* ホバー時の背景色 */
        }
 .search-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .search-form {
            display: flex;
            align-items: center;
        }
        .search-input {
            margin-right: 10px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .search-button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        .search-button:hover {
            background-color: #45a049;
        }
        .add-button {
            padding: 5px 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .add-button i {
            margin-right: 5px;
        }
        .add-button:hover {
            background-color: #0056b3;
        }
.radio-group {
            display: flex;
        }
        .radio-group label {
            padding: 10px 20px;
            border: 2px solid #ccc;
            cursor: pointer;
            margin-right: 5px;
            transition: border-color 0.3s;
        }
        .radio-group input[type="radio"] {
            display: none;
        }
        .radio-group input[type="radio"]:checked + label {
            border-color: orange;
        }
.edit-mode input {
            width: 100%;
        }
        .editable[data-field="id"] {
            display: none;
        }
        .button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .edit-button {
            background-color: #4CAF50; /* 緑色 */
        }
        .edit-button:hover {
            background-color: #45a049;
        }
        .update-button {
            background-color: #008CBA; /* 青色 */
        }
        .update-button:hover {
            background-color: #007bb5;
        }
        .delete-button {
            background-color: #f44336; /* 赤色 */
        }
        .delete-button:hover {
            background-color: #da190b;
        }

.flag-completed {
    display: inline-block;
    padding: 2px 8px;
    background-color: #4CAF50; /* 緑色 */
    color: white;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    font-size: 16px;
}

.flag-pending {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f44336; /* 赤色 */
    color: white;
    border: 1px solid #f44336;
    border-radius: 4px;
    font-size: 16px;
}
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
    height: 100%; /* カスタムチェックボックスの高さをtrに合わせます */
    display: flex;
    align-items: center;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    border: 1px solid #ccc; /* 枠線を追加 */
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
        .hoverable-row:hover {
            background-color: #f0f0f0; /* マウスオーバー時の背景色 */
        }
        .hoverable-cell:hover {
            background-color: #d0d0d0; /* マウスオーバー時のセルの背景色 */
        }