#loader { display: block; margin-left: auto; margin-right: auto; width: 4%; } #chat-log { padding: 0; padding-top: 2em; width: 100%; } #chat-log li { list-style-type: none; margin: 0.5em; } #chat-submit { margin-top: 1em; } .profile-pic { height: 2.6em; width: 2.6em; border-radius: 0.3em; margin-top: 0.1em; float: left; } .body-message { padding-left: 3em; padding-bottom: 1em; border-bottom: 1px solid lightgray; } .user-time { margin-bottom: 0.3em; } .time { margin-left: 0.5em; } .user { font-weight: bold; } .clear { clear: both; } .content-message { word-wrap: break-word; } .content-message p { margin: 0; } #chat-area { height: 85vh; /*display: flex;*/ /*flex-direction: column;*/ } #chat-online { border: 1px solid #ccc; border-radius: 4px; overflow: hidden; overflow-wrap: break-word; overflow-y: scroll; max-height: 81vh; } #chat-online-content { } #chat-box { border: 1px solid #ccc; border-radius: 4px; width: 100%; overflow: hidden; overflow-wrap: break-word; overflow-y: scroll; border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 85%; height: auto; } #chat-input { width: 100.3%; padding: 0.4em; color: black; font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif; border-top-left-radius: 0; border-top-right-radius: 0; height: 15%; } #chat-online-content { padding: 0; width: 100%; } .green-dot, .red-dot { height: 0.8em; width: 0.8em; border-radius: 50%; display: inline-block; margin-bottom: -0.15em; } .green-dot { background-color: #42f58d; } .red-dot { background-color: red; } @media (min-width: 800px) { #chat-container { display: flex; width: 100%; } #chat-box { } #chat-online { margin-left: auto; width: 22%; } #chat-area { width: 75%; } .chat-left-panel, .chat-right-panel { display: block !important; } }