#commu .chatbot-toggle-icon {
    background: url("/static/img/common/icon-chatui.png") center no-repeat;
    position: absolute;
    right: 25px;
    bottom: 15px;
    height: 70px;
    width: 70px;
    cursor: pointer;
    z-index: 1000;
}

#commu .chatbot-box {
    border: 1px solid #E6E6E6;
    position: absolute;
    top: 49px;
    right: 0px;
    height: calc(100% - 50px);
    width: 300px;
    background-color: #E6F4F2;
    z-index: 1001;
    box-sizing: content-box;
}

#commu .chatbot-box .show-ticket > h1,
#commu .chatbot-box .chatdata-content > h1,
#commu .chatbot-box .interactive-communication > h1 {
    height: 44px;
    background-color: white;
    font-weight: bold;
    font-size: 1.3em;
}

#commu .chatbot-box .interactive-communication > h1 {
    position: absolute;
    width: 100%;
    z-index: 1;
}

#commu .chatbot-box.ng-hide,
#commu .chatbot-box-ticket-detail.ng-hide {
    right: -310px;
    display: block !important;
    opacity: 1;
}

#commu .chatbot-box-ticket-detail,
#commu .chatbot-interactive-ui {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    background-color: #FFF;
}

#commu .move {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

#commu .chatbot-toggle-icon.move.complete {
    opacity: 0;
}

#commu .chatbot-toggle-icon span.unread-count {
    font-size: 1.5em;
    background-color: #FF0000; /* red */
    color: #FFF;
    position: absolute;
    top: -7px;
    right: -4px;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 13px;
}

#commu .chatbot-box .chat-message {
    padding: 10px;
}

#commu .chatbot-box .chat-message-card-list {
    padding: 0 10px;
}

#commu .chatbot-box .chat-message-card-list .card {
    height: 55px;
    margin: 2px 0 3px 0;
}

#commu .chatbot-bot .chat-message-card-list .card:hover {
    box-shadow: 0 0 4px 1px #50C6D5;
    -moz-box-shadow: 0 0 4px 1px #50C6D5;
    -webkit-box-shadow: 0 0 4px 1px #50C6D5;
}

#commu .chatbot-box .chat-message-card-list-first {
    padding: 10px 10px 0 10px;
}

#commu .chatbot-box .chat-message-card-list-last {
    padding: 0 10px 10px 10px;
}

#commu .chatbot-box .chat-message-card-list .card h2{
    display: inline-block;
    width: calc(100% - 52px);
    height: 100%;
    margin: 0;
}

#commu .chatbot-box .chat-message-card-list .card h2 > span {
    max-height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
}

#commu .chatbot-box .chat-message-card-list .card h2 > span a {
    cursor: pointer;
}

#commu .chatbot-box .chat-message-card-list .card h2 > span span {
    text-decoration: line-through;
}

#commu .chatbot-box .chat-message-card-list .card > div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    line-height: 34px;
}

#commu .chatbot-box .chat-message-card-list .card > div i,
#commu .chatbot-box .interactive-communication .card > h2 i {
    font-size: 1.5em;
    cursor: pointer;
    vertical-align: top;
}

#commu .chatbot-box .chat-message-card-list .card > div i.fa-clone,
#commu .chatbot-box .chat-message-card-list .card > div i.fa-circle-o {
    color: #50C6D5;
}

#commu .chatbot-box .chat-message-card-list div.toggle-ticket {
    width: 24px;
}

#commu .chatbot-box .chat-message-card-list div.toggle-ticket i {
    font-size: 1.5em;
    padding-right: 8px;
    cursor: pointer;
}

#commu .chatbot-box .chat-message .commu-icon {
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
    text-align: center;
}

#commu .chatbot-box .chat-message .commu-icon img {
    width: 26px;
    height: 26px;
    border-radius: 13px;
}

#commu .chatbot-box .chat-message .message {
    background-color: #FFF;
    border-radius: 14px;
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
    word-break: break-all;
    word-wrap: break-word;
}

#commu .chatbot-box .chat-message .card {
    padding: 10px;
    background-color: #FFF;
    cursor: pointer;
}

#commu .chatbot-box .chat-message .card:hover {
    box-shadow: 0 0 4px 2px #50C6D5;
    -moz-box-shadow: 0 0 4px 2px #50C6D5;
    -webkit-box-shadow: 0 0 4px 2px #50C6D5;
    cursor: pointer;
}

