:root {
  --body-background-color: #FFF;
  --header-background-color: #fbfbfb;
  --color-primary: #333;
  --color-light: #999;
  --color-lighter: #dedede;
  --color-dark: #000;
  --color-medium: #555;
  --color-error: #b94a48;
  --link-color-primary: #36C;
  --link-color-focus: #DF5353;
  --link-color-hover: #333;
  --alert-color-default: #c09853;
  --alert-color-success: #468847;
  --alert-color-error: #b94a48;
  --alert-color-info: #3a87ad;
  --alert-color-normal: #333;
  --alert-background-color-default: #fcf8e3;
  --alert-background-color-success: #dff0d8;
  --alert-background-color-error: #f2dede;
  --alert-background-color-info: #d9edf7;
  --alert-background-color-normal: #f0f0f0;
  --alert-border-color-default: #fbeed5;
  --alert-border-color-success: #d6e9c6;
  --alert-border-color-error: #eed3d7;
  --alert-border-color-info: #bce8f1;
  --alert-border-color-normal: #ddd;
  --button-default-color: #333;
  --button-default-background-color: #f5f5f5;
  --button-default-border-color: #ddd;
  --button-default-color-focus: #000;
  --button-default-background-color-focus: #fafafa;
  --button-default-border-color-focus: #bbb;
  --button-primary-color: #fff;
  --button-primary-background-color: #4d90fe;
  --button-primary-border-color: #3079ed;
  --button-primary-color-focus: #fff;
  --button-primary-background-color-focus: #357ae8;
  --button-primary-border-color-focus: #3079ed;
  --button-danger-color: #fff;
  --button-danger-background-color: #d14836;
  --button-danger-border-color: #b0281a;
  --button-danger-color-focus: #fff;
  --button-danger-background-color-focus: #c53727;
  --button-danger-border-color-focus: #b0281a;
  --button-disabled-color: #ccc;
  --button-disabled-background-color: #f7f7f7;
  --button-disabled-border-color: #ccc;
  --table-header-background-color: #fbfbfb;
  --table-nth-background-color: #fefefe;
  --table-border-color: #eee;
  --avatar-color-letter: #fff;
  --activity-title-color: #000;
  --activity-title-border-color: #efefef;
  --activity-event-background-color: #fafafa;
  --activity-event-hover-color: #fff8dc;
  --user-mention-color: #000;
  --board-task-limit-color: #DF5353;
  --table-list-header-border-color: #e5e5e5;
  --table-list-header-background-color: #fbfbfb;
  --table-list-nth-background-color: #fefefe;
  --table-list-border-color: #e5e5e5;
  --table-list-row-hover-border-color: #ffeb8e;
  --table-list-row-background-color: #fff8dc;
  --sidebar-border-color: #efefef;
  --dropdown-background-color: #fff;
  --dropdown-border-color: #b2b2b2;
  --dropdown-li-border-color: #f8f8f8;
  --input-addon-background-color: rgba(147, 128, 108, .1);
  --input-addon-color: #666;
  --views-background-color: #fafafa;
  --views-border-color: #ddd;
  --views-active-color: #000;
  --input-focus-color: #000;
  --input-focus-border-color: rgba(82, 168, 236, .8);
  --input-focus-shadow-color: rgba(82, 168, 236, .6);
  --input-background-color: #fff;
  --input-border-color: #ccc;
  --input-placeholder-color: #dedede;
  --tooltip-background-color: #fff;
  --tooltip-border-color: #ddd;
  --tooltip-shadow-color: #aaa;
  --panel-background-color: #fcfcfc;
  --panel-border-color: #ddd;
  --draggable-item-selected-background-color: #fff;
  --draggable-item-selected-border-color: #666;
  --draggable-item-hover-background-color: #FEFFF2;
  --draggable-row-handle-color: #dedede;
  --draggable-placeholder-background-color: #fafafa;
  --draggable-placeholder-border-color: #000;
  --task-list-icons-color: #999;
  --form-help-color: brown;
  --form-error-color: #b94a48;
  --comment-title-border-color: #eee;
  --comment-nth-background-color: #fbfbfb;
  --comment-highlighted-background-color: #fff8dc;
  --comment-highlighted-hover-background-color: #fff8dc;
  --comment-highlighted-border-color: #ffeb8e
}

html {
  color-scheme: light
}

h1,
li,
ul,
ol,
table,
tr,
td,
th,
p,
blockquote,
body {
  margin: 0;
  padding: 0
}

body {
  background-color: var(--body-background-color);
  font-size: 100%;
  padding-bottom: 10px;
  color: var(--color-primary);
  font-family: "poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  overflow-x: hidden
}

small {
  font-size: .8em
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.page {
  margin-left: 10px;
  margin-right: 10px
}

.margin-top {
  margin-top: 20px
}

.margin-bottom {
  margin-bottom: 20px
}

.pull-right {
  text-align: right;
  margin-left: auto
}

ul.no-bullet li {
  list-style-type: none;
  margin-left: 0
}

#app-loading-icon {
  position: fixed;
  right: 3px;
  bottom: 3px
}

.assign-me {
  vertical-align: bottom
}

a {
  color: var(--link-color-primary);
  border: none
}

a:focus {
  color: var(--link-color-focus);
  outline: 0;
  text-decoration: none
}

a:hover {
  color: var(--link-color-hover);
  text-decoration: none
}

a .fa {
  color: var(--color-primary);
  padding-right: 3px;
  text-decoration: none
}

h1,
h2,
h3 {
  font-weight: 400;
  color: var(--color-primary)
}

h1 {
  font-size: 1.5em
}

h2 {
  font-size: 1.4em;
  margin-bottom: 10px
}

h3 {
  margin-top: 10px;
  font-size: 1.2em
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px
}

table.table-fixed {
  table-layout: fixed;
  white-space: nowrap
}

table.table-fixed th {
  overflow: hidden
}

table.table-fixed td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

table.table-small {
  font-size: .8em
}

table.table-striped tr:nth-child(odd) {
  background: var(--table-nth-background-color)
}

@media (max-width:768px) {
  table.table-scrolling {
    overflow-x: auto;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    white-space: nowrap
  }
}

table th {
  text-align: left;
  padding: .5em 3px;
  border: 1px solid var(--table-border-color);
  background-color: var(--table-header-background-color)
}

table th a {
  text-decoration: none;
  color: var(--color-primary)
}

table th a:focus,
table th a:hover {
  text-decoration: underline
}

