:root {
    /* 20201206 add takeuchi */
    --main-color: #19a2aa;
    --contentsbase: #f4f2ef;
    --contentstitle: #56565a;
    --contentssubtitle: #6f6f6f;
    --table-header-background-color: #d8d2c6;
    --table-header-color: #5f5b54;
    --table-background-color: #fff;
    --table-color: #444;
    --table-border-color: #e3e3e3;
    --form-border-color: #d6d6d6;
    --entering-form-border-color: #19a2aa;
    --status-background-color-notstart: #d6d6d6;
    --status-background-color-inprogress: #d6d6d6;
    --task-add-border-color-done: #d6d6d6;
    --task-list-border-color: #dfdfdf;
    --ui-sortable-placeholder-background-color: #e6f3f4;
    --ui-sortable-helper-background-color: #e5f3f4;
    --status-background-color: #d6d6d6;
    --status-color-notstart: #707070;
    --status-color-inprogress: #19a2aa;
    --status-color-done: #eb5a30;
    --status-color-confirmation: #3071eb;
    --status-color-before: #c2a557;
    --status-color-customer-confirm: #53b8ef;
    --status-color-arranged: #f68e01;
    --status-color-temp7: #e17b9a;
    --status-color-temp8: #5ecb7f;
    --status-color-temp9: #868cb7;
    --status-color-temp10: #a15eba;
    --status-color-temp11: #fcd964;
    --hide-button-hover-background-color: #e0e0e0;
    --delete-button-color: #8d8d8d;
    --delete-button-hover-background-color: #e0e0e0;
    --hover-btn-main-color: #19a2aab3;
    --hover-btn-secondary-color: #b3b3b3b3;
    --checkbox-border-color: #b3b3b3;
    --modal-hide-button-background-color: #b3b3b3;
    --modal-hide-button-hover-background-color: #707070;
    --comment-border-color: #e3e3e3;
    --file-select-background-color: #efefef;
    --file-select-border-color: #e7e7e7;
    --file-select-hover-background-color: #b3b3b3;
    --contents-color: #444;
    --search-color: #636363;
    --sunday-color: #ffdede;
    --saturday-color: #deebff;
}

.content_base_background,
body {
    background-color: var(--contentsbase);
}

/* -------------------- */

/* ▼フォントの設定 */

/* -------------------- */
.modal-content,
.card {
    font-size: 14px;
}

.modal-content label,
.card label {
    font-size: 10px;
}

.wj-cell {
    font-size: 12px;
    text-align: center;
}

/* --コメント一覧のタスク名-- */
.card-title a {
    font-size: 14px;
    font-weight: 600;
    color: var(--contents-color);
}

.card-title a:hover {
    color: var(--contents-color);
}

/* --コメント一覧のプロジェクト名、名前、宛名-- */
.card-title button.show_project_detail_modal_btn,
h5.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--contents-color);
}

/* --コメント一覧のその他の返信-- */
.list-group-item button.btn-link.more_show_reply_comment_btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--contents-color);
}

.wj-cell:not(.wj-header) {
    padding: 7px 6px 5px;
}

.wj-form-control {
    margin: 0 !important;
    padding: 0.375rem 0.75rem !important; /* Wijmo-input欄内のpaddingをBootstrapのform-control指定時サイズ同等に強制 */
    text-overflow: ellipsis; /* テキストが長い場合は省略表示 */
    width: 100% !important;
}

/* プロジェクト一覧内に表示するタスク一覧の周囲のパディング打消し */
.wj-detail {
    padding: 0 !important;
}

/* -------------------- */

/* ▼検索エリア */

/* -------------------- */

/* --検索条件をクリアボタンと詳細検索ボタン-- */
.search_option_btn {
    color: var(--search-color);
    text-decoration: underline;
    text-align: left;
    cursor: pointer;
}

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

/* --下矢印ボタンのborder-leftの削除と変更-- */
form#search_form .wj-btn.wj-btn-default {
    border-left: none;
    background-image: url('/img/common/b_underarrow_eg.png');
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 24px 24px;
    width: 30px;
    pointer-events: none;
}

/* --下矢印の打消し-- */
form#search_form .wj-glyph-down {
    border-top: none;
    border-right: none;
    border-left: none;
}

