@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
* {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 0; margin: 0;}.home{display:flex;height:100vh;width:100%;background:#212428;overflow:hidden;position:relative}.home>*{flex:1 1}.home-background-blob-object{content:"";position:absolute;width:max(500px,75vw);height:max(500px,75vw);top:-50%;left:-5%;border-radius:50%;background:linear-gradient(-45deg,rgb(53, 70, 228),#fff);-webkit-transform:translateY(25%);transform:translateY(25%)}.home__right{display:flex;justify-content:center;align-items:center}.logIn__container{padding:2rem;z-index:10;border-radius:15px;background:hsla(0,0%,100%,.27058823529411763);box-shadow:0 2px 4px rgb(104 100 100/56%)}.logged-in-user>:first-child,.logIn__container{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.logged-in-user>:first-child{background-color:rgba(245,243,243,.37);border-radius:10px;display:flex;margin:10px 0;padding:10px;box-shadow:0 2px 5px #686464}.logged-in-user .user-image-div{border-radius:50%;height:50px;margin:5px;border: none}.user-image-div>img{border-radius:50%;height:50px}.logged-in-user .user-description-div{display:flex;flex-direction:column;justify-content:space-evenly;word-break:break-word}.logIn__container h1{color:#fff;font-family:"Roboto",sans-serif;font-size:max(5.5vw,3rem);margin-bottom:1.5rem}.log_in_btn,.logged-in-user .btn{display:flex;justify-content:space-between;align-items:center;background-color:rgb(53, 70, 228);font-size:max(2vw,1rem);font-family:"Roboto",sans-serif;color:#fff;margin:auto;padding:.5rem 1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:10px;cursor:pointer;transition:background .5s}.log_in_btn:hover,.logged-in-user .btn:hover{background-color:rgb(69, 85, 224)}.home__left img{position:absolute;bottom:0;width:max(35vw,300px);z-index:5}@media (max-width:600px){.home__left{position:absolute;top:0;left:0;width:100%;height:100vh}}.sc1-nav{background:#34373b;padding:0 10px;border-bottom:1.5px solid var(--border-color)}.nav-user,.sc1-nav{display:flex;align-items:center}.nav-user{flex:1.75 1}.nav-options{flex:1 1;display:flex;justify-content:space-around}.nav-options>*{z-index:0}.nav-options svg{color:var(--icon-colors);font-size:var(--icon-size)}.chat-head{display:grid;grid-template-columns:1fr 5fr;grid-auto-rows:minmax(20px,50px);align-content:center;background-color:var(--chat-head-back); color: #fff;border-bottom:.5px solid var(--border-color);cursor:pointer;padding:0 10px;height:13vh;font-size:1.1rem}.chat-head:hover{background-color:var(--chat-head-hover)}.active-chat,.active-chat:hover{background-color:var(--active-chat-back)}.chat-head>:first-child{display:flex;justify-content:center;align-items:center}.chat-head>:nth-child(2){padding:0 10px;display:flex;flex-direction:column;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-prev{display:flex;justify-content:space-between}.unread-messages{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:x-small;color:#fff;font-weight:700}.unread-messages,.unread-messages p{display:flex;align-items:center;justify-content:center}.unread-messages p{width:3vh;height:3vh;border-radius:50%;text-align:center;background-color:#06d755}.sc1-body{background-color:#212428}.screen1_1{width:100%;height:100vh;z-index:1;transition:-webkit-transform .2s linear;transition:transform .2s linear;transition:transform .2s linear,-webkit-transform .2s linear;position:absolute;background-color:#fff;cursor:pointer;overflow:hidden}.header{height:20vh;background-color:rgb(69, 85, 224);display:flex;align-items:flex-end;justify-content:space-around;padding:0 20px}.header>div{height:10vh;display:flex;justify-content:center;width:100%}.header>div>div:first-child{flex:1 1;display:flex;align-items:center}.header>div>div:nth-child(2){flex:5 1;font-size:1.2rem;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:flex-start}.screen1_1 .body{height:80vh;overflow:scroll}.setup-profile{display:flex;flex-direction:column;align-items:center;background-color:#212428; color: #fff;height:100%}.setup-profile>div{margin:20px 0}.profile-pic{width:75%}.profile-pic>img{width:100%;border-radius:50%}.profile-div{width:100%;height:20%;background-color:#242628;display:flex;flex-direction:column;justify-content:space-around;align-items:center;font-size:1.1rem;padding:5px 0}.profile-div>*{width:80%}.add-contact{display:flex;align-items:center;border-bottom:.5px solid var(--border-color);cursor:pointer}.add-contact-form{width:100%;height:80vh;-webkit-animation:addContactFormAnimation .2s linear;animation:addContactFormAnimation .2s linear;display:flex;flex-direction:column;background-color:var(--nav-back);padding:1%}.add-contact-form>*{margin:5px 0;display:flex;justify-content:space-between}.add-contact-form input:focus{outline:none;border-bottom:1.5px solid #000}.add-contact-form>:nth-child(3){width:100%;display:flex;justify-content:space-between}.add-contact-button{width:100%;padding:1% 0;display:flex;align-items:center;-webkit-animation:addContactButtonAnimation .2s linear;animation:addContactButtonAnimation .2s linear}@-webkit-keyframes addContactFormAnimation{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes addContactFormAnimation{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes addContactButtonAnimation{0%{-webkit-transform:scaleY(0);transform:scaleY(0)}to{-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes addContactButtonAnimation{0%{-webkit-transform:scaleY(0);transform:scaleY(0)}to{-webkit-transform:scaleY(1);transform:scaleY(1)}}.contact-component{display:flex;background-color:var(--chat-head-back);border-bottom:.5px solid var(--border-color);cursor:pointer;padding:10px}.contact-component>div{display:flex;flex-direction:column;justify-content:center;padding:0 5px}.contact-img>img{border-radius:50%;width:3rem}.screen1{flex:0.35 1;height:inherit;position:relative;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--border-color);display:grid;grid-template-rows:12vh 88vh}@media screen and (max-width:520px){.screen1{flex:1 1;width:100%;height:100vh;z-index:1}}.screen2{flex:0.65 1;height:inherit;display:grid;grid-template-rows:12vh 88vh;background:#212428;background-size:cover;background-repeat:repeat;overflow:hidden}@media screen and (max-width:520px){.screen2{flex:1 1;width:100%;position:absolute;top:0;z-index:0}}.sc2-nav{background: #34373b;padding:0 10px;z-index:1; color: #fff;border-bottom:1.5px solid var(--border-color)}.sc2-nav,.sc2-nav>:first-child{display:flex;align-items:center}.sc2-nav>:first-child{flex:9 1}.sc2-nav>:nth-child(2){flex:1 1}.nav2-options{display:flex;justify-content:space-around}.icon{font-size:x-large}#back-btn{display:none}@media screen and (max-width:520px){#back-btn{display:inline-flex}}::-webkit-scrollbar{width:6px;opacity:.3}::-webkit-scrollbar-track{background:#f1f1f1;opacity:.3}::-webkit-scrollbar-track:hover{opacity:1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555;opacity:1}.chats{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.message-element{display:flex;margin:5px;max-width:80%;min-width:200px}.message-element>.main-body{padding:10px; border: none !important;width:min(65%,400px);border-radius:10px;display:flex;flex-direction:column;overflow-wrap:break-word}.message-element>.main-body>*{max-width:100%}.from .main-body{border-top-right-radius:0;background-color: rgb(53, 70, 228); color: #fff;box-sadow:-1px 1px 2px grey}.to .main-body{border-top-left-radius:0;background-color:#fdfdfd;box-shadow: none}.from .message-element-tail{height:0;width:0;border-top:8px solid rgb(53, 70, 228);border-right:8px solid transparent}.to .message-element-tail{height:0;width:0;border-top:8px solid #fff;border-left:8px solid transparent}.chats>.from{flex-direction:row-reverse;align-self:flex-end}.chats>.to{align-self:flex-start}.message-content{overflow-wrap:anywhere}.message-time{font-size:.7rem;color:grey;margin-top:2px}.to .message-time{align-self:flex-start}.from .message-time{align-self:flex-end}#hidden-chat{visibility:hidden;height:0;padding:0;margin:0}.file-upload-preview{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:flex;justify-content:center;align-items:center}.file-upload-preview>*{max-height:300px;max-width:200px;box-shadow:-2px 3px 10px grey}.voice-recording-div{flex:2 1}.recording{display:flex;align-items:center;overflow:hidden;-webkit-animation:timerAnimation .15s cubic-bezier(0,0,0,1.18);animation:timerAnimation .15s cubic-bezier(0,0,0,1.18)}.recording-timer{display:flex;align-items:center}.timer-blinker{height:15px;width:15px;margin-right:5px;background:red;border-radius:50%;-webkit-animation:timerBlinkerAnimation 2s linear infinite;animation:timerBlinkerAnimation 2s linear infinite}@-webkit-keyframes timerBlinkerAnimation{0%{opacity:1}50%{opacity:0}to{opacity:1}}@keyframes timerBlinkerAnimation{0%{opacity:1}50%{opacity:0}to{opacity:1}}@-webkit-keyframes timerAnimation{0%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes timerAnimation{0%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.chat-input{background-color:var(--nav-back);padding:3px 0;display:flex;flex-direction:column}.chat-input>form{justify-content:center}.chat-input-box,.chat-input>form{width:100%;display:flex;align-items:center}.chat-input-box{justify-content:space-around}.chat-input .attachment,.chat-input .emoji{color:#fff}.chat-input-field{flex:1 1;width:100%;border-radius:20px;background:#fff;border:none;padding:0 10px;height:35px;font-size:.8rem}.chat-input-field *{margin:0;padding:0}.chat-input input:focus{outline:0;border:none}.icon{font-size:var(--icon-size)}.attachment-icon-container{display:flex;align-items:center;position:relative}.attchment-icons{height:100%;opacity:0;position:absolute;transition:opacity .2s linear,-webkit-transform .2s cubic-bezier(.1,.47,.01,1.15);transition:transform .2s cubic-bezier(.1,.47,.01,1.15),opacity .2s linear;transition:transform .2s cubic-bezier(.1,.47,.01,1.15),opacity .2s linear,-webkit-transform .2s cubic-bezier(.1,.47,.01,1.15);-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0);cursor:pointer}.attchment-icons img{height:inherit}.icon0{z-index:1;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.show-icon{opacity:1;border-radius:50%;box-shadow:0 5px 10px rgba(0,0,0,.466)}.icon-one{-webkit-transform:translateY(-125%) scale(1);transform:translateY(-125%) scale(1)}.icon-two{-webkit-transform:translateY(calc(-220% - 5px)) scale(1);transform:translateY(calc(-220% - 5px)) scale(1)}.icon-three{-webkit-transform:translateY(calc(-320% - 10px)) scale(1);transform:translateY(calc(-320% - 10px)) scale(1)}.file-input-elements{display:none}.upload-page{height:100%;width:100%;background-color:var(--attchment-upload-back);z-index:1;display:flex;flex-direction:column;justify-content:space-around;align-items:center;-webkit-animation:upload-page-animation .3s linear;animation:upload-page-animation .3s linear}.cross,.upload-page{position:absolute;top:0}.cross{font-size:x-large;font-weight:bolder;left:0}.embeded-preview body{height: 100vh !important;display:flex;justify-content:center}.embeded-preview img{height:100vh !important}@-webkit-keyframes upload-page-animation{0%{top:100%}to{top:0}}@keyframes upload-page-animation{0%{top:100%}to{top:0}}.convrsation{display:flex;flex-direction:column;justify-content:space-between;position:relative; background: #212428;}:root{--nav-back:#212428;--border-color:#e1e1e1;--chat-head-back:#34373b;--icon-color:#eee;--active-chat-back:#34373b;--chat-head-hover:#343434;--attchment-upload-back:#e6e6e6;--unread-messages-green: rgb(53, 70, 228);--icon-size:x-large}.app{max-height:-webkit-fit-content;max-height:-moz-fit-content;max-height:fit-content;overflow:auto}.app,.loading-page{display:flex;height:100vh;width:100%}.loading-page{justify-content:center;align-items:center;background-color:#000}@media screen and (max-width:520px){:root{--icon-size:xx-large}}.MuiButtonBase-root {filter: invert(100%) !important;} img[alt="camera"]{display: none;}img[alt="document"]{ display: none;} button {background: rgb(53, 70, 228); color: #fff; border: none; padding: 1em 2em;} input[placeholder="Type a message"]{padding: 1em 2em; border-radius: 9999px;} iframe {
height: auto !important;
/*# sourceMappingURL=main.0d87d238.chunk.css.map */