/* Single column, conversations selector for screens below 720px */
#pms_viewer .conversations { height: 55px; overflow: hidden; }
#pms_viewer .conversations .extender { float: right; margin: 5px 5px 0 10px; height: 45px; cursor: pointer;
                                       line-height: 32px; font-size: 24px; }
#pms_viewer .conversations .extender:hover { border-style: outset; background-color: ButtonFace; color: ButtonText; }

/* Two columns for screens above 1024px */
@media all and (min-width: 1000px) {
    #pms_viewer .conversations .extender { display: none; }
    #pms_viewer .conversations { width: 28%; float: left; height: auto; overflow: inherit; padding-right: 9px; }
    #pms_viewer .messages      { width: 72%; float: left; padding-left: 9px; border-left: 2px solid silver; }
}

/* Expanded/collapsed */

#pms_viewer .conversations.expanded {
    position: fixed; overflow: auto;
    top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
    background-color: white;
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    box-shadow:         1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    z-index: 10;
}
#pms_viewer .conversations.expanded .extender {
    height: 32px; width: 32px; font-size: 16px; line-height: 24px;
}

#pms_viewer .conversations          .conversation_item:not(.selected) { display: none; }
#pms_viewer .conversations.expanded .conversation_item { display: block; }
@media all and (min-width: 1000px) {
    #pms_viewer .conversations .conversation_item:not(.selected) { display: block; }
}

/* Standard sets */

#pms_viewer .conversation_item {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid silver;
    cursor: pointer;
}

/* Note: colors taken from the default styles! These must be ported to the template styles! */
#pms_viewer .conversation_item:last-child  { border-bottom: none; }
#pms_viewer .conversation_item.unread      { background-color: white; color: black; }
#pms_viewer .conversation_item:hover       { background-color: #42A0FF; color: white;}
#pms_viewer .conversation_item.selected    { background-color: #BBDDFF; color: black; cursor: auto; }

#conversation_container .pagination_button                 { text-align: center; }
#conversation_container .pagination_button        button   { width: 100%; }
#conversation_container .pagination_button.top    button   { margin-bottom: 10px; }
#conversation_container .pagination_button.bottom button   { margin-top: 10px; }
#conversation_container .pagination_button button:disabled { display: none; }

#conversation_container .pm_items .pm_item              { border-bottom: 1px solid silver; padding: 5px; }
#conversation_container .pm_items .pm_item:last-child   { border-bottom: none; }
#conversation_container .pm_items .pm_item.unread       { background-color: white; }

#send_pm_paged_form .attachments .attachment            { margin: 10px 0; }
#send_pm_paged_form .attachments .attachment:last-child { margin-bottom: 0; }

textarea.pm_input, #conversation_container .pm_items .pm_item {
    font-family: Arial, Helvetica, sans-serif; font-size: 11pt;
}

#conversation_container .pm_items .pm_item .contents {
    word-wrap: break-word;
}

#conversation_container .pm_items .pm_item .contents p {
    margin: 0;
}

img.pm_attachment { max-width: 100%; border: 1px solid black; }

/* Online contacts list */

#online_users_list {
    z-index: 100;
    
    display: block;
    position: fixed;
    bottom: 0;
    right: 24px;
    width: auto;
    min-height: 23px;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    
    color:            rgba(255, 255, 255, 0.75);;
    background-color: #23282d;
    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow:    2px 2px 10px 1px rgba(0, 0, 0, 1);
    box-shadow:         2px 2px 10px 1px rgba(0, 0, 0, 1);
}

#online_users_list .trigger       { padding: 3px 10px 3px 3px; cursor: pointer; font-weight: bold; line-height: 26px; min-height: 26px; }

#online_users_list[data-state="collapsed"] span.expanded  { display: none; }
#online_users_list[data-state="collapsed"] span.collapsed { display: inline-block; }
#online_users_list[data-state="collapsed"] .content       { display: none; }

#online_users_list[data-state="expanded"]  span.expanded  { display: inline-block; }
#online_users_list[data-state="expanded"]  span.collapsed { display: none; }
#online_users_list[data-state="expanded"]  .content       { display: block; }

#online_users_list .content {
    max-height: calc(90vh - 32px);
    overflow: auto;
    overflow-x: hidden;
}

#online_users_list .content .user {
    position: relative;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    background-size: 28px 28px;
    padding-left: 34px;
    font-size: 12pt;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
}

#online_users_list .content .user .user_display_name {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
}

#online_users_list .content .user .user_display_name .name {
    display:  inline-block;
    width:    180px;
    margin-right: 28px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
}
#online_users_list .content .user .user_display_name .fa-user {
    font-size: 24px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    position: absolute;
    right: 4px;
}

#online_users_list .trigger:hover       ,
#online_users_list .content .user:hover { color: white; background-color: #535556; }

#online_users_list .trigger.highlighted { color: white; background-color: #a3a300; }

#online_users_list .content .user.highlighted       { background-color: #575700; }
#online_users_list .content .user.highlighted:hover { background-color: #7f7f00; }

/* User chat docklets */

