@charset "utf-8";

#commu-dialog-view-ticket-details {
    height: 100%;
    width: 100%;
    padding: 16px 48px;
    font-size: 10px;
    color: #808080;
}

#commu-dialog-ticket-detail {
    height: inherit;
    width: inherit;
    background: #F8F8FC;
    padding: 8px;
}

#commu-dialog-inner-ticket-detail {
    position: relative;
    height: inherit;
    width: inherit;
}

#commu-dialog-ticket-detail_statuses {
    height: 16px;
    width: inherit;
    margin-bottom: 8px;
}
#commu-dialog-ticket-detail_statuses .priority-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    line-height: 16px;
}
#commu-dialog-ticket-detail_statuses .priority-name {
    position: absolute;
    top: 0;
    left: 20px;
    height: 16px;
    width: 110px;
    line-height: 16px;
    /** 三点リーダー表示設定 - ここから **/
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /** 三点リーダー表示設定 - ここまで **/
}

#commu-dialog-ticket-detail_statuses .status-icon {
    position: absolute;
    top: 0;
    left: 134px;
    height: 16px;
    width: 16px;
    line-height: 16px;
}
#commu-dialog-ticket-detail_statuses .status-name {
    position: absolute;
    top: 0;
    left: 154px;
    height: 16px;
    width: 319px;
    line-height: 16px;
    /** 三点リーダー表示設定 - ここから **/
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /** 三点リーダー表示設定 - ここまで **/

}

#commu-dialog-ticket-detail_statuses .date-status-area {
    position: absolute;
    top: 0;
    right: 0;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
}
#commu-dialog-ticket-detail_statuses .inner-date-status-area {
    position: relative;
    height: inherit;
    width: inherit;
}

#commu-dialog-ticket-detail_statuses .date-status-area .date-status-area_date-area {
    float: right;
    height: 14px;
    display: inline-block;
    border-radius: 2px;
    font-size: 8px;
    margin: 1px 0 1px 5px;
    color: #FFFFFF;
}
#commu-dialog-ticket-detail_statuses .date-status-area .background-alert {
    background: #E20135;
}
#commu-dialog-ticket-detail_statuses .date-status-area .background-warning {
    background: #FFC810;
}
#commu-dialog-ticket-detail_statuses .date-status-area .date-status-area_date-area [class^="icon-commu-"] {
    float: left;
    display: inline-block;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
}
#commu-dialog-ticket-detail_statuses .date-status-area .date-status-area_date-area .icon-commu-delay {
    margin: 0 0 0 4px;
}
#commu-dialog-ticket-detail_statuses .date-status-area .date-status-area_date-area .icon-commu-limit-come-soon {
    margin: 1px 0 0 4px;
}

#commu-dialog-ticket-detail_statuses .date-status-area .date-status-area_date-area .days {
    float: left;
    margin: -1px 4px 0 4px;
}
#commu-dialog-ticket-detail_statuses .date-status-area .date-status-area_end-date {
    float: right;
    margin-left: 4px;
}

#commu-dialog-ticket-detail_statuses .date-status-area .icon-end-date {
    background-image: url('/static/img/common/icon/icon-end.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-top: 3px;
}

#commu-dialog-ticket-detail_statuses .date-status-area [class^="icon-commu-"] {
    float: right;
    display: inline-block;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    margin: 1px 0;
}

#commu-dialog-ticket-detail_title {
    height: 20px;
    line-height: 20px;
    width: inherit;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #808080;
    /** 三点リーダー表示設定 - ここから **/
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /** 三点リーダー表示設定 - ここまで **/
}

#commu-dialog-ticket-detail_summary {
    height: 132px;
    line-height: 15px;
    width: inherit;
    overflow-y: scroll;
}

