/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-other/cd-layout--page.css ***!
  \**********************************************************************************************************************************************************/
/**
 * Common Design: Page Layout
 */
html {
  height: 100%;
}

body {
  min-height: 100%;
}

/* Drupal-generated parent of our CD layout markup */
.dialog-off-canvas-main-canvas {
  height: 100vh;
}

/**
 * CD Page Layout
 *
 * Flex is used to fix the footer to the bottom of the screen, regardless of
 * viewport height.
 *
 * - .cd-page-layout-container height is 100% of viewport; forms Flex container.
 * - .cd-header height is fixed.
 * - #main-content grows to fit the available space.
 * - .cd-soft-footer (optional) has variable height.
 * - .cd-footer has variable height, sticks to the bottom of the viewport.
 */
.cd-page-layout-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* @IE11 */
  margin: 0 auto;
  padding: 0;
}
.cd-header {
  flex-shrink: 0;
}
#main-content {
  flex: 1 0 auto;
}
.cd-soft-footer {
  flex-shrink: 0;
}
.cd-footer {
  flex-shrink: 0;
}

/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-other/cd-layout--content.css ***!
  \*************************************************************************************************************************************************************/
/**
 * Common Design: Content Layouts
 */

/**
 * Universal layout
 *
 * This layout is designed for browsers that support CSS 2.1 and basic media
 * queries as defined in https://www.w3.org/TR/mediaqueries-3/ which itself is
 * totally optional to render content legibly.
 *
 * Any advanced enhancements will be defined later in this file, but the rules
 * in this section suffice to create a minimal layout that any browser handles.
 */
.cd-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1220px; /* --cd-max-width */
  margin: 0 auto;
  padding: 0 0.75rem; /* --cd-container-padding */
}

@media (min-width: 768px) {
  .cd-container {
    padding: 0 1.5rem; /* --cd-container-padding-tablet */
  }
}

@media (min-width: 1200px) {
  .cd-container {
    padding: 0 2.5rem; /* --cd-container-padding-xlarge */
  }
}

/**
 * Since the universal layout is linear, add some space in between each section.
 */
.cd-layout__sidebar {
  margin: 2rem 0;
}

/**
 * Modern layout
 *
 * The remainder of this CSS file uses modern CSS to provide a flexible, RTL
 * layout using flex-box, logical properties, and CSS Vars. The @supports block
 * explicitly requires all three for the layout to apply. Any browser which
 * doesn't meet these requirements will still utilize the basic layout provided
 * unconditionally in the section above.
 */
@supports (display: flex) and (padding-inline: 1rem) and (color: var(--supports-test)) {
  /**
   * <main> content container
   */
  main.cd-container {
    padding-block-start: 2rem;
    padding-block-end: 2rem;
  }

  /**
   * Content area should grow to fill available space, but also can shrink to
   * accomodate any columns that are present.
   */
  .cd-layout__content {
    flex: 1 1 auto;
  }

  /**
   * Prevent sidebar from displaying when region is empty.
   */
  .cd-layout__sidebar:empty {
    display: none;
  }

  /**
   * Adopt column layout once space allows.
   */
  @media (min-width: 1024px) {
    main.cd-container {
      padding-block-start: 3rem;
      padding-block-end: 4rem;
    }

    /**
     * Use flex-box once window can accomodate columns.
     */
    .cd-layout {
      display: flex;
      flex-flow: row nowrap;
      gap: 2rem;
    }

    /**
     * Content area should grow to fill available space, but also can shrink to
     * accomodate any columns that are present.
     */
    .cd-layout__content {
      flex: 1 1 auto;
    }

    /**
     * Sidebar(s) should be fixed width. See modifier class if the wider sidebar
     * is desired on a particular website.
     */
    .cd-layout__sidebar {
      flex: 0 0 285px;
      margin: 0;
      padding: var(--cd-container-padding);
      background-color: var(--brand-grey);
    }

    /**
     * Define the wide sidebar. This class isn't present in the default template
     * and must be placed by overriding within a sub-theme.
     */
    .cd-layout__sidebar--wide {
      flex-basis: 400px;
    }

    /**
     * First sidebar might not be first in source order. Explicitly place it at
     * the beginning of the flex container.
     */
    .cd-layout__sidebar--first {
      order: -1;
    }

    /**
     * Second sidebar might not be last in source order. Explicitly place it at
     * the end of the flex container.
     */
    .cd-layout__sidebar--second {
      order: 999;
    }
  }
}

/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-resets/cd-resets.css ***!
  \*****************************************************************************************************************************************************/
/**
 * Common Design: Resets
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
input {
  font-size: 16px;
}

body {
  color: var(--cd-grey--dark);
  font-family: var(--cd-font--roboto);
  font-size: 1rem;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  body {
    font-size: var(--cd-font-size--base);
  }
}

body.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/**
 * Custom-styled lists
 *
 * When the attribute ARIA role "list" is applied to a <ul> tag, we can assume
 * the intention is to have complete styling control over this list and remove
 * all of the default typographic treatment: spacing / bullets
 */
[role=list] {
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Respect user prefs for animations/transitions
 *
 * Some people prefer not to see animations/transitions for medical or personal
 * reasons. Additionally it can happen that the browser is unable to draw the
 * animations at a sufficient speed.
 *
 * This block of rules will wholesale disable the animations when unwanted,
 * leaving the codebase to implement its animations/transitions in a simple
 * format without individual rules needing to be qualified.
 */
@media (prefers-reduced-motion: no-preference) {
  *,
  *::before,
  *::after {
    /* turn animations on if user doesn't mind */
    animation-play-state: running;
  }
}

@media not (update: fast) {
  *,
  *::before,
  *::after {
    /* turn them off again if the browser can't draw them effectively */
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* explicitly disable animations and transitions when requested */
    transition-duration: 0s !important;
    animation-play-state: paused;
  }
}

/*!************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-global-header.css ***!
  \************************************************************************************************************************************************************/
/**
 * Common Design: Global Header
 *
 * The top-most bar which contains OCHA Services, Languages, User menu.
 */
.cd-global-header {
  position: relative;
  height: var(--cd-global-header-height);
  color: var(--cd-white);
  background: var(--brand-primary);
}

.cd-global-header__inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  gap: 8px;
}

