:root {
	/* Color palette */
	--gp-color-primary-50: #e9e5f2;
	--gp-color-primary-100: #c8c0de;
	--gp-color-primary-200: #a597c9;
	--gp-color-primary: #826eb4;
	--gp-color-primary-400: #6851a5;
	--gp-color-primary-500: #4e3499;
	--gp-color-primary-600: #463093;
	--gp-color-primary-700: #39298b;
	--gp-color-primary-800: #2e2383;
	--gp-color-primary-900: #181875;
	--gp-color-secondary-50: #fbfbfb;
	--gp-color-secondary-100: #f6f6f6;
	--gp-color-secondary-200: #f1f1f1;
	--gp-color-secondary-300: #e4e4e4;
	--gp-color-secondary-400: #c1c1c1;
	--gp-color-secondary-500: #a3a3a3;
	--gp-color-secondary-600: #7a7a7a;
	--gp-color-secondary-700: #656565;
	--gp-color-secondary: #464646;
	--gp-color-secondary-900: #252525;
	--gp-color-black: #0b0c0c;
	--gp-color-white: #ffffff;
	--gp-color-yellow: #ffd566;
	--gp-color-dark-orange: #C05621;
	--gp-color-red: #a62626;
	--gp-color-green: #266430;

	/* Components */
	--gp-color-fg-default: var( --gp-color-black );
	--gp-color-fg-muted: var( --gp-color-secondary-600 );
	--gp-color-fg-subtle: var( --gp-color-secondary-100 );

	--gp-color-canvas-default: var( --gp-color-white );
	--gp-color-canvas-inset: var( --gp-color-secondary-50 );
	--gp-color-canvas-subtle: var( --gp-color-secondary-100 );

	--gp-color-neutral-emphasis: var( --gp-color-secondary-500 );
	--gp-color-neutral-muted: rgba( 122, 122, 122, .2 ); /* --gp-color-secondary-600 with 20% opacity */
	--gp-color-accent-fg: var( --gp-color-primary-500 );
	--gp-color-accent-emphasis: var( --gp-color-primary-700 );
	--gp-color-success-fg: var( --gp-color-green );
	--gp-color-success-emphasis: var( --gp-color-green );
	--gp-color-attention-fg: var( --gp-color-yellow );
	--gp-color-attention-emphasis: var( --gp-color-yellow );
	--gp-color-danger-fg: var( --gp-color-red );
	--gp-color-danger-emphasis: var( --gp-color-red );
	--gp-color-fg-on-emphasis: var( --gp-color-white );

	--gp-color-border-default: var( --gp-color-secondary-400 );
	--gp-color-border-muted: var( --gp-color-secondary-300 );
	--gp-color-border-subtle: var( --gp-color-secondary-200 );

	--gp-color-header-text: var( --gp-color-white );
	--gp-color-header-bg: var( --gp-color-secondary );
	--gp-color-header-item-hover-border: var( --gp-color-primary-200 );
	--gp-color-header-item-current-border: var( --gp-color-primary );

	--gp-color-input-border: var( --gp-color-secondary-600 );

	--gp-color-btn-text: var( --gp-color-primary-500 );
	--gp-color-btn-bg: var( --gp-color-secondary-100 );
	--gp-color-btn-border: var( --gp-color-primary-500 );
	--gp-color-btn-hover-text: var( --gp-color-primary-700 );
	--gp-color-btn-hover-bg: var( --gp-color-secondary-200 );
	--gp-color-btn-hover-border: var( --gp-color-primary-700 );
	--gp-color-btn-active-text: var( --gp-color-black );
	--gp-color-btn-active-bg: var( --gp-color-secondary-200 );
	--gp-color-btn-active-border: var( --gp-color-black );
	--gp-color-btn-disabled-text: var( --gp-color-secondary-500 );
	--gp-color-btn-disabled-bg: var( --gp-color-secondary-100 );
	--gp-color-btn-disabled-border: var( --gp-color-secondary-300 );

	--gp-color-btn-primary-text: var( --gp-color-white );
	--gp-color-btn-primary-bg: var( --gp-color-primary-400 );
	--gp-color-btn-primary-border: var( --gp-color-primary-400 );
	--gp-color-btn-primary-hover-text: var( --gp-color-white );
	--gp-color-btn-primary-hover-bg: var( --gp-color-primary-700 );
	--gp-color-btn-primary-hover-border: var( --gp-color-primary-700 );
	--gp-color-btn-primary-active-text: var( --gp-color-white );
	--gp-color-btn-primary-active-bg: var( --gp-color-black );
	--gp-color-btn-primary-active-border: var( --gp-color-black );

	--gp-color-btn-danger-text: var( --gp-color-red );
	--gp-color-btn-danger-bg: var( --gp-color-secondary-100 );
	--gp-color-btn-danger-border: var( --gp-color-red );
	--gp-color-btn-danger-hover-text: var( --gp-color-white );
	--gp-color-btn-danger-hover-bg: var( --gp-color-red );
	--gp-color-btn-danger-hover-border: var( --gp-color-red );
	--gp-color-bubble-inactive-project-text: var( --gp-color-dark-orange );
	--gp-color-bubble-inactive-project-border: var( --gp-color-dark-orange );

	--gp-color-status-fuzzy-subtle: #fc6;
	--gp-color-status-current-subtle: #e9ffd8;
	--gp-color-status-old-subtle: #fee4f8;
	--gp-color-status-waiting-subtle: #ffffc2;
	--gp-color-status-rejected-subtle: #ff8e8e;
	--gp-color-status-changesrequested-subtle: #87ceeb;

	--gp-color-tour: var( --gp-color-primary );
}

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

