body{background-color:#edefec;background-image:url(08feaac599d14185f155.jpeg);background-position:50%;background-repeat:no-repeat;background-size:cover}body,h1{margin:0;padding:0}.hidden{display:none}#root{color:#100c08;font-family:Roboto,sans-serif;padding-top:20px}.container{align-items:flex-start;background-color:#4b53d0;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-sizing:border-box;display:flex;flex-direction:row;gap:10px;height:90%;margin-left:auto;margin-right:700px;margin-top:80px;min-width:500px;padding:20px;position:relative;width:calc(50% - 300px)}.chat__buttons{align-items:center;display:flex;gap:10px;padding-bottom:10px;padding-top:10px}.chat__buttons button{border:none;border-radius:5px;cursor:pointer;font-size:14px;height:36px;min-width:60px}.chat__buttons #emojiBtn{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;font-size:20px;height:36px;justify-content:center;line-height:36px;margin:0;outline:none;padding:0;width:36px}.emoji-picker,.emoji-popup{cursor:pointer}.chat__buttons #emojiBtn:focus,.chat__buttons #emojiBtn:hover{border:none;box-shadow:none;outline:none}.chat__buttons #logoutBtn{background-color:#1583c2;color:#fff}.chat__leave-btn{background-color:#a429d8;color:#fff}.modal__register{background-color:#4b53d0;border:1px solid #4b53d0;border-radius:5px;color:#fff}.chat__userlist-column{align-items:center;background-color:#edefec;border-radius:8px;box-sizing:border-box;color:#100c08;display:flex;flex-direction:column;font-size:18px;font-weight:700;height:700px;padding:10px 0 10px 10px;position:relative;width:40%}.chat__header{color:#4b53d0;cursor:default;font-size:24px;font-weight:700;margin-bottom:10px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.chat__userlist{align-items:center;display:flex;flex:1 1 auto;flex-direction:column;overflow-y:auto;width:100%}.chat__user{background-color:#e0e6da;border-radius:5px;color:#100c08;margin-bottom:10px;padding:5px 0;text-align:center;width:90%}.chat__container{background-color:#f0f0f0;border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;height:700px;margin-left:0;margin-top:0;overflow-y:auto;padding:0;width:100%}.chat__area{display:flex;flex:1 1 auto;flex-direction:column}.chat__messages-container{border-top-left-radius:7px;box-sizing:border-box;flex:1 1 auto;overflow-y:auto;padding:5px}.chat__messages-input{border-bottom-left-radius:7px;box-sizing:border-box;display:flex;flex:0 0 auto;flex-direction:column;gap:10px;padding:10px}.form .form__group{margin-bottom:0}.form .form__input{border-color:#e2e5e9;margin-top:8px}.message__container{margin-bottom:10px;width:50%}.message__header{font-size:14px}.message__container-yourself{margin-left:auto;text-align:right}.message__container-yourself .message__header{color:#20b1df}.message__container-interlocutor{margin-right:auto;text-align:left}.logo-rotate{-webkit-animation:rotateY360 5s linear infinite;animation:rotateY360 5s linear infinite;left:100px;position:absolute;top:10px;transform-style:preserve-3d}@keyframes rotateY360{0%{transform:rotateY(0deg)}to{transform:rotateY(1turn)}}.modal__background{height:100%;left:0;position:fixed;top:0;width:100%;z-index:-10}.modal__content{background-color:#fff;border-radius:5px;box-shadow:0 3px 5px 2px rgba(0,0,0,.3);box-sizing:border-box;display:flex;flex-direction:column;left:calc(50% - 170px);position:absolute;top:180px;transform:translateY(-100vh);transition:all .3s ease-out;width:500px;z-index:20}.modal__header{background-color:#dee2e1;border-top-left-radius:5px;border-top-right-radius:5px;font-size:18px;padding:15px 10px;text-align:center}.modal__body{padding:20px}.form__group{margin-bottom:10px}.form__label{margin-bottom:5px}.form__input{border:1px solid #c9cacc;border-radius:5px;box-sizing:border-box;display:block;font-family:Roboto,sans-serif;margin-top:5px;padding:10px;width:100%}.form__input:focus{border:1px solid #20b1df;outline:none}.form__hint{color:red;font-size:14px;margin-top:5px;text-align:center}.modal__footer{display:flex;padding:0 10px 20px}.modal__close,.modal__ok{border:1px solid #c9cacc;border-radius:5px;box-sizing:border-box;cursor:pointer;margin-left:auto;padding:5px 10px;text-align:center;width:100px}.modal__close{background-color:#f6c5dc;border-color:#f6c5dc}.modal__ok{background-color:#4a2693;border-color:#4a2693;color:#fff;margin-left:10px}.modal__delete.active .modal__background,.modal__form.active .modal__background{background-color:rgba(0,0,0,.7);z-index:10}.modal__delete.active .modal__content,.modal__form.active .modal__content{transform:translateY(0)}.modal-text{font-size:32px;text-align:center}