/* --検索欄の文字色の統一-- */
.search_filter_div {
    /* ライブラリによる要素置換系の検索フィルタ文言色変更の起点div指定用。自身は何も設定値は持たない。 */
}

.search_filter_div .wj-form-control,
.search_filter_div .wj-form-control::placeholder,
.search_filter_div .multiselect-selected-text {
    color: #757575 !important;
    opacity: 1;
}

.search_filter_color,
.search_filter_color::placeholder {
    color: #757575 !important;
}

/* -------------------- */

/* ▼コンテンツ */

/* -------------------- */
#list-action,
.card-header {
    background-color: #fff;
}

#list-grid-area,
#collapseSearch,
.card > .card-body {
    background-color: var(--contentsbase);
}

#collapseSearch span.multiselect-native-select {
    display: block;
}

.content-border {
    background-color: #fff;
    border-radius: 2%;
    border: 1px solid var(--form-border-color);
    padding: 12px 16px;
}

/* --テーブルヘッダー-- */
.wj-cell.wj-header {
    background-color: var(--table-header-background-color) !important;
    color: var(--table-header-color);
    text-align: center;
    padding: 7px 6px 5px;
}

input.wj-column-selector {
    margin: 2px 4px 4px !important;
}

.wj-cell.wj-header::after {
    background-image: url('/img/common/c_upanddownarrow_gy.png');
}

/* --コメント一覧のレイアウト-- */
.edge-margin-adjustment {
    margin-left: -15px;
    margin-right: -15px;
}

.board-column-header.comment-header {
    height: 24px;
}

.board-item-content {
    padding: 0;
    font-size: 14px;
    border-radius: 0;
}

.board-item-content > .d-flex.justify-content-between {
    padding: 20px;
    font-weight: 600;
}

.list-group-item {
    padding: 20px 50px;
}

/* --タスク名とコメントの境界線-- */
.list-group-flush > .list-group-item:first-child {
    border-width: 1px 0;
}

/* タグの色&フォント(tagsinput用) */
.badge-info {
    background-color: #e6f3f4;
    color: #4e4e4e;
    font-weight: 400;
}

/* タグの空白部の大きさ(tagsinput用) */
.bootstrap-tagsinput .badge {
    margin: 2px;
    padding: 8px;
}

/* タグの×ボタン(tagsinput用) */
.bootstrap-tagsinput .badge [data-role='remove']::after {
    background-color: #7f9a9b;
    color: #e6f3f4;
    font-size: 11px;
}

.wijmo-member-icon {
    height: 20px;
    width: 20px;
    margin-top: -3px;
}

.wijmo-status-icon {
    height: 100%;
    margin-top: -3px;
    backface-visibility: hidden;
}