table td {
  border: 1px solid var(--table-border-color);
  padding: .5em 3px;
  vertical-align: top
}

table td li {
  margin-left: 20px
}

table td .color-picker-square {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #000
}

.task-table a {
  color: #000
}

.column-1 {
  width: 1%
}

.column-2 {
  width: 2%
}

.column-3 {
  width: 3%
}

.column-4 {
  width: 4%
}

.column-5 {
  width: 5%
}

.column-6 {
  width: 6%
}

.column-7 {
  width: 7%
}

.column-8 {
  width: 8%
}

.column-9 {
  width: 9%
}

.column-10 {
  width: 10%
}

.column-11 {
  width: 11%
}

.column-12 {
  width: 12%
}

.column-13 {
  width: 13%
}

.column-14 {
  width: 14%
}

.column-15 {
  width: 15%
}

.column-16 {
  width: 16%
}

.column-17 {
  width: 17%
}

.column-18 {
  width: 18%
}

.column-19 {
  width: 19%
}

.column-20 {
  width: 20%
}

.column-21 {
  width: 21%
}

.column-22 {
  width: 22%
}

.column-23 {
  width: 23%
}

.column-24 {
  width: 24%
}

.column-25 {
  width: 25%
}

.column-26 {
  width: 26%
}

.column-27 {
  width: 27%
}

.column-28 {
  width: 28%
}

.column-29 {
  width: 29%
}

.column-30 {
  width: 30%
}

.column-31 {
  width: 31%
}

.column-32 {
  width: 32%
}

.column-33 {
  width: 33%
}

.column-34 {
  width: 34%
}

.column-35 {
  width: 35%
}

.column-36 {
  width: 36%
}

.column-37 {
  width: 37%
}

.column-38 {
  width: 38%
}

.column-39 {
  width: 39%
}

.column-40 {
  width: 40%
}

.column-41 {
  width: 41%
}

.column-42 {
  width: 42%
}

.column-43 {
  width: 43%
}

.column-44 {
  width: 44%
}

.column-45 {
  width: 45%
}

.column-46 {
  width: 46%
}

.column-47 {
  width: 47%
}

.column-48 {
  width: 48%
}

.column-49 {
  width: 49%
}

.column-50 {
  width: 50%
}

.column-51 {
  width: 51%
}

.column-52 {
  width: 52%
}

.column-53 {
  width: 53%
}

.column-54 {
  width: 54%
}

.column-55 {
  width: 55%
}

.column-56 {
  width: 56%
}

.column-57 {
  width: 57%
}

.column-58 {
  width: 58%
}

.column-59 {
  width: 59%
}

.column-60 {
  width: 60%
}

.column-61 {
  width: 61%
}

.column-62 {
  width: 62%
}

.column-63 {
  width: 63%
}

.column-64 {
  width: 64%
}

.column-65 {
  width: 65%
}

.column-66 {
  width: 66%
}

.column-67 {
  width: 67%
}

.column-68 {
  width: 68%
}

.column-69 {
  width: 69%
}

.column-70 {
  width: 70%
}

.column-71 {
  width: 71%
}

.column-72 {
  width: 72%
}

.column-73 {
  width: 73%
}

.column-74 {
  width: 74%
}

.column-75 {
  width: 75%
}

.column-76 {
  width: 76%
}

.column-77 {
  width: 77%
}

.column-78 {
  width: 78%
}

.column-79 {
  width: 79%
}

.column-80 {
  width: 80%
}

.column-81 {
  width: 81%
}

.column-82 {
  width: 82%
}

.column-83 {
  width: 83%
}

.column-84 {
  width: 84%
}

.column-85 {
  width: 85%
}

.column-86 {
  width: 86%
}

.column-87 {
  width: 87%
}

.column-88 {
  width: 88%
}

.column-89 {
  width: 89%
}

.column-90 {
  width: 90%
}

.column-91 {
  width: 91%
}

.column-92 {
  width: 92%
}

.column-93 {
  width: 93%
}

.column-94 {
  width: 94%
}

.column-95 {
  width: 95%
}

.column-96 {
  width: 96%
}

.column-97 {
  width: 97%
}

.column-98 {
  width: 98%
}

.column-99 {
  width: 99%
}

.column-100 {
  width: 100%
}

.draggable-row-handle {
  cursor: move;
  color: var(--draggable-row-handle-color)
}

.draggable-row-handle:hover {
  color: var(--color-primary)
}

tr.draggable-item-selected {
  background: var(--draggable-item-selected-background-color);
  border: 2px solid var(--draggable-item-selected-border-color);
  box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, .55)
}

tr.draggable-item-selected td {
  border-top: none;
  border-bottom: none
}

tr.draggable-item-selected td:first-child {
  border-left: none
}

tr.draggable-item-selected td:last-child {
  border-right: none
}

.table-stripped tr.draggable-item-hover,
.table-stripped tr.draggable-item-hover {
  background: var(--draggable-item-hover-background-color)
}

.table-list {
  font-size: .85em;
  margin-bottom: 20px
}

.table-list-header {
  background: var(--table-list-header-background-color);
  border: 1px solid var(--table-list-header-border-color);
  border-radius: 5px 5px 0 0;
  line-height: 28px;
  padding-left: 3px;
  padding-right: 3px
}

.table-list-header a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  margin-right: 10px
}

.table-list-header a:hover,
.table-list-header a:focus {
  color: #767676
}

.table-list-header .table-list-header-count {
  color: #767676;
  display: inline-block;
  float: left
}

.table-list-header .table-list-header-menu {
  text-align: right
}

.table-list-row {
  padding-left: 3px;
  padding-right: 3px;
  border-bottom: 1px solid var(--table-list-border-color);
  border-right: 1px solid var(--table-list-border-color)
}

.table-list-row.table-border-left {
  border-left: 1px solid var(--table-list-border-color)
}

.table-list-row:nth-child(odd) {
  background: var(--table-list-nth-background-color)
}

.table-list-row:last-child {
  border-radius: 0 0 5px 5px
}

.table-list-row:hover {
  background: var(--table-list-row-background-color);
  border-bottom: 1px solid var(--table-list-row-hover-border-color);
  border-right: 1px solid var(--table-list-row-hover-border-color)
}

.table-list-row .table-list-title {
  font-weight: 500;
  line-height: 23px
}

.table-list-row .table-list-title.status-closed {
  text-decoration: line-through;
  margin-right: 10px
}

.table-list-row .table-list-title.status-closed a {
  font-style: italic
}