body {
	margin: 0;
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Helvetica,
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji";
	color: var( --gp-color-fg-default );
	background-color: var( --gp-color-canvas-default );
	font-size: 1rem;
	line-height: 1.5;
}

.gp-content input,
.gp-content button,
.gp-content textarea,
.gp-content select {
	font: inherit;
}

a {
	text-decoration: underline;
	text-decoration-thickness: max( 1px, 0.063rem );
	text-underline-offset: 0.1em;
	text-underline-position: under;
}

a:link,
a:visited {
	color: var( --gp-color-accent-fg );
}

a:hover,
a:focus {
	color: var( --gp-color-accent-fg );
	text-decoration-thickness: max( 2px, 0.125rem );
}

a:focus {
	outline: 0;
}

a:active {
	color: var( --gp-color-fg-default );
}

a img {
	border: 0;
}

h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 1rem 0;
}

h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 1rem 0;
}

/*
 * GP BAR
 */
.gp-bar {
	background: var( --gp-color-header-bg );
	color: var( --gp-color-header-text );
}

.gp-bar h1 {
	float: left;
	font-size: 1em;
	margin: 0;
}

.gp-bar a {
	color: var( --gp-color-header-text );
	text-decoration: none;
	display: inline-block;
	padding: 1em;
}

.gp-bar a.current {
	box-shadow: inset 0 -5px 0 var( --gp-color-header-item-current-border );
}

.gp-bar a:hover,
.gp-bar a:focus {
	box-shadow: inset 0 -5px 0 var( --gp-color-header-item-hover-border );
}

.gp-bar #main-navigation {
	float: left;
}

.gp-bar #side-navigation {
	float: right;
}

/*
 * Breadcrumbs
 */
.breadcrumb {
	background-color: var( --gp-color-canvas-subtle );
	border-bottom: 1px solid  var( --gp-color-border-default );
	margin: 0 -1rem 1rem;
	padding: .5rem 1rem;
}

.breadcrumb li {
	display: inline-block;
}

.breadcrumb li:after {
	color: var( --gp-color-fg-muted );
	content: '/';
	padding: 0 7px;
}

.breadcrumb li:last-child:after {
	content: '';
}

.breadcrumb a:not(:hover):not(:focus) {
	text-decoration: none;
}

/*
 * GP Heading
 */

.gp-heading {
	display: flex;
	align-items: center;
	gap: 0.2em;
	margin: 0 0 1rem 0;
}

.gp-heading h2 {
	margin: 0;
}

.gp-heading a {
	font-size: 1.125rem;
}

.gp-heading a:not(:hover):not(:focus) {
	text-decoration: none;
}

.gp-heading div.glossary-links {
	margin-left: auto;
}

.gp-heading a.glossary-link {
	font-weight: 600;
}

/*
 * GP Content
 */
.gp-content {
	margin: 0 1rem;
}

/*
 * Footer
 */
.gp-footer {
	display: flex;
	flex-direction: column;
	padding-top: 1rem;
	border-top: 1px solid var( --gp-color-border-default );
	margin: 2rem 1rem 1rem;
	color: var( --gp-color-fg-muted );
	font-size: 0.875rem;
}

.gp-footer-credits {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem 1rem;
}

.gp-footer-credits p {
	margin: 0;
}

.gp-footer-credits .gp-footer-copyright {
	margin-right: auto;
}

/*
 * Forms
 */

 /* Correct the inability to style clickable types in iOS and Safari. */
button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}
.gp-content .button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding: 5px 16px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var( --gp-color-btn-text );
	border: 1px solid var( --gp-color-btn-border );
	border-radius: 2px;
	box-shadow: none;
	background: var( --gp-color-btn-bg );
	min-height: 32px;
	margin: 0;
	cursor: pointer;
	outline: 0;
	white-space: nowrap;
	vertical-align: middle;
}