/* メンバーアイコン用 画像円形トリム設定 */
.member-icon-circle-trim {
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* -------------------- */

/* ▼各部品 */

/* -------------------- */

/* --hoverの処理の削除-- */
*:hover {
    text-decoration: none !important;
}

/* --hover時のbgcolorの変更の取消-- */
.card-title button.show_project_detail_modal_btn:hover {
    background-color: transparent !important;
}

.card-title button.show_project_detail_modal_btn:focus {
    box-shadow: none !important;
}

/* --コメント一覧のその他の返信-- */
.list-group-item button.btn-link.more_show_reply_comment_btn:focus {
    text-decoration: none;
    box-shadow: none;
}

/* --入力フォーム-- */
input {
    border-color: var(--form-border-color);
}

/* --入力中-- */
input.form-control:focus,
select.custom-select:focus,
textarea.form-control:focus,
select.form-control:focus,
select#slide_add_task_select_project:focus,
select#slide_add_task_person:focus,
select#slide_add_task_select_task_status:focus,
input#task_comment_inputFile_2:focus,
.search_filter_div .multiselect:focus,
.search_filter_div.wj-multiselect:not(.wj-state-collapsed) {
    border-color: var(--main-color);
    box-shadow: none;
}

input.icon-search:focus {
    background-image: url('/img/common/c_search_eg_15px.png');
}

/* --プレースホルダーにsarchアイコン追加-- */
input.icon-search {
    background-image: url('/img/common/c_search_gy.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px !important;
}

/* --セレクトボックスのアイコン(エメラルドグリーン)-- */

/* --IEの矢印を非表示-- */
select::-ms-expand {
    display: none;
}

/* --各ブラウザのselect要素の標準CSSをリセット-- */
select {
    appearance: none;
}

select.form-control,
form#search_form .wj-glyph-down,
.common_selectbox_icon_green {
    background-image: url('/img/common/b_underarrow_eg.png');
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 24px 24px;
    padding-right: 38px !important;
}

select.none-icon {
    background: none !important;
    background-image: none !important;
    padding: 0 14px !important;
}

/* --セレクトボックスのアイコン(グレー)-- */
.common_selectbox_icon_gray {
    background-image: url('/img/common/c_downarrow_gy.png') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 7px !important;
}

/* --＋ボタン-- */
.common_icon-plus_button {
    background-image: url('/img/common/c_plus_eg.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    border-color: var(--task-add-border-color-done);
    background-color: #fff;
}

/* --＋ボタン:forcus-- */
.common_icon-plus_button:not(:disabled, .disabled):active,
.common_icon-plus_button:focus {
    box-shadow: none;
    background-color: #fff;
    border-color: var(--form-border-color);
}

/* --上下▲ボタン-- */
button.icon-upanddownarrow {
    background-image: url('/img/common/c_upanddownarrow_gy.png');
    background-repeat: no-repeat;
    background-position: center;
}

/* wijmoのコンポーネント追加により、last-childじゃなくなる場合の右側角丸対応用 */
.right-radius {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

/* 必須マーク */
.mbs-input-required::after {
    content: '必須';
    font-size: 10px;
    color: #fff;
    background: #19a2aa 0% 0% no-repeat padding-box;
    border-radius: 2px;
    width: 36px;
    height: 13px;
    margin-left: 5px;
    padding: 2px 8px;
    letter-spacing: 0;
    opacity: 1;
}

/* 必須マーク
#label_template_new_dialog_name::after {
  content: "必須";
  font-size: 10px;
  color: #FFFFFF;
  background: #FF7A7A 0% 0% no-repeat padding-box;
  border-radius: 2px;
  width: 36px;
  height: 13px;
  margin-left: 5px;
  padding: 2px 8px 2px 8px;
  letter-spacing: 0px;
  opacity: 1;
} */

/* -------------------- */

/* ▼モーダル */

/* -------------------- */

/* --モーダルの閉じるボタン(閉じる)-- */
.modal-header button.btn-outline-secondary:last-child {
    /* width: 59px; */
    height: 32px;

    /* background-color: var(--modal-hide-button-background-color); */

    /* color: #FFFFFF; */
    font-size: 13px;
    padding: 6px;
    margin-left: 18px;
    margin-right: 18px;
}

/* -------------------- */

/* ▼画面共通コンポーネント系 */

/* -------------------- */

/* テンプレート一覧ボタン */

/* タスク新規登録ボタン */
.common_add_button {
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
}

/* 詳細画面を開くボタン */
.common_show_detail_button {
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
    font-size: 12px;
    width: 107px;
    height: 32px;
    padding: 6px;
}

/* タスク追加ボタンのスタイル */
#button_add_task {
    background-color: #fff;
    margin-top: 15px;
}

/* アウトラインボタンデザイン(最小横幅107px/フォント12px) btn/btn-outline-secondaryとあわせて利用する想定 */
.members_outline_107_12_btn {
    background-color: transparent;
    color: var(--main-color);
    border-color: var(--main-color);
    font-size: 12px;
    padding: 6px 11px 5px 10px;
    min-width: 107px;
}

/* アウトラインボタン、タスク新規登録、詳細画面を開くボタン:フォーカス時 */
.common_show_detail_button:not(:disabled, .disabled):focus,
.common_add_button:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
}

.members_outline_107_12_btn:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent;
    color: var(--main-color);
    border-color: var(--main-color);
}

/* アウトラインボタン、タスク新規登録、詳細画面を開くボタン:ホバー時 */
.common_show_detail_button:not(:disabled, .disabled):hover,
.common_add_button:hover,
.members_outline_107_12_btn:hover {
    background-color: rgb(25 162 170 / 20%) !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

/* アウトラインボタン、タスク新規登録、詳細画面を開くボタン:クリック時 */
.common_show_detail_button:not(:disabled, .disabled):active,
.common_add_button:active,
.members_outline_107_12_btn:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: rgb(25 162 170 / 50%) !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

/* キャンセルボタン */
.common_cancel_button {
    background-color: var(--modal-hide-button-background-color);
    color: #fff;
    border-color: var(--modal-hide-button-background-color);
    font-size: 13px;
    width: 100px;
    height: 32px;
}

/* キャンセルボタン:フォーカス時 */
.common_cancel_button:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--modal-hide-button-background-color);
    color: #fff;
    border-color: var(--modal-hide-button-background-color);
}

