article > div > .ewcms-page-section,
article > div > div > .ewcms-content-row-default > div > .ewcms-page-section {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
html[dir=rtl] article > div > .ewcms-page-section,
html[dir=rtl] article > div > div > .ewcms-content-row-default > div > .ewcms-page-section {
  left: auto;
  right: 50%;
  margin-right: -50vw;
}
.ewcms-page-section {
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(14, 71, 203, .2);
}

.ecl-content-item-block .ecl-row .ecl-content-item-block__item:not(.vertical) article.ecl-content-item {
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 1.5rem;
}
.ecl-content-item-block .ecl-row .ecl-content-item-block__item.last-item article.ecl-content-item {
  border-bottom: 0;
  padding-bottom: 0;
}
.ecl-content-item-block .ecl-row .ecl-content-item-block__item article.ecl-content-item {
  border-bottom: 0;
  padding-bottom: 0;
}
@media screen and (min-width: 996px) {
  .ecl-content-item-block .ecl-row .ecl-content-item-block__item.last-item-column article.ecl-content-item {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.ewcms-top-sidebar {
  min-height: 0px!important;
}

/* Limit the width of the figure container to the same width as the embed image style. */
.ecl-media-container--custom-ratio.ewcms-embed-small,
.ewcms-embed-video-small {
  max-width: 253px;
}
.ecl-media-container--custom-ratio.ewcms-embed-medium,
.ewcms-embed-video-medium {
  max-width: 538px;
}
.ecl-media-container--custom-ratio.ewcms-embed-large,
.ewcms-embed-video-large {
  max-width: 712px;
}
@media only screen and (max-width: 767px) {
  .ecl-media-container--custom-ratio.ewcms-embed-large,
  .ecl-media-container--custom-ratio.ewcms-embed-medium,
  .ewcms-embed-video-large,
  .ewcms-embed-video-medium {
    max-width: 100%;
  }
}
@media only screen and (max-width: 285px) {
  .ecl-media-container--custom-ratio.ewcms-embed-small,
  .ewcms-embed-video-small {
    max-width: 100%;
  }
}
/* Add 100% margin right to avoid having multiple media containers on the same row. (The same way that there is no
   extra text from the editor on the same row with the media container.) */
@media only screen and (min-width: 767px) {
  .ecl > .ecl-media-container.ecl-media-container--custom-ratio.ewcms-embed-medium {
    margin-right: calc(100% - 450px);
  }
  .ecl > .ecl-media-container.ecl-media-container--custom-ratio.ewcms-embed-small {
    margin-right: calc(100% - 485px);
  }
}

.ecl-link--primary-highlight, .ecl-link--primary, .ecl-link--secondary {
  text-decoration: none!important;
}

/* Add margin bottom to translation form. */
.ecl-form fieldset#edit-translation-options-wrapper {
  margin-bottom: 16px;
}

/* Minimise margin top of paragraph tags following an embedded media in a wysiwyg field. */
.ecl .ecl-media-container + p {
  margin-top: 12px;
}

/* Add margin bottom to Search button in filters form. */
.ecl-col-s-12.ecl-col-m-3 #edit-actions .ecl-button--primary {
  margin-bottom: 16px;
}

.ecl + .ecl-timeline {
  margin-top: 20px;
}

/* Unset the 80ch limit from ECL for Content row paragraph. */
.ewcms-content-row-max-width {
  --max-w: none!important;
}

/* Webtools social share block - icons size @todo Remove the custom css when this is available in the widget. */
.wt-sbkm svg {
  width: 24px;
  height: 24px;
}
.wt-sbkm svg g {
  transform: none!important;
}
.wt-sbkm a {
  padding: 0;
}

/* Add underline styling for links inside div.ecl ul li. */
.ecl ul li:not([class*="ecl-"]) .ecl-link {
  text-decoration: underline;
}

/* Style the wysiwyg highlight marker yellow. */
.custom-highlight-marker-ecl {
  background-color: var(--ecl-color-secondary-20) !important;
  color: var(--c-d-80) !important;
}

/* Add top margin to ECL text input when follows an ECL label. */
.ecl-form-group--text-input label.ecl-form-label + input.ecl-text-input.ecl-u-mt-none {
  margin-top: var(--s-xs)!important;
}