html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  font: 12px/16px Tahoma, Helvetica, Arial, Verdana;
  background-color: #444;
}
main {
  height: 100%;
}
input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #838383;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
input[type=range]::-webkit-slider-thumb {
  border: 2px solid #444;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4576f4;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #909090;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #838383;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  border: 2px solid #444;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4576f4;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  background: #838383;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 20px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #767676;
  border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
  background: #838383;
  border-radius: 10px;
}
input[type=range]::-ms-thumb {
  border: 2px solid #444;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4576f4;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #838383;
}
input[type=range]:focus::-ms-fill-upper {
  background: #909090;
}
.button {
  display: inline-flex;
  height: 36px;
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none;
  cursor: pointer;
  color: #efefef;
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
  padding: 0 10px;
  position: relative;
  text-decoration: none;
  align-items: center;
  transition: background-color 0.2s linear;
}
.button[hidden] {
  display: none;
}
.button svg {
  font-size: 18px;
  vertical-align: middle;
}
.button span {
  color: #efefef;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 5px;
  white-space: nowrap;
}
.button kbd {
  font-size: 11px;
  color: #838383;
  margin-left: 5px;
  margin-top: 10px;
}
.button:hover {
  background-color: #575b65;
}
.button:hover span {
  color: #efefef;
}
.button:hover kbd {
  color: #efefef;
}
.button:active {
  background-color: #333;
}
.button:active span {
  color: #efefef;
}
.button:active kbd {
  color: #efefef;
}
:root .button:disabled,
:root .button_disabled {
  pointer-events: none;
}
:root .button:disabled i,
:root .button_disabled i,
:root .button:disabled svg,
:root .button_disabled svg {
  color: #717171;
}
:root .button:disabled span,
:root .button_disabled span {
  color: #717171;
}
.button_border {
  border: 1px solid #555;
}
.button_border-light {
  border: 1px solid #838383;
}
.button_success {
  background-color: #49884c;
  color: #ecf8ec;
}
.button .button__switch {
  margin-right: 5px;
  width: 22px;
  height: 22px;
}
.button .button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: inline;
  color: #aaa;
}
.button .button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: none;
  color: #efefef;
}
.button_checked {
  background-color: #333;
}
.button_checked:hover {
  background-color: #333;
}
.button_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: none;
}
.button_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: inline;
}
.button .button__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #49884c;
}
.button .button__marker_alert {
  background-color: #db4437;
  box-shadow: 0 0 6px #ed7368;
}
.fatal-error {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.fatal-error__icon.svg-icon {
  font-size: 22px;
}
.fatal-error__body {
  flex: 1;
  padding: 40px;
  background-color: #db4437;
  color: #fff;
  text-align: center;
  font-size: 18px;
}
.fatal-error__body a {
  color: #fff;
  text-decoration: underline;
}
.fatal-error__body a:hover {
  color: #fff;
}
.fatal-error__body a:visited {
  color: #fff;
}
.fatal-error__buttons button,
.fatal-error__buttons .button {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 7px 30px;
  background-color: #ed7368;
  border: 1px solid #ed7368;
  color: #fff;
  font-size: 18px;
  outline: none;
  cursor: pointer;
  text-decoration: none;
}
.fatal-error__buttons button:hover,
.fatal-error__buttons .button:hover {
  border-color: #fff;
}
.fatal-error__buttons button:active,
.fatal-error__buttons .button:active {
  background-color: #841e15;
  border-color: #841e15;
  color: #fff;
}
.spinner {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 2000;
  transition: background-color 0.6s ease-out;
  cursor: wait;
  visibility: hidden;
}
.spinner_show {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.4);
}
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: dialog-bg-show;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: 0.1s;
}
.dialog__box {
  width: var(--width, 800px);
  max-width: 95vw;
  min-height: 500px;
  height: 700px;
  max-height: 95vh;
  background-color: #444;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  animation-name: dialog-show;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-duration: 0.1s;
}
.dialog_alert .dialog__box {
  background-color: #254aa7;
}
.dialog_small .dialog__box {
  width: 400px;
}
.dialog_auto-height .dialog__box {
  height: auto;
  min-height: 0;
  max-height: none;
}
.dialog__custom-content {
  padding: 20px;
  font-size: 14px;
  line-height: normal;
}
.dialog__custom-content h2 {
  margin: 0 0 10px 0;
  font-weight: 300;
}
.dialog__custom-content ul,
.dialog__custom-content ol {
  padding: 0 0 0 20px;
}
.dialog__custom-content a {
  border-bottom: 1px solid #c4d7e3;
  color: #c4d7e3;
}
.dialog__custom-content a:hover {
  color: #f2faff;
  border-color: #f2faff;
}
.dialog__head {
  color: #aaa;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #555;
  box-sizing: border-box;
}
.dialog__head span {
  flex: 1;
  display: block;
  padding: 0 10px;
}
.dialog__close-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
  width: 36px;
  height: 36px;
}
.dialog__close-button svg {
  font-size: 12px;
}
.dialog__close-button:hover {
  color: #efefef;
}
.dialog__buttons {
  box-sizing: border-box;
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #555;
}
.dialog__buttons .button {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 500px) {
  .dialog__buttons .button {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.dialog__body {
  height: 700px;
  max-height: 90vh;
  overflow: hidden;
  overflow-y: auto;
  color: #efefef;
  border-radius: 0 0 6px 6px;
}
.dialog_alert .dialog__body {
  color: #fff;
}
.dialog_has-title .dialog__body,
.dialog_has-buttons .dialog__body {
  height: 664px;
  max-height: calc(90vh - 36px);
}
.dialog_has-buttons.dialog_has-title .dialog__body {
  height: 628px;
  max-height: calc(90vh - 36px * 2);
}
:root .dialog_auto-height .dialog__body {
  height: auto;
}
.dialog__no-body {
  padding: 20px;
  text-align: center;
  color: #838383;
}
@keyframes dialog-bg-show {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.4);
  }
}
@keyframes dialog-show {
  from {
    transform: scale(0.8) translate(0, -40px);
  }
  to {
    transform: scale(1) translate(0, 0);
  }
}
.list__text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  color: #aaa;
  padding: 0;
  cursor: pointer;
}
.list__text-button:hover {
  color: #444;
  background-color: #eaeaea;
}
.list__text-button + * {
  margin-left: 5px;
}
.list__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: #aaa;
  padding: 0;
  cursor: pointer;
}
.list__button svg.svg-icon {
  color: #aaa;
  font-size: 14px;
}
.list__button:hover {
  color: #444;
  background-color: #eaeaea;
}
.list__button:hover svg.svg-icon {
  color: #444;
}
.list__button + * {
  margin-left: 5px;
}
.list__button[data-role="delete"] {
  color: #aaa;
}
.list__button[data-role="delete"]:hover {
  background-color: #db4437;
}
.list__button[data-role="delete"]:hover svg.svg-icon {
  color: #fff;
}
.list__button[data-role="approve"] svg.svg-icon,
.list__button[data-role="view-unread"] svg.svg-icon {
  color: #56bc4e;
}
.list__button[data-role="approve"]:hover,
.list__button[data-role="view-unread"]:hover {
  background-color: #56bc4e;
}
.list__button[data-role="approve"]:hover svg.svg-icon,
.list__button[data-role="view-unread"]:hover svg.svg-icon {
  color: #fff;
}
.list__button[data-role="decline"] svg.svg-icon {
  color: #ed7368;
}
.list__button[data-role="decline"]:hover {
  background-color: #db4437;
}
.list__button[data-role="decline"]:hover svg.svg-icon {
  color: #fff;
}
.list__button[data-role="finish"] svg.svg-icon,
.list__button[data-role="in-work"] svg.svg-icon {
  font-size: 18px;
}
.list-group {
  color: #aaa;
}
.list-group + .list-group {
  margin-top: 20px;
}
.list-group__title {
  color: #aaa;
  padding: 5px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.list-group__head {
  position: sticky;
  top: 0;
  left: 0;
  background-color: #444;
}
.list-group__preloader {
  padding: 10px;
  border-top: 1px solid #888;
}
.list-group__preloader > div {
  text-align: center;
  color: #efefef;
}
.list-group__no-recs {
  border-top: 1px solid #888;
  padding: 10px;
}
:root .list-group__no-recs {
  background-color: transparent;
}
.list-group__no-recs > div {
  text-align: center;
  color: #717171;
}
.list-item {
  display: flex;
  min-height: 30px;
  color: #fff;
  align-items: center;
}
.list-item:nth-child(even) {
  background-color: #5c5c5c;
}
.list-item:nth-child(odd) {
  background-color: #6d6d6d;
}
:root .list-item_head {
  background-color: transparent;
}
.list-item_head .list-item__cell {
  font-weight: 600;
  white-space: nowrap;
  line-height: 30px;
  height: 30px;
  user-select: none;
  padding: 0 5px;
}
.list-item_head .list-item__cell:not([data-key=""]) {
  cursor: pointer;
}
.list-item_head .list-item__cell:not([data-key=""]) .list-item__sort-icon {
  width: 12px;
  text-align: left;
  margin-right: 5px;
}
.list-item_head .list-item__cell:not([data-key=""]) .list-item__sort-icon_none {
  display: inline-block;
  color: #aaa;
}
.list-item_head .list-item__cell:not([data-key=""]).list-item__cell_sort_asc .list-item__sort-icon_none {
  display: none;
}
.list-item_head .list-item__cell:not([data-key=""]).list-item__cell_sort_asc .list-item__sort-icon_asc {
  display: inline-block;
}
.list-item_head .list-item__cell:not([data-key=""]).list-item__cell_sort_desc .list-item__sort-icon_none {
  display: none;
}
.list-item_head .list-item__cell:not([data-key=""]).list-item__cell_sort_desc .list-item__sort-icon_desc {
  display: inline-block;
}
.list-item_head .list-item__cell:not([data-key=""]):hover {
  background-color: #66583e;
}
:root .list-item__sort-icon {
  display: none;
}
.list-item__cell {
  flex: 1;
  display: block;
  padding: 7px 5px;
  box-sizing: border-box;
  align-self: flex-start;
}
.list-item__cell[data-type="button"],
.list-item__cell[data-type="link"],
.list-item__cell[data-type="text-button"] {
  flex: 0;
  width: 30px;
  min-width: 30px;
  padding: 0;
}
.list-item__cell a {
  color: #fff;
  text-decoration: none;
}
.list-item__cell a:active {
  color: #fff;
}
.list-item__cell_sequence {
  color: #aaa;
  width: 40px;
  max-width: 40px;
  text-align: right;
}
.list-item__cell_min {
  flex: 0;
  overflow: visible;
}
.list-group_picker .list-item:hover {
  background-color: #66583e;
  cursor: pointer;
}
.form {
  margin: 0;
  overflow: hidden;
}
.form__section {
  border-bottom: 1px solid #555;
  flex: 1;
  padding: 5px 10px;
  color: #aaa;
  margin: 0 -10px;
}
.form__error {
  display: none;
  padding: 10px;
  background-color: #db4437;
  color: #fff;
  text-align: center;
}
.form__error_show {
  display: block;
}
.form__note {
  display: none;
  padding: 10px;
  background-color: #254aa7;
  color: #fff;
  text-align: center;
}
.form__note_show {
  display: block;
}
.form__message {
  padding: 10px;
  background-color: #575b65;
  text-align: center;
}
.form__message:empty {
  display: none;
}
.form__message a {
  color: #c4d7e3;
  text-decoration: underline;
}
.form__message a:hover {
  color: #f2faff;
}
.form__group {
  display: flex;
  align-items: center;
  padding: 10px;
}
.form__group[disabled] {
  pointer-events: none;
  opacity: 0.6;
}
.form:not(.form_inline) .form__error + .form__group {
  margin-top: 10px;
}
.form:not(.form_inline) .form__group:last-of-type {
  margin-bottom: 10px;
}
.form_no-margin .form__group {
  margin: 0 !important;
}
.form__group + .form__group {
  padding-top: 0;
}
.form__caption {
  display: block;
  width: 30%;
  max-width: 30%;
  text-align: right;
  color: #efefef;
  padding-right: 5px;
}
.form_width-50 .form__caption {
  width: 50%;
  max-width: 50%;
}
.form_no-captions .form__caption {
  display: none;
}
.form__caption_for-options {
  align-self: start;
  min-height: 20px;
  line-height: 20px;
}
.form_inline .form__caption {
  width: auto;
  max-width: none;
}
.form__caption:not(:empty)::after {
  content: ":";
}
.form__hint {
  margin-left: 30%;
  padding-left: 10px;
  color: #aaa;
  margin-bottom: 10px;
}
.form_width-50 .form__hint {
  margin-left: 50%;
}
.form__options {
  display: block;
  width: 70%;
}
.form_width-50 .form__options {
  width: 50%;
}
.form__option {
  display: block;
  width: fit-content;
  margin-bottom: 5px;
  color: #efefef;
  position: relative;
  box-sizing: border-box;
  min-height: 20px;
  line-height: 20px;
  padding-left: 25px;
}
.form__option input {
  vertical-align: middle;
  margin-left: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form__option span::before {
  content: "";
  position: absolute;
  display: block;
  opacity: 0;
  height: 10px;
  width: 10px;
  background-color: #fff;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  z-index: 2;
}
.form__option span::after {
  content: "";
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  box-sizing: border-box;
  background-color: #333;
  border: 1px solid #555;
  color: #333;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 1;
}
.form__group_error .form__option span::after {
  border: 1px solid #db4437;
}
.form__group_indicate .form__option span::after {
  border: 1px solid #4576f4;
}
.form__option input:checked + span::before {
  opacity: 1;
}
.form__option input:checked + span::after {
  background-color: #254aa7;
  border: 1px solid #4576f4;
}
.form__group_error .form__option input:checked + span::after {
  border: 1px solid #db4437;
}
.form__group_indicate .form__option input:checked + span::after {
  border: 1px solid #4576f4;
}
.form__label {
  display: block;
  width: 70%;
  color: #efefef;
  position: relative;
  box-sizing: border-box;
  min-height: 20px;
  line-height: 20px;
  padding-left: 25px;
}
.form_width-50 .form__label {
  width: 50%;
}
.form_inline .form__label {
  width: auto;
  max-width: none;
}
.form__label input {
  vertical-align: middle;
  margin-left: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form__label span::before {
  content: "";
  position: absolute;
  display: block;
  opacity: 0;
  height: 10px;
  width: 10px;
  background-color: #fff;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  z-index: 2;
}
.form__label span::after {
  content: "";
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  box-sizing: border-box;
  background-color: #333;
  border: 1px solid #555;
  color: #333;
  border-radius: 0;
  left: 0;
  top: 0;
  z-index: 1;
}
.form__group_error .form__label span::after {
  border: 1px solid #db4437;
}
.form__group_indicate .form__label span::after {
  border: 1px solid #4576f4;
}
.form__label input:checked + span::before {
  opacity: 1;
}
.form__label input:checked + span::after {
  background-color: #254aa7;
  border: 1px solid #4576f4;
}
.form__group_error .form__label input:checked + span::after {
  border: 1px solid #db4437;
}
.form__group_indicate .form__label input:checked + span::after {
  border: 1px solid #4576f4;
}
.form__range-scale {
  width: 180px;
  height: 5px;
  display: flex;
  font-size: 11px;
  padding-left: 10px;
  margin-top: 18px;
}
.form__range-scale_double {
  width: 380px;
}
.form__range-scale div {
  flex: 1;
  box-sizing: border-box;
  border-right: 1px solid #838383;
  position: relative;
}
.form__range-scale div:first-child {
  border-left: 1px solid #838383;
}
.form__range-scale div[data-caption]:not(:last-child)::before {
  content: attr(data-caption);
  color: #838383;
  position: absolute;
  left: -10px;
  top: -18px;
  width: 20px;
  height: 18px;
  text-align: center;
}
.form__range-scale div[data-caption]:last-child::after {
  content: attr(data-caption);
  color: #838383;
  position: absolute;
  right: -10px;
  top: -18px;
  width: 20px;
  height: 18px;
  text-align: center;
}
.form__range {
  flex: 1;
}
.form__range input {
  width: 200px;
}
.form__range span {
  margin-left: 5px;
  color: #fff;
}
.form__range_double input {
  width: 400px;
}
.form__range-input {
  display: flex;
  align-items: center;
}
.form__input {
  display: block;
}
.form__input_big {
  width: 70%;
}
.form_width-50 .form__input_big {
  width: 50%;
}
.form__input input {
  background-color: #333;
  border: 1px solid #555;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
}
.form__input input[readonly] {
  background-color: transparent;
}
.form__group_error .form__input input {
  border: 1px solid #db4437;
}
.form__group_indicate .form__input input {
  border: 1px solid #4576f4;
}
.form__textarea {
  display: block;
  flex: 1;
}
.form__textarea textarea {
  width: 100%;
  height: 110px;
  resize: none;
  background-color: #333;
  border: 1px solid #555;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;
}
.form__textarea textarea[readonly] {
  background-color: transparent;
}
.form__group_error .form__textarea textarea {
  border: 1px solid #db4437;
}
.form__group_indicate .form__textarea textarea {
  border: 1px solid #4576f4;
}
.form__textarea_big textarea {
  height: 300px;
}
.form__select select {
  background-color: #333;
  border: 1px solid #555;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
}
.form__select select[readonly] {
  background-color: transparent;
}
.form__group_error .form__select select {
  border: 1px solid #db4437;
}
.form__group_indicate .form__select select {
  border: 1px solid #4576f4;
}
.form__image {
  position: relative;
  background-color: #575b65;
  line-height: 0;
}
.form__image span {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 16px;
}
.form__image img {
  max-width: 100%;
  max-height: 300px;
  min-width: 200px;
  min-height: 100px;
}
.form__image_loading img {
  visibility: hidden;
}
.form__image_loading span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-menu {
  position: fixed;
  background-color: #e7e7e7;
  border: 1px solid #838383;
  border-radius: 6px;
  color: #444;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
  left: var(--x, 0);
  top: var(--y, 0);
  z-index: 1200;
  overflow: hidden;
}
.popup-menu__button {
  display: flex;
  height: 36px;
  background-color: transparent;
  cursor: pointer;
  padding: 0 10px;
  position: relative;
  text-decoration: none;
  align-items: center;
}
.popup-menu__button svg {
  font-size: 18px;
  vertical-align: middle;
}
.popup-menu__button span {
  margin-left: 5px;
}
.popup-menu__button:hover {
  background-color: #575b65;
}
.popup-menu__button:hover span {
  color: #efefef;
}
.popup-menu__button:hover svg {
  color: #efefef;
}
.popup-menu__button:active {
  background-color: #333;
}
.popup-menu__button:active span {
  color: #efefef;
}
.popup-menu__button:active svg {
  color: #efefef;
}
.canvas-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  visibility: hidden;
}
.canvas-cursor svg {
  position: relative;
  margin-left: -256px;
  margin-top: -256px;
}
.canvas-cursor svg path,
.canvas-cursor svg circle {
  fill: none;
  stroke-width: 1;
  stroke: #fff;
}
:root svg .canvas-cursor__back {
  stroke-width: 4;
  stroke: rgba(0, 0, 0, 0.4);
}
.canvas-cursor__text text {
  font: 12px Tahoma, Helvetica, Arial, Verdana;
}
.canvas-cursor__text text:last-child {
  fill: #fff;
}
.canvas-cursor__text text:first-child {
  fill: #000;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 4;
}
.editor-container {
  user-select: none;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #888;
}
.editor-container__user {
  display: flex;
  align-items: center;
  color: #efefef;
  text-decoration: none;
  background-color: #444;
  border-right: 1px solid #555;
}
.editor-container__user > a .svg-icon {
  font-size: 22px;
  margin: 0 10px;
  color: #efefef;
}
.editor-container__user > a:hover .svg-icon {
  color: #f2faff;
}
.editor-container .button[data-role="user-menu"] {
  border-left: 1px solid #555;
}
.editor-container__user-name {
  font-size: 14px;
  margin-left: 5px;
}
.editor-container__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.editor-container__top-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background-color: #444;
  border-bottom: 1px solid #555;
  color: #efefef;
  display: flex;
}
.editor-container__top-panel-free-space {
  flex: 1;
}
.editor-container__tools {
  position: absolute;
  top: 37px;
  width: 100%;
  height: calc(100% - 37px);
  overflow: hidden;
  z-index: 500;
}
.editor-container__tools_hide .editor-toolbox {
  visibility: hidden;
}
.editor-container__drag-zone {
  position: absolute;
  z-index: 550;
  background-color: rgba(39, 158, 242, 0.2);
  box-sizing: border-box;
  outline: 2px dashed #279ef2;
  pointer-events: none;
  opacity: 0;
  visibility: visible;
  transition: opacity 0.2s linear;
  top: 37px;
  bottom: 0;
}
.editor-container__drag-zone_show {
  visibility: visible;
  opacity: 1;
}
.editor-container__drag-zone_right {
  right: 0;
  width: 288px;
}
.editor-container__drag-zone_left {
  left: 0;
  width: 80px;
}
.editor-toolbox {
  position: absolute;
  top: 0;
  width: 288px;
  background-color: #444;
  color: #efefef;
}
.editor-toolbox_drag-enter {
  outline: 2px dashed #279ef2;
  z-index: 551;
}
.editor-toolbox_collapsed {
  height: auto !important;
}
.editor-toolbox_collapsed .editor-toolbox__body {
  display: none;
}
.editor-toolbox_pin-right {
  width: 288px !important;
  left: auto !important;
  right: 0;
}
.editor-container_loaded .editor-toolbox_pin-right {
  transition: top 0.4s ease-out;
}
.editor-toolbox_pin-left {
  width: 80px !important;
  left: 0 !important;
  right: auto !important;
}
.editor-container_loaded .editor-toolbox_pin-left {
  transition: top 0.4s ease-out;
}
.editor-toolbox_pin-bottom {
  width: 100% !important;
  bottom: 0;
  height: 200px;
  top: auto !important;
}
.editor-toolbox__body {
  padding: 1px;
  height: calc(100% - 28px);
}
.editor-toolbox__empty-msg {
  text-align: center;
  color: #aaa;
  font-style: italic;
  padding: 10px 0;
}
.editor-toolbox__resize-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 5px;
  background-color: rgba(0, 0, 0, 0);
  cursor: n-resize;
}
.editor-toolbox-title {
  height: 28px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #555;
}
.editor-toolbox-title__caption {
  flex: 1;
  padding: 0 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #aaa;
}
.editor-toolbox-title__button {
  flex: 0;
  height: 28px;
  padding: 0 10px;
  transition: background-color 0.2s ease-out;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.editor-toolbox-title__button_show {
  display: flex;
}
.editor-toolbox-title__button_collapse .svg-icon {
  transform-origin: 50% 50%;
}
.editor-toolbox-title__button_collapse .svg-icon.editor-toolbox-title__arrow_up {
  transition: transform 0.2s ease-out;
  display: none;
}
.editor-toolbox-title__button_collapse .svg-icon.editor-toolbox-title__arrow_down {
  transition: transform 0.2s ease-out;
}
.editor-toolbox-title__button_collapse:hover .svg-icon.editor-toolbox-title__arrow_down {
  transform: rotate(180deg);
}
.editor-toolbox-title__button_collapse:hover .svg-icon.editor-toolbox-title__arrow_up {
  transform: rotate(180deg);
}
.editor-toolbox-title__button:hover {
  background-color: #575b65;
}
.editor-toolbox_collapsed .editor-toolbox-title .editor-toolbox-title__button_collapse .svg-icon.editor-toolbox-title__arrow_up {
  display: inline;
}
.editor-toolbox_collapsed .editor-toolbox-title .editor-toolbox-title__button_collapse .svg-icon.editor-toolbox-title__arrow_down {
  display: none;
}
.editor-palette {
  display: flex;
  flex-wrap: wrap;
}
.editor-palette__color {
  width: 13px;
  height: 13px;
  z-index: 1;
}
.editor-palette__color_selected {
  outline: 2px solid #fff;
  z-index: 3;
}
.editor-palette__color:hover {
  outline: 2px solid #fff;
  z-index: 2;
}
.editor-tools {
  display: flex;
  flex-wrap: wrap;
}
.editor-tools__button {
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: #efefef;
}
.editor-tools__button svg {
  width: 20px;
  height: 20px;
}
.editor-tools__button kbd {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 11px;
  line-height: 11px;
  color: #838383;
}
.editor-tools__button:hover {
  background-color: #575b65;
}
.editor-tools__button:hover kbd {
  color: #efefef;
}
.editor-tools__button:active {
  background-color: #333;
}
.editor-tools__button:active kbd {
  color: #efefef;
}
.editor-tools__button_selected {
  background-color: #eaeaea !important;
  color: #444 !important;
}
.editor-tools__button_selected kbd {
  color: #444 !important;
}
.editor-tools__switch {
  flex: 1;
  align-self: start;
  justify-self: left;
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none;
  cursor: pointer;
  color: #efefef;
  text-align: left;
  vertical-align: middle;
  font-weight: normal;
}
.editor-tools__switch i {
  font-size: 14px;
  vertical-align: middle;
}
.editor-tools__switch span {
  padding-left: 5px;
  vertical-align: middle;
}
.editor-tools__switch kbd {
  vertical-align: sub;
  font-size: 11px;
  line-height: 11px;
  color: #838383;
}
.editor-tools__switch:hover {
  background-color: #575b65;
}
.editor-tools__switch:hover span {
  color: #efefef;
}
.editor-tools__switch:hover kbd {
  color: #efefef;
}
.editor-tools__switch:active {
  background-color: #333;
}
.editor-tools__switch:active span {
  color: #efefef;
}
.editor-tools__switch:active kbd {
  color: #efefef;
}
.editor-tools__switch_checked {
  background-color: #333;
}
.editor-tools__switch_checked span {
  color: #efefef;
}
.editor-tools__switch_checked kbd {
  color: #efefef;
}
.editor-tools__switch_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: none;
}
.editor-tools__switch_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: inline;
}
.canvas_tool_default {
  cursor: default;
}
.canvas_tool_draw {
  cursor: none;
}
.canvas_tool_draw:hover + .canvas-cursor {
  visibility: visible;
}
.canvas_tool_crosshair {
  cursor: crosshair;
}
.canvas_tool_crosshair + .canvas-cursor .canvas-cursor__crosshair,
.canvas_tool_crosshair + .canvas-cursor .canvas-cursor__circle {
  visibility: hidden;
}
.canvas_tool_crosshair:hover + .canvas-cursor {
  visibility: visible;
}
.canvas_tool_move {
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}
.canvas_tool_moving {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.canvas_tool_move-object {
  cursor: move;
}
.canvas_tool_arrow {
  cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='20' height='20'%3e %3cpath fill='%23ffffff' fill-opacity='1' stroke='%23000000' stroke-opacity='1' stroke-width='4' stroke-dasharray='none' stroke-linejoin='round' stroke-linecap='butt' stroke-dashoffset='' fill-rule='nonzero' opacity='1' d='M2.067350157711934,2.162593689436008 L1.6260205947853201,58.05006880962115 L16.827522995810554,33.362729018841705 L48.211275238831035,33.12759924067652 L2.067350157711934,2.162593689436008 z' /%3e %3c/svg%3e") -4 -4, auto;
}
.canvas_tool_zoom-in {
  cursor: zoom-in;
}
.canvas_tool_zoom-out {
  cursor: zoom-out;
}
.canvas_tool_not-operable {
  cursor: not-allowed;
}
.editor-colors-set {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  /*
	&__color {
		width: @size - 6px;
		height: @size - 6px;
		border-radius: 50%;
		box-sizing: border-box;
		border: 2px solid @color-dark-face-brd;
	}

	&__slot {
		width: @size;
		height: @size;
		margin: 1px;
		position: relative;
		cursor: pointer;

		kbd {
			position: absolute;
			right: 2px;
			bottom: 2px;
			font-size: @font-size-kbd;
			line-height: @font-size-kbd;
			color: @color-dark-face-txt-kbd;
		}

		&:hover {
			kbd {
				color: @color-dark-face-txt;
			}
		}

		&_selected {
			.editor-colors-set__color {
				border: 2px solid @color-dark-face-hover-outline;
			}
			kbd {
				color: @color-dark-face-txt;
			}
		}
	}

	&__preset {
		flex: 1;

		select {
			appearance: none;
			width: ~"calc(100% - @{indent-small} * 2)";
			background: transparent;
			border: none;
			color: @color-dark-face-txt;
			padding: @indent-small;
			margin: @indent-small;
			border-bottom: 1px dotted @color-face-bg;

			option {
				color: @color-face-txt;
			}
		}
	}
	*/
}
.editor-colors-set__opacity {
  display: flex;
  flex-wrap: wrap;
  min-width: 37px;
  width: 100%;
  padding-bottom: 5px;
}
.editor-colors-set__opacity_disabled .editor-colors-set__opacity-slot {
  cursor: default;
}
.editor-colors-set__opacity_disabled .editor-colors-set__opacity-slot kbd {
  color: #838383 !important;
}
.editor-colors-set__opacity_disabled .editor-colors-set__opacity-color {
  background: transparent;
  border: 2px solid #555 !important;
}
.editor-colors-set__opacity_disabled .editor-colors-set__opacity-color > div {
  background: transparent !important;
}
.editor-colors-set__opacity-slot {
  flex: 1;
  height: 20px;
  margin: 2px;
  position: relative;
  cursor: pointer;
}
.editor-colors-set__opacity-slot kbd {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 11px;
  color: #838383;
}
.editor-colors-set__opacity-slot:hover kbd {
  color: #efefef;
}
.editor-colors-set__opacity-slot_selected .editor-colors-set__opacity-color {
  border: 2px solid #fff;
}
.editor-colors-set__opacity-slot_selected kbd {
  color: #efefef;
}
.editor-colors-set__opacity-color {
  width: calc(100% - 14px);
  height: 100%;
  border: 2px solid #555;
  background: #aaa url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ccc%22%20stroke%3D%22transparent%22%20%2F%3E%0A%09%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23fff%22%20stroke%3D%22transparent%22%20%2F%3E%0A%09%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ccc%22%20stroke%3D%22transparent%22%20%2F%3E%0A%09%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23fff%22%20stroke%3D%22transparent%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.editor-colors-set__opacity-color div {
  width: 100%;
  height: 100%;
}
.editor-brush {
  text-align: center;
  padding: 5px;
  position: relative;
}
.editor-brush span {
  position: absolute;
  font-size: 11px;
  color: #838383;
  margin-left: 4px;
  margin-top: 2px;
}
.editor-brush__hotkey {
  position: absolute;
  font-size: 11px;
  line-height: 11px;
  color: #838383;
  bottom: 12px;
}
.editor-brush__hotkey_left {
  left: 12px;
}
.editor-brush__hotkey_right {
  right: 12px;
}
.editor-brush svg {
  border: 1px solid #838383;
}
.editor-brush svg circle {
  fill: #aaa;
  stroke: none;
}
.editor-timeline {
  position: relative;
  width: 100%;
  height: 100%;
}
.editor-timeline__buttons {
  display: flex;
  height: 29px;
  width: 100%;
  position: relative;
  margin-top: -1px;
  overflow: hidden;
  border-bottom: 1px solid #555;
}
.editor-timeline__layers-buttons {
  width: 250px;
  height: 29px;
}
.editor-timeline__timeline-buttons {
  height: 29px;
  border-left: 1px solid #555;
}
.editor-timeline__button {
  display: inline-flex;
  height: 29px;
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none;
  cursor: pointer;
  color: #efefef;
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
  padding: 0 10px;
  position: relative;
  text-decoration: none;
  align-items: center;
  transition: background-color 0.2s linear;
}
.editor-timeline__button[hidden] {
  display: none;
}
.editor-timeline__button svg {
  font-size: 18px;
  vertical-align: middle;
}
.editor-timeline__button span {
  color: #efefef;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 5px;
  white-space: nowrap;
}
.editor-timeline__button kbd {
  font-size: 11px;
  color: #838383;
  margin-left: 5px;
  margin-top: 10px;
}
.editor-timeline__button:hover {
  background-color: #575b65;
}
.editor-timeline__button:hover span {
  color: #efefef;
}
.editor-timeline__button:hover kbd {
  color: #efefef;
}
.editor-timeline__button:active {
  background-color: #333;
}
.editor-timeline__button:active span {
  color: #efefef;
}
.editor-timeline__button:active kbd {
  color: #efefef;
}
:root .editor-timeline__button:disabled,
:root .editor-timeline__button_disabled {
  pointer-events: none;
}
:root .editor-timeline__button:disabled i,
:root .editor-timeline__button_disabled i,
:root .editor-timeline__button:disabled svg,
:root .editor-timeline__button_disabled svg {
  color: #717171;
}
:root .editor-timeline__button:disabled span,
:root .editor-timeline__button_disabled span {
  color: #717171;
}
.editor-timeline__button_border {
  border: 1px solid #555;
}
.editor-timeline__button_border-light {
  border: 1px solid #838383;
}
.editor-timeline__button_success {
  background-color: #49884c;
  color: #ecf8ec;
}
.editor-timeline__button .button__switch {
  margin-right: 5px;
  width: 22px;
  height: 22px;
}
.editor-timeline__button .button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: inline;
  color: #aaa;
}
.editor-timeline__button .button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: none;
  color: #efefef;
}
.editor-timeline__button_checked {
  background-color: #333;
}
.editor-timeline__button_checked:hover {
  background-color: #333;
}
.editor-timeline__button_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: none;
}
.editor-timeline__button_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: inline;
}
.editor-timeline__button .button__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #49884c;
}
.editor-timeline__button .button__marker_alert {
  background-color: #db4437;
  box-shadow: 0 0 6px #ed7368;
}
.editor-timeline__layers-tools {
  text-align: right;
  width: 250px;
}
.editor-timeline__layers-tools .editor-timeline__button {
  display: inline-flex;
  height: 20px;
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none;
  cursor: pointer;
  color: #efefef;
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
  padding: 0 10px;
  position: relative;
  text-decoration: none;
  align-items: center;
  transition: background-color 0.2s linear;
  justify-content: center;
  width: 22px;
  padding: 0;
}
.editor-timeline__layers-tools .editor-timeline__button[hidden] {
  display: none;
}
.editor-timeline__layers-tools .editor-timeline__button svg {
  font-size: 18px;
  vertical-align: middle;
}
.editor-timeline__layers-tools .editor-timeline__button span {
  color: #efefef;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 5px;
  white-space: nowrap;
}
.editor-timeline__layers-tools .editor-timeline__button kbd {
  font-size: 11px;
  color: #838383;
  margin-left: 5px;
  margin-top: 10px;
}
.editor-timeline__layers-tools .editor-timeline__button:hover {
  background-color: #575b65;
}
.editor-timeline__layers-tools .editor-timeline__button:hover span {
  color: #efefef;
}
.editor-timeline__layers-tools .editor-timeline__button:hover kbd {
  color: #efefef;
}
.editor-timeline__layers-tools .editor-timeline__button:active {
  background-color: #333;
}
.editor-timeline__layers-tools .editor-timeline__button:active span {
  color: #efefef;
}
.editor-timeline__layers-tools .editor-timeline__button:active kbd {
  color: #efefef;
}
:root .editor-timeline__layers-tools .editor-timeline__button:disabled,
:root .editor-timeline__layers-tools .editor-timeline__button_disabled {
  pointer-events: none;
}
:root .editor-timeline__layers-tools .editor-timeline__button:disabled i,
:root .editor-timeline__layers-tools .editor-timeline__button_disabled i,
:root .editor-timeline__layers-tools .editor-timeline__button:disabled svg,
:root .editor-timeline__layers-tools .editor-timeline__button_disabled svg {
  color: #717171;
}
:root .editor-timeline__layers-tools .editor-timeline__button:disabled span,
:root .editor-timeline__layers-tools .editor-timeline__button_disabled span {
  color: #717171;
}
.editor-timeline__layers-tools .editor-timeline__button_border {
  border: 1px solid #555;
}
.editor-timeline__layers-tools .editor-timeline__button_border-light {
  border: 1px solid #838383;
}
.editor-timeline__layers-tools .editor-timeline__button_success {
  background-color: #49884c;
  color: #ecf8ec;
}
.editor-timeline__layers-tools .editor-timeline__button .button__switch {
  margin-right: 5px;
  width: 22px;
  height: 22px;
}
.editor-timeline__layers-tools .editor-timeline__button .button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: inline;
  color: #aaa;
}
.editor-timeline__layers-tools .editor-timeline__button .button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: none;
  color: #efefef;
}
.editor-timeline__layers-tools .editor-timeline__button_checked {
  background-color: #333;
}
.editor-timeline__layers-tools .editor-timeline__button_checked:hover {
  background-color: #333;
}
.editor-timeline__layers-tools .editor-timeline__button_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-off"] {
  display: none;
}
.editor-timeline__layers-tools .editor-timeline__button_checked svg.button__switch use[href="/images/icons.svg#icon-svg-turn-on"] {
  display: inline;
}
.editor-timeline__layers-tools .editor-timeline__button .button__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #49884c;
}
.editor-timeline__layers-tools .editor-timeline__button .button__marker_alert {
  background-color: #db4437;
  box-shadow: 0 0 6px #ed7368;
}
.editor-timeline__layers-tools .editor-timeline__button_eye svg {
  font-size: 14px;
}
.editor-timeline__time-scale {
  position: absolute;
  top: 30px;
  left: 250px;
  right: 0;
  height: 20px;
  border-left: 1px solid #555;
  overflow: hidden;
  display: flex;
}
.editor-timeline__time-cell {
  width: 22px;
  min-width: 22px;
  height: 20px;
  box-sizing: border-box;
  color: #838383;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}
.editor-timeline__time-cell span {
  display: inline-block;
}
.editor-timeline__time-cell:hover {
  color: #efefef;
}
.editor-timeline__time-cell_selected {
  border: 1px solid #4576f4;
  background-color: #254aa7;
  color: #fff;
  line-height: 18px;
}
.editor-timeline__time-cell_shadow {
  background-color: #333;
  border-top: 1px solid #4576f4;
  border-bottom: 1px solid #4576f4;
  color: #4576f4;
  line-height: 18px;
}
.editor-timeline__time-cell:not(.editor-timeline__time-cell_shadow) + .editor-timeline__time-cell_shadow,
.editor-timeline__time-cell_shadow:first-of-type {
  border-left: 1px solid #4576f4;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.editor-timeline__cursor {
  position: absolute;
  left: -100px;
  top: 50px;
  bottom: 0;
  margin-left: 22px / 2;
  width: 1px;
  border-left: 1px solid #4576f4;
  z-index: 17;
}
.editor-timeline__layers {
  position: absolute;
  left: 0;
  top: 50px;
  width: 250px;
  bottom: 0;
  overflow: auto;
  z-index: 18;
  background-color: #444;
}
@media screen and (max-width: 1580px) {
  .editor-timeline__layers {
    padding-bottom: 8px;
  }
}
.editor-timeline__layers_drag .editor-layer-head {
  position: absolute;
  pointer-events: none;
  transition: top 0.2s ease-out;
}
.editor-timeline__body {
  position: absolute;
  left: 250px;
  top: 50px;
  border-left: 1px solid #555;
  border-top: 1px solid #555;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.editor-timeline__body_drag {
  cursor: grabbing !important;
}
.editor-timeline__body_drag * {
  cursor: grabbing !important;
}
.editor-layer-head {
  width: 100%;
  height: 22px;
  line-height: 21px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #555;
  border-left: 0 solid #4576f4;
  transition: border-left 0.2s ease-out;
  color: #838383;
  cursor: pointer;
}
.editor-layer-head__title {
  padding: 0 5px;
  flex-grow: 1;
}
.editor-layer-head__button {
  flex-basis: 22px;
  text-align: center;
}
.editor-layer-head__button_eye svg[data-role="eye-slash"] {
  display: none;
}
.editor-layer-head__button_unset {
  color: #ba8a2c;
}
.editor-layer-head__button_unset svg[data-role="eye"] {
  display: none;
}
.editor-layer-head__button_unset svg[data-role="eye-slash"] {
  display: inline;
}
.editor-layer-head__drag-point {
  cursor: grab;
  display: flex;
  align-items: center;
}
.editor-layer-head__drag-point:active {
  cursor: grabbing;
}
.editor-layer-head__drag-point .svg-icon {
  color: #aaa;
  margin: 0 5px;
}
.editor-layer-head__drag-point:hover .svg-icon {
  color: #efefef;
}
.editor-layer-head:hover {
  color: #efefef;
}
.editor-layer-head_selected {
  border-left: 5px solid #4576f4;
  background-color: #555;
  color: #fff;
}
.editor-layer-head_selected .editor-layer-head__button_unset {
  color: #f9d24f;
}
.editor-layer-head_selected:hover {
  background-color: #555;
}
.editor-layer-head_drag {
  border-left: 5px solid #56bc4e;
  background-color: #333;
}
.editor-layer-head_drag:hover {
  background-color: #333;
}
.editor-layer-frames {
  width: 100%;
  height: 22px;
  line-height: 22px;
  display: flex;
}
.editor-layer-frames__cell {
  position: relative;
  width: 22px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  box-sizing: border-box;
  background-color: #515253;
  border-right: 1px solid #444;
  border-bottom: 1px solid #444;
}
.editor-layer-frames__cell:hover::after {
  content: "";
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 2px solid #fff;
  width: 22px;
  height: 21px;
  z-index: 20;
}
.editor-layer-frames__cell span {
  display: block;
  box-sizing: border-box;
  margin-top: 1px;
  z-index: 15;
}
.editor-layer-frames__cell[data-index="0"] {
  background-color: #5e6163;
}
.editor-layer-frames__cell[data-status="1"] {
  cursor: grab;
}
.editor-layer-frames__cell[data-status="1"] span {
  background: #aaa url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22%23333%22%20stroke%3D%22transparent%22%20%2F%3E%0A%3C%2Fsvg%3E") center center no-repeat;
  border: 1px solid #838383;
  border-radius: 4px;
  width: 22px;
  height: 18px;
}
.editor-layer-frames__cell[data-status="1"] + .editor-layer-frames__cell[data-status="2"] span {
  margin-left: -3px;
  width: 25px;
}
.editor-layer-frames__cell[data-status="2"] span {
  background-color: #aaa;
  border-color: #838383;
  border-width: 1px;
  border-style: solid none solid none;
  width: 22px;
  height: 18px;
  border-radius: 0 4px 4px 0;
  position: relative;
}
.editor-layer-frames__cell[data-status="2"] span::before {
  content: "";
  position: absolute;
  display: inline-block;
  margin-left: 3px;
  height: 100%;
  width: 1px;
  border-left: 1px dotted #838383;
}
.editor-layer-frames__cell[data-status="2"] + .editor-layer-frames__cell[data-status="2"] span {
  margin-left: -5px;
  width: 27px;
}
.editor-layer-frames__cell[data-status="2"] + .editor-layer-frames__cell[data-status="2"] span::before {
  margin-left: 4px;
}
.editor-layer-frames__cell[data-status="3"] {
  cursor: grab;
}
.editor-layer-frames__cell[data-status="3"] span {
  background: #aaa url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22transparent%22%20stroke-width%3D%221%22%20stroke%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E") center center no-repeat;
  border: 1px solid #838383;
  border-radius: 4px;
  width: 22px;
  height: 18px;
}
.editor-layer-frames__cell[data-status="3"] + .editor-layer-frames__cell[data-status="2"] span {
  margin-left: -3px;
  width: 25px;
}
.editor-layer-frames_selected .editor-layer-frames__cell {
  background-color: #66583e;
  border-right: 1px solid #554934;
  border-bottom: 1px solid #554934;
}
.editor-layer-frames_selected .editor-layer-frames__cell[data-index="0"] {
  background-color: #786749;
}
.editor-layer-frames_selected .editor-layer-frames__cell[data-status="1"] span {
  background: #56bc4e url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22%23333%22%20stroke%3D%22transparent%22%20%2F%3E%0A%3C%2Fsvg%3E") center center no-repeat;
  border: 1px solid #047f41;
}
.editor-layer-frames_selected .editor-layer-frames__cell[data-status="2"] span {
  background-color: #56bc4e;
  border-color: #047f41;
}
.editor-layer-frames_selected .editor-layer-frames__cell[data-status="3"] span {
  background: #56bc4e url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%223%22%20fill%3D%22transparent%22%20stroke-width%3D%221%22%20stroke%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E") center center no-repeat;
  border: 1px solid #047f41;
}
:root .editor-layer-frames_selected .editor-layer-frames__cell_highlight::before,
:root .editor-layer-frames_selected .editor-layer-frames__cell_selected::before {
  content: "";
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 1px solid #fffa99;
  border-right: none;
  background-color: rgba(255, 250, 153, 0.3);
  width: 22px;
  height: 21px;
  z-index: 21;
}
:root .editor-layer-frames_selected .editor-layer-frames__cell_highlight + .editor-layer-frames__cell_highlight::before,
:root .editor-layer-frames_selected .editor-layer-frames__cell_selected + .editor-layer-frames__cell_highlight::before {
  border-left: none;
}
:root .editor-layer-frames_selected .editor-layer-frames__cell_highlight + .editor-layer-frames__cell_highlight_last::before,
:root .editor-layer-frames_selected .editor-layer-frames__cell_selected + .editor-layer-frames__cell_highlight_last::before {
  border-right: 1px solid #fffa99;
}
:root .editor-layer-frames_selected .editor-layer-frames__cell_selected::before {
  border: 2px solid #fffa99 !important;
  background-color: transparent;
}
.editor-layer-frames_reference .editor-layer-frames__cell[data-status="1"] span {
  background-color: #378dad;
  border-color: #1c3168;
}
.editor-layer-frames_reference .editor-layer-frames__cell[data-status="2"] span {
  background-color: #378dad;
  border-color: #1c3168;
}
.editor-layer-frames_reference .editor-layer-frames__cell[data-status="3"] span {
  background-color: #378dad;
  border-color: #1c3168;
}
.editor-layer-frames_reference.editor-layer-frames_selected .editor-layer-frames__cell[data-status="1"] span {
  background-color: #279ef2;
}
.editor-layer-frames_reference.editor-layer-frames_selected .editor-layer-frames__cell[data-status="2"] span {
  background-color: #279ef2;
}
.editor-layer-frames_reference.editor-layer-frames_selected .editor-layer-frames__cell[data-status="3"] span {
  background-color: #279ef2;
}
.scene-preview {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}
.scene-preview .svg-icon_pause {
  display: none;
}
.scene-preview_playing .svg-icon_play {
  display: none;
}
.scene-preview_playing .svg-icon_pause {
  display: inline-block;
}
.scene-preview__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-preview__panel > div:not(:last-of-type) {
  border-right: 1px solid #333;
}
.scene-preview__progress {
  flex: 1;
  height: 48px;
  padding: 0 10px;
  background-color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-preview__button {
  width: 48px;
  height: 48px;
  background-color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.scene-preview__button kbd {
  color: #838383;
  font-size: 11px;
  position: absolute;
  right: 3px;
  bottom: 0;
  user-select: none;
}
.scene-preview__button .svg-icon {
  font-size: 14px;
  color: #aaa;
}
.scene-preview__button:hover {
  background-color: #575b65;
}
.scene-preview__button:hover .svg-icon {
  color: #efefef;
}
.scene-preview__button:hover kbd {
  color: #efefef;
}
.scene-preview__button:active,
.scene-preview__button_pressed {
  background-color: #333;
}
.scene-preview__button:active .svg-icon,
.scene-preview__button_pressed .svg-icon {
  color: #efefef;
}
.scene-preview__button:active kbd,
.scene-preview__button_pressed kbd {
  color: #efefef;
}
.editor-color-schemes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.editor-color-schemes__scheme {
  display: flex;
  flex-wrap: wrap;
}
.editor-color-schemes__color {
  width: 18px;
  height: 18px;
  margin: 1px;
}
.editor-toolbox_pin-left .editor-color-schemes__color {
  width: 11px;
  height: 11px;
  margin: 0;
}
.editor-color-schemes__color_selected {
  outline: 2px solid #fff;
}
.editor-toolbox_pin-left .editor-color-schemes__color_selected {
  z-index: 2;
}
.editor-color-schemes__color:hover {
  outline: 2px solid #fff;
}
.editor-toolbox_pin-left .editor-color-schemes__color:hover {
  z-index: 3;
}
.editor-color-schemes__color[data-alpha="0"] {
  background: #aaa url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ccc%22%20stroke%3D%22transparent%22%20%2F%3E%0A%09%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23fff%22%20stroke%3D%22transparent%22%20%2F%3E%0A%09%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ccc%22%20stroke%3D%22transparent%22%20%2F%3E%0A%09%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23fff%22%20stroke%3D%22transparent%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
.editor-color-picker {
  padding: 5px;
}
.editor-color-picker__hue {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.editor-color-picker__header {
  display: flex;
  align-items: center;
  margin-left: 12px;
  justify-content: center;
}
.editor-toolbox_pin-left .editor-color-picker__header {
  display: none;
}
.editor-color-picker__header span {
  flex: 1;
  height: 15px;
  margin: 1px;
  color: #aaa;
  font-size: 11px;
  text-align: center;
}
.editor-color-picker__group {
  display: flex;
  align-items: start;
}
.editor-color-picker__sl {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.editor-toolbox_pin-left .editor-color-picker__sl {
  margin-top: 5px;
}
.editor-color-picker__alpha {
  width: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
}
.editor-toolbox_pin-left .editor-color-picker__alpha {
  display: none;
}
.editor-color-picker__alpha span {
  display: block;
  width: 100%;
  height: 15px;
  margin: 1px;
  color: #aaa;
  font-size: 11px;
}
.editor-color-picker__color {
  margin: 1px;
}
.editor-color-picker__color_hue {
  width: 22px;
  height: 15px;
}
.editor-color-picker__color_sl {
  width: 22px;
  height: 15px;
}
.editor-toolbox_pin-left .editor-color-picker__color {
  width: 11px;
  height: 11px;
  margin: 0;
}
.editor-color-picker__color_selected {
  outline: 2px solid #fff;
}
.editor-toolbox_pin-left .editor-color-picker__color_selected {
  z-index: 2;
}
.editor-color-picker__color:hover {
  outline: 2px solid #fff;
}
.editor-toolbox_pin-left .editor-color-picker__color:hover {
  z-index: 3;
}
.scenes-list__cell_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenes-list__cell_size {
  width: 80px;
  max-width: 80px;
  text-align: right;
}
.scenes-list__cell_download {
  width: 40px;
  max-width: 40px;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
}
.scenes-list__cell_status {
  display: flex;
  align-items: center;
  width: 180px;
  max-width: 180px;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
  height: 30px;
}
.scenes-list__cell_helper {
  display: flex;
  align-items: center;
  width: 140px;
  max-width: 140px;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
  height: 30px;
}
.scenes-list__cell_date {
  width: 120px;
  max-width: 120px;
}
.scenes-list__cell_changes {
  width: 100px;
  max-width: 100px;
}
.scenes-list__cell_authors {
  width: 140px;
  max-width: 140px;
}
.scenes-list-user {
  display: inline-flex;
  align-items: center;
}
.scenes-list-user::after {
  content: ", ";
}
.scenes-list-user:last-child::after {
  content: "";
}
.list__tools {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
}
.list__tools .button + .button {
  border-left: 1px solid #555;
}
.list__free-cell {
  flex: 1;
}
.list__count {
  border-right: 1px solid #555;
  padding: 0 10px;
  height: 36px;
  align-items: center;
  display: flex;
  min-width: 40px;
  justify-content: center;
  color: #aaa;
}
.list__count span {
  padding: 2.5px 5px;
  border-radius: 3px;
  background-color: #333;
  color: #aaa;
}
.list__search-input {
  display: flex;
  height: 36px;
  align-items: center;
  border-left: 1px solid #555;
  border-right: 1px solid #555;
}
.list__search-input input {
  flex: 1;
  width: 250px;
  height: 36px;
  border: none;
  background-color: transparent;
  outline: none;
  padding: 0 10px 0 0;
  color: #efefef;
  font-size: 12px;
}
.list__search-input svg {
  color: #aaa;
  font-size: 12px;
  margin: 0 10px;
  vertical-align: text-bottom;
}
.list__label {
  font-size: 11px;
  padding: 2.5px 5px;
  border-radius: 3px;
  background-color: #575b65;
  color: #efefef;
}
.list__label_success {
  background-color: #49884c;
  color: #ecf8ec;
}
.list__label_danger {
  background-color: #db4437;
  color: #fff;
}
.list__label_warning {
  background-color: #f9d24f;
  color: #231c0f;
}
.list__label_gray {
  background-color: #575b65;
  color: #efefef;
}
.progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 20px;
}
.progress__title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #efefef;
}
.progress__caption {
  margin-bottom: 5px;
}
.progress__caption:empty::before {
  content: "...";
}
.progress__bar {
  -moz-appearance: none;
  width: 90%;
  height: 14px;
}
.progress__bar::-webkit-meter-bar {
  border: none;
  border-radius: 3px;
  background-color: #333;
}
.progress__bar::-webkit-meter-optimum-value {
  background-color: #279ef2;
  border-radius: 3px;
}
.confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-height: 80px;
}
:root .confirm__icon {
  font-size: 30px;
  color: #ba8a2c;
  margin-right: 10px;
}
.confirm__message {
  font-size: 14px;
  line-height: 18px;
}
.alert {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-height: 80px;
  font-size: 14px;
  line-height: 18px;
}
:root .alert__icon {
  font-size: 30px;
  color: #49884c;
  margin-right: 10px;
}
:root .alert__icon_error {
  color: #db4437;
}
:root .alert__icon_mail {
  color: #f9d24f;
}
.guide {
  padding: 10px 30px;
  font-size: 14px;
  line-height: 18px;
}
.guide__section {
  padding: 30px 0 30px 0;
  border-bottom: 1px solid #555;
}
.guide__section:first-child {
  padding-top: 10px;
}
.guide__section:last-child {
  border-bottom: none;
}
.guide__images-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide__images-group .guide__image + .guide__image {
  margin-left: 10px;
}
.guide__image {
  margin: 10px 0;
  text-align: center;
}
.guide__video {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.guide__video iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.guide h2 {
  font-size: 22px;
  font-weight: normal;
  padding: 5px 0;
  margin: 0 0 10px 0;
  color: #ffffff;
}
.guide h3 {
  font-size: 18px;
  font-weight: normal;
  padding: 5px 0;
  margin: 0 0 10px 0;
  color: #ffffff;
}
.guide p {
  margin: 0 0 10px 0;
  text-align: justify;
}
.guide ol {
  margin: 10px 0;
  padding-left: 30px;
}
.guide li {
  margin: 5px 0;
}
.guide a {
  border-bottom: 1px solid #c4d7e3;
  color: #c4d7e3;
  text-decoration: none;
}
.guide a:hover {
  color: #f2faff;
  border-color: #f2faff;
}
* {
  scrollbar-width: 8px;
  scrollbar-color: #aaa;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 4px;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 4px;
}
.icon {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.svg-icon {
  font-size: 14px;
  vertical-align: middle;
  width: 1em;
  min-width: 1em;
  height: 1em;
  min-height: 1em;
}


/*# sourceMappingURL=editor.d1574a50eabaea618435.css.map*/