.cd-global-header__inner #cd-ocha-services-container {
  order: -1;
}

.cd-global-header__inner.cd-container::after {
  /* Remove the clearfix applied by `cd-container` on this element. */
  content: unset;
}

.cd-global-header__actions {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  gap: 0;

  /* Visually align button contents with main nav */
  margin-inline-end: -2px;
}

/*
 * If there are multiple Global Header actions, separate them with pipe-looking
 * visuals. To control the width of the pipes, set horizontal gap accordingly.
 */
.js .cd-global-header__actions {
  gap: 0 1.5px;
  background:
    linear-gradient(
      to bottom,
      var(--brand-primary),
      var(--brand-primary) 33.33%,
      var(--cd-white) 33.33%,
      var(--cd-white) 66.66%,
      var(--brand-primary) 66.66%
    );
}
.js .cd-global-header__actions > * {
  background: var(--brand-primary);
}

/* Reset buttons */
.cd-global-header button {
  border: 0;
}

/**
 * Drupal selectors
 *
 * TODO: this came from _cd-user-menu.scss but they all have global header
 * prefixes so they're moved here now.
 */
.cd-global-header .block h2 {
  color: var(--cd-white);
}

/* Last block in Global Header should have its dropdown right-aligned on LTR */
[dir="ltr"] .cd-global-header .cd-global-header__user-menu:last-child .cd-global-header__dropdown {
  right: 0;
  left: initial;
}

/* Last block in Global Header should have its dropdown left-aligned on RTL */
[dir="rtl"] .cd-global-header .cd-global-header__user-menu:last-child .cd-global-header__dropdown {
  right: initial;
  left: 0;
}

/**
 * Global Header-specific CD dropdown styles.
 */
.cd-global-header__dropdown {
  position: absolute;
  z-index: var(--cd-z-dropdown);
  left: 0;
  color: var(--cd-white);
  background: var(--brand-primary);
}

.no-js .cd-global-header__dropdown {
  position: relative;
}

.js .cd-global-header__dropdown {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
}

button[aria-expanded] .cd-icon--arrow-down {
  fill: var(--cd-white);
  width: 9px;
  height: 9px;
  margin-inline-start: 4px;
}

/* active state should flip the icon vertically */
button[aria-expanded="true"] .cd-icon--arrow-down {
  transform: rotate(180deg);
}

/**
 * No-JS styles
 */
.no-js .cd-global-header {
  height: auto;
}

/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-site-header.css ***!
  \**********************************************************************************************************************************************************/
/**
 * Common Design: Site Header
 *
 * Bottom header bar. Contains Logo, Search and Navigation.
 */
.cd-site-header {
  color: var(--cd-default-text-color);
  border-bottom: 6px solid var(--brand-grey);
  background: var(--cd-white);
}

.cd-site-header__inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 1rem;
  height: var(--cd-site-header-height);
}

/* Unset the generic cd-container clearfix. Its presence causes an extra gap
now that we layout with flex. */
.cd-site-header__inner.cd-container::after {
  content: none;
}

.cd-site-header__inner .region-header-logo {
  flex: 0 0 var(--brand-logo-mobile-width);
}

@media (min-width: 768px) {
  .cd-site-header__inner .region-header-logo {
    flex: 0 0 var(--brand-logo-desktop-width);
  }
}

/* stylelint-disable order/properties-order -- group by container then item */
.cd-site-header__actions {
  /* Define behavior as CONTAINER containing flex-items */
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;

  /* Define behavior as FLEX-ITEM inside a container */
  flex: 1 1 auto;
}
/* stylelint-enable order/properties-order */

@media (min-width: 1024px) {
  .cd-site-header__nav-holder nav > ul {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    justify-content: flex-end;
  }
}

.cd-site-header__nav-holder nav > ul > li,
.cd-site-header__nav-holder nav > ul > .cd-nav__item {
  flex: 1 0 100%;
}

@media (min-width: 1024px) {
  .cd-site-header__nav-holder nav > ul > li,
  .cd-site-header__nav-holder nav > ul > .cd-nav__item {
    flex: 1 1 auto;
  }

  .cd-site-header__nav-holder nav > ul > li:last-child,
  .cd-site-header__nav-holder nav > ul > .cd-nav__item:last-child {
    flex: 0 1 auto;
  }
}

/**
 * JS-disabled styles
 *
 * In the event JS doesn't execute at all, these styles will apply. In cases
 * JS fails to load, or times out, these styles will NOT apply, because our
 * inline script will have taken this classname off the <html> element.
 */
.no-js .cd-site-header__inner {
  display: block;
  height: unset;
}

/* Second level menu. */
.no-js .cd-site-header__nav-holder .cd-nav > .menu {
  display: block;
}

.no-js .cd-site-header__nav-holder li li {
  float: left;
  max-width: unset;
}

.no-js .cd-site-header__nav-holder nav > ul > li,
.no-js .cd-site-header__nav-holder nav > ul > .cd-nav__item {
  float: left;
  max-width: unset;
}

/* Hide seperator. */
.no-js .cd-site-header__nav-holder .cd-nav > .menu > .menu-item li:first-child {
  border-right: 1px solid transparent;
}

/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-header.css ***!
  \*****************************************************************************************************************************************************/
/**
 * Common Design: Header
 */

.cd-header {
  /**
   * Reset styles
   */
  box-sizing: border-box;
  font-family: "Roboto",
    helvetica,
    arial,
    sans-serif;
  font-size: var(--cd-font-size--tiny);
  font-weight: 300;
}

/* Reset button styles. */
.cd-header button {
  border-radius: 0;
  box-shadow: none;
  font-size: var(--cd-font-size--tiny);
  font-weight: 300;
  -webkit-appearance: none;
}

