/* 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: #272a2f;
  color: #ebebeb;
}

body,
html,
#root {
  height: 100%;
  width: 100%;
}

a:link,
a:visited {
  color: #aaaaaa;
  font-weight: 300;
  text-decoration: none;
}

a:hover,
a:active {
  color: #7bc876;
  text-decoration: none;
}

/* Bug 1351813
 * Increase font size for the Arabic language to make it readable.
*/
[data-script='Arabic'] {
  font-size: 1.1em;
}

[data-script='Arabic'] .placeable {
  font-size: 0.9em;
}
#app {
  display: flex;
  flex-direction: column;
  flex-flow: column;
  height: 100%;
}

#app > header {
  background: #272a2f;
  border-bottom: 1px solid #333941;
  box-sizing: border-box;
  height: 60px;
  min-width: 700px;
  position: relative;
}

#app > .main-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  overflow: auto;
}

#app > .main-content > .panel-content,
#app > .main-content > .panel-list {
  height: 100%;
  position: relative;
}

#app > .main-content > .panel-list {
  width: 25%;
}

#app > .main-content > .panel-content {
  border-left: 1px solid #5e6475;
  box-sizing: border-box;
  width: 75%;
}

/* NProgress: A nanoscopic progress bar. */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #7bc876;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #7bc876, 0 0 5px #7bc876;
  opacity: 1;
  transform: rotate(3deg) translate(0px, -4px);
}
.notification-panel {
  background: rgba(51, 57, 65, 0.9);
  cursor: pointer;
  font-size: 14px;
  font-style: italic;
  left: 0;
  line-height: 60px;
  list-style: none;
  margin: 0;
  position: fixed;
  text-align: center;
  top: -60px;
  width: 100%;
  z-index: 100;
  transition: 200ms;
}

.notification-panel .info,
.notification-panel .success {
  color: #7bc876;
}

.notification-panel .error {
  color: #f36;
}

/* Showing and hiding animations. */
.notification-panel.showing {
  top: 0;
}
.user-controls {
  float: right;
}
.user-notifications-menu {
  float: right;
  height: 60px;
  margin-right: 3px;
  position: relative;
}

.user-notifications-menu .selector {
  cursor: pointer;
  height: 100%;
  padding: 0;
}

.user-notifications-menu .selector .icon {
  color: #4d5967;
  font-size: 26px;
  margin-top: 17px;
}

.user-notifications-menu .selector .badge {
  background: #f36;
  border: 3px solid #272a2f;
  border-radius: 12px;
  color: #fff;
  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;
}

.user-notifications-menu .menu {
  background-color: #272a2f;
  border: 1px solid #333941;
  border-top: none;
  padding: 0;
  position: absolute;
  right: 0;
  top: 59px;
  width: 350px;
  z-index: 20;
}

.user-notifications-menu .menu .notification-list {
  list-style: none;
  margin: 0;
  max-height: 280px;
  overflow: auto;
}

.user-notifications-menu .menu li {
  color: #aaa;
  font-size: 14px;
  font-weight: 300;
}

.user-notifications-menu .menu li:hover {
  background: #3f4752;
}

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

.user-notifications-menu .menu li.no .icon {
  color: #333941;
  font-size: 92px;
  padding-bottom: 8px;
}

.user-notifications-menu .menu li.no .title {
  color: #ebebeb;
  font-size: 16px;
}

.user-notifications-menu .menu li.no .description {
  color: #aaaaaa;
  font-size: 12px;
  padding-top: 4px;
}

.user-notifications-menu .menu .see-all {
  border-top: 1px solid #333941;
}

.user-notifications-menu .menu .see-all a {
  display: block;
  font-size: 14px;
  padding: 10px;
  text-align: center;
}

.user-notifications-menu .menu .see-all a:hover {
  background: #3f4752;
  color: #ffffff;
}
.user-menu {
  float: right;
  height: 60px;
}

.user-menu .selector {
  cursor: pointer;
  height: 100%;
}

.user-menu .selector img,
.user-menu .selector .menu-icon,
.user-menu .menu li.details img {
  border: 2px solid #4d5967;
  border-radius: 6px;
}

.user-menu .selector img {
  height: 44px;
  width: 44px;
  margin: 6px 5px 6px 5px;
}

.user-menu .selector .menu-icon {
  font-size: 20px;
  height: 20px;
  width: 20px;
  margin: 6px 5px 6px 5px;
  padding: 12px;
  text-align: center;
}

.user-menu .menu {
  background-color: #272a2f;
  border: 1px solid #333941;
  border-right: none;
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  position: absolute;
  right: 0;
  top: 59px;
  width: 250px;
  z-index: 20;
}

.user-menu .menu li {
  color: #aaa;
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  padding: 0 4px;
}

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

.user-menu .menu li.details .name {
  color: #ebebeb;
  font-size: 16px;
}

.user-menu .menu li.details .email {
  color: #aaaaaa;
  font-size: 12px;
}

.user-menu .menu li a,
.user-menu .menu li button {
  display: block;
  line-height: 22px;
}

.user-menu li button {
  background: none;
  border: none;
  color: #aaa;
  font-weight: 300;
  padding: 0;
  text-align: left;
  width: 100%;
}

.user-menu .menu li i.fa,
.user-menu .menu li i.fab {
  margin: 0 8px 0 -2px;
}

.user-menu .menu li:hover {
  background: #3f4752;
}

.user-menu .menu li:hover,
.user-menu .menu li:hover a,
.user-menu .menu li:hover button,
.user-menu .menu li:active a {
  color: #fff;
}

.user-menu .menu .horizontal-separator {
  border-top: 1px solid #525a65;
  height: 0;
  margin: 5px 0;
  padding: 0;
}
.file-upload label {
  line-height: 22px;
  display: block;
}

.file-upload input[name='uploadfile'] {
  position: absolute;
  visibility: hidden;
  width: 0;
}
.user-notification {
  border-top: 1px solid #333941;
  cursor: default;
  padding: 0;
}

.user-notification:first-child {
  border-color: #272a2f;
}

.user-notification:first-child:hover {
  border-color: #333941;
}

.user-notification.unread {
  background: #3f4752;
}

.user-notification.read {
  animation-duration: 1s;
  animation-name: fadeout-background;
}

@keyframes fadeout-background {
  0% {
    background: #3f4752;
  }

  100% {
    background: #272a2f;
  }
}

.user-notification .item-content {
  display: block;
  padding: 10px;
}

.user-notification span {
  color: #ebebeb;
  float: none;
}

.user-notification a {
  color: #f36;
  display: inline;
}

.user-notification .verb {
  color: #ebebeb;
  padding: 0 3px;
}

.user-notification .description ul {
  list-style: inside;
  margin-left: 0;
  padding: 12px 0 0 4px;
}

.user-notification .message {
  padding: 10px;
}