.gp-content .button:hover,
.gp-content .button:focus {
	background-color: var( --gp-color-btn-hover-bg );
	color: var( --gp-color-btn-hover-text );
	border-color: var( --gp-color-btn-hover-border );
	box-shadow: 0 0 0 1px var( --gp-color-btn-hover-border );
}

.gp-content .button:active {
	background-color: var( --gp-color-btn-active-bg );
	border-color: var( --gp-color-btn-active-border );
	color: var( --gp-color-btn-active-text );
	box-shadow: 0 0 0 1px var( --gp-color-btn-active-border );
}

.gp-content .button.is-small {
	padding: 3px 12px;
	font-size: 12px;
	min-height: 28px;
}

.gp-content .button.is-primary {
	background-color: var( --gp-color-btn-primary-bg );
	border-color: var( --gp-color-btn-primary-border );
	color: var( --gp-color-btn-primary-text );
}

.gp-content .button.is-primary:hover,
.gp-content .button.is-primary:focus {
	background-color: var( --gp-color-btn-primary-hover-bg );
	border-color: var( --gp-color-btn-primary-hover-border );
	color: var( --gp-color-btn-primary-hover-text );
	box-shadow: 0 0 0 1px var( --gp-color-canvas-default ), 0 0 0 2px var( --gp-color-btn-primary-hover-border );
}

.gp-content .button.is-primary:active {
	background-color: var( --gp-color-btn-primary-active-bg );
	border-color: var( --gp-color-btn-primary-active-border );
	color: var( --gp-color-btn-primary-active-text );
	box-shadow: 0 0 0 1px var( --gp-color-canvas-default ), 0 0 0 2px var( --gp-color-btn-primary-active-border );
}

.gp-content .button.is-destructive {
	background-color: var( --gp-color-btn-danger-bg );
	border-color: var( --gp-color-btn-danger-border );
	color: var( --gp-color-btn-danger-text );
}

.gp-content .button.is-destructive:active,
.gp-content .button.is-destructive:hover,
.gp-content .button.is-destructive:focus {
	background-color: var( --gp-color-btn-danger-hover-bg );
	border-color: var( --gp-color-btn-danger-hover-border );
	color: var( --gp-color-btn-danger-hover-text );
	box-shadow: 0 0 0 1px var( --gp-color-canvas-default ), 0 0 0 2px var( --gp-color-btn-danger-hover-border );
}

.gp-content .button:disabled {
	background-color: var( --gp-color-btn-disabled-bg ) !important;
	border-color: var( --gp-color-btn-disabled-border ) !important;
	color: var( --gp-color-btn-disabled-text ) !important;
	box-shadow: none !important;
	cursor: default;
}

.gp-content .button.is-link {
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	background: none;
	color: var( --gp-color-accent-fg );
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: max( 1px, 0.063rem );
	text-underline-offset: 0.1em;
	text-underline-position: under;
}

.gp-content .button.is-link:hover,
.gp-content .button.is-link:focus {
	box-shadow: none;
	border: 0;
	background: none;
	color: var( --gp-color-accent-fg );
	text-decoration-thickness: max( 2px, 0.125rem );
}

.gp-content .button.is-link:active {
	box-shadow: none;
	border: 0;
	background: none;
	color: var( --gp-color-fg-default );
}

.gp-content .button-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 15px;
	margin-top: 1em;
	margin-bottom: 1em;
}

.gp-content input[type="text"],
.gp-content input[type="number"],
.gp-content textarea {
	padding: 5px 12px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var( --gp-color-fg-default );
	border: 1px solid var( --gp-color-input-border );
	border-radius: 2px;
	box-shadow: none;
	background-color: var( --gp-color-canvas-default );
	outline: 0;
}

.gp-content input[type="number"] {
	width: 80px;
	padding-right: 0;
}

/* Correct the cursor style of increment and decrement buttons in Safari. */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

.gp-content textarea {
	width: 100%;
	max-width: 40em;
	padding: 8px;
	font-size: 15px;
	resize: vertical;
}

.gp-content input[type="text"]:focus,
.gp-content input[type="number"]:focus,
.gp-content textarea:focus {
	border-color: var( --gp-color-accent-emphasis );
	box-shadow: 0 0 0 1px var( --gp-color-accent-emphasis );
}

.gp-content input[type="text"]:disabled,
.gp-content input[type="number"]:disabled,
.gp-content textarea:disabled {
	color: var( --gp-color-fg-muted ) !important;
	border-color: var( --gp-color-border-muted ) !important;
	background-color: var( --gp-color-canvas-subtle ) !important;
	box-shadow: none !important;
}

