:root {
  --lp-hover-outline-color: #0550e6;
  --lp-hover-outline-width: 2px;
  --lp-focus-outline-color: #0550e6;
  --lp-focus-outline-width: 4px;
  --lp-focus-ui-outline-color: #fff;
  --lp-focus-ui-outline-width: 2px;
  --lp-controls-bg-color: #0550e6;
  --lp-controls-fg-color: #fff;
  --lp-controls-bg-color--layout: #0550e6;
  --lp-controls-fg-color--layout: #fff;
  --lp-btn-bg-color: #0550e6;
  --lp-btn-fg-color: #fff;
  --lp-controls-sticky-top: 70px;
  --lp-controls-gap: 15px;
}

.lp-builder {
  position: relative;
  min-height: 30px;
}
.js-lpb-region {
  position: relative;
  box-sizing: border-box;
  min-height: 40px;
}
.lpb-empty-container__wrapper {
  position: relative;
}
.lpb-empty-container {
  padding-bottom: 30px;
  text-align: center;
}
.lpb-empty-toggle {
  min-height: 20px;
}
.lpb-empty-message {
  padding-bottom: 40px;
  text-align: center;
}
.lpb-empty-container__wrapper .lpb-section-menu__wrapper {
  bottom: 20px;
}
.js-lpb-component {
  position: relative;
  margin: 0 auto;
}
.lpb-hover-label {
  z-index: 1000;
  padding: 2px 6px 2px 7px;
  white-space: nowrap;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  border-radius: 2px;
  background: #888;
  font-size: 0.7em;
}

/**
 * Highlight states.
 */

/* - Outlines - */
.js-lpb-component[data-hover="true"] {
  outline: var(--lp-hover-outline-width) solid var(--lp-hover-outline-color);
  &:hover {
    cursor: default;
  }
}
.js-lpb-component[data-active="true"] {
  outline: var(--lp-focus-outline-width) solid var(--lp-focus-outline-color);
}
.js-lpb-component[data-active="true"] .js-lpb-region {
  outline: 1px dotted blue;
}
.js-lpb-component[data-active="true"] .js-lpb-component:not([data-active="true"]) .js-lpb-region {
  outline: none;
}
.lp-builder.is-dragging .js-lpb-region,
.lp-builder.is-navigating .js-lpb-region,
.lp-builder.is-dragging .js-lpb-component,
.lp-builder.is-navigating .js-lpb-component:not([data-active="true"]) {
  outline: 1px dotted blue;
}

