/* COMMON */

/* Bug 1351813 */
[data-script='Arabic'] {
  font-size: 1.1em;
}

[data-script='Arabic'] .placeable {
  font-size: 0.9em;
}

.status.fas {
  font-size: 16px;
  left: 20px;
  position: absolute;
  top: 3px;
}

.status.fas:before {
  color: var(--status-missing);
  content: '';
}

.translated .status.fas:before {
  color: var(--status-translated);
}

.pretranslated .status.fas:before {
  color: var(--status-pretranslated);
}

.warnings .status.fas:before {
  color: var(--status-warning);
}

.errors .status.fas:before {
  color: var(--status-error);
}

.unreviewed .status.fas:before {
  color: var(--status-unreviewed);
  content: '';
}

/* Reset HTML5 Search Input in Webkit */
input[type='search'] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

body,
select,
input,
textarea,
button {
  font-family:
    'Open Sans', 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana,
    sans-serif;
}

body {
  background: var(--black-3);
  color: var(--white-1);
}

#heading {
  border-bottom: 1px solid var(--main-border-1);
}

#heading,
#middle {
  background: var(--dark-grey-1);
}

#heading,
#main {
  padding: 40px 0;
}

button {
  font-size: 13px;
  outline: none;
}

/* Reset values for Persian (fa) to avoid collision with Font Awesome */
.language.fa {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

h2 {
  color: var(--light-grey-2);
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  padding-bottom: 2px;
}

h3 {
  color: var(--status-translated);
  font-size: 26px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -1px;
}

h3 .stress {
  color: var(--white-1);
}

h3 .small {
  font-size: 18px;
  letter-spacing: 0;
}

a:link,
a:visited {
  color: var(--light-grey-7);
  font-weight: 300;
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--status-translated);
  text-decoration: none;
}

sup a:link,
sup a:visited {
  color: var(--status-translated);
}

input[type='text'],
input[type='search'],
input[type='password'],
input[type='url'],
input[type='number'],
input[type='email'],
input[type='date'],
textarea {
  background: var(--input-background-1);
  border: 1px solid var(--main-border-1);
  border-radius: 3px;
  color: var(--input-color-1);
  padding: 4px 3px 3px;
  width: 205px;
  float: left;
}

textarea {
  float: none;
}

input:focus,
textarea:focus {
  outline: none; /* Remove WebKit Glow */
}

input:invalid,
textarea:invalid {
  box-shadow: none; /* Override Boilerplate Default */
}

label {
  font-weight: 300;
}

table {
  color: var(--light-grey-7);
  font-size: 13px;
  text-align: left;
  width: 100%;
}

tbody {
  font-weight: 300;
}

thead tr {
  border-bottom: 1px solid var(--main-border-1);
}

th {
  color: var(--light-grey-7);
  padding: 10px;
  text-transform: uppercase;
}

.table-sort th {
  cursor: pointer;
}

.table-sort th:hover {
  color: var(--white-1);
}

.table-sort th.no-sort {
  pointer-events: none;
}

.table-sort th i {
  margin-left: 5px;
  position: absolute;
}

.table-sort th.asc i:after,
.table-sort th.desc.inverted i:after {
  content: '';
  display: inline-block;
  margin-top: 5px;
}

.table-sort th.desc i:after,
.table-sort th.asc.inverted i:after {
  content: '';
  display: inline-block;
  margin-top: -5px;
}

td {
  padding: 15px 10px;
}

table.striped tr:nth-child(even) {
  background: var(--dark-grey-1);
}

tfoot tr {
  border-top: 1px solid var(--main-border-1);
}

tfoot td {
  padding: 10px 0px;
  text-align: right;
  font-style: italic;
}

tfoot td a {
  font-style: normal;
}

time {
  display: block;
}

.count {
  background: var(--button-background-2);
  border-radius: 3px;
  color: var(--light-grey-7);
  margin-left: 5px;
  padding: 0 5px;
}

