.wj-multiselectlistbox {
    max-height: 200px;
    min-width: 150px;
}

.wj-glyph-plus {
    border-top: 0 solid !important;
    content: url('/svg/chevron-right-solid.svg') !important;
    width: 8px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.wj-glyph-minus {
    border-top: 0 solid !important;
    content: url('/svg/chevron-down-solid.svg') !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.input-search-tag {
    max-width: 500px;
    min-width: 200px;
}

.badge-sendto {
    background-color: #19a2aa;
}

.custom-file-label {
    font-size: 14px !important;
}

.slide-edit-task-form-header {
    background-color: var(--table-header-background-color) !important;
    width: 100%;
}

/* スライド高さ調整 */
#card-slide-adjust {
    height: 90%;
}

/* PC用保存ボタンなどスクロール固定 */
#card-header-fixed {
    position: fixed;
    z-index: 100;
    left: 6%;
    right: 6%;
}

/* SP用保存ボタンなどスクロール固定 */
#card-header-fixed-sp {
    position: fixed;
    z-index: 100;
    left: 7%;
    right: 7%;
}

.task-contents-header {
    color: #444;
    background-color: #d8d2c6;
    margin: 0;
    padding-left: 21px;
    padding-right: 16px;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
}

.task-contents-header img {
    float: right;
    padding-top: 9px;
}

.task-contents-header.active img {
    transform: rotateX(180deg);
    padding-top: 9px;
    padding-bottom: 9px;
}

.task_toggle.active img {
    transform: rotateX(180deg);
}

.task_toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ×ボタン:ホバー時 */
.task_toggle:hover {
    background-color: #d6d6d6 !important;
    border-radius: 50% !important;
}

.task-contents-header.toggle {
    background-color: #fff;
}

#slide_edit_task_form,
#card-body-detail-adjust,
#card-body-detail-adjust-sp {
    .disabled,
    .form-control:disabled {
        background-color: #eaebee;
        border-color: #d6d6d6;

        button,
        button span {
            cursor: default;
        }
    }

    .form-control:disabled + .input-group-append {
        cursor: default;
    }

    .disabled:focus {
        box-shadow: unset;
    }

    .disabled .wj-btn:hover {
        background: #eee;
    }

    textarea[name='comment'] {
        margin-top: 3px;
    }

    textarea[name='comment']:disabled::placeholder {
        color: transparent;
    }

    .form-group label {
        font-size: 11px;
        line-height: 19px;
        margin-bottom: 4px;
    }

    label.form-check-label {
        line-height: 1.6;
    }

    .task-contents-header {
        margin: 0 -16px;
    }

    .task-contents-header:first-of-type {
        margin-top: -16px;
    }

    .tags-input-container {
        margin-top: 18px;
    }

    .task-date-container {
        padding-top: 17px;
        padding-bottom: 20px;
    }

    .task-status-input-container {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .main-persons-select-container {
        margin-top: 18px;
        margin-bottom: 19px;
    }

    .project-select-container {
        padding-bottom: 7px;

        .form-group {
            margin-bottom: 7px;
        }
    }

    .remainder_setting {
        margin-bottom: 20px;
    }

    .task_repeat_date {
        margin-bottom: 10px;
    }

    .remainder_setting > .form-group {
        margin-bottom: 7px;
    }

    .task-repeat-container {
        margin-bottom: 11px;
    }

    .unit-price-container {
        padding-top: 19px;
        padding-bottom: 7px;

        .cost-label {
            margin-top: 17px;
        }

        label[for='slide_edit_task_check_cost'],
        label[for='task_detail_form_cost_check'] {
            padding-top: 2px;
        }
    }

    .run-time-container {
        padding-top: 17px;
        padding-bottom: 15px;
        margin-bottom: 11px;
    }

    #task_detail_form_task_name,
    #slide_edit_task_form_name,
    select,
    .custom-select {
        font-size: 14px;
        line-height: 18px;
        height: 32px;
    }

    #edit_notification_user_area,
    #task_detail_form_notification_user_area {
        font-size: 14px;
        line-height: 18px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .task-start-date-container,
    .task-end-date-container {
        padding-right: 20px;
    }

    .task-end-date-container,
    .task-end-time-container {
        margin-top: 10px;
    }

    .flag-container {
        column-gap: 26px;
        margin-top: 12px;
    }

    .production-items-container {
        margin-top: 18px;

        label {
            font-size: 11px;
            line-height: 19px;
            margin-bottom: 4px;
        }

        .items-row {
            margin-bottom: 18px;
        }
    }

    .task-comment-btn-container {
        margin-bottom: 22px;
    }
}