#commu .chatbot-box .chat-message .card.closed-ticket {
    background-color: #F5F5F5;
}

#commu .chatbot-box .chat-message .card h2,
#commu .chatbot-box .show-ticket h2 {
    color: #808080;
    font-weight: bold;
    margin-bottom: 10px;
}

#commu .chatbot-box .show-ticket h2.closed {
    background-color: #F5F5F5;
}

#commu .chatbot-box .chat-message .card h2 a,
#commu .chatbot-box .show-ticket h2 a {
    color: #666666;
}

#commu .chatbot-box .tags {
    margin-bottom: 7px;
}

#commu .chatbot-box .tag {
    font-size: 10px;
    color: #999999;
    border: 1px solid #D4EEF2;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 11px;
    margin-bottom: 3px;
}

#commu .chatbot-box .card .properties {
    border: none;
    background-color: #F5F5FA;
    font-size: 10px;
    color: #999999;
    display: block;
    padding: 8px;
    box-shadow: none;
    margin-bottom: 0;
    position: relative;
}

#commu .chatbot-box .card .properties:after {
    content: "";
    clear: both;
    display: block;
}

#commu .chatbot-box .card .properties div {
    background: inherit;
    border-top: none;
    padding: 0;
    margin: 0;
    position: absolute;
    box-shadow: none;
    display: inline-block;
    right: 0;
}

#commu .chatbot-box .card .properties > p:first-child {
    min-width: 25px;
    max-width: 100%;
}

#commu section.tickets .ticket .properties .status,
#commu .chatbot-box .card .properties .property {
    max-width: 19%;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

#commu .chatbot-box .card .properties p {
    height: 15px;
    max-width: 214px;
    padding-right: 1px;
    vertical-align: top;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

#commu .chatbot-box .properties img {
    width: 15px;
    height: 15px;
    border-radius: 7px;
    margin-top: -1px;
}

#commu .chatbot-box .show-ticket h2,
#commu .chatbot-box .show-ticket .properties,
#commu .chatbot-box .show-ticket .summary,
#commu .chatbot-box .show-ticket .terms,
#commu .chatbot-box .show-ticket .tags,
#commu .chatbot-box .show-ticket .attach-files,
#commu .chatbot-box .show-ticket .related-tickets,
#commu .chatbot-box .show-ticket .ticket-watcher {
    padding: 10px;
    border-bottom: 1px solid #E6E6E6;
}

#commu .chatbot-box .show-ticket .terms,
#commu .chatbot-box .show-ticket .ticket-watcher {
    padding-bottom: 5px;
    border-bottom: none;
}

#commu .chatbot-box .show-ticket .tags,
#commu .chatbot-box .show-ticket .attach-files,
#commu .chatbot-box .show-ticket .related-tickets {
    padding-top: 0px;
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 5px;
}

#commu .chatbot-box .show-ticket .host .tags {
    border: 1px solid #E6E6E6;
    padding: 5px;
}

#commu .chatbot-box .show-ticket .ticket-watcher {
    text-align: right;
}

#commu .chatbot-box .show-ticket .related-tickets {
    border-bottom: 1px solid #E6E6E6;
}

#commu .chatbot-box .show-ticket h2 {
    margin-bottom: 0;
}

#commu .chatbot-box .show-ticket h2 i {
    font-size: 1.5em;
    padding-right: 8px;
}

#commu .chatbot-box .comments .comment {
    background-color: #F8F8FC;
    word-wrap: break-word;
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
}

#commu .chatbot-box .ticket-edit-area {
    position: absolute;
    bottom: -2px;
    min-height: 105px;
    width: 100%;
    background-color: white;
    border-top: 1px solid #E6E6E6;
}

#commu .chatbot-box .ticket-edit-area ul li {
    display: inline-block;
    width: 11.2%;
    text-align: center;
    cursor: pointer;
}

#commu .chatbot-box .ticket-edit-area ul li .tags {
    margin-bottom: 0;
}

#commu .chatbot-box .ticket-edit-area .edit-textarea {
    padding: 5px 10px 0px 10px;
}