.table-list-row .table-list-title a {
  color: var(--color-primary);
  text-decoration: none
}

.table-list-row .table-list-title a:hover,
.table-list-row .table-list-title a:focus {
  text-decoration: underline
}

.table-list-row .table-list-details {
  color: #999;
  font-weight: 300;
  line-height: 20px
}

.table-list-row .table-list-details span {
  margin-left: 5px
}

.table-list-row .table-list-details span:first-child {
  margin-left: 0
}

.table-list-row .table-list-details li {
  display: inline;
  list-style-type: none
}

.table-list-row .table-list-details li:after {
  content: ', '
}

.table-list-row .table-list-details li:last-child:after {
  content: ''
}

.table-list-row .table-list-details strong {
  font-weight: 400;
  color: #555
}

.table-list-row .table-list-details-with-icons {
  float: left
}

@media (max-width:768px) {
  .table-list-row .table-list-details-with-icons {
    float: none
  }
}

.table-list-row .table-list-icons {
  font-size: .8em;
  text-align: right;
  line-height: 30px
}

@media (max-width:768px) {
  .table-list-row .table-list-icons {
    text-align: left;
    line-height: 20px
  }
}

.table-list-row .table-list-icons span {
  margin-left: 5px
}

.table-list-row .table-list-icons a {
  text-decoration: none
}

.table-list-row .table-list-icons a:hover {
  color: var(--color-primary)
}

.table-list-row .table-list-icons a:hover i {
  color: var(--color-primary)
}

.table-list-category {
  font-size: .9em;
  font-weight: 500;
  color: #000;
  padding: 1px 2px 1px 2px;
  border-radius: 3px;
  background: #fcfcfc;
  border: 1px solid #ccc
}

.table-list-category a {
  text-decoration: none;
  color: #000
}

.table-list-category a:hover {
  color: #36c
}

fieldset {
  border: 1px solid #ddd;
  margin-top: 10px
}

legend {
  font-weight: 500;
  font-size: 1.2em
}

label {
  cursor: pointer;
  display: block;
  margin-top: 10px;
  font-weight: 400
}

input,
textarea {
  font-family: sans-serif;
  background-color: var(--input-background-color)
}

input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="text"]:not(.input-addon-field) {
  color: var(--color-light);
  border: 1px solid var(--input-border-color);
  width: 300px;
  max-width: 95%;
  font-size: 1em;
  height: 25px;
  padding-bottom: 0;
  padding-left: 4px;
  -webkit-appearance: none;
  -moz-appearance: none
}

input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="text"]:not(.input-addon-field)::placeholder {
  color: var(--input-placeholder-color)
}

input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  color: var(--input-focus-color);
  border-color: var(--input-focus-border-color);
  outline: 0;
  box-shadow: 0 0 8px var(--input-focus-shadow-color)
}

input[type="number"] {
  width: 70px
}

input[type="text"]:not(.input-addon-field).form-numeric {
  width: 70px
}

input[type="text"]:not(.input-addon-field).form-datetime,
input[type="text"]:not(.input-addon-field).form-date {
  width: 150px
}

input[type="text"]:not(.input-addon-field).form-input-large {
  width: 400px
}

input[type="text"]:not(.input-addon-field).form-input-small {
  width: 150px
}

textarea:focus {
  color: var(--input-focus-color);
  border-color: var(--input-focus-border-color);
  outline: 0;
  box-shadow: 0 0 8px var(--input-focus-shadow-color)
}

textarea {
  padding: 4px;
  border: 1px solid var(--input-border-color);
  width: 400px;
  max-width: 99%;
  height: 200px;
  font-size: 1em
}

textarea::placeholder {
  color: var(--input-placeholder-color)
}

select {
  font-size: 1em;
  max-width: 95%
}

select:focus {
  outline: 0
}

select[multiple] {
  width: 300px
}

.tag-autocomplete {
  width: 400px
}

span.select2-container {
  margin-top: 2px
}

.form-actions {
  padding-top: 20px;
  clear: both
}

.form-required {
  color: red;
  padding-left: 5px;
  font-weight: 700
}

@media (max-width:480px) {
  .form-required {
    display: none
  }
}

input[type="text"].form-max-width {
  width: 100%
}

input.form-error,
textarea.form-error {
  border: 2px solid var(--form-error-color)
}

input.form-error:focus,
textarea.form-error:focus {
  box-shadow: none;
  border: 2px solid var(--form-error-color)
}

.form-errors {
  color: var(--form-error-color);
  list-style-type: none
}

ul.form-errors li {
  margin-left: 0
}

.form-help {
  font-size: .8em;
  color: var(--form-help-color);
  margin-bottom: 15px
}

.form-inline {
  padding: 0;
  margin: 0;
  border: none
}

.form-inline label {
  display: inline;
  padding-right: 3px
}

.form-inline input,
.form-inline select {
  margin: 0 15px 0 0
}

.form-inline .form-required {
  display: none
}

.form-inline .form-actions {
  display: inline-block
}

.form-inline .js-submit-buttons-rendered {
  display: inline-block
}

.form-inline-group {
  display: inline
}

.form-columns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start
}

.form-columns .form-column {
  margin-right: 25px;
  flex-grow: 1
}

.form-columns fieldset {
  margin-top: 0
}

.form-login {
  max-width: 350px;
  margin: 5% auto 0
}

@media (max-width:480px) {
  .form-login {
    margin-left: 5px
  }
}

.form-login li {
  margin-left: 25px;
  line-height: 25px
}

.form-login h2 {
  margin-bottom: 30px;
  font-weight: 700
}

.reset-password {
  margin-top: 20px;
  margin-bottom: 20px
}

.reset-password a {
  color: var(--color-light)
}

.input-addon {
  display: flex
}

.input-addon-field {
  flex: 1;
  font-size: 1em;
  color: var(--color-light);
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none
}

.input-addon-field:first-child {
  border-radius: 5px 0 0 5px
}

.input-addon-field:last-child {
  border-radius: 0 5px 5px 0
}

.input-addon-item {
  background-color: var(--input-addon-background-color);
  color: var(--input-addon-color);
  font: inherit;
  font-weight: 400
}

.input-addon-item:first-child {
  border-radius: 5px 0 0 5px
}

.input-addon-item:last-child {
  border-radius: 0 5px 5px 0
}

@media (max-width:480px) {
  .input-addon-item .dropdown .fa-caret-down {
    display: none
  }
}

.input-addon-field,
.input-addon-item {
  border: 1px solid rgba(147, 128, 108, .25);
  padding: 4px .75em
}