.button {
  color: var(--white-1);
  cursor: pointer;
  display: inline-block;
  font-weight: 300;
  line-height: 16px;
  height: 17px;
  padding: 4px 4px 3px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.select {
  display: inline-block;
  font-size: 14px;
  margin-left: 0;
  padding-left: 10px;
  position: relative;
}

.select.hidden {
  display: none !important;
}

.select .menu {
  background: var(--popup-background-2);
  bottom: 50px;
  color: var(--light-grey-7);
  display: none;
  list-style: none;
  margin-left: 0;
  padding: 10px 12px;
  position: absolute;
  width: 150px;
  z-index: 20;
}

.select .menu.permanent {
  z-index: 19; /* Must be lower than for the (popup) .menu */
}

.project.select,
.locale.select,
.part.select,
.user.select {
  padding-left: 0;
  width: 100%;
}

.project.select .menu,
.locale.select .menu,
.part.select .menu,
.user.select .menu {
  bottom: auto;
  display: inline-block;
  position: relative;
  width: 100%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.project.select input[type='search'],
.locale.select input[type='search'],
.part.select input[type='search'] {
  border: none;
  width: 100%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.project.select .menu ul,
.locale.select .menu ul,
.part.select .menu ul {
  max-height: none;
}

.project.select .menu ul li {
  position: relative;
}

.project.select .menu ul li .name,
.part.select .menu ul li .name {
  overflow: hidden;
  padding-left: 1px; /* Insted of 0; because of overflow */
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 219px; /* Instead of 220px; because of padding */
}

.locale.select .new ~ input[type='search'] {
  padding-right: 50px;
}

.select .menu ul li {
  cursor: pointer;
}

.select .menu ul li span {
  float: left;
  text-align: left;
}

.select .menu ul li span a {
  display: block;
  height: 100%;
}

.select .menu ul li .chart-wrapper {
  display: inline-block;
  height: 17px;
  width: 180px;
}

.select .menu ul li .chart-wrapper .percent {
  float: right;
  font-size: 12px;
  margin-top: 1px;
  text-align: right;
}

.select .menu ul li .chart {
  display: table;
  height: 5px;
  margin-top: 6px;
  table-layout: fixed;
  width: 140px;
}

.select .menu ul li .chart span {
  display: table-cell;
  float: none;
  height: 100%;
}

.select .menu ul li .chart span.translated {
  background: var(--status-translated);
}

.select .menu ul li .chart span.pretranslated {
  background: var(--status-pretranslated);
}

.select .menu ul li .chart span.missing {
  background: var(--status-missing);
}

.select .menu ul li .latest {
  font-size: 12px;
  height: 15px;
  margin-right: 10px;
  overflow: hidden;
  padding-top: 2px;
  white-space: nowrap;
  width: 293px;
}

.select .menu ul li .latest time {
  display: inline-block;
}

.select .menu ul li .latest a {
  color: var(--status-translated);
  display: inline-block;
}

.selector {
  cursor: pointer;
}

.locale .selector,
.part .selector,
.project .selector {
  float: right;
}

.menu ul {
  list-style: none;
  max-height: 170px;
  overflow: auto;
  margin: 0;
  position: relative;
}

.menu li {
  color: var(--light-grey-7);
  font-weight: 300;
  padding: 2px 4px;
}

.menu li.hover {
  color: var(--white-1);
  background: var(--background-hover-1);
}

.menu:not(.permanent) li.hover {
  background: var(--background-hover-2);
}

.menu li.hover a {
  color: var(--white-1);
}

.menu li a:hover,
.menu li a:active {
  color: var(--white-1);
}

.menu li.horizontal-separator {
  border-top: 1px solid var(--main-border-1);
  height: 0;
  margin: 5px 0;
  padding: 0;
}

.menu li.no-match {
  cursor: default;
  display: none;
  font-size: inherit;
  list-style: none;
  text-align: left;
}

.menu li.no-match.hover {
  background: transparent;
  color: inherit;
  cursor: default;
  display: none;
}

.search-wrapper {
  border-bottom: 1px solid var(--main-border-1);
  margin-bottom: 10px;
  position: relative;
}

.search-wrapper .icon {
  color: var(--light-grey-7);
  font-size: 1.2em;
  position: absolute;
  left: 3px;
  top: 5px;
}

.search-wrapper input[type='search'] {
  background: transparent;
  border: none;
  float: none;
  font-weight: 300;
  padding-left: 25px;
  padding-right: 0;
  width: 200px;
}

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

.locale .code {
  color: var(--status-translated-alt);
  text-align: left;
}

body > header > .notification {
  background: var(--tooltip-background);
  color: var(--status-translated);
  cursor: pointer;
  font-style: italic;
  left: 0;
  margin: 0;
  position: fixed;
  top: -60px;
  width: 100%;
  z-index: 100;
}

body > header > .notification li {
  font-size: 14px;
  line-height: 60px;
  list-style: none;
  text-align: center;
}

body > header > .notification li.error {
  color: var(--status-error);
}

img.rounded {
  border-radius: 6px;
  border: 2px solid var(--icon-border-1);
}

#error {
  background: var(--dark-grey-1);
  bottom: 0;
  display: table;
  height: 100%;
  overflow: hidden;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.inner {
  display: table-cell;
  vertical-align: middle;
}

#addon-promotion {
  background: var(--status-error);
  border-bottom: 1px solid var(--dark-grey-1);
  height: 44px;
  position: fixed;
  top: -44px;
  transition: top 0.3s;
  width: 100%;
  z-index: 20;
}

body.addon-promotion-active #addon-promotion {
  top: 0;
}

#addon-promotion .container {
  align-items: center;
  display: flex;
  height: 100%;
}

