.header{background-color:#222;color:#fff;padding:1rem 0;display:grid;grid-template-columns:1fr 3fr 1fr;grid-template-areas:". brand colors"}.header .brand{grid-area:brand;margin:0;text-align:center}.header .colors{grid-area:colors;display:flex;flex-wrap:nowrap}.header .colors .color{display:inline-block;width:2rem;height:100%;margin-left:.5rem;border-radius:.3rem;cursor:pointer}.header .colors .color.orange{background-color:#fd5d1b}.header .colors .color.red{background-color:#ff416c}.header .colors .color.blue{background-color:#0cc1ed}.header .colors .color.white{background-color:#fff}.start-page{margin:0;color:#000;display:flex;align-items:center;justify-content:center;height:calc(100% - 70px);font-family:"Comfortaa"}.start-page .log-in{border:5px solid #000;background-color:hsla(0,0%,100%,.452);padding:1rem;border-radius:20px;display:flex;flex-direction:column;align-items:center}.start-page .log-in h1{font-size:4rem;color:#000;font-family:"Comfortaa"}.start-page .log-in h5{font-size:1rem}.start-page .log-in input{position:"relative";color:#fff;background-color:rgba(0,0,0,.473);display:inline-block;outline:none}.start-page .log-in button,.start-page .log-in input{font-size:1rem;border:3px solid #000;padding:.5rem;border-radius:10em}.start-page .log-in button{margin-top:1rem;color:#000;background-color:#fff}.room-list{margin-bottom:2rem}.room-list ul{list-style-type:none;padding-left:0;margin:.4rem 0 0}.room-list ul .room{margin-bottom:.5rem;padding:.5rem;border-radius:.3rem;cursor:pointer}.room-list ul .room.current-room{font-weight:700;-webkit-backdrop-filter:saturate(500%) brightness(95%);backdrop-filter:saturate(500%) brightness(95%)}.room-list ul .room .room-name{margin-right:auto}.room-list ul .room .lock{float:right;width:1rem}.input-box .container{flex-wrap:wrap;flex-direction:column}.input-box .container input{outline:none;border:none;padding:1rem .7rem}.input-box .container .input-new-room{border-radius:.5rem .5rem 0 0}.input-box .container .checkbox-label{width:100%;display:flex;align-items:center;justify-content:start;padding:.3rem 0;-webkit-backdrop-filter:brightness(80%);backdrop-filter:brightness(80%)}.input-box .container .checkbox-label .checkbox{width:1.1rem;height:1.1rem}.input-box .container label{font-size:.6rem;align-self:flex-start;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}.input-box .container label.input{padding-top:0;padding-bottom:.3em;padding-left:.3em}.input-box .container button.btn.primary{border-radius:0 0 .5rem .5rem;letter-spacing:1px}.input-box .container button.btn.primary:hover{background-color:#fd5d1b;color:#000}.room-sidebar{height:100%;display:flex;flex-direction:column}.room-sidebar .sidebar-header{-webkit-backdrop-filter:saturate(1.5) brightness(80%);backdrop-filter:saturate(1.5) brightness(80%);border-radius:0 0 0 .5rem;padding:0 2rem}.room-sidebar .sidebar-content{padding:.5rem 2rem}.message{max-width:70%;background-color:#dadada;padding:1rem;border-radius:.5rem;margin:.5rem 0;box-shadow:0 2.8px 2.2px rgba(0,0,0,.034),0 6.7px 5.3px rgba(0,0,0,.048),0 12.5px 10px rgba(0,0,0,.06),0 22.3px 17.9px rgba(0,0,0,.072),0 41.8px 33.4px rgba(0,0,0,.086),0 20px 50px rgba(0,0,0,.12)}.message.my-message{background-color:#fff;margin-left:auto}.message .author{display:flex;justify-content:space-between;align-items:center;color:#555}.message .author .name{margin-right:2rem}.message .author .time{font-size:.85rem}.input-box{width:100%;display:flex;flex-direction:column;align-items:center;border-radius:.5rem;box-shadow:0 1.8px 1.2px rgba(0,0,0,.034),0 3.7px 3.3px rgba(0,0,0,.048),0 6.5px 5px rgba(0,0,0,.06),0 12.3px 10.9px rgba(0,0,0,.072),0 11.8px 9.4px rgba(0,0,0,.086),0 10px 30px rgba(0,0,0,.12)}.input-box .container{width:100%;display:flex;flex-wrap:nowrap}.input-box .container .api-help-box{background-color:#fff;padding-left:.7rem;padding-top:.3rem;margin:0;font-size:.8rem;font-style:italic}.input-box .container .input{flex-grow:1;outline:none;border:none;padding:1rem .7rem;border-radius:.5rem 0 0 .5rem}.input-box .container .btn{border-radius:0 .5rem .5rem 0;letter-spacing:1px}.input-box .container .btn:hover{background-color:#fd5d1b;color:#000}.chat{height:80%;overflow-y:hidden;position:relative;align-items:center;border-radius:0 0 1.5rem 1.5rem;box-shadow:4px 8px 25px rgba(0,0,0,.5);background:rgba(85,85,85,.44);padding:0 2rem}.chat,.chat .chat-container{display:flex;flex-direction:column}.chat .chat-container{position:absolute;left:0;height:100%;width:100%;justify-content:flex-end;-ms-overflow-style:none;scrollbar-width:none}.chat .chat-container ::-webkit-scrollbar{display:none}.chat .chat-container .messages{height:inherit;overflow-y:scroll;width:100%;display:flex;flex-direction:column;align-items:start;list-style-type:none;margin:0;padding:2rem}.chat .chat-container .input-container{width:100%}.chat .chat-container .input-container .typing-message{margin:0;padding-left:.6rem;padding-bottom:.3rem;font-style:italic;font-size:.7rem;color:#222}.chat .chat-container .input-container button,.chat .chat-container .input-container input{border-radius:0!important}.user-list{display:flex;flex-direction:column;align-items:center}.user-list ul{width:100%;margin:.4rem 0 0;list-style-type:none}.user-list ul .user{margin-bottom:.5rem;padding:.5rem;border-radius:.3rem}.user-list ul .user.current-user{font-weight:700;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-backdrop-filter:saturate(500%) brightness(95%);backdrop-filter:saturate(500%) brightness(95%)}.user-list ul .user .status{background-color:green;width:10px;height:10px;border-radius:999rem;display:inline-block;margin-right:.5rem}.user-sidebar{height:100%;display:flex;flex-direction:column}.user-sidebar .sidebar-header{-webkit-backdrop-filter:saturate(1.5) brightness(80%);backdrop-filter:saturate(1.5) brightness(80%);border-radius:0 0 .5rem 0;padding:0 2rem;margin-bottom:.5rem}.chat-page{height:calc(100% - 70px);display:grid;grid-template-columns:1fr 2fr 1fr;max-width:1268px;margin:0 auto}*{box-sizing:border-box}@font-face{font-family:"KOHNE MAKINA";src:url(/static/media/KOHNE\ MAKINA.2c174c9b.ttf)}body{height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Comfortaa","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.orange-bg{background:#ffc700;background:linear-gradient(45deg,#ff1f01,#fd5d1b,#ffc700)}.blue-bg{background-image:linear-gradient(135deg,#8af0ff,#60dafe 25%,#0cc1ed 50%,#00a9dc 75%,#0093cd)}.red-bg{background:#ff416c;background:linear-gradient(45deg,#ff4b2b,#ff416c)}.green-bg{background-color:green}h1,h2,h3,h4{font-family:"KOHNE MAKINA"}button.primary{background-color:#333;color:#fff;outline:none;border:none;padding:.6rem 1.3rem;border-radius:.5rem;font-weight:700;font-family:"Comfortaa";cursor:pointer}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#root{height:inherit}
/*# sourceMappingURL=main.a9e0afed.chunk.css.map */