/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2.use[3]!./web/themes/uw/un2_theme/scss/libraries/layouts.scss ***!
  \****************************************************************************************************************************************************************************************************************/
/********
 * Colors
 ********/
/************
 * Typography
 ************/
/*
 * We can use the font weight fot the bold styling example below
 * .test-font { font-family: $font-default; } regular
 * .test-font-bold { font-family: $font-default; font-weight: $font-weight-bold; }
 * @see: _typography.scss
*/
/*****************
 * Global elements
 *****************/
/****************
 * Sizing/Spacing
 ****************/
/*******
 * Forms
 ******/
/***********
 * Bootstrap
 ***********/
/**********
 * Mappings
 *********/
/*
 * IMPORTANT:
 *   - This file should *only contain* variables not considered UN style guide *
 */
/**
  Help theming for rtl languages.
*/
/*
 * This handles indentation for the depth of child levels for accordion
 * TODO: improve this implementation, overly complex due to previous design
 */
/*
 * Reset the button appearance to make it look like regular text.
 *
 * The padding can be optionally passed, as it is usually overriden.
 *
 * @param {Number} $padding - The padding to apply to the button.
 */
/*
 * Adds color & text-shadow-based outline to type.
 *
 * @param {color} $color - Color of the marker.
 * @param {color} $border-color - Color for the outline, or border.
 * @param {percent} $border-alpha - Value used in sass:color.scale().
 */
/*
 * Encapsulates the styles for the WYSIWYG editor.
 *
 * We use a mixin in order to be able to reuse these rules inside the
 * CKEditor5 stylesheet to provide the same styles for the editor content.
 * @see un2_theme/scss/admin/_ckeditor5.scss.
 * @see un2_theme/scss/components/_wysiwyg.scss.
 */
/*
 * A "section" in layout builder contains content that is logically grouped.
 * This means that the blocks in a section, are visually clustered.
 * You should create sections to provide visual divisions between different
 * groups of content on the page.
 *
 * Each section in layout builder is composed of the following elements
 * .uwl-wrapper
 *   .uwl-container
 *     .uwl-row
 *       .uwl-col (one or more)
 * @see
 * - blb-container-wrapper.html.twig
 * - blb-container.html.twig
 * - blb-section.html.twig (row/col)
 */
/***************
 * Wrapper-level
 ***************
 * should be quite generic and widely-used
 */
.uwl-wrapper {
  margin-block-end: 2rem;
  /*
   * Dividers
   */
  /*
   * Spacing
   */
  /*
   * Colors
   */
  /*
   * Seections
   */
}
.uwl-wrapper.uwl-horizontal-rule > .uwl-container .uwl-row:first-of-type::before {
  border-block-start: 1px solid #bfbfbf;
  padding-block-start: 2rem;
  width: 100%;
  content: "";
}
.uwl-wrapper.uwl-horizontal-rule > .uwl-container .uwl-row:first-of-type:not(.no-gutters)::before {
  margin-inline: 0.75rem;
}
.uwl-wrapper.uwl-spacing--lg {
  margin-block-end: 4rem !important;
}
.uwl-wrapper.uwl-spacing--none {
  margin-block-end: 0 !important;
}
.uwl-wrapper.uwl-bg--gray > .uwl-container .uwl-row:first-of-type {
  margin-right: 0;
  margin-left: 0;
  background-color: #f5f5f5;
}
.uwl-wrapper.uwl-bg--gray > .uwl-container .uwl-row:first-of-type:not(.no-gutters) {
  padding: 1rem 0.25rem;
}
.uwl-wrapper[class*=uwl-e2e-bg--] {
  margin-block: 4rem;
  padding-block: 4rem;
}
.uwl-wrapper.uwl-e2e-bg--blue {
  background-color: #f2fafd;
}
.uwl-wrapper.uwl-e2e-bg--gray {
  background-color: #f5f5f5;
}
.uwl-wrapper.uwl-section-heading {
  margin-block-end: 0;
  padding-block-end: 0;
}
.uwl-wrapper.uwl-section-heading h2,
.uwl-wrapper.uwl-section-heading h3,
.uwl-wrapper.uwl-section-heading h4,
.uwl-wrapper.uwl-section-heading h5 {
  margin-block-start: 0;
}
.uwl-wrapper.uwl-footer {
  margin-block-start: 4rem;
  background-color: #f5f5f5;
  padding-block: 4rem;
  margin-block-end: -1rem;
}
.uwl-wrapper.uwl-centered-column .uwl-row, .uwl-wrapper.uwl-centered-column-wide .uwl-row {
  justify-content: center;
}
@media (min-width: 992px) {
  .uwl-wrapper.uwl-centered-column .col-12 {
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
}
@media (min-width: 992px) {
  .uwl-wrapper.uwl-centered-column-wide .col-12 {
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
}

/* XXX: This is not working either way so for now just commenting for removal
// We have a default spacing between page header and page content. That spacing should be reverted in case the first
// section on layout builder is a banner. That behavior is controlled by the "Suppress margins container" setting.
// See _tabs.scss: ".content-header-container nav.tabs".
.container:first-child,
.container-fluid:first-child {
  &:has(.supress-margins-container) {
    margin-block-start: uw.$spacer * -2;
  }
}

.supress-margins-container:first-child {
  &:has(> .w-100) {
    margin-block-start: uw.$spacer * -2;
  }
}
*/
.debug-layouts .uwl-wrapper {
  border: 1px solid #ff5e5e;
  background: #ffcdcd;
}
.debug-layouts .uwl-container {
  border: 1px solid #fff25b;
  background: #fffbcd;
}
.debug-layouts .uwl-row {
  border: 1px solid #5dff7a;
  background: #cdffd6;
}
.debug-layouts .uwl-col {
  border: 1px solid #5a86ff;
  background: #cddaff;
}

/*
 * Custom UW form styles
 *
 * These styles are specifically designed for the following landing pages:
 *
 * - `/multimedia`
 * - `/news`
 * - `/speeches-and-statements`
 * - `/press-releases`
 * - `/document-library`
 * - `/events`
 *
 * These are clean and minimal styles intended for forms.
 * In the future, all forms will be migrated to use these styles for consistency.
 */
.uwl-wrapper.uwl-search-highlighted {
  border-block: 1px solid #bfe6f6;
  background: #f2fafd;
  padding-block: 1.5rem;
}
@media (max-width: 575.98px) {
  .uwl-wrapper.uwl-search-highlighted form .form-row > * {
    width: 100%;
  }
}

.uwl-article__body .block-uw-event.block-uw-event-fields {
  float: inline-end;
  margin-inline-start: 1rem;
  margin-block-end: 1rem;
  width: 50%;
}
.uwl-article__body .layout-builder__region .block-uw-event.block-uw-event-fields {
  z-index: 1;
}

.uwl-article__engagement .uw-share-widget {
  padding: 0;
}

@media (max-width: 767.98px) {
  .uwl-article__body .block-uw-event.block-uw-event-fields {
    float: none;
    margin-inline-start: 0;
    width: 100%;
  }
  .uwl-article__engagement .block-field-blocknodeuw-eventuw-tags {
    margin-block-start: 1rem;
  }
}
.media--uw_image--view-mode-full .blb-wrapper {
  margin-block-end: 2rem;
}
.media--uw_image--view-mode-full .section--multimedia .field--name-uw-summary p {
  margin-bottom: 0;
}

#section--lead-media .block-field-blockmediauw-audiomedia-audio-file {
  margin-block-start: 1rem;
}