@charset "UTF-8";
:root {
  --pad: 16px;
  --pad-1-2: calc(var(--pad) / 2);
  --pad-1-4: calc(var(--pad) / 4);
  --pad-4: calc(var(--pad) * 4);
  --app-color: var(--ga-app-color);
  --app-color-hover: var(--ga-app-color-hover);
  --app-color-lightbg: var(--ga-app-color-lightbg);
  --app-text-color: #10161F;
  --app-text-color-inverted: #ffffff;
  --app-grey: #62708b;
  --app-grey-hover: #4d586d;
  --app-light-grey: #dbe1ed;
  --app-lightest-grey: #f2f4f6;
  --app-green: var(--rt-app-color);
  --app-green-hover: var(--rt-app-color-hover);
  --app-red: #D23031;
  --app-red-hover: #801c1c;
  --app-light-red: #ffd7d9;
  --app-light-red-hover: #ffbdc0;
  --app-light-green: #f5fbeb;
  --app-dark-grey: #27334c;
  --app-yellow: #b28800;
  --app-light-yellow: #ffe7c7;
  --app-light-yellow-hover: #ffd284;
  --overlay-mask-color: #020e25cc;
  --app-header-color: var(--app-text-color);
  --app-selection-color: var(--app-dark-grey);
  --app-success-color: #00A35A;
  --box-shadow-dark-border: 0 1px 1px #020e2570;
  --box-shadow-dark-large: 0 25px 35px #020e2570;
  --box-shadow-light-border: 0 1px 1px #020e2515;
  --box-shadow-light-large: 0 20px 40px rgba(0, 0, 0, 0.08);
  --box-shadow-light-small: 0 2px 4px #020e2540;
  --box-shadow-green-large: 0 25px 35px #00835280;
  --border-radius: 6px;
  --border-radius-sm: 4px;
  --border-radius-lg: 10px;
  --border-color-i2: #C0C7D5;
  --border-color-i3: #B0B9CB;
  --drop-shadow-i1-sm: 0px 2px 4px rgba(0, 0, 0, 0.08);
  --drop-shadow-i1:  0px 10px 20px rgba(0, 0, 0, 0.08);
  --drop-shadow-i1-lg: 0px 20px 40px rgba(0, 0, 0, 0.08);
  --drop-shadow-i2-sm: 0px 2px 4px rgba(0, 0, 0, 0.16);
  --drop-shadow-i2:  0px 10px 20px rgba(0, 0, 0, 0.16);
  --drop-shadow-i2-lg: 0px 20px 40px rgba(0, 0, 0, 0.16);
  --drop-shadow-i3-sm: 0px 2px 4px rgba(0, 0, 0, 0.32);
  --drop-shadow-i3:  0px 10px 20px rgba(0, 0, 0, 0.32);
  --drop-shadow-i3-lg: 0px 20px 40px rgba(0, 0, 0, 0.32);
  --input-border-width: 1px;
  --input-border-width-hover: 1px;
  --input-border-width-focus: 2px;
  --input-border-color: var(--border-color-i2);
  --input-border-color-hover: var(--border-color-i3);
  --input-padding-x: 16px;
  --input-padding-y: 9px;
  --input-padding-x-sm: 12px;
  --input-padding-y-sm: 5px;
  --input-padding-x-lg: 16px;
  --input-padding-y-lg: 12px;
  --input-height: 40px;
  --input-height-sm: 32px;
  --input-height-lg: 48px;
  --input-font-size: 14px;
  --input-font-size-sm: 14px;
  --input-font-size-lg: 16px;
  --deadline-color-past: var(--app-red);
  --deadline-color-past-light: var(--app-light-red);
  --deadline-color-past-light-hover: var(--app-light-red-hover);
  --deadline-color-now: var(--app-yellow);
  --deadline-color-now-light: var(--app-light-yellow);
  --deadline-color-now-light-hover: var(--app-light-yellow-hover);
  --deadline-color-near: var(--app-grey);
  --deadline-color-near-light: #e3e7ec;
  --deadline-color-near-light-hover: #d4dbe1;
  --tag-color0: var(--app-grey);
  --tag-color1: #ffb200;
  --tag-color2: #409dff;
  --tag-color3: #22caff;
  --tag-color4: #78bacb;
  --tag-color5: #19ccc3;
  --tag-color6: #00d474;
  --tag-color7: #86d400;
  --tag-color8: #cfc602;
  --tag-color9: #f2a63f;
  --tag-color10: #be7b40;
  --tag-color11: #cb8b8b;
  --tag-color12: #f75757;
  --tag-color13: #f6339e;
  --tag-color14: #a143d1;
  --tag-color15: #6d43d1;
  --ga-app-color: #86d400;
  --ga-app-color-hover: #76bb00;
  --ga-app-color-lightbg: #edffe1;
  --rt-app-color: #00d485;
  --rt-app-color-hover: #00bb75;
  --rt-app-color-lightbg: #e8fff0;
  --ct-app-color: #00c8fd;
  --ct-app-color-hover: #00b4e4;
  --ct-app-color-lightbg: #ecfaff;
  --mt-app-color: #83cd00;
  --mt-app-color-hover: #73b400;
  --mt-app-color-lightbg: #edffe1;
  --ft-app-color: #7c47ff;
  --ft-app-color-hover: #6a2eff;
  --ft-app-color-lightbg: #f4f2ff;
  --mm-app-color: #f75740;
  --mm-app-color-hover: #f64128;
  --mm-app-color-lightbg: #fef1f0;
  --cp-app-color: #004db1;
  --cp-app-color-hover: #004298;
  --cp-app-color-lightbg: #eff6ff;
}

html[data-routegroup=grouweapps],
html[data-theme=grouweapps] {
  --app-color: var(--ga-app-color);
  --app-color-hover: var(--ga-app-color-hover);
  --app-color-lightbg: var(--ga-app-color-lightbg);
}

html[data-routegroup=realtask],
html[data-theme=realtask] {
  --app-color: var(--rt-app-color);
  --app-color-hover: var(--rt-app-color-hover);
  --app-color-lightbg: var(--rt-app-color-lightbg);
}

html[data-routegroup=checktask],
html[data-theme=checktask] {
  --app-color: var(--ct-app-color);
  --app-color-hover: var(--ct-app-color-hover);
  --app-color-lightbg: var(--ct-app-color-lightbg);
}

html[data-routegroup=mindtask],
html[data-theme=mindtask] {
  --app-color: var(--mt-app-color);
  --app-color-hover: var(--mt-app-color-hover);
  --app-color-lightbg: var(--mt-app-color-lightbg);
}

html[data-routegroup=flowtask],
html[data-theme=flowtask] {
  --app-color: var(--ft-app-color);
  --app-color-hover: var(--ft-app-color-hover);
  --app-color-lightbg: var(--ft-app-color-lightbg);
}

html[data-routegroup=meetingminutes],
html[data-theme=meetingminutes] {
  --app-color: var(--mm-app-color);
  --app-color-hover: var(--mm-app-color-hover);
  --app-color-lightbg: var(--mm-app-color-lightbg);
}

html[data-routegroup=checkproject],
html[data-theme=checkproject] {
  --app-color: var(--cp-app-color);
  --app-color-hover: var(--cp-app-color-hover);
  --app-color-lightbg: var(--cp-app-color-lightbg);
}

@font-face {
  font-family: Silka;
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/Silka-Light.woff2) format("woff2");
}

@font-face {
  font-family: Silka;
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Silka-Regular.woff2) format("woff2");
}

@font-face {
  font-family: Silka;
  font-style: italic;
  font-weight: normal;
  src: url(../fonts/Silka-Italic.woff2) format("woff2");
}

@font-face {
  font-family: Silka;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Silka-Medium.woff2) format("woff2");
}

@font-face {
  font-family: SilkaMedium;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Silka-Medium.woff2) format("woff2");
}

@font-face {
  font-family: Silka;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Silka-Bold.woff2) format("woff2");
}

@font-face {
  font-family: SilkaBold;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Silka-Bold.woff2) format("woff2");
}

@font-face {
  font-family: Silka;
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/Silka-Black.woff2) format("woff2");
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  background: var(--app-lightest-grey);
  word-wrap: break-word;
  word-wrap: hyphens;
  overflow-wrap: break-word;
  overflow-wrap: hyphens;
  color: var(--app-text-color);
}

html {
  height: 100%;
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: auto;
}

html, iframe, img, video {
  -webkit-filter: unset !important;
}

html, body, input, textarea, button, select {
  font-family: Silka, sans-serif;
  font-size: 14px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  html, body, input, textarea, button, select {
    font-size: 12px;
  }
}

body.safari {
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-grey) var(--app-light-grey);
}

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

*::-webkit-scrollbar-track {
  background: var(--app-light-grey);
}

*::-webkit-scrollbar-thumb {
  background: var(--app-grey);
}

*, *::before, *::after {
  box-sizing: border-box;
}

input {
  font-weight: 500;
}

input, textarea {
  border-radius: 0;
  -webkit-appearance: none;
}

::placeholder {
  color: var(--app-grey);
  opacity: 1;
  font-weight: normal;
}

*:hover::placeholder,
*:focus::placeholder {
  color: var(--app-light-grey);
  font-weight: normal;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

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

.loading-mask.loading::after {
  content: '';
  position: absolute;
  left: calc(50% - 13px);
  top: calc(50% - 13px);
  border: 2px solid var(--app-grey);
  border-top-color: transparent;
  border-left-color: transparent;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  animation: spinner 0.6s infinite linear;
  z-index: 21;
}

.list {
  position: relative;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) var(--app-lightest-grey);
}

.list::-webkit-scrollbar {
  width: 6px;
}

.list::-webkit-scrollbar-track {
  background: var(--app-lightest-grey);
}

.list::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.list .list-item {
  margin-bottom: 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--box-shadow-light-border);
}

.list .list-empty {
  padding: var(--pad);
  margin-top: var(--pad-4);
  text-align: center;
  font-size: 32px;
  color: var(--app-grey);
  text-shadow: #fff 0px 1px 1px;
}

.list.list-selectable .list-item {
  cursor: pointer;
}

.list.list-selectable .list-item:hover {
  box-shadow: var(--box-shadow-dark-border);
  background: var(--app-light-grey);
}

.list.list-selectable .list-item.selected {
  box-shadow: var(--box-shadow-light-small);
  background: var(--app-light-yellow);
}

.toolbar {
  display: flex;
  align-items: center;
}

.toolbar > *:not(:last-child) {
  margin-right: 10px;
}

.toolbar > .filler {
  flex: 1;
}

.toolbar input {
  padding: 12px 20px 12px;
  border-radius: 6px;
  font-weight: 500;
  border: 1px solid var(--app-light-grey);
  line-height: 1;
}

.toolbar .split-button-left {
  margin-right: 0;
  border-radius: 6px 0 0 6px;
  border-right: 0;
}

.toolbar .split-button-right {
  border-radius: 0 6px 6px 0;
}

.toolbar .split-button-center {
  border-radius: 0;
  border-right: 0;
  margin-right: 0;
}

.toolbar .split-button-left,
.toolbar .split-button-center,
.toolbar .split-button-right {
  box-shadow: none;
}

.toolbar .split-button-left.selected,
.toolbar .split-button-center.selected,
.toolbar .split-button-right.selected {
  background: var(--app-text-color);
  border-color: var(--app-text-color);
  color: #fff;
}

.toolbar .split-button-left:not(.selected),
.toolbar .split-button-center:not(.selected),
.toolbar .split-button-right:not(.selected) {
  background: transparent;
  border-color: var(--app-light-grey);
  color: var(--app-text-color);
}

.search-active {
  background: var(--app-light-yellow);
}

.query-highlight {
  background: var(--app-light-yellow);
  color: var(--app-text-color);
}

.query-highlight-active {
  background: var(--app-light-yellow);
  outline: 1px solid var(--app-yellow);
  color: var(--app-text-color);
  z-index: 1;
}

.tooltip {
  position: absolute;
  pointer-events: none;
  padding: 8px 10px 10px;
  min-width: 50px;
  max-width: 200px;
  border-radius: 3px;
  background-color: var(--app-text-color);
  color: #fff;
  text-align: center;
  word-wrap: break-word;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  z-index: 99000;
  transition: opacity .2s;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.75));
  white-space: pre-wrap;
}

.tooltip:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -4.5px;
  border: 3px solid transparent;
  transform-origin: 0 0;
  transform: rotate(-45deg);
}

.tooltip.top:after {
  bottom: -6px;
  border-bottom-color: var(--app-text-color);
  border-left-color: var(--app-text-color);
}

.tooltip.bottom:after {
  top: 0;
  border-top-color: var(--app-text-color);
  border-right-color: var(--app-text-color);
}

.date-picker {
  width: 325px;
  padding: 30px;
  background: #fff;
  box-shadow: var(--box-shadow-dark-large);
  border-radius: 3px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .date-picker {
    width: 286px;
  }
}

.date-picker .close-icon {
  width: 40px;
  height: 40px;
  top: 0px;
  right: 0px;
  cursor: pointer;
  position: relative;
  position: absolute;
}

.date-picker .close-icon::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/cross-mark2.svg") center center / 11.1px 11.1px no-repeat;
  mask: url("../images/icons/cross-mark2.svg") center center / 11.1px 11.1px no-repeat;
}

.date-picker .close-icon:hover {
  opacity: 0.6;
}

.date-picker .manual-inputs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.date-picker .manual-inputs * {
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}

.date-picker .manual-inputs > * {
  background: transparent;
  outline: none;
  padding-bottom: 10px;
  border: 0;
  border-bottom: 1px solid var(--app-light-grey);
}

.date-picker .manual-inputs > [data-gw=DateField] {
  width: 150px;
}

.date-picker .manual-inputs > [data-gw=TimeField] {
  width: 85px;
}

.date-picker .manual-inputs .date-field-native, .date-picker .manual-inputs .time-field-native {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
}

.date-picker .manual-inputs .date-field-native > input, .date-picker .manual-inputs .time-field-native > input {
  flex: 1 0 0px;
  min-width: 0;
  border: 0;
  padding: 5px 2px 10px 2px;
  background: #fff;
}

.date-picker .manual-inputs .date-field-native > input:focus, .date-picker .manual-inputs .time-field-native > input:focus {
  outline: 0;
}

.date-picker .manual-inputs .date-field-native > input::-webkit-clear-button, .date-picker .manual-inputs .time-field-native > input::-webkit-clear-button {
  display: none;
}

.date-picker .manual-inputs .date-field-native > .placeholder, .date-picker .manual-inputs .time-field-native > .placeholder {
  top: 7px;
  left: 2px;
}

.date-picker .manual-inputs .date-field-native > .placeholder .text, .date-picker .manual-inputs .time-field-native > .placeholder .text {
  font-weight: normal;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .date-picker .manual-inputs * {
    font-size: 16px;
  }
  .date-picker .manual-inputs > [data-gw=DateField] {
    width: 130px;
  }
  .date-picker .manual-inputs > [data-gw=TimeField] {
    width: 85px;
  }
}

.date-picker .month-bar {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
}

.date-picker .month-bar .roll-left {
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}

.date-picker .month-bar .roll-left::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/angle-left.svg") center center / 7.8065px 14.313px no-repeat;
  mask: url("../images/icons/angle-left.svg") center center / 7.8065px 14.313px no-repeat;
}

.date-picker .month-bar .roll-right {
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}

.date-picker .month-bar .roll-right::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/angle-right.svg") center center / 7.8065px 14.313px no-repeat;
  mask: url("../images/icons/angle-right.svg") center center / 7.8065px 14.313px no-repeat;
}

.date-picker .month-bar .roll-left, .date-picker .month-bar .roll-right {
  opacity: 0.7;
}

.date-picker .month-bar .roll-left:hover, .date-picker .month-bar .roll-right:hover {
  opacity: 1;
}

.date-picker .month-bar .current {
  font-weight: 500;
  font-size: 16px;
  flex: 1;
  text-align: center;
}

.date-picker .calendar {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.date-picker .calendar table {
  position: relative;
  left: -12px;
  border-spacing: 3px;
  margin: auto;
}

.mobile-ui .date-picker .calendar table {
  left: 0;
}

.date-picker .calendar table .cell {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 50px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .date-picker .calendar table .cell {
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
}

.date-picker .calendar table .cell-head {
  font-weight: 500;
  color: var(--app-grey);
}

.date-picker .calendar table .cell-body {
  font-weight: 400;
  cursor: pointer;
}

.date-picker .calendar table .cell-body.out-of-month {
  color: var(--app-grey);
  opacity: 0.4;
}

.date-picker .calendar table .cell-body.today {
  border-color: var(--app-grey);
}

.date-picker .calendar table .cell-body:hover {
  background-color: var(--app-light-grey);
}

.date-picker .calendar table .cell-body.selected {
  background-color: var(--app-color);
  opacity: 1;
  color: #fff;
}

.date-picker .calendar table .cell-body.deadline-past {
  background: var(--deadline-color-past);
  color: #fff;
}

.date-picker .buttons {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.date-picker .buttons .today, .date-picker .buttons .trash {
  margin-right: 10px;
}

.mobile-ui .date-picker .buttons .save {
  flex: 1;
}

.date-picker .message {
  text-align: center;
}

.date-picker .message.deadline-past {
  color: var(--deadline-color-past);
}

.button,
button {
  border-radius: 100px;
  padding: var(--button-pad) calc(2 * var(--button-pad));
  margin: 0;
  text-align: center;
  line-height: 1;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: all .15s;
  color: var(--button-color-text);
  border: 1px solid var(--button-color);
  background-color: var(--button-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  --button-icon-only-size: 40px;
  --button-pad: 12px;
  --button-color: var(--app-color);
  --button-color-text: var(--app-text-color);
  --button-color-hover: var(--app-color-hover);
  --button-color-disabled: var(--app-light-grey);
  --button-color-text-disabled: var(--app-grey);
  --button-spinner-size: 16px;
}

.button .icon,
button .icon {
  --color: var(--button-color-text);
}

.button .icon:last-child,
button .icon:last-child {
  margin-left: calc(var(--button-pad) * 3 / 4);
}

.button .icon:first-child,
button .icon:first-child {
  margin-right: calc(var(--button-pad) * 3 / 4);
}

.button.green,
button.green {
  --button-color: var(--app-green);
  --button-color-hover: var(--app-green-hover);
}

.button.light-red,
button.light-red {
  --button-color: var(--app-light-red);
  --button-color-text: var(--app-red);
  --button-color-hover: var(--app-light-red-hover);
}

.button.red,
button.red {
  --button-color: var(--app-red);
  --button-color-text: var(--app-text-color-inverted);
  --button-color-hover: var(--app-red-hover);
}

.button:hover,
button:hover {
  border-color: var(--button-color-hover);
  background-color: var(--button-color-hover);
}

.button:disabled,
button:disabled {
  cursor: default;
  background-color: var(--button-color-disabled);
  border-color: var(--button-color-disabled);
  --button-color-text: var(--button-color-text-disabled);
}

.button.secondary,
button.secondary {
  background-color: transparent;
  border-color: var(--app-light-grey);
  --button-color-text: var(--app-text-color);
}

.button.secondary.green,
button.secondary.green {
  --button-color-text: var(--app-green);
}

.button.secondary.light-red, .button.secondary.red,
button.secondary.light-red,
button.secondary.red {
  --button-color-text: var(--app-red);
}

.button.secondary:hover,
button.secondary:hover {
  border-color: var(--app-grey);
}

.button.secondary:disabled,
button.secondary:disabled {
  --button-color-text: var(--app-grey);
  border-color: var(--app-light-grey);
}

.button.tertiary,
button.tertiary {
  background: none;
  border-color: transparent;
  --button-color-text: var(--app-text-color);
}

.button.tertiary.green,
button.tertiary.green {
  --button-color-text: var(--app-green);
}

.button.tertiary.light-red, .button.tertiary.red,
button.tertiary.light-red,
button.tertiary.red {
  --button-color-text: var(--app-red);
}

.button.tertiary:not(:disabled):hover,
button.tertiary:not(:disabled):hover {
  text-decoration: underline;
}

.button.tertiary:disabled,
button.tertiary:disabled {
  --button-color-text: var(--app-grey);
}

.button.size-small,
button.size-small {
  --button-pad: 8px;
  --button-icon-only-size: 30px;
  --button-spinner-size: 12px;
  font-size: 12px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .button.size-small-when-vp-compact,
button.size-small-when-vp-compact {
    --button-pad: 8px;
    --button-icon-only-size: 30px;
    --button-spinner-size: 12px;
    font-size: 12px;
  }
}

.button.size-big,
button.size-big {
  --button-icon-only-size: 50px;
  --button-pad: 15px;
  --button-spinner-size: 26px;
  font-size: 18px;
  min-width: 180px;
}

.button.size-big .icon,
button.size-big .icon {
  width: calc(1.5 * var(--width));
  height: calc(1.5 * var(--height));
}

.button.icon-only,
button.icon-only {
  width: var(--button-icon-only-size);
  height: var(--button-icon-only-size);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: none;
  padding: 0;
  min-width: 0;
}

.button.icon-only .icon,
button.icon-only .icon {
  margin: 0;
}

.button.working,
button.working {
  position: relative;
  color: transparent;
}

.button.working .icon,
button.working .icon {
  --color: transparent;
}

.button.working::after,
button.working::after {
  content: '';
  position: absolute;
  left: calc(50% - var(--button-spinner-size) / 2);
  top: calc(50% - var(--button-spinner-size) / 2);
  border: 2px solid var(--button-color-text);
  border-top-color: transparent;
  border-left-color: transparent;
  width: var(--button-spinner-size);
  height: var(--button-spinner-size);
  border-radius: 50%;
  animation: spinner 0.6s infinite linear;
}

.button.shaking,
button.shaking {
  animation: shaker .15s linear;
  transform-origin: 50% 50%;
}

@keyframes shaker {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(3px, 0);
  }
  75% {
    transform: translate(-3px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--app-light-grey);
  padding: 8px;
  font-size: 12px;
  color: var(--app-text-color);
}

.icon-button .icon {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  --color: var(--app-text-color);
}

.icon-button:hover {
  border-color: var(--app-grey);
  background: #fff;
}

.form-field {
  position: relative;
}

.form-field:not(:last-child) {
  margin-bottom: 16px;
}

.form-field > label {
  font-size: 14px;
  --color: var(--app-text-color);
  line-height: 21px;
  display: block;
  margin-bottom: var(--pad-1-4);
  font-weight: 500;
}

.form-field > .validity-mark {
  display: none !important;
  right: 0;
  top: calc(50% - 12px);
  width: 23px;
  height: 23px;
  border-radius: 23px;
  border: 1px solid transparent;
  background: #fff;
  z-index: 5;
}

.form-field.valid:not(.active) .validity-mark {
  display: block;
  position: relative;
  position: absolute;
  border-color: var(--app-light-grey);
}

.form-field.valid:not(.active) .validity-mark::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-light-grey);
  -webkit-mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
  mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
}

.form-field.valid.immediate-valid-mark.active .validity-mark {
  display: block;
  position: relative;
  position: absolute;
  border-color: var(--app-green);
}

.form-field.valid.immediate-valid-mark.active .validity-mark::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-green);
  -webkit-mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
  mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
}

.form-field.invalid:not(.active) .validity-mark {
  display: block;
  position: relative;
  position: absolute;
  border-color: var(--app-red);
}

.form-field.invalid:not(.active) .validity-mark::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-red);
  -webkit-mask: url("../images/icons/cross-mark2.svg") center center / 7.77px 7.77px no-repeat;
  mask: url("../images/icons/cross-mark2.svg") center center / 7.77px 7.77px no-repeat;
}

.form-field textarea {
  height: 21px;
}

.form-field input, .form-field textarea {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--app-text-color);
  outline: none;
  transition: all .15s;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .form-field input, .form-field textarea {
    font-size: 12px;
  }
}

.form-field input::placeholder, .form-field textarea::placeholder {
  transition: color .15s;
  color: #5F708E;
}