.cd-header button[data-cd-toggler] {
  background-color: transparent;
}

/**
 * CD Header focus styles
 *
 * The focus styles should be consistent across the entire header. Using the
 * focus-visible selector means that direct clicks won't cause the outline to
 * be visible, but non-pointer nav such as keyboard will still show it.
 */
.cd-header a:hover,
.cd-header a:focus-visible {
  text-decoration: underline;
  color: var(--cd-white);
}

.cd-header button:focus-visible,
.cd-header a:focus-visible {
  position: relative;
  z-index: calc(var(--cd-z-dropdown) + 1);
  outline: var(--cd-outline-size) solid var(--brand-primary--light);
  outline-offset: calc(0px - var(--cd-outline-size));
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-language-switcher.css ***!
  \****************************************************************************************************************************************************************/
/**
 * Common Design: Language Switcher
 */

.cd-language-switcher {
  position: relative;
}

/* Language Switcher button. */
.cd-language-switcher__btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: content-box;
  height: var(--cd-global-header-height);
  padding: 0;
  padding-inline: 1rem;
  line-height: var(--cd-global-header-height);
}

@media (min-width: 768px) {
  .cd-language-switcher__btn {
    padding-inline: 1.5rem;
  }
}

/* Language Switcher list. */
.cd-language-switcher__dropdown {
  position: absolute;
  z-index: 201;
  right: 0;
  left: auto;
  display: block;
  min-width: 125px;
  margin: 0;
  padding: 12px;
  list-style: none;
  color: var(--cd-white);
  background-color: var(--brand-primary);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
}

.cd-language-switcher__dropdown li a {
  position: relative;
  display: block;
  height: var(--cd-global-header-height);
  text-decoration: none;
  color: var(--cd-white);
  line-height: var(--cd-global-header-height);
  padding-inline: 0.5rem;
}

.cd-language-switcher__dropdown li a:hover,
.cd-language-switcher__dropdown li a:focus {
  text-decoration: underline;
}

.cd-language-switcher__dropdown li a.is-active {
  font-weight: 700;
}

/* JS disabled: Expand Language Switcher list by default. */
.no-js .cd-language-switcher__dropdown {
  /* Unset the dropdown styles */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
  background: transparent;
  box-shadow: none;
}

/**
 * Adjust breakpoints for when the Language Switcher displays as a dropdown.
 * This depends on other elements present in the .cd-global-header__actions.
 *
 * The sub-theme contains an override component specifically to apply these
 * rules to a smaller breakpoint should your website need it. Do NOT adjust
 * here, only in the sub-theme.
 *
 * @see common_design_subtheme/libraries/cd-language-switcher/cd-language-switcher.css
 */
@media (min-width: 1024px) {
  /**
   * Expand the Language Switcher from dropdown to a list.
   */
  .cd-language-switcher__dropdown {
    /* Unset the dropdown styles */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1rem;
    background: transparent;
    box-shadow: none;
  }

  /**
   * Expand the Language Switcher from a dropdown to a list.
   */
  .cd-language-switcher {
    --dropdown: false;
  }

  .cd-language-switcher.cd-dropdown {
    display: block;
  }
}

/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-logo.css ***!
  \***************************************************************************************************************************************************/
/**
 * Common Design: Logo
 *
 * Replace images with your site logo.
 */

/* Logo is wrapped in H1 since it serves as top-level of outline. */
.cd-site-header h1 {
  margin: 0;
}

.cd-site-logo {
  display: block;
  float: left;
  width: var(--brand-logo-mobile-width, 52px);
  height: var(--cd-site-header-height);
  background:
    linear-gradient(transparent, transparent),
    url(/build/images/ocha-logo-blue.7dc56aa6.svg) center no-repeat;
}

/* Mobile: Hides logo set in info.yml in favour of background image. */
.cd-site-logo img {
  display: none;
}

/**
 * Override default focus z-index. If the default applies, the logo might appear
 * on top of the opened OCHA Services menu. Alternative fix is ticketed:
 *
 * @see https://humanitarian.atlassian.net/browse/CD-173
 */
.cd-header a.cd-site-logo:focus-visible {
  z-index: var(--cd-z-default);
}

/**
 * Desktop logo
 *
 * Unhide logo set in info.yml once space permits.
 */
@media (min-width: 768px) {
  .cd-site-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: var(--brand-logo-desktop-width); /* adjust within sub-theme's brand.css */
    padding-top: 0;
    background: none;
  }

  /* Displays logo set in info.yml on larger viewports. */
  .cd-site-logo img {
    display: block;
    width: 100%;
  }
}

/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-nav.css ***!
  \**************************************************************************************************************************************************/
/**
 * Common Design: Main Navigation
 */

/**
 * Original file: cd-menu--main
 */
.menu-item--expanded [aria-expanded=false] + ul {
  display: none;
}
.menu-item--expanded [aria-expanded=true] + ul {
  display: block;
}

ul[data-cd-hidden=true] > ul {
  z-index: var(--cd-z-dropdown);
  display: block;
}

.menu--main button[aria-expanded] .cd-icon--arrow-down {
  fill: var(--brand-highlight);
  margin-top: 4px;
  margin-inline-start: 4px;
}

@media (min-width: 1024px) {
  .menu--main button[aria-expanded] .cd-icon--arrow-down {
    margin-top: -2px;
  }
}

/**
 * Original file: cd-nav
 */
.cd-nav {
  /* may need adjusting depending on site-specific styles. */
  z-index: var(--cd-z-main-menu);
}

.cd-nav-level-0__btn {
  height: var(--cd-site-header-height);
  padding: 0 20px;
  transition: background 0.3s ease;
  text-transform: uppercase;
  color: var(--cd-default-text-color);
  border: 0 none var(--brand-grey);
  background: transparent;
  font-size: var(--cd-font-size--small);
}

.cd-nav-level-0__btn:hover,
.cd-nav-level-0__btn:focus {
  color: var(--cd-black);
  outline: none; /* default browser outline is replaced by background colour change. */
  background: var(--brand-grey);
}

