.chatMinified {
    width: 230px;
    height: 35px;
    z-index: 100;
    position: fixed;
    right: 50px;
    bottom: 0px;
    
    background-color: #fff;
    border-top: 4px solid #b3c0c7; 
    border-left: 1px solid #b3c0c7;
    border-right: 1px solid #b3c0c7;
    cursor:pointer;    
}

.chatMinified .onlineStatus,
.chatMinified .offlineStatus,
span.onlineStatus,
span.offlineStatus {
    display: inline-block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 10px;
	height: 10px;
}

.chatMinified .onlineStatus,
span.onlineStatus {
    background-color: #1ab394;	
}

.chatMinified .offlineStatus,
span.offlineStatus {	
    background-color: #ed5565;	
}

.chatMinified .chatCaption,
.minichatControlPanelHat .chatCaption {
    color: #676a6c;
    font: normal 13px "Open Sans", Helvetica, sans-serif;
    margin-left: 5px;
    margin-top: 5px;
    display: inline-block;
}

.minichatControlPanel {
    width: 230px;
    /*height:300px;*/
    z-index: 100;
    position: fixed;
    right: 50px;
    bottom: 0px;
    
    background-color: #fff;    
    display: none;
}

.minichatControlPanelHat {
    height: 35px;
    background-color: #fff;
    cursor: pointer;
    
    border: 1px solid #b3c0c7;
    border-top: 4px solid #b3c0c7;
}

.minichatControlPanelBody {
    border-left: 1px solid #b3c0c7;
    border-right: 1px solid #b3c0c7;
    /*height: 280px;*/
}

.minichatChangeStatus {
    height: 35px;
    border-bottom: 1px solid #b3c0c7;
    background-color: #efefef;
}

.minichatChangeStatus span {
    margin-left: 10px;
    line-height: 35px;
}

.minichatContactsList {
    height: 210px;
    background-color: #fff;
    border-bottom: 1px solid #d7ddde;
}

.minichatContact {
    padding: 3px;
    border-bottom: 1px solid #d7ddde;
}

.minichatContactsList .minichatContact:nth-child(2n) {
    background-color: #f4f4f4;
}

.minichatContact .contactStatus {
    margin-left: 7px;
}

.minichatContact span.name {
    font-weight: 600;
}

.minichatContact span.role {
    color: #2dabc1;
}

.minichatSearchContacts {
    background-color:#f5f5f6;
    height: 35px;
}

.miniChatSearchBox {
    border-right:1px solid #dadada;
}

.miniChatSearchBox input[type='text'] {
    border: 0;
    width: 135px;
    font: 13px "Open Sans", Helvetica, Arial !important;
    background-color: #f5f5f6;
    color: #676a6c;
    height: 35px;
    padding: 3px 5px;
}

.miniChatSearchBox input[type='text']:focus {
    background-color: #f9f9f9;
    -moz-outline: none;
    outline: none;
}

.minichatStatusComboBox {
    width: 47px;
    height: 35px;
    overflow: hidden;
}

.minichatStatusComboBox select {
    border: 0;
    height: 35px;
    background: transparent;
    color: #676a6c;
    background-color: #f5f5f6;
}

.minichatStatusComboBox select:focus {
    -moz-outline: none;
    outline: none;
}

.minichatSearchButton {
    border-left:1px solid #dadada;    
}

.minichatSearchButton input[type='submit'] {
   width:35px;
   height:32px;
   background:none;
   border:none;
   background-repeat: no-repeat;
   background-image: url("/Resources/Images/responsive/chat-search-icon.png");
   background-position: center center;
   cursor:pointer;
}

.minichatSearchButton input[type='submit']:focus {
    -moz-outline: none;
    outline: none;
}

.chatBase {
    border:2px solid #f7b52c;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.chatLeftPart {
    background-color: #fae6be;
    width:20%;  
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
}

.chatLeftPart h3 {
    font: bold 1.25em/2em Trebuchet MS; 
    color:#f7b52c;   
    text-align:center;
}

.chatContactsList { 
    width:100%;    
    height:300px; 
}

.chatContact {
    margin-left:10px;
    padding: 3px;
}

.chatContact span.name {
    font: bold 1.15em Trebuchet MS;
    color: #393939;
}

.chatContact span.role {
    font: 1em Trebuchet MS;
    color: #7f8c91;
}

.activeContact {
    background-color: #fff;
    border-right: 1px solid #fff;
    border-left: 1px solid #dde0e3;
    border-top: 1px solid #dde0e3;
    border-bottom: 1px solid #dde0e3;
}

.searchContacts {
    height:100px;
    text-align:center;
}