.form-field input:hover::placeholder, .form-field input:focus::placeholder, .form-field textarea:hover::placeholder, .form-field textarea:focus::placeholder {
  color: #808FAA;
}

.form-field input:hover, .form-field textarea:hover {
  --input-border-color: var(--input-border-color-hover);
}

.form-field input:focus, .form-field textarea:focus {
  --input-border-color: var(--app-color);
  --input-border-width: var(--input-border-width-focus);
}

.form-field input:invalid, .form-field textarea:invalid {
  --input-border-color: var(--app-red);
  --input-border-width: var(--input-border-width-focus);
}

.form-field input:-webkit-autofill, .form-field input:-webkit-autofill:hover, .form-field input:-webkit-autofill:focus, .form-field input:-webkit-autofill:active, .form-field textarea:-webkit-autofill, .form-field textarea:-webkit-autofill:hover, .form-field textarea:-webkit-autofill:focus, .form-field textarea:-webkit-autofill:active {
  box-shadow: 0 0 0 var(--input-border-width) var(--input-border-color), 0 0 0 50px #fff inset;
}

.form-field input {
  height: var(--input-height);
}

.form-field input.size-small {
  --input-height: var(--input-height-sm);
}

.form-field input.size-large {
  --input-height: var(--input-height-lg);
}

.form-field textarea {
  min-height: var(--input-height);
}

.form-field .password-field {
  --button-eye-size: calc( var(--input-height) / 1.25 );
  position: relative;
}

.form-field .password-field > input {
  padding-right: calc( var(--button-eye-size) + (var(--button-eye-size) / 4));
}

.form-field .password-field > input + button {
  width: var(--button-eye-size);
  height: var(--button-eye-size);
  position: absolute;
  right: calc( var(--button-eye-size) / 8);
  top: 50%;
  transform: translateY(-50%);
}

.form-field .password-field > input + button svg {
  width: 16px;
  height: 16px;
}

.form-buttons {
  margin-top: 32px;
  text-align: center;
}

.mask-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--overlay-mask-color);
}

.mask-overlay > .pad-top {
  flex: 1;
}

.mask-overlay > .pad-bottom {
  flex: 6;
}

.mobile-mask-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  background: var(--overlay-mask-color);
}

