:root {
  --eido-cerulean: #1674b3;
  --eido-deep-navy: #0d2240;
  --w-color-black: #000000;
  --w-color-grey-50: #f7f7f9;
  --w-color-grey-100: #e1e1e1;
  --w-color-grey-150: #c9c9c9;
  --w-color-grey-200: #939393;
  --w-color-grey-400: #5d5d5d;
  --w-color-grey-500: #343434;
  --w-color-grey-600: #272727;
  --w-color-white: #ffffff;
  --w-color-info-50: #e3f6fd;
  --w-color-info-100: #2081a0;
  --w-color-positive-50: #8ae5a5;
  --w-color-positive-100: #1c873c;
  --w-color-warning-50: #fff6d9;
  --w-color-warning-100: #fbaa01;
  --w-color-critical-50: #feeaeb;
  --w-color-critical-100: #fe5870;
  --w-color-critical-200: #ce4545;
  --preview-device-width: 422;

  @media (prefers-color-scheme: dark) {
    --w-color-primary: var(--eido-deep-navy);
    --w-color-focus: var(--eido-cerulean);
    --w-color-primary-200: #20334f;
    --w-color-secondary: var(--eido-cerulean);
    --w-color-secondary-50: #4ab2e4;
    --w-color-secondary-75: #5ebae7;
    --w-color-secondary-100: #72c3ea;
    --w-color-secondary-400: #86cbed;
    --w-color-secondary-600: #d7eef9;
  }

  @media (prefers-color-scheme: light) {
    --w-color-primary: var(--eido-deep-navy);
    --w-color-focus: var(--eido-cerulean);
    --w-color-primary-200: #071120;
    --w-color-secondary: var(--eido-cerulean);
    --w-color-secondary-50: #dceff4;
    --w-color-secondary-75: #6aaed0;
    --w-color-secondary-100: #2084c7;
    --w-color-secondary-400: #166b94;
    --w-color-secondary-600: #0f4e6d;
  }
}

.eido-logo-svg--white {
  fill: var(--w-color-white-50);
}

.eido-logo-svg {
  fill: var(--w-color-primary);
}

@media (prefers-color-scheme: dark) {
  .eido-logo-svg {
    fill: var(--w-color-text-label);
  }
}

/* Hide the redundant "Content" label */
label.w-field__label:has("Content") {
  display: none;
}

.sidebar--slim .sidebar-custom-branding {
  padding: 12px 0 !important;
}

.sidebar-custom-branding {
  display: flex;
  flex-direction: column;
}

.env-badge {
  font-size: x-large;
  font-weight: 900;
  color: #c9c9c9;
}

.sidebar--slim .env-badge {
  font-size: revert;
}

.env-badge--dev {
  color: #f00;
}

.env-badge--demo {
  color: #0f0;
}

.preview-panel--desktop .preview-panel__size-button--desktop,
.preview-panel--mobile .preview-panel__size-button--mobile,
.preview-panel--tablet .preview-panel__size-button--tablet,
.preview-panel--lites .preview-panel__size-button--lites,
.preview-panel--reduced .preview-panel__size-button--reduced {
  background-color: var(--w-color-surface-menus);
  border-color: #0000;
  border-width: 0.0625rem;
  color: var(--w-color-text-button);
  transform: none;
}

/* Hide the language selector in the explorer, as we're not using it as intended */
.c-page-explorer__header__select {
  display: none;
}

.modal-body * .tab-content {
  width: unset !important;
}

.w-header .row {
  padding-top: 0.9rem !important;
}

#translations_length,
#translations_info {
  float: left;
  padding: 10px;
}

#translations_filter,
#translations_paginate {
  float: right;
  padding: 10px;
}

#translations_filter input {
  min-height: unset;
}

table.dataTable,
#translations_info,
#translations_paginate {
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}

#translations_paginate a {
  padding: 0.5rem;
  color: var(--w-color-grey-200);
}

#translations_paginate a:hover {
  color: var(--w-color-text-label-menus-hover);
}

#translations_previous svg,
#translations_next svg {
  height: 0.8rem;
  width: 0.8rem;
}

.dataTables_paginate .paginate_button.current {
  background-color: var(--w-color-border-furniture);
  border-color: #0000;
  border-width: 0.0625rem;
  color: var(--w-color-text-label-menus-hover) !important;
  font-weight: 700;
}

table.dataTable td {
  vertical-align: middle;
}

table.dataTable td .button {
  margin-inline-start: unset !important;
}

.paginate_button {
  margin-inline-start: unset !important;
}

table.dataTable .details-control {
  cursor: pointer;
  font-weight: 700;
}

.details-container {
  display: flex;
}

.publication-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.details-table {
  flex: 2;
}