.chatRightPart {
    width:80%;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

.chatStatusPanel {
    min-height:40px;
    border-bottom:1px solid #dde0e3;
}

span.chatUser {
    font: bold 1.15em Trebuchet MS;
    color: #393939;
}

a.onlineStatusLink {
    color:#1ab394;
    font-weight: 600;
}

a.offlineStatusLink {
    color:#ed5565;
    font-weight: 600;
}

.chatMessagesPanel {
    width:100%;
    height:290px;
}

.chatMessage {
    vertical-align:middle;
    width:96%;
    margin-left:2%;
    margin-top:10px;
}

.ownMessage {
    text-align:left;
    margin-left:5px;
}

/*.otherMessage {
    text-align:right;
    margin-right:5px;
}*/

.messageTextFromYou {
   background-color:#fae6be;
   border:1px solid #f7b52c;
   -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding:5px; 
}

.messageTextFromYou span.messageTime {
    font: 1em Trebuchet MS;
    color: #7f8c91;
}

.messageTextFromYou p {
    font:1em/1.3em Arial, Sans-serif;
}

.messageTextToYou {
   background-color:#e7f1ff;
   border:1px solid #6795d2;
   -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding:5px; 
}

.messageTextToYou span.messageTime {
    font: 1em Trebuchet MS;
    color: #7f8c91;
}

.messageTextToYou p {
    font:1em/1.3em Arial, Sans-serif;
}

.chatSendPanel {
    width:96%;
    margin-left:2%;
    margin-top:8px;
}

.chronology img {
    position:relative;
    top:8px;
}

.chronology a {
    font:0.9em Arial;
    color:#7F8C91;
}

.chronology a:hover {
    text-decoration:underline;
}

.sendMessage {
    margin-top:7px;
}

/* Chatboxes */
.chatboxMinified1, .chatboxMinified2, .chatboxMinified3 {
    width: 230px;
    height: 35px;
    z-index: 100;
    position: fixed;
    bottom: 0px;
    
    background-color: #fff;
    border-top: 4px solid #e7eaec; 
    border-left: 1px solid #e7eaec;
    border-right: 1px solid #e7eaec;
    cursor: pointer;
}

.chatboxMinified1 {
    right: 330px;
    display: none;
}

.chatboxMinified2 {
    right: 610px;
    display: none;
}

.chatboxMinified3 {
    right: 890px;
    display: none;
}

.minClick {
    width: 210px;
    height: 35px;
}

.chatboxMinified1 span.onlineStatus, .chatboxMinified1 span.offlineStatus,
.chatboxMinified2 span.onlineStatus, .chatboxMinified2 span.offlineStatus,
.chatboxMinified3 span.onlineStatus, .chatboxMinified3 span.offlineStatus {
    margin-top: 10px;
}

.chatboxMinified1 span.chatboxCaption, 
.chatboxMinified2 span.chatboxCaption, 
.chatboxMinified3 span.chatboxCaption {
    color: #676a6c;
    margin-left: 7px;
    margin-top: 5px;
    line-height: normal;
}

.chatboxMinified1 .chat-close, 
.chatboxMinified2 .chat-close, 
.chatboxMinified3 .chat-close,
.minichatBoxHat .chat-close {
    display: inline-block;
    color: #e7eaec;
    margin-top: 9px;
}

.chatboxMinified1 .chat-close:hover,
.chatboxMinified2 .chat-close:hover,
.chatboxMinified3 .chat-close:hover,
.minichatBoxHat .chat-close:hover {
    color: #cacaca;
}

.minichatBox1, 
.minichatBox2, 
.minichatBox3 {
    width: 230px;
    z-index: 100;
    position: fixed;
    bottom: 0px;
    
    background-color:#fff;    
    
}

.minichatBox1 {
    right:330px;
}

.minichatBox2 {
    right:610px;
}

.minichatBox3 {
    right:890px;
}

.minichatBoxHat {
    height: 35px;
    background-color :#fff;
    cursor: pointer;
    
    border-top: 4px solid #b3c0c7; 
    border-left: 1px solid #b3c0c7;
    border-right: 1px solid #b3c0c7;
}

.minichatBoxHat .minHatClick {
    width: 210px;
    height: 35px;
}

.minichatBoxHat span.onlineStatus, 
.minichatBoxHat span.offlineStatus {
    margin-top:9px;
}

.minichatBoxHat span.chatboxCaption {
    color: #676a6c;
    margin-left: 7px;
    margin-top: 5px;
    width: 160px;

    overflow: hidden;
}

.minichatBoxHat img.minimize {
    margin-right:2%;
    margin-top:14px;
}

.minichatBoxBody {
    border-left: 1px solid #b3c0c7;
    border-right: 1px solid #b3c0c7;
    /*height: 275px;*/
    background-color: #fff;
}

.minichatBoxChronology {
    height: 35px;
    border-bottom: 1px solid #b3c0c7;
    border-top: 1px solid #b3c0c7;
    text-align: center;
    background-color: #efefef;
}

.minichatBoxChronology a {
    color: #1ab394;
    font-weight: 600;
    line-height: 24px;
}

.minichatBoxChat {
    height: 210px;
    border-bottom: 1px solid #b3c0c7;
}

.minichatBoxChat .yourMessage, 
.minichatBoxChat .otherMessage {
    border-bottom: 1px solid #d7ddde;
    padding-bottom:5px;

    transition: background-color 1s;
    -moz-transition: background-color 1s; /* Firefox */
    -webkit-transition: background-color 1s; /* Safari and Chrome */
    -o-transition: background-color 1s; /* Opera */
}

/*.minichatBoxChat .yourMessage:hover {
    background-color:#4d5c65;
}

.minichatBoxChat .otherMessage:hover {
    background-color:#4d5c65;
}*/

.minichatBoxChat .yourMessage span.messageAuthor, 
.minichatBoxChat .otherMessage span.messageAuthor {
    font-weight: 600;
    color: #676a6c;
    margin-left: 10px;
}

.minichatBoxChat .otherMessage {
    background-color: #f4f4f4;
}

.minichatBoxChat .yourMessage span.messageTime, 
.minichatBoxChat .otherMessage span.messageTime {
    font-size: 11px;
    color: #aaa;
    margin-left: 10px;
}

.minichatBoxChat .yourMessage p, 
.minichatBoxChat .otherMessage p {
    margin-left: 10px;
    width: 200px;
    color: #676a6c;
    margin-bottom: 0;
}

.minichatBoxChat .otherMessage {
    text-align: left;
}

.minichatBoxChat .otherMessage span.messageAuthor {
   color:#2dabc1;
}

.minichatBoxSendMessage {
    background-color:#f5f5f6;
    height: 35px;
}

.sendBox {
   width: 170px; 
   height: 35px;
}

.sendBox input[type='text']{
    border: 0;
    width: 170px;
    font-family: "Open Sans", "Helvetica", sans-serif;
    font-size: 13px;
    height: 35px;
    background-color: #f5f5f6;
    color: #676a6c;
    padding: 3px 5px;
}

.sendBox input[type='text']:focus {
    -moz-outline: none;
    outline: none;
    background-color: #f9f9f9;
}

.sendButton input[type='submit'] {
   width: 55px;
   height: 35px;
   background: none;
   border: none;
   cursor: pointer;
   background-color: #2dabc1;
}

.sendButton input[type='submit'].chatSend {
    color: #fff;
    border-left:1px solid #cacaca; 

    transition: all 1s;
    -moz-transition: all 1s; /* Firefox */
    -webkit-transition: all 1s; /* Safari and Chrome */
    -o-transition: all 1s; /* Opera */
}

.sendButton input[type='submit'].chatSend:hover {
    background-color: #2197ac;
}

/* Chat history */

/*--- Chat history timeline ---*/
.chatHistoryTimelinePanel {
    background-color: #f2f2f2;
    border: 1px solid #b3c0c7;
    height: 40px;
    line-height: 40px;
}

.chatHistoryRecentDates label:first-child {
    padding-right: 15px;
    margin-bottom: 0;
}

.chatHistoryRecentDates span.recentDate {
    display: inline-block;
    color: #676a6c;
    padding: 0 10px;
    height: 38px;
}

.chatHistoryRecentDates span.recentDate:hover {
    background-color: #f2f2f2;
    color: #676a6c;
    font-weight: 600;
    cursor: pointer;
}

.chatHistoryRecentDates span.recentDateSelected,
.chatHistoryRecentDates span.recentDateSelected:hover {
    background-color: #2dabc1;
    color: #fff;
    font-weight: normal; 
}

.chatHistorySelectDate {
    width:250px;
    margin-right:5px;
}

.chatHistorySelectDate strong {
    color:#2dabc1;
}

/*--- Chat history content ---*/
table.chatHistoryContentPanel {
    background-color:#e6e6e6;
    border:1px solid #aaa;
    border-collapse:collapse;
    border-spacing:0 !important;
}

.chatHistoryControl {
    background-color: #fff;
    border:1px solid #b3c0c7;
    border-bottom: 0;
}

.chatHistoryControlCaption {
    line-height: 35px;
    background-color: #ececec;
    text-align: center;
    border-bottom: 1px solid #b3c0c7;
}

.chatHistoryControlCaption span {
    font-weight: 600;
    font-size: 14px;
}

.chatHistoryContacts {
    height: 306px;
    overflow: auto;
}

/* --- Chat history -> single contact --- */

.chatHistoryContactStatus {
    text-align:center;
    padding: 0 10px;
}

.chatHistoryContact {
    cursor: pointer;
    padding: 5px 0;
    border-bottom: 1px solid #d7ddde;
}

.chatHistoryContact:nth-child(2n) {
    background-color: #f2f2f2;
}

.chatHistoryContact:hover {
    background-color: #ecfbfe;
}

.chatHistoryContactInfo {
    width: 85%;
}

@media (max-width: 991px) and (min-width: 767px) {
    .chatHistoryContactInfo {
        width: 75%;
    }
}

.chatHistoryContactInfo span.name {
    font-weight: 600;
}

.chatHistoryContactInfo span.role {
    color: #2dabc1;
}

/* --- Chat history -> selected contact --- */
.chatHistoryContactSelected {
    background-color:#2dabc1;
    cursor: pointer;
    padding: 5px 0;
    border-bottom: 1px solid #e7eaec; 
}

.chatHistoryContactSelected .chatHistoryContactInfo span.name {
    color: #fff;
}

.chatHistoryContactSelected .chatHistoryContactInfo span.role {
    color:#ecfbfe;
}

/* --- Chat history -> contact hover --- */
tr.chatHistoryContact:hover {
    background-color:#fff;
    cursor:pointer;
}

tr.chatHistoryContactSelected:hover {
   cursor:pointer;
}

/* --- Chat history -> filter --- */
.chatHistoryFilter {
    margin: 10px 0;
    text-align: center;
}

.chatHistoryFilter input[type='text'] {

}

/* --- Chat history -> messages --- */
.chatHistoryMessagesContainer {
    /* TODO: add accurate height */
    overflow: auto;
    border-right: 1px solid #e7eaec;
    height: 343px;
}

@media (max-width: 767px) {
    .chatHistoryMessagesContainer {
        border-top: 0;
        border-left: 1px solid #e7eaec;
        height: auto;
        max-height: 400px;
    } 
}

table.chatHistoryMessages {
    width:100%;
    border-collapse:collapse;
    border:0 !important;
    border-spacing:0 !important;
}

/* --- Chat history -> date --- */
tr.chatHistoryDate td span {
    display:inline-block;
    font:bold 1em/2em Arial, Sans-serif;
    color:#ebe8e8;
    background-color: #4d5c65;
    color:#192227;
    padding:4px 6px;

    float:right;
}

/* --- Chat history -> your/other message --- */
.chatHistoryYourMessage,
.chatHistoryOtherMessage {
    padding: 5px 0;
    border-bottom: 1px solid #f1f1f2;
}

.chatHistoryYourMessage span.author, 
.chatHistoryOtherMessage span.author {
    margin-left: 15px;
    font-weight: 600;
}

.chatHistoryOtherMessage span.author {
    color: #2dabc1;
}

.chatHistoryYourMessage span.time, 
.chatHistoryOtherMessage span.time {
    font-size: 11px;
    color: #b1b1b1;
    margin-right: 15px;
}

.chatHistoryYourMessage p,
.chatHistoryOtherMessage p {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 0;
    text-align: justify;
}

.chat-history-conversation-headline > span {
    margin-left: 15px;
    display:inline-block;
}

.chat-history-conversation-headline .contact-name {
    margin-top: 10px;
}

/* Chat on smaller resolutions */
@media (max-width: 767px) {
    .chatMinified,
    .minichatControlPanel {
        right: 55px;
        top: 45px;
        bottom: auto;
    }

    .chatMinified,
    .minichatControlPanelHat {
        display: none !important;
    }

    .minichatControlPanelBody {
        border-bottom: 1px solid #e7eaec;
    }

    .minichatChangeStatus {
        background-color: #2f4050;
        border-bottom: 1px solid #202f49;
        height: 40px;
    }

    .minichatChangeStatus.on {
        border-top: 5px solid #1ab394;
    }

    .minichatChangeStatus.off {
        border-top: 5px solid #ed5565;
    }

    .minichatChangeStatus > span {
        color: #a7b1c2;
    }

    .minichatContactsList {
        background-color: #2f4050;
    }

    .minichatContactsList .minichatContact {
        border-bottom: 1px solid #202f49;
    }

    .minichatContactsList .minichatContact:nth-child(2n) {
        background-color: #233646;
    }

    .minichatContactsList .minichatContact span.name {
        color: #a7b1c2;
    }

    .chatboxMinified1 {
        right: 50px;
        display: none;
    }

    .chatboxMinified2 {
        right: 330px;
        display: none;
    }

    .chatboxMinified3 {
        right: 610px;
        display: none;
    }

    .minichatBox1 {
        right: 50px;
    }

    .minichatBox2 {
        right: 330px;
    }

    .minichatBox3 {
        right: 610px;
    }
}