.mobile-mask-overlay.align-left {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

.mobile-mask-overlay.align-left > * {
  height: 100%;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  max-width: calc(100% - 75px);
  overflow: auto;
  position: relative;
}

.mobile-mask-overlay.align-bottom {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.mobile-mask-overlay.align-bottom > * {
  width: auto !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  max-height: calc(100% - 75px);
  overflow: auto;
  position: relative;
}

.mobile-mask-overlay.align-fullscreen {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.mobile-mask-overlay.align-fullscreen > * {
  width: auto !important;
  border-radius: 0 !important;
  overflow: auto;
  position: relative;
  flex: 1 0 auto;
  min-height: 0;
}

.screen-mask {
  text-align: center;
  position: relative;
}

.screen-mask.progress {
  padding-top: 55px;
}

.screen-mask.progress::after {
  content: '';
  position: absolute;
  left: calc(50% - 15px);
  top: 0px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: spinner 0.6s infinite linear;
}

.screen-mask .title {
  font-weight: medium;
  font-size: 38px;
  line-height: 44px;
  color: #fff;
  margin-bottom: 10px;
}

.screen-mask .text {
  font-size: 18px;
  line-height: 21px;
  color: #fff;
}

.screen-mask .body {
  margin-top: 20px;
}

.dialog {
  max-height: 100vh;
  width: 460px;
  overflow: auto;
  padding: 40px 24px;
  border-radius: 5px;
  position: relative;
  background: #fff;
}

.dialog > .close {
  position: absolute;
  width: 40px;
  height: 40px;
  cursor: pointer;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog > .close .icon {
  --color: var(--app-text-color);
}

.dialog > .close:hover .icon {
  --color: var(--app-grey);
}

.dialog > .title {
  font-weight: 500;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  color: var(--app-text-color);
}

.dialog > .text {
  margin-top: 20px;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  color: var(--app-grey);
}

.dialog > .note {
  margin-top: 20px;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: var(--app-grey);
  opacity: .5;
}

.dialog > .body {
  margin-top: 32px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .dialog {
    padding: 30px 60px;
  }
  .dialog > .title {
    font-size: 20px;
  }
  .dialog > .body {
    margin-top: 30px;
  }
}

.mobile-ui .dialog {
  width: 96vw;
  max-width: 460px;
  padding: 30px 30px;
}

.confirm-dialog > .body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confirm-dialog > .body .cancel {
  margin-top: 15px;
  font-size: 16px;
  line-height: 19px;
  color: var(--app-grey);
}

.confirm-dialog > .body .cancel:hover {
  text-decoration: none;
}

.confirm-dialog > .body .button:not(:first-child) {
  margin-top: 15px;
}

.confirm-dialog > .bottom {
  margin-top: 50px;
  text-align: center;
}

.confirm-dialog > .bottom .checkbox {
  color: var(--app-grey);
  font-weight: 500;
}

.contenteditable {
  white-space: pre-wrap;
}

.contenteditable[contenteditable] {
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.contenteditable:empty::before {
  content: attr(data-placeholder);
  color: var(--app-grey);
}

.contenteditable:empty:hover::before, .contenteditable:empty:focus::before {
  color: var(--app-light-grey);
}

.contenteditable.required::before {
  color: var(--app-red);
}

.contenteditable.suggested::before {
  color: var(--app-green);
}

.contenteditable a {
  cursor: pointer;
  color: var(--app-grey);
}

.contenteditable-large {
  font-size: 24px;
  font-weight: 500;
}

.date-time-field {
  position: relative;
}

.date-time-field > .trigger {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-time-field > .trigger .icon {
  --color: var(--app-grey);
}

.date-time-field > .trigger:hover .icon {
  --color: var(--app-text-color);
}

.checkbox .check {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid var(--app-grey);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

.checkbox .check .icon {
  --color: var(--app-grey);
  --thickness: 1.5;
  opacity: 0.1;
  width: calc(0.7 * var(--width));
  height: calc(0.7 * var(--height));
}

.checkbox.checked label {
  color: var(--app-text-color);
}

.checkbox.checked .check {
  background-color: var(--app-text-color);
  border-color: var(--app-text-color);
}

.checkbox.checked .check .icon {
  opacity: 1;
  --color: #fff;
}

.checkbox:not(.checked):hover label {
  color: var(--app-text-color);
}

.checkbox:not(.checked):hover .check {
  border-color: var(--app-text-color);
}

.checkbox:not(.checked):hover .check .icon {
  --color: var(--app-text-color);
}

.checkbox label {
  vertical-align: middle;
  display: inline-block;
  line-height: 20px;
  margin: 0 0 0 8px;
}

.drag-container.dragging * {
  transition: transform .15s;
}

.drag-container.dragging .dragging {
  transition: none;
}

.drag-container {
  position: relative;
}

.drag-container .dragging {
  z-index: 3;
  position: relative;
  transition: transform .15s;
}

.due-date {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.due-date .icon {
  width: 14px;
  margin-right: 5px;
  --color: var(--app-text-color);
}

.due-date .textA {
  font-weight: bold;
}

.due-date .textB {
  margin-left: 4px;
}

.due-date.not-set:hover {
  color: var(--app-color);
}

.due-date.not-set:hover .icon {
  --color: var(--app-color);
}

.due-date.near-due {
  color: var(--deadline-color-now);
}

.due-date.near-due .icon {
  --color: var(--deadline-color-now);
}

.due-date.past-due {
  color: var(--deadline-color-past);
}

.due-date.past-due .icon {
  --color: var(--deadline-color-past);
}

.due-date.closed {
  color: var(--app-grey);
}

.due-date.closed .icon {
  --color: var(--app-grey);
}

.combobox {
  border-bottom: 1px solid var(--app-light-grey);
  background: #fff;
  line-height: normal;
}

.combobox:focus {
  outline: 0;
  border-color: var(--app-grey);
}

.combobox.invalid {
  border-color: var(--app-red);
}

.combobox-list {
  overflow: auto;
  max-height: 400px;
  background: #fff;
  border: 1px solid var(--app-grey);
  user-select: none;
  position: absolute;
  box-shadow: var(--box-shadow-light-small);
  z-index: 2400;
}

.combobox-list .item {
  padding: var(--pad-1-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #fff;
  cursor: pointer;
}

.combobox-list .item.selected {
  border: 1px dotted var(--app-light-grey);
  background: var(--app-light-grey);
}

.select-box {
  border-radius: 30px;
  border: 1px solid var(--app-light-grey);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.select-box.readonly {
  opacity: 0.6;
  cursor: default;
}

.select-box.readonly .icon {
  display: none;
}

.select-box .text {
  font-weight: 500;
  padding: 7px 15px;
  font-size: 12px;
}

.select-box .icon {
  margin-right: 10px;
}

.select-box:hover:not(.readonly) {
  border-color: var(--app-grey);
}

.mobile-ui .select-box {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.user-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-width: 0;
  color: var(--app-text-color);
  box-shadow: var(--box-shadow-light-small);
}

.user-bubble .letter {
  font-weight: 500;
  color: var(--app-text-color);
}

.user-bubble.dark:not(.photo-based) {
  background-color: var(--app-text-color);
}

.user-bubble.dark:not(.photo-based) .letter {
  color: #fff;
}

.user-bubble.photo-based .letter {
  display: none;
}

.user-bubble.size-20 {
  width: 20px;
  height: 20px;
  font-size: 8px;
}

.user-bubble.size-22 {
  width: 22px;
  height: 22px;
  font-size: 9px;
}

.user-bubble.size-26 {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

.user-bubble.size-30 {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.user-bubble.size-40 {
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.popup-autocomplete {
  position: absolute;
  background: #fff;
  box-shadow: var(--box-shadow-light-small);
  background: #fff;
  border: 1px solid var(--app-light-grey);
  max-height: 300px;
  overflow: auto;
  position: absolute;
  z-index: 2300;
  box-shadow: var(--box-shadow-light-small);
}

.popup-autocomplete .item {
  padding: var(--pad-1-2);
  font-weight: bold;
}

.popup-autocomplete .item.selected {
  background: var(--app-light-grey);
}

.popup-arrow:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.popup-arrow.arrow-right:before {
  left: 12px;
}

.popup-arrow.arrow-left:before {
  right: 12px;
}

.popup-arrow.arrow-bottom:before {
  top: -6px;
  border-bottom: 6px solid #fff;
}

.popup-arrow.arrow-top:before {
  bottom: -6px;
  border-top: 6px solid #fff;
}

.popup-menu {
  background: #fff;
  box-shadow: var(--box-shadow-dark-large);
  border-radius: 3px;
  overflow: auto;
  padding: 15px;
  display: inline-block;
  max-height: 70vh;
}

.desktop-ui .popup-menu {
  max-width: 350px;
}

.popup-menu:focus {
  outline: 0;
}

.popup-menu .option {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--app-text-color);
  min-height: 32px;
}

.popup-menu .option .option-icon {
  margin-right: 5px;
  transition: background-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.popup-menu .option .option-icon .icon {
  --color: var(--app-grey);
}

.popup-menu .option .option-icon .icon[data-name=team] {
  width: calc(0.7 * var(--width));
  height: calc(0.7 * var(--height));
  --thickness: 1.3;
}

.popup-menu .option .option-text {
  color: var(--app-text-color);
  transition: color .15s;
  font-weight: 500;
  padding-right: 15px;
  flex: 1;
}

.popup-menu .option.disabled {
  pointer-events: none;
}

.popup-menu .option.disabled .option-text {
  color: var(--app-grey);
}

.popup-menu .option:hover:not(.disabled), .popup-menu:not(:hover) .option:focus {
  color: var(--app-color);
  outline: 0;
}

.popup-menu .option:hover:not(.disabled) .option-text, .popup-menu:not(:hover) .option:focus .option-text {
  color: var(--app-color);
}

.popup-menu .option:hover:not(.disabled) .option-icon .icon, .popup-menu:not(:hover) .option:focus .option-icon .icon {
  --color: var(--app-color);
}

.popup-menu .option + .option {
  margin-top: 10px;
}

.popup-menu.no-icons .option .option-icon {
  display: none;
}

.popup-menu.no-icons .option .option-text {
  padding-right: 0;
}

.popup-menu .note {
  color: var(--app-grey);
  font-size: 14px;
  margin-top: 15px;
}

.search-field {
  overflow: hidden;
  background: var(--app-lightest-grey);
  display: flex;
  align-items: center;
  border-radius: 30px;
}

.search-field > input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 6px 6px 15px;
  min-width: 0;
  width: 0px;
  outline: 0;
}

.search-field > .position {
  color: var(--app-grey);
}

.search-field > .control {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  cursor: pointer;
}

.search-field > .control .icon {
  width: 12px;
  height: 12px;
  --color: var(--app-text-color);
}

.search-field > .control [data-name=search] {
  width: 14px;
  height: 14px;
  --color: var(--app-grey);
}

.search-field > .control:hover .icon {
  --color: var(--app-text-color);
}

.search-field > .prev,
.search-field > .next {
  padding: 0 6px;
}

.search-field > .disabled .icon {
  --color: var(--app-grey);
}

.search-field.light {
  background: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--app-light-grey);
  width: 380px;
}

.search-field.light.match {
  border-bottom: 1px solid var(--app-color);
}

.search-field.light input {
  padding-left: 0;
  padding-right: 0;
  font-weight: 500;
}

.search-field.light .clear, .search-field.light .search {
  padding-right: 0;
}

.search-list-popup {
  width: 320px;
  height: 428px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-shadow-dark-large);
}

.search-list-popup > input {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 0 0 10px 0;
  margin: 0 0 0 0;
  border-bottom: 1px solid var(--app-light-grey);
  outline: 0;
}

.search-list-popup > .items-list {
  overflow-y: scroll;
  margin-top: 10px;
  flex: 1;
  min-height: 0;
  margin-right: -30px;
  padding: 1px;
  padding-right: 24px;
  outline: 0;
}

.search-list-popup > .items-list::-moz-focus-inner {
  border: 0;
}

.search-list-popup > .items-list > .empty {
  text-align: center;
  color: var(--app-grey);
  margin-top: 60px;
  font-style: italic;
}

.search-list-popup > .items-list > .more {
  text-align: center;
  color: var(--app-grey);
  margin: 20px 0;
  font-style: italic;
}

.search-list-popup > .label {
  color: var(--app-grey);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 20px;
}

.search-list-popup:not(.placeholder-mode) > .placeholder {
  display: none;
}

.search-list-popup.placeholder-mode > :not(.placeholder) {
  display: none;
}

.mask-field {
  width: 200px;
  height: 30px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.mask-field .separator {
  padding: 0 3px;
}

.mask-field .segment {
  cursor: text;
}

.mask-field .segment .placeholder {
  color: var(--app-grey);
  font-weight: normal;
}

.mask-field .segment.invalid {
  color: var(--app-red);
}

.mask-field .segment.invalid .placeholder {
  color: var(--app-red);
}

.mask-field .segment .caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--app-text-color);
  animation: caret 1s linear;
  animation-iteration-count: infinite;
  vertical-align: -1px;
  visibility: hidden;
}

.mask-field .segment:focus {
  outline: 0;
}

.mask-field .segment:focus .caret {
  visibility: visible;
}

.mask-field .segment.selected .value {
  color: #fff;
  background: var(--app-color);
  color: HighlightText;
  background-color: Highlight;
}

.mask-field .segment.selected .caret {
  visibility: hidden;
}

@keyframes caret {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.time-field-native {
  position: relative;
}

.time-field-native > .placeholder {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: flex-start;
  pointer-events: none;
}

.time-field-native > .placeholder .text {
  color: var(--app-grey);
}

.time-field-native.filled > .placeholder {
  display: none;
}

.time-field-native:not(.filled) > input {
  opacity: 0;
}

.button-switcher {
  display: inline-flex;
  overflow: hidden;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--app-light-grey);
  background: var(--app-lightest-grey);
}

.button-switcher > button {
  border-radius: 100px;
  box-shadow: none;
  font-weight: normal;
  border: 0;
}

.button-switcher > button:not(:last-child) {
  border-right: 0;
}

.button-switcher > button.selected {
  background: #fff;
  color: var(--app-text-color);
  font-weight: 500;
}

.button-switcher > button:not(.selected) {
  background: transparent;
  border-color: var(--app-light-grey);
  color: var(--app-grey);
}

.button-switcher > button:hover {
  color: var(--app-text-color);
}

.button-switcher.disabled {
  pointer-events: none;
}

.application {
  min-height: 100vh;
  width: 100%;
}

.notify-bar {
  position: fixed;
  padding: 0px 4px 0px 20px;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  overflow: hidden;
}

.mobile-ui .notify-bar {
  bottom: 100px;
  left: 12px;
  right: 12px;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 0;
  align-items: flex-start;
}

.desktop-ui .notify-bar {
  top: 16px;
  border-radius: 12px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .notify-bar {
    top: 2px;
    min-height: 36px;
  }
}

.notify-bar .text {
  flex: 1;
  text-align: center;
  max-width: 640px;
  padding: 10px 0;
  font-size: 14px;
}

.mobile-ui .notify-bar .text {
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.notify-bar .text strong, .notify-bar .text b {
  font-weight: bold;
}

.notify-bar .pad {
  width: 20px;
  height: 1px;
  display: inline-block;
}

.notify-bar a.close {
  line-height: 1;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.notify-bar a.close .icon {
  width: 12px;
  height: 12px;
}

.mobile-ui .notify-bar a.close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}

.mobile-ui .notify-bar a.close .icon {
  width: 12px;
  height: 12px;
}

.notify-bar a.close .icon {
  stroke-width: 1.3px;
}

.notify-bar a {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.notify-bar a:hover {
  text-decoration: none;
}

.notify-bar[data-kind=error] {
  background: var(--app-light-red);
}

.notify-bar[data-kind=error], .notify-bar[data-kind=error] a {
  color: var(--app-red);
}

.notify-bar[data-kind=error] .icon {
  --color: var(--app-red);
}

.notify-bar[data-kind=success] {
  background: var(--app-success-color);
}

.notify-bar[data-kind=success], .notify-bar[data-kind=success] a {
  color: #fff;
}

.notify-bar[data-kind=success] .icon {
  --color: #fff;
}

.notify-bar[data-kind=info] {
  background: var(--app-light-grey);
}

.notify-bar[data-kind=info], .notify-bar[data-kind=info] a {
  color: var(--app-text-color);
  font-weight: 500;
}

.notify-bar[data-kind=info] .icon {
  --color: var(--app-text-color);
}

.notify-bar[data-kind=warning] {
  background: var(--app-light-yellow);
}

.notify-bar[data-kind=warning], .notify-bar[data-kind=warning] a {
  color: var(--app-yellow);
}

.notify-bar[data-kind=warning] .icon {
  --color: var(--app-yellow);
}

.account-screen {
  overflow: auto;
  min-height: inherit;
}

.account-screen .logo {
  margin: 32px auto;
  display: flex;
  justify-content: center;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .account-screen .logo {
    margin: 30px auto;
  }
}

.account-screen .logo .icon {
  width: 280px;
  height: 47px;
  --color: var(--app-color);
}

.account-screen .box {
  width: 420px;
  margin: 0 auto 40px;
  padding: 32px 40px;
  background: #fff;
  box-shadow: var(--box-shadow-light-large);
  border-radius: 10px;
}

.account-screen .box .form-buttons button {
  width: 100%;
}

.account-screen .box .title {
  font-size: 28px;
  line-height: 120%;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--app-text-color);
  margin: 0 0 32px 0;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .account-screen .box {
    padding: 40px;
  }
  .account-screen .box h1 {
    font-size: 30px;
    margin: 0 0 30px 0;
  }
}

.account-screen .form a {
  color: var(--app-grey);
  font-weight: 500;
}

.account-screen .links {
  margin: 32px auto 0;
  color: var(--app-grey);
  text-align: center;
  font-size: 14px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .account-screen .links {
    font-size: 12px;
  }
}

.account-screen .links .link a {
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  color: var(--app-text-color);
}

.account-screen .links .link a:hover {
  text-decoration: none;
}

.account-screen .links .link + .link {
  margin-top: 20px;
}

.account-screen .links:empty {
  margin: 0;
}

.account-screen .lang-list {
  margin-bottom: 40px;
}

.account-screen .lang-list .lang {
  font-size: 14px;
}

.account-screen .lang-list .active {
  background: var(--app-color);
}

.account-screen .auth-buttons {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
}

.account-screen .auth-buttons .google-login {
  border-radius: 30px;
  display: inline-flex;
  color: var(--app-text-color);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 30px;
  text-decoration: none;
  border: 1px solid var(--app-light-grey);
  align-items: center;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .account-screen .auth-buttons .google-login {
    font-size: 14px;
  }
}

.account-screen .auth-buttons .google-login .icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.account-screen .auth-buttons .google-login:hover {
  background-color: var(--app-lightest-grey);
  border: 1px solid var(--app-grey);
}

.account-screen .auth-buttons .google-login.disabled {
  color: var(--app-light-grey);
}

.account-screen .auth-buttons .google-login.disabled .icon {
  filter: grayscale(100%);
}

.account-screen .auth-buttons .divider {
  margin: 12px 0;
}

.account-screen .auth-buttons .error {
  margin-top: 10px;
  color: var(--app-red);
}

.account-screen .bottom {
  text-align: center;
}

.mobile-ui .account-screen .box {
  width: 100%;
  max-width: 420px;
  border-radius: 0;
  box-shadow: var(--box-shadow-light-large);
}

.account-activate-screen .form {
  position: relative;
}

.account-delete-screen .final-confirmation {
  color: var(--app-red);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .account-delete-screen .final-confirmation {
    font-size: 14px;
  }
}

html[data-appcardtype=AppChooser], html[data-appcardtype=AppChooser] body, html[data-appcardtype=AppChooser] .application {
  width: initial;
  height: initial;
  overflow: initial;
  background: var(--app-text-color);
}

html[data-appcardtype=AppChooser] body {
  overflow: auto;
  position: static;
}

.app-chooser {
  background: #fff url(../images/app-chooser-bg.svg) top 80px right -80px no-repeat;
  margin: 0;
  font-size: 16px;
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

.app-chooser img {
  margin: 0;
  border: 0;
}

.app-chooser a {
  text-decoration: none;
}

.app-chooser a:hover {
  text-decoration: underline;
}

.app-chooser header {
  padding: 30px 30px 0 30px;
}

.app-chooser header nav {
  display: flex;
  align-items: center;
}

.app-chooser header nav .logo {
  flex: 1;
}

.app-chooser header nav .logo .icon, .app-chooser header nav .logo img {
  height: 38px;
}

.app-chooser header nav .link {
  margin-right: 50px;
  color: var(--app-grey);
  font-size: 18px;
  font-weight: 500;
}

.app-chooser header nav .user-area {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.app-chooser header nav .user-area .name {
  margin-left: 10px;
  color: var(--app-text-color);
  font-size: 14px;
  font-weight: 500;
}

.app-chooser header nav .user-area:hover .name {
  color: var(--app-color);
}

.app-chooser header nav .lang-sel {
  margin-right: 50px;
  cursor: pointer;
}

.app-chooser header nav .lang-sel .icon {
  --color: var(--app-grey);
}

.app-chooser header nav .lang-sel .icon:hover {
  --color: var(--app-text-color);
}

.app-chooser header nav .login-buttons a {
  text-decoration: none;
  font-weight: 500;
  padding: 12px 20px;
  line-height: 1;
  border-radius: 30px;
  font-size: 14px;
}

.app-chooser header nav .login-buttons a:not(:first-child) {
  margin-left: 15px;
}

.app-chooser header nav .login-buttons .signup {
  background: var(--app-color);
  color: #fff;
}

.app-chooser header nav .login-buttons .login {
  border: 1px solid var(--app-light-grey);
  color: var(--app-text-color);
}

.app-chooser header .about {
  line-height: 1.5;
  font-size: 32px;
  font-weight: normal;
  color: var(--app-grey);
  margin: 40px auto 60px auto;
  text-align: center;
  max-width: 760px;
}

.app-chooser .apps {
  max-width: 1240px;
  min-width: 900px;
  width: 80vw;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(50%, 600px) minmax(50%, 600px);
  grid-gap: 40px;
}

.app-chooser section.app {
  padding: 30px;
  background: #fff;
  box-shadow: var(--box-shadow-light-large);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.app-chooser section.app:not(.app-enabled) .app-logo, .app-chooser section.app:not(.app-enabled) a {
  opacity: 0.5;
}

.app-chooser section.app .head {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.app-chooser section.app .head a {
  text-decoration: none;
  pointer-events: none;
}

.app-chooser section.app .app-logo {
  flex: 1 0 0px;
}

.app-chooser section.app .app-logo .product {
  color: var(--app-text-color);
  font-size: 24px;
}

.app-chooser section.app .soon {
  color: #fff;
  background: var(--app-grey);
  padding: 6px 8px 8px 8px;
  border-radius: 5px;
  line-height: 1;
  font-size: 12px;
  font-weight: 500;
}

.app-chooser section.app .body {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex: none;
}

.app-chooser section.app .body .fill {
  flex: 1;
}

.app-chooser section.app .body p {
  margin: 0;
  flex: 10;
  color: var(--app-grey);
  max-width: 600px;
}

.app-chooser section.app .body a {
  display: inline-block;
  text-align: center;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: var(--app-text-color);
  outline: none;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--app-light-grey);
  flex: 0;
  margin-left: 10px;
  margin-bottom: 10px;
}

.app-chooser section.app .body a:hover {
  background-color: var(--app-grey);
  border-color: var(--app-grey);
  text-decoration: none;
  color: #fff;
}

.app-chooser footer {
  background: var(--app-text-color);
  padding: 50px 100px;
  margin-top: 100px;
}

.app-chooser section.contact {
  font-size: 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--app-dark-grey);
  padding-bottom: 30px;
  margin-bottom: 20px;
}

.app-chooser section.contact .logo {
  flex: 1;
}

.app-chooser section.contact .links {
  display: flex;
}

.app-chooser section.contact .links a {
  font-weight: normal;
  color: #fff;
}

.app-chooser section.contact .links a:not(:first-child) {
  margin-left: 50px;
}

.app-chooser section.copy {
  color: #fff;
}

.mobile-ui .app-chooser header .about {
  font-size: 22px;
  line-height: 1.4;
}

.mobile-ui .app-chooser header nav {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.mobile-ui .app-chooser header .logo {
  align-self: center;
  flex: 1;
}

.mobile-ui .app-chooser header .logo .icon, .mobile-ui .app-chooser header .logo img {
  width: 200px;
}

.mobile-ui .app-chooser header .hamburger {
  padding: 15px;
  padding-right: 0;
}

.mobile-ui .app-chooser header .hamburger .icon {
  --color: var(--app-grey);
}

.mobile-ui .app-chooser .apps {
  display: block;
  min-width: 0;
  width: auto;
}

.mobile-ui .app-chooser section.app {
  margin: 0 10px 30px 10px;
  padding: 20px 30px 15px 30px;
  text-align: center;
  display: block;
}

.mobile-ui .app-chooser section.app .body {
  display: block;
}

.mobile-ui .app-chooser section.app .fill {
  height: 20px;
}

.mobile-ui .app-chooser section.app .head {
  flex-direction: column;
  align-items: center;
  flex: none;
  flex-shrink: 0;
}

.mobile-ui .app-chooser section.app .head > * {
  flex: none;
  flex-shrink: 0;
}

.mobile-ui .app-chooser section.app .soon {
  margin-top: 10px;
}

.mobile-ui .app-chooser section.contact {
  flex-direction: column;
}

.mobile-ui .app-chooser section.contact .logo {
  flex: none;
  margin-bottom: 20px;
}

.mobile-ui .app-chooser section.contact .links {
  flex-direction: column;
}

.mobile-ui .app-chooser section.contact .links a {
  margin: 10px 0;
}

.mobile-ui .app-chooser section.copy {
  text-align: center;
}

.app-chooser-hamburger-screen {
  background: #fff;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 16px;
}

.app-chooser-hamburger-screen header nav {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.app-chooser-hamburger-screen header .logo {
  flex: 1;
}

.app-chooser-hamburger-screen header .logo .icon, .app-chooser-hamburger-screen header .logo img {
  height: 38px;
  width: 200px;
}

.app-chooser-hamburger-screen header .hamburger {
  padding: 15px;
  padding-right: 0;
}

.app-chooser-hamburger-screen header .hamburger .icon {
  --color: var(--app-grey);
}

.app-chooser-hamburger-screen .body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-chooser-hamburger-screen .body a {
  display: inline-block;
  padding: 15px;
  font-size: 22px;
  font-weight: 500;
  color: var(--app-grey);
  margin: 15px;
  text-decoration: none;
}

.app-chooser-hamburger-screen .lang-sel {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--app-light-grey);
}

.app-chooser-hamburger-screen .lang-sel .text {
  flex: 1;
  line-height: 1;
  margin-left: 13px;
  font-weight: 500;
}

.app-chooser-hamburger-screen .lang-sel .icon {
  --color: var(--app-grey);
}

.app-chooser-hamburger-screen .lang-sel [data-name=globus] {
  width: calc(1.2 * var(--width));
  height: calc(1.2 * var(--height));
}

.app-chooser-hamburger-screen .lang-sel [data-name=angle-right] {
  width: calc(1.3 * var(--width));
  height: calc(1.3 * var(--height));
}

.app-chooser-hamburger-screen .user-area {
  display: flex;
  align-items: center;
}

.app-chooser-hamburger-screen .user-area .name {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.app-chooser-hamburger-screen .user-area .icon {
  --color: var(--app-grey);
}

.app-chooser-hamburger-screen .user-area [data-name=angle-right] {
  width: calc(1.3 * var(--width));
  height: calc(1.3 * var(--height));
}

.app-chooser-hamburger-screen .login-buttons {
  display: flex;
  align-items: center;
}

.app-chooser-hamburger-screen .login-buttons a {
  text-decoration: none;
  font-weight: 500;
  padding: 12px 20px;
  line-height: 1;
  border-radius: 30px;
  font-size: 14px;
}

.app-chooser-hamburger-screen .login-buttons a:not(:first-child) {
  margin-left: 15px;
}

.app-chooser-hamburger-screen .login-buttons .signup {
  background: var(--app-color);
  color: #fff;
}

.app-chooser-hamburger-screen .login-buttons .login {
  border: 1px solid var(--app-light-grey);
  color: var(--app-text-color);
}

.app-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.app-logo .icon-bubble {
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  --color: #fff;
}

.app-logo.app-logo-grouweapps .icon-bubble {
  background: var(--ga-app-color);
}

.app-logo.app-logo-realtask .icon-bubble {
  background: var(--rt-app-color);
}

.app-logo.app-logo-checktask .icon-bubble {
  background: var(--ct-app-color);
}

.app-logo.app-logo-mindtask .icon-bubble {
  background: var(--mt-app-color);
}

.app-logo.app-logo-flowtask .icon-bubble {
  background: var(--ft-app-color);
}

.app-logo.app-logo-meetingminutes .icon-bubble {
  background: var(--mm-app-color);
}

.app-logo.app-logo-checkproject .icon-bubble {
  background: var(--cp-app-color);
}

.app-logo .product {
  font-size: 16px;
  margin-left: 7px;
  color: #fff;
  position: relative;
  font-weight: 500;
}

.main-screen {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'he he' 'ls ag' 'ls bo';
}

.main-screen > .app-header-bar {
  grid-area: he;
}

.main-screen > .projects-list {
  grid-area: ls;
  background: #fff;
}

.main-screen > .agenda-switcher {
  grid-area: ag;
}

.main-screen > .body {
  grid-area: bo;
  position: relative;
  overflow: hidden;
  background: var(--app-lightest-grey);
}

.main-screen > .body > * {
  top: 0;
  bottom: 0;
}

.main-screen > .body .mind-map {
  width: 100%;
}

.main-screen-mobile {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(0px, 1fr) auto auto;
  grid-template-columns: minmax(0px, 1fr);
  grid-template-areas: 'b' 'f' 'n';
  --icon-color-active: #fff;
  --icon-color-inactive: var(--app-grey);
}

.main-screen-mobile > .body {
  grid-area: b;
  position: relative;
}

.main-screen-mobile > .body > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.main-screen-mobile > .new-version {
  grid-area: n;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 24px 20px;
  background: var(--app-light-yellow);
}

.main-screen-mobile > .footer {
  grid-area: f;
  position: relative;
  height: 64px;
  display: grid;
  grid-template-rows: minmax(0px, 1fr);
  grid-template-columns: minmax(0px, 1fr) 54px minmax(0px, 1fr);
}

.main-screen-mobile > .footer::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-header-color);
  -webkit-mask: url("../images/icons/mobile-bottom-bg.svg") center center / 1535px 356px no-repeat;
  mask: url("../images/icons/mobile-bottom-bg.svg") center center / 1535px 356px no-repeat;
}

.main-screen-mobile > .footer::before {
  mask-position: top center;
  -webkit-mask-position: top center;
}

.main-screen-mobile > .footer a.tasks .circle {
  width: 24px;
  height: 24px;
  border-radius: 50px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-screen-mobile > .footer a.tasks.active .circle {
  border-width: 2px;
}

.main-screen-mobile > .footer a.tasks.active .icon {
  --thickness: 2;
}

.main-screen-mobile > .footer a.notifications .icon {
  width: calc(1.3 * var(--width));
  height: calc(1.3 * var(--height));
  --thickness: 0.8;
}

.main-screen-mobile > .footer a.notifications.active .icon {
  --thickness: 1.4;
}

.main-screen-mobile > .footer a.team .mark {
  right: 8px;
}

.main-screen-mobile > .footer a.team.active .icon {
  --thickness: 2;
}

.main-screen-mobile > .footer a.profile .user-bubble {
  background-color: var(--app-grey);
  border: 2px solid var(--icon-color-inactive);
}

.main-screen-mobile > .footer a.profile.active .user-bubble {
  background-color: var(--icon-color-active);
  border: 2px solid var(--icon-color-active);
}

.main-screen-mobile > .footer > .left,
.main-screen-mobile > .footer > .right {
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-evenly;
}

.main-screen-mobile > .footer > .left a,
.main-screen-mobile > .footer > .right a {
  text-decoration: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.main-screen-mobile > .footer > .left a .icon,
.main-screen-mobile > .footer > .right a .icon {
  --color: var(--icon-color-inactive);
}

.main-screen-mobile > .footer > .left a .circle,
.main-screen-mobile > .footer > .right a .circle {
  border-color: var(--icon-color-inactive);
}

.main-screen-mobile > .footer > .left a.active .icon,
.main-screen-mobile > .footer > .right a.active .icon {
  --color: var(--icon-color-active);
}

.main-screen-mobile > .footer > .left a.active .circle,
.main-screen-mobile > .footer > .right a.active .circle {
  border-color: var(--icon-color-active);
}

.main-screen-mobile > .footer > .left .mark,
.main-screen-mobile > .footer > .right .mark {
  background: var(--app-red);
  border-radius: 50px;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.main-screen-mobile > .footer > .center {
  position: relative;
  top: -27px;
  width: 54px;
  height: 54px;
}

.main-screen-mobile > .footer > .center button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
}

.main-screen-mobile > .footer > .center button .icon {
  width: calc(2 * var(--width));
  height: calc(2 * var(--height));
}

.main-screen-mobile > .footer > .center button .icon {
  --color: #fff;
  --thickness: 1;
}

.main-screen-mobile > .footer.center-hide {
  background: var(--app-dark-grey);
}

.main-screen-mobile > .footer.center-hide > .center {
  visibility: hidden;
}

.mobile-screen {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0px, 1fr);
  grid-template-rows: auto minmax(0px, 1fr);
  grid-template-areas: 't' 'b';
  background: var(--app-lightest-grey);
}

.mobile-screen.kind-title .toolbar {
  background: #fff;
}

.mobile-screen .toolbar {
  grid-area: t;
}

.mobile-screen .toolbar .title {
  font-size: 26px;
  padding: 20px;
  padding-bottom: 0;
  font-weight: bold;
  background: #fff;
}

.mobile-screen .toolbar .back {
  padding: 20px;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
}

.mobile-screen .toolbar .back .text {
  margin-left: 14px;
  color: var(--app-grey);
  font-size: 18px;
}

.mobile-screen .toolbar .back .icon {
  --color: var(--app-grey);
  width: calc(1.4 * var(--width));
  height: calc(1.4 * var(--height));
}

.mobile-screen .body {
  grid-area: b;
  overflow: auto;
  background: #fff;
}

.mobile-notifications-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mobile-notifications-screen img {
  margin-bottom: 26px;
  width: 174px;
}

.mobile-notifications-screen .text {
  font-size: 26px;
  font-weight: 500;
  max-width: 200px;
  text-align: center;
}

.mobile-info-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.mobile-info-panel .text {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.mobile-home-tutorial {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.mobile-home-tutorial > *:not(:first-child) {
  margin-top: 10px;
}

.mobile-home-tutorial .title {
  font-size: 26px;
  font-weight: bold;
}

.mobile-home-tutorial .step {
  margin-top: 20px;
  font-size: 18px;
}

.mobile-home-tutorial .step .num {
  color: var(--app-color);
  margin-right: 10px;
  font-size: 22px;
}

.mobile-home-tutorial img {
  width: 270px;
}

.mobile-home-tutorial .progress {
  display: inline-flex;
  margin-top: 20px;
}

.mobile-home-tutorial .progress .dot {
  width: 8px;
  height: 8px;
  background: var(--app-light-grey);
  border-radius: 30px;
}

.mobile-home-tutorial .progress .dot:not(:first-child) {
  margin-left: 5px;
}

.mobile-home-tutorial .progress .dot.active {
  background: var(--app-text-color);
}

.workspace-selector {
  border-radius: 50px;
  display: flex;
  align-items: center;
  height: 36px;
  align-self: center;
  padding: 0 20px;
  padding-right: 35px;
  margin-left: 20px;
  color: #fff;
  cursor: pointer;
  border: 1px solid var(--app-grey);
  position: relative;
  font-weight: 500;
  position: relative;
}

.workspace-selector::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/angle-down.svg") center center / 11.0101px 6.0050291px no-repeat;
  mask: url("../images/icons/angle-down.svg") center center / 11.0101px 6.0050291px no-repeat;
}

.workspace-selector::before {
  mask-position: calc(100% - 10px) center;
  -webkit-mask-position: calc(100% - 10px) center;
}

.workspace-selector:hover {
  border-color: #fff;
}

.workspace-selector .count {
  margin-left: 5px;
  background: var(--app-red);
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  padding: 2px 1px;
  text-align: center;
  min-width: 16px;
  border-radius: 30px;
}

@keyframes blink-yellow {
  from {
    background-color: transparent;
  }
  20% {
    background-color: var(--app-color);
    color: #fff;
    border-color: transparent;
  }
  to {
    background-color: transparent;
  }
}

.agenda-switcher {
  background: var(--app-text-color);
  padding: var(--pad-1-2);
}

.agenda-switcher a.agenda-item {
  display: inline-flex;
  padding: var(--pad-1-2) 16px;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  position: relative;
  cursor: pointer;
  color: var(--app-grey);
  justify-content: center;
  white-space: nowrap;
}

.agenda-switcher a.agenda-item > .icon {
  margin-right: var(--pad-1-2);
  user-select: none;
  height: 16px;
  opacity: 0.6;
  --color: #fff;
}

.agenda-switcher a.agenda-item:hover, .agenda-switcher a.agenda-item.active {
  color: #fff;
}

.agenda-switcher a.agenda-item:hover > .icon, .agenda-switcher a.agenda-item.active > .icon {
  opacity: 1;
}

.agenda-switcher a.agenda-item.active {
  font-weight: bold;
}

.agenda-switcher a.agenda-item > .count {
  text-shadow: var(--app-text-color) 0px 0px 1px;
  display: inline-block;
  border-radius: 50%;
  font-size: 12px;
  background: var(--app-red);
  color: #fff;
  padding: 1px 4px;
  font-weight: bold;
  margin-left: var(--pad-1-2);
}

.agenda-switcher > a.agenda-item.secondary {
  display: none;
}

.agenda-switcher .agenda-more-popup {
  position: absolute;
  background: var(--app-text-color);
  padding: var(--pad-1-2);
  z-index: 100;
}

.agenda-switcher .agenda-more-popup a.agenda-item {
  display: flex;
  justify-content: left;
}

.agenda-switcher .agenda-more-popup.collapsed {
  display: none;
}

.agenda-switcher [data-tab-id=documents] > .count {
  background: var(--app-light-green);
  color: var(--app-text-color);
  text-shadow: none;
}

@media (min-width: 1900px) {
  .agenda-switcher a.agenda-item.agenda-more-button {
    display: none;
  }
  .agenda-switcher > a.agenda-item.secondary {
    display: inline-flex;
  }
}

.app-header-bar {
  height: 70px;
  background: var(--app-header-color);
  display: flex;
  align-items: stretch;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.app-header-bar .apps-area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  position: relative;
}

.app-header-bar .apps-area .apps-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header-bar .app-logo {
  margin: 0 10px;
}

.app-header-bar .app-logo .product {
  font-size: 24px;
}

.app-header-bar .center-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-header-bar .center-area .text {
  color: #fff;
  font-weight: bold;
  max-width: 500px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.app-header-bar .user-area {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.app-header-bar .user-area .user {
  padding: 5px;
  margin: 0 15px;
  display: flex;
  align-items: center;
}

.app-header-bar .user-area .user .user-bubble {
  margin-right: 10px;
}

.app-header-bar .user-area .user .name {
  color: #fff;
  font-weight: 500;
}

.app-header-bar .uploads-area {
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-header-bar .uploads-area progress {
  width: 70px;
  color: #fff;
}

.app-header-bar .update-area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  position: relative;
}

.app-header-bar .update-area .update-button {
  cursor: pointer;
  padding: 8px 20px;
  background: var(--app-red);
  border-radius: 30px;
  color: #fff;
  font-weight: 500;
  position: relative;
  padding-left: 40px;
}

.app-header-bar .update-area .update-button::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/new-update-reload.svg") center center / 20px 19px no-repeat;
  mask: url("../images/icons/new-update-reload.svg") center center / 20px 19px no-repeat;
}

.app-header-bar .update-area .update-button::before {
  mask-position: 10px center;
  -webkit-mask-position: 10px center;
}

.app-header-bar .update-area .update-button:hover {
  background-color: var(--app-red-hover);
}

.app-header-bar .project-members-area {
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 30px;
  position: relative;
  --color: #fff;
  --thickness: 1.5;
  cursor: pointer;
}

.app-header-bar .project-members-area .icon {
  width: calc(0.8 * var(--width));
  height: calc(0.8 * var(--height));
  opacity: 0.6;
}

.app-header-bar .project-members-area:hover .icon, .app-header-bar .project-members-area.active .icon {
  opacity: 1;
}

.app-header-bar .project-members-area .count {
  position: absolute;
  top: -8px;
  right: -11px;
  background: var(--app-red);
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  padding: 2px 1px;
  text-align: center;
  min-width: 16px;
  border-radius: 30px;
}

.app-header-bar .project-members-area .count.add {
  background: #fff;
  color: var(--app-text-color);
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .app-header-bar {
    height: 40px;
  }
  .app-header-bar .app-logo {
    margin: 0 8px;
  }
  .app-header-bar .app-logo .icon-bubble {
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }
  .app-header-bar .app-logo .icon-bubble .icon {
    width: calc(0.6 * var(--width));
    height: calc(0.6 * var(--height));
  }
  .app-header-bar .app-logo .product {
    font-size: 14px;
  }
  .app-header-bar .workspace-selector {
    height: 28px;
  }
  .app-header-bar .user-bubble {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
}

.popup-top-arrow-white {
  position: absolute;
  top: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 5px solid #fff;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.project-selection-popup .items-list > .list-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: 500;
  padding: 2px 0;
}

.project-selection-popup .items-list > .list-item:hover {
  color: var(--app-color);
}

.user-profile-popup {
  min-width: 300px;
  padding: 30px 30px 10px;
  border-bottom-left-radius: 3px;
  background: #fff;
  box-shadow: var(--box-shadow-dark-large);
}

.user-profile-popup .user {
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  column-gap: 8px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .user-profile-popup .user {
    padding-bottom: 20px;
  }
}

.user-profile-popup .user .image {
  flex: none;
  width: 32px;
  margin-right: 14px;
  position: relative;
}

.user-profile-popup .user .image .edit-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  background: var(--app-text-color);
}

.user-profile-popup .user .image .edit-mask .icon {
  --color: #fff;
}

.user-profile-popup .user .image .edit-mask:hover {
  opacity: 0.5;
}

.user-profile-popup .user .info {
  flex: 1;
}

.user-profile-popup .user .name {
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  color: var(--app-text-color);
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .user-profile-popup .user .name {
    font-size: 14px;
  }
}

.user-profile-popup .user .email {
  color: var(--app-grey);
}

.user-profile-popup .user .account-type {
  color: var(--app-grey);
  font-size: 12px;
  margin-top: 2px;
}

.user-profile-popup .option {
  font-weight: 500;
  color: var(--app-text-color);
  padding: 10px 0;
  cursor: pointer;
  transition: color .1s;
  display: flex;
  align-items: center;
}

.user-profile-popup .option:first-child {
  padding-top: 20px;
  border-top: 1px solid var(--app-light-grey);
}

.user-profile-popup .option:last-child {
  border-top: 1px solid var(--app-light-grey);
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 10px;
}

.user-profile-popup .option .text {
  flex: 1;
}

.user-profile-popup .option .icon.left {
  margin-right: 4px;
}

.user-profile-popup .option .icon.right {
  display: none;
}

.user-profile-popup .option:hover {
  color: var(--app-color);
}

.user-profile-popup .option:hover .icon {
  --color: var(--app-color);
}

.mobile-ui .user-profile-popup {
  padding: 0px;
  box-shadow: none;
  min-width: 0;
  border-radius: 0;
}

.mobile-ui .user-profile-popup .user {
  margin: 20px;
  margin-bottom: 0;
}

.mobile-ui .user-profile-popup .option {
  border: 0;
  border-bottom: 1px solid var(--app-light-grey);
  margin: 0;
  padding: 18px 0px;
  font-size: 14px;
}

.mobile-ui .user-profile-popup .option .icon.right {
  display: block;
}

.mobile-ui .user-profile-popup .option:last-child {
  border-bottom: 0;
}

.mobile-ui .user-profile-popup .options {
  padding: 0 20px;
}

.apps-selector {
  width: 560px;
  padding: 30px;
  border-bottom-left-radius: 3px;
  background: #fff;
  box-shadow: var(--box-shadow-dark-large);
}

.apps-selector > .apps-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: auto;
}

.apps-selector > .apps-list a {
  margin-bottom: 5px;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
}

.apps-selector > .apps-list a .icon-wrap {
  width: 37px;
  height: 37px;
  min-width: 37px;
  display: inline-flex;
  margin-right: 12px;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.apps-selector > .apps-list a .info {
  line-height: 1;
  flex: 1;
}

.apps-selector > .apps-list a .info .name {
  font-size: 18px;
  color: var(--app-text-color);
}

.apps-selector > .apps-list a .info .note {
  margin-top: 2px;
  color: var(--app-grey);
  font-size: 12px;
}

.apps-selector > .apps-list a:hover .info .name {
  color: var(--app-text-color);
}

.apps-selector > .apps-list a.disabled {
  outline: 0;
  cursor: default;
}

.apps-selector > .apps-list a.disabled .info .name {
  color: var(--app-grey);
}

.apps-selector > .info {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.apps-selector > .info .note {
  width: 260px;
  color: var(--app-grey);
  font-size: 16px;
}

.apps-selector > .info .link {
  text-align: right;
  flex: 1;
}

.apps-selector > .info .link a {
  color: var(--app-color);
  font-weight: 500;
  font-size: 14px;
}

.apps-selector .icon {
  --color: #fff;
}

.apps-selector .icon-wrap {
  background: var(--app-grey);
}

.apps-selector .app-grouweapps:not(.disabled) .icon-wrap {
  background: var(--ga-app-color);
}

.apps-selector .app-grouweapps:not(.disabled):hover {
  background: var(--ga-app-color-lightbg);
  color: var(--ga-app-color);
}

.apps-selector .app-grouweapps:not(.disabled):hover .icon-wrap {
  background: var(--ga-app-color);
}

.apps-selector .app-grouweapps:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--ga-app-color);
}

.apps-selector .app-realtask:not(.disabled) .icon-wrap {
  background: var(--rt-app-color);
}

.apps-selector .app-realtask:not(.disabled):hover {
  background: var(--rt-app-color-lightbg);
  color: var(--rt-app-color);
}

.apps-selector .app-realtask:not(.disabled):hover .icon-wrap {
  background: var(--rt-app-color);
}

.apps-selector .app-realtask:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--rt-app-color);
}

.apps-selector .app-checktask:not(.disabled) .icon-wrap {
  background: var(--ct-app-color);
}

.apps-selector .app-checktask:not(.disabled):hover {
  background: var(--ct-app-color-lightbg);
  color: var(--ct-app-color);
}

.apps-selector .app-checktask:not(.disabled):hover .icon-wrap {
  background: var(--ct-app-color);
}

.apps-selector .app-checktask:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--ct-app-color);
}

.apps-selector .app-mindtask:not(.disabled) .icon-wrap {
  background: var(--mt-app-color);
}

.apps-selector .app-mindtask:not(.disabled):hover {
  background: var(--mt-app-color-lightbg);
  color: var(--mt-app-color);
}

.apps-selector .app-mindtask:not(.disabled):hover .icon-wrap {
  background: var(--mt-app-color);
}

.apps-selector .app-mindtask:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--mt-app-color);
}

.apps-selector .app-flowtask:not(.disabled) .icon-wrap {
  background: var(--ft-app-color);
}

.apps-selector .app-flowtask:not(.disabled):hover {
  background: var(--ft-app-color-lightbg);
  color: var(--ft-app-color);
}

.apps-selector .app-flowtask:not(.disabled):hover .icon-wrap {
  background: var(--ft-app-color);
}

.apps-selector .app-flowtask:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--ft-app-color);
}

.apps-selector .app-meetingminutes:not(.disabled) .icon-wrap {
  background: var(--mm-app-color);
}

.apps-selector .app-meetingminutes:not(.disabled):hover {
  background: var(--mm-app-color-lightbg);
  color: var(--mm-app-color);
}

.apps-selector .app-meetingminutes:not(.disabled):hover .icon-wrap {
  background: var(--mm-app-color);
}

.apps-selector .app-meetingminutes:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--mm-app-color);
}

.apps-selector .app-checkproject:not(.disabled) .icon-wrap {
  background: var(--cp-app-color);
}

.apps-selector .app-checkproject:not(.disabled):hover {
  background: var(--cp-app-color-lightbg);
  color: var(--cp-app-color);
}

.apps-selector .app-checkproject:not(.disabled):hover .icon-wrap {
  background: var(--cp-app-color);
}

.apps-selector .app-checkproject:not(.disabled).selected .info .name {
  font-weight: 500;
  color: var(--cp-app-color);
}

.invite-user-popup {
  width: 320px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: var(--box-shadow-dark-large);
}

.invite-user-popup .message {
  font-weight: 500;
  margin-bottom: 30px;
}

.invite-user-popup input {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 0 0 10px 0;
  margin: 0 0 30px 0;
  border-bottom: 1px solid var(--app-grey);
  outline: 0;
}

.invite-user-popup input:invalid {
  box-shadow: none;
  border-bottom-color: var(--app-red);
}

.invite-user-popup button {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
  width: 100%;
}

.invite-user-popup button:disabled {
  opacity: 0.5;
  color: #fff;
  background: var(--app-color);
  border-color: var(--app-color);
}

.invite-user-popup button:disabled.error {
  opacity: 1;
  color: var(--app-red);
  background: var(--app-light-red);
  border-color: var(--app-light-red);
}

.mobile-ui .invite-user-popup button {
  padding: 12px 0;
}

.project-members-dropdown {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: minmax(0px, 1fr);
  grid-template-areas: 'title' 'tabs' 'body';
  width: 490px;
  height: 460px;
  border-bottom-left-radius: 3px;
  background: #fff;
  box-shadow: var(--box-shadow-dark-large);
}

.project-members-dropdown > .project-members-title {
  font-size: 26px;
  font-weight: bold;
  padding: 26px 30px 0px 30px;
}

.project-members-dropdown > .project-members-list {
  grid-area: body;
  overflow: auto;
  padding: 24px 30px 30px 30px;
}

.project-members-dropdown > .project-members-list button {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 30px;
  margin: 0;
}

.project-members-dropdown > .project-members-list > .buttons {
  margin-bottom: 24px;
}

.project-members-dropdown > .project-members-list .bubble-wrap {
  position: relative;
}

.project-members-dropdown > .project-members-list .bubble-wrap > .icon {
  border-radius: 30px;
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 2px;
  background: var(--app-grey);
  --color: #fff;
}

.project-members-dropdown > .project-members-list > .empty {
  text-align: center;
  color: var(--app-grey);
  margin-top: 60px;
  font-style: italic;
}

.project-members-dropdown > .project-members-list > .user {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.project-members-dropdown > .project-members-list > .user .info {
  flex: 1 0 0px;
  margin-left: 9px;
  min-width: 0px;
  line-height: 1;
}

.project-members-dropdown > .project-members-list > .user .info > .user-name {
  font-weight: 500;
}

.project-members-dropdown > .project-members-list > .user .info > .details {
  margin-top: 3px;
  color: var(--app-grey);
}

.project-members-dropdown > .project-members-list > .user .menu {
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
  color: var(--app-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.project-members-dropdown > .project-members-list > .user .menu > .icon {
  --color: var(--app-grey);
}

.project-members-dropdown > .project-members-list > .user .menu:hover > .icon {
  --color: var(--app-dark-grey);
}

.project-members-dropdown > .project-members-list > .user .no-license {
  position: relative;
  width: 16px;
  height: 16px;
}

.project-members-dropdown > .project-members-list > .user .no-license::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-yellow);
  -webkit-mask: url("../images/icons/warning-sign.svg") center center / 17px 16px no-repeat;
  mask: url("../images/icons/warning-sign.svg") center center / 17px 16px no-repeat;
}

.project-members-dropdown > .project-members-list > .user .owner {
  border: 1px solid var(--app-light-grey);
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--app-grey);
  font-size: 12px;
  font-weight: 500;
}

.project-members-dropdown > .project-members-list > .user > .buttons {
  text-align: right;
}

.project-members-dropdown > .project-members-list > .user > .buttons button {
  margin-left: 10px;
}

.mobile-ui .project-members-dropdown {
  box-shadow: none;
  width: auto;
  height: auto;
}

.mobile-ui .project-members-dropdown > .project-members-title {
  display: none;
}

.mobile-ui .project-members-dropdown > .project-members-list {
  padding: 14px 20px 20px 20px;
}

.mobile-ui .project-members-dropdown > .project-members-list > .buttons button {
  padding: 12px 30px;
  width: 100%;
}

.workspace-dropdown {
  width: 460px;
  max-height: calc(100vh - 60px);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #fff;
  padding: 20px;
  overflow: auto;
  box-shadow: var(--box-shadow-dark-large);
}

.workspace-dropdown .workspace-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  border-radius: 5px;
  min-height: 32px;
  padding: 0 15px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  color: var(--app-text-color);
  text-decoration: none;
}

.workspace-dropdown .workspace-item .info {
  flex: 1;
  padding: 4px 0;
}

.workspace-dropdown .workspace-item .info .name {
  display: inline;
}

.workspace-dropdown .workspace-item .info .owner {
  color: var(--app-grey);
  display: inline;
}

.workspace-dropdown .workspace-item .contacts {
  color: var(--app-grey);
  align-self: stretch;
  display: flex;
  align-items: center;
  text-decoration: underline;
}

.workspace-dropdown .workspace-item .contacts:hover {
  color: var(--app-text-color);
}

.workspace-dropdown .workspace-item .menu {
  --color: var(--app-grey);
  width: 30px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -15px;
}

.workspace-dropdown .workspace-item:hover {
  background: var(--app-lightest-grey);
}

.workspace-dropdown .workspace-item.active {
  background: var(--app-selection-color);
  color: #fff;
}

.workspace-dropdown .workspace-item.active .contacts:hover {
  color: #fff;
}

.workspace-dropdown .workspace-item.active .menu {
  --color: #fff;
}

.workspace-dropdown .workspace-item.default .name {
  font-weight: bold;
}

.workspace-dropdown .workspace-item .change-mark {
  display: inline-block;
  background: var(--app-red);
  width: 10px;
  height: 10px;
  border-radius: 30px;
  margin-left: 5px;
}

.workspace-dropdown .workspace-item:not(.changed) .change-mark {
  display: none;
}

.workspace-dropdown .workspace-invitations {
  border: 1px solid var(--app-light-grey);
  padding: 15px 20px 20px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.workspace-dropdown .workspace-invitations .title {
  text-align: center;
  line-height: 1;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.workspace-dropdown .workspace-invitations .invitation {
  margin-top: 20px;
}

.workspace-dropdown .workspace-invitations .invitation:first-of-type {
  margin-top: 10px;
}

.workspace-dropdown .workspace-invitations .invitation .name {
  font-weight: 500;
}

.workspace-dropdown .workspace-invitations .invitation .info {
  margin-top: 5px;
  color: var(--app-grey);
}

.workspace-dropdown .workspace-invitations .buttons {
  margin-top: 10px;
}

.workspace-dropdown .workspace-invitations .buttons button {
  margin-right: 10px;
}

.workspace-dropdown .workspace-team-title {
  font-size: 26px;
  font-weight: bold;
  margin-top: 20px;
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid var(--app-light-grey);
}

.workspace-dropdown .workspace-team-title + .workspace-item {
  margin-top: 20px;
}

.workspace-dropdown .workspace-add {
  margin: 20px 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--app-text-color);
  text-decoration: none;
}

.workspace-dropdown .workspace-add .icon {
  margin-right: 5px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .workspace-dropdown .workspace-item {
    margin-bottom: 0;
  }
}

.projects-list {
  padding: 30px;
  width: 300px;
  background: var(--app-lightest-grey);
  border-right: 1px solid var(--app-light-grey);
  transition: width .2s;
  transition-timing-function: ease-out;
  overflow: hidden;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.projects-list .icon {
  flex-shrink: 0;
}

.projects-list .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  transition: color opacity .12s;
  color: var(--app-grey);
}

.projects-list .active .text {
  font-weight: 500;
  color: var(--app-text-color);
}

.projects-list .tool {
  cursor: pointer;
  transition: opacity .12s;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-list .group > .head {
  height: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-light-grey);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.projects-list .group > .head > .icon:first-child {
  margin-right: 8px;
}

.projects-list .group > .head .text {
  font-size: 16px;
}

.projects-list .group > .items {
  font-size: 15px;
  line-height: 30px;
}

.projects-list .group > .items .item {
  height: 32px;
  display: flex;
  align-items: center;
}

.projects-list .group > .items .item .text {
  min-width: 215px;
  cursor: pointer;
  text-decoration: none;
}

.projects-list .group > .items .item .text:hover {
  color: var(--app-text-color);
}

.projects-list:not(:hover):not(.force-expand) {
  width: 84px;
  overflow-y: hidden;
}

.projects-list:not(:hover):not(.force-expand) .text, .projects-list:not(:hover):not(.force-expand) .tool {
  opacity: 0;
  pointer-events: none;
}

.fill-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.welcome-panel .title {
  font-size: 38px;
  line-height: 44px;
  font-weight: 200;
  color: var(--app-text-color);
  margin-bottom: 20px;
}

.welcome-panel .text {
  color: var(--app-grey);
  font-size: 18px;
  line-height: 21px;
}

.failed-loading-panel .text {
  color: var(--app-grey);
  font-size: 18px;
  line-height: 21px;
}

.loader-fail-screen {
  text-align: center;
  padding: 75px 0;
  color: var(--app-text-color);
}

.no-workspaces-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  height: 100%;
  max-width: 424px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  min-height: 85vh;
}

.no-workspaces-view > .title {
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.no-workspaces-view > .text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 32px;
  color: var(--app-grey);
}

.lang-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--app-light-grey);
  background: #fff;
}

.lang-list .lang {
  color: var(--app-text-color);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 30px;
}

.lang-list .active {
  text-decoration: none;
  background: var(--app-color);
}

.lang-list.decent {
  border: 0;
  background: transparent;
}

.lang-list.decent .lang {
  padding: 0;
}

.lang-list.decent .lang:not(:first-child) {
  margin-left: 8px;
}

.lang-list.decent .active {
  background: transparent;
  color: var(--app-color);
}

.language-chooser-dialog .body {
  padding-top: 30px;
  text-align: center;
}

.icon-composed {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
  background: var(--app-color-lightbg);
  color: var(--app-color);
}

.icon-composed svg {
  width: 40px;
  height: 40px;
}

.icon-composed .notification {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 16px;
  background: var(--app-text-color);
  color: var(--app-text-color-inverted);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
}

[data-gw="Public.VerifyEmailAddressScreen"] .box {
  width: 560px;
}

[data-gw="Public.VerifyEmailAddressScreen"] .box .sub-title {
  font-size: 18px;
  text-align: center;
  color: var(--app-grey);
}

[data-gw="PrivacyPolicyAndTermsOfUse"] {
  color: var(--app-grey);
  font-size: 12px;
}

.popup-title-bar {
  margin-bottom: 25px;
  position: relative;
}

.popup-title-bar .title {
  font-size: 18px;
  color: var(--app-text-color);
  padding-right: 20px;
}

.popup-title-bar .close {
  top: -7px;
  right: -14px;
  width: 40px;
  height: 40px;
  position: relative;
  position: absolute;
  cursor: pointer;
}

.popup-title-bar .close::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/cross-mark2.svg") center center / 11.1px 11.1px no-repeat;
  mask: url("../images/icons/cross-mark2.svg") center center / 11.1px 11.1px no-repeat;
}

.popup-title-bar .close:hover {
  opacity: 0.6;
}

.tags-editor > .tags-list {
  display: flex;
  flex-wrap: wrap;
}

.tags-editor > .tags-list > .tag-add {
  height: 29px;
  width: auto;
  min-width: 29px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-bottom: 5px;
}

.tags-editor > .tags-list > .tag-add .text {
  margin-right: 10px;
}

.tags-editor > .tags-list > .tag-add .icon {
  --color: var(--app-text-color);
  margin: 0 8px;
}

.tags-editor > .tags-list > .tag {
  display: flex;
  padding: 6px 15px;
  align-items: center;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  color: #fff;
  position: relative;
}

.tags-editor > .tags-list > .tag .remove {
  position: absolute;
  right: -6px;
  cursor: pointer;
  color: var(--app-grey);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #fff;
  z-index: 1;
  box-shadow: var(--box-shadow-light-border);
  --color: var(--app-text-color);
  display: none;
}

.tags-editor > .tags-list > .tag .remove .icon {
  width: 8px;
  height: 8px;
}

.tags-editor > .tags-list > .tag .remove:hover {
  background: var(--app-light-grey);
}

.tags-editor > .tags-list > .tag:hover .remove {
  display: inline-flex;
}

.tags-editor.readonly > .tags-list > .tag .remove {
  display: none;
}

.tags-editor.readonly > .tag-add {
  display: none;
}

.tags-editor-add-tag-popup {
  width: 320px;
  height: 526px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: var(--box-shadow-dark-large);
  display: flex;
  flex-direction: column;
}

.tags-editor-add-tag-popup .color-list {
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  display: grid;
  grid-gap: 14px;
  grid-template-columns: repeat(8, 20px);
}

.tags-editor-add-tag-popup .color-list .color {
  border-radius: 30px;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  cursor: pointer;
  min-width: 20px;
}

.tags-editor-add-tag-popup .color-list .color.selected {
  border: 2px solid var(--app-text-color);
}

.tags-editor-add-tag-popup .query-highlight {
  background: initial;
  color: var(--app-yellow);
}

.tags-editor-add-tag-popup > .tags-list {
  overflow-y: scroll;
  margin-top: 10px;
  flex: 1;
  min-height: 0;
  margin-right: -30px;
  padding-right: 24px;
  outline: 0;
}

.tags-editor-add-tag-popup > .tags-list::-moz-focus-inner {
  border: 0;
}

.tags-editor-add-tag-popup > .tags-list > .empty {
  text-align: center;
  color: var(--app-grey);
  margin-top: 60px;
  font-style: italic;
}

.tags-editor-add-tag-popup > .tags-list > .more {
  text-align: center;
  color: var(--app-grey);
  margin: 20px 0;
  font-style: italic;
}

.tags-editor-add-tag-popup > .tags-list > .tag {
  border-radius: 5px;
  width: 100%;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 15px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.tags-editor-add-tag-popup > .tags-list > .tag .tag-type {
  flex-shrink: 0;
  margin-left: 5px;
  color: var(--app-light-grey);
  max-width: 80px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tags-editor-add-tag-popup > .tags-list > .tag::-moz-focus-inner {
  border: 0;
}

.tags-editor-add-tag-popup > .tags-list > .tag:focus, .tags-editor-add-tag-popup > .tags-list > .tag.selected {
  padding: 7px 14px;
  border: 2px solid var(--app-text-color);
  outline: 0;
}

.tags-editor-add-tag-popup > .label {
  color: var(--app-grey);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 20px;
}

.tags-editor-add-tag-popup > .note {
  margin-top: 20px;
  color: var(--app-grey);
}

.tags-editor-add-tag-popup > button {
  font-weight: 500;
  padding: 8px 0;
  width: 100%;
  margin: 20px 0 0 0;
}

.mobile-ui .tags-editor-add-tag-popup > button {
  padding: 12px 0;
}

.tags-editor-add-tag-popup > button:disabled {
  opacity: 0.5;
  color: #fff;
  background: var(--app-color);
  border-color: var(--app-color);
}

.tags-editor-add-tag-popup > button:disabled.error {
  opacity: 1;
  color: var(--app-red);
  background: var(--app-light-red);
  border-color: var(--app-light-red);
}

.tags-editor-add-tag-popup > button.plain {
  background: transparent;
  border: 0;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: 20px;
  color: var(--app-text-color);
}

.tags-editor-add-tag-popup > button.plain .icon {
  width: 16px;
  height: 16px;
  margin-right: 9px;
  --color: var(--app-grey);
}

.tags-editor-add-tag-popup > button.plain:hover {
  color: var(--app-color);
}

.tags-editor-add-tag-popup > button.plain:hover .icon {
  --color: var(--app-color);
}

.tags-editor-add-tag-popup > input {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 0 0 10px 0;
  margin: 0 0 0 0;
  border-bottom: 1px solid var(--app-light-grey);
  outline: 0;
}

.tags-editor-edit-tag-popup {
  height: auto;
}

.tags-editor-edit-tag-popup .color-list {
  margin-top: 20px;
}

.links-editor > .links-list {
  display: flex;
  flex-direction: column;
}

.links-editor > .links-list > .item {
  display: flex;
  padding: 8px 16px 8px 12px;
  align-items: center;
  border-radius: 40px;
  background: var(--app-lightest-grey);
  margin-bottom: 10px;
  cursor: pointer;
  text-decoration: none;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .links-editor > .links-list > .item {
    padding: 4px 8px 4px 6px;
  }
}

.links-editor > .links-list > .item > .head .icon {
  --color: var(--app-text-color);
}

.links-editor > .links-list > .item > .head .icon.hover {
  display: none;
}

.links-editor > .links-list > .item > .head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 5px;
}

.links-editor > .links-list > .item > .info {
  flex: 1;
  min-width: 0;
}

.links-editor > .links-list > .item > .info > .name {
  white-space: nowrap;
  color: var(--app-text-color);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
}

.links-editor > .links-list > .item > .info > .meta {
  font-size: 12px;
  color: var(--app-grey);
  display: flex;
  align-items: center;
}

.links-editor > .links-list > .item > .info > .meta .user-bubble {
  margin-left: 4px;
}

.links-editor > .links-list > .item > .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  text-decoration: none;
  margin-left: 10px;
}

.links-editor > .links-list > .item > .menu > .icon {
  --color: var(--app-grey);
}

.links-editor > .links-list > .item > .menu:hover > .icon {
  --color: var(--app-text-color);
}

.links-editor > .links-list > .item:hover > .head .icon.normal {
  display: none;
}

.links-editor > .links-list > .item:hover > .head .icon.hover {
  display: initial;
}

.links-editor > .links-list > .item:hover .name {
  text-decoration: underline;
}

.action-buttons-list {
  display: flex;
  height: 44px;
  align-items: center;
}

.action-buttons-list .fill {
  flex: 1;
}

.action-buttons-list .text-item {
  padding: 7px 12px;
  font-weight: normal;
}

.action-buttons-list .item {
  display: flex;
  align-items: center;
  color: var(--app-text-color);
}

.action-buttons-list .item > .text {
  margin-left: 10px;
}

.action-buttons-list .item > .icon-wrap {
  width: 42px;
  height: 42px;
  flex: none;
  min-width: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, left .15s, opacity .15s, visibility .15s;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--app-light-grey);
}