/* キャンセルボタン:ホバー時 */
.common_cancel_button:hover {
    background-color: var(--modal-hide-button-background-color) !important;
    color: #fff !important;
    border-color: var(--modal-hide-button-background-color) !important;
    opacity: 0.7 !important;
}

/* キャンセルボタン:クリック時 */
.common_cancel_button:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #707070 !important;
    color: #fff !important;
    border-color: #707070 !important;
}

/* --実行ボタン-- */
.common_action_button {
    background-color: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

/* --保存、送信ボタン-- */
.common_save_button,
.common_regist_button {
    background-color: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
    width: 100px;
    height: 32px;
    font-size: 13px;
}

/* 実行ボタン、送信ボタン、保存ボタン:フォーカス時 */
.common_action_button:focus,
.common_regist_button:focus,
.common_save_button:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

/* 実行ボタン、送信ボタン、保存ボタン:ホバー時 */
.common_action_button:hover,
.common_regist_button:hover,
.common_save_button:hover {
    background-color: rgb(25 162 170 / 70%) !important;
    color: #fff !important;
    border-color: rgb(25 162 170 / 70%) !important;
}

/* 実行ボタン、送信ボタン、保存ボタン:クリック時 */
.common_action_button:active,
.common_regist_button:active,
.common_save_button:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #00747b !important;
    color: #fff !important;
    border-color: #00747b !important;
}

/* handling register btn disabled condition */
.common_save_button:disabled,
.common_save_button[disabled] {
    border: 1px solid #19a2aa !important;
    background-color: #19a2aa !important;
    color: #fff !important;
}

/* ×ボタン */
.common_close_button {
    border: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-image: url('/img/common/c_cross_gy.png');
    background-repeat: no-repeat;
    background-position: center;
    float: right;
}

/* ×ボタン:フォーカス時 */
.common_close_button:focus {
    outline: none !important;
    box-shadow: none !important;
}

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

/* ×ボタン:クリック時 */
.common_close_button:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #b9b9b9 !important;
    border-radius: 50% !important;
}

/* タスクアコーディオン制御ボタン */
#task_item_toggle_btn,
#task_toggle {
    border: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-image: url('/img/common/arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    float: right;
}

/* タスクアコーディオン制御ボタン */
#task_item_toggle_btn:focus,
#task_toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* タスクアコーディオン制御ボタン */
#task_item_toggle_btn:hover,
#task_toggle:hover {
    background-color: #d6d6d6 !important;
    border-radius: 50% !important;
}

/* 削除ボタン */
.common_delete_button {
    background-color: #fff;
    color: var(--delete-button-color);
    border-color: var(--delete-button-color);
    width: 57px;
    height: 32px;
    border-radius: 5px;
    font-size: 12px;
}

/* 削除ボタン:フォーカス時 */
.common_delete_button:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: #fff;
    color: var(--delete-button-color);
    border-color: var(--delete-button-color);
}

/* 削除ボタン:ホバー時 */
.common_delete_button:hover {
    background-color: #e0e0e0 !important;
    color: var(--delete-button-color) !important;
    border-color: var(--delete-button-color) !important;
}

/* 削除ボタン:クリック時 */
.common_delete_button:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #b9b9b9 !important;
    color: var(--delete-button-color) !important;
    border-color: var(--delete-button-color) !important;
}