.details-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.procedure-card {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-published {
  color: var(--w-color-positive-100);
  height: 5rem;
  width: 5rem;
}

.progress-circle {
  max-width: 2rem;
  max-height: 2rem;
}

td.translation-status {
  display: flex;
  justify-content: center;
  align-items: center;
}

.awaiting-list {
  align-self: flex-start;
}

.translation-publish-form {
  display: contents;
}

.list-bucket-container {
  border: 1px solid var(--w-color-border-field-default);
  border-radius: 6px;
}

.list-bucket-container:hover {
  border-color: var(--w-color-border-field-hover);
}

.list-bucket-heading {
  padding: 0.8rem;
  font-size: 1.2rem;
}

.list-bucket-group {
  min-height: 80%;
}

.list-group-item {
  margin: 0.5rem;
  padding: 0.78rem;
  background-color: var(--w-color-surface-menus);
  border-radius: 4px;
  color: var(--w-color-grey-50);
  display: flex;
  justify-content: flex-start;
}

.list-group-item svg {
  margin-inline-end: 0.5rem;
  height: 1.2rem;
  width: 1.2rem;
}

.list-group-item:hover {
  background-color: var(--w-color-surface-button-default);
  cursor: pointer;
}

.password-toggle-button {
  inset-inline-end: 1rem;
  position: absolute;
  background-color: unset;
  width: 2rem;
  height: 2rem;
  top: 0.35rem;
}

.password-toggle {
  color: var(--w-color-icon-primary);
  height: 1.3rem;
  width: 1.3rem;
  vertical-align: middle;
  margin: 0 auto;
}

.password-toggle:hover {
  color: var(--w-color-icon-primary-hover);
}

.sso-button svg {
  vertical-align: -0.08em;
}

.visuallyhidden {
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hidden-input {
  display: none !important;
}

.page404__bg {
  background-color: inherit;
  color: inherit;
}

.listing-icon {
  height: 1.5rem;
  width: 1.5rem;
  margin-inline-end: 0.5rem;
}

.fields {
  max-width: inherit;
}

.preview-panel__modes-container {
  display: flex;
  gap: 1rem; /* Adjust the gap as needed for spacing */
}

.preview-panel__modes {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.preview-panel__mode-select {
  width: 100%;
}

.find-replace-form {
  display: flex;
  width: 100%;
  padding: 1rem;
  gap: 1rem;
}

.find-replace-form__input {
  flex: 1;
}

.translation-actions {
  display: flex;
  gap: 1rem;
}

.findreplace-form .field {
  display: flex;
  gap: inherit;
  margin: auto 0;
}

.d-none {
  display: none !important;
}

.progress-container {
  display: inline-flex;
  gap: 1rem;
}

.progress-container .button {
  margin: auto;
}

.progress-value {
  margin: auto auto auto -3rem;
}

.progress-value__text {
  font-size: 1.03rem !important;
}

.translation-tag {
  font-size: 0.8rem;
  margin: 2rem auto 2rem -0.5rem;
}

.published-translation-icon {
  height: 1.5rem;
  width: 1.5rem;
  color: var(--w-color-positive-100);
}

.pending-publish-icon {
  height: 1.5rem;
  width: 1.5rem;
  color: var(--w-color-surface-button-default);
}

.completed-translation-icon {
  height: 1.5rem;
  width: 1.5rem;
  color: var(--w-color-text-label);
}

.upload-list li.success {
  font-weight: bold;
  color: var(--w-color-positive-100);
  transition: 0.5s;
}

.upload-list li.warning {
  font-weight: bold;
  color: var(--w-color-warning-100);
  transition: 0.5s;
}

.upload-list li.error {
  font-weight: bold;
  color: var(--w-color-critical-100);
  transition: 0.5s;
}

.tooltip__content {
  position: absolute;
  z-index: 9999;
  background: var(--w-color-border-button-small-outline-default);
  border: var(--w-color-border-button-small-outline-default);
  color: var(--w-color-text-context);
  font-weight: 500;
  display: unset;
  font-size: 0.8em;
  line-height: 19px;
  margin: 0.3em 0.5em 0.5em;
  padding: 0 0.5em;
  text-align: center;
  text-transform: uppercase;
  word-break: normal;
}

.Draftail-Editor .DraftEditor-editorContainer h2,
.Draftail-Editor .DraftEditor-editorContainer h3,
.Draftail-Editor .DraftEditor-editorContainer h4 {
  font-weight: 400 !important;
  color: var(--w-color-border-button-outline-default) !important;
}

.Draftail-Editor .DraftEditor-editorContainer h2 {
  font-size: 1.875rem !important;
}

.Draftail-Editor .DraftEditor-editorContainer h3 {
  font-size: 1.75rem !important;
}

.Draftail-Editor .DraftEditor-editorContainer h4 {
  font-size: 1.5rem !important;
}

.switch-label {
  color: var(--w-color-text-label);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0;
  margin-top: 0;
  padding-right: 0.6rem;
}

.toggles-row {
  margin-top: -1.4rem;
  display: flex;
  gap: 2.8rem;
}

.toggles {
  display: inline-flex;
  height: 3rem !important;
}

.toggles .w-field__label {
  margin-top: 1rem;
  margin-right: 0.7rem;
}

.w-header .row {
  padding-bottom: 20px !important;
  margin-top: -15px !important;
}

.w-panel__split {
  max-width: 90%;
  margin: -3.1rem 4rem 0 9rem;
  padding-top: 1rem;
}

.w-panel__split-divider {
  background-image: linear-gradient(to right,var(--guide-line-color,var(--w-color-border-furniture)) 50%,#fff0 0);
  background-repeat: repeat-x;
  background-size: 6px 1px;
  margin-top: 1px;
  min-height: 1px;
  flex: 1;
}

.w-panel__split-button {
  display: flex;
}

.w-panel__split-button svg {
  height: 1rem;
  width: 1rem;
  margin: 0.8rem 0.4rem 0.8rem 0.7rem;
}

.w-panel__split-button svg path {
  fill: var(--w-color-border-furniture);
}

.w-panel__split-button--label {
  color: var(--w-color-border-furniture);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  margin-right: 0.4rem;
}

.w-panel__split:hover .w-panel__split-divider {
  background-image: linear-gradient(to right,var(--guide-line-color,var(--w-color-border-furniture)) 50%,var(--w-color-border-furniture) 0);
}

.w-panel__split:hover .w-panel__split-button--label {
  color: var(--w-color-icon-secondary-hover);
  cursor: pointer;
}

.w-panel__split:hover .w-panel__split-button svg path {
  fill: var(--w-color-icon-secondary-hover);
}

div.chooser__create_button button.chooser__choose-button {
  padding: 1.3rem;
}

div.chooser__create_button {
  float: right;
  margin-top: 1.7rem;
}

.translation-header-label {
  font-size: .8rem;
  margin: .2rem 0 0 .5rem;
}

.progress-column {
  text-align: center;
}

.progress-column .w-status {
  opacity: 1;
  transition: opacity 0.5s;
}

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target='dialog'][open]) {
  overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
  box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Add animations */
dialog[data-dialog-target='dialog'][open] {
  animation: fade-in 200ms forwards;
}

dialog[data-dialog-target='dialog'][closing] {
  animation: fade-out 200ms forwards;
}

.translations-buttons {
  border-inline-start: 1px solid var(--w-color-icon-secondary);
  display: flex;
  font-style: normal;
  gap: 1rem;
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 1rem;
  padding-inline-start: 0;
  padding-inline-start: 1.5em;
}

.translations-buttons .bulk-actions-buttons {
  height: 1.3rem;
  margin: auto 0;
}

.translations-buttons .bulk-actions-buttons .button {
  height: 1.3rem;
  margin-right: 0.2rem;
  cursor: pointer;
}

.translations-buttons .num-objects {
  padding-right: 0.6rem;
}

h2 .w-status {
  padding: 0.3em;
}

.job-details {
  padding-bottom: 2rem;
}

div.timing-meta {
  display: inline-flex;
  width: 23rem;
  justify-content: space-between;
}

div.timing-meta div.timing {
  display: block;
}

.revert-headline {
  height: 100%;
  text-align: center;
  padding-top: 18rem;
}

#revert-headline {
  transition: 0.5s;
}

mark {
  background: var(--w-color-warning-100);
  color: #000;
  padding: 1px;
  border-radius: 3px;
}

.field-button {
  position: absolute;
  margin-left: -2.8rem;
  background-color: var(--w-color-surface-field) !important;
  color: var(--w-color-icon-primary) !important;
  border: none;
  height: 2.5rem;
  margin-top: 1px;
  width: 2.5rem;
  font-weight: bold;
  padding: inherit !important;
}

.field-button:hover {
  background-color: var(--w-color-surface-field) !important;
}

.field-button:hover svg {
  fill: var(--w-color-icon-primary-hover);
}

.compare-controls {
  padding-right: 3rem;
  padding-top: 1rem;
}

.compare-panel {
  display: inline-flex;
}

.compare-preview {
  width: 145%;
  display: inherit;
  position: relative;
}

.compare-preview iframe {
  min-width: 452px;
  min-height: 700px;
}

.compare-section__header {
  margin-inline-start: unset;
}

.compare-workflow-form section {
  margin-bottom: 1rem;
}

.compare-action-form {
  padding-top: 0.8rem;
}

dd .w-status {
  margin-bottom: -2px;
}

tr.unpublished {
  -webkit-font-smoothing: auto;
  background: var(--w-color-surface-page) url(/static/wagtailadmin/images/bg-dark-diag.svg);
  background-repeat: repeat;
}

tr.unpublished .title-wrapper,
td.draft-snippet .title-wrapper {
  opacity: 0.5;
}

.compare-buttons {
  display: flex;
}

.button-icon {
  height: 1.2em;
  width: 1.2rem;
  margin-top: 12px;
}

.compare-view {
  padding-left: 2.8rem;
}

.compare-workflow-form {
  padding-top: 2rem;
}

.compare-changes-container {
  margin: 1em -1.2em;
}

.compare-changes-container h2 {
  padding-left: 1em;
}

#id_case_insensitive-label {
  clip: unset;
  height: unset;
  width: unset;
  margin: 8px -67px;
  font-size: 0.8rem;
  display: initial;
  position: absolute;
}

.w-slim-header__search-form .switch__toggle::before {
  height: 24px;
  width: 40px;
}

.w-slim-header__search-form .switch__toggle::after {
  height: 20px;
  width: 20px;
}

.modal-body {
  padding-top: 1.5em;
}

.modal-body .w-header {
  border-top: 5px solid var(--w-color-surface-menus);
  padding-top: 1.3em;
  margin-top: -1.5em;
}

div.content > .w-header {
  padding-top: 1.3em;
}

@media screen and (max-width: 50em) {
  .compare-panel {
    display: block;
  }
}

@media screen and (min-width: 50em) {
  .modal-dialog {
    margin-inline-end: 16rem;
    margin-inline-start: 16rem;
  }
}

@media screen and (min-width: 100em) {
  .modal-dialog {
    margin-inline-end: 34em;
    margin-inline-start: 34em;
  }
  .compare-controls {
    width: 22em;
  }
}

#docx-dialog .w-field__input {
  display: grid;
}