#commu .chatbot-box .ticket-edit-area .edit-textarea,
#commu .chatbot-box .ticket-edit-area .edit-textarea textarea {
    width: 100%;
}

#commu .chatbot-box .ticket-edit-area .edit-textarea textarea {
    height: 50px;
}

#commu .related-tickets p,
#commu .attach-files p {
    margin-right: 10px;
    height: 24px;
    line-height: 23px;
    border-radius: 12px;
    display: inline-block;
    padding: 0 10px;
    font-size: 11px;
    font-weight: bold;
    background-color: #F8F8FC;
    max-width: 45%;
}

/* style-redesignから持ってきた */
.ticket-watcher img {
    width: 16px !important;
    height: 16px !important;
    border-radius: 8px;
}

/* style-redesignから持ってきた */
.ticket-watcher ul.watchers > li {
    display: inline-block;
    /*margin-right: 20px;*/
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 3px;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
        background-color: red;
    }
    100% {
        opacity: 1;
        background-color: none;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
        background-color: red;
    }
    100% {
        opacity: 1;
        background-color: none;
    }
}

#commu .flash {
    opacity: 1;
    -webkit-animation: flash 3s;
    animation: flash 3s;
}

#commu span.loading {
    display: block;
    width: 45px;
    height: 45px;
    padding: 10px;
    z-index: 9999;
    position: absolute;
    background: rgba(90, 182, 223, 0.5);
    border-radius: 6px;
    color: #FFF;
}

#commu span.loading-past-chat-data {
    top: 10px;
    left: calc(50% - 22px);
}

#commu span.loading-ticket {
    top: calc(50% - 22px);
    left: calc(50% - 22px);
}

/* 各種アイコンはticket-create-dialogあたりをたまたま参照できてる。後でcommon/style-redesign.cssに持っていく */

#commu .chatbot-box .chatdata-content {
    height: 100%;
    position: relative;
}

#commu .chatbot-box .chatdata-content h1 {
    border-bottom: 1px solid #E6E6E6;
    padding: 0 10px 0 0;
}

#commu .chatbot-box .chatdata-content h1 .close-chatbot-box {
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 100%;
    padding: 10px;
    color: #B9B9BE;

}

#commu .chatbot-box .chatdata-content h1 .project-name {
    padding: 12px;
    display: inline-block;
    height: 100%;
    width: calc(100% - 60px);
    text-align: center;
}

#commu .chatbot-box .chatdata-content #chatDataList {
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 41px);
}

#commu .chatbot-box .chatdata-content #chatDataList > div {
    position: relative;
    height: 100%;
}

#commu .chatbot-box .chatdata-content #chatDataList #new-line {
    position: relative;
}

#commu .chatbot-box .chatdata-content #chatDataList #new-line span {
    padding: 0 6px;
    position: absolute;
    top: -8px;
    background-color: #E6F4F2;
    color: #E885A7
}

#commu .chatbot-box .chatdata-content #chatDataList #new-line hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-width: 2px 0 0 0;
    border-color: #F7D6E2;
}

#commu .chatbot-box .chatdata-content #chatDataList #date-line {
    position: relative;
}

#commu .chatbot-box .chatdata-content #chatDataList #date-line span {
    padding: 0 6px;
    position: absolute;
    top: -8px;
    background-color: #E6F4F2;
    color: #808080;
    left: calc(50% - 39px);
}

#commu .chatbot-box .chatdata-content #chatDataList #date-line hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-width: 2px 0 0 0;
    border-color: #E6E6E6;
}

#commu .chatbot-box {
    box-shadow: -1px 0 4px rgba(150, 150, 150, 0.3);
}

#commu .chatbot-box .chatdata-content #chatDataList .chat-message .card span.card-title {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 50px)
}

#commu .chatbot-box .chatdata-content #chatDataList .chat-message .card h2 > i {
    font-size: 1.5em;
    padding-right: 8px;
    cursor: pointer;
}

#commu .chatbot-box .chatdata-content #chatDataList .chat-message .card h2 span a {
    cursor: pointer;
    max-height: 26px;
    /** 三点リーダー表示設定 - ここから **/
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /** 三点リーダー表示設定 - ここまで **/
}

#commu .chatbot-box .chatdata-content #chatDataList .chat-message .card h2 span i {
    font-size: 1.5em;
    color: #50C6D5;
    cursor: pointer;
}