/* 削除ボタン:無効(disabled)時 */
.common_delete_button:disabled,
.common_delete_button[disabled] {
    background-color: #e0e0e0 !important;
    color: var(--delete-button-color) !important;
    border-color: var(--delete-button-color) !important;
}

/* ファイル選択ボタン */
.common_image_select_button {
    background-color: var(--file-select-background-color);
    color: var(--delete-button-color);
    border-color: var(--file-select-border-color);
    font-size: 11px;
    width: 103px;
    height: 32px;
}

/* ファイル選択ボタン:フォーカス時 */
.common_image_select_button:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--file-select-background-color);
    color: var(--delete-button-color);
    border-color: var(--file-select-border-color);
}

/* ファイル選択ボタン:ホバー時 */
.common_image_select_button:hover {
    background-color: rgb(239 239 239 / 20%) !important;
    color: var(--delete-button-color) !important;
    border-color: var(--file-select-border-color) !important;
}

/* ファイル選択ボタン:クリック時 */
.common_image_select_button:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: #b3b3b3 !important;
    color: var(--delete-button-color) !important;
    border-color: #b3b3b3 !important;
}

/* マイナス(削除)アイコンボタン */
.common_remove_icon_button {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #fff 0% 0% no-repeat padding-box;
    border-radius: 50%;
    border: 1px solid #ff7a7a;
}

.common_remove_icon_button::before,
.common_remove_icon_button::after {
    position: absolute;
    top: 9px;
    left: 50%;
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 1px solid #ff7a7a;
    transform: translateX(-50%);
}

/* マイナス(削除)アイコンボタン:フォーカス時 */
.common_remove_icon_button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* マイナス(削除)アイコンボタン:ホバー時 */
.common_remove_icon_button:hover {
    background-color: rgb(255 122 122 / 20%) !important;
}

/* マイナス(削除)アイコンボタン:クリック時 */
.common_remove_icon_button:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: rgb(255 122 122 / 50%) !important;
}

/* ファイル添付ボタンのCSS */
.common_file_btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--delete-button-color) !important;
    border-radius: 5px;
    background-image: url('/img/common/c_paperclip_gy.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-color: #fff;
}

/* コメントToボタンのCSS */
.comment_to_btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--delete-button-color) !important;
    border-radius: 5px;
    color: var(--delete-button-color);
    background: none !important;
    background-color: #fff;
    padding: 0;
}

.comment_to_btn:focus,
.common_file_btn:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

.comment_to_btn:hover,
.common_file_btn:hover {
    border: 1px solid var(--delete-button-color) !important;
    background-color: var(--delete-button-hover-background-color) !important;
}

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

/* 添付ファイルイメージの×ボタン */
.del_upload_file_image {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #fff;
    background-color: #000;
    border-radius: 15px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 22px;
}

.del_upload_file_image:hover {
    color: #fff;
    opacity: 0.7;
}

.del_upload_file_image.disabled {
    background-color: #b9b9b9;
    pointer-events: none;
}

/* -------------------- */

/* スタイル上書き
/* -------------------- */
.wj-multi-autocomplete .wj-token {
    background-color: #e6f3f4 !important;
}

/* Wijmo flexgridの選択時背景色の設定 */
.wj-state-selected,
.wj-state-multi-selected {
    background-color: #e6f3f4 !important;
    color: #000 !important;
}

/* 設計系共通タイトル */
.setting_title {
    vertical-align: middle;
}

.setting_title_letter {
    font-size: 18px;
    font-weight: bold;
    color: var(--contents-color);
    vertical-align: top;
}

.setting_title_letter_sub {
    text-align: left;
    font: 14px;
    color: var(--contents-color);
}

.setting_title_icon {
    margin-right: 0.5em;
}

.task_create_modal_body,
.project_create_modal_body,
.member_add_modal_body,
.group_create_modal_body {
    background-color: var(--contentsbase);
}

/* 件数表示 */
.row-count-block {
    font-size: 18px;
    left: 13px;
}

.row-count-block-on-label {
    font-size: 100%;
}

.datetimepicker-input.form-control[readonly] {
    background-color: #fff;
}

/* ↓Bootstrapのチェックボックス/ラジオボタン色変更↓ */

/* チェックボックス/ラジオボタンのフォーカス時box-shadow除去 */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