#card-body-detail-adjust,
#card-body-detail-adjust-sp {
    label[for='task_detail_form_gcalendar_flg'],
    label[for='task_detail_form_all_day_flg'] {
        font-size: 10px;
        line-height: 17px;
        margin-bottom: 0;
    }
}

#slide_edit_task_form {
    label[for='slide_edit_task_gcalendar_flg'],
    label[for='slide_edit_task_all_day_flg'] {
        font-size: 10px;
        line-height: 17px;
        margin-bottom: 0;
    }
}

#attachment-files-label {
    font-size: 11px;
    line-height: 19px;
}

#slide_edit_task_comment_file_btn.common_file_btn:disabled:hover,
#slide_edit_task_comment_file_btn.common_file_btn:disabled:active,
#task_detail_form_comment_file_btn.common_file_btn:disabled:hover,
#task_detail_form_comment_file_btn.common_file_btn:disabled:active {
    background-color: var(--contentsbase) !important;
}

#task_detail_form_comment_file_btn {
    background-color: #fff;
}

#task_detail_form_task_attachmentfiles,
#slide_edit_task_attachmentfiles {
    background: white;

    li {
        font-size: 12px;
        line-height: 20px;
        padding-bottom: 22px;
    }

    .view-only-asset {
        color: #707070;
    }
}

.task-attachment-files-view-only {
    min-height: 64px;
}

#task_detail_form_comment_send,
#slide_edit_task_comment_send {
    font-size: 13px;
    line-height: 18px;
}

.task-contents-group {
    margin: 15px auto;
}

.task-setting-container {
    margin-top: 12px;
}

.task-contents-header + .task-contents-group {
    display: none;
}

.task-contents-header.active + .task-contents-group {
    display: block;
}

.date-form-between-label {
    width: 30px;
}

.task_edit_form_comment_area {
    width: 100%;
    max-height: 500px;
    overflow: auto;
    cursor: text;
}

.task_edit_form_comment_area img {
    object-fit: contain;
}

.task_detail_form_comment_area {
    width: 100%;
    max-height: 500px;
    overflow: auto;
}

.task_detail_form_comment_area img {
    object-fit: contain;
}

.task_edit_form_comment_area a.mention-link,
.task_detail_form_comment_area a.mention-link,
.members-comment-item a.mention-link {
    pointer-events: none;
}

.card-body {
    padding: 11px 16px 16px;

    .card-body:first-of-type {
        padding-bottom: 14px;
    }
}

/* タスクPC用調整 */
#card-body-detail-adjust {
    margin-top: 70px;
}

/* タスクSP用調整 */
#card-body-detail-adjust-sp {
    margin-top: 120px;
}

#card-body-detail-adjust,
#card-body-detail-adjust-sp,
#card-body-project-adjust {
    .task-persons-multiselect {
        width: 100%;
        height: 37px;
        overflow: hidden;
        border-color: #ced4da;
    }
}

/* プロジェクトPC＆SP用調整 */
#card-body-project-adjust {
    margin-top: 75px;
}

/* プロジェクト一覧 詳細行内のGridを囲んでいる枠線除去 */
.wj-detail > .wj-flexgrid {
    border: none;
    border-radius: 0;
    margin-bottom: -2px;
}

.select_task_repeat_interval {
    display: none;
}

.remainder_custom_content {
    font-size: 14px !important;
}

.day_of_the_week {
    display: none;
}

#custom_remind_modal_body {
    background-color: #fff;
}

.day_switch {
    font-size: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    padding-left: 1px;
    cursor: pointer;
}

span[data-day-flag='1'],
span[data-day-flag='2'],
span[data-day-flag='4'],
span[data-day-flag='8'],
span[data-day-flag='16'],
span[data-day-flag='32'],
span[data-day-flag='64'] {
    color: #fff;
    background: #19a2aa;
}

span[data-day-flag='0'] {
    background: #d6d6d6;
}

.hidden-file-input {
    visibility: hidden;
}

/* === ボタンを表示するエリア ============================== */
.switchArea {
    line-height: 29px; /* 1行の高さ          */
    letter-spacing: 0; /* 文字間             */
    text-align: center; /* 文字位置は中央     */
    font-size: 27px; /* 文字サイズ         */
    position: relative; /* 親要素が基点       */
    width: 102px; /* ボタンの横幅       */
    background: #fff; /* デフォルト背景色   */
}