/* - UI Controls - */
.js-lpb-ui {
  transition: opacity 0.25s linear;
}
.js-lpb-component:not([data-active="true"]) .js-lpb-ui,
.js-lpb-component[data-active="true"] .js-lpb-component:not([data-active="true"]) .lpb-controls {
  opacity: 0;
}
.js-lpb-component[data-active="true"]:not(.is-dragging) .lpb-controls,
.js-lpb-component[data-active="true"].is-dragging .lpb-controls.lpb-drag-image {
  opacity: 1;
}
.js-lpb-component[data-active="true"]:not(.is-dragging):hover > .lpb-btn--add,
.js-lpb-component[data-active="true"]:not(.is-dragging) > .lpb-btn--add:focus {
  opacity: 1;
}
.js-lpb-component[data-active="true"] .js-lpb-region:hover > .lpb-btn--add,
.js-lpb-component[data-active="true"] .js-lpb-region > .lpb-btn--add:focus {
  opacity: 1;
}
.lpb-layout .lpb-layout-label {
  position: absolute;
  right: 0;
  padding: 5px 10px;
  border: 1px dotted #ccc;
  font-size: small;
}
.lpb-controls {
  position: absolute;
  z-index: 80;
  top: 0;
  left: 50%;
  display: flex;
  width: min-content;
  margin: 0 auto;
  padding: 2px;
  transform: translate(-50%, calc(-100% - var(--lp-controls-gap)));
  opacity: 0;
  color: var(--lp-controls-fg-color, #000);
  border-radius: 4px;
  background-color: var(--lp-controls-bg-color, #fff);
  & .lpb-controls-label {
    padding: 0 5px 0 0;
    white-space: nowrap;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: bold;
  }
  &.is-fixed {
    position: fixed;
    top: var(--lp-controls-sticky-top);
    left: var(--lp-controls-sticky-left, 50%);
    transform: translate(-50%, 0);
  }
  &.is-scrolled-past {
    opacity: 0 !important;
  }
}
.lpb-controls.position-below {
  top: auto;
  bottom: 0;
  transform: translate(-50%, calc(100% + var(--lp-controls-gap)));
}
.lpb-controls:hover,
.lpb-controls:focus-within {
  z-index: 90;
}
.lpb-controls a {
  font-size: 0;
}
.lpb-controls-label {
  padding: 0 5px 0 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 30px;
}
.lpb-drag,
.lpb-up,
.lpb-down,
.lpb-edit,
.lpb-duplicate,
.lpb-delete {
  overflow: hidden;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  &::before {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    content: "";
    color: var(--lp-controls-fg-color);
    border-radius: 3px;
    background-color: currentColor;
  }
}
.lpb-up:hover,
.lpb-down:hover,
.lpb-edit:hover,
.lpb-duplicate:hover,
.lpb-delete:hover {
  background-color: rgb(0, 0, 0, 0.3);
}
.lpb-up:focus,
.lpb-down:focus,
.lpb-edit:focus,
.lpb-duplicate:focus,
.lpb-delete:focus {
  outline: var(--lp-focus-ui-outline-width) solid var(--lp-focus-ui-outline-color);
}
.lpb-drag::before {
  --webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 11C13.3284 11 14 10.3284 14 9.5C14 8.67157 13.3284 8 12.5 8C11.6716 8 11 8.67157 11 9.5C11 10.3284 11.6716 11 12.5 11Z' fill='%23000000'/%3E%3Cpath d='M12.5 16C13.3284 16 14 15.3284 14 14.5C14 13.6716 13.3284 13 12.5 13C11.6716 13 11 13.6716 11 14.5C11 15.3284 11.6716 16 12.5 16Z' fill='%23000000'/%3E%3Cpath d='M14 19.5C14 20.3284 13.3284 21 12.5 21C11.6716 21 11 20.3284 11 19.5C11 18.6716 11.6716 18 12.5 18C13.3284 18 14 18.6716 14 19.5Z' fill='%23000000'/%3E%3Cpath d='M17.5 11C18.3284 11 19 10.3284 19 9.5C19 8.67157 18.3284 8 17.5 8C16.6716 8 16 8.67157 16 9.5C16 10.3284 16.6716 11 17.5 11Z' fill='%23000000'/%3E%3Cpath d='M19 14.5C19 15.3284 18.3284 16 17.5 16C16.6716 16 16 15.3284 16 14.5C16 13.6716 16.6716 13 17.5 13C18.3284 13 19 13.6716 19 14.5Z' fill='%23000000'/%3E%3Cpath d='M17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18C16.6716 18 16 18.6716 16 19.5C16 20.3284 16.6716 21 17.5 21Z' fill='%23000000'/%3E%3C/svg%3E%0A");

  mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 11C13.3284 11 14 10.3284 14 9.5C14 8.67157 13.3284 8 12.5 8C11.6716 8 11 8.67157 11 9.5C11 10.3284 11.6716 11 12.5 11Z' fill='%23000000'/%3E%3Cpath d='M12.5 16C13.3284 16 14 15.3284 14 14.5C14 13.6716 13.3284 13 12.5 13C11.6716 13 11 13.6716 11 14.5C11 15.3284 11.6716 16 12.5 16Z' fill='%23000000'/%3E%3Cpath d='M14 19.5C14 20.3284 13.3284 21 12.5 21C11.6716 21 11 20.3284 11 19.5C11 18.6716 11.6716 18 12.5 18C13.3284 18 14 18.6716 14 19.5Z' fill='%23000000'/%3E%3Cpath d='M17.5 11C18.3284 11 19 10.3284 19 9.5C19 8.67157 18.3284 8 17.5 8C16.6716 8 16 8.67157 16 9.5C16 10.3284 16.6716 11 17.5 11Z' fill='%23000000'/%3E%3Cpath d='M19 14.5C19 15.3284 18.3284 16 17.5 16C16.6716 16 16 15.3284 16 14.5C16 13.6716 16.6716 13 17.5 13C18.3284 13 19 13.6716 19 14.5Z' fill='%23000000'/%3E%3Cpath d='M17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18C16.6716 18 16 18.6716 16 19.5C16 20.3284 16.6716 21 17.5 21Z' fill='%23000000'/%3E%3C/svg%3E%0A");
  cursor: grab;
}
.lpb-up::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18L15 12L21 18H9Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18L15 12L21 18H9Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}
.lpb-down::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 12L15 18L9 12L21 12Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='6' fill='currentColor' transform='translate(21 18) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 12L15 18L9 12L21 12Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='6' fill='currentColor' transform='translate(21 18) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.lpb-down[tabindex="-1"]:hover,
.lpb-up[tabindex="-1"]:hover {
  background-color: transparent;
  box-shadow: none;
}
.lpb-down[tabindex="-1"],
.lpb-up[tabindex="-1"] {
  opacity: 0.3;
}
.lpb-edit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23000000'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='%23000000'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}
.lpb-duplicate::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7,8C21.4,8,22,8.6,22,9.3v7.9c0,0.7-0.6,1.3-1.3,1.3h-7.9c-0.7,0-1.3-0.6-1.3-1.3V9.3c0-0.7,0.6-1.3,1.3-1.3H20.7 M12.8,19.4c-1.2,0-2.2-1-2.2-2.2v-5.7H9.3c-0.7,0-1.3,0.6-1.3,1.3v7.9C8,21.4,8.6,22,9.3,22h7.9c0.7,0,1.3-0.6,1.3-1.3v-1.3H12.8z' fill='black' /%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7,8C21.4,8,22,8.6,22,9.3v7.9c0,0.7-0.6,1.3-1.3,1.3h-7.9c-0.7,0-1.3-0.6-1.3-1.3V9.3c0-0.7,0.6-1.3,1.3-1.3H20.7 M12.8,19.4c-1.2,0-2.2-1-2.2-2.2v-5.7H9.3c-0.7,0-1.3,0.6-1.3,1.3v7.9C8,21.4,8.6,22,9.3,22h7.9c0.7,0,1.3-0.6,1.3-1.3v-1.3H12.8z' fill='black' /%3E%3C/svg%3E%0A");
}
.lpb-delete::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23000000'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 8H16C16.5523 8 17 8.44772 17 9H21V11H9V9H13C13 8.44772 13.4477 8 14 8ZM10 12H20L19.09 21.0995C19.0389 21.6107 18.6088 22 18.095 22H11.905C11.3912 22 10.9611 21.6107 10.91 21.0995L10 12Z' fill='%23000000'/%3E%3C/svg%3E%0A");
}
.js-lpb-region:has(.js-lpb-component) .lpb-btn--add.center {
  display: none;
}
.js-lpb-region:not(:has(.js-lpb-component)) .lpb-btn--add.center {
  display: inline-block;
}
.lpb-btn--add {
  position: absolute;
  z-index: 80;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: auto;
  transform: translateX(-50%);
  border-radius: 100%;
  background-color: var(--lp-btn-bg-color);
}
.lpb-btn--add:hover,
.lpb-btn--add:focus-within {
  z-index: 90;
  text-decoration: underline;
  color: var(--lp-btn-fg-color);
}
.js-lpb-component .lpb-btn--add,
.js-lpb-region .lpb-btn--add {
  opacity: 0;
}
.lpb-btn--add:focus {
  outline: 2px solid blue;
}
.lpb-btn--add.center {
  top: 50%;
  transform: translate(-50%, -50%);
}
.lpb-btn--add.before {
  top: 0;
  transform: translate(-50%, calc(-50% - 1.5px));
}
.lpb-horizontal-region .lpb-btn--add.before {
  top: 50%;
  left: 0;
  transform: translate(calc(-50% - 1.5px), -50%);
}
.lpb-btn--add.after {
  bottom: 0;
  transform: translate(-50%, calc(50% + 1.5px));
}
.lpb-horizontal-region .lpb-btn--add.after {
  top: 50%;
  bottom: auto;
  left: 100%;
  transform: translate(calc(-50% + 1.5px), -50%);
}
.hide-ui-elements .lpb-hide-on-drag {
  display: none;
}
.lpb-btn--add::before {
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill-rule='evenodd' clip-rule='evenodd' d='M13 6V11H18V13H13V18H11V12.999L6 13V11L11 10.999V6H13Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
  background-size: cover;
  fill: white;
}
.lpb-btn--tooltip {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(100% - 10px);
  display: block;
  visibility: hidden;
  width: auto;
  max-width: none;
  height: 20px;
  padding: 0 10px 0 14px;
  transition: all 0.1s ease-in-out;
  transform: scaleX(0);
  transform-origin: left;
  white-space: nowrap;
  letter-spacing: 1px;
  opacity: 0;
  color: white;
  border-radius: 2px;
  background-color: var(--lp-btn-bg-color);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 20px;
}
.lpb-btn--add:hover.use-tooltip .lpb-btn--tooltip,
.lpb-btn--add:focus-within.use-tooltip .lpb-btn--tooltip {
  visibility: visible;
  transform: scaleX(1);
  opacity: 1;
}