/* チェックボックス＆ラジオボタンのラベルフォントサイズを11pxにしている箇所用のラベル配置調整 */
.min-font-custom-control-label {
    padding-top: 4px;
}

/* ラジオボタンの調整大きさ */
.custom-radio .custom-control-label::before {
    top: 0.25rem;
}

.custom-radio .custom-control-label::after {
    top: -0.25rem;
    left: -2rem;
    width: 2rem;
    height: 2rem;
}

/* チェックボックスの色 */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--main-color);
}

/* ラジオボタンの色 */
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3ccircle cx='16' cy='16' r='14' fill='%23fff'/%3e%3ccircle cx='16' cy='16' r='11' fill='%2319A2AA'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--main-color);
}

/* ↑Bootstrapのチェックボックス/ラジオボタン色変更↑ */

/* ↓Wijmo Selector部分/MultiSelectのチェックボックス色変更↓ */

/* 標準のチェックボックスを非表示化 */
.wj-flexgrid .wj-cell input.wj-column-selector[type='checkbox'],
.wj-listbox-item input[type='checkbox'] {
    visibility: hidden;
}

/* チェックボックスの枠作成＆配置(Wijmo Selector) */
.wj-flexgrid .wj-rowheaders .wj-cell label span,
.wj-flexgrid .wj-topleft .wj-cell label span {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 15px;
    width: 15px;
    background-color: white;
    border: 1px solid var(--checkbox-border-color);
    border-radius: 2px;
}

/* チェックボックスの枠作成＆配置(Wijmo ListItem(MultiSelect系)) */
.wj-listbox-item label span {
    position: relative;
    top: 10px;
    right: 5px;
    transform: translate(-50%, -50%);
    height: 15px;
    width: 15px;
    background-color: white;
    border: 1px solid var(--checkbox-border-color);
    border-radius: 2px;
}

/* Wijmo ListItem(MultiSelect"全て選択")のみ、spanの中にテキストが埋め込まれるため、無理やりラベル側に記載。(本体はselectAllLabelで空文字設定すること) */
.wj-multiselectlistbox > .wj-listbox > .wj-listbox-item label::after {
    content: 'すべて表示';
}

/* チェックボックスのチェック時の色付け */
.wj-flexgrid .wj-cell label input.wj-column-selector:checked ~ span,
.wj-flexgrid .wj-cell label input.wj-column-selector:indeterminate ~ span,
.wj-listbox-item input:checked ~ span {
    background-color: var(--main-color);
}

/* チェックボックスのチェックマーク */
.wj-flexgrid
    .wj-rowheaders
    .wj-cell
    label
    input.wj-column-selector:checked
    ~ span::after,
.wj-flexgrid
    .wj-topleft
    .wj-cell
    label
    input.wj-column-selector:checked
    ~ span::after,
.wj-listbox-item input:checked ~ span::after {
    content: '';
    position: absolute;
    left: 4px;
    bottom: 2.5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* チェックボックスのハイフン表示 */
.wj-flexgrid
    .wj-rowheaders
    .wj-cell
    label
    input.wj-column-selector:indeterminate
    ~ span::after,
.wj-flexgrid
    .wj-topleft
    .wj-cell
    label
    input.wj-column-selector:indeterminate
    ~ span::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 2px;
    width: 75%;
    height: 3px;
    border-top: 2px solid white;
    display: block;
}

/* ↑Wijmo Selector部分/MultiSelectのチェックボックス色変更↑ */

/* ↓Wijmo FlexGridの左端のヘッダー扱い列の背景色変更↓ */
.wj-flexgrid .wj-rowheaders .wj-cell {
    background: #fff !important;
}

/* ↑Wijmo FlexGridの左端のヘッダー扱い列の背景色変更↑ */

/* ↓Wijmo FlexGridヘッダーソートアイコンの制御↓ */
.wj-flexgrid .wj-cell.wj-header.wj-sort-asc .custom-sort {
    display: none;
}

.wj-flexgrid .wj-cell.wj-header.wj-sort-desc .custom-sort {
    display: none;
}

.wj-align-left {
    text-align: left;
}

.sort_default_icon {
    width: 9px;
    height: auto;
    margin-left: 3px;
    margin-bottom: 4px;
}

