html {
    font-size: 14px;
    background-color:rgb(248, 249, 250);
}

@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 {
    overflow: hidden;
}

header body footer {
    color: #343541 !important;
    background-color: #f7f7f8 !important;
}

.pushed-button {
    opacity: 0.8;
    transition: opacity 0.2s;  /*変化をスムーズにする */
}

.hand-cursor {
    cursor: pointer;
}

/*.table td {
    white-space: nowrap;
}*/

.no-wrap {
    white-space: nowrap;
}

.no-border {
    border: none !important;
}

.sidebar_fixed {
    position: sticky;
    top: 60px;
}

.sidebar_content {
    margin-bottom: 100px;
}
.side-menu{
    width: 150px;
    z-index: 1;
}

.disable-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
}

main {
    transition: 0.3s all ease;
}
.side-menu {
    transition: 0.3s all ease;
}
.side-nav-link {
    transition: 0.3s all ease;
}

/* 詳細を初めは非表示にする */
.hover-container .details {
    display: none;
}

/* ホバー時に詳細を表示 */
.hover-container:hover .details {
    display: block;
}

.action-list-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #CCCCCC;
    transition: 0.3s all ease;
}

.move-animation {
    transition: 0.3s all ease;
}

.customer-detail-table {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e7e7e8;
    background: #ffffff;
}

    .customer-detail-table dt {
        border-bottom: 1px solid #e7e7e8;
    }

.action-item{
    border: 1px solid #e7e7e8;
    background: #ffffff;
    padding: 0.5rem;
}

.show {
    display: block!important;
}
.hide {
    display: none !important;
}
.show-table {
    display: table-row !important;
}

.mb-300{
    margin-bottom: 600px!important;
}

.bg-yellow {
    background-color: #ffe4b5!important;
}

/* 点滅 */
.blink {
    animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.management::after {
    content: none !important; /* 矢印を非表示にする */
}

.fire {
    background: linear-gradient(-45deg, #ffcccc, #ff9999, #ffcccc, #ff9999) fixed;
    background-size: 400% 400%;
    animation: FlameAnimation 7s ease infinite;
}

@keyframes FlameAnimation {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.fire-font-over-24 {
    animation: color-change 2s linear infinite;

}

@keyframes color-change {
    0%,100% {
        color: #ff1493;
    }

    25% {
        color: #7fff00;
    }

    50% {
        color: #0091EA;
    }

    75% {
        color: #9400d3;
    }
}

.balloon1 {
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #DBFFDB;
}

    .balloon1:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #DBFFDB;
    }

    .balloon1 p {
        margin: 0;
        padding: 0;
    }

.message-text {
    display: inline-block;
    border-radius: 1rem;
}

.chat {
    max-width: 700px;
    margin: 0 auto;
}

.message-icon {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.claim-message {
    margin-left: 15px;
    max-width: 80%;
}

.cope-message {
    float: right;
    margin-right: 15px;
    max-width: 80%;
}

.complain-box-container {
    width: 300px; /* 固定サイズを指定 */
    overflow-x: scroll; /* X軸のスクロールを有効にする */
    white-space: nowrap; /* テキストを改行させないようにする */
}





.col_2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

    .col_2 > * {
        width: calc( 50% - 6px );
        margin-right: 12px;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    .col_2 > *:nth-child(2n) {
            margin-right: auto;
    }

@media screen and (max-width: 1205px) {
    .col_2 > * {
        width: 100%;
        margin-right: 20px;
    }
    .col_2 > *:nth-child(2n) {
        margin-right: 20px;
    }
}

/*disable風の背景色に使用*/
.disabled-background-col {
    background: #cccccc;
    pointer-events: none;
}

.customer-info-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 70px;
    width: calc(100% - 150px);
    z-index: -1;
}

.my-footer {
    position: absolute;
    bottom: 0;
    height: 70px;
    z-index: -1;
}



.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}



.tab-nav-link:hover {
    isolation: isolate;
    background-color: rgb(245,245,245);
    border: 1px solid rgb(233,236,239);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tab-nav-link {
    height: 2.5em;
    padding: 8px 16px;
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: 1px solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
}


.nav-tabs {
    border-bottom:none;
}

input[readonly]:focus,
textarea[readonly]:focus {
    outline: none;
    box-shadow: none;
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: #ffffff;
}

.body-footer {
    transition: 0.3s all ease;
}

input:focus {
    z-index: 0;
}

/* 以下サンプル */

.mobile-show-inline {
    display: none;
}

.mobile-show-col {
    display: none;
}

.action-btn {
    width: 100%;
}

.action-table i {
    margin-right: 3px;
}

.option-body {
    overflow: auto;
}


.blinkDanger {
    animation: blinkAnime 1s ease infinite alternate;
}

@keyframes blinkAnime {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

/* モバイル端末のみ表示 */
.for-mobile {
    display: none;
}

/* モバイル端末以外に表示 */
.not-for-mobile {
    display: block;
}

@media (max-width: 768px) {
    .for-mobile {
        display: block;
    }

    .not-for-mobile {
        display: none !important;
    }

    .option-body {
    }

    .action-table th {
        display: none;
    }

    .action-table tr, .action-table td {
        display: block;
    }

    .action-table th, .action-table tr, .action-table td {
        border: none;
    }

    .mobile-hide-col {
        display: none !important;
    }

    .mobile-show-col {
        display: block;
    }

    .mobile-show-inline {
        display: inline;
    }

    .mobile-show-wide-col {
        width: 100%;
    }

    .mobile-bold {
        font-weight: bold;
    }
}

/* サイドバーのホーバー */
#SideMenu .nav-item:hover {
    background-color: #f5f5f5;
}

#SideMenu .nav-item .nav-link {
    color: white;
    text-decoration: none;
}

#SideMenu .nav-item:hover .nav-link {
    color: black;
}

#SideMenu .nav-item.active {
    background-color: #f5f5f5;
}

