/*
    06-adacare.messagingToolsDesktop-v1.0.css       Sandy Gettings

    These styles are defined for the desktop environment. There is another stylesheet for mobile.

    Revisions:
    2021-11-24 SG: Refactored to a separate stylesheet file.
*/

/* Styles for recipient-selection accordions */

.messagingRecipientAccordionSurround {
    width: 150px;
}

.messagingRecipientAccordionPanel {
    overflow: auto;
    max-height: 200px;
    font-size: 75%;
}

.messagingRecipientAccordionButton {
    width: 5em;
}

.messagingRecipientAccordionButtonBox {
    white-space: nowrap;
}

/* Override standard UI style */

.ui-accordion .ui-accordion-content {
    padding-right: 0.5em;
    padding-left: 0.5em;
}

/* Styles for message viewer */

.messagingViewerSurround {
    border-color: #C0C0C0;
    border-width: 1px;
    border-style: solid;
    background-color: #F8F8F8;
    width: 52em;
}

    .messagingViewerSurround td {
        /*padding: 0;*/
    }

.messagingViewerConversationHeader, .messagingViewerMessageHeader {
    padding: 0 5px 9px 5px;
    border-color: #C0C0C0;
    border-width: 1px;
    border-bottom-style: solid;
}

.messagingViewerConversationHeader {
    border-color: #C0C0C0;
    border-width: 1px;
    border-right-style: solid;
    text-align: left;
}

.messagingViewerConversationPaneSurround, .messagingViewerMessagePaneSurround {
    height: 28em;
    /*border-color: #C0C0C0;
            border-width: 1px;*/
}

.messagingViewerConversationPaneSurround {
    width: 22em;
    border-color: #C0C0C0;
    border-width: 1px;
    border-right-style: solid;
    /*padding-right: 3px;*/ /* A little space between us and the message pane */
}

.messagingViewerMessagePaneSurround {
    width: 30em;
}

.messagingViewerConversationPane, .messagingViewerMessagePane {
    width: 100%;
    overflow-y: auto;
}

.messagingViewerConversationPane {
    /*height: 100%;*/
    height: 26em;
}

.messagingViewerConversationPaneGettingStarted {
    font-size: 1.2em;
    color: #C0C0C0;
    text-align: center;
}

.messagingViewerConversationOptions {
    height: 2em;
    padding: 3px 5px 5px 5px;
    border-color: #C0C0C0;
    border-width: 1px;
    border-top-style: solid;
}

.messagingViewerMessagePane {
    height: 20.5em;
    background-color: white;
    border-bottom: 1px solid #C0C0C0;
}

/* Desktop only. Not needed for mobile */
.messagingViewerConversationItem {
    position: relative;
    height: 4.0em;
    border-bottom: 1px solid #C0C0C0;
    padding: 0.25em 0.25em 0.25em 16px;
    background-color: #F8F8F8;
}

.messagingViewerConversationSelected {
    background-color: #0088FF;
}

.messagingViewerConversationItemHeader {
    position: relative;
    height: 1.2em;
    clear: both;
}

.messagingViewerConversationName {
    font-weight: bold;
    /*float: left;*/
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.messagingViewerConversationSelected .messagingViewerConversationName {
    color: white;
}

.messagingViewerConversationDateTime {
    background-color: rgba(248, 248, 248, 0.9);
    color: gray;
    font-size: 75%;
    padding-left: 0.5em;
    position: absolute;
    bottom: 1px;
    right: 8px;
}

.messagingViewerConversationSelected .messagingViewerConversationDateTime {
    background-color: rgba(0, 136, 255, 0.5);
    color: white;
}

.messagingViewerConversationItemUnread {
    font-size: 2em;
    color: #0088FF;
    position: absolute;
    top: -8px;
    left: -16px;
}

.messagingViewerConversationMessageText, .messagingViewerConversationOverflowText {
    height: 2.5em;
    color: gray;
    width: inherit;
    padding-top: 2px;
    /*text-align: left;*/
    /*padding-left: 4px;*/
    /* Note: ellipsis doesn't work for multiline text */
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    clear: both;
}

.messagingViewerConversationMessageText {
    text-align: left;
}

.messagingViewerConversationOverflowText {
    text-align: center;
}

.messagingViewerConversationSelected .messagingViewerConversationMessageText {
    color: white;
}

/* Styles for the pop-up recipients pane */

.messagingViewerMessageRecipientsPage {
    position: absolute;
    /*top: 30px;
            left: -30px;*/
    max-width: 470px;
    border: 1px solid #C0C0C0;
    background-color: white;
    padding: 5px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3); /* CSS3 */
    -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}