.action-buttons-list .item > .icon-wrap > .icon {
  --color: var(--app-text-color);
}

.action-buttons-list .item:not(:first-child) {
  margin-left: 10px;
}

.action-buttons-list .item:hover > .icon-wrap {
  border-color: var(--app-grey);
  background-color: #fff;
}

.action-buttons-list .item:hover > .icon-wrap > .icon {
  --color: var(--app-grey);
}

.action-buttons-list .item.active > .icon-wrap {
  background-color: var(--app-grey);
  border-color: var(--app-grey);
}

.action-buttons-list .item.active > .icon-wrap > .icon {
  --color: var(--app-text-color);
}

.action-buttons-list .item.active:hover > .icon-wrap {
  border-color: var(--app-grey-hover);
}

.action-buttons-list .item.active > .icon-wrap > .icon {
  --color: #fff;
}

.action-buttons-list .item:hover > .icon-wrap > .icon {
  --color: var(--app-text-color);
}

.action-buttons-list .item.green:hover > .icon-wrap {
  border-color: var(--app-green);
  background-color: var(--app-light-green);
}

.action-buttons-list .item.green:hover > .icon-wrap > .icon {
  --color: var(--app-green);
}

.action-buttons-list .item.green.active > .icon-wrap {
  background-color: var(--app-green);
  border-color: var(--app-green);
}

.action-buttons-list .item.green.active > .icon-wrap > .icon {
  --color: var(--app-text-color);
}

.action-buttons-list .item.green.active:hover > .icon-wrap {
  border-color: var(--app-green-hover);
}

.action-buttons-list .item.red:hover > .icon-wrap {
  border-color: var(--app-red);
  background-color: var(--app-light-red);
}

.action-buttons-list .item.red:hover > .icon-wrap > .icon {
  --color: var(--app-red);
}

.action-buttons-list .item.red.active > .icon-wrap {
  background-color: var(--app-red);
  border-color: var(--app-red);
}

.action-buttons-list .item.red.active > .icon-wrap > .icon {
  --color: var(--app-text-color);
}

.action-buttons-list .item.red.active:hover > .icon-wrap {
  border-color: var(--app-red-hover);
}

.action-buttons-list .item.red.active > .icon-wrap > .icon {
  --color: #fff;
}