.cd-nav-level-0__btn-label {
  font-weight: 700;
}

.cd-nav-level-0__btn[aria-expanded] .cd-icon--arrow-down {
  margin-left: 4px;
  fill: var(--brand-highlight);
}

.cd-nav-level-0__btn[aria-expanded=true] {
  position: relative;
  z-index: 101;
  color: var(--cd-black);
}

.cd-nav-level-0__btn[aria-expanded=true]::before {
  position: absolute;
  right: -1px;
  bottom: -6px;
  left: -1px;
  width: calc(100% + 1px);
  height: 6px;
  content: "";
  transition: background 0.3s ease;
  background: var(--brand-highlight);
}

.cd-nav-level-0__btn[aria-expanded=true]:focus {
  background: var(--cd-white);
}

/**
 * @IE11
 *
 * No support for CSS custom properties means --dropdown: false; property on nav
 * container is not recognised so the cd-dropdown.js creates a toggler button on
 * desktop. This hides the button when that happens.
 */
@media (min-width: 1024px) and (-ms-high-contrast: none) {
  .cd-nav__btn {
    display: none;
  }
}

.cd-nav__menu--level-1 {
  display: none;
  background: var(--cd-white);
}

@media (min-width: 1024px) {
  .cd-nav__menu--level-1 {
    display: flex;
    background: transparent;
  }
}

.cd-nav a,
.cd-nav button {
  position: relative;
  display: flex;
  padding: 15px 30px;
  text-decoration: none;
  color: var(--cd-default-text-color);
}

.cd-nav button {
  width: 100%;
  border: 0 none;
  background: transparent;
}

.cd-nav a:hover,
.cd-nav a:focus,
.cd-nav button:hover,
.cd-nav button:focus {
  color: var(--cd-black);
  outline: none;
  background: var(--brand-grey);
}

.cd-nav a:focus-visible,
.cd-nav button:focus-visible {
  color: var(--cd-black);
  outline: var(--cd-outline-size) solid var(--brand-primary--light);
  outline-offset: calc(0px - var(--cd-outline-size));
  background: transparent;
}

/**
 * First level
 */
.cd-nav-level-1__btn,
.cd-nav-level-1__btn-label {
  text-transform: uppercase;
  font-weight: 700;
}

@media (max-width: 1023px) {
  .cd-nav[data-cd-hidden=false] {
    position: absolute;
    top: calc(var(--cd-global-header-height) + var(--cd-site-header-height) + 6px);
    right: 0;
    left: 0;
    height: calc(100vh - (var(--cd-global-header-height) + var(--cd-site-header-height) + 6px));
    padding: 20px 0 36px;
    background: var(--cd-white);
  }

  .cd-nav[data-cd-hidden=false] > ul {
    display: block;
  }
}

@media (min-width: 1024px) {
  .cd-nav {
    --dropdown: false;

    position: relative;
    top: auto;
    right: auto;
    left: 0;
    width: auto;
    max-width: none;
    height: var(--cd-site-header-height);
    padding: 0;
  }
}

/**
 * @IE11
 * No support for CSS custom props means --dropdown: false; property on nav
 * container is not recognised so the cd-dropdown.js does not run the
 * updateToggler function which toggles the data-cd-hidden attribute. This
 * displays the nav regardless of that attribute value.
 */
@media (min-width: 1024px) and (-ms-high-contrast: none) {
  .cd-nav[data-cd-hidden=true] {
    display: block;
  }
}

.cd-nav__btn::before {
  background: var(--brand-highlight);
}

/**
 * Second level
 */
.cd-nav__menu--level-2 {
  background: var(--cd-white);
}

@media (min-width: 1024px) {
  .cd-nav__menu--level-2 {
    position: absolute;
    z-index: var(--cd-z-dropdown);
    top: calc(var(--cd-site-header-height) + 6px); /* border-bottom height */
    min-width: 200px;
    max-width: 300px;
    margin: 0;
    padding: 20px 0;
    box-shadow: 0 1px 8px rgba(var(--cd-rgb-blue-grey--dark), 0.8);
  }
}

.cd-nav__menu--level-2 .cd-nav__btn {
  display: flex;
  color: var(--cd-black);
  font-weight: 700;
}

.cd-nav__menu--level-2 .cd-nav__btn:hover {
  background: var(--brand-grey);
}

/**
 * Active trail for mobile menu.
 */
@media (max-width: 1023px) {
  .cd-nav-level-1__btn {
    position: relative;
  }

  .cd-nav-level-1__btn::before {
    position: absolute;
    top: 0;
    width: 6px;
    height: 48px;
    margin-inline-start: -15px;
    content: "";
    background: transparent;
  }

  .cd-nav-level-1__btn.is-active::before {
    background: var(--brand-highlight);
  }

  .menu-item--collapsed .cd-nav-level-1__btn.is-active::before,
  .menu-item--expanded .cd-nav-level-1__btn.is-active::before {
    background: var(--brand-highlight);
  }

  .cd-nav .menu-item--active-trail > a::before,
  .cd-nav .menu-item--active-trail > button::before {
    position: absolute;
    top: 0;
    width: 6px;
    height: 48px;
    margin-inline-start: -15px;
    content: "";
    opacity: 0.6;
    background: var(--brand-highlight);
  }

  /**
   * Any child of the active trail.
   */
  .cd-nav .menu-item--active-trail a.is-active::before,
  .cd-nav .menu-item--active-trail button.is-active::before {
    background: var(--brand-highlight);
  }

  /**
   * Second-level links
   */
  .cd-nav > ul ul > li.menu-item--active-trail a::before,
  .cd-nav > ul ul > li.menu-item--active-trail button::before {
    opacity: 1;
  }
}

/**
 * Desktop
 */
