/*http://qnimate.com/facebook-style-chat-box-popup-using-javascript-and-css/
*/

@media only screen and (max-width : 540px) {
 .chat-sidebar{
    display: none !important;
}
/*.chat-popup {
    display: none !important;
}*/

}


.chat-sidebar {
    width: 200px;
    position: fixed;
    height: 100%;
    right: 0px;
    top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgba(29, 49, 91, .3);
}

.sidebar-name {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 4px;
    font-size: 12px;
}

    .sidebar-name span {
        padding-left: 5px;
    }

    .sidebar-name a {
        display: block;
        height: 100%;
        text-decoration: none;
        color: inherit;
    }

    .sidebar-name:hover {
        background-color: #e1e2e5;
    }

    .sidebar-name img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
    }

.popup-box {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 220px;
    height: 400px;
    background-color: rgb(237, 239, 244);
    width: 300px;
    border: 1px solid rgba(29, 49, 91, .3);
    z-index: 10000000;
    border-radius: 9px 9px 9px 9px;
}

    .popup-box .popup-head {
        background-color: #008cba;
        padding: 5px;
        color: white;
        font-weight: bold;
        font-size: 14px;
        clear: both;
        border-radius: 9px 9px 0px 0px;
    }

        .popup-box .popup-head .popup-head-left {
            float: left;
        }

        .popup-box .popup-head .popup-head-right {
            float: right;
            opacity: 0.5;
        }

            .popup-box .popup-head .popup-head-right a {
                text-decoration: none;
                color: inherit;
            }

    .popup-box .popup-messages {
        height: 100%;
        overflow-y: scroll;
    }