.attachments-editor > .attachments-list {
  display: flex;
  flex-direction: column;
}

.attachments-editor > .attachments-list > .item {
  display: flex;
  padding: 8px 16px 8px 12px;
  align-items: center;
  border-radius: 40px;
  background: var(--app-lightest-grey);
  margin-bottom: 10px;
  text-decoration: none;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .attachments-editor > .attachments-list > .item {
    padding: 4px 8px 4px 6px;
  }
}

.attachments-editor > .attachments-list > .item > .head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 5px;
}

.attachments-editor > .attachments-list > .item > .head .icon {
  --color: var(--app-text-color);
}

.attachments-editor > .attachments-list > .item > .head .icon.hover {
  display: none;
}

.attachments-editor > .attachments-list > .item > .info {
  flex: 1;
  min-width: 0;
}

.attachments-editor > .attachments-list > .item > .info > .name {
  white-space: nowrap;
  color: var(--app-text-color);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
}

.attachments-editor > .attachments-list > .item > .info > .meta {
  font-size: 12px;
  color: var(--app-grey);
}

.attachments-editor > .attachments-list > .item > .info > .meta .user-bubble {
  vertical-align: middle;
  display: inline-flex;
  margin-left: 4px;
}

.attachments-editor > .attachments-list > .item > .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  margin-left: 10px;
}

.attachments-editor > .attachments-list > .item > .menu > .icon {
  --color: var(--app-grey);
}

.attachments-editor > .attachments-list > .item > .menu:hover > .icon {
  --color: var(--app-text-color);
}

.attachments-editor > .attachments-list > .item:hover > .head .icon.normal {
  display: none;
}

.attachments-editor > .attachments-list > .item:hover > .head .icon.hover {
  display: initial;
}

.attachments-editor > .attachments-list > .item:hover .name {
  text-decoration: underline;
}

.assignees-editor .user-bubble.deadline-past {
  border: 2px solid var(--deadline-color-past);
}

.assignees-editor .user-bubble.deadline-now {
  border: 2px solid var(--deadline-color-now);
}

.assignees-editor .bubble-wrap {
  position: relative;
}

.assignees-editor .bubble-wrap > .icon {
  border-radius: 30px;
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 4px;
  width: 16px;
  height: 16px;
  --thickness: 2;
}

.assignees-editor .bubble-wrap > .icon[data-name=cross-mark] {
  background: var(--app-red);
  --color: #fff;
}

.assignees-editor .bubble-wrap > .icon[data-name=check-mark] {
  background: var(--app-green);
  --color: #fff;
}

.assignees-editor > .user-add {
  height: 30px;
  width: auto;
  min-width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-right: 10px;
}

.assignees-editor > .user-add .text {
  margin-right: 10px;
}

.assignees-editor > .user-add .icon {
  --color: var(--app-text-color);
  margin: 0 8px;
}

.assignees-editor > .assignee-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.assignees-editor > .assignee-list > .user {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
}

.assignees-editor > .assignee-list > .user:last-child {
  margin-bottom: 0px;
}

.assignees-editor > .assignee-list > .user .info {
  flex: 1 0 0px;
  min-width: 0;
  margin-left: 9px;
  line-height: 1;
}

.assignees-editor > .assignee-list > .user .info > .user-name {
  font-weight: 500;
}

.assignees-editor > .assignee-list > .user .info > .user-email {
  font-size: 10px;
  font-weight: 500;
  margin-top: 3px;
  color: var(--app-grey);
}

.assignees-editor > .assignee-list > .user .info > .details {
  margin-top: 5px;
  color: var(--app-grey);
}

.assignees-editor > .assignee-list > .user .no-license {
  position: relative;
  width: 16px;
  height: 16px;
}

.assignees-editor > .assignee-list > .user .no-license::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-yellow);
  -webkit-mask: url("../images/icons/warning-sign.svg") center center / 17px 16px no-repeat;
  mask: url("../images/icons/warning-sign.svg") center center / 17px 16px no-repeat;
}

.assignees-editor > .assignee-list > .user .inline-actions {
  margin-left: 9px;
}

.assignees-editor > .assignee-list > .user .inline-actions .action {
  cursor: pointer;
  border-radius: 40px;
  border: 1px solid var(--app-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.assignees-editor > .assignee-list > .user .inline-actions .action:hover {
  border-color: var(--app-text-color);
}

.assignees-editor > .assignee-list > .user .menu {
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
  color: var(--app-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.assignees-editor > .assignee-list > .user .menu > .icon {
  --color: var(--app-grey);
}

.assignees-editor > .assignee-list > .user .menu:hover > .icon {
  --color: var(--app-text-color);
}

.assignees-editor.readonly > .user-add {
  display: none;
}

.assignees-editor.readonly > .assignee-list {
  margin-bottom: 0;
}

.assignees-editor.empty > .assignee-list {
  display: none;
}

.user-select-popup .items-list > .user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.user-select-popup .items-list > .user .info {
  flex: 1 0 0px;
  min-width: 0;
  margin-left: 9px;
}

.user-select-popup .items-list > .user .user-name {
  color: var(--app-text-color);
  font-weight: 500;
  line-height: 1;
}

.user-select-popup .items-list > .user .user-email {
  font-size: 10px;
  font-weight: 500;
  margin-top: 3px;
  color: var(--app-grey);
}

.user-select-popup .items-list > .user .no-license {
  position: relative;
  width: 16px;
  height: 16px;
}

.user-select-popup .items-list > .user .no-license::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-yellow);
  -webkit-mask: url("../images/icons/warning-sign.svg") center center / 17px 16px no-repeat;
  mask: url("../images/icons/warning-sign.svg") center center / 17px 16px no-repeat;
}

.user-select-popup .items-list > .user:hover .user-name {
  color: var(--app-color);
}

.user-select-popup .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--app-text-color);
}

.user-select-popup .placeholder .icon {
  width: calc(2 * var(--width));
  height: calc(2 * var(--height));
  --thickness: 0.5;
  --color: var(--app-grey);
  margin-top: 50px;
}

.user-select-popup .placeholder .title {
  font-size: 26px;
  font-weight: bold;
  margin-top: 20px;
}

.user-select-popup .placeholder .info {
  color: var(--app-grey);
  margin-top: 10px;
  text-align: center;
}

.user-select-popup .placeholder .info a {
  color: var(--app-color);
  font-weight: bold;
}

.separator-label {
  display: flex;
  align-items: center;
}

.separator-label > hr {
  flex: 1;
  border: 0;
  height: 1px;
  background: var(--app-light-grey);
}

.separator-label > .label {
  padding: 0 5px;
  color: var(--app-grey);
  font-size: 12px;
}

.tasks-filter-setup {
  padding: 30px;
  background: #fff;
  position: relative;
}

.tasks-filter-setup .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  cursor: pointer;
}

.tasks-filter-setup .close-button .icon {
  --color: var(--app-grey);
}

.tasks-filter-setup .close-button:hover .icon {
  --color: var(--app-text-color);
}

.tasks-filter-setup .fields-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-rows: minmax(45px, auto);
  grid-gap: 10px;
}

.tasks-filter-setup .fields-grid > label {
  font-weight: 500;
  padding-top: 8px;
  padding-right: 10px;
}

.tasks-filter-setup .fill {
  flex: 1;
}

.tasks-filter-setup input {
  font-size: 14px;
  padding: 6px 0 4px 0;
}

.tasks-filter-setup > .bottom-buttons {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.tasks-filter-setup > .bottom-buttons > *:not(:first-child) {
  margin-left: 10px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .tasks-filter-setup .fields-grid {
    grid-gap: 0 10px;
  }
  .tasks-filter-setup > .bottom-buttons {
    margin-top: 20px;
  }
}

.mobile-ui .tasks-filter-setup > .bottom-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 'clear apply' 'save save';
  grid-gap: 10px;
}

.mobile-ui .tasks-filter-setup > .bottom-buttons > * {
  margin: 0;
}

.mobile-ui .tasks-filter-setup > .bottom-buttons [data-name="clear"] {
  grid-area: clear;
}

.mobile-ui .tasks-filter-setup > .bottom-buttons [data-name="save"] {
  grid-area: save;
}

.mobile-ui .tasks-filter-setup > .bottom-buttons [data-name="apply"] {
  grid-area: apply;
}

.tasks-filter-setup-popup {
  width: 800px;
  border-radius: 5px;
  box-shadow: var(--box-shadow-dark-large);
}

.mobile-ui .tasks-filter-setup-popup {
  border-radius: 0px;
  width: auto;
}

.tasks-filter-setup-dialog {
  width: 900px;
}

.tasks-filter-setup-dialog .form-buttons {
  margin: 25px 0;
  text-align: center;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .tasks-filter-setup-dialog .form-buttons {
    margin: 15px 0 0 0;
  }
  .tasks-filter-setup-dialog .tasks-filter-setup {
    padding: 0;
  }
}

.mobile-ui .tasks-filter-setup-dialog {
  width: auto;
}

.tasks-filter-cond-setup {
  padding: 1px;
}

.tasks-filter-cond-setup .items-list {
  display: flex;
  flex-wrap: wrap;
}

.tasks-filter-cond-setup .items-list > * {
  margin-right: 10px;
}

.tasks-filter-cond-setup.forced-list .list-item .remove {
  display: none;
}

.tasks-filter-cond-setup.forced-list .list-item {
  padding-right: 15px;
}

.tasks-filter-cond-setup.forced-list .add-item {
  display: none;
}

.tasks-filter-cond-setup .select-box {
  margin-bottom: 10px;
}

.tasks-filter-cond-setup .add-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--app-light-grey);
  border-radius: 30px;
  cursor: pointer;
  margin-bottom: 10px;
}

.tasks-filter-cond-setup .add-item:hover {
  border-color: var(--app-grey);
}

.tasks-filter-cond-setup .list-items-ct {
  display: contents;
}

.tasks-filter-cond-setup .list-items-ct > * {
  margin-right: 10px;
}

.tasks-filter-cond-setup .list-item {
  display: flex;
  align-items: center;
  border-radius: 30px;
  font-size: 12px;
  margin-bottom: 10px;
  height: 32px;
}

.tasks-filter-cond-setup .list-item .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 15px;
  font-weight: 500;
  max-width: 200px;
}

.tasks-filter-cond-setup .list-item .remove {
  flex: none;
  flex-shrink: 0;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.tasks-filter-cond-setup .list-item .remove .icon {
  width: calc(0.75 * var(--width));
  height: calc(0.75 * var(--height));
}

.tasks-filter-cond-setup .list-item .remove > .icon {
  --color: var(--app-grey);
}

.tasks-filter-cond-setup .list-item .remove:hover > .icon {
  --color: var(--app-color);
}

.tasks-filter-cond-setup .list-item-tag {
  border-radius: 5px;
}

.tasks-filter-cond-setup .list-item-tag .remove > .icon {
  --color: #fff;
}

.tasks-filter-cond-setup .list-item-tag .remove:hover > .icon {
  --color: #fff;
}

.tasks-filter-cond-setup .list-item-tag .text {
  color: #fff;
}

.tasks-filter-cond-setup .list-item-tag .tag-type {
  flex-shrink: 0;
  margin-left: 5px;
  color: var(--app-light-grey);
  max-width: 80px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tasks-filter-cond-setup .list-item-user {
  background: var(--app-light-grey);
}

.tasks-filter-cond-setup .list-item-user .user-bubble {
  margin-left: 8px;
  flex-shrink: 0;
}

.tasks-filter-cond-setup .list-info {
  padding-top: 6px;
  color: var(--app-grey);
  font-weight: 500;
}

.dropdown-button {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
}

.dropdown-button button.main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 10px;
}

.dropdown-button button.dropdown {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-right: 5px;
  height: auto;
}

.task-breadcrumbs {
  line-height: 1;
  font-weight: 500;
}

.task-breadcrumbs * {
  vertical-align: middle;
}

.task-breadcrumbs .crumb {
  display: inline;
}

.task-breadcrumbs .crumb:not(:first-of-type)::before {
  content: ' › ';
  color: var(--app-grey);
}

.task-breadcrumbs .crumb-text {
  display: inline;
}

.task-breadcrumbs .app-bubble {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  border-radius: 30px;
}

.task-breadcrumbs .app-bubble::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.task-breadcrumbs.small {
  font-weight: normal;
  font-size: 12px;
}

.task-breadcrumbs.small .app-bubble {
  width: 14px;
  height: 14px;
}

.task-breadcrumbs .app-bubble[data-app=realtask] {
  background: var(--rt-app-color);
}

.task-breadcrumbs .app-bubble[data-app=realtask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/realtask.svg") center center / 12px 9px no-repeat;
  mask: url("../images/icons/realtask.svg") center center / 12px 9px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=realtask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/realtask.svg") center center / 7.2px 5.4px no-repeat;
  mask: url("../images/icons/realtask.svg") center center / 7.2px 5.4px no-repeat;
}

.task-breadcrumbs .app-bubble[data-app=checktask] {
  background: var(--ct-app-color);
}

.task-breadcrumbs .app-bubble[data-app=checktask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/checktask.svg") center center / 12px 9px no-repeat;
  mask: url("../images/icons/checktask.svg") center center / 12px 9px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=checktask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/checktask.svg") center center / 7.2px 5.4px no-repeat;
  mask: url("../images/icons/checktask.svg") center center / 7.2px 5.4px no-repeat;
}

.task-breadcrumbs .app-bubble[data-app=mindtask] {
  background: var(--mt-app-color);
}

.task-breadcrumbs .app-bubble[data-app=mindtask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/mindtask.svg") center center / 11px 11px no-repeat;
  mask: url("../images/icons/mindtask.svg") center center / 11px 11px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=mindtask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/mindtask.svg") center center / 6.6px 6.6px no-repeat;
  mask: url("../images/icons/mindtask.svg") center center / 6.6px 6.6px no-repeat;
}

.task-breadcrumbs .app-bubble[data-app=flowtask] {
  background: var(--ft-app-color);
}

.task-breadcrumbs .app-bubble[data-app=flowtask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/flowtask.svg") center center / 13px 3px no-repeat;
  mask: url("../images/icons/flowtask.svg") center center / 13px 3px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=flowtask]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/flowtask.svg") center center / 7.8px 1.8px no-repeat;
  mask: url("../images/icons/flowtask.svg") center center / 7.8px 1.8px no-repeat;
}

.task-breadcrumbs .app-bubble[data-app=meetingminutes] {
  background: var(--mm-app-color);
}

.task-breadcrumbs .app-bubble[data-app=meetingminutes]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/meetingminutes.svg") center center / 12px 9px no-repeat;
  mask: url("../images/icons/meetingminutes.svg") center center / 12px 9px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=meetingminutes]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/meetingminutes.svg") center center / 7.2px 5.4px no-repeat;
  mask: url("../images/icons/meetingminutes.svg") center center / 7.2px 5.4px no-repeat;
}

.task-breadcrumbs .app-bubble[data-app=checkproject] {
  background: var(--cp-app-color);
}

.task-breadcrumbs .app-bubble[data-app=checkproject]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/checkproject.svg") center center / 11px 11px no-repeat;
  mask: url("../images/icons/checkproject.svg") center center / 11px 11px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=checkproject]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/checkproject.svg") center center / 6.6px 6.6px no-repeat;
  mask: url("../images/icons/checkproject.svg") center center / 6.6px 6.6px no-repeat;
}

.task-breadcrumbs .app-bubble[data-app=workspace] {
  background: var(--app-grey);
}

.task-breadcrumbs .app-bubble[data-app=workspace]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/workspace.svg") center center / 12px 9px no-repeat;
  mask: url("../images/icons/workspace.svg") center center / 12px 9px no-repeat;
}

.task-breadcrumbs.small .app-bubble[data-app=workspace]::before {
  background: #fff;
  -webkit-mask: url("../images/icons/workspace.svg") center center / 7.2px 5.4px no-repeat;
  mask: url("../images/icons/workspace.svg") center center / 7.2px 5.4px no-repeat;
}

.agenda-tasks {
  height: 100%;
  max-height: calc(100vh - 70px);
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'tb tb tb' 'ls bo rs';
}

.agenda-tasks > .toolbar {
  grid-area: tb;
  padding: 30px;
}

.agenda-tasks > .toolbar .filter, .agenda-tasks > .toolbar .show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

.agenda-tasks > .toolbar .filter .icon, .agenda-tasks > .toolbar .show .icon {
  width: 16px;
  height: 16px;
}

.agenda-tasks > .toolbar .show {
  margin-right: 34px;
}

.agenda-tasks > .toolbar .search-field {
  width: 380px;
}

.agenda-tasks > .toolbar .sort-dropdown {
  display: none;
}

.agenda-tasks > .agenda-tasks-folder-list {
  grid-area: ls;
  margin: 0 0 30px 30px;
  width: 260px;
}

.agenda-tasks > .agenda-tasks-task-detail {
  margin: 0 30px 30px 0px;
  --user-width: 360px;
  width: clamp(300px, var(--user-width), calc(100vw - 760px));
  grid-area: rs;
}

.agenda-tasks > .agenda-tasks-task-list {
  grid-area: bo;
  margin: 0 0px 30px 30px;
  padding-right: 30px;
  min-width: 300px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks {
    max-height: calc(100vh - 40px);
    grid-template-areas: 'ls tb rs' 'ls bo rs';
  }
  .agenda-tasks > .agenda-tasks-folder-list {
    margin: 10px 0 10px 10px;
  }
  .agenda-tasks > .toolbar {
    padding: 10px 10px 10px 10px;
  }
  .agenda-tasks > .toolbar button {
    padding: 8px 14px 8px 14px;
  }
  .agenda-tasks > .toolbar .dropdown-button button.main {
    padding-right: 7px;
  }
  .agenda-tasks > .toolbar .dropdown-button button.dropdown {
    padding-left: 7px;
  }
  .agenda-tasks > .toolbar .filter {
    width: 32px;
    height: 32px;
  }
  .agenda-tasks > .toolbar .filter .icon {
    width: 14px;
    height: 14px;
  }
  .agenda-tasks > .toolbar .show {
    margin-right: 10px;
  }
  .agenda-tasks > .toolbar .search-field {
    min-width: 100px;
    flex-shrink: 1;
    flex-grow: 0.5;
    flex-basis: 170px;
    width: auto;
  }
  .agenda-tasks > .toolbar .sort-switch {
    display: none;
  }
  .agenda-tasks > .toolbar .sort-dropdown {
    display: inline-flex;
  }
  .agenda-tasks > .agenda-tasks-task-detail {
    margin: 10px 10px 10px 0;
    --user-width: 300px;
    width: clamp(300px, var(--user-width), calc(100vw - 724px));
  }
  .agenda-tasks > .agenda-tasks-task-list {
    margin: 0 0px 10px 10px;
    padding-right: 10px;
  }
}

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

.agenda-tasks-mobile {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'tb se' 'sb sb' 'in in' 'bo bo';
}

.agenda-tasks-mobile > .toolbar {
  grid-area: tb;
  padding: 10px 20px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.agenda-tasks-mobile > .toolbar .filler {
  flex: 1;
}

.agenda-tasks-mobile > .toolbar button {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  padding: 0;
  background: #fff;
  border: 0;
  box-shadow: var(--box-shadow-light-border);
}

.agenda-tasks-mobile > .toolbar button.active {
  background: var(--app-color);
}

.agenda-tasks-mobile > .toolbar .show {
  position: relative;
}

.agenda-tasks-mobile > .toolbar .show::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/folder.svg") center center / 20px 16px no-repeat;
  mask: url("../images/icons/folder.svg") center center / 20px 16px no-repeat;
}

.agenda-tasks-mobile > .toolbar .show.active {
  position: relative;
}

.agenda-tasks-mobile > .toolbar .show.active::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/folder.svg") center center / 20px 16px no-repeat;
  mask: url("../images/icons/folder.svg") center center / 20px 16px no-repeat;
}

.agenda-tasks-mobile > .toolbar .filter {
  position: relative;
}

.agenda-tasks-mobile > .toolbar .filter::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/funnel.svg") center center / 15.6px 16.9px no-repeat;
  mask: url("../images/icons/funnel.svg") center center / 15.6px 16.9px no-repeat;
}

.agenda-tasks-mobile > .toolbar .filter.active {
  position: relative;
}

.agenda-tasks-mobile > .toolbar .filter.active::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/funnel.svg") center center / 15.6px 16.9px no-repeat;
  mask: url("../images/icons/funnel.svg") center center / 15.6px 16.9px no-repeat;
}

.agenda-tasks-mobile > .toolbar .reload {
  position: relative;
}

.agenda-tasks-mobile > .toolbar .reload::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/new-update-reload.svg") center center / 20px 19px no-repeat;
  mask: url("../images/icons/new-update-reload.svg") center center / 20px 19px no-repeat;
}

.agenda-tasks-mobile > .toolbar .reload.rotate {
  animation: rotate 1s ease-in-out;
  transform-origin: 50% 50%;
}

.agenda-tasks-mobile > .search {
  grid-area: se;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  padding: 0;
  background: #fff;
  border: 0;
  box-shadow: var(--box-shadow-light-border);
  position: relative;
  margin: 20px 20px 0 0;
}

.agenda-tasks-mobile > .search::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/search.svg") center center / 17px 16px no-repeat;
  mask: url("../images/icons/search.svg") center center / 17px 16px no-repeat;
}

.agenda-tasks-mobile > .search.active {
  background: var(--app-color);
  position: relative;
}

.agenda-tasks-mobile > .search.active::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/search.svg") center center / 17px 16px no-repeat;
  mask: url("../images/icons/search.svg") center center / 17px 16px no-repeat;
}

.agenda-tasks-mobile > .search-bar {
  grid-area: sb;
  padding: 0px 20px 10px 20px;
  display: flex;
  align-items: center;
}

.agenda-tasks-mobile > .search-bar input {
  border-radius: 0;
  background: transparent;
  flex: 1;
  width: 0;
  padding: 10px 0;
  outline: 0;
  font-weight: normal;
  border: 0;
  border-bottom: 1px solid var(--app-light-grey);
}

.agenda-tasks-mobile > .info {
  grid-area: in;
  margin: 0 20px 10px 20px;
}

.agenda-tasks-mobile > .info > .folder-name {
  font-weight: bold;
  font-size: 20px;
  color: var(--app-text-color);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.agenda-tasks-mobile > .info > .workspace-name {
  padding: 2px;
  font-size: 16px;
  color: var(--app-grey);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  clear: both;
}

.agenda-tasks-mobile > .info > .sort-dropdown {
  float: right;
}

.agenda-tasks-mobile .sort-dropdown {
  box-shadow: var(--box-shadow-light-border);
  border: 0;
  background: #fff;
  margin-left: 10px;
}

.agenda-tasks-mobile > .sort-dropdown {
  gird-area: sd;
  display: none;
  justify-self: end;
  align-self: center;
}

.agenda-tasks-mobile > .agenda-tasks-task-list {
  grid-area: bo;
  margin: 0;
  margin-top: 10px;
  padding: 10px 20px;
  padding-top: 0;
}

.agenda-tasks-mobile > .agenda-tasks-task-list.hscroll {
  margin: 0;
  border: 0;
  scrollbar-width: thin;
  scrollbar-height: thin;
  padding: 0;
}

@media screen and (orientation: landscape) {
  .agenda-tasks-mobile {
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: 'tb in sd se' 'sb sb sb sb' 'bo bo bo bo';
  }
  .agenda-tasks-mobile > .toolbar {
    padding: 10px 10px 10px 20px;
  }
  .agenda-tasks-mobile > .info {
    margin: 0;
    align-self: center;
  }
  .agenda-tasks-mobile > .info > .folder-name {
    font-size: 16px;
  }
  .agenda-tasks-mobile > .info > .sort-dropdown {
    display: none;
  }
  .agenda-tasks-mobile > .search {
    margin: 10px 20px 0 0;
  }
  .agenda-tasks-mobile > .sort-dropdown {
    display: flex;
    margin-right: 25px;
  }
  .agenda-tasks-mobile > .agenda-tasks-task-list {
    margin-top: 0;
  }
}

.agenda-tasks-folder-list {
  padding: 5px 15px;
  height: fit-content;
  max-height: calc(100vh - 60px);
  overflow: auto;
  background: #fff;
  box-shadow: var(--box-shadow-light-border);
  border-radius: 5px;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) #fff;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.agenda-tasks-folder-list::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-folder-list::-webkit-scrollbar-track {
  background: #fff;
}

