Message System

MessageSystem/chat.css

+body {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+}
+
+.box{
+    margin: 25px;
+    width: 500px;
+    height: 600px;
+    border: 1px solid black;
+    font-family: Helvetica;
+    position: relative;
+}
+
+.chat-title {
+    background: rgb(80, 74, 71);
+    padding: 10px;
+}
+.name {
+    color:white;
+    font-size: 30px;
+}
+
+
+
+.chat-box {
+    background: rgb(243, 248, 255);
+    height:452px;
+    padding-bottom: 50px;
+    /* height: auto; */
+    overflow: auto;
+}
+.chat-input {
+    /* border-style: solid;
+    border-width: 1px; */
+    width: 100%;
+    bottom:0px;
+    border-top: 1px solid black;
+    height: 40px;
+    position:absolute;
+    display: flex;
+    flex-flow: column;
+    background: white;
+}
+
+.sendermessage {
+    font-size: 15px;
+    /* border: 1px orangered solid; */
+    border-radius: 5px;
+    width:200px;
+    height: auto;
+    padding: 5px;
+    margin: 5px;
+    margin-left: 200px;
+    background-color: rgb(255, 178, 53);
+    float: right;
+}
+.receivemessage {
+    
+    font-size: 15px;
+    border: 1px white;
+    border-radius: 5px;
+    width: 200px;
+    height: auto;
+    padding: 5px;
+    margin: 5px;
+    margin-right: 200px;
+    background-color: rgb(153, 224, 252);
+    float: left;
+}
+
+.send-button {
+    background: rgb(80, 74, 71);
+    color:white;
+    border:none;
+    outline: none;
+    /* border:rgb(80, 74, 71); */
+    float: right;
+    height: 100%;
+    width: 30%;
+}
+.send-button:hover {
+    cursor:pointer;
+    background: rgb(24, 22, 21);
+}
+.message-content {
+    font-size: 15px;
+    margin-left: 5px;
+    width:68%;
+    height: 100%;
+    border: none;
+    outline: none;
+}
+
+.chatroom-item {
+    background: rgb(255, 250, 237);
+    border: 1px solid rgb(128,128,128);
+    padding:10px;
+}
+
+.chatroom-username {
+    font-size: 20px;
+}
+
+.chatroom-lastmessage {
+    font-size: 15px;
+    color: rgb(128,128,128);
+}
+.chat-search {
+    padding: 0px;
+    margin:0px;
+    background: rgb(128,128,128);
+    height: 20px;
+    padding: 10px;
+    text-align: right;
+}
+.search-name {
+    font-size: 15px;
+    margin-bottom: 5px;
+}
+.search-button {
+    background: rgb(255, 178, 53);
+    color:white;
+    border:none;
+    outline: none;
+    font-size: 20px;
+}
+.search-button:hover {
+    cursor:pointer;
+    background: rgb(255,165,0);
+}
+form{
+    margin:0px;
+}
\ No newline at end of file