#addon-promotion .dismiss {
  background: transparent;
  border: none;
  color: var(--white-1);
  font-size: 28px;
  padding: 0;
}

#addon-promotion .dismiss:hover {
  color: var(--black-3);
}

#addon-promotion .text {
  margin-left: 20px;
}

#addon-promotion .get {
  background: var(--black-3);
  border-radius: 3px;
  color: var(--white-1);
  font-weight: normal;
  margin-left: auto;
  padding: 7px 12px;
}

#addon-promotion .get:hover {
  background: var(--dark-grey-1);
}

body > header {
  background: var(--black-3);
  border-bottom: 1px solid var(--main-border-1);
  height: 60px;
  transition: margin-top 0.3s;
}

body.addon-promotion-active > header {
  margin-top: 44px;
}

header nav {
  text-align: left;
}

header nav .logo {
  display: inline-block;
  float: left;
  margin: 14px 15px 0 0;
}

header nav .links {
  display: inline-block;
  float: left;
  padding-top: 22px;
}

header nav .right {
  float: right;
}

header nav .right .sign-in-header {
  display: inline-block;
  font-size: 14px;
  float: left;
}

header nav .right .sign-in-header button {
  background: transparent;
  border: 1.5px solid var(--status-translated);
  border-radius: 2px;
  color: var(--white-1);
  font-size: 14px;
  font-weight: 300;
  height: 40px;
  line-height: 17px;
  padding: 10px 25px;
  text-align: center;
  margin: 10px 5px 0 0;
}

header nav .right .sign-in-header button:hover {
  background-color: var(--status-translated);
}

header .select .menu {
  bottom: auto;
  top: 60px;
}

header .right .select .menu {
  right: 0;
}

#notifications {
  float: left;
  height: 60px;
  margin-right: 3px;
}

#notifications .button {
  height: 100%;
  padding: 0;
}

#notifications .button .icon {
  color: var(--icon-border-1);
  font-size: 26px;
  margin-top: 17px;
}

#notifications .button .badge {
  background: var(--status-error);
  border: 3px solid var(--black-3);
  border-radius: 12px;
  color: var(--white-1);
  display: none;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  height: 14px;
  line-height: 16px;
  padding: 1px 6px 3px;
  position: absolute;
  right: -6px;
  text-align: center;
  top: 4px;
}

#notifications.unread .button .badge {
  display: block;
}

#notifications .menu,
#profile .menu {
  border: 1px solid var(--main-border-1);
  border-top: none;
}

#notifications .menu {
  padding: 0;
  width: 350px;
}

.notifications .menu ul,
#profile .menu ul,
#filter .menu ul {
  max-height: none;
}

#notifications .menu li.see-all {
  padding: 0;
  text-align: center;
}

#notifications .menu ul.notification-list {
  max-height: 280px;
}

.notifications .menu ul.notification-list li.notification-item {
  color: var(--light-grey-7);
  cursor: default;
  padding: 0;
}

.notifications
  .menu
  ul.notification-list
  li.notification-item[data-unread='true'] {
  background: var(--background-hover-1);
}

.notifications .menu li.notification-item span {
  color: var(--translation-color);
  float: none;
}

.notifications .menu li.notification-item a {
  color: var(--status-error);
  display: inline;
}

.notifications .menu li.notification-item .verb {
  color: var(--white-1);
}