/* === チェックボックス ==================================== */
.switchArea input[type='checkbox'] {
    display: none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
    display: block; /* ボックス要素に変更 */
    box-sizing: border-box; /* 枠線を含んだサイズ */
    height: 32px; /* ボタンの高さ       */
    border: 2px solid #a8a8a8; /* 未選択タブのの枠線 */
    border-radius: 30px; /* 角丸               */
    background: #a8a8a8;
    margin-bottom: 0 !important;
}

/* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type='checkbox']:checked + label {
    border-color: #19a2aa; /* 選択タブの枠線     */
    background: #19a2aa;
}

/* === 表示する文字（標準） ================================ */
.switchArea label span::after {
    content: '通知OFF'; /* 表示する文字       */
    padding: 0 0 0 26px; /* 表示する位置       */
    color: #fff; /* 文字色             */
}

/* === 表示する文字（ONのとき） ============================ */
.switchArea input[type='checkbox']:checked + label span::after {
    content: '通知ON'; /* 表示する文字       */
    padding: 0 26px 0 0; /* 表示する位置       */
    color: #fff; /* 文字色             */
}

/* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
    position: absolute; /* 親要素からの相対位置 */
    width: 28px; /* 丸の横幅           */
    height: 28px; /* 丸の高さ           */
    background: #fff; /* カーソルタブの背景 */
    top: 2px; /* 親要素からの位置   */
    left: 2px; /* 親要素からの位置   */
    border-radius: 30px; /* 角丸               */
    transition: 0.3s; /* 滑らか変化         */
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type='checkbox']:checked ~ #swImg {
    transform: translateX(-97.5%); /* 丸も右へ移動       */
    left: 97.5%;
    background: #fff;
} /* カーソルタブの背景 */

/* コメント送信者メンバーアイコンサイズ */
.comment_from_user-icon {
    height: 32px;
    width: 32px;
}

/* コメント表示部(サイドフレーム＆詳細画面)用下方向マージン調整 */

/* .members-comment-item h5,
.members-comment-item h6, */
.members-comment-item p {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .notify_custom_setting_modal {
        max-width: 420px;
    }
}

.custom_repeat_interval_num {
    display: none;
    padding: 0;
}

.custom_repeat_day_of_the_week {
    display: none;
    padding: 0;
}

.custom_repeat_end_end_date {
    display: none;
    padding: 0;
}

.custom_repeat_end_count {
    display: none;
    padding: 0;
}

.custom_task_modal_danger {
    color: #e3342f;
}

.task_repeat_date {
    margin-bottom: 1rem;
}

/* サイドフレーム上のファイル添付ボタン/ToボタンのCSS(ここだけ通常背景色を灰色に変える) */
#slide-edit-task-comment-form .common_file_btn {
    background-color: var(--contentsbase) !important;
}

#slide-edit-task-comment-form .comment_to_btn:focus,
#slide-edit-task-comment-form .common_file_btn:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--contentsbase) !important;
}

#slide-edit-task-comment-form .comment_to_btn:hover,
#slide-edit-task-comment-form .common_file_btn:hover {
    border: 1px solid var(--delete-button-color) !important;
    background-color: var(--delete-button-hover-background-color) !important;
}

#slide-edit-task-comment-form .comment_to_btn:active,
#slide-edit-task-comment-form .common_file_btn:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #b9b9b9 !important;
}

/* ====== コメントチャットに関連するcss begin ====== */

/* チャットにも送信するのチェックボックス領域 */
.send_comment_chat_area {
    margin-top: 5px;
}

/* チャットにも送信するのチェックボックス専用スタイル */
.custom-control-label.lbl_send_comment_chat {
    color: #636363;
    font-size: 12px;
    line-height: 20px;
}

.lbl_send_comment_chat::before {
    width: 18px;
    height: 18px;
    top: 1px;
}

.lbl_send_comment_chat::after {
    width: 18px;
    height: 18px;
    top: 2px;
}

/* TOユーザー表示スタイル */
.comment_to_user_name {
    color: #444;
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;
}

/* タクスコメントの添付ファイル表示領域 */
.task_comment_upload_file_area {
    display: flex;
}

/* 添付ファイルイメージの大外枠[画像とファイル名含む] */
.attachment_image_area {
    margin-top: 20px;
}