.input-addon-field:not(:first-child),
.input-addon-item:not(:first-child) {
  border-left: 0
}

.input-addon .input-addon-field {
  flex: 1 1 auto;
  width: 1% !important
}

@media (max-width:400px) {
  .input-addon-item {
    padding: 3px
  }
}

.icon-success {
  color: #468847
}

.icon-error {
  color: #b94a48
}

.icon-fade-out {
  opacity: 1;
  animation: icon-fadeout 5s linear forwards
}

@keyframes icon-fadeout {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--alert-color-default);
  background-color: var(--alert-background-color-default);
  border: 1px solid var(--alert-border-color-default);
  border-radius: 4px
}

.alert-success {
  color: var(--alert-color-success);
  background-color: var(--alert-background-color-success);
  border-color: var(--alert-border-color-success)
}

.alert-error {
  color: var(--alert-color-error);
  background-color: var(--alert-background-color-error);
  border-color: var(--alert-border-color-error)
}

.alert-info {
  color: var(--alert-color-info);
  background-color: var(--alert-background-color-info);
  border-color: var(--alert-border-color-info)
}

.alert-normal {
  color: var(--alert-color-normal);
  background-color: var(--alert-background-color-normal);
  border-color: var(--alert-border-color-normal)
}

.alert ul {
  margin-top: 10px;
  margin-bottom: 10px
}

.alert li {
  margin-left: 25px
}

.alert-fade-out {
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 20%;
  width: 60%;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
  border-width: 1px 0 0;
  border-radius: 4px 4px 0 0;
  z-index: 9999;
  opacity: 1;
  animation: fadeout 5s linear forwards
}

@keyframes fadeout {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0;
    visibility: hidden
  }
}

a.btn {
  text-decoration: none
}

.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 1.2em;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
  border-radius: 2px;
  padding: 3px 10px;
  margin: 0;
  border: 1px solid var(--button-default-border-color);
  background: var(--button-default-background-color);
  color: var(--button-default-color)
}

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

.btn-red {
  border-color: var(--button-danger-border-color);
  background: var(--button-danger-background-color);
  color: var(--button-danger-color)
}

.btn-red:hover,
.btn-red:focus {
  border-color: var(--button-danger-border-color-focus);
  background: var(--button-danger-background-color-focus);
  color: var(--button-danger-color-focus)
}

.btn-blue {
  border-color: var(--button-primary-border-color);
  background: var(--button-primary-background-color);
  color: var(--button-primary-color)
}

.btn-blue:hover,
.btn-blue:focus {
  border-color: var(--button-primary-border-color-focus);
  background: var(--button-primary-background-color-focus);
  color: var(--button-primary-color-focus)
}

.btn:disabled {
  color: var(--button-disabled-color);
  border-color: var(--button-disabled-border-color);
  background: var(--button-disabled-background-color)
}

.buttons-header {
  font-size: .8em;
  margin-top: 5px;
  margin-bottom: 15px
}

.tooltip i.fa {
  cursor: pointer
}

.tooltip .fa-info-circle {
  color: var(--color-light)
}

#tooltip-container {
  padding: 5px;
  background: var(--tooltip-background-color);
  border: 1px solid var(--tooltip-border-color);
  border-radius: 4px;
  box-shadow: 0 6px 12px var(--tooltip-shadow-color);
  position: absolute;
  min-width: 350px
}

#tooltip-container .markdown p:last-child {
  margin-bottom: 0
}

#tooltip-container .tooltip-large {
  width: 600px
}

h2 .dropdown ul {
  display: none
}

.dropdown {
  display: inline;
  position: relative
}

.dropdown ul {
  display: none
}

.dropdown-smaller {
  font-size: .85em
}

ul.dropdown-submenu-open {
  display: block;
  position: absolute;
  z-index: 1000;
  min-width: 285px;
  list-style: none;
  margin: 3px 0 0 1px;
  padding: 6px 0;
  background-color: var(--dropdown-background-color);
  border: 1px solid var(--dropdown-border-color);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15)
}

.dropdown-submenu-open li {
  display: block;
  margin: 0;
  padding: 8px 10px;
  font-size: .9em;
  border-bottom: 1px solid var(--dropdown-li-border-color);
  cursor: pointer
}

.dropdown-submenu-open li.no-hover {
  cursor: default
}

.dropdown-submenu-open li:last-child {
  border: none
}

.dropdown-submenu-open li:not(.no-hover):hover {
  background: #4078C0;
  color: #fff
}

.dropdown-submenu-open li:hover a {
  color: #fff
}

.dropdown-submenu-open li:hover i {
  color: #fff
}

.dropdown-submenu-open a {
  text-decoration: none;
  color: var(--color-primary)
}

.dropdown-submenu-open a:focus {
  text-decoration: underline
}

.dropdown-menu-link-text,
.dropdown-menu-link-icon {
  color: var(--color-primary);
  text-decoration: none
}

.dropdown-menu-link-icon {
  display: inline-flex
}

.dropdown-menu-link-text:hover {
  text-decoration: underline
}

td a.dropdown-menu strong {
  color: var(--color-primary)
}

td a.dropdown-menu strong i {
  color: var(--color-primary)
}

td a.dropdown-menu i {
  color: #dedede
}

td a.dropdown-menu:hover strong {
  color: #555
}

td a.dropdown-menu:hover strong i {
  color: #555
}

td a.dropdown-menu:hover i {
  color: #333
}

.accordion-title {
  font-size: 1.2em;
  cursor: pointer;
  margin-top: 10px
}

.accordion-content {
  margin-top: 15px;
  margin-bottom: 25px
}

#select-dropdown-menu {
  position: absolute;
  display: block;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  background: var(--dropdown-background-color);
  list-style: none;
  border: 1px solid var(--dropdown-border-color);
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  overflow: scroll
}

.select-dropdown-menu-item {
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 10px;
  color: var(--color-medium);
  cursor: pointer;
  border-bottom: 1px solid var(--dropdown-li-border-color);
  line-height: 1.5em;
  font-weight: 400
}

.select-dropdown-menu-item.active {
  color: #fff;
  background: #428bca
}

.select-dropdown-menu-item:last-child {
  border: none
}

.select-dropdown-input-container {
  position: relative;
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  background-color: var(--input-background-color);
  max-width: 300px
}

.select-dropdown-input-container input.select-dropdown-input {
  margin: 0 0 0 5px;
  border: none;
  height: 23px;
  width: 270px
}