.notifications .menu li.notification-item .description ul {
  list-style: disc;
  padding: 10px 0 10px 20px;
}

.notifications .menu li.notification-item .message {
  padding: 10px;
}

.notifications .menu li.notification-item .message.trim,
.notifications .menu li.notification-item .message.trim > p {
  color: var(--translation-secondary-color);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notifications .menu li.notification-item .message.trim a {
  color: var(--light-grey-7);
}

.notifications .menu li.notification-item.hover .message.trim,
.notifications .menu li.notification-item.hover .message.trim > p,
.notifications .menu li.notification-item.hover .message.trim a {
  color: var(--white-1);
}

.notifications .menu li.notification-item .message.trim p {
  padding: 0;
}

/* Users can include HTML tags in their messages */
.notifications .menu li.notification-item .message h1,
.notifications .menu li.notification-item .message h2,
.notifications .menu li.notification-item .message h3,
.notifications .menu li.notification-item .message h4,
.notifications .menu li.notification-item .message h5,
.notifications .menu li.notification-item .message h6 {
  color: var(--white-1);
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
}

.notifications .menu li.notification-item .message h1 {
  font-size: 18px;
}

.notifications .menu li.notification-item .message h2 {
  font-size: 16px;
}

.notifications .menu li.notification-item .message p {
  padding: 10px 0;
}

.notifications .menu li.notification-item .message ol {
  padding-left: 20px;
}

.notifications .menu li.notification-item .message ul {
  list-style: disc;
  padding: 10px 0 10px 20px;
}

/* End message styling */

.notifications .menu li.notification-item .timeago,
.notifications .menu li.notification-item .old-notification {
  color: var(--light-grey-2);
  font-size: 11px;
  font-weight: normal;
  margin-top: 8px;
  text-align: right;
  text-transform: uppercase;
}

#notifications .menu li.horizontal-separator {
  border-color: var(--main-border-1);
  margin: 0;
}

.notification-list li.horizontal-separator {
  border-color: var(--black-3);
  margin: 0;
}

.notifications .menu li.no {
  background: transparent;
  color: inherit;
  padding: 0 4px 14px;
  text-align: center;
}

.notifications .menu li.no .icon {
  color: var(--dark-grey-1);
  font-size: 92px;
  padding-bottom: 8px;
}

.notifications .menu li.no .title,
#profile .menu li.details .name {
  color: var(--white-1);
  font-size: 16px;
}

.notifications .menu li.no .description,
#profile .menu li.details .email {
  color: var(--light-grey-7);
  font-size: 12px;
}

.notifications .menu li.no .description {
  padding-top: 4px;
}

#notifications .menu .see-all > a,
.notifications .menu li > .item-content {
  display: block;
  padding: 10px;
}

.notifications:not(#notifications) .menu li > .item-content {
  font-size: 15px;
}

#profile {
  padding-left: 0;
}

#profile > .button {
  height: 100%;
  padding: 0;
}

#profile .button img,
#profile .button .menu-icon {
  margin: 6px 0 6px 5px;
}

#profile .button img {
  height: 44px;
  width: 44px;
}

#profile .button .menu-icon {
  border: 2px solid var(--main-border-1);
  border-radius: 100%;
  float: right;
  font-size: 20px;
  height: 20px;
  padding: 12px;
  text-align: center;
  width: 20px;
}

#profile .menu {
  line-height: 18px;
  width: 250px;
}

#profile .menu li {
  padding-bottom: 0;
  padding-top: 0;
}

#profile .menu li a {
  display: block;
  line-height: 22px;
}

#profile .menu li i.fas,
#profile .menu li i.fab {
  margin: 0 8px 0 -2px;
}

#profile .menu li.details {
  padding: 10px 4px;
  text-align: center;
}

#profile .menu li.appearance {
  cursor: default;
  padding: 4px 0;
}

#profile .menu li.appearance:hover {
  background: transparent;
  color: inherit;
}

#profile .menu li.appearance .help {
  padding-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
}

#profile .menu li.appearance button {
  font-size: 14px;
  width: 78px;
  border-radius: 3px;
  margin: 0;
}

#profile .menu li.appearance button:nth-child(2) {
  margin: 0 8px;
}

#profile .menu li.appearance button:last-child {
  border-left: 1px solid var(--main-border-1);
}