/* 添付ファイルイメージの外枠[画像領域のみ] */
.comment_upload_file_image_area {
    position: relative;
    margin-right: 20px;
    width: 125px;
    height: 125px;
    background: #d8d2c6 0% 0% no-repeat padding-box;
    text-align: center;
    border-radius: 8px;
}

/* 添付ファイルイメージの内枠[cufia → comment_upload_file_image_area] */
.cufia_innner_area {
    position: absolute;
    margin: auto;
    inset: 0;
    width: 50px;
    height: 50px;
}

/* 添付ファイルイメージ内のファイル画像[cufia → comment_upload_file_image_area] */
.cufia_image {
    width: 24px;
    height: 33px;
}

/* 添付ファイルに画像がアップされた場合のデザイン */
.cufia_org_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* 添付ファイルイメージ内のファイル拡張子[cufia → comment_upload_file_image_area] */
.cufia_innner_area p {
    font-size: 16px;
    line-height: 27px;
    font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
    letter-spacing: 0;
    color: #8d8d8d;
    opacity: 1;
}

/* 添付ファイル名 */
.comment_upload_file_name {
    width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 資料droppable領域 begin */
.parent_droppable_area {
    position: relative;
}

.drag_and_drop_ballon {
    display: none;
    position: absolute;
    top: -125px;
    width: 400px;
    height: 140px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.drag_and_drop_ballon::after,
.drag_and_drop_ballon::before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 14%;
}

.drag_and_drop_ballon::after {
    border-color: rgb(255 255 255 / 0%);
    border-width: 10px;
    margin-left: -10px;
    border-top-color: #fff;
}

.drag_and_drop_ballon::before {
    border-color: rgb(0 0 0 / 0%);
    border-width: 11px;
    margin-left: -11px;
    margin-top: 1px;
    border-top-color: #ddd;
}

.drag_and_drop_ballon div {
    border: 1px dashed #ddd;
    height: 100%;
    text-align: center;
    color: #000;
    font-size: 11px;
}

/* 資料droppable領域 end */

/* コメント欄メンション候補 */
.suggest .dropdown-item {
    width: fit-content;
}

.suggest > .dropdown-menu {
    overflow: auto;
    max-height: 200px;
    max-width: 350px;
}

.user_icon_32_32 {
    width: 32px !important;
    height: 32px !important;
}

/* TinyMCE メンション候補 */
.tox-collection__group {
    overflow: auto;
    max-height: 200px;
    max-width: 350px;
}

.tox .tox-collection--list .tox-collection__item {
    padding: 5px 10px !important;
    border-top: 1px solid #eee;
}

.tox .tox-collection__item-label {
    margin-left: 12px;
}

/* ====== コメントチャットに関連するcss end ====== */

.img_task_icon {
    width: 20px;
    height: auto;
    padding-right: 0.5rem;
}

.task-status-input-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.task-items-input-container {
    margin-bottom: 44px;
}

#task-chat-info-container {
    padding-bottom: 20px;

    p {
        font-size: 13px;
        line-height: 23px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .link {
        font-size: 12px;
        line-height: 20px;
        display: flex;
        align-items: center;

        span {
            min-width: 72px;
            width: 72px;
        }

        a {
            color: var(--main-color);
            text-decoration: underline;
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: fit-content;
        }

        a:hover {
            text-decoration: none;
        }
    }
}

/* 日付自動更新確認ダイアログ css */
#project-confirm-change-task-date-dialog .modal-body button {
    width: 100px;
    height: 32px;
}

/* タスクフィルタ css */
#task_search_task_multi_select_dropdown .wj-listbox-item img,
#comment_search_task_multi_select_dropdown .wj-listbox-item img,
#kanban_search_task_multi_select_dropdown .wj-listbox-item img {
    position: relative;
    top: 5px;
    margin-left: 10px;
}

.task_filter_tooltip_point {
    z-index: 1599; /* フィルタのwijmoプルダウンリストのz-indexより大きい値 */
    position: absolute;
}

.tooltip {
    z-index: 1600; /* フィルタのwijmoプルダウンリストのz-indexより大きい値 */
}

/* 検索メニュー コンテンツ部分 css */
.search_menu_content {
    padding-left: 20px;
    padding-right: 20px;
}

/* 検索メニューフッター部分 css */
.search_menu_footer {
    height: 56px;
    padding: 12px 20px;
}

.search_menu_footer .search_option_btn {
    width: 192px;
    background-color: #fff !important;
    text-decoration: none !important;
}

.search_menu_footer .search_option_btn:hover {
    text-decoration: none !important;
}

