#toolbar-administration.toolbar .toolbar-bar .toolbar-icon-system-oxfcms-site-settings::before {
  -webkit-mask-image: url("../../../../../themes/contrib/gin/dist/media/sprite.svg#config-view");
  mask-image: url("../../../../../themes/contrib/gin/dist/media/sprite.svg#config-view");
}
#toolbar-administration.toolbar .toolbar-bar .toolbar-icon-system-oxfcms-site-appearance::before {
  -webkit-mask-image: url("../../../../../themes/contrib/gin/dist/media/sprite.svg#appearance-view");
  mask-image: url("../../../../../themes/contrib/gin/dist/media/sprite.svg#appearance-view");
}
#toolbar-administration.toolbar .toolbar-bar .toolbar-icon-help-oxfcms::before {
  -webkit-mask-image: url("../../../../../themes/contrib/gin/dist/media/sprite.svg#help-view");
  mask-image: url("../../../../../themes/contrib/gin/dist/media/sprite.svg#help-view");
}
/* Fix the width of the media preview in an image component */
fieldset[data-drupal-selector="edit-field-image"] .media-library-selection .media-library-item--grid {
  width: 80%;
}
/* Add background colour to the expanded boxes on the RHS of the node edit form
 * so that its easier to see what fields are grouped together.
 * Faff with the margins and padding so that the bg colour doesn't hit the edges.
 */
/* .me-node-form details.claro-details[open] {
  background-color: #f3f8fb;
  padding: 0px 15px;
  margin:  0px -15px;
}

.me-node-form .claro-details__wrapper {
  margin-top: 5px;
}

.me-node-form details.claro-details[open] >div >div {
  padding: 5px 10px;
  margin: -5px -10px;
} */
.me-node-form details.claro-details[open] >div >div:hover {
  background-color: rgba(50 117 224 / 10%);
}
/* Hide the 'URL' label for the url sub-field in field_url as its duplicated by the field label. */
.me-node-form .form-item--field-url-0-uri .form-item__label {
  display: none;
}
/* Remove duplicated 'Delete' button on person social links field */
.me-node-form  .field--name-field-social-channels td > input {
  display: none;
}
/* Stop the social links field on person from overflowing on the person edit page */
.me-node-form .field--name-field-social-channels .form-item.form-type--select {
  max-width: max-content;
}
.me-node-form .field--name-field-social-channels .form-type--textfield {
  max-width: 220px;
}
.me-node-form .field--name-field-social-channels .form-type--textfield input {
  max-width: 100%;
}
/* Add padding to media library form elements */
fieldset.media-library-form-element:not(.fieldgroup) {
  padding: 15px;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}
/* Environment indicator */
div#environment-indicator {
  padding: 8px 20px 5px 5px;
  text-align: right;
  font-weight: unset;
  text-shadow: unset;
  .description {
    display: block;
    text-wrap: wrap;
  }
}
#toolbar-item-administration-tray {
  border-top-width: 0 !important;
}
/* Make mercury editor modals have a min width and height */
/* .layout-paragraphs-component-form {
  min-width: min(550px, 90vw);
  min-height: min(350px, 90vh);
} */
/* Make ckeditor dialog wider when opened up within mercury editor modal */
/* .layout-paragraphs-component-form .field--name-field-wysiwyg-content {
  min-width: min(1100px, 90vw);
  min-height: min(350px, 90vh);
} */
/* Remove the double env indicator from node edit page caused by the iframe */
body.path-node #environment-indicator {
  display: none;
}
/* Paragraphs library overrides */
body.paragraphs-library-add-form {
  .paragraph-type-top {
    display: none;
  }
  .field--type-entity-reference-revisions .fieldset__legend {
    display: none;
    ~ .fieldset__wrapper {
      margin-top: inherit;
    }
  }
}
.lpb-component-list__item.type-section_wrapper {
  display: none;
}

#edit-paragraphs-0-top,
#edit-paragraphs-0-subform-field-paragraph-section .fieldset__label {
  display: none;
}
/*
Add a :before to section template edit area to offset and allow
section edit buttons be visible.
*/
.path-me-template .js-lpb-component-list::before {
  content: "Section template";
  text-align: center;
  display: block;
  padding: 15px;
  font-weight: bold;
  font-style: italic;
}
/* Virus scanning text */
.media-form .ajax-progress--throbber::after,
.media-library-add-form__input-wrapper .ajax-progress.ajax-progress--throbber::after {
  content: "Virus scanning in progress. Thank you for being patient";
  padding-left: 10px;
}
.media-library-add-form__input-wrapper .ajax-progress .ajax-progress__message {
  display: none;
}
/**
Interface adjustments to spoof Reusable content into looking like a
non-layout component. Hide "Layout" tab, show node lookup field, hide
on selection of "Styles" tab
*/
#layout-paragraphs-element:has(+ .field--name-field-reusable-paragraph) .me-tab-group--layout,
.me-tabs:has(~ .field--name-field-reusable-paragraph) .horizontal-tab--layout {
  display: none;
}