#commu .chatbot-box .chatdata-content #chatDataList .chat-message .card h2 span span {
    text-decoration: line-through;
}

#commu .chatbot-box .chatdata-content #chatDataList-space {
    position: relative;
    height: 60px;
}

#commu .chatbot-box .show-ticket,
#commu .chatbot-box .interactive-communication {
    background-color: white;
    width: 100%;
    height: calc(100% - 103px);
}

#commu .chatbot-box .interactive-communication {
    height: 100%;
}

#commu .chatbot-box .interactive-communication {
    overflow-y: scroll;
}

#commu .chatbot-box .ticket-header,
#commu .chatbot-box .interactive-ui-header {
    border-bottom: 1px solid rgb(230, 230, 230);
}

#commu .chatbot-box .ticket-header .close-area,
#commu .chatbot-box .interactive-ui-header .close-area {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 100%;
    padding: 10px;
}

#commu .chatbot-box .ticket-header .close-area i,
#commu .chatbot-box .interactive-ui-header .close-area i {
    cursor: pointer;
    color: #50C6D5;
}

#commu .chatbot-box .ticket-header .header-title {
    padding: 12px;
    display: inline-block;
    height: 100%;
    width: calc(100% - 71px);
    text-align: center;
}

#commu .chatbot-box .interactive-ui-header .header-title {
    padding: 12px;
    display: inline-block;
    height: 100%;
    width: calc(100% - 40px);
    text-align: center;
}

#commu .chatbot-box .ticket-header .ticket-link {
    display: inline-block;
    width: 30px;
    height: 100%;
    vertical-align: middle;
    padding: 10px 2px;
}

#commu .chatbot-box .ticket-header .ticket-link i {
    font-size: 18px;
    color: #50C6D5;
    cursor: pointer;
}

#commu .chatbot-box .ticket-content .ticket-title span {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 50px);
}

#commu .chatbot-box .ticket-content .ticket-properties {
    height: 100%;
    overflow-y: scroll;
}

#commu .chatbot-box .ticket-content .ticket-properties .properties span {
    display: inline-block;
}

#commu .chatbot-box .ticket-content .ticket-properties .properties span.status {
    width: 80%;
    text-align: left;
}

#commu .chatbot-box .ticket-content .ticket-properties .properties span.status .status-name,
#commu .chatbot-box .ticket-content .ticket-properties .properties span.status .priority-name {
    width: 49%;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}

#commu .chatbot-box .ticket-content .ticket-properties .properties span.owner {
    width: 18%;
    text-align: right;
}

#commu .chatbot-box .ticket-content .ticket-properties .properties span.owner .owner-icon {
    cursor: pointer;
}

#commu .chatbot-box .ticket-content .ticket-properties .fa.commu-custom.from-date,
#commu .chatbot-box .ticket-content .ticket-properties .fa.commu-custom.to-date,
#commu .chatbot-box .ticket-content .ticket-properties .fa.commu-custom.tags {
    cursor: pointer;
}

#commu .chatbot-box .ticket-content .ticket-properties .summary {
    padding: 10px;
}

#commu .chatbot-box .ticket-content .ticket-properties .summary .summary-content {
    padding: 10px;
    word-break: break-all;
}

#commu .chatbot-box .ticket-content #chatbot-ticket-comments .comment img {
    border-radius: 7px;
    margin-right: 4px;
    vertical-align: top;
}

#commu .chatbot-box .ticket-content #chatbot-ticket-comments .comment .update-time {
    text-align: right;
    color: #999999;
    margin-top: 8px;
}

#commu .chatbot-box .ticket-edit-area .toggle-ticket-edit-area {
    background-color: #50C6D5;
    width: 100%;
    text-align: center;
    color: #FFF;
    padding: 3px;
    cursor: pointer;
}

#commu .chatbot-box .ticket-edit-area .edit-comment i {
    font-size: 1.5em;
}

#commu .chatbot-box .ticket-edit-area .edit-watcher {
    font-size: 1.5em;
}

.editingProperties ul li {
    display: block !important;
    padding: 10px;
    width: 100% !important;
    text-align: left !important;
}

.editingProperties ul li:hover {
    background-color: #DEF0F9;
}

