div#com {
    color: #009bdd;
    background-color: #010101;
}

div#com_header_div {
    /* position: absolute; */
    width: 100%;
    height: 7%;
    background-color: aliceblue;
    color: #009bdd;
    border-radius: 2px;
    display: block;
}

.com-title {
    width: 50%;
    margin: 0px 0px 0px 0px;
    padding-top: 3px;
    padding-left: 2px;
    float: left;
}

.chat-toolbar {
    color: black;
    /* position: absolute; */
    width: 45%;
    float: right;
    right: 0px;
    top: -3px;
}

.chat-toolbar button {
    display: block;
}

.chat-toolbar button span {
    height: 24px;
}

.chat-toolbar>span {
    position: relative;
    height: 24px;
    top: 6px;
    font-size: 14px;
}

div#com_main_div {
    height: 85%;
    padding-top: 12px;
    /* overflow-y: scroll; */
    /* position: absolute; */
}

ul#messages {
    font-size: 14px;
    height: 99%;
    overflow-y: auto;
    list-style-type: none;
    padding-inline-start: 20px !important;
}

.com-line-div {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: 12px;
}

.com-img-div {
    float: left;
    width: 48px;
}

.com-user-img {
    width: 48px;
    border: solid #009bdd 1px;
}

.com-text-div {
    float: left;
    width: auto;
    padding-left: 8px;
}

div#com {
    height: 100%;
}

div#com_controls_div {
    /* position: absolute; */
    height: 8%;
    width: 100%;
    margin-bottom: 0px!important;
}

input#com_input {
    width: 83%;
    height: 24px;
}

button#close_chat_btn {
    padding-bottom: 8px;
}

button#send_button {
    width: 17%;
    height: 24px;
}