.select-dropdown-input-container input.select-dropdown-input:focus {
  border: none;
  box-shadow: none
}

.select-dropdown-input-container .select-dropdown-chevron {
  color: var(--color-medium);
  position: absolute;
  top: 4px;
  right: 5px;
  cursor: pointer
}

.select-dropdown-input-container .select-loading-icon {
  color: var(--color-medium);
  position: absolute;
  top: 4px;
  right: 5px
}

#suggest-menu {
  position: absolute;
  display: block;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  background: #fff;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

.suggest-menu-item {
  white-space: nowrap;
  padding: 3px 10px;
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer
}

.suggest-menu-item.active {
  color: #fff;
  background: #428bca
}

.suggest-menu-item.active small {
  color: #fff
}

.suggest-menu-item small {
  color: var(--color-light);
  font-weight: 400
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  overflow: auto;
  z-index: 100
}

#modal-box {
  position: fixed;
  max-height: calc(100% - 30px);
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--body-background-color);
  overflow: auto;
  border-radius: 5px
}

#modal-content {
  padding: 0 5px 5px
}

#modal-header {
  text-align: right;
  padding-right: 5px
}

#modal-close-button {
  color: var(--color-primary)
}

#modal-close-button:hover {
  color: var(--color-error)
}

.pagination {
  text-align: center;
  font-size: .9em
}

.pagination-showing {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid #999
}

.pagination-next {
  margin-left: 5px
}

.pagination-previous {
  margin-right: 5px
}

header {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #dedede;
  background-color: var(--header-background-color)
}

header .title-container {
  flex: 1;
  min-width: 300px
}

@media (max-width:480px) {
  header .title-container {
    order: 3
  }
}

header .board-selector-container {
  min-width: 320px;
  display: flex;
  align-items: center
}

@media (max-width:480px) {
  header .board-selector-container {
    order: 2;
    min-width: 300px
  }

  header .board-selector-container input[type=text] {
    max-width: 280px
  }
}

header .menus-container {
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end
}

@media (max-width:480px) {
  header .menus-container {
    order: 1;
    margin-bottom: 5px;
    margin-left: auto
  }
}

header h1 {
  font-size: 1.5em
}

header h1 .tooltip {
  opacity: .3;
  font-size: .7em
}

a i.web-notification-icon {
  color: var(--link-color-primary)
}

a i.web-notification-icon:focus,
a i.web-notification-icon:hover {
  color: #000
}

.logo a {
  opacity: .5;
  color: #d40000;
  text-decoration: none
}

.logo span {
  color: var(--color-primary)
}

.logo a:hover {
  opacity: .8;
  color: var(--color-primary)
}

.logo a:focus span,
.logo a:hover span {
  color: #d40000
}

.page-header {
  margin-bottom: 20px
}

.page-header .dropdown {
  padding-right: 10px
}

.page-header h2 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  border-bottom: 1px dotted #ccc
}

.page-header h2 a {
  color: var(--color-primary);
  text-decoration: none
}

.page-header h2 a:focus,
.page-header h2 a:hover {
  color: var(--color-light)
}

.page-header ul {
  text-align: left;
  margin-top: 5px;
  display: inline-block
}

.page-header li {
  display: inline;
  padding-right: 15px
}

@media (max-width:480px) {
  .page-header li {
    display: block;
    line-height: 1.5em
  }
}

.page-header li.active a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700
}

.page-header li.active a:hover,
.page-header li.active a:focus {
  text-decoration: underline
}

.menu-inline {
  margin-bottom: 5px
}

.menu-inline li {
  display: inline;
  padding-right: 15px
}

.menu-inline li .active a {
  font-weight: 700;
  color: #000;
  text-decoration: none
}

.sidebar-container {
  height: 100%;
  display: flex;
  flex-flow: row
}

@media (max-width:768px) {
  .sidebar-container {
    flex-flow: wrap
  }
}

.sidebar-content {
  padding-left: 10px;
  flex: 1 100%;
  max-width: 85%;
  overflow-wrap: break-word
}

@media (max-width:768px) {
  .sidebar-content {
    padding-left: 0;
    order: 1;
    max-width: 100%
  }
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1) {
  .sidebar-content {
    max-width: 75%
  }
}

.sidebar {
  max-width: 25%;
  min-width: 230px
}

@media (max-width:768px) {
  .sidebar {
    flex: 1 auto;
    order: 2
  }
}

.sidebar h2 {
  margin-top: 0
}

.sidebar>ul a {
  text-decoration: none;
  color: var(--color-light);
  font-weight: 300
}

.sidebar>ul a:hover {
  color: var(--color-primary)
}

.sidebar>ul li {
  list-style-type: none;
  line-height: 35px;
  border-bottom: 1px dotted var(--sidebar-border-color);
  padding-left: 13px
}

.sidebar>ul li:hover {
  border-left: 5px solid #555;
  padding-left: 8px
}

.sidebar>ul li.active {
  border-left: 5px solid #333;
  padding-left: 8px
}

.sidebar>ul li.active a {
  color: var(--color-primary);
  font-weight: 400
}

.sidebar-icons>ul li {
  padding-left: 0
}

.sidebar-icons>ul li:hover,
.sidebar-icons>ul li.active {
  padding-left: 0;
  border-left: none
}

.sidebar>ul li.active a:focus,
.sidebar>ul li.active a:hover {
  color: var(--color-medium)
}

.sidebar>ul li:last-child {
  margin-bottom: 15px
}

.avatar img {
  vertical-align: bottom
}

.avatar-left {
  float: left;
  margin-right: 10px
}

.avatar-inline {
  display: inline-block;
  margin-right: 3px
}

.avatar-48 img,
.avatar-48 div {
  border-radius: 30px
}

.avatar-48 .avatar-letter {
  line-height: 48px;
  width: 48px;
  font-size: 25px
}

.avatar-20 img,
.avatar-20 div {
  border-radius: 10px
}

.avatar-20 .avatar-letter {
  line-height: 20px;
  width: 20px;
  font-size: 11px
}

.avatar-letter {
  color: var(--avatar-color-letter);
  text-align: center
}

#file-dropzone,
#screenshot-zone {
  position: relative;
  border: 2px dashed #ccc;
  width: 99%;
  height: 250px;
  overflow: auto
}

#file-dropzone-inner,
#screenshot-inner {
  position: absolute;
  left: 0;
  bottom: 48%;
  width: 100%;
  text-align: center;
  color: #aaa
}

