*{padding:0;font-family:"Montserrat",sans-serif}*,body{margin:0}body{background-color:#fafafa;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}::-webkit-scrollbar{width:0;background:transparent}.container{margin:auto;width:55%;border-bottom:20px solid #a1a1a1}.whole-chat{display:flex;justify-content:space-between}.chat-shell{flex:1 1;display:flex;flex-direction:column}.chat-section{flex:3 1;display:flex;flex-direction:column}@media screen and (max-width:900px){.container{border-bottom:10px solid #a1a1a1}}@media screen and (max-width:670px){.container{width:100%}}.navbar{display:flex;align-items:center;justify-content:space-between;height:60px;margin:auto;background-color:#2f60a0}.navbar-logo{padding-left:50px;flex:8 1;font-size:20px;color:#fff}.button-out{flex:1 1;padding:10px 5px;border:none;border-radius:5px;background:#00185c;outline:none;margin-right:50px;color:#fff;font-size:12px;text-transform:uppercase;transition:all .2s ease}.button-out:hover{cursor:pointer;background-color:#900;transition:all .2s ease}@media screen and (max-width:900px){.navbar{height:40px}.navbar-logo{padding-left:5px;font-size:16px}.button-out{margin-right:5px}}.menu-top{display:flex;flex-direction:column;align-items:flex-start;padding:20px 15px 10px;background-color:#dae2e9;border-bottom:1px solid #d2d2d2}.current-user{display:flex;align-items:center}.current-user-name{padding-left:10px;font-size:18px;font-weight:500}.search-field{padding:15px 0}.search-icon{position:absolute;padding-top:10px;padding-left:15px}.search{width:250px;padding:10px 10px 10px 40px;border:1px solid #9c9c9c;border-radius:20px;outline:none}@media screen and (max-width:1580px){.search{width:200px}}@media screen and (max-width:1280px){.search{width:150px}}@media screen and (max-width:900px){.menu-top{padding:10px 16px 5px 15px}.search{font-size:11px;width:100px;padding:5px 10px 5px 40px}.search-field{padding:10px 0}.search-icon{position:absolute;padding-top:4px;padding-left:15px}.current-user-name{font-size:12px;text-align:center}}@media screen and (max-width:425px){.menu-top{padding:0 5px}.current-user,.search,.search-field,.search-icon{display:none}}.chats-logo{display:flex;padding:30px 15px;font-size:18px;color:#2f60a0}.chats,.chats-logo{background-color:#dae2e9}.chats{height:635px;overflow-y:scroll}@media screen and (max-width:900px){.chats-logo{font-size:14px}.chats{height:426px}}@media screen and (max-height:720px){.chats{height:321px}}@media screen and (max-width:425px){.chats{height:447px}.chats-logo{padding:15px 0 15px 5px}}.chat-user{border-bottom:1px solid #d2d2d2;display:flex;justify-content:space-between;padding:10px 15px}.chat-user.active{background:#2f60a0;color:#fff}.chat-user.active .created-date{color:#fff}.chat-user:hover{background:#2f60a0;color:#fff;cursor:pointer}.chat-user:hover .created-date{color:#fff}.title-and-photo{display:flex;justify-content:space-between;align-items:center}.user-photo{border-radius:25px}.user-name{padding-left:15px;font-size:14px;font-weight:500}.created-date{font-size:11px;color:#535353}@media screen and (max-width:900px){.chat-user{padding:5px}.user-name{padding-left:5px;font-size:12px}.created-date{font-size:9px}}@media screen and (max-width:425px){.chat-user .created-date,.chat-user .user-name{display:none}}.display-user{background-color:#eee;border-bottom:1px solid #d2d2d2;display:flex;align-items:center;padding:15px 25px 10px}.display-user .user-name{font-size:18px;padding-left:10px}@media screen and (max-width:900px){.display-user{padding:10px 5px 5px}.display-user .user-name{font-size:14px}}.main-conversation{height:694px;background-color:#eee;overflow-y:scroll;overflow-x:hidden}@media screen and (max-width:900px){.main-conversation{height:505px}}@media screen and (max-height:720px){.main-conversation{height:380px}}.message-row{display:grid;grid-template-columns:70%;margin-bottom:20px}.message-row .message-content-photo{width:0}.message-row .message-content{display:grid}.message-row .message-content .user-avatar{border-radius:25px}.message-row .message-content .message-text{font-size:14px}.message-row .message-content .message-date{font-size:10px;color:#535353}.message-row.outcoming{justify-content:end}.message-row.outcoming .message-content{justify-items:end;padding-right:15px;padding-top:5px}.message-row.outcoming .message-content .message-text{line-height:1.5;max-width:500px;padding:10px;background-color:#00185c;color:#fff;border-radius:14px 14px 0 14px}.message-row.outcoming .message-content .message-date{display:grid;justify-content:end}.message-row.incoming{justify-items:start}.message-row.incoming .message-content{grid-template-columns:-5px 1fr;grid-column-gap:15px;padding-left:15px;padding-top:5px}.message-row.incoming .message-content .message-text{line-height:1.5;padding:10px;background-color:#326bb6;color:#fff;border-radius:14px 14px 14px 0}@media screen and (max-width:900px){.message-row.incoming .message-text,.message-row.outcoming .message-text{font-size:12px}.message-row.incoming .message-date,.message-row.outcoming .message-date{font-size:9px}}.submit-msg{border-top:1px solid #d2d2d2;background-color:#eee;padding:25px 0 24px;text-align:center}.type-msg{width:80%;border-top-left-radius:25px;border-bottom-left-radius:25px}.send-msg,.type-msg{padding:15px;border:none;outline:none}.send-msg{color:#0059ff;font-weight:600;background-color:#fff;border-top-right-radius:25px;border-bottom-right-radius:25px}.send-msg:hover{cursor:pointer;color:#0040b6}@media screen and (max-width:1580px){.type-msg{width:70%}}@media screen and (max-width:1280px){.type-msg{width:60%}}@media screen and (max-width:900px){.submit-msg{padding:5px 0}.send-msg,.type-msg{padding:10px;font-size:11px}}.login-page{text-align:center;height:100vh;background:radial-gradient(circle,#fdfdfd 0,#d4d4d4 76%)}.login-component,.login-page{display:flex;justify-content:center;align-items:center}.login-component{background:#2f60a0;box-shadow:9px 10px 39px 2px rgba(0,0,0,.63);border-radius:10px;width:450px;height:500px}.button-in{color:#fff;font-size:20px;padding:20px 70px;outline:none;cursor:pointer;border-radius:10px;border:2px solid #fff;background-color:#2f60a0;transition:all .2s ease}.button-in:hover{color:#000;background-color:#fff;padding:25px 80px;transition:all .2s ease}@media screen and (max-width:1580px){.login-component{width:400px;height:444px}.button-in{padding:15px 55px}}@media screen and (max-width:1024px){.login-component{width:300px;height:333px}.button-in{padding:10px 20px}}
/*# sourceMappingURL=main.d4c5ce40.chunk.css.map */