body {
    margin: 0;
    padding: 1vw;
    font-family: Arial, Helvetica, sans-serif;
}
#page {
    display: flex;
}
#customers-rooms {
    width: 70vw;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 1vw;
}
#customers-rooms > .room {
    width: 32vw;
    border: 2px solid #6755f7;
    margin: 1vw;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}
#customers-rooms > .room ul {
    list-style: none;
    flex-grow: 1;
    padding: 10px 5px;
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
}
#customers-rooms > .room .room-title {
    padding: 5px 10px;
    color: #f3bc42;
    background: #6755f7; 
    font-size: 14px;
}
#customers-rooms > .room .close {
    content: '×';
    position: absolute;
    right: 0;
    top: 0;
}
#customers-rooms > .room li {
    padding: 5px 10px;
    clear: both;
    background: #eee;
    margin: 5px;
}
#customers-rooms > .room li.operator {
    float: right;
    border-radius: 10px 0 10px 10px;
}
#customers-rooms > .room li.customer {
    float: left;
    border-radius: 0 10px 10px 10px;
}
#customers-rooms > .room form {
    border-top: 2px solid #6755f7;
    display: flex;
}
#customers-rooms > .room form input[type="text"],
#customers-rooms > .room form input[type="file"] {
    border: 0;
    flex-grow: 1;
    padding: 0 10px;
    outline: none;
}
#customers-rooms > .room form input[type="text"]:focus {
    background-color: #faebbf;
}
#customers-rooms > .room form button {
    color: #f3bc42;
    background: #6755f7;
    padding: 6px 10px;
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}
.online-users {
    width: 15vw;
}
.online-users li {
    list-style: none;
    display: block;
    background: #6755f7; 
    color: #f3bc42; 
    padding: 6px; 
    cursor: pointer; 
    border-radius: 3px;
    margin: 5px 0;
}