.gp-content select {
	-webkit-appearance: none;
	appearance: none;
	padding: 5px 24px 5px 12px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var( --gp-color-fg-default );
	border: 1px solid var( --gp-color-input-border );
	border-radius: 2px;
	box-shadow: none;
	background: var( --gp-color-canvas-default ) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath fill='%230b0c0c' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 0 top 55%;
	background-size: 24px 24px;
	min-height: 32px;
	max-width: 25rem;
	cursor: pointer;
	outline: 0;
	vertical-align: middle;
	text-transform: none;
}

.gp-content select:hover {
	color: var( --gp-color-accent-fg );
}

.gp-content select:focus {
	border-color: var( --gp-color-accent-fg );
	color: var( --gp-color-accent-fg );
	box-shadow: 0 0 0 1px var( --gp-color-accent-fg );
}

.gp-content select:active {
	border-color: var( --gp-color-fg-default );
	color: var( --gp-color-fg-default );
	box-shadow: 0 0 0 1px var( --gp-color-fg-default );
}

.gp-content select:disabled {
	color: var( --gp-color-fg-muted );
	border-color: var( --gp-color-border-muted );
	background-color: var( --gp-color-canvas-subtle );
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath fill='%23a3a3a3' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'%3E%3C/path%3E%3C/svg%3E");
	box-shadow: none;
	cursor: default;
}

.gp-content input[type="checkbox"],
.gp-content input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	background: var( --gp-color-canvas-default );
	border: 1px solid var( --gp-color-input-border );
	height: 1.25rem;
	width: 1.25rem;
	box-shadow: none;
	border-radius: 2px;
	margin: -.25em 0 0;
	padding: 0;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
}

.gp-content input[type="checkbox"]:focus,
.gp-content input[type="radio"]:focus {
	border-color: var( --gp-color-accent-fg );
	box-shadow: 0 0 0 1px var( --gp-color-accent-fg );
}

.gp-content input[type="checkbox"]::before,
.gp-content input[type="radio"]::before {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	transform: scale(0);
	box-shadow: inset 1rem 1rem var( --gp-color-accent-fg );
}

.gp-content input[type="checkbox"]::before {
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.gp-content input[type="radio"] {
	border-radius: 50%;
}

.gp-content input[type="radio"]::before {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
}

.gp-content input[type="checkbox"]:checked::before,
.gp-content input[type="radio"]:checked::before {
	transform: scale(1);
}

.gp-content input[type="checkbox"]:disabled,
.gp-content input[type="radio"]:disabled {
	border-color: var( --gp-color-border-muted );
	background-color: var( --gp-color-canvas-subtle );
}

.gp-content input[type="checkbox"]:disabled::before,
.gp-content input[type="radio"]:disabled::before {
	box-shadow: inset 1em 1em var( --gp-color-fg-muted );
}

/*
 * Tables
 */
.gp-content table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
	border-spacing: 0;
}

table.gp-table {
	width: 100%;
	margin: 1rem 0;
	border: 1px solid var( --gp-color-border-default );
}

table.gp-table thead th,
table.gp-table tfoot th {
	font-weight: 600;
	background-color: var( --gp-color-canvas-subtle );
	border: 1px solid var( --gp-color-border-default );
	padding: 0.5em 0.75em;
}

table.gp-table tbody td,
table.gp-table tbody th {
	padding: 0.5em 0.75em;
	border: 1px solid var( --gp-color-border-muted );
	border-bottom: none;
}

table.gp-table td:first-child,
table.gp-table th:first-child {
	border-left: none;
}

table.gp-table td:last-child,
table.gp-table th:last-child {
	border-right: none;
}

table.gp-table tbody tr:hover {
	border-left: 1px solid var( --gp-color-accent-emphasis );
	box-shadow: inset 2px 0 0 var( --gp-color-accent-emphasis );
	background-color: var( --gp-color-canvas-subtle );
}

table.locales {
	width: auto;
}

table.locales thead th {
	width: 33%;
}

table.permissions thead th,
table.glossary .gp-column-item,
table.glossary .gp-column-part-of-speech,
table.glossary .gp-column-translation {
	width: 20%;
}

table.glossary .gp-column-comments {
	width: 30%;
}

table.glossary .gp-column-modified {
	width: 10%;
}

table.glossary td.date-modified {
	white-space: nowrap;
}

table.permissions .gp-column-actions,
table.glossary .gp-column-actions,
table.translations .gp-column-actions {
	width: 10%;
}

table.translations .gp-column-checkbox {
	width: 2.813rem;
}

table.translations .gp-column-priority {
	width: 4%;
}

table.translations td.original ul,
table.translations td.translation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

table.translations td.original small,
table.translations td.translation small {
	font-size: 0.75rem;
}