/* 見積もり時間フィルタ css */
#inputSearchTaskPlanTime,
#kanban_search_plans_time {
    background-image: url('/img/common/b_underarrow_eg.png');
    background-repeat: no-repeat;
    background-position: right 3px center;
    padding-right: 30px !important;
    cursor: pointer;
}

#task_search_plan_time_tooltip_content .card-body {
    background-color: #fff !important;
}

#task_search_plan_time_tooltip_content label {
    font-size: 14px !important;
}

#task_search_plan_time_tooltip_content .card-body .form-group .form-control {
    width: 63px;
}

#task_search_task_created_date {
    background-color: #e4f3f4;
    border-color: #19a2aa;
}

#project_search_created_date {
    background-color: #e4f3f4;
    border-color: #19a2aa;
}

#comment_search_task_created_date {
    background-color: #e4f3f4;
    border-color: #19a2aa;
}

#kanban_search_task_created_date {
    background-color: #e4f3f4;
    border-color: #19a2aa;
}

/* 担当者一括変更 担当者選択ダイアログ css */
#modal_select_task_person .modal-header p {
    font-size: 18px;
}

#modal_select_task_person .modal-body {
    background-color: #f4f2ef;
}

#modal_select_task_person .modal-note {
    font-size: 12px;
    margin-top: 12px;
}

/* 未読タスク */
.unread_task {
    font-weight: bold;
}

.unread_task::before {
    display: inline-block;
    content: '';
    margin-right: 3px;
    width: 8px;
    height: 8px;
    vertical-align: top;
    border-radius: 5px;
    background-color: #eb5a30;
}

/* 一覧表示の担当者欄 */
.task_list_persons_col {
    padding-left: 20px !important;
    padding-right: 10px !important;
    text-align: center !important;
}

#slide_edit_project_select_project_status_block {
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.slide_edit_project_task_list:first-child {
    border-top: 1px solid var(--task-list-border-color);
}

.slide_edit_project_task_list {
    display: flex;
    align-items: center;
    padding: 16px 8px;
    font-size: 12px;
    background-color: var(--table-background-color);
    border: 1px solid var(--task-list-border-color);
    border-top: 0;
    height: 44px;
}

.slide_edit_project_task_no {
    border-left: 1px solid var(--task-list-border-color);
    border-right: 1px solid var(--task-list-border-color);
    padding: 0 4px;
    margin: 0 8px;
    min-width: 30px;
    text-align: right;
}

#task_custom_item_list .placeholder {
    height: 44px;
    border: dashed 1px var(--main-color);
    background-color: var(--ui-sortable-placeholder-background-color);
    border-radius: 4px;
}

#task_custom_item_list .ui-sortable-helper {
    opacity: 0.6;
    background-color: var(--ui-sortable-helper-background-color);
    border: solid 1px var(--task-list-border-color);
}

#handle_icon {
    display: block;
}

#create-project-form {
    .main-persons-select-container {
        margin-bottom: 12px;
    }

    .sub-persons-select-container {
        margin-bottom: 12px;
    }

    .task-contents-group {
        margin-top: 7px;
    }

    .dropdown-toggle,
    .task-persons-multiselect {
        width: 100%;
        max-width: 370px;
        height: 37px;
    }

    .task-persons-multiselect {
        display: block;
        overflow: hidden;
        border-color: #ced4da;
    }
}

#form-task-create {
    .tags-input-container {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .main-persons-select-container {
        margin-top: 14px;
        margin-bottom: 14px;
    }
}

#form-tasks-relate-project {
    .tags-container {
        margin-top: 12px;
    }

    .tags-input-container {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .main-persons-select-container {
        margin-bottom: 12px;
    }
}

@media screen and (min-width: 770px) {
    #handle_icon {
        visibility: hidden;
    }

    #slide_edit_project_task_custom_item :hover #handle_icon {
        visibility: visible;
        cursor: pointer;
    }

    #project_detail_form_task_custom_item :hover #handle_icon {
        visibility: visible;
        cursor: pointer;
    }

    #template_new_dialog_task_item :hover #handle_icon {
        visibility: visible;
        cursor: pointer;
    }
}

/* スマホ表示 */

/* タグの折り返し */
@media screen and (max-width: 767px) {
    .bootstrap-tagsinput.dropdown span.badge {
        text-align: left;
        white-space: unset;
        line-height: 1.3;
    }

    .suggest > .dropdown-menu {
        max-width: 100%;
    }
}