/* ↑Wijmo FlexGridヘッダーソートアイコンの制御↑ */

/* ↓bootstrap-multiselectのデザイン調整↓ */

/* アイコン変更 */
.custom-select {
    background: #fff url('/img/common/b_underarrow_eg.png') no-repeat right 3px
        center/24px 24px;
}

/* "全て"の行の下に線を引く */
a.multiselect-all {
    border-bottom: 1px solid var(--checkbox-border-color);
}

/* "全て"の行の文字を普通に戻す */
a.multiselect-all > span > label {
    font-weight: 400 !important;
    font-size: unset !important;
}

/* ドロップダウン領域内の文字("全て"以外)に他の箇所でのフォントサイズ調整の影響が飛び火しないように解除設定 */
a.multiselect-option > span > label {
    font-size: unset !important;
}

/* チェックボックスデザインを変更(bootstrapのcustom-control/custom-control-input/custom-control-labelのCSS参考に作成) */
.multiselect-option > .form-check,
.multiselect-all > .form-check {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 1.5rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

.multiselect-option > .form-check > .form-check-input,
.multiselect-all > .form-check > .form-check-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.multiselect-option
    > .form-check
    > .form-check-input:checked
    ~ .form-check-label::before,
.multiselect-all
    > .form-check
    > .form-check-input:checked
    ~ .form-check-label::before {
    background-color: var(--main-color);
    border-color: var(--checkbox-border-color);
}

.multiselect-option > .form-check > .form-check-label,
.multiselect-all > .form-check > .form-check-label {
    position: relative;
    margin-bottom: 0;
    margin-left: -1.2rem;
    vertical-align: top;
    width: 110%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 1.4rem;
}

.multiselect-option > .form-check > .form-check-label::before,
.multiselect-all > .form-check > .form-check-label::before {
    position: absolute;
    top: 0.2rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: '';
    background-color: #fff;
    border: var(--checkbox-border-color) solid 1px;
    border-radius: 0.25rem;
}

.multiselect-option > .form-check > .form-check-label::after,
.multiselect-all > .form-check > .form-check-label::after {
    position: absolute;
    top: 0.2rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: '';
    background: no-repeat 50% / 50% 50%;
}

.multiselect-option
    > .form-check
    > .form-check-input:checked
    ~ .form-check-label::after,
.multiselect-all
    > .form-check
    > .form-check-input:checked
    ~ .form-check-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

/* 選択情報が枠外に飛び出さないようにする設定 */
.multiselect-selected-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-container.dropdown-menu {
    width: 100%;
}

/* ↑bootstrap-multiselectのデザイン調整↑ */

/* -------------------- */

/* ▼レスポンシブ(スマホ)の装飾 */

/* -------------------- */

/* navbar-expand-mdにしているので768px以上でPC表示とする */
@media screen and (min-width: 375px) and (max-width: 576px) {
    /* スマホ表示 */
    .col-sm-49 {
        flex: 0 0 39.5833%;
        max-width: 39.5833%;
    }

    .col-sm-50 {
        flex: 0 0 30%;
        max-width: 30%;
        padding-left: 0;
    }

    .col-49 {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .col-50 {
        flex: 0 0 27%;
        max-width: 27%;
        padding-left: 0;
    }

    .col-51 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .col-52 {
        flex: 0 0 30%;
        max-width: 30%;
        padding: 0 15px 0 0;
    }
}

@media screen and (min-width: 577px) and (max-width: 767px) {
    /* タブレット表示 */
    .col-sm-49 {
        flex: 0 0 39.5833%;
        max-width: 39.5833%;
    }

    .col-sm-50 {
        flex: 0 0 30%;
        max-width: 30%;
        padding-left: 0;
    }

    .col-49 {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .col-50 {
        flex: 0 0 27%;
        max-width: 27%;
        padding-left: 0;
    }

    .col-51 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .col-52 {
        flex: 0 0 30%;
        max-width: 30%;
        padding: 0 15px 0 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* タブレット表示 */
    .col-sm-49 {
        flex: 0 0 39.5833%;
        max-width: 39.5833%;
    }

    .col-sm-50 {
        flex: 0 0 29%;
        max-width: 29%;
        padding-left: 0;
    }

    .col-49 {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .col-50 {
        flex: 0 0 27%;
        max-width: 27%;
        padding-left: 0;
    }

    .col-51 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .col-52 {
        flex: 0 0 30%;
        max-width: 30%;
        padding: 0 15px 0 0;
    }
}

@media screen and (min-width: 992px) {
    /* PC表示 */

    /* ヘッダーのタスク作成の日時入力 */
    .col-sm-49 {
        flex: 0 0 41.6667%;
        max-width: 41.6667%;
    }

    .col-sm-50 {
        flex: 0 0 16%;
        max-width: 16%;
        padding-left: 0;
    }

    /* スライドのタスク日時入力 */
    .col-49 {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .col-50 {
        flex: 0 0 27%;
        max-width: 27%;
        padding-left: 0;
    }

    /* 詳細のタスク日時入力 */
    .col-51 {
        flex: 0 0 47%;
        max-width: 47%;
    }

    .col-52 {
        flex: 0 0 20%;
        max-width: 20%;
        padding: 0 15px 0 0;
    }
}

/* bootstrap4-multiselect select box 読み込み中のサイズ調整 */
.multiselect_select_box_max_height {
    max-height: calc(1.6em + 0.75rem + 2px);
}

/* 2021.12.10 改修後問題なければ削除 */

/* .modal-open { */

/* position: fixed; */

/* } */

@font-face {
    font-family: 'demo';
    src:
        url('/fonts/icons.woff') format('woff'),
        url('/fonts/icons.ttf') format('truetype');
}

@keyframes loading-start {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading {
    position: relative;
    pointer-events: none;
    background: #f4f2ef;
    z-index: 25555;
}

.loading .loading-overlay {
    position: absolute;
    inset: 100px 0 0;
    animation: loading-start 3s 300ms linear 1 both;
    background: #f4f2ef;
    text-align: center;
}

.loading .loading-text,
.loading-whole .loading-text {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    text-shadow:
        white 0 0 1em,
        white 0 0 0.5em,
        white 0 0 0.25em;
    position: relative;
    display: none;
    text-transform: uppercase;
    font-weight: bold;
}

.loading .loading-text::after,
.loading-whole .loading-text::after {
    content: '...';
}

.loading .loading-spinner {
    color: #19a2aa;
    text-align: center;
}

.loading .loading-icon,
.loading-whole .loading-icon {
    position: absolute;
    inset: 50% 0 0;
    margin: -3.9375rem auto 0;
    width: 80px;
    height: 80px;
    background-image: url('/img/animation-logo.gif');
    background-position: center;
    background-size: cover;
}

.loading-whole {
    position: relative;
    pointer-events: none;
    background: #f4f2ef;
    z-index: 100;
}

.loading-whole .loading-overlay {
    position: absolute;
    inset: 0;
    background: #f4f2ef;
    text-align: center;
    z-index: 10;
}

.loading-whole .loading-spinner {
    position: fixed;
    inset: 0;
    color: #19a2aa;
    text-align: center;
}

.loading-bghide {
    visibility: hidden;
}

td.client_name_hidden {
    visibility: hidden;
}

.name-max-width {
    max-width: 560px;
}

.name-max-width-modal {
    max-width: 260px;
}

.active-color {
    color: #19a2aa;
}

/* プレビューモーダル */
.preview-modal-open {
    overflow: hidden;
}

.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgb(0 0 0);
    padding: 16px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    box-sizing: border-box;
    z-index: 2000;
}

.preview-modal.active {
    opacity: 1;
    visibility: visible;
}

.preview-modal-header {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.preview-modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 90%;
}

.preview-modal-content {
    background: #fff;
    text-align: left;
    padding: 30px;
}

.preview-modal-dl {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.preview-modal-close {
    background-color: transparent;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.preview-modal-body img {
    display: none;
}

.preview-modal-body .embed-responsive {
    display: none;
}

.preview-modal-body .embed-responsive-item {
    display: none;
}

.evaluation-tag-selection-modal-body {
    background-color: var(--contentsbase);
}

.evaluation-tag-selection-modal-body label {
    font-size: 14px;
}