table.translations td.original li:not(:last-child),
table.translations td.translation li:not(:last-child) {
	padding-bottom: 0.25em;
	border-bottom: 1px solid var( --gp-color-border-muted );
}

table.translations td.checkbox {
	vertical-align: middle;
	text-align: center;
}

table.translations td.priority {
	text-align: center;
}

table.translation-sets td.percent,
table.locale-sub-projects td.percent {
	font-weight: 600;
}

table.glossary td.actions,
table.translations td.actions {
	text-align: center;
}

table.translations.translation-sets-rtl .foreign-text {
	direction: rtl;
}

table.translations td.original,
table.translations td.translation {
	width: 45%;
	vertical-align: middle;
}

table.translations .no-translations td.translation {
	text-align: center;
	vertical-align: middle;
}

table.translations td.translation span.missing {
	color: var( --gp-color-fg-muted );
	font-style: italic;
}

table.translations td.original .original-text,
table.translations td.translation .translation-text {
	white-space: pre-wrap;
}

table.glossary tr.editor,
table.translations tr.editor {
	border-left: 1px solid var( --gp-color-accent-emphasis );
	box-shadow: inset 2px 0 0 var( --gp-color-accent-emphasis );
	background-color: var( --gp-color-canvas-inset ) !important;
	display: none;
}

table.translations tr.preview.status-fuzzy,
#legend .status-fuzzy {
	background-color: var( --gp-color-status-fuzzy-subtle );
}

table.translations tr.preview.status-current,
#legend .status-current  {
	background-color: var( --gp-color-status-current-subtle );
}

table.translations tr.preview.status-old,
#legend .status-old {
	background-color: var( --gp-color-status-old-subtle );
}

table.translations tr.preview.status-waiting,
#legend .status-waiting {
	background-color: var( --gp-color-status-waiting-subtle );
}

table.translations tr.preview.status-rejected,
#legend .status-rejected {
	background-color: var( --gp-color-status-rejected-subtle );
}

table.translations tr.preview.status-changesrequested,
#legend .status-changesrequested {
	background-color: var( --gp-color-status-changesrequested-subtle );
}

table.translations tr.preview.has-warnings td.original, div#legend div.has-warnings {
	border-left: 2px solid var( --gp-color-danger-emphasis );
}

/* Locale projects table */
table.locale-sub-projects tbody tr:hover {
	border-left: none;
	box-shadow: none;
}

table.locale-sub-projects tbody tr:hover .set-name {
	border-left: 1px solid var( --gp-color-accent-emphasis );
	box-shadow: inset 2px 0 0 var( --gp-color-accent-emphasis );
}

.locale-sub-projects .stats,
.translation-sets .stats {
	text-align: center;
}

table.translation-sets .stats a,
table.locale-sub-projects .stats a {
	color: var( --gp-color-fg-default );
	font-weight: 600;
	display: block;
}

table.translation-sets .stats a:not(:hover):not(:focus),
table.locale-sub-projects .stats a:not(:hover):not(:focus) {
	text-decoration: none;
}

table.locale-sub-projects tbody th {
	font-weight: 600;
}

table.locale-sub-projects tbody th .stats {
	font-weight: 400;
	text-align: left;
}

table.locale-sub-projects .sub-project {
	background-color: var( --gp-color-canvas-default );
	text-align: left;
	vertical-align: top;
}

table.locale-sub-projects .set-name {
	text-align: left;
}

table.locale-sub-projects thead th:nth-child(-n+2) {
	width: 20%;
	text-align: left;
}

table.locale-sub-projects thead th:nth-child(n+3) {
	width: 15%;
}

/* Permissions table */
table.permissions thead th:not(:last-child) {
	text-align: left;
}

table.permissions .user {
	font-weight: 600;
}

/* Tables with sorting options */
table.locales thead th:not(.tablesorter-header),
table.translation-sets thead th:not(.tablesorter-header) {
	padding-right: 1.1em; /* Avoids layout shift during initalisation */
}

.tablesorter-glotpress .tablesorter-header:not(.sorter-false) {
	cursor: pointer;
	padding-right: 1.5em;
}

.tablesorter-glotpress .tablesorter-header .tablesorter-header-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.tablesorter-glotpress .tablesorter-header:not(.sorter-false) .tablesorter-header-inner {
	margin-right: -1.5em;
}

.tablesorter-glotpress .tablesorter-headerUnSorted:not(:hover):not(:focus) .tablesorter-header-inner:after {
	visibility: hidden;
}

.tablesorter-glotpress .tablesorter-header:not(.sorter-false) .tablesorter-header-inner:after {
	content: "";
	width: 1em;
	height: 1em;
	margin-left: 0.1em;
	background: transparent url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%237a7a7a' d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}

.tablesorter-glotpress .tablesorter-headerAsc .tablesorter-header-inner:after {
	transform: rotate( 180deg );
	transform-origin: center 9px;
}

.tablesorter-glotpress .tablesorter-header:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var( --gp-color-accent-emphasis );
}