#SideMenu .nav-item.active .nav-link {
    color: black;
}

#SideMenu .side-nav-link {
    width: 100%;
}


/* navbarのホーバー */
.nav-item:hover{
    background-color: #F1EFEF ;
}
.nav-link.text-white:hover {
    color: lightgray !important;
}
.nav-link.text-dark:hover {
    color: lightgray !important;
}

.nav-item.active {
    background-color: #F1EFEF;
}
.nav-item.active.nav-link {
    color: white;
}
.dropdownhover:hover {
    background-color: #F1EFEF;
}


/* 20231124 */
/* NavBarのボタン用 */
.no-focus {
    outline: none !important;
    box-shadow: none !important;
}

.option-detail-btn:focus, .option-detail-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.notice-tag {
    padding-top: 1rem !important;
}

.notice-tag span.today {
    position: absolute;
    top: -25px;
    left: -10px;
    transform: translateX(-.3em) rotate(-5deg);
    padding: 5px;
    border-right: 2px dotted rgb(0 0 0 / 10%);
    border-left: 2px dotted rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px rgb(0 0 0 / 30%);
    background-color: rgb(0 0 255 / 80%);
    font-weight: 600;
    color: white;
}

.notice-tag span.completed-day {
        position: absolute;
        top: -25px;
        left: -10px;
        transform: translateX(-.3em) rotate(-5deg);
        padding: 5px;
        border-right: 2px dotted rgb(0 0 0 / 10%);
        border-left: 2px dotted rgb(0 0 0 / 10%);
        box-shadow: 0 0 5px rgb(0 0 0 / 30%);
        background-color: rgb(0 0 255 / 80%);
        font-weight: 600;
        color: white;
}

.notice-tag span.near {
    position: absolute;
    top: -25px;
    left: -10px;
    transform: translateX(-.3em) rotate(-5deg);
    padding: 5px;
    border-right: 2px dotted rgb(0 0 0 / 10%);
    border-left: 2px dotted rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px rgb(0 0 0 / 30%);
    background-color: rgb(255 0 0 / 80%);
    font-weight: 600;
    color: white;
}

.unsupported-action {
    margin-bottom: 3px;
}

.action-icons {
    text-align: center;
}

.action-arrow {
    margin-top: 2em;
}

.action-arrow > .bi-arrow-right {
    display: block;
}

.action-arrow > .bi-arrow-down {
    display: none;
}

.action-arrow-estate {
    margin-top: 1.9em;
}

.action-arrow-estate > .bi-arrow-right {
    display: block;
}

.action-arrow-estate > .bi-arrow-down {
    display: none;
}

#OptionListBody .profile-pic {
    height: 20px;
    width: auto;
    border-radius: 50%;
    margin-top: -3px;
}

#OptionListHeader .profile-pic {
    height: 20px;
    width: auto;
    border-radius: 50%;
    margin-top: -3px;
    margin-right: -3px;
    margin-left: 2px;
}

/* スマホ版のナビバーの時だけ表示 */
.only-nav-sm {
    display: none !important;
}

@media (max-width: 575px) {
    /* スマホ版のナビバー */
    .nav-sm {
        display: flex !important;
    }
    /* スマホ版のナビバー時は非表示 */
    .nav-sm-none {
        display: none !important;
    }
    /* スマホ版のナビバーの時だけ表示 */
    .only-nav-sm {
        display: block !important;
    }

}