.agenda-tasks-folder-list::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.agenda-tasks-folder-list .folders-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0px 0px;
}

.agenda-tasks-folder-list .workspace-selector {
  position: relative;
  color: var(--app-text-color);
  border-color: var(--app-light-grey);
  margin: 20px 0px;
  height: 40px;
}

.agenda-tasks-folder-list .workspace-selector::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/angle-down.svg") center center / 11.0101px 6.0050291px no-repeat;
  mask: url("../images/icons/angle-down.svg") center center / 11.0101px 6.0050291px no-repeat;
}

.agenda-tasks-folder-list .workspace-selector::before {
  mask-position: calc(100% - 14px) center;
  -webkit-mask-position: calc(100% - 14px) center;
}

.agenda-tasks-folder-list .folder-group {
  border-bottom: 1px solid var(--app-light-grey);
  padding: 10px 0;
}

.agenda-tasks-folder-list .folder-group:last-child {
  border-bottom: none;
}

.agenda-tasks-folder-list .folder-group.collapsed .folder-group-title .collapse {
  transform: rotate(180deg);
}

.agenda-tasks-folder-list .folder-group.collapsed .folder-list {
  display: none;
}

.agenda-tasks-folder-list .folder-group.collapsible {
  cursor: pointer;
}

.agenda-tasks-folder-list .folder-group.collapsible .folder-group-title .collapse {
  display: flex;
}

.agenda-tasks-folder-list .folder-group-title {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 10px 2px 10px 15px;
  letter-spacing: 1px;
  color: var(--app-grey);
  display: flex;
  align-items: center;
}

.agenda-tasks-folder-list .folder-group-title > * {
  flex-shrink: 0;
}

.agenda-tasks-folder-list .folder-group-title .fill {
  flex: 1;
}

.agenda-tasks-folder-list .folder-group-title .icon {
  --color: var(--app-grey);
}

.agenda-tasks-folder-list .folder-group-title .icon[data-name=warning-sign] {
  --color: var(--app-yellow);
}

.agenda-tasks-folder-list .folder-group-title .tool {
  border-radius: 20px;
}

.agenda-tasks-folder-list .folder-group-title .tool:hover {
  background: var(--app-light-grey);
}

.agenda-tasks-folder-list .folder-group-title .state {
  margin-right: 5px;
}

.agenda-tasks-folder-list .folder-group-title .add {
  width: 24px;
  height: 24px;
  position: relative;
}

.agenda-tasks-folder-list .folder-group-title .add::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
  mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
}

.agenda-tasks-folder-list .folder-group-title .add:hover {
  position: relative;
}

.agenda-tasks-folder-list .folder-group-title .add:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
  mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
}

.agenda-tasks-folder-list .folder-group-title .collapse {
  width: 24px;
  height: 24px;
  position: relative;
  display: none;
}

.agenda-tasks-folder-list .folder-group-title .collapse::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/angle-up.svg") center center / 14.31313px 7.80653783px no-repeat;
  mask: url("../images/icons/angle-up.svg") center center / 14.31313px 7.80653783px no-repeat;
}

.agenda-tasks-folder-list .folder-group-title .collapse:hover {
  position: relative;
}

.agenda-tasks-folder-list .folder-group-title .collapse:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/angle-up.svg") center center / 14.31313px 7.80653783px no-repeat;
  mask: url("../images/icons/angle-up.svg") center center / 14.31313px 7.80653783px no-repeat;
}

.agenda-tasks-folder-list .change-mark {
  width: 10px;
  height: 10px;
  background: var(--app-red);
  cursor: pointer;
  vertical-align: 0px;
  display: inline-block;
  border-radius: 30px;
  margin-left: 5px;
  flex-shrink: 0;
}

.agenda-tasks-folder-list .change-mark:hover {
  background: var(--app-red-hover);
}

.agenda-tasks-folder-list .folder {
  cursor: pointer;
  padding: 8px 5px 8px 15px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.agenda-tasks-folder-list .folder a {
  text-decoration: none;
  color: var(--app-text-color);
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-tasks-folder-list .folder .filter {
  margin-left: 10px;
  width: 13px;
  height: 13px;
  position: relative;
  flex-shrink: 0;
}

.agenda-tasks-folder-list .folder .filter::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/funnel.svg") center center / 12px 13px no-repeat;
  mask: url("../images/icons/funnel.svg") center center / 12px 13px no-repeat;
}

.agenda-tasks-folder-list .folder .fill {
  flex: 1;
}

.agenda-tasks-folder-list .folder .count {
  border-radius: 30px;
  margin: 0 0 0 10px;
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
  background: var(--app-light-grey);
  color: var(--app-text-color);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 16px;
}

.agenda-tasks-folder-list .folder .menu {
  margin-left: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}

.agenda-tasks-folder-list .folder .menu::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-folder-list .folder .menu:hover {
  position: relative;
}

.agenda-tasks-folder-list .folder .menu:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-folder-list .folder.matching {
  background: var(--app-light-yellow);
}

.agenda-tasks-folder-list .folder:hover {
  background: var(--app-lightest-grey);
}

.agenda-tasks-folder-list .folder.selected {
  background: var(--app-selection-color);
}

.agenda-tasks-folder-list .folder.selected .count {
  background: var(--app-grey);
  color: #fff;
}

.agenda-tasks-folder-list .folder.selected .menu:hover {
  position: relative;
}

.agenda-tasks-folder-list .folder.selected .menu:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-folder-list .folder.selected .filter {
  position: relative;
}

.agenda-tasks-folder-list .folder.selected .filter::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/funnel.svg") center center / 12px 13px no-repeat;
  mask: url("../images/icons/funnel.svg") center center / 12px 13px no-repeat;
}

.agenda-tasks-folder-list .folder.selected a {
  color: #fff;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .agenda-tasks-folder-list {
    padding: 5px;
  }
  .desktop-ui .agenda-tasks-folder-list .folder-group {
    padding: 5px 0;
  }
  .desktop-ui .agenda-tasks-folder-list .folder-group-title {
    margin: 5px 2px 5px 15px;
  }
  .desktop-ui .agenda-tasks-folder-list .folder {
    padding: 6px 5px 6px 15px;
  }
}

.mobile-ui .agenda-tasks-folder-list {
  width: 250px;
}

.mobile-ui .agenda-tasks-folder-list .folder {
  padding: 0px 0px 0px 15px;
}

.mobile-ui .agenda-tasks-folder-list .folder .menu {
  width: 40px;
  height: 40px;
  background-position: right 13px center;
}

.mobile-ui .agenda-tasks-folder-list .folder .menu:hover {
  background-position: right 13px center;
}

.agenda-tasks-task-list {
  position: relative;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) var(--app-lightest-grey);
  overflow-y: auto;
}

.agenda-tasks-task-list::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-task-list::-webkit-scrollbar-track {
  background: var(--app-lightest-grey);
}

.agenda-tasks-task-list::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.agenda-tasks-task-list.hscroll {
  overflow-x: auto;
  margin: 0 30px 30px 30px;
  padding-right: 0px;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-grey) var(--app-lightest-grey);
  background: #fff;
  scrollbar-width: auto;
  scrollbar-height: auto;
  border-radius: 5px;
  box-shadow: var(--box-shadow-light-border);
}

.agenda-tasks-task-list.hscroll::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-task-list.hscroll::-webkit-scrollbar-track {
  background: var(--app-lightest-grey);
}

.agenda-tasks-task-list.hscroll::-webkit-scrollbar-thumb {
  background: var(--app-grey);
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-list.hscroll {
    margin: 0 10px 10px 10px;
  }
}

.agenda-tasks-task-list .list-item {
  padding: 11px 5px 11px 10px;
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  color: var(--app-grey);
  border-radius: 5px;
  border-bottom: 1px solid transparent;
  background: #fff;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-list .list-item {
    padding: 4px 2px 4px 7px;
  }
}

.agenda-tasks-task-list .list-item:not(.selected):not(:last-child):not(:hover) {
  border-bottom: 1px solid var(--app-lightest-grey);
  border-radius: 0;
}

.agenda-tasks-task-list .list-item:first-child {
  border-top-right-radius: 11px;
  border-top-left-radius: 11px;
}

.agenda-tasks-task-list .list-item:last-child {
  border-bottom-right-radius: 11px;
  border-bottom-left-radius: 11px;
}

.agenda-tasks-task-list .list-item .text {
  align-self: center;
  flex: 1;
  flex-basis: 0;
  min-width: 0;
  margin-right: 8px;
  overflow: hidden;
}

.agenda-tasks-task-list .list-item .title {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.agenda-tasks-task-list .list-item .subject {
  font-weight: 500;
  font-size: 15px;
  color: var(--app-text-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-list .list-item .subject {
    font-size: 13px;
  }
}

.agenda-tasks-task-list .list-item .not-seen {
  width: 10px;
  height: 10px;
  background: var(--app-red);
  cursor: pointer;
  vertical-align: 0px;
  display: inline-block;
  border-radius: 30px;
  display: none;
  margin-left: 10px;
  flex-shrink: 0;
}

.agenda-tasks-task-list .list-item .not-seen:hover {
  background: var(--app-red-hover);
}

.agenda-tasks-task-list .list-item .breadcrumbs {
  margin-bottom: 4px;
}

.agenda-tasks-task-list .list-item .assignees {
  font-size: 12px;
}

.agenda-tasks-task-list .list-item .tags {
  height: 4px;
  margin-top: 4px;
  display: flex;
}

.agenda-tasks-task-list .list-item .tags .tag {
  display: inline-block;
  margin-right: 5px;
  position: relative;
  height: 20px;
  margin-top: -6px;
}

.agenda-tasks-task-list .list-item .tags .tag-inner {
  cursor: pointer;
  display: inline-block;
  height: 4px;
  border-radius: 5px;
  background: var(--app-grey);
  position: relative;
  top: 7px;
}

.agenda-tasks-task-list .list-item .tags .tag-inner .tag-text-mask {
  visibility: hidden;
}

.agenda-tasks-task-list .list-item .tags .tag-inner .tag-text, .agenda-tasks-task-list .list-item .tags .tag-inner .tag-text-mask {
  padding: 2px 4px;
  max-width: 200px;
  white-space: nowrap;
}

.agenda-tasks-task-list .list-item .tags .tag-inner .tag-text {
  visibility: hidden;
  opacity: 0;
  border-radius: 2px;
  background: var(--app-grey);
  color: #fff;
  position: absolute;
  bottom: 0px;
  height: 0px;
  transition: all .2s;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  white-space: nowrap;
}

.agenda-tasks-task-list .list-item .tags .tag:hover .tag-text {
  visibility: visible;
  opacity: 1;
  height: 18px;
}

.agenda-tasks-task-list .list-item > .deadline {
  display: inline-block;
  align-self: center;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
  padding: 4px 8px;
  border-radius: 5px;
}

.agenda-tasks-task-list .list-item > .deadline.deadline-near {
  background: var(--app-lightest-grey);
  color: var(--app-grey);
}

.agenda-tasks-task-list .list-item > .deadline.deadline-past {
  background: var(--deadline-color-past-light);
  color: var(--deadline-color-past);
}

.agenda-tasks-task-list .list-item > .deadline.deadline-now {
  background: var(--deadline-color-now-light);
  color: var(--deadline-color-now);
}

.agenda-tasks-task-list .list-item > .progress-icon {
  display: inline-block;
  align-self: center;
  margin-right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 30px;
  background-color: var(--app-light-grey);
  position: relative;
}

.agenda-tasks-task-list .list-item > .progress-icon::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/focus.svg") center center / 14px 14px no-repeat;
  mask: url("../images/icons/focus.svg") center center / 14px 14px no-repeat;
}

.agenda-tasks-task-list .list-item.in-progress > .progress-icon {
  background-color: var(--app-color);
  position: relative;
}

.agenda-tasks-task-list .list-item.in-progress > .progress-icon::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/focus.svg") center center / 14px 14px no-repeat;
  mask: url("../images/icons/focus.svg") center center / 14px 14px no-repeat;
}

.agenda-tasks-task-list .list-item > .text .deadline {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.agenda-tasks-task-list .list-item > .text .deadline.deadline-near {
  color: var(--app-grey);
}

.agenda-tasks-task-list .list-item > .text .deadline.deadline-past {
  color: var(--deadline-color-past);
}

.agenda-tasks-task-list .list-item > .text .deadline.deadline-now {
  color: var(--deadline-color-now);
}

.agenda-tasks-task-list .list-item .menu {
  align-self: center;
  flex-shrink: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
}

.agenda-tasks-task-list .list-item .menu::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-task-list .list-item .menu:hover {
  position: relative;
}

.agenda-tasks-task-list .list-item .menu:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-task-list .list-item.selected .menu {
  position: relative;
}

.agenda-tasks-task-list .list-item.selected .menu::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-light-grey);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-task-list .list-item.selected .menu:hover {
  position: relative;
}

.agenda-tasks-task-list .list-item.selected .menu:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.agenda-tasks-task-list .list-item .state {
  align-self: center;
  margin-right: 15px;
  border-radius: 30px;
  border: 1px solid var(--app-light-grey);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-list .list-item .state {
    margin-right: 8px;
  }
}

.agenda-tasks-task-list .list-item .state-resolved {
  border-color: var(--app-green);
  position: relative;
}

.agenda-tasks-task-list .list-item .state-resolved::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-green);
  -webkit-mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
  mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
}

.agenda-tasks-task-list .list-item .state-closed {
  border-color: var(--app-green);
  background-color: var(--app-green);
  position: relative;
}

.agenda-tasks-task-list .list-item .state-closed::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
  mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
}

.agenda-tasks-task-list .list-item .state-cancelled {
  border-color: var(--app-light-red);
  background: var(--app-light-red);
  position: relative;
}

.agenda-tasks-task-list .list-item .state-cancelled::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-red);
  -webkit-mask: url("../images/icons/cross-mark2.svg") center center / 7.77px 7.77px no-repeat;
  mask: url("../images/icons/cross-mark2.svg") center center / 7.77px 7.77px no-repeat;
}

.agenda-tasks-task-list .list-item .state-deleted {
  border-color: transparent;
  position: relative;
}

.agenda-tasks-task-list .list-item .state-deleted::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/trashcan.svg") center center / 16px 17px no-repeat;
  mask: url("../images/icons/trashcan.svg") center center / 16px 17px no-repeat;
}

.agenda-tasks-task-list .list-item .state-suggest-resolve:hover {
  cursor: pointer;
  border-color: var(--app-light-grey);
  background-color: transparent;
  position: relative;
}

.agenda-tasks-task-list .list-item .state-suggest-resolve:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-green);
  -webkit-mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
  mask: url("../images/icons/check-mark2.svg") center center / 8.4px 5.67px no-repeat;
}

.agenda-tasks-task-list .list-item.not-acked .not-seen {
  display: inline-block;
}

.agenda-tasks-task-list .list-item:hover {
  background: var(--app-lightest-grey);
}

.agenda-tasks-task-list .list-item.selected {
  background: var(--app-selection-color);
  color: var(--app-light-grey);
}

.agenda-tasks-task-list .list-item.selected .subject {
  color: #fff;
}

.agenda-tasks-task-list .list-item.selected .state-unresolved {
  border-color: var(--app-grey);
}

.agenda-tasks-task-list .list-item.selected .state-suggest-resolve:hover {
  border-color: var(--app-grey);
}

.agenda-tasks-task-list.tags-expanded .list-item .tags {
  height: auto;
  margin-top: 7px;
}

.agenda-tasks-task-list.tags-expanded .list-item .tags .tag {
  position: static;
  margin-top: 0;
  height: auto;
}

.agenda-tasks-task-list.tags-expanded .list-item .tags .tag-inner {
  height: auto;
  position: static;
  height: auto;
}

.agenda-tasks-task-list.tags-expanded .list-item .tags .tag-inner .tag-text {
  border-radius: 5px;
  visibility: visible;
  opacity: 1;
  height: auto;
  position: static;
}

.agenda-tasks-task-list.tags-expanded .list-item .tags .tag-inner .tag-text-mask {
  display: none;
}

.agenda-tasks-task-list .more-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.agenda-tasks-task-list .list-group-body {
  background: #fff;
  border-radius: 15px;
  box-shadow: var(--box-shadow-light-border);
  padding: 5px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-list .list-group-body {
    padding: 3px;
  }
}

.agenda-tasks-task-list .list-group-header {
  padding: 20px 0 10px 0;
  color: var(--app-grey);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
}

.agenda-tasks-task-list .list-group:first-child .list-group-header {
  padding-top: 0;
}

.agenda-tasks-task-list .list-empty {
  padding: 15px;
  margin-top: 60px;
  text-align: center;
  font-size: 32px;
  color: var(--app-grey);
  text-shadow: #fff 0px 1px 1px;
}

.agenda-tasks-task-list .list-welcome {
  text-align: center;
}

.agenda-tasks-task-list .list-welcome .title {
  font-size: 38px;
  font-weight: 500;
  margin-top: 110px;
}

.mobile-ui .agenda-tasks-task-list .list-welcome .title {
  margin-top: 30px;
}

.agenda-tasks-task-list .list-welcome .info {
  color: var(--app-grey);
  font-size: 18px;
  margin-top: 40px;
}

.agenda-tasks-task-list .list-welcome .buttons {
  text-align: center;
  margin-top: 30px;
}

.agenda-tasks-task-list .list-welcome .buttons button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.agenda-tasks-task-list .tasks-tag-table {
  display: flex;
  min-height: 100%;
  font-size: 12px;
}

.agenda-tasks-task-list .tasks-tag-table .column {
  width: 150px;
  min-width: 0;
  flex: none;
  border-right: 1px solid var(--app-light-grey);
  padding: 10px;
  min-height: 100%;
}

.agenda-tasks-task-list .tasks-tag-table .column.highlighted {
  background: var(--app-light-grey);
}