.editingProperties ul {
    margin: 10px;
    border: 1px solid #e6e6e6;
    max-height: 146px;
    overflow-y: scroll;
}

/* tags-inputのstyleをオーバーライド */
#commu .chatbot-box tags-input .tags .tag-item {
    padding: 0;
    height: 27px;
    min-width: 80px !important;
    font-size: 0.8em;
    text-align: left !important;
    border-radius: 13px;
    background: white;
}

#commu .chatbot-box tags-input input {
    width: 80px;
    background-color: #F5F3F0;
}

#commu .chatbot-box tags-input .tags {
    max-height: 67px;
    overflow-y: scroll;
    margin-bottom: 0;
    outline: none;
    box-shadow: none;
    background-color: #F5F3F0;

}

#commu tags-input .tags {
    border-radius: 0;
}

#commu .chatbot-box tags-input .tags.focused {
    outline: none;
    box-shadow: none;
}

#commu .chatbot-box .tags .tag-item span {
    float: left;
    display: inline-block;
    width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 13px;
    padding-left: 5px;
    color: #B3B3B3;
}

#commu .chatbot-box tags-input .tags .tag-item .remove-button {
    float: right;
    height: 25px;
    line-height: 25px;
    padding-right: 5px;
    font-weight: 100 !important;
    color: #B3B3B3;
}

#commu .chatbot-box tags-input .host {
    outline: none;
}

#commu .chatbot-box .calendar .btn {
    border: none;
    box-shadow: none;
    height: 26px !important;
    border-radius: 0;
}

#commu .chatbot-box .calendar .btn-info.active {
    background-color: #50C6D5;
}

#commu .chatbot-box .editingProperties ul li.select {
    background-color: #FAF5D2;
}

#commu .btn.clear-date {
    line-height: 1.1;
    margin-top: 5px;
}

#commu .chatbot-box .editingProperties .calendar {
    margin: 10px 10px 0 10px;
}

#commu .chatbot-box .send-key-description {
    color: #50C6D5;
    text-align: right;
    padding-right: 10px;
}

/* ===================================================================
style info : Chatbot interactive mode - User questions ★2018.01.04 satoru
=================================================================== */
#commu .chatbot-box .chatbot-interactive-toggle-icon {
    width: 270px;
    height: 50px;
    padding: 9px;
    color: #FFFFFF;
    background-color: #50C6D5;
    font-size: 20px;
    text-align: center;
    position: absolute;
    border-radius: 25px;
    box-shadow: -1px 0 10px rgba(150, 150, 150, 0.3);
    right: 22px;
    bottom: 15px;
    cursor: pointer;
}

#commu .chatbot-box .question {
    text-align: left;
}

#commu .chatbot-box .question .message {
    background-color: #E6F4F2;
}

#commu .chatbot-box .answer {
    text-align: right;
}

#commu .chatbot-box .answer .message {
    display: inline-block;
    background-color: #E2E6EB;
    text-align: left;
}

#commu .chatbot-box .message-loader img {
    height: 30px;
    width: 30px;
}
#commu .chatbot-box .message-loader .message {
    padding: 3px 10px;
    background-color: #E6F4F2;
}

#commu .chatbot-box .result,
#commu .chatbot-box .detail {
    background: #E6F4F2;
    margin: 10px;
}
#commu .chatbot-box .problem {
    margin-top: -20px;
}

#commu .chatbot-box .result .achievement,
#commu .chatbot-box .result .project-progress,
#commu .chatbot-box .result .report-select-ui,
#commu .chatbot-box .result .report,
#commu .chatbot-box .detail .assign-status {
    text-align: center;
}

#commu .chatbot-box .result .project-progress,
#commu .chatbot-box .result .report-select-ui {
    margin: 15px 0 0 0;
}

#commu .chatbot-box .result .report-select-ui .report-mvp {
    position: relative;
    margin: 10px 0 0 15px;
    text-align: left;
    font-weight: bold;
}

#commu .chatbot-box .result .report-select-ui .report-mvp-icon {
    width: 30px;
    position: absolute;
    top: 0px;
    right: 10px;
}

#commu .chatbot-box .result .achievement-title,
#commu .chatbot-box .result .project-progress-title,
#commu .chatbot-box .result .report-title,
#commu .chatbot-box .detail .assign-status-title {
    font-weight: bold;
    margin: 5px 0 0 0;
    font-size: 1.3em;
}