#screenshot-zone.screenshot-pasted {
  border: 2px solid #333
}

#file-list {
  margin: 20px
}

#file-list li {
  list-style-type: none;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dotted #ddd;
  width: 95%
}

#file-list li .file-error {
  font-weight: 700;
  color: #b94a48
}

.file-thumbnails {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start
}

.file-thumbnail {
  width: 250px;
  border: 1px solid #efefef;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: 4px 2px 10px -6px rgba(0, 0, 0, .55);
  margin-right: 15px
}

.file-thumbnail img {
  cursor: pointer;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px
}

.file-thumbnail img:hover {
  opacity: .5
}

.file-thumbnail-content {
  padding-left: 8px;
  padding-right: 8px
}

.file-thumbnail-title {
  font-weight: 700;
  font-size: .9em;
  color: var(--color-medium);
  overflow: hidden;
  text-overflow: ellipsis
}

.file-thumbnail-description {
  font-size: .8em;
  color: var(--color-light);
  margin-top: 8px;
  margin-bottom: 5px
}

.file-viewer {
  position: relative
}

.file-viewer img {
  max-width: 95%;
  max-height: 85%;
  margin-top: 10px
}

.color-picker {
  width: 220px
}

.color-picker-option {
  height: 25px
}

.color-picker-square {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  border: 1px solid #000
}

.color-picker-label {
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 3px
}

.filter-box {
  max-width: 100%
}

.action-menu {
  color: var(--color-primary);
  text-decoration: none
}

.action-menu:hover,
.action-menu:focus {
  text-decoration: underline
}

.js-project-creation-options {
  max-width: 500px;
  border-left: 3px dotted #efefef;
  margin-top: 20px;
  padding-left: 15px;
  padding-bottom: 5px;
  padding-top: 5px
}

.project-overview-columns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.4em
}

@media (max-width:480px) {
  .project-overview-columns {
    display: block
  }
}

.project-overview-column {
  text-align: center;
  margin-right: 3%;
  margin-top: 5px;
  padding: 3px 15px 3px 15px;
  border: 1px dashed #ddd
}

@media (max-width:480px) {
  .project-overview-column {
    text-align: left
  }
}

.project-overview-column small {
  color: var(--color-light)
}

.project-overview-column strong {
  color: var(--color-medium);
  display: block
}

@media (max-width:480px) {
  .project-overview-column strong {
    display: inline
  }
}

.project-header {
  margin-bottom: 8px
}

.project-header .dropdown-component {
  margin-top: 4px;
  margin-right: 5px;
  float: left
}

@media (max-width:768px) {
  .project-header .dropdown-component {
    float: none
  }
}

.project-header .views-switcher-component {
  margin-top: 4px;
  margin-bottom: 10px;
  float: left
}

@media (max-width:768px) {
  .project-header .views-switcher-component {
    float: none;
    margin-bottom: 10px
  }
}

.project-header .filter-box-component form {
  margin: 0
}

.views {
  margin-right: 10px;
  margin-top: 1px;
  font-size: .9em
}

@media (max-width:560px) {
  .views {
    width: 100%
  }
}

@media (max-width:768px) {
  .views {
    margin-top: 10px;
    font-size: 1em
  }
}

@media (max-width:480px) {
  .views {
    margin-top: 5px
  }
}

.views li {
  white-space: nowrap;
  background: var(--views-background-color);
  border: 1px solid var(--views-border-color);
  border-right: none;
  padding: 4px 8px;
  display: inline
}

@media (max-width:560px) {
  .views li {
    display: block;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid var(--views-border-color)
  }
}

.views li.active a {
  font-weight: 700;
  color: var(--views-active-color);
  text-decoration: none
}

.views li:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px
}

.views li:last-child {
  border-right: 1px solid var(--views-border-color);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px
}

.views a {
  color: var(--color-ligth);
  text-decoration: none
}

.views a:hover {
  color: var(--color-primary);
  text-decoration: underline
}

.dashboard-project-stats small {
  margin-right: 10px;
  color: var(--color-light)
}

.dashboard-table-link {
  font-weight: 700;
  color: #000;
  text-decoration: none
}

.dashboard-table-link:focus,
.dashboard-table-link:hover {
  color: var(--color-light)
}

.public-board {
  margin-top: 5px
}

.public-task {
  max-width: 800px;
  margin: 5px auto 0
}

#board-container {
  overflow-x: auto
}

#board {
  table-layout: fixed;
  margin-bottom: 0
}

#board tr.board-swimlane-columns-first {
  visibility: hidden;
  padding: 0
}

#board th.board-column-header {
  width: 240px
}

#board th.board-column-header-first {
  visibility: hidden;
  padding: 0
}

#board td {
  vertical-align: top
}

.board-container-compact {
  overflow-x: initial
}

@media all and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
  .board-container-compact #board {
    table-layout: auto
  }
}

#board th.board-column-header.board-column-compact {
  width: initial
}

.board-column-collapsed {
  display: none
}

.board-column-expanded-header {
  display: flex;
  align-items: center
}

td.board-column-task-collapsed {
  font-weight: 700;
  background-color: var(--table-header-background-color)
}

#board th.board-column-header-collapsed {
  width: 28px;
  min-width: 28px;
  text-align: center;
  overflow: hidden
}

.board-rotation-wrapper {
  position: relative;
  padding: 8px 4px;
  min-height: 150px;
  overflow: hidden
}

.board-rotation {
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: 0 100%
}

.board-column-title .dropdown-menu {
  text-decoration: none
}

.board-add-icon {
  float: left;
  padding: 0 5px
}

.board-add-icon i {
  text-decoration: none;
  color: var(--link-color-primary);
  font-size: 1.4em
}

.board-add-icon i:focus,
.board-add-icon i:hover {
  text-decoration: none;
  color: red
}

.board-column-header-task-count {
  color: var(--color-light);
  font-weight: 400;
  font-size: .85em
}

a.board-swimlane-toggle {
  text-decoration: none
}

a.board-swimlane-toggle:hover,
a.board-swimlane-toggle:focus {
  color: #000;
  text-decoration: none;
  border: none
}

.board-task-list {
  min-height: 60px
}

.board-task-list-compact {
  max-height: 90vh;
  overflow-y: auto
}

.board-task-list .task-board:last-child {
  margin-bottom: 0
}

.board-task-list-limit {
  background-color: var(--board-task-limit-color)
}

.draggable-item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none
}

