.clearfix:before, .header-upload:before, .tm-message-wrap:before, .settings-project__subscriber:before, .clearfix:after, .header-upload:after, .tm-message-wrap:after, .settings-project__subscriber:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after, .header-upload:after, .tm-message-wrap:after, .settings-project__subscriber:after {
  clear: both;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  *font-size: small;
}

pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a:link {
  -webkit-tap-highlight-color: #FF5E99;
  outline: 0 none;
}

a:hover, a:active {
  outline: none;
}

a, a:active, a:visited {
  color: inherit;
  outline: none;
}

a:hover {
  text-decoration: none;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol {
  list-style-type: decimal;
}

nav ul, nav li {
  margin: 0;
  list-style: none;
  list-style-image: none;
}

small {
  font-size: 85%;
}

td {
  vertical-align: middle;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 15px;
}

.ie6 legend, .ie7 legend {
  margin-left: -7px;
}

button, input, select, textarea {
  width: auto;
  overflow: visible;
  margin: 0;
  font-size: 100%;
  font-family: sans-serif;
  vertical-align: baseline;
  outline: 0 none;
}

textarea {
  overflow: auto;
  vertical-align: text-top;
}

label, input[type=button], input[type=submit], input[type=image], button {
  cursor: pointer;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input:invalid, textarea:invalid {
  border: 1px solid red;
}

.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
  background-color: #f0dddd;
}

.ie7 img {
  -ms-interpolation-mode: bicubic;
}

* {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
  outline: none !important;
}

img {
  display: block;
}

/* POPUPS HEADER STRONG BLUE */
html {
  height: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  height: 100%;
  font: 0.86em "proxima-nova", Tahoma, Arial sans-serif;
  color: #2C324A;
}

img {
  vertical-align: top;
}

input,
select,
textarea {
  font: 100% "proxima-nova", sans-serif;
  color: #2C324A;
}
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #B4B9CC;
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
  color: #B4B9CC;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #B4B9CC;
}

textarea {
  width: 100%;
  line-height: 19px;
  resize: none;
  overflow: auto;
}

input[type=checkbox],
input[type=radio] {
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

a {
  color: #2C324A;
}
a:visited {
  color: #2C324A;
}

p {
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #4B5065;
}

h3 {
  font-weight: 400;
  font-size: 1.45em;
}

h4 {
  font-weight: 400;
  font-size: 1.4em;
}

h5 {
  font-weight: 400;
  font-size: 1.2em;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #83899D;
  border-radius: 8px;
}

::-webkit-scrollbar-corner {
  background-color: #B4B9CC;
}

.base-list {
  padding: 6px 0;
  /* SUB MENU LIST */
  /* USERS LIKE COMMENT */
  /* TEMPLATE VERSION */
  /* PROJECT */
  /* PROJECT SETTING */
  /* PROJECT SETTING -- USER */
  /* USER INFO */
}
.base-list__item {
  min-width: 138px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 4px 14px;
  cursor: default;
}
.base-list__info {
  -ms-flex: 1;
  flex: 1;
  -webkit-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}
.base-list__sub-text {
  font-size: 0.85em;
  color: #B3B5BC;
}
.base-list__submenu {
  display: none;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
  position: absolute;
  top: 0;
  background-color: #fff;
  /* SUB MENU LIST -- LEFT POSITION */
}
.base-list__submenu__item {
  min-width: 138px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 6px 14px;
  white-space: nowrap;
}
.base-list__submenu__item:hover {
  cursor: pointer;
  background-color: #F9F9F9;
}
.base-list__submenu--left {
  padding: 6px 0;
  right: 100%;
  border-radius: 4px 0 4px 4px;
}
.base-list--version {
  overflow-y: auto;
  max-height: 246px;
}
.base-list--version .base-list__info {
  max-width: 153px;
}
.base-list--version .base-list__item {
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  padding: 12px 10px 12px 23px;
}
.base-list--project .user-icon {
  margin-right: 10px;
}
.base-list--project .base-list__item {
  cursor: pointer;
  white-space: nowrap;
  height: 38px;
  padding: 4px 20px 4px 14px;
}
.base-list--project .base-list__item:last-child {
  border-top: 1px solid #E2E3E8;
}
.base-list--project .base-list__item:hover {
  background-color: #F9F9F9;
}
.base-list--project .base-list__item:hover .user-icon {
  border-color: #47C5A2;
}
.base-list--project .base-list__item--add:hover {
  cursor: pointer;
  color: #fff;
  background-color: #62687F;
}
.base-list--project .base-list__item--add:hover .ico-manage-user {
  fill: #fff;
}
.base-list--project-setting {
  position: relative;
  padding: 40px 40px 40px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 400px;
}
.base-list--project-setting .base-list__sub-text {
  font-size: 0.9em;
}
.base-list--project-setting .base-list__item {
  position: relative;
  padding: 8px 0;
}
.base-list--project-setting .base-list__item:not(:last-child) {
  border-bottom: 1px solid #E2E3E8;
}
.base-list--project-setting .base-list__item p {
  line-height: 1.4;
}
.base-list--project-setting .base-list__item .user-icon {
  margin-right: 10px;
  width: 30px;
  height: 30px;
}
.base-list--setting-user {
  padding: 0 18px;
}
.base-list--setting-user .su-desc {
  padding-left: 25px;
}
.base-list--setting-user .base-list__item {
  padding: 12px 0;
  display: block;
  border-bottom: 1px solid #E2E3E8;
}
.base-list--setting-user .base-list__item:last-child {
  border-bottom: none;
}
.base-list--single {
  padding: 0;
}
.base-list--single .user-icon {
  margin-right: 10px;
}
.base-list--single .base-list__item {
  min-height: 47px;
  padding: 6px 14px;
  white-space: nowrap;
}

.page {
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
}

.content-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex: 1;
  flex: 1;
  background-color: #62687F;
}