#commu .chatbot-box .result .achievement-content,
#commu .chatbot-box .result .project-progress-content,
#commu .chatbot-box .result .report-select-ui-content,
#commu .chatbot-box .result .report-content {
    background: #FFF;
    padding: 10px;
}

#commu .chatbot-box .result .achievement-content {
    margin: 5px 0 10px 0;
    border-radius: 15px;
}

#commu .chatbot-box .result .report-content {
    margin: 5px 0 10px 0;
    border-radius: 15px 15px 0 0;
}

#commu .chatbot-box .result .project-progress-content,
#commu .chatbot-box .result .report-select-ui-content {
    margin: 5px 0 0 0;
    border-radius: 15px 15px 0 0;
}

#commu .chatbot-box .result .project-progress-buttons,
#commu .chatbot-box .result .report-select-ui-buttons {
    height: 30px;
    line-height: 30px;
    width: 100%;
    background: #FFF;
}

#commu .chatbot-box .result .finish-button,
#commu .chatbot-box .result .detail-button,
#commu .chatbot-box .result .weekly-report-button,
#commu .chatbot-box .result .monthly-report-button {
    width: 50%;
    background: #50C6D5;
    display: inline-block;
    color: #FFF;
    cursor: pointer;
}

#commu .chatbot-box .result .detail-button,
#commu .chatbot-box .result .monthly-report-button {
    border-left: 1px solid #FFF;
}

#commu .chatbot-box .result .finish-button-wide {
    width: 100%;
    background: #50C6D5;
    display: inline-block;
    color: #FFF;
    cursor: pointer;
}

#commu .chatbot-box .result .project-progress-icon img,
#commu .chatbot-box .result .report-select-ui-icon img {
    display: inline-block;
    width: 20%;
    margin: 0 5% 0 0;
    vertical-align: middle;
}

#commu .chatbot-box .result .project-progress-message,
#commu .chatbot-box .result .report-select-ui-message {
    display: inline-block;
    width: 70%;
    margin: 0 5% 0 0;
    text-align: left;
    font-weight: bold;
    color: #50C6D5;
    vertical-align: middle;
}

#commu .chatbot-box .result .achievement-message {
    margin: 5px 0;
}

#commu .chatbot-box .result .report-message {
    margin: 5px 0;
    font-weight: bold;
    font-size: 13px;
}

#commu .chatbot-box .result .achievement-graph {
    height: 25px;
    line-height: 25px;
    background: #E6F4F2;
    margin: 12px 0 10px 0;
}

#commu .chatbot-box .result .report-graph {
    height: 30px;
    line-height: 30px;
    background: #E6F4F2;
    margin: 5px 0 15px 0;
    font-weight: bold;
}

#commu .chatbot-box .result .achievement-graph .open-tickets-ratio {
    background: #E6F4F2;
    height: 25px;
    display: inline-block;
}

#commu .chatbot-box .result .achievement-graph .close-tickets-ratio {
    background: #50C6D5;
    height: 25px;
    display: inline-block;
}

#commu .chatbot-box .detail [class^="assign-status-list-"] {
    position: relative;
    height: 36px;
    line-height: 36px;
    width: 100%;
    cursor: pointer;
    margin: 5px 0 0 0;
}

#commu .chatbot-box .detail .assign-status-lists-detail {
    position: absolute;
    width: 100%;
    top: 36px;
}

#commu .chatbot-box .detail [class*="assign-status-list-detail"] {
    /* 三点リーダー */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-align: left;
    border-bottom: #e9e7e4 solid 1px;
    padding: 0 10px;
    background: #FFF;
    margin: 0;
}
#commu .chatbot-box .detail [class*="assign-status-list-detail"]:last-child {
    border-bottom: #FFF solid 1px;
}
#commu .chatbot-box .detail .assign-status-list-detail-closed {
    background: #F5F5F5;
}
#commu .chatbot-box .detail .assign-status-list-detail-closed:last-child {
    border-bottom: #F5F5F5 solid 1px;
}

#commu .chatbot-box .detail [class*="assign-status-list-detail"] i {
    line-height: 36px;
}

