body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.layout{height:100vh;box-sizing:border-box;display:grid;grid-template-areas:"aside main";grid-template-columns:150px auto;grid-template-rows:100%;font-family:Stylish;min-width:300px}@media only screen and (max-width:600px) and (min-width:0px){.layout{grid-template-areas:"main main main" "aside aside aside";grid-template-rows:calc(100vh - 70px) 70px}.layout>aside{height:70px;width:100%}}.layout>main{grid-area:main;display:grid;grid-template-rows:70px calc(100% - 70px);background-color:#fff;z-index:1}.layout>aside{grid-area:aside;overflow:hidden;background-color:rgba(22,32,54,.9);z-index:2}.pickNickname{overflow:auto;padding-bottom:1.5em}.centerItems{margin:5% 1em 0;background-color:#eef3f6;border-radius:1em;padding:2%}.enterNameInput{text-align:center;border:none;background-color:#c9c9c9;border-radius:.5em}.enterNameInput:hover{background-color:grey}.enterNameButton{border:none;background-color:#c9c9c9;border-radius:.5em}.enterNameButton:hover{background-color:grey}.welcomeTextSecondaryHeader{color:#222;font-weight:700;font-size:2em}.welcomeTextHeader{color:#222;font-weight:700;font-size:2.5em}.welcomeText{color:#222;font-weight:700;font-size:1.3em}.enterNick{text-align:center}#chat{max-height:100%;grid-template-columns:repeat (12,1fr);grid-template-rows:calc(100% - 30px) 30px}#chat,#messageContainer{height:100%;box-sizing:border-box;width:100%;display:grid}#messageContainer{grid-column:span 12;grid-template-columns:100%}.messageWrapper{overflow:none;text-align:center;overflow:hidden}#sendMessage{width:100%;overflow:hidden;position:relative;height:100%;z-index:1;display:grid;grid-template-columns:calc(100% - 100px) 100px;grid-template-rows:30px}.sendButton{height:30px;font-weight:700;color:#fff;background-color:#3068bb;border:none;transition-duration:.5s;box-sizing:border-box;-moz-box-sizing:border-box}.sendButton:hover{color:#a02e2e;transition-duration:.5s}.sendButton:focus{outline:none;box-shadow:none}#messages{padding-top:1em;overflow-y:auto;overflow-x:hidden;height:100%;grid-column:span 12}.myMessage{background-color:#324185;float:right;margin-right:1%}.myMessage,.otherMessage{width:50%;color:#fff;border-radius:.5em;margin-top:.5em;margin-bottom:.5em;overflow:none}.otherMessage{background-color:#8a8fa3;float:left;margin-left:1%}.systemMessage{width:50%;background-color:#597aff;display:inline-block;color:#fff;border-radius:.5em;margin-top:.5em;margin-bottom:.5em;margin-left:1%;text-align:center;font-weight:700}.messageText{padding:1em;width:100%;float:left;text-align:left;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.systemMessageText{padding:1em}@media only screen and (max-width:600px) and (min-width:0px){.myMessage,.otherMessage{width:80%}}.last{height:.5em;width:100%;overflow:auto;padding-bottom:1em}.textInput{color:#d15151;background-color:#435192;border:none;height:100%;font-weight:700;resize:none;box-sizing:border-box;-moz-box-sizing:border-box}@-webkit-keyframes fadeToLeftMessage{0%{opacity:0;margin-right:-30px}to{opacity:1;margin-right:0}}@keyframes fadeToLeftMessage{0%{opacity:0;margin-right:-30px}to{opacity:1;margin-right:0}}@-webkit-keyframes fadeToRightMessage{0%{opacity:0;margin-left:-30px}to{opacity:1;margin-left:0}}@keyframes fadeToRightMessage{0%{opacity:0;margin-left:-30px}to{opacity:1;margin-left:0}}.messageSender{border-radius:1em;font-weight:700;box-sizing:content-box;display:inline-block}#headerContainer{padding-left:.5em;padding-top:.5em;font-size:1.8em;font-weight:700;background-color:#4d5880;height:70px;color:#fff;display:-webkit-flex;display:flex;z-index:5}.headerIcon{margin-right:5px;width:50px;margin-bottom:25px}.headerText{font-size:1.5em}@media only screen and (max-width:600px) and (min-width:0px){#headerContainer{padding-left:.5em}}.menuContainer{height:100%;box-sizing:border-box;width:100%;display:grid;grid-template-columns:repeat (12,1fr);grid-template-rows:15% 85%}.menuHeaderIcon{text-align:center;background-image:linear-gradient(to bottom left,#2bebde,#4c4cf8);-webkit-clip-path:circle(20%);clip-path:circle(20%);border:10px solid #162036}.menuHeaderName{color:#266fc9;text-align:center;font-weight:700;font-size:1.5em}.nicknameText{padding-top:5px;padding-left:5px}.users{overflow:auto}.unseenMessages{font-size:1.1em}.unseenMessages,.unseenMessagesAboveNine{-webkit-transform:translate(-30%,-15%);transform:translate(-30%,-15%);right:0;border-radius:100%;width:20px;height:20px;position:absolute;background-color:red;-webkit-animation:fadeToLeft 1s;animation:fadeToLeft 1s;color:#fff;text-align:center}.unseenMessagesAboveNine{font-size:1em}.phoneUnseenMessagesNotice{-webkit-transform:translate(-170%,180%);transform:translate(-170%,180%);border-radius:100%;width:15px;height:15px;position:absolute;background-color:red;-webkit-animation:fadeToLeft 1s;animation:fadeToLeft 1s;color:#fff;text-align:center;font-size:.8em;font-weight:700}.userButtons{float:right;width:100%;position:relative;border:none;cursor:pointer;font-weight:700;background:none;color:#266fc9;height:50px;text-align:left;font-size:1em;overflow:hidden;transition-duration:.5s}.userButtons:hover{color:#a02e2e;transition-duration:.5s}.userButtons:focus{outline:none;box-shadow:none}.menuButtons{float:right;margin-top:-2px}.menuText{margin-top:12.5px}.phoneMenu{color:#fff}.phoneMenuName{position:absolute;margin-left:1em;margin-top:1.5em;font-weight:700;color:#266fc9}.phoneUsers{background-image:linear-gradient(to bottom left,#2bebde,#4c4cf8)}.phoneUsers,.phoneUsersClicked{margin-top:.3em;text-align:center;-webkit-clip-path:circle(20px);clip-path:circle(20px);border:5px solid #162036}.phoneUsersClicked{background-image:linear-gradient(to bottom left,#696969,#5c5c5c)}.phoneUserListHidden{top:-100%;height:100%}.phoneUserList,.phoneUserListHidden{position:absolute;width:100%;z-index:100;background-color:#162036;transition-duration:.5s}.phoneUserList{top:0;height:calc(100% - 70px)}@-webkit-keyframes fadeToLeft{0%{opacity:0;margin-right:-5000px}to{opacity:1;margin-right:0}}@keyframes fadeToLeft{0%{opacity:0;margin-right:-5000px}to{opacity:1;margin-right:0}}
/*# sourceMappingURL=main.cab3132e.chunk.css.map */