@charset "UTF-8";
@font-face { font-family: "Flaticon"; src: url("../icons/flaticon.eot"); src: url("../icons/flaticon.eot#iefix") format("embedded-opentype"), url("flaticon.woff") format("woff"), url("flaticon.ttf") format("truetype"), url("flaticon.svg") format("svg"); font-weight: normal; font-style: normal; }

[class^="i-"]:before, [class*=" i-"]:before, [class^="i-"]:after, [class*=" i-"]:after { font-family: "Flaticon"; font-style: normal; }

.i-comments:before { content: "\e000"; }

.i-block:before { content: "\e001"; }

.i-search:before { content: "\e002"; }

.i-spinner:before { content: "\e003"; }

.i-user:before { content: "\e004"; }

* { margin: 0; padding: 0; line-height: 100%; box-sizing: border-box; }

html, body { height: 100%; }

body { font-family: 'Open Sans', 'Arial', sans-serif; font-size: 12pt; line-height: 16pt; font-weight: 300; }

.app { background: #eee; min-height: 100%; }

.app__title { font-size: 24pt; line-height: 40pt; color: #474747; }

.app__title .i { font-size: 30pt; color: #BFBFBF; }

.app__title_desc { margin-top: 10px; display: block; font-size: 10pt; line-height: 15pt; }

.app__container { padding: 10px; margin: 0 auto; max-width: 700px; }

.app__result { background: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; opacity: 0; max-height: 0; margin-top: 20px; }

.app__result.show { max-height: 900000px; opacity: 1; display: block; padding: 20px; }

.app__result_time { margin-top: 10px; color: #888; font-size: 10pt; }

.app__input_submit { background: #26A65B; color: #fff; width: 100%; display: block; height: 35px; padding: 0 10px; line-height: 35px; border: none; outline: none; border-radius: 3px; }

.app__input_submit .i-serach { animation: loading 1000ms ease-out forwards infinite; }

.app__input_submit:disabled { background: #888; color: #fff; cursor: block; }

.app__form { border-radius: 3px; padding: 10px; background: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); margin-top: 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; opacity: 1; transition: all 0.5s ease; }

.app__form.disabled { opacity: 0.5; }

.app__form label { display: block; font-weight: 400; margin-bottom: 10px; }

.app__form_row { flex: 1; min-width: 300px; padding: 10px; margin-bottom: 10px; }

.app__form_row:last-child { margin-bottom: 0; }

.app__form_help { display: block; color: #888; min-height: 30px; font-size: 10pt; line-height: 15pt; }

.app__form_pos_list { font-size: 0; }

.app__form_pos_list_item { font-size: 11pt; line-height: 35px; display: inline-block; padding: 0 5px; border: 1px solid #d7d7d7; color: #333; cursor: pointer; }

.app__form_pos_list_item:first-child { border-right: none; }

.app__form_pos_list_item:last-child { border-left: none; }

.app__form_pos_list_item.active { background-color: #26A65B; border-color: #26A65B; color: #fff; }

.app__form_pos_list_item.active:before { content: 'В '; }

.app__words { margin-top: 20px; display: block; flex-wrap: wrap; }

.app__words_word { display: inline-block; border-radius: 3px; padding: 10px; border: 1px solid #d7d7d7; color: #333; margin-bottom: 10px; margin-right: 10px; font-size: 12pt; }

.app__words_word > span { color: #26A65B; font-size: 10pt; }

.app__developer { font-size: 10pt; width: 100%; text-align: center; display: inline-block; color: #333; }

.app__developer a { color: #3498db; }

@media screen and (max-width: 960px) { .app__container { width: 100%; }
  .app__title { font-size: 20pt; }
  .app__title .i { font-size: 20pt; } }

.input { width: 100%; height: 35px; line-height: 35px; padding-left: 5px; border: 1px solid #d7d7d7; font-size: 14pt; }

.js-dislike-word { margin-left: 5px; color: #D64541; font-size: 8pt; padding: 2px 5px; border-radius: 3px; border: 1px solid #eee; cursor: pointer; opacity: 0.5; transition: all 0.5s ease; }

.js-dislike-word:hover { opacity: 1; background: #eee; }

.spinner { animation: loading ease-out 1s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: loading ease-out 1s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: loading ease-out 1s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: loading ease-out 1s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: loading ease-out 1s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; }

@keyframes loading { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-moz-keyframes loading { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@-o-keyframes loading { 0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); } }

@-ms-keyframes loading { 0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); } }