/*
gray-100 #F3F4F6
gray-300 #D1D5DB
gray-400 #9CA3AF
gray-500 #6B7280
gray-900 #111827

.text-xs	font-size: 0.75rem; line-height: 1rem;	12px
.text-sm	font-size: 0.875rem; line-height: 1.25rem;	14px
.text-base	font-size: 1rem; line-height: 1.5rem;	16px
.text-lg	font-size: 1.125rem; line-height: 1.75rem;	18px
.text-xl	font-size: 1.25rem; line-height: 1.75rem;	20px
.text-2xl	font-size: 1.5rem; line-height: 2rem;	24px
.text-3xl	font-size: 1.875rem; line-height: 2.25rem;	30px
.text-4xl	font-size: 2.25rem; line-height: 2.5rem;	36px
.text-5xl	font-size: 3rem; line-height: 1;	48px
.text-6xl	font-size: 3.75rem; line-height: 1;	64px
.text-7xl	font-size: 4.5rem; line-height: 1;	72px
.text-8xl	font-size: 6rem; line-height: 1;	80px
.text-9xl	font-size: 8rem; line-height: 1;	96px
*/

/* テーブル基本設定 */
table {
    font-size: 0.75rem;
    line-height: 1rem;
}

table thead th {
    padding: 0.5rem;
}

table tbody td {
    padding: 0.5rem;
}

table.odd tbody tr:nth-child(odd) {
    background-color: #f5f1ed;
}

table tbody tr.deleted,
table.odd tbody tr.deleted:nth-child(odd),
table tbody tr.sent,
table.odd tbody tr.sent:nth-child(odd) {
    color: #6B7280;
    background-color: #D1D5DB;
}


table tr.clickable {
    border-top: 3px solid white;
    border-bottom: 3px solid #e5e7eb;
    border-left: 3px solid white;
    border-right: 3px solid white;
}
table tr.clickable:last-child {
    border-bottom: 3px solid white;
}

table tr.clickable.selected {
    background-color: #deebf7;
    border: 3px solid #deebf7;
}

table.selectable tr:hover,
table.selected tr:hover {
    cursor: pointer;
    background-color: #e3f3ff;
}
table.selectable tr.selected,
table.selected tr.selected {
    background-color: #deebf7;
}

/* aタグ基本設定 */
main a {
    color: deepskyblue;
}

main a:hover {
    color: lightskyblue;
}

/* ボタン */
a.btn,
input.btn,
label.btn {
    font-weight: 700;
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

a.btn.pointer-events-none {
    opacity: 0.5;
}

a.btn-blue,
input.btn-blue {
    background-color: #3B82F6;
    color: white;
    border-radius: 0.25rem;
}

a:hover.btn-blue,
input:hover.btn-blue {
    background-color: #1D4ED8;
    color: white;
}

a.btn-red,
input.btn-red,
label.btn-red {
    background-color: #ff5050;
    color: white;
    border-radius: 0.25rem;
}

a:hover.btn-red,
input:hover.btn-red {
    background-color: #dd3030;
    color: white;
}

a.btn-green,
input.btn-green {
    background-color: #00b050;
    color: white;
    border-radius: 0.25rem;
}

a:hover.btn-green,
input:hover.btn-green {
    background-color: #00a040;
    color: white;
}

a.btn-gray,
input.btn-gray,
label.btn-gray {
    background-color: #74868C;
    color: white;
    border-radius: 0.25rem;
}

a:hover.btn-gray,
input:hover.btn-gray {
    background-color: #9CA3AF;
    color: white;
}

a.btn-lightgreen,
input.btn-lightgreen {
    background-color: #66cc99;
    color: white;
    border-radius: 0.25rem;
}

a:hover.btn-lightgreen,
input:hover.btn-lightgreen {
    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
    color: white;
}

a.btn-back {
    color: white;
    position: relative;
    width: 4rem;
    height: 2rem;
    margin-left: 1rem;
    background: #74868C;
    display: grid;
    place-items: center;
}

a.btn-back:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1rem;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    width: 1rem;
    height: 2rem;
    background-color: #74868C;
}

a:hover.btn-back,
a:hover.btn-back:before {
    background-color: #9CA3AF;
    color: white;
}

a.btn-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 700;
    background-color: white;
    color: #6B7280;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover.btn-toggle {
    color: #374151;
    background-color: #FEE2E2;
}
a:focus.btn-toggle {
    outline: 0;
    color: #374151;
    background-color: #FCA5A5;
}

a.btn-toggle.selected {
    background-color: #ff5050;
    color: white;
}

a.btn-toggle.boeder {
    border-color: #6B7280;
}

a.btn-toggle.selected.boeder {
    border-color: #ff5050;
}

label.btn-survey-red {
    background-color: #ff5050;
    border-bottom: 4px solid #ff5050;
    color: white;
    border-radius: 0.5rem;
}

