.chatTop {
    /* background-color: #efefef;
    height: 60px;*/
}

.contactMenu {
    border-right: 2px #dfdfdf solid;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #efefef;
    border-top: solid #efefef 1px;
    border-left: solid 1px #efefef;
}

.contactList {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
}

.chatBar {
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    border-bottom: 1px solid #efefef;
    border-top: solid #efefef 1px;
    border-right: solid 1px #efefef;
}

body.dark .chatBar {
    border-bottom: 1px solid black;
    border-top: solid black 1px;
    border-right: solid 1px black;
}

.chatBarPopup {
    margin: -1rem;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    height: calc(100vh - 120px);
}

.chatBarInline {
    margin: -1rem;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: auto;
    max-height: 300px;
}

.chatList {
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100px;
}

.mui-scroll-lock .chatList {
    overflow:hidden;
}

.chatListInline {
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 100px;
}

.chatBarInputSection {
    overflow: hidden;
    padding: 15px;
/*    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
*/    width: 100%;
}

.chatBottomDivider {
    border-bottom: 2px solid darkgray;
}

.chatBarInputContainer {
    display: flex;
    flex-direction: column;
    flex: 0.5;
    min-width: 100%;
    padding-right: 15px;
    margin: 0 auto;
}

    .chatBarInputContainer .chatBarInput {
        min-height: 4rem;
        width: 100%;
        border: 1px #afafaf solid;
        border-radius: 8px;
        padding: 5px;
        overflow: hidden;
        height: 100%;
    }

textarea:focus, input:focus {
    outline: none;
}

.largeIcon {
    transform: scale(1.2,1);
}

.regularIcon {
    transform: scale(1.2,1);
}

.grayBackground {
    background-color:#cacaca;
}

body.dark .grayBackground {
    color:black;
}

.chat {
    margin: 5px 4em 5px 1rem;
    padding: 5px 10px;
    align-self: flex-start;
    background-color: #F1F2F6;
    border-radius: 5px;
    white-space: pre-line;
    max-width: calc(100vw - 30px);
    word-wrap: break-word;
}

    .chat.optIn {
        color: gray;
        background-color: transparent;
        width: 100%;
        text-align: center;
        margin: 0px;
        font-weight: bold;
    }

    .chat.mine {
        margin: 5px 1rem 5px 4rem;
        color: white;
        align-self: flex-end;
        background-color: #296BA7;
    }

    .chat a img {
        max-width: calc(100vw - 45px);
    }

.chatDateHeader {
    color: #a6a6a6;
}

.contactOptions {
    height: 100%;
    padding: 3px;
}

.sendContainer {
    margin-left: 10px;
    margin-right: 10px;
}

.smsContact {
    border-bottom: solid 1px #efefef;
    padding: 5px 10px 0px 5px;
}

    .smsContact.smsContactBlocked {
        background-color: #FCD4D5;
    }

    .smsContact:focus {
        outline: none;
    }

    .smsContact.smsContactSelected {
        background-color: #c6d8ef;
        border-bottom: solid 1px transparent;
    }

    .smsContact.smsContactSelectedBlocked {
        background-color: #FAB2B4;
        border-bottom: solid 1px transparent;
    }

.smsContactExcerpt {
    clear: both;
    display: inline-block;
    width: 100%;
    min-height: 32px;
    max-height: 40px;
    overflow: hidden;
    padding-left: 15px;
    color: #5d5d5d
}

.smsContactUnread {
    float: left;
    width: 15px;
    margin-top: -0.1rem;
}

.smsSentStatus {
    margin-top: -0.5rem;
}

.smsContactClosed {
    color: darkgray;
    font-style: italic;
}

.smsContactBlocked {
    color: darkred;
    font-style: italic;
}

.smsBackButton {
    transform: scale(.75, 1.5);
}

/*
.focus-example > .extra {
    display: none;
}

.focus-example:focus > .extra {
    display: block;
}*/


/*
.my-grid td {
    border:none;
}

.my-grid .table-bordered {
    border:none;
}*/
/*
    .my-grid.dxbs-gridview > .card {
        display: flex;
        height: 100%;
        border:none;
    }

        .my-grid.dxbs-gridview > .card > .dxbs-grid-vsd {
            flex: 1 1 auto;
            height: auto;
        }

        .my-grid.dxbs-gridview > .card > div:not(.dxbs-grid-vsd) {
            flex: 1 0 auto;
            display:none;
        }

        .my-grid.dxbs-gridview > .card > div:last-of-type {
            height: 100%;
            border:none;
        }*/

/*.dxbs-table table table-bordered td {
    border:none;
}*/
/*
.bordered-div {
    width: 600px;
    height: 500px;
    border: 1px solid red;
}*/