#commu .chatbot-box .detail [class*="assign-status-list-detail"] a,
#commu .chatbot-box .detail [class*="assign-status-list-detail"] a:hover,
#commu .chatbot-box .detail [class*="assign-status-list-detail"] a:link,
#commu .chatbot-box .detail [class*="assign-status-list-detail"] a:visited,
#commu .chatbot-box .detail [class*="assign-status-list-detail"] a:active {
    color: #888;
    text-decoration: none;
}

#commu .chatbot-box .detail [class*="assign-status-list-detail"]:hover {
    box-shadow: 0 0 4px 2px #50C6D5;
    -moz-box-shadow: 0 0 4px 2px #50C6D5;
    -webkit-box-shadow: 0 0 4px 2px #50C6D5;
    position: relative;
}

#commu .chatbot-box .detail [class*="assign-status-list-"] img {
    height: 26px;
    width: 26px;
    border-radius: 50%;
    position: absolute;
    left: 33px;
    top: 5px;
}

#commu .chatbot-box .detail [class^="assign-status-list-"] .assign-member-name {
    position: absolute;
    left: 69px;
    color: #50C6D5;
    width: 130px;
    text-align: left;
    /* 三点リーダー */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#commu .chatbot-box .detail [class^="assign-status-list-"] .assign-tickets-category {
    position: absolute;
    left: 33px;
    font-weight: bold;
    font-size: 14px;
}

#commu .chatbot-box .detail [class^="assign-status-list-"] .assign-tickets {
    position: absolute;
    right: 10px;
    font-weight: bold;
    font-size: 14px;
}

#commu .chatbot-box .detail [class^="assign-status-list-"] .delayed,
#commu .chatbot-box .detail [class^="assign-status-list-"] .caution {
    color: #e30a70;
}

#commu .chatbot-box .detail [class^="assign-status-list-"] .toggle-button {
    position: absolute;
    left: 10px;
    color: #50C6D5;
}

#commu .chatbot-box .request-menu-box,
#commu .chatbot-box .comment-menu-box {
    height: 100%;
    background: #50C6D5;
    text-align: center;
    color: #FFF;
}
#commu .chatbot-box .comment-menu-box {
    font-size: 0;
    line-height: 0;
    margin: 5px 0 0 0;
}

#commu .chatbot-box .request-menu {
    height: 52px;
    line-height: 52px;
    width: 50%;
    display: inline-block;
    cursor: pointer;
}

#commu .chatbot-box .comment-menu {
    height: 30px;
    padding: 8px 0;
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

#commu .comment-action-box {
    font-size: 0;
    line-height: 0;
    margin: 5px 0 0 0;
    text-align: center;
}

#commu .comment-action-box .action-menu {
    height: 30px;
    padding: 8px 0;
    margin: 1px;
    box-sizing: border-box;
    display: inline-block;
    width: 135px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    border: solid 1px #FFFFFF;
    border-radius: 5px;
    cursor: pointer;
    width: 49%;
}

#commu .comment-action-box .action-menu:hover {
    background-color: #FFFFFF;
    color: #50C6D5;
}

#commu .chatbot-box .request-menu:nth-child(1),
#commu .chatbot-box .request-menu:nth-child(3) {
    border-right: solid 1px #FFF;
}

#commu .chatbot-box .request-menu:nth-child(1),
#commu .chatbot-box .request-menu:nth-child(2) {
    border-bottom: solid 1px #FFF;
}

#commu .chatbot-box .interactive-ui-content {
    margin: 44px 0 0 0;
}

#commu .unread-tickets-notice {
    position: absolute;
    top: -80px;
    width: 180px;
    right: 0;
}
#commu .unread-tickets-notice {
    box-shadow: -1px 0 4px rgba(150, 150, 150, 0.3);
    background-color: #E6F4F2;
    border-radius: 14px;
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
    word-break: break-all;
    word-wrap: break-word;
    z-index: 1000;
}

#commu .unread-tickets-notice-close {
    position: absolute;
    right: 15px;
    top: -75px;
    z-index: 1001;
}

#commu .unread-tickets-notice-close :hover {
    color: #50C6D5;
}

/* ===================================================================
style info : Chatbot interactive mode - Commu questions ★2018.01.24 chubachi & satoru
=================================================================== */

#commu .chatbot-box .interactive-communication .chat-message-card {
    background-color: #E6F4F2;
    margin: 0;
    padding: 5px;
}