.draggable-placeholder {
  border: 2px dashed var(--draggable-placeholder-border-color);
  background: var(--draggable-placeholder-background-color);
  height: 70px;
  margin-bottom: 10px
}

div.draggable-item-selected {
  border: 1px solid #000
}

.task-board-sort-handle {
  float: left;
  padding-right: 5px
}

.task-board {
  position: relative;
  margin-bottom: 4px;
  border: 1px solid #000;
  padding: 2px;
  word-wrap: break-word;
  font-size: .9em;
  border-radius: 6px
}

div.task-board-recent {
  border-width: 2px
}

div.task-board-status-closed {
  user-select: none;
  border: 1px dotted #555
}

.task-board a {
  color: #000;
  text-decoration: none
}

.task-board-collapsed {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.task-board-title {
  margin-top: 5px;
  margin-bottom: 8px
}

.task-board-title a:hover {
  text-decoration: underline
}

.task-board-saving-state {
  opacity: .3
}

.task-board-saving-icon {
  position: absolute;
  margin: auto;
  width: 100%;
  text-align: center;
  color: #000
}

.task-board-avatars {
  text-align: right;
  float: right
}

.task-board-change-assignee {
  cursor: pointer
}

.task-board-change-assignee:hover {
  opacity: .6
}

.task-list-avatars {
  display: inline-block;
  float: left
}

@media (max-width:768px) {
  .task-list-avatars {
    float: none;
    display: block
  }
}

.task-list-avatars .task-avatar-assignee {
  font-weight: 300;
  color: #999
}

.task-list-avatars:hover .task-avatar-assignee {
  font-weight: 400;
  color: #000
}

.task-board-icons,
.task-list-icons {
  font-size: .8em;
  text-align: right
}

.task-board-icons a,
.task-board-icons span.tooltip,
.task-list-icons a,
.task-list-icons span.tooltip {
  text-decoration: none
}

.task-board-icons a:hover,
.task-board-icons span.tooltip:hover,
.task-list-icons a:hover,
.task-list-icons span.tooltip:hover {
  color: var(--color-primary)
}

.task-board-icons a:hover i,
.task-board-icons span.tooltip:hover i,
.task-list-icons a:hover i,
.task-list-icons span.tooltip:hover i {
  color: var(--color-primary)
}

.task-board-icons .task-score,
.task-list-icons .task-score {
  font-weight: 700
}

.task-board-icons .flag-milestone,
.task-list-icons .flag-milestone {
  color: green
}

.task-board-icons {
  margin-top: 7px
}

.task-board-icons a {
  opacity: .5
}

.task-board-icons span {
  opacity: .5;
  margin-left: 4px
}

.task-board-icons a:hover,
.task-board-icons span.tooltip:hover {
  opacity: 1;
  font-weight: 700
}

.task-board-icons .task-board-icons-row {
  line-height: 22px
}

.task-list-icons {
  line-height: 22px
}

.task-list-icons a,
.task-list-icons span,
.task-list-icons i {
  color: var(--task-list-icons-color);
  opacity: 1
}

.task-list-icons span {
  margin-left: 5px
}

@media (max-width:768px) {
  .task-list-icons {
    text-align: left
  }
}

.task-icon-age {
  display: inline-block
}

span.task-icon-age-total {
  border: 1px solid #e5e5e5;
  padding: 1px 3px 1px 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px
}

span.task-icon-age-column {
  border: 1px solid #e5e5e5;
  border-left: none;
  margin-left: -5px;
  padding: 1px 3px 1px 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px
}

.task-board span.task-icon-age-total,
.task-board span.task-icon-age-column {
  border-color: #666
}

.task-board-category-container {
  text-align: right;
  margin-top: 8px;
  margin-bottom: 8px
}

.task-board-category {
  border: 1px solid #555;
  font-size: .9em;
  font-weight: 500;
  color: #000;
  padding: 1px 3px 1px 2px;
  border-radius: 3px
}

.task-board-category a:hover {
  text-decoration: underline
}

.task-date {
  font-weight: 500;
  color: #000
}

span.task-date-today {
  opacity: 1;
  color: var(--link-color-primary)
}

span.task-date-overdue {
  opacity: 1;
  color: #b94a48
}

.task-tags li {
  display: inline-block;
  margin: 3px 3px 0 0;
  padding: 1px 3px 1px 3px;
  color: var(--color-primary);
  border: 1px solid #333;
  border-radius: 4px
}

.task-summary-container .task-tags {
  margin-top: 10px
}

#task-summary {
  margin-bottom: 15px
}

#task-summary h2 {
  color: var(--color-medium);
  font-size: 1.6em;
  margin-top: 0;
  padding-top: 0
}

.task-summary-container {
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px
}

.task-summary-columns {
  display: flex;
  flex-flow: row;
  justify-content: space-between
}

@media (max-width:768px) {
  .task-summary-columns {
    flex-flow: column
  }
}

.task-summary-column {
  color: var(--color-dark)
}

.task-summary-column span {
  color: var(--color-medium)
}

.task-summary-column li {
  line-height: 23px
}

#external-task-view {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px dotted #ccc
}

.task-form-container {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap
}

.task-form-container>* {
  box-sizing: border-box
}

.task-form-container>* {
  width: 1%
}

.task-form-main-column {
  width: 60%
}

@media (max-width:1000px) {
  .task-form-main-column {
    width: 100%
  }
}

.task-form-main-column input[type="text"] {
  width: 700px;
  max-width: 99%
}

.task-form-secondary-column {
  max-width: 250px;
  min-width: 200px;
  max-height: 600px;
  padding-left: 10px;
  overflow: auto;
  width: 20%
}

@media (max-width:1000px) {
  .task-form-secondary-column {
    width: 100%;
    max-width: 99%;
    max-height: none
  }
}

@media (max-width:768px) {
  .task-form-secondary-column {
    padding-left: 0
  }
}

.task-form-secondary-column label:first-child {
  margin-top: 0
}

@media (max-width:1000px) {
  .task-form-secondary-column label:first-child {
    margin-top: 10px
  }
}

.task-form-bottom {
  width: 100%
}

.task-form-bottom label {
  display: inline-block
}

.task-form-bottom-column {
  display: inline-block;
  width: 49%;
  margin-left: 5px;
  margin-right: 5px
}

.comment-sorting {
  text-align: right
}

.comment-sorting a {
  color: var(--color-medium);
  font-weight: 400;
  text-decoration: none
}

.comment-sorting a:hover {
  color: var(--color-light)
}

.comment {
  padding: 5px;
  margin-bottom: 15px
}