/*
 * Misc.
 */
.clear {
	clear: both;
}

.half {
	float: left;
	width: 50%;
}

span.context {
	display: inline-block;
	background-color: var( --gp-color-neutral-muted );
	color: var( --gp-color-fg-default );
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0 0.375rem;
	border-radius: 2px;
}

span.morethan90 {
	background-color: green;
	color: white;
}

table.translations td.original,
table.translations td.translation,
.editor .original,
.editor .translation,
span.context {
	word-break: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.locale-project + .locale-project {
	margin-top: 2rem;
}

/*
 * Translation Row Editor
 */
.editor .original {
	font-weight: 500;
	white-space: pre-wrap;
	max-width: 50em;
}

.editor .original_raw {
	display: none;
}

.editor .translation {
	white-space: pre-wrap;
	margin: 0 0 1rem 0;
	font-size: 0.875rem;
	font-style: italic;
}

.editor .strings {
	float: left;
	min-width: 60%;
}

.editor .strings .textareas textarea,
.editor .strings .textareas .counts {
	width: 95%;
	max-width: 40rem;
}

.editor .textareas .counts {
	text-align: end;
	font-size: .875rem;
	color: var(--gp-color-fg-muted);
}

.editor .strings p.plural-numbers {
	margin-bottom: 0;
	color: #555;
	font-size: 0.75em;
}

.editor .strings p.plural-numbers span.numbers {
	font-weight: bold;
}

.editor .entry-actions {
	margin-top: .4em;
	margin-bottom: 2em;
	column-gap: 8px;
}

.editor .textareas, .editor .actions {
	clear: both;
}

.editor .textareas textarea {
	width: 45em;
	min-height: 8em;
}

.editor .meta {
	float: left;
	width: 35%;
	margin-left: 2em;
}

.editor .meta dl {
	margin: 0.1em 1em;
}

.editor .meta dt, .editor .meta dd {
	display: inline;
	margin: 0;
}

.editor .meta dt {
	margin-right: 0.5em;
}

.editor .meta dt {
	margin-right: 0.5em;
}

.editor .meta dd {
	color: #444;
	font-weight: bold;
}

/*
 * JavaScript, errors and notices.
 */
.gp-js-message {
	position: fixed;
	top: 0;
	padding: 1em;
	display: none;
	z-index: 1001;
}

.gp-js-error .gp-js-message-dismiss,
.gp-js-error .gp-js-message-dismiss:hover,
.gp-js-error .gp-js-message-dismiss:focus {
	color: inherit !important;
}

.gp-js-error, .error {
	color: var( --gp-color-fg-on-emphasis );
	background-color: var( --gp-color-danger-emphasis );
}

.gp-js-notice, .notice {
	color: var( --gp-color-fg-default );
	background-color: var( --gp-color-attention-emphasis );
}

.gp-js-success {
	color: var( --gp-color-fg-on-emphasis );
	background-color: var( --gp-color-success-emphasis );
}

.notice, .error {
	clear: both;
	padding: 0.5rem;
	margin: 1rem 0;
}

a.button.action.edit {
	margin: 0 0 0 0.2rem;
}

span.bubble.inactive {
	color: var( --gp-color-bubble-inactive-project-text );
	padding: 0.2em 0.5em;
	border: 1px solid var( --gp-color-bubble-inactive-project-text );
	border-radius: 1em;
	text-decoration: none;
	text-align: center;
	text-shadow: none;
	margin-left: 0.2rem;
	font-weight: 500;
	font-size: 80%;
}

.project-inactive span.bubble.inactive {
	vertical-align: middle;
}

span.locale-entry.bubble {
	background-color: #555;
	color: #ddd;
	font-weight: bold;
	margin-right: 0.5em;
}

ul a.edit, dt a.edit {
	background-color: #777;
}

ul a.delete {
	background-color: #FF4F50;
}

/*
 * Page UI
 */
.paging {
	display: flex;
	gap: 0.25rem;
}

.paging a,
.paging span {
	font-size: 0.875rem;
	display: block;
	min-width: 2rem;
	height: 2rem;
	line-height: 2rem;
	border: 1px solid var( --gp-color-border-default );
	text-align: center;
	padding: 0 0.4rem;
	text-decoration: none;
	border-radius: 2px;
}

.paging a:hover,
.paging a:focus {
	border-color: var( --gp-color-accent-emphasis );
	box-shadow: 0 0 0 1px var( --gp-color-accent-emphasis );
}

.paging .current, .paging .dots {
	border-color: transparent;
}

.paging .current {
	font-weight: 600;
}

.paging .disabled {
	color: var( --gp-color-fg-muted );
	border-color: var( --gp-color-border-muted );
}

/*
 * Table actions
 */
.gp-table-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.gp-table-actions .paging {
	margin-left: auto;
}

.gp-table-actions + .gp-table {
	margin-top: 0.5rem;
}

.gp-table + .gp-table-actions {
	margin-top: -0.5rem;
}

/*
 * Bulk Actions
 */
.bulk-actions select {
	width: 130px;
}

.bulk-actions div {
	display: flex;
	align-items: center;
	column-gap: .4rem;
}


/*
 * Filter menu
 */
.filter-toolbar {
	margin-bottom: .8rem;
}

/*
 * Translation page filters
 */
.filter-current,
.filter-title {
	font-weight: 600;
}

form.filters-toolbar > div {
	line-height: 2em;
}

form.filters-toolbar ul {
	list-style-type: none;
}

form.filters-toolbar a.revealing:not(:hover):not(:focus) {
	text-decoration: none;
}

form.filters-toolbar a.revealing,
form.filters-toolbar .separator {
	margin-bottom: 0;
}

form.filters-toolbar .separator {
	margin: 0 0.25em;
}

form.filters-toolbar strong.separator {
	margin: 0 0.5em;
}

form.filters-toolbar a.revealing.open {
	text-decoration: underline !important;
	text-decoration-thickness: max( 3px, 0.188rem ) !important;
	text-decoration-skip-ink: none !important;
}

.filters-expanded {
	font-size: 0.938rem;
	padding: 0.5rem 0.75rem;
	margin-top: 0.8rem;
	background-color: var( --gp-color-canvas-subtle );
	border: 1px solid var( --gp-color-border-default );
	border-radius: 2px;
}

.filters-expanded-section {
	float: left;
	margin: 0 2em 1em 0;
}

.filters-expanded-section fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}