.user_chat_docklet {
    position:                fixed;
    z-index:                 100;
    bottom:                  0;
    font-family:             Arial, Helvetica, sans-serif;
    display:                 inline-block;
    text-align:              left;
    color:                   rgba(255, 255, 255, 0.75);
    vertical-align:          bottom;
    background-color:        #23282d;
    border-top-left-radius:  5px;
    border-top-right-radius: 5px;
    -webkit-box-shadow:      2px 2px 10px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow:         2px 2px 10px 1px rgba(0, 0, 0, 1);
    box-shadow:              2px 2px 10px 1px rgba(0, 0, 0, 1);
    
}

.user_chat_docklet .title              { white-space: nowrap; padding: 5px; height: 32px; cursor: pointer;
                                         font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 16px; }
.user_chat_docklet .title:hover        { color: white; }
.user_chat_docklet .avatar             { width: 24px; height: 24px; margin-right: 10px; border: none; }
.user_chat_docklet .user_display_name  { display: inline-block; line-height: 24px; margin-right: 4px;
                                         vertical-align: top; }

.user_chat_docklet .content { width: 300px; overflow: auto; margin: 5px;
                              min-height: 66px; max-height: 390px;
                              font-size: 11pt; line-height: normal; color: silver; background-color: #3f3f3f; }

@media all and (max-height: 500px) { .user_chat_docklet .content { max-height: calc(100vh - 110px); } }

.user_chat_docklet .input          { white-space: nowrap; }
.user_chat_docklet .input textarea { width: calc(100% - 10px); margin-left: 5px; height: 18px;
                                     font-family: Arial, helvetica, sans-serif; font-size: 11pt;
                                     padding-right: 34px; }
.user_chat_docklet .input button   { position: absolute; margin-left: -35px; margin-top: 2px; }

.user_chat_docklet .window_toggle .min  { display: inline-block; }
.user_chat_docklet .window_toggle .max  { display: none; }

.user_chat_docklet .actions { text-align: left; margin: 3px 5px 0 5px;
                              font-size: 12px;  height: 18px; line-height: 16px;
                              background-color: black; padding: 2px 2px 0 2px;
                              overflow: hidden; white-space: nowrap; }

.user_chat_docklet .actions a             ,
.user_chat_docklet .actions .action       { color: silver; text-decoration: none; cursor: pointer; padding: 0 5px; }
.user_chat_docklet .actions a:hover       ,
.user_chat_docklet .actions .action:hover { color: white; }

.user_chat_docklet.collapsed .window_toggle .min { display: none; }
.user_chat_docklet.collapsed .window_toggle .max { display: inline-block; }
.user_chat_docklet.collapsed .actions            { display: none; }
.user_chat_docklet.collapsed .content            { display: none; }
.user_chat_docklet.collapsed .input              { display: none; }
.user_chat_docklet.collapsed .user_display_name  { max-width: 50px; margin-right: 10px; overflow: hidden; }

.user_chat_docklet .content .message          { margin: 5px 0; color: black; }
.user_chat_docklet .content .message.incoming { text-align: left; }
.user_chat_docklet .content .message.outgoing { text-align: right; }
.user_chat_docklet .content .message.empty    { padding: 20px 10px; text-align: center; color: grey; }

.user_chat_docklet .content .message          .text { display: inline-block; max-width: 80%; text-align: left;
                                                      margin: 0 5px; padding: 5px; border-radius: 5px;
                                                      position: relative; word-wrap: break-word; }
.user_chat_docklet .content .message.incoming .text { background-color: white;   border-top-left-radius:  0; margin-left:  10px; }
.user_chat_docklet .content .message.outgoing .text { background-color: #DCF8C6; border-top-right-radius: 0; margin-right: 10px; }
.user_chat_docklet .content .message          .time { color: grey; font-size: 9pt; }
.user_chat_docklet .content .message.incoming .time { text-align: right; }
.user_chat_docklet .content .message.outgoing .time { text-align: left; }

.user_chat_docklet .content .message.incoming .text:before {
    content: ''; display: block; position: absolute;
    left: -10px; top: 0;
    border: 5px solid; border-color: white white transparent transparent;
}

.user_chat_docklet .content .message.outgoing .text:after {
    content: ''; display: block; position: absolute;
    left: 100%; top: 0;
    border: 5px solid; border-color: #DCF8C6 transparent transparent #DCF8C6;
}

.user_chat_docklet .content .message.read.incoming .text { color: dimgrey; opacity: 0.8; }
.user_chat_docklet .content .message.read.outgoing .text { color: dimgrey; opacity: 0.8; }

/* Modal docklets for small screens */

body[data-show-modal-pms="true"] .user_chat_docklet {
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    z-index: 1000;
}

body[data-show-modal-pms="true"] .user_chat_docklet.collapsed {
    display: none;
}

body[data-show-modal-pms="true"] .user_chat_docklet .window_toggle {
    display: none;
}

body[data-show-modal-pms="true"] .user_chat_docklet .content {
    width: calc(100% - 10px);
    max-height: none;
    height: auto;
    position: fixed;
    top: 55px; left: 0; right: 0; bottom: 55px;
}

body[data-show-modal-pms="true"] .user_chat_docklet .input {
    position: fixed; left: 0; right: 0; bottom: 0;
}

body[data-show-modal-pms="true"] .user_chat_docklet .input textarea {
    height: 50px !important;
}

body[data-show-modal-pms="true"] .user_chat_docklet .title {
    cursor: auto;
}

body[data-show-modal-pms="true"] .user_chat_docklet .title:hover {
    color: rgba(255, 255, 255, 0.75);
}