@media (max-width: 768px) {


    .danger-action, .danger-action > .card,
    .unsupported-action, .unsupported-action > .card,
    .supporting-action, .supporting-action > .card,
    .finished-action, .finished-action > .card,
    .danger-action, .danger-action  > .card {
        width: 100%;
    }

    .unsupported-action{
        margin-bottom:0px;
    }

    .boxHeight-estate {
        min-height: 0 !important;
    }

    .action-icons {
        text-align: left;
    }

    .action-arrow {
        margin-top: 0;
        width: 100%;
        margin-left: 0.5em;
        margin-right: 0.5em;
        text-align: center;
    }

    .action-arrow > .bi-arrow-down {
        display: block;
    }

    .action-arrow > .bi-arrow-right {
        display: none;
    }

    .action-arrow-estate {
        margin-top: 0;
        width: 100%;
        margin-left: 0.5em;
        margin-right: 0.5em;
        margin-top: 0;
        text-align: center;
    }

    .action-arrow-estate > .bi-arrow-down {
        display: block;
    }

    .action-arrow-estate > .bi-arrow-right {
        display: none;
    }

    #OptionListBody .profile-pic {
        height: 32px;
        margin-top: 0;
    }

    /*案件情報一覧*/
    #CustomerInfoListBody thead,
    #CustomerInfoListHeader .explanatory-note,
    #CustomerInfoListBody .today,
    #CustomerInfoListBody .near,
    #CustomerInfoListBody .t-CustomerNumber,
    #CustomerInfoListBody .t-EmailAddress1,
    #CustomerInfoListBody .t-PhoneNumber1,
    .option-layout > .blank-table,
    .estate-layout > .blank-table {
        display: none;
    }
    .customer-table-row > td,
        .customer-table-row > td > div{
        white-space: nowrap;
    }
    /*1) オプション会社の画面*/
    .notice-tag {
        padding-top: 0 !important;
    }

    .notice-tag > .mb-2{
      padding: 0.2rem !important;
      margin: 0.1rem !important;
    }

}

.required-mark {
    text-align: center;
    border-radius: 0.375rem;
    padding: 1px;
    font-size: 0.75em;
    width: 35px;
    background-color: red;
    color: white;
    margin-left: 5px;
    margin-bottom: 3px;
}


/* table-striped の2行、3行毎のCSS */
.table-striped-2span > tbody > tr:nth-of-type(4n+1) > td,
.table-striped-2span > tbody > tr:nth-of-type(4n+2) > td {
    background-color: var(--bs-table-striped-bg);
}

.table-striped-3span > tbody > tr:nth-of-type(6n+1) > td,
.table-striped-3span > tbody > tr:nth-of-type(6n+2) > td,
.table-striped-3span > tbody > tr:nth-of-type(6n+3) > td {
    background-color: var(--bs-table-striped-bg);
}

/* 自力でtable-stripedをする場合のクラス */
.table-striped-row > td {
    background-color: var(--bs-table-striped-bg);
}

/* form-control 相当の左側の角丸 */
.left-radius-form-control {
    margin-left: 0;
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}


/*更新中、アップロード中*/
#loading {
    background: rgba(0, 0, 0, .5);
    z-index: 10000;
}

/*顧客情報の電話番号バリデーションエラー*/
@media (max-width: 675px) {
    .phone_invalid {
        display: none;
    }
}

/* ========================================================================= */
/* 案件一覧 */
/* ========================================================================= */
.option-row-left {
    margin: 0.5em 1em 0.5em 1em;
    width: 10em;
}

.option-row-left div {
    word-break: break-all;
}

/* ========================================================================= */
/* 社内/社外タグ                                                             */
/* ========================================================================= */

.public-tag {
    width: 3em;
    font-size: 0.75rem;
    background-color: #1e7e34;
    color: white;
    display: inline-block;
}

.public-comment-tag {
    width: 6em;
    font-size: 0.8rem;
    background-color: #1e7e34;
    color: white;
    display: inline-block;
}

.private-tag {
    width: 3em;
    font-size: 0.75rem;
    background-color: #e67e22;
    color: white;
    display: inline-block;
}

.private-comment-tag {
    width: 6em;
    font-size: 0.8rem;
    background-color: #e67e22;
    color: white;
    display: inline-block;
}

/* ========================================================================= */
/* 既読/未読タグ                                                             */
/* ========================================================================= */

.read-tag {
    width: 3em;
    font-size: 0.75rem;
    background-color: #1e7e34;
    color: white;
    display: inline-block;
}

.unread-tag {
    width: 3em;
    font-size: 0.75rem;
    background-color: white;
    color: black;
    display: inline-block;
}