.filters-expanded-section fieldset legend {
	padding: 0;
}

.filters-expanded-section fieldset + fieldset {
	margin-top: 1rem;
}

.filters-expanded-actions {
	clear: both;
}

.hidden,
.js .hide-if-js,
.no-js .hide-if-no-js {
	display: none;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.personal-options #source-url-template {
	width: 20em;
}

.invisibles {
	color: #888;
	padding: 0;
	margin-left: 2px;
}

.invisible-spaces,
.notranslate.placeholder {
	background-color: var( --gp-color-neutral-muted );
	display: inline-block;
	line-height: 1em;
	padding: 0.125em;
	border-radius: 0.125em;
	border: 1px solid var( --gp-color-border-default );
}

.notranslate.placeholder {
	font-family: monospace;
}

.ternary {
	font-size: 0.8em;
}

.warning {
	background-color: var( --gp-color-canvas-default );
	color: var( --gp-color-danger-fg );
	border: 1px solid currentcolor;
	margin: 1em 0;
	padding: 0.5em;
}

.warning:after {
	clear:both;
	content: "";
	display: block;
}

.warning a.discard-warning {
	float: right;
	color: inherit;
	margin-left: 0.5em;
}

.glossary-description,
.project-description {
	max-width: 60em;
	margin-left: 1em;
	padding-left: 1em;
	border-left: 3px solid #aaa;
	margin-top: -0.75em;
}

span.added {
	color: green;
}

span.removed {
	color: red;
}

#legend {
	font-size: 0.875rem;
}

#legend div {
	margin-right: .5em;
	float: left;
	line-height: 1.5em;
}

#legend .box {
	border: 1px solid var( --gp-color-border-default );
	width: 1.5em;
	height: 1.5em;
	padding: 0;
}

.actionlist {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
}

.gp-content .text {
	width: 45em;
	margin-left: 6em;
}

a.project-actions {
	font-weight: bold;
	text-decoration: none;
}

.project-actions ul {
	margin-top: 0em;
}

.with-sub-projects {
	margin-left: 24em;
}

#sub-projects {
	float: left;
	margin-right: 4em;
	margin-left: -24em;
}

#projects dd,
#sub-projects dd {
	font-size: 0.75em;
	line-height: 1.3em;
	color: #555;
	margin: 0;
	padding: 0.2rem 0 0.4rem 0;
}

#projects dl,
#sub-projects dl {
	margin-left: 0.5em;
}

#projects dt,
#sub-projects dt {
	margin-top: 0.5em;
}

#projects a,
#sub-projects a {
	font-weight: bold;
}

#projects a.action,
#sub-projects a.action {
	font-weight: normal;
}

.with-sub-projects #translation-sets {
	float: right;
	width: 100%;
}

table.form-table th {
	text-align: left;
	vertical-align: text-top;
}