#profile .menu li.appearance button .icon {
  display: block;
  margin: 5px 0;
}

.links li {
  list-style: none;
  display: inline-block;
  margin-left: 20px;
}

nav .links li {
  margin: 0 15px;
  font-size: 14px;
  line-height: 14px;
}

.links li.hidden {
  display: none;
}

.links li a:link,
.links li a:visited {
  color: var(--white-1);
}

.links li a:hover,
.links li a:active {
  color: var(--status-translated);
}

.submenu.tabs {
  border-bottom: 1px solid var(--main-border-1);
  margin-top: -1px;
}

.submenu .links a:link,
.submenu .links a:visited {
  color: var(--light-grey-7);
  display: inline-block;
  padding: 6px;
  text-transform: uppercase;
}

.submenu .links li.active a,
.submenu .links a:hover,
.submenu .links a:active {
  color: var(--status-translated);
}

.submenu.tabs .links {
  margin-bottom: -1px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

.submenu.tabs .links li {
  border-color: transparent;
  border-style: solid solid none;
  border-width: 1px 1px 0;
  margin: 0;
}

.submenu.tabs .links li.active {
  border-color: var(--main-border-1);
  background: var(--black-3);
}

.submenu.tabs .links a {
  padding: 12px 20px;
  width: 100%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.submenu.tabs .links a:hover {
  color: var(--white-1);
}

.submenu.tabs .links li.active a {
  background-color: transparent;
  color: var(--white-1);
}

.submenu.tabs .links a .fas {
  margin-right: 4px;
}

noscript p {
  text-transform: uppercase;
}

#title,
#title a {
  color: var(--white-1);
  display: inline-block;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1.5em;
}

#error #title {
  line-height: 108px;
}

#error #title a {
  font-size: 108px;
  letter-spacing: -4px;
  line-height: 162px;
}

#error #box a {
  color: var(--status-translated);
  font-size: 108px;
}

#error #box p {
  font-size: 32px;
  line-height: 50px;
  font-weight: bold;
}

#subtitle,
#subtitle a {
  color: var(--status-translated);
  font-size: 32px;
  font-style: italic;
  text-transform: none;
}

#action {
  color: var(--light-grey-7);
  font-size: 14px;
  font-weight: 300;
  height: 40px;
  margin-top: 70px;
}

#action #link {
  color: var(--status-translated);
}

body > form,
.container {
  margin: 0 auto;
  width: 980px;
}

.unselectable * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.check-box .fas {
  margin-right: 6px;
}

.check-box .fas:before {
  color: var(--toggle-color-1);
  content: '';
  font-weight: normal;
}

.check-box.enabled .fas:before {
  color: var(--status-translated);
  content: '';
  font-weight: bold;
}

#helpers > section ul {
  list-style: none;
  margin: 0;
}

#helpers > section ul li {
  border-bottom: 1px solid var(--light-grey-1);
  padding-bottom: 20px;
  padding-top: 5px;
  text-align: right;
}

#helpers > section ul li > header {
  color: var(--light-grey-7);
  display: block;
  font-size: 11px;
  font-weight: 300;
  padding: 1px 0 5px;
  text-transform: uppercase;
}

#helpers > section ul li > header .stress {
  color: var(--status-translated-alt);
  padding-left: 3px;
  padding-right: 3px;
}

#helpers > section.machinery ul li > header .stress {
  padding-right: 0;
}

#helpers > section.machinery ul li > header sup {
  color: var(--status-translated-alt);
}

#helpers > section.machinery ul li > header .sources {
  display: inline-block;
}

#helpers > section.machinery ul li > header .sources li:before {
  content: '•';
  padding-right: 3px;
}

#helpers
  > section.machinery
  ul
  li
  > header
  .sources
  li[data-source='Microsoft']:only-child:before,
#helpers
  > section.machinery
  ul
  li
  > header
  .sources
  li[data-source='Google Translate']:only-child:before,
#helpers
  > section.machinery
  ul
  li
  > header
  .sources
  li[data-source='Microsoft Translator']:only-child:before,
#helpers
  > section.machinery
  ul
  li
  > header
  .sources
  li[data-source='Systran Translate']:only-child:before,
#helpers
  > section.machinery
  ul
  li
  > header
  .sources
  li[data-source='Caighdean']:only-child:before {
  content: '';
  padding-right: 0;
}