.content {
  z-index: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.content.showed-h .content-scrolltrack-h {
  display: block;
}

.control-panel {
  transition: 0.1s;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: 468px;
  box-shadow: 10px 0 70px rgba(0, 0, 0, 0.2);
}

.main-panel {
  position: relative;
  z-index: 2;
  margin-right: 71px;
  height: 100vh;
  background-color: #fff;
  transform: translate3d(0, 0, 0);
}

.undo {
  z-index: 60;
  position: absolute;
  left: 0;
  top: -50px;
  right: 0;
  height: 50px;
  line-height: 50px;
  background: rgba(98, 104, 127, 0.7);
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 46px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.undo.visible {
  opacity: 1;
  transform: translate3d(0, 50px, 0);
}

.undo.wide {
  right: 0 !important;
}

.btn-notify {
  display: inline-block;
  margin-left: 13px;
  padding: 0 16px 0;
  cursor: pointer;
  background-color: #47C5A2;
  color: #fff;
}

.undo-txt {
  white-space: nowrap;
}

.undo-btn {
  position: relative;
  display: inline-block;
  margin-left: 13px;
  padding: 0 16px 0;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background-color: #47C5A2;
}

a.undo-btn {
  color: #fff;
}

.undo-close {
  padding-top: 2px;
  width: 55px;
  height: 55px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.undo-close .ico-close-notify {
  margin-top: 2px;
  fill: #fff;
}

.qtip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.qtip-content {
  position: relative;
}

.data-help-tooltip, .data-help-left-tooltip {
  max-width: 200px;
}

.data-help-tooltip .qtip-content, .data-help-left-tooltip .qtip-content {
  padding: 12px 17px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  color: #2C324A;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
}

.data-help-tooltip .qtip-content::before,
.data-help-left-tooltip .qtip-content::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.data-help-tooltip:not(.qtip-pos-tc) .qtip-content::before {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0 5px;
  border-color: #fff transparent transparent transparent;
}

.data-help-tooltip.qtip-pos-tc .qtip-content::before {
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #fff transparent;
}

.data-help-left-tooltip .qtip-content::before {
  top: 50%;
  right: -5px;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #fff;
}

.mouse-helper {
  color: #fff;
  border-radius: 4px;
  background-color: rgba(98, 104, 127, 0.7);
  padding: 8px 10px;
}

.version-image-tooltip {
  max-width: 200px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.version-image-tooltip .qtip-content {
  display: block;
}

.version-image-tooltip .qtip-content.orig {
  min-height: 0;
  min-width: 0;
}

.version-image-tooltip .qtip-content img {
  margin: auto;
  max-height: calc(100% - 22px);
  max-width: 100%;
}

.version-image-tooltip .qtip-content.auto {
  min-width: 0;
  min-height: 0;
  text-align: center;
}

.version-image-tooltip .qtip-content.auto img {
  max-width: 100%;
}

.qtip-content-b {
  display: none !important;
}

textarea {
  border-radius: 5px;
  border: 1px solid #EEEEEE;
  padding: 15px;
}

.radio-inp {
  display: block;
  cursor: pointer;
}
.radio-inp .btn-radio,
.radio-inp .btn-radio-checked {
  display: inline-block;
  vertical-align: middle;
}
.radio-inp input[type=radio] {
  display: none;
}
.radio-inp label {
  display: inline-block;
  vertical-align: middle;
}

.ico-checkbox, .point .task-done, .context-point .checkbox {
  display: inline-block;
  cursor: pointer;
}

.ico-checkbox-checked, .point.completed .task-done, .context-point .checkbox.active {
  display: inline-block;
  cursor: pointer;
}

.label-input {
  position: relative;
  display: block;
  margin-bottom: 20px;
}
.label-input label {
  display: block;
  margin-bottom: 14px;
  color: #4B5065;
  font-size: 13px;
}
.label-input.has-error .text-field {
  box-shadow: inset 0 2px 3px rgba(255, 162, 162, 0.3) !important;
  border-color: #ffa2a2;
}

.text-field {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  border: 1px solid #E2E3E8;
  border-radius: 3px;
  background-color: #fff;
  outline: none;
}

.focus-inp .text-field {
  font-size: 20px;
  border-color: #47C5A2;
  transition: 0.1s;
}
.focus-inp .text-field:focus {
  box-shadow: inset 0 2px 3px rgba(71, 197, 162, 0.3);
}

.input-notifier {
  -ms-flex-align: center;
  align-items: center;
  border-radius: 4px;
  z-index: 3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 45px;
  display: none;
}
.input-notifier .in-msg {
  color: #fff;
}
.input-notifier.loader {
  background-color: rgb(255, 255, 255);
}
.input-notifier .ico-in-loader {
  margin-right: 15px;
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid #47C5A2;
  border-radius: 50%;
  animation: inputloader 0.75s infinite linear;
}
.input-notifier .ico-in-loader:before, .input-notifier .ico-in-loader:after {
  box-sizing: border-box;
  left: -2px;
  top: -2px;
  content: "";
  display: none;
  position: absolute;
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}
.input-notifier .ico-in-loader,
.input-notifier .ico-in-loader:before {
  display: inline-block;
  border-color: transparent;
  border-top-color: #47C5A2;
  animation: inputloader 1.4s infinite ease;
}
.input-notifier.has-succese {
  padding: 0 15px;
  background-color: #47C5A2;
}
.input-notifier.has-succese .ico-notifier {
  margin-right: 15px;
  fill: #fff;
  width: 10px;
  height: 10px;
}

@keyframes inputloader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-ios-toggle-blue {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  padding: 1px;
  width: 35px;
  border-radius: 10px;
  font-size: 0;
  border: 1px solid #E2E3E8;
}
.btn-ios-toggle-blue .btn-circle {
  transition: 0.3s;
  display: inline-block;
  transition: 0.2s;
  width: 17px;
  height: 17px;
  background-color: #83899D;
  border-radius: 50%;
}
.btn-ios-toggle-blue.active .btn-circle {
  background-color: #47C5A2;
  margin-left: 14px;
}

a.btn-main {
  text-decoration: none;
}
a.btn-main:visited {
  color: #fff;
}

button.btn-main {
  border: none;
}

span.btn-main {
  cursor: pointer;
}

.btn-main {
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  background-color: #47C5A2;
  color: #fff;
  padding: 13px 20px;
}
.btn-main:hover {
  transition: 0.1s;
  background-color: #53c9a8;
}
.btn-main:active {
  transition: 0s;
  background-color: #3dc09c;
}
.btn-main__title {
  display: inline-block;
  vertical-align: middle;
}
.btn-main.disable {
  cursor: default;
  background-color: #D3D5DE;
}
.btn-main.disable .svg-icon {
  cursor: default;
}

button {
  font: inherit;
}

button.btn {
  display: inline-block;
  height: 31px;
  padding: 0 10px;
  color: #fff;
  border: 0;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
  border-radius: 3px;
  background-clip: padding-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.btn-popup-close {
  font-size: 0;
}
.btn-popup-close .svg-icon {
  width: 16px;
  height: 16px;
  fill: #B4B9CC;
}
.btn-popup-close:hover .svg-icon {
  fill: #62687F;
}

.popup-overlay {
  z-index: 1;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(98, 104, 127, 0.76);
}

.mini-popups {
  display: none;
  z-index: 5;
  position: absolute;
  background-color: #FFF;
  border-radius: 5px;
  color: #2C324A;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
  /* POPUPS ARROWS */
}
.mini-popups__arrow-white {
  border-color: transparent transparent #ffffff transparent;
}
.mini-popups__arrow-blue {
  border-color: transparent transparent #6C728A transparent;
}
.mini-popups__arrow-white, .mini-popups__arrow-blue {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 4.5px 5px 4.5px;
}
.mini-popups__arrow-white.top, .mini-popups__arrow-blue.top {
  bottom: 100%;
}
.mini-popups__arrow-white.right, .mini-popups__arrow-blue.right {
  right: 18px;
}
.mini-popups__arrow-white.right-top, .mini-popups__arrow-blue.right-top {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: -6px;
  top: 18px;
}
.mini-popups__arrow-white.left-center, .mini-popups__arrow-blue.left-center {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: -6px;
  top: 47%;
}
.mini-popups__arrow-white.right-bottom, .mini-popups__arrow-blue.right-bottom {
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  left: -6px;
  bottom: 14px;
}
.mini-popups__arrow-white.left, .mini-popups__arrow-blue.left {
  left: 18px;
}
.mini-popups__arrow-white.bottom, .mini-popups__arrow-blue.bottom {
  bottom: -5px;
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.context-point {
  position: absolute;
  width: 166px;
}

.context-point .context-list-item,
.context-point .add-new-user {
  padding-left: 32px;
}

.context-point .checkbox {
  position: absolute;
  top: 8px;
  left: 7px;
}

#context {
  width: 100%;
  overflow: hidden;
}

.context {
  padding: 4px 0;
  z-index: 99999;
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  min-width: 150px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  border-radius: 4px;
}

.context-list--sub {
  display: none;
  position: absolute;
  right: 100%;
  top: 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
}

.context-list-item,
.add-new-user {
  position: relative;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 15px 8px;
  text-align: left;
}
.context-list-item.line,
.add-new-user.line {
  border-bottom: 1px solid #E2E3E8;
}
.context-list-item--sub .context-list-item,
.add-new-user--sub .context-list-item {
  color: #2C324A;
}
.context-list-item--sub:hover .context-list--sub,
.add-new-user--sub:hover .context-list--sub {
  display: block;
}
.context-list-item:not(.disabled):hover,
.add-new-user:not(.disabled):hover {
  color: #fff;
  background-color: #62687F;
}
.context-list-item:not(.disabled):hover svg,
.add-new-user:not(.disabled):hover svg {
  fill: #fff;
}

/* context nav */
.context-nav {
  padding: 4px 0;
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 150px;
  background-color: white;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

.context-nav:not(.showed) {
  display: none;
}

.context-item {
  height: 34px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 13px;
  text-decoration: none;
  cursor: pointer;
}
.context-item:last-child {
  border-top: 1px solid #E2E3E8;
}

.context-item:not(.disabled):hover {
  background-color: #62687F;
  color: #fff;
}

.context-item.disabled {
  cursor: default;
}

.context-item b {
  font-weight: 400;
}

.context-item.disabled b {
  opacity: 0.5;
}

.context-nav-circle {
  width: 350px;
  height: 350px;
}

.cn-shape {
  fill: white;
}

.cn-shape {
  transition: all 0.05s;
}

.cn-shape:not(.disabled) {
  cursor: pointer;
}

.cn-shape:not(.disabled):hover {
  fill: #fafafa;
}

.cn-shape:not(.disabled):active {
  fill: #f5f5f5;
}

.shape-active {
  fill: #fafafa;
}

.context-nav-dropzone {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178px;
  height: 178px;
  margin: -89px 0 0 -89px;
  background-color: #fff;
  border: 1px solid #E2E3E8;
  border-radius: 50%;
  cursor: pointer;
}

.context-nav-dropzone::before {
  display: block;
  content: "Drop or\a click to upload\athe new version\aof this image!";
  height: 110px;
  padding: 40px 0 0;
  border: 2px dashed #dedede;
  margin: 11px;
  border-radius: 50%;
  text-align: center;
  white-space: pre;
  font-size: 13px;
  line-height: 17px;
  color: #c8c8c8;
}

.context-nav-dropzone.dz-drag-hover::before,
.context-nav-dropzone:active::before {
  box-shadow: inset 4px 4px 0 rgba(39, 34, 26, 0.03);
}

.context-nav-dropzone.dz-drag-hover::before,
.dragging .context-nav-dropzone::before {
  content: "";
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAZCAQAAADKivU7AAAC7UlEQVRIx72WzW7bRhSF5xX4COUbFHyCAHyAbLTvSkCBLrrjNktn2x3REyWtbcRgolpuVaMo0QYRFKBCGbiR0Rq1YccwyiSw0XHk2IHQRb8uKP6IkvoTqB6teDmab+bcc+fSmGsd8uWb6x5KNje4Xqwc8eshK2XAq7z0/h8Z1BRAo9QaPDkKFIviF8pZKjR8mEA1wfQROu8OfvolBS7Yo8O98bfvLxFq+wOiUutIbPNjD7CENPGNwX39cfuqN8ZdEtITpyOCwlM6F0BMc3ri/Q8E4ZKgwZ0R4OXS2uGxuGBe6luX8J+WdhUtyujmEFuIu/Ph6UikzAqpeKuHNUa+GhObWdkphC93+jytk6vOPO8rqWTUGBw8kVIvWwWytk9ojOLWm9ZlZrPTUb5frWQu/6xfulxR4X2rqAoXx/tFRvNQHaqmeNLG4hqjWOy8xU5s5k2Q9odvjhDiu99wcrNENiUlZY/eWDzoFppwVj9WHapAPF6FzFpa2fodqvuUK3Y6WJo/Bx1WOWln8S8+2YYEHx+f5jDW5I18UdioXKIKVSietHOkMQoePieu5y6/XdIbj84+/zO9kcWjg3KmHJGCl0Prtz8XE6hcJbInFWR9qSx30QGH+VPy3tqoN8aZgYZ3ngP+QijgZgV0d/d8F1uVQoGoQVc2X1Ujq7e6bwmnoQrFfjfb2kJotvjmBpZkunxm/6KmsP1qFWawHCpfiex+l0K/jcdz5VUsm6xBpfkshBqzftxh66NJQgIxjHPoi4Fisf70fBdb+gSXqF6RrHJ31/axReup3Ztj6t3x0Vlek62TZC2zlYLoYG94v/1iAMR/c2/LVyKeMStrOfCAWqPDubqXknIGcJhtNpOXBuFUeRhjZBWUZ4hF682Xo+k6/LcDBx+/BMz6fBJvCPH99uRhPT56+oyv/5g39V16yQKo37oUR/nBaBB99en8qcuDGnN6c/S68rFijJyXt5cF7Q4WrYRTc8xM4J0HwT+1/b8AWXrDZh7HPeEAAAAASUVORK5CYII=") no-repeat 50%;
}

.base-modal {
  position: relative;
  background: #FFF;
  width: auto;
  max-width: 495px;
  margin: 0 auto;
  border-radius: 4px;
}

.ico-ok-task, .point.completed .circ:before, .ico-close-small, .uploaded-img .cancel:before, .ico-checkbox-checked, .point.completed .task-done, .context-point .checkbox.active, .ico-checkbox, .point .task-done, .context-point .checkbox, .ico-check, .approved-template:before, .ico-allopen-arrow, .btn-radio-checked, .btn-radio {
  background: url("spritecss/sprite.css.svg") no-repeat;
}

.btn-radio {
  background-position: 0 0;
  width: 21px;
  height: 21px;
}

.btn-radio-checked {
  background-position: 47.7272727273% 0;
  width: 21px;
  height: 21px;
}

.ico-allopen-arrow {
  background-position: 75% 0;
  width: 9px;
  height: 15px;
}

.ico-check, .approved-template:before {
  background-position: 98.0769230769% 38.7096774194%;
  width: 13px;
  height: 11px;
}

.ico-checkbox, .point .task-done, .context-point .checkbox {
  background-position: 0 100%;
  width: 21px;
  height: 21px;
}

.ico-checkbox-checked, .point.completed .task-done, .context-point .checkbox.active {
  background-position: 47.7272727273% 100%;
  width: 21px;
  height: 21px;
}

.ico-close-small, .uploaded-img .cancel:before {
  background-position: 96.2264150943% 76.6666666667%;
  width: 12px;
  height: 12px;
}

.ico-ok-task, .point.completed .circ:before {
  background-position: 100% 0;
  width: 14px;
  height: 12px;
}

.injected-svg {
  display: none;
}

.svg-icon {
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.imit-link {
  cursor: pointer;
  border-bottom: 1px solid #62687F;
}
.imit-link:hover {
  border-color: transparent;
}

.imit-link-dashed {
  cursor: pointer;
  border-bottom: 1px dashed #62687F;
}
.imit-link-dashed:hover {
  border-color: transparent;
}

.sub-text {
  font-size: 0.85em;
  color: #B3B5BC;
  line-height: 1.1;
}

.hide {
  display: none !important;
}

.body-auth {
  overflow: hidden;
}

.hide-panel {
  overflow-y: auto;
}

.underline {
  color: #505050;
  border-bottom: 1px solid rgba(80, 80, 80, 0.35);
  text-decoration: none;
}

.underline:hover {
  border-bottom: 0;
}

.clearfix::after, .header-upload::after, .tm-message-wrap::after, .settings-project__subscriber::after {
  content: " ";
  display: table;
  clear: both;
}

.clear {
  clear: both;
}

[hidden] {
  display: none;
}

.flex {
  display: -ms-flexbox;
  display: flex;
}

.uppercase {
  text-transform: uppercase;
}

.simple-page-title {
  padding: 1em 0;
  color: #fff;
  text-align: center;
}

.cursor-default {
  cursor: default !important;
}

.atwho-inserted {
  color: #47C5A2;
}

.hide-panel-btn {
  display: none;
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  width: 22px;
  height: 72px;
  cursor: pointer;
  background-color: rgba(77, 83, 107, 0.7);
}
.hide-panel-btn .ico-allopen-arrow {
  display: block;
  margin: 26px auto 0;
}
.hide-panel.body-auth .hide-panel-btn {
  display: block;
}

.loader-circle {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  border-radius: 50%;
  animation: inputloader 0.75s infinite linear;
}
.loader-circle--small {
  width: 14px;
  height: 14px;
  border: 1px solid #47C5A2;
}
.loader-circle--big {
  width: 20px;
  height: 20px;
  border: 2px solid #B4B9CC;
}
.loader-circle:before, .loader-circle:after {
  box-sizing: border-box;
  content: "";
  display: none;
  position: absolute;
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

.loader-circle--small:before, .loader-circle--small:after {
  left: -1px;
  top: -1px;
}

.loader-circle--big:before, .loader-circle--big:after {
  left: -2px;
  top: -2px;
}

.loader-circle--small,
.loader-circle--small:before {
  display: -ms-flexbox;
  display: flex;
  border-top-color: #47C5A2;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: inputloader 1.4s infinite ease;
}

.loader-circle--big,
.loader-circle--big:before {
  display: -ms-flexbox;
  display: flex;
  border-top-color: #47C5A2;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: inputloader 1.4s infinite ease;
}

@keyframes tpprpoint {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.introjs-tooltip {
  position: absolute;
  visibility: visible;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 370px;
  min-height: 180px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
}
.introjs-hint.hint-active {
  z-index: 99999999;
}

.introjs-tooltiptext {
  margin: 30px 0;
}

.introjs-hint {
  z-index: 999;
  position: fixed;
  margin-right: -9px;
  margin-top: -9px;
}
.introjs-hint .introjs-hint-dot {
  position: relative;
  cursor: pointer;
  display: inline-block;
  background-color: #47C5A2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.introjs-hint .introjs-hint-dot:after {
  content: "";
  animation: tpprpoint linear 1s infinite;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  right: 0;
  top: 0;
  margin-right: -15px;
  margin-top: -15px;
  z-index: -1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.tppr-tips {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 0 0 30px;
  min-width: 370px;
}
.tppr-tips__btn-close {
  cursor: pointer;
  background-color: #FF5F52;
  border-radius: 50%;
  border: 1px solid #E33E32;
  width: 11px;
  height: 11px;
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
}
.tppr-tips__icon {
  width: 75px;
  margin-right: 25px;
}
.tppr-tips__icon img {
  max-width: 100%;
  margin: 0 auto;
}
.tppr-tips__content {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  width: 100%;
}
.tppr-tips__title {
  padding-right: 30px;
  font-weight: 600;
}
.tppr-tips__parag {
  padding-right: 30px;
  font-size: 14px;
  line-height: 1.5;
}
.tppr-tips__parag a {
  color: #47C5A2;
}
.tppr-tips__hr {
  width: 100%;
  height: 1px;
  margin: 10px 0;
  background-color: #E2E3E8;
}
.tppr-tips__link {
  margin-top: 5px;
}
.tppr-tips__link a {
  color: #47C5A2;
  text-decoration: none;
}
.tppr-tips__link a:active {
  color: #2C324A;
}
.tppr-tips--btn-button .btn-bottom-fz {
  text-align: center;
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: -41px;
  left: 0;
  right: 0;
  padding: 13px 10px;
  color: #fff;
  background-color: #47C5A2;
}
.tppr-tips--btn-button .btn-bottom-fz .dw-app {
  margin-right: 5px;
}
.tppr-tips--btn-button .btn-bottom-fz a {
  color: #fff;
  position: relative;
  top: -1px;
}
.tppr-tips--btn-button .btn-bottom-fz a:visited {
  color: #fff;
}
.tppr-tips--btn-button .btn-bottom-fz a, .tppr-tips--btn-button .btn-bottom-fz span {
  display: inline-block;
  vertical-align: middle;
}
.tppr-tips .ico-download {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 19px;
  margin-right: 10px;
}
.tppr-tips .btn-main {
  display: inline-block;
  margin-top: 5px;
  text-decoration: underline;
}
.tppr-tips .spacer {
  margin-bottom: 4px;
}

.placeholder-tips-content {
  background-color: red;
  position: fixed;
  left: 50%;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  display: block;
}

.filter {
  color: #2C324A;
  z-index: 4;
  position: relative;
  height: 44px;
  background-color: #FFF;
}

.search {
  z-index: 1;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 11px;
}
.search .search-btn {
  cursor: pointer;
  text-align: right;
  position: absolute;
  width: 36px;
  height: 36px;
  display: inline-block;
  left: 0;
  top: 0;
}
.search .search-btn .svg-icon {
  margin: 9px 9px 0 0;
  fill: #B4B9CC;
  width: 18px;
  height: 18px;
}
.search .ico-search-clear {
  display: none;
}
.search.visible {
  padding-left: 30px;
  right: 0;
}
.search.visible .search-field {
  display: block;
}
.search.is-value .ico-task-search {
  display: none;
}
.search.is-value .ico-search-clear {
  display: inline-block;
}

.search-field {
  display: none;
  width: 100%;
  height: 34px;
  padding: 0 10px 0 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
}

.sort-drop {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 188px;
}
.sort-drop .ico-filter-clear {
  display: none;
  margin-right: 8px;
  width: 15px;
  height: 15px;
}
.sort-drop.filtered .ico-filter-clear {
  display: inline-block;
}

.sort-drop-text {
  text-align: right;
  background-color: #fff;
  position: relative;
  z-index: 1;
  width: 100%;
  line-height: 43px;
  cursor: pointer;
  padding-right: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.sort-drop-text.active .sort-drop-arrow {
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sort-drop-inner {
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sort-drop-by {
  text-transform: lowercase;
}

.sort-drop-arrow {
  display: inline-block;
  vertical-align: middle;
  fill: #787F95;
  width: 8px;
  height: 6px;
}

.sort-drop-list {
  position: absolute;
  top: 45px;
  right: 10px;
  background: #fff;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
  border-radius: 0 0 4px 4px;
  padding: 6px 0;
  min-width: 160px;
  max-width: 190px;
}
.sort-drop-list > li:first-child {
  border-bottom: 1px solid #E2E3E8;
}
.sort-drop-list li {
  position: relative;
}
.sort-drop-list li:nth-child(6) .sort-drop-list-item {
  border-top: 1px solid #E2E3E8;
  border-bottom: 1px solid #E2E3E8;
}
.sort-drop-list li:hover .base-list__submenu {
  display: block;
}
.sort-drop-list li.active {
  background-color: #62687F;
  color: #fff;
}
.sort-drop-list li.active .sort-drop-list-item:hover {
  background-color: #62687F;
  color: #fff;
}
.sort-drop-list .sort-drop-list-item {
  padding: 8px 14px;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
}
.sort-drop-list .sort-drop-list-item:hover {
  background-color: #F9F9F9;
}
.sort-drop-list .user-icon {
  margin-right: 5px;
}

.btn-filter {
  display: block;
  cursor: pointer;
  margin-top: 4px;
  padding: 4px 0;
}
.btn-filter__btn {
  margin: 0 14px 0;
  display: block;
}
.btn-filter__text {
  display: block;
  color: #B9BBC1;
  font-size: 11px;
  padding: 0 14px;
}
.btn-filter:hover {
  background-color: #F9F9F9;
}

.ico-menu-arr {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  fill: #4B5065;
  position: absolute;
  top: 15px;
  right: 14px;
  width: 8px;
  height: 5px;
  margin: 0;
}

.panel-bookmarks {
  border-bottom: 1px solid #47C5A2;
  position: relative;
}
.panel-bookmarks.opened .panel-bookmarks__content {
  display: block;
}
.panel-bookmarks.opened .title-arrow {
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.panel-bookmarks__header {
  padding: 15px 0 12px 20px;
  cursor: pointer;
}
.panel-bookmarks__header .ico-star {
  fill: #47C5A2;
}
.panel-bookmarks__header .title-arrow {
  width: 8px;
  height: 6px;
  margin-left: 5px;
  font-size: 0.5em;
  fill: #787F95;
}
.panel-bookmarks__title {
  font-size: 1.2em;
  font-weight: 600;
}
.panel-bookmarks__content {
  display: none;
  padding-bottom: 10px;
}
.panel-bookmarks__comment {
  cursor: pointer;
}
.panel-bookmarks__comment:hover {
  background-color: #F9F9FA;
}
.panel-bookmarks__comment-title {
  margin-left: 20px;
  border-top: 1px solid #E2E3E8;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  padding: 10px 15px 10px 20px;
}
.panel-bookmarks .ico-star {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 10px;
  top: 10px;
}

.project-user {
  padding: 10px 20px 10px 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.project-user .mini-popups {
  top: 34px;
  right: -10px;
}
.project-user__item {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.project-user__item .mini-popups:before {
  content: "";
  width: 38px;
  height: 24px;
  display: block;
  position: absolute;
  bottom: 100%;
  right: 0;
}
.project-user__item.filtered .project-user__user-icon {
  border-color: #47C5A2;
}
.project-user__item.js-add {
  margin-left: 2px;
}
.project-user__user-icon {
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
.project-user__user-icon img {
  max-width: 100%;
}
.project-user__more-users {
  right: -12px !important;
  top: 32px !important;
}
.project-user__more-users .user-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
}
.project-user__more-users .base-list__item.filtered .user-icon {
  border-color: #47C5A2;
}
.project-user .ico-add-user {
  pointer-events: none;
  display: block;
  width: 22px;
  height: 22px;
  fill: #47C5A2;
}
.project-user .btn-dots {
  position: relative;
  margin-left: 2px;
  background-color: #83899D;
  border-radius: 50%;
  width: 22px;
  height: 22px;
}
.project-user .btn-dots.filtered:before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  border: 2px solid #47C5A2;
  position: absolute;
  left: -2px;
  top: -2px;
}
.project-user .userpan-3dods {
  width: 12px;
  height: 6px;
  display: block;
  margin: 8px auto 0;
  fill: #fff;
}
.is-temporary .project-user {
  display: none;
}

.ico-manage-user {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  fill: #47C5A2;
}

.task-dropbox {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.task-dropbox::before {
  content: "Drop!";
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.1em;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.task-dropbox::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0px;
  right: 0px;
  bottom: 1px;
  background: rgba(255, 255, 255, 0.86);
  background-clip: padding-box;
}

.dragging .task-dropbox {
  display: block;
}

.task-dropbox.dz-drag-hover {
  display: block !important;
}

.main-panel.zIndex {
  z-index: 15;
}
.minified .main-panel {
  right: 36px;
}
.main-panel.is-empty .mp-head {
  box-shadow: none;
  border-bottom: 1px solid #E2E3E8;
}
.main-panel.is-empty .filter {
  opacity: 0.5;
}
.main-panel.is-empty .filter .sort-drop-text {
  cursor: default;
}
.main-panel.is-empty .filter .sort-drop-arrow {
  cursor: default;
}
.main-panel.is-empty .panel-bookmarks {
  opacity: 0.5;
}
.main-panel.is-empty .tasks-placeholder {
  display: -ms-flexbox;
  display: flex;
}
.main-panel.is-empty .btn-create-folder {
  display: none;
}

.panel-resizer {
  opacity: 0;
  z-index: 5;
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  background-color: red;
  width: 6px;
  cursor: ew-resize;
}

.mp-head {
  z-index: 2;
  position: relative;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
}
.mp-head .project-info {
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
}
.mp-head .project-name {
  cursor: default;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5em;
  display: inline;
}
.mp-head .project-name__inner {
  white-space: nowrap;
  display: inline;
}

.btn-close-panel {
  position: relative;
  cursor: pointer;
  width: 38px;
  height: 100%;
}

.mp-head-arrow {
  width: 7px;
  height: 13px;
  position: absolute;
  top: 26px;
  left: 16px;
  fill: black;
}
.mp-head-inner-area.active .mp-head-arrow {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.mp-head-inner-area {
  border-bottom: 1px solid #E2E3E8;
  position: relative;
  height: 66px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.set-proj-all {
  cursor: pointer;
  width: 32px;
  height: 32px;
  margin-left: 3px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 4px;
}
.set-proj-all .svg-icon {
  transition: 0.05s;
  display: block;
  margin: 3px auto 0;
  height: 19px;
  width: 19px;
  fill: #47C5A2;
}
.set-proj-all:hover .svg-icon {
  fill: #83899D;
}

.tasks-container {
  position: absolute;
  top: 110px;
  bottom: 0;
  width: 100%;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-attachment: local;
}
.tasks-container::-webkit-scrollbar {
  width: 5px;
}
.tasks-container::-webkit-scrollbar-thumb {
  background-color: #83899D;
}
.tasks-placeholder {
  -ms-flex-direction: column;
  flex-direction: column;
  display: none;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
.tasks-placeholder__inner {
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 5% auto 0;
  width: 90%;
  padding: 0 20px;
  height: 40%;
}
.tasks-placeholder__btn {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  cursor: pointer;
  background-color: #47C5A2;
  color: #fff;
  padding: 10px 15px;
  display: block;
  margin: 0 auto 10px;
  border-radius: 4px;
  max-width: 144px;
  white-space: nowrap;
}
.tasks-placeholder__desc {
  text-align: center;
  font-size: 12px;
  color: #B4BACD;
  line-height: 1.3;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.tasks-placeholder .inner-dashed {
  border-radius: 3px;
  border: 2px dashed #B4BACD;
}
.tasks-placeholder .inner-line {
  border-bottom: 1px solid #E2E3E8;
}
.is-temporary .tasks-placeholder .inner-line {
  display: none;
}
.tasks-placeholder .tp-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 39px;
  height: 49px;
  display: block;
  margin: 0 auto 20px;
}
.tasks-placeholder .tp-title {
  text-align: center;
  color: #4B5065;
  line-height: 1.4;
  margin-bottom: 10px;
}
.tasks-placeholder .ico-add-user {
  margin: 0 auto 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 47px;
  height: 49px;
}

.folder {
  position: relative;
  border-bottom: 1px solid #E2E3E8;
}
.folder .templates {
  display: none;
}
.folder.opened .templates, .folder.opened-filter .templates {
  display: block;
}
.folder.inf-unreaded:before {
  z-index: 1;
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: #FF4541;
  border-radius: 50%;
  position: absolute;
  left: 23px;
  top: 20px;
}
.folder.inf-unreaded .ico-folder {
  opacity: 0;
}
.folder.edited .task-title-text-field {
  display: -ms-flexbox;
  display: flex;
}
.folder.ui-sortable-helper {
  opacity: 0.7;
}
.folder.ui-sortable-helper .task-title {
  border-top: 1px solid #E2E3E8;
}
.folder.is-empty .create-template .svg-icon {
  fill: #62687F;
}
.folder.is-empty .create-template .ct-title {
  color: #62687F;
}
.folder.root {
  /* 3gecb 6bl/l Bacbka */
}
.folder:not(.root) .droppped-area {
  background-color: rgba(108, 114, 138, 0.2);
}

.templates-list:empty:before {
  content: "Folder is empty!";
  display: block;
  cursor: default;
  margin: 0 0 15px 47px;
  color: #B4B9CC;
}

.task-title {
  display: -ms-flexbox;
  display: flex;
  height: 46px;
  padding: 15px 0 12px 20px;
  position: relative;
  background-color: #fff;
  cursor: pointer;
}
.task-title .ico-folder {
  fill: #E2E3E8;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 13px;
  height: 11px;
  position: relative;
  top: 1px;
}

.task-title-text {
  position: relative;
  padding-right: 40px;
  -ms-flex: 1;
  flex: 1;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.folder-name {
  font-size: 1.2em;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.folder-qty-task {
  color: #B4B9CC;
}

.task-title-text-field {
  display: none;
  color: #787F95;
  font-weight: 600;
  font-size: 1.2em;
  border: 0;
  padding: 0;
  outline: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 13px 50px 12px 41px;
}

.ico-task-title-arrow {
  fill: #787F95;
  width: 8px;
  height: 6px;
  position: absolute;
  right: 20px;
  top: 5px;
}

.folder.opened .ico-task-title-arrow {
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.btn-create-folder {
  z-index: 1;
  cursor: pointer;
  margin-left: 20px;
  padding: 20px 0;
}
.btn-create-folder .cf-title {
  color: #B4B9CC;
  vertical-align: middle;
}
.btn-create-folder .ico-add-folder {
  margin-right: 6px;
  fill: #B4B9CC;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.btn-create-folder:hover .cf-title {
  color: #62687F;
}
.btn-create-folder:hover .ico-add-folder {
  fill: #62687F;
}

.create-template {
  cursor: pointer;
  display: block;
  margin-left: 20px;
}
.create-template .ct-title {
  color: #BBBECB;
  display: inline-block;
  vertical-align: middle;
}
.create-template .svg-icon {
  margin-right: 6px;
  width: 19px;
  height: 19px;
  vertical-align: middle;
  fill: #B4B9CC;
}
.create-template:hover .svg-icon {
  fill: #62687F;
}
.create-template:hover .ct-title {
  color: #62687F;
}
.create-template.ct-top {
  padding: 8px 0 10px 20px;
  border-bottom: 1px solid #E2E3E8;
}
.create-template.ct-bottom {
  padding: 10px 0 20px 20px;
  border-top: 1px solid #E2E3E8;
}

.template-item-placeholder {
  position: relative;
  height: 2px;
  background-color: #6C728A;
}
.template-item-placeholder + .task .task__inner {
  border-color: transparent !important;
}

.task-nav-item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: none;
}

.task {
  position: relative;
  background-color: #fff;
}
.task__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 20px;
  padding-right: 10px;
}
.task__inner .template-status {
  top: 11px;
  left: 17px;
  z-index: 1;
}
.task.filtered {
  display: none;
}
.task.active {
  background-color: #6C728A;
}
.task.active .task__inner {
  border-color: transparent;
}
.task.active .template-status {
  border-color: #fff;
}
.task.active .template-text {
  color: #fff;
}
.task.active:hover {
  background-color: #6C728A;
}
.task.active:hover .template-status {
  border-color: #fff;
}
.task.active.task-approved-status .template-status {
  transition-delay: 0s;
  border-color: transparent;
}
.task.active.task-approved-status:hover .template-status {
  border-color: transparent;
}
.task.active .template-upd {
  color: #fff;
}
.task.active + .task .task__inner {
  border-color: transparent;
}
.task.ui-sortable-helper {
  background-color: #FFF;
  opacity: 0.6 !important;
}
.task.ui-sortable-helper .template-item-drag {
  cursor: move;
}
.task.tm-is-open:not(.active) .task-text-info-btn {
  background-color: #eee;
}
.task.tm-is-open.active .task-text-info-btn {
  background-color: #787F95;
}
.task.version-is-open:not(.active) .btn-template-upload {
  background-color: #eee;
}
.task.version-is-open.active .btn-template-upload {
  background-color: #787F95;
}
.task.assign-is-open:not(.active) .assign-btn-wrapper {
  background-color: #eee;
}
.task.assign-is-open.active .assign-btn-wrapper {
  background-color: #787F95;
}
.task.tm-is-open.active:not(.task-approved-status) .task__inner .template-status, .task.version-is-open.active:not(.task-approved-status) .task__inner .template-status, .task.assign-is-open.active:not(.task-approved-status) .task__inner .template-status {
  border-color: #fff;
}
.task.tm-is-open:not(.active), .task.version-is-open:not(.active), .task.assign-is-open:not(.active) {
  background-color: #F9F9FA;
}
.task.tm-is-open:not(.task-approved-status) .task__inner .template-status, .task.version-is-open:not(.task-approved-status) .task__inner .template-status, .task.assign-is-open:not(.task-approved-status) .task__inner .template-status {
  border-color: #787F95;
}
.task.tm-is-open .task-nav-item, .task.version-is-open .task-nav-item, .task.assign-is-open .task-nav-item {
  display: -ms-flexbox;
  display: flex;
}
.task:hover {
  background-color: #F9F9FA;
}
.task:hover:not(.active) .template-status {
  border-color: #787F95;
}
.task:hover .task-nav-item {
  display: -ms-flexbox;
  display: flex;
}
.task.assigned .assign-btn {
  display: none;
}
.task.assigned .ph-assign-title {
  display: none;
}
.task.assigned .assign-btn-wrapper {
  display: -ms-flexbox;
  display: flex;
}
.task.assigned .assign-assigned-pict {
  display: block;
}
.task.assigned .user-assign {
  display: -ms-flexbox;
  display: flex;
}
.task.inf-new-version .template-status {
  visibility: hidden;
  opacity: 0;
}
.task.edited .ico-del-task,
.task.edited .template-text-field {
  display: block;
}
.task.edited .template-status {
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s;
}
.task.edited .template-item-drag,
.task.edited .template-upd,
.task.edited .btn-template-upload,
.task.edited .task-text-info-btn,
.task.edited .template-text {
  display: none;
}
.task.tm-unreaded .task-text-info-btn, .task.tmc-unreaded .task-text-info-btn {
  display: -ms-flexbox;
  display: flex;
}
.task.tm-unreaded .task-text-info-btn:before, .task.tmc-unreaded .task-text-info-btn:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background-color: #FF4541;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  z-index: 1;
}
.task.tm-unreaded .btn-template-upload, .task.tmc-unreaded .btn-template-upload {
  display: -ms-flexbox;
  display: flex;
}
.task.tm-unreaded.active .task-text-info-btn:before, .task.tmc-unreaded.active .task-text-info-btn:before {
  display: block;
}
.task.tm-unreaded:not(.assigned) .assign-btn-wrapper, .task.tmc-unreaded:not(.assigned) .assign-btn-wrapper {
  display: -ms-flexbox;
  display: flex;
}
.task.event-version .btn-template-upload:before {
  content: "";
  display: none;
  width: 5px;
  height: 5px;
  background-color: #FF4541;
  position: absolute;
  top: 9px;
  right: 9px;
  border-radius: 50%;
}
.task.event-version.active .btn-template-upload:before {
  display: block;
}
.task.event-version:hover .btn-template-upload:before {
  display: block;
}
.task.unreaded.edited .template-upd {
  display: none;
}
.task.unreaded.inf-new-version .template-upd {
  display: none;
}
.task.tm-unreaded.inf-new-version .template-upd {
  display: none;
}
.task.tmc-unreaded.inf-new-version .template-upd {
  display: none;
}
.task.task-approved-status .assign-btn-wrapper {
  opacity: 0.5;
}
.task.task-approved-status .template-status {
  background-color: transparent;
  border-color: transparent;
}
.task.task-approved-status .template-status:hover {
  border: 2px solid transparent;
}
.task.task-approved-status .template-text {
  color: #BBBECB;
}
.task.task-approved-status .template-upd {
  display: none;
}
.task.task-approved-status .template-status {
  display: block;
}
.task.task-approved-status.tm-unreaded .task-text-info-btn:before, .task.task-approved-status.tmc-unreaded .task-text-info-btn:before {
  display: none;
}
.task.task-approved-status.event-version .btn-template-upload:before {
  display: none;
}
.task.task-approved-status:hover .template-status {
  border-color: transparent;
}
.task.inf-new-version .task-new-version {
  display: block;
}
.task.context-focus:not(.active) {
  background-color: #F9F9FA;
}

.ico-del-task {
  display: none;
  position: absolute;
  top: 10px;
  left: 18px;
  width: 18px;
  height: 18px;
  z-index: 2;
}
.edited .ico-del-task .svg-icon {
  fill: #fff;
}

.template-item-drag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 114px;
  padding: 0 0 0 38px;
  height: 100%;
}

.template-text {
  -ms-flex: 1;
  flex: 1;
  line-height: 1;
  height: 38px;
  padding: 12px 10px 0 22px;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-text .highlight {
  font-weight: 600;
}
.template-text__inner {
  white-space: nowrap;
}

.template-text-field {
  display: none;
  height: 38px;
  line-height: 1;
  color: #787F95;
  border: 0;
  margin: 0;
  outline: none;
  float: left;
  width: 100%;
  position: relative;
  padding: 8px 21px 9px 22px;
  background: transparent;
}
.task.active .template-text-field {
  color: #fff;
}
.template-text-field::-webkit-input-placeholder {
  color: #BBBECB;
  line-height: 1.3;
}
.template-text-field::-moz-placeholder {
  color: #BBBECB;
  line-height: 1.3;
}
.template-text-field:-ms-input-placeholder {
  color: #BBBECB;
  line-height: 1.3;
}

.template-text-field[readonly] {
  cursor: default;
}

.template-upd {
  cursor: pointer;
  text-align: center;
  display: none;
  z-index: 1;
  position: absolute;
  top: 11px;
  left: 18px;
  width: 16px;
  height: 16px;
  padding-top: 5px;
}
.unreaded .template-upd {
  display: block;
}
.tm-unreaded .template-upd {
  display: block;
}
.tmc-unreaded .template-upd {
  display: block;
}
.template-upd i {
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  width: 6px;
  height: 6px;
  background-color: #FF4541;
}

.task-new-version {
  cursor: pointer;
  text-align: center;
  display: none;
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 17px;
  width: 20px;
  height: 16px;
  color: #47C5A2;
  font-size: 9px;
  padding-top: 3px;
}

.task-loader {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 71px;
  height: 100%;
  z-index: 4;
  background-color: #fff;
  display: none;
}
.is-loading .task-loader {
  display: block;
}
.task-loader .tl-ph-1,
.task-loader .tl-header,
.task-loader .tl-users-item,
.task-loader .tl-text-1,
.task-loader .tl-text-2,
.task-loader .tl-text-3 {
  animation: ph-task-loader 1s infinite;
  animation-timing-function: linear;
}
.task-loader .tl-project-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 67px;
}
.task-loader .tl-ph-1 {
  display: block;
  background-color: #E2E3E8;
}
.task-loader .tl-ph-1 {
  width: 35%;
  height: 16px;
  margin-left: 40px;
}
.task-loader .tl-ph-2 {
  width: 70%;
  height: 14px;
}
.task-loader .tl-users {
  padding: 0 20px;
}
.task-loader .tl-users .tl-users-item {
  display: inline-block;
  font-size: 0;
  border-radius: 50%;
  background-color: #E2E3E8;
  width: 22px;
  height: 22px;
}
.task-loader .tl-filrer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 47px;
  background-color: #F5F6F9;
  margin-bottom: 40px;
}
.task-loader .tl-filrer .tl-filter-content {
  display: inline-block;
  width: 114px;
  height: 11px;
  background-color: #E2E3E8;
  margin-right: 20px;
}
.task-loader .tl-1 {
  padding: 0 40px;
  display: block;
  margin-bottom: 40px;
}
.task-loader .tl-header {
  display: block;
  height: 12px;
  width: 35%;
  background-color: #B4B9CC;
  margin-bottom: 18px;
}
.task-loader .tl-text-1,
.task-loader .tl-text-2,
.task-loader .tl-text-3 {
  display: block;
  height: 8px;
  background-color: #E2E3E8;
  margin-bottom: 10px;
}
.task-loader .tl-text-1 {
  width: 80%;
}
.task-loader .tl-text-2 {
  width: 70%;
}
.task-loader .tl-text-3 {
  width: 40%;
}

@keyframes ph-task-loader {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.projects-panel {
  z-index: 5;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -150px;
  width: 221px;
  height: 100%;
  min-height: 100%;
  background-color: #4B5065;
  transition: 0.2s;
  transition-delay: 0.15s;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.projects-panel.archive-is-empty .btn-projects-archive {
  display: none;
}
.projects-panel.archive-is-empty .projects-archive {
  display: none;
}
.projects-panel.show-projects {
  -ms-transform: translateX(-150px);
  transform: translateX(-150px);
  box-shadow: 10px 0 70px rgba(0, 0, 0, 0.3);
}
.projects-panel.show-projects .projects-panel-list-wrap:before {
  opacity: 0;
}
.projects-panel.show-projects .add-new-project-title {
  opacity: 1;
}
.projects-panel.show-projects .additional-options {
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.projects-loader {
  display: none;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 71px;
  background-color: #686D83;
  border-right: 5px solid #3E4255;
  z-index: 10;
}
.is-loading .projects-loader {
  display: -ms-flexbox;
  display: flex;
}
.projects-loader__btn-add, .projects-loader__item {
  animation: ph-task-loader 1s infinite;
  animation-timing-function: linear;
}
.projects-loader__btn-add {
  width: 66px;
  height: 66px;
  background-color: #47C5A2;
}
.projects-loader__item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 66px;
  height: 66px;
  background-color: #62687F;
}
.projects-loader__item:nth-child(2) {
  background-color: #4B5065;
}
.projects-loader__item:nth-child(3) {
  background-color: #54596F;
}
.projects-loader__item:nth-child(4) {
  background-color: #5D6279;
}
.projects-loader__item:nth-child(5) {
  background-color: #616780;
}

.project-add {
  margin-right: 10px;
  transition: transform 0.2s;
  fill: #fff;
  width: 15px;
  height: 15px;
}

.add-new-project {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  cursor: pointer;
  background-color: #47C5A2;
  min-height: 65px;
  padding: 5px 0 5px 28px;
}
.add-new-project:hover {
  transition: 0.1s;
  background-color: #53c9a8;
}
.add-new-project:active {
  transition: 0s;
  background-color: #3dc09c;
}

.add-new-project-title {
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  transition-delay: 0.15s;
  font-size: 1.1em;
  font-weight: 600;
}

.projects-panel-list-wrap {
  position: relative;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 145px;
}
.projects-panel-list-wrap::-webkit-scrollbar {
  width: 5px;
}
.projects-panel-list-wrap::-webkit-scrollbar-thumb {
  background-color: #5D647A;
}
.archive-is-open .projects-panel-list-wrap {
  padding-bottom: 145px;
}
.archive-is-open .projects-panel-list-wrap .btn-projects-archive {
  border-color: #47C5A2;
}
.projects-panel-list-wrap:before {
  z-index: 6;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  transition: 0.2s;
  transition-delay: 0.15s;
  pointer-events: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b5065+0,4b5065+100&0+0,1+50 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(75, 80, 101, 0) 0%, rgb(75, 80, 101) 50%, rgb(75, 80, 101) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.projects-panel-list {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  height: auto;
  padding-top: 10px;
}

.project {
  position: relative;
  width: 100%;
  cursor: default;
  color: #B5B8C4;
  padding: 0 0 0 25px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 33px;
}
.project.unreaded, .project.tm-unreaded {
  color: #fff;
}
.project.unreaded:after, .project.tm-unreaded:after {
  z-index: 1;
  content: "";
  position: absolute;
  left: 19px;
  top: 5px;
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #FF4541;
  border-radius: 50%;
  z-index: 5;
}
.project.temp {
  display: -ms-flexbox;
  display: flex;
}
.project.temp.active .temp-title {
  color: #fff;
}
.project.temp.active:before {
  display: none;
}
.project.temp.active .svg-icon {
  fill: #fff;
}
.project .project-temp {
  cursor: default;
  width: 18px;
  height: 18px;
  fill: #787F95;
  margin: 2px 7px 3px 10px;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.project .temp-title {
  color: #B0B3C0;
  white-space: nowrap;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.project .project-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.project.active {
  background-color: #5F6478;
  color: #fff;
}
.project.active:hover {
  background-color: #5F6478;
}
.project:hover {
  background-color: #52576B;
}
.project:hover .project__drag-handler {
  display: -ms-flexbox;
  display: flex;
}
.project__drag-handler {
  width: 33px;
  height: 33px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  cursor: grab;
  display: none;
}
.project__drag-handler .ico-sort {
  cursor: grab;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 15px;
  height: 11px;
}

.cur-grabbing .project__drag-handler {
  cursor: grabbing;
}
.cur-grabbing .project__drag-handler .ico-sort {
  cursor: grabbing;
}

.btn-projects-archive {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: #4B5065;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  padding: 14px 0 14px 25px;
  cursor: default;
}
.btn-projects-archive .ico-archive {
  cursor: default;
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  fill: #787F95;
  margin-left: 10px;
}
.archive-is-open .btn-projects-archive {
  background-color: #5F6478;
}
.archive-is-open .btn-projects-archive .btn-projects-archive-title {
  color: #fff;
}
.archive-is-open .btn-projects-archive .ico-archive {
  fill: #fff;
}
.btn-projects-archive:hover {
  background-color: #595E75;
}

.btn-projects-archive-title {
  color: #B0B3C0;
}

.projects-archive {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  display: none;
  background-color: #3E4255;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-direction: column;
  flex-direction: column;
}
.archive-is-open .projects-archive {
  padding-top: 5px;
  display: -ms-flexbox;
  display: flex;
}

.additional-options {
  z-index: 6;
  position: absolute;
  width: 100%;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 28px 20px 11px;
  background-color: #4B5065;
  transform: translate3d(0, 0, 0);
  transition: 0.2s 0.15s;
  -ms-transform: translateX(-150px);
  transform: translateX(-150px);
}

.add-opt-sect {
  position: relative;
  cursor: pointer;
  transition: background 0.1s;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.add-opt-sect:not(:last-child) {
  margin-right: 33px;
}
.add-opt-sect .aos-label {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #B5B8C4;
  bottom: 115%;
}
.add-opt-sect .add-text {
  font-weight: 800;
  font-size: 22px;
}

.aos-setting .user-avatar {
  transition: opacity 0.2s;
  opacity: 1;
  pointer-events: none;
  max-width: 100%;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  border-radius: 50%;
  max-height: 40px;
}
.aos-setting:hover .user-avatar {
  opacity: 0.9;
}

.aos-help {
  background-color: #52B2FD;
}
.aos-help:hover {
  background-color: #62B9FD;
}

.btn-share {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 50%;
  background-color: #47C5A2;
  margin-right: 33px;
}
.btn-share .aos-label {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #B5B8C4;
  bottom: 115%;
}
.btn-share__link {
  font-size: 0;
}
.btn-share:hover {
  background-color: #53c9a8;
}
.btn-share .ico-share {
  width: 16px;
  height: 16px;
}

#task-dropbox-error {
  display: none;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#task-dropbox-error .holder {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#task-dropbox-error .holder span {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}
#task-dropbox-error .circle-wrap {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 216px;
  height: 272px;
  -ms-transform: translate(-50%, -80%);
  transform: translate(-50%, -80%);
}
#task-dropbox-error .circle {
  position: fixed;
  width: 216px;
  height: 272px;
  background: #fff;
  text-align: center;
  border: 1px dashed #B4B9CC;
  font-size: 15px;
  border-radius: 5px;
  padding: 56px 0 0;
}
#task-dropbox-error .circle .size {
  display: block;
  color: #B4B9CC;
  margin: 7px 0 20px;
}

.setting-user {
  width: 250px;
}
.setting-user .middle.left:after,
.setting-user .middle.right:after {
  position: relative;
}
.setting-user.middle.left:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 141px;
  right: 100%;
  border-width: 4.5px 6px 4.5px 0;
  border-color: transparent #ffffff transparent transparent;
}
.setting-user.middle.right:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 140px;
  left: 100%;
  border-width: 4.5px 0 4.5px 6px;
  border-color: transparent transparent transparent #ffffff;
}

.settings-project {
  /* ICONS */
}
.settings-project__nav {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #E2E3E8;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.settings-project__nav-item {
  cursor: pointer;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  padding: 21px 20px 17px;
  border-bottom: 4px solid transparent;
}
.settings-project__nav-item:not(:last-child) {
  border-right: 1px solid #E2E3E8;
}
.settings-project__nav-item.active {
  border-bottom: 4px solid #47C5A2;
}
.settings-project__template {
  display: none;
}
.settings-project__template .label-input {
  margin: 40px 40px;
}
.settings-project__creator {
  position: absolute;
  top: 0;
  right: 0;
  color: #B9BBC1;
  line-height: 1;
}
.settings-project__subscriber {
  border-top: 1px solid #E2E3E8;
  border-bottom: 1px solid #E2E3E8;
  padding: 30px 10px;
  margin: 0 40px;
}
.settings-project .btn-ios-toggle-blue {
  float: left;
  margin-right: 15px;
}
.settings-project__message {
  font-size: 13px;
}
.settings-project__message span {
  cursor: help;
  text-decoration: underline;
}
.settings-project__user-list {
  padding: 18px;
}
.settings-project__user-list .user-icon {
  width: 30px;
  height: 30px;
}
.settings-project__footer {
  padding: 35px 40px 40px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.settings-project__archive-project, .settings-project__delete-project, .settings-project__leave-project {
  cursor: pointer;
}
.settings-project__archive-project span, .settings-project__delete-project span, .settings-project__leave-project span {
  vertical-align: middle;
}
.settings-project__btn-user-setting {
  cursor: pointer;
  color: #B4B9CC;
}
.settings-project__btn-user-setting:hover {
  color: #62687F;
}
.settings-project__btn-user-setting:hover .ico-settings-user {
  fill: #62687F;
}
.is-creator .settings-project__btn-user-setting:hover {
  color: #D0D4E2;
}
.is-creator .settings-project__btn-user-setting:hover .ico-settings-user {
  fill: #D0D4E2;
}
.is-creator .settings-project__btn-user-setting {
  cursor: default;
  color: #D0D4E2;
}
.is-creator .settings-project__btn-user-setting .svg-icon {
  cursor: default;
  fill: #D0D4E2;
}
.settings-project__setting-user h4 {
  font-weight: 600;
  border-bottom: 1px solid #E2E3E8;
  padding: 14px 0 13px;
  margin: 0 14px;
}
.settings-project__setting-user .btn-user-role {
  margin-bottom: 4px;
  text-align: left;
  display: block;
}
.settings-project__setting-user .btn-user-role label[for^=user-role] {
  font-weight: 600;
  font-size: 1.05em;
  color: #6C728A;
}
.settings-project__setting-user .su-desc {
  color: #B3B5BC;
}
.settings-project__setting-user .btn-delete-user {
  cursor: pointer;
  padding: 14px 18px;
  border-top: 1px solid #E2E3E8;
}
.settings-project__setting-user .btn-delete-user span {
  display: inline-block;
  vertical-align: middle;
}
.settings-project .record-success .ico-form-success {
  opacity: 1;
}
.settings-project .btn-pen-write {
  display: none;
  fill: #B4B9CC;
  width: 16px;
  height: 13px;
}
.is-manager .settings-project .btn-pen-write {
  display: inline-block;
}
.settings-project .ico-settings-user {
  margin-left: 5px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  fill: #B4B9CC;
}
.settings-project .ico-archive,
.settings-project .ico-leave {
  vertical-align: middle;
  fill: #62687F;
  margin-right: 5px;
}
.settings-project .ico-archive {
  width: 20px;
  height: 20px;
}
.settings-project .ico-delete {
  fill: #FF4F37;
  vertical-align: middle;
  margin-right: 5px;
  width: 16px;
  height: 18px;
}
.settings-project .ico-leave {
  width: 20px;
  height: 18px;
}
.settings-project .ico-form-success {
  transition: 0.2s;
  opacity: 0;
  cursor: default;
  position: absolute;
  right: 13px;
  bottom: 15px;
  width: 19px;
  height: 14px;
}

.invite-form {
  position: relative;
  background-color: #F5F5F5;
  padding: 40px 39px;
  z-index: 1;
}
.invite-form .ico-add-user-list {
  fill: #47C5A2;
  width: 20px;
  height: 20px;
  z-index: 2;
}
.invite-form .ico-add {
  z-index: 2;
  fill: #47C5A2;
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
}
.invite-form .ico-add-user-list {
  margin-right: 10px;
}
.invite-form:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 10.5px 0 10.5px;
  border-color: #f5f5f5 transparent transparent transparent;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.invite-form-header {
  position: relative;
}
.invite-form-header.invite-has-error .invite-search-field {
  border: 1px solid #ffa2a2;
}
.invite-search-field {
  border-color: #47C5A2;
  padding-left: 42px;
}
.invite-search-field::-webkit-input-placeholder {
  color: #2C324A;
}
.invite-search-field::-moz-placeholder {
  color: #2C324A;
}
.invite-search-field:-ms-input-placeholder {
  color: #2C324A;
}
.invite-search-field:focus::-webkit-input-placeholder {
  color: #9FA2B1;
}
.invite-search-field:focus::-moz-placeholder {
  color: #9FA2B1;
}
.invite-search-field:focus:-ms-input-placeholder {
  color: #9FA2B1;
}

.invite-form .text-field {
  position: relative;
  z-index: 1;
}

.invite-list,
.invite-send,
.invite-user,
.invite-not-found {
  position: absolute;
  top: 85px;
  left: 0;
  right: 0;
  background-color: #fff;
}

.invite-list {
  max-height: 359px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  margin: 0 40px;
}
.invite-list .btn-invite-user {
  padding: 10px 10px;
  -ms-flex-pack: center;
  justify-content: center;
}

.invite-form .is-error {
  border: 1px solid red !important;
}

.invite-item {
  cursor: pointer;
  padding: 10px 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
}
.invite-item:hover {
  background-color: #F9F9FA;
}
.invite-item.is-added {
  display: none;
}
.invite-item.hovered {
  color: #fff;
  background-color: #62687F;
}
.invite-item.hovered .svg-icon {
  fill: #fff;
}

.invite-item-user-name .pict {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.invite-item-user-name .name {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-item-user-email {
  color: #B3B5BC;
}

.invite-item.is-added {
  opacity: 0.5;
}

.invite-item + li {
  border-top: 1px solid #E2E3E8;
}

.invite-item img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.invite-select-btn {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}
.invite-select-btn .ico-arrow {
  border-left: 1px solid #E2E3E8;
  display: block;
}
.invite-select-btn .ico-arrow .svg-icon {
  width: 15px;
  margin: 16px auto 9px;
  fill: #B4B9CC;
}
.invite-select-btn .ico-plus {
  display: none;
  background-color: #47C5A2;
  border-radius: 0 3px 3px 0;
}
.invite-select-btn .ico-plus .svg-icon {
  width: 11px;
  height: 10px;
  margin: 18px auto 13px;
  fill: #fff;
}
.invite-select-btn.state-is-add .ico-arrow {
  display: none;
}
.invite-select-btn.state-is-add .ico-plus {
  display: block;
}

.template-status {
  z-index: 2;
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  border-radius: 2px;
  cursor: pointer;
}
.unreaded .template-status {
  display: none;
}
.tmc-unreaded .template-status {
  display: none;
}
.tm-unreaded .template-status {
  display: none;
}
.template-status:hover {
  width: 18px;
  height: 18px;
  margin: -1px 0 0 -1px;
  border-width: 2px;
  border-radius: 3px;
}
.task-new-msg .template-status {
  background-color: transparent;
}
.template-status.visible {
  border-color: #E2E3E8;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin: -1px 0 0 -1px;
  border-width: 2px;
  border-radius: 3px;
}

.template-status-help {
  width: 14px;
  height: 14px;
}

.approved-template {
  background-color: #FFF;
}
.approved-template:before {
  content: "";
  display: block;
  position: absolute;
}
.approved-template {
  border-color: transparent;
}
.approved-template:before {
  left: 1px;
  top: 2px;
}

/* Assign btn icon */
.assign-btn-wrapper {
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-right: 1px solid transparent;
}
.assign-btn-wrapper:hover {
  background-color: #eee;
}
.task.active .assign-btn-wrapper:hover {
  background-color: #787F95;
}

.assign-btn {
  fill: #787F95;
  width: 15px;
  height: 16px;
}
.task.active .assign-btn {
  fill: #B4B9CC;
}

/* Assign panel (dropdown) */
.task-messenger .assign-panel.top::before {
  position: absolute;
  left: 9px;
}
.task-messenger .assign-panel.bottom::before {
  left: 9px;
}

.assign-panel {
  padding: 6px 0;
  border-radius: 4px;
  display: none;
  z-index: 5;
  position: absolute;
  width: 190px;
  box-shadow: 0 2px 46px rgba(109, 109, 109, 0.18);
  background-color: white;
}
.control-panel .assign-panel {
  top: 30px;
  right: 0;
}
.content .assign-panel {
  top: 42px;
  right: 137px;
}
.assign-panel.top::before {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 4.5px 5px 4.5px;
  border-color: transparent transparent #ffffff transparent;
}
.assign-panel.bottom::before {
  content: "";
  position: absolute;
  right: 9px;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4.5px 0 4.5px;
  border-color: #ffffff transparent transparent transparent;
}

.assign-title {
  position: relative;
  height: 42px;
  border-bottom: 1px solid #E2E3E8;
}

.ph-assign-title {
  display: block;
  color: #B3B5BC;
  width: 100%;
  height: 38px;
  padding: 10px 16px;
}

.user-assign {
  display: none;
  -ms-flex-align: center;
  align-items: center;
}
.user-assign .user-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 5px;
  width: 23px;
  height: 23px;
  border: 3px solid #47C5A2;
  display: inline-block;
  vertical-align: middle;
}
.user-assign .assign-user-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 110px;
  height: 15px;
  overflow: hidden;
  line-height: 1;
}
.user-assign .btn-del-user {
  width: 20px;
  height: 20px;
  fill: #B4B9CC;
  position: absolute;
  top: 10px;
  right: 12px;
}

.assign-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 16px;
}
.assign-item:not(.assign-title) {
  cursor: pointer;
  height: 34px;
}
.assign-item:not(.assign-title):hover {
  background-color: #62687F;
  color: #fff;
}

.assign-item-img-wrap {
  border-radius: 50%;
  overflow-x: hidden;
  margin: 0 10px 0 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.assign-item-private .assign-item-img-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

.assign-item-img {
  max-width: 100%;
}

.assign-item-name {
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assign-item-private .assign-item-name {
  color: #c2c2c2;
}

.btn-ap-add-new-user {
  cursor: pointer;
  border-top: 1px solid #E2E3E8;
  height: 38px;
  padding: 10px 16px;
}
.btn-ap-add-new-user .ap-add-new-user {
  display: inline-block;
  vertical-align: middle;
}
.btn-ap-add-new-user .ico-manage-user {
  display: inline-block;
  vertical-align: middle;
}
.btn-ap-add-new-user:hover {
  background-color: #62687F;
  color: #fff;
}
.btn-ap-add-new-user:hover .ico-manage-user {
  fill: #fff;
}

.assign-list {
  overflow: hidden;
  overflow-y: auto;
  max-height: 170px;
}
.assign-list .assign-item.hovered {
  background-color: #62687F;
  color: #fff;
}
.assign-list .assign-item.hovered.assign-title .btn-del-user {
  fill: #fff;
}

.control-panel .assign-assigned-pict {
  cursor: pointer;
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* BTN Versions */
.btn-template-upload {
  position: relative;
  cursor: pointer;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-right: 1px solid transparent;
  fill: #787F95;
}
.task.active .btn-template-upload {
  fill: #B4B9CC;
}
.btn-template-upload .ts-versions {
  width: 14px;
  height: 16px;
}
.btn-template-upload:hover {
  background-color: #eee;
}
.task.active .btn-template-upload:hover {
  background-color: #787F95;
}
.template-versions {
  width: 220px;
  /* ICONS */
}
.template-versions .base-list__item.active {
  background-color: #62687F;
  color: #fff;
}
.template-versions .base-list__item.active .sub-text {
  color: #fff;
}
.template-versions .base-list__item.active .ico-del-version {
  visibility: visible;
  fill: #fff;
}
.template-versions .base-list__item.active:hover {
  background-color: #62687F;
}
.template-versions .base-list__item:hover {
  background-color: #F9F9F9;
}
.template-versions .base-list__item:hover .ico-del-version {
  visibility: visible;
}
.no-drafts .template-versions .base-list--version {
  display: none;
}
.template-versions__header {
  cursor: default;
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid #E2E3E8;
}
.template-versions__header .title {
  vertical-align: middle;
}
.template-versions__header .ico-add-version {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  fill: #47C5A2;
}
.template-versions__header .ico-add-version:hover {
  fill: #62687F;
}
.template-versions .unreaded:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #FF4541;
  position: absolute;
  left: 12px;
  top: 13px;
}
.template-versions__content .title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-versions__placeholder {
  padding: 30px;
}
.template-versions__placeholder p {
  text-align: center;
  line-height: 1.3;
}
.template-versions__placeholder .title {
  border-bottom: 1px solid #E2E3E8;
  padding: 0 0 20px;
}
.template-versions__placeholder .ico-upload {
  display: block;
  margin: 0 auto 10px;
  width: 90px;
  height: 90px;
}
.template-versions .ico-header-version {
  cursor: default;
  margin-right: 5px;
  vertical-align: middle;
  width: 14px;
  height: 16px;
  fill: #62687F;
}
.template-versions .ico-del-version {
  fill: #B4B9CC;
  visibility: hidden;
  width: 14px;
  height: 16px;
  margin-right: 6px;
}
.template-versions.top.left::before, .template-versions.top.right::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 4.5px 5px 4.5px;
  border-color: transparent transparent #ffffff transparent;
}
.template-versions.bottom.left::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4.5px 0 4.5px;
  border-color: #ffffff transparent transparent transparent;
}
.template-versions .dz-drag-hover {
  position: relative;
}
.template-versions .dz-drag-hover:after {
  z-index: 10;
  content: "Drop!";
  font-size: 1.1em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.template-versions .dz-drag-hover .base-list__item:hover {
  color: #2C324A;
  background-color: #fff;
}

/* BTN Task messenger */
.task-text-info-btn {
  position: relative;
  cursor: pointer;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.task-text-info-btn .ico-ts-task {
  position: relative;
  top: -1px;
  fill: #787F95;
  width: 13px;
  height: 17px;
}
.task.active .task-text-info-btn .ico-ts-task {
  fill: #B4B9CC;
}
.task-text-info-btn.task-info-empty .ico-ts-task {
  fill: #ddd;
}
.task-text-info-btn:hover {
  background-color: #eee;
}
.task.active .task-text-info-btn:hover {
  background-color: #787F95;
}

.task-messenger .shared_link_image {
  width: auto;
  max-width: 100%;
}

.task-messenger {
  border-radius: 5px;
  z-index: 3;
  position: fixed;
  top: 74px;
  right: 340px;
  width: 480px;
  background-color: #FFF;
  box-shadow: 0 2px 45px rgba(0, 0, 0, 0.18);
}

.tm-popup {
  position: relative;
}
.tm-popup .user-icon,
.tm-popup .assign-btn,
.tm-popup .tm-user-name {
  -webkit-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
  display: inline-block;
  vertical-align: middle;
}
.tm-popup .user-assign {
  display: none;
}
.tm-popup.assigned .assign-btn,
.tm-popup.assigned .ph-assign-title {
  display: none;
}
.tm-popup.assigned .user-assign {
  display: -ms-flexbox;
  display: flex;
}
.tm-popup.assigned .tm-comment-header .user-icon {
  display: none;
}
.tm-popup.assigned .btn-tm-assign .user-icon {
  display: -ms-flexbox;
  display: flex;
}

.tm-container {
  position: relative;
  overflow-y: auto;
  max-height: 460px;
}

.tm-header {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  padding: 21px 130px 15px 20px;
  position: relative;
  border-bottom: 1px solid #E2E3E8;
}
.tm-header__title {
  height: auto;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0);
  font-size: 1.5em;
  height: 24px;
  line-height: 1.2;
}
.tm-header__title:hover {
  border: 1px solid #eee;
}

.tm-header-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  position: absolute;
  right: 22px;
  top: 26px;
}
.tm-header-nav .pantask-burger {
  font-size: 0;
  cursor: move;
}
.tm-header-nav .pantask-burger .svg-icon {
  cursor: move;
  fill: #B4B9CC;
  width: 20px;
  height: 19px;
}
.tm-header-nav .ico-bookmarks {
  position: relative;
  top: -1px;
}

.tm-header-nav-item {
  width: 24px;
  height: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-left: 13px;
}
.tm-header-nav-item.active-bookmarks .ico-bookmarks {
  opacity: 1;
  fill: #47C5A2;
  stroke: #47C5A2;
}
.tm-header-nav-item:hover .ico-bookmarks {
  stroke: #62687F;
}
.tm-header-nav-item:hover .pantask-burger .svg-icon {
  fill: #62687F;
}

.ico-bookmarks {
  width: 18px;
  height: 18px;
  cursor: pointer;
  stroke: #818CB5;
  fill: #fff;
}

.tm-msg-controls {
  padding: 15px 0 15px;
  margin: 0 30px 27px;
  border-top: 1px solid #E2E3E8;
  border-bottom: 4px solid #47C5A2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.tm-msg-controls .assign-btn {
  width: 20px;
  height: 20px;
}
.tm-msg-controls .assign-btn .svg-icon {
  margin: 2px 0 0 2px;
  width: 17px;
  height: 16px;
  fill: #B4B9CC;
}
.tm-msg-controls .pantask-attach {
  width: 10px;
  height: 21px;
  fill: #B4B9CC;
}
.tm-msg-controls .tm-assign {
  color: #6C728A;
}
.tm-msg-controls .tm-assign:hover .assign-btn .svg-icon {
  fill: #62687F;
}
.tm-msg-controls .tm-attach {
  color: #6C728A;
}
.tm-msg-controls .tm-attach:hover .pantask-attach {
  fill: #62687F;
}

.tm-creator {
  margin: 5px 0 0 12px;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.85em;
}
.tm-creator span {
  margin-left: 5px;
  color: #B3B5BC;
}

.tm-message-wrap {
  border: 1px solid #E2E3E8;
  border-radius: 6px;
  margin: 30px;
  position: relative;
}

.tm-message {
  position: relative;
  width: 100%;
  border-top: 1px solid #E2E3E8;
}
.tm-message .comment-text {
  padding: 12px 40px 12px 14px;
  height: 40px;
  width: 373px;
  float: left;
  max-height: 150px;
  border: none;
}

.tm-btn-send-msg {
  width: 10%;
  min-width: 45px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #E2E3E8;
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: -1px;
  font-size: 0.9em;
}
.tm-btn-send-msg.ready {
  color: #fff;
  background-color: #47C5A2;
  border: 1px solid #47C5A2;
}

.tm-description {
  position: relative;
  padding: 10px 0;
  margin: 0 20px;
}
.tm-description #tm-content {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  border-radius: 4px;
  line-height: 1.7;
  font-size: 1em;
  padding: 5px 10px;
  border: 1px solid transparent;
  min-height: 80px;
}
.tm-description #tm-content:focus {
  border-color: #E2E3E8;
}
.tm-description:hover #tm-content {
  border: 1px solid #eee;
}
.tm-description .highlight {
  background-color: #FFF8E1;
}

.imit-placeholder {
  pointer-events: none;
  position: absolute;
  left: 11px;
  top: 17px;
  color: #ccc;
}

.user-icon {
  border-radius: 50%;
  overflow-x: hidden;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.user-icon img {
  max-width: 100%;
}

.tm-assign .imit-link-dashed,
.tm-attach .imit-link-dashed {
  font-size: 0.95em;
}

.tm-assign {
  max-width: 200px;
}
.tm-assign .user-icon,
.tm-assign .assign-btn {
  margin-right: 4px;
}

.btn-tm-assign {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.btn-tm-assign .user-icon {
  display: none;
}

.tm-attach {
  max-width: 200px;
}
.tm-attach .tm-attach-file {
  vertical-align: middle;
}
.tm-attach .pantask-attach {
  vertical-align: middle;
  font-size: 0.7em;
}
.tm-attach .btn-tm-attach {
  text-align: right;
  margin-bottom: 8px;
}

.tm-attach-list {
  color: #6485FC;
  text-align: right;
}
.tm-attach-list li {
  margin-bottom: 4px;
}
.tm-attach-list li:hover .del-item {
  display: inline-block;
}
.tm-attach-list .imit-link-dashed, .tm-attach-list .del-item {
  display: inline-block;
  vertical-align: middle;
}
.tm-attach-list .del-item {
  cursor: pointer;
  display: none;
  width: 1em;
  height: 1em;
  font-size: 0.8em;
  fill: #6485FC;
}
.tm-attach-list .imit-link-dashed {
  border-color: #6485FC;
}
.tm-attach-list .imit-link-dashed:hover {
  border-color: transparent;
}

.tm-comments {
  padding: 0 30px;
  margin-bottom: 30px;
}
.tm-comments .show-older-comm {
  padding: 0 0 30px;
  margin: 0 0 30px;
}
.tm-comments .tm-comment-content {
  word-break: break-word;
  -webkit-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
  line-height: 1.6;
  margin-bottom: 10px;
}
.tm-comments .tm-comment-content a {
  color: #47C5A2;
}

.tm-comment {
  margin-bottom: 30px;
  border-bottom: 1px solid #E2E3E8;
  /* SHOW COMMENT BTN */
}
.tm-comment.pending .loader-circle--small {
  display: inline-block;
}
.tm-comment:last-child {
  border-bottom: none;
}
.tm-comment:hover .ico-clip-comment,
.tm-comment:hover .btn-del-comment {
  opacity: 1;
}
.tm-comment:hover .add-bookmarks {
  opacity: 1;
  stroke: #B4B9CC;
}
.tm-comment.hovered .ico-clip-comment,
.tm-comment.hovered .btn-del-comment {
  opacity: 1;
}
.tm-comment.hovered .add-bookmarks {
  opacity: 1;
  stroke: #B4B9CC;
}
.tm-comment.unreaded .tm-comment-content {
  font-weight: 600;
}
.tm-comment.unreaded .comment-date {
  color: #47C5A2;
}

.tm-comment-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 10px;
}
.tm-comment-header .user-icon {
  display: none;
  margin-right: 5px;
}
.tm-comment-header .tm-user-name {
  color: #6C728A;
  font-size: 0.95em;
}
.tm-comment-header .loader-circle--small {
  display: none;
  margin-left: auto;
}

.comment-qty-likes {
  text-align: center;
  pointer-events: none;
  font-size: 9px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding-top: 6px;
  color: #fff;
}
.comment-qty-likes:not(:empty) ~ .like-comment {
  fill: #62687F;
  stroke: #62687F;
}
.comment-qty-likes:not(:empty) ~ .like-comment:hover {
  stroke: #62687F;
}
.active-like .comment-qty-likes:not(:empty) ~ .like-comment:hover {
  stroke: #FFB85B;
}

.tm-comment-footer {
  position: relative;
  font-size: 0.95em;
  margin-bottom: 20px;
}

.comment-footer-item {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.comment-footer-item:first-child {
  position: relative;
}
.comment-footer-item .like-comment {
  fill: none;
  stroke: #B4B9CC;
  stroke-width: 1px;
  width: 17px;
  height: 18px;
}
.comment-footer-item .like-comment:hover {
  stroke: none;
  fill: #62687F;
}
.comment-footer-item.active-like .like-comment {
  stroke: #FFB85B;
  fill: #FFB85B;
}
.comment-footer-item.active-like .like-comment:hover {
  fill: #FFB85B;
}
.comment-footer-item .comment-date {
  margin-right: 10px;
  font-size: 0.85em;
  color: #B3B5BC;
}
.comment-footer-item .add-bookmarks {
  stroke-width: 1px;
  opacity: 0;
  width: 17px;
  height: 17px;
  stroke: #818CB5;
  fill: transparent;
}
.comment-footer-item .add-bookmarks:hover {
  stroke: #62687F;
}
.comment-footer-item.active-bookmarks .add-bookmarks {
  opacity: 1;
  fill: #47C5A2;
  stroke: #47C5A2;
}
.comment-footer-item.active-bookmarks .add-bookmarks:hover {
  fill: #47C5A2;
  stroke: #47C5A2;
}
.comment-footer-item .ico-clip-comment {
  opacity: 0;
  fill: #B4B9CC;
  width: 18px;
  height: 17px;
}
.comment-footer-item .ico-clip-comment:hover {
  fill: #62687F;
}
.comment-footer-item .btn-del-comment {
  opacity: 0;
  position: absolute;
  top: 1px;
  right: 0;
  fill: #B4B9CC;
  width: 16px;
  height: 18px;
}
.comment-footer-item .btn-del-comment:hover {
  fill: #62687F;
}

body:not(.hide-panel) .system-banner {
  margin-right: 0;
}
body.temporary .control-panel {
  transition: 0s;
  width: 71px !important;
}
body.public .public-container {
  display: block;
}
body.public .viewport-container {
  display: none;
}
body.public .control-panel {
  transition: 0s;
  width: 71px !important;
}
body.public .dz-background {
  display: none;
}

.no-auth .hide-panel-btn {
  display: none;
}
.no-auth .introjs-button {
  display: none;
}

.viewport-container::-webkit-scrollbar {
  width: 0;
  height: 16px;
}
.viewport-container::-webkit-scrollbar-corner {
  background-color: #404040;
}
.viewport-container::-webkit-scrollbar-thumb {
  background-color: #7a7a7a;
  border-radius: 0;
}
.viewport-container::-webkit-scrollbar-track {
  background-color: #404040;
}

.viewport-container {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.viewport-dropzone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
  display: block;
}

.viewport-content {
  background-color: #fff;
}

.hide-dropzone {
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
}
.hide-dropzone .dz-background {
  display: none;
}
.hide-dropzone .view-img {
  display: block;
}

.fit-to-screen #content-pict {
  max-width: 100%;
}
.fit-to-screen #draft-loader__ratio-ph-height {
  display: block;
}
.fit-to-screen #draft-loader__image-content {
  position: absolute;
}
.fit-to-screen #draft-loader__image-content #content-pict {
  width: 100%;
}

#content-pict {
  transition: opacity 0.5s;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  margin: auto;
}

.view-img {
  display: none;
  width: 100%;
  position: relative;
  margin: auto;
  z-index: 0;
  cursor: crosshair;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
}
.view-img.is-loading #draft-loader__ph {
  z-index: 1;
  opacity: 1;
}
.view-img.is-loading #content-pict {
  opacity: 0;
}
.view-img.is-loading .points {
  z-index: 0;
  opacity: 0;
}

#draft-loader__ratio-ph-height {
  display: none;
}
#draft-loader__ph {
  z-index: 0;
  opacity: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: opacity 0.8s;
}
#draft-loader__image-content {
  position: relative;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  max-width: 100%;
}

.content-scrolltrack-h {
  display: none;
  z-index: 1;
  position: absolute;
  height: 16px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(100, 106, 132, 0.22);
}

.content-scrollbar-h {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 16px;
  background-color: #6C728A;
}

.content:not(.showed-v) .content-scrolltrack-v {
  display: none;
}

.content-scrolltrack-v {
  z-index: 2;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  background-color: rgba(100, 106, 132, 0.22);
  transition: opacity 0.1s;
}

.content-scrolltrack-v:hover {
  transition-delay: 0.1s;
}

.content-scrolltrack-v:hover,
.content-scrolltrack-v.focused {
  opacity: 1;
}

.content-scrollbar-v {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  background-color: #6C728A;
}

.focused .content-scrollbar-v {
  background-color: #7a7a7a;
}

.content:not(.showed-v) .content-scrolltrack-v {
  display: none;
}

.public-container {
  background-color: #F5F8FD;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  display: none;
}
.public-container__header {
  text-align: center;
  margin: 0 auto;
}
.public-container__title {
  font-size: 19px;
  padding: 20px 0;
}

.public-filter {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 20px;
}
.public-filter__item {
  transition: color 0.1s;
  cursor: pointer;
  padding: 5px 0 0;
  margin: 0 10px;
}
.public-filter__item.active {
  border-bottom: 1px solid #2C324A;
}
.public-filter__item:hover {
  color: #62687F;
  border-bottom: 1px solid #62687F;
}
.public-filter__item-title {
  padding: 5px 0 0;
  margin: 0 10px;
}

.public-list {
  padding: 0 5px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
}
.public-list__item {
  transition: opacity 0.2s;
  visibility: visible;
  opacity: 1;
  width: 200px;
  box-shadow: 0 2px 4px rgba(39, 69, 135, 0.14);
  margin: 0 10px 20px 10px;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.1s;
  background-color: #fff;
}
.public-list__item.is-ready {
  visibility: hidden;
  opacity: 0;
}
.public-list__item--dropzone {
  background-color: #fff;
  cursor: pointer;
}
.public-list__item--dropzone .tp-icon {
  width: 39px;
  height: 49px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-bottom: 17px;
}
.public-list__item--loaded {
  opacity: 1;
}
.public-list__item.unreaded .public-list__footer:before {
  display: block;
}
.public-list__item .public-list__footer:before {
  content: "";
  display: none;
  width: 5px;
  height: 5px;
  background-color: #FF4541;
  border-radius: 50%;
  margin-right: 5px;
}
.public-list__item:hover {
  box-shadow: 0 10px 20px rgba(39, 69, 135, 0.1);
}
.public-list__item:hover .public-list__nav {
  display: -ms-flexbox;
  display: flex;
}
.public-list__item:hover .public-list__image .ico-open-new-window {
  opacity: 1;
}
.public-list__item:hover .public-list__image img {
  opacity: 0.7;
}
.public-list__image {
  position: relative;
  cursor: pointer;
  display: block;
  height: 216px;
  overflow: hidden;
}
.public-list__image img {
  border-radius: 4px 4px 0 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.1s;
  margin: 0 auto;
  max-width: 100%;
}
.public-list__image .ico-open-new-window {
  z-index: 2;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  background-color: #62687F;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.1s;
}
.public-list__image .ico-open-new-window .svg-icon {
  fill: #fff;
  width: 14px;
  height: 14px;
}
.public-list__footer {
  position: relative;
  background-color: #fff;
  padding: 7px 9px 5px 16px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0 0 3px 3px;
  min-height: 44px;
  border-top: 1px solid #E2E3E8;
}
.public-list__title {
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 15px;
  -ms-flex: 1;
  flex: 1;
}
.public-list__nav {
  -ms-flex-align: center;
  align-items: center;
  margin-left: 5px;
  display: none;
}
.public-list__nav-item {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}
.public-list__nav-item .ico-del-temp {
  width: 15px;
  height: 17px;
  fill: #B4B9CC;
}
.public-list__nav-item .clip-comment {
  fill: #B4B9CC;
  width: 18px;
  height: 17px;
}
.public-list__nav-item:hover svg {
  fill: #62687F;
}
.public-list__loader {
  width: 100%;
  display: block;
  padding: 64px 0 84px;
  text-align: center;
}
.public-list__loader.loading .ico-loader-public {
  display: block;
}
.public-list__loader.is-end-list .end-list {
  display: block;
}
.public-list__loader .ico-loader-public {
  display: none;
  margin: 0 auto;
  animation: public-item-loader 2s linear infinite;
  width: 33px;
  height: 26px;
}
.public-list__loader .end-list {
  display: none;
  color: #fff;
}

.dz-public {
  border-radius: 4px;
  padding: 0 8%;
  background-color: transparent;
  border: 2px dashed #B4B9CC;
  height: 240px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 10px;
}
.dz-public .ico-dz {
  z-index: -1;
  fill: #fff;
  margin-bottom: 1em;
  width: 34px;
  height: 44px;
}
.dz-public .dz-info {
  padding: 0 1%;
  text-align: center;
  color: #62687F;
  line-height: 1.3;
}
@keyframes public-item-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ev-none {
  pointer-events: none;
}

.dz-clickable,
.comm-footer-form {
  pointer-events: auto;
}

.content-loader {
  z-index: 2;
  display: none;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: #62687F;
}
.content-loader .draft-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: #47C5A2;
  box-shadow: 0 3px 5px rgba(71, 197, 162, 0.3);
}
.content-loader .draft-loader-text {
  font-size: 1.1em;
  color: #fff;
}
.content-loader.loading {
  display: -ms-flexbox;
  display: flex;
}

.switch-loader {
  display: none;
  background-color: #62687F;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}
.switch-loader span {
  font-size: 1.1em;
  color: #fff;
}
.switch-loader.loading {
  display: -ms-flexbox;
  display: flex;
}

.progress-loader {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: #47C5A2;
  box-shadow: 0 3px 5px rgba(71, 197, 162, 0.3);
}

.dz-background {
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  text-align: center;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.dz-background__title {
  font-size: 16px;
  color: #AEB0BE;
  font-weight: 600;
  z-index: 0;
}
.dz-background__title--drop {
  display: none;
}
.dz-background__gif, .dz-background__jpg, .dz-background__png {
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* easeInOutBack */
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.dz-background__shadow {
  transition: 0.3s;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.dz-background--is-ready .dz-background__shadow {
  opacity: 0.25;
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.dz-background--is-ready .dz-background__gif {
  -ms-transform: translate(-15%, -15%) scale(1.1);
  transform: translate(-15%, -15%) scale(1.1);
}
.dz-background--is-ready .dz-background__jpg {
  -ms-transform: translate(0%, -15%) scale(1.1);
  transform: translate(0%, -15%) scale(1.1);
}
.dz-background--is-ready .dz-background__png {
  -ms-transform: translate(15%, -15%) scale(1.1);
  transform: translate(15%, -15%) scale(1.1);
}
.dz-background--is-ready .dz-background__title--static {
  display: none;
}
.dz-background--is-ready .dz-background__title--drop {
  display: block;
}

.content-drop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ico-dz-version {
  z-index: -1;
}
.ico-dz-version__new, .ico-dz-version__back, .ico-dz-version__shadow {
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.ico-dz-version__shadow {
  transition: 0.3s;
}
.dz-new-version {
  display: none;
  position: fixed;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  pointer-events: none;
  z-index: 1;
  color: #fff;
  top: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(75, 80, 101, 0.89);
  font-size: 16px;
  font-weight: 400;
}
.dz-new-version__desc {
  text-align: center;
}
.dz-new-version--is-ready {
  display: -ms-flexbox;
  display: flex;
}
.dz-new-version--is-ready .ico-dz-version .ico-dz-version__new {
  animation: upload-new-version__new 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.dz-new-version--is-ready .ico-dz-version .ico-dz-version__back {
  animation: upload-new-version__back 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.dz-new-version--is-ready .ico-dz-version .ico-dz-version__shadow {
  animation: upload-new-version__shadow 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes upload-new-version__new {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(0, -25%) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes upload-new-version__back {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(0, -15%) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes upload-new-version__shadow {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}
.content-drop2.dz-drag-hover .comment-form > * {
  pointer-events: none;
}

.users-likes {
  bottom: -5px;
  left: 25px;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
}

.users-likes__list {
  overflow: hidden;
  padding: 10px;
  max-height: 93px;
  overflow-y: scroll;
  white-space: nowrap;
}
.users-likes__item {
  font-size: 12px;
  display: inline-block;
}

.points {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.points.hidden {
  visibility: hidden;
}

.point {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
}
.point.unreaded .point__wave {
  animation-name: pointWaveWave;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
  width: 54px;
  height: 54px;
}
.point.pending .circ {
  display: none;
}
.point.pending .loader-circle--big {
  display: -ms-flexbox;
  display: flex;
}
.point .loader-circle--big {
  display: none;
}
.point .task-done {
  margin-right: 10px;
}
.point .point-top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.point .point-top:hover {
  -ms-transform: scale(1);
  transform: scale(1);
}
.point .point-top:hover .circ {
  text-indent: 0;
}
.point .point-top:hover .circ:before {
  display: none;
}
.point.completed .circ {
  text-indent: -9999px;
}
.point.completed .circ:before {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 8px;
}
.point.completed .point-top {
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.3;
}
.point.completed .holst {
  display: none;
}
.point.completed:not(.opened) .selection-area {
  display: none;
}
.point.opened {
  display: block;
}
.point.opened .point-top {
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  z-index: 17;
}
.point.opened .comments {
  display: block;
  animation: fadeIn 0.1s;
  opacity: 1;
  z-index: 16;
}
.point.opened .point__wave {
  width: 66px;
  height: 66px;
}
.point.opened.completed .holst {
  display: block;
}
.point__wave {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.8;
  background-color: #fff;
  box-shadow: 0 0 16px rgba(17, 16, 13, 0.19);
  transition: 0.1s;
  transform: translate3d(-50%, -50%, 0);
}
.point__wave:hover {
  animation: none;
  width: 66px;
  height: 66px;
}
@keyframes pointWaveWave {
  0% {
    width: 54px;
    height: 54px;
  }
  25% {
    width: 66px;
    height: 66px;
  }
  50% {
    width: 26px;
    height: 26px;
  }
  75% {
    width: 66px;
    height: 66px;
  }
  100% {
    width: 54px;
    height: 54px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.comment-header {
  border-radius: 4px 4px 0 0;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  background-color: #6C728A;
  color: #B4B9CC;
  height: 27px;
}

.point-color {
  line-height: 0;
  margin-left: 10px;
}
.point-color__item {
  cursor: pointer;
  position: relative;
  display: inline-block;
  border: 4px solid transparent;
  border-radius: 50%;
}
.point-color__item span {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: block;
}
.point-color__item.active-one-color {
  border: 4px solid #4B5065;
}
.point-color__item.active-color-repeat:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background-color: #FFF;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.holst {
  position: absolute;
  top: -2485px;
  left: -2485px;
  width: 5000px;
  height: 5000px;
}
.holst:empty ~ .comments .comm-point-controls-item__done {
  border-right: none;
}
.holst:empty ~ .comments .comm-point-controls-item__cl-arr {
  display: none;
}

.holst svg {
  left: auto !important;
}

.point-top {
  z-index: 15;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to top, #ededed 0%, white 100%);
  border-radius: 50%;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.point-top:hover ~ .point__wave {
  animation: none;
  width: 66px;
  height: 66px;
}

.point-top.opacity {
  opacity: 0.5;
}

.circ {
  width: 26px;
  height: 26px;
  margin: 2px;
  border-radius: 50%;
  color: #fff;
  font: 600 14px/28px "proxima-nova", sans-serif;
  text-align: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.circ.blinking {
  opacity: 0;
  visibility: hidden;
}

.circ.private-point {
  text-shadow: none;
}

.circ-1.private-point {
  color: #9d0000;
}

.circ-2.private-point {
  color: #006c8f;
}

/* POINT COLORS */
.circ-1 {
  background-color: #ff4f49;
}

.circ-2 {
  background-color: #FFB85B;
}

.circ-3 {
  background-color: #76C8FD;
}

.circ-4 {
  background-color: #47C5A2;
}

.circ-5 {
  background-color: #62687F;
}

.usn {
  cursor: default;
}

.ind {
  z-index: 5;
}

.upload-error-info {
  padding: 9px 0;
  text-align: center;
}
.upload-error-info span {
  display: block;
}
.upload-error-info .bigger {
  font-size: 14px;
  margin-bottom: 5px;
}
.upload-error-info .sub-text {
  font-size: 13px;
  color: #B3B5BC;
}

.upload-error-info[hidden] {
  display: none !important;
}

.comm-footer-form[hidden] {
  display: none !important;
}

.uploading {
  position: relative;
}

.upload-bar {
  position: relative;
  background: #fff;
  box-shadow: 0px 1px 0 rgba(17, 16, 13, 0.1);
  border-radius: 5px;
}

.upload-cancel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 42px;
  background: white url("upl-cancel.png") 50% no-repeat;
  cursor: pointer;
  font-size: 12px;
  box-shadow: 1px 1px 0 rgba(17, 16, 13, 0.1);
  border-radius: 0 5px 5px 0;
  color: #505050;
}

.upload-cancel:hover {
  background: url("upl-cancel.png") 50% no-repeat, linear-gradient(to top, #f6f6f6 20.34%, white 120.34%);
}

.upload-cancel:active {
  box-shadow: 0 1px 1px rgba(17, 16, 13, 0.1), inset 1px 1px 5px rgba(17, 16, 13, 0.08);
}

.upload-progress {
  height: 70px;
  line-height: 70px;
  width: 0%;
  background: #fafafa;
  border-radius: 5px 0 0 5px;
}

.upload-text {
  position: absolute;
  top: 27px;
  left: 20px;
  color: #ababab;
}

.uploaded-img {
  position: absolute;
  top: -1px;
  left: -1px;
  height: 45px;
  width: 45px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 0 rgba(17, 16, 13, 0.1);
}

.uploaded-img .cancel {
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #62687F;
}
.uploaded-img .cancel:before {
  content: "";
  display: block;
  position: absolute;
  left: 4px;
  top: 4px;
}

.uploaded-img img {
  max-height: 100%;
  border-radius: 3px;
  overflow-x: hidden;
}

.dz-progress {
  background: green;
}

.dz-upload {
  display: block;
  height: 20px;
  background-color: green;
}

.comments-no-auth {
  display: none;
}
.comments-no-auth__title {
  text-align: center;
  border-bottom: 1px solid #E2E3E8;
  padding: 16px 0;
}
.comments-no-auth__form {
  padding: 40px 40px 35px;
}
.comments-no-auth__btn-post {
  width: 100%;
  margin-bottom: 5px;
}
.comments-no-auth__cansel {
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  max-width: 100px;
  display: block;
  padding: 5px 20px;
}
.comments-no-auth__cansel:hover {
  text-decoration: underline;
}

.comments {
  cursor: default;
  z-index: 11;
  display: none;
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
  width: 341px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 65px rgba(0, 0, 0, 0.2);
}
.comments.user-no-auth .comments-no-auth {
  display: block;
}
.comments.user-no-auth .comments__inner {
  display: none;
}

.comments p:last-child {
  margin-bottom: 0;
}

.comm-footer {
  position: relative;
  overflow: hidden;
  min-height: 65px;
  padding: 18px;
}

.comm-footer-form {
  min-height: 43px;
  position: relative;
  border: 1px solid #E2E3E8;
  border-radius: 6px;
}
.comm-footer-form.dz-drag-hover {
  background-color: #fff;
}
.comm-footer-form.dz-drag-hover .area-wrap,
.comm-footer-form.dz-drag-hover .comm-sbmt,
.comm-footer-form.dz-drag-hover .uploaded-img {
  opacity: 0;
}
.comm-footer-form.dz-drag-hover:before {
  z-index: 1;
}
.comm-footer-form:before {
  content: "Drop!";
  z-index: -1;
  pointer-events: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background-color: #FFF;
  text-align: center;
  padding: 14px 0;
  font-size: 1.15em;
}

.dragging .comm-footer-form,
.dragging-versions .comm-footer-form {
  border-radius: 6px;
  border: 1px solid #E2E3E8;
  background-clip: padding-box;
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(17, 16, 13, 0.1);
}

.dragging .comm-footer-form .area-wrap, .dragging .comm-footer-form .comm-sbmt, .dragging .comm-footer-form .uploaded-img,
.dragging-versions .comm-footer-form .area-wrap,
.dragging-versions .comm-footer-form .comm-sbmt,
.dragging-versions .comm-footer-form .uploaded-img {
  display: none;
}

.dragging .comm-footer-form .dropbox,
.dragging-versions .comm-footer-form .dropbox {
  display: block !important;
}

.with-img .area-wrap {
  margin-left: 48px;
}
.with-img .area-wrap .comment-text {
  width: 213px;
  padding: 12px 35px 12px 14px;
}

.comm-user-pict {
  display: none;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
}

.comm-mark {
  display: none;
  z-index: 1;
  position: absolute;
  top: 1px;
  left: 3px;
  width: 20px;
  height: 26px;
  cursor: pointer;
  opacity: 0.3;
  background-position: -716px -156px;
}

@media only screen and (min-resolution: 144dpi) {
  .comm-mark {
    background-position: -119px -76px;
    background-size: 412.5px 186px;
  }
}
.comm-mark.marked {
  opacity: 1;
  display: block;
}

.comm-head {
  position: relative;
  height: 24px;
  margin-bottom: 11px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.comm-name {
  -ms-flex: 1;
  flex: 1;
  height: 19px;
  padding-right: 59px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  color: #838692;
}

.comment-text-value {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  line-height: 1.5;
  margin-bottom: 12px;
}
.comment-text-value p {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.comment-text-value a {
  color: #47C5A2;
}

.comm-list-wrap {
  max-height: 400px;
  overflow: auto;
  overflow-x: hidden !important;
}

.comment-list {
  border-bottom: 1px solid #E2E3E8;
}
.comment-list:empty {
  border-bottom: none;
}
.comment-list .comment {
  margin: 14px 18px 0;
  position: relative;
  background: white;
  word-wrap: break-word;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E2E3E8;
  /* SHOW COMMENT BTN */
}
.comment-list .comment:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.comment-list .comment.pending .loader-circle--small {
  display: inline-block;
}
.comment-list .comment .loader-circle--small {
  display: none;
}
.comment-list .comment.unreaded .comment-text-value {
  font-weight: 600;
}
.comment-list .comment.unreaded .comment-date {
  color: #47C5A2;
}
.comment-list .comment.hovered .add-bookmarks {
  opacity: 1;
}
.comment-list .comment.hovered .ico-clip-comment {
  opacity: 1;
}
.comment-list .comment.hovered .btn-del-comment {
  opacity: 1;
}
.comment-list .comment:hover .ico-clip-comment,
.comment-list .comment:hover .btn-del-comment {
  opacity: 1;
}
.comment-list .comment:hover .add-bookmarks {
  opacity: 1;
}

.comments .area {
  padding: 12px 83px 12px 14px;
  width: 100%;
  max-height: 150px;
  background-color: #fff;
  border: 0;
  outline: none;
  display: block;
  overflow: auto !important;
}

.comm-sbmt {
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  width: 45px;
  border: 0;
  background-color: #fff;
  cursor: pointer;
  font: 12px "proxima-nova", sans-serif;
  border-radius: 3px;
  padding: 0;
  outline: none;
  color: #505050;
  border: 1px solid #E2E3E8;
  font-size: 0.9em;
}
.comm-sbmt.ready {
  color: #fff;
  background-color: #47C5A2;
  border: 1px solid #47C5A2;
}

.btn-add-reaction {
  display: none;
  cursor: pointer;
  padding: 5px;
  position: absolute;
  top: 9px;
  right: 56px;
}
.btn-add-reaction .ico-smile {
  width: 17px;
  height: 17px;
}

.show-older-comm {
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  padding: 14px 0;
  margin: 0 14px;
  border-bottom: 1px solid #E2E3E8;
}

.current-comment {
  background-color: #ffffe4;
}

.comm-head-btns {
  display: none;
  position: absolute;
  top: -3px;
  right: 0;
}

.comm-user-name {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  align-items: flex-end;
}

.comment-footer {
  position: relative;
  font-size: 0.95em;
}

.comm-viewer {
  position: relative;
  margin-bottom: 15px;
}

.comm-viewer img {
  width: auto !important;
  max-width: 100%;
}

.points .shared_link_image {
  width: auto;
  max-width: 100%;
}

.zoomContainer {
  top: 0 !important;
  left: 0 !important;
}

.sp-wrap {
  display: none;
  position: relative;
  background: #eee;
  z-index: 300;
}

.sp-large {
  position: relative;
  overflow: hidden;
}

.sp-large a img {
  cursor: -webkit-zoom-in;
}

.sp-large a {
  display: inline-block;
}

.sp-thumbs {
  width: 100%;
  text-align: left;
}

.sp-thumbs img {
  width: 50px;
  height: 50px;
}

.sp-thumbs a:link, .sp-thumbs a:visited {
  border: 5px solid #eee;
  display: inline-block;
}

.sp-thumbs a:hover, .sp-thumbs a:active, .sp-current {
  border: 5px solid #222222 !important;
}

.sp-zoom {
  position: absolute;
  left: 0;
  top: 0;
  cursor: zoom;
  cursor: -webkit-zoom-out;
  display: none;
}

/* points controls */
.comm-point-controls {
  background-color: #62687F;
  display: -ms-flexbox;
  display: flex;
  height: 46px;
  border-bottom: 1px solid #E2E3E8;
  font-size: 14px;
  text-align: center;
}
.comm-point-controls .ico-checkbox, .comm-point-controls .context-point .checkbox, .context-point .comm-point-controls .checkbox, .comm-point-controls .point .task-done, .point .comm-point-controls .task-done {
  margin-right: 10px;
}
.comm-point-controls .del-point {
  margin-right: 10px;
  width: 16px;
  height: 18px;
  fill: #B4B9CC;
}

.comm-point-controls-item {
  color: #838692;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}
.point:not(.editable) .comm-point-controls-item.comm-point-controls-item__cl-arr, .point:not(.editable) .comm-point-controls-item.comm-point-controls-item__del {
  display: none;
}

.comm-point-controls-item:active {
  background-color: #f1f1f1;
}

.comm-point-controls-item__done {
  border-radius: 4px 0 0 0;
  border-right: 1px solid #E2E3E8;
}

.comm-point-controls-item__del {
  border-radius: 0 4px 0 0;
  border-left: 1px solid #E2E3E8;
}

#viewport-selection-area-wrap,
.selection-area {
  display: none;
}

#viewport-selection-area-wrap,
#viewport-selection-area,
.selection-area {
  position: absolute;
}

#viewport-selection-area,
.selection-area {
  border: 1px solid #62687F;
  border-radius: 2px;
}
#viewport-selection-area:before,
.selection-area:before {
  content: "";
  border: 1px dashed white;
  display: block;
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  right: -1px;
  z-index: 0;
  border-radius: 2px;
}

.point-selection .selection-area,
#viewport-selection-area-wrap.visible {
  display: block;
}

.cur-resize-4 {
  cursor: ne-resize !important;
}

.cur-resize-3 {
  cursor: nw-resize !important;
}

.cur-resize-2 {
  cursor: se-resize !important;
}

.cur-resize-1 {
  cursor: sw-resize !important;
}

#viewport-selection-area.position1 {
  top: -2px;
  right: -2px;
}
#viewport-selection-area.position2 {
  top: -2px;
  left: -2px;
}
#viewport-selection-area.position3 {
  bottom: -2px;
  right: -2px;
}
#viewport-selection-area.position4 {
  bottom: -2px;
  left: -2px;
}

.selection-area.position1 {
  display: block;
  bottom: 19px;
  left: 19px;
}
.selection-area.position2 {
  display: block;
  bottom: 19px;
  right: 19px;
}
.selection-area.position3 {
  display: block;
  top: 19px;
  left: 19px;
}
.selection-area.position4 {
  display: block;
  top: 19px;
  right: 19px;
}

.page-sign {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  height: auto;
  background: linear-gradient(to bottom, rgb(131, 191, 201) 0%, rgb(197, 229, 216) 100%);
}
.page-sign a {
  font-weight: 300;
}

.entry-forms {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  width: 950px;
  background: #fff;
  color: #2C324A;
  margin: 0 auto;
  border-radius: 4px;
}

.forgot-pass {
  position: relative;
  width: 475px;
  display: block;
  margin: 0 auto;
  color: #2C324A;
  -ms-flex-item-align: baseline;
  align-self: baseline;
  border-radius: 4px;
}

.entry-form-wrap {
  box-shadow: 0 2px 46px rgba(0, 0, 0, 0.07);
  position: relative;
  width: 475px;
  padding: 44px 0 0;
}

.entry-forms .title {
  color: #4B5065;
  font-size: 37px;
  font-weight: 300;
  margin: 0 auto;
  text-align: center;
}

.page-sign .sign-up-h2 {
  font-weight: 200;
  width: 151px;
}

.page-sign .sign-in-h2 {
  font-weight: 200;
  width: 136px;
}

.entry-forms .btn {
  display: inline-block;
  text-align: center;
  background-clip: padding-box;
  text-decoration: none;
}

.entry-forms h4 {
  text-align: center;
}

.entry-forms .text-h4 {
  display: block;
  font-size: 14px;
  color: #BBBECB;
  border-bottom: 1px solid #E2E3E8;
  padding: 10px 0 40px;
}

.entry-forms p {
  text-align: center;
}

.ef--send-mess .sign-logo {
  margin-bottom: 2em;
}
.ef--send-mess .forgot-h2 {
  margin-bottom: 40px;
}
.ef--send-mess .entry-forms-fields {
  width: 60%;
  margin: 0 auto;
  border-top: 1px solid #E2E3E8;
  padding: 40px 0 40px;
  min-height: auto;
}

.social-enter {
  margin-top: 30px;
  border-top: 1px solid #E2E3E8;
  border-bottom: 1px solid #E2E3E8;
  position: relative;
  text-align: center;
}

.btn-back-to-social {
  cursor: pointer;
  padding-top: 12px;
}
.btn-back-to-social .svg-icon {
  width: 14px;
  height: 8px;
  fill: #4B5065;
}

.soc-btn-wrap {
  padding: 20px 0;
}
.soc-btn-wrap .btn {
  max-width: 300px;
  height: 44px;
  width: 100%;
  border-radius: 3px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}
.soc-btn-wrap .btn-google {
  margin: 0 auto;
  background-color: #E74D37;
}
.soc-btn-wrap .btn-google span {
  color: #fff;
  margin-right: 4px;
  font-size: 14px;
}
.soc-btn-wrap .btn-google .svg-icon {
  width: 61px;
  height: 20px;
}
.soc-btn-wrap .btn-google:hover {
  background-color: #e95945;
}
.soc-btn-wrap .btn-facebook .svg-icon {
  width: 93px;
  height: 20px;
}

.entry-forms-title {
  margin: 30px 0 20px;
  font-size: 15px;
}

.entry-forms-form-item {
  position: relative;
  text-align: center;
  margin: 0 0 14px;
}
.entry-forms-form-item .i-text {
  position: relative;
  width: 300px;
  background-color: transparent;
  outline: none;
  border: 1px solid #E2E3E8;
  border-radius: 3px;
  border: 1px solid #EEEEEE;
  padding: 13px;
}
.entry-forms-form-item .i-text:focus {
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.03);
}
.entry-forms-form-item .l-enter {
  transition: 0.2s;
  z-index: 1;
  color: #A9A9A9;
  position: absolute;
  left: 13px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: text;
}

#email-field,
#name-field {
  padding: 13px 90px 13px 13px;
}

.i-text:valid + .l-enter {
  left: 220px;
}

.i-text:focus + .l-enter {
  left: 220px;
}

.entry-forms-form-item .i-text.error {
  border: 1px solid #FFA2A2;
  color: #ff5d50;
}
.entry-forms-form-item .i-text.error::-webkit-input-placeholder {
  color: #ff5d50;
}
.entry-forms-form-item .i-text.error:-moz-placeholder {
  color: #ff5d50;
}
.entry-forms-form-item .i-text.error::-moz-placeholder {
  color: #ff5d50;
}
.entry-forms-form-item .i-text.error:-ms-input-placeholder {
  color: #ff5d50;
}

.entry-forms-form-item .i-sbmt {
  height: 45px;
  width: 300px;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
  outline: none;
  color: white;
  border: none;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.entry-forms-form-item .i-sbmt.btn-green {
  background-color: #47C5A2;
}
.entry-forms-form-item .i-sbmt.btn-green:hover {
  transition: 0.1s;
  background-color: #53c9a8;
}
.entry-forms-form-item .i-sbmt.btn-green:active {
  transition: 0s;
  background-color: #3dc09c;
}

.entry-forms-fields {
  position: relative;
  min-height: 290px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 40px;
}
.entry-forms-fields.eff-hover:hover {
  background-color: #FBFBFB;
}
.entry-forms-fields.eff-hover:hover .i-text:focus {
  background-color: #FFF;
}

.entry-forms-fields h4 {
  margin: 0 0 46px;
}

.entry-forms-btn-login {
  font-size: 15px;
  position: absolute;
  left: 17px;
  top: 17px;
  text-align: center;
}
.entry-forms-btn-login a {
  font-weight: 400;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
  padding: 8px 10px;
  display: inline-block;
  vertical-align: top;
  background-color: #47C5A2;
}

.sign-logo {
  width: 29px;
  height: 31px;
  margin: 0 auto;
}
.sign-logo img {
  max-width: 100%;
}

.devise_error_messages {
  position: absolute;
  top: 0;
  left: 410px;
  background-color: #fff;
  min-width: 290px;
  padding: 20px;
  box-shadow: 0 2px 92px rgba(1, 1, 1, 0.06);
}

.devise_error_messages h2 {
  color: #ff5d50;
  font-size: 17px;
  margin: 0 0 15px;
  font-weight: 400;
  border-bottom: 1px solid #E2E3E8;
  padding-bottom: 12px;
}

.devise_error_messages li + li {
  margin-top: 8px;
}

.devise_error_messages:empty {
  display: none;
}

.eff-footer {
  color: #BBBECB;
  padding: 20px 0;
  border-top: 1px solid #E2E3E8;
}

.sign-in-link {
  margin-left: 7px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

a.sign-in-link {
  color: #fff;
}

.sign-in-link:hover {
  border: 0;
}

.sign-in-link-wrap {
  position: absolute;
  right: 16px;
  top: 0;
}

.p-agree {
  text-align: center;
}

.p-agree a {
  color: #2C324A;
}

.p-agree a:hover {
  text-decoration: none;
}

.page-sign-info-block {
  width: 475px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
}
.page-sign-info-block .ib-title {
  text-align: center;
  line-height: 1.4;
  margin: 75px 0 62px;
  font-size: 18px;
  font-weight: 600;
}

.benefits-list {
  display: block;
  margin: 0 auto;
}
.benefits-list .benefit-item {
  width: 340px;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  padding: 10% 37px;
  border-bottom: 1px solid #E2E3E8;
}
.benefits-list .benefit-item:first-child {
  border-top: 1px solid #E2E3E8;
}
.benefits-list .benefit-item:last-child {
  border-bottom: none;
}
.benefits-list .benefit-item p {
  max-width: 180px;
  text-align: left;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
.benefits-list .ps-icon {
  margin-right: 35px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 62px;
}
.benefits-list .ps-icon img {
  max-width: 100%;
}

.simple-notifer {
  z-index: 1;
  position: fixed;
  left: 0;
  top: -50px;
  right: 0px;
  height: 72px;
  line-height: 71px;
  background-color: rgba(98, 104, 127, 0.7);
  text-align: center;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  font-size: 15px;
  display: none;
}
.simple-notifer__logo-center {
  position: absolute;
  left: 50%;
  bottom: -38%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.simple-notifer--invite {
  position: relative;
  background-color: #62687F;
}
.simple-notifer.visible {
  box-shadow: 0 2px 46px rgba(0, 0, 0, 0.18);
  transform: translate3d(0, 50px, 0);
  display: block;
}
.touch .simple-notifer {
  display: none;
}
.simple-notifer .logo-paper {
  position: absolute;
  left: 16px;
  top: 20px;
  width: 29px;
  display: block;
}
.simple-notifer .logo-paper img {
  max-width: 100%;
}
.simple-notifer .undo-close {
  width: 60px;
  height: 72px;
}

.ref_startup-chat {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: 7px;
}

.ref_d_kabak {
  background-color: #fff;
}
.ref_d_kabak__logo {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: 13px;
}

.corp-pdigest {
  background-image: url("/assets/refs/bg-pdigest.png");
  background-repeat: repeat-x;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}
.corp-pdigest:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 21, 78, 0.54);
}
.corp-pdigest__text {
  position: relative;
  z-index: 5;
  display: inline-block;
  vertical-align: middle;
}

.support-ie {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #62687F;
  text-align: center;
  z-index: 10;
}
.support-ie:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.support-ie__content {
  max-width: 485px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.support-ie__title {
  color: #fff;
  font-size: 24px;
}
.support-ie__desc {
  color: #B5B8C4;
  font-size: 14px;
}
.support-ie h3 {
  margin-bottom: 30px;
}

.tab-main-settings__nav {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #E2E3E8;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.tab-main-settings__item {
  cursor: pointer;
  width: 50%;
  text-align: center;
  padding: 21px 20px 17px;
  border-bottom: 4px solid transparent;
}
.tab-main-settings__item:not(:last-child) {
  border-right: 1px solid #E2E3E8;
}
.tab-main-settings__item.active {
  border-bottom: 4px solid #47C5A2;
}
.tab-main-settings__container .btn-drag-window {
  cursor: move;
  right: 25px;
  top: 15px;
  position: absolute;
  width: 20px;
  height: 19px;
  fill: #B4B9CC;
}
.tab-main-settings__template-inner {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  max-height: 527px;
  min-height: 547px;
  overflow-y: auto;
  padding: 0 40px 40px;
}
.tab-main-settings__template {
  display: none;
  position: relative;
  font-size: 14px;
}
.tab-main-settings__template.scroll:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 0 0 4px 4px;
  height: 38px;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}
.tab-main-settings__template h4 {
  border-bottom: 1px solid #E2E3E8;
  padding-bottom: 15px;
  padding: 28px 0 10px;
  margin-bottom: 30px;
}
.tab-main-settings__template h5 {
  font-size: 1.2em;
  padding: 0.4em 0 0.4em;
}
.tab-main-settings__template p {
  margin-bottom: 10px;
}
.tab-main-settings__template ul {
  margin-bottom: 20px;
}
.tab-main-settings__template ul li {
  line-height: 1.4;
  padding: 3px 0;
}
.tab-main-settings__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.feedback-form {
  min-height: 264px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.feedback-form.success .feedback-form__content {
  display: none;
}
.feedback-form.success .feedback-form__msg {
  display: block;
}
.feedback-form.invalid .feedback-form__text {
  border-color: #ffa2a2;
}
.feedback-form__text {
  margin-bottom: 20px;
  min-height: 262px;
}
.feedback-form__content {
  width: 100%;
}
.feedback-form__msg {
  display: none;
}
.feedback-form__msg-icon {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}
.feedback-form__msg-icon .svg-icon {
  fill: #47C5A2;
  width: 24px;
  height: 24px;
}
.feedback-form__success-msg {
  color: #47C5A2;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.feedback-form-footer {
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px solid #E2E3E8;
}

ul.keyboard-list {
  margin-bottom: 0;
}

.keyboard-list {
  width: 48%;
  display: inline-block;
  vertical-align: top;
}
.keyboard-list__item:not(:last-child) {
  margin-bottom: 10px;
}
.keyboard-list__key {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.keyboard-list__desc {
  font-size: 13px;
  color: #AAADBA;
  margin-bottom: 0 !important;
}

.settings-form .inp-password .text-field {
  padding: 0 9px 0 45px;
}
.settings-form .btn-ico-eye {
  position: absolute;
  bottom: 17px;
  left: 16px;
  width: 16px;
  height: 10px;
}
.settings-form .label-input label {
  margin-bottom: 10px;
}

.upload-userpic {
  cursor: pointer;
  float: right;
  position: relative;
  height: 25px;
  font-size: 14px;
  overflow: hidden;
  padding: 2px;
  text-align: right;
}
.upload-userpic .svg-icon {
  vertical-align: middle;
  width: 11px;
  height: 11px;
}
.upload-userpic:hover .text {
  border-bottom: 1px solid transparent;
}
.userpick {
  margin-right: 5px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.upload-userpic .text {
  vertical-align: middle;
  border-bottom: 1px dashed #62687F;
}

.upload-userpic .file {
  position: absolute;
  font-size: 5em;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}

.user-settings-avatar {
  cursor: pointer;
}

.user-settings-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.delete-account {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 20px;
  padding-top: 10px;
  border-top: solid 1px #E2E3E8;
  margin-bottom: -23px;
}
.delete-account__delete {
  color: #9D9D9D;
  font-family: "proxima-nova";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  text-decoration: none;
}
.delete-account__loader-container {
  display: none;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}
.delete-account__loader-container.show {
  display: -ms-flexbox;
  display: flex;
}
.delete-account__loader {
  width: 15px;
  height: 15px;
  border: 2px solid #2C324A;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.invite-link {
  width: 440px;
  left: 2em;
  top: 2em;
}
.invite-link__header {
  border-radius: 4px 4px 0 0;
  background-color: #6C728A;
  color: #fff;
  padding: 12px 20px;
}
.invite-link__content {
  padding: 20px;
}
.invite-link__link-box {
  margin-bottom: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E2E3E8;
  position: relative;
}
.invite-link__link-box .text-field {
  padding: 0 120px 0 9px;
}
.invite-link__link-box .btn-main {
  position: absolute;
  right: 0;
  top: 0;
}
.invite-link__desc {
  padding: 1px;
  font-size: 13px;
  line-height: 1.3;
  color: #B3B5BC;
}

.new-project {
  padding: 40px;
}
.new-project__header {
  border-bottom: 1px solid #E2E3E8;
  margin-bottom: 40px;
}
.new-project__header h3 {
  padding-bottom: 35px;
}
.new-project__content-bottom {
  padding: 15px 0 0;
  border-top: 1px solid #E2E3E8;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.new-project__list {
  padding-left: 15px;
  margin: 40px 0;
}
.new-project__list li {
  position: relative;
  margin-bottom: 6px;
  font-size: 13px;
}
.new-project__list li:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  left: -15px;
  top: 5px;
  background-color: #47C5A2;
}
.new-project .btn-main {
  text-align: center;
  min-width: 130px;
}
.new-project .btn-main .project-add {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.select-managers {
  width: 364px;
}

.ui-multiselect {
  position: relative;
  border: 1px solid #E2E3E8;
}
.ui-multiselect.ui-state-active .ico-arrow {
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.ui-multiselect span.ui-icon {
  border: 1px solid #E2E3E8;
  position: absolute;
  right: -1px;
  top: -1px;
  width: 45px;
  height: 45px;
  border-radius: 3px;
}
.ui-multiselect span.ui-icon .ico-arrow {
  fill: #B4B9CC;
  display: block;
  margin: 15px auto 0;
}

.ui-multiselect-single .ui-multiselect-checkboxes input {
  position: absolute !important;
  top: auto !important;
  left: -9999px;
}

.ui-multiselect-header {
  display: none;
}

.ui-multiselect-menu {
  display: none;
  position: absolute;
  z-index: 200;
  text-align: left;
}

.ui-multiselect-checkboxes {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  max-height: 329px;
  overflow-y: auto;
}
.ui-multiselect-checkboxes label {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.ui-multiselect-checkboxes label input {
  position: relative;
  outline: none;
  margin: auto 9px;
}

.ui-multiselect-checkboxes li {
  clear: both;
}

.my-select {
  width: 100%;
  text-align: left;
  border-radius: 4px;
  background-clip: padding-box;
  background: #fff;
  cursor: pointer;
}

.my-select.ui-multiselect {
  height: 45px;
  line-height: 32px;
  padding: 0 15px 0 15px;
}

.my-select.ui-multiselect .pict {
  margin: 11px 5px 0 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.my-select.ui-multiselect-menu .pict {
  margin: auto 9px auto 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.select-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 3.15;
}
.select-text .pict {
  display: inline-block;
}

.my-select.ui-multiselect-menu .label-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.my-select.ui-multiselect-menu li {
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  padding: 0 9px;
}

.my-select.ui-multiselect-menu li:first-child {
  border-radius: 4px 4px 0 0;
}

.my-select.ui-multiselect-menu li:last-child {
  border-radius: 0 0 4px 4px;
}

.my-select.ui-multiselect-menu li:only-child {
  border-radius: 4px;
}

.my-select.ui-multiselect-menu li:hover {
  background-color: #F9F9F9;
}

.my-select.ui-multiselect-menu li + li {
  border-top: 1px solid #E2E3E8;
}

.my-select.ui-state-disabled .select-text {
  opacity: 0.4;
}
.my-select.ui-state-disabled .ico-arrow {
  opacity: 0.4;
}

.emoji-popup {
  padding: 14px;
  width: 177px;
}

.emoji-list {
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #E2E3E8;
}
.emoji-list:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.emoji-item {
  display: inline-block;
  margin-left: -0.25em;
  cursor: default;
  padding: 2px;
}
.emoji-item:hover {
  background-color: #eee;
}

.emoji {
  display: none;
  cursor: default;
  color: transparent;
  width: 1.5em;
  height: 1.5em;
}

.wrap-emoji-popup {
  position: relative;
}

.introjs-overlay {
  position: absolute;
  z-index: 999999;
  background-color: #000;
  opacity: 0;
  background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#66000000",endColorstr="#e6000000",GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  transition: all 0.3s ease-out;
}

.introjs-fixParent {
  z-index: auto !important;
  opacity: 1 !important;
  position: absolute !important;
  -ms-transform: none !important;
  transform: none !important;
}

.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  z-index: 9999999 !important;
}

.introjs-disableInteraction {
  z-index: 99999999 !important;
  position: absolute;
}

.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  position: relative;
}

.introjs-helperLayer {
  position: absolute;
  z-index: 9999998;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #777;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-out;
}

.introjs-tooltipReferenceLayer {
  position: absolute;
  visibility: hidden;
  z-index: 50;
  background-color: transparent;
  transition: all 0.3s ease-out;
}

.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

.introjs-helperNumberLayer {
  position: absolute;
  visibility: visible;
  top: -16px;
  left: -16px;
  z-index: 9999999999 !important;
  padding: 2px;
  font-family: Arial, verdana, tahoma;
  font-size: 13px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  background: #ff3019; /* Old browsers */ /* Chrome10+,Safari5.1+ */ /* Chrome,Safari4+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 3px solid white;
  border-radius: 50%;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3019", endColorstr="#cf0404", GradientType=0); /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.introjs-arrow {
  display: none !important;
  border: 5px solid white;
  content: "";
  position: absolute;
}

.introjs-tooltip {
  transition: opacity 0.1s ease-out;
}

.introjs-tooltipbuttons {
  text-align: right;
  white-space: nowrap;
}

/*
 Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
 Changed by Afshin Mehrabani
*/
.introjs-button {
  display: inline-block;
  position: relative;
  padding: 0.3em 0.8em;
  margin: 0;
  margin-right: 16px;
  color: #47C5A2;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  margin-left: 100px;
  border-radius: 2px;
  margin-top: 5px;
  /* IE hacks */
  zoom: 1;
  *display: inline;
}

/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.introjs-skipbutton {
  margin-right: 5px;
  color: #7a7a7a;
}

.introjs-prevbutton {
  border-radius: 0.2em 0 0 0.2em;
  border-right: none;
}

.introjs-nextbutton {
  border-radius: 0 0.2em 0.2em 0;
}

.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
  color: #9a9a9a;
  border-color: #d4d4d4;
  box-shadow: none;
  cursor: default;
  background-color: #f4f4f4;
  background-image: none;
  text-decoration: none;
}

.introjs-bullets {
  text-align: center;
}

.introjs-bullets ul {
  clear: both;
  margin: 15px auto 0;
  padding: 0;
  display: inline-block;
}

.introjs-bullets ul li {
  list-style: none;
  float: left;
  margin: 0 2px;
}

.introjs-bullets ul li a {
  display: block;
  width: 6px;
  height: 6px;
  background: #ccc;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
}

.introjs-bullets ul li a:hover {
  background: #999;
}

.introjs-bullets ul li a.active {
  background: #999;
}

.introjs-progress {
  overflow: hidden;
  height: 10px;
  margin: 10px 0 5px 0;
  border-radius: 4px;
  background-color: #ecf0f1;
}

.introjs-progressbar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  background-color: #08c;
}

.introjsFloatingElement {
  position: absolute;
  height: 0;
  width: 0;
  left: 50%;
  top: 50%;
}

.introjs-fixedTooltip {
  position: fixed;
}

.introjs-hint {
  position: absolute;
  background: transparent;
  width: 20px;
  height: 15px;
}

.introjs-hidehint {
  display: none;
}

.introjs-fixedhint {
  position: fixed;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 52;
  overflow: hidden;
  position: fixed;
  background: #4B5065;
  opacity: 0.9;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 53;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 55;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 54;
}
.mfp-preloader a {
  color: #CCC;
}
.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 56;
  box-shadow: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  position: absolute;
  right: -40px;
  top: -40px;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 14px;
  fill: #FFF;
  cursor: pointer;
}
.mfp-close .svg-icon {
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.mfp-close:hover, .mfp-close:focus {
  opacity: 1;
}
.mfp-close:active {
  -ms-transform: translateY(1px);
  transform: translateY(1px);
}

.mfp-close-btn-in .mfp-close {
  color: #fff;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.mfp-arrow:active {
  margin-top: -54px;
}
.mfp-arrow:hover, .mfp-arrow:focus {
  opacity: 1;
}
.mfp-arrow:before, .mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}
.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}
.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}
.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}
.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}
.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}
.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}
.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}
.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}
.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
   * Remove all paddings around the image on small screen
   */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -ms-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -ms-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -ms-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
.atwho-view {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  margin-top: 18px;
  background: white;
  box-shadow: 0 2px 46px rgba(109, 109, 109, 0.18);
  border-radius: 4px;
  min-width: 120px;
  z-index: 11110 !important;
}

.atwho-view .atwho-header {
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  border-bottom: solid 1px #eaeff1;
  color: #6f8092;
  font-size: 11px;
  font-weight: bold;
}

.atwho-view .atwho-header .small {
  color: #6f8092;
  float: right;
  padding-top: 2px;
  margin-right: -5px;
  font-size: 12px;
  font-weight: normal;
}

.atwho-view .atwho-header:hover {
  cursor: default;
}

.atwho-view .cur {
  background-color: #62687F;
  color: white;
}

.atwho-view .cur small {
  color: white;
}

.atwho-view strong {
  color: #3366FF;
}

.atwho-view .cur strong {
  color: white;
  font: bold;
}

.atwho-view ul {
  list-style: none;
  padding: 0;
  margin: auto;
  max-height: 245px;
  overflow-y: auto;
}

.atwho-view ul li {
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  padding: 8px 14px;
  -ms-flex-align: center;
  align-items: center;
}
.atwho-view ul li:first-child {
  margin-top: 6px;
}
.atwho-view ul li:last-child {
  margin-bottom: 6px;
}

.atwho-view small {
  font-size: smaller;
  color: #777;
  font-weight: normal;
}

.atwho-ava {
  margin-right: 6px;
  width: 20px;
  height: 20px;
}
.atwho-ava img {
  max-width: 100%;
}

.system-banner {
  padding: 0 40px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  z-index: 1;
  color: #fff;
  background-size: 600% 600%;
  position: relative;
  min-height: 72px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: linear-gradient(270deg, #b59cff, #6190f6, #ca7bff);
  background-size: 600% 600%;
  animation: AnimationName 11s ease infinite;
}
.system-banner__content {
  font-size: 14px;
  text-align: center;
}
.system-banner__btn-close {
  margin-right: 11px;
  cursor: pointer;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 56px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.system-banner__btn-close .svg-icon {
  fill: #fff;
}
.system-banner a {
  color: #fff;
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.no-auth.temporary .no-auth-panel {
  display: -ms-flexbox;
  display: flex;
}

.no-auth-panel {
  z-index: 2;
  display: none;
  background-color: #fff;
  position: relative;
  box-shadow: 0px 5px 20px rgba(49, 54, 71, 0.2);
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 4px 20px;
}
.no-auth-panel__logo {
  display: -ms-flexbox;
  display: flex;
}
.no-auth-panel__logo .main-logo {
  width: 26px;
  height: 28px;
}
.no-auth-panel__logo-text {
  width: 102px;
  height: 10px;
}
.no-auth-panel__logo-name {
  padding-left: 15px;
}
.no-auth-panel__logo-sub-title {
  color: #62687F;
  font-size: 0.7rem;
  line-height: 1;
}

.btn-download-app {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  background-color: #377DFF;
  border-radius: 3px;
  height: 38px;
  padding: 0 18px;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn-download-app__icons {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #055cff;
}
.btn-download-app__title {
  color: #fff;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  position: relative;
  top: 1px;
}
.btn-download-app .ico-h-mac {
  width: 15px;
  height: 18px;
}
.btn-download-app .ico-h-windows {
  width: 15px;
  height: 15px;
}
/*# sourceMappingURL=main.css.map */