@import"https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,600&display=swap&subset=cyrillic-ext";:root{--like-color: #e55c78;--like-bg-hover-color: #e55c771b;--delete-bg-hover-color: #a8a8a81b;--message-color: rgba(218, 119, 119, 0.697);--text-color-grey: #828282;--text-main-color: #000000;--bg-element-color: #ffffff;--bg-body-color: #f2f2f2;--button-main-color: #0089FF;--button-hover-color: #0075dc;--button-disabled-color: #a2c1ec;--button-text-color: #ffffff;--form-blur-bg-color: #f7f7f7;--form-focus-bg-color: #ffffff;--border-color-focus: #5ca0ff;--border-color-hover: #bdd6fa;--user-preview-bg-color: #70d4ff;--user-preview-text-color: #e1fff7}#root{box-sizing:content-box;max-width:1000px;padding:30px;margin:20px auto;border-radius:8px;background-color:var(--bg-element-color)}body{font-family:"Source Sans Pro";font-style:normal;font-size:16px;font-weight:400;line-height:28px;color:var(--text-main-color);background-color:var(--bg-body-color)}.comments{display:flex;flex-direction:column}.comments__comments-wrapper{padding:30px 0}.header{font-weight:600;font-size:28px;margin-bottom:20px}.form{padding:15px;display:flex;flex-direction:column;transition:all ease-in-out .2s;font-size:18px;border-radius:12.8px;border:1px solid rgba(0,0,0,.03);background-color:#f7f7f7}.form_focused{border-color:var(--border-color-focus) !important;box-shadow:0 0 0 3px rgba(70,131,217,.12);background-color:var(--form-focus-bg-color)}.form:hover{box-shadow:0 0 0 3px rgba(70,131,217,.12);border-color:var(--border-color-hover);background-color:var(--bg-element-color)}.form__title-wrapper{position:relative;display:flex}.form__title-wrapper *:not(:last-child){margin-right:15px}.form__footer-wrapper{display:flex;justify-content:flex-end;align-items:center}.form__username-field{width:80%;display:flex;flex-direction:column}.form__date-field{width:20%;font-weight:300;color:var(--text-color-grey)}.form__username{height:50px}.form__date{height:50px}.form__textarea{width:100%;resize:none}.form-field{position:relative}.form-field__field{width:100%;padding:10px;border-radius:8px;box-shadow:rgba(0,0,0,.05) 0px 0px 0px 1px;transition:all ease-in-out .2s}.form-field__field:focus{box-shadow:0 0 0 2px rgba(70,131,217,.12)}.form-field__message{height:30px;display:block;font-size:14px;color:var(--message-color)}.borderline{height:2px;margin:15px 0;background:rgba(0,0,0,.034)}.button{min-width:170px;height:50px;font-weight:600;color:var(--button-text-color);border-radius:8px;box-shadow:0 1px 2px rgba(70,131,217,.48),inset 0 -1px 0 rgba(0,0,0,.12);background:var(--button-main-color);transition:all ease-in-out .2s}.button:disabled{background-color:var(--button-disabled-color);cursor:auto}.button:not(:disabled):hover{background:var(--button-hover-color)}.button:not(:disabled):hover:active{transform:translateY(3px)}.comment:not(:last-child){margin-bottom:30px}.comment__title-wrapper{margin-bottom:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.comment__title-wrapper *:not(:last-child){margin-right:15px}.comment__title-column{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.comment__user-preview{min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:28px;font-weight:600;color:var(--user-preview-text-color);background-color:var(--user-preview-bg-color)}.comment__username{font-size:18px;font-weight:600}.comment__text{white-space:pre-wrap;word-break:break-all;margin-bottom:10px}.comment__date{color:var(--text-color-grey)}.comment__like-wrapper{display:inline-flex;align-items:center}.comment__like-count{color:var(--text-color-grey)}.comment__like-button{margin-right:10px;display:flex;align-items:center}.comment__like-icon{width:40px;height:40px;padding:10px;border-radius:40%;transition:all ease-in-out .2s}.comment__like-icon:hover{stroke:var(--like-color);background-color:var(--like-bg-hover-color)}.comment__like-icon:active{stroke:var(--like-color);transform:scale(1.5)}.comment__like-icon_state_active{fill:var(--like-color);stroke:var(--like-color)}.comment__like-icon_state_disabled{fill:none;stroke:var(--text-color-grey)}.comment__delete-icon{min-width:40px;height:40px;padding:10px;border-radius:40%;transition:all ease-in-out .2s}.comment__delete-icon g{fill:var(--text-color-grey)}.comment__delete-icon:hover{background-color:var(--delete-bg-hover-color)}.comment__delete-icon:active{transform:scale(0.8)}@media only screen and (max-width: 950px){.form__title-wrapper{flex-direction:column}.form__footer-wrapper{flex-direction:column;align-items:center}.form__footer-wrapper *:not(:last-child){margin-bottom:15px}.form__username-field{width:100%}.form__date-field{width:100%}}