#chat-log p { margin: 0; padding-top: 0.1em; padding-bottom: 0.1em; } .chatbtn_remove_mess { float: right; margin-right: 1em; } #emoji-button { position: absolute; right: 1em; font-size: 2em; color: lightgray; } #emoji-button:hover { color: gray; } #chat-log { padding: 0; padding-top: 2em; width: 100%; font-size: 14px; } #chat-log li { list-style-type: none; margin: 0.5em; } #chat-submit { margin-top: 1em; } .big-emoji { font-size: 16px; } #chat-online { border-right: 1px solid #ccc; padding-bottom: 0 !important; min-width: 25%; border-bottom: 0; } #chat-online-content { margin-top: 0.5em; margin-bottom: 0; overflow: hidden; overflow-wrap: break-word; overflow-y: auto; max-height: 77vh; } #chat-box { /*border: 1px solid #ccc;*/ /*border-top-right-radius: 4px;*/ width: 100%; overflow: hidden; overflow-wrap: break-word; overflow-y: scroll; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 75%; } #chat-input { width: 100%; padding: 0.4em; padding-bottom: 0.6em; border: 0; color: black; border-top-left-radius: 0; border-top-right-radius: 0; height: 100%; font-size: 14px; } #chat-online-content { padding: 0; width: 100%; } @media (min-width: 800px) { #chat-container { display: flex; width: 100%; height: 90vh; border: 1px solid #ccc; /*border-radius: 0 4px 0 0;*/ border-bottom: 0; } #chat-online { margin: 0; } .chat-left-panel, .chat-right-panel { display: block !important; } } #chat-input, #chat-log .content-message { font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif; } .info-pic { height: 90%; border-radius: 50%; padding: 0.05em; border: 0.1px solid #ccc; margin-left: 3em; margin-bottom: 1.5px; } .info-circle { position: absolute; cx: 86%; cy: 80%; r: 6px; stroke: white; stroke-width: 1; } .info-name { margin-left: 10px; font-size: 2em; font-weight: bold !important; } .info-name a { display: table-caption; } #chat-info { border-bottom: 2px solid darkgray; display: flex; } #refresh-button { padding: 0; margin-left: auto; margin-right: 0.3em; background: transparent; border: none; height: 1.5em; width: 1.5em; } #refresh-button:hover { background: lightgreen; -webkit-transform: rotate(360deg); transform: rotate(360deg); transition: 1.5s ease-in-out; } .status-pic { height: 1.3em; width: 1.3em; border-radius: 0.3em; } .status-container { position: relative; display: inline-flex; } .status-circle { position: absolute; bottom: 0; right: 0; cx: 18px; cy: 18px; r: 4.5px; stroke: white; stroke-width: 1; } .status-row { display: flex; font-size: 15px; padding: 0.2em 0.2em 0.2em 1em; border-radius: 4px; } .status-row:hover { background: lightgray; cursor: pointer; } .status-list { padding: 0; } .status-section-title { cursor: pointer; margin-top: 0.5em; } .unread_boxes { background-color: darkcyan; color: white; border-radius: 50%; padding: 0 3px; margin-left: -4px; } @media (max-width: 799px) { #chat-area { height: 500px; } #emoji-button { display: none; } }