table.form-table th,
table.form-table td {
	padding: 10px 0 0 0;
}

.glossary-word {
	display: inline-block;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-thickness: max( 1px, 0.063rem );
	text-underline-offset: 0.1em;
	text-underline-position: under;
	cursor: help;
}

/* jQuery UI */
/* Hide visually but not from screen readers */
.screen-reader-text,
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ui-tooltip {
	background-color: #eee;
	margin: 2px;
	padding: 6px;
	text-align: left;
	max-width: 250px;
	border-radius: 10px;
}

.ui-tooltip ul {
	list-style-type: none;
	margin: 2px;
	padding-left: 10px;
}

.ui-tooltip ul li {
	padding: 0;
	margin: 0;
}

.ui-tooltip .pos {
	display:inline-block;
	font-style: italic;
	padding-right: 10px;
}

.ui-tooltip .translation {
	font-weight: bold;
}

.ui-tooltip .comment {
	display: block;
	font-size: small;
}

.ui-tooltip:after {
	display: block;
	content: "";
	border-color: #eee transparent;
	border-style: solid;
	border-width: 0 10px 10px;
	width: 0;
	position: absolute;
	top: -8px;
	left: 1em;
}

/*
 * User Profile
 */
#profile {
	overflow: hidden;
}

.user-card {
	margin-bottom: 5px;
	overflow: hidden;
}

.user-card .user-avatar {
	float: left;
	margin: 0 12px 0 0;
	width: 100px;
	height: 100px;
}

.user-card dl.user-info dt {
	font-size: 12px;
	color: #888;
	margin: 5px 6px 0 0px;
	font-weight: bold;
}

.recent-projects {
	float:left;
	width:47%;
}

.recent-projects li {
	padding: 8px;
}

.recent-projects p {
	margin: 0;
	padding: 0;
}

.recent-projects .ago {
	color: #888;
	font-size: 13px;
	font-style:italic;
	margin: 0;
	padding: 0;
}

.validates-projects {
	margin-left:50%;
}

.validates-projects p {
	margin: 0;
	padding: 0;
}

.validates-projects li {
	padding: 8px;
}

#add-entry input {
	width: 200px;
	padding: 5px;
}

/*
 *Media specific settings
 */
@media (max-width: 1150px) {
	.gp-table-actions.bottom .bulk-actions {
		order: 1;
	}

	.gp-table-actions.bottom .paging {
		order: 2;
	}

	#legend {
		flex-basis: 100%;
		order: 3;
	}
}

@media (max-width: 799px) {
	#projects,
	#sub-projects {
		float: none;
		width: auto;
		margin: 0;
	}

	.with-sub-projects {
		margin: 0;
	}

	.with-sub-projects #translation-sets {
		float: none;
	}

	.gp-table-actions.top .bulk-actions {
		display: none;
	}

	.gp-table-actions.bottom .paging {
		margin-right: auto;
	}

	.gp-table-actions.bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.gp-footer-credits {
		flex-direction: column;
	}
}

.pulse {
		border-radius: 50%;
		position: relative;
		cursor: pointer;
		top: -2em;
		left: -0.4em;
		width: 12px;
		height: 12px;
		margin: -6px;
}

.pulse-wrapper {
	border: 2px dashed transparent;
	padding: 0.4em;
	border-radius: 3px;
	margin-left: calc( -0.4em - 2px );
	margin-top: calc( -0.4em - 2px );
	margin-bottom: calc( -0.4em - 2px );
}

.webui-popover .webui-popover-content {
	font-size: .9em;
	color: #fff;
}
.pulse-border {
	border: 2px dashed var( --gp-color-tour );
}

a.tour-button {
	text-decoration: none;
	border-radius: 3px;
	font-weight: bold;
	padding: 3px 10px;
	border: rgba( 255, 255, 255, .5 ) thin solid;
	color: #fff;
}
a.tour-button:hover {
	border: #fff thin solid;
	background: rgba( 255, 255, 255, .25 );
}

a.previous-tour-item {
	margin-right: 0.5em;
}

a.tour-button.button-primary {
	background: #fff;
	color: #2f99ee;
	color: var( --gp-color-tour );
	border: #fff thin solid;
}
a.tour-button.button-primary:hover {
	background: rgba( 255,255,255,.75 );
}

.popover-nav-btns {
	margin-top: 11px;
}

.webui-popover.in{
	background: var( --gp-color-tour );
}

.webui-popover .webui-popover-title {
	border-radius: 4px 4px 0 0; /* Make webui-popover outside and inner borders radius concentric. */
	background: #fff;
	font-weight: bold;
	color: var( --gp-color-tour );
}

.webui-popover a {
	color: #fff;
}

.error-template {
	text-align: center;
	margin: 0 auto;
	padding: 7rem 0;
}