.user-notification .message.trim,
.user-notification .message.trim p {
  pointer-events: none;
  color: #aaaaaa;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-notification .item-content:hover .message,
.user-notification .item-content:hover .message.trim p,
.user-notification .item-content:hover .message.trim a {
  color: #ebebeb;
}

.user-notification .message.trim a {
  color: #aaaaaa;
}

.user-notification .message.trim p {
  padding: 0;
}

/* Users can include HTML tags in their messages */
.user-notification .message h1,
.user-notification .message h2,
.user-notification .message h3,
.user-notification .message h4,
.user-notification .message h5,
.user-notification .message h6 {
  color: #ebebeb;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
}

.user-notification .message h1 {
  font-size: 18px;
}

.user-notification .message h2 {
  font-size: 16px;
}

.user-notification .message p {
  padding: 5px 0;
}

.user-notification .message ol {
  margin-left: 1.2em;
}

.user-notification .message ul {
  list-style: inside;
}
/* End message styling */

.user-notification .timeago {
  color: #888888;
  display: block;
  font-size: 11px;
  font-weight: normal;
  margin-top: 8px;
  text-align: right;
  text-transform: uppercase;
}
/*
* SpinKit
* https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
*/

.wave-loader {
  position: fixed;
  z-index: 14;
  display: table;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #3f4752;
}

.wave-loader .animation {
  margin: 20px auto;
  width: 100px;
  height: 60px;
  text-align: center;
  font-size: 20px;
}

.wave-loader .animation > div {
  display: inline-block;
  width: 12px;
  height: 100%;
  background-color: #7bc876;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.wave-loader .animation div:nth-child(2) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.wave-loader .animation div:nth-child(3) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.wave-loader .animation div:nth-child(4) {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.wave-loader .animation div:nth-child(5) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

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

/*
* Loading text
 */
.wave-loader .text {
  display: block;
  text-align: center;
  font-size: 1.5em;
  opacity: 0;
  animation: fadeInLoaderText 1s forwards;
  animation-delay: 3s;
}

@keyframes fadeInLoaderText {
  0% {
    display: None;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}
.skeleton-loader {
  animation: fading 1.5s infinite;
}

.skeleton-loader.entities {
  pointer-events: none;
  overflow: hidden;
  height: 100%;
}

.skeleton-loader.entities.scroll {
  height: auto;
}

.skeleton-loader p {
  height: 0.8125rem;
  background-color: #e2e2e2;
  padding-bottom: 3px;
}

.skeleton-loader .text-2 {
  width: 50%;
  display: inline-block;
}

@keyframes fading {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.1;
  }
}
.project-menu {
  font-weight: 100;
}

.project-menu .selector {
  border-radius: 2px;
  cursor: pointer;
  line-height: 24px;
  margin: 14px 6px;
  float: right;
  padding: 4px 6px;
}

.project-menu .selector.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.project-menu.closed .selector:hover {
  background: #333941;
}

.project-menu .selector .icon {
  color: #7bc876;
  padding-left: 7px;
}

.project-menu .menu {
  background-color: #272a2f;
  border: 1px solid #333941;
  border-top: none;
  color: #aaaaaa;
  line-height: 1.231em;
  list-style: none;
  padding: 10px 12px;
  position: absolute;
  top: 59px;
  width: 600px;
  z-index: 20;
}

.project-menu .menu .search-wrapper {
  margin-bottom: 10px;
  position: relative;
  font-size: 13px;
}

.project-menu .menu .search-wrapper .icon {
  color: #aaaaaa;
  font-size: 1.2em;
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 20;
}

.project-menu .menu .search-wrapper input[type='search'] {
  color: #ffffff;
  padding: 4px 3px 3px 25px;
  background: #333941;
  border: 1px solid #4d5967;
  border-radius: 3px;
  font-weight: 300;
  height: 28px;
  position: relative;
  width: 100%;
  z-index: 10;
}

/* Remove highlight in Chrome */
.project-menu .menu .search-wrapper input[type='search']:focus {
  outline: none;
}

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

.project-menu .menu ul {
  max-height: 318px;
  overflow: auto;
}

.project-menu .menu .static-links {
  border-top: 1px solid #5e6475;
  margin-top: 5px;
  padding-top: 5px;
}

.project-menu .menu .current a {
  color: #7bc876;
}

.project-menu .menu .header {
  border-bottom: 1px solid #5e6475;
  padding: 5px 4px;
  overflow: auto;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 5px;
}

.project-menu .menu .header .project {
  float: left;
}

.project-menu .menu .header .progress {
  float: right;
}

.project-menu .menu .header .icon {
  margin: 1px 5px;
}
.project-menu .menu li.no-results,
.project-menu .menu li a {
  display: block;
  padding: 2px 4px;
}

.project-menu .menu li a:hover {
  background: #3f4752;
  color: #fff;
}

.project-menu .menu li a .project {
  display: inline-block;
  max-width: 550px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-menu .menu .percent {
  color: #7bc876;
  float: right;
}
.resource-menu {
  font-weight: 100;
}

.resource-menu .selector {
  border-radius: 2px;
  cursor: pointer;
  line-height: 24px;
  margin: 14px 6px;
  float: right;
  padding: 4px 6px;
}

.resource-menu .selector.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.resource-menu.closed .selector:hover {
  background: #333941;
}

.resource-menu .selector .icon {
  color: #7bc876;
  padding-left: 7px;
}

.resource-menu .menu {
  background-color: #272a2f;
  border: 1px solid #333941;
  border-top: none;
  color: #aaaaaa;
  line-height: 1.231em;
  list-style: none;
  padding: 10px 12px;
  position: absolute;
  top: 59px;
  width: 600px;
  z-index: 20;
}

.resource-menu .menu .search-wrapper {
  margin-bottom: 10px;
  position: relative;
  font-size: 13px;
}

.resource-menu .menu .search-wrapper .icon {
  color: #aaaaaa;
  font-size: 1.2em;
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 20;
}

.resource-menu .menu .search-wrapper input[type='search'] {
  color: #ffffff;
  padding: 4px 3px 3px 25px;
  background: #333941;
  border: 1px solid #4d5967;
  border-radius: 3px;
  font-weight: 300;
  height: 28px;
  position: relative;
  width: 100%;
  z-index: 10;
}

/* Remove highlight in Chrome */
.resource-menu .menu .search-wrapper input[type='search']:focus {
  outline: none;
}

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

.resource-menu .menu ul {
  max-height: 318px;
  overflow: auto;
}

.resource-menu .menu .static-links {
  border-top: 1px solid #5e6475;
  margin-top: 5px;
  padding-top: 5px;
}

.resource-menu .menu .current a {
  color: #7bc876;
}

.resource-menu .menu .header {
  border-bottom: 1px solid #5e6475;
  padding: 5px 4px;
  overflow: auto;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 5px;
}

.resource-menu .menu .header .resource {
  float: left;
}

.resource-menu .menu .header .progress {
  float: right;
}

.resource-menu .menu .header .icon {
  margin: 1px 5px;
}
.resource-menu .menu .percent {
  color: #7bc876;
  float: right;
}
.resource-menu .menu li.no-results,
.resource-menu .menu li a {
  display: block;
  padding: 2px 4px;
}

.resource-menu .menu li a:hover {
  background: #3f4752;
  color: #fff;
}

.resource-menu .menu li a .path {
  display: inline-block;
  max-width: 550px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.new-contributor-tooltip {
  background: #272a2f;
  border: 1px solid #333941;
  border-radius: 10px;
  box-shadow: 0 0 20px #000b;
  box-sizing: border-box;
  margin: -20px auto;
  padding: 20px;
  position: absolute;
  right: -280px;
  width: 250px;
  z-index: 20;
}

.new-contributor-tooltip p {
  color: #aaa;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.new-contributor-tooltip p:not(:last-child) {
  padding-bottom: 10px;
}

.new-contributor-tooltip p.title {
  font-size: 24px;
  padding-bottom: 20px;
  text-align: center;
}

.new-contributor-tooltip p a {
  color: #f36;
}
.editor-menu {
  color: #fff;
  padding: 10px;
  position: relative;
}

.editor-menu .actions {
  float: right;
}

.editor-menu .actions button {
  background: transparent;
  border: none;
  color: #ebebeb;
  height: 40px;
  margin: 0 2px;
  padding: 10px 3px;
}

.editor-menu .actions button:hover {
  color: #7bc876;
}

.editor-menu .actions button .fa {
  margin-right: 4px;
}

.editor-menu .actions .action-approve,
.editor-menu .actions .action-save,
.editor-menu .actions .action-suggest {
  background: #7bc876;
  border-radius: 3px;
  color: #272a2f;
  font-weight: 600;
  margin-left: 10px;
  padding: 10px;
}

.editor-menu .actions .action-suggest {
  background: #4fc4f6;
}

.editor-menu .actions .action-approve:hover,
.editor-menu .actions .action-save:hover,
.editor-menu .actions .action-suggest:hover {
  color: #ebebeb;
}

.editor-menu .banner {
  font-style: italic;
  line-height: 40px;
}

.editor-menu .banner form {
  display: inline-block;
}

.editor-menu .banner button {
  background: none;
  border: none;
  color: #7bc876;
  font-style: inherit;
  padding: 0;
}
.tm-source {
  font-size: 11px;
  padding: 10px 0;
  border-top: 1px solid #5e6475;
  width: 100%;
  text-align: center;
  background: #4d5967;
  color: #ccc;
}

.tm-source .stress {
  color: #7bc876;
}
.editor-settings {
  float: left;
  font-size: 14px;
  line-height: 22px;
}

.editor-settings .selector {
  cursor: pointer;
  color: #aaa;
  font-size: 22px;
  padding: 9px 5px 9px 0;
}

.editor-settings .selector:hover {
  color: #7bc876;
}

.editor-settings .menu {
  background-color: #272a2f;
  bottom: auto;
  color: #aaa;
  list-style: none;
  margin: 0;
  max-height: 318px;
  overflow: auto;
  padding: 10px 12px;
  position: absolute;
  top: 60px;
  width: 185px;
  z-index: 20;
}

.editor-settings .menu li {
  color: #aaa;
  cursor: pointer;
  font-weight: 300;
  padding: 2px 4px;
}

.editor-settings .menu li:hover {
  background: #3f4752;
}

.editor-settings .menu li:hover,
.editor-settings .menu li:hover a,
.editor-settings .menu li:active a {
  color: #fff;
}

.editor-settings .menu .horizontal-separator {
  border-top: 1px solid #525a65;
  height: 0;
  margin: 5px 0;
  padding: 0;
}

.editor-settings .menu .check-box .fa {
  margin-right: 6px;
}

.editor-settings .menu .check-box .fa:before {
  color: #f36;
  content: '';
}

.editor-settings .menu .check-box.enabled .fa:before {
  color: #7bc876;
  content: '';
}
.user-signin {
  display: inline-block;
}

.user-signin button {
  background: transparent;
  border: 1.5px solid #7bc176;
  border-radius: 2px;
  color: white;
  font-size: 14px;
  font-weight: 300;
  height: 40px;
  line-height: 17px;
  padding: 10px 25px;
  margin: 10px 5px 0 0;
}

.user-signin button:hover {
  background-color: #7bc176;
}
.editor {
  background: rgb(39, 42, 47);
  border-bottom: 1px solid #5e6475;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 160px;
  position: relative;
}

.editor textarea {
  border: none;
  box-sizing: border-box;
  display: block;
  font-size: 14px;
  line-height: 22px;
  height: calc(100% - 60px);
  min-height: 100px;
  overflow: auto;
  padding: 10px;
  width: 100%;
  resize: vertical;
}

/* Remove highlight in Chrome */
.editor textarea:focus {
  outline: none;
}

.editor .plural-selector ~ textarea {
  min-height: auto;
}

.editor textarea[readonly] {
  background: #c7cacf;
  cursor: default;
}

.editor textarea[data-script='Arabic'] {
  font-size: 15px;
}
.failed-checks {
  background: #272a2f;
  border-top: 1px solid #5e6475;
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  line-height: 22px;
  min-height: 90px;
  padding: 10px;
  position: absolute;
  text-align: left;
  width: 100%;
  z-index: 10;
}

.failed-checks .close {
  background: none;
  border: none;
  color: #aaaaaa;
  float: right;
  font-size: 24px;
  font-weight: 100;
  line-height: 22px;
  margin-top: -3px;
  padding: 0;
}

.failed-checks .close:hover {
  color: #ffffff;
}

.failed-checks .title {
  color: #f36;
  font-size: 14px;
  font-weight: 300;
  padding-bottom: 5px;
}

.failed-checks ul {
  font-style: italic;
  list-style: none;
  margin: 0px;
  width: calc(100% - 140px);
}

.failed-checks ul li:before {
  content: '';
  font-family: 'Font Awesome 5 Free';
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  margin: 0px 8px;
  vertical-align: sub;
}

.failed-checks .warning {
  color: #aaaaaa;
}

.failed-checks .error:before {
  color: #f36;
}

.failed-checks .warning:before {
  color: #4d5967;
}

.failed-checks .anyway {
  background: #7bc876;
  border: none;
  border-radius: 3px;
  bottom: 10px;
  color: #272a2f;
  font-weight: 600;
  margin-left: 10px;
  padding: 10px;
  position: absolute;
  right: 10px;
}

.failed-checks .anyway.suggest {
  background: #4fc4f6;
}

.failed-checks .anyway:hover {
  color: #ebebeb;
}
.terms-list {
  line-height: 22px;
  list-style: none;
  margin-left: 0;
}
.keyboard-shortcuts {
  color: #aaaaaa;
  cursor: pointer;
  float: left;
}

.keyboard-shortcuts .selector {
  font-size: 22px;
  padding: 9px 5px;
}

.keyboard-shortcuts .overlay {
  background: #272a2f;
  border: 1px solid #333941;
  font-size: 13px;
  width: 400px;
  height: 435px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 20;
  margin: auto;
  padding: 10px 24px;
}

.keyboard-shortcuts .overlay h2 {
  font-size: 20px;
  font-weight: 300;
  padding-bottom: 30px;
  text-align: center;
}

.keyboard-shortcuts .overlay table {
  width: 100%;
}

.keyboard-shortcuts .overlay td {
  padding: 0;
}

.keyboard-shortcuts .overlay td:first-child {
  font-weight: 300;
  height: 35px;
  width: 60%;
}

.keyboard-shortcuts .overlay td:last-child {
  white-space: nowrap;
}

.keyboard-shortcuts .overlay span {
  background: #3f4752;
  border: 1px solid #5e6475;
  border-radius: 2px;
  font-weight: 300;
  margin: 0 4px;
  padding: 0 4px;
}
.comments-list .add-comment div.container {
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 6px;
}

.comments-list .add-comment .comment-editor {
  background-color: #333941;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  display: flex;
  flex-grow: 2;
  font-size: 11px;
  max-height: 144px;
  margin: auto;
  overflow: auto;
  padding: 7px;
  word-break: break-word;
}

/* Override Slate, to account for the padding in .comment-editor */
.comments-list .add-comment .comment-editor span[data-slate-placeholder] {
  max-width: calc(100% - 14px) !important;
}

.comments-list .add-comment .comment-editor .mention-element {
  color: #7bc876;
}

.comments-mention-list {
  top: -9999px;
  left: -9999px;
  position: absolute;
  z-index: 1;
  padding: 10px 12px;
  background-color: #272a2f;
  border: 1px solid #333941;
}

.comments-mention-list .mention {
  padding: 4px 4px 0;
  cursor: pointer;
}

.comments-mention-list .mention:hover,
.comments-mention-list .active-mention {
  background: #3f4752;
}

.comments-mention-list .mention .user-avatar {
  display: inline-block;
  vertical-align: middle;
}

.comments-mention-list .mention .user-avatar img {
  border-radius: 2px;
  border: 1px solid #5e6475;
  margin-right: 8px;
}

.comments-mention-list .mention .name {
  font-weight: 300;
}

.comments-list .add-comment .submit-button {
  background-color: #4d5967;
  border: solid 1px #4d5967;
  border-radius: 4px;
  color: #ccc;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 36px;
  width: 36px;
  margin-left: 6px;
  padding-left: 10px;
}

.comments-list .add-comment .submit-button:hover {
  color: #272a2f;
  background: #7bc876;
}
.translation-length {
  color: #aaaaaa;
  float: left;
  line-height: 22px;
  padding: 9px 5px;
}

.translation-length .countdown .overflow {
  color: #f36;
}
.comments-list {
  line-height: 22px;
  padding: 8px 0;
}

.comments-list .pinned-comments > * {
  padding: 0 8px;
}

.comments-list .pinned-comments .title {
  color: #aaa;
  font-size: 11px;
  font-weight: 100;
  margin-bottom: 6px;
}

.comments-list .pinned-comments ul {
  border-bottom: 1px solid #5e6475;
  margin-bottom: 8px;
}

.comments-list .all-comments {
  padding: 0 8px;
}

.comments-list .comment {
  display: flex;
  margin-left: 58px;
}

.comments-list .comment .user-avatar {
  padding-right: 8px;
}

.comments-list .comment .user-avatar img {
  border-radius: 4px;
  border: 2px solid #5e6475;
  width: 32px;
  height: 32px;
}

.comments-list .comment .container {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
}
mark.placeable {
  background: #4d5967;
  border: 1px solid #5e6475;
  border-radius: 2px;
  color: #cccccc;
  font-style: normal;
  font-weight: normal;
  margin: 0 1px;
}

mark.placeable [aria-hidden='true'] {
  user-select: none;
}
.editor .ftl {
  background: transparent;
  border: 0;
  color: #aaa;
  float: left;
  font-size: 18px;
  font-weight: bold;
  height: 40px;
  line-height: 0;
  padding: 10px 5px 10px 0;
  text-transform: uppercase;
}

.editor .ftl.active,
.editor .ftl:hover {
  color: #7bc876;
}
.comments-list ul .comment {
  padding-bottom: 10px;
}

.comments-list .comment a {
  color: #7bc876;
  font-weight: 400;
}

.comments-list
  .comment
  .container
  .content
  a[href^='/contributors/']:not(.comment-author) {
  background-color: #3f4752;
  padding: 0 2px;
  border-radius: 2px;
}

.comments-list .comment-author {
  margin-right: 4px;
}

.comments-list .comment .content {
  background-color: #4d5967;
  border: solid 1px #4d5967;
  border-radius: 4px;
  display: flex;
  font-size: 11px;
  padding: 6px;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
}

.comments-list .comment .content p,
.comments-list .comment .content span {
  color: #cccccc;
}

.comments-list .comment .content p:first-child {
  display: inline;
}

.comments-list .comment .info {
  color: #aaaaaa;
  font-size: 11px;
  font-weight: 300;
  margin-top: -2px;
  padding-left: 8px;
}

.comments-list .comment .info .pin-button:before {
  content: '•';
  padding: 0 3px 0 3px;
}

.comments-list .comment .info .pin-button {
  background-color: transparent;
  border: none;
  color: #aaaaaa;
  font-size: 11px;
  font-weight: 300;
  padding: 0;
}

.comments-list .comment .info .pin-button:hover {
  color: #7bc876;
}

.comments-list .comment .comment-pin {
  color: #7bc876;
  font-size: 9px;
  position: absolute;
  right: 4px;
  top: -10px;
}

.comments-list .comment .comment-pin .fa {
  padding-right: 2px;
}
.terms-list .term {
  border-bottom: 1px solid #5e6475;
  cursor: pointer;
  padding: 10px;
}

.terms-list .term.cannot-copy {
  pointer-events: none;
}

.terms-list .term:not(.cannot-copy):hover {
  background: #333941;
  border-color: #5e6475;
}

.terms-list .term .text {
  color: #aaa;
}

.terms-list .term .part-of-speech {
  color: #aaa;
  font-size: 11px;
  font-weight: 300;
  padding-left: 3px;
  text-transform: uppercase;
}

.terms-list .term .part-of-speech::before {
  content: '•';
  padding-right: 3px;
}

.terms-list .term .translate {
  color: #7bc876;
  float: right;
  font-size: 11px;
  font-weight: 300;
  pointer-events: auto;
  text-transform: uppercase;
}

.terms-list .term .translation {
  color: #ebebeb;
}

.terms-list .term .details {
  color: #aaa;
  font-style: italic;
  padding: 5px 0 0 15px;
}

.terms-list .term .usage .title {
  color: #7bc876;
  font-size: 11px;
  margin-right: 3px;
}
.batch-actions {
  height: 100%;
  line-height: 22px;
}

.batch-actions .topbar {
  background: #4d5967;
  border-bottom: 1px solid #5e6475;
  padding: 12px 10px 13px;
}

.batch-actions .topbar .selecting {
  color: #cccccc;
  float: right;
  margin-top: 2px;
}

.batch-actions .topbar button {
  background: none;
  border: none;
  color: #cccccc;
  font-weight: 300;
  padding: 0;
}

.batch-actions .topbar button:hover {
  color: #7bc876;
}

.batch-actions .topbar button.select-all {
  float: left;
}

.batch-actions .topbar button.selected-count {
  float: right;
}

.batch-actions .topbar button.selected-count .stress {
  color: #7bc876;
}

.batch-actions .topbar button .fa {
  padding-right: 5px;
}

.batch-actions .topbar .selected-count .fa-times {
  display: inline;
}

.batch-actions .actions-panel {
  overflow: auto;
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
}

.batch-actions .actions-panel div {
  margin: 0 auto;
  min-width: 300px;
  padding: 20px;
  width: 50%;
}

.batch-actions .actions-panel h2 {
  color: #cccccc;
  font-size: 14px;
  font-weight: 300;
  padding-bottom: 2px;
}

.batch-actions .actions-panel .intro p {
  color: #aaaaaa;
  font-style: italic;
}

.batch-actions .actions-panel .intro p .stress {
  color: #f36;
}

.batch-actions .actions-panel button,
.batch-actions .actions-panel input {
  display: block;
  width: 100%;
}

.batch-actions .actions-panel button {
  background: #7bc876;
  border: none;
  border-radius: 3px;
  color: #272a2f;
  font-weight: 600;
  margin-top: 10px;
  padding: 15px 5px;
  position: relative;
}

.batch-actions .actions-panel button .fa {
  position: absolute;
  right: 10px;
  top: 12px;
  opacity: 0.5;
}

.batch-actions .actions-panel button.reject-all {
  background: #f36;
}

.batch-actions .actions-panel input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #5e6475;
  color: #ffffff;
  float: none;
  margin-bottom: 10px;
  padding: 15px 0 5px;
}

/* Remove highlight in Chrome */
.batch-actions .actions-panel input:focus {
  outline: none;
}

/* Remove cancel button in Chrome */
.batch-actions .actions-panel input::-webkit-search-cancel-button {
  display: none;
}

/* Style placeholder color in Chrome */
.batch-actions .actions-panel input::-webkit-input-placeholder {
  color: #aaaaaa;
}
.translation p ins,
.translation p del {
  border-radius: 2px;
  white-space: pre-wrap;
}

.translation p ins {
  background: #4b6259;
  color: #9cd699;
}

.translation p del {
  background: #674b54;
  color: #fe8f8f;
}

.translation p ins mark,
.translation p del mark {
  background: transparent;
  border-color: transparent;
  margin: 0;
}
#___reactour .interactive-tour {
  color: #2d2323;
  margin: -15px;
}

.interactive-tour h3 {
  font-size: 24px;
  font-weight: normal;
  line-height: 1.3em;
}

.interactive-tour p {
  font-size: 15px;
  line-height: 1.4em;
  padding: 10px 0 0 0;
}

.interactive-tour p a {
  color: #f36;
}
.navigation {
  float: left;
  font-size: 14px;
  line-height: 60px;
}

.navigation > ul > li {
  float: left;
}

.navigation > ul > li + li::before {
  color: #4d5967;
  content: '/';
  font-size: 28px;
  font-weight: 100;
  vertical-align: bottom;
}

.navigation > ul > li > a {
  color: #ebebeb;
  font-weight: 300;
  padding: 0 12px;
}

.navigation > ul > li > a:hover {
  color: #7bc876;
}

.navigation img {
  margin-top: -2px;
  vertical-align: middle;
}

.navigation .locale-code {
  color: #7bc876;
  padding-left: 7px;
}
.project-info {
  float: left;
  font-size: 14px;
}

.project-info .button {
  cursor: pointer;
  font-size: 1.4em;
  font-weight: 900;
  line-height: 18px;
  height: 18px;
  padding: 19px 7px 23px;
}

.project-info .panel {
  background: #272a2f;
  bottom: auto;
  color: #aaa;
  padding: 10px 12px;
  position: absolute;
  top: 59px;
  width: 360px;
  z-index: 20;
}

.project-info .panel h2 {
  color: #888888;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 15px;
  padding-bottom: 2px;
}

.project-info .panel p {
  font-weight: 300;
}

.project-info .panel a {
  color: #7bc876;
}
.search-box {
  margin: 9px 5px 11px;
  position: static;
}

.search-box input[type='search'] {
  background: #333941;
  border: none;
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 23px;
  padding: 5px 33px 5px 37px;
  width: 100%;
}

/* Remove highlight in Chrome */
.search-box input[type='search']:focus {
  outline: none;
}

/* Remove cancel button in Chrome */
.search-box input[type='search']::-webkit-search-cancel-button {
  display: none;
}

/* Style placeholder color in Chrome */
.search-box input[type='search']::-webkit-input-placeholder {
  color: #aaaaaa;
}

.search-box > label {
  color: #aaaaaa;
  cursor: text;
  font-size: 17px;
  left: auto;
  position: absolute;
  right: 16px;
  top: 16px;
}

.search-box .status.fa {
  position: absolute;
  left: 16px;
  top: 9px;
}

.search-box .all .status {
  left: 15px;
  top: 9px;
}

.search-box .status.fa::before {
  color: #aaaaaa;
  content: '';
}

.search-box .all .status::before {
  content: '';
  font-size: 16px;
}

.search-box .translated .status:before {
  color: #7bc876;
}

.search-box .pretranslated .status:before {
  color: #c0ff00;
}

.search-box .warnings .status:before {
  color: #ffa10f;
}

.search-box .errors .status:before {
  color: #f36;
}

.search-box .missing .status:before {
  color: #5f7285;
}

.search-box .unreviewed .status:before {
  color: #4fc4f6;
  content: '';
  font-size: 18px;
}

.search-box .unreviewed.selected .status:before,
.search-box .unreviewed:not(.visibility-switch) .status:hover:before {
  font-size: 16px;
}

.search-box .list .status:before {
  content: '\f022';
}

.search-box .unchanged .status:before {
  content: '';
}

.search-box .empty .status:before {
  content: '\f111';
  font-weight: 100;
}

.search-box .fuzzy .status:before {
  content: '\f059';
}

.search-box .menu .empty.selected .status:before,
.search-box .menu .empty .status:hover:before {
  font-weight: 900;
}

.search-box .rejected .status:before {
  content: '';
}

.search-box .missing-without-unreviewed .status:before {
  content: '\f0eb';
  font-size: 18px;
  margin-left: 1px;
}

.filters-panel .menu .missing-without-unreviewed.selected .status::before,
.filters-panel .menu .missing-without-unreviewed .status:hover:before {
  font-size: 16px;
  margin-left: 0;
}

.search-box .tag .status:before {
  content: '';
}

.search-box .time-range .status:before {
  content: '';
}

.search-box .author .status:before {
  content: '';
}
.filters-panel {
  display: inline-block;
  float: left;
  font-size: 14px;
  margin-left: 0;
  padding-left: 0;
  position: static;
  text-align: left;
}

.filters-panel .visibility-switch {
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: 300;
  height: 43px;
  left: 0;
  line-height: 16px;
  padding: 0;
  position: absolute;
  width: 43px;
}

.filters-panel .visibility-switch .status.fa {
  font-size: 16px;
}

.filters-panel .visibility-switch.unreviewed .status.fa {
  top: 7px;
}

.filters-panel .visibility-switch:hover .status:before {
  color: #ffffff;
}

.filters-panel .menu {
  background: #272a2f;
  bottom: auto;
  box-sizing: border-box;
  color: #aaaaaa;
  display: block;
  left: 5px;
  list-style: none;
  margin-left: 0;
  max-height: calc(100% - 44px);
  overflow-y: auto;
  padding: 0;
  position: absolute;
  top: 44px;
  width: 350px;
  z-index: 20;
}

.filters-panel .menu ul {
  margin: 10px 12px;
  max-height: none;
  list-style: none;
  overflow: auto;
  position: relative;
}

.filters-panel .menu li {
  color: #aaaaaa;
  cursor: pointer;
  font-weight: 300;
  padding: 2px 4px;
}

.filters-panel .menu li:hover {
  color: #ffffff;
  background-color: #3f4752;
}

.filters-panel .menu li .status {
  font-size: 16px;
  margin: -3px -13px -3px -16px;
  padding: 3px 13px 3px 16px;
  left: 4px;
  top: 4px;
}

.filters-panel .menu li.all .status {
  left: 3px;
  top: 5px;
}

.filters-panel .menu li.unchanged:not(.selected) .status {
  left: 5px;
}

.filters-panel .menu li.unreviewed:not(.selected) .status:hover,
.filters-panel .menu li.unchanged:not(.selected) .status:hover {
  left: 4px;
}

.filters-panel .menu li.horizontal-separator {
  background: transparent;
  border-top: none;
  color: #7bc876;
  cursor: default;
  font-size: 13px;
  height: auto;
  margin: 5px 0;
  padding: 0;
  padding-top: 20px;
}

.filters-panel .menu li.horizontal-separator:first-child {
  padding-top: 0;
}

.filters-panel .menu li:not(.horizontal-separator) {
  padding: 4px 0 4px 30px;
  position: relative;
}

.filters-panel .menu li .count,
.filters-panel .menu li .priority {
  margin-left: 5px;
  padding: 0 5px;
  position: absolute;
}

.filters-panel .menu li .count {
  background: #3f4752;
  border-radius: 3px;
  color: #cccccc;
  right: 4px;
  top: 4px;
}

.filters-panel .menu li:hover .count {
  background: #4d5967;
  color: #cccccc;
}

.filters-panel .menu li .priority {
  right: 0;
  top: 6px;
}

.filters-panel .menu li .priority .fa-star {
  color: #637283;
  float: left;
}

.filters-panel .menu li .priority .fa-star.active {
  color: #7bc876;
}

.filters-panel
  .menu
  li:not(.selected):not(.all):not(.editing)
  .status:hover:before {
  content: '';
}

.filters-panel .menu li.selected .status:before {
  content: '';
}

.filters-panel .menu li.author {
  height: 48px;
  padding-left: 4px;
  white-space: nowrap;
}

.filters-panel .menu li.author figure {
  height: 100%;
}

.filters-panel .menu li.author img {
  border-radius: 6px;
  border: 2px solid #4d5967;
  vertical-align: top;
}

.filters-panel .menu li.author figcaption {
  display: inline-block;
  padding: 2px 0 2px 56px;
}

.filters-panel .menu li.author .name {
  color: #ffffff;
  font-size: 16px;
  padding-bottom: 4px;
}

.filters-panel .menu li.author .role {
  color: #aaaaaa;
}

.filters-panel .menu li.author .count {
  top: 8px;
}

.filters-panel .menu li.author .sel {
  position: absolute;
}

.filters-panel .menu li.author .status {
  box-sizing: border-box;
  display: none;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 16px 0 0;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1;
}

.filters-panel .menu li.author .status:before {
  color: #aaaaaa;
}

.filters-panel .menu li.author.selected .status,
.filters-panel .menu li.author .sel:hover .status {
  display: block;
}

.filters-panel .menu li.author.selected img,
.filters-panel .menu li.author .sel:hover img {
  opacity: 0.3;
}

.filters-panel .toolbar {
  position: sticky;
  bottom: 0;
  background: #111111;
  border-top: 1px solid #5e6475;
  box-sizing: border-box;
  line-height: 23px;
  padding: 10px 12px;
  width: 100%;
}

.filters-panel .toolbar button {
  background: none;
  border: none;
  color: #aaa;
  font-weight: 300;
}

.filters-panel .toolbar button .fa {
  padding-right: 4px;
}

.filters-panel .toolbar .clear-selection {
  float: left;
}

.filters-panel .toolbar .apply-selected {
  float: right;
  text-align: right;
}

.filters-panel .toolbar .clear-selection:hover,
.filters-panel .toolbar .apply-selected:hover,
.filters-panel .toolbar .apply-selected .applied-count {
  color: #7bc876;
}
.filters-panel .menu li.for-time-range button {
  background: transparent;
  border: none;
  color: #aaaaaa;
  float: right;
  font-weight: 300;
  margin: -3px 4px 0 0;
  padding: 1px 0;
}

.filters-panel .menu .for-time-range button.save-range {
  color: #7bc876;
}

.filters-panel .menu li.for-time-range button:hover {
  color: #7bc876;
}

.filters-panel .menu li.for-time-range button .fa {
  padding-right: 5px;
}

.filters-panel .menu li:not(.horizontal-separator).time-range {
  padding: 4px 0;
}

.filters-panel .menu li.time-range.editing {
  cursor: auto;
}

.filters-panel .menu li.time-range.editing:hover {
  background: transparent;
}

.filters-panel .menu li.time-range label {
  color: #ffffff;
  float: left;
  font-size: 13px;
}

.filters-panel .menu li.time-range label.from {
  margin-left: 30px;
}

.filters-panel .menu li.time-range label.to {
  float: right;
  margin-right: 4px;
}

.filters-panel .menu li.time-range input {
  background: transparent;
  border: 1px solid transparent;
  box-sizing: border-box;
  color: #aaaaaa;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  height: 17px;
  margin-left: 5px;
  outline: none;
  vertical-align: baseline;
  width: 109px;
}

.filters-panel .menu li.time-range.editing input {
  border-color: #525a65;
  cursor: auto;
}

.filters-panel .menu li.time-range input[disabled] {
  pointer-events: none;
}

.filters-panel .menu li.time-range input.error {
  color: #f36;
}

.filters-panel .menu li.time-range .to input {
  text-align: right;
}

.filters-panel .menu li.time-range .chart {
  height: 120px;
  margin: 0 auto;
  width: 306px;
}
.entity {
  color: white;
  cursor: pointer;
  line-height: 2rem;
  padding: 10px 25px 10px 43px;
  position: relative;
  vertical-align: baseline;
  margin: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}

.entity.checked,
.entity.selected,
.entity.sibling:hover,
.entity:hover {
  background-color: #333941;
}

.entity > div {
  line-height: 20px;
}

.entity mark.search {
  color: #ffa10f;
  font-weight: normal;
  font-style: inherit;
  background: #676054;
  border-radius: 2px;
}

.entity .source-string,
.entity .translation-string {
  display: inline-block;
  margin: 0;
  padding-bottom: 3px;
  width: 100%;
  vertical-align: top;
  word-wrap: break-word;
}

.entity .translation-string {
  color: #aaaaaa;
  min-height: 20px;
  text-align: start;
}

.entity .translation-string[data-script='Latin'],
.entity .translation-string[data-script='Greek'],
.entity .translation-string[data-script='Cyrillic'],
.entity .translation-string[data-script='Vietnamese'] {
  font-style: italic;
}

/* Bug 1353135
 * Use a different font for Serbian and Macedonian because of a lack of
 * support in Open Sans.
 */
.entity .translation-string[lang='mk'],
.entity .translation-string[lang='sr'] {
  font-family: 'Ubuntu Regular';
}

/* Make selection area bigger and fit the entire row for easier use */
.entity > .status {
  margin: -13px -13px -13px -16px;
  padding: 13px 13px 13px 16px;
  font-size: 16px;
}

.entity .status.fa {
  left: 16px;
  top: 13px;
  position: absolute;
}

.entity .status:before {
  color: #5f7285;
  content: '';
}

.entity.batch-editable .status:hover:before {
  content: '';
}

.entity.batch-editable.checked > .status:before {
  content: '';
}

.entity.approved .status:before {
  color: #7bc876;
}

.entity.pretranslated .status:before {
  color: #c0ff00;
}

.entity.errors .status:before {
  color: #f36;
}

.entity.warnings .status:before {
  color: #ffa10f;
}

.entity.sibling {
  background-color: #4d5967;
}

.entity .sibling-entities-icon {
  color: #aaa;
  left: 17px;
  top: 39px;
  position: absolute;
  margin: 0 -13px -13px -17px;
  padding: 0 13px 13px 17px;
  font-size: 14px;
}

.entity .sibling-entities-icon:hover {
  color: #7bc876;
}
.entities {
  background-color: #3f4752;
  height: calc(100% - 53px);
  overflow-y: auto;
  position: relative;
  width: 100%;
}

.entities.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.entities ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.entities > div {
  height: 100%;
}

.entities .no-results {
  color: #ffffff;
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -1px;
  padding-top: 60px;
  text-align: center;
}

.entities .no-results div {
  color: #7bc876;
  display: block;
  font-size: 128px;
  margin-bottom: 20px;
}
.entity-details {
  background: #3f4752;
  display: flex;
  height: 100%;
}

.entity-details > section {
  height: 100%;
}

.entity-details .main-column {
  display: flex;
  flex-direction: column;
  width: 66.67%;
}

.entity-details .third-column {
  width: 33.33%;
  border-left: 1px solid #5e6475;
  box-sizing: border-box;
}
.entity-navigation {
  background: #4d5967;
  border-bottom: 1px solid #5e6475;
  padding: 12px 10px 13px;
}

.entity-navigation button {
  background: none;
  border: none;
  color: #cccccc;
  float: right;
  font-weight: 300;
  padding: 0;
}

.entity-navigation button.link {
  float: left;
}

.entity-navigation button.previous {
  margin-right: 30px;
}

.entity-navigation button:hover {
  color: #7bc876;
}

.entity-navigation button:disabled {
  cursor: default;
  opacity: 0.4;
  pointer-events: none;
}

.entity-navigation button .fa {
  padding-right: 5px;
}
.metadata {
  background-color: #3f4752;
  color: #aaa;
  flex-shrink: 0;
  font-size: 12px;
  font-style: italic;
  height: 20%;
  min-height: 100px;
  line-height: 22px;
  overflow: auto;
  padding: 10px;
}

.metadata h2 {
  font-style: normal;
  font-size: 11px;
  font-weight: 300;
  line-height: 11px;
  margin-top: 6px;
  padding-bottom: 2px;
}

.metadata .title {
  color: #888;
}

.metadata div a {
  color: #7bc876;
  text-decoration: none;
}

.metadata .comment .content p {
  display: inline;
}

.metadata div .divider {
  font-style: normal;
  font-weight: 100;
  margin: 0 3px;
}

.metadata .original {
  color: white;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  margin-top: -2px; /* Align with the source string comment button */
  padding-bottom: 6px;
  text-align: start;
  white-space: pre-wrap;
}

.metadata .original .placeable {
  cursor: pointer;
}

.metadata .original .term {
  background: inherit;
  border-bottom: 1px solid #7bc876;
  color: inherit;
  cursor: pointer;
  font-weight: normal;
  font-style: inherit;
}

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

.metadata button {
  background: none;
  border: none;
  color: #7bc876;
  font-style: italic;
  padding: 0 0 0 2px;
}

.metadata .resource-comment {
  display: flex;
}

.metadata .resource-comment .comment {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata .resource-comment .comment.expanded {
  white-space: normal;
}

.metadata .resource-comment button {
  white-space: nowrap;
}
.screenshots {
  float: right;
  text-align: right;
  width: 150px;
}

.screenshots img {
  border: 1px solid #5e6475;
  cursor: zoom-in;
  max-height: 100px;
  max-width: 150px;
}

.screenshots img:hover {
  opacity: 0.5;
}

.lightbox {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.lightbox img {
  max-height: 90%;
  max-width: 90%;
}
.metadata .source-string-comment .context-issue-button {
  background: #333941;
  border: 1px solid #3f4752;
  border-radius: 4px;
  color: #ccc;
  float: right;
  font-size: 11px;
  font-style: normal;
  font-weight: 100;
  margin: -1px -1px -1px 4px; /* Compensate for invisible border in default state */
  padding: 2px 4px;
}

.metadata .source-string-comment .context-issue-button:hover {
  border-color: #637283;
}
.progress-chart {
  float: left;
  margin: 8px 5px 4px 5px;
  position: relative;
}

.progress-chart .selector {
  cursor: pointer;
}

.progress-chart .percent {
  font-weight: bold;
  left: 0;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 8px;
  width: 100%;
}

.progress-chart .percent.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.progress-chart .percent:after {
  content: '%';
  color: #888888;
  display: block;
  font-size: 10px;
  font-weight: 300;
  line-height: 3px;
}

.progress-chart .menu {
  background: #272a2f;
  left: 50%;
  line-height: 18px;
  margin-left: -200px; /* Must be half the width */
  padding: 0;
  position: absolute;
  text-align: center;
  top: 48px;
  width: 400px;
  z-index: 20;
}

.progress-chart .menu .main {
  padding: 10px 12px;
}

.progress-chart .menu header {
  margin-bottom: 10px;
}

.progress-chart .menu header h2 {
  color: #888888;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 5px;
  padding: 4px;
}

.progress-chart .menu header h2.small {
  font-size: 14px;
}

.progress-chart .menu header h2 .value {
  color: #ffffff;
  font-size: 28px;
  padding: 0 5px;
}

.progress-chart .menu header h2.small .value {
  font-size: 20px;
}

.progress-chart .menu .percent {
  color: #ffffff;
  font-size: 90px;
  line-height: 100px;
  top: 140px;
}

.progress-chart .menu .percent:after {
  font-size: 30px;
  line-height: 15px;
}

.progress-chart .menu .details div {
  border-top: 5px solid;
  color: #aaaaaa;
  display: inline-block;
  margin-right: 1px;
  width: 79px;
}

.progress-chart .menu .details div:last-child {
  margin-right: 0;
  width: 80px;
}

.progress-chart .menu .details div.approved {
  border-color: #7bc876;
}

.progress-chart .menu .details div.pretranslated {
  border-color: #c0ff00;
}

.progress-chart .menu .details div.warnings {
  border-color: #ffa10f;
}

.progress-chart .menu .details div.errors {
  border-color: #f36;
}

.progress-chart .menu .details div.missing {
  border-color: #5f7285;
}

.progress-chart .menu .details div .title {
  font-size: 10px;
}

.progress-chart .menu .details div .value {
  color: #ffffff;
  font-size: 22px;
  font-weight: 300;
  padding: 5px 0 10px;
}
.third-column .top {
  border-bottom: 1px solid #5e6475;
  box-sizing: border-box;
  height: calc(40% + 21px);
  min-height: 200px;
}

.third-column .bottom {
  box-sizing: border-box;
  height: calc(60% - 21px);
}

/* Styling the react-tabs library */
.react-tabs {
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
}

.react-tabs__tab-list {
  display: table;
  table-layout: fixed;
  margin: 0;
  width: 100%;
}

.react-tabs__tab {
  background: #4d5967;
  border-bottom: 1px solid #5e6475;
  border-right: 1px solid #5e6475;
  box-sizing: border-box;
  color: #cccccc;
  cursor: pointer;
  display: table-cell;
  font-weight: 300;
  height: 44px;
  line-height: 18px;
  list-style: none;
  padding: 12px 5px 13px;
  text-align: center;
}

.react-tabs__tab:last-child {
  border-right: none;
}

.react-tabs__tab--selected {
  background: #3f4752;
  border-bottom: none;
}

.react-tabs__tab-panel {
  display: none;
  height: calc(100% - 44px);
  overflow-y: auto;
}

.react-tabs__tab-panel--selected {
  display: block;
}

/* Other tools styles */
.react-tabs span.count {
  background: #3f4752;
  border-radius: 3px;
  color: #cccccc;
  font-weight: 300;
  margin-left: 3px;
  padding: 0 5px;
}

.react-tabs .react-tabs__tab--selected span.count {
  background: #4d5967;
}

.react-tabs span.count .preferred,
.react-tabs span.count .pinned {
  color: #7bc876;
}
.addon-promotion + header {
  margin-top: 44px;
}

.addon-promotion {
  background: #272a2f;
  border-bottom: 1px solid #333941;
  height: 44px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}

.addon-promotion .container {
  align-items: center;
  background: #ff3366cc;
  display: flex;
  height: 100%;
  padding: 0 10px;
}

.addon-promotion .dismiss {
  background: transparent;
  border: none;
  color: #ebebeb;
  font-size: 28px;
  padding: 0;
}

.addon-promotion .dismiss:hover {
  color: #272a2f;
}

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

.addon-promotion .get {
  background: #272a2f;
  border-radius: 3px;
  color: #ebebeb;
  font-weight: normal;
  margin-left: auto;
  padding: 7px 12px;
}

.addon-promotion .get:hover {
  background: #333941;
}
.progress-chart canvas {
  border-radius: 100%;
}

.progress-chart:hover .selector canvas {
  background: #3f4752;
}

.progress-chart .menu canvas {
  margin: 10px auto;
}
.history {
  line-height: 22px;
  overflow: hidden;
}

.history ul {
  height: 100%;
  list-style: none;
  margin: 0;
  overflow: auto;
  padding: 0;
}

.history p {
  min-height: 22px;
}

.history > p {
  color: #aaa;
  font-style: italic;
  padding: 15px 10px;
}
.plural-selector ul {
  display: table;
  line-height: 22px;
  table-layout: fixed;
  width: 100%;
}

.plural-selector ul li {
  background: #4d5967;
  border: 1px solid #5e6475;
  border-bottom: none;
  border-left: none;
  display: table-cell;
  text-align: center;
}

.plural-selector ul li.active,
.plural-selector ul li:hover {
  background: #3f4752;
}

.plural-selector ul li.active {
  border-bottom: none;
}

.plural-selector ul li button {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  display: block;
  font-weight: 300;
  padding: 10px;
  text-transform: uppercase;
  width: 100%;
}

.plural-selector ul li button sup {
  color: #7bc876;
  font-size: 11px;
  font-weight: 400;
  padding-left: 1px;
}
.fluent-rich-translation-form {
  height: 100%;
  line-height: 22px;
  padding: 10px;
  overflow: auto;
}

.fluent-rich-translation-form table {
  width: 100%;
}

.fluent-rich-translation-form td:first {
  width: calc(25% - 5px);
}

.fluent-rich-translation-form td:last-child {
  width: 75%;
}

.fluent-rich-translation-form label {
  background: transparent;
  border: 1px solid #5e6475;
  box-sizing: border-box;
  color: #aaaaaa;
  display: block;
  font-weight: normal;
  margin: 2px 5px 2px 0;
  padding: 0 4px;
}

.fluent-rich-translation-form label > :not(:last-child)::after {
  content: '·';
  color: #7bc876;
  padding: 0 3px;
}

.fluent-rich-translation-form label .stress {
  color: #7bc876;
}

.fluent-rich-translation-form table tr > td > textarea {
  min-height: 0;
  height: 24px;
  margin: 2px 0;
  padding: 0 4px;
}

.fluent-rich-translation-form table tr > td > textarea[maxlength='1'] {
  float: left;
  margin-right: 3px;
  resize: none;
  text-align: center;
  width: 24px;
}

.fluent-rich-translation-form .accesskeys {
  float: right;
  margin: 2px 0;
  width: calc(100% - 27px);
}

.fluent-rich-translation-form .accesskeys .key {
  border: 1px solid #5e6475;
  background: #4d5967;
  color: #ebebeb;
  cursor: pointer;
  display: inline-block;
  line-height: 22px;
  margin-right: 3px;
  padding: 0;
  text-align: center;
  vertical-align: top;
  width: 24px;
}

.fluent-rich-translation-form .accesskeys .key.active,
.fluent-rich-translation-form .accesskeys .key:hover {
  border-color: #7bc876;
}
.other-locales .translation {
  border-bottom: 1px solid #5e6475;
  cursor: pointer;
  padding: 10px;
}

.other-locales ul.preferred-list .translation:last-child {
  border-bottom-color: #7bc876;
}

.other-locales .translation.cannot-copy {
  pointer-events: none;
}

.other-locales .translation:not(.cannot-copy):hover,
.other-locales .translation.selected {
  background: #333941;
  border-color: #5e6475;
}

.other-locales .translation > header {
  color: #aaaaaa;
  display: block;
  font-size: 11px;
  font-weight: 300;
  padding: 1px 0 5px;
  text-align: right;
  text-transform: uppercase;
}

.other-locales .translation > header span {
  color: #7bc876;
  padding-left: 3px;
}

.other-locales .translation > p {
  min-height: 22px;
  text-align: start;
  white-space: pre-wrap;
}

.other-locales .translation > header a {
  pointer-events: auto;
}
.history .wrapper {
  border-bottom: 1px solid #5e6475;
}

.history .translation {
  cursor: pointer;
  padding: 15px 10px;
  display: flex;
}

.history .translation.cannot-copy {
  pointer-events: none;
}

.history .translation:not(.cannot-copy):hover {
  background: #333941;
}

.history .translation .user-avatar {
  padding-right: 8px;
  position: relative;
  top: 3px;
}

.history .translation .user-avatar img {
  border-radius: 6px;
  border: 2px solid #5e6475;
}

.history .translation:hover .user-avatar img {
  border-color: #637283;
}

.history .translation .content {
  flex-grow: 1;
}

.history .translation .content > header {
  color: #aaaaaa;
  display: block;
  font-size: 11px;
  font-weight: 300;
  padding: 1px 0 5px;
}

.history .translation .content > header .info {
  float: left;
}

.history .translation .content > header .toolbar {
  display: block;
  float: right;
}

.history .translation .content > header + p {
  clear: both;
  text-align: start;
  white-space: pre-wrap;
}

.history .translation .content > header .info time {
  padding-left: 3px;
}

.history .translation .content > header .info time::before {
  content: '•';
  padding-right: 3px;
}

.history .translation .content > header .info a {
  color: #7bc876;
}

.history .translation .content > header .toggle {
  background: #333941;
  border: 1px solid #3f4752;
  border-radius: 4px;
  font-size: inherit;
  font-weight: 100;
  margin-right: 6px;
  padding: 2px 4px;
  pointer-events: auto;
}

.history .translation .content > header .toggle.on {
  color: #7bc876;
}

.history .translation:hover .content > header .toggle {
  border-color: #4d5967;
}

.history .translation .content > header .toggle:hover {
  border-color: #637283;
}

.history .translation .content > header .toggle.active .stress {
  color: #7bc876;
}

.history .translation .content > header button {
  background: no-repeat transparent;
  border: none;
  color: #aaaaaa;
  display: inline-block;
  padding: 0;
  outline: none;
}

.history .translation .content > header button.fa,
.history .translation .content > header button.far {
  font-size: 1.8em;
  height: 22px;
  opacity: 0.5;
  pointer-events: auto;
  cursor: default;
  vertical-align: bottom;
  width: 22px;
}

.history .translation.rejected.can-reject header button.delete,
.history .translation.can-approve header button.approve,
.history .translation.can-approve header button.unapprove,
.history .translation.can-reject header button.reject,
.history .translation.can-reject header button.unreject {
  opacity: 1;
  cursor: pointer;
}

.history .translation.rejected {
  opacity: 0.4;
}

.history .translation.rejected:hover {
  opacity: 1;
}

.history .translation.pretranslated .content > header button.approve:before {
  color: #c0ff00;
}

.history .translation.fuzzy .content > header button.approve:before {
  color: #fed271;
}

.history .translation .content > header button.approve:before,
.history .translation .content > header button.unapprove:before {
  content: '';
}

.history .translation.can-approve .content > header button.approve:hover:before,
.history .translation .content > header button.unapprove:before {
  color: #7bc876;
}

.history .translation:not(.can-approve) .content > header button.approve:before,
.history
  .translation.can-approve
  .content
  > header
  button.approve:not(:hover):before,
.history
  .translation.can-approve
  .content
  > header
  button.unapprove:hover:before {
  font-weight: 400;
}

.history .translation .content > header button.reject:before,
.history .translation .content > header button.unreject:before {
  content: '';
  margin-left: 5px;
}

.history .translation.can-reject .content > header button.reject:hover:before,
.history .translation .content > header button.unreject:before {
  color: #f36;
}

.history .translation:not(.can-reject) .content > header button.reject:before,
.history
  .translation.can-reject
  .content
  > header
  button.reject:not(:hover):before,
.history
  .translation.can-reject
  .content
  > header
  button.unreject:hover:before {
  font-weight: 400;
}

.translation .content > header button.delete {
  margin-right: 1px;
}

.translation .content > header button.delete:before {
  content: '';
  float: left;
  font-size: 19px;
  margin-top: -1px;
}

.translation .content > header button.delete:hover:before {
  color: #f36;
}

.machinery-sources {
  position: absolute;
  top: 0;
  left: -2px;
  color: #7bc876;
  font-size: 14px;
}

.machinery-sources::before {
  content: '';
}

.history .translation .avatar-container {
  position: relative;
}
.other-locales {
  line-height: 22px;
}

.other-locales > ul {
  list-style: none;
  margin: 0;
}

.other-locales > p {
  color: #aaa;
  font-style: italic;
  padding: 15px 10px;
}
.team-comments .comments-list {
  margin-top: 2px;
}

.team-comments ul,
.team-comments ul .comment,
.team-comments div .add-comment {
  margin-left: 0;
}

.no-team-comments {
  color: #aaa;
  font-style: italic;
  line-height: 22px;
  padding: 15px 10px;
}
.unsaved-changes {
  background: #272a2f;
  border-top: 1px solid #5e6475;
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  line-height: 22px;
  min-height: 90px;
  padding: 10px;
  position: absolute;
  text-align: left;
  width: 100%;
  z-index: 10;
}

.unsaved-changes .close {
  background: none;
  border: none;
  color: #aaaaaa;
  float: right;
  font-size: 24px;
  font-weight: 100;
  line-height: 22px;
  margin-top: -3px;
  padding: 0;
}

.unsaved-changes .close:hover {
  color: #ffffff;
}

.unsaved-changes .title {
  color: #f36;
  font-size: 14px;
  font-weight: 300;
  padding-bottom: 5px;
}

.unsaved-changes .body {
  font-style: italic;
}

.unsaved-changes .anyway {
  background: #ff0a43;
  border: none;
  border-radius: 3px;
  bottom: 10px;
  color: #272a2f;
  font-weight: 600;
  margin-left: 10px;
  padding: 10px;
  position: absolute;
  right: 10px;
}

.unsaved-changes .anyway:hover {
  color: #ebebeb;
}
.machinery {
  height: 100%;
  line-height: 22px;
}

.machinery .list-wrapper {
  height: calc(100% - 53px);
  overflow-y: auto;
}

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

.machinery > .search-wrapper {
  padding: 10px 5px;
  position: relative;
}

.machinery > .search-wrapper > label {
  color: #aaaaaa;
  cursor: text;
  font-size: 17px;
  left: auto;
  position: absolute;
  right: 16px;
  top: 16px;
}

.machinery > .search-wrapper > label > button {
  background-color: transparent;
  border: none;
  color: #aaaaaa;
  padding: 0;
}

.machinery > .search-wrapper > label > button.fa-times {
  padding: 0 4px;
}

.machinery > .search-wrapper input[type='search'] {
  background: #333941;
  border: none;
  border-radius: 20px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  line-height: 23px;
  padding: 5px 33px 5px 12px;
  width: 100%;
}

/* Remove highlight in Chrome */
.machinery > .search-wrapper input[type='search']:focus {
  outline: none;
}

/* Remove cancel button in Chrome */
.machinery
  > .search-wrapper
  input[type='search']::-webkit-search-cancel-button {
  display: none;
}

/* Style placeholder color in Chrome */
.machinery > .search-wrapper input[type='search']::-webkit-input-placeholder {
  color: #aaaaaa;
}

.machinery .load-more-container {
  display: flex;
  justify-content: center;
  padding: 15px 0 20px 0;
}

.machinery .load-more-button {
  background: #333941;
  border: 1px solid #3f4752;
  border-radius: 4px;
  color: #aaa;
  font-size: 11px;
  font-weight: 100;
  margin-right: 6px;
  padding: 2px 4px;
  pointer-events: auto;
}

.machinery .load-more-button:hover {
  border-color: #637283;
}
.machinery .translation mark.search {
  color: #ffa10f;
  font-weight: normal;
  font-style: inherit;
  background: #676054;
  border-radius: 2px;
}
.machinery .translation {
  border-bottom: 1px solid #5e6475;
  cursor: pointer;
  padding: 10px;
}

.machinery .translation.cannot-copy {
  pointer-events: none;
}

.machinery .translation.cannot-copy .sources.projects {
  pointer-events: auto;
}

.machinery .translation:not(.cannot-copy):hover,
.machinery .translation.selected {
  background: #333941;
}

.machinery .translation > header {
  color: #aaaaaa;
  display: block;
  font-size: 11px;
  font-weight: 300;
  padding: 1px 0 5px;
  text-align: right;
}

.machinery .translation > header ul {
  display: inline-block;
}

.machinery .translation > header ul li {
  display: inline;
  padding-left: 3px;
}

.machinery .translation > header a {
  pointer-events: auto;
}

.machinery .translation > header ul li:not(:first-child)::before {
  content: '•';
  padding-right: 3px;
}

.machinery .translation > header .quality::after {
  content: '•';
  color: #aaaaaa;
  padding-left: 3px;
}

.machinery .translation > header .quality,
.machinery .translation > header sup {
  color: #7bc876;
}

.machinery .translation > header .projects {
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machinery .translation p {
  min-height: 22px;
  text-align: start;
  white-space: pre-wrap;
}

.machinery .translation p.original {
  color: #aaaaaa;
}
.no-terms {
  color: #aaa;
  font-style: italic;
  line-height: 22px;
  padding: 15px 10px;
}
.terms-popup {
  background-color: #272a2f;
  border: 1px solid #333941;
  font-style: normal;
  max-width: 500px;
  position: absolute;
  z-index: 20;
}

.terms-popup .terms-list .term:not(.cannot-copy):hover {
  background-color: #3f4752;
}

.terms-popup li.term:last-child {
  border-bottom: none;
}
.fluent-rich-string {
  line-height: 22px;
  padding: 10px;
  margin-bottom: 6px;
  width: 100%;
}

.fluent-rich-string td:first {
  width: calc(25% - 5px);
}

.fluent-rich-string td:last-child {
  width: 75%;
}

.fluent-rich-string label {
  background: transparent;
  border: 1px solid #5e6475;
  box-sizing: border-box;
  color: #aaaaaa;
  display: block;
  font-weight: normal;
  margin: 2px 5px 2px 0;
  padding: 0 4px;
}

.fluent-rich-string label > :not(:last-child)::after {
  content: '·';
  color: #7bc876;
  padding: 0 3px;
}

.fluent-rich-string td > span {
  box-sizing: border-box;
  line-height: 28px;
  margin: 2px 0;
}