/* - Sortable Drag States - */

.sortable-placeholder {
  opacity: 0.25;
}
.sortable-ghost {
  position: relative;
  align-self: stretch;
  background: green;
}
.sortable-ghost * {
  display: none;
}
.sortable-placeholder + .sortable-ghost {
  display: none;
}
.sortable-ghost::before {
  position: absolute;
  top: -10px;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  content: "";
  transform: translate(-50%, -50%);
  background: blue;
}
.is-dragging {
  outline: none !important;
}
.js-lpb-component.is-dragging {
  cursor: grabbing;
}
.js-lpb-component.is-dragging .js-lpb-region,
.js-lpb-component.is-dragging .js-lpb-component {
  outline: none;
}
.lpb-drag-image:hover,
.lpb-drag-image:active {
  cursor: grabbing;
}

/* - Formatter Widget - */

form.layout-paragraphs-builder-form {
  margin-right: -20px;
  margin-left: -20px;
  outline: 1px solid rgb(0, 0, 0, 0.15);
}

form.layout-paragraphs-builder-form .js-lpb-component-list {
  padding: 20px;
}

.lpb-enable {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 0;
}

.lpb-enable__button {
  display: flex;
}

a.lpb-enable-button {
  display: flex;
  align-items: center;
  padding: 3px 12px 3px 0;
  color: white;
  border: none;
  border-radius: 3px;
  background-color: #00659b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.lpb-enable-button:hover,
a.lpb-enable-button:focus {
  padding: 3px 12px 3px 0;
  color: white;
  border-bottom-style: none;
  outline: none;
}
a.lpb-enable-button::before {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  content: "";
  opacity: 0.5;
  border-radius: 3px;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.284 8.63082L19.6136 7.30121C20.0152 6.8996 20.6664 6.8996 21.068 7.30121L22.6988 8.93203C23.1004 9.33365 23.1004 9.98479 22.6988 10.3864L21.3692 11.716L18.284 8.63082Z' fill='currentColor'/%3E%3Cpath d='M17.2556 9.65922L9.0284 17.8864L8 22L12.1136 20.9716L20.3408 12.7444L17.2556 9.65922Z' fill='currentColor'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.lpb-formatter {
  position: relative;
}
.lpb-formatter:hover,
.lpb-formatter:focus-within {
  outline: 1px solid blue;
}

.lpb-formatter:hover .lpb-enable,
.lpb-formatter:focus-within .lpb-enable {
  opacity: 1;
}

.lpb-tooltiptext {
  position: absolute;
  z-index: 90;
  bottom: 100%;
  left: -7px;
  width: auto;
  margin-bottom: -2px;
  padding: 10px;
  transition: all 0.15s linear;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  color: #fff;
  background-color: black;
}
.lpb-tooltiptext::after {
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 20px;
  content: " ";
  border-width: 7px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.lp-builder:not(.is-dragging) .lpb-tooltip--hover:hover + .lpb-tooltiptext {
  transition-delay: 1s;
}
.lp-builder:not(.is-dragging) .lpb-tooltip--focus:focus + .lpb-tooltiptext,
.lp-builder:not(.is-dragging) .lpb-tooltip--hover:hover + .lpb-tooltiptext,
.lpb-tooltiptext--visible {
  opacity: 1;
}
.js-lpb-ui-message {
  position: static;
  text-align: center;
  color: #fff;
  background-color: #000;
}

.ck.ck-balloon-panel.ck-balloon-panel_visible {
  z-index: 1500;
}