body{margin:0;font-family:Arial,Helvetica,sans-serif}.formContainer{background:linear-gradient(to bottom right,rgba(99,110,174,.9058823529),rgba(87,140,171,.8117647059));height:100vh;display:flex;align-items:center;justify-content:center}.formContainer .formWrapper{background-color:#fff;padding:20px 60px;display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:10px}.formContainer .formWrapper .logo{color:#5d5b8d;font-weight:700;font-size:24px}.formContainer .formWrapper .title{color:#5d5b8d;font-weight:medium;font-size:15px}.formContainer .formWrapper form{display:flex;flex-direction:column;gap:15px}.formContainer .formWrapper input{padding:15px;border:none;outline:none;width:250px;border-bottom:1px solid #a7bcff}.formContainer .formWrapper input::placeholder{color:#afafaf}.formContainer .formWrapper button{background-color:#4b68c7;color:#fff;cursor:pointer;font-weight:700;padding:10px;border:none;border-radius:5px;transition:.2s}.formContainer .formWrapper button:hover{scale:102%}.formContainer .formWrapper label{display:flex;align-items:center;gap:10px;color:#8da4f1;font-size:12px;cursor:pointer}.formContainer .formWrapper label img{width:32px;height:32px}.formContainer p{color:#5d5b8d;font-size:12px;margin-top:10px;text-decoration:none}.formContainer a{color:#5d5b8d;text-decoration:none;transition:.2s}.formContainer a:hover{scale:102%;color:#c52104}.home{background:linear-gradient(to bottom right,rgba(99,110,174,.9058823529),rgba(87,140,171,.8117647059));height:100vh;display:flex;align-items:center;justify-content:center}.home .container{border:1px solid white;border-radius:10px;width:65%;height:80%;display:flex;overflow:hidden}@media screen and (max-width: 768px){.home .container{width:90%}}.home .container .sidebar{flex:1;background-color:#3e3c61;position:relative}.home .container .sidebar .navbar{height:50px;background-color:#2f2d52;display:flex;align-items:center;justify-content:space-between;padding:10px;color:#f5f5f5;border-right:1px solid whitesmoke}.home .container .sidebar .navbar img{width:24px;height:24px;border-radius:50%;background-color:#f5f5f5;object-fit:cover}.home .container .sidebar .navbar .logo{font-weight:700}@media screen and (max-width: 768px){.home .container .sidebar .navbar .logo{display:none}}.home .container .sidebar .navbar .user{display:flex;align-items:center;gap:10px}.home .container .sidebar .navbar .user .identity{display:flex;flex-direction:column;align-items:center;gap:5px}.home .container .sidebar .navbar .user .identity button{background-color:#5d5b8d;color:#f5f5f5;font-size:10px;border:none;border-radius:5px;cursor:pointer;height:20px;max-width:50px;transition:.2s}@media screen and (max-width: 768px){.home .container .sidebar .navbar .user .identity button{position:absolute;bottom:10px}}.home .container .sidebar .navbar .user .identity button:hover{scale:105%;background-color:#c52104}.home .container .sidebar .navbar .user .identity span{align-items:center}.home .container .sidebar .search{border-bottom:1px solid gray}.home .container .sidebar .search .searchForm{display:flex;gap:10px;padding:10px 20px;color:#f5f5f5}.home .container .sidebar .search .searchForm input{background-color:transparent;color:#fff;border:none;outline:none}.home .container .sidebar .search .searchForm input::placeholder{color:#d3d3d3}.home .container .sidebar .search .searchList{padding:10px;display:flex;justify-content:center;align-items:center;gap:20px;color:#fff}.home .container .sidebar .search .searchList img{width:40px;height:40px;border-radius:50%;object-fit:cover}.home .container .sidebar .chatList{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer}.home .container .sidebar .chatList:hover{background-color:#2f2d52}.home .container .sidebar .chatList .userChat{padding:10px;display:flex;align-items:center;gap:10px;color:#fff}.home .container .sidebar .chatList .userChat img{width:50px;height:50px;border-radius:50%;object-fit:cover}.home .container .sidebar .chatList .userChat .userChatInfo span{font-size:16px;font-weight:500}.home .container .sidebar .chatList .userChat .userChatInfo p{font-size:10px;color:#d3d3d3;margin:5px 0}.home .container .sidebar .chatList .lastMessage{font-size:8px;color:#f5f5f5;margin-top:15px;max-width:60px;padding:10px 15px}.home .container .chat{flex:2}.home .container .chat .chatInfo{background-color:#2f2d52;display:flex;align-items:center;height:50px;justify-content:space-between;color:#d3d3d3;padding:10px}.home .container .chat .chatIcons{display:flex;gap:15px}.home .container .chat .chatIcons img{height:24px;cursor:pointer}.home .container .chat .messageList{background-image:url(/assets/pxfuel-e1d84fb5.jpg);background-size:cover;background-position:center;height:calc(100% - 160px);overflow-y:scroll;padding:10px 20px;align-items:center}.home .container .chat .messageList .groupMessage{width:100%;max-width:600px;display:flex;flex-direction:column;gap:10px}.home .container .chat .messageList .groupMessage h2{align-items:center;margin:10px auto;font-size:12px;font-weight:700;color:#2f2d52;border-bottom:1px dotted #2f2d52;padding-bottom:5px;text-align:center;width:50%}.home .container .chat .messageList .message{display:flex;gap:10px}.home .container .chat .messageList .message .messageInfo{display:flex;flex-direction:column;color:gray;font-weight:300;align-items:center}.home .container .chat .messageList .message .messageInfo img{width:30px;height:30px;border-radius:50%;object-fit:cover}.home .container .chat .messageList .message .messageInfo span{font-size:10px}.home .container .chat .messageList .message .messageContent{max-width:80%;display:flex;flex-direction:column}.home .container .chat .messageList .message .messageContent p{background-color:#fff;padding:5px 10px;margin-bottom:5px;margin-top:5px;border-radius:0 20px 20px;max-width:max-content;font-size:14px}.home .container .chat .messageList .message .messageContent img{width:50%}.home .container .chat .messageList .message.owner{flex-direction:row-reverse}.home .container .chat .messageList .message.owner .messageContent{align-items:flex-end}.home .container .chat .messageList .message.owner .messageContent p{background-color:#2f2d52;color:#fff;border-radius:20px 0 20px 20px}.home .container .chat .messageList::-webkit-scrollbar{width:5px}.home .container .chat .messageList::-webkit-scrollbar-thumb{background-color:#5d5b8d;border-radius:5px}.home .container .chat .messageList::-webkit-scrollbar-track{background-color:#d7d7c2}.home .container .chat .input{background-color:#fff;height:50px;padding:10px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 0 4px #2f2d5233}.home .container .chat .input input{width:100%;border:none;outline:none;color:#2f2d52;font-size:14px}.home .container .chat .input input::placeholder{color:#708090;font-size:14px;font-style:italic}.home .container .chat .input .send{display:flex;align-items:center;gap:20px}.home .container .chat .input .send svg{height:26px;width:26px;transition:.2s;stroke:#2f2d52;fill:none;outline:none;margin:auto}.home .container .chat .input .send svg:hover{scale:105%;fill:#a7bcff}.home .container .chat .input .send .SendSVG:hover{scale:105%;fill:#a7bcff}