/**
 * IVIRMA Global CSS — IVIRMA typography
 * ----------------------------------------------------------
 * Tipografía:
 *   IVI Glance (300, 400, 500): headings
 *   Noto Sans: body/UI copy
 *
 * Uso:
 *   <span class="material-icons">home</span>
 *   <span class="material-symbols-outlined">search</span>
 */

/* === IVI Glance === */
@font-face {
  font-family: "IVI Glance";
  src: url("./fonts/IVIGlance/IVIGlance-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IVI Glance";
  src: url("./fonts/IVIGlance/IVIGlance-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IVI Glance";
  src: url("./fonts/IVIGlance/IVIGlance-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("./fonts/NotoSans/NotoSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("./fonts/NotoSans/NotoSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Tokens */
:root {
  --ivi-font-family-heading: "IVI Glance", "Noto Sans", Arial, sans-serif;
  --ivi-font-family-body: "Noto Sans", Arial, sans-serif;
  --ivi-font-family-fallback: Arial, sans-serif;
  --ivi-font-family-base: var(--ivi-font-family-body);

  --ivi-color-primary-white: var(--ivi-primary-white);
  --ivi-color-primary-deep-blue: var(--ivi-primary-deep-blue);
  --ivi-color-primary-light-blue: var(--ivi-primary-light-blue);
  --ivi-color-ink: var(--ivi-primary-deep-blue);

  --ivi-color-secondary-deep-teal: var(--ivi-secondary-deep-teal);
  --ivi-color-secondary-teal: var(--ivi-secondary-teal);
  --ivi-color-secondary-light-teal: var(--ivi-secondary-light-teal);
  --ivi-color-secondary-warm-gray: var(--ivi-secondary-warm-gray);

  --ivi-color-tertiary-light-blue: var(--ivi-tertiary-light-blue);
  --ivi-color-tertiary-medium-light-blue: var(--ivi-tertiary-medium-light-blue);
  --ivi-color-tertiary-medium-light-teal: var(--ivi-tertiary-medium-light-teal);
  --ivi-color-tertiary-medium-warm-gray: var(--ivi-tertiary-medium-warm-gray);

  --ivi-color-utility-red: var(--ivi-utility-red);
  --ivi-color-utility-amber: var(--ivi-utility-amber);
  --ivi-color-utility-green: var(--ivi-utility-green);
  --ivi-color-utility-gray: var(--ivi-utility-gray);
  --ivi-color-utility-black: var(--ivi-utility-black);

  --ivi-color-accent-lime-200: var(--ivi-accent-lime-200);
  --ivi-color-accent-lime-500: var(--ivi-accent-lime-500);
  --ivi-color-accent-lime-950: var(--ivi-accent-lime-950);
  --ivi-color-accent-orange-200: var(--ivi-accent-orange-200);
  --ivi-color-accent-orange-500: var(--ivi-accent-orange-500);
  --ivi-color-accent-orange-950: var(--ivi-accent-orange-950);
  --ivi-color-accent-red-200: var(--ivi-accent-red-200);
  --ivi-color-accent-red-500: var(--ivi-accent-red-500);
  --ivi-color-accent-red-950: var(--ivi-accent-red-950);
  --ivi-color-accent-purple-200: var(--ivi-accent-purple-200);
  --ivi-color-accent-purple-500: var(--ivi-accent-purple-500);
  --ivi-color-accent-purple-950: var(--ivi-accent-purple-950);

  --ivi-color-text-default: var(--ivi-color-utility-black);
  --ivi-color-text-strong: var(--ivi-color-utility-black);
  --ivi-color-text-inverse: var(--ivi-color-primary-white);
  --ivi-color-text-link: var(--ivi-color-primary-light-blue);
  --ivi-heading-color: var(--ivi-color-utility-black);

  --ivi-color-bg-canvas: var(--ivi-color-primary-white);
  --ivi-color-bg-surface: var(--ivi-color-secondary-warm-gray);
  --ivi-color-bg-brand: var(--ivi-color-primary-deep-blue);
  --ivi-color-bg-brand-alt: var(--ivi-color-secondary-deep-teal);

  --ivi-color-action-primary: var(--ivi-color-primary-light-blue);
  --ivi-color-action-secondary: var(--ivi-color-secondary-teal);
  --ivi-color-border-subtle: rgba(13, 13, 26, 0.12);
  --ivi-color-focus-ring: var(--ivi-color-primary-light-blue);

  --ivi-color-state-danger: var(--ivi-color-utility-red);
  --ivi-color-state-warning: var(--ivi-color-utility-amber);
  --ivi-color-state-success: var(--ivi-color-utility-green);
  --ivi-color-state-muted: var(--ivi-color-utility-gray);

  --ivi-type-display-stats-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-display-stats-font-weight: 400;
  --ivi-type-display-stats-font-size: 72px;
  --ivi-type-display-stats-line-height: 120%;
  --ivi-type-display-stats-letter-spacing: 0;

  --ivi-type-heading-1-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-heading-1-font-weight: 400;
  --ivi-type-heading-1-font-size: 64px;
  --ivi-type-heading-1-line-height: 120%;
  --ivi-type-heading-1-letter-spacing: 0;

  --ivi-type-heading-2-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-heading-2-font-weight: 400;
  --ivi-type-heading-2-font-size: 52px;
  --ivi-type-heading-2-line-height: 120%;
  --ivi-type-heading-2-letter-spacing: 0;

  --ivi-type-heading-3-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-heading-3-font-weight: 400;
  --ivi-type-heading-3-font-size: 44px;
  --ivi-type-heading-3-line-height: 120%;
  --ivi-type-heading-3-letter-spacing: 0;

  --ivi-type-heading-4-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-heading-4-font-weight: 400;
  --ivi-type-heading-4-font-size: 40px;
  --ivi-type-heading-4-line-height: 120%;
  --ivi-type-heading-4-letter-spacing: 0;

  --ivi-type-heading-5-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-heading-5-font-weight: 400;
  --ivi-type-heading-5-font-size: 32px;
  --ivi-type-heading-5-line-height: 120%;
  --ivi-type-heading-5-letter-spacing: 0;

  --ivi-type-heading-6-font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  --ivi-type-heading-6-font-weight: 400;
  --ivi-type-heading-6-font-size: 24px;
  --ivi-type-heading-6-line-height: 120%;
  --ivi-type-heading-6-letter-spacing: 0;

  --ivi-type-body-l-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-body-l-font-weight: 400;
  --ivi-type-body-l-font-size: 24px;
  --ivi-type-body-l-line-height: 140%;
  --ivi-type-body-l-letter-spacing: 0;

  --ivi-type-body-m-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-body-m-font-weight: 400;
  --ivi-type-body-m-font-size: 18px;
  --ivi-type-body-m-line-height: 140%;
  --ivi-type-body-m-letter-spacing: 0;

  --ivi-type-body-s-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-body-s-font-weight: 400;
  --ivi-type-body-s-font-size: 12px;
  --ivi-type-body-s-line-height: 140%;
  --ivi-type-body-s-letter-spacing: 0;

  --ivi-type-body-large-font-family: var(--ivi-type-body-l-font-family);
  --ivi-type-body-large-font-weight: var(--ivi-type-body-l-font-weight);
  --ivi-type-body-large-font-size: var(--ivi-type-body-l-font-size);
  --ivi-type-body-large-line-height: var(--ivi-type-body-l-line-height);
  --ivi-type-body-large-letter-spacing: var(--ivi-type-body-l-letter-spacing);

  --ivi-type-body-default-font-family: var(--ivi-type-body-m-font-family);
  --ivi-type-body-default-font-weight: var(--ivi-type-body-m-font-weight);
  --ivi-type-body-default-font-size: var(--ivi-type-body-m-font-size);
  --ivi-type-body-default-line-height: var(--ivi-type-body-m-line-height);
  --ivi-type-body-default-letter-spacing: var(--ivi-type-body-m-letter-spacing);

  --ivi-type-body-small-font-family: var(--ivi-type-body-s-font-family);
  --ivi-type-body-small-font-weight: var(--ivi-type-body-s-font-weight);
  --ivi-type-body-small-font-size: var(--ivi-type-body-s-font-size);
  --ivi-type-body-small-line-height: var(--ivi-type-body-s-line-height);
  --ivi-type-body-small-letter-spacing: var(--ivi-type-body-s-letter-spacing);

  --ivi-type-eyebrow-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-eyebrow-font-weight: 400;
  --ivi-type-eyebrow-font-size: 14px;
  --ivi-type-eyebrow-line-height: 120%;
  --ivi-type-eyebrow-letter-spacing: 0;

  --ivi-type-link-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-link-font-weight: 500;
  --ivi-type-link-font-size: 16px;
  --ivi-type-link-line-height: 120%;
  --ivi-type-link-letter-spacing: 0;

  --ivi-type-legal-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-legal-font-weight: 400;
  --ivi-type-legal-font-size: 12px;
  --ivi-type-legal-line-height: 120%;
  --ivi-type-legal-letter-spacing: 0;

  --ivi-type-breadcrumb-font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  --ivi-type-breadcrumb-font-weight: 400;
  --ivi-type-breadcrumb-font-size: 14px;
  --ivi-type-breadcrumb-line-height: 120%;
  --ivi-type-breadcrumb-letter-spacing: 0;

 
}

@media (max-width: 767px) {
  :root {
    /* Headings */
    --ivi-type-display-stats-font-size: 64px;
    --ivi-type-heading-1-font-size: 40px;
    --ivi-type-heading-2-font-size: 32px;
    --ivi-type-heading-3-font-size: 28px;
    --ivi-type-heading-4-font-size: 24px;
    --ivi-type-heading-5-font-size: 20px;
    --ivi-type-heading-6-font-size: 18px;

    /* Body scale tokens */
    --ivi-type-body-l-font-size: 18px;
    --ivi-type-body-s-font-size: 14px;

    /* Independent typography tokens */
    --ivi-type-eyebrow-font-size: 12px;
    --ivi-type-legal-font-size: 11px;
    --ivi-type-breadcrumb-font-size: 10px;
  }
}

.ivi-scope,
.fragment-entry-content .ivi-scope,
.lfr-editable .ivi-scope,
.page-editor__content .ivi-scope,
.page-editor__frame .ivi-scope {
  font-family: var(--ivi-font-family-body, "IVI Glance", "Noto Sans", Arial, sans-serif) !important;
}

.ivi-scope,
.fragment-entry-content .ivi-scope,
.lfr-editable .ivi-scope,
.page-editor__content .ivi-scope,
.page-editor__frame .ivi-scope {
  color: var(--ivi-color-utility-black);
  font-size: var(--ivi-type-body-m-font-size, 14px);
  font-style: normal;
  font-weight: var(--ivi-type-body-m-font-weight, 400);
  letter-spacing: var(--ivi-type-body-m-letter-spacing, 0);
  line-height: var(--ivi-type-body-m-line-height, 140%);
}

.ivi-scope p,
.ivi-scope li,
.ivi-scope dt,
.ivi-scope dd,
.ivi-scope label,
.ivi-scope input,
.ivi-scope button,
.ivi-scope select,
.ivi-scope textarea,
.ivi-scope .form-control,
.ivi-scope .btn {
  font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
}

.ivi-scope h1,
.ivi-scope .h1,
.ivi-scope h2,
.ivi-scope .h2,
.ivi-scope h3,
.ivi-scope .h3,
.ivi-scope h4,
.ivi-scope .h4,
.ivi-scope h5,
.ivi-scope .h5,
.ivi-scope h6,
.ivi-scope .h6 {
  color: var(--ivi-heading-color, var(--ivi-color-primary-deep-blue));
  font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 0;
}

.ivi-scope h1,
.ivi-scope .h1 {
  font-size: var(--ivi-type-heading-1-font-size, 64px);
  line-height: var(--ivi-type-heading-1-line-height, 120%);
}

.ivi-scope h2,
.ivi-scope .h2 {
  font-size: var(--ivi-type-heading-2-font-size, 52px);
  line-height: var(--ivi-type-heading-2-line-height, 120%);
}

.ivi-scope h3,
.ivi-scope .h3 {
  font-size: var(--ivi-type-heading-3-font-size, 44px);
  line-height: var(--ivi-type-heading-3-line-height, 120%);
}

.ivi-scope h4,
.ivi-scope .h4 {
  font-size: var(--ivi-type-heading-4-font-size, 40px);
  line-height: var(--ivi-type-heading-4-line-height, 120%);
}

.ivi-scope h5,
.ivi-scope .h5 {
  font-size: var(--ivi-type-heading-5-font-size, 32px);
  line-height: var(--ivi-type-heading-5-line-height, 120%);
}

.ivi-scope h6,
.ivi-scope .h6 {
  font-size: var(--ivi-type-heading-6-font-size, 24px);
  line-height: var(--ivi-type-heading-6-line-height, 120%);
}

/* Generar clases generales para Heading y Paragraph */
.ivi-type-display-stats,
.ivi-type-heading-1,
.ivi-type-heading-2,
.ivi-type-heading-3,
.ivi-type-heading-4,
.ivi-type-heading-5,
.ivi-type-heading-6 {
  color: var(--ivi-heading-color, var(--ivi-color-utility-black));
  font-family: var(--ivi-font-family-heading, "IVI Glance", "Noto Sans", Arial, sans-serif);
}

.ivi-type-display-stats {
  font-size: var(--ivi-type-display-stats-font-size, 72px);
  font-weight: var(--ivi-type-display-stats-font-weight, 400);
  letter-spacing: var(--ivi-type-display-stats-letter-spacing, 0);
  line-height: var(--ivi-type-display-stats-line-height, 120%);
}

.ivi-type-heading-1 {
  font-size: var(--ivi-type-heading-1-font-size, 64px);
  font-weight: var(--ivi-type-heading-1-font-weight, 400);
  letter-spacing: var(--ivi-type-heading-1-letter-spacing, 0);
  line-height: var(--ivi-type-heading-1-line-height, 120%);
}

.ivi-type-heading-2 {
  font-size: var(--ivi-type-heading-2-font-size, 52px);
  font-weight: var(--ivi-type-heading-2-font-weight, 400);
  letter-spacing: var(--ivi-type-heading-2-letter-spacing, 0);
  line-height: var(--ivi-type-heading-2-line-height, 120%);
}

.ivi-type-heading-3 {
  font-size: var(--ivi-type-heading-3-font-size, 44px);
  font-weight: var(--ivi-type-heading-3-font-weight, 400);
  letter-spacing: var(--ivi-type-heading-3-letter-spacing, 0);
  line-height: var(--ivi-type-heading-3-line-height, 120%);
}

.ivi-type-heading-4 {
  font-size: var(--ivi-type-heading-4-font-size, 40px);
  font-weight: var(--ivi-type-heading-4-font-weight, 400);
  letter-spacing: var(--ivi-type-heading-4-letter-spacing, 0);
  line-height: var(--ivi-type-heading-4-line-height, 120%);
}

.ivi-type-heading-5 {
  font-size: var(--ivi-type-heading-5-font-size, 32px);
  font-weight: var(--ivi-type-heading-5-font-weight, 400);
  letter-spacing: var(--ivi-type-heading-5-letter-spacing, 0);
  line-height: var(--ivi-type-heading-5-line-height, 120%);
}

.ivi-type-heading-6 {
  font-size: var(--ivi-type-heading-6-font-size, 24px);
  font-weight: var(--ivi-type-heading-6-font-weight, 400);
  letter-spacing: var(--ivi-type-heading-6-letter-spacing, 0);
  line-height: var(--ivi-type-heading-6-line-height, 120%);
}

.ivi-type-body-l,
.ivi-type-body-m,
.ivi-type-body-s,
.ivi-type-eyebrow,
.ivi-type-link,
.ivi-type-legal,
.ivi-type-breadcrumb,
.ivi-type-body-large,
.ivi-type-body-default,
.ivi-type-body-small,
.ivi-type-link-default {
  font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  color: var(--ivi-color-text-default);
}

.ivi-type-body-l,
.ivi-type-body-large {
  font-size: var(--ivi-type-body-large-font-size, 24px);
  font-weight: var(--ivi-type-body-large-font-weight, 400);
  letter-spacing: var(--ivi-type-body-large-letter-spacing, 0);
  line-height: var(--ivi-type-body-large-line-height, 140%);
}

.ivi-type-body-m,
.ivi-type-body-default {
  font-size: var(--ivi-type-body-default-font-size, 16px);
  font-weight: var(--ivi-type-body-default-font-weight, 400);
  letter-spacing: var(--ivi-type-body-default-letter-spacing, 0);
  line-height: var(--ivi-type-body-default-line-height, 140%);
}

.ivi-type-body-s,
.ivi-type-body-small {
  font-size: var(--ivi-type-body-small-font-size, 14px);
  font-weight: var(--ivi-type-body-small-font-weight, 400);
  letter-spacing: var(--ivi-type-body-small-letter-spacing, 0);
  line-height: var(--ivi-type-body-small-line-height, 140%);
}

.ivi-type-eyebrow {
  font-size: var(--ivi-type-eyebrow-font-size, 12px);
  font-weight: var(--ivi-type-eyebrow-font-weight, 400);
  letter-spacing: var(--ivi-type-eyebrow-letter-spacing, 0);
  line-height: var(--ivi-type-eyebrow-line-height, 120%);
}

.ivi-type-link,
.ivi-type-link-default {
  font-size: var(--ivi-type-link-font-size, 16px);
  font-weight: var(--ivi-type-link-font-weight, 500);
  letter-spacing: var(--ivi-type-link-letter-spacing, 0);
  line-height: var(--ivi-type-link-line-height, 120%);
}

.ivi-type-legal {
  font-size: var(--ivi-type-legal-font-size, 12px);
  font-weight: var(--ivi-type-legal-font-weight, 400);
  letter-spacing: var(--ivi-type-legal-letter-spacing, 0);
  line-height: var(--ivi-type-legal-line-height, 120%);
}

.ivi-type-breadcrumb {
  font-size: var(--ivi-type-breadcrumb-font-size, 12px);
  font-weight: var(--ivi-type-breadcrumb-font-weight, 400);
  letter-spacing: var(--ivi-type-breadcrumb-letter-spacing, 0);
  line-height: var(--ivi-type-breadcrumb-line-height, 120%);
}

/*
 * IVIRMA filter dropdowns
 *
 * Collection Filter renders Clay markup outside of the fragment template.
 * The namespace on the Directory dropzone keeps these overrides local to
 * the selected filter while making the same variants reusable elsewhere.
 */
.ivirma-filter-dropdown {
  --ivirma-filter-active-background: #f0f5ff;
  --ivirma-filter-border: #e7e7ed;
  --ivirma-filter-disabled: #a7a9bc;
  --ivirma-filter-menu-background: #ffffff;
  --ivirma-filter-text: #6b6c7e;
  --ivirma-filter-text-active: #272833;
}

.ivirma-filter-dropdown .dropdown-toggle {
  align-items: center;
  background: var(--ivirma-filter-menu-background);
  border: 1px solid var(--ivirma-filter-border);
  border-radius: 4px;
  box-sizing: border-box;
  color: #1c1c1c;
  display: flex;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  justify-content: space-between;
  line-height: 1.4;
  min-height: 40px;
  padding: 8px 20px;
  text-align: left;
  width: 100%;
}

.ivirma-filter-dropdown .dropdown-toggle:hover,
.ivirma-filter-dropdown .dropdown-toggle:focus {
  background: var(--ivirma-filter-active-background);
  border-color: var(--ivirma-filter-border);
  box-shadow: none;
  color: var(--ivirma-filter-text-active);
}

.ivirma-filter-dropdown .dropdown-toggle:focus-visible {
  background: var(--ivirma-filter-active-background);
  border-color: var(--ivirma-filter-border);
  box-shadow: none;
  color: var(--ivirma-filter-text-active);
  outline: 2px solid #004df0;
  outline-offset: 2px;
}

.ivirma-filter-dropdown .dropdown-menu {
  background: var(--ivirma-filter-menu-background);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgb(39 40 51 / 12%);
  margin-top: 4px;
  min-width: 192px;
  padding: 8px 0;
}

.ivirma-filter-dropdown .dropdown-item {
  align-items: center;
  background: var(--ivirma-filter-menu-background);
  color: var(--ivirma-filter-text);
  display: flex;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  gap: 16px;
  line-height: 1.5;
  min-height: 37px;
  padding: 8px 16px;
  white-space: normal;
}

.ivirma-filter-dropdown .dropdown-item:hover,
.ivirma-filter-dropdown .dropdown-item:focus,
.ivirma-filter-dropdown .dropdown-item.active,
.ivirma-filter-dropdown .dropdown-item:active {
  background: var(--ivirma-filter-active-background);
  color: var(--ivirma-filter-text-active);
}

.ivirma-filter-dropdown .dropdown-item.disabled,
.ivirma-filter-dropdown .dropdown-item:disabled {
  color: var(--ivirma-filter-disabled);
  opacity: 1;
}

.ivirma-filter-dropdown .dropdown-item .lexicon-icon,
.ivirma-filter-dropdown .dropdown-item svg {
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.ivirma-filter-dropdown .dropdown-item .custom-control,
.ivirma-filter-dropdown .dropdown-item .custom-checkbox,
.ivirma-filter-dropdown .dropdown-item .custom-radio {
  align-items: center;
  display: flex;
  gap: 16px;
  margin: 0;
  min-height: 21px;
  padding: 0;
  width: 100%;
}

.ivirma-filter-dropdown .dropdown-item input[type="checkbox"],
.ivirma-filter-dropdown .dropdown-item input[type="radio"] {
  accent-color: #004df0;
  flex: 0 0 auto;
  margin: 0;
}

.ivirma-filter-dropdown--dividers .dropdown-item + .dropdown-item {
  border-top: 1px solid var(--ivirma-filter-border);
}

.ivirma-filter-dropdown--search .dropdown-menu {
  padding-top: 8px;
}

.ivirma-filter-dropdown--search .dropdown-menu .form-control,
.ivirma-filter-dropdown--search .dropdown-menu input[type="search"],
.ivirma-filter-dropdown--search .dropdown-menu input[type="text"] {
  background: #ffffff;
  border: 1px solid #67625b;
  border-radius: 4px;
  box-sizing: border-box;
  color: #1c1c1c;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  min-height: 32px;
  padding: 5px 12px;
  width: calc(100% - 16px);
}

.ivirma-filter-dropdown--search .dropdown-menu > .form-group,
.ivirma-filter-dropdown--search .dropdown-menu > .input-group {
  margin: 0 8px 8px;
}

.ivirma-filter-dropdown--right-icons .dropdown-item,
.ivirma-filter-dropdown--icon-text .dropdown-item {
  justify-content: space-between;
}

.ivirma-filter-dropdown--radio-button .dropdown-item,
.ivirma-filter-dropdown--checkbox .dropdown-item {
  padding-bottom: 8px;
  padding-top: 8px;
}

.ivirma-filter-dropdown .dropdown-item:focus-visible,
.ivirma-filter-dropdown .dropdown-toggle:focus-visible {
  outline: 2px solid #004df0;
  outline-offset: -2px;
}

/* Collection Filter portals the open menu under body. Directory adds one of
 * these variant classes so the complete Clay surface can be normalized to the
 * IVIRMA dropdown component from Figma (node 7392:48837). */
.ivirma-filter-dropdown-menu.dropdown-menu.show {
  --ivirma-dropdown-active: #f0f5ff;
  --ivirma-dropdown-border: #e7e7ed;
  --ivirma-dropdown-control-border: #cdced9;
  --ivirma-dropdown-disabled: #a7a9bc;
  --ivirma-dropdown-primary: #004df0;
  --ivirma-dropdown-text: #6b6c7e;
  --ivirma-dropdown-text-active: #272833;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 4px rgb(39 40 51 / 12%);
  box-sizing: border-box;
  font-family: "SF Pro Text", "Noto Sans", Arial, sans-serif;
  margin: 0;
  max-width: calc(100vw - 16px);
  min-width: 192px;
  overflow: hidden;
  padding: 8px 0;
  width: 192px;
}

/* Collection Filter adds a submit action. Figma defines that composition as
 * Form Group: 240px wide, a search field, a group label and an Apply block. */
.ivirma-filter-dropdown-menu--form-group.dropdown-menu.show {
  width: 240px;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show form,
.ivirma-filter-dropdown-menu.dropdown-menu.show .inline-scroller,
.ivirma-filter-dropdown-menu.dropdown-menu.show ul {
  margin: 0;
  padding: 0;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show ul {
  list-style: none;
}

.ivirma-filter-dropdown-menu--form-group.dropdown-menu.show .ivirma-filter-heading {
  background: #ffffff;
  box-sizing: border-box;
  color: #272833;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  margin: 0;
  padding: 7px 16px;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show ul .dropdown-section {
  align-items: center;
  background: #ffffff;
  border: 0;
  box-sizing: border-box;
  color: var(--ivirma-dropdown-text);
  display: flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  height: 37px;
  line-height: 21px;
  margin: 0;
  min-height: 37px;
  padding: 8px 16px;
  transition: background-color 120ms ease, color 120ms ease;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show ul .dropdown-section:hover,
.ivirma-filter-dropdown-menu.dropdown-menu.show ul .dropdown-section:focus-within,
.ivirma-filter-dropdown-menu.dropdown-menu.show ul .dropdown-section.is-selected {
  background: var(--ivirma-dropdown-active);
  color: var(--ivirma-dropdown-text-active);
}

.ivirma-filter-dropdown-menu.dropdown-menu.show ul .dropdown-section.is-disabled {
  background: #ffffff;
  color: var(--ivirma-dropdown-disabled);
  cursor: not-allowed;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control,
.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-checkbox,
.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-radio {
  align-items: center;
  display: flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
  min-height: 24px;
  padding: 0 !important;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control > label {
  display: block;
  margin: 0;
  padding-left: 0 !important;
  position: relative;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-input {
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-label {
  align-items: center;
  color: inherit;
  display: flex;
  font-family: inherit !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  gap: 8px;
  line-height: 21px !important;
  margin: 0;
  min-height: 24px;
  padding: 0 !important;
  position: relative;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-label-text {
  color: inherit;
  font-family: inherit !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 21px;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-label::before,
.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-label::after {
  background: none;
  border: 0;
  box-shadow: none;
  content: none;
  inset: auto;
  margin: 0;
  position: static;
}

/* Figma form-group action block: 16px side padding, 8px vertical padding and
 * a full-width 40px primary pill. */
.ivirma-filter-dropdown-menu.dropdown-menu.show form > .dropdown-section[role="presentation"] {
  background: #ffffff !important;
  box-sizing: border-box;
  height: auto;
  margin: 8px 0 0;
  min-height: 56px;
  padding: 8px 16px;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show form > .dropdown-section[role="presentation"] .btn {
  align-items: center;
  background: var(--ivi-colors-buttons-primary-bg-default, #0ce3c6) !important;
  border: 0 !important;
  border-radius: var(--ivi-radius-38-px, 38px) !important;
  box-shadow: none !important;
  color: var(--ivi-colors-buttons-primary-text-default, #08004f) !important;
  display: flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  line-height: 24px;
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  width: 100%;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show form > .dropdown-section[role="presentation"] .btn:hover,
.ivirma-filter-dropdown-menu.dropdown-menu.show form > .dropdown-section[role="presentation"] .btn:focus {
  background: var(--ivi-colors-buttons-primary-bg-hover, #00cdb4) !important;
  color: var(--ivi-colors-buttons-primary-text-hover, #08004f) !important;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show form > .dropdown-section[role="presentation"] .btn:focus-visible {
  outline: 2px solid var(--ivirma-dropdown-primary);
  outline-offset: 2px;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show form > .dropdown-section[role="presentation"] .btn:disabled {
  background: var(--ivi-colors-buttons-primary-bg-disabled, #d7f8f3) !important;
  color: var(--ivi-colors-buttons-primary-text-disabled, #7b789f) !important;
  opacity: 1;
}

/* Search variant: exact 32px field, 8px inset and the 16px blue search icon
 * used by the Figma component. */
.ivirma-filter-dropdown-menu--search.dropdown-menu.show > .ivirma-filter-search,
.ivirma-filter-dropdown-menu--form-group.dropdown-menu.show > .ivirma-filter-search {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.601 14.2336 11.8041 10.418C16.3666 2.88358 7.17599-3.20079 1.86036 1.85546-3.29901 7.66483 3.16036 16.2492 10.4041 11.8242l3.7969 3.7125c1.0969 1.2063 2.5-.2 1.4-1.3031ZM6.44474 1.98671c5.99686 0 6.19026 9.03129 0 9.03129C.416615 11.018.58849 1.98671 6.44474 1.98671Z' fill='%23004df0'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  border: 1px solid #67625b;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  color: #1c1c1c;
  display: block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  line-height: 21px;
  margin: 0 8px 8px;
  min-height: 32px;
  min-width: 0;
  padding: 5px 36px 5px 12px;
  width: calc(100% - 16px);
}

.ivirma-filter-dropdown-menu--search.dropdown-menu.show > .ivirma-filter-search:focus,
.ivirma-filter-dropdown-menu--form-group.dropdown-menu.show > .ivirma-filter-search:focus {
  border-color: var(--ivirma-dropdown-primary);
  box-shadow: 0 0 0 1px var(--ivirma-dropdown-primary);
  outline: 0;
}

/* Default and divider rows have no leading Clay control. */
.ivirma-filter-dropdown-menu--default.dropdown-menu.show .custom-control-label,
.ivirma-filter-dropdown-menu--dividers.dropdown-menu.show .custom-control-label {
  gap: 0;
}

.ivirma-filter-dropdown-menu--dividers.dropdown-menu.show ul > li + li .dropdown-section {
  border-top: 1px solid var(--ivirma-dropdown-border);
}

/* Right-icons and Search use the 16px Lexicon angle-right affordance. */
.ivirma-filter-dropdown-menu--right-icons.dropdown-menu.show .custom-control-label::after,
.ivirma-filter-dropdown-menu--search.dropdown-menu.show .custom-control-label::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: var(--ivirma-dropdown-text);
  content: "";
  display: block;
  flex: 0 0 7px;
  height: 7px;
  margin-left: auto;
  position: static;
  transform: rotate(-45deg);
  width: 7px;
}

/* Icon + Text uses the 16px cloud icon specified by the component. */
.ivirma-filter-dropdown-menu--icon-text.dropdown-menu.show .custom-control-label::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4.25 13.25a3.25 3.25 0 1 1 .45-6.47A4.75 4.75 0 0 1 14 8.75a2.5 2.5 0 0 1-.5 4.97H4.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: currentColor;
  color: var(--ivirma-dropdown-text);
  content: "";
  display: block;
  flex: 0 0 16px;
  height: 16px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4.25 13.25a3.25 3.25 0 1 1 .45-6.47A4.75 4.75 0 0 1 14 8.75a2.5 2.5 0 0 1-.5 4.97H4.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
  position: static;
  width: 16px;
}

/* Radio and checkbox controls are rebuilt from the Figma 24px controls so
 * Clay's native pseudo-elements cannot leak through. */
.ivirma-filter-dropdown-menu--radio-button.dropdown-menu.show .custom-control-label::before,
.ivirma-filter-dropdown-menu--checkbox.dropdown-menu.show .custom-control-label::before {
  background: #ffffff;
  border: 1px solid var(--ivirma-dropdown-control-border);
  box-sizing: border-box;
  content: "";
  display: block;
  flex: 0 0 24px;
  height: 24px;
  position: static;
  width: 24px;
}

.ivirma-filter-dropdown-menu--radio-button.dropdown-menu.show .custom-control-label::before {
  border-radius: 50%;
}

.ivirma-filter-dropdown-menu--checkbox.dropdown-menu.show .custom-control-label::before {
  border-radius: 2px;
}

.ivirma-filter-dropdown-menu--radio-button.dropdown-menu.show .custom-control-input:checked + .custom-control-label::before {
  background: radial-gradient(circle, var(--ivirma-dropdown-primary) 0 3px, #ffffff 3.5px);
  border-color: var(--ivirma-dropdown-primary);
}

.ivirma-filter-dropdown-menu--checkbox.dropdown-menu.show .custom-control-input:checked + .custom-control-label::before {
  background: #0b5fff;
  border-color: #0b5fff;
}

.ivirma-filter-dropdown-menu--checkbox.dropdown-menu.show .custom-control-input:checked + .custom-control-label::after {
  background: center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3547 17.6813C9.97972 17.6813 9.6141 17.5312 9.34691 17.2641L5.08128 12.9984C3.7641 11.6813 5.77503 9.67033 7.09222 10.9875L10.2891 14.1844L16.8422 6.81565C18.0797 5.4094 20.2172 7.28908 18.9797 8.69533L11.4235 17.1984C11.1657 17.4937 10.7953 17.6672 10.4016 17.6813C10.3828 17.6813 10.3688 17.6813 10.3547 17.6813Z' fill='white'/%3E%3C/svg%3E");
  content: "";
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  width: 24px;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-input:disabled + .custom-control-label {
  color: var(--ivirma-dropdown-disabled);
  cursor: not-allowed;
}

.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-input:disabled + .custom-control-label::before,
.ivirma-filter-dropdown-menu.dropdown-menu.show .custom-control-input:disabled + .custom-control-label::after {
  color: var(--ivirma-dropdown-disabled);
  opacity: 0.65;
}

/* IVIRMA Collection Display pagination
 *
 * Directory adds this class to the native Liferay pagination root. The
 * selectors therefore remain global-client-extension CSS while their visual
 * effect is limited to the Collection Display inside Directory. */
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) {
  --ivirma-pagination-active: #004df0;
  --ivirma-pagination-control: #6b6c7e;
  --ivirma-pagination-result: #67625b;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-family: var(--ivi-font-family-body, "Noto Sans", Arial, sans-serif);
  gap: 16px;
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 760px;
  width: 100%;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-bar-first,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-bar-first > div,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-bar-first > span {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-results {
  color: var(--ivirma-pagination-result);
  display: block;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  margin: 0;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .dropdown-toggle.page-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 38px;
  box-shadow: none;
  color: #1c1c1c;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
  height: 32px;
  line-height: 19.6px;
  padding: 5.5px 12px;
  text-decoration: none;
  white-space: nowrap;
  width: auto;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .dropdown-toggle.page-link::after {
  border: 0;
  content: "";
  display: block;
  flex: 0 0 16px;
  height: 16px;
  margin: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%236b6c7e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%236b6c7e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  width: 16px;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination {
  align-items: center;
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0;
  padding: 0;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) > nav {
  flex: 0 0 auto;
  margin-left: auto;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item {
  align-items: center;
  display: flex;
  margin: 0;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item:first-child {
  margin-right: 8px;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item:last-child {
  margin-left: 8px;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  color: var(--ivirma-pagination-control);
  display: flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  justify-content: center;
  line-height: 19.6px;
  margin: 0;
  min-width: 32px;
  padding: 8px;
  text-decoration: none;
  width: 32px;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link .lexicon-icon,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link svg {
  height: 16px;
  width: 16px;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item.active .page-link,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link[aria-current="page"] {
  background: var(--ivirma-pagination-active);
  color: #ffffff;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link:hover,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link:focus {
  background: #f0f5ff;
  box-shadow: none;
  color: var(--ivirma-pagination-active);
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item.active .page-link:hover,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item.active .page-link:focus,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link[aria-current="page"]:hover,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link[aria-current="page"]:focus {
  background: var(--ivirma-pagination-active);
  color: #ffffff;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link:focus-visible,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .dropdown-toggle.page-link:focus-visible {
  outline: 2px solid var(--ivirma-pagination-active);
  outline-offset: 2px;
}

:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-item.disabled .page-link,
:is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination .page-link:disabled {
  background: transparent;
  color: #a7a9bc;
  opacity: 1;
}

@media (max-width: 767.98px) {
  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar),
  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-bar-first,
  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-bar-first > div,
  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-bar-first > span {
    align-items: center;
    flex-direction: column;
  }

  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) {
    gap: 16px;
    justify-content: flex-start;
  }

  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) .pagination-results {
    flex: 0 0 auto;
    max-width: 320px;
    text-align: center;
    width: 100%;
  }

  :is(.ivirma-directory-pagination, .ivirma-directory-root .pagination-bar) > nav {
    margin-left: 0;
  }

}