/* Mobile */
.ticketMobile {
    position: relative;
    padding: 10px 10px 0;
    background-color: #333;
    color: #9d9d9d;
    overflow-x: hidden;
    overflow-y: auto;
}

.ticketMobileCategory {
    display: inline-block;
    vertical-align: top;
    width: 14px;
}

.ticketMobileDate {
    display: inline-block;
    vertical-align: top;
    width: 65px;
}

.ticketMobileTitle {
    display: inline-block;
    vertical-align: top;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticketMobileSender {
    font-weight: bold;
    color: whitesmoke;
    overflow: hidden;
    max-width: 70%;
    max-height: 20px;
}

.ticketMobileGpt {
    width: 100%;
}

.ticketMobileGroupement {
}

.ticketMobileReport {
    position: absolute;
    right: 10px;
    top: 10px;
}

.ticketMobileSeparator {
    display: inline-block;
    width: 1px;
    background: #717171;
    border-bottom: 20px solid #9d9d9d;
}

.ticketMobileItemSeparator {
    margin-top: 5px;
    height: 1px;
    background: #717171;
    border-bottom: 1px solid #9d9d9d;
}

.ticketMobileData {
    padding: 5px 15px 5px 15px;
    background-color: #333;
    color: #9d9d9d;
}

.ticketMobileAdmin {
    position: absolute;
    right: 10px;
    bottom: 5px;
    overflow: hidden;
    max-height: 20px;
    max-width: 30%;
}

.ticketMobileDataMessage {
    color: whitesmoke;
}

.ticketMobileDataSeparator {
    margin-top: 5px;
    height: 1px;
    background: #717171;
    border-bottom: 1px solid #9d9d9d;
}

.ticketMobilePagination {
    padding: 0 15px;
}

.ticketMobileDataComment {
    margin-top: 5px;
    color: whitesmoke;
}

.ticketMobileDataCommentAdmin {
    background: whitesmoke;
    color: #333;
}

.ticketMobileDataCommentDate {
    display: inline;
}

.ticketMobileDataCommentSender {
    display: inline;
    font-weight: bold;
    color: whitesmoke;
}

.ticketMobileDataCommentSenderAdmin {
    display: inline;
    font-weight: bold;
}

.ticketMobileDataCommentBody {
}

.ticketMobileDataButton {
    margin-top: 5px;
}

.attente {
    color: #d9534f;
}

.cours {
    color: #f0ad4e;
}

.resolu {
    color: #5cb85c;
}

.whiteSmoke {
    color: whitesmoke;
}

.ticketDataHeader {
    margin-top: 0;
    background: #333;
    color: #9d9d9d;
    padding: 15px;
    max-height: 20vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.ticketList {
    max-height: 30vh;
    background-color: #333;
    color: #9d9d9d;
    overflow-x: hidden;
    overflow-y: auto;
}

.ticketItem {
    padding: 10px 15px 15px 10px;
    position: relative;
}

.ticketItem:hover {
    transition-duration: 0.3s;
    background-color: #9d9d9d;
    color: #333;
}

.ticketItemActive {
    background: #5f5f5f;
}

.ticketItemCategory {
    display: inline-block;
    vertical-align: top;
    width: 14px;
}

.ticketItemSender {
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    color: whitesmoke;
}

.ticketItemAdmin {
    position: absolute;
    right: 10px;
    top: 10px;
    color: whitesmoke;
}

.ticketItemTitle {
    font-size: 18px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.ticketItemId {
    position: absolute;
    right: 15px;
    bottom: 16px;
}

.ticketItemStatut {
}

.ticketItemDate {
}

.ticketItemSeparator {
    height: 1px;
    background: #717171;
    border-bottom: 1px solid #9d9d9d;
}

.ticketData {
}

.ticketDataTitle {
    font-size: 18px;
    padding-left: 10px;
}

.ticketDataMessage {
    padding-left: 10px;
    margin-top: 10px;
    font-size: 16px;
}

.ticketComment {
    max-height: 50vh;
    background: #333;
    color: #9d9d9d;
    border-radius: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 10px;
    padding: 15px;
}

.ticketCommentTitle {
    margin-top: 5px;
    line-height: 18px;
    font-size: 18px;
}

.ticketCommentMessage {
    margin-top: 5px;
    line-height: 16px;
    font-size: 16px;
}

.ticketCommentSeparator {
    height: 1px;
    background: #717171;
    border-bottom: 1px solid #9d9d9d;
}

.ticketInputMessage {
    max-height: 20vh;
    margin-top: 10px;
}

.ticketReport {
    position: absolute;
    right: 25px;
    top: 10px;
}

/* Desktop */
@media (min-width: 992px) {
    .ticketList {
        max-height: 85vh;
        background-color: #333;
        color: #9d9d9d;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .ticketDataHeader {
        margin-top: 0;
        background: #333;
        color: #9d9d9d;
        border-radius: 5px;
        padding: 15px;
        max-height: 20vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
}