label.btn-survey-gray {
    background-color: #ddd;
    border-bottom: 4px solid #666;
    color: black;
    border-radius: 0.5rem;
}

/* ×印 */
.btn-delete::before, .btn-delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; /* 棒の幅（太さ） */
    height: 100%; /* 棒の高さ */
    background: white;
}

.btn-delete::before {
    transform: translate(-50%,-50%) rotate(45deg);
}

.btn-delete::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

/* disabled */
input[disabled] {
    opacity: 0.5;
}

/* LFカラー */
.bg-red-lf {
    background-color: #ff5050;
}

.border-red-lf {
    border-color: #ff5050;
}

.bg-blue-lf {
    background-color: #0099ff;
}

.border-blue-lf {
    border-color: #0099ff;
}

.text-blue-lf {
    color: #0099ff;
}

.bg-lightgray-lf {
    background-color: #f5f1ed;
}

.border-lightgray-lf {
    border-color: #f5f1ed;
}

.bg-error-lf {
    background-color: #fbe5d6;
}

.border-gray-lf {
    border-color: #74868C;
}

.text-gray-lf {
    color: #74868C;
}

.bg-gray-lf {
    background-color: #9CA3AF;
}

.bg-green-lf {
    background-color: #00b050;
}

.border-green-lf {
    border-color: #00b050;
}

.text-green-lf {
    color: #00b050;
}

.text-red-lf,
input[type="checkbox"],
input[type="radio"] {
    color: #ff5050;
}

input[type="checkbox"].lightgreen,
input[type="radio"].lightgreen {
    color: #66cc99;
}

.border-blue-help {
    border-color: #4775d1;
}
.bg-blue-help {
    background-color: #deebf7;
}

.bg-red-alert {
    background-color: #fbe5d6;
}

.bg-lightgreen-lf {
    background-color: #66cc99;
}

.border-lightgreen-lf {
    border-color: #66cc99;
}

.bg-darkred-lf {
    background-color: #c00000;
}

.border-darkred-lf {
    border-color: #c00000;
}

.bg-paleyellow-lf {
    background-color: #ffe699;
}

.text-warn-lf {
    color: #fd9700;
}

.border-yellow-lf {
    border-color: #ffc000;
}

#selected_employee .image img.warn {
    border-color: #ffc000;
    border-width: 4px;
    border-radius: 0.75rem;
}

/* select2対応 */
.select2-container .select2-selection--single {
    border-color: #D1D5DB;
}
.border-red-500 + .select2-container .select2-selection--single {
    border-color: #ff5050;
}

.select2 .select2-selection {
    font-size: 13px;
}

.select2 .select2-selection__rendered {
    line-height: 29px!important;
    color: rgb(17 24 39 / var(--tw-text-opacity))!important;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: white;
    opacity: 0.5;
}

/* 矢印表現 */
.arrow-up,
.arrow-down,
.tablesorter-headerAsc .arrow,
.tablesorter-headerDesc .arrow {
    position: relative;
}

.arrow-up:before,
.tablesorter-headerAsc .arrow:before {
    content: "";
    position: absolute;
    clip-path: polygon(50% 0, 0 50%, 100% 50%);
    width: 1rem;
    height: 1rem;
    background-color: #74868C;
    transform: translate(-50%, 0);
}

.arrow-down:before,
.tablesorter-headerDesc .arrow:before {
    content: "";
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 50% 50%);
    width: 1rem;
    height: 1rem;
    background-color: #74868C;
    transform: translate(-50%, 0);
}

.arrow-down.white:before,
.arrow-up.white:before {
    background-color: white;
}

a.btn.btn-single,
input.btn.btn-single {
    padding-left: 0;
    padding-right: 0;
}

/* サブタイトル */
h4 {
    position: relative;
    padding-left: 1.5rem!important;
    font-size: 1.25rem!important;
    line-height: 1.75rem;
    font-weight: 700!important;
}
h4:before {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 1rem;
    height: 1rem;
    background-color: #ff5050;
    border-radius: 9999px;
}
h4.lightgreen:before {
    background-color: #66cc99;
}

/* input */
input[type=date],
input[type=month],
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=url],
select,
textarea {
    padding-top: 0.25rem!important;
    padding-bottom: 0.25rem!important;
    font-size: 0.8125rem!important;
    line-height: 1.125rem!important;
    border-radius: 0.25rem!important;
    border-color: #D1D5DB!important;
}

input[type=date].border-red-500,
input[type=month].border-red-500,
input[type=text].border-red-500,
input[type=email].border-red-500,
input[type=number].border-red-500,
input[type=password].border-red-500,
input[type=url].border-red-500,
select.border-red-500,
textarea.border-red-500 {
    border-color: #ff5050!important;
}

input[type="checkbox"] {
    border-radius: 0.25rem;
}

/* モーダル上下中央表示 */
@media screen and (min-height: 520px) {
    #modalCenter {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}