*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{background-color:#dadbd3;display:grid;height:100vh;place-items:center}.app__body{background-color:#ededed;box-shadow:-1px 4px 20px -6px rgba(0,0,0,.75);display:flex;height:90vh;margin-top:-50px;width:90vw}.chat{display:flex;flex:0.65 1;flex-direction:column}.chat__header{align-items:center;border-bottom:1px solid #d3d3d3;display:flex;padding:20px}.chat__headerRight{align-items:center;display:flex;justify-content:space-between;min-width:10vw}.chat__headerInfo{flex:1 1;padding-left:20px}.chat__headerInfo>h3{font-weight:500;margin-bottom:3px}.chat__headerInfo>p{color:gray}.chat__addUserFormContainer{position:relative}.chat__body{background-image:url(https://i1.wp.com/www.techgrapple.com/wp-content/uploads/2016/07/WhatsApp-Chat-background-ios.jpg?fit=744%2C1392);background-position:50%;background-size:cover;flex:1 1;overflow:scroll;padding:40px}.chat__body::-webkit-scrollbar{display:none}.chat__body{-ms-overflow-style:none;scrollbar-width:none}.chat__footer{align-items:center;border-top:1px solid #d3d3d3;display:flex;height:62px;justify-content:space-between}.chat__footer>form{display:flex;flex:1 1}.chat__footer>form>input{border:none;border-radius:30px;flex:1 1;outline-width:0;padding:10px}.chat__footer>form>button{display:none}.chat__footer>.MuiSvgIcon-root{color:gray;padding:10px}.emoticons__container,.message{position:relative}.message{word-wrap:break-word;background-color:#fff;border-radius:10px;border-top:1px solid #000;font-size:16px;margin-bottom:40px;max-width:500px;min-width:150px;padding:10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.message>.message__avatar{left:-30px;position:absolute;top:-20px;z-index:1}.message__receiver{background-color:#dcf8c6;margin-left:auto}.message__receiver>.message__avatar{left:unset;right:-30px;top:-20px}.message__receiver>.message__name{background-color:#dcf8c6;left:unset;right:15px}.message__timestamp{font-size:xx-small;margin-left:10px}.message__name{word-wrap:break-word;background-color:#fff;border-top-left-radius:5px;border-top-right-radius:5px;font-size:small;font-weight:700;left:15px;max-width:200px;padding:0 5px;position:absolute;top:-19px}.emoticons{background-color:#cdcdcd;border:1px solid #d3d3d3;border-radius:5px;box-shadow:0 10px 15px #888;height:256px;left:-50px;overflow-y:scroll;padding:0 10px 10px;position:absolute;top:-298px;width:300px;z-index:2}.emoticons::-webkit-scrollbar{width:10px}.emoticons::-webkit-scrollbar-track{border-radius:10px;box-shadow:inset 0 0 5px grey}.emoticons::-webkit-scrollbar-thumb{background:#524a4a;border-radius:10px}.emoticons::-webkit-scrollbar-thumb:hover{background:#272525}.emoticons__tabs{border-bottom:1px solid #aaa;display:flex;justify-content:space-around}.emoticons__tab{cursor:pointer;flex:content;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}.emoticons__tab:hover{background-color:#888}.emoticons__emoticonRow{display:flex;font-size:x-large;justify-content:space-around}.emoticons__emoticon{border-radius:5px;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.emoticons__emoticon:hover{background-color:#888}.addUserForm{background-color:#cdcdcd;border-radius:5px;box-shadow:0 10px 10px #a19999;height:150px;justify-content:space-around;left:-140px;padding:10px;position:absolute;top:30px;width:200px;z-index:2}.addUserForm,.addUserForm>form{align-items:center;display:flex;flex-direction:column}.addUserForm>form{justify-content:space-between}.addUserForm>form>input{border:none;border-radius:25px;height:30px;margin-bottom:10px;outline:0;padding-left:15px}.addUserForm>form>button{background-color:#0aad04;border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:medium;font-weight:600;height:30px;width:150px}.addUserForm>form>button:hover{background-color:#1ccc16}.sidebar{display:flex;flex:0.35 1;flex-direction:column}.sidebar__header{border-right:1px solid #d3d3d3;padding:20px}.sidebar__header,.sidebar__headerRight{display:flex;justify-content:space-between}.sidebar__headerRight{align-items:center;min-width:10vw}.sidebar__headerRight>.MuiSvgIcon-root{font-size:24px!important;margin-right:2vw}.sidebar__addChatFormContainer{position:relative}.sidebar__search{align-items:center;background-color:#f6f6f6;display:flex;height:39px;padding:10px}.sidebar__searchContainer{align-items:center;background-color:#fff;border-radius:20px;display:flex;height:35px;width:100%}.sidebar__searchContainer>.MuiSvgIcon-root{color:gray;padding:10px}.sidebar__searchContainer>input{border:none;margin-left:10px;outline-width:0}.sidebar__chats{background-color:#fff;flex:1 1;overflow:scroll}.sidebar__chats::-webkit-scrollbar{display:none}.sidebar__chats{-ms-overflow-style:none;scrollbar-width:none}.sidebarChat{border-bottom:1px solid #f6f6f6;cursor:pointer;display:flex;padding:20px}.sidebarChat:hover{background-color:#ebebeb}.sidebarChat__info>h2{font-size:16px;margin-bottom:8px}.sidebarChat__info{margin-left:15px}.addChatForm{background-color:#cdcdcd;border-radius:5px;box-shadow:0 10px 10px #a19999;height:150px;justify-content:space-around;left:-140px;padding:10px;position:absolute;top:30px;width:200px;z-index:2}.addChatForm,.addChatForm>form{align-items:center;display:flex;flex-direction:column}.addChatForm>form{justify-content:space-between}.addChatForm>form>input{border:none;border-radius:25px;height:30px;margin-bottom:10px;outline:0;padding-left:15px}.addChatForm>form>button{background-color:#0aad04;border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:medium;font-weight:600;height:30px;width:150px}.addChatForm>form>button:hover{background-color:#1ccc16}.login{align-items:center;background-color:#fff;border-radius:20px;display:flex;flex-direction:column;padding:20px;width:300px}.login__logo{object-fit:contain;width:100px}.login>form{width:100%}.login>form>input{border:1px solid #d3d3d3;border-radius:5px;height:30px;margin-bottom:10px;margin-top:10px;padding:3px 3px 3px 10px;width:292px}.login__signInButton{background-color:#d3d3d3;margin-bottom:10px;margin-top:10px}.login__signInButton,.login__signUpButton{border:none;border-radius:10px;font-weight:600;padding:10px;width:100%}.login__signUpButton{background-color:#09bd09}
/*# sourceMappingURL=main.15192ca1.css.map*/