.comment-title {
  border-bottom: 1px dotted var(--comment-title-border-color);
  margin-left: 55px
}

.comment-date {
  color: var(--color-light);
  font-weight: 200
}

.comment-visibility {
  color: var(--color-light);
  font-weight: 200
}

.comment-actions {
  text-align: right
}

.comment-content {
  margin-left: 55px
}

.comments .text-editor textarea {
  height: 90px
}

.comments .text-editor .text-editor-preview-area {
  height: 90px
}

.comments .comment-highlighted {
  background-color: var(--comment-highlighted-background-color);
  border: 2px solid var(--comment-highlighted-border-color)
}

.comments .comment-highlighted:hover {
  background-color: var(--comment-highlighted-hover-background-color)
}

.comments .comment:hover {
  background: var(--comment-highlighted-hover-background-color)
}

.comments .comment:nth-child(even):not(.comment-highlighted) {
  background: var(--comment-nth-background-color)
}

.comments .comment:nth-child(even):not(.comment-highlighted):hover {
  background: var(--comment-highlighted-hover-background-color)
}

.subtask-cell {
  padding: 4px 10px;
  border-top: 1px dotted #dedede;
  border-left: 1px dotted #dedede;
  display: table-cell;
  vertical-align: middle
}

.subtask-cell a {
  color: var(--color-primary);
  text-decoration: none
}

.subtask-cell a:hover,
.subtask-cell a:focus {
  color: var(--link-color-primary)
}

.subtask-cell:first-child {
  border-left: none
}

@media (max-width:768px) {
  .subtask-cell {
    width: 90%;
    display: block;
    border-left: none
  }
}

.subtasks-table .subtask-table-td {
  display: flex;
  white-space: normal;
  min-width: 400px
}

.subtasks-table .subtask-submenu {
  display: flex
}

.js-subtask-toggle-status {
  display: flex;
  text-decoration: none
}

.task-list-subtasks {
  display: table;
  width: 100%
}

@media (max-width:768px) {
  .task-list-subtasks {
    display: block
  }
}

.task-list-subtask {
  display: table-row
}

@media (max-width:768px) {
  .task-list-subtask {
    display: block
  }
}

@media (max-width:768px) {

  .subtask-assignee,
  .subtask-time-tracking-cell {
    display: none
  }
}

.subtask-time-tracking {
  white-space: normal
}

.task-links-table td {
  vertical-align: middle
}

.task-links-task-count {
  color: var(--color-light);
  font-weight: 400
}

.task-link-closed {
  text-decoration: line-through
}

.task-links-table-td {
  display: flex
}

.text-editor {
  margin-top: 10px
}

.text-editor a {
  font-size: 1em;
  color: var(--color-light);
  text-decoration: none;
  margin-right: 10px
}

.text-editor a:hover {
  color: var(--link-color-primary)
}

.text-editor .text-editor-preview-area {
  border: 1px solid #dedede;
  width: 700px;
  max-width: 99%;
  height: 250px;
  overflow: auto;
  padding: 2px
}

.text-editor textarea {
  width: 700px;
  max-width: 98%;
  height: 250px
}

.markdown {
  line-height: 1.4em
}

.markdown h1 {
  margin-top: 5px;
  margin-bottom: 10px;
  font-weight: 700
}

.markdown h2 {
  font-weight: 700
}

.markdown p {
  margin-bottom: 10px
}

.markdown ol,
.markdown ul {
  margin-left: 25px;
  margin-top: 10px;
  margin-bottom: 10px
}

.markdown pre {
  background: #fbfbfb;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  overflow: auto;
  overflow-wrap: initial;
  color: var(--color-medium)
}

.markdown blockquote {
  font-style: italic;
  border-left: 3px solid #ddd;
  padding-left: 10px;
  margin-bottom: 10px;
  margin-left: 20px
}

.markdown img {
  display: block;
  max-width: 80%;
  margin-top: 10px
}

.panel {
  border-radius: 4px;
  padding: 8px 35px 8px 10px;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--panel-border-color);
  color: var(--color-primary);
  background-color: var(--panel-background-color);
  overflow: auto
}

.panel li {
  list-style-type: square;
  margin-left: 20px;
  line-height: 1.35em
}

.activity-event {
  margin-bottom: 15px;
  padding: 10px
}

.activity-event:nth-child(even) {
  background: var(--activity-event-background-color)
}

.activity-event:hover {
  background: var(--activity-event-hover-color)
}

.activity-date {
  margin-left: 10px;
  font-weight: 400;
  color: var(--color-light)
}

.activity-content {
  margin-left: 55px
}

.activity-title {
  font-weight: 700;
  color: var(--activity-title-color);
  border-bottom: 1px dotted var(--activity-title-border-color)
}

.activity-description {
  color: var(--color-light);
  margin-top: 10px
}

@media (max-width:480px) {
  .activity-description {
    overflow: auto
  }
}

.activity-description li {
  list-style-type: circle
}

.activity-description ul {
  margin-top: 10px;
  margin-left: 20px
}

.user-mention-link {
  font-weight: 700;
  color: var(--user-mention-color);
  text-decoration: none
}

.user-mention-link:hover {
  color: var(--color-medium)
}

.image-slideshow-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .95);
  overflow: auto;
  z-index: 100
}

.image-slideshow-overlay img {
  display: block;
  margin: auto
}

.image-slideshow-overlay figcaption {
  color: #fff;
  opacity: .7;
  position: absolute;
  bottom: 5px;
  right: 15px
}

.slideshow-icon {
  color: #fff;
  position: absolute;
  font-size: 2.5em;
  opacity: .6
}

.slideshow-icon:hover {
  opacity: .9;
  cursor: pointer
}

.slideshow-previous-icon {
  left: 10px;
  top: 45%
}

.slideshow-next-icon {
  right: 10px;
  top: 45%
}

.slideshow-close-icon {
  right: 10px;
  top: 10px;
  font-size: 1.4em
}

.slideshow-download-icon {
  left: 10px;
  bottom: 10px;
  font-size: 1.3em
}

.list-item-links,
.list-item-actions {
  display: inline-block;
  float: left;
  margin-left: 10px
}

.list-item-links a {
  margin: 0
}

.list-item-action-hidden {
  display: none
}

.bulk-change-checkbox {
  float: left
}

.bulk-change-inputs {
  float: left;
  padding-left: 10px
}

.bulk-change-inputs label {
  margin-top: 0;
  margin-bottom: 3px
}