#helpers > section.machinery ul li > header .sources li {
  border: none;
  display: inline-block;
  list-style-type: disc;
  list-style-position: inside;
  padding: 0 0 0 3px;
}

#helpers > section ul li > p {
  min-height: 22px;
  text-align: left;
}

#helpers > section ul li > p.translation-clipboard,
#helpers > section ul li > p.translation-diff {
  display: none;
}

#helpers > section ul li > p ins,
#helpers > section ul li > p del {
  border-radius: 2px;
  white-space: pre-wrap;
}

#helpers > section ul li > p ins {
  background: var(--diff-ins-background);
  color: var(--diff-ins-color);
}

#helpers > section ul li > p del {
  background: var(--diff-del-background);
  color: var(--diff-del-color);
}

#helpers > section ul li > p ins mark,
#helpers > section ul li > p del mark {
  background: transparent;
  border-color: transparent;
  margin: 0;
}

#helpers > section ul li.disabled p {
  color: var(--light-grey-7);
  font-style: italic;
}

#helpers > section ul li p.original {
  color: var(--light-grey-7);
}

.tabs nav ul li {
  float: left;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
}

.tabs nav ul li a {
  display: inline-block;
  outline: none;
  padding: 10px 5px;
  width: 100%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tabs > section {
  display: none;
}

.no-results {
  color: var(--light-grey-7);
  font-style: italic;
  text-align: center;
}

#standalone-sign-in .clearfix {
  padding: 15px;
}

#standalone-sign-in label {
  font-size: 24px;
  font-weight: 300;
}

#standalone-sign-in input[type='text'],
#standalone-sign-in input[type='password'] {
  float: none;
  padding: 10px;
  margin: 10px;
}

#standalone-sign-in .controls .button {
  font-size: 14px;
}

#standalone-sign-in ul {
  list-style: none;
  margin: 0;
}

#standalone-sign-in ul.errorlist {
  color: var(--status-error);
}

.controls {
  margin-bottom: 20px;
  position: relative;
}

.controls .button {
  background: var(--button-background-1);
  border: none;
  border-radius: 3px;
  color: var(--light-grey-7);
  font-weight: 400;
  height: auto;
  padding: 6px;
  text-align: center;
  text-transform: uppercase;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.controls .button.small {
  width: 240px;
}

.controls .select.opened .button {
  border-radius: 0 0 2px 2px;
}

.controls button.button:hover,
.controls a.button:hover,
.controls li.active a.button,
.controls .button.active {
  background: var(--status-translated);
  color: var(--black-3);
}

.controls .button.active {
  width: 100px;
}

.controls .button.selector:hover {
  background: var(--dark-grey-1);
  color: inherit;
}

.controls > .search-wrapper {
  border: none;
  display: inline-block;
  height: 28px;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.controls > .search-wrapper.small {
  width: 240px;
}

.controls > .search-wrapper.big {
  width: 714px;
}

.controls > .search-wrapper .icon {
  left: 6px;
  top: 6px;
  z-index: 20;
}

.controls > .search-wrapper input {
  background: var(--dark-grey-1);
  border: 1px solid var(--main-border-1);
  color: var(--input-color-2);
  font-size: 13px;
  height: 28px;
  width: 100%;
  z-index: 10;
}

.priority .fa-star {
  color: var(--icon-background-1);
  float: left;
}

.priority .value .fa-star {
  color: var(--icon-background-2);
}

.priority .fa-star.active {
  color: var(--status-translated);
}

.container .info {
  font-weight: 300;
  line-height: 18px;
}

.container .info ul {
  list-style: inherit;
  margin-left: 1.8em;
}

.container .info p {
  padding: 12px 0;
}

.container .info a {
  color: var(--status-translated-alt);
}

.toggle-button {
  font-size: 0;
}

.toggle-button button {
  background: transparent;
  border: 1px solid var(--main-border-1);
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--toggle-color-1);
  float: none;
  font-size: 16px;
  font-weight: 100;
  padding: 4px;
  width: 147.5px;
}

.toggle-button button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.toggle-button button:last-child {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.toggle-button button:hover {
  color: var(--light-grey-6);
}

.toggle-button button.active {
  background: var(--button-background-1);
  border-color: var(--main-border-1);
  color: var(--light-grey-7);
  font-weight: 400;
}