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

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

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

/* Styles for recipient-selection accordions */

.messagingMobileRecipientAccordionSurround {
    width: 150px;
}

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

.messagingMobileRecipientAccordionButton {
    width: 6em;
}

.messagingMobileRecipientAccordionButtonBox {
    white-space: nowrap;
}

/* Override standard UI style */

.ui-accordion .ui-accordion-content {
    padding-right: 0.5em;
    padding-left: 0.5em;
}
/* Styles for message viewer */

.messagingMobileViewerSurround {
    /* MOBILE border-color: #C0C0C0;
            border-width: 1px;
            border-style: solid;*/
    background-color: #F8F8F8;
    /* MOBILE width: 52em;*/
    width: 100%;
}

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

.messagingMobileViewerConversationHeader, .messagingMobileViewerMessageHeader {
    padding: 0px;
    border-color: #C0C0C0;
    border-width: 1px;
    border-bottom-style: solid;
}

.messagingMobileViewerConversationHeader {
    /* MOBILE border-color: #C0C0C0;
            border-width: 1px;
            border-right-style: solid;*/
    text-align: left;
}

.messagingMobileViewerConversationPaneSurround, .messagingMobileViewerMessagePaneSurround {
    /* MOBILE height: 28em;*/
    /*border-color: #C0C0C0;
            border-width: 1px;*/
}

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

.messagingMobileViewerMessagePaneSurround {
    /* MOBILE width: 30em;*/
}

.messagingMobileViewerConversationPane, .messagingMobileViewerMessagePane {
    width: 100%;
    overflow-y: auto;
}

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

.messagingMobileViewerConversationPaneGettingStarted {
    /* MOBILE font-size: 200%; */
    font-size: 150%;
    color: #C0C0C0;
    text-align: center;
}

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

.messagingMobileViewerMessagePane {
    /* MOBILE height: 20.5em;*/
    /*height: 15em;*/
    height: 100%;
    background-color: white;
}

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

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

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

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

.messagingMobileViewerConversationSelected .messagingMobileViewerConversationName {
    color: white;
}

.messagingMobileViewerConversationDateTime {
    /* NOT FOR MOBILE background-color: rgba(248, 248, 248, 0.9);*/
    color: gray;
    font-size: 75%;
    padding-left: 0.5em;
    position: absolute;
    top: -12px;
    right: -30px;
}

/* NOT FOR MOBILE */
/*.messagingMobileViewerConversationSelected .messagingMobileViewerConversationDateTime {
            background-color: rgba(0, 136, 255, 0.5);
            color: white;
        }*/

.messagingMobileViewerConversationItemUnread {
    font-size: 2em;
    color: #0088FF;
    position: absolute;
    /* MOBILE IS DIFFERENT top: -8px;*/
    top: -12px;
    /* MOBILE IS DIFFERENT left: -16px; */
    left: -14px;
}

.messagingMobileViewerConversationMessageText, .messagingMobileViewerConversationOverflowText {
    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;
    /* MOBILE */
    word-break: break-all;
    overflow: hidden;
    clear: both;
}

.messagingMobileViewerConversationMessageText {
    text-align: left;
}

.messagingMobileViewerConversationOverflowText {
    text-align: center;
}

.messagingMobileViewerConversationSelected .messagingMobileViewerConversationMessageText {
    color: white;
}