.chat-overlay{

    width:100%;
}
.chat_box {

    --rad: 20px;
    --rad-sm: 3px;
    font: 16px/1.5 sans-serif;
    display: flex;
    flex-direction: column;
    padding: 20px;
    width:450px;
    margin: auto;
}

.msg_container {
    position: relative;
    max-width: 75%;
    padding: 7px 15px;
    margin-bottom: 2px;
}

.base_sent {
    border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
    background: #bfd0e0;
    color: #555;
    /* moves it to the right */
    margin-left: auto;
}

.base_receive {
    border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
    background: #f1f1f1;
    color: #555;
    /* moves it to the left */
    margin-right: auto;
}

.base_receive .col-2 {
display: flex;
align-content: center;
flex-wrap: nowrap;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
.base_sent .col-2 {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
/* Improve radius for messages group */

.base_sent:first-child,
.base_receive+.base_sent {
    border-top-right-radius: var(--rad);
}

.base_receive:first-child,
.base_sent+.base_receive {
    border-top-left-radius: var(--rad);
}


/* time */

.msg_container::before {
    content: attr(data-time);
    font-size: 0.8rem;
    position: absolute;
    bottom: 100%;
    color: #888;
    white-space: nowrap;
    /* Hidden by default */
    display: none;
}

.base_sent::before {
    right: 15px;
}

.base_receive::before {
    left: 15px;
}


/* Show time only for first message in group */

.msg:first-child::before,
.base_sent+.base_sent::before,
.base_receive+.msg.sent::before {
    /* Show only for first message in group */
    display: block;
}

time {
    font-size: 11px;
    font-style: italic;
}

#login-box {
    margin-top: 20px
}

#chat_box {
    position: fixed;
    top: 10%;
    right: 5%;
    width: 27%;
}

.close-chat {
    margin-top: -17px;
    cursor: pointer;
}



.chat-area {

    height: Calc(100vh - 200px);
    overflow-y: scroll;
}

#users li {
    margin-bottom: 5px;
}

#chat-overlay {
    position: fixed;
    right: 0%;
    bottom: 0%;
    z-index: 999999999;
}

.glyphicon-ok {
    color: #bfd0e0;
}

.loader {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@media (max-width: 767px) {
    .chat_box {
        width: 100% !important;
        height: Calc(100% - 63px);
        position: absolute;
        bottom: 0px;
    }

    .chat-openedo {
        position: fixed;
        right: 0%;
        bottom: 0%;
        width: 100%;
        height: 100%;
    }

    .fullheight{
        height: 100%;
    }

    .panel-heading, .panel-footer{
        height: 40px;
    }

    .chat-area{
        height: Calc( 100% - 134px);
    }



}