#title-docx-dialog {
  margin-top: -1.2rem;
}

.code-block > pre > code {
  padding: unset;
  box-shadow: unset;
}

.code-block .field-button {
  margin-left: 94%;
}

pre[class*="language-"] {
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  font-size: 1.1em !important;
  font-family: var(--w-font-mono) !important;
  background: var(--w-color-surface-field) !important;
  border: 1px solid var(--w-color-border-field-default) !important;
}

code[class*="language-"], pre[class*="language-"] {
  text-shadow: unset !important;
}

/* Syntax highlighting */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--w-color-grey-400); /* Comments */
  font-style: italic;
}

.token.punctuation {
  color: var(--w-color-grey-600);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted,
.token.operator,
.token.entity,
.token.url,
.token.variable {
  color: var(--w-color-text-context);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--w-color-positive-100) !important; /* Strings */
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: var(--w-color-secondary-400) !important; /* Functions and classes */
}

.token.keyword {
  color: var(--w-color-primary) !important; /* Keywords */
}

.token.regex,
.token.important {
  color: var(--w-color-critical-100) !important; /* Important text */
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

/* Line numbers (if using line numbering plugin) */
.line-numbers .line-numbers-rows {
  border-right-color: var(--w-color-grey-100);
}

.line-numbers-rows > span:before {
  color: var(--w-color-grey-200);
}

.mermaid-widget {
  display: flex;
  flex-direction: column;
}

.mermaid-widget__editor {
  margin-bottom: 1em;
}

.mermaid-widget__preview {
  border: 1px solid var(--w-color-grey-100);
  padding: 1em;
  background-color: var(--w-color-grey-50);
  border-radius: 4px;
  overflow: auto;
}

.mermaid-widget__error {
  color: var(--w-color-critical-100);
  margin-top: 0.5em;
}

#id_mermaid_code {
  padding: 0.5rem 0.8rem;
  font-family: var(--w-font-mono);
  font-size: 0.9rem;
}

.help-block {
  max-width: 840px;
}

.bran-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: -0.3rem;
}

.bran-convert-form {
  max-width: 840px;
  margin-top: -1.2rem;
}

.bran-convert-form .help {
  padding-bottom: 1.2rem;
}

.bran-preview-block {
  max-width: 840px;
  background-color: var(--w-color-surface-field);
  border: 1px solid var(--w-color-border-field-default);
  border-radius: 4px;
  padding: 1rem;
  margin: 0.5rem 0 2rem 0;
}

.bran-preview-block h2,
.bran-preview-block h3 {
  color: var(--w-color-surface-button-default);
  font-weight: 600;
}

.icon.icon-help {
  margin-top: 0.16rem;
}

.fkscore button {
  background-color: unset;
}

.status-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
}

.status-splash > div[data-controller="status"] {
  display: none;
}

.status-splash .icon-spinner {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

.status-splash p {
  max-width: 668px;
  text-align: center;
  line-height: 2;
  font-size: medium;
}