@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:Open Sans,Helvetica,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;min-height:100vh;overflow:hidden;background-color:#68b8dd;background-image:url(https://sden4.github.io/tot_systems_test_work/assets/images/mainBG.jpg);background-size:cover;background-repeat:no-repeat}@media screen and (max-width:1280px){body{overflow:auto}}button{border:0;margin:0;cursor:pointer}ul{padding:0;margin:0;list-style:none}h1,h2,h3,h4,h5,h6{font-weight:400;margin:0}p{margin:0;padding:0}button[type=button]{font-family:mainFont;cursor:pointer;background-color:rgba(0,0,0,0)}a{color:inherit;cursor:pointer}img{display:block;max-width:100%;max-height:100%}.button,input{font-size:24px}.button{outline:none;padding:10px 25px;color:#fff;border:0;border-radius:15px;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;background-color:#aff0bb;-webkit-tap-highlight-color:transparent}.button:hover{background-color:#42be2a}.button__exit{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background-color:#ffa07a;margin-top:300px}.button__exit:hover{background-color:brown}@media screen and (max-width:980px){.button__exit{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;margin-top:50px}}@media screen and (max-width:980px) and (max-height:480px){.button__exit{margin-top:unset}}.button__cansel{background-color:#ffa07a}.button__cansel:hover{background-color:brown}.button__exit_mod{margin:0 30px;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation:animationMargin 1s;animation:animationMargin 1s}@media screen and (max-width:980px) and (max-height:480px){.button__exit_mod{margin-bottom:15px}}@media screen and (max-width:480px){.button__exit_mod{margin:0 10px}}.button__exit_mod~.button__choose{padding:10px 20px;font-size:24px}.button__unactive{display:none}@-webkit-keyframes animationMargin{0%{margin-top:300px}to{margin-top:0}}@keyframes animationMargin{0%{margin-top:300px}to{margin-top:0}}.button__choose{font-size:60px;padding:40px 50px}@media screen and (max-width:980px) and (max-height:480px){.button__choose{padding:20px 50px}}@media screen and (max-width:768px) and (max-height:360px){.button__choose{font-size:48px}}@media screen and (max-width:768px) and (max-height:320px){.button__choose{padding:12px 50px;font-size:48px}}@media screen and (max-width:480px){.button__choose{font-size:48px;padding:30px 15px}}.button__choose_work{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-bottom:40px}@media screen and (max-width:980px) and (max-height:480px){.button__choose_work{margin-bottom:15px}}@media screen and (max-width:480px){.button__choose_work{margin-bottom:20px}}@media screen and (max-width:980px){.button__exit_mod+.button__choose_work{margin-bottom:0}}@media screen and (max-width:980px) and (max-height:480px){.button__exit_mod+.button__choose_work{margin-bottom:15px}}.button__choose_flud{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}@media screen and (max-width:980px){.button__choose_flud{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media screen and (max-width:980px) and (max-height:480px){.button__choose_flud{margin-bottom:15px}}@media screen and (max-width:480px){.button__choose_flud{margin-bottom:0}}@media screen and (max-width:768px){.button__exit_mod+.button__choose_flud{margin-bottom:0}}.button__send_message{background-color:rgba(0,0,0,0);outline:none}.button__send_message_triangle{width:0;height:0;border-top:10px solid rgba(0,0,0,0);border-left:15px solid #aff0bb;border-bottom:10px solid rgba(0,0,0,0);position:relative;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.button__send_message_triangle:after{-webkit-transition:.3s;-o-transition:.3s;transition:.3s;content:"";display:block;width:24px;height:24px;border-radius:50%;border:2px solid #aff0bb;position:absolute;top:-14px;left:-24px}.button__send_message_triangle:hover{border-left:15px solid #42be2a}.button__send_message_triangle:hover:after{border:2px solid #42be2a}.button__cross{width:10px;height:10px;background-color:rgba(0,0,0,0);outline:none}.button__cross:hover .button__cross_segment{background-color:brown}.button__cross_segment{width:2px;height:10px;border-radius:2px;background-color:#d3d3d3;position:relative;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.button__cross_segment:after{width:inherit;height:inherit;border-radius:inherit;content:"";display:block;position:absolute;background-color:inherit;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.button__cross_login{width:22PX;height:22PX;position:absolute;top:10px;right:10px}.button__cross_segment_login{width:4px;height:22px}.button__edit{margin-left:2px}.button__edit:hover .button__edit_segment{background-color:#42be2a}.button__edit:hover .button__edit_segment:after{border-top:6px solid #42be2a}.button__edit_segment{width:4px}.button__edit_segment:after{content:"";display:block;position:absolute;top:6px;left:-2px;background-color:unset;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.3s;-o-transition:.3s;transition:.3s;width:0;height:0;border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);border-top:6px solid #d3d3d3}#root{width:100%;min-height:100vh}.login,.main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.login{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:100vh;background:-o-radial-gradient(rgba(0,0,0,0) 20%,#fff 100%);background:radial-gradient(rgba(0,0,0,0) 20%,#fff 100%)}.login__title{color:brown;font-size:48px;line-height:48px;text-align:center;margin-bottom:50px}@media screen and (max-width:980px) and (max-height:480px){.login__title{margin-bottom:10px}}@media screen and (max-width:768px) and (max-height:320px){.login__title{font-size:36px;line-height:36px}}@media screen and (max-width:320px){.login__title{margin-bottom:20px}}.login__block{width:500px;height:500px;border-radius:15px;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}@media screen and (max-width:980px) and (max-height:480px){.login__block{height:310px}}@media screen and (max-width:768px){.login__block{width:460px;height:460px}}@media screen and (max-width:768px) and (max-height:480px){.login__block{height:315px}}@media screen and (max-width:768px) and (max-height:360px){.login__block{height:300px}}@media screen and (max-width:768px) and (max-height:320px){.login__block{height:270px}}@media screen and (max-width:480px){.login__block{width:95%;height:450px}}@media screen and (max-width:320px){.login__block{height:420px}}.login__wrapper{width:70%;height:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:980px) and (max-height:480px){.login__wrapper{height:98%}}@media screen and (max-width:480px){.login__wrapper{width:95%}}.login__subtitle{color:brown;font-size:36px}@media screen and (max-width:768px) and (max-height:320px){.login__subtitle{font-size:24px;line-height:24px}}.login__content{width:100%;height:80%}.login__form{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.login__form,.login__form_data{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.login__form_data{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;position:relative}.login__form_data:after{content:"";display:block;position:absolute;top:80px;height:1px;width:inherit;background-color:#fdf5e6}.login__form_pic{width:35px;height:35px;margin-right:20px}.login__form_pic_login{background:url(https://sden4.github.io/tot_systems_test_work/assets/images/user.svg)}.login__form_pic_password{background:url(https://sden4.github.io/tot_systems_test_work/assets/images/key4.svg)}.login__form_info{width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.login__form_name{font-size:24px;margin-bottom:20px}.login__form_input{background-color:rgba(0,0,0,0);border:none;outline:none;height:25px;width:100%}.login__form_input::-webkit-input-placeholder{color:#d3d3d3;font-size:16px}.login__form_input::-moz-placeholder{color:#d3d3d3;font-size:16px}.login__form_input:-ms-input-placeholder{color:#d3d3d3;font-size:16px}.login__form_input::-ms-input-placeholder{color:#d3d3d3;font-size:16px}.login__form_input::placeholder{color:#d3d3d3;font-size:16px}.login__error{display:block;position:absolute;top:86px;left:0;padding:2px 10px;border-radius:2px;color:#fff;font-size:12px;font-weight:400;line-height:28px;text-align:center;background-color:#ff4500;z-index:1}.login__error:before{content:"";display:block;position:absolute;top:-5px;right:10px;width:30px;height:30px;background-color:inherit;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);z-index:-1}.login__error_uncorrect_both{display:block;position:absolute;top:45%;left:30%;padding:2px 10px;border-radius:2px;color:#fff;font-size:12px;font-weight:400;line-height:28px;text-align:center;background-color:#ff4500;z-index:1}@media screen and (max-width:480px){.login__error_uncorrect_both{left:21%}}@media screen and (max-width:320px){.login__error_uncorrect_both{top:46%;left:18%}}.chat{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:80%;max-width:1280px;min-height:60vh;border-radius:15px;margin-bottom:50px;background:-webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(50%,hsla(0,0%,100%,.85)),to(#fff)),url(https://sden4.github.io/tot_systems_test_work/assets/images/bg2new.png);background:-o-linear-gradient(bottom,#fff,hsla(0,0%,100%,.85) 50%,#fff),url(https://sden4.github.io/tot_systems_test_work/assets/images/bg2new.png);background:linear-gradient(0deg,#fff,hsla(0,0%,100%,.85) 50%,#fff),url(https://sden4.github.io/tot_systems_test_work/assets/images/bg2new.png);background-position:50%;position:relative}@media screen and (max-width:480px){.chat{width:98%;margin-bottom:5px}}.chat__subtitle{width:90%;height:10%;margin:10px 0;border-radius:10px;text-align:center;line-height:42px;color:brown}.chat__subtitle_work{background-color:#ffa07a}.chat__subtitle_flud{background-color:#aff0bb}.chat__messages_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:90%;min-height:80%;height:450px;overflow:auto;visibility:hidden}@media screen and (max-width:1280px) and (min-height:1280px){.chat__messages_list{height:675px}}.chat:hover .chat__messages_list,.chat__messages_list:hover{visibility:visible}.chat__subtitle_flud+::-webkit-scrollbar{width:8px;background-color:#aff0bb;border-radius:4px}.chat__subtitle_flud+::-webkit-scrollbar-thumb{background-color:#42be2a;border-radius:4px}.chat__subtitle_work+::-webkit-scrollbar{width:8px;background-color:#ffa07a;border-radius:4px}.chat__subtitle_work+::-webkit-scrollbar-thumb{background-color:brown;border-radius:4px}.choose{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-height:100vh}.choose__grit{color:brown;font-size:48px;margin-bottom:50px;line-height:48px}@media screen and (max-width:980px) and (max-height:480px){.choose__grit{margin-bottom:20px}}.choose__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}@media screen and (max-width:980px){.choose__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.choose__content_mod{height:50px;-webkit-animation:animationHeight 1s;animation:animationHeight 1s}@media screen and (max-width:980px){.choose__content_mod{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media screen and (max-width:980px) and (max-height:480px){.choose__content_mod{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@-webkit-keyframes animationHeight{0%{height:250px}to{height:50px}}@keyframes animationHeight{0%{height:250px}to{height:50px}}.message{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:2px 10px;max-width:97%;border-radius:5px;background-color:#fdf5e6;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.23),0 3px 6px rgba(0,0,0,.16);box-shadow:0 3px 6px rgba(0,0,0,.23),0 3px 6px rgba(0,0,0,.16);visibility:visible;margin:10px auto 10px 10px}@media screen and (max-width:480px){.message{max-width:93%}}.message__up{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%}.message__author{font-style:italic;color:brown;margin-right:20px}.message__message{width:100%;overflow-wrap:break-word}.message__time_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%}.message__time_date{font-size:12px;color:#d3d3d3}.message__date{margin-right:10px}.message__input_edit{font-size:16px;font-family:Open Sans,Helvetica,sans-serif;padding:0;border:0;border-radius:5px;outline:none}.newMessage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:10%;border-radius:10px;margin:10px 0}.newMessage,.newMessage__input{width:90%;background-color:#fdf5e6}.newMessage__input{border:0;outline:none;padding:12px 10px;border-radius:10px;font-size:16px;font-family:Open Sans,Helvetica,sans-serif}.newMessage__input::-webkit-input-placeholder{font-size:16px;color:#d3d3d3}.newMessage__input::-moz-placeholder{font-size:16px;color:#d3d3d3}.newMessage__input:-ms-input-placeholder{font-size:16px;color:#d3d3d3}.newMessage__input::-ms-input-placeholder{font-size:16px;color:#d3d3d3}.newMessage__input::placeholder{font-size:16px;color:#d3d3d3}.newMessage__button_wrapper{width:24px;height:24px;margin-right:10px}.delete__confirm,.newMessage__button_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.delete__confirm{background-color:rgba(234,215,213,.97);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;left:0;bottom:0;right:0;height:100%;border-radius:15px;z-index:10}.delete__confirm_subtitle{width:80%;text-align:center;font-size:24px;color:brown;margin-bottom:50px;overflow-wrap:break-word}.delete__confirm_buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:55%}@media screen and (max-width:768px){.delete__confirm_buttons{width:90%}}@media screen and (max-width:320px){.delete__confirm_buttons{width:98%}}