.me-tab-group.me-tab-group--content.field--name-field-reusable-paragraph {
  display: block;
}

.me-horizontal-tab-radios:has(input[value='styles']:checked) ~ .field--name-field-reusable-paragraph {
  display: none;
}

.is-mercury-edit-mode .paragraph--type--section {
  width:100%;
}
/* .oxfcms-layout :not(.js-lpb-region) > .lpb-btn--add {
  display: none;
} */
/* .is-mercury-edit-mode .lpb-controls {
  flex-wrap: wrap;
} */
/* .is-mercury-edit-mode .oxfcms-layout.oxfcms-layout-banner {
  z-index: 100;
  position: relative
} */
/* .lp-builder .paragraph--type--oxfcms-layout-banner .lpb-btn.before {
  top: -30px;
}

.lp-builder .paragraph--type--oxfcms-layout-banner .lpb-btn.after {
  bottom: -30px;
}

.lpb-controls.is-layout {
  z-index: 100;
} */

#menu-overview .tabledrag-cell-content__item button {
  border: 0;
  background: transparent;
  padding: 0;
  outline: 0;
}
/* style the after text prompt in custom regions */
.is-mercury-edit-mode a.lpb-btn--add::after {
  display:block;
  width: 200px;
  margin-left: 50px;
  background-color: #fcfcfc;
  border: 1px solid #393939;
  color: #393939;
  padding:  5px 10px;
  border-radius: 5px;
  font-family: 'Roboto', sans-serif;
}

.is-mercury-edit-mode div.js-lpb-region {
  width: 100%;
}
/* Layout selector for 1-4 columns - display in a 4 column grid */

mercury-dialog[title="Create columns"], mercury-dialog[title="Edit Columns"]  {
  .layout-select {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
  }

  .layout-select > div {
    width: 100%;
    flex: 0 0 auto !important;
  }

  .layout-select > div label.option {
    padding: 8px 10px !important;
  }

  .layout-select > div:first-child::before {
    content: "One column";
  }
  .layout-select > div:nth-child(2)::before {
    content: "Two columns";
  }
  .layout-select > div:nth-child(7)::before {
    content: "Three columns";
  }
  .layout-select > div:last-child::before {
    content: "Four columns";
  }

  .layout-select > div:first-child::before,
  .layout-select > div:nth-child(2)::before,
  .layout-select > div:nth-child(7)::before,
  .layout-select > div:last-child::before {
    margin-left: 10px !important;
  }
  /* Remove old grid-specific rules - no longer needed with flex */
  .layout-select > div:nth-child(2) {
    /* grid-row-start: 1; */
  }
  .layout-select > div:nth-child(3) {
    /* grid-row-start: 2; */
  }
  .layout-select > div:nth-child(4) {
    /* grid-row-start: 3; */
  }
  .layout-select > div:nth-child(5) {
    /* grid-row-start: 4; */
  }
  .layout-select > div:nth-child(6) {
    /* grid-row-start: 5; */
  }
  .layout-select > div:nth-child(7) {
    /* grid-row-start: 1; */
  }
  .layout-select > div:nth-child(8) {
    /* grid-row-start: 2; */
  }
  .layout-select > div:nth-child(9) {
    /* grid-row-start: 3; */
  }
  .layout-select > div:nth-child(10) {
    /* grid-row-start: 4; */
  }
  .layout-select .layout-select__item-title {
    margin-top: 15px;
  }
}
/* div#me-iframe-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

body.path-mercury-editor {
  overflow: hidden;
}

.me-inline-editor__toolbar {
  position: sticky !important;
  top: 0;
}

/* Override the weird svg image that gets added by Claro's form--select.css */
.layout-paragraphs-component-form .form-element--type-select,
.layout-paragraphs-component-form .form-element--type-select:focus {
  background-image: url("/modules/contrib/mercury_editor/images/icons/icon-down.png") !important;
}
/* Fix text going white when clicking exit button */
#me-done-btn {
  padding-top: 6px;
}

#me-done-btn:hover:focus {
  color: var(--gin-color-primary);
}
/* Styling for component selection popup. */
.lpb-component-list__group--content {
  .lpb-component-list__group-label {
    font-size: 1.125rem;
    color: #232429;
    margin-top: 25px;
  }
  .lpb-component-list__group-description {
    font-size: 1rem;
    color: #666666;
    margin-top: 0;
  }
}

#me-save-btn:hover, #me-save-btn:focus {
  color: var(--gin-color-primary);
  background-color: var(--me-button-color-background-primary-hover);
}
/* Fix truncated Remove button in media library widget */
.media-library-item__remove.icon-link {
  overflow: visible !important;
  text-indent: 0 !important;
  width: auto !important;
  min-width: fit-content !important;
  padding-left: 24px;
}

/* Hide duplicate icon in mercury-dialog messages (Gin theme already sets one) while preserving spacing */
mercury-dialog .messages__title::before {
  content: "" !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-color: transparent !important;
}