.agenda-tasks-task-list .tasks-tag-table .tag {
  color: #fff;
  border-radius: 5px;
  padding: 8px 10px;
  font-weight: 500;
  background: var(--color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

.agenda-tasks-task-list .tasks-tag-table .tag .project-name {
  font-size: 11px;
}

.agenda-tasks-task-list .tasks-tag-table .task {
  margin-bottom: 5px;
  font-weight: 500;
  border-radius: 5px;
  line-height: 1.2;
  padding: 8px 10px;
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--app-light-grey);
  color: var(--app-grey);
}

.agenda-tasks-task-list .tasks-tag-table .task:hover {
  border-color: var(--app-grey);
}

.agenda-tasks-task-list .tasks-tag-table .task.selected {
  border: 2px solid var(--app-grey);
  padding: 7px 9px;
}

.agenda-tasks-task-list .tasks-tag-table .deadline-near {
  background: var(--deadline-color-near-light);
  color: var(--deadline-color-near);
  border-color: var(--deadline-color-near-light);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-near:hover {
  background: var(--deadline-color-near-light-hover);
  border-color: var(--deadline-color-near-light-hover);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-near.selected {
  border-color: var(--deadline-color-near);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-past {
  background: var(--deadline-color-past-light);
  color: var(--deadline-color-past);
  border-color: var(--deadline-color-past-light);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-past:hover {
  background: var(--deadline-color-past-light-hover);
  border-color: var(--deadline-color-past-light-hover);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-past.selected {
  border-color: var(--deadline-color-past);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-now {
  background: var(--deadline-color-now-light);
  color: var(--deadline-color-now);
  border-color: var(--deadline-color-now-light);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-now:hover {
  background: var(--deadline-color-now-light-hover);
  border-color: var(--deadline-color-now-light-hover);
}

.agenda-tasks-task-list .tasks-tag-table .deadline-now.selected {
  border-color: var(--deadline-color-now);
}

.mobile-ui .agenda-tasks-task-list {
  padding-bottom: 34px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.mobile-ui .agenda-tasks-task-list .list-item .subject {
  font-size: 14px;
}

.mobile-ui .agenda-tasks-task-list:not(.tags-expanded) .tags {
  overflow: hidden;
}

.mobile-ui .agenda-tasks-task-list:not(.tags-expanded) .tags .tag {
  width: 30px;
  overflow: hidden;
}

.mobile-ui .agenda-tasks-task-list:not(.tags-expanded) .tags .tag-inner {
  width: 30px;
}

.agenda-tasks-task-detail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: 'menu' 'body' 'footer';
  background: #fff;
  box-shadow: var(--box-shadow-light-border);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.mobile-ui .agenda-tasks-task-detail {
  overflow: hidden;
}

.agenda-tasks-task-detail.empty {
  grid-template-rows: 1fr;
  grid-template-areas: 'empty';
}

.agenda-tasks-task-detail.empty > .tabs-menu,
.agenda-tasks-task-detail.empty > .tabs-body {
  display: none;
}

.desktop-ui .agenda-tasks-task-detail.new-task {
  border: 3px solid var(--app-color);
}

.agenda-tasks-task-detail > .resizer {
  position: absolute;
  bottom: 0px;
  top: 0px;
  left: 0px;
  width: 6px;
  padding-left: 2px;
  cursor: e-resize;
  display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
  --color: var(--app-grey);
}

.agenda-tasks-task-detail > .empty-ct {
  grid-area: empty;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.agenda-tasks-task-detail > .empty-ct .empty-inner > * {
  margin-bottom: 30px;
}

.agenda-tasks-task-detail > .empty-ct .info-text {
  font-size: 18px;
  color: var(--app-grey);
}

.agenda-tasks-task-detail > .empty-ct .loading {
  font-size: 18px;
  color: var(--app-grey);
}

.agenda-tasks-task-detail > .tabs-menu {
  grid-area: menu;
  align-items: stretch;
  display: flex;
  padding: 30px 30px 0 30px;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  cursor: pointer;
  height: 44px;
  border-bottom: 1px solid var(--app-light-grey);
}

.agenda-tasks-task-detail > .tabs-menu .tab-item .count {
  background: var(--app-red);
  color: #fff;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item .icon {
  height: 23px;
  --color: var(--app-grey);
}

.agenda-tasks-task-detail > .tabs-menu .tab-item .tab-item-inner {
  height: 44px;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item:first-child {
  justify-content: flex-start;
  flex: 0.7;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item:last-child {
  justify-content: flex-end;
  flex: 0.7;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item[data-status=content] .icon {
  --color: var(--app-text-color);
  --thickness: 1.5;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item[data-status="new-content"] .icon {
  --color: var(--app-red);
  --thickness: 1.5;
}

.agenda-tasks-task-detail > .tabs-menu .tab-item.selected .icon, .agenda-tasks-task-detail > .tabs-menu .tab-item:hover .icon {
  --color: var(--app-text-color);
}

.agenda-tasks-task-detail > .tabs-menu .tab-item.selected .tab-item-inner, .agenda-tasks-task-detail > .tabs-menu .tab-item:hover .tab-item-inner {
  flex: none;
  border-bottom: 4px solid var(--app-color);
}

.agenda-tasks-task-detail > .tabs-body {
  grid-area: body;
  overflow: hidden;
}

.agenda-tasks-task-detail > .tabs-body > * {
  height: 100%;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) #fff;
}

.agenda-tasks-task-detail > .tabs-body > *::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-task-detail > .tabs-body > *::-webkit-scrollbar-track {
  background: #fff;
}

.agenda-tasks-task-detail > .tabs-body > *::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.agenda-tasks-task-detail > .footer {
  grid-area: footer;
  display: flex;
  padding: 20px 0;
  align-items: center;
  justify-content: center;
}

.agenda-tasks-task-detail > .footer > * {
  margin-right: 10px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .agenda-tasks-task-detail > .tabs-menu {
    padding: 15px 15px 0 15px;
  }
  .desktop-ui .agenda-tasks-task-detail > .tabs-menu .tab-item {
    height: 29px;
  }
  .desktop-ui .agenda-tasks-task-detail > .tabs-menu .tab-item .icon {
    height: auto;
    width: calc(0.8 * var(--width));
    height: calc(0.8 * var(--height));
  }
  .desktop-ui .agenda-tasks-task-detail > .tabs-menu .tab-item .tab-item-inner {
    height: 29px;
  }
  .desktop-ui .agenda-tasks-task-detail > .footer {
    padding: 10px 0 15px 0;
  }
  .desktop-ui .agenda-tasks-task-detail > .footer button {
    padding: 8px 14px 8px 14px;
  }
}

.mobile-ui .agenda-tasks-task-detail {
  height: 100%;
}

.mobile-ui .agenda-tasks-task-detail > .tabs-menu {
  padding: 20px 20px 0 20px;
}

.mobile-ui .agenda-tasks-task-detail > .footer {
  padding: 20px;
}

.mobile-ui .agenda-tasks-task-detail > .footer > * {
  flex: 1;
}

.mobile-ui .agenda-tasks-task-detail > .footer > :last-child {
  margin-right: 0;
}

.agenda-tasks-task-detail-main {
  overflow: auto;
}

.agenda-tasks-task-detail-main > .wrap {
  padding: 15px 30px;
}

.agenda-tasks-task-detail-main > .wrap > .title {
  margin-bottom: 10px;
  line-height: 1.4;
}

.agenda-tasks-task-detail-main > .wrap > .title::before {
  color: var(--app-green);
}

.agenda-tasks-task-detail-main > .wrap > .title.required:not(:focus)::before {
  color: var(--app-red);
}

.agenda-tasks-task-detail-main > .wrap > .task-id {
  margin-bottom: 20px;
}

.agenda-tasks-task-detail-main > .wrap > .task-id .edit-project {
  margin-left: 10px;
  color: var(--app-color);
  font-weight: 500;
}

.agenda-tasks-task-detail-main > .wrap > .separator-label {
  margin: 15px 0;
}

.agenda-tasks-task-detail-main > .wrap > hr {
  background: var(--app-light-grey);
  border: 0;
  height: 1px;
  margin: 20px 0;
}

.agenda-tasks-task-detail-main .info-text p {
  margin: 0;
  margin-bottom: 5px;
}

.agenda-tasks-task-detail-main .info-text .value {
  font-weight: bold;
}

.agenda-tasks-task-detail-main .bottom-controls {
  margin-top: 20px;
}

.agenda-tasks-task-detail-main .bottom-controls a {
  color: var(--app-color);
  font-weight: 500;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .agenda-tasks-task-detail-main .bottom-controls {
    margin-top: 10px;
  }
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-detail-main > .wrap {
    padding: 15px;
  }
  .agenda-tasks-task-detail-main > .wrap > .title {
    line-height: 1.2;
    font-size: 20px;
  }
  .agenda-tasks-task-detail-main > .wrap > .task-id {
    margin-bottom: 12px;
  }
  .agenda-tasks-task-detail-main > .wrap > .separator-label {
    margin: 7px 0;
  }
  .agenda-tasks-task-detail-main > .wrap > hr {
    margin: 12px 0;
  }
}

.mobile-ui .agenda-tasks-task-detail-main > .wrap {
  padding: 20px;
}

.agenda-tasks-task-detail-comments {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'search' 'scroller' 'entry';
}

.agenda-tasks-task-detail-comments .comment-search {
  grid-area: search;
  display: flex;
  justify-content: center;
  padding: 15px 30px;
}

.agenda-tasks-task-detail-comments .comment-search .search-field {
  width: 100%;
}

.agenda-tasks-task-detail-comments .comment-scroller {
  grid-area: scroller;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) #fff;
}

.agenda-tasks-task-detail-comments .comment-scroller::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-task-detail-comments .comment-scroller::-webkit-scrollbar-track {
  background: #fff;
}

.agenda-tasks-task-detail-comments .comment-scroller::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.agenda-tasks-task-detail-comments .comment-list {
  padding: 0 30px;
}

.agenda-tasks-task-detail-comments .comment-empty {
  color: var(--app-text-color);
  font-size: 26px;
  font-weight: 300;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agenda-tasks-task-detail-comments .comment-empty > img {
  display: block;
  margin-bottom: 15px;
  width: 174px;
}

.agenda-tasks-task-detail-comments .comment {
  display: flex;
  margin-bottom: 10px;
  align-items: start;
}

.agenda-tasks-task-detail-comments .comment a {
  color: var(--app-grey);
}

.agenda-tasks-task-detail-comments .comment.my .comment-body {
  background: var(--app-grey);
  color: #fff;
}

.agenda-tasks-task-detail-comments .comment.my .comment-meta {
  color: #fff;
  opacity: 0.8;
}

.agenda-tasks-task-detail-comments .comment.my a {
  color: #fff;
}

.agenda-tasks-task-detail-comments .comment.matched .comment-body {
  background: var(--app-color);
  color: #fff;
  box-shadow: var(--box-shadow-green-large);
}

.agenda-tasks-task-detail-comments .comment.matched .comment-meta {
  color: #fff;
  opacity: 0.8;
}

.agenda-tasks-task-detail-comments .comment.matched a {
  color: #fff;
}

.agenda-tasks-task-detail-comments .comment > .user-bubble {
  margin-right: 10px;
}

.agenda-tasks-task-detail-comments .comment .comment-body {
  flex: 1 0 0;
  background: var(--app-lightest-grey);
  border-radius: 3px 9px 9px 9px;
  padding: 7px 10px;
  overflow: hidden;
}

.agenda-tasks-task-detail-comments .comment .comment-meta {
  font-size: 12px;
  color: var(--app-grey);
  margin-bottom: 2px;
}

.agenda-tasks-task-detail-comments .comment .comment-text {
  line-height: 1.3;
  white-space: pre-wrap;
}

.agenda-tasks-task-detail-comments .comment-entry-wrap {
  grid-area: entry;
  border-top: 1px solid var(--app-light-grey);
  margin: 30px;
  margin-top: 0;
  padding-top: 20px;
  display: flex;
}

.agenda-tasks-task-detail-comments .comment-entry-wrap > button {
  margin-left: 10px;
}

.agenda-tasks-task-detail-comments .comment-entry-wrap > button .icon {
  --color: #fff;
  width: calc(2 * var(--width));
  height: calc(2 * var(--height));
}

.agenda-tasks-task-detail-comments .comment-entry-wrap > .comment-entry {
  flex: 1;
  background: #fff;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 3px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-detail-comments .comment-search {
    padding: 15px;
  }
  .agenda-tasks-task-detail-comments .comment-list {
    padding: 0 15px;
  }
  .agenda-tasks-task-detail-comments .comment-entry-wrap {
    margin: 15px;
    padding-top: 10px;
  }
}

.mobile-ui .agenda-tasks-task-detail-comments .comment-search {
  padding: 20px;
}

.mobile-ui .agenda-tasks-task-detail-comments .comment-list {
  padding: 0 20px;
}

.mobile-ui .agenda-tasks-task-detail-comments .comment-entry-wrap {
  margin: 20px;
  padding-top: 15px;
}

.agenda-tasks-task-detail-specification > .contenteditable {
  padding: 30px;
  border: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) #fff;
  resize: none;
  outline: none;
}

.agenda-tasks-task-detail-specification > .contenteditable::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-task-detail-specification > .contenteditable::-webkit-scrollbar-track {
  background: #fff;
}

.agenda-tasks-task-detail-specification > .contenteditable::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.agenda-tasks-task-detail-specification > .contenteditable[readonly]:placeholder-shown {
  cursor: default;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-detail-specification > .contenteditable {
    padding: 15px;
  }
}

.mobile-ui .agenda-tasks-task-detail-specification > .contenteditable {
  padding: 20px;
}

.agenda-tasks-task-detail-checklist {
  overflow: auto;
}

.agenda-tasks-task-detail-checklist .wrap {
  padding: 30px;
}

.agenda-tasks-task-detail-checklist .item {
  display: flex;
  align-items: start;
  margin-bottom: 10px;
}

.agenda-tasks-task-detail-checklist .item:hover .move-handle {
  visibility: visible;
}

.agenda-tasks-task-detail-checklist .move-handle {
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 4px;
  cursor: move;
  visibility: hidden;
}

.agenda-tasks-task-detail-checklist .move-handle::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/move-handle.svg") center center / 15px 7px no-repeat;
  mask: url("../images/icons/move-handle.svg") center center / 15px 7px no-repeat;
}

.agenda-tasks-task-detail-checklist .check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  border: 1px solid var(--app-grey);
}

.agenda-tasks-task-detail-checklist .check .icon {
  width: 12px;
  height: 12px;
}

.agenda-tasks-task-detail-checklist .check > .icon {
  display: none;
  --color: var(--app-grey);
}

.agenda-tasks-task-detail-checklist .check > .icon[data-name=plus] {
  width: 8px;
  height: 8px;
  display: block;
}

.agenda-tasks-task-detail-checklist .check.checked {
  background: var(--app-color);
  border-color: var(--app-color);
}

.agenda-tasks-task-detail-checklist .check.checked > .icon {
  display: block;
  --color: #fff;
}

.agenda-tasks-task-detail-checklist .empty {
  display: none;
  color: var(--app-grey);
}

.agenda-tasks-task-detail-checklist .entry {
  flex: 1;
  min-height: 16px;
  margin-left: 10px;
  padding: 2px 0px;
}

.agenda-tasks-task-detail-checklist .entry:focus {
  outline: none;
}

.agenda-tasks-task-detail-checklist .entry:empty::before {
  content: attr(data-placeholder);
  color: var(--app-grey);
}

.agenda-tasks-task-detail-checklist .entry:empty:hover::before, .agenda-tasks-task-detail-checklist .entry:empty:focus::before {
  color: var(--app-light-grey);
}

.agenda-tasks-task-detail-checklist .entry a {
  color: var(--app-grey);
  cursor: pointer;
}

.agenda-tasks-task-detail-checklist .list .check {
  cursor: pointer;
}

.agenda-tasks-task-detail-checklist.readonly .empty {
  display: initial;
}

.agenda-tasks-task-detail-checklist.readonly .list .check {
  cursor: default;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .agenda-tasks-task-detail-checklist .wrap {
    padding: 15px;
  }
  .desktop-ui .agenda-tasks-task-detail-checklist .item {
    margin-bottom: 5px;
  }
  .desktop-ui .agenda-tasks-task-detail-checklist .entry {
    min-height: 14px;
  }
}

.mobile-ui .agenda-tasks-task-detail-checklist > .wrap {
  padding: 20px;
}

.mobile-ui .agenda-tasks-task-detail-checklist .move-handle {
  visibility: visible;
}

.agenda-tasks-task-detail-attachments {
  overflow: auto;
}

.agenda-tasks-task-detail-attachments .wrap {
  padding: 30px;
}

.agenda-tasks-task-detail-attachments .add-buttons {
  margin-bottom: 30px;
}

.agenda-tasks-task-detail-attachments .icon-button {
  width: 100%;
  margin-bottom: 10px;
}

.agenda-tasks-task-detail-attachments > .wrap > .empty {
  color: var(--app-text-color);
  font-size: 26px;
  font-weight: 300;
  margin-top: 60px;
  text-align: center;
}

.agenda-tasks-task-detail-attachments .label {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 500;
  margin-top: 30px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .desktop-ui .agenda-tasks-task-detail-attachments .wrap {
    padding: 15px;
  }
  .desktop-ui .agenda-tasks-task-detail-attachments .add-buttons {
    margin-bottom: 15px;
  }
  .desktop-ui .agenda-tasks-task-detail-attachments .label {
    font-size: 16px;
    margin-top: 15px;
  }
}

.mobile-ui .agenda-tasks-task-detail-attachments .wrap {
  padding: 20px;
}

.mobile-ui .agenda-tasks-task-detail-attachments .add-buttons {
  margin-bottom: 0px;
}

.mobile-ui .agenda-tasks-task-detail-attachments .add-buttons button {
  padding-top: 12px;
  padding-bottom: 12px;
}

.mobile-ui .agenda-tasks-task-detail-attachments .label {
  margin-top: 15px;
}

.agenda-tasks-task-detail-history {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'search' 'scroller';
}

.agenda-tasks-task-detail-history .history-search {
  grid-area: search;
  display: flex;
  justify-content: center;
  padding: 15px 30px;
}

.agenda-tasks-task-detail-history .history-search .search-field {
  width: 100%;
}

.agenda-tasks-task-detail-history .history-scroller {
  grid-area: scroller;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--app-light-grey) #fff;
}

.agenda-tasks-task-detail-history .history-scroller::-webkit-scrollbar {
  width: 6px;
}

.agenda-tasks-task-detail-history .history-scroller::-webkit-scrollbar-track {
  background: #fff;
}

.agenda-tasks-task-detail-history .history-scroller::-webkit-scrollbar-thumb {
  background: var(--app-light-grey);
}

.agenda-tasks-task-detail-history .history-list {
  padding: 0 30px;
}

.agenda-tasks-task-detail-history .history-list .history-note {
  color: var(--app-grey);
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 30px;
  text-align: center;
}

.agenda-tasks-task-detail-history .history {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--app-light-grey);
  padding-bottom: 10px;
}

.agenda-tasks-task-detail-history .history .history-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--pad-1-2);
}

.agenda-tasks-task-detail-history .history .history-header .history-author {
  flex: 1;
  font-weight: bold;
  margin-left: 5px;
}

.agenda-tasks-task-detail-history .history .history-header .history-time {
  color: var(--app-grey);
  font-size: 12px;
}

.agenda-tasks-task-detail-history .history .history-changes {
  font-size: 12px;
  width: 100%;
}

.agenda-tasks-task-detail-history .history .history-changes .change-type {
  font-weight: bold;
  color: var(--app-grey);
  margin-bottom: 2px;
}

.agenda-tasks-task-detail-history .history .history-changes .change {
  margin-bottom: 2px;
  padding-left: 14px;
}

.agenda-tasks-task-detail-history .history .history-changes .change.add {
  font-weight: bold;
  position: relative;
}

.agenda-tasks-task-detail-history .history .history-changes .change.add::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-green);
  -webkit-mask: url("../images/icons/history-add.svg") center center / 8px 8px no-repeat;
  mask: url("../images/icons/history-add.svg") center center / 8px 8px no-repeat;
}

.agenda-tasks-task-detail-history .history .history-changes .change.add::before {
  mask-position: left 3px;
  -webkit-mask-position: left 3px;
}

.agenda-tasks-task-detail-history .history .history-changes .change.del {
  text-decoration: line-through;
  position: relative;
}

.agenda-tasks-task-detail-history .history .history-changes .change.del::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-red);
  -webkit-mask: url("../images/icons/history-del.svg") center center / 8px 8px no-repeat;
  mask: url("../images/icons/history-del.svg") center center / 8px 8px no-repeat;
}

.agenda-tasks-task-detail-history .history .history-changes .change.del::before {
  mask-position: left 3px;
  -webkit-mask-position: left 3px;
}

.agenda-tasks-task-detail-history .history .history-changes .change.upd {
  position: relative;
}

.agenda-tasks-task-detail-history .history .history-changes .change.upd::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-yellow);
  -webkit-mask: url("../images/icons/history-upd.svg") center center / 8px 8px no-repeat;
  mask: url("../images/icons/history-upd.svg") center center / 8px 8px no-repeat;
}

.agenda-tasks-task-detail-history .history .history-changes .change.upd::before {
  mask-position: left 3px;
  -webkit-mask-position: left 3px;
}

.agenda-tasks-task-detail-history .history .history-text {
  line-height: 1.3;
  white-space: pre-wrap;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-task-detail-history .history-search {
    padding: 15px;
  }
  .agenda-tasks-task-detail-history .history-list {
    padding: 0 15px;
  }
}

.mobile-ui .agenda-tasks-task-detail-history .history-search {
  padding: 20px;
}

.mobile-ui .agenda-tasks-task-detail-history .history-list {
  padding: 0 20px;
}

.agenda-tasks-new-task-dialog .dialog {
  padding: 0px;
  max-height: calc(100vh - 100px);
  width: 520px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'body' 'footer';
}

.agenda-tasks-new-task-dialog .body {
  margin: 0;
  padding: 30px 20px;
  grid-area: 'body';
  overflow: auto;
}

.agenda-tasks-new-task-dialog .wrap {
  padding-bottom: 0;
}

.agenda-tasks-new-task-dialog .footer {
  display: flex;
  padding: 0 0 30px 0;
  justify-content: center;
  grid-area: 'footer';
}

.agenda-tasks-new-task-dialog .footer button {
  margin-right: 10px;
  padding-left: 40px;
  padding-right: 40px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .agenda-tasks-new-task-dialog .body {
    padding: 10px;
  }
  .agenda-tasks-new-task-dialog .footer {
    padding: 0 0 15px 0;
  }
}

.workflow-main-view {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'ls tb' 'ls bo';
}

.workflow-main-view > .loading,
.workflow-main-view > .welcome {
  grid-area: bo;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-main-view > .loading .text,
.workflow-main-view > .welcome .text {
  color: var(--app-grey);
  font-size: 24px;
}

.workflow-main-view > .toolbar {
  padding: 15px;
}

.workflow-main-view > .toolbar .add {
  display: flex;
  align-items: center;
}

.workflow-main-view > .toolbar .add .icon {
  margin-right: 10px;
}

.workflow-defs-list {
  grid-area: ls;
  padding: 30px;
  width: 300px;
  background: var(--app-lightest-grey);
  border-right: 1px solid var(--app-light-grey);
  transition: width .2s;
  transition-timing-function: ease-out;
  overflow: hidden;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background: #fff;
}

.workflow-defs-list .header {
  display: flex;
  font-size: 16px;
  height: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-light-grey);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.workflow-defs-list .header > .icon {
  --color: var(--app-text-color);
  flex-shrink: 0;
  margin-right: 13px;
  width: calc(0.7 * var(--width));
  height: calc(0.7 * var(--height));
}

.workflow-defs-list .header .title {
  color: var(--app-text-color);
  flex: 1;
}

.workflow-defs-list .header button {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  justify-content: flex-end;
}

.workflow-defs-list .header button .icon {
  flex-shrink: 0;
  --color: var(--app-text-color);
}

.workflow-defs-list .message {
  margin: 0;
  color: var(--app-grey);
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.workflow-defs-list .message .icon {
  margin-right: 5px;
}

.workflow-defs-list .message.error {
  color: var(--app-red);
}

.workflow-defs-list .item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.workflow-defs-list .item > a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  transition: color .12s;
  font-size: 15px;
  color: var(--app-grey);
  text-decoration: none;
  flex: 1;
}

.workflow-defs-list .item > a:hover {
  color: var(--app-text-color);
}

.workflow-defs-list .item > .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  justify-content: flex-end;
  padding-right: 5px;
}

.workflow-defs-list .item > .menu .icon {
  --color: var(--app-grey);
}

.workflow-defs-list .item > .menu:hover .icon {
  --color: var(--app-text-color);
}

.workflow-defs-list .item.selected > a {
  font-weight: 500;
  color: var(--app-text-color);
}

.workflow-process-def-editor {
  grid-area: bo;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'bo rs';
}

.workflow-process-def-editor > .main {
  grid-area: bo;
  background: var(--app-red);
  margin-left: 15px;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: var(--box-shadow-light-border);
  overflow: auto;
  position: relative;
}

.workflow-process-def-editor > .main > .modified {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--app-red);
}

.workflow-process-def-editor > .main > .steps {
  width: 300px;
  padding: 50px 15px;
  margin: auto;
}

.workflow-process-def-editor > .main > .steps .step {
  background: #fff;
  color: var(--app-color);
  border: 2px solid var(--app-color);
  padding: 5px 15px;
  height: 70px;
  font-size: 16px;
  border-radius: 20px;
  box-shadow: var(--box-shadow-light-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.workflow-process-def-editor > .main > .steps .step .contenteditable:empty::before {
  content: attr(data-placeholder);
  color: var(--app-light-grey);
}

.workflow-process-def-editor > .main > .steps .step .contenteditable:empty:hover::before,
.workflow-process-def-editor > .main > .steps .step .contenteditable:empty:focus::before {
  color: var(--app-grey);
}

.workflow-process-def-editor > .main > .steps .step .warning {
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
}

.workflow-process-def-editor > .main > .steps .step .warning .icon {
  --color: var(--app-yellow);
}

.workflow-process-def-editor > .main > .steps .step .tool {
  border-radius: 30px;
  border: 1px solid var(--app-light-grey);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  z-index: 2;
  display: none;
}

.workflow-process-def-editor > .main > .steps .step .tool .icon {
  --color: var(--app-grey);
}

.workflow-process-def-editor > .main > .steps .step .tool:hover {
  background: var(--app-light-grey);
}

.workflow-process-def-editor > .main > .steps .step .tool:hover .icon {
  --color: var(--app-text-color);
}

.workflow-process-def-editor > .main > .steps .step .add {
  bottom: -12px;
}

.workflow-process-def-editor > .main > .steps .step .remove {
  right: -12px;
}

.workflow-process-def-editor > .main > .steps .step.selected {
  background: var(--app-color);
  color: #fff;
}

.workflow-process-def-editor > .main > .steps .step.selected .warning .icon {
  --color: var(--app-yellow);
}

.workflow-process-def-editor > .main > .steps .step:hover .tool {
  display: flex;
}

.workflow-process-def-editor > .main > .steps .transition {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  position: relative;
}

.workflow-process-def-editor > .main > .steps .transition > svg {
  position: absolute;
}

.workflow-process-def-editor > .main > .steps .transition > .contenteditable {
  background: #fff;
  padding: 4px;
  z-index: 1;
}

.workflow-process-def-editor > .detail {
  grid-area: rs;
  margin: 15px;
  margin-top: 0;
  width: 300px;
  background: #fff;
  border-radius: 5px;
  box-shadow: var(--box-shadow-light-border);
  padding: 30px 30px;
  overflow: auto;
}

.workflow-process-def-editor > .detail > .title {
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 24px;
  font-weight: 500;
}

.workflow-process-def-editor > .detail > .separator-label {
  margin: 15px 0;
}

.workflow-process-def-editor > .detail > hr {
  background: var(--app-light-grey);
  border: 0;
  height: 1px;
  margin: 20px 0;
}

.workflow-process-list {
  grid-area: bo;
  padding: 15px;
  overflow: auto;
}

.workflow-process-list > .more-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.workflow-process-list > .empty {
  padding: var(--pad);
  margin-top: var(--pad-4);
  text-align: center;
  font-size: 24px;
  color: var(--app-grey);
  text-shadow: #fff 0px 1px 1px;
}

.workflow-process-list table.processes-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--app-light-grey);
  table-layout: fixed;
}