@media (min-width: 1024px) {
  .cd-nav > .menu {
    flex: 1 0 auto;
  }

  [dir=ltr] .cd-nav > .menu > .menu-item:last-child > ul.menu {
    right: 0;
  }

  [dir=rtl] .cd-nav > .menu > .menu-item:last-child > ul.menu {
    left: 0;
  }

  .cd-nav > .menu > .menu-item.menu-item--active-trail a::before,
  .cd-nav > .menu > .menu-item.menu-item--active-trail button::before {
    background: var(--brand-highlight);
  }

  .cd-nav > .menu > .menu-item > a,
  .cd-nav > .menu > .menu-item button {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--cd-site-header-height);
    padding: 0 14px;
    transition: background 0.3s ease;
    background: transparent;
  }

  .cd-nav > .menu > .menu-item > a::before,
  .cd-nav > .menu > .menu-item button::before {
    position: absolute;
    right: -1px;
    bottom: -6px;
    left: -1px;
    width: calc(100% + 2px);
    height: 6px;
    content: "";
    transition: background 0.3s ease;
    background: transparent;
  }

  .cd-nav > .menu > .menu-item > a:hover,
  .cd-nav > .menu > .menu-item button:hover {
    background: var(--brand-grey);
  }

  .cd-nav > .menu > .menu-item > a:focus,
  .cd-nav > .menu > .menu-item button:focus {
    background: var(--cd-white);
  }

  .cd-nav > .menu > .menu-item > a.is-active::before,
  .cd-nav > .menu > .menu-item > a:focus::before,
  .cd-nav > .menu > .menu-item button.is-active::before,
  .cd-nav > .menu > .menu-item button:focus::before {
    background: var(--brand-highlight);
  }

  .cd-nav > .menu > .menu-item:not(.menu-item--active-trail) > a:focus-visible::before,
  .cd-nav > .menu > .menu-item:not(.menu-item--active-trail) button:focus-visible::before {
    background: transparent;
  }

  .cd-nav > .menu > .menu-item svg {
    flex: 1 0 auto;
  }

  .cd-nav > .menu > li > ul a:hover,
  .cd-nav > .menu > li > ul button:hover {
    background: var(--brand-grey);
  }

  .cd-nav > .menu > li > ul a.menu-item--active-trail,
  .cd-nav > .menu > li > ul button.menu-item--active-trail {
    border-inline-start: 6px solid var(--brand-highlight);
  }

  .cd-nav > .menu > li > ul > li.menu-item--active-trail {
    border-inline-start: 6px solid var(--brand-highlight);
  }
}

/**
 * No-JS
 */
.no-js .menu-item--expanded > [aria-expanded=false] + ul {
  display: block;
}

.no-js .cd-nav {
  position: relative;
  top: auto;
  right: 0;
  left: 0;
  display: block;
  padding: 0;
  background: var(--cd-white);
}

.no-js .cd-nav__menu--level-1 {
  display: block;
}

.no-js .cd-nav > .menu > li > .menu {
  position: relative;
  top: 0;
  min-width: unset;
  max-width: unset;
  margin: 0;
  padding: 0;
  box-shadow: unset;
}

.no-js .cd-nav > .menu > li.menu-item--expanded button {
  display: none;
}

/* Style all menu items the same, regardless of their level. */
@media (min-width: 1024px) {
  .no-js .cd-nav .menu-item--expanded li {
    height: var(--cd-site-header-height);
  }

  .no-js .cd-nav .menu-item--expanded li a {
    align-items: center;
    height: var(--cd-site-header-height);
    padding: 0 14px;
  }
}

/* Adjusts the active styles when javascript is disabled. */
@media (min-width: 1024px) {
  /* Hide the active style from a parent item. */
  .no-js .cd-nav > .menu > .menu-item--expanded a::before,
  .no-js .cd-nav > .menu > .menu-item--expanded button::before {
    background: transparent;
  }

  /* Hide the default active style for second level items. */
  .no-js .cd-nav > .menu > li > ul > li.menu-item--active-trail {
    border-left: 6px solid transparent;
  }

  /* Use the same style as the first level menu items when active. */
  .no-js .cd-nav > .menu > li > ul > li.menu-item--active-trail a {
    position: relative;
  }

  .no-js .cd-nav > .menu > li > ul > li.menu-item--active-trail a::after {
    position: absolute;
    right: -1px;
    bottom: -6px;
    left: -1px;
    width: calc(100% + 2px);
    height: 6px;
    content: "";
    transition: background 0.3s ease;
    background: var(--brand-highlight);
  }
}

/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-header/cd-user-menu.css ***!
  \********************************************************************************************************************************************************/
/**
 * Common Design: User Menus
 *
 * User menus are the dropdowns in the Global Header, such as Help or Account.
 * Site configuration can affect how many of them are displayed, but they all
 * get styled in a similar fashion.
 */

.cd-user-menu {
  position: relative;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.cd-user-menu ul {
  list-style: none;
}

.cd-user-menu svg {
  fill: var(--cd-white);
}

/**
 * Logo icon before the button/link label.
 *
 * @TODO: add proper classes to make it more robust.
 */
.cd-global-header__user-menu svg + span,
.cd-user-menu svg + span {
  margin-inline-start: 10px;
}

/* Other icons, for example Help/Account icons. */
.cd-user-menu .cd-icon:not(.cd-icon--arrow-down) {
  width: 14px;
  height: 14px;
}

.cd-user-menu li {
  position: relative;
}

.cd-user-menu__item,
.cd-user-menu a,
.cd-user-menu button {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--cd-global-header-height);
  padding-inline: 1rem;
  transition: background 0.3s ease;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cd-white);
  background: transparent;
  line-height: var(--cd-global-header-height);
}

.cd-user-menu__item:hover,
.cd-user-menu a:hover,
.cd-user-menu button:hover,
.cd-user-menu__item:focus,
.cd-user-menu a:focus,
.cd-user-menu button:focus {
  text-decoration: underline;
}

.cd-user-menu__item .cd-user-menu__btn-label,
.cd-user-menu a .cd-user-menu__btn-label,
.cd-user-menu button .cd-user-menu__btn-label {
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 60px;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .cd-user-menu__item .cd-user-menu__btn-label,
  .cd-user-menu a .cd-user-menu__btn-label,
  .cd-user-menu button .cd-user-menu__btn-label {
    max-width: unset;
  }
}