#commu-dialog-content-prev-button {
    position: absolute;
    top: 92px;
    left: 0;
    height: 0;
    width: 0;
    font-size: 48px;
    color: #DDDDDD;
    -moz-transition: all .5s ease-in; /* Firefox */
    -webkit-transition: all .5s ease-in; /* Safari and Chrome */
    -ms-transition: all .5s ease-in; /* IE10 */
    -o-transition: all .5s ease-in; /* Opera */
    transition: all .5s ease-in;
}
#commu-dialog-content-next-button {
    position: absolute;
    top: 92px;
    right: 48px;
    height: 0;
    width: 0;
    font-size: 48px;
    color: #DDDDDD;
    -moz-transition: all .5s ease-out; /* Firefox */
    -webkit-transition: all .5s ease-out; /* Safari and Chrome */
    -ms-transition: all .5s ease-out; /* IE10 */
    -o-transition: all .5s ease-out; /* Opera */
    transition: all .5s ease-out;
}
#commu-dialog-content-prev-button:hover,
#commu-dialog-content-next-button:hover {
    color: #50C6D5;
    -moz-transition: all .5s ease-out; /* Firefox */
    -webkit-transition: all .5s ease-out; /* Safari and Chrome */
    -ms-transition: all .5s ease-out; /* IE10 */
    -o-transition: all .5s ease-out; /* Opera */
    transition: all .5s ease-out;
}

.come-from_right-to-left_ticket-detail-animation {
    -moz-animation: ComeFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* Firefox */
    -webkit-animation: ComeFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* Safari and Chrome */
    -ms-animation: ComeFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* IE10 */
    -o-animation: ComeFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* Opera */
    animation: ComeFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal;
}
.come-from_left-to-right_ticket-detail-animation {
    -moz-animation: ComeFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* Firefox */
    -webkit-animation: ComeFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* Safari and Chrome */
    -ms-animation: ComeFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* IE10 */
    -o-animation: ComeFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* Opera */
    animation: ComeFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal;
}
.go-from_right-to-left_ticket-detail-animation {
    -moz-animation: GoFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* Firefox */
    -webkit-animation: GoFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* Safari and Chrome */
    -ms-animation: GoFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* IE10 */
    -o-animation: GoFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal; /* Opera */
    animation: GoFromRightToLeftForTicketDetail 0.3s ease-in 0s 1 normal;
}
.go-from_left-to-right_ticket-detail-animation {
    -moz-animation: GoFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* Firefox */
    -webkit-animation: GoFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* Safari and Chrome */
    -ms-animation: GoFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* IE10 */
    -o-animation: GoFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal; /* Opera */
    animation: GoFromLeftToRightForTicketDetail 0.3s ease-in 0s 1 normal;
}

@-webkit-keyframes ComeFromRightToLeftForTicketDetail { /* Chrome, Safari */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@-moz-keyframes ComeFromRightToLeftForTicketDetail { /* FF */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@-ms-keyframes ComeFromRightToLeftForTicketDetail { /* IE10 */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@-o-keyframes ComeFromRightToLeftForTicketDetail { /* Opera */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@keyframes ComeFromRightToLeftForTicketDetail {
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}

@-webkit-keyframes ComeFromLeftToRightForTicketDetail { /* Chrome, Safari */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@-moz-keyframes ComeFromLeftToRightForTicketDetail { /* FF */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@-ms-keyframes ComeFromLeftToRightForTicketDetail { /* IE10 */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@-o-keyframes ComeFromLeftToRightForTicketDetail { /* Opera */
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}
@keyframes ComeFromLeftToRightForTicketDetail {
    0% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
}

@-webkit-keyframes GoFromRightToLeftForTicketDetail { /* Chrome, Safari */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
}
@-moz-keyframes GoFromRightToLeftForTicketDetail { /* FF */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
}
@-ms-keyframes GoFromRightToLeftForTicketDetail { /* IE10 */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
}
@-o-keyframes GoFromRightToLeftForTicketDetail { /* Opera */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
}
@keyframes GoFromRightToLeftForTicketDetail {
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(-25px);
    }
}

@-webkit-keyframes GoFromLeftToRightForTicketDetail { /* Chrome, Safari */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
}
@-moz-keyframes GoFromLeftToRightForTicketDetail { /* FF */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
}
@-ms-keyframes GoFromLeftToRightForTicketDetail { /* IE10 */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
}
@-o-keyframes GoFromLeftToRightForTicketDetail { /* Opera */
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
}
@keyframes GoFromLeftToRightForTicketDetail {
    0% {
        opacity: 1;/* 不透明 */
        transform: translateX(0);
    }
    100% {
        opacity: 0;/* 透明 */
        transform: translateX(25px);
    }
}