#commu .chatbot-box .interactive-communication .chat-message-card > h1 {
    text-align: center;
    padding: 5px;
    font-weight: bold;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card {
    background-color: #FFFFFF;
    margin: 0;
    padding: 5px 0;
    cursor: pointer;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 {
    padding: 5px;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 > span,
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 > i {
    display: table-cell;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 > span {
    vertical-align: middle;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 > span > div {
    width: 210px;
    padding-right: 10px;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 > span > div > a {
    color: #666666;
    font-weight: bold;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > h2 > span > i {
    color: #50C6D5;
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > div.tags,
#commu .chatbot-box .interactive-communication .chat-message-card > .card > div.properties {
    padding: 5px
}
#commu .chatbot-box .interactive-communication .chat-message-card > .card > div.properties {
    margin: 0 5px;
}

/* ===================================================================
style info : Chatbot interactive mode - Weekly and Monthly Report ★2018.03.08 satoru
=================================================================== */

#commu .chatbot-box .interactive-communication .chat-message .report-detail-list-header {
    position: relative;
    height: 30px;
    margin: 10px 0 0 0;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-icon {
    position: absolute;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    left: 0;
    top: 0;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-user-name {
    position: absolute;
    left: 35px;
    top: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #50C6D5;
    width: 100px;
    text-align: left;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-assigned {
    position: absolute;
    right: 55px;
    top: 5px;
    font-size: 11px;
    font-weight: 100;
    color: #808083;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-closed {
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #50C6D5;
}
#commu .chatbot-box .result .report-detail-buttons {
    height: 30px;
    line-height: 30px;
    width: 100%;
    background: #FFF;
    margin: 10px 0 0 0;
}

#commu .chatbot-box .interactive-communication .chat-message .report-detail-chart {
    position: relative;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-legend {
    position: absolute;
    top: 45px;
    left: 93px;
    font-size: 10px;
    color: #aaaaaa;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-scales {
    font-size: 10px;
    color: #999999;
    height: 16px;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-scale {
    position: absolute;
    top: 45px;
}
#commu .chatbot-box .interactive-communication .chat-message .report-rabel {
    font-size: 10px;
    color: #808080;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-scale:first-child {
    left: 8px;
}
#commu .chatbot-box .interactive-communication .chat-message .report-detail-scale:last-child {
    right: 8px;
}

#commu .chatbot-box .interactive-communication .chat-message .report-detail-content {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* [TODO] 2017.01.15 comment by satoru
▼-- START ------------------------------------------------------------------------------------------------------▼
ChatUIで「プロジェクト状況」ボタンのみを表示するためのスタイル設定なので、「自分のタスク状況」、「チケット検索」、「チケット作成」
機能の実装が完了したらこのスタイル設定は不要となるので削除してください。
*/
#commu .chatbot-box .interactive-leader {
    height: calc(100% - 104px);
}
#commu .chatbot-box .interactive-member {
    height: calc(100% - 52px);
}


#commu .chatbot-box .request-menu-box {
    position: relative;
}

/* プロジェクトマネージャーのスタイル */
#commu .chatbot-box .leader-menu-box .request-menu:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
}
#commu .chatbot-box .leader-menu-box .request-menu:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
}
#commu .chatbot-box .leader-menu-box .request-menu:nth-child(3) {
    position: absolute;
    top: 52px;
    left: 0;
    width: 50%;
}
#commu .chatbot-box .leader-menu-box .request-menu:nth-child(4) {
    position: absolute;
    top: 52px;
    right: 0;
    width: 50%;
}

/* プロジェクトメンバーのスタイル */
#commu .chatbot-box .member-menu-box .request-menu:nth-child(1) {
    position: absolute;
    display: none;
}
#commu .chatbot-box .member-menu-box .request-menu:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: none;
    border-right: solid 1px #FFF;
    width: 50%;
}
#commu .chatbot-box .member-menu-box .request-menu:nth-child(3) {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    border: none;
    display: none;
}
#commu .chatbot-box .member-menu-box .request-menu:nth-child(4) {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    border: none;
}
#commu i.commu-custom.milestone {
    background-image: url(/static/img/common/icon/icon-milestone.png);
}
/*
▲-- END -------------------------------------------------------------------------------------------------------▲
*/