.cd-user-menu__dropdown {
  min-width: 125px;
  margin: 0;
  padding: 0;
}

[data-cd-menu-level="1"] {
  padding-inline: 0.5rem;
  padding-block: 0.5rem;
}

.cd-user-menu > .menu-item:last-child > ul.menu {
  right: -1px;
  left: auto;
}

/**
 * No-JS styles.
 */
.no-js .cd-user-menu__dropdown {
  width: unset;
  margin-inline-start: 12px;
  padding: 0;
}

.no-js .cd-user-menu__dropdown li {
  display: inline-block;
  padding-inline: 0 12px;
}

.no-js .cd-user-menu__dropdown a {
  height: var(--cd-global-header-height);
  padding: 0;
  line-height: var(--cd-global-header-height);
}

/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-footer.css ***!
  \*****************************************************************************************************************************************************/
/**
 * Common Design: Footer
 */

/* stylelint-disable order/properties-order -- two logical groups of styles */
.cd-footer {
  /**
   * Reset styles
   */
  box-sizing: border-box;
  font-family: var(--cd-font);
  font-size: var(--cd-font-size--tiny);
  font-weight: 300;

  /**
   * Position footer at the bottom of viewport. This might need adjusting based
   * on page layout.
   */
  grid-row: var(--cd-footer-row-number)/var(--cd-footer-row-number);
  padding: 3rem 0 0;
  text-align: center;
  color: var(--cd-white);
  background: var(--brand-primary);
  line-height: 1.5;
}
/* stylelint-enable order/properties-order */

/* Reset button styles. */
.cd-footer button {
  border-radius: 0;
  box-shadow: none;
  font-size: var(--cd-font-size--tiny);
  font-weight: 300;
  -webkit-appearance: none;
}

.cd-footer button[data-cd-toggler] {
  background-color: transparent;
}

.cd-footer a {
  text-decoration: none;
  color: var(--cd-white);
}

.cd-footer a.cd-button {
  color: initial;
}

.cd-footer a:hover,
.cd-footer a:focus-visible {
  text-decoration: underline;
  color: var(--cd-white);
}

.cd-footer a.cd-button:hover,
.cd-footer a.cd-button:focus-visible {
  color: initial;
}

.cd-footer a:focus-visible {
  outline: var(--cd-outline-size) solid var(--brand-primary--light);
  outline-offset: 8px;
}

.cd-footer__section {
  width: 100%;
  margin: 0 auto;
  padding-block-end: 3rem;
}

/**
 * When we know a section contains no content, we can set an empty variant
 * to collapse it to zero-height which helps especially on mobile, without
 * disrupting the layout on larger viewport widths.
 */
.cd-footer__section--empty {
  padding-bottom: 0;
}

/**
 * Common Footer: Layout
 *
 * The entire layout for the Common Footer is defined here.
 */
@media (min-width: 768px) {
  .cd-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .cd-footer__section--menu,
  .cd-footer__section--social,
  .cd-footer__section--mandate,
  .cd-footer__section--copyright,
  .cd-footer__section--ocha-services {
    flex: 1 0 100%;
  }

  .cd-footer__section--ocha-services {
    text-align: start;
  }
}

@media (min-width: 1024px) {
  .cd-footer__section--menu {
    flex: 1 0 70%;
    text-align: start;
  }

  .cd-footer__section--social {
    flex: 0 1 30%;
    text-align: end;
  }

  .cd-footer__section--mandate {
    flex: 1 0 50%;
    max-width: 780px;
    margin: 0;
  }

  .cd-footer__section--copyright {
    flex: 0 1 350px;
    margin: 0;
  }
}

/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-footer-menu.css ***!
  \**********************************************************************************************************************************************************/
/**
 * Common Design: Footer menu
 *
 * Site-specific navigation. Most often used for About, Contact, Privacy, etc.
 */
.cd-footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

.cd-footer-menu__item {
  display: block;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .cd-footer-menu__item {
    display: inline-block;
    margin: 0 8px;
  }
}

@media (min-width: 1024px) {
  .cd-footer-menu__item {
    margin: 0;
    margin-inline-end: 32px;
  }
}

/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-ocha.css ***!
  \***************************************************************************************************************************************************/
/**
 * Common Design: OCHA Services
 */
.cd-ocha-services {
  position: relative;
  margin-block-end: 3rem;
  padding-block-end: 1rem;

  /* Add a horizontal separator once layout expands */
  &::before {
    position: absolute;
    bottom: 0;
    left: 10%;
    display: block;
    width: 80%;
    height: 1px;
    content: '';
    opacity: 0.6;
    background: currentColor;

  }

  @media screen and (min-width: 768px) {
    &::before {
      left: 0;
      width: 100%;
    }
  }
}

.cd-ocha-services h2 {
  margin-block-end: 0;
  color: var(--cd-white);
  font-size: var(--cd-font-size--medium);
}

.cd-ocha-services__content {
  width: 100%;
  padding: 1.25rem 0;
}

.cd-ocha-services__inner {
  display: flex;
  flex-flow: column nowrap;
  gap: 0 12px;
  max-width: var(--cd-max-width);
  padding: 0;
}

.cd-ocha-services__section {
  position: relative; /* For the see-all link */
  margin-bottom: 1.5rem;
}

.cd-ocha-services__heading {
  margin: 0 0 10px;
  padding-bottom: 2px;
  color: var(--brand-grey);
}

.cd-ocha-services__list {
  margin: 0;
  padding: 0;
}

/**
 * backwards-compat: the .cd-ocha-dropdown class is legacy, but is used by lots
 * of sub-themes which customized their OCHA Services links. If these classnames
 * get removed then the styling of the first column will look strange.
 */
.cd-ocha-services__link,
.cd-ocha-dropdown__link {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  font-weight: 700;
}