/* ========================================================================= */
/* 社内/社外 テキストエリア                                                  */
/* ========================================================================= */

.internal-area {
    background-color: #e6ae2233;
}

.internal-area:focus {
    background-color: #e6ae2233;
}

.external-area {
    background-color: #1e7e272e;
}

.external-area:focus{
    background-color: #1e7e272e;
}

/* ========================================================================= */
/* コメント                                                                  */
/* ========================================================================= */
#MentionUsers,
#MentionExternalUsers {
    max-height: 10rem;
    overflow: auto;
}

#MentionUserDropdownList,
#MentionExternalUserDropdownList {
    max-height: 10rem;
    overflow: auto;
}

.mention-profile {
    height: 21px;
    width: auto;
    border-radius: 50%;
}

.mention-not-confirmed {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: grayscale(1); /* W3C */
    color: lightgray;
}

::-ms-reveal {
    display: none;
}

/* ========================================================================= */
/* 「担当部署・担当者」ダイアログの各ツリーの高さを固定                      */
/* ========================================================================= */
.department-tree,
.user-tree.treeview {
    overflow: auto;
    background-color: white;
    min-height: 30vh;
    max-height: 30vh;
}

/* ========================================================================= */
/* Wijmoコントロールの見た目をBootstrapに合わせる                            */
/* ========================================================================= */
#theMultiSelect .wj-input-group input[wj-part="input"] {
    display: none !important;
}

#theMultiSelect .wj-input-group-btn .wj-btn {
    border-left: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
    padding: 6px !important;
    width: 3rem !important;
    padding-left: 10px !important;
    margin-right: 10px !important;
    text-align: left !important;
}

#theMultiSelect .wj-input-group-btn .wj-btn:hover {
    background-color: transparent !important;
}

#theMultiSelect .wj-input-group-btn .wj-btn .wj-glyph-down {
    display: none !important;
}

.empty-message {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: gray;
    font-size: 16px;
    display: none;
}


/* ========================================================================= */
/* 「コメント」「トラブル情報」                                              */
/* ========================================================================= */
.edited-comment {
    color: gray;
    font-size: 80%;
    margin-left: 10px;
    user-select: none;
}

.edited-comment-action {
    color: gray;
    font-size: 80%;
    user-select: none;
}

.deleted-comment {
    color: gray;
    margin-left: 5px;
    user-select: none;
}

/* ========================================================================= */
/* 表のヘッダー                                                              */
/* ========================================================================= */

th.datetime-col {
    width: 170px;
    text-align: center;
    vertical-align: middle;
}

th.ispublic-col {
    width: 74px;
    text-align: center;
    vertical-align: middle;
}

th.edit-btn-col {
    width: 50px;
    text-align: center;
    vertical-align: middle;
}

th.delete-check-col {
    width: 80px;
    text-align: center;
    vertical-align: middle;
}


/* ========================================================================= */
/* アラートの画面サイズ対応                                                  */
/* ========================================================================= */

.responsive-alert {
    width: 90%;
}

@media (min-width: 768px) {
    .responsive-alert {
        width: 400px;
    }
}


/* ========================================================================= */
/* 通知用チェックボックス                     　                             */
/* ========================================================================= */

.notification-check {
    border: none;
}

    .notification-check:hover {
        text-decoration: none;
    }

    .notification-check:focus {
        box-shadow: none;
    }

    .notification-check input[type="checkbox"] {
        accent-color: #404040;
        outline: none;
    }


/* ========================================================================= */
/* ファイルのリンクのドロップダウン           　                             */
/* ========================================================================= */

.link-dropdown.show {
    display: inline-block !important;
}

    .link-dropdown-item:hover {
        background-color: #CCCCCC;
    }


/* ========================================================================= */
/* コメントIDのリンクのコピーを行うボタン    　                             */
/* ========================================================================= */
.copy-comment-url {
    color: #444444;
    text-decoration: none;
}

    .copy-comment-url:hover {
        color: #000000;
        text-decoration: underline;
    }

/* ========================================================================= */
/* リンクから遷移したコメントのハイライト     　                             */
/* ========================================================================= */
@keyframes highlight-restore {
    0% {
        background-color: #fdf5e6;
    }

    100% {
        background-color: transparent;
    }
}

.highlight-once {
    animation: highlight-restore 5s ease-in-out;
}

/* ========================================================================= */
/* コメントのプレビュー表示                   　                             */
/* ========================================================================= */
.preview {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #f8f9fa;
    padding: .375rem .75rem;
    overflow: auto;
    word-break: break-all;
}

.preview-height {
    height: 16em;
    background-color: white;
}