zammad/app/assets/stylesheets/zammad.scss

$high-priority-color: hsl(360, 71%, 60%);
$low-priority-color: hsl(200, 68%, 73%);
$minWidth: 1024px;
$sidebarWidth: 280px;
$navigationWidth: 260px;
$mobileNavigationWidth: 50px;
$mobileNavigationWidthOpen: 220px;

:root {
  --button-action-color: hsl(0, 0%, 60%);
  --button-background: white;
  --button-background-active: hsl(0, 0, 98%);
  --button-active: hsl(204, 7%, 28%);
  --button-active-active: hsla(0, 0%, 0%, 0.55);
  --button-primary-background: hsl(203, 65%, 55%);
  --button-primary-background-active: hsl(203, 65%, 45%);
  --header-primary: hsl(202, 8%, 28%);
  --header-secondary: hsl(198, 10%, 69%);
  --text-normal: hsl(60, 1%, 34%);
  --text-muted: hsl(213, 3%, 64%);
  --text-muted-highlight: hsl(205, 90%, 90%);
  --text-muted-alt: hsl(197, 16%, 65%);
  --text-link: hsl(204, 72%, 50%);
  --text-inverted: white;
  --text-nav: hsl(204, 72%, 50%);
  --menu-text: hsl(0, 0%, 74%);
  --menu-icon: hsl(206, 5%, 42%);
  --nav-icon: hsl(0, 0%, 50%);
  --highlight: hsl(205, 90%, 60%);
  --interactive-primary: black;
  --interactive-muted: hsl(210, 3%, 71%);
  --interactive-muted-active: hsl(210, 4%, 71%);
  --interactive-muted-alt: hsl(197, 19%, 78%);
  --interactive-muted-alt-selected: hsl(206, 7%, 37%);
  --background-primary: hsl(210, 17%, 98%);
  --background-primary-alt: hsl(197, 16%, 94%);
  --background-secondary: white;
  --background-secondary-hover: hsl(239, 4%, 95%);
  --background-tertiary: hsl(233, 9%, 19%);
  --background-quaternary: hsl(231, 9%, 16%);
  --background-quaternary-alt: hsl(228, 17%, 91%);
  --background-popover: white;
  --background-active: hsl(233, 9%, 19%);
  --background-highlight: hsl(200, 100%, 91%);
  --background-article-meta: hsl(212, 14%, 99%);
  --background-article-customer: hsl(201, 46%, 93%);
  --background-article-customer-meta: hsl(201, 43%, 96%);
  --background-modifier-accent: hsla(0, 0%, 0%, 0.04);
  --background-modifier-accent-light: hsla(0, 0%, 0%, 0.02);
  --background-modifier-accent-dark: hsla(0, 0%, 0%, 0.3);
  --background-modifier-lighter: hsla(0, 0%, 100%, 0.06);
  --background-modifier-border: hsla(0, 0%, 0%, 0.1);
  --background-modifier-hover: hsla(240, 3%, 50%, 0.1);
  --backdrop-clue-start: hsla(202, 68%, 54%, 0.1);
  --backdrop-clue-end: hsla(202, 68%, 54%, 0.9);
  --border: hsl(0, 0%, 90%);
  --border-alt: hsl(198, 18%, 86%);
  --border-highlight: hsl(200, 71%, 59%);
  --border-internal: hsl(18, 91%, 89%);
  --border-internal-stripe: hsl(18, 94%, 95%);
  --border-article-customer: hsl(199, 38%, 90%);
  --border-article-customer-selected: hsl(199, 44%, 85%);
  --shadow-highlight: hsl(201, 62%, 90%);
  --supergood-color: hsl(145, 51%, 45%);
  --good-color: hsl(62, 45%, 46%);
  --ok-color: hsl(41, 100%, 49%);
  --bad-color: hsl(30, 93%, 50%);
  --superbad-color: hsl(19, 90%, 51%);
  --ghost-color: hsl(0, 0%, 74%);
  --danger-color: hsl(0, 65%, 55%);
  --pending-color: hsl(206, 7%, 28%);
  --elevation-stroke: 0 1px hsl(210, 7%, 94%);
  --elevation-low: 0 1px 5px hsla(205, 30%, 30%, 0.1);
  --elevation-high: 0 1px 14px hsla(208, 95%, 3%, 0.25);
  --highlighter-yellow: hsl(48, 81%, 82%);
  --highlighter-green: hsl(105, 54%, 80%);
  --highlighter-blue: hsl(207, 92%, 85%);
  --highlighter-pink: hsl(338, 90%, 82%);
  --highlighter-purple: hsl(288, 62%, 86%);
  --file-icon-background: white;
  --file-icon-color: hsl(198, 18%, 86%);
  --tag-text: hsl(198, 5%, 41%);
  --tag-background: hsl(198, 19%, 92%);
}

// dark mode
[data-theme='dark'] {
  --button-action-color: hsl(0, 0%, 80%);
  --button-background: hsla(0, 0%, 100%, 0.03);
  --button-background-active: hsla(0, 0%, 100%, 0.015);
  --button-active: hsla(0, 0%, 100%, 0.1);
  --button-active-active: hsla(0, 0%, 100%, 0.08);
  --header-primary: white;
  --header-secondary: hsl(198, 5%, 73%);
  --text-normal: hsl(205, 1%, 86%);
  --text-muted: hsl(213, 3%, 60%);
  --text-muted-alt: hsl(213, 8%, 61%);
  --text-link: hsl(202, 72%, 50%);
  --text-inverted: white;
  --text-nav: hsl(205, 1%, 84%);
  --nav-icon: hsl(0, 0%, 50%);
  --highlight: hsl(205, 90%, 60%);
  --interactive-primary: white;
  --interactive-muted: hsl(213, 3%, 64%);
  --interactive-muted-active: hsl(213, 3%, 35%);
  --interactive-muted-alt: hsl(209, 5%, 35%);
  --interactive-muted-alt-selected: hsl(205, 4%, 75%);
  --background-primary: hsl(230, 5%, 19%);
  --background-primary-alt: hsl(230, 5%, 21%);
  --background-secondary: hsl(230, 5%, 23%);
  --background-secondary-hover: hsl(230, 5%, 20%);
  --background-tertiary: hsl(230, 7%, 17%);
  --background-quaternary: hsl(230, 7%, 13%);
  --background-quaternary-alt: hsl(230, 4%, 30%);
  --background-popover: hsl(216, 3%, 30%);
  --background-active: var(--highlight);
  --background-highlight: hsl(205, 30%, 27%);
  --background-article-meta: hsl(230, 7%, 25%);
  --background-article-customer: hsl(218, 8%, 32%);
  --background-article-customer-meta: hsl(218, 6%, 30%);
  --background-modifier-accent: hsla(0, 0%, 0%, 0.12);
  --background-modifier-accent-light: hsla(0, 0%, 0%, 0.06);
  --background-modifier-accent-dark: hsla(0, 0%, 0%, 0.3);
  --background-modifier-lighter: hsla(0, 0%, 100%, 0.08);
  --background-modifier-border: hsla(0, 0%, 0%, 0.17);
  --background-modifier-hover: hsla(230, 5%, 36%, 0.4);
  --backdrop-clue-start: hsla(202, 68%, 54%, 0.1);
  --backdrop-clue-end: hsla(202, 68%, 54%, 0.9);
  --border: hsl(230, 4%, 17%);
  --border-alt: hsl(230, 7%, 18%);
  --border-highlight: hsl(205, 70%, 50%);
  --border-internal: hsl(18, 30%, 39%);
  --border-internal-stripe: hsl(18, 30%, 30%);
  --border-article-customer: hsl(209, 6%, 30%);
  --border-article-customer-selected: hsl(199, 10%, 33%);
  --shadow-highlight: hsl(205, 42%, 36%);
  --supergood-color: hsl(145, 51%, 45%);
  --good-color: hsl(62, 45%, 46%);
  --ok-color: hsl(41, 100%, 49%);
  --bad-color: hsl(30, 93%, 50%);
  --superbad-color: hsl(19, 90%, 51%);
  --ghost-color: hsl(0, 0%, 50%);
  --danger-color: hsl(0, 82%, 59%);
  --pending-color: hsl(205, 1%, 44%);
  --elevation-stroke: 0 1px hsla(0, 0%, 0%, 0.13);
  --elevation-low: 0 1px 5px hsla(0, 0%, 0%, 0.15);
  --elevation-high: 0 1px 14px hsla(0, 0%, 0%, 0.25);
  --highlighter-yellow: hsl(48, 34%, 30%);
  --highlighter-green: hsl(105, 34%, 27%);
  --highlighter-blue: hsl(207, 41%, 30%);
  --highlighter-pink: hsl(338, 28%, 30%);
  --highlighter-purple: hsl(288, 22%, 36%);
  --file-icon-background: hsl(216, 5%, 77%);
  --file-icon-color: hsl(230, 7%, 21%);
  --tag-text: var(--text-normal);
  --tag-background: hsl(230, 5%, 32%);
}

@mixin dark {
  [data-theme='dark'] & {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: 1260px) {
    @content;
  }
}

@mixin small-desktop {
  @media screen and (max-width: 1260px) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@mixin phone {
  @media screen and (max-width: 767px) {
    @content;
  }
}

/* sets LTR and RTL within the same style call */
@mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
  #{$prop}: $value;

  html[dir='rtl'] & {
    #{$inverse-prop}: $value;
    #{$prop}: $default-value;
  }
}

/* adds a property only in RTL */
@mixin rtl($prop, $value) {
  html[dir='rtl'] & {
    #{$prop}: $value;
  }
}

/* adds a property only in LTR */
@mixin ltr($prop, $value) {
  html[dir='ltr'] & {
    #{$prop}: $value;
  }
}

%clickable {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

html {
  height: 100%;
}

body {
  font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.45;
  font-weight: normal;
  background: var(--background-primary);
  height: 100%;
  color: var(--text-normal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
}

/* prevent clickable <use xlink:href="#icon-abc"></use> */
use {
  pointer-events: none;
}

p {
  margin: 12px 0;

  &.subtle {
    color: var(--text-muted);
  }

  &.description {
    color: var(--text-muted);
  }
}

h3 + .description {
  margin-top: 0;
}

strong {
  font-weight: 500;
}

hr {
  border-top-color: var(--background-modifier-border);
}

.inherit-color {
  color: inherit;
}

.text-muted {
  color: var(--text-muted);
}

.text-placeholder {
  color: var(--interactive-muted);
}

.text-small {
  font-size: 12px;
}

.u-highlight {
  color: var(--text-link);
}

.u-dontfold {
  flex-shrink: 0;
}

.u-invisible {
  opacity: 0;
  pointer-events: none;
  position: absolute !important;
}

[data-dir='ltr'] {
  direction: ltr;
}

[data-dir='rtl'] {
  direction: rtl;
}

a {
  outline: none !important;

  @extend .u-highlight;

  &.is-disabled,
  &[disabled] {
    pointer-events: none;
    cursor: not-allowed !important;
    opacity: 0.33;
  }
}

a.create {
  color: hsl(145, 51%, 45%);
  text-decoration: underline;
}

small {
  color: var(--text-muted);
  font-size: 12px;
}

blockquote {
  font-size: inherit;
}

ol,
ul {
  padding-inline-start: 20px;
}

#app {
  display: flex;
  flex: 1;
  min-width: $minWidth;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  @include phone {
    min-width: auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.u-unclickable {
  pointer-events: none;
}

.u-clickable {
  @extend %clickable;
}

.u-unselectable {
  pointer-events: none;
  user-select: none;
}

.u-no-userselect {
  user-select: none;
}

.u-textTruncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-positionOrigin {
  position: relative;
}

.u-inlineBlock {
  display: inline-block;
}

.u-inlinePad {
  margin: 0 5px;
}

.u-notAllowed {
  cursor: not-allowed;
}

.u-overflow-wrap {
  word-break: break-word;

  @supports (overflow-wrap: anywhere) {
    overflow-wrap: anywhere;
    word-break: unset;
  }
}

.zIndex-1 {
  z-index: 100;
}

.zIndex-2 {
  z-index: 200;
}

.zIndex-3 {
  z-index: 300;
}

.zIndex-4 {
  z-index: 400;
}

.zIndex-5 {
  z-index: 500;
}

.zIndex-6 {
  z-index: 600;
}

.zIndex-7 {
  z-index: 700;
}

.zIndex-8 {
  z-index: 800;
}

.zIndex-9 {
  z-index: 900;
}

.zIndex-10 {
  z-index: 1000;
}

.zIndex-11 {
  z-index: 1100;
}

.clickCatcher {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: default;
}

.debug .clickCatcher {
  background: hsla(0, 100%, 50%, 0.13);
}

.debug .clickCatcher + .clickCatcher {
  background: hsla(50, 100%, 50%, 0.13);
}

.clearfix::after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \ */
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* close commented backslash hack */

[contenteditable] {
  display: block;
  outline-style: none;
  border-radius: 3px;

  /* needed to make empty tags editable, otherwise no focus can be set */
  min-height: 10px;
  min-width: 20px;
}

[contenteditable]:hover,
[contenteditable]:focus {
  background: var(--background-primary);
}

[contenteditable]:focus {
  text-overflow: clip !important;
}

[contenteditable].invalid {
  background: #f92;
}

[contenteditable] > .placeholder {
  color: var(--text-muted);
}

[contenteditable] p {
  margin: 0;
}

/* fix for placeholder */
.Medium-placeholder {
  position: relative;
}

.close,
.close:hover {
  float: none;
  opacity: 1;
}

#app > nav {
  position: relative;
  z-index: 1;
}

code {
  background: var(--background-modifier-accent);
  border-radius: 3px;
  box-decoration-break: clone;
}

code,
.hljs {
  padding: 2px 4px;
  font-size: 0.88em;
}

.hljs {
  background: none;

  @include dark {
    filter: invert(1);
  }
}

pre code.hljs {
  font-size: 1em;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  background: var(--background-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.modal-content pre {
  background: var(--background-modifier-accent);
  border-color: var(--background-modifier-border);
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background: none;
  border-radius: 0;
  border: none;
  overflow-x: auto;

  &.hljs {
    padding: 0;
    background: none;
  }
}

.textarea::placeholder,
.form-control::placeholder,
.token-input::placeholder,
.u-placeholder {
  color: var(--ghost-color);
}

.btn {
  display: inline-block;
  font-size: 14px;
  padding: 10px 24px 9px;
  color: var(--text-normal);
  background: var(--button-background);
  border: 1px solid var(--border);
  outline: none !important;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;

  @extend %clickable;

  @include phone {
    padding-left: 12px;
    padding-right: 12px;
  }

  .icon {
    vertical-align: middle;
    margin-top: -2px;

    @include bidi-style(margin-right, 5px, margin-right, -2px);
    @include bidi-style(margin-left, -2px, margin-right, 5px);

    flex-shrink: 0;

    &.icon-arrow-up {
      margin-top: -3px;
    }
  }

  span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  &--only-icon .icon,
  &--icon-only .icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  &--icon--last .icon {
    @include bidi-style(
      margin-left,
      5px,
      margin-right,
      0
    ); // so far only used in ticket_zoom secondaryAction dropup
  }

  &:focus {
    box-shadow: 0 0 0 3px var(--shadow-highlight);
  }

  &--small {
    padding-top: 5px;
    padding-bottom: 4px;

    &.btn--quad {
      padding: 4px 5px;
    }
  }

  &--slim {
    padding-left: 12px;
    padding-right: 12px;
  }

  &--fullWidth {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  &.is-disabled,
  &[disabled],
  &:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.33;
  }

  &:active {
    box-shadow: none;
    background: var(--button-background-active);
  }

  &--capitalized {
    text-transform: capitalize;
  }

  &--action {
    text-transform: uppercase;
    color: var(--button-action-color);
    font-size: 12px;
    letter-spacing: 0.05em;
    height: 31px;
    padding: 0 11px !important;
    display: inline-flex;
    align-items: center;
    min-width: 0;

    .icon {
      @include ltr(margin, -2px 5px 0 -2px);
      @include rtl(margin, -2px -2px 0 5px);
    }

    .icon:only-child {
      margin: 0 !important;
    }

    &.btn--slim {
      padding-left: 7px !important;
      padding-right: 7px !important;

      .btn-label {
        @include bidi-style(margin-left, 0, margin-right, 0);
      }

      &.btn--small {
        padding-left: 5px !important;
        padding-right: 5px !important;
      }
    }

    &.btn--small {
      height: 26px;
      font-size: 11px;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
  }

  &-active-icon {
    display: none;
  }

  &--active {
    background: var(--button-active);
    color: var(--text-inverted);

    &:active {
      background: var(--button-active-active);
    }

    .btn-inactive-icon {
      display: none;
    }

    .btn-active-icon {
      display: inline;
    }
  }

  // used in .recipientList-controls
  &--onDark {
    background: var(--background-modifier-lighter);
    border-color: var(--background-modifier-accent-dark);
    color: var(--text-inverted);

    .icon {
      opacity: 1;
    }
  }

  &--primary {
    color: var(--text-inverted);
    background: var(--button-primary-background);

    &:active {
      background: var(--button-primary-background-active);
    }

    .icon {
      opacity: 1;
      fill: currentColor;
    }
  }

  &--secondary {
    color: var(--button-primary-background);
  }

  &--positive,
  &--create,
  &--success {
    color: var(--text-inverted);
    background: hsl(145, 51%, 45%);

    &:active {
      background: hsl(145, 51%, 35%);
    }

    &.btn--secondary {
      background: var(--background-secondary);
      color: hsl(145, 51%, 45%);

      &:active {
        background: var(--button-background-active);
      }
    }

    &.btn--text {
      color: var(--supergood-color);
    }
  }

  &--danger {
    color: var(--text-inverted);
    background: var(--danger-color);

    &:active {
      background: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1)),
        linear-gradient(var(--danger-color), var(--danger-color));
    }

    &.btn--secondary {
      background: var(--background-secondary);
      color: var(--danger-color);

      &:active {
        background: var(--button-background-active);
      }
    }
  }

  &--text {
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    margin: -10px;
    padding: 10px;
    color: var(--button-primary-background);
    border: none;
    background: none;
    vertical-align: baseline;
    text-align: start;

    .table & {
      margin: 0;
      min-height: 38px;
    }

    &.no-padding {
      padding: 0;
      margin: 0;
      min-height: auto;
    }

    .icon {
      opacity: 1;

      @include bidi-style(margin-left, -2px, margin-right, 6px);
      @include bidi-style(margin-right, 6px, margin-right, -2px);

      width: 16px;
      max-height: 16px;
      object-fit: contain;
    }

    &.btn--icon--last .icon {
      @include bidi-style(margin-left, 6px, margin-right, -2px);
      @include bidi-style(margin-right, -2px, margin-right, 6px);
    }

    &:active {
      color: var(--button-primary-background-active);
      background: none;
    }

    &.btn--secondary {
      color: var(--interactive-muted);
      text-decoration: underline;

      &:active {
        opacity: 0.75;
      }
    }

    &.btn--positive {
      color: hsl(145, 51%, 45%);

      &:active {
        color: hsl(145, 51%, 30%);
        background: none;
      }
    }

    &.btn--danger {
      color: var(--danger-color);

      &:active {
        color: hsl(0, 65%, 40%);
        background: none;
      }
    }

    &.btn--subtle {
      text-decoration: underline;
      color: var(--interactive-muted);

      &:active {
        opacity: 0.75;
      }
    }

    &.space-left {
      @include bidi-style(margin-left, 0, margin-right, -10px);
    }

    &.space-right {
      @include bidi-style(margin-right, 0, margin-left, -10px);
    }
  }

  &--large {
    &.btn--text {
      margin: 0;
    }
  }

  &--quad {
    padding: 10px 12px 9px;

    .icon {
      margin: -1px;
    }
  }

  &--split--first {
    @include bidi-style(border-radius, 3px 0 0 3px, border-radius, 0 3px 3px 0);
  }

  &--split,
  &--split--last {
    border-radius: 0;

    @include bidi-style(border-left-width, 0, border-right-width, 1px);
    @include ltr(margin-left, 0 !important);
    @include rtl(margin-right, 0 !important);

    .icon {
      margin-left: 2px !important;
      margin-right: 2px !important;
    }
  }

  &--split--last {
    @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);
  }

  &--dropdown {
    position: relative;

    select {
      opacity: 0;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      position: absolute;

      @extend %clickable;
    }
  }
}

.btn + .btn,
.btn + .buttonDropdown,
.buttonDropdown + .buttonDropdown {
  @include bidi-style(margin-left, 10px, margin-right, 0);
}

.btn + .btn.align-right {
  @include bidi-style(margin-left, auto, margin-right, 0);
}

.btn.align-right ~ .btn {
  @include bidi-style(margin-left, 15px, margin-right, 0);
}

.vertical > .btn:not(.hidden) + .btn {
  @include bidi-style(margin-left, 0, margin-right, 0);

  margin-top: 10px;

  &--text {
    @include bidi-style(margin-left, -10px, margin-right, -10px);

    margin-top: 0;
  }
}

.btn--download .icon-download {
  margin-right: 6px;

  @include rtl(margin-right, -10px);

  margin-top: 4px;
  margin-left: -10px;

  @include rtl(margin-left, 6px);

  vertical-align: top;
  fill: var(--text-inverted);
}

.btn-label {
  @include bidi-style(margin-left, 7px, margin-right, 0);
}

.btn-show-all {
  &[aria-expanded='false'] [data-show='collapsed'],
  &[aria-expanded='true'] [data-show='open'] {
    display: none;
  }

  .icon {
    margin-left: 0;
    margin-right: 0;
  }
}

.visibility-change {
  /*

  Interactive Visibility Change Classes:

    <div class="visibility-change">
      <svg class="icon-marker" data-visible="active"><use xlink:href="#icon-marker" /></svg>
    </div>

    Important: HTML Order active > hover > normal

  */

  [data-visible='active'],
  [data-visible='hover'] {
    display: none;
  }

  &.is-active [data-visible='active'] {
    display: block;

    & ~ [data-visible='normal'] {
      display: none;
    }
  }

  &:hover [data-visible='hover'] {
    display: block;

    & ~ [data-visible='normal'] {
      display: none;
    }
  }
}

.btn-group {
  display: inline-flex;
  flex-wrap: wrap;

  &--full {
    display: flex;
  }

  & + .btn-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .btn {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right-width: 0;
    }

    + .btn {
      @include bidi-style(margin-left, 0, margin-right, 10px);
    }
  }

  .btn--text {
    padding: 6px 10px 5px; /* reporting main.eco */
    display: inline-block;
    border-radius: 3px;

    &.is-selected {
      background: var(--button-primary-background);
      color: var(--text-inverted);
    }
  }
}

.buttonDropdown {
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;

  .dropdown-menu {
    margin-bottom: 0;
  }

  &.is-open .dropdown-menu {
    display: block;
  }

  .btn--text {
    padding-left: 13px;
    padding-right: 13px;
  }

  .dropdown-menu-accessories {
    cursor: pointer;

    &:focus {
      outline: none;

      .dropdown-menu {
        display: block;
      }

      .btn--split--last {
        box-shadow: 0 0 0 3px var(--shadow-highlight);
        pointer-events: initial;
      }
    }

    .btn--split--last {
      pointer-events: none;

      &:focus {
        box-shadow: none;
        pointer-events: none;
      }

      &:active {
        background-color: #429ed7;
      }
    }
  }
}

.dropdown-menu-right {
  @include rtl(right, auto);
  @include rtl(left, 0);
}

.dropdown-menu-left {
  @include rtl(left, auto);
  @include rtl(right, 0);
}

.status-fields {
  display: flex;
  max-width: 100%;

  @include phone {
    display: block;
  }

  .dropdown li {
    display: flex;
    align-items: center;
    padding: 0 10px;
  }

  .dropdown-menu .status-badge {
    margin-left: 10px;
  }

  .dropdown-menu .badge {
    margin-top: -2px;
    margin-right: 7px;
    background: hsla(0, 0%, 0%, 0.5);
  }
}

.status-field {
  border: 1px solid var(--border);
  background: var(--button-background);
  display: flex;
  height: 34px;
  flex-shrink: 1;
  min-width: 20px;
  padding: 5px 0;
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  @include phone {
    border-bottom-width: 0;
  }

  &.is-active {
    background: var(--button-primary-background);
    color: var(--text-inverted);
    border-color: var(--button-primary-background-active);
    box-shadow: 1px 0 var(--button-primary-background-active);
    position: relative;

    @extend %clickable;

    .icon {
      fill: currentColor;
      opacity: 1;
    }
  }

  &:not(:last-child, :only-child) {
    @include bidi-style(border-right-width, 0, border-left-width, 1px);

    @include phone {
      border-right-width: 1px !important;
    }
  }

  &:first-child {
    border-radius: 5px 0 0 5px;

    @include rtl(border-radius, 0 5px 5px 0);

    @include phone {
      border-radius: 5px 5px 0 0 !important;

      .dropdown & {
        flex: 1;
        border-top-right-radius: 0 !important;
        border-right-width: 0 !important;
      }
    }

    .dropdown.open & {
      border-radius: 5px 0 0;

      @include rtl(border-radius, 0 5px 0 0);

      @include phone {
        border-radius: 5px 0 0 !important;
      }
    }
  }

  &:last-child {
    border-radius: 0 5px 5px 0;

    @include rtl(border-radius, 5px 0 0 5px);

    @include phone {
      border-radius: 0 0 5px 5px !important;
      border-bottom-width: 1px;
    }
  }

  &:only-child {
    border-radius: 5px;

    @include phone {
      border-radius: 5px !important;
    }
  }

  .badge {
    @include bidi-style(margin, 0 7px 0 10px, margin, 0 10px 0 7px);

    background: hsla(210, 50%, 10%, 0.24);
  }

  .status-badge {
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }

  &--arrow {
    @extend %clickable;

    border-left: none;
    width: 34px;
    justify-content: center;

    @include phone {
      border-top-right-radius: 5px !important;
    }
  }

  &--spacer {
    padding-left: 16px;
    padding-right: 2px;
  }
}

.status-badge {
  display: inline-block;
}

.info-badge {
  fill: currentColor;
  padding: 3px 6px 1px;
  line-height: 12px;
  opacity: 0.5;
  position: relative;

  /*
    border in its own layer to make it more
    translucend but still depend on the currentColor
  */
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 1px solid currentColor;
    opacity: 0.5;
    border-radius: 100%;
  }
}

@keyframes pulsate {
  to {
    filter: brightness(1.2);
  }
}

.badge {
  display: inline-block;
  min-width: 18px;
  padding: 3px 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-inverted);
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  border-radius: 9px;
  background: var(--border-alt);

  @include bidi-style(margin-right, 3px, margin-left, 0);

  flex-shrink: 0;

  &:empty {
    display: none;
  }

  &.badge--big {
    min-width: 22px;
    font-size: 14px;
    border-radius: 11px;
    padding: 5px 7px 3px;
  }

  &.badge--text {
    min-width: 0;
    padding: 0;
    margin-right: 0;

    @include bidi-style(margin-right, 0, margin-left, 0);

    font-size: inherit;
    font-weight: inherit;
    text-align: inherit;
    line-height: inherit;
    color: var(--text-muted);
    background: none;
    border-radius: 0;
    vertical-align: baseline;
  }
}

.key-value {
  td:first-child {
    @include bidi-style(padding-right, 10px, padding-left, 0);

    color: var(--text-muted);
  }
}

table {
  table-layout: fixed;
}