.cd-ocha-services__link a,
.cd-ocha-dropdown__link a {
  text-decoration: none;
  color: var(--cd-white);
}

.cd-ocha-dropdown__link a:focus-visible,
.cd-ocha-services__link a:focus-visible {
  outline-offset: 8px;
}

.cd-ocha-services__see-all svg {
  position: relative;
  top: 0.5px;
  width: 10px;
  height: 10px;
  fill: var(--cd-white);
}

@media (max-width: 767px) {
  /* On mobile, the two middle columns should look like one list. */
  .cd-ocha-services__section:nth-child(2) {
    margin-bottom: 0;
  }

  /* There's an invisible heading in the third column to keep the links inside
  column 2/3 in line with each other. It's hidden on mobile. */
  .cd-ocha-services__section:nth-child(3) .cd-ocha-services__heading {
    display: none;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .cd-ocha-services__inner {
    flex-flow: row nowrap;
    align-items: flex-start;
    margin: 0 auto;
  }

  .cd-ocha-services__section {
    flex: 0 1 25%;
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .cd-ocha-services__link {
    white-space: nowrap;
  }

  .cd-ocha-services__inner {
    gap: 0 32px;
  }
}

/**
 * When JS is disabled, OCHA Services moves to the footer.
 * Undo the .cd-footer anchor rule affecting the link colour.
 */
.no-js .cd-footer .cd-ocha-services__see-all {
  color: initial;
}

.no-js .cd-footer .cd-ocha {
  width: 100%;
  text-align: left;
}

/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-footer-soft.css ***!
  \**********************************************************************************************************************************************************/
/**
 * Common Design: Soft Footer
 *
 * Optional space for a CTA, newsletter sign-up, etc
 */
.cd-soft-footer {
  position: relative; /* for pseudo-element */
  padding: 24px 0;
  text-align: center;
  color: var(--cd-white);
}

.cd-soft-footer h2 {
  color: var(--cd-white);
}

.cd-soft-footer a {
  color: var(--cd-white);
}

.cd-soft-footer a:hover,
.cd-soft-footer a:focus {
  color: var(--cd-white);
}

.cd-soft-footer a:focus {
  outline: 3px solid var(--brand-primary--dark);
}

/**
 * Background for soft footer.
 *
 * The soft footer should be a slightly lighter version of --brand-primary,
 * but not as bright as --brand-primary--light. This one-off variant of the
 * --brand-primary color is kept consistent by setting lower opacity on the
 * pseudo-element, blending it with the white background of <body>.
 */
.cd-soft-footer::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  opacity: 0.9;
  background: var(--brand-primary);
}

@media (min-width: 768px) {
  /* Remove clearfix so that flexbox justify-content works correctly */
  .cd-soft-footer .cd-container::after {
    content: none;
  }

  .cd-soft-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .cd-soft-footer {
    padding: 2rem 0;
  }
}

/*!************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-footer-social.css ***!
  \************************************************************************************************************************************************************/
/**
 * Common Design: Social links in Footer
 */

:root {
  --cd-footer-social-icon-size: 26px;
}

.cd-footer-social__list {
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-footer-social__item {
  flex: 0 0 var(--cd-footer-social-icon-size);
}

a.cd-footer-social__link {
  display: inline-block;
  border: 0 none;
  line-height: 0; /* cosmetic improvement to focus style */
}

a.cd-footer-social__link svg {
  width: var(--cd-footer-social-icon-size);
  height: var(--cd-footer-social-icon-size);
  fill: var(--cd-white);
}

a.cd-footer-social__link svg.hover-style {
  display: none;
}

a.cd-footer-social__link:hover svg,
a.cd-footer-social__link:focus svg {
  display: none;
}

a.cd-footer-social__link:hover .hover-style,
a.cd-footer-social__link:focus .hover-style {
  display: inline-block;
}

@media (min-width: 1024px) {
  .cd-footer-social__list {
    justify-content: flex-end;
  }
}

/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-footer-mandate.css ***!
  \*************************************************************************************************************************************************************/
/**
 * Common Design: OCHA mandate
 */
.cd-mandate {
  width: 100%;
  text-align: center;
}

.cd-mandate__heading {
  display: block;
  margin-bottom: 16px;
  padding: 0 var(--cd-container-padding);
}

.cd-mandate__logo {
  position: relative;
  top: -3px;
  display: block;
  width: 149px;
  height: 37px;
  margin-block-end: 1rem;
  margin-inline: auto;
}

.cd-mandate__text {
  display: block;
  max-width: 550px;
  margin: 0 auto;
  padding: 0 var(--cd-container-padding);
}

@media (min-width: 1024px) {
  .cd-mandate {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    column-gap: var(--cd-container-padding);
  }

  .cd-mandate__heading {
    flex: 1 0 100%;
    padding: 0;
    text-align: initial;
  }

  .cd-mandate__logo {
    flex: 0 0 calc(149px + var(--cd-container-padding));
    height: auto;
    margin: 0;
    padding-inline-end: var(--cd-container-padding);
    border-inline-end: 1px solid var(--brand-grey);
  }

  .cd-mandate__text {
    flex: 1 1 0;
    margin: 0;
    padding: 0;
    padding-inline-end: var(--cd-container-padding-xlarge);
    text-align: initial;
  }
}

/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./templates/common_design/libraries/cd/cd-footer/cd-footer-copyright.css ***!
  \***************************************************************************************************************************************************************/
/**
 * Common Design: Copyright section
 */
.cd-footer-copyright {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 390px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .cd-footer-copyright {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    margin-top: 34px; /* Align with provide-by main text. */
    text-align: end;
  }
}

.cd-footer-copyright__link {
  line-height: 0; /* ensures flex centers it correctly */
}

.cd-footer-copyright svg {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 0 auto;
  fill: var(--cd-white);
}

/* To override `.cd-footer a` we must use tag in selector */
a.cd-footer-copyright__link:hover {
  transition: opacity 0.1666s ease-in-out;
  opacity: 0.8;
}

/* To override `.cd-footer a` we must use tag in selector */
a.cd-footer-copyright__link:focus-visible {
  outline-offset: 5px;
}

/* To override `.cd-footer a` we must use tag in selector */
.cd-footer-copyright__text a:focus {
  outline-offset: 1px;
}

/*!***********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/common_design/css/common_design.css ***!
  \***********************************************************************************************************************************/
/*@import "../../../templates/themes/common_design/components/cd-block-title/cd-block-title.css";
@import "../../../templates/themes/common_design/components/cd-social-links/cd-social-links.css";
@import "../../../templates/themes/common_design/components/cd-dropbutton/cd-dropbutton.css";
@import "../../../templates/themes/common_design/components/cd-dropdown/cd-dropdown.css";
@import "../../../templates/themes/common_design/components/cd-typography/cd-typography.css";
@import "../../../templates/themes/common_design/components/cd-utilities/cd-utilities.css";
@import "../../../templates/themes/common_design/components/cd-button/cd-button.css";

@import "../../../templates/themes/common_design/css/fonts-advanced.css";
@import "../../../templates/themes/common_design/css/brand.css";
*/

:root {
    --cd-ocha-blue: #009edb;
    --cd-blue--dark: #144372;
    --cd-blue--bright: #82b5e9;
    --cd-blue--brighter: #d4e5f7;
    --cd-highlight-red: #e56a54;
    --cd-contrast-red: #e00000;
    --cd-white: #fff;
    --cd-grey--light: #f2f2f2;
    --cd-grey--mid: #595959;
    --cd-grey--dark: #4a4a4a;
    --cd-default-text-color: var(--cd-grey--dark);
    --cd-black: #000;
    --cd-blue-grey: #e6ecf1;
    --cd-blue-grey--dark: #d3dde5;
    --cd-blue-grey--light: #ebf0f4;
    --cd-rgb-ocha-blue: 2, 108, 182;
    --cd-rgb-grey--mid: 89, 89, 89;
    --cd-rgb-grey--dark: 74, 74, 74;
    --cd-rgb-highlight-red: 229, 106, 84;
    --cd-rgb-blue-grey--dark: 211, 221, 229;
    --cd-max-content-width: 820px;
    --cd-max-body-width: 1400px;
    --cd-max-width: 1220px;
    --cd-global-header-height: 35px;
    --cd-site-header-height: 60px;
    --cd-container-padding: 0.75rem;
    --cd-container-padding-tablet: 1.5rem;
    --cd-container-padding-xlarge: 2.5rem;
    --cd-bp--sm: 576px;
    --cd-bp--md: 768px;
    --cd-bp--lg: 1024px;
    --cd-bp--xl: 1200px;
    --cd-bp--xxl: 1400px;
    --cd-flow-space: 1rem;
    --cd-bumper-space: 1rem;
    --cd-footer-row-number: 5;
    --cd-red: #cd3a1f;
    --cd-red--light: #f8d8d3;
    --cd-orange: #db7b18;
    --cd-orange--light: #fae6d1;
    --cd-yellow: #d5de26;
    --cd-yellow--light: #f7f8d3;
    --cd-green: #7fb92f;
    --cd-green--light: #e8f5d6;
    --cd-font-size--tiny: 0.75rem;
    --cd-font-size--small: 0.875rem;
    --cd-font-size--ref: 1rem;
    --cd-font-size--base: 1.125rem;
    --cd-font-size--medium: 1.375rem;
    --cd-font-size--large: 1.625rem;
    --cd-font-size--2xbase: 1.875rem;
    --cd-font-size--2xmedium: 2.375rem;
    --cd-font-size--2xlarge: 2.875rem;
    --cd-font: helvetica, arial, sans-serif;
    --cd-font--roboto: "Roboto", helvetica, arial, sans-serif;
    --cd-font--roboto-condensed: "Roboto Condensed", helvetica, arial, sans-serif;
    --cd-font--roboto-slab: "Roboto Slab", helvetica, arial, sans-serif;
    --cd-font--noto-sans: "Noto Sans", sans-serif;
    --cd-font--noto-kufi-arabic: "Noto Kufi Arabic", sans-serif;
    --cd-font--noto-sans-sc: "Noto Sans SC", sans-serif;
    --cd-z-default: 1;
    --cd-z-hidden: -1;
    --cd-z-sidebar: 110;
    --cd-z-sidebar-underlay: 100;
    --cd-z-main-menu: 199;
    --cd-z-search: 200;
    --cd-z-dropdown: 201;
    --cd-z-skip-link: 1000;
    --cd-outline-size: 3px;
    --brand-primary: var(--cd-ocha-blue);
    --brand-primary--light: var(--cd-blue--bright);
    --brand-primary--dark: var(--cd-blue--dark);
    --brand-highlight: var(--cd-highlight-red);
    --brand-grey: var(--cd-blue-grey);
    --brand-logo-mobile-width: 52px;
    --brand-logo-desktop-width: 186px;
    --brand-logo-width: var(--brand-logo-desktop-width);
}

@media (min--moz-device-pixel-ratio:0) {
    summary {
        display: list-item;
    }
}

/* @license GNU-GPL-2.0-or-later https://www.drupal.org/licensing/faq */
*,
*::before,
*::after {
    box-sizing: border-box;
}

[role=list] {
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-cd-hidden="true"] {
    display: none;
}

[data-cd-toggable] {
    --dropdown: true;
}

#cd-language-toggler,
#block-common-design-subtheme-mainnavigation-toggler {
    display: none;
}

#cd-language-toggler {
    color: #ffffff;
}

/* Show the button when the screen width is less than 800px */
@media (max-width: 1024px) {
    #cd-language-toggler {
        display: block;
    }
}

@media (max-width: 1024px) {
    #block-common-design-subtheme-mainnavigation-toggler {
        display: block;
    }
}


main.cd-container {
    padding-block-start: 2rem !important;
}

.hidden {
    display: none !important;
}

.cd-container {
    max-width: 100%;
}

.cd-footer__inner {
    max-width: 1220px !important;
}