.workflow-process-list table.processes-table td, .workflow-process-list table.processes-table th {
  padding: 6px 10px;
  text-align: left;
  border-right: 1px solid var(--app-light-grey);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.workflow-process-list table.processes-table td {
  background: #fff;
}

.workflow-process-list table.processes-table tr:hover td {
  background: var(--app-light-grey);
}

.workflow-process-list table.processes-table col.id {
  width: 100px;
}

.workflow-process-list table.processes-table col.task {
  width: 280px;
}

.workflow-process-list table.processes-table col.user {
  width: 230px;
}

.workflow-process-list table.processes-table col.state {
  width: 110px;
}

.workflow-process-list table.processes-table col.menu {
  width: 40px;
}

.workflow-process-list table.processes-table .user > * {
  vertical-align: middle;
}

.workflow-process-list table.processes-table .user .user-bubble {
  display: inline-flex;
  margin-right: var(--pad-1-2);
  margin-top: 4px;
  margin-left: 3px;
}

.workflow-process-list table.processes-table .menu {
  text-align: center;
  cursor: pointer;
}

.workflow-process-list .item {
  display: flex;
  background: #fff;
  margin-bottom: 5px;
  box-shadow: var(--box-shadow-light-border);
  padding: var(--pad-1-2) var(--pad);
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  color: var(--app-text-color);
  border-radius: 25px;
  cursor: pointer;
}

.workflow-process-list .item:hover {
  background: var(--app-light-grey);
}

.workflow-process-list .item > *:not(:last-child) {
  margin-right: var(--pad-1-2);
}

.workflow-process-list .item .state {
  margin: var(--pad-1-2) 0;
  margin-right: 10px;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: #fff;
  border-color: var(--app-light-grey);
  display: flex;
  justify-content: center;
  align-items: center;
}

.workflow-process-list .item .state .icon {
  width: 60%;
  height: 60%;
  --color: var(--app-grey);
}

.workflow-process-list .item .state-completed {
  border-color: var(--app-color);
  background-color: #fff;
}

.workflow-process-list .item .state-completed .icon {
  --color: var(--app-color);
}

.workflow-process-list .item .state-cancelled {
  border-color: var(--app-red);
}

.workflow-process-list .item .state-cancelled .icon {
  --color: var(--app-red);
}

.workflow-process-list .item .user-bubble {
  margin-right: var(--pad-1-2);
  margin-top: 4px;
  margin-left: 3px;
}

.workflow-process-list .item .id {
  margin-left: 10px;
  color: var(--app-grey);
  font-size: 12px;
}

.workflow-process-list .item .subject {
  font-weight: bold;
}

.workflow-process-list .item .text {
  white-space: pre-wrap;
  align-self: center;
  flex: 1;
  min-width: 0;
}

.workflow-process-list .item .assignees {
  display: flex;
  align-items: center;
  align-self: center;
}

.workflow-process-list .item .assignees .user-bubble, .workflow-process-list .item .assignees .more {
  border: 1px solid #fff;
  margin: 0;
  margin-right: -14px;
}

.workflow-process-list .item .assignees .more {
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--app-light-grey);
}

.workflow-process-list .item .assignees .more .icon {
  width: 14px;
  height: 14px;
}

.workflow-process-list .item .assignees .more .icon {
  --color: var(--app-text-color);
}

.workflow-process-list .item .menu {
  margin-left: 10px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.workflow-process-list .item.selected {
  background: var(--app-color);
  box-shadow: none;
  color: #fff;
}

.workflow-process-list .item.selected .id {
  color: #fff;
  opacity: 0.8;
}

.workflow-process-list .item.selected .state-running {
  border-color: #fff;
  background: transparent;
}

.workflow-process-list .item.selected .state-running .icon {
  --color: #fff;
}

.settings-view {
  height: 100%;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-areas: 'h h' 't b';
  grid-template-rows: auto minmax(0, 1fr);
}

.settings-view.hide-tabs {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'h' 'b';
}

.settings-view.hide-tabs .settings-view-sidebar {
  display: none;
}

.settings-view .app-header-bar {
  grid-area: h;
}

.mobile-ui .settings-view .app-header-bar {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'tl tr' 'b b' 'u u';
  height: auto;
}

.mobile-ui .settings-view .app-header-bar .app-logo {
  grid-area: tl;
  align-self: center;
  height: 42px;
}

.mobile-ui .settings-view .app-header-bar .user-area {
  grid-area: tr;
  justify-self: end;
  align-self: center;
}

.mobile-ui .settings-view .app-header-bar .user-area .user {
  margin: 0 10px 0 0;
}

.mobile-ui .settings-view .app-header-bar .center-area {
  grid-area: b;
  padding: 10px 0;
  background: var(--app-grey);
}

.mobile-ui .settings-view .app-header-bar .update-area {
  grid-area: u;
}

.mobile-ui .settings-view .app-header-bar .apps-area {
  display: none;
}

.settings-view .settings-view-sidebar {
  grid-area: t;
  padding: 10px;
  background: #fff;
  border-right: 1px solid var(--app-light-grey);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.settings-view .settings-view-sidebar .tab {
  display: block;
  background: var(--app-light-grey);
  padding: 6px 10px;
  text-decoration: none;
  color: var(--app-text-color);
  margin-bottom: 5px;
  border-radius: 5px;
}

.settings-view .settings-view-sidebar .tab.selected {
  color: #fff;
  background: var(--app-dark-grey);
}

.settings-view .settings-view-body {
  grid-area: b;
  overflow: auto;
}

.settings-billing-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settings-billing-view > .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

.mobile-ui .settings-billing-view > .header {
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
}

.settings-billing-view > .header > .title {
  width: 700px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 38px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  text-align: center;
  color: var(--app-text-color);
  line-height: 1;
  margin-top: 30px;
}

.mobile-ui .settings-billing-view > .header > .title {
  width: auto;
}

.settings-billing-view > .header > .button {
  flex-shrink: 0;
}

.mobile-ui .settings-billing-view > .header > .button {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: auto;
}

.settings-billing-view > .header > .spacer {
  width: 150px;
}

.settings-billing-view > .tab-header {
  display: flex;
  align-items: stretch;
  width: 700px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--app-light-grey);
}

.settings-billing-view > .tab-header > .tab {
  text-decoration: none;
  color: var(--app-grey);
  margin-right: 30px;
  padding-bottom: 20px;
  line-height: 1;
  font-size: 16px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .settings-billing-view > .tab-header > .tab {
    font-size: 14px;
  }
}

.settings-billing-view > .tab-header > .tab.selected {
  color: var(--app-text-color);
  font-weight: 500;
  border-bottom: 2px solid var(--app-text-color);
}

.settings-billing-view > .tab-body {
  width: 700px;
}

.mobile-ui .settings-billing-view {
  display: block;
}

.mobile-ui .settings-billing-view > .tab-header {
  margin: 0px 15px 30px 15px;
  width: auto;
}

.mobile-ui .settings-billing-view > .tab-body {
  width: auto;
}

.settings-billing-license-view {
  background: #fff;
  box-shadow: var(--box-shadow-light-border);
  border-radius: 5px;
  padding: 23px 30px;
  position: relative;
  transition: height 0.5s;
}

.settings-billing-license-view > .header {
  display: flex;
  align-items: center;
}

.settings-billing-license-view > .header > .license-info {
  flex: 1;
}

.settings-billing-license-view > .header > .license-info > .license-info-header {
  display: flex;
  align-items: center;
}

.settings-billing-license-view > .header > .license-info > .license-info-header > .license-type {
  display: inline;
  font-size: 18px;
  font-weight: bold;
  color: var(--app-text-color);
}

.settings-billing-license-view > .header > .license-info > .license-info-header > .license-status {
  display: inline;
  font-size: 12px;
  font-weight: 500;
  border-radius: 5px;
  padding: 4px 8px;
  align-self: start;
  justify-self: start;
  margin-left: 5px;
}

.settings-billing-license-view > .header > .license-info > .license-info-header > .license-status.active {
  color: var(--app-green);
  background: var(--app-light-green);
}

.settings-billing-license-view > .header > .license-info > .license-info-header > .license-status.expired {
  color: #fff;
  background: var(--app-red);
}

.settings-billing-license-view > .header > .license-info > .license-info-header > .license-status.ordered {
  color: #fff;
  background: var(--app-grey);
}

.settings-billing-license-view > .header > .license-info > .license-info-header > .refreshing {
  border: 2px solid var(--app-grey);
  border-top-color: transparent;
  border-left-color: transparent;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  animation: spinner 0.6s infinite linear;
  display: inline-block;
  margin-left: 4px;
  position: relative;
  top: 3px;
}

.settings-billing-license-view > .header > .license-info > .license-name {
  font-weight: 500;
}

.settings-billing-license-view > .header > .license-info > .license-note {
  color: var(--app-grey);
}

.settings-billing-license-view > .header > .license-units-info {
  display: flex;
  align-items: center;
}

.settings-billing-license-view > .header > .license-units-info > .user-count {
  font-size: 14px;
  font-weight: bold;
  color: var(--app-text-color);
}

.settings-billing-license-view > .header > .provider-info > .provider-label {
  color: var(--app-grey);
}

.settings-billing-license-view > .header > .provider-info > .provider-email {
  color: var(--app-text-color);
}

.settings-billing-license-view > .header > .buttons-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.settings-billing-license-view > .header button {
  margin-left: 20px;
}

.settings-billing-license-view > .header button.user-add {
  margin-left: 4px;
}

.settings-billing-license-view > .info-box {
  background: var(--app-lightest-grey);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 10px;
}

.settings-billing-license-view > .info-box button {
  margin-left: 10px;
  position: relative;
  padding-left: 26px;
}

.settings-billing-license-view > .info-box button::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
  mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
}

.settings-billing-license-view > .info-box button::before {
  mask-position: 10px center;
  -webkit-mask-position: 10px center;
}

.settings-billing-license-view > .licenses-list > .user-slot {
  display: flex;
  align-items: center;
  min-height: 60px;
}

.settings-billing-license-view > .licenses-list > .user-slot > .fill {
  flex: 1;
}

.settings-billing-license-view > .licenses-list > .user-slot > .menu {
  width: 30px;
  position: relative;
  align-self: stretch;
  cursor: pointer;
}

.settings-billing-license-view > .licenses-list > .user-slot > .menu::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.settings-billing-license-view > .licenses-list > .user-slot > .menu:hover {
  position: relative;
}

.settings-billing-license-view > .licenses-list > .user-slot > .menu:hover::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
  mask: url("../images/icons/vertical-dots2.svg") center center / 3px 15px no-repeat;
}

.settings-billing-license-view > .licenses-list > .user-slot.myself .user-name, .settings-billing-license-view > .licenses-list > .user-slot.myself .user-email {
  font-weight: bold;
}

.settings-billing-license-view > .licenses-list > .user-slot .user-type {
  font-size: 12px;
  font-weight: 500;
  color: var(--app-grey);
  border: 1px solid var(--app-light-grey);
  border-radius: 5px;
  padding: 4px 8px;
  margin-left: 10px;
}

.settings-billing-license-view > .licenses-list > .user-slot button {
  position: relative;
  padding-left: 26px;
}

.settings-billing-license-view > .licenses-list > .user-slot button::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
  mask: url("../images/icons/plus.svg") center center / 10px 10px no-repeat;
}

.settings-billing-license-view > .licenses-list > .user-slot button::before {
  mask-position: 10px center;
  -webkit-mask-position: 10px center;
}

.settings-billing-license-view > .licenses-list > .user-slot:not(:last-child) {
  border-bottom: 1px solid var(--app-light-grey);
}

.settings-billing-license-view > .licenses-list > .more-hidden {
  position: relative;
  height: 40px;
}

.settings-billing-license-view > .licenses-list > .more-hidden::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/horizontal-dots.svg") center center / 15px 3px no-repeat;
  mask: url("../images/icons/horizontal-dots.svg") center center / 15px 3px no-repeat;
}

.settings-billing-license-view > .licenses-expander {
  bottom: 0px;
  left: calc(50% - 30px);
  border-radius: 5px 5px 0px 0px;
  width: 60px;
  height: 30px;
  border: 1px solid var(--app-lightest-grey);
  border-bottom: 0;
  z-index: 1;
  position: relative;
  position: absolute;
  transition: opacity 0.3s;
  opacity: 1;
  cursor: pointer;
  display: none;
}

.settings-billing-license-view > .licenses-expander::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/angle-down.svg") center center / 22.0202px 12.0100582px no-repeat;
  mask: url("../images/icons/angle-down.svg") center center / 22.0202px 12.0100582px no-repeat;
}

.settings-billing-license-view > .licenses-expander:hover {
  background-color: var(--app-lightest-grey);
}

.settings-billing-license-view:not(.expanded) > .info-box,
.settings-billing-license-view:not(.expanded) > .licenses-list {
  display: none;
}

.settings-billing-license-view.expanded > .licenses-expander {
  position: relative;
  position: absolute;
}

.settings-billing-license-view.expanded > .licenses-expander::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/angle-up.svg") center center / 22.0202px 12.0100582px no-repeat;
  mask: url("../images/icons/angle-up.svg") center center / 22.0202px 12.0100582px no-repeat;
}

.settings-billing-license-view.expanding > .licenses-expander {
  position: relative;
  position: absolute;
}

.settings-billing-license-view.expanding > .licenses-expander::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-text-color);
  -webkit-mask: url("../images/icons/horizontal-dots.svg") center center / 30px 6px no-repeat;
  mask: url("../images/icons/horizontal-dots.svg") center center / 30px 6px no-repeat;
}

.settings-billing-license-view.shared-plan > .info-box,
.settings-billing-license-view.shared-plan > .licenses-list,
.settings-billing-license-view.shared-plan > .licenses-expander {
  display: none;
}

.mobile-ui .settings-billing-license-view {
  padding: 10px 15px;
  padding-bottom: 50px;
  border-radius: 0;
}

.mobile-ui .settings-billing-license-view > .header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: 't t' 'ml mr' 'b b';
}

.mobile-ui .settings-billing-license-view > .header > .buttons-wrap {
  grid-area: mr;
  width: auto;
  align-items: flex-start;
}

.mobile-ui .settings-billing-license-view > .header > .license-units-info,
.mobile-ui .settings-billing-license-view > .header > .provider-info {
  grid-area: ml;
}

.mobile-ui .settings-billing-license-view > .header > .license-info {
  grid-area: t;
  margin-bottom: 20px;
}

.desktop-ui .settings-billing-license-view:not(.expanded):not(:hover) > .licenses-expander {
  visibility: hidden;
  opacity: 0;
}

.settings-billing-licenses-list-view .plans-toolbar {
  margin-bottom: 20px;
}

.settings-billing-licenses-list-view .plan-list > * {
  margin-bottom: 10px;
}

.settings-billing-licenses-list-view .plan-list > * .loading {
  position: relative;
  animation: slowblink 1s ease-in-out;
}

.settings-billing-licenses-list-view .plan-list > * .loading::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-green);
  -webkit-mask: url("../images/icons/horizontal-dots.svg") center center / 45px 9px no-repeat;
  mask: url("../images/icons/horizontal-dots.svg") center center / 45px 9px no-repeat;
}

.settings-billing-info-view,
.settings-billing-invoices-view {
  background: #fff;
  text-align: center;
  padding: 40px;
  box-shadow: var(--box-shadow-light-border);
  border-radius: 5px;
}

.settings-billing-info-view img,
.settings-billing-invoices-view img {
  max-width: 80%;
}

.settings-billing-info-view .text,
.settings-billing-invoices-view .text {
  font-size: 28px;
  color: var(--app-grey);
  margin-top: 30px;
}

.plan-chooser {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.plan-chooser .plan {
  padding: 0 12px;
  height: 40px;
  display: flex;
  align-items: center;
  background: var(--app-light-grey);
  border-radius: 5px;
  text-decoration: none;
  padding-left: 44px;
}

.plan-chooser .plan .name {
  color: var(--app-text-color);
  font-weight: bold;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: var(--pad-1-2);
}

.plan-chooser .plan .cost {
  color: var(--app-grey);
}

.plan-chooser .plan.selected {
  position: relative;
  background-color: var(--app-color);
}

.plan-chooser .plan.selected::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  -webkit-mask: url("../images/icons/check-mark.svg") center center / 18px 12.15px no-repeat;
  mask: url("../images/icons/check-mark.svg") center center / 18px 12.15px no-repeat;
}

.plan-chooser .plan.selected::before {
  mask-position: 14px center;
  -webkit-mask-position: 14px center;
}

.plan-chooser .plan.selected .name, .plan-chooser .plan.selected .cost {
  color: white;
}

.settings-billing-license-order-dialog label {
  color: var(--app-grey);
}

.settings-billing-license-order-summary-dialog .dialog {
  width: 700px;
}

.settings-billing-license-order-summary-dialog h2 {
  margin-top: 40px;
}

.settings-billing-license-order-summary-dialog .order-props {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 5px;
  align-items: baseline;
  margin-bottom: 30px;
}

.settings-billing-license-order-summary-dialog .order-props .prop {
  display: contents;
}

.settings-billing-license-order-summary-dialog .order-props .prop .label {
  padding-right: 20px;
  color: var(--app-grey);
}

.settings-billing-license-order-summary-dialog .order-props .prop .value {
  font-weight: bold;
}

.settings-billing-license-order-summary-dialog .order-props .prop[data-prop="total-pay"] .value {
  font-size: 20px;
}

.invoices-table {
  width: 100%;
}

.invoices-table td, .invoices-table th {
  padding: 5px;
  text-align: left;
}

@keyframes slowblink {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.sysmgmt-data-table {
  display: grid;
  overflow: auto;
  position: relative;
  align-content: start;
  grid-auto-rows: max-content;
}

.sysmgmt-data-table .header {
  display: contents;
}

.sysmgmt-data-table .row {
  display: contents;
}

.sysmgmt-data-table .row:hover > * {
  background-color: var(--app-light-grey);
}

.sysmgmt-data-table .row.selected > * {
  background-color: var(--app-text-color);
  color: #fff;
}

.sysmgmt-data-table .header-column {
  font-weight: bold;
  background: var(--app-light-grey);
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
}

.sysmgmt-data-table .row > *, .sysmgmt-data-table .header > * {
  padding: 3px 8px;
  word-wrap: normal;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.sysmgmt-data-table .header > * {
  white-space: normal;
}

.sysmgmt-data-table .menu {
  position: relative;
  cursor: pointer;
}

.sysmgmt-data-table .menu::before {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--app-grey);
  -webkit-mask: url("../images/icons/horizontal-dots.svg") center center / 15px 3px no-repeat;
  mask: url("../images/icons/horizontal-dots.svg") center center / 15px 3px no-repeat;
}

.sysmgmt-view {
  height: 100%;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-areas: 'h h' 't b';
  grid-template-rows: auto minmax(0, 1fr);
}

.sysmgmt-view.hide-tabs {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'h' 'b';
}

.sysmgmt-view .app-header-bar {
  grid-area: h;
}

.sysmgmt-view .sysmgmt-view-tabs {
  grid-area: t;
  padding: 10px;
  background: #fff;
  border-right: 1px solid var(--app-light-grey);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.sysmgmt-view .sysmgmt-view-tabs .tab {
  display: block;
  background: var(--app-light-grey);
  padding: 6px 10px;
  text-decoration: none;
  color: var(--app-text-color);
  margin-bottom: 5px;
  border-radius: 5px;
}

.sysmgmt-view .sysmgmt-view-tabs .tab.selected {
  color: #fff;
  background: var(--app-dark-grey);
}

.sysmgmt-view .sysmgmt-view-body {
  padding: 10px;
  grid-area: b;
}

.sysmgmt-login-view {
  margin: auto;
  max-width: 340px;
  margin-top: 30px;
  background: #fff;
  border-radius: 5px;
  box-shadow: var(--box-shadow-dark-large);
  padding: 50px;
}

.sysmgmt-login-view .title {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 200;
  text-align: center;
  color: var(--app-text-color);
  margin: 0 0 50px 0;
}

.sysmgmt-view-filterable-table {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: 't' 'b';
}

.sysmgmt-view-filterable-table .sysmgmt-data-table {
  grid-area: b;
}

.sysmgmt-view-filterable-table .toolbar {
  grid-area: t;
  margin-bottom: 10px;
}

.sysmgmt-view-filterable-table .toolbar button {
  padding: 0;
  width: 32px;
  height: 32px;
}

.sysmgmt-view-filterable-table .toolbar .export {
  width: auto;
  padding: 0 10px;
}

.sysmgmt-view-filterable-table .toolbar .search-field {
  width: 380px;
}

.sysmgmt-users-filter {
  padding: 30px;
  background: #fff;
  position: relative;
  width: 520px;
  border-radius: 5px;
  box-shadow: var(--box-shadow-dark-large);
}

.sysmgmt-users-filter .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  cursor: pointer;
}

.sysmgmt-users-filter .close-button .icon {
  --color: var(--app-grey);
}

.sysmgmt-users-filter .close-button:hover .icon {
  --color: var(--app-text-color);
}

.sysmgmt-users-filter .fields-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-rows: minmax(45px, auto);
  grid-gap: 10px;
}

.sysmgmt-users-filter .fields-grid > label {
  font-weight: 500;
  padding-top: 8px;
  padding-right: 10px;
}

.sysmgmt-users-filter .fill {
  flex: 1;
}

.sysmgmt-users-filter input {
  font-size: 14px;
  padding: 6px 0 4px 0;
}

.sysmgmt-users-filter .date-time-field {
  display: inline-block;
}

.sysmgmt-users-filter .date-time-field input {
  width: 150px;
  border: 0;
  border-bottom: 1px solid var(--app-light-grey);
  padding: 8px 0;
}

.sysmgmt-users-filter .date-time-field input:focus {
  border-color: var(--app-color);
}

.sysmgmt-users-filter .condition-field-timerange {
  display: flex;
  align-items: flex-start;
}

.sysmgmt-users-filter .condition-field-timerange .sep {
  margin: 5px 10px 0 10px;
  font-weight: bold;
  font-size: 18px;
}

.sysmgmt-users-filter > .bottom-buttons {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.sysmgmt-users-filter > .bottom-buttons > *:not(:first-child) {
  margin-left: 10px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .sysmgmt-users-filter .fields-grid {
    grid-gap: 0 10px;
  }
  .sysmgmt-users-filter > .bottom-buttons {
    margin-top: 20px;
  }
}

.sysmgmt-new-license-dialog .dialog {
  width: 500px;
}

.sysmgmt-new-license-dialog .form-field {
  display: flex;
  align-items: center;
}

.sysmgmt-new-license-dialog .form-field label {
  width: 110px;
  min-width: 0;
  color: var(--app-grey);
  margin-bottom: 0px;
  font-size: 16px;
}

@media screen and (max-height: 768px), screen and (max-width: 1400px) {
  .sysmgmt-new-license-dialog .form-field label {
    font-size: 14px;
  }
}

.sysmgmt-new-license-dialog .form-field input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.sysmgmt-new-license-dialog .form-field[data-name=units_total] .validity-mark, .sysmgmt-new-license-dialog .form-field[data-name=period_index] .validity-mark {
  right: 20px;
}

.sysmgmt-users-combo-list .item {
  display: flex;
  align-items: center;
}

.sysmgmt-users-combo-list .item .name {
  font-size: 12px;
  color: var(--app-grey);
  margin-left: 10px;
}

.sysmgmt-user-licenses-dialog .dialog {
  width: 90vw;
  height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'title' 'body';
}

.sysmgmt-user-licenses-dialog .dialog .title {
  grid-area: 'title';
}

.sysmgmt-user-licenses-dialog .dialog .body {
  grid-area: 'body';
}

.sysmgmt-user-licenses-dialog .dialog .body > * {
  height: 100%;
}

.sysmgmt-license-admins-dialog .dialog {
  width: 600px;
  height: 80vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'title' 'body';
}

.sysmgmt-license-admins-dialog .dialog .title {
  grid-area: 'title';
}

.sysmgmt-license-admins-dialog .dialog .body {
  grid-area: 'body';
  overflow: auto;
}

.sysmgmt-view-mobile {
  text-align: center;
  font-size: 22px;
  color: var(--app-grey);
  padding: 30px;
}

.sysmgmt-user-select-popup .items-list {
  margin-right: -25px;
}

.sysmgmt-user-select-popup .items-list > .user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.sysmgmt-user-select-popup .items-list > .user .info {
  flex: 1 0 0px;
  min-width: 0;
}

.sysmgmt-user-select-popup .items-list > .user .user-name {
  color: var(--app-text-color);
  font-weight: 500;
  line-height: 1;
}

.sysmgmt-user-select-popup .items-list > .user .user-email {
  font-size: 10px;
  font-weight: 500;
  margin-top: 3px;
  color: var(--app-grey);
}

.sysmgmt-user-select-popup .items-list > .user:hover {
  background: var(--app-lightest-grey);
}

.sysmgmt-user-select-popup .items-list > .user:hover .user-name {
  color: var(--app-color);
}