.table {
  display: table;

  small {
    color: inherit;
  }

  &-icon {
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    vertical-align: middle;
    fill: hsla(0, 0%, 0%, 0.3);
  }

  &-buttons {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
}

.table--light {
  color: var(--text-muted);
}

.table-fluid {
  table-layout: auto;
}

.table .table-row {
  display: table-row;
}

.table.table--placeholder {
  th {
    text-align: center;
  }

  td {
    height: 40px;
  }

  > thead > tr > th {
    background: var(--background-modifier-accent);
  }
}

.table th:not(.noTruncate) .table-column-title,
.table td:not(.noTruncate) {
  @extend .u-textTruncate;
}

.table > thead > tr > th {
  padding: 12px 9px 10px;
  border-bottom: none;
  border-top: 1px solid #ececec;
  background: var(--background-primary-alt);
  color: var(--text-normal);
  font-weight: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  user-select: none;
}

.table-column-head {
  display: flex;

  @extend %clickable;

  &-unclickable {
    cursor: default;
  }
}

.table-column-sortIcon {
  @include bidi-style(margin-left, auto, margin-right, 0);
}

th.align-right {
  .table-column-title {
    @include bidi-style(margin-left, auto, margin-right, 0);
  }

  .table-column-sortIcon {
    @include bidi-style(margin-left, 0, margin-right, 0);
  }
}

.table-striped > tbody > tr:nth-child(2n + 1) {
  background-color: var(--background-secondary);
}

.table > tbody > tr > td {
  padding: 10px 10px 8px;
  border-color: var(--background-modifier-accent);

  &.no-side-padding {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}

.table > tbody > tr.u-center > td {
  vertical-align: middle;
}

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr.is-hover {
  background: var(--background-secondary);
}

.table-hover-in-modal > tbody > tr:hover > td {
  background-color: var(--background-primary);
}

.table-hover > tbody > tr:hover > th {
  background: rgba(0, 8, 14, 0.015);
}

.table-col-resize {
  position: absolute;

  @include bidi-style(right, 0, left, auto);

  top: 0;
  height: 100%;
  cursor: col-resize;
  padding: 10px;

  @include bidi-style(margin-right, -10px, margin-left, 0);

  z-index: 1;

  &::after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: var(--border);
  }
}

.table > thead:first-child > tr:first-child > th.no-padding,
.table > thead > tr > th.no-padding,
.table > tbody > tr > td.no-padding {
  padding: 0;
}

.table tr.is-inactive,
.table tr td span.is-inactive {
  color: var(--text-muted);
  text-decoration: line-through;

  a {
    color: inherit;
  }
}

.table tr.is-grayed-out {
  color: var(--text-muted);

  .icon,
  .btn span {
    opacity: 0.33;
  }

  .avatar {
    opacity: 0.5;
  }

  .avatar--unique {
    background: var(--background-secondary-hover);
    text-shadow: none;
    opacity: initial;
  }
}

td .icon {
  vertical-align: middle;
  margin-top: -3px;
}

td .icon-draggable,
td .icon-trash {
  vertical-align: middle;
}

td .prefix-icon > .icon {
  vertical-align: top;
}

.table-checkbox,
.table-radio {
  padding: 0 !important;

  .icon {
    margin-top: 0;
  }
}

.table .table-sort-arrow {
  opacity: 1;
  width: 8px;
  height: 8px;

  @include bidi-style(margin-left, 3px, margin-right, 0);

  margin-top: -2px;
  vertical-align: middle;
}

.item {
  &--high-priority {
    a {
      color: $high-priority-color;
    }
  }

  &--low-priority {
    a {
      color: $low-priority-color;
    }
  }
}

.checkbox-list {
  list-style: none;
  margin-bottom: 15px;
  padding: 3px 12px;
  font-size: 14px;
  line-height: 25px;
  color: var(--text-normal);
  background: var(--background-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.checkbox-replacement,
.radio-replacement {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  @extend .u-clickable;

  > .icon {
    vertical-align: middle;
    margin-top: -2px;
    fill: var(--button-background);

    @include dark {
      fill: transparent;
    }
  }

  .icon-checked {
    color: var(--interactive-primary);
  }

  .icon-unchecked {
    color: var(--text-muted);
  }

  .icon-indeterminate {
    display: none;
    color: var(--text-muted);
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  &.checkbox-replacement--fullscreen,
  &.radio-replacement--fullscreen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  &.checkbox-replacement--inline,
  &.radio-replacement--inline {
    display: inline-flex;

    @include bidi-style(margin-right, 3px, margin-left, 0);
  }

  input[type='checkbox'],
  input[type='radio'] {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:disabled {
      cursor: not-allowed;

      ~ .icon {
        opacity: 0.33;
        fill: none;
      }
    }

    &:not(:checked) ~ .icon-checked,
    &:checked ~ .icon-unchecked {
      display: none;
    }

    &:focus:not(.is-active) ~ .icon-checked,
    &:focus:not(.is-active) ~ .icon-unchecked {
      box-shadow: 0 0 0 2px var(--border-highlight),
        0 0 0 3px var(--shadow-highlight);
    }
  }

  + .label-text {
    @include bidi-style(margin-left, 0, margin-right, 3px);
  }
}

.checkbox-replacement {
  &:indeterminate {
    ~ .icon-checked,
    ~ .icon-unchecked {
      display: none;
    }

    ~ .icon-indeterminate {
      display: block;
    }
  }
}

.radio-replacement {
  input:focus ~ .icon-checked,
  input:focus ~ .icon-unchecked {
    border-radius: 100%;
  }

  > .icon {
    margin-top: -3px;
  }
}

.table .checkbox-replacement,
.table .radio-replacement {
  height: 40px;
  width: 40px;

  &.checkbox-replacement--fullscreen {
    width: 100%;
    height: 100%;
  }
}

.table-overview tbody .icon-checkbox,
.table-overview tbody .icon-radio,
.table-overview tbody .icon-checkbox-checked,
.table-overview tbody .icon-radio-checked {
  fill: transparent;
}

.table .table-cell {
  vertical-align: top;
  display: table-cell;
  border-bottom: 1px solid var(--background-primary-alt);
}

.hero-two {
  width: 100%;
}

.hero-two .hero-left {
  width: 50%;
  float: left;
}

.hero-two .hero-right {
  width: 50%;
  float: right;
}

.max-size-scroll {
  max-height: 240px;
  overflow-y: scroll;
}

/*
#content > *:not(.active) {
  display: none !important;
}
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  color: var(--header-primary);
}

h1 {
  font-size: 24px;
  line-height: 30px;
}

h2,
h2.popover-title {
  font-size: 20px;
  line-height: 25px;
}

h3 {
  font-size: 16px;
  margin: 20px 0 8px;
  font-weight: normal;

  .subtitle {
    display: inline;
    font-size: 12px;
    text-transform: none;
    color: var(--text-muted);
    letter-spacing: initial;
  }
}

h4 {
  font-size: 13px;
  text-transform: uppercase;
}

h5 {
  font-size: 13px;
  font-weight: bold;
}

label,
.checkbox.form-group label,
.label {
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-align: start;
  padding: 0;

  &.input-group-addon {
    color: var(--text-muted);
  }

  /* user-select: none; disabled because of chrome51 https://github.com/martini/zammad/issues/183 */

  h2 & {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    margin-bottom: 0;
    padding: 0 !important;
    text-transform: inherit;
  }
}

/* circumventing the label:not(.inline-label) selector because it's too strong */
.inline-label,
.label-success,
.label-warning,
.label-danger {
  font-size: inherit;
  font-weight: inherit;
  text-align: inherit;
  color: inherit;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
  display: inline;
}

table {
  .inline-label,
  .label-success,
  .label-warning,
  .label-danger {
    white-space: nowrap; /* for labels in tables that might get crushed view: calendar_subscriptions */
  }
}

.label-text {
  @include bidi-style(margin-left, 3px, margin-right, 0);

  @extend %clickable;
}

.label-success,
.label-warning,
.label-danger {
  background: none;
}

.label-success {
  color: var(--supergood-color);
}

.label-highlight {
  color: var(--highlight);
}

.label-warning {
  color: var(--ok-color);
}

.label-danger {
  color: var(--superbad-color);
}

.label-subtle {
  color: var(--ghost-color);
}

.state-archived,
.state-draft {
  color: hsl(0, 0%, 68%);
}

.state-published {
  color: var(--supergood-color);
}

.state-internal {
  color: var(--highlight);
}

fieldset {
  margin: 0 -4px;

  @extend .clearfix;

  @include phone {
    width: calc(100% + 8px);
  }

  h2,
  .help-text {
    margin-left: 4px;
    margin-right: 4px;
  }
}

.form-field-group {
  padding: 20px;
  background: var(--background-secondary);
  border-radius: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--border);

  .modal-body & {
    background: var(--background-primary);
  }

  > .form-group:last-child {
    margin-bottom: 0;
  }
}

fieldset > .form-group {
  padding: 0 4px;
}

.form-group {
  margin-bottom: 16px;

  &.form-group--inactive {
    opacity: 0.5;
  }

  &.is-readonly .controls:not(.ignore-readonly) {
    pointer-events: none;
    cursor: not-allowed !important;
  }
}

.date.form-group .controls {
  position: relative;
}

.form-group + .form-group {
  margin-top: 0;
}

.merge-group {
  display: flex;
  align-items: stretch;

  &.merge-group--header {
    h2 {
      margin-bottom: 0;
    }

    label {
      display: inline;
    }

    .merge-source,
    .merge-target {
      border-bottom: 1px solid var(--border);
    }
  }

  .merge-target,
  .merge-source {
    flex: 1;
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .merge-source,
  .merge-target {
    padding-bottom: 3px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 7px 13px;
  }

  &:first-of-type {
    margin-top: 6px;

    .merge-source,
    .merge-target {
      border-top: 1px solid var(--border);
      border-radius: 3px 3px 0 0;
    }
  }

  &:last-of-type {
    margin-bottom: 6px;

    .merge-source,
    .merge-target {
      border-bottom: 1px solid var(--border);
      border-radius: 0 0 3px 3px;
    }
  }

  .merge-value {
    margin-bottom: 3px;
  }

  .form-group {
    padding: 0;
  }

  .form-control {
    margin: 0 !important;
  }

  &.merge-group--multi {
    .merge-value + .merge-value {
      margin-top: 12px;
    }
  }
}

.merge-controls {
  flex: 1;
  align-self: flex-end;
}

.merge-control {
  margin-bottom: 5px;
  height: 31px;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  align-self: flex-end;
}

.merge-control-input {
  flex: 1;
}

.merge-arrow {
  margin: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  .line-arrow {
    fill: var(--border);
  }
}

.formGroup-label {
  padding: 0 2px;
  margin-bottom: 5px;
  position: relative;
  display: flex;
  align-items: center;

  h2 & {
    padding: 0;
    margin: 0;
  }

  label {
    margin: 0;
  }

  .bookmark.icon {
    margin-bottom: -1px;
  }

  .formGroup-metaControl {
    @extend .u-clickable;

    padding: 6px 4px;
    margin: -6px 0 -6px auto;
    font-size: 20px;
    line-height: 1;
    color: var(--interactive-muted);
  }
}

.formGroup-bookmark {
  @extend .u-clickable;

  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -10px;
}

.form-group .controls .richtext {
  position: relative;
  height: auto;
}

.form-group .help-message {
  cursor: help;
  color: var(--interactive-muted);
  top: -2px;
  position: relative;

  @include bidi-style(margin-left, auto, margin-right, 0);

  .icon-help {
    display: block;
  }
}

.form-group:not(.formGroup--halfSize) {
  clear: left;
}

.form-group.formGroup--halfSize {
  width: 50%;
  float: left;

  @include phone {
    width: auto;
    float: none;
  }

  .form-control {
    min-width: initial;
  }
}

.formGroup--standalone .form-control {
  margin-bottom: 0;
}

.controls--select {
  position: relative;
}

.controls--datetime {
  position: relative;
  display: flex;
}

.controls--date {
  position: relative;
}

.controls--datetime {
  position: relative;
  display: flex;
}

.controls--date {
  position: relative;
}

.controls-label {
  margin: 11px 10px 0;
  flex-shrink: 0;

  .form-control--small + & {
    margin-top: 7px;
  }
}

/* do not show safari auto fill icon - see issue #962 */
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

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

input[type='text'],
input[type='password'],
input[type='email'],
input[type='date'],
input[type='url'],
textarea,
.form-control,
.form-group .checkbox,
.form-group .radio {
  display: block;
  padding: 7px 12px;
  width: 100%;
  height: 41px;
  font-size: 14px;
  font-weight: normal;
  line-height: 25px;
  color: var(--text-normal);
  background: var(--background-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: none;
  box-shadow: none;
  outline: none;
  appearance: none;

  @include phone {
    font-size: 16px;
  }

  .modal-body &,
  .box &,
  .sidebar &,
  .hero-unit &,
  .form-field-group &,
  .popover & {
    background: var(--background-primary);
  }

  .modal-body .form-field-group &,
  .formset-inset & {
    background: var(--background-secondary);
  }

  &.form-control--small {
    padding: 5px 8px 4px;
    height: 30px;
    line-height: 20px;

    &[multiple] {
      height: auto;
    }

    &.form-control--multiline {
      min-height: 30px;
    }
  }

  &.form-control--inline {
    display: inline-block;
    width: auto;
  }

  &.form-control--multiline {
    height: auto;
    min-height: 41px;
  }

  &:focus,
  &:focus-within,
  &.focus {
    border-color: var(--border-highlight);
    box-shadow: 0 0 0 3px var(--shadow-highlight);
  }

  &.is-disabled, // .is-disabled should not be used - legacy support
  &[disabled],
  &[readonly] {
    opacity: 0.38;

    &:focus,
    &.focus {
      border-color: var(--border-highlight);
    }
  }

  &.is-disabled, // .is-disabled should not be used
  &[disabled] {
    cursor: not-allowed;
  }
}

input[type='url'] {
  min-width: 400px;
}

.sidebar-content input[type='url'] {
  min-width: inherit;
}

.user-select.form-control {
  padding-right: 35px;
  min-width: 300px;
}

input[type='time'] {
  width: auto;
  padding-left: 6px;
  padding-right: 6px;
}

input.timeframe,
input.time {
  box-sizing: content-box;
  padding: 0 6px;
  height: 39px;
  line-height: 42px;
  flex-shrink: 0;

  &.form-control--small {
    line-height: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

input.timeframe {
  width: 5.5ch;
}

input.time {
  width: 4.5ch;
}

input.time.time--12 {
  width: 7.5ch;
}

.tokenfield.focus {
  border-color: var(--border-highlight);
  box-shadow: 0 0 0 3px var(--shadow-highlight);
}

.richtext.form-control {
  padding: 0;
}

.richtext.form-control [contenteditable] {
  height: auto;
  min-height: 82px;
  background: none;
  padding: 7px 12px 35px;
}

.richtext.form-control [contenteditable='false'] {
  cursor: not-allowed;
  opacity: 0.38;
  border-color: var(--border);
  padding: unset;

  &:focus,
  &.focus {
    border-color: var(--border-highlight);
  }
}

.richtext.form-control .attachments.attachments--list:not(:empty) {
  border-top: 1px solid var(--background-modifier-border);
  white-space: normal;
  margin: 0 -12px -28px;
  padding: 25px 20px 21px 72px;
  position: relative;
  line-height: 1;
}

.richtext-controls {
  display: flex;
  margin: 7px 7px 0;
  padding: 3px 5px 10px;
  border-bottom: 1px solid var(--background-modifier-border);

  @include phone {
    flex-wrap: nowrap;
  }
}

textarea.form-control {
  height: 118px;
  resize: vertical;

  &[rows] {
    height: auto;
  }
}

select.form-control:not([multiple]) {
  @include bidi-style(padding-right, 34px, padding-left, 12px);

  word-wrap: normal;
}

.form-control.is-hidden {
  display: none;
}

.form-control.form-control--borderless {
  border: none;
  padding: 0;
  line-height: inherit;
  height: auto;

  &:focus {
    box-shadow: none;
  }
}

select[multiple],
select[multiple]:focus {
  option:checked {
    color: var(--interactive-primary);
    background: var(--ghost-color);
  }
}

.select.form-group,
.user_autocompletion.form-group {
  .form-control:not([multiple]) {
    padding-right: 21px;
  }
}

.form-control + .icon-arrow-down,
.dropdown-arrow {
  position: absolute;

  @include bidi-style(right, 12px, left, auto);

  top: 50%;
  margin-top: -3px;
  width: 13px;
  height: 7px;

  @extend .u-unclickable;
}

select::-ms-expand {
  display: none;
}

.has-error .form-control,
.has-error .form-control:focus,
.has-error .form-control.focus {
  box-shadow: none;
  border-color: var(--danger-color) !important;
}

input.has-error {
  box-shadow: none;
  border-color: var(--danger-color) !important;
}

.help-inline:not(:empty) {
  color: var(--danger-color);
  padding: 2px;
  font-size: 13px;
}

.zammad-form-modal-body {
  background: var(--background-primary) !important;
}

/* use on input[type=radio] */
.primary-email-switch {
  display: none;

  & + label {
    font-size: 11px;
    color: var(--interactive-muted);
    margin: 0;

    @extend %clickable;
  }

  &:checked + label {
    color: var(--highlight);
  }
}

.primary-email-switch-label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.primary-email-switch + label {
  align-self: stretch;
  padding: 0 5px;
  display: flex;
  align-items: center;
}

.controls--button {
  display: flex;
  flex-wrap: wrap;

  .controls {
    flex: 1;
  }

  .help-inline,
  .help-block {
    flex-basis: 100%;
  }

  input,
  .form-control {
    flex: 1 1 0%;

    @include bidi-style(border-right-width, 0, border-left-width, 1px);
    @include bidi-style(
      border-top-right-radius,
      0,
      border-top-left-radius,
      3px
    );
    @include bidi-style(
      border-bottom-right-radius,
      0,
      border-bottom-left-radius,
      3px
    );

    &:focus + .controls-button {
      .controls-button-inner {
        border-color: var(--border-highlight);
      }

      /*

        fake the form-control outline

      */
      &::before {
        content: '';
        position: absolute;
        left: 0;

        @include rtl(left, -3px);

        top: -3px;
        right: -3px;

        @include rtl(right, 0);

        bottom: -3px;
        background: var(--shadow-highlight);

        @include bidi-style(
          border-radius,
          0 7px 7px 0,
          border-radius,
          7px 0 0 7px
        );
      }
    }
  }
}

.controls-button {
  position: relative;
  display: flex;

  &.is-active .icon {
    fill: var(--highlight);
  }
}

.controls-button-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  background: var(--background-secondary);
  position: relative;
  border: 1px solid var(--border);

  @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);

  .icon {
    fill: var(--text-muted);
  }

  &:hover .icon {
    fill: currentColor;
  }
}

.searchfield {
  position: relative;
  margin-bottom: 20px;

  .icon-magnifier,
  .search-loader {
    @include bidi-style(left, 15px, right, auto);

    top: 12px;
    width: 17px;
    height: 17px;
    position: absolute;
    fill: var(--text-muted);
    transition: 0.1s 0s;
    pointer-events: none;
  }

  .search-loader {
    z-index: 2;
    opacity: 0;

    .icon {
      width: 17px;
      height: 17px;
    }
  }

  input[type='search'] {
    appearance: textfield;
    border-radius: 19px;
    padding: 0 17px 0 42px;

    @include rtl(padding, 0 42px 0 17px);

    will-change: transform;

    &.is-empty ~ .empty-search,
    &:placeholder-shown ~ .empty-search {
      visibility: hidden;
    }

    &.loading {
      ~ .search-loader {
        opacity: 1;
        transition: 0.2s 0.5s;
      }

      ~ .icon-magnifier {
        opacity: 0;
        transition: 0.2s 0.5s;
      }
    }
  }

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

  .empty-search {
    height: 100%;
    width: 50px;
    visibility: visible;

    .icon {
      width: 13px;
      height: 13px;
      fill: var(--text-muted);
      opacity: 0.5;
    }
  }
}

.content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background-color: var(--background-primary);

  @include phone {
    @include bidi-style(margin-left, $mobileNavigationWidth, margin-right, 0);

    -webkit-overflow-scrolling: touch;

    .navigation:hover ~ &,
    .navigation.is-hovered ~ &,
    .navigation:active ~ & {
      transform: translateX(
        #{$mobileNavigationWidthOpen - $mobileNavigationWidth}
      );

      @include rtl(
        transform,
        translateX(-#{$mobileNavigationWidthOpen - $mobileNavigationWidth})
      );
    }
  }
}

.content.fit {
  padding: 10px;
  background: var(--background-tertiary);
  z-index: 501;
}

.fullscreenMessage {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;

  .icon {
    @include bidi-style(margin-right, 14px, margin-left, 0);
  }

  .icon-error {
    margin-top: -2px;
    width: 19px;
    height: 19px;
  }

  .icon-checkmark {
    width: 21px;
    height: 18px;
    margin-right: 11px;
    margin-top: -2px;
  }

  h2 {
    margin: 0;
  }
}

.fullscreenMessage--placeholder {
  flex-direction: column;

  .icon {
    width: 100px;
    height: 100px;
  }

  h2 {
    margin: 15px;
    color: var(--text-muted);
  }
}

.selected-clue {
  position: relative;

  @extend .zIndex-11;

  pointer-events: none;
}

.modal--clue {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;

  .modal-backdrop {
    bottom: 0;
    width: 200%;
    height: 200%;
    left: -100%;
    top: -100%;
    background: radial-gradient(
      var(--backdrop-clue-start),
      var(--backdrop-clue-end)
    );
  }

  .modal-spacer {
    position: absolute;
    opacity: 0;
    padding: 18px;

    @extend .zIndex-11;
  }

  .modal-arrow {
    background: inherit;
    width: 20px;
    height: 20px;
    position: absolute;
    margin: -10px 0 53px -10px;
    left: 0;
    top: 50%;
    transform: rotate(45deg);
  }

  .modal-spacer[data-position='above'] .modal-arrow {
    left: 50%;
    top: 100%;
    background: var(--background-primary);
  }

  .modal-spacer[data-position='below'] .modal-arrow {
    left: 50%;
    top: 0;
  }

  .modal-spacer[data-position='left'] .modal-arrow {
    left: 100%;
    top: 50%;
  }

  .modal-content {
    border: none;
    width: 300px;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1),
      0 6px 20px 0 rgba(0, 0, 0, 0.05);

    @include phone {
      width: 280px;
    }
  }

  .modal-controls {
    background: var(--background-primary);
    margin: 23px 0 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal-control {
    padding-left: 14px;
    padding-right: 14px;

    .btn.is-disabled {
      color: var(--text-normal);
    }
  }

  .modal-header {
    padding-bottom: 7px;
    font-size: 18px;
  }

  .modal-body {
    max-width: 340px;
  }
}

.knowledge-base-content-can-be-published-dialog-current {
  margin-bottom: 20px;
  text-align: center;
}

.knowledge-base-content-can-be-published-dialog {
  display: flex;

  .side-panel {
    flex-grow: 1;
    width: 300px;
  }

  .call-to-action {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.kb-sidebar-block-content {
  & .kb-item--invisible {
    opacity: 0.5;
  }

  & .kb-item--missing-translation,
  & .kb-item--missing-translation:active,
  & .kb-item--missing-translation:focus {
    color: hsl(45, 98%, 63%);
  }
}

.kb-menu-preview {
  margin-bottom: 1em;

  &-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    border: 1px solid var(--border-alt);

    &--footer {
      justify-content: center;
    }
  }

  a,
  span {
    font-size: 14px;
    padding: 0.5em 1em;
    white-space: nowrap;
    text-decoration: none;
    line-height: 2em;
  }

  a {
    color: inherit;
  }

  .label {
    text-transform: none;
  }
}

.modified-icon {
  position: relative;
  line-height: 1;
  display: block;

  .nav-pills > li > a & {
    align-self: center;
  }

  .modified-icon-modifier {
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    fill: var(--background-primary);
    margin: 0 -2px -1px 0;

    .nav-pills > li > a & {
      fill: var(--background-secondary);
    }

    .nav-pills > li:hover > a & {
      fill: var(--background-secondary-hover);
    }
  }

  .icon-knowledge-base-answer + .modified-icon-modifier {
    margin: 0 -1px 2px 0;
  }

  .icon-published-modifier {
    display: none;
  }
}

kbd {
  background: var(--background-modifier-accent);
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
  box-shadow: var(--elevation-stroke);
  display: inline-block;
  font-size: 12px;
  margin: 0 1px;
  padding: 0 4px;
  vertical-align: top;
}

.form-stacked .checkbox label {
  color: inherit;
  font-size: 13px;
  text-transform: inherit;
  vertical-align: baseline;
  letter-spacing: inherit;
}

.pagination {
  margin: 0 0 0 19px;

  @include rtl(margin, 0 19px 0 0);

  display: flex;
}

.pagination-counter {
  margin: 0 0 0 19px;

  @include rtl(margin, 0 19px 0 0);

  line-height: 33px;
  color: var(--text-muted);
}

.page-header {
  margin: 0 0 15px;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  @include phone {
    align-items: flex-start;
    flex-wrap: nowrap;
  }
}

.page-header--center {
  justify-content: center;
}

.page-header-title {
  display: flex;
  align-items: center;

  .zammad-switch {
    @include bidi-style(margin-right, 9px, margin-left, 0);
  }

  h1,
  h2 {
    margin-top: 9px;
    margin-bottom: 7px;

    @include phone {
      margin-top: 4px;
    }
  }

  .suffix {
    margin-left: 5px;
    margin-top: 6px;
    display: inline-block;

    @include phone {
      margin-top: 4px;
    }
  }
}

.page-header-center {
  justify-self: center;

  @include bidi-style(padding-left, 9px, padding-right, 0);

  margin: 0 auto;

  & + .page-header-meta {
    @include bidi-style(margin-left, 0, margin-right, auto);

    flex: none;
  }
}

.page-header-meta {
  @include bidi-style(margin-left, auto, margin-right, 0);
  @include bidi-style(padding-left, 20px, padding-right, 0);

  display: flex;
  justify-content: flex-end;
  flex: 1;
  min-width: 0; /* firefox flexbug */

  @include phone {
    flex: 0 1 auto;
    min-width: auto;
  }

  .btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    @include phone {
      flex-shrink: 0;
    }
  }

  .btn + .btn {
    @include bidi-style(margin-left, 9px, margin-right, 0);
  }
}

.page-content {
  .formGroup-label label,
  .label {
    color: var(--header-secondary);
  }

  .content-controls-align-right {
    display: flex;
    justify-content: flex-end;
  }
}

.page-body--two-column {
  display: flex;
}

.page-aside {
  @include bidi-style(padding-right, 20px, padding-left, 0);
  @include bidi-style(border-right, 1px solid var(--border), border-left, none);
  @include bidi-style(margin-right, 20px, margin-left, 0);

  width: 240px;
  flex-shrink: 0;
  flex-grow: 0;
}

.page-main {
  flex: 1;
}

.page-loading {
  min-height: 500px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loading-label {
  @include bidi-style(margin-left, 10px, margin-right, 0);

  margin-top: 1px;
}

.dropdown-menu .count {
  padding-top: 1px;

  @include bidi-style(margin-left, 10px, margin-right, 0);
}

.help-text,
.help-block {
  color: var(--text-muted);
}

.help-block {
  margin: 0;
  font-size: 13px;

  &.help-block--center {
    text-align: center;
  }
}

.help-block:not(:empty) {
  margin: 8px 2px 0;
}

/* replace music icon with attachment */
.icon-attachment {
  background-position: -24px 0;
}

/*
 * hero-unit (used on getstarted, login, signup)
 */

.hero-unit {
  width: 500px;
  margin: 10px 0;
  padding: 23px 25px;
  border: 1px solid var(--border);
  color: var(--text-normal);
  background-color: var(--background-secondary);
  border-radius: 6px;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  @include phone {
    width: auto;
    padding: 12px 15px;
  }

  .inline-label {
    font-size: inherit;
  }
}

.hero-unit h1,
.hero-unit h2 {
  margin-top: 0;
}

.getstarted,
.reset_password,
.request_admin_password_auth,
.signup,
.darkBackground,
.login {
  padding: 10px;
  background: var(--background-tertiary);
}

.content.getstarted {
  padding: 0;

  .main {
    padding: 20px 10px;
  }
}

.login,
.reset_password,
.request_admin_password_auth,
.signup {
  padding: 24px;
  color: var(--text-muted);

  a {
    color: var(--text-inverted);

    &.text-muted {
      color: inherit;
    }
  }
}

.login {
  .form-controls {
    flex-direction: column;

    .btn {
      width: 100%;
    }

    .btn--text {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: initial;
      text-align: center;
    }

    .btn + .btn:not(.align-right) {
      margin-left: initial;
      margin-right: initial;
    }
  }
}

.login .hero-unit {
  width: 430px;
  margin: 0 0 28px;

  @include phone {
    width: auto;
  }
}

.login .company-logo {
  max-height: 100px;
  max-width: 200px;
  margin: 20px auto 42px;
  display: block;

  @include phone {
    margin: 15px auto 28px;
  }
}

.login p,
.reset_password p,
.signup p {
  margin: 0 auto 22px;
  max-width: 400px;
  text-align: center;

  @include phone {
    margin: 0 auto 15px;
  }
}

.reset_password p,
.signup p {
  padding-top: 28px;
}

.login hr {
  margin: 0 auto 22px;
  width: 100%;
  max-width: 400px;
}

.login p a,
.reset_password p a,
.signup p a {
  text-decoration: underline;
}

.poweredBy {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(233, 7%, 26%);
  margin: 34px 0 10px -16px;

  @include rtl(margin, 34px -16px 10px 0);

  cursor: default;

  a {
    color: inherit;
  }

  .icon-logo {
    @include bidi-style(margin-right, 8px, margin-left, 0);

    margin-top: -11px;
  }

  .logotype {
    @include bidi-style(margin-left, 7px, margin-left, 0);

    margin-top: -3px;
  }
}

.fullscreen {
  @extend .fit;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.fullscreen p {
  color: var(--text-muted);
}

.fullscreen-center {
  margin: auto;
}

.fullscreen-body {
  text-align: start;
  display: inline-block;
}

ol.tabs {
  list-style: decimal inside;
}

ol.tabs li {
  display: list-item;
}

.tabs {
  display: flex;
  padding: 0;
  margin-bottom: 20px;
  color: var(--interactive-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--background-secondary);

  @include phone {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.tabs-condensed .tab {
  padding-left: 5px;
  padding-right: 5px;
}

.progress-tabs .tab {
  cursor: default;
}

.tab {
  color: inherit;
  height: 35px;
  padding: 8px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--border);
  min-width: 0;
  flex-grow: 1;

  @extend .u-clickable;

  @include phone {
    flex-shrink: 0;
    display: block;
    text-align: center;
  }

  &.active {
    color: var(--text-inverted);
    background: var(--button-active);
    box-shadow: none;
    flex-shrink: 0;
  }

  &-name {
    min-width: 20px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-badge {
    flex-shrink: 0;

    @include bidi-style(margin-left, 6px, margin-right, 0);

    font-size: 13px;
    margin-right: -7px;
    background: var(--background-modifier-accent);
    min-width: 21px;
    padding: 0 7px;
    height: 21px;
    line-height: 21px;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    border-radius: 999px;
  }
}

.tab-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .arrow {
    @include bidi-style(margin-left, 10px, margin-right, 0);

    opacity: 0.75;
  }

  .icon {
    fill: var(--text-muted);
  }

  &.active {
    background: var(--background-secondary);

    .icon {
      opacity: 1;
    }
  }
}

.tab:first-child {
  border-radius: 3px 0 0 3px;

  @include rtl(border-radius, 0 3px 3px 0);
  @include bidi-style(border-right-width, 1px, border-right-width, 0);
}

.tab:last-child:not(:only-child) {
  border-radius: 0 3px 3px 0;

  @include bidi-style(border-right-width, 0, border-right-width, 1px);
  @include rtl(border-radius, 3px 0 0 3px);
}

.tab:only-child {
  border-radius: 3px;

  @include bidi-style(border-right-width, 0, border-right-width, 1px);
}

.tabs.tabs--inline {
  display: inline-flex;
  margin-left: 0;
  margin-right: 0;

  .tab {
    flex: none;

    &:nth-last-child(2) {
      @include bidi-style(border-right-width, 0, border-right-width, 1px);
    }
  }
}

.tabs--big {
  margin: 28px auto;
  font-size: 14px;
  border-radius: 8px;

  @include phone {
    margin: 5px auto 28px;
  }

  .tab {
    height: auto;
    padding: 10px 23px 9px;

    @include phone {
      padding: 8px 20px;
    }

    &:first-child {
      border-radius: 8px 0 0 8px;

      @include rtl(border-radius, 0 8px 8px 0);
    }

    &:last-child {
      border-radius: 0 8px 8px 0;

      @include rtl(border-radius, 8px 0 0 8px);
    }

    &:only-child {
      border-radius: 8px;
    }
  }

  .tab-dropdown {
    padding-left: 18px;
    padding-right: 15px;

    @include rtl(padding-left, 15px);
    @include rtl(padding-right, 18px);
  }
}

.dashboard .tabs--big {
  width: 50%;

  @include phone {
    width: auto;
  }
}

.separator {
  margin: 20px 0;
  position: relative;
  text-align: center;
}

.separator::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  background: var(--border);
}

.separator-text {
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--background-secondary);
  display: inline-block;
  position: relative;
}

.auth-providers {
  display: flex;
  flex-wrap: wrap;

  > form {
    display: flex;
    flex-grow: 1;
    min-width: calc(100% / 2 - 8px);

    &:last-child {
      .auth-provider {
        margin-bottom: initial;
      }
    }
  }
}

.auth-provider {
  height: 40px;
  padding: 0 10px 0 7px;
  margin-bottom: 14px;
  margin-right: 14px;
  color: white !important;
  line-height: 23px;
  border-radius: 4px;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: none;
  text-align: initial;
  white-space: nowrap;
  overflow: hidden;

  @extend %clickable;

  &.auth-provider--wide {
    padding-right: 25px;
  }

  &.auth-provider--facebook {
    background: #4f699c;
  }

  &.auth-provider--google {
    background: hsl(0, 0%, 93%);
    color: hsl(0, 0%, 46%) !important;
  }

  &.auth-provider--twitter {
    background: #2daee1;
  }

  &.auth-provider--email {
    background: #ffd22e;
  }

  &.auth-provider--linkedin {
    background: #006087;
  }

  &.auth-provider--github {
    background: hsl(0, 0%, 27%);
  }

  &.auth-provider--gitlab {
    background: hsl(10, 78%, 53%);
  }

  &.auth-provider--microsoft {
    background: hsl(0, 0%, 93%);
    color: hsl(0, 0%, 46%) !important;
  }

  &.auth-provider--weibo {
    background: hsl(0, 0%, 27%);
  }

  &.auth-provider--saml {
    background: hsl(0, 0%, 27%);
  }

  &.auth-provider--sso {
    background: #454545;
  }

  .provider-icon {
    width: 29px;
    height: 24px;
    flex-shrink: 0;

    @include bidi-style(margin-right, 10px, margin-left, 0);
  }

  .provider-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/*

  global icon definitions
  =======================

*/

[data-font] {
  font-style: normal;
  text-rendering: auto;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

[data-font='FontAwesome'] {
  font-size: 14px;
}

[data-font='material'] {
  font-size: 18px;
}

[data-font='ionicons'] {
  font-size: 18px;
}

.icon {
  fill: currentColor;
}

[class*='icon-file-'] {
  color: var(--file-icon-background);
  fill: var(--file-icon-color);
}

.icon-arrow-down,
.icon-arrow-up,
.icon-arrow-left,
.icon-arrow-right {
  fill: var(--text-muted);
  opacity: 0.39;

  .btn--action & {
    opacity: var(--interactive-primary);
  }
}

.icon-arrow-left,
.icon-arrow-right {
  &.arrow--x2 {
    width: 14px;
    height: 26px;
  }
}

.icon-arrow-left,
.icon-arrow-right,
.icon-line-left-arrow,
.icon-line-right-arrow,
.icon-long-arrow-right {
  @include rtl(transform, scaleX(-1));
}

.arrow--disabled {
  opacity: 0.23;
}

.icon-checkmark {
  fill: var(--supergood-color);
}

.icon-error {
  fill: var(--superbad-color);
}

.icon-danger {
  color: hsl(41, 100%, 49%);
}

.icon-draggable {
  opacity: 0.3;

  .table-draggable & {
    vertical-align: middle;
    cursor: move;
  }
}

.loading.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: hsl(145, 51%, 45%);
  animation: rotateplane 1.2s infinite ease-in-out;
}

.small.loading.icon {
  width: 20px;
  height: 20px;
}

.tiny.loading.icon {
  width: 12px;
  height: 12px;
}

.loading.icon.muted {
  background: var(--ghost-color);
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.icon-spinner-medium {
  animation: spinIcon 0.9s steps(12) infinite;
}

.icon-spinner-small {
  animation: spinIcon 0.9s steps(8) infinite;
}

@keyframes spinIcon {
  to {
    transform: rotate(-1turn);
  }
}

.color-swatch {
  padding: 2px;
  margin: -2px 0 -4px;

  @extend %clickable;

  /* :after technique for bigger click area */
  &::after {
    content: '';
    display: inline-block;
    height: 11px;
    width: 11px;
    border-radius: 100%;
    background: currentColor;
  }
}

.icon-status {
  fill: var(--ok-color);

  &.inline {
    margin-top: -3px;
    vertical-align: middle;
  }

  &.inactive {
    fill: var(--ghost-color);
  }

  &.ok {
    fill: var(--supergood-color);
  }

  &.error {
    fill: var(--superbad-color);
  }

  &.neutral {
    fill: var(--ok-color);
  }
}

.icon-status-modified-inner-circle {
  position: absolute;
  left: 50%;
  top: 0;
  will-change: opacity;
  transform: translate3d(-50%, 0, 0);
  animation: fade 1.8s ease-in-out infinite;
}

@keyframes fade {
  54% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.icon-checkbox,
.icon-checkbox-checked,
.icon-checkbox-indeterminate {
  fill: var(--text-inverted);
}

.icon-sso-button {
  fill: var(--text-inverted);
}

/*
 * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
 */
.form {
  margin: 0;

  &--flexibleWidth .controls {
    display: table;
  }

  &--horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    .alert {
      flex-basis: 100%;
    }

    fieldset {
      flex: 1 1 auto;
      margin-right: 6px;
    }

    .form-group:last-child {
      margin-bottom: 0;
    }

    .form-buttons {
      margin: 10px 10px 0 auto;
    }

    .controls {
      min-width: 250px;
    }
  }

  &--grid {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;

    @include phone {
      display: block;
    }

    fieldset {
      flex-basis: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .alert {
      width: 100%;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      margin-top: 0;
    }

    .form-group {
      display: block;
      padding: 0 10px;
      width: 100%;

      $sizes: '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5',
        '4/5';

      @each $size in $sizes {
        &[data-width='#{$size}'] {
          width: calc(#{$size} * 100%);

          @include phone {
            width: 100%;
          }
        }
      }
    }
  }
}

.form-controls {
  @extend .clearfix;

  display: flex;
  align-items: center;
  margin-top: 10px;

  .btn + .btn:not(.align-right) {
    @include bidi-style(margin-left, 20px, margin-right, 10px);
  }
}

.form-buttons {
  display: flex;
}

form a.standalone {
  line-height: 40px;
  margin: 0 5px;
}

form a.standalone.align-right {
  @include bidi-style(margin-left, auto, margin-right, 0);
}

footer {
  clear: both;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 22px;

  @include rtl(padding-left, 22px);
  @include rtl(padding-right, 10px);
}

.overviews {
  .sidebar {
    @include small-desktop {
      display: none;
    }
  }

  .table > tbody > tr > td {
    user-select: none;
  }
}

.overview-header {
  position: relative;
  margin: 20px 0 32px;
  height: 41px;
  display: none;
  align-items: center;

  @include phone {
    margin-top: 0;
  }

  .tabsHolder {
    flex: 1;

    @include bidi-style(margin-right, 20px, margin-left, 0);

    min-width: 0; /* Firefox bug fix */
  }

  .tabs {
    margin: 0;
    position: relative;

    @include phone {
      overflow: visible;
    }
  }

  .tab {
    @include phone {
      flex-shrink: 1;
    }
  }

  .tabs-clone {
    right: 0;
  }

  .dropdown {
    min-width: 0;
    width: 336px;

    @include phone {
      left: -1px;
      right: auto;
      width: calc(100vw - 70px);
    }
  }

  @include small-desktop {
    display: flex;
  }
}

.table-overview {
  @include phone {
    margin-left: -10px;
    margin-right: -10px;
  }
}

.tableOverview-edit {
  @extend .u-clickable, .u-highlight;
}

.bulkAction {
  position: fixed;
  bottom: 0;

  @include bidi-style(left, $sidebarWidth + $navigationWidth, right, 0);

  min-width: $minWidth - $sidebarWidth - $navigationWidth;
  background: var(--background-secondary);
  z-index: 1;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.03),
    0 -3px rgba(0, 0, 0, 0.01);

  @include small-desktop {
    @include bidi-style(left, $navigationWidth, right, 0);

    min-width: $minWidth - $sidebarWidth;
  }

  &.no-sidebar {
    @include bidi-style(left, $navigationWidth, right, 0);

    min-width: $minWidth - $navigationWidth;

    @include small-desktop {
      min-width: $minWidth;
    }
  }

  @include phone {
    @include bidi-style(left, $mobileNavigationWidth, right, 0);

    min-width: 0;

    .navigation:hover ~ &,
    .navigation.is-hovered ~ &,
    .navigation:active ~ & {
      @include bidi-style(left, $mobileNavigationWidthOpen, right, 0);
    }
  }
}

.bulkAction-firstStep {
  display: flex;
  align-items: center;

  @include phone {
    flex-direction: column;
    align-items: flex-end;
  }
}

.bulkAction-firstStep .has-error {
  border-color: red !important;
  border: 1px solid;
}

.bulkAction-secondStep {
  display: flex;
  flex-direction: column;

  &-bottom {
    display: flex;

    @include phone {
      display: block;
    }
  }
}

.bulkAction .btn {
  margin: 0 16px;

  @include phone {
    margin: 10px;
  }
}

.bulkAction .btn--text {
  @include bidi-style(margin-right, 0, margin-left, 16px);
}

.bulkAction-controls {
  margin-top: 10px;

  @include bidi-style(margin-left, auto, margin-right, 0);

  @include phone {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
  }
}

.panel {
  box-shadow: none;
  background: var(--background-secondary);
  color: var(--text-normal);
}

.panel-default {
  border-color: var(--border-alt);
}

.panel-default > .panel-heading {
  padding-bottom: 8px;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0.05em;
  color: inherit;
  background: var(--background-primary-alt);
  border-color: var(--border-alt);

  + .panel-collapse > .panel-body {
    border-top-color: var(--border-alt);
  }
}

.panel-title {
  font-size: inherit;
}

.panel-group .panel-heading {
  display: block;
}

.panel-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.well {
  background: var(--background-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px;
}

.well-muted {
  background-color: var(--background-secondary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.merged,
.merge:hover {
  text-decoration: line-through;
}

.translation {
  border: 1px dotted #f92;
  border-radius: 3px;
  cursor: text;
}

.translation[contenteditable='true'] {
  display: inline;
}

.translation[contenteditable='true']:hover,
.translation[contenteditable='true']:focus {
  background: none;
}

.translation .icon-edit {
  display: none;
}

.translation:hover .icon-edit {
  display: inline-block;
}

.translationOverview .btn + .btn {
  margin: -10px;
}

.sub_attribute .control-label {
  width: 60px;
}

.sub_attribute .controls {
  @include bidi-style(margin-left, 80px, margin-right, 0);
}

.splash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-normal);

  .icon {
    @include bidi-style(margin-right, 10px, margin-left, 0);
  }
}

.navigation {
  width: $navigationWidth;
  background: var(--background-quaternary);
  position: relative;

  @include phone {
    position: absolute;

    @include bidi-style(left, 0, right, auto);

    top: 0;
    left: 0;
    width: $mobileNavigationWidth;
    height: 100%;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;

    &:empty {
      display: none !important;
    }

    &:hover,
    &:active,
    &.is-hovered {
      width: $mobileNavigationWidthOpen;

      .menu-item-name {
        display: block;
        padding-left: 15px;
      }
    }
  }
}

.menu {
  padding: 0;
  margin: 0;
  list-style: none;
  flex-shrink: 0;
}

.menu .badge {
  background: var(--ok-color);
  color: hsl(233, 10%, 16%);

  @include bidi-style(margin-right, 8px, margin-left, 0);
}

.menu .zammad-switch {
  height: 22px;
}

.menu .dropdown-menu {
  left: 10px;
  right: 15px;
  min-width: 0;
}

.menu-item {
  padding: 0 15px;
  height: 48px;
  color: var(--menu-text);
  border-bottom: 1px solid hsla(230, 4%, 84%, 0.05);
  text-decoration: none;
  display: flex;
  align-items: center;

  @extend %clickable;

  @include phone {
    padding: 0 13px;
    position: relative;
  }

  .icon {
    fill: var(--menu-icon);

    &.accessory-icon {
      opacity: 0.7;
    }
  }

  &:hover {
    background: hsla(0, 0%, 0%, 0.3);
    border-bottom-color: hsla(230, 4%, 84%, 0.1);
  }

  &.is-active,
  &.is-hovered {
    background: none;
    color: var(--text-inverted);
  }

  &.is-active .menu-item-icon,
  &.is-active .dropdown-icon,
  &.is-hovered .menu-item-icon {
    fill: currentColor;
  }

  &.is-active,
  &.is-hovered {
    background: var(--button-primary-background);
  }

  &.is-active .zammad-switch {
    input:not(:checked) + label {
      // switch background
      background: var(--button-primary-background-active);
    }

    label::after {
      background: var(--text-inverted);
    }
  }

  .dropdown-icon {
    fill: currentColor;
  }

  .zammad-switch {
    @include phone {
      .navigation:not(:hover, :active, .is-hovered) & {
        position: absolute;
        right: 12px;
        top: 12px;
        width: auto;
        height: auto;
        border-radius: 0;

        input:checked + label {
          background: var(--supergood-color);
        }

        label {
          width: 8px;
          height: 8px;
          background: red;
          border-radius: 100%;
          transition: none;

          &::after {
            display: none;
          }
        }
      }
    }
  }
}

.menu-item-icon {
  @include bidi-style(margin-right, 15px, margin-left, 0);

  width: 24px;
  height: 24px;

  @include phone {
    @include bidi-style(margin-right, 0, margin-left, 0);
  }
}

.menu-item-name {
  flex: 1;
  margin-top: 2px;

  @include phone {
    display: none;
  }
}

.call-widgets {
  overflow-y: auto;
  max-height: 30vh;
}

.call-widget {
  background: var(--background-quaternary-alt);
  padding: 8px 10px;

  & + & {
    border-top: 1px solid var(--background-modifier-border);
  }

  &-header {
    display: flex;
    color: inherit;
    margin-bottom: 3px;

    .label {
      color: inherit;
      margin: 0;
    }

    .btn--text {
      color: inherit;
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
    }

    .icon-diagonal-cross {
      width: 9px;
      height: 9px;
      margin-top: -5px;
    }
  }
}

.tasks {
  background: var(--background-tertiary);
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  @include phone {
    overflow-x: hidden;
    min-height: 60px;
  }
}

.tasks.tasks--standalone {
  background: none;
  margin: 8px 0 0;
  padding: 0;
  overflow: visible;
}

.tasks--standalone .task {
  padding: 0;
  margin-bottom: 9px;
  display: flex;

  .icon-holder {
    &:first-child .icon-task-state {
      margin-left: -2px;
    }

    .icon {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-top: -3px;

      @include bidi-style(margin-right, 4px, margin-left, 0);
    }
  }
}

.tasks--standalone .task-text {
  flex: 1;
  min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
}

.tasks--standalone .task-id {
  &::after {
    content: ' - ';
  }
}

.tasks--standalone .name {
  @extend .u-highlight, .u-textTruncate;

  display: block;
}

.tasks--standalone .time {
  color: var(--text-muted);
}

.tasks--standalone .btn-show-all {
  margin-bottom: 9px;
}

.nav-tab {
  @include bidi-style(padding, 10px 15px 9px 0, padding, 10px 0 9px 15px);

  position: relative;
  color: var(--menu-text);
  display: flex;
  align-items: center;

  @extend .u-clickable;

  @include phone {
    width: $mobileNavigationWidthOpen;
  }
}

.tasks-navigation .nav-tab {
  height: 40px;
  border-bottom: 1px solid hsla(230, 4%, 84%, 0.05);
}

.tasks-navigation .nav-tab:not(.is-active):hover {
  background: var(--background-quaternary);
  border-bottom-color: hsla(230, 4%, 84%, 0.1);
}

.navigation .nav-tab-name {
  text-align: start;

  &.is-inactive {
    text-decoration: line-through;
    opacity: 0.73;
  }
}

.tasks-navigation .nav-tab-icon .error {
  transform: scale(0.85);
}

.nav-tab.is-active,
.nav-tab.nav-tab--search:hover,
.nav-tab.nav-tab--search.is-hover {
  background: #389ed9;
  color: var(--text-inverted);

  .nav-tab-icon .icon {
    fill: currentColor;
  }
}

.nav-tab.ui-sortable-helper {
  border-bottom-color: transparent;
}

.nav-tab.nav-tab--search {
  height: 30px;
  padding-top: 9px;

  &.is-inactive {
    text-decoration: line-through;
    opacity: 0.73;
  }
}

.nav-tab-icon {
  margin-top: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
}

.nav-tab-icon .icon {
  max-width: 18px;
  max-height: 18px;
  fill: var(--nav-icon);
}

.nav-tab-icon .icon-diagonal-cross {
  fill: #f35910;
  width: 12px;
  height: 12px;
}

.nav-tab-icon .icon.icon-loading {
  animation: rotateplane 1.2s infinite ease-in-out;
  fill: var(--supergood-color);

  /*
      Safari font rendering bugfix while animating
      http://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running
    */
  @extend .zIndex-5; // stay beneath .global-search-menu

  position: relative;
}

.nav-tab-close {
  position: absolute;

  @include bidi-style(right, 0, left, auto);

  top: 0;
  height: 100%;

  @include bidi-style(padding-right, 16px, padding-left, 0);

  visibility: hidden;

  @extend .u-clickable;

  display: flex;
  align-items: center;

  @include phone {
    visibility: visible;
  }
}

.nav-tab:hover .nav-tab-close {
  visibility: visible;
}

.nav-tab-close-inner {
  width: 19px;
  height: 19px;
  background-color: var(--background-tertiary);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-tab-close:hover .nav-tab-close-inner {
  background-color: #972e29;
}

.nav-tab-close svg {
  width: 9px;
  height: 9px;
  fill: var(--text-inverted);
  opacity: 0.3;
}

.nav-tab-close:hover svg {
  opacity: 1;
}

.icon-task-state {
  vertical-align: middle;
}

.nav-tab-icon .icon-task-state {
  margin: 0;
}

.nav-tab.task-state-open.is-active {
  background-color: var(--ok-color);
}

.task-state-open-color {
  color: var(--ok-color);
}

.icon-task-state.open {
  fill: var(--ok-color);
}

.nav-tab.task-state-closed.is-active {
  background-color: var(--supergood-color);
}

.task-state-closed-color {
  color: var(--supergood-color);
}

.icon-task-state.closed {
  fill: var(--supergood-color);
}

.nav-tab.task-state-escalating.is-active {
  background-color: var(--superbad-color);
}

.task-state-escalating-color {
  color: var(--superbad-color);
}

.icon-task-state.escalating {
  fill: var(--superbad-color);
}

// TODO: rename to knowledgebase icon when it's available

.icon-task-state.archived {
  fill: var(--superbad-color);
}

.icon-task-state.published {
  fill: var(--supergood-color);
}

.icon-task-state.draft {
  fill: var(--ghost-color);
}

// pending: stays blue
// .nav-tab.task-state-pending.is-active {
//   background-color: var(--pending-color);
// }

.task-state-pending-color {
  color: var(--text-muted);
}

.icon-task-state.pending {
  fill: var(--pending-color);
}

.state-badge {
  display: flex;
  align-items: center;

  .icon-task-state {
    @include bidi-style(margin-right, 2px, margin-left, 0);
  }
}

.search {
  padding: 11px 5px 4px 10px;

  @include rtl(padding, 11px 10px 4px 0);

  border-bottom: 1px solid rgba(240, 250, 255, 0.05);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  background-color: inherit;

  @include phone {
    padding: 10px 5px 5px;

    @include rtl(padding, 10px 5px 5px);

    display: block;
  }
}

.search-holder {
  flex: 1;
  border-radius: 15px;
  position: relative;
  transition: margin-right 120ms;
  will-change: margin-right;

  @include phone {
    transition: none;
    will-change: initial;
  }
}

.empty-search {
  position: absolute;

  @include bidi-style(right, 0, left, auto);

  top: 0;
  height: 30px;
  width: 40px;
  z-index: 1;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  @extend %clickable;
}

.search .empty-search .icon-diagonal-cross {
  fill: var(--text-inverted);
  opacity: 0.5;
}

.filled.search .empty-search {
  visibility: visible;
}

.search input[type='search'] {
  width: 100%;
  padding: 5px 33px;
  height: 30px;
  color: #ececec;
  background: #31373b;
  line-height: 20px;
  outline: none;
  border: none;
  border-radius: 15px;
  position: relative;
  z-index: 1;
  appearance: textfield;

  @include phone {
    padding: 5px 33px;
    font-size: 16px;
  }
}

.search:not(.filled, .focused) input[type='search'] {
  @include phone {
    padding: 0;
  }
}

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

.search .search-loader {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
  opacity: 0;
  transition: 0.1s 0s;
  pointer-events: none;

  .icon {
    fill: var(--text-inverted);
    opacity: 0.5;
  }
}

.search.loading .search-loader {
  opacity: 1;
  transition: 0.2s 0.5s;
}

.search .icon-magnifier {
  position: absolute;
  top: 8px;
  left: 10px;

  @include bidi-style(left, 10px, right, auto);

  z-index: 2;
  opacity: 0.5;
  fill: var(--text-inverted);
  transition: 0.1s 0s;
  pointer-events: none;
}

.search.loading .icon-magnifier {
  opacity: 0;
  transition: 0.2s 0.5s;
}

.search.focused .search-holder {
  transition: margin-right 240ms;

  @include bidi-style(margin-right, -59px, margin-left, 0);

  @include phone {
    margin: 0 !important;
  }
}

.search.focused .logo {
  opacity: 0;
  z-index: -1;

  @include phone {
    opacity: 1;
    z-index: initial;
  }
}

.search.filled {
  .search-holder {
    @include phone {
      .navigation:not(:hover, :active, .is-hovered) & {
        width: 210px;
      }
    }
  }

  .logo {
    @include phone {
      opacity: 0;
    }
  }
}

.search .logo {
  position: relative;

  @extend .u-clickable, .zIndex-3;

  margin: -4px 10px 0 12px;
  transition: 240ms;

  @include phone {
    margin: 10px 0 0;
  }
}

.search .logo .icon-logo {
  position: relative;

  @include phone {
    width: 35px;
    height: 30px;
    margin-left: 4px;
  }
}

.search .logo .activity-counter {
  min-width: 21px;
  position: absolute;
  right: -3px;
  bottom: 2px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  text-align: center;
  color: var(--text-inverted);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
  background: hsl(360, 71%, 60%);
  border-radius: 10px;
  border: 2px solid var(--background-quaternary);
}

.search .logo .activity-counter:empty {
  display: none;
}

.global-search-menu {
  @extend .zIndex-7;

  background: var(--background-quaternary);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 53px;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  .divider {
    height: 1px;
    background: #2f3238;
    margin: 14px 0 17px;
  }
}

.search.open .global-search-menu {
  display: block;
}

.global-search-detail-link {
  padding: 9px 15px 8px 0;
  margin-bottom: 7px;
  height: auto !important;

  .no-match & {
    display: none;
  }

  .nav-tab-icon {
    width: 18px;
    margin-left: 10px;
    margin-right: 10px;

    .icon {
      width: 18px;
      height: 14px;
    }
  }

  .nav-tab-name {
    .icon {
      fill: currentColor;
      margin: -2px 0 0 3px;
      vertical-align: middle;
    }
  }
}

.global-search-result {
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-search-detail-no-result {
  margin: 0 10px;

  .icon {
    width: 30px;
    height: 29px;
  }
}

.user-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  flex-shrink: 0;
  display: flex;

  @include phone {
    flex-direction: column;
  }
}

.user-menu > li {
  flex: 1;
  background: var(--background-quaternary);
}

.user-menu .list-button {
  height: 60px;
  position: relative;
  text-decoration: none;

  @extend .u-clickable;

  display: flex;
  align-items: center;
  justify-content: center;

  @include phone {
    height: 46px;
  }
}

.user-menu .list-button *:not(.dropdown-nose, .icon-crown) {
  position: relative;
}

.user-menu > li:hover .list-button::before,
.user-menu > li.open .list-button::before,
.user-menu > li.is-active .list-button::before,
.user-menu > li.is-hovered .list-button::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: var(--text-inverted);
}

.user-menu > li.is-active .list-button::before {
  background: var(--highlight);
}

.user-menu li.add:hover .list-button::before,
.user-menu li.add.is-active .list-button::before,
.user-menu li.add.is-hovered .list-button::before {
  background: #38ae6a;
}

.user-menu-icon {
  width: 20px;
  height: 20px;
  fill: hsl(0, 0%, 30%);
}

.user-menu-icon.icon-plus {
  fill: hsl(145, 51%, 45%);
}

.user-menu > li:hover .user-menu-icon {
  fill: hsl(232, 10%, 16%);
}

.user-menu > li.is-active .user-menu-icon {
  fill: var(--text-inverted);
}

.user-menu > li.add:hover .user-menu-icon.icon-plus,
.user-menu > li.add.is-hovered .user-menu-icon.icon-plus,
.user-menu > li.add.is-active .user-menu-icon.icon-plus {
  fill: var(--text-inverted);
}

.user-menu > li:not(:last-child) {
  border-right: 1px solid var(--background-modifier-accent);

  @include phone {
    border: none;
  }
}

.dropdown-nose {
  position: absolute;
  border: 7px solid transparent;
  border-bottom: none;
  border-top: 7px solid var(--background-secondary);
  left: 50%;
  margin-left: -7px;
  top: -6px;
  display: none;
}

li.add .dropdown-nose {
  border-top-color: #38af6e;
}

.open.dropdown .dropdown-nose,
.open.dropup .dropdown-nose {
  display: block;
}

.user-menu .dropdown-menu {
  padding: 0;
  border-radius: 0;
  margin-bottom: 5px;
  min-width: 0;
  left: 10px;
  right: 15px;
  width: auto;

  &.selected-clue {
    position: absolute;
  }
}

.user-menu li.add .dropdown-menu {
  background-color: #38af6e;
}

.user-menu li.add .dropdown-menu li > a {
  color: var(--text-inverted);
}

.user-menu li.add .dropdown-menu .divider {
  background: #4cb77c;
}

.user-menu .dropdown-menu .divider {
  margin: 0;
}

.user-menu .dropdown-menu > li > a {
  display: flex;
}

.avatar {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 100%;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  flex-shrink: 0;

  @include phone {
    width: 30px;
    height: 30px;
  }

  a {
    color: inherit;
  }

  &.size-30 {
    width: 30px;
    height: 30px;

    @include phone {
      width: 22px;
      height: 22px;
    }
  }

  .icon-crown {
    position: absolute;
    width: 28px;
    left: 50%;
    margin-left: -14px;
    top: -15px;
    fill: hsl(47, 100%, 59%);

    @include phone {
      width: 20px;
      margin-left: -10px;
    }
  }

  &-status {
    position: absolute;
    right: -4px;
    bottom: -4px;
    border-radius: 999px;
    background: var(--background-tertiary);
    fill: var(--text-inverted);
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &.size-50 {
    width: 50px;
    height: 50px;

    @include phone {
      width: 36px;
      height: 36px;
    }

    .icon-crown {
      width: 36px;
      margin-left: -18px;

      @include phone {
        width: 26px;
        margin-left: -13px;
      }
    }
  }

  &.size-80 {
    width: 82px;
    height: 82px;

    @include phone {
      width: 60px;
      height: 60px;
    }

    .icon-crown {
      width: 64px;
      margin-left: -32px;
      top: -16px;

      @include phone {
        width: 46px;
        margin-left: -43px;
        top: -15px;
      }
    }
  }

  &--vacation {
    filter: grayscale(70%);
    opacity: 1;
  }

  &--idle {
    filter: grayscale(100%);
    opacity: 0.5;
  }

  &--inactive {
    filter: grayscale(100%);
    opacity: 0.2;
  }

  &--unique {
    background-image: image_url('/assets/images/avatar-bg.png');
    background-size: 300px 226px;
    color: var(--text-inverted);
    line-height: 40px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    cursor: default;

    @include phone {
      line-height: 30px;
    }

    &.size-30 {
      font-size: 10px;
      line-height: 32px;
      background-size: 225px 170px;

      @include phone {
        line-height: 22px;
      }
    }

    &.size-50 {
      font-size: 16px;
      line-height: 52px;
      background-size: 375px 283px;

      @include phone {
        line-height: 38px;
      }
    }

    &.size-80 {
      font-size: 26px;
      line-height: 84px;
      background-size: 600px 452px;

      @include phone {
        line-height: 62px;
      }
    }
  }

  &--organization {
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-organization {
      fill: currentColor;
    }

    &.size-80 {
      .icon-organization {
        width: 32px;
        height: 32px;
      }
    }
  }

  &--group {
    overflow: hidden;

    .icon {
      fill: var(--text-inverted);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 44px;
      bottom: -8px;
    }

    &.size-30 .icon {
      width: 33px;
      height: 33px;
      bottom: -6px;
    }

    &.size-50 .icon {
      width: 55px;
      height: 55px;
      bottom: -10px;
    }

    &.size-80 .icon {
      width: 88px;
      height: 88px;
      bottom: -15px;
    }

    &-color-0 {
      background: hsl(192, 100%, 38%);
    }

    &-color-1 {
      background: hsl(148, 100%, 38%);
    }

    &-color-2 {
      background: hsl(57, 100%, 37%);
    }
  }

  .icon-logo {
    width: 100%;
    height: 100%;
  }
}

.sidebar {
  position: relative;
  width: 280px;
  padding: 20px;
  color: var(--text-normal);
  background: var(--background-secondary);

  @include bidi-style(border-right, 1px solid var(--border), border-left, none);

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  @include small-desktop {
    &.optional {
      display: none;
    }
  }

  h2 {
    margin-top: 0;
  }

  h3 {
    margin: 0;
    font-weight: normal;
    font-size: 16px;
    text-transform: initial;
    letter-spacing: 0;
  }
}

.sidebar-block {
  margin: 20px 0;

  &:first-child {
    margin-top: 0;
  }

  &-actions {
    margin-bottom: 7px;
  }

  &-header {
    margin-bottom: 7px;

    h2 {
      margin: 0;
    }
  }

  [contenteditable='true'] {
    white-space: normal; // do no u-textTruncate, we want to edit it inline
  }

  .btn-list {
    margin-bottom: 5px;
  }

  &-button {
    .sidebar-block-header + &.text-muted {
      margin-top: 3px;
    }
  }
}

.sidebar-git-issue-delete {
  text-align: right;

  @include rtl(text-align, left);

  float: right;

  @include rtl(float, left);
}

.sidebar-git-issue-content {
  width: 90%;
}

.main + .sidebar {
  border-right: none;
  border-left: 1px solid var(--border);

  @include dark {
    border-left: none;
  }
}

.NavBarAdmin.sidebar,
.NavBarProfile.sidebar {
  width: $sidebarWidth;

  @include phone {
    width: 50px;
    padding-left: 10px;
    padding-right: 10px;

    &:hover,
    &:active {
      width: 165px;
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  h2 {
    margin: 21px 0 12px;

    @include phone {
      white-space: nowrap;
    }
  }

  h2:first-child {
    margin-top: 0;
  }
}

.nav-stacked > li + li {
  margin-top: 0;
}

.nav-pills > li > a,
.nav-pills > li > a:focus,
.nav-pills > li > a:active,
.nav-pills .nav-pills-placeholder {
  color: var(--text-nav);
  border-radius: 0;
  background: transparent; /* a:focus, a:active with bg: transparent fixes gray focus bg in IE 10 */
  display: flex;

  @extend .u-textTruncate;
}

.nav-pills.nav-stacked > li > a,
.nav-pills.nav-stacked > li > a:focus,
.nav-pills.nav-stacked > li > a:active,
.nav-pills.nav-stacked .nav-pills-placeholder {
  padding: 0;
  height: 40px;
  line-height: 39px;
  border-top: 1px solid var(--background-modifier-border);
}

.nav-pills.nav-stacked .nav-pills-placeholder {
  display: block;
  border-top: none;

  @extend .label-subtle;
  @extend .u-textTruncate;
}

.nav-pills > li:hover > a {
  background: var(--background-secondary-hover);
}

.nav-pills.nav-stacked > li:hover > a,
.nav-pills.nav-stacked > li.active + li:not(.active) > a,
.nav-pills.nav-stacked > li:hover + li:not(.active) > a {
  border-color: transparent;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: var(--text-inverted);
  background: var(--background-active);
  border-color: var(--background-modifier-border);
}

.nav-pills.nav-stacked > li:hover > a,
.nav-pills.nav-stacked > li.active > a,
.nav-pills.nav-stacked > li.active > a:hover,
.nav-pills.nav-stacked > li.active > a:focus {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

.sidebar:not(.NavBarAdmin) .nav-pills > li:first-child > a {
  border-top: none;
}

.nav-pills > li > a > .icon {
  fill: currentColor;
  flex-shrink: 0;
  align-self: center;
  margin-top: -2px;

  &:first-child {
    @include bidi-style(margin-right, 5px, margin-left, 0);

    &[data-font] {
      @include bidi-style(margin-right, 10px, margin-left, 0);
      @include bidi-style(margin-left, 5px, margin-right, 0);
    }
  }
}

.nav-pills > li > a > .badge {
  margin-left: auto;
  margin-right: 5px;

  @include bidi-style(padding-left, 10px, padding-right, 0);
  @include rtl(margin-left, 5px);
  @include rtl(margin-right, auto);
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: var(--text-inverted);
  background: none;
}

.main {
  padding: 10px 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;

  @include phone {
    padding: 10px;
  }

  &--large-padding {
    padding: 30px 40px;
  }
}

.main--tabs,
.main.no-padding {
  padding: 0;
}

.tooltip {
  font-family: inherit;
}

.tooltip-inner {
  max-width: 400px;
}

.popover {
  @extend .zIndex-7;

  position: absolute;
  font-family: inherit;
  width: 372px;
  max-width: 9999px;
  border-radius: 0;
  margin: 0 5px;
  background: var(--background-popover);
  border: none;
  box-shadow: var(--elevation-high);

  @include rtl(text-align, right);

  @include phone {
    width: auto;
  }

  > .arrow::after {
    border-color: var(--background-popover);
  }
}

.popover--has-horizontal-form {
  width: auto;
}

.popover-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.popover-title {
  border: none;
  background: none;
  padding: 21px 17px 4px;

  .is-inactive {
    text-decoration: line-through;
    color: var(--interactive-muted);
  }
}

.popover-content {
  padding: 0 17px;
  margin-bottom: 21px;

  .popover--has-horizontal-form & {
    padding: 10px 5px 15px 15px;
    margin-bottom: 0;
  }
}

.popover.right {
  margin-left: 4px;
}

.popover.right > .arrow {
  border-right: none;
  left: -9px;
}

.popover.top {
  margin-bottom: 9px;
}

.popover.top > .arrow {
  border-top: none;
  bottom: -9px;
}

.popover.left {
  margin-right: 9px;
  margin-left: 0;
}

.popover.left > .arrow {
  border-left: none;
  right: -9px;
}

.popover.bottom {
  margin-top: 9px;
}

.popover.bottom > .arrow {
  border-bottom: none;
  top: -9px;
}

.popover > .arrow::after {
  border-width: 8px;
}

.popover .priority.icon::after {
  background: var(--background-secondary);
}

.popover .person .organization {
  color: var(--text-muted);
}

.popover .person {
  &.is-inactive {
    text-decoration: line-through;
    color: var(--ghost-color);
  }
}

.popover .user-organization {
  @extend .u-textTruncate;

  margin-bottom: 8px;
  margin-top: -4px;

  &.is-inactive {
    text-decoration: line-through;
    color: var(--ghost-color);
  }
}

.popover-block {
  @extend .sidebar-block;

  margin: 10px 0;
}

.popover hr {
  margin: 8px 0;
}

.popover .person .organization::before {
  content: '(';
}

.popover .person .organization::after {
  content: ')';
}

.popover label {
  font-size: 13px;
  color: var(--header-secondary);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.popover .two-columns,
.popover .three-columns {
  margin-top: -8px;
}

.popover .column label {
  margin: 8px 0 1px;
}

.popover .column {
  margin-top: 8px;
}

.popover--notifications {
  padding: 0;
  left: $navigationWidth;

  @include rtl(right, $navigationWidth);

  margin: 8px 2px;
  max-height: calc(100% - 16px);
  width: auto;
  max-width: 400px;
  min-width: 350px;
  flex-direction: column;

  @extend .zIndex-10;

  @include phone {
    left: $mobileNavigationWidth;

    @include rtl(right, $mobileNavigationWidth);

    min-width: auto;
    width: calc(100% - #{$mobileNavigationWidth} - 8px);
  }

  &.is-visible {
    display: flex;
  }

  &.is-empty .popover-notificationsHeader {
    box-shadow: none;
  }

  .arrow {
    top: 23px !important;
    left: -11px;

    @include rtl(left, 408px);
    @include rtl(transform, rotate(180deg));

    @include phone {
      top: 61px !important;
    }
  }

  .popover-content {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    overflow-y: auto;
  }

  .popover-notificationsHeader {
    border-bottom: 1px solid var(--background-modifier-accent);
    padding-bottom: 14px;
    flex-shrink: 0;

    .btn {
      padding-top: 3px;
      padding-bottom: 5px;
    }
  }

  .activity-placeholder {
    margin-bottom: 21px;
  }
}

.popover-notificationsHeader {
  padding-bottom: 8px;
  margin: 21px 17px 0;

  .popover-title {
    @extend h1;

    padding: 0;
    line-height: 1;
  }

  .btn {
    margin-top: 3px;
  }
}

.popover-notificationsCounter {
  color: #e25253;

  @include bidi-style(padding-left, 3px, padding-right, 0);
}

.user-popover,
.ticket-popover,
.organization-popover {
  @extend .u-clickable;
}

.user-card {
  padding: 2px 0 0 50px;
  position: relative;
  min-height: 40px;
  padding-right: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 192px;

  .avatar {
    position: absolute;
    left: 0;
    top: 0;
  }

  .user-popover.is-inactive {
    text-decoration: line-through;
    opacity: 0.73;
  }

  .btn.js-newTicket {
    position: absolute;
    right: 0;
  }
}

.stat-icon {
  position: relative;
}

.mood-icon {
  width: 60px;
  height: 59px;
}

.stopwatch-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.stat-stopwatch {
  width: 77px;
  height: 83px;
  position: relative;
}

.stat-channel-icon {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
}

.total-tickets {
  height: 83px;
  width: 48px;

  @include bidi-style(margin-right, 4px, margin-left, 0);

  margin-bottom: -9px;
  fill: hsl(196, 19%, 89%);
  color: var(--background-secondary);

  @include dark {
    fill: hsl(196, 9%, 70%);
  }
}

.one-ticket {
  width: 48px;
  height: 10px;
  margin-top: -7px;
  margin-bottom: 2px;
  position: relative;
}

.stat-tickets {
  height: 100px;
  color: var(--background-secondary);
}

.in-process-icon {
  width: 64px;
  height: 64px;
}

.reopening-icon {
  width: 68px;
  height: 47px;
}

.supergood-color {
  fill: var(--supergood-color);
}

.good-color {
  fill: var(--good-color);
}

.ok-color {
  fill: var(--ok-color);
}

.bad-color {
  fill: var(--bad-color);
}

.superbad-color {
  fill: var(--superbad-color);
}

.danger-color {
  color: var(--danger-color);
}

.u-high-priority-color {
  fill: $high-priority-color;
}

.u-low-priority-color {
  fill: $low-priority-color;
}

.stat-widgets {
  margin: -7px -7px 20px;
}

.stat-widget {
  height: 200px;
  padding: 10px 10px 8px;
  text-align: center;
  line-height: 20px;
}

.dashboard .stat-widget {
  margin: 7px;
  background: var(--background-secondary);
  border: 1px solid var(--border);
  border-radius: 1px;
  box-shadow: var(--elevation-low);
}

.stat-title {
  font-size: 13px;
  margin: 2px 0 8px;
  text-transform: uppercase;
  font-weight: normal;
  position: relative;
  padding: 0 24px;

  .tooltip {
    text-transform: none;
    width: 200px;
  }
}

.stat-icon-help {
  position: absolute;
  right: 3px;
  top: 1px;
  cursor: help;
  fill: var(--interactive-muted);
}

.notification-icon-help {
  fill: var(--interactive-muted);
}

.stat-label {
  @extend .u-textTruncate;
}

.stat-detail {
  color: var(--text-muted);

  @extend .u-textTruncate;
}

.stat-graphic {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.time.stat-widget .stat-amount {
  margin-top: 12px;
  text-align: center;
  font-size: 30px;
  color: var(--text-inverted);
  text-shadow: 0 2px rgba(0, 8, 14, 0.2);
  position: relative;
  cursor: default;
}

.time.stat-widget .stat-dial {
  position: absolute;
  top: 21px;
  left: 14px;
  width: 52px;
  height: 52px;
}

.stats-row {
  padding: 8px 0 7px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 38px;
  height: 100%;

  .icon {
    display: block;
  }
}

.stats-row:hover {
  background: rgba(0, 8, 14, 0.03);
}

.stats-row .stat-bars {
  flex: 1;
  margin: 10px 0 13px;
  padding: 2px 5px;
  width: 100%;
  background: linear-gradient(
    to top,
    var(--background-modifier-accent),
    var(--background-modifier-accent) 1px,
    transparent 1px
  );
  background-position: center bottom;
  background-size: 100% 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.stat-bars .stat-bar {
  border-radius: 5px;
  max-width: 10px;
  flex: 1;
  color: #a9bcc4;
  background: #a9bcc4;

  &--outbound {
    opacity: 0.38;
    color: #a9bcc4;
    background: #a9bcc4;
  }
}

.stat-legend {
  margin-top: 30px;

  @include bidi-style(margin-left, auto, margin-right, 0);

  display: flex;
}

.stat-legendEntry {
  font-size: 11px;
  line-height: 1;

  @include bidi-style(margin-left, 20px, margin-right, 0);

  background: none !important;
}

.stat-circle {
  margin-bottom: -1px;

  @include bidi-style(margin-right, 3px, margin-left, 0);

  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: inline-block;
}

.ticket_channel_distribution {
  .stat-graphic {
    align-items: stretch;
  }

  .stats-row {
    margin-bottom: -4px;
    position: relative;
  }
}

.frequency.stat-widget {
  .stat-bars {
    margin-top: 0;
  }

  .stats-row {
    margin-bottom: 0;
  }

  .stat-label {
    color: var(--text-muted);
  }

  .primary {
    color: hsl(145, 51%, 45%);
    background: hsl(145, 51%, 45%);
  }
}

.activity.sidebar {
  width: 370px;
  padding: 0;
  border-left: 1px solid var(--border);
}

.activity h2 {
  margin-left: 19px;
  margin-bottom: 15px;
  margin-right: 26px;

  @include rtl(margin-right, 19px);
  @include rtl(margin-left, 26px);
}

.activity-entries {
  margin: 0 -17px;
}

.activity-placeholder {
  @extend .u-textTruncate;

  padding: 0 17px;
}

.activity-entry {
  display: flex;
  padding: 0 17px;

  &.is-inactive {
    opacity: 0.5;
  }

  &.is-hover {
    background-color: var(--background-primary);
  }

  &.activity-entry--removeable {
    @include bidi-style(padding-right, 0, margin-left, 17px);
  }

  &:not(:hover) .activity-remove {
    opacity: 0;
  }

  &:not(:last-child) .activity-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid var(--background-modifier-accent);
  }

  &.activity-entry--removeable:not(:last-child) .activity-body::after {
    right: 17px;

    @include bidi-style(right, 17px, left, 0);
  }
}

.activity-avatar {
  padding: 16px 2px 0;

  @include bidi-style(margin-right, 10px, margin-left, 0);

  flex-shrink: 0;
}

.activity-body {
  padding: 16px 0 16px 2px;

  @include rtl(padding, 16px 2px 16px 0);

  position: relative;
  display: flex;
  flex: 1;
  min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
  color: inherit;
}

.activity-message {
  color: inherit;
  flex: 1;
  min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */

  &:hover .activity-text {
    text-decoration: underline;
  }
}

.activity-time {
  margin-top: 2px;
  color: var(--text-muted);
  display: block;
}

.activity-remove {
  display: flex;
  align-items: center;
  justify-content: center;

  @extend %clickable;

  padding-left: 10px;
  padding-right: 27px;

  @include rtl(padding-left, 27px);
  @include rtl(padding-right, 10px);

  .activity-remove-icon-holder {
    width: 19px;
    height: 19px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ghost-color);
  }

  .icon {
    fill: var(--text-inverted);
    width: 9px;
    height: 9px;
  }

  &:hover {
    .activity-remove-icon-holder {
      background: #972e29;
    }

    .icon {
      opacity: 1;
    }
  }
}

.form-inline {
  display: flex;

  @include phone {
    flex-wrap: wrap;

    .alert {
      flex-basis: 100%;
    }
  }
}

.form-inline .input-group-addon,
.form-inline .form-control:not(textarea) {
  background: var(--background-secondary);
  border: none;
  line-height: 1;
}

.form-inline .form-group {
  overflow: hidden;
  position: relative;
  height: 60px;
  flex: 1 1 auto;

  @include phone {
    width: 50%;
    margin-bottom: 0;
  }

  &.datetime {
    min-width: 140px;
    overflow: visible; // datepicker popup needs to be visible
  }
}

.form-group.is-changed {
  position: relative;
}

.form-group.is-changed::before {
  content: '';
  position: absolute;
  top: 23px;
  left: -12px;
  bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(
      45deg,
      var(--background-modifier-border),
      var(--background-modifier-border) 5px,
      transparent 5px,
      transparent 9px
    )
    repeat center;
  background-size: 11px 11px;
}

.form-inline .form-group.is-changed::before {
  width: 100%;
  height: 3px;
  top: 0;
  left: 0;
  bottom: auto;
}

.form-group.is-changed label {
  color: var(--text-muted);
  position: relative;
}

.form-group.is-changed label::before {
  position: absolute;
  content: '';
  left: -10px;
  width: 5px;
  height: 5px;
  top: 50%;
  margin-top: -3px;
  border-radius: 100%;
  background: var(--interactive-muted-alt);
}

.form-inline .form-group .btn {
  margin: 10px;
}

.form-inline .form-group:not(:last-child),
.form-inline.form-inline--enclosed .form-group {
  border-right: 1px solid var(--border);
}

.form-inline .form-group,
.form-inline.form-inline--enclosed .form-group {
  @include phone {
    border-bottom: 1px solid var(--border);

    &:nth-child(even) {
      border-right-width: 0;
    }
  }
}

.form-inline .input-group-addon {
  width: auto;
  padding: 0;
  margin: 10px 18px 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  display: inline-block;
  position: relative;
}

.form-inline .form-control:not(textarea) {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  padding: 28px 5px 12px 20px;
  float: none;
  display: block;
  border-radius: 0;
}

.form-inline {
  .formGroup-label {
    z-index: 1;
    pointer-events: none;
  }

  .controls--datetime,
  .controls--date,
  .controls--select {
    position: static;
  }

  .controls--datetime {
    position: absolute;
    bottom: 12px;
    left: 0;
    padding: 0 5px 0 20px;
    width: 100%;

    .controls-label {
      display: none;
    }

    .form-control {
      width: 70px;
      line-height: inherit;
      position: static;
      padding: 0;
      height: auto;

      &.time {
        margin-left: 5px;
        width: 38px;
      }
    }
  }
}

.bulkAction-secondStep .form-group {
  min-width: 140px;

  @include phone {
    min-width: 0;

    &.textarea {
      border-bottom-width: 0;
    }
  }
}

.bulkAction-secondStep .form-inline .textarea.form-group {
  padding: 5px 10px;
  height: auto;
}

.bulkAction-secondStep .form-inline .textarea.form-group .input-group-addon {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 5px;
}

.bulkAction-secondStep .form-inline textarea.form-control {
  display: block;
  width: 100%;
  resize: vertical;
}

.bulkAction-secondStep .form-inline .textarea .controls {
  margin: 0 6px;
}

.bulkAction-secondStep .form-inline textarea.form-control:not(:focus) {
  border-color: #f0f0f0;
}

.ticketZoom {
  background: var(--background-primary);
}

.ticketZoom-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 28px 0 0;

  @include bidi-style(margin-right, -40px, margin-left, 0);

  @include phone {
    padding: 10px;

    @include bidi-style(margin-right, 0, margin-left, 0);
  }
}

.icon-marker {
  fill: hsl(0, 0%, 61%);
  width: 17px;
  height: 19px;
}

.ticketNumberCopy-icon {
  vertical-align: top;
  fill: currentColor;
}

.ticketZoom .ticketZoom-header {
  margin-top: 6px;
  padding: 0;

  @include phone {
    margin-top: 10px;
  }
}

.ticketZoom .ticket-article {
  margin-top: 55px;

  @include phone {
    margin-top: 40px;
  }
}

.ticketZoom > .overview-navigator {
  margin-top: 32px;

  @include bidi-style(padding-left, 20px, padding-right, 0);
}

.ticket-article,
.article-new {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 21px;

  @include phone {
    padding: 0 10px;
  }
}

.ticket-title {
  max-width: 1080px;
  padding: 0 81px;

  @include phone {
    padding: 0 10px;
  }
}

.ticket-title-update {
  @extend h1;

  white-space: normal;
  margin-top: 15px;
  margin-bottom: 8px;
  padding: 0 7px;
  text-align: center;

  .ticketZoom-header & {
    &:hover,
    &:focus {
      background: var(--background-modifier-hover);
    }
  }
}

.task-subline {
  text-align: center;
  display: block;
}

.ticket-article-item {
  padding-bottom: 33px;
  position: relative;
  z-index: 1; // fixed chrome 49 + flex issue, not shown article

  .avatar {
    position: absolute;
    right: 0;
    top: 5px;

    @include phone {
      position: static;
      margin: 0 5px 7px;
    }
  }

  &.agent .avatar {
    right: auto;
    left: 0;
  }
}

/*
    clip the article-meta to not stand out on the other side
    of the textBubble if the text bubble is small
  */

.article-meta-clip {
  overflow: hidden;
  position: relative;
  height: 100%;
  margin: 0 55px;

  @include phone {
    margin: 0;
  }
}

.article-content {
  color: var(--text-normal);
  position: relative;
  z-index: 1;
  padding: 0 55px;

  @include phone {
    padding: 0;
  }

  &.article-actions {
    justify-content: space-around;
  }
}

.article-content-meta {
  position: absolute;
  width: 100%;
}

.article-meta {
  background: var(--background-tertiary);
  color: var(--text-inverted);
  padding: 21px 25px 11px;
  margin: 0 12px;

  @include phone {
    margin: 0 5px;
    padding: 10px 10px 5px;
  }
}

.article-meta.bottom {
  padding-top: 17px;
  padding-bottom: 8px;

  @include phone {
    padding-top: 10px;
    padding-bottom: 5px;
  }
}

.article-meta-row {
  margin-bottom: 5px;
}

.article-meta-key {
  width: 20%;
  text-transform: uppercase;
  flex-shrink: 0;

  @include phone {
    width: 50px;
  }
}

.article-meta-value {
  @include bidi-style(margin-left, 8px, margin-right, 0);

  overflow: hidden;
  text-overflow: ellipsis;

  span {
    white-space: nowrap;
  }
}

.article-meta-icon {
  fill: var(--text-inverted);
  vertical-align: top;
  margin: 2px 3px 0 0;

  @include rtl(margin, 2px 0 0 3px);

  &.icon-lock {
    margin: 0;
  }
}

.article-meta-permanent {
  margin: 0 55px;

  + .article-content .textBubble {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 0;
  }

  .alert {
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0;
    box-shadow: 0 0 0 1px inset hsla(0, 0%, 0%, 0.04);

    &:first-child {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }

    &--blank {
      background: var(--background-article-meta);
      color: var(--text-muted-alt);
      border: 1px solid var(--border-alt);

      .customer.ticket-article-item & {
        background: var(--background-article-customer-meta);
        border-color: var(--border-article-customer);
      }

      .customer.state--folde-out & {
        border-color: var(--border-article-customer-selected);
      }
    }

    .icon {
      fill: currentColor;
      margin: 2px 6px 0 0;
      vertical-align: top;
      width: 14px;
      height: 14px;
    }

    .icon-lock {
      margin-top: 1px;
      width: 16px;
      height: 16px;
    }
  }
}

.internal-border {
  padding: 5px;
  border-radius: 5px;
  margin: -5px;
}

.is-internal .internal-border {
  background: repeating-linear-gradient(
    45deg,
    var(--border-internal),
    var(--border-internal) 5px,
    var(--border-internal-stripe) 5px,
    var(--border-internal-stripe) 10px
  );
  background-size: 14px 14px;
  background-position: -1px;
}

.is-internal .bubble-arrow {
  display: none;
}

.article-visibility-text-wrapper {
  padding: 0 55px;
  opacity: 0;
  height: 0;

  .article-visibility-text {
    margin-bottom: 17px;

    &.is-hidden {
      display: none;
    }
  }
}

.textBubble {
  padding: 10px 20px;
  background: var(--background-secondary);
  border-radius: 2px;
  border: 1px solid var(--border-alt);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.06) inset;
  position: relative;

  @include phone {
    padding: 10px;
  }

  /* email css reset */
  p {
    margin: 0;
  }

  .is-internal & {
    border-color: var(--border-internal) !important;
  }
}

.textBubble-content {
  overflow: hidden;
  position: relative;
}

.textBubble-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -12px -28px;
  padding: 6px 12px;
  border-radius: 0 0 4px 4px;
}

.textBubble-control {
  display: flex;
}

.textBubble-letterCount:not(.label-danger, .label-warning) {
  color: var(--ghost-color);
}

.textBubble-overflowContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--background-secondary);

  &.is-open {
    &::before {
      display: none;
    }
  }

  .btn {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 10px;
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    height: 30px;
    background: linear-gradient(
      rgba(255, 255, 255, 0),
      var(--background-secondary)
    );
    pointer-events: none;
  }
}

.customer .textBubble-overflowContainer {
  background: var(--background-article-customer);

  &::before {
    background: linear-gradient(
      hsla(199, 44%, 93%, 0),
      var(--background-article-customer)
    );
  }
}

.customer.ticket-article-item .textBubble {
  background: var(--background-article-customer);
  border-color: var(--border-article-customer);
  box-shadow: none;
}

.customer .richtext-content blockquote {
  border-left: 5px solid var(--background-modifier-border);
}

.customer.ticket-article-item.state--folde-out .textBubble {
  border-color: var(--border-article-customer-selected);
}

.bubble-arrow {
  position: absolute;
  width: 6px;
  height: 9px;
  left: -6px;
  top: 15px;
  overflow: hidden;

  @include phone {
    left: 14px !important;
    top: -5px;
    width: 9px;
    height: 6px;
  }
}

.bubble-arrow::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 1px;
  width: 11px;
  height: 11px;
  background: var(--background-secondary);
  border: 1px solid var(--border-alt);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.06) inset;
  transform: rotate(-45deg);

  @include phone {
    top: 2px;
    left: -1px;
  }
}

.customer.ticket-article-item .bubble-arrow {
  left: auto;
  right: -6px;

  @include phone {
    left: 14px;
    right: auto;
    top: -4px;
  }
}

.customer.ticket-article-item .bubble-arrow::after {
  background: var(--background-article-customer);
  left: auto;
  right: 2px;
  border-color: var(--border-article-customer);
  box-shadow: none;

  @include phone {
    left: -1px;
    right: auto;
  }
}

.customer.ticket-article-item.state--folde-out .bubble-arrow::after {
  border-color: var(--border-article-customer-selected);
}

.attachments.attachments--list:not(:empty) {
  border-top: 1px solid var(--background-modifier-border);
  white-space: normal;
  margin: 10px -20px 0;
  padding: 26px 20px 7px 72px;
  position: relative;

  @include phone {
    margin-left: -10px;
    margin-right: -10px;
    padding: 20px 15px 7px 30px;
  }
}

.attachments.attachments--list .attachments-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0 7px;

  .badge {
    margin: -1px 0 0 5px;
  }
}

.attachments > .icon:first-child {
  position: absolute;
  left: 33px;
  top: 27px;
  fill: var(--ghost-color);

  @include phone {
    width: 16px;
    height: 16px;
    left: 12px;
    top: 20px;
  }
}

.attachments-block {
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }

  &-headline {
    font-size: 13px;
    color: var(--text-normal);
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 7px;
  }
}

.ticket-article-item .task-subline {
  margin-top: 7px;
}

.article-action {
  padding: 5px 16px;
  margin-top: 5px;
  color: var(--interactive-muted);
  font-size: 12px;
  text-align: center;

  @extend .u-clickable;
}

.article-action:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.article-action-icon {
  @include bidi-style(margin-right, 5px, margin-left, 0);

  vertical-align: top;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.article-action-name {
  @media screen and (max-width: 1080px) {
    display: none;
  }

  @media screen and (max-width: 1358px) {
    .main:not(.is-closed) & {
      display: none;
    }
  }
}

.article-add {
  position: relative;
  z-index: 1; // fixed chrome 49 + flex issue, not shown article
}

.article-new {
  margin-top: auto;
  margin-bottom: 36px;
}

.dropArea {
  background: var(--background-secondary);
  border: 5px solid;
  color: hsl(202, 66%, 55%);
  font-size: 20px;
  margin: 5px;
  display: none;

  @extend .fit;

  &--small {
    margin: 0;
    font-size: inherit;
    border-width: 3px;
    min-height: 38px;
  }
}

.is-dropTarget .dropArea {
  display: block;
}

.dropContainer {
  position: relative;
}

.dropArea-inner {
  @extend .fit;

  display: flex;
  align-items: center;
  justify-content: center;
}

.shortcut .dropdown-menu > .is-active > a {
  background: none;
}

.shortcut > .dropdown-menu {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  max-width: 100%;
  min-width: 0;
}

.editControls {
  position: absolute;
  left: 0;
  top: 5px;

  @include phone {
    position: static;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
  }
}

.article-add[data-type='email'] .editControls {
  top: 159px;
}

.editControls-item {
  position: absolute;
  top: 43px;

  @extend .u-clickable, .zIndex-4;

  @include phone {
    position: relative;
    z-index: initial;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  &.is-hidden {
    display: none;

    @include phone {
      display: block;
    }
  }
}

.editControls-item:nth-child(2) {
  @include phone {
    z-index: 1;
  }
}

.editControls-item:nth-child(3) {
  top: 79px;
}

.editControls-item:nth-child(4) {
  top: 115px;
}

.editControls-item:not(:last-child) {
  border-bottom: 1px solid var(--border);

  @include phone {
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
}

.editControls-iconHolder {
  width: 38px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;

  @include phone {
    width: 48px;
    height: 32px;
  }
}

.editControls-icon {
  @include phone {
    line-height: 0.7;
  }
}

.editControls-icon .icon {
  fill: var(--interactive-muted);
}

.pop-selector {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: var(--elevation-low);

  @include phone {
    top: -4px;
    left: 7px;
  }

  &.is-hidden {
    display: none;
  }
}

.pop-selectable {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;

  @extend .u-clickable;

  background: var(--background-tertiary);
}

.pop-selectable:hover {
  background: var(--highlight);
}

.pop-selectable:first-child {
  @include bidi-style(border-radius, 4px 0 0 4px, border-radius, 0 4px 4px 0);
}

.pop-selectable:last-child {
  @include bidi-style(border-radius, 0 4px 4px 0, border-radius, 4px 0 0 4px);
}

.pop-selectable:only-child {
  border-radius: 4px;
}

.pop-selectable:hover .pop-selectable-icon {
  fill: var(--text-inverted);
}

.article-add .icon-internal {
  fill: hsl(18, 87%, 65%);
}

.article-add.is-public .icon-internal,
.article-add.is-internal .icon-public {
  display: none;
}

.article-new .textBubble {
  border-radius: 5px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: text;
}

.articleNewEdit-body {
  width: 100%;
  position: relative;
  min-height: 20px;
  vertical-align: bottom;
  border: none;
  outline: none;
  resize: none;
  height: auto;

  @include phone {
    font-size: 16px;
  }
}

.article-new .bubble-arrow::after {
  box-shadow: none;
}

.article-attachment {
  position: absolute;
  bottom: -4px;
  left: 10px;
  right: 10px;
  height: 42px;
  padding: 10px 0;
  color: var(--text-muted);
  overflow: hidden;

  @extend .u-textTruncate;
}

.attachments:not(:empty) {
  padding: 9px 5px;
  border-top: 1px solid var(--background-modifier-border);
  margin: 6px -12px 30px;
}

.ticket-create .attachments:not(:empty) {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 56px;
}

.ticket-create .attachment--row {
  line-height: 1.45;
}

.attachment.attachment--row {
  font-size: 13px;
  padding: 1px 10px 1px 7px;

  @include rtl(padding, 1px 7px 1px 10px);

  cursor: default;
  position: relative;
  display: flex;
}

.attachment.attachment--preview {
  display: flex;
  font-size: 13px;
  padding: 9px 4px;
  position: relative;
  min-height: 42px;
  color: inherit;
  align-items: flex-start;
  border-bottom: 1px solid var(--background-modifier-border);

  &:last-child {
    border-bottom: none;
  }
}

.attachment-icon {
  margin-top: 2px;
  width: 38px;
  text-align: center;
  flex-shrink: 0;

  .icon {
    vertical-align: bottom;
  }

  img {
    width: 30px;
    height: 30px;
    object-fit: cover;
  }
}

.attachment--preview {
  .attachment-text {
    margin: 0 4px;
  }
}

.attachment--preview .attachment-name {
  min-width: 0;
  display: block;

  @extend .u-highlight;

  word-break: break-all;
}

.attachment--preview .attachment-size {
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
}

.attachment--preview .attachment-delete {
  color: var(--interactive-muted);
  text-decoration: underline;
  display: none;
  white-space: nowrap;

  @include bidi-style(margin-left, auto, margin-right, 0);

  @extend .u-clickable;

  @include phone {
    display: block;
  }
}

.attachment:hover .attachment--preview .attachment-delete {
  padding: 0 10px 0 30px;
  float: right;
  display: block;
  position: absolute;
  right: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--background-secondary-hover) 20px
  );
}

.attachment--preview .attachment-delete .icon {
  fill: var(--interactive-muted);
  width: 9px;
  height: 9px;

  @include bidi-style(margin-right, 5px, margin-left, 0);
}

.attachment:hover {
  background: var(--background-secondary-hover);
}

.attachment--row .attachment-name {
  @include bidi-style(margin-right, 5px, margin-left, 0);

  min-width: 0;

  @extend .u-highlight;
}

.attachment--row .attachment-size {
  white-space: nowrap;
  float: right;

  @include bidi-style(margin-right, 10px, margin-left, 0);
}

.attachment--row .attachment-delete {
  color: var(--interactive-muted);
  text-decoration: underline;
  display: none;
  white-space: nowrap;

  @include bidi-style(margin-left, auto, margin-right, 0);

  @extend %clickable;
}

.attachment:hover.attachment--row .attachment-delete {
  padding: 0 10px 0 30px;
  float: right;
  display: block;
  position: absolute;
  right: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--background-secondary-hover) 20px
  );
}

.attachment--row .attachment-delete .icon {
  width: 9px;
  height: 9px;

  @include bidi-style(margin-right, 5px, margin-left, 0);
}

.attachmentPlaceholder-inputHolder {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  pointer-events: auto;

  @extend .u-highlight;
}

.attachmentUpload {
  color: var(--text-muted);
}

.attachmentUpload-cancel {
  @extend .u-clickable;

  @include bidi-style(margin-left, auto, margin-right, 0);

  text-decoration: underline;
}

.attachmentUpload .icon {
  fill: var(--interactive-muted);
  width: 9px;
  height: 9px;

  @include bidi-style(margin-right, 5px, margin-left, 0);
}

.attachmentUpload-progressBar {
  position: absolute;
  height: 4px;
  background: hsl(202, 66%, 55%);
  left: 0;
  bottom: 0;
}

.attachmentUpload--standalone {
  position: relative;
  margin-bottom: 7px;
  padding-bottom: 2px;
  box-shadow: 0 -4px var(--border) inset;

  &:last-child {
    margin-bottom: 0;
  }

  .attachmentUpload-cancel {
    padding: 0 2px 0 7px;
  }
}

.attachmentUploadContainer {
  .attachmentUpload-progressBar {
    position: inherit;
  }
}

.tabsSidebar-tabsSpacer {
  @include bidi-style(padding-right, 62px !important, padding-left, 0);

  /*
    force div to show scrollbars
    because we offset the sidebar tabs when the os shows scrollbars
  */
  overflow-x: hidden;
  overflow-y: scroll;

  @include phone {
    @include bidi-style(padding-right, 0 !important, padding-left, 0);
  }
}

.tabsSidebar-sidebarSpacer {
  @include bidi-style(margin-right, $sidebarWidth, margin-left, 0);

  transition: margin-right 500ms;

  @include rtl(transition, margin-left 500ms);
}

.tabsSidebar-sidebarSpacer.is-closed {
  margin-right: 0;

  @include rtl(margin-left, 0);
}

.tabsSidebar-holder {
  overflow: hidden;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tabsSidebar .sidebar {
  width: $sidebarWidth;
  border-left: 1px solid var(--border);
  padding: 0;
  margin-bottom: 1px;
}

.tabsSidebar .sidebar > hr {
  margin: 20px;
}

.tabsSidebar .sidebar-header {
  display: flex;
  align-content: stretch;
  position: relative;
  margin: 0 20px;

  + hr {
    margin-top: 0;
  }
}

.sidebar-header-headline {
  padding: 33px 8px 17px 25px;

  @include rtl(padding, 33px 25px 17px 8px);

  margin: 0 0 0 -20px;

  @include rtl(margin, 0 -20px 0 0);

  line-height: 1;

  @extend .u-clickable, .u-textTruncate;
}

.sidebar-header-actions {
  flex: 1;

  @include bidi-style(margin-right, 5px, margin-left, 0);

  display: flex;
  align-items: center;

  .dropdown {
    flex: 1;
    position: static;
  }

  .dropdown-toggle {
    padding-top: 38px;
    padding-bottom: 24px;
  }
}

.tabsSidebar-close {
  padding: 27px 35px 12px 0;
  margin: 0 -20px 0 0;

  @extend .u-clickable;

  display: flex;
  align-items: center;
  justify-content: center;

  .icon {
    fill: var(--interactive-primary);
  }
}

.tabsSidebar .sidebar-content {
  padding: 0 20px 20px;
}

.sidebar.bottom-form-shadow {
  box-shadow: 0 -1px rgba(0, 0, 0, 0.005) inset,
    0 -2px rgba(0, 0, 0, 0.005) inset, 0 -3px rgba(0, 0, 0, 0.005) inset,
    0 -4px rgba(0, 0, 0, 0.005) inset;
}

.tabsSidebar {
  position: absolute;

  @include bidi-style(right, 0, left, auto);

  top: 0;
  bottom: 0;
  transition: 500ms;
  z-index: 300;

  &.tabsSidebar--attributeBarSpacer {
    bottom: 60px;
  }
}

.tabsSidebar.is-closed {
  transform: translateX($sidebarWidth);

  @include rtl(transform, translateX(-$sidebarWidth));
}

.tabsSidebar-tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;

  @include bidi-style(left, -55px, right, auto);

  top: 0;
  bottom: 0;
  pointer-events: none;

  @include phone {
    @include bidi-style(left, -47px, right, auto);
  }
}

.test {
  position: absolute;
  width: 100%;
}

.tabsSidebar-tab {
  width: 56px;
  height: 60px;
  background: var(--background-primary-alt);
  position: relative;
  border-top: 1px solid var(--border-alt);

  @extend .u-clickable;

  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  @include phone {
    width: 47px;
    height: 50px;
  }
}

.tabsSidebar-tab.is-changed::before {
  position: absolute;
  content: '';
  left: -3px;
  width: 6px;
  height: 6px;
  top: 50%;
  margin-top: -3px;
  border-radius: 100%;
  background: var(--interactive-muted-alt);
  box-shadow: 0 0 0 2px var(--background-primary);
}

.tabsSidebar-tab:first-child {
  @include bidi-style(border-top-left-radius, 8px, border-top-right-radius, 0);

  border-top: none;
}

.tabsSidebar-tab:last-child {
  @include bidi-style(
    border-bottom-left-radius,
    8px,
    border-bottom-right-radius,
    0
  );
}

.tabsSidebar-tab .icon {
  width: 24px;
  height: 24px;
  fill: var(--interactive-muted-alt);
}

.tabsSidebar-tab.active {
  .tabsSidebar-tab-count {
    background: var(--interactive-muted-alt-selected);

    &::after {
      border-right-color: var(--interactive-muted-alt-selected);
    }

    &.tabsSidebar-tab-count--info {
      background: var(--button-primary-background);
      opacity: 1;

      &::after {
        border-right-color: var(--button-primary-background);
      }
    }

    &.tabsSidebar-tab-count--success {
      background: hsl(145, 51%, 45%);
      opacity: 1;

      &::after {
        border-right-color: hsl(145, 51%, 45%);
      }
    }

    &.tabsSidebar-tab-count--warning {
      background: hsl(45, 98%, 63%);
      opacity: 1;

      &::after {
        border-right-color: hsl(45, 98%, 63%);
      }
    }

    &.tabsSidebar-tab-count--danger {
      background: hsl(11, 85%, 48%);
      opacity: 1;

      &::after {
        border-right-color: hsl(11, 85%, 48%);
      }
    }
  }

  .icon {
    fill: var(--interactive-muted-alt-selected);
  }
}

.tabsSidebar-tab-count {
  position: absolute;
  left: 9px;
  top: 5px;
  background: var(--interactive-muted-alt);
  width: 16px;
  height: 13px;
  text-align: center;
  border-radius: 2px;
  font-size: 9px;
  line-height: 14px;
  color: var(--background-primary-alt);

  @include phone {
    left: 4px;
    top: 4px;
  }

  [data-tab='organization'] & {
    left: 7px;

    + .icon {
      margin-left: 3px;
    }
  }

  + .icon {
    margin-top: 6px;
  }

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20%;
    border-bottom: 3px solid transparent;
    border-right: 5px solid var(--interactive-muted-alt);
  }

  &.tabsSidebar-tab-count--info {
    background: var(--button-primary-background);
    opacity: 0.5;

    &::after {
      border-right-color: var(--button-primary-background);
    }
  }

  &.tabsSidebar-tab-count--success {
    background: hsl(145, 51%, 45%);
    opacity: 0.5;

    &::after {
      border-right-color: hsl(145, 51%, 45%);
    }
  }

  &.tabsSidebar-tab-count--warning {
    background: hsl(45, 98%, 63%);
    opacity: 0.5;

    &::after {
      border-right-color: hsl(45, 98%, 63%);
    }
  }

  &.tabsSidebar-tab-count--danger {
    background: hsl(11, 85%, 48%);
    opacity: 0.5;

    &::after {
      border-right-color: hsl(11, 85%, 48%);
    }
  }
}

.alert {
  padding: 10px 15px 8px;
  border-radius: 3px;
  color: var(--text-inverted);
  border: none;
  background: hsla(0, 0%, 0%, 0.3);

  .icon {
    @include bidi-style(margin-right, 10px, margin-left, 0);

    fill: currentColor;
  }

  .btn {
    background: hsla(0, 0%, 0%, 0.2);
    border-color: hsla(0, 0%, 0%, 0.1);
    color: inherit;
  }

  &--info {
    background: var(--button-primary-background);
  }

  &--success {
    &,
    &[contenteditable]:hover,
    &[contenteditable]:focus {
      background: hsl(145, 51%, 45%);
    }
  }

  &--warning {
    color: hsl(45, 98%, 17%);
    background: hsl(45, 98%, 63%);

    .btn {
      background: hsla(0, 0%, 100%, 0.2);
    }
  }

  &--danger {
    background: hsl(11, 85%, 48%);
  }

  &--square {
    border-radius: 0;
  }

  &.horizontal .btn {
    margin-top: -5px;
    margin-bottom: -4px;

    &:last-child {
      margin-right: -5px;
    }
  }

  &-row {
    margin: 3px 0;

    + .btn {
      margin-top: 3px;
    }
  }
}

.tags,
.links,
.link_kb_answers {
  margin: 20px 0;
}

.tags {
  margin-top: 10px;
}

.userNotifications label + .btn {
  margin-top: 1px;
}

.list {
  padding: 0;
  margin-bottom: 5px;
}

.list-title {
  margin-top: 7px;
  margin-bottom: 4px;
  text-transform: uppercase;
  color: var(--ghost-color);
  display: block;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.list-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--background-modifier-border);
}

.list-item-name {
  flex: 1;
  padding: 4px 1px;
}

.list-item-delete {
  padding: 0 10px;

  @include bidi-style(margin-right, -3px, margin-left, 0);

  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;

  @extend .u-clickable;

  .icon {
    width: 9px;
    height: 9px;
    fill: var(--interactive-muted);
  }
}

.list-item-delete:hover .icon {
  fill: hsl(1, 77%, 47%);
}

li.list-item-none {
  list-style-type: none;
}

.ticket-id {
  color: var(--text-inverted);
  background: var(--interactive-muted-alt);
  font-size: 11px;
  border-radius: 7px;
  padding: 0 5px;

  @include bidi-style(margin-right, 2px, margin-left, 0);
}

.attributeBar {
  background: var(--background-secondary);
  transition: margin 250ms;
  flex-shrink: 0;
  border-top: 1px solid var(--border);

  &.is-closed {
    margin-bottom: -60px;
  }

  @include phone {
    &-reset {
      flex-shrink: 5;
    }

    .btn,
    .buttonDropdown {
      min-width: 20px;

      &--only-icon {
        min-width: 36px;
      }
    }
  }

  &-inner {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
  }

  &-avatars {
    margin-right: 10px;
  }

  &-draft-spacer {
    width: 1px;
    height: 60px;
    margin-right: 15px;
    background: var(--background-modifier-accent);
  }

  &-avatars:empty + &-draft-spacer {
    display: none;
  }

  &--border {
    border-top: 1px solid var(--border);
  }

  &--spacer-after {
    margin-right: auto;
  }
}

.newTicket {
  padding: 14px 34px;

  @include phone {
    padding: 0;
  }
}

.newTicket .sidebar {
  width: 290px;
}

.newTicket .form-control {
  border-color: var(--border);

  &:focus,
  &.focus {
    border-color: var(--border-highlight);
  }
}

.newTicket .article-form-top {
  margin-top: 15px;
}

.newTicket--chatTicket {
  flex: 1;
  display: flex;
  padding: 0;
  height: 100%;

  & > .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  & > .box {
    width: calc(50% - 47px);
    margin: 34px;
  }

  .chatHistory {
    display: flex;
    flex-direction: column;
  }

  .boxFade {
    width: 94px;
    top: 34px;
    height: 100%;
    position: absolute;

    @include bidi-style(margin-left, -34px, margin-right, 0);

    z-index: 1;
  }
}

.box {
  background: var(--background-secondary);
  margin: 20px 0;
  border: 1px solid var(--border);
  padding: 20px 24px;
}

.box.box--newTicket {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;

  @include phone {
    margin: 0;
    border: none;
    padding: 15px;
  }
}

.box .page-header {
  text-align: center;
  margin-bottom: 12px;
}

.box--paper {
  background-image: linear-gradient(
    transparent 30px,
    var(--background-modifier-border) 31px
  );
  background-size: 100% 31px;
  line-height: 31px;
  padding-top: 31px;
  padding-bottom: 31px;

  h1,
  h2,
  h3 {
    margin: 0;
    line-height: inherit;
  }

  h3:not(:first-child) {
    margin-top: 31px;
  }
}

.box h1 {
  margin-top: 10px;
  margin-bottom: 12px;
  color: var(--text-normal);
  flex: 1;
}

.box h2 {
  margin-top: 12px;
}

.box .two-columns {
  margin-left: -4px;
  margin-right: -4px;
}

.box .two-columns .column {
  margin-left: 4px;
  margin-right: 4px;
  width: calc(50% - 8px);

  @include phone {
    width: auto;
  }
}

.box-controls {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box--yellow {
  background: hsl(47, 100%, 93%);
  border-color: hsl(47, 100%, 75%);
  color: hsl(47, 20%, 67%);

  h1,
  h2 {
    color: hsl(47, 3%, 28%);
  }
}

.box-progress {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-progress-title {
  color: hsl(47, 3%, 28%);
}

.box-progress-body {
  flex: 1;

  @include bidi-style(margin-left, 24px, margin-right, 0);

  display: flex;
  align-items: center;
  justify-content: center;

  progress {
    width: 100%;
  }
}

.horizontal > .box {
  margin-top: 4px;
  margin-bottom: 4px;

  & + .box {
    border-left-width: 0;
  }
}

.formset-inset {
  margin: 34px -24px 24px;
  padding: 19px 24px 24px;
  background: var(--background-primary-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.type-tabs {
  @include phone {
    overflow: hidden;
    -webkit-overflow-scrolling: none;
  }
}

.type-tabs .tab {
  height: 40px;
  line-height: 42px;
  padding: 0 12px;
  list-style: none;
  align-items: flex-start;

  @include phone {
    display: block;
    text-align: center;
    flex-shrink: 1;
  }
}

.type-tabs .tab-icon {
  width: 17px;
  height: 17px;
  fill: var(--interactive-muted);
  vertical-align: top;

  @include bidi-style(margin-right, 9px, margin-left, 0);

  margin-top: 11px;
  transform: scale(1.2);
  flex-shrink: 0;
}

.type-tabs .tab.active .tab-icon {
  fill: var(--text-inverted);
}

.token {
  padding: 0 0 0 10px;
  margin: 0 5px 6px 0;
  height: 26px;
  color: var(--tag-text);
  border-radius: 3px;
  background: var(--tag-background);
  border: none;
  float: none;
  display: inline-flex;
  align-items: center;
  cursor: default;
  max-width: 100%;

  &.active {
    background: var(--highlight);
    color: var(--text-inverted);

    .close,
    .token-close {
      opacity: 1;
    }
  }
}

/*
    selector needs to be stronger than .token-input
    in order to override input[type=text]
  */
.tokenfield .token-input {
  vertical-align: top;
  padding: 0 10px 7px 5px;
  margin: 0;
  min-width: 60px;
  height: 32px;
  display: inline-block;
  border: none;
  background: none;
  box-shadow: none;
  outline: none;
  flex: 1;

  &:focus {
    box-shadow: none;
  }

  &[disabled] {
    background: none;
  }
}

.tokenfield .token ~ .token-input {
  padding: 0 5px 7px 0;
}

.token-label {
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tokenfield.form-control {
  padding: 7px 7px 0;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.token .close,
.token-close {
  margin: 0;
  padding: 0 9px 1px 6px;
  font-family: inherit;
  font-weight: 100;
  font-size: 28px;
  line-height: 1;
  color: inherit;
  text-shadow: none;
  opacity: 0.5;
  outline: none;
  height: auto;

  @extend %clickable;
}

.token .close:hover,
.token-close:hover {
  opacity: 0.5;
}

/* allow/show autocomplete in modal dialog */
.ui-autocomplete.ui-widget-content {
  @extend .zIndex-11;

  position: absolute;
  max-height: 380px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-menu {
  background: var(--background-tertiary);
  border: none;
  color: var(--text-inverted);
  font-family: inherit;
  font-size: inherit;

  .ui-menu-item {
    padding: 9px 15px;
    list-style-image: none;

    &.is-inactive {
      text-decoration: line-through;
      opacity: 0.73;
    }

    &:not(:first-child) {
      box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
    }

    &.ui-state-focus {
      margin: 0;
      border: none;
      background: var(--highlight);
      color: inherit;

      + li {
        box-shadow: none;
      }
    }
  }
}

.drox {
  color: var(--text-muted);
}

.drox .drox-header {
  padding-bottom: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.drox a.create {
  margin-top: 2px;
  display: inline-block;
}

.drox .form-group {
  margin-bottom: 22px;
}

.drox .drox-body p:first-child {
  margin-top: 20px;
}

.newTicket .templates {
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 14px;
}

.templates-manage fieldset {
  margin: 0;
}

.template-attributes {
  margin: 17px 0 19px;
}

.template-attribute {
  height: 24px;
  line-height: 25px;

  @include bidi-style(padding-left, 10px, padding-right, 0);

  margin-bottom: 2px;
  font-size: 13px;
  color: var(--text-muted-alt);
  background: var(--background-primary-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.template-attribute .key {
  text-transform: uppercase;

  @include bidi-style(margin-right, 3px, margin-left, 0);
}

.template-attribute .value {
  @include bidi-style(margin-left, 3px, margin-right, 0);
}

.template-attribute .delete {
  padding: 0 7px;
  margin-top: 4px;
  line-height: 19px;
  font-size: 28px;
  font-weight: 300;
  opacity: 0.4;
}

.customer-name {
  color: var(--text-normal);
}

.customer-email {
  margin-top: 5px;
  margin-bottom: 20px;
  display: block;
}

.table.user-list {
  tr:hover .switchView {
    visibility: visible;
  }

  td .list {
    margin-top: -4px;
  }

  .switchView {
    visibility: hidden;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .btn {
    margin: 3px 5px 0;
  }
}

.switchBackToUser {
  display: flex;
  align-items: center;
  background: hsl(200, 87%, 45%);
  color: var(--text-inverted);
  height: 45px;
  padding: 0 17px;

  /* top: -45px !important; */
  border-bottom: 5px solid hsl(205, 90%, 60%);
}

.switchBackToUser-icon {
  width: 19px;
  height: 18px;
}

.switchBackToUser-text {
  @include bidi-style(margin-left, 10px, margin-right, 0);
}

.switchBackToUser-close {
  width: 40px;
  height: 40px;

  @include bidi-style(margin-right, -10px, margin-left, 0);

  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    fill: var(--text-inverted);
  }
}

.modal {
  @extend .zIndex-11;

  &-loader {
    text-align: center;
    padding: 70px;
  }

  &-backdrop--local {
    background: var(--background-primary-alt);
  }
}

.modal-dialog {
  width: auto;
  max-width: 660px;
  margin-top: 35px;
  margin-bottom: 35px;

  @extend .zIndex-11;

  @include phone {
    max-width: calc(100% - 20px) !important;
    margin: 10px;
  }

  &.wizard {
    margin: 35px auto;
  }
}

.modal--veryLarge .modal-dialog {
  max-width: 990px;
}

.modal--large .modal-dialog {
  max-width: 740px;
}

.modal--small .modal-dialog {
  max-width: 440px;
}

.modal--dynamicSize .modal-dialog {
  max-width: 100%;
  width: max-content;
  padding: 0 35px;

  @include phone {
    padding: 0;
    margin: 10px;
  }
}

.modal-dialog.wizard {
  max-width: 460px;
}

.modal-content {
  border-radius: 0;
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text-normal);
  background: var(--background-secondary);
}

.modal-header {
  padding: 30px 23px 23px;
  border: none;

  @include phone {
    padding: 14px 15px;
  }

  &--empty {
    padding: 0;
  }
}

.modal-header h1 {
  text-align: center;

  @include phone {
    text-align: initial;
    line-height: 1.2;
  }
}

.modal-close {
  padding: 23px;
  position: absolute;
  z-index: 1;
  right: 0;
  color: var(--interactive-muted);

  @include rtl(right, auto);
  @include rtl(left, 0);

  top: 0;

  @extend .u-clickable;

  @include phone {
    position: static;
    padding: 21px;
    margin: -14px -15px 0 0;
    float: right;
  }

  &:active {
    color: var(--interactive-muted-active);
  }

  .icon-diagonal-cross {
    fill: currentColor;
  }
}

.modal-alerts-container {
  padding: 0 23px;
}

.modal-body {
  padding: 0 23px;
  clear: both;

  @include phone {
    padding: 0 15px;
  }

  h2:first-child {
    margin-top: 0;
  }

  p:first-child,
  .alert.hidden:first-child + p {
    margin-top: 0;
  }

  .table > thead > tr > th {
    background: var(--background-primary-alt);
  }
}

.modal-footer {
  padding: 23px 23px 20px;
  border: none;
  display: flex;

  @include rtl(text-align, left);

  @include phone {
    padding: 15px;
  }

  .btn--text + .btn--text {
    margin-bottom: -10px;
  }
}

.modal-leftFooter,
.modal-centerFooter,
.modal-rightFooter {
  display: flex;
  align-items: center; /* because of btn--text btn--subtle being thinner than the rest */
  flex: 1;
}

.modal.modal--local {
  display: block;
  padding: 0 40px;

  @extend .zIndex-11;

  @include bidi-style(padding-left, 40px, padding-right, 0);

  @include phone {
    padding: 0 !important;
  }

  .modal-dialog {
    box-shadow: 0 0 40px hsla(210, 17%, 40%, 0.34);

    @include dark {
      box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.34);
    }
  }
}

.caret {
  position: absolute;
  top: 50%;
  margin-top: -3px;
  right: 10px;
}

.dropdown-backdrop {
  @extend .zIndex-5; // has to be behind dropdown-menu
}

.dropdown-menu {
  @extend .zIndex-6; // has to be behind modal windows and beneath notifications (popover)

  margin: 0;
  padding: 0;
  min-width: 100%;
  color: var(--text-inverted);
  text-transform: initial;
  letter-spacing: 0;
  background: var(--background-tertiary);
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;

  @include rtl(text-align, right);

  overscroll-behavior: contain;
}

.dropdown-menu .divider {
  background: var(--background-modifier-border);
}

.dropdown-menu kbd {
  background: none;
  color: inherit;
  padding: 2px 5px;

  @include bidi-style(margin-left, 7px, margin-right, 0);

  line-height: 1;
  vertical-align: baseline;
  opacity: 0.5;
}

.dropdown-toggle {
  display: flex;
  align-items: center;

  @extend .u-clickable;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
}

.dropdown-menu.dropdown-menu--light {
  background: var(--background-secondary);
  color: var(--text-muted);
}

.dropdown-menu.dropdown-menu--light > li {
  color: var(--text-nav);

  &.dropdown-header {
    color: var(--text-muted);
  }
}

.dropdown-menu.dropdown-menu--light > li > a:hover {
  background: var(--background-secondary-hover);
}

.dropdown-menu.dropdown-menu--light li:hover {
  background: none;
}

.dropdown-menu.dropdown-menu--light li.is-active {
  color: var(--text-inverted);
}

.dropdown ul {
  margin: 0;
  padding: 0;
}

.dropdown li,
.dropup li {
  height: 39px;
  line-height: 39px;
  padding: 0 15px;

  @extend %clickable;

  white-space: nowrap;

  &:focus {
    outline: none;
  }

  &.is-active {
    small {
      color: var(--text-muted-highlight);
    }
  }
}

.dropdown.dropdown--actions li.with-category {
  height: 39px;
  padding: 2.5px 15px;
  display: block;
}

.dropdown li:not(:first-child) {
  box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
}

.dropdown li.label {
  box-shadow: none;

  + li {
    box-shadow: none;
  }
}

.dropdown li:hover,
.dropdown li.is-active {
  background: var(--highlight);

  + li {
    box-shadow: none;
  }
}

.dropdown-menu > li.danger:hover,
.dropdown-menu > li.danger.is-active {
  background: var(--danger-color);
}

.dropdown-menu > li.create:hover,
.dropdown-menu > li.create.is-active {
  background: hsl(145, 51%, 45%);
}

.dropdown-menu > li[disabled] {
  opacity: 0.33;

  &:hover,
  &.is-active {
    background: none;
    cursor: default;
  }
}

.dropdown-menu > li > a {
  color: inherit;
  padding: 0 15px;
  margin: 0 -15px;
  line-height: inherit;
}

.dropdown-menu > li > a:hover {
  color: inherit;
  background: none;
}

.dropdown-menu > li > a span {
  display: block;
}

.dropdown-menu .badge--text {
  @include bidi-style(padding-left, 10px, padding-right, 0);
}

.dropdown.dropdown--actions {
  li {
    line-height: initial;
    height: auto;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    word-break: break-all;
  }

  .dropdown-iconSpacer,
  .dropdown-selectedSpacer {
    display: flex;
    align-items: center;
  }

  .dropdown-iconSpacer {
    width: 25px;
  }

  .dropdown-selectedSpacer {
    width: 34px;

    @include bidi-style(margin-left, auto, margin-right, 0);

    justify-content: flex-end;
    opacity: 0;

    .icon {
      fill: var(--text-inverted);
    }

    &.is-selected {
      opacity: 1;
    }
  }

  a {
    @extend .u-clickable;

    display: flex;
    flex: 1;
    padding: 0 18px;
  }

  li.dropdown-highlight-list {
    padding: 0 10px;

    a {
      padding: 11px 18px;
    }
  }
}

.dropdown.dropdown--wide {
  li {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

li.dropdown-header {
  line-height: 34px;
  height: 30px;
  color: var(--text-muted);
  box-shadow: none !important;
  pointer-events: none;
}

.dropdown-menu--has-submenu {
  overflow: hidden;
  background: none;

  ul {
    background: var(--background-tertiary);
  }
}

.dropdown-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.dropdown.dropdown--actions .dropdown-controls {
  @extend .u-clickable;

  display: flex;

  &:not(:hover, .is-active) {
    background: hsl(206, 7%, 28%);
  }

  .icon {
    fill: var(--text-inverted);

    @include bidi-style(margin-right, 10px, margin-left, 0);

    flex-shrink: 0;
  }
}

.dropdown-title {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-detail {
  opacity: 0.5;
}

.dropdown {
  .dropdown-menu-full-height {
    li {
      padding: 0;
    }

    a {
      padding: 11px 18px;
      margin: 0;
    }
  }
}

.recipientList,
.recipientList-organizationMembers {
  list-style: none;
  padding: 0;
}

.recipientList-entry {
  display: flex;
  align-items: center;

  @extend .u-clickable;

  &.is-inactive {
    .recipientList-name {
      text-decoration: line-through;
      opacity: 0.73;
    }
  }
}

.recipientList-entry .recipientList-iconSpacer {
  width: 20px;

  @include bidi-style(margin-left, -5px, margin-right, 0);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recipientList-icon {
  width: 16px;
  height: 16px;
  fill: var(--text-inverted);
  opacity: 0.2;
}

.recipientList--new,
.recipientList-entry:hover,
.recipientList-entry.is-active {
  .recipientList-icon {
    opacity: 1;
  }
}

.recipientList-name {
  color: var(--text-inverted);

  @include bidi-style(margin-left, 10px, margin-right, 0);

  flex: 1;

  @extend .u-textTruncate;
}

.recipientList-status {
  opacity: 0.5;
  margin: 0 10px;
  flex-shrink: 1;

  &:last-child {
    margin-right: 0;
  }
}

.recipientList-arrow {
  fill: var(--text-inverted);
  opacity: 0.39;
}

.recipientList-entry:hover .recipientList-arrow {
  opacity: 1;
}

.recipientList-detail {
  opacity: 0.5;

  &.is-inactive > span {
    text-decoration: line-through;
  }
}

.recipientList-icon.plus {
  @include bidi-style(margin-left, 13px, margin-right, 0);
}

.recipientList--new {
  background: hsl(145, 51%, 45%);
}

.dropdown .recipientList--new:hover {
  background: hsl(147, 52%, 43%);
}

.recipientList-controls,
.recipientList-controls:hover {
  @extend .u-clickable;

  padding: 0 10px !important;
  background: var(--background-modifier-lighter);

  & + li {
    box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  }
}

.recipientList-organizationMembers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.userInfo-avatar {
  float: right;

  @include rtl(float, left);

  position: relative;
}

.organizationInfo-avatar {
  @extend .userInfo-avatar;

  @include bidi-style(padding, 18px 0 0 18px, padding, 18px 18px 0 0);

  background: var(--background-modifier-accent);
  color: var(--text-muted);
}

.userList {
  list-style: none;
  padding: 0;

  .userList-entry {
    margin: 10px 0;
    display: flex;
    align-items: center;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .userList-name {
    @extend .u-textTruncate;

    @include bidi-style(margin-left, 7px, margin-right, 0);
  }
}

.checkbox,
.radio {
  font-size: 14px;
  padding: 0 6px;

  .form-group & {
    padding: 10px 12px;
    margin: 0;
    list-style: none;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--background-secondary);
    border: 1px solid var(--border);
  }

  .checkbox-replacement {
    display: inline-block;
  }

  label {
    padding-left: 0;
    min-height: 0;
  }

  > label,
  &-child {
    margin-top: 5px;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    text-transform: inherit;
    letter-spacing: 0;
    line-height: 1.2;

    &:first-child {
      margin-top: 0;
    }

    &.is-disabled {
      cursor: default;
      touch-action: default;

      span {
        opacity: 0.33;
      }
    }

    &.additional-radio-controls {
      margin-top: 0;

      .controls {
        display: inline-flex;
        margin-left: 5px;
      }
    }
  }

  &-child {
    padding-left: 20px;
  }

  .help-text {
    display: table;
    font-size: 0.92em;
    margin: 2px 0 3px 18px;
  }
}

.checkbox.form-group .checkbox--list,
.radio.form-group .radio--list {
  margin-top: 0;
  margin-bottom: 15px;
  height: auto;
  padding-top: 3px;
  padding-bottom: 3px;
}

.checkbox,
.radio {
  &.form-group .controls label {
    padding: 2px 0;
    font: inherit;
    margin-bottom: 0;
    color: inherit;
    text-transform: inherit;
    letter-spacing: 0;
    line-height: 1.2;

    &:first-child {
      margin-top: 0;
    }

    &.is-disabled {
      cursor: default;
      touch-action: default;

      span {
        opacity: 0.33;
      }
    }
  }

  &-child {
    padding-left: 20px;
  }
}

.radio_graphic .selections-container {
  display: grid;
  grid-gap: 10px;

  // fit as many as possible in one line, they must at least be 112px wide
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));

  label {
    margin-top: 0;
    position: relative;
  }

  .icon {
    flex-shrink: 0;
  }

  .icon-checked {
    display: none;
  }

  .label-box {
    display: block;
    background: var(--background-secondary);
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
  }

  .label-row {
    display: flex;
    align-items: center;
    padding: 5px 10px;
  }

  .label-text {
    display: block;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .radio-illustration {
    display: block;
    width: 100%;
    padding-bottom: 100%;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      object-fit: cover;
    }
  }

  input {
    &:checked {
      ~ .label-box {
        border-color: var(--border-highlight);
        box-shadow: 0 0 0 3px var(--shadow-highlight);

        .icon-checked {
          display: inline;
        }

        .icon-unchecked {
          display: none;
        }
      }
    }
  }
}

.userSearch-label {
  margin-top: 11px;

  @include bidi-style(margin-right, 10px, margin-left, 0);
}

.userSearch .tab:not(.active) {
  background: var(--background-secondary);
}

.userSearch {
  margin: 0 0 20px;
}

.userSearch .tabs {
  margin: 0;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav a {
  padding: 10px 15px;
  display: block;
}

.nav-tabs {
  display: flex;
  margin: 10px -20px 20px;
  padding: 0 20px 0 21px; /* margin-left: -1px */

  @include rtl(padding, 0 21px 0 20px);

  position: relative;
}

.nav-tabs li {
  margin: 0;
  color: var(--interactive-muted);
  border: 1px solid var(--border);
  margin-left: -1px;
  background: var(--background-secondary);
  position: relative;

  &:first-child {
    border-radius: 7px 0 0 7px;

    @include rtl(border-radius, 0 7px 7px 0);
  }

  &:last-child {
    border-radius: 0 7px 7px 0;

    @include rtl(border-radius, 7px 0 0 7px);
  }

  &:only-child {
    border-radius: 7px;
  }

  &.active {
    color: var(--text-inverted);
    background: var(--button-active);
  }

  a {
    padding: 10px 24px 8px;
    color: inherit;
    color: inherit;
  }
}

.tab-content {
  h2:first-child {
    margin-top: 0;
  }
}

.or-divider {
  position: relative;
  margin: 16px 0;
  text-align: center;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    margin-top: -1px;
    height: 1px;
    background: hsla(0, 0%, 0%, 0.1);
  }

  span {
    position: relative;
    background: var(--background-secondary);
    padding: 0 10px;

    .modal-body & {
      background: var(--background-primary);
    }
  }
}

.settings-entry {
  margin-bottom: 42px;
  max-width: 700px;

  @include phone {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  &--stretched {
    max-width: none;
  }
}

.setting-controls {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.form-item .form-group {
  margin-bottom: 0;
}

.form-item .form-group + .form-group {
  margin-top: 15px;
}

.form-item + .btn {
  @include bidi-style(margin-left, 23px, margin-right, 0);
}

.scrollPageHeader {
  @extend .zIndex-5;

  display: flex;
  align-items: center;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border);
  height: 64px;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 22px;
  position: absolute;
  transform: translateY(-100%);

  @include phone {
    height: 50px;
    padding: 0 6px;
    overflow: hidden;

    &.is-closed {
      overflow: visible;
    }
  }
}

.scrollPageHeader small {
  color: var(--text-muted-alt);

  @include phone {
    margin-top: 1px;

    @include bidi-style(margin-left, 3px, margin-right, 0);
  }
}

.scrollPageHeader .ticket-title {
  max-width: initial;
  padding: 0;
  min-width: 0;
  flex: 1;
}

.scrollPageHeader h1 {
  font-size: 19px;
  margin: 0 15px;

  @extend .u-textTruncate;

  @include phone {
    font-size: 17px;
    margin: 0 5px;
  }
}

.wizard {
  margin: auto; // makes sure that the wizard is scrollable
}

.wizard-logo {
  fill: var(--text-inverted);

  @include bidi-style(margin-left, -25px, margin-right, 0);

  margin-bottom: 5px;
}

.wizard-slide {
  @extend .hero-unit;

  display: flex;
  flex-direction: column;
  width: 400px;
  padding-bottom: 18px;
  margin-bottom: 20px;

  &.wizard-slide--large {
    width: 460px;
  }
}

.wizard h2 {
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
  padding-bottom: 8px;
  margin-bottom: 16px;

  & + p {
    margin-top: 0;
  }
}

.wizard-body {
  flex: 1;
  padding-bottom: 15px;

  @include phone {
    width: 100%;
  }

  .form-control {
    min-width: 0;
  }
}

.wizard-controls {
  display: flex;
  margin-top: 15px;
  height: 39px;
}

.wizard-buttonList {
  margin-top: 15px;
  min-width: 200px;
}

p + .wizard-buttonList,
label + .wizard-buttonList {
  margin-top: 5px;
}

.wizard-loadingText {
  text-align: center;
  margin: 0;
}

.wizard-loadingText .loading {
  vertical-align: middle;

  @include bidi-style(margin-right, 10px, margin-left, 0);
}

.wizard-aside {
  padding-top: 15px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}

.setup.wizard .wizard-body {
  min-height: 140px;

  & > p:first-child {
    margin-top: 0;
  }
}

.setup.wizard .logo-preview,
.branding .logo-preview {
  display: block;
  height: 0;
  max-width: 200px;
  max-height: 100px;

  &[src=''] {
    visibility: hidden;
  }

  + .logo-preview-placeholder {
    height: 100px;
    color: var(--text-muted);
    background: var(--background-modifier-accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.setup.wizard .logo-preview:not([src='']) {
  margin: 0 auto 15px;
  height: auto;

  + .logo-preview-placeholder {
    display: none;
  }
}

.setup.wizard .base-outbound-settings {
  margin-top: 15px;
}

.branding .logo-preview:not([src='']) {
  margin: 20px auto 12px;
  height: auto;

  + .logo-preview-placeholder {
    display: none;
  }
}

.branding.login {
  padding: 24px 24px 0;
}

.import.wizard .wizard-slide {
  min-height: 300px;
}

.import-source {
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  height: 50px;
  margin: 5px 0;

  @extend .u-clickable;
}

.input-feedback {
  position: absolute;

  @include bidi-style(padding-left, 10px, padding-right, 0);

  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 52px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 33%);

  &--no-background {
    background: none;
  }
}

.input-group-addon {
  color: inherit;
}

.input-feedback--no-background {
  background: none;
}

.input-feedback .icon {
  display: none;
}

.input-feedback[data-state='loading'] .loading.icon,
.input-feedback[data-state='error'] .icon-error,
.input-feedback[data-state='success'] .icon-checkmark {
  display: block;
}

.progressTable {
  width: 100%;
  margin: 0 auto;
}

.progressTable td {
  padding: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 33%;
}

.progressTable tr:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.progressTable td:first-child {
  text-align: end;
}

.progressTable progress {
  width: 100%;
  min-width: 60px;
  display: block;
}

.progressTable .icon-checkmark {
  @include bidi-style(margin-left, 10px, margin-right, 0);

  opacity: 0;
}

.progressTable tr.is-done .icon-checkmark {
  opacity: 1;
}

.channelList {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background-secondary);
  border-radius: 2px;
  margin: 5px 0 20px;
  box-shadow: var(--elevation-low);
}

.channelList,
.channelList-controls,
.channelList-controlEntry {
  border: 1px solid var(--border);
}

.channelList-entry {
  display: flex;
  cursor: default;
  padding: 5px 8px;

  &:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }
}

.channelList-label {
  margin: 0 10px;
  flex: 1;

  & > * {
    @extend .u-textTruncate;
  }
}

.channelList-status {
  font-size: 12px;
  color: var(--text-muted);
}

.channelList-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-muted);
}

.channelList-controls {
  margin-top: auto;
  display: flex;
  background: var(--background-quaternary-alt);
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.channelList-controlEntry {
  display: flex;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-left: none;
  border-top: none;
  border-bottom: none;
  position: relative;

  [data-toggle='dropdown'] {
    position: relative;
  }

  .icon {
    opacity: 0.8;
  }
}

.avatar-gallery {
  display: flex;
  flex-wrap: wrap;
}

.avatar-holder {
  display: inline-block;
  position: relative;
  margin: 0 32px 32px 0;
  border-radius: 100%;
  box-shadow: 0 0 0 4px var(--background-secondary);

  .avatar {
    @extend .u-clickable;

    &.is-active {
      box-shadow: 0 0 0 4px var(--border-highlight);
    }
  }
}

.avatar--new {
  background: hsl(145, 51%, 45%);

  @extend .u-clickable;
}

.avatar-holder .avatar-delete {
  position: absolute;
  right: -15px;
  top: -15px;
  width: 40px;
  height: 40px;
  pointer-events: none;
  visibility: hidden;
  background: var(--background-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);

  @extend .u-clickable;

  svg {
    opacity: 0.5;
    fill: var(--interactive-primary);
  }

  &:hover svg {
    opacity: 1;
  }
}

.avatar-holder:hover .avatar-delete {
  visibility: visible;
  pointer-events: auto;
}

.camera video {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.camera-preview {
  display: block;
  margin: 0 auto;
}

.camera-flash {
  @extend .fit;

  background: var(--background-secondary);
  opacity: 0;

  @extend .u-unclickable;
}

.camera-flash.is-active {
  animation: flash 500ms ease;
}

@keyframes flash {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fileUpload {
  position: relative;
  overflow: hidden;

  &.btn input:focus + label {
    text-decoration: none;
  }
}

.fileUpload label {
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  display: inline;
  margin: 0;
}

.fileUpload input {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 118px;
  margin: 0;
  padding: 0;

  @extend %clickable;

  opacity: 0;

  &:focus + label {
    text-decoration: underline;
  }
}

.imagePreview {
  margin-top: 45px;

  @include phone {
    margin-top: 0;
  }

  img {
    width: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 218px) !important;
  }
}

.imageCropper p {
  margin: 0;
}

.imageCropper-holder {
  height: 340px;
  margin: 15px 0;
}

.imageCropper-image {
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
}

.imageCropper-preview {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 10px;
}

.cropper-container {
  /* prevent cropper.js's centering – we center via flex */
  left: 0 !important;
}

.profile {
  padding: 60px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;

  @include phone {
    padding: 0;
    margin: 0;
  }

  h1 {
    margin: 18px 0 0;
  }

  .tabs {
    margin-top: 2px;
    margin-bottom: 25px;
  }
}

.profile-window {
  color: var(--text-normal);
  background: var(--background-secondary);
  max-width: 660px;
  margin: 0 auto;
  border: 1px solid var(--border);
}

.profile-section {
  padding: 20px 50px;

  @include phone {
    padding: 10px;
  }

  &.profile-memberSection {
    margin-bottom: 10px;
  }
}

.profile-section:not(:last-child) {
  border-bottom: 1px solid var(--background-modifier-border);
}

.profile-action {
  @include bidi-style(margin-right, -20px, margin-left, 0);

  @include phone {
    @include bidi-style(margin-right, 0, margin-left, 0);
  }

  .dropdown-toggle {
    margin-top: -20px;

    @include bidi-style(margin-right, -30px, margin-left, 0);

    margin-bottom: 8px;
    padding: 26px 40px 2px;

    @include phone {
      margin-top: -5px;
      padding: 10px 0 5px;

      @include bidi-style(margin-right, 0, margin-left, 0);
    }
  }

  label {
    margin: 0 8px;
    padding: 0;
    cursor: inherit;
  }
}

.profile-subtitle {
  font-size: 16px;

  @extend .u-highlight;
}

.profile-details {
  @include bidi-style(margin-left, -50px, margin-right, 0);
}

.profile-ticketsPlaceholder {
  flex: 1;
  margin: 8px 0 22px;
  color: var(--text-muted);

  .stat-icon {
    margin-bottom: 10px;
  }
}

.profile-detailsEntry {
  margin: 8px 0;

  @include bidi-style(padding-left, 50px, padding-right, 0);

  width: 50%;
}

.profile-detailsEntry label {
  padding: 0;
  margin-bottom: 2px;
  display: block;
}

.profile-organizationMember {
  @extend .profile-detailsEntry;

  display: flex;
  align-items: center;

  .avatar {
    @include bidi-style(margin-right, 10px, margin-left, 0);
  }
}

.profile-ticketLists {
  display: flex;
  margin: 0 -25px;

  @include phone {
    display: block;
    margin: 0;
  }
}

.profile-ticketList {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  padding: 0 25px;
  min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */

  @include phone {
    padding: 0;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .tasks {
    margin-bottom: 10px;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
  }
}

.profile .frequency.stat-widget {
  height: 230px;

  @include phone {
    display: none;
  }

  .stat-bars {
    height: 100px;
  }
}

.profile-organizationIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--background-modifier-accent);
  color: var(--text-muted);
  border-radius: 100%;

  svg {
    width: 32px;
    height: 32px;
  }
}

.highlighter {
  display: flex;
}

[data-highlightcolor='Yellow']::selection {
  background: var(--highlighter-yellow);
}

.highlight-Yellow {
  background: var(--highlighter-yellow);
}

[data-highlightcolor='Green']::selection {
  background: var(--highlighter-green);
}

.highlight-Green {
  background: var(--highlighter-green);
}

[data-highlightcolor='Blue']::selection {
  background: var(--highlighter-blue);
}

.highlight-Blue {
  background: var(--highlighter-blue);
}

[data-highlightcolor='Pink']::selection {
  background: var(--highlighter-pink);
}

.highlight-Pink {
  background: var(--highlighter-pink);
}

[data-highlightcolor='Purple']::selection {
  background: var(--highlighter-purple);
}

.highlight-Purple {
  background: var(--highlighter-purple);
}

.translationOverview {
  tbody > tr > td {
    padding: 20px 0 0 10px;
  }

  .translationOverview-itemContainer {
    padding: 10px 0 10px 10px;
  }

  .translationOverview-source {
    width: 25%;
  }

  .translationOverview-target {
    width: 35%;
  }

  .translationOverview-initial {
    width: 25%;
  }

  .translationOverview-item {
    width: 100%;
  }
}

.overview-navigator {
  display: flex;
}

.overview-navigator .pagination {
  margin: 0 0 0 10px;

  @include rtl(margin, 0 10px 0 0);
}

.empty-space {
  padding: 50px;

  svg {
    width: 200px;
    height: auto;
  }

  .empty-space-tagline {
    color: var(--text-muted);
    margin-top: 15px;
    font-size: 18px;
  }
}

.horizontal-filters-alert {
  margin-bottom: 10px;
}

.horizontal-filters {
  margin-bottom: 20px;

  &--with-switch {
    margin-bottom: 10px;
  }
}

.horizontal-filter {
  position: relative;
  display: flex;
  background: var(--background-primary-alt);
  padding: 7px;
  border: 1px solid var(--border-alt);

  &:first-child {
    border-radius: 4px 4px 0 0;
  }

  &:last-child {
    border-radius: 0 0 4px 4px;
  }

  &:only-child {
    border-radius: 4px;
  }

  & + .horizontal-filter {
    border-top: none;
  }

  select,
  input {
    border-color: var(--border-alt);
  }

  input[type='text'] {
    width: 100%;
  }

  input[data-item='time'] {
    width: 4.5ch;
  }

  &[data-level] {
    padding-left: 54px;

    @include rtl(padding-left, 7px);
    @include rtl(padding-right, 54px);
  }

  &[data-level='1'] {
    padding-left: 0;

    @include rtl(padding-left, 7px);
    @include rtl(padding-right, 0);
  }

  &[data-level='2'] {
    padding-left: 27px;

    @include rtl(padding-left, 7px);
    @include rtl(padding-right, 27px);
  }

  &[data-level]::before {
    content: '';
    background-color: var(--border-alt);
    width: 54px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;

    @include rtl(right, 0);
  }

  &[data-level='1']::before {
    width: 0;
  }

  &[data-level='2']::before {
    width: 27px;
  }

  .draggable {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 39px;
    vertical-align: middle;
    cursor: move;
  }

  .ui-sortable-helper & {
    border-color: transparent;
    border-radius: none;
    background: var(--background-modifier-lighter);

    &[data-level]::before {
      background-color: transparent;
    }
  }

  &.ui-sortable-placeholder {
    visibility: visible !important;
    background: var(--background-primary-alt);

    &[data-level]::before {
      background-color: var(--border-highlight);
    }
  }
}

.horizontal-filter-body {
  display: flex;
  flex: 1;
  min-width: 100px;

  @include phone {
    display: block;
    margin-right: 5px;
  }

  > .controls,
  > input {
    @include bidi-style(margin-right, 5px, margin-left, 0);

    @include phone {
      margin: 0 0 5px !important;
    }

    > .controls-label {
      margin-left: 0;
      margin-right: 5px;

      @include rtl(margin-left, 5px);
      @include rtl(margin-right, 0);
    }

    .horizontal-filter-value {
      max-width: 100%;
    }
  }

  > .controls > .controls {
    max-width: 100%;

    + .controls {
      @include bidi-style(margin-left, 5px, margin-right, 0);
    }
  }
}

.horizontal-filter-group {
  padding: 10px;
  background: var(--background-secondary);
  border: 1px solid var(--border-alt);
  border-radius: 5px;
  margin: 0 5px;

  > .form-group:last-child {
    margin-bottom: 0;
  }
}

.horizontal-filter-value {
  max-width: 60%;
  flex-grow: 1;
  margin-bottom: 0;

  @include phone {
    max-width: 100%;
  }

  // lower the min-width of url input fields (normally 400px) so that it fits in
  input[type='url'] {
    min-width: 200px;
  }

  .dropdown:only-child {
    flex-grow: 1;
  }
}

.horizontal-filters-switch {
  display: flex;
  justify-content: end;

  & > label {
    display: flex;
    align-items: center;
    margin-bottom: 0;

    .zammad-switch {
      margin-top: 0;
      margin-left: 10px;

      @include rtl(margin-left, 0);
      @include rtl(margin-right, 10px);
    }
  }

  & + .js-preview h3 {
    margin-top: 0;
  }
}

.output-input {
  margin: 0 0 14px;

  output {
    margin: 0;
    border-radius: 3px 3px 0 0;
    border: 1px solid var(--border-highlight);
    border-bottom: none;
    display: block;
  }

  input {
    flex: 1;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;

    &:focus {
      border-color: var(--border);
      box-shadow: none;
    }
  }
}

output {
  border-bottom: 1px solid var(--border-highlight);
  margin: 0 0 19px;
  display: inline-block;
  padding: 10px 12px 8px;
  color: inherit;
  background: var(--background-article-customer);

  &[disabled] {
    border-color: hsl(358, 53%, 56%);
    background: hsl(358, 53%, 76%);
    color: var(--text-inverted);
  }

  p {
    margin: 0;
  }
}

.zammad-switch {
  overflow: hidden;
  width: 50px;
  height: 30px;
  border-radius: 15px;

  &.zammad-switch--small {
    width: 40px;
    height: 24px;
    border-radius: 12px;
  }

  &.zammad-switch--tiny {
    width: 30px;
    height: 18px;
    border-radius: 9px;
  }

  &.zammad-switch--dark {
    label {
      background: hsl(234, 10%, 5%);
    }

    label::before {
      background: hsl(233, 10%, 10%);
    }

    label::after {
      background: var(--background-tertiary);
    }
  }

  &.zammad-switch--green input:checked + label {
    background: var(--supergood-color);
  }
}

.zammad-switch label {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  outline: none;
  background: var(--background-secondary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  transition: background 200ms;

  @extend %clickable;

  &::after {
    content: '';
    position: absolute;
    transition: transform 200ms;
    width: calc(60% - 2px);
    height: calc(100% - 2px);
    border-radius: inherit;
    left: 1px;
    top: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2);
    background: var(--background-secondary);

    @include rtl(transform, translateX(70%));
  }
}

.dropdown-menu.dropdown-menu--light .zammad-switch input:not(:checked) + label {
  background: var(--background-primary);
}

.zammad-switch input {
  display: none;

  &[disabled] + label {
    cursor: not-allowed;
    opacity: 0.38;
    border-color: var(--border);
  }

  &[disabled] + label::after {
    background: hsl(210, 17%, 97%);
  }

  &:focus + label {
    transition: none;
    background: var(--border-highlight);
    box-shadow: 0 0 0 3px var();
  }

  &:checked + label {
    background: var(--highlight);
  }

  &:checked + label::after {
    transform: translateX(70%);

    @include rtl(transform, none);
  }
}

.controls .zammad-switch {
  margin-top: 10px;
}

.horizontal-filter-text {
  @include bidi-style(margin-right, 5px, margin-left, 0);
}

.filter-controls {
  display: flex;
  margin: 5.5px 0;
}

.filter-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 1px var(--border-alt) inset;
  border-radius: 100%;
  background: var(--background-secondary);

  @extend %clickable;

  &:hover:not(.is-disabled) {
    .icon {
      fill: var(--interactive-primary);
    }
  }

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:not(:last-child) {
    @include bidi-style(margin-right, 7px, margin-left, 0);
  }

  .icon {
    fill: var(--interactive-muted);
  }
}

.filter-preview {
  margin: 20px 0;
}

.day-name {
  text-align: center;
  margin-bottom: 0;
  color: inherit;
  white-space: nowrap;
}

.form-group.day-time {
  padding: 10px 5px 6px;
  margin: 0;

  label {
    text-align: center;
  }

  .form-control {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
  }
}

.settings-row {
  margin-bottom: 10px;
}

.settings-list {
  border-collapse: separate;
  color: var(--text-normal);
  table-layout: auto;
  margin-bottom: 20px;

  & > caption {
    color: var(--text-normal);
  }

  &.is-invalid {
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 4px hsl(0, 90%, 70%);
  }

  &.settings-list--fixed {
    table-layout: fixed;
  }

  &.settings-list--stretch {
    width: 100%;
  }

  &:not(:last-child) {
    margin-bottom: 34px;
  }

  .form-group & {
    margin-bottom: 0;
  }

  &.settings-list--toggleRow {
    tr:not(.is-active) td > *:not(.dont-grey-out) {
      opacity: 0.33;
    }
  }

  &.settings-list--toggleColumn {
    td:not(.is-active) * {
      opacity: 0.33;
    }
  }

  &.settings-list--placeholder {
    th {
      text-align: center;
      border-bottom: 1px solid var(--border-alt);
      border-radius: 4px;
    }

    td {
      height: 40px;
    }
  }

  .settings-list--deleted {
    td {
      text-decoration: line-through;
    }
  }

  th,
  td {
    vertical-align: top;
    padding: 10px;
    border: 1px solid var(--border-alt);
    background: var(--background-secondary);
  }

  th {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.05em;
    background: var(--background-primary-alt);
    border-bottom: none;
    word-break: normal;
  }

  td {
    word-break: break-word;

    > fieldset {
      margin: 0;

      > .form-group {
        margin-left: 0;
        margin-right: 0;
      }

      > .checkbox,
      > .radio {
        margin: 7px 0;
      }
    }
  }

  td.empty-cell {
    border-top: none;
  }

  .settings-list-separator {
    @include bidi-style(border-left-width, 3px, border-right-width, 1px);
  }

  .text-muted {
    text-transform: none;
    font-size: 10px;
    letter-spacing: 0;
    color: var(--text-muted-alt);
  }

  .inline-label {
    color: inherit;
  }

  th:not(:last-child),
  td:not(:last-child) {
    @include bidi-style(border-right-width, 0, border-left-width, 1px);
  }

  .ui-sortable-placeholder {
    visibility: visible !important;

    td {
      background: none;
      border-left-width: 0;
      border-right-width: 0;
    }
  }

  .ui-sortable-helper td {
    border-bottom-width: 1px !important;
  }

  tr:not(:last-child) td,
  & > tbody:not(:last-child) tr td {
    border-bottom-width: 0;
  }

  tr.is-inactive td {
    color: hsl(199, 19%, 80%);
    text-decoration: line-through;
  }

  & > thead > tr > th:first-child {
    @include bidi-style(
      border-top-left-radius,
      4px,
      border-top-right-radius,
      0
    );
  }

  & > thead > tr > th:last-child {
    @include bidi-style(
      border-top-right-radius,
      4px,
      border-top-left-radius,
      0
    );
  }

  & > tbody:last-child > tr:last-child > td:first-child,
  & > tfoot:last-child > tr:last-child > td:first-child {
    @include bidi-style(
      border-bottom-left-radius,
      4px,
      border-bottom-right-radius,
      0
    );
  }

  & > tbody:last-child > tr:last-child > td:last-child,
  & > tfoot:last-child > tr:last-child > td:last-child {
    @include bidi-style(
      border-bottom-right-radius,
      4px,
      border-bottom-left-radius,
      0
    );
  }

  p {
    margin: 0;
  }

  .settings-list-action-cell {
    @extend .u-clickable;

    text-align: center;
    color: var(--interactive-muted);
    background: linear-gradient(
        hsla(0, 0%, 100%, 0.02),
        hsla(0, 0%, 100%, 0.02)
      ),
      linear-gradient(
        var(--background-primary-alt),
        var(--background-primary-alt)
      );
    line-height: 1;
    padding-top: 11px;
    padding-bottom: 9px;

    &:hover {
      color: var(--text-normal);
    }

    .icon {
      fill: currentColor;
      vertical-align: top;
      margin-top: -2px;
    }
  }

  .settings-list-controls {
    padding: 0;

    & > div,
    & > a {
      display: flex;
      min-height: 40px;
    }

    .settings-list-control {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;

      @extend %clickable;

      .icon {
        fill: currentColor;
      }
    }
  }

  .settings-list-control-cell {
    padding: 5px;

    .btn--text {
      margin: -5px;
    }

    & ~ .settings-list-row-control {
      padding-bottom: 7px;
    }
  }

  .settings-list-checkbox-cell,
  .settings-list-radio-cell {
    vertical-align: middle;
    padding-left: 8px;
  }

  .settings-list-radio-cell {
    text-align: center;
  }
}

.settings-list--roles-permissions {
  margin-left: 18px;
  margin-right: 18px;
  margin-top: 10px;

  th:first-child {
    min-width: 150px;
  }
}

.select-boxes {
  display: flex;
  align-items: flex-start;
}

.select-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 14px;
  background: var(--background-secondary);
  color: var(--text-normal);

  @include bidi-style(
    border-right,
    1px solid var(--border-alt),
    border-left,
    none
  );

  border-bottom: 1px solid var(--border-alt);
  border-radius: 3px 3px 0 0;

  &.select-box--vertical .select-value {
    flex-basis: 100%;
  }

  &.select-box--four .select-value {
    flex-basis: 25%;
  }

  &.select-box--six .select-value {
    flex-basis: calc(100% / 6);
  }

  .select-box-header {
    @extend label;

    margin: 0;
    color: inherit;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    flex-basis: 100%;
    white-space: nowrap;
    background: var(--background-primary-alt);

    @include bidi-style(
      border-left,
      1px solid var(--border-alt),
      border-right,
      none
    );

    border-top: 1px solid var(--border-alt);
    border-radius: 3px 3px 0 0;
  }

  .select-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    background-clip: content-box;
    box-shadow: 1px 0 var(--border-alt) inset, 0 1px var(--border-alt) inset;

    @extend %clickable;

    &.is-selected {
      background-color: var(--highlight);
      box-shadow: none;
      color: var(--text-inverted);
    }
  }

  &:first-child {
    @include bidi-style(margin-left, 0, margin-left, 14px);
  }

  &:last-child {
    @include bidi-style(margin-right, 0, margin-left, 14px);
  }
}

.searchableSelect {
  position: relative;

  .form-control {
    padding-right: 37px;

    @include bidi-style(padding-right, 37px, padding-left, 12px);
  }

  .searchableSelect-main {
    position: relative;
    line-height: 19px;

    &.form-control--small ~ .searchableSelect-autocomplete {
      top: 6px;
      left: 9px;
    }
  }

  .searchableSelect-shadow {
    position: absolute;
    left: -9999px;
  }

  .dropdown-menu {
    margin-top: -3px;
    max-width: 100%;
  }

  &-option-text {
    flex: 1 1 0%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;

    & + .icon {
      @include bidi-style(margin-left, 10px, margin-right, 0);
    }

    &.is-inactive {
      opacity: 0.73;
      text-decoration: line-through;
    }
  }

  &.dropdown li {
    &:hover:not(.is-active) {
      background: none;
    }

    &.is-hidden {
      display: none;
    }

    &.js-enter {
      padding: 0;

      span.searchableSelect-option-text {
        padding: 11px 15px;
      }

      span.searchableSelect-option-arrow {
        padding: 11px 15px;
      }
    }
  }

  li:not(.is-active):hover + li {
    box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  }

  .searchableSelect-autocomplete {
    position: absolute;
    left: 13px;
    top: 11px;
    right: 37px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    pointer-events: none;
    white-space: pre;
    line-height: 19px;
  }

  .searchableSelect-autocomplete-invisible {
    color: transparent;
  }

  .searchableSelect-autocomplete-visible {
    color: hsl(0, 0%, 33%);
    background: hsl(201, 61%, 90%);
  }

  .loading.icon {
    position: absolute;
    right: 11px;
    top: 11px;
    display: none;
  }

  &.is-loading {
    .loading.icon {
      display: block;
    }

    .icon-arrow-down {
      display: none;
    }
  }
}

.action {
  background: var(--background-secondary);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-stroke);
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 17px;

  &.is-inactive {
    background: none;
    box-shadow: none;
    position: relative;
    top: 2px;
    border-color: var(--border-alt);

    & > *:not(.action-controls) {
      opacity: 0.33;
    }
  }

  &--placeholder {
    padding: 30px;
    align-items: center;
    justify-content: center;
    color: hsl(206, 9%, 69%);
    box-shadow: none;
    background: none;
    border-style: dashed;
    font-style: italic;
  }

  &-alert {
    width: calc(100% + 20px);
    margin: -10px -10px 10px;
  }

  &-flow {
    display: flex;
    flex-wrap: wrap;

    &.action-flow--noWrap {
      flex-wrap: nowrap;
    }

    &.action-flow--row {
      flex-basis: 100%;
    }
  }

  &-separator {
    width: 1px;
    background: hsl(0, 0%, 97%);
    margin: 0 10px;
  }

  .table {
    margin-left: -9px;
    margin-right: -9px;
  }

  h2 {
    margin-bottom: 0;

    .action-form-status .icon {
      margin-top: 0;
    }
  }

  &-block,
  &-controls,
  &-row {
    padding: 10px;

    h2:first-child,
    h3:first-child {
      margin-top: 0;
    }
  }

  &-block {
    &.action-block--flex {
      flex: 1;
    }
  }

  &-row {
    flex-basis: 100%;
  }

  h3 {
    color: var(--text-muted);
    margin-top: 0;

    + .btn--text {
      position: relative;
      top: -1px;
    }
  }

  &-label {
    background: var(--background-primary-alt);
    border: 1px solid var(--border-alt);
    align-self: flex-start;
    padding: 5px 10px;
    margin: -4px 0 -5px auto;

    @include rtl(margin, -4px auto -5px 0);

    color: var(--text-muted-alt);
    cursor: default;
  }

  &-flow-icon {
    width: 15px;
    height: 24px;
    margin-top: 16px; /* compensate for h3 height */
    margin-left: 20px;
    margin-right: 20px;
    fill: var(--background-modifier-accent-light);
  }

  &-controls {
    display: flex;

    @include bidi-style(margin-left, auto, margin-right, 0);

    align-self: flex-end;

    .btn {
      align-self: center;
    }
  }
}

/*
  datepicker resets some css it potentially inherits when its rendered inside a table
*/

.datepicker {
  background: var(--background-tertiary);
  color: var(--text-inverted);
  padding: 0 14px 11px;
  position: absolute;
  min-width: 0;
  cursor: default;

  &.datepicker-rtl {
    left: auto;
    right: 0;
  }

  .datepicker-switch {
    padding: 12px 0;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;

    @extend %clickable;

    &:hover {
      background: hsl(240, 10%, 14%);
    }
  }

  th {
    background: none;
    font-weight: 500;
  }

  th,
  td {
    border: none;
  }

  .next,
  .prev {
    padding: 12px 9px 0;
    vertical-align: top;
    text-align: center;

    @extend %clickable;

    .icon {
      margin-top: 4px;
      fill: var(--text-inverted);
      opacity: 1;
    }

    &:hover {
      background: hsl(240, 10%, 14%);
    }
  }

  .dow {
    text-transform: uppercase;
    font-size: 12px;
    padding: 0;
    text-align: center;
    vertical-align: inherit;
  }

  td.cw {
    // background: 1px gap on the right towards the days + 1px border
    background: linear-gradient(
      to right,
      var(--background-modifier-lighter),
      var(--background-modifier-lighter) calc(100% - 2px),
      transparent calc(100% - 2px),
      var(--background-modifier-accent) calc(100% - 1px),
      transparent calc(100% - 1px)
    );
    padding: 0 5px 0 3px !important;
    text-align: center;
    border-radius: 0;
  }

  tbody td {
    width: 27px;
    height: 27px;
    border-radius: 14px;
    padding: 1px 0 0 !important;
    background-color: inherit;
    vertical-align: inherit;
  }

  .month,
  .year {
    float: left;
    width: 23%;
    margin: 1%;
    padding: 5px 0;
  }

  .day,
  .month,
  .year {
    text-align: center;

    &:not(.disabled) {
      @extend %clickable;
    }

    &.disabled,
    &.old,
    &.new {
      color: hsl(0, 0%, 33%);
    }

    &.today {
      background: #777;
    }

    &.focused {
      box-shadow: 0 0 0 1px hsl(207, 82%, 64%) inset;
    }

    &.active {
      color: var(--text-inverted);
      background: hsl(207, 82%, 64%);
    }
  }

  .today,
  .clear {
    text-align: center;
    padding: 2px 0 0;

    @extend %clickable;

    &.hidden {
      display: none;
    }
  }

  .datepicker-footer-buttons {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: stretch;
    height: 31px;
    margin-top: 15px;

    div {
      flex-grow: 1;
      border: 1px solid #56575e;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

#notify {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;

  @extend .zIndex-9;

  pointer-events: none;

  .noty_bar {
    max-width: 500px;
    text-align: center;
    margin: 0 auto 10px;

    .noty_message {
      pointer-events: auto;
      display: inline-block;
      background: rgba(0, 0, 0, 0.75);
      padding: 10px 15px 8px;
      border-radius: 3px;
      color: var(--text-inverted);
    }

    .icon {
      vertical-align: middle;
      margin-top: -3px;

      @include bidi-style(margin-right, 5px, margin-left, 0);
    }

    a {
      color: inherit;
      text-decoration: none;
    }
  }
}

.animated {
  animation-duration: 300ms;
  animation-fill-mode: both;
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
}

.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 133px;

  .loading-text {
    @include bidi-style(margin-left, 10px, margin-right, 0);
  }
}

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 14px;

  @include phone {
    padding: 0;
  }

  .page-header {
    margin: 15px 6px 5px;

    @include phone {
      flex-wrap: wrap;
      margin: 0;
      padding: 5px 8px;
    }
  }

  .page-header-title {
    @include phone {
      order: 1;
    }
  }

  .page-header-center {
    @include phone {
      flex-basis: 100%;
      padding: 0;
      order: 3;
    }
  }

  .page-header-meta {
    @include phone {
      order: 2;

      @include bidi-style(margin-left, auto, margin-right, auto);

      padding-top: 4px;

      @include bidi-style(padding-left, 10px, padding-right, 0);
    }
  }
}

.chat-workspace {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 10px;
  margin: 0 -4px;
  flex: 1;

  @include phone {
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-mode: x mandatory;
  }
}

.chat-window {
  flex: 0 1 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition-duration: 500ms;
  transition-property: transform, flex, padding;
  transform: scale(0);

  @include phone {
    min-width: calc(100vw - #{$mobileNavigationWidth} - 16px);
    scroll-snap-align: center;
  }

  &.is-open {
    flex: 1 0 25%;
    transform: scale(1);
    padding: 10px;

    @include phone {
      padding: 8px;
    }
  }

  &.is-offline {
    .chat-controls {
      opacity: 0.5;
    }
  }
}

.chat-header {
  background: var(--background-primary-alt);
  border: 1px solid var(--border-alt);
  border-radius: 3px 3px 0 0;
  height: 43px;
  line-height: 13px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-name {
  margin: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .status-badge {
    @include bidi-style(margin-left, 2px, margin-right, 0);

    vertical-align: middle;
    height: 100%;
  }
}

.chat-status {
  @include bidi-style(margin-left, 10px, margin-right, 0);

  &[data-status='online'] .icon {
    fill: var(--supergood-color);
  }

  &[data-status='offline'] .icon {
    fill: var(--superbad-color);
  }

  .icon-status-modified-inner-circle,
  .icon-status-modified-outer-circle {
    display: none;
  }

  &.is-modified {
    .icon-status {
      display: none;
    }

    .icon-status-modified-inner-circle,
    .icon-status-modified-outer-circle {
      display: block;
    }
  }
}

.chat-status-holder {
  position: relative;
}

.chat-disconnect,
.chat-close {
  @extend %clickable;

  padding: 10px;

  .btn {
    min-width: 80px;
    justify-content: center;
  }
}

.chat-disconnect.is-hidden,
.chat-close.is-hidden {
  display: none;
}

.chat-scroll-hint {
  background: var(--background-primary);
  display: flex;
  align-items: center;
  border: 1px solid var(--border-alt);
  border-top: none;
  padding: 7px 10px 6px;
  color: var(--text-muted);

  @extend %clickable;

  &.is-hidden {
    display: none;
  }

  .icon {
    fill: hsl(210, 5%, 78%);

    @include bidi-style(margin-right, 8px, margin-left, 0);
  }
}

.chat-body-holder {
  flex: 1;
  background: var(--background-secondary);
  font-size: 13px;
  line-height: 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--border-alt);
  border-right: 1px solid var(--border-alt);
  position: relative;
}

.chat-body-holder--standalone {
  border-top: 1px solid var(--border-alt);
  border-bottom: 1px solid var(--border-alt);
}

.chat-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.chat-timestamp,
.chat-notice-message {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  align-self: center;
  word-break: break-word;
}

.chat-timestamp-label {
  font-weight: 500;
}

.chat-message {
  max-width: 90%;
  background: var(--background-primary);
  padding: 6px 12px;
  border-radius: 16px;
  margin-bottom: 4px;
}

.chat-message img {
  @extend %clickable;
}

.chat-message--customer.chat-message--new {
  font-weight: bold;
}

.chat-message--agent {
  @include bidi-style(margin-left, auto, margin-right, 0);

  background: var(--background-article-customer);
  align-self: flex-end;
}

.chat-message--agent + .chat-message--customer,
.chat-message--customer + .chat-message--agent {
  margin-top: 10px;
}

.chat-status-message {
  align-self: center;
  background: var(--background-primary-alt);
  padding: 6px 12px;
  margin: 4px 0 10px;
  border-radius: 3px;
}

.chat-loader {
  @include bidi-style(margin-right, -4px, margin-left, 0);

  .icon {
    width: 12px;
    height: 12px;
    fill: var(--border);

    @include bidi-style(margin-left, -4px, margin-right, 0);

    vertical-align: middle;
    animation: ease-in-out load-fade 600ms infinite alternate;
  }

  .icon + .icon {
    animation-delay: 0.13s;
  }

  .icon + .icon + .icon {
    animation-delay: 0.26s;
  }
}

@keyframes load-fade {
  0% {
    opacity: 0.5;
    transform: scale(0.6);
  }

  67% {
    opacity: 1;
    transform: scale(1);
  }
}

.chat-footer {
  border-top: 1px solid var(--border-alt);
  padding: 10px 10px 0;
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin: 0 -10px;
}

.chat-controls {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  background: var(--background-primary-alt);
  border: 1px solid var(--border-alt);
  border-radius: 0 0 3px 3px;
  flex-shrink: 0;
}

.chat-input {
  @include bidi-style(margin-right, 10px, margin-left, 0);

  flex-grow: 1;
  position: relative;

  .form-control {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;
  }
}

.browser {
  margin: 0 0 20px;
  position: relative;

  &[data-size] {
    padding-bottom: 65%; // 16:10 aspect ratio;

    .browser-ratio {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transition: width 500ms;
      display: flex;
      flex-direction: column;
    }

    .browser-body {
      padding: 0;
    }
  }

  &[data-size='mobile'] .browser-ratio {
    width: 375px;
  }

  &-ratio {
    border: 1px solid var(--border);
    border-radius: 5px;
  }
}

@media screen and (min-width: #{1280 + $sidebarWidth + $navigationWidth}) {
  // hide 1:1 button when it gets inrelevant
  [data-size='1:1'] {
    display: none;
  }

  .browser[data-size='mobile'] .browser-ratio {
    width: 500px;
  }
}

.browser-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 20px;

  &-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .browser-website {
    position: relative;
    height: 100%;
    transform-origin: right bottom;
    transition: 500ms;
    overflow: hidden;

    &.is-picking {
      cursor: image_url('/assets/images/eyedropper.gif') 0 15, auto;
    }

    &-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left top;
    }
  }
}

.browser-head {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid var(--border);

  .browser-input {
    position: relative;
    flex: 1;

    @include bidi-style(margin-right, 10px, margin-left, 0);

    input {
      min-width: 0;

      @include bidi-style(padding-right, 40px, padding-left, 12px);

      &.is-loading + .loading.icon {
        display: block;
      }
    }

    .loading.icon {
      position: absolute;

      @include bidi-style(right, 11px, left, auto);

      top: 10px;
      display: none;
    }
  }

  .help-block {
    margin-bottom: -3px;
  }
}

.browser-inline-form {
  width: 300px;

  &.no-css {
    all: initial;

    * {
      all: unset;
    }

    input,
    textarea,
    button {
      padding: 2px;
      background: var(--background-secondary);
      border: 1px solid;
      font: 400 11px system-ui;
    }

    button {
      padding: 2px 6px 3px;
      background-color: buttonface;
      border: 2px outset buttonface;
    }
  }
}

.chat-demo {
  .zammad-chat {
    position: absolute;
    transform-origin: right bottom;
    transition: 500ms;
    user-select: none;
    will-change: transform;

    &.is-fullscreen {
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 0 !important;

      .zammad-chat-header {
        border-radius: 0 !important;
        box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1) inset,
          0 1px 1px rgba(0, 0, 0, 0.13);
      }

      .zammad-chat-controls {
        border-radius: 0 0 5px 5px;
      }
    }

    &.no-transition {
      transition: none;
    }

    .zammad-chat-welcome {
      display: block !important;
    }

    .zammad-chat-header-icon-open {
      display: inline !important;
    }

    .zammad-chat-agent-status,
    .zammad-chat-header-icon-close,
    .zammad-chat-agent {
      display: none !important;
    }

    &.is-open {
      .zammad-chat-agent {
        display: block !important;
      }

      .zammad-chat-header-icon-close,
      .zammad-chat-agent-status {
        display: inline-block !important;
      }

      .zammad-chat-welcome,
      .zammad-chat-header-icon-open {
        display: none !important;
      }
    }

    &.is-fullscreen {
      height: 100%;

      .zammad-chat-controls {
        border-radius: 0 0 5px 5px;
      }
    }
  }

  .zammad-chat-header {
    pointer-events: auto;
  }

  .chat-demo-animationHolder {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: slide-up 500ms;
    pointer-events: none;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
}

.todo {
  position: relative;
  display: block;

  .icon {
    fill: var(--ghost-color);
    vertical-align: middle;
    margin: -2px 3px 0 0;
  }

  &.is-done .icon {
    fill: var(--supergood-color);
  }
}

.columnSelect {
  height: 234px;
  display: flex;
  padding: 0;
  line-height: 22px;

  &-shadow {
    display: none;
  }

  &-column--selected {
    flex: 1 1 66%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 7px;
  }

  &-column--sidebar {
    flex-basis: 33%;
    flex-shrink: 1;
    border-left: 1px solid var(--border);
    background: var(--background-modifier-accent);
    display: flex;
    flex-direction: column;
    min-width: 0;

    .columnSelect-option:hover {
      background: var(--background-modifier-hover);
    }
  }

  &-pool {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 7px;
  }

  &-option {
    @extend %clickable;

    padding: 0 5px;
    border-radius: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:hover {
      background: var(--background-modifier-hover);
    }
  }

  &-group-label {
    opacity: 0.5;

    .filter-active & {
      display: none;
    }

    ~ .columnSelect-option {
      padding-left: 10px;
    }
  }

  .is-hidden,
  .is-filtered {
    display: none;
  }

  &-search {
    position: relative;

    .icon-magnifier {
      left: 7px;
      top: 5px;
      position: absolute;
      opacity: 0.3;
    }

    &-clear {
      position: absolute;
      right: 0;
      top: 0;
      padding: 6px 7px 4px;

      @extend %clickable;

      line-height: 1;

      .icon {
        opacity: 0.6;
      }
    }

    input {
      width: 100%;
      padding: 2px 30px 1px;
      border: none;
      outline: none;
      border-bottom: 1px solid var(--border);
      background: none;
    }
  }
}

.pulsate-animation {
  animation: pulsate 667ms ease-in-out infinite alternate;
}

.richtext-content {
  &[contenteditable] {
    &,
    &:hover,
    &:focus {
      background: none;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    &:first-child {
      margin-top: 6px;
    }
  }

  table,
  pre,
  blockquote {
    margin-bottom: 16px;
  }

  & > p,
  & > table,
  & > pre,
  & > blockquote {
    &:first-child {
      margin-top: 6px;
    }

    &:last-child {
      margin-bottom: 6px;
    }
  }

  table {
    table-layout: auto;
    display: block;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    word-break: keep-all;

    col {
      width: auto;
    }

    span,
    p,
    a {
      overflow-wrap: anywhere;
    }
  }

  blockquote {
    padding: 8px 12px;
    border-left: 5px solid var(--background-primary-alt);
  }

  code {
    border: none;
    white-space: pre-wrap;
  }

  pre {
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.45;
    background: var(--background-modifier-accent-light);
    white-space: pre-wrap;
    border-radius: 3px;
    border: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  hr {
    margin-top: 6px;
    margin-bottom: 6px;
    border: 0;
    border-top: 1px solid var(--background-modifier-border);
  }

  @include dark {
    // remove custom backgrounds and colors
    [style*='background'] {
      background: none !important;
    }

    [style*='color'] {
      color: inherit !important;
    }
  }
}

.detail-search-header {
  margin: 20px 0 32px;
}

.batch-overlay {
  @extend .fit, .zIndex-1;

  color: var(--text-inverted);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.07em;
  font-size: 0.95em;
  line-height: 1.3;
  display: none;
  will-change: display;
  cursor: grabbing;
  overflow: hidden;
  user-select: none;

  &.is-visible {
    display: block;
  }

  &-backdrop {
    @extend .fit;

    background: hsla(231, 20%, 8%, 0.8);
    opacity: 0;
    will-change: opacity;
  }

  &-circle {
    margin: 35px auto;
    background: hsl(207, 7%, 29%);
    border-radius: 100%;
    border: 4px solid var(--background-secondary);
    width: 140px;
    height: 140px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    will-change: transform, opacity;
    visibility: hidden;

    &--top {
      top: 0;
    }

    &--bottom {
      bottom: 0;
    }

    .icon {
      fill: currentColor;
      opacity: 1;
    }

    &-label {
      width: 80%;
      margin: 10px 0;
    }
  }

  &-cancel {
    background: hsla(0, 0%, 100%, 0.21);
    background-clip: padding-box;
    border: 2px dashed hsla(0, 0%, 100%, 0.3);
    border-radius: 8px;
    padding: 28px;
    margin: auto 200px;
    position: absolute;
    left: 0;
    right: 0;
    max-height: 100px;
    visibility: hidden;
    will-change: opacity;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-box {
    background: hsl(232, 9%, 17%);
    width: 100%;
    position: absolute;
    visibility: hidden;
    will-change: opacity, transition;

    &-inner {
      margin: 37px 25px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow: hidden;
    }
  }

  &-assign {
    padding-bottom: 50px;
    bottom: -50px; // extra space for bounce animation

    .batch-overlay-box-inner {
      max-height: 40vh;
    }

    &-group {
      box-shadow: 0 0 35px hsla(0, 0%, 0%, 0.5);

      .batch-overlay-box-inner {
        margin-top: 42px;
        margin-bottom: 10px;
      }

      &-name {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding: 11px 13px 8px;
        line-height: 1;
        position: absolute;
        background: hsl(233, 10%, 15%);
      }
    }

    &-entry {
      padding: 13px;
      width: 116px;
      height: 155px;

      &.is-hovered {
        .avatar {
          border-color: var(--highlight);
          transform: scale(1.05);
        }
      }

      .avatar {
        border: 4px solid hsl(231, 5%, 30%);
        margin-bottom: 10px;
        box-sizing: content-box;
        transition: transform 120ms;
        cursor: inherit;
        z-index: 1;
      }

      &-name {
        max-height: 34px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
      }

      &-detail {
        color: gray;
      }
    }
  }

  &-macro {
    padding-top: 50px;
    top: -50px; // extra space for bounce animation

    .batch-overlay-box-inner {
      max-height: 55vh;
      margin: 24px 12px;
    }

    &-entry {
      margin: 13px;
      border: 4px solid hsl(231, 5%, 30%);
      background: hsl(233, 9%, 24%);
      border-radius: 100%;
      height: 120px;
      width: 120px;
      padding: 13px 13px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9em;

      &.is-hovered {
        border-color: var(--highlight);
        transform: scale(1.05);
      }

      &.small {
        @include small-desktop {
          height: 80px;
          width: 80px;
          padding: 11px 11px 8px;
        }
      }
    }
  }
}

.batch-dragger {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 250px;
  height: 40px;
  will-change: transform;

  @extend .zIndex-10;

  &-item {
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--background-highlight);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 11px 0 9px 11px;
    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28);
    will-change: transform;

    a {
      color: inherit;
    }

    td:not(:first-child) {
      display: block;
      padding: 0 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      flex-shrink: 0;

      &:nth-child(3) {
        flex-shrink: 1;
      }

      &:nth-child(n + 4) {
        display: none;
      }
    }

    .checkbox-replacement > .icon,
    .radio-replacement > .icon {
      fill: none;
    }
  }

  &-counter {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 25px;
    height: 25px;
    border-radius: 99px;
    z-index: 1;
    color: var(--text-inverted);
    background: var(--highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28);
    will-change: transform;

    &:empty {
      display: none;
    }
  }
}

/*

  -------------
   breadcrumbs
  -------------

*/

.breadcrumbs {
  display: flex;
  align-items: center;
  min-width: 88px;

  @include phone {
    overflow: hidden;
  }

  &-menu {
    display: flex;

    @include ltr(margin-left, auto);
    @include rtl(margin-right, auto);
    @include bidi-style(padding-left, 20px, padding-right, 0);

    @include phone {
      @include bidi-style(padding-left, 10px, padding-right, 0);
    }
  }
}

.breadcrumb {
  position: relative;
  padding-top: 11px;
  padding-bottom: 8px;

  @include ltr(padding-right, 21px);
  @include ltr(padding-left, 13px);
  @include rtl(padding-left, 21px);
  @include rtl(padding-right, 13px);

  color: inherit;
  cursor: pointer;

  @extend .u-textTruncate;

  @include phone {
    flex-shrink: 0;
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 50%;
    background: currentColor;
    opacity: 0.33;

    @include ltr(right, 0);
    @include rtl(left, 0);

    top: 0;
    transform-origin: bottom;

    @include ltr(transform, rotate(-37deg));
    @include rtl(transform, rotate(37deg));
  }

  &::after {
    top: 50%;
    transform-origin: top;

    @include ltr(transform, rotate(37deg));
    @include rtl(transform, rotate(-37deg));
  }

  &:last-child {
    &::before,
    &::after {
      display: none;
    }
  }

  .modified-icon {
    @include bidi-style(margin-right, 3px, margin-left, 0);

    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-top: -3px;
  }

  &-icon {
    fill: currentColor;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .modified-icon-modifier {
    fill: var(--background-primary-alt);
  }
}

/*

  ---------------------
   iconfont icon picker
  ---------------------

*/

.icon_picker {
  .dropdown-menu {
    max-height: 500px;
    width: 420px;
    min-width: 0;
    overflow-y: auto;
  }

  .controls {
    position: relative;
  }

  &-shadow {
    display: none;
  }

  .dropdown-grid {
    &:empty {
      padding: 0;

      & + .dropdown-filter-placeholder {
        display: block;
      }
    }

    li:hover:not(.is-active) {
      background: none;
    }

    .icon {
      width: 40px;
      line-height: 40px;
      text-align: center;
    }
  }

  .dropdown-filter-placeholder {
    display: none;
    padding: 10px;
    text-align: center;
    text-rendering: auto;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: letter-spacing 200ms;
    cursor: default;
    line-height: 40px;

    &:hover {
      letter-spacing: -2px;
    }

    span {
      display: none;

      &.is-active {
        display: block;
      }
    }
  }

  .dropdown-filter {
    background: none;
    width: 100%;
    background: var(--background-modifier-accent);
    border: none;
    padding: 13px 20px 11px;
    outline: none;
  }

  .dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin: 0;

    li {
      list-style: none;
      cursor: pointer;
      user-select: none;
      border-radius: 2px;

      &:hover,
      &.is-active {
        background: var(--highlight);
      }
    }
  }
}

/*

  --------------
   color picker
  --------------

*/

.color {
  .controls {
    position: relative;
  }

  .controls-button {
    align-self: stretch;
  }

  .controls-button-inner {
    padding: 4px;
  }

  .color-field {
    width: 31px;
    height: 100%;
    position: relative;

    // unparsable color
    &[style='']::before {
      content: '';
      position: absolute;
      left: 10%;
      top: 10%;
      width: 80%;
      height: 80%;
      background: var(--background-primary-alt);
      animation: rotateplane 1.2s infinite ease-in-out;
    }
  }
}

.colorpicker {
  &.dropdown-menu {
    box-sizing: content-box;
    width: 380px;
    min-width: 0;
  }

  .open > & {
    display: flex;
  }

  &-hue-saturation {
    flex-grow: 1;
    width: 200px;
    height: 150px;
    margin: 14px;

    @include ltr(margin-right, 0);
    @include rtl(margin-left, 0);

    $i: 0;
    $rainbow: ();

    @while $i <= 360 {
      $rainbow: append($rainbow, unquote('hsl(#{$i},100%,50%)'), comma);
      $i: $i + 60;
    }

    background: linear-gradient(to right, $rainbow);
    position: relative;
    overflow: hidden;
    cursor: image_url('/assets/images/colorcircle.gif') 8 8, auto;
    user-select: none;
  }

  &-lightness-plane,
  &-saturation-gradient {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }

  &-circle {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid black;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
  }

  &-lightness {
    height: 150px;
    margin: 14px;
    position: relative;
    user-select: none;
  }

  &-hue-plane {
    height: 100%;
    width: 20px;
    background: red;
  }

  &-hue-gradient {
    height: 100%;
    width: 100%;
    background: linear-gradient(white, transparent, black);
  }

  &-slider {
    position: absolute;
    top: 0;
    left: -7px;
    right: -7px;

    &-arrow {
      position: absolute;
      top: 0;
      margin-top: -4px;
      border: 4px solid transparent;
      border-left: 7px solid hsl(240, 8%, 100%);
      border-right: 7px solid hsl(240, 8%, 100%);

      &--left {
        left: 0;
        border-right: none;
      }

      &--right {
        right: 0;
        border-left: none;
      }
    }
  }
}

/*

  ----------------
   iconset picker
  ----------------

*/

.iconset_picker {
  .controls input {
    display: none;
  }
}

.icon-sets {
  margin: 0 -10px;
}

.icon-set {
  margin: 10px;
  display: flex;
  border: 1px solid var(--border);
  border-radius: 3px;

  &.is-active {
    border-color: var(--border-highlight);
    box-shadow: 0 0 0 3px var(--shadow-highlight);
  }

  &-preview {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    height: 250px;
    border-radius: 0 3px 3px 0;
    border-left: 1px solid var(--border);
    background: var(--background-primary);
    color: var(--text-muted);
    position: relative;
  }

  &-meta {
    flex-basis: 197px;
    order: -1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 10px;
    background: var(--background-secondary);
    border-radius: 3px 0 0 3px;
  }

  &-version {
    color: var(--text-muted);
  }

  &-website {
    margin-top: auto;
    display: block;
  }

  .icon {
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;

    &:not(.loading).do-flash {
      animation: iconset-flash 0.7s ease-out;
    }
  }
}

@keyframes iconset-flash {
  from {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
  }

  to {
    background: transparent;
    color: inherit;
  }
}

/*

  -----------------------------
   generic flex layout classes
  -----------------------------

*/

.horizontal,
.vertical,
.centered {
  display: flex;
}

.horizontal.hide,
.vertical.hide,
.centered.hide {
  display: none;
}

.horizontal {
  flex-direction: row;
}

.horizontal.multiline {
  flex-wrap: wrap;
}

.horizontal.reverse {
  flex-direction: row-reverse;
}

.vertical {
  flex-direction: column;
}

.vertical.reverse {
  flex-direction: column-reverse;
}

.vertical.stretch > *,
.horizontal.stretch > * {
  flex: 1;
}

.stretch {
  align-self: stretch;
}

.relative {
  position: relative;
}

.fit {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

body.fit {
  margin: 0;
}

.scrollable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.flex {
  flex: 1;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

/*

  Firefox minimum content bugfix

  https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

  "By default, flex items won’t shrink below their minimum
  content size (the length of the longest word or fixed-size element).
  To change this, set the min-width or min-height property."

*/
.flex-shrink-horizontal {
  min-width: 0;
}

.flex-full {
  flex: 1 1 100%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-shrink {
  flex: 0 1 auto;
}

.flex-no-shrink {
  flex-shrink: 0;
}

.flex-none {
  flex: none;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.justify-start {
  justify-content: flex-start;
}

.justified {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.start {
  align-items: flex-start;
}

.center {
  align-items: center;
}

.baseline {
  align-items: baseline;
}

.centered {
  align-items: center;
  justify-content: center;
}

.end {
  align-items: flex-end;
}

.self-start {
  align-self: start;
}

.self-end {
  align-self: end;
}

.span-width {
  flex-basis: 100%;
}

.two-columns,
.three-columns,
.wrap {
  flex-wrap: wrap;
}

.two-columns,
.three-columns {
  @include phone {
    display: block;
  }
}

.two-columns > .column {
  width: 50%;

  @include phone {
    width: auto;
  }
}

.three-columns > .column {
  width: 33.33%;

  @include phone {
    width: auto;
  }
}

.align-left {
  @include bidi-style(margin-right, auto, margin-left, 0);
}

.align-right {
  @include bidi-style(margin-left, auto, margin-right, 0);
}

.space-left {
  @include bidi-style(margin-left, 10px, margin-right, 0);
}

.space-right {
  @include bidi-style(margin-right, 10px, margin-left, 0);
}

.half-space-left {
  @include bidi-style(margin-left, 5px, margin-right, 0);
}

.half-space-right {
  @include bidi-style(margin-right, 5px, margin-left, 0);
}

.align-center {
  margin-left: auto;
  margin-right: auto;
}

.flex-space-after {
  @include bidi-style(margin-right, auto, margin-left, 0);
}

.flex-space-before {
  @include bidi-style(margin-left, auto, margin-right, 0);
}

.half-spacer {
  width: 5px;
  height: 5px;
}

.spacer {
  width: 10px;
  height: 10px;
}

.double-spacer {
  width: 20px;
  height: 20px;
}

.flex-spacer {
  flex: 1;
}

span.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.inline-label + .scheduled-widget {
  margin-left: 18px;
}

.scheduled-widget {
  display: flex;
  align-items: center;
  padding: 5px 5px 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;

  &[data-state='published'] {
    color: var(--supergood-color);
    border-color: currentColor;

    .btn {
      border-color: currentColor;
    }
  }

  &[data-state='archived'] {
    border-color: var(--ghost-color);

    .btn {
      border-color: var(--ghost-color);
    }
  }

  &[data-state='internal'] {
    color: var(--highlight);
    border-color: currentColor;

    .btn {
      border-color: currentColor;
    }
  }

  .help-text & {
    margin-top: 4px;
  }

  .icon {
    color: inherit;
    fill: currentColor;
    vertical-align: middle;
  }

  &-label {
    margin: 0 10px 0 6px;
  }

  .icon-diagonal-cross {
    width: 10px;
    height: 10px;
  }

  .btn {
    color: inherit;
  }
}

.knowledge-base {
  &-navigation {
    display: flex;
    align-items: center;
    color: var(--interactive-muted);
    background: var(--background-primary-alt);
    border-bottom: 1px solid var(--border);
    padding: 7px;

    @include phone {
      flex-shrink: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .breadcrumb:not(:first-child) .breadcrumb-icon {
      width: 16px;
      height: 16px;
    }
  }

  &-body {
    position: relative;
    overflow-x: hidden;

    @include phone {
      flex-direction: column-reverse;
      overflow: visible;
    }
  }

  &-sidebar {
    position: absolute;

    @include ltr(right, 0);
    @include rtl(left, 0);

    top: 0;
    width: 280px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 500ms;

    @include bidi-style(
      border-left,
      1px solid var(--border),
      border-right,
      none
    );

    @include phone {
      width: auto;
      position: static;

      @include bidi-style(border-left, none, border-right, none);

      border-top: 1px solid var(--border);
      overflow: visible;
    }

    @include desktop {
      width: 28%;
    }

    &.hidden {
      display: block !important;
      visibility: visible !important;

      @include ltr(transform, translateX(100%));
      @include rtl(transform, translateX(-100%));

      @include phone {
        transform: none !important;
        display: none !important;
      }

      + .knowledge-base-main {
        @include ltr(margin-right, 0);
        @include rtl(margin-left, 0);
      }
    }

    h2 {
      font-size: 17px;
      line-height: 1;
    }
  }

  &-main {
    width: 100%;

    @include ltr(transition, margin-right 500ms);
    @include ltr(margin-right, 280px);
    @include rtl(transition, margin-left 500ms);
    @include rtl(margin-left, 280px);

    @include phone {
      margin: 0 0 10px !important;
    }

    @include desktop {
      @include ltr(margin-right, 28%);
      @include rtl(margin-left, 28%);
    }
  }

  form {
    flex-shrink: 0;
  }

  .richtext-content {
    word-break: break-word;
    word-wrap: anywhere;
  }

  .page-header {
    margin: 1px 0 3px;
    flex-shrink: 0;
  }
}

.modal-manage-attachments {
  input:focus + label {
    text-decoration: none;
  }
}

.modal-knowledge-base-server-snippet {
  label.radio-replacement:first-child {
    padding-left: 0;
  }
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 20px auto;
}

.sections {
  list-style: none;
  padding: 0;
  margin: 0 -10px;

  &:not(:empty) + &:not(:empty) {
    border-top: 1px solid var(--border);
    margin-top: 20px;
    padding-top: 20px;
  }

  &--grid {
    display: flex;
    flex-wrap: wrap;

    .section {
      a {
        padding-bottom: 72%;
        position: relative;
        line-height: 1.3;
      }

      [data-font] {
        font-size: 60px;
      }

      .modified-icon {
        margin: 10px 0 20px;
      }

      &--subsection {
        display: none;
      }

      &-inner {
        position: absolute;
        padding: 10px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;

        .title {
          display: -webkit-box;
          overflow: auto;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
        }
      }
    }

    &[data-size='medium'] {
      .section {
        width: 25%;

        @include phone {
          width: 100%;
        }

        a {
          font-size: 14px;
        }

        [data-font] {
          font-size: 42px;
        }

        .modified-icon-modifier {
          width: 18px;
          height: 18px;
          margin: 0 -6px -2px 0;
        }
      }
    }

    &[data-size='large'] {
      .section {
        width: 33.33%;

        @include phone {
          width: 100%;
        }

        a {
          font-size: 15px;
        }

        .modified-icon-modifier {
          width: 22.5px;
          height: 22.5px;
          margin: 0 -8px -5px 0;
        }
      }
    }
  }

  &--list {
    .section-detail {
      margin-left: 0.2em;
    }
  }
}

.section {
  &.kb-item--invisible {
    opacity: 0.5;
  }

  &.kb-item--missing-translation,
  &.kb-item--missing-translation:active,
  &.kb-item--missing-translation:focus {
    color: hsl(45, 98%, 63%);
  }

  a {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  &-title {
    color: #444a4f;
  }

  &-detail {
    color: #b4b7b9;
  }
}

.section-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 10px 14px;
  margin: 10px;
  background: var(--background-secondary);
  border-radius: 3px;
  border: 1px solid var(--border);
  box-shadow: var(--elevation-low);

  @include phone {
    margin: 5px;
  }

  &:active {
    box-shadow: none;
  }

  &-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.15;
  }

  &-date {
    display: inline;
    color: hsl(0, 0%, 75%);

    &::after {
      content: ' — ';
      color: var(--text-normal);
    }

    &:only-child::after {
      content: '';
    }
  }

  &-detail {
    display: block;
    margin-top: 5px;
  }

  &-icon {
    flex-shrink: 0;
    vertical-align: middle;

    &-holder {
      @include ltr(margin-right, 11px);
      @include rtl(margin-left, 11px);

      margin-top: 1px;

      .nav-pills & {
        @include ltr(margin-right, 7px);
        @include rtl(margin-left, 7px);
      }
    }

    &[data-font] {
      font-size: 16px;
      line-height: 1;
    }

    &.icon {
      fill: currentColor;
      width: 16px;
      height: 16px;
      object-fit: contain;
      object-position: center top;
    }
  }

  em {
    font-style: normal;
    background: hsla(205, 90%, 60%, 0.75);
  }
}

.knowledge-base-article {
  &-header {
    text-align: center;
  }

  &-meta {
    display: block;
    text-align: center;

    > * {
      &:first-child {
        text-transform: capitalize;
      }

      &::after {
        content: ' · ';
      }

      &:last-child::after {
        display: none;
      }
    }
  }

  &-body {
    margin-top: 20px;
    background: var(--background-secondary);
    border-radius: 2px;
    padding: 50px 50px 10px;
    border: 1px solid var(--border);

    @include phone {
      padding: 15px 15px 5px;
    }
  }

  &-content {
    margin-bottom: 40px;

    @include phone {
      margin-bottom: 10px;
    }
  }

  &-attachments,
  &-tags,
  &-linked-tickets {
    margin: 0 -30px;

    @include phone {
      margin: 0 -5px;
    }
  }

  .tasks {
    @include bidi-style(margin-left, 7px, margin-right, 0);
  }

  &-tags--container {
    padding: 6px 5px 11px;
    display: flex;
    flex-wrap: wrap;

    .tag {
      margin: 2px;
      display: inline-block;
      background: #0f94d6;
      color: var(--text-inverted);
      border-radius: 999px;
      padding: 2px 12px 1px;

      &:hover {
        background: hsl(200deg, 87%, 34%);
      }
    }
  }

  &-nav {
    display: flex;

    &-link {
      padding: 15px;
      max-width: 50%;
      display: flex;
      align-items: center;

      .knowledge-base-article > & {
        margin-top: -10px;
      }

      .spacer {
        width: 5px;
      }

      .icon {
        flex-shrink: 0;
        fill: currentColor;
        opacity: 1;
        vertical-align: top;
      }

      &--next {
        @include bidi-style(margin-left, auto, margin-right, inherit);
      }

      &-title {
        @extend .u-textTruncate;
      }
    }
  }
}

.miller-columns {
  display: flex;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;

  .column {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1 1 33%;
    height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--border);

    &:last-child {
      border-right-width: 0;
    }

    &-item {
      display: flex;
      align-items: center;
      padding: 5px 10px;
      cursor: default;

      &:hover {
        background: var(--background-modifier-accent-light);
      }

      &.is-selected {
        background: var(--background-secondary-hover);
      }

      &--has-children {
        @extend %clickable;

        cursor: pointer;
      }

      span {
        @extend .u-textTruncate;

        margin-right: 10px;
      }

      > .icon:first-child,
      [data-font] {
        fill: currentColor;
        margin-right: 8px;
        vertical-align: middle;
        flex-shrink: 0;
      }

      .icon-arrow-right {
        margin-left: auto;
        flex-shrink: 0;
      }

      .btn {
        margin-left: auto;
      }
    }
  }
}

.highlight-emulator {
  background-color: highlight;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btn-manage-public-menu-edit {
  margin-top: 0;
}

.kb-menu-settings-entry {
  margin-bottom: 12px;
}

.text-modules-box {
  max-height: 40vh;
}

.sla_times {
  .sla_radio_container {
    padding-top: 0.5em;
    padding-left: 0.5em;
  }
}

.calendar-preview {
  .calendar-events {
    margin-top: 12px;

    p {
      margin: 0;
    }

    h2 {
      margin-bottom: 24px;
    }

    h4 {
      margin-bottom: 4px;
    }

    section.description {
      margin: 24px 0 0;
      padding: 4px;
    }

    .event-row {
      display: flex;

      div {
        width: 50%;
        margin-bottom: 4px;
      }
    }
  }

  div.divider {
    margin-top: 18px;
    margin-bottom: 6px;
    border-top: 1px solid #dfdfdf;

    &:last-of-type {
      display: none;
    }
  }
}

.reporting {
  .legend > div {
    background: var(--background-secondary) !important;
  }

  .legendColorBox {
    padding-right: 4px;
  }
}