* {
-webkit-tap-highlight-color: transparent
}
html {
-moz-text-size-adjust: 100%;
text-size-adjust: 100%
}
:where(*, :before, :after) {
box-sizing: border-box
}
body {
accent-color: var(--nyc-sys-color-accent);
font-feature-settings: var(--nyc-sys-font-features, normal);
font-weight: var(--nyc-sys-font-weight, 500);
line-height: var(--nyc-sys-type-line-height)
}
:where(body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, img, svg, small, strike, strong, sub, sup, b, u, i, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, article, aside, canvas, footer, header, nav, section, time, button, video, textarea, input),
body {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0
}
:where(ul[role=list], ol[role=list]) {
list-style: none
}
:where(img, picture) {
display: block;
max-width: 100%
}
:where(input, button, textarea, select) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: inherit;
font-feature-settings: inherit
}
:root {
--nyc-cmp-navigation-primary-padding-block: 0;
--nyc-cmp-navigation-primary-padding-inline: 0;
--nyc-cmp-button-font-weight: 600;
--nyc-sys-radius-fluid-sm-base: clamp(0.75rem, 0.6461rem + 0.5195vw, 1rem);
--nyc-sys-radius-fluid-xs-base: clamp(0.5rem, 0.2922rem + 1.039vw, 1rem);
--nyc-sys-radius-fluid-base-2xl: clamp(1rem, 0.3766rem + 3.1169vw, 2.5rem);
--nyc-sys-space-fluid-xl-3xl: clamp(2rem, 1.5844rem + 2.0779vw, 3rem);
--nyc-sys-space-fluid-xs-xl: clamp(0.5rem, -0.1234rem + 3.1169vw, 2rem);
--nyc-sys-space-fluid-5xl-6xl: clamp(4rem, 3.5844rem + 2.0779vw, 5rem);
--nyc-sys-space-fluid-xs-base: clamp(0.5rem, 0.2922rem + 1.039vw, 1rem);
--nyc-sys-space-fluid-sm-base: clamp(0.75rem, 0.6461rem + 0.5195vw, 1rem);
--nyc-sys-space-fluid-3xl-5xl: clamp(3rem, 2.5844rem + 2.0779vw, 4rem);
--nyc-sys-space-fluid-xl-5xl: clamp(2rem, 1.1688rem + 4.1558vw, 4rem);
--nyc-sys-space-fluid-6xl-8xl: clamp(5rem, 3.7532rem + 6.2338vw, 8rem);
--nyc-sys-space-fluid-7xl-8xl: clamp(6rem, 5.1688rem + 4.1558vw, 8rem);
--nyc-sys-space-fluid-lg-3xl: clamp(1.5rem, 0.8766rem + 3.1169vw, 3rem);
--nyc-sys-space-fluid-base-5xl: clamp(1rem, -0.2468rem + 6.2338vw, 4rem);
--nyc-sys-space-fluid-base-lg: clamp(1rem, 0.7922rem + 1.039vw, 1.5rem);
--nyc-sys-space-fluid-lg-xl: clamp(1.5rem, 1.2922rem + 1.039vw, 2rem);
--nyc-sys-space-fluid-lg-8xl: clamp(1.5rem, -1.2013rem + 13.5065vw, 8rem);
--nyc-sys-space-fluid-xl-2xl: clamp(2rem, 1.7922rem + 1.039vw, 2.5rem);
--nyc-sys-space-fluid-lg-5xl: clamp(1.5rem, 0.461rem + 5.1948vw, 4rem);
--nyc-sys-space-fluid-base-xl: clamp(1rem, 0.5844rem + 2.0779vw, 2rem);
--nyc-sys-space-fluid-xs-sm: clamp(0.5rem, 0.3961rem + 0.5195vw, 0.75rem);
--nyc-sys-space-fluid-lg-2xl: clamp(1.5rem, 1.0844rem + 2.0779vw, 2.5rem);
--nyc-sys-space-fluid-2xl-5xl: clamp(2.5rem, 1.8766rem + 3.1169vw, 4rem);
--nyc-sys-space-fluid-base-2xl: clamp(1rem, 0.3766rem + 3.1169vw, 2.5rem);
--nyc-sys-space-fluid-2xl-6xl: clamp(2.5rem, 1.461rem + 5.1948vw, 5rem);
--nyc-sys-size-text-fluid-4xl-8xl: clamp(2rem, 0.3377rem + 8.3117vw, 6rem);
--nyc-sys-size-text-fluid-sm-xl: clamp(1rem, 0.8442rem + 0.7792vw, 1.375rem);
--nyc-sys-size-text-fluid-4xl-7xl: clamp(2rem, 1.1688rem + 4.1558vw, 4rem);
--nyc-sys-size-text-fluid-lg-3xl: clamp(1.25rem, 1.0422rem + 1.039vw, 1.75rem);
--nyc-sys-size-text-fluid-3xl-6xl: clamp(1.75rem, 1.0227rem + 3.6364vw, 3.5rem);
--nyc-sys-size-text-fluid-xl-3xl: clamp(1.375rem, 1.2192rem + 0.7792vw, 1.75rem);
--nyc-sys-size-text-fluid-lg-2xl: clamp(1.25rem, 1.1461rem + 0.5195vw, 1.5rem);
--nyc-sys-size-text-fluid-base-lg: clamp(1.125rem, 1.0731rem + 0.2597vw, 1.25rem);
--nyc-sys-size-text-fluid-lg-xl: clamp(1.25rem, 1.1981rem + 0.2597vw, 1.375rem);
--nyc-sys-size-text-fluid-2xl-5xl: clamp(1.5rem, 1.0844rem + 2.0779vw, 2.5rem);
--nyc-sys-size-text-fluid-base-xl: clamp(1.125rem, 1.0211rem + 0.5195vw, 1.375rem);
--nyc-sys-size-text-fluid-xl-4xl: clamp(1.375rem, 1.1153rem + 1.2987vw, 2rem);
--nyc-sys-size-text-fluid-2xl-4xl: clamp(1.5rem, 1.2922rem + 1.039vw, 2rem);
--nyc-sys-size-text-fluid-4xl-6xl: clamp(2rem, 1.3766rem + 3.1169vw, 3.5rem);
--nyc-sys-size-text-fluid-3xl-5xl: clamp(1.75rem, 1.4383rem + 1.5584vw, 2.5rem);
--nyc-sys-size-text-fluid-5xl-7xl: clamp(2.5rem, 1.8766rem + 3.1169vw, 4rem);
--nyc-ref-type-family-clash: "Clash Grotesk", sans-serif;
--nyc-ref-type-family-noto: "Noto Sans", sans-serif;
--nyc-ref-gradient-blue-orange: linear-gradient(180deg, #e2f3ff, #ffecd9);
--nyc-ref-gradient-rainbow: conic-gradient(from 175deg at 50% 50%, #6c95ff 17.627713680267334deg, #ffa149 101.25deg, #bb64ff 226.87499284744263deg, #70baff 325.17677307128906deg);
--nyc-ref-gradient-purple: linear-gradient(179deg, #131627 15.45%, #4b184d 87.84%);
--nyc-ref-gradient-orange-blue: linear-gradient(180deg, #ffecd9, #e2f3ff);
--nyc-ref-shadow-20: 4px 4px 12px 0px rgba(0, 0, 0, .2);
--nyc-ref-shadow-10: 0px 4px 12px 0px rgba(0, 0, 0, .2);
--nyc-ref-color-yellow-100: #fff9e5;
--nyc-ref-color-yellow-90: #ffeeb2;
--nyc-ref-color-yellow-70: #fd6;
--nyc-ref-color-yellow-50: #ffc700;
--nyc-ref-color-yellow-30: #970;
--nyc-ref-color-yellow-10: #4c3c00;
--nyc-ref-color-red-100: #fde7e8;
--nyc-ref-color-red-90: #f9b8bb;
--nyc-ref-color-red-70: #f47178;
--nyc-ref-color-red-50: #ec131e;
--nyc-ref-color-red-30: #8e0b12;
--nyc-ref-color-red-10: #470609;
--nyc-ref-color-green-100: #e6f8e6;
--nyc-ref-color-green-90: #b3e9b3;
--nyc-ref-color-green-70: #66d468;
--nyc-ref-color-green-50: #00b703;
--nyc-ref-color-green-30: #006e02;
--nyc-ref-color-green-10: #003701;
--nyc-ref-color-purple-50: #c67dff;
--nyc-ref-color-purple-40: #7f00d6;
--nyc-ref-color-purple-30: #58376e;
--nyc-ref-color-purple-20: #4c3959;
--nyc-ref-color-purple-10: #131627;
--nyc-ref-color-orange-80: #fde5cd;
--nyc-ref-color-orange-60: #f9b563;
--nyc-ref-color-orange-40: #f68d29;
--nyc-ref-color-blue-100: #e7f0fa;
--nyc-ref-color-blue-90: #d1e9ff;
--nyc-ref-color-blue-80: #b5dbff;
--nyc-ref-color-blue-70: #70baff;
--nyc-ref-color-blue-60: #3185fc;
--nyc-ref-color-blue-50: #004fff;
--nyc-ref-color-blue-40: #103fef;
--nyc-ref-color-blue-30: #051adb;
--nyc-ref-color-blue-20: #0008a0;
--nyc-ref-color-blue-10: #050560;
--nyc-ref-color-gray-10-25: rgba(34, 34, 34, .251);
--nyc-ref-color-gray-white-25: hsla(0, 0%, 100%, .251);
--nyc-ref-color-gray-white-80: hsla(0, 0%, 100%, .8);
--nyc-ref-color-gray-black-90: rgba(0, 0, 0, .902);
--nyc-ref-color-gray-10-15: rgba(34, 34, 34, .149);
--nyc-ref-color-gray-white-15: hsla(0, 0%, 100%, .149);
--nyc-ref-color-gray-10-60: rgba(34, 34, 34, .6);
--nyc-ref-color-gray-white-60: hsla(0, 0%, 100%, .6);
--nyc-ref-color-gray-white: #fff;
--nyc-ref-color-gray-black: #000;
--nyc-ref-color-gray-90: #eee;
--nyc-ref-color-gray-80: #ddd;
--nyc-ref-color-gray-70: #ccc;
--nyc-ref-color-gray-60: #aaa;
--nyc-ref-color-gray-50: #999;
--nyc-ref-color-gray-40: #777;
--nyc-ref-color-gray-30: #555;
--nyc-ref-color-gray-20: #333;
--nyc-ref-color-gray-10: #222;
--nyc-ref-length-1-5: 1.5px;
--nyc-ref-length-1440: 1440px;
--nyc-ref-length-1160: 1160px;
--nyc-ref-length-1090: 1090px;
--nyc-ref-length-750: 750px;
--nyc-ref-length-440: 440px;
--nyc-ref-length-360: 360px;
--nyc-ref-length-320: 320px;
--nyc-ref-length-240: 240px;
--nyc-ref-length-176: 176px;
--nyc-ref-length-128: 128px;
--nyc-ref-length-100: 100px;
--nyc-ref-length-96: 96px;
--nyc-ref-length-90: 90px;
--nyc-ref-length-80: 80px;
--nyc-ref-length-64: 64px;
--nyc-ref-length-56: 56px;
--nyc-ref-length-50: 50px;
--nyc-ref-length-48: 48px;
--nyc-ref-length-40: 40px;
--nyc-ref-length-36: 36px;
--nyc-ref-length-32: 32px;
--nyc-ref-length-28: 28px;
--nyc-ref-length-24: 24px;
--nyc-ref-length-22: 22px;
--nyc-ref-length-20: 20px;
--nyc-ref-length-18: 18px;
--nyc-ref-length-16: 16px;
--nyc-ref-length-14: 14px;
--nyc-ref-length-12: 12px;
--nyc-ref-length-10: 10px;
--nyc-ref-length-8: 8px;
--nyc-ref-length-4: 4px;
--nyc-ref-length-2: 2px;
--nyc-cmp-modal-body-padding-horizontal: var(--nyc-sys-space-fluid-base-xl);
--nyc-cmp-modal-body-padding-vertical: var(--nyc-sys-space-fluid-base-xl);
--nyc-cmp-modal-header-padding-vertical: var(--nyc-sys-space-fluid-sm-base);
--nyc-cmp-modal-header-padding-horizontal: var(--nyc-sys-space-fluid-base-lg);
--nyc-cmp-table-header-background: var(--nyc-ref-color-gray-20);
--nyc-cmp-hero-padding-horizontal: var(--nyc-sys-space-fluid-base-5xl);
--nyc-cmp-hero-padding-vertical: var(--nyc-sys-space-fluid-xl-5xl);
--nyc-cmp-center-gutter: var(--nyc-sys-space-fluid-base-5xl);
--nyc-cmp-accordion-icon-size: var(--nyc-sys-size-text-fluid-3xl-5xl);
--nyc-cmp-accordion-body-padding-block: var(--nyc-sys-space-fluid-lg-xl);
--nyc-cmp-accordion-body-padding-inline: var(--nyc-sys-space-fluid-lg-xl);
--nyc-cmp-accordion-heading-padding-inline: var(--nyc-sys-space-fluid-base-lg);
--nyc-cmp-accordion-heading-font-size: var(--nyc-sys-size-text-fluid-xl-3xl);
--nyc-cmp-heading-h5-size: var(--nyc-sys-size-text-fluid-base-lg);
--nyc-cmp-heading-h4-size: var(--nyc-sys-size-text-fluid-lg-2xl);
--nyc-cmp-heading-h1-home-sub: var(--nyc-sys-size-text-fluid-3xl-6xl);
--nyc-cmp-heading-h1-home: var(--nyc-sys-size-text-fluid-5xl-7xl);
--nyc-cmp-heading-h3-size: var(--nyc-sys-size-text-fluid-xl-3xl);
--nyc-cmp-heading-h2-size: var(--nyc-sys-size-text-fluid-3xl-5xl);
--nyc-cmp-heading-h1-size: var(--nyc-sys-size-text-fluid-4xl-6xl);
--nyc-cmp-footer-color: var(--nyc-ref-color-gray-white);
--nyc-cmp-footer-background: var(--nyc-ref-color-gray-black);
--nyc-cmp-navigation-official-message: var(--nyc-ref-color-gray-20);
--nyc-cmp-navigation-primary-background: var(--nyc-ref-color-gray-black);
--nyc-cmp-header-primary-on-header: var(--nyc-ref-color-gray-white);
--nyc-cmp-header-primary-background: var(--nyc-ref-color-gray-black);
--nyc-cmp-button-padding-block: var(--nyc-sys-space-fluid-xs-sm);
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-fluid-base-xl);
--nyc-cmp-button-font-size: var(--nyc-sys-size-text-fluid-base-xl);
--nyc-cmp-card-heading-size: var(--nyc-sys-size-text-fluid-xl-3xl);
--nyc-sys-radius-xl: var(--nyc-ref-length-32);
--nyc-sys-radius-sm: var(--nyc-ref-length-12);
--nyc-sys-radius-2xs: var(--nyc-ref-length-4);
--nyc-sys-radius-2xl: var(--nyc-ref-length-40);
--nyc-sys-radius-lg: var(--nyc-ref-length-24);
--nyc-sys-radius-base: var(--nyc-ref-length-16);
--nyc-sys-radius-xs: var(--nyc-ref-length-8);
--nyc-sys-font-family-heading: var(--nyc-ref-type-family-clash);
--nyc-sys-font-family-body: var(--nyc-ref-type-family-noto);
--nyc-sys-space-7xl: var(--nyc-ref-length-96);
--nyc-sys-space-4xl: var(--nyc-ref-length-56);
--nyc-sys-space-3xl: var(--nyc-ref-length-48);
--nyc-sys-space-2xs: var(--nyc-ref-length-4);
--nyc-sys-space-xl: var(--nyc-ref-length-32);
--nyc-sys-space-8xl: var(--nyc-ref-length-128);
--nyc-sys-space-6xl: var(--nyc-ref-length-80);
--nyc-sys-space-5xl: var(--nyc-ref-length-64);
--nyc-sys-space-2xl: var(--nyc-ref-length-40);
--nyc-sys-space-lg: var(--nyc-ref-length-24);
--nyc-sys-space-base: var(--nyc-ref-length-16);
--nyc-sys-space-sm: var(--nyc-ref-length-12);
--nyc-sys-space-xs: var(--nyc-ref-length-8);
--nyc-sys-gradient-text-fill: var(--nyc-ref-gradient-rainbow);
--nyc-sys-gradient-background: var(--nyc-ref-gradient-blue-orange);
--nyc-sys-shadow-base: var(--nyc-ref-shadow-20);
--nyc-sys-shadow-low: var(--nyc-ref-shadow-10);
--nyc-sys-color-element-pressed-inverted: var(--nyc-ref-color-gray-white-25);
--nyc-sys-color-element-hover-inverted: var(--nyc-ref-color-gray-white-15);
--nyc-sys-color-progress-complete: var(--nyc-ref-color-gray-10);
--nyc-sys-color-progress-incomplete: var(--nyc-ref-color-gray-40);
--nyc-sys-color-link-hover: var(--nyc-ref-color-blue-10);
--nyc-sys-color-element-pressed: var(--nyc-ref-color-gray-10-25);
--nyc-sys-color-link-inverted: var(--nyc-ref-color-blue-80);
--nyc-sys-color-link-high-contrast: var(--nyc-ref-color-gray-black);
--nyc-sys-color-auxiliary-information: var(--nyc-ref-color-blue-70);
--nyc-sys-color-auxiliary-warning: var(--nyc-ref-color-yellow-50);
--nyc-sys-color-auxiliary-error: var(--nyc-ref-color-red-50);
--nyc-sys-color-auxiliary-success: var(--nyc-ref-color-green-50);
--nyc-sys-color-subproperty-background: var(--nyc-ref-color-blue-100);
--nyc-sys-color-element-hover: var(--nyc-ref-color-gray-10-15);
--nyc-sys-color-link: var(--nyc-ref-color-blue-30);
--nyc-sys-color-link-visited: var(--nyc-ref-color-purple-40);
--nyc-sys-color-on-secondary-hover: var(--nyc-ref-color-blue-10);
--nyc-sys-color-on-inactive: var(--nyc-ref-color-gray-10);
--nyc-sys-color-inactive: var(--nyc-ref-color-gray-70);
--nyc-sys-color-border-medium: var(--nyc-ref-color-gray-60);
--nyc-sys-color-border-focus-high: var(--nyc-ref-color-gray-white);
--nyc-sys-color-border-focus: var(--nyc-ref-color-gray-black);
--nyc-sys-color-border-medium-low: var(--nyc-ref-color-gray-70);
--nyc-sys-color-border-high: var(--nyc-ref-color-gray-black);
--nyc-sys-color-border-medium-high: var(--nyc-ref-color-gray-30);
--nyc-sys-color-border-base: var(--nyc-ref-color-gray-80);
--nyc-sys-color-on-surface-high: var(--nyc-ref-color-gray-white);
--nyc-sys-color-on-surface-base: var(--nyc-ref-color-gray-black);
--nyc-sys-color-surface-info: var(--nyc-ref-color-blue-100);
--nyc-sys-color-surface-warning: var(--nyc-ref-color-yellow-100);
--nyc-sys-color-surface-error: var(--nyc-ref-color-red-100);
--nyc-sys-color-surface-success: var(--nyc-ref-color-green-100);
--nyc-sys-color-surface-input-highlight: var(--nyc-ref-color-blue-100);
--nyc-sys-color-surface-input: var(--nyc-ref-color-gray-white);
--nyc-sys-color-surface-high-overlay-white: var(--nyc-ref-color-gray-white-80);
--nyc-sys-color-surface-highlight: var(--nyc-ref-color-blue-90);
--nyc-sys-color-surface-high-overlay-black: var(--nyc-ref-color-gray-black-90);
--nyc-sys-color-surface-high: var(--nyc-ref-color-gray-black);
--nyc-sys-color-surface-low: var(--nyc-ref-color-gray-90);
--nyc-sys-color-surface-base: var(--nyc-ref-color-gray-white);
--nyc-sys-color-surface-inactive: var(--nyc-ref-color-gray-white-60);
--nyc-sys-color-on-disabled: var(--nyc-ref-color-gray-30);
--nyc-sys-color-disabled: var(--nyc-ref-color-gray-80);
--nyc-sys-color-on-secondary: var(--nyc-ref-color-blue-40);
--nyc-sys-color-secondary: var(--nyc-ref-color-gray-white);
--nyc-sys-color-on-primary: var(--nyc-ref-color-gray-white);
--nyc-sys-color-primary-hover: var(--nyc-ref-color-blue-10);
--nyc-sys-color-primary: var(--nyc-ref-color-blue-40);
--nyc-sys-color-text-input: var(--nyc-ref-color-gray-black);
--nyc-sys-color-text-type-ahead: var(--nyc-ref-color-gray-50);
--nyc-sys-color-text-base-inverse: var(--nyc-ref-color-gray-white);
--nyc-sys-color-text-secondary: var(--nyc-ref-color-gray-30);
--nyc-sys-color-text-base: var(--nyc-ref-color-gray-black);
--nyc-sys-color-background: var(--nyc-ref-color-gray-white);
--nyc-sys-color-base: var(--nyc-ref-color-gray-black);
--nyc-sys-size-border-base: var(--nyc-ref-length-2);
--nyc-sys-size-border-sm: var(--nyc-ref-length-1-5);
--nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
--nyc-sys-size-text-8xl: var(--nyc-ref-length-96);
--nyc-sys-size-text-xl: var(--nyc-ref-length-22);
--nyc-sys-size-text-xs: var(--nyc-ref-length-14);
--nyc-sys-size-text-5xl: var(--nyc-ref-length-40);
--nyc-sys-size-text-3xl: var(--nyc-ref-length-28);
--nyc-sys-size-text-2xl: var(--nyc-ref-length-24);
--nyc-sys-size-text-lg: var(--nyc-ref-length-20);
--nyc-sys-size-text-base: var(--nyc-ref-length-18);
--nyc-sys-size-text-7xl: var(--nyc-ref-length-64);
--nyc-sys-size-text-6xl: var(--nyc-ref-length-56);
--nyc-sys-size-text-4xl: var(--nyc-ref-length-32);
--nyc-sys-size-text-sm: var(--nyc-ref-length-16);
--nyc-sys-size-width-line-length: var(--nyc-ref-length-750);
--nyc-sys-size-width-surface-lg: var(--nyc-ref-length-440);
--nyc-sys-size-width-surface-base: var(--nyc-ref-length-360);
--nyc-sys-size-width-surface-sm: var(--nyc-ref-length-240);
--nyc-sys-size-width-page-max: var(--nyc-ref-length-1090);
--nyc-sys-size-width-page-min: var(--nyc-ref-length-320);
--nyc-cmp-modal-border-radius: var(--nyc-sys-radius-lg);
--nyc-cmp-modal-background: var(--nyc-sys-color-surface-base);
--nyc-cmp-table-cell-border-color: var(--nyc-sys-color-border-base);
--nyc-cmp-table-cell-padding-block: var(--nyc-sys-space-sm);
--nyc-cmp-table-cell-padding-inline: var(--nyc-sys-space-base);
--nyc-cmp-table-header-border-color: var(--nyc-sys-color-border-medium-high);
--nyc-cmp-table-header-color: var(--nyc-sys-color-text-base-inverse);
--nyc-cmp-hr-background-color: var(--nyc-sys-color-border-medium-high);
--nyc-cmp-accordion-group-background: var(--nyc-sys-color-surface-base);
--nyc-cmp-accordion-heading-padding-block: var(--nyc-sys-space-base);
--nyc-cmp-accordion-heading-background: var(--nyc-sys-color-surface-base);
--nyc-cmp-navigation-primary-inactive: var(--nyc-sys-color-inactive);
--nyc-cmp-navigation-primary-active: var(--nyc-sys-color-on-surface-high);
--nyc-cmp-header-padding-block: var(--nyc-sys-space-sm);
--nyc-cmp-header-padding-inline: var(--nyc-sys-space-base);
--nyc-cmp-button-outline-color: var(--nyc-sys-color-border-high);
--nyc-cmp-button-gap: var(--nyc-sys-space-xs);
--nyc-cmp-button-border-radius: var(--nyc-sys-radius-2xl);
--nyc-cmp-region-base: var(--nyc-sys-space-2xl);
--nyc-cmp-card-padding-block: var(--nyc-sys-space-base);
--nyc-cmp-card-border-radius: var(--nyc-sys-radius-xs);
--nyc-cmp-card-border-color-hover: var(--nyc-sys-color-border-medium-high);
--nyc-cmp-card-width-lg: var(--nyc-sys-size-width-surface-lg);
--nyc-cmp-card-width-base: var(--nyc-sys-size-width-surface-base);
--nyc-cmp-card-padding-inline: var(--nyc-sys-space-base);
--nyc-cmp-card-body-size: var(--nyc-sys-size-text-base);
--nyc-cmp-card-shadow: var(--nyc-sys-shadow-base);
--nyc-cmp-card-border-width: var(--nyc-sys-size-border-base);
--nyc-cmp-card-border-radius-hover: var(--nyc-sys-radius-base);
--nyc-cmp-card-border-color: var(--nyc-sys-color-border-base);
--nyc-cmp-card-radius-xl: var(--nyc-sys-radius-2xl);
--nyc-cmp-card-radius-lg-hover: var(--nyc-sys-radius-xs);
--nyc-cmp-card-radius-lg: var(--nyc-sys-radius-lg);
--nyc-cmp-card-radius-base: var(--nyc-sys-radius-base);
--nyc-cmp-card-color: var(--nyc-sys-color-on-surface-base);
--nyc-cmp-card-background-hover: var(--nyc-sys-color-surface-base);
--nyc-cmp-card-background: var(--nyc-sys-color-surface-inactive);
--nyc-sys-color-border-selected: var(--nyc-sys-color-primary)
}
.i-custom\:phone {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg width=%2737%27 height=%2736%27 viewBox=%270 0 37 36%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10.6831 3.40079L12.8174 2.75793C13.7889 2.46482 14.8339 2.53529 15.7574 2.95618C16.6808 3.37707 17.4194 4.11962 17.8355 5.04522L19.1637 7.99979C19.5215 8.79573 19.6212 9.68374 19.4487 10.5392C19.2763 11.3947 18.8403 12.1747 18.2019 12.7698L15.8812 14.9336C15.8525 14.9604 15.829 14.9922 15.8118 15.0275C15.5688 15.5238 15.9378 16.8494 17.0937 18.8525C18.3974 21.1102 19.4041 22.0025 19.8708 21.8649L22.9167 20.9328C23.7508 20.6781 24.6437 20.6907 25.4703 20.969C26.2969 21.2473 27.0157 21.7773 27.5259 22.4846L29.4134 25.0985C30.0059 25.9192 30.2804 26.9271 30.1858 27.935C30.0912 28.9428 29.634 29.8821 28.8991 30.5782L27.2752 32.1146C26.7105 32.6495 26.0248 33.0399 25.2766 33.2523C24.5284 33.4648 23.7399 33.4931 22.9784 33.3348C18.4565 32.3936 14.4052 28.7525 10.7898 22.4911C7.17308 16.2258 6.04551 10.8901 7.49837 6.50193C7.74157 5.76728 8.15803 5.10196 8.71257 4.5622C9.2671 4.02243 9.94213 3.62407 10.6831 3.40079ZM11.2411 5.24707C10.7965 5.38098 10.3907 5.61994 10.0579 5.94376C9.72514 6.26757 9.4752 6.66673 9.32922 7.1075C8.07694 10.8888 9.09137 15.6922 12.4599 21.5268C15.8259 27.3575 19.4748 30.6361 23.3705 31.4461C23.8276 31.5411 24.301 31.5241 24.7501 31.3965C25.1992 31.2689 25.6108 31.0344 25.9497 30.7132L27.5722 29.1781C27.9681 28.8033 28.2145 28.2976 28.2655 27.7549C28.3166 27.2122 28.1689 26.6694 27.8499 26.2274L25.9625 23.6122C25.6878 23.2314 25.3009 22.9461 24.8559 22.7962C24.4109 22.6464 23.9302 22.6395 23.4811 22.7765L20.4275 23.7112C18.7381 24.2139 17.1489 22.8061 15.4235 19.8155C13.9617 17.2852 13.4551 15.4569 14.0799 14.1802C14.2008 13.9334 14.3654 13.7109 14.5659 13.5232L16.8867 11.3594C17.2305 11.0389 17.4654 10.6189 17.5583 10.1582C17.6512 9.69742 17.5976 9.21916 17.4048 8.7905L16.0767 5.83722C15.8526 5.33869 15.4548 4.93876 14.9575 4.7121C14.4601 4.48543 13.8973 4.44754 13.3741 4.6055L11.2398 5.24836L11.2411 5.24707Z%27 fill=%27currentColor%27/%3E%3C/svg%3E")
}
.i-custom\:phone,
.i-custom\:translate {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-custom\:translate {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2719%27 height=%2717%27 viewBox=%270 0 19 17%27 fill=%27none%27%3E%3Cpath d=%27M14.417 7.33464L18.0837 16.5013H16.2878L15.287 14.0013H11.8787L10.8795 16.5013H9.08449L12.7503 7.33464H14.417ZM7.33366 0.667969V2.33464H12.3337V4.0013H10.6937C10.0509 5.93638 9.02491 7.72216 7.67699 9.25214C8.27782 9.78843 8.92951 10.2649 9.62282 10.6746L8.99782 12.2396C8.10243 11.7318 7.26499 11.128 6.50033 10.4388C5.01163 11.7861 3.24868 12.7948 1.33283 13.3955L0.886159 11.788C2.52769 11.2646 4.04034 10.4008 5.32533 9.25297C4.37423 8.17625 3.58204 6.96903 2.97283 5.66797H4.83949C5.30395 6.52535 5.86088 7.32931 6.50033 8.06547C7.54208 6.86472 8.36308 5.48906 8.92533 4.00214L0.666992 4.0013V2.33464H5.66699V0.667969H7.33366ZM13.5837 9.7388L12.5445 12.3346H14.6212L13.5837 9.7388Z%27 fill=%27currentColor%27/%3E%3C/svg%3E")
}
.i-ph\:anchor-simple {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 112h-24a8 8 0 0 0 0 16h15.64A88.15 88.15 0 0 1 136 207.63V95a32 32 0 1 0-16 0v112.63A88.15 88.15 0 0 1 40.36 128H56a8 8 0 0 0 0-16H32a8 8 0 0 0-8 8a104 104 0 0 0 208 0a8 8 0 0 0-8-8M112 64a16 16 0 1 1 16 16a16 16 0 0 1-16-16%27/%3E%3C/svg%3E")
}
.i-ph\:anchor-simple,
.i-ph\:arrow-down {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:arrow-down {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m205.66 149.66l-72 72a8 8 0 0 1-11.32 0l-72-72a8 8 0 0 1 11.32-11.32L120 196.69V40a8 8 0 0 1 16 0v156.69l58.34-58.35a8 8 0 0 1 11.32 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:arrow-left {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.i-ph\:arrow-left,
.i-ph\:arrow-right {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:arrow-right {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:arrow-square-out {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8%27/%3E%3C/svg%3E")
}
.i-ph\:arrow-square-out,
.i-ph\:book-open-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:book-open-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M240 56v144a8 8 0 0 1-8 8h-72a24 24 0 0 0-24 23.94a7.9 7.9 0 0 1-5.12 7.55A8 8 0 0 1 120 232a24 24 0 0 0-24-24H24a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8h64a32 32 0 0 1 32 32v87.73a8.17 8.17 0 0 0 7.47 8.25a8 8 0 0 0 8.53-8V80a32 32 0 0 1 32-32h64a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.i-ph\:calendar-blank-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 48H48V48h24v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24Z%27/%3E%3C/svg%3E")
}
.i-ph\:calendar-blank-fill,
.i-ph\:calendar-dots {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:calendar-dots {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160zm-68-76a12 12 0 1 1-12-12a12 12 0 0 1 12 12m44 0a12 12 0 1 1-12-12a12 12 0 0 1 12 12m-88 40a12 12 0 1 1-12-12a12 12 0 0 1 12 12m44 0a12 12 0 1 1-12-12a12 12 0 0 1 12 12m44 0a12 12 0 1 1-12-12a12 12 0 0 1 12 12%27/%3E%3C/svg%3E")
}
.i-ph\:car-profile-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M240 112h-28.69L168 68.69A15.86 15.86 0 0 0 156.69 64H44.28A16 16 0 0 0 31 71.12L1.34 115.56A8.07 8.07 0 0 0 0 120v48a16 16 0 0 0 16 16h17a32 32 0 0 0 62 0h66a32 32 0 0 0 62 0h17a16 16 0 0 0 16-16v-40a16 16 0 0 0-16-16M44.28 80h112.41l32 32H23ZM64 192a16 16 0 1 1 16-16a16 16 0 0 1-16 16m128 0a16 16 0 1 1 16-16a16 16 0 0 1-16 16%27/%3E%3C/svg%3E")
}
.i-ph\:car-profile-fill,
.i-ph\:caret-down {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:caret-down {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:caret-left {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z%27/%3E%3C/svg%3E")
}
.i-ph\:caret-left,
.i-ph\:caret-left-bold {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:caret-left-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z%27/%3E%3C/svg%3E")
}
.i-ph\:caret-right {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:caret-right,
.i-ph\:caret-right-bold {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:caret-right-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17%27/%3E%3C/svg%3E")
}
.i-ph\:caret-up {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M213.66 165.66a8 8 0 0 1-11.32 0L128 91.31l-74.34 74.35a8 8 0 0 1-11.32-11.32l80-80a8 8 0 0 1 11.32 0l80 80a8 8 0 0 1 0 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:caret-up,
.i-ph\:check {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:check {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:check-circle-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32%27/%3E%3C/svg%3E")
}
.i-ph\:check-circle-fill,
.i-ph\:device-mobile-camera {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:device-mobile-camera {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M176 16H80a24 24 0 0 0-24 24v176a24 24 0 0 0 24 24h96a24 24 0 0 0 24-24V40a24 24 0 0 0-24-24m8 200a8 8 0 0 1-8 8H80a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h96a8 8 0 0 1 8 8ZM140 60a12 12 0 1 1-12-12a12 12 0 0 1 12 12%27/%3E%3C/svg%3E")
}
.i-ph\:dot-outline-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M156 128a28 28 0 1 1-28-28a28 28 0 0 1 28 28%27/%3E%3C/svg%3E")
}
.i-ph\:dot-outline-fill,
.i-ph\:download {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:download {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M240 136v64a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-64a16 16 0 0 1 16-16h40a8 8 0 0 1 0 16H32v64h192v-64h-40a8 8 0 0 1 0-16h40a16 16 0 0 1 16 16m-117.66-2.34a8 8 0 0 0 11.32 0l48-48a8 8 0 0 0-11.32-11.32L136 108.69V24a8 8 0 0 0-16 0v84.69L85.66 74.34a8 8 0 0 0-11.32 11.32ZM200 168a12 12 0 1 0-12 12a12 12 0 0 0 12-12%27/%3E%3C/svg%3E")
}
.i-ph\:envelope-simple {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8m-20.57 16L128 133.15L52.57 64ZM216 192H40V74.19l82.59 75.71a8 8 0 0 0 10.82 0L216 74.19z%27/%3E%3C/svg%3E")
}
.i-ph\:envelope-simple,
.i-ph\:exclamation-mark-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:exclamation-mark-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M200 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16m-72 136a12 12 0 1 1-12 12a12 12 0 0 1 12-12m-8-24V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0%27/%3E%3C/svg%3E")
}
.i-ph\:file {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48z%27/%3E%3C/svg%3E")
}
.i-ph\:file,
.i-ph\:file-pdf {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:file-pdf {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 152a8 8 0 0 1-8 8h-24v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0v-56a8 8 0 0 1 8-8h32a8 8 0 0 1 8 8M92 172a28 28 0 0 1-28 28h-8v8a8 8 0 0 1-16 0v-56a8 8 0 0 1 8-8h16a28 28 0 0 1 28 28m-16 0a12 12 0 0 0-12-12h-8v24h8a12 12 0 0 0 12-12m88 8a36 36 0 0 1-36 36h-16a8 8 0 0 1-8-8v-56a8 8 0 0 1 8-8h16a36 36 0 0 1 36 36m-16 0a20 20 0 0 0-20-20h-8v40h8a20 20 0 0 0 20-20M40 112V40a16 16 0 0 1 16-16h96a8 8 0 0 1 5.66 2.34l56 56A8 8 0 0 1 216 88v24a8 8 0 0 1-16 0V96h-48a8 8 0 0 1-8-8V40H56v72a8 8 0 0 1-16 0m120-32h28.69L160 51.31Z%27/%3E%3C/svg%3E")
}
.i-ph\:floppy-disk {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M219.31 72L184 36.69A15.86 15.86 0 0 0 172.69 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V83.31A15.86 15.86 0 0 0 219.31 72M168 208H88v-56h80Zm40 0h-24v-56a16 16 0 0 0-16-16H88a16 16 0 0 0-16 16v56H48V48h124.69L208 83.31ZM160 72a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h56a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.i-ph\:floppy-disk,
.i-ph\:house-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:house-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 120v96a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8v-52a4 4 0 0 0-4-4h-40a4 4 0 0 0-4 4v52a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-96a16 16 0 0 1 4.69-11.31l80-80a16 16 0 0 1 22.62 0l80 80A16 16 0 0 1 224 120%27/%3E%3C/svg%3E")
}
.i-ph\:info {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12%27/%3E%3C/svg%3E")
}
.i-ph\:info,
.i-ph\:info-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:info-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16%27/%3E%3C/svg%3E")
}
.i-ph\:link {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.39 38.39 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0a54.86 54.86 0 0 1 16 40.23m-131 97.43l-11 11A38.41 38.41 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 66 28.4a8 8 0 0 0 16 .45A54.86 54.86 0 0 0 144 96a54.65 54.65 0 0 0-77.27 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34%27/%3E%3C/svg%3E")
}
.i-ph\:link,
.i-ph\:list {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:list {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16%27/%3E%3C/svg%3E")
}
.i-ph\:list-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M228 128a12 12 0 0 1-12 12H40a12 12 0 0 1 0-24h176a12 12 0 0 1 12 12M40 76h176a12 12 0 0 0 0-24H40a12 12 0 0 0 0 24m176 104H40a12 12 0 0 0 0 24h176a12 12 0 0 0 0-24%27/%3E%3C/svg%3E")
}
.i-ph\:list-bold,
.i-ph\:magnifying-glass-bold {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:magnifying-glass-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68%27/%3E%3C/svg%3E")
}
.i-ph\:map-pin-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M128 16a88.1 88.1 0 0 0-88 88c0 75.3 80 132.17 83.41 134.55a8 8 0 0 0 9.18 0C136 236.17 216 179.3 216 104a88.1 88.1 0 0 0-88-88m0 56a32 32 0 1 1-32 32a32 32 0 0 1 32-32%27/%3E%3C/svg%3E")
}
.i-ph\:map-pin-fill,
.i-ph\:map-trifold {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:map-trifold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M228.92 49.69a8 8 0 0 0-6.86-1.45l-61.13 15.28l-61.35-30.68a8 8 0 0 0-5.52-.6l-64 16A8 8 0 0 0 24 56v144a8 8 0 0 0 9.94 7.76l61.13-15.28l61.35 30.68a8.15 8.15 0 0 0 3.58.84a8 8 0 0 0 1.94-.24l64-16A8 8 0 0 0 232 200V56a8 8 0 0 0-3.08-6.31M104 52.94l48 24v126.12l-48-24Zm-64 9.31l48-12v127.5l-48 12Zm176 131.5l-48 12V78.25l48-12Z%27/%3E%3C/svg%3E")
}
.i-ph\:minus {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.i-ph\:minus,
.i-ph\:monitor {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:monitor {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M208 40H48a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h160a24 24 0 0 0 24-24V64a24 24 0 0 0-24-24m8 136a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V64a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8Zm-48 48a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.i-ph\:pencil-simple-line {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m227.32 73.37l-44.69-44.68a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h168a8 8 0 0 0 0-16H115.32l112-112a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120ZM192 108.69L147.32 64l24-24L216 84.69Z%27/%3E%3C/svg%3E")
}
.i-ph\:pencil-simple-line,
.i-ph\:person-simple-walk-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:person-simple-walk-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M120 48a32 32 0 1 1 32 32a32 32 0 0 1-32-32m88 88c-28.64 0-41.81-13.3-55.75-27.37c-3.53-3.57-7.18-7.26-11-10.58c-37-32.14-96.22 22.73-98.72 25.08a8 8 0 0 0 10.95 11.66A163.88 163.88 0 0 1 84 113c13.78-7.38 25.39-10.23 34.7-8.58L64.66 228.81a8 8 0 0 0 4.15 10.52A7.84 7.84 0 0 0 72 240a8 8 0 0 0 7.34-4.81l33.59-77.27l31.07 22.2V232a8 8 0 0 0 16 0v-56a8 8 0 0 0-3.35-6.51l-37.2-26.57L132.88 112c2.64 2.44 5.26 5.07 8 7.84C155.05 134.19 172.69 152 208 152a8 8 0 0 0 0-16%27/%3E%3C/svg%3E")
}
.i-ph\:plus {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.i-ph\:plus,
.i-ph\:sliders-horizontal {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:sliders-horizontal {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M40 88h33a32 32 0 0 0 62 0h81a8 8 0 0 0 0-16h-81a32 32 0 0 0-62 0H40a8 8 0 0 0 0 16m64-24a16 16 0 1 1-16 16a16 16 0 0 1 16-16m112 104h-17a32 32 0 0 0-62 0H40a8 8 0 0 0 0 16h97a32 32 0 0 0 62 0h17a8 8 0 0 0 0-16m-48 24a16 16 0 1 1 16-16a16 16 0 0 1-16 16%27/%3E%3C/svg%3E")
}
.i-ph\:table {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8M40 112h40v32H40Zm56 0h120v32H96Zm120-48v32H40V64ZM40 160h40v32H40Zm176 32H96v-32h120z%27/%3E%3C/svg%3E")
}
.i-ph\:table,
.i-ph\:train-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:train-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M184 24H72a32 32 0 0 0-32 32v128a32 32 0 0 0 32 32h8l-14.4 19.2a8 8 0 1 0 12.8 9.6L100 216h56l21.6 28.8a8 8 0 1 0 12.8-9.6L176 216h8a32 32 0 0 0 32-32V56a32 32 0 0 0-32-32M84 184a12 12 0 1 1 12-12a12 12 0 0 1-12 12m36-64H56V80h64Zm52 64a12 12 0 1 1 12-12a12 12 0 0 1-12 12m28-64h-64V80h64Z%27/%3E%3C/svg%3E")
}
.i-ph\:translate-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27m250.73 210.63l-56-112a12 12 0 0 0-21.46 0l-20.52 41A84.2 84.2 0 0 1 114 126.22A107.48 107.48 0 0 0 139.33 68H160a12 12 0 0 0 0-24h-52V32a12 12 0 0 0-24 0v12H32a12 12 0 0 0 0 24h83.13A83.69 83.69 0 0 1 96 110.35A84 84 0 0 1 83.6 91a12 12 0 1 0-21.81 10A107.55 107.55 0 0 0 78 126.24A83.54 83.54 0 0 1 32 140a12 12 0 0 0 0 24a107.47 107.47 0 0 0 64-21.07a108.4 108.4 0 0 0 45.39 19.44l-24.13 48.26a12 12 0 1 0 21.46 10.73L151.41 196h65.17l12.68 25.36a12 12 0 1 0 21.47-10.73M163.41 172L184 130.83L204.58 172Z%27/%3E%3C/svg%3E")
}
.i-ph\:translate-bold,
.i-ph\:trash-fill {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:trash-fill {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z%27/%3E%3C/svg%3E")
}
.i-ph\:upload {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M240 136v64a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-64a16 16 0 0 1 16-16h48a8 8 0 0 1 0 16H32v64h192v-64h-48a8 8 0 0 1 0-16h48a16 16 0 0 1 16 16M85.66 77.66L120 43.31V128a8 8 0 0 0 16 0V43.31l34.34 34.35a8 8 0 0 0 11.32-11.32l-48-48a8 8 0 0 0-11.32 0l-48 48a8 8 0 0 0 11.32 11.32M200 168a12 12 0 1 0-12 12a12 12 0 0 0 12-12%27/%3E%3C/svg%3E")
}
.i-ph\:upload,
.i-ph\:warning-circle-bold {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:warning-circle-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m-12-80V80a12 12 0 0 1 24 0v52a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16%27/%3E%3C/svg%3E")
}
.i-ph\:x {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z%27/%3E%3C/svg%3E")
}
.i-ph\:x,
.i-ph\:x-bold {
background-color: currentColor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.i-ph\:x-bold {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z%27/%3E%3C/svg%3E")
}
body,
div,
footer,
header,
html,
main,
nav {
max-width: none
}
body {
background: var(--nyc-sys-color-background);
color: var(--nyc-sys-color-text-base);
font-family: var(--nyc-sys-font-family-body);
font-size: var(--nyc-sys-size-text-sm);
letter-spacing: var(--nyc-ref-dimension-tracking);
line-height: var(--nyc-sys-size-line-height-body);
margin: 0
}
@media (min-width:768px) {
body {
font-size: var(--nyc-sys-size-text-base)
}
}
h1,
h2,
h3 {
line-height: 1.2
}
.h1,
h1 {
/* font-size: var(--nyc-cmp-heading-h1-size); */
line-height: 1.1
}
.h1,
.h2,
h1,
h2 {
font-family: var(--nyc-sys-font-family-heading);
font-weight: 600
}
.h2,
h2 {
font-size: var(--nyc-cmp-heading-h2-size);
line-height: 1.05
}
.h3,
h3 {
font-size: var(--nyc-cmp-heading-h3-size);
letter-spacing: .01em;
line-height: 1.25
}
.h3,
.h4,
h3,
h4 {
font-family: var(--nyc-sys-font-family-heading);
font-weight: 500
}
.h4,
h4 {
font-size: var(--nyc-cmp-heading-h4-size);
line-height: 1.2
}
.h5,
h5 {
font-size: var(--nyc-cmp-heading-h5-size)
}
p {
line-height: 1.5em;
margin-top: 1.5rem;
max-width: var(--nyc-sys-size-width-line-length, 750px)
}
p:first-child {
margin-top: 0
}
a,
a:link,
button {
--_gap: var(--nyc-cmp-button-gap, 0.5rem);
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
color: var(--nyc-sys-color-link);
cursor: pointer;
display: inline-flex;
font-size: inherit;
font-weight: 600;
gap: var(--_gap);
transition: all .3s ease
}
a,
a:hover,
a:link,
a:link:hover,
button,
button:hover {
-webkit-text-decoration: underline;
text-decoration: underline
}
a:hover,
a:link:hover,
button:hover {
color: var(--nyc-sys-color-link-hover)
}
a:focus-visible,
a:link:focus-visible,
button:focus-visible {
border-radius: .5rem;
outline: 2px dashed var(--nyc-sys-color-border-focus, inherit);
outline-offset: .25rem
}
a:link>[class^=i-],
a>[class^=i-],
button>[class^=i-] {
flex-shrink: 0
}
:target {
scroll-margin-top: 100px
}
h1,
h2,
h3,
h4,
h5,
h6 {
align-items: center;
display: flex
}
[class*=i-] {
display: inline-block
}
input:not([type=radio]),
select {
font-size: inherit;
line-height: 2.25;
padding-left: 1rem;
padding-right: 1rem
}
table {
border-collapse: collapse;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
width: 100%
}
@media (min-width:768px) {
table {
padding-bottom: 0;
padding-top: 0;
table-layout: fixed
}
}
table td,
table th {
border-style: solid;
border-width: .09375rem;
padding: 1rem;
text-align: left;
vertical-align: baseline
}
@media (min-width:768px) {
table td,
table th {
padding: .75rem 1rem
}
}
table th {
background-color: #333;
border-color: #555;
color: #fff
}
table td {
background-color: #fff;
border-color: #ddd
}
ol,
ul {
padding-left: 1.6em
}
ul[role=list] {
list-style-type: none;
padding-left: 0
}
hr {
--_background-color: var(--nyc-cmp-hr-background-color, #ccc);
background-color: var(--_background-color);
border: none;
height: 2px;
margin-bottom: var(--nyc-sys-space-2xs);
margin-top: var(--nyc-sys-space-2xs)
}
.hr--high {
--nyc-cmp-hr-background-color: var(--nyc-sys-color-border-medium-high)
}
.sr-only {
border: 0;
height: 0;
opacity: 0;
outline: none;
text-indent: -9999px;
width: 0;
z-index: -1
}
a.sr-only:focus,
a.sr-only:focus-within {
background-color: var(--nyc-sys-color-primary, #103fef);
border-radius: 50px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-border-focus);
color: var(--nyc-sys-color-on-primary, #fff);
display: block;
height: auto;
opacity: 1;
padding: 6px 14px;
-webkit-text-decoration: none;
text-decoration: none;
text-indent: 0;
width: auto;
z-index: 99999;
clip: auto;
transform: translate(2%, 8%)
}
.disabled,
:disabled,
[disabled] {
pointer-events: none !important;
--nyc-cmp-button-color: var(--nyc-sys-color-on-disabled) !important;
--nyc-cmp-button-background: var(--nyc-sys-color-disabled) !important;
--nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled) !important
}
blockquote {
background: var(--nyc-sys-color-surface-inactive);
border-radius: .5rem;
display: block;
gap: 1rem;
padding: var(--nyc-sys-space-fluid-base-lg) var(--nyc-sys-space-fluid-sm-base) var(--nyc-sys-space-fluid-base-lg) calc(var(--nyc-sys-space-fluid-sm-base) + 6px);
position: relative
}
blockquote:before {
background: var(--nyc-sys-color-border-high);
border-radius: .25rem;
content: "";
flex: 1;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 6px
}
picture:has(.image-credit) {
position: relative
}
.image-credit {
--image-credit-padding: 0.5rem;
background-color: #000;
border: .125rem solid var(--nyc-sys-color-border-medium-high);
border-radius: .5rem;
bottom: .75rem;
display: flex;
padding: var(--image-credit-padding) var(--image-credit-padding) var(--image-credit-padding) 0;
position: absolute;
right: .75rem
}
@media (min-width:768px) {
.image-credit {
--image-credit-padding: 0.75rem;
bottom: 1rem;
right: 1rem
}
}
.image-credit[data-expanded=true] i {
display: block
}
.image-credit[data-expanded=true] .image-credit__icon--open,
.image-credit[data-expanded=true] img {
display: none
}
.image-credit button {
--nyc-sys-color-border-focus: var(--nyc-sys-color-border-focus-high);
display: block;
padding-left: var(--image-credit-padding);
position: relative;
z-index: 2
}
.image-credit button .image-credit__icon--open,
.image-credit button i,
.image-credit button img {
height: 1.125rem;
width: 1.125rem
}
@media (min-width:768px) {
.image-credit button .image-credit__icon--open,
.image-credit button i,
.image-credit button img {
height: 1.5rem;
width: 1.5rem
}
}
.image-credit button img {
border-radius: 0 !important;
filter: invert(1);
max-width: none;
position: relative !important
}
.image-credit button i {
color: #fff;
display: none
}
.image-credit button .image-credit__icon--open {
display: block
}
.image-credit__text {
color: #fff;
font-size: .875rem;
line-height: 1.125rem;
max-width: 0;
overflow: hidden;
padding-left: 0;
transition: max-width .3s ease-in-out, padding .2s ease-in-out .1s;
white-space: nowrap
}
@media (min-width:768px) {
.image-credit__text {
font-size: 1rem;
line-height: 1.5rem
}
}
.image-credit__text[aria-hidden=false] {
max-width: 21.875rem;
padding-left: var(--image-credit-padding);
transition: max-width .3s ease-in-out, padding .2s ease-in-out .1s
}
@media (min-width:768px) {
.image-credit__text[aria-hidden=false] {
max-width: 50rem
}
}
.nyc-table {
--color-table-bg: #fff;
background-attachment: local, local, scroll, scroll;
background-color: var(--color-table-bg);
background-image: linear-gradient(to right, var(--color-table-bg), var(--color-table-bg)), linear-gradient(to right, var(--color-table-bg), var(--color-table-bg)), linear-gradient(to right, rgba(0, 0, 0, .15), hsla(0, 0%, 100%, 0)), linear-gradient(to left, rgba(0, 0, 0, .15), hsla(0, 0%, 100%, 0));
background-position: 0, 100%, 0, 100%;
background-repeat: no-repeat;
background-size: 2rem 100%, 2rem 100%, 2rem 100%, 2rem 100%;
margin-right: 2rem;
overflow-x: scroll;
position: relative;
width: 100%
}
.nyc-table table {
width: -moz-max-content;
width: max-content
}
.nyc-table table td {
background-color: transparent
}
.teaser__hero-secondary .cmp-teaser {
align-items: center;
display: grid;
position: relative
}
.teaser__hero-secondary .cmp-teaser .cmp-image__image {
min-height: var(--nyc-ref-length-440);
-o-object-fit: cover;
object-fit: cover
}
.teaser__hero-secondary .cmp-teaser .cmp-teaser__content {
backdrop-filter: none;
background: transparent;
border: none;
box-shadow: none;
display: grid;
padding: var(--nyc-ref-length-16) calc(var(--nyc-ref-length-24) + var(--nyc-sys-space-fluid-lg-xl));
position: absolute
}
.teaser__hero-secondary .cmp-teaser .cmp-teaser__description,
.teaser__hero-secondary .cmp-teaser .cmp-teaser__title {
color: var(--nyc-ref-color-gray-100);
font-size: var(--nyc-sys-size-text-fluid-2xl-5xl);
font-weight: 700;
padding: 0
}
.teaser__hero-secondary .cmp-teaser .cmp-teaser__action-container {
display: grid;
padding-top: var(--nyc-ref-length-32)
}
.teaser__hero-secondary .cmp-teaser .cmp-teaser__action-link {
border-radius: var(--nyc-ref-length-32);
font-weight: var(--nyc-cmp-button-font-weight);
padding: var(--nyc-ref-length-8) var(--nyc-ref-length-32);
-webkit-text-decoration: none;
text-decoration: none;
white-space: nowrap;
width: -moz-min-content;
width: min-content
}
.teaser__hero-secondary .cmp-teaser .cmp-teaser__action-link:first-child {
background-color: var(--nyc-ref-color-blue-40);
color: var(--nyc-ref-color-gray-100);
margin-bottom: var(--nyc-ref-length-16)
}
.teaser__hero-secondary .cmp-teaser .cmp-teaser__action-link:last-child {
background-color: var(--nyc-ref-color-gray-100);
color: var(--nyc-ref-color-blue-40)
}
html {
scroll-padding-top: 4rem
}
ul:has(.cmp-teaser) {
list-style-type: none;
margin: 0;
padding: 0
}
.aem-AuthorLayer-Edit .flex.cq-Editable-dom--container>.cmp-container,
.aem-AuthorLayer-structure .flex.cq-Editable-dom--container>.cmp-container {
flex-wrap: wrap
}
.aem-AuthorLayer-Edit .cmp-container .new,
.aem-AuthorLayer-structure .cmp-container .new {
flex-basis: 100%
}
html:not(.aem-AuthorLayer-Edit):not(.aem-AuthorLayer-structure) .root .cmp-container .new {
display: none
}
#global-header-container,
#global-header-container>.cmp-container,
#global-header-container>.experiencefragment>.cmp-experiencefragment--header>.cmp-container,
.cmp-experiencefragment--header,
.globalheader,
.root:not(.cq-Editable-dom)>.cmp-container,
.root:not(.cq-Editable-dom)>.cmp-container>.experiencefragment {
display: contents
}
.cmp-carousel__indicators[role=tablist] {
display: none
}
.cmp-link__screen-reader-only {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px
}
#official-website-banner {
position: relative;
z-index: 950
}
#official-website-banner .cmp-accordion__item {
--nyc-cmp-accordion-group-background: #000;
--nyc-cmp-accordion-heading-color: #fff;
--nyc-cmp-accordion-heading-font-size: var(--nyc-sys-size-text-xs, 1rem);
--nyc-cmp-accordion-heading-padding-block: 0.6rem;
--nyc-cmp-accordion-heading-padding-inline: var(--nyc-cmp-header-padding-inline);
--nyc-cmp-accordion-group-color: #fff;
--nyc-cmp-accordion-body-background: #333;
--nyc-cmp-accordion-body-padding-block: 1rem;
--nyc-cmp-accordion-body-padding-inline: var(--nyc-cmp-header-padding-inline)
}
@media (min-width:940.02px) {
#official-website-banner .cmp-accordion__item {
--nyc-cmp-accordion-heading-font-size: var(--nyc-sys-size-text-sm, 1rem);
--nyc-cmp-accordion-heading-padding-block: 0.6rem
}
}
#official-website-banner .cmp-accordion__header {
--nyc-cmp-accordion-heading-padding-inline: 0;
--_icon-gap: 0.5rem;
border-bottom: 1px solid var(--nyc-sys-color-border-medium-high, #555)
}
#official-website-banner .cmp-accordion__header>h1,
#official-website-banner .cmp-accordion__header>h2,
#official-website-banner .cmp-accordion__header>h3,
#official-website-banner .cmp-accordion__header>h4,
#official-website-banner .cmp-accordion__header>h5,
#official-website-banner .cmp-accordion__header>h6 {
box-sizing: content-box;
font-family: var(--nyc-sys-font-family-body);
font-weight: 500;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
padding-left: var(--nyc-cmp-header-padding-inline);
padding-right: var(--nyc-cmp-header-padding-inline)
}
#official-website-banner .cmp-accordion__header:has(.cmp-accordion__button:focus-visible) {
outline: 2px dashed var(--nyc-sys-color-border-focus-high, inherit);
outline-offset: -2px
}
#official-website-banner .cmp-accordion__panel {
padding-left: 0;
padding-right: 0
}
#official-website-banner .cmp-accordion__panel>.container {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
padding-left: var(--nyc-cmp-header-padding-inline);
padding-right: var(--nyc-cmp-header-padding-inline)
}
#official-website-banner .cmp-accordion__panel p {
margin: .625rem 0 0
}
@media (min-width:940.02px) {
#official-website-banner .cmp-accordion__panel p {
margin: 1rem 0 0
}
}
#official-website-banner .cmp-accordion__title {
order: -1
}
#official-website-banner .cmp-accordion__button {
-webkit-text-decoration: none;
text-decoration: none
}
.list--news .cmp-list {
gap: 0;
list-style-type: none;
padding: 0
}
.list--news .cmp-list__item {
border-top: 2px solid var(--nyc-sys-color-border-medium-high);
padding-bottom: var(--nyc-sys-space-lg);
padding-top: var(--nyc-sys-space-lg)
}
.list--news .cmp-list__item-link {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 1rem
}
.list--news .cmp-list__item-link,
.list--news .cmp-list__item-link:hover {
-webkit-text-decoration: none;
text-decoration: none
}
.list--news .cmp-list__item-link .cmp-list__item-date {
color: var(--nyc-sys-color-text-base);
font-size: var(--nyc-sys-size-text-sm, 1rem);
order: -1
}
.list--news .cmp-list__item-link .cmp-list__item-title {
-webkit-text-decoration: underline;
text-decoration: underline
}
.main-heading {
font-size: var(--nyc-sys-size-text-fluid-4xl-8xl)
}
.main-heading,
.main-heading--subhead {
text-shadow: 10px 10px 16px rgba(0, 0, 0, .6)
}
.main-heading--subhead {
font-size: var(--nyc-sys-size-text-fluid-3xl-6xl)
}
.text {
max-width: var(--nyc-sys-size-width-line-length)
}
.text .cmp-text {
--nyc-cmp-flow-space: 1.5rem
}
.text .cmp-text>* {
margin-bottom: 0;
margin-top: 0
}
.text .cmp-text>*+* {
margin-top: var(--nyc-cmp-flow-space)
}
@media (min-width:768px) {
.text .cmp-text {
--nyc-cmp-flow-space: 1.75rem
}
}
.cmp-contentfragment__description,
.cmp-contentfragment__element--placeholder,
.cmp-contentfragment__element--preview,
.cmp-contentfragment__element--programTitle,
.cmp-contentfragment__title {
display: none
}
.jobs-program-fragment {
padding: var(--nyc-sys-space-fluid-2xs-sm) var(--nyc-sys-space-fluid-lg-xl)
}
.jobs-program-fragment .cmp-contentfragment__elements {
margin: var(--nyc-sys-space-fluid-lg-xl)
}
@media (min-width:768px) {
.jobs-program-fragment .cmp-contentfragment__elements {
max-width: 65%
}
}
.jobs-program-fragment .cmp-contentfragment__elements .cmp-contentfragment__element--intro dt,
.jobs-program-fragment .cmp-contentfragment__elements .cmp-contentfragment__element--moreInfo dt,
.jobs-program-fragment .cmp-contentfragment__elements .cmp-contentfragment__element--programTitle dt,
.jobs-program-fragment .cmp-contentfragment__elements .program-details-tag dt {
display: none
}
.jobs-program-fragment .cmp-contentfragment__elements .cmp-contentfragment__element--eligibility>.cmp-contentfragment__element-title {
display: inline;
display: initial
}
.jobs-program-fragment .cmp-contentfragment__elements .cmp-contentfragment__element-value {
font-size: var(--nyc-ref-length-18);
margin: 0;
padding: var(--nyc-ref-length-14) 0
}
.jobs-program-fragment .cmp-contentfragment__elements h3 {
border-bottom: var(--nyc-sys-size-border-base) solid var(--nyc-ref-color-blue-100);
font-size: var(--nyc-sys-size-text-fluid-lg-xl);
font-weight: 700;
padding: var(--nyc-ref-length-14) 0
}
.jobs-program-fragment .cmp-contentfragment__elements .cmp-contentfragment__element:first-child>.cmp-contentfragment__element-value {
font-family: var(--nyc-sys-font-family-heading);
font-size: var(--nyc-sys-size-text-fluid-2xl-4xl)
}
.cmp-image__credit {
border-radius: var(--nyc-cmp-card-border-radius, .5rem);
box-shadow: var(--nyc-cmp-card-shadow);
display: inline-flex;
font-size: var(--nyc-sys-size-text-sm);
gap: var(--nyc-ref-length-16);
margin-top: var(--nyc-ref-length-12);
padding: var(--nyc-ref-length-10) var(--nyc-ref-length-16)
}
.cmp-image__credit.bg-gray-100-60 {
background-color: var(--nyc-ref-color-gray-100-60)
}
.program-details-tag dd {
align-items: center;
display: grid;
grid-gap: var(--nyc-ref-length-8);
gap: var(--nyc-ref-length-8);
grid-template-columns: var(--nyc-ref-length-32) min-content min-content;
padding-bottom: var(--nyc-ref-length-16);
white-space: nowrap
}
.program-details-tag dd p {
font-size: var(--nyc-ref-length-16)
}
.margin-left-right-calc {
margin: 0 calc(var(--nyc-ref-length-24) + var(--nyc-sys-space-fluid-lg-xl))
}
.cmp-text ul {
line-height: 2.25
}
.cmp-text a {
display: inline
}
.articlepage .hero+.center {
--nyc-cmp-center-gutter: 1rem
}
.articlepage #body-text-section {
--nyc-cmp-center-gutter: 0;
--nyc-sys-size-width-page-max: 800px
}
.articlepage #body-text-section .text {
padding-left: 0;
padding-right: 0
}
@media (min-width:940px) {
.articlepage #body-text-section .text,
.articlepage #body-text-section .title {
max-width: none;
padding-left: 2rem;
padding-right: 2rem
}
}
.articlepage #body-text-section>*+* {
margin-top: var(--nyc-sys-space-fluid-xl-2xl)
}
.articlepage #intro-section {
--nyc-cmp-center-gutter: 0
}
.articlepage #intro-section .separator:first-child {
margin-bottom: var(--nyc-sys-space-fluid-lg-5xl)
}
.articlepage #intro-section .separator:last-child {
margin-top: var(--nyc-sys-space-fluid-lg-5xl)
}
.articlepage #intro-section .title {
margin-bottom: 1.5rem
}
main .cmp-image__image {
border-radius: var(--nyc-sys-radius-fluid-sm-base);
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.center {
--_gutter: var(--nyc-cmp-center-gutter, 1rem);
--_max-w: var(--nyc-sys-size-width-page-max, 64rem);
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: var(--_max-w);
padding-left: var(--_gutter);
padding-right: var(--_gutter)
}
.center[data-gutter=sm] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-sm)
}
.center[data-gutter=base] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-base)
}
.center[data-gutter=lg] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-lg)
}
.center[data-gutter=xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-xl)
}
.center[data-gutter="2xl"] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-2xl)
}
.center[data-gutter="3xl"] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-3xl)
}
.center[data-gutter="4xl"] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-4xl)
}
.center[data-gutter="5xl"] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-5xl)
}
.center[data-gutter="6xl"] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-6xl)
}
.center[data-gutter=fluid-2xs-sm] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-2xs-sm)
}
.center[data-gutter=fluid-sm-base] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-sm-base)
}
.center[data-gutter=fluid-base-lg] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-base-lg)
}
.center[data-gutter=fluid-base-2xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-base-2xl)
}
.center[data-gutter=fluid-lg-xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-lg-xl)
}
.center[data-gutter=fluid-lg-2xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-lg-2xl)
}
.center[data-gutter=fluid-lg-3xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-lg-3xl)
}
.center[data-gutter=fluid-lg-5xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-lg-5xl)
}
.center[data-gutter=fluid-xl-2xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-xl-2xl)
}
.center[data-gutter=fluid-2xl-3xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-2xl-3xl)
}
.center[data-gutter=fluid-2xl-4xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-2xl-4xl)
}
.center[data-gutter=fluid-2xl-5xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-2xl-5xl)
}
.center[data-gutter=fluid-3xl-5xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-3xl-5xl)
}
.center[data-gutter=fluid-5xl-6xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-5xl-6xl)
}
.center[data-gutter=fluid-7xl-8xl] {
--nyc-cmp-container-gutter: var(--nyc-sys-space-fluid-7xl-8xl)
}
.region {
--_region-space: var(--nyc-cmp-region-base);
padding-bottom: var(--_region-space);
padding-top: var(--_region-space)
}
.region[data-region-space=sm] {
--_region-space: var(--nyc-sys-space-sm)
}
.region[data-region-space=base] {
--_region-space: var(--nyc-sys-space-base)
}
.region[data-region-space=lg] {
--_region-space: var(--nyc-sys-space-lg)
}
.region[data-region-space=xl] {
--_region-space: var(--nyc-sys-space-xl)
}
.region[data-region-space="2xl"] {
--_region-space: var(--nyc-sys-space-2xl)
}
.region[data-region-space="3xl"] {
--_region-space: var(--nyc-sys-space-3xl)
}
.region[data-region-space="4xl"] {
--_region-space: var(--nyc-sys-space-4xl)
}
.region[data-region-space="5xl"] {
--_region-space: var(--nyc-sys-space-5xl)
}
.region[data-region-space="6xl"] {
--_region-space: var(--nyc-sys-space-6xl)
}
.region[data-region-space=fluid-2xs-sm] {
--_region-space: var(--nyc-sys-space-fluid-2xs-sm)
}
.region[data-region-space=fluid-sm-base] {
--_region-space: var(--nyc-sys-space-fluid-sm-base)
}
.region[data-region-space=fluid-base-lg] {
--_region-space: var(--nyc-sys-space-fluid-base-lg)
}
.region[data-region-space=fluid-base-2xl] {
--_region-space: var(--nyc-sys-space-fluid-base-2xl)
}
.region[data-region-space=fluid-lg-xl] {
--_region-space: var(--nyc-sys-space-fluid-lg-xl)
}
.region[data-region-space=fluid-lg-2xl] {
--_region-space: var(--nyc-sys-space-fluid-lg-2xl)
}
.region[data-region-space=fluid-lg-3xl] {
--_region-space: var(--nyc-sys-space-fluid-lg-3xl)
}
.region[data-region-space=fluid-lg-5xl] {
--_region-space: var(--nyc-sys-space-fluid-lg-5xl)
}
.region[data-region-space=fluid-xl-2xl] {
--_region-space: var(--nyc-sys-space-fluid-xl-2xl)
}
.region[data-region-space=fluid-2xl-3xl] {
--_region-space: var(--nyc-sys-space-fluid-2xl-3xl)
}
.region[data-region-space=fluid-2xl-4xl] {
--_region-space: var(--nyc-sys-space-fluid-2xl-4xl)
}
.region[data-region-space=fluid-2xl-5xl] {
--_region-space: var(--nyc-sys-space-fluid-2xl-5xl)
}
.region[data-region-space=fluid-3xl-5xl] {
--_region-space: var(--nyc-sys-space-fluid-3xl-5xl)
}
.region[data-region-space=fluid-5xl-6xl] {
--_region-space: var(--nyc-sys-space-fluid-5xl-6xl)
}
.region[data-region-space=fluid-7xl-8xl] {
--_region-space: var(--nyc-sys-space-fluid-7xl-8xl)
}
.flow>*,
.flow[data-flow-recursive] *+* {
margin-top: var(--nyc-cmp-flow-space, 0)
}
.flow[data-flow-recursive] *+* {
--nyc-cmp-flow-space: var(--nyc-sys-space-lg)
}
.flow>:first-child,
[data-flow-space="0"] {
margin-top: 0
}
[data-flow-space=sm] {
--nyc-cmp-flow-space: var(--nyc-sys-space-sm)
}
[data-flow-space=base] {
--nyc-cmp-flow-space: var(--nyc-sys-space-base)
}
[data-flow-space=lg] {
--nyc-cmp-flow-space: var(--nyc-sys-space-lg)
}
[data-flow-space=xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-xl)
}
[data-flow-space="2xl"] {
--nyc-cmp-flow-space: var(--nyc-sys-space-2xl)
}
[data-flow-space="3xl"] {
--nyc-cmp-flow-space: var(--nyc-sys-space-3xl)
}
[data-flow-space="4xl"] {
--nyc-cmp-flow-space: var(--nyc-sys-space-4xl)
}
[data-flow-space="5xl"] {
--nyc-cmp-flow-space: var(--nyc-sys-space-5xl)
}
[data-flow-space="6xl"] {
--nyc-cmp-flow-space: var(--nyc-sys-space-6xl)
}
[data-flow-space=fluid-2xs-sm] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-2xs-sm)
}
[data-flow-space=fluid-sm-base] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-sm-base)
}
[data-flow-space=fluid-base-lg] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-base-lg)
}
[data-flow-space=fluid-base-2xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-base-2xl)
}
[data-flow-space=fluid-lg-xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-lg-xl)
}
[data-flow-space=fluid-lg-2xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-lg-2xl)
}
[data-flow-space=fluid-lg-3xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-lg-3xl)
}
[data-flow-space=fluid-lg-5xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-lg-5xl)
}
[data-flow-space=fluid-xl-2xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-xl-2xl)
}
[data-flow-space=fluid-2xl-3xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-2xl-3xl)
}
[data-flow-space=fluid-2xl-4xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-2xl-4xl)
}
[data-flow-space=fluid-2xl-5xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-2xl-5xl)
}
[data-flow-space=fluid-3xl-5xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-3xl-5xl)
}
[data-flow-space=fluid-5xl-6xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-5xl-6xl)
}
[data-flow-space=fluid-7xl-8xl] {
--nyc-cmp-flow-space: var(--nyc-sys-space-fluid-7xl-8xl)
}
.grid {
--_gap: var(--nyc-cmp-grid-gap, 1rem);
--_placement: var(--nyc-cmp-grid-placement, auto-fill);
--_min-item-size: var(--nyc-cmp-grid-min-item-size, 16rem);
--_max-item-size: var(--nyc-cmp-grid-max-item-size, 1fr);
--_cols: var(--nyc-cmp-grid-cols, 1);
--_item-shrink-ratio: var(--nyc-cmp-grid-item-shrink-ratio, 0.7);
--_container-size: var(--nyc-sys-size-width-page-max, 1440px);
--_container-max-w: calc(var(--_container-size)*1.05 + (var(--_cols) - 1)*(var(--_gap)*1));
display: grid;
grid-gap: var(--_gap);
gap: var(--_gap);
grid-auto-rows: 1fr
}
@supports (width:min(250px, 100%)) {
.grid {
grid-template-columns: repeat(var(--_placement), minmax(var(--_min-item-size), var(--_max-item-size)))
}
}
.grid[data-layout^=col-] {
--nyc-cmp-grid-placement: auto-fit;
--nyc-cmp-grid-gap: var(--nyc-sys-space-sm)
}
@media (min-width:768.02px) {
.grid[data-layout^=col-] {
--nyc-cmp-grid-min-item-size: calc((var(--_container-max-w)/var(--_cols))*var(--_item-shrink-ratio))
}
}
.grid[data-layout=col-4] {
--nyc-cmp-grid-cols: 4;
--nyc-cmp-grid-item-shrink-ratio: 0.72
}
.grid[data-layout=col-3] {
--nyc-cmp-grid-cols: 3
}
.grid[data-layout=col-2] {
--nyc-cmp-grid-cols: 2
}
@container container (max-width: 806px) {
.grid[data-layout=col-4] {
--nyc-cmp-grid-cols: 2;
--nyc-cmp-grid-item-shrink-ratio: 0.5
}
}
.grid[data-grid-gap=sm] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-sm)
}
.grid[data-grid-gap=base] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-base)
}
.grid[data-grid-gap=lg] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-lg)
}
.grid[data-grid-gap=xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-xl)
}
.grid[data-grid-gap="2xl"] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-2xl)
}
.grid[data-grid-gap="3xl"] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-3xl)
}
.grid[data-grid-gap="4xl"] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-4xl)
}
.grid[data-grid-gap="5xl"] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-5xl)
}
.grid[data-grid-gap="6xl"] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-6xl)
}
.grid[data-grid-gap=fluid-2xs-sm] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-2xs-sm)
}
.grid[data-grid-gap=fluid-sm-base] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-sm-base)
}
.grid[data-grid-gap=fluid-base-lg] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-base-lg)
}
.grid[data-grid-gap=fluid-base-2xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-base-2xl)
}
.grid[data-grid-gap=fluid-lg-xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-lg-xl)
}
.grid[data-grid-gap=fluid-lg-2xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-lg-2xl)
}
.grid[data-grid-gap=fluid-lg-3xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-lg-3xl)
}
.grid[data-grid-gap=fluid-lg-5xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-lg-5xl)
}
.grid[data-grid-gap=fluid-xl-2xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-xl-2xl)
}
.grid[data-grid-gap=fluid-2xl-3xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-2xl-3xl)
}
.grid[data-grid-gap=fluid-2xl-4xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-2xl-4xl)
}
.grid[data-grid-gap=fluid-2xl-5xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-2xl-5xl)
}
.grid[data-grid-gap=fluid-3xl-5xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-3xl-5xl)
}
.grid[data-grid-gap=fluid-5xl-6xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-5xl-6xl)
}
.grid[data-grid-gap=fluid-7xl-8xl] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-fluid-7xl-8xl)
}
.grid[data-layout=figure-split] {
grid-auto-rows: auto;
grid-template-areas: "heading" "figure" "body";
grid-template-columns: 1fr;
--nyc-cmp-grid-gap: 0
}
.grid[data-layout=figure-split] :--heading {
grid-area: heading
}
.grid[data-layout=figure-split] .figure {
grid-area: figure
}
.grid[data-layout=figure-split]>*>* {
grid-area: body
}
@media (min-width:768px) {
.grid[data-layout=figure-split] {
--nyc-cmp-grid-gap: var(--nyc-sys-space-2xl);
grid-template-areas: "heading figure" "body figure";
grid-template-columns: 1fr 1fr;
row-gap: 0
}
}
@media (min-width:940px) {
.grid[data-layout=figure-split][data-split-direction=left] {
grid-template-areas: "figure body" "figure body"
}
}
.with-sidebar {
--_breakpoint-size: 72%;
--_gap: var(--nyc-sys-space-2xl, 1rem);
display: flex;
flex-wrap: wrap;
gap: var(--_gap)
}
.with-sidebar:not([data-side=right])>:first-child,
.with-sidebar[data-side=right]>:last-child {
flex-basis: 185px;
flex-grow: 1
}
.with-sidebar:not([data-side=right])>:last-child,
.with-sidebar[data-side=right]>:first-child {
flex-basis: 0;
flex-grow: 999;
min-width: var(--_breakpoint-size)
}
.switcher {
container: switcher/inline-size;
display: flex;
flex-wrap: wrap;
gap: var(--nyc-sys-space-fluid-lg-2xl)
}
.switcher>* {
flex-basis: calc(39960rem - 99900%);
flex-grow: 1
}
.switcher>:nth-last-child(n+4),
.switcher>:nth-last-child(n+4)~* {
flex-basis: 100%
}
.switcher[data-layout=col-1-3-2]>:nth-child(2) {
order: 3
}
.switcher[data-layout=col-1-3-2]>:nth-child(3) {
flex-grow: 2
}
@container switcher (max-width: 40rem) {
.switcher[data-layout=col-1-3-2]>:nth-child(2) {
order: 0
}
}
.banner-error {
background-color: var(--nyc-sys-color-surface-error) !important;
border-top-width: 2px !important;
border: 2px solid var(--nyc-sys-color-auxiliary-error) !important;
border-radius: 8px !important;
border-top: 6px solid var(--nyc-sys-color-auxiliary-error) !important;
box-shadow: none !important;
margin-bottom: 30px !important;
padding-bottom: 15px !important;
padding-top: 15px !important
}
.banner-error .field-text {
margin-bottom: 0;
margin-top: 0
}
.banner-error:focus,
.banner-error:focus-visible,
.banner-error:focus-within {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.form-ajax-response>* {
margin-bottom: 15px
}
.form-ajax-response h1:focus,
.form-ajax-response h1:focus-visible {
border-radius: 8px;
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.nyc-field {
--nyc-focus-outline: 2px dashed var(--nyc-sys-color-border-high, #000);
--nyc-focus-outline-offset: 3px;
border-radius: var(--nyc-sys-space-sm, 4px);
display: flex;
flex-direction: column;
gap: var(--nyc-sys-space-sm, .75rem);
padding: var(--nyc-sys-space-sm);
text-align: left
}
.nyc-field legend {
@apply text-intro;
padding-left: 0;
padding-right: 0
}
.nyc-field.nyc-field--error {
background-color: var(--nyc-sys-color-surface-error, #fdd)
}
.nyc-field input::-moz-placeholder {
font-size: var(--nyc-sys-text-fluid-base-xl, 1rem)
}
.nyc-field input,
.nyc-field input::placeholder,
.nyc-field label,
.nyc-field textarea {
font-size: var(--nyc-sys-text-fluid-base-xl, 1rem)
}
@media (min-width:768px) {
.nyc-field input::-moz-placeholder {
font-size: var(--nyc-sys-text-fluid-base-xl, 1.375rem)
}
.nyc-field input,
.nyc-field input::placeholder,
.nyc-field label,
.nyc-field textarea {
font-size: var(--nyc-sys-text-fluid-base-xl, 1.375rem)
}
}
.nyc-field input[type=date],
.nyc-field input[type=email],
.nyc-field input[type=password],
.nyc-field input[type=text],
.nyc-field select,
.nyc-field textarea {
background: var(--nyc-sys-color-surface-input, #fff);
border: 1.5px solid var(--nyc-sys-color-border-medium, #aaa);
border-radius: var(--nyc-sys-space-2xs, .25rem);
min-width: 200px;
padding: var(--nyc-sys-space-sm)
}
@media (min-width:768px) {
.nyc-field input[type=date],
.nyc-field input[type=email],
.nyc-field input[type=password],
.nyc-field input[type=text],
.nyc-field select,
.nyc-field textarea {
border-radius: var(--nyc-sys-space-xs, .5rem);
border-width: 2px
}
}
.nyc-field input[type=date]:disabled,
.nyc-field input[type=email]:disabled,
.nyc-field input[type=password]:disabled,
.nyc-field input[type=text]:disabled,
.nyc-field select:disabled,
.nyc-field textarea:disabled {
background: var(--nyc-sys-color-disabled, #ddd);
border-color: var(--nyc-sys-color-on-disabled, #555);
cursor: not-allowed
}
.nyc-field input[type=date]:focus,
.nyc-field input[type=email]:focus,
.nyc-field input[type=password]:focus,
.nyc-field input[type=text]:focus,
.nyc-field select:focus,
.nyc-field textarea:focus {
background-color: var(--nyc-sys-color-surface-input-highlight, #e7f0fa);
outline: var(--nyc-focus-outline);
outline-offset: var(--nyc-focus-outline-offset)
}
.nyc-field input[type=date],
.nyc-field input[type=email],
.nyc-field input[type=password],
.nyc-field input[type=text] {
line-height: 1.25
}
.nyc-field label,
.nyc-field nyc-combo-box,
.nyc-field select,
.nyc-field textarea {
line-height: 1.5
}
.nyc-field input[type=checkbox],
.nyc-field input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
flex-shrink: 0;
height: 1rem;
margin: 0;
padding: 0;
position: relative;
width: 1rem
}
@media (min-width:768px) {
.nyc-field input[type=checkbox],
.nyc-field input[type=radio] {
height: 1.5rem;
width: 1.5rem
}
}
.nyc-field input[type=checkbox]:before,
.nyc-field input[type=radio]:before {
background-color: var(--nyc-sys-color-background, #fff);
border: 2px solid var(--nyc-sys-color-border-medium-high, #555);
box-sizing: border-box;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: border-color .2s ease-in-out, border-width .2s ease-in-out;
width: 100%
}
.nyc-field input[type=checkbox]:before {
border-radius: 2px
}
@media (min-width:768px) {
.nyc-field input[type=checkbox]:before {
border-radius: 4px
}
}
.nyc-field input[type=checkbox]:checked:before {
background-color: var(--nyc-sys-color-primary, #103fef);
border-color: var(--nyc-sys-color-primary, #103fef)
}
.nyc-field input[type=checkbox]:checked:after {
background: url('data:image/svg+xml;charset=utf-8,') no-repeat 50%;
color: var(--nyc-sys-color-on-primary, #fff);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.nyc-field input[type=radio]:before {
border-radius: 50%
}
.nyc-field input[type=radio]:checked:before {
border-color: var(--nyc-sys-color-primary, #103fef);
border-width: 6px
}
.nyc-field label:has(input[type=checkbox]),
.nyc-field label:has(input[type=radio]) {
align-items: center;
background-color: var(--nyc-sys-color-surface-input, #fff);
border: 2px solid var(--nyc-sys-color-border-medium, #aaa);
border-radius: var(--nyc-sys-space-xs, .5rem);
cursor: pointer;
display: flex;
font-size: var(--nyc-sys-text-fluid-base-xl, 1.125rem);
gap: var(--nyc-sys-space-fluid-xs-base, .5rem);
padding: var(--nyc-sys-space-xs, .5rem) var(--nyc-sys-space-sm, .75rem)
}
@media (min-width:768px) {
.nyc-field label:has(input[type=checkbox]),
.nyc-field label:has(input[type=radio]) {
font-size: var(--nyc-sys-text-fluid-base-xl, 1.375rem);
gap: var(--nyc-sys-space-fluid-xs-base, 1rem);
padding: var(--nyc-sys-space-base, 1rem)
}
}
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:checked),
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:checked),
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:checked),
.nyc-field label:has(input[type=radio]):has(input[type=radio]:checked) {
background-color: var(--nyc-sys-color-surface-input-highlight, #e7f0fa)
}
.nyc-field label:has(input[type=checkbox]):hover,
.nyc-field label:has(input[type=radio]):hover {
background-color: var(--nyc-sys-color-surface-input-highlight, #e7f0fa)
}
.nyc-field label:has(input[type=checkbox]):hover input[type=checkbox]:checked:before,
.nyc-field label:has(input[type=radio]):hover input[type=checkbox]:checked:before {
background-color: var(--nyc-sys-color-primary-hover, #050560);
border-color: var(--nyc-sys-color-primary-hover, #050560)
}
.nyc-field label:has(input[type=checkbox]):hover input[type=checkbox]:before,
.nyc-field label:has(input[type=checkbox]):hover input[type=radio]:before,
.nyc-field label:has(input[type=checkbox]):hover input[type=radio]:checked:before,
.nyc-field label:has(input[type=radio]):hover input[type=checkbox]:before,
.nyc-field label:has(input[type=radio]):hover input[type=radio]:before,
.nyc-field label:has(input[type=radio]):hover input[type=radio]:checked:before {
background-color: var(--nyc-sys-color-surface-input, #fff);
border-color: var(--nyc-sys-color-primary-hover, #050560)
}
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:focus-visible),
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:focus-visible),
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:focus-visible),
.nyc-field label:has(input[type=radio]):has(input[type=radio]:focus-visible) {
outline: var(--nyc-focus-outline);
outline-offset: var(--nyc-focus-outline-offset)
}
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:focus-visible) input,
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:focus-visible) input,
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:focus-visible) input,
.nyc-field label:has(input[type=radio]):has(input[type=radio]:focus-visible) input {
outline-color: transparent
}
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:disabled),
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:disabled),
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:disabled),
.nyc-field label:has(input[type=radio]):has(input[type=radio]:disabled) {
background-color: var(--nyc-sys-color-disabled, #ddd);
color: var(--nyc-sys-color-on-disabled, #555);
cursor: not-allowed
}
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:disabled) input[type=checkbox]:before,
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:disabled) input[type=radio]:before,
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:disabled) input[type=checkbox]:before,
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:disabled) input[type=radio]:before,
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:disabled) input[type=checkbox]:before,
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:disabled) input[type=radio]:before,
.nyc-field label:has(input[type=radio]):has(input[type=radio]:disabled) input[type=checkbox]:before,
.nyc-field label:has(input[type=radio]):has(input[type=radio]:disabled) input[type=radio]:before {
background-color: var(--nyc-sys-color-disabled, #ddd);
border-color: var(--nyc-sys-color-on-disabled, #555)
}
.nyc-field label:has(input[type=checkbox]):has(input[type=checkbox]:disabled) input[type=checkbox]:after,
.nyc-field label:has(input[type=checkbox]):has(input[type=radio]:disabled) input[type=checkbox]:after,
.nyc-field label:has(input[type=radio]):has(input[type=checkbox]:disabled) input[type=checkbox]:after,
.nyc-field label:has(input[type=radio]):has(input[type=radio]:disabled) input[type=checkbox]:after {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23555' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2.813 10.125 3.937 3.938 9-9'/%3E%3C/svg%3E") no-repeat 50%
}
.nyc-field label:has(input[type=checkbox]) .subtitle,
.nyc-field label:has(input[type=radio]) .subtitle {
@apply text-caption;
line-height: 1.4;
margin-top: .25rem
}
.nyc-field:has(input[type=checkbox]+label) {
flex-flow: row
}
.nyc-field:has(input[type=checkbox]+label) label {
font-size: var(--nyc-sys-size-text-base, 1rem)
}
.nyc-field:has(input[type=checkbox]+label) input[type=checkbox] {
flex-shrink: 0;
margin-top: .1875rem
}
.nyc-field.nyc-field--error:has(input[type=checkbox]+label) {
background-color: transparent;
background-color: initial
}
.nyc-field.nyc-field--error:has(input[type=checkbox]+label) input[type=checkbox] {
accent-color: var(--nyc-sys-color-text-error, #d8000c);
position: relative
}
.nyc-field.nyc-field--error:has(input[type=checkbox]+label) input[type=checkbox]:before {
border: 1px solid var(--nyc-sys-color-text-error, #d8000c);
border-radius: .125rem;
content: "";
height: calc(100% - 2px);
position: absolute;
width: calc(100% - 2px)
}
.nyc-field .subtitle {
color: var(--nyc-sys-color-text-secondary, #555);
display: block;
font-size: 1.125rem;
line-height: 1.2
}
.nyc-field .error-message {
align-items: center;
display: flex;
font-size: 1rem;
font-weight: 700;
gap: var(--nyc-sys-space-xs, .5rem);
line-height: 1.4
}
.nyc-field .error-message i {
color: var(--nyc-sys-color-auxiliary-error, #ec131e);
height: 1.125rem;
vertical-align: middle;
width: 1.125rem
}
@media (min-width:768px) {
.nyc-field .error-message i {
height: 1.5rem;
width: 1.5rem
}
}
@supports ((-webkit-appearance:base-select) or (-moz-appearance:base-select) or (appearance:base-select)) {
.nyc-field select {
font-size: var(--nyc-sys-text-fluid-base-xl, 1rem)
}
@media (min-width:768px) {
.nyc-field select {
font-size: var(--nyc-sys-text-fluid-base-xl, 1.125rem)
}
}
.nyc-field select,
.nyc-field select::picker(select) {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select
}
.nyc-field select::picker(select) {
background: var(--nyc-sys-color-surface-input, #fff);
border: 1.5px solid var(--nyc-sys-color-border-base, #ddd);
border-radius: var(--nyc-sys-space-2xs, .25rem)
}
@media (min-width:768px) {
.nyc-field select::picker(select) {
border-radius: var(--nyc-sys-space-xs, .5rem);
border-width: 2px
}
}
.nyc-field select option {
padding: var(--nyc-sys-space-xs, .5rem);
position: relative
}
.nyc-field select option:checked,
.nyc-field select option[aria-selected=true] {
background-color: var(--nyc-sys-color-surface-input-highlight, #e7f0fa)
}
.nyc-field select option::checkmark {
content: ""
}
.nyc-field select::picker-icon {
--icon-size: 1.75rem;
background-image: url('data:image/svg+xml;charset=utf-8,');
background-repeat: no-repeat;
content: "";
height: var(--icon-size);
margin-bottom: -.125rem;
margin-top: -.125rem;
transform: rotate(0deg);
transition: rotate .2s ease-out;
width: var(--icon-size)
}
@media (min-width:768px) {
.nyc-field select::picker-icon {
margin-bottom: 0;
margin-top: 0
}
}
.nyc-field select:open {
background-color: var(--nyc-sys-color-surface-input-highlight, #e7f0fa)
}
.nyc-field select:open::picker-icon {
rotate: 180deg
}
}
.field-group {
padding: 15px 10px
}
.field-group h3,
.field-group h4,
.field-group legend {
color: #000;
font-weight: 400;
margin-bottom: 15px
}
.field-group h3 {
font-size: var(--nyc-sys-size-text-fluid-xl-3xl)
}
.field-group h4,
.field-group legend {
font-size: var(--nyc-sys-size-text-fluid-lg-xl)
}
.field-group fieldset {
border: none;
border-radius: 6px;
margin: 0;
padding: 0
}
.field-group fieldset legend {
display: block !important;
height: auto !important;
width: 100% !important
}
.field-group input,
.field-group label,
.field-group select,
.field-group textarea {
cursor: pointer;
display: block;
width: 100%
}
.field-group input textarea {
padding: 12px 7px
}
.field-group label {
color: #222;
font-size: .92em;
margin-bottom: 7px
}
.field-group:has(>.field-error) {
margin-bottom: 10px;
position: relative
}
.field-group:has(>.field-error):before {
background-color: var(--nyc-sys-color-surface-error);
border-radius: 6px;
content: "";
display: block;
height: calc(100% + 4px);
left: -2px;
position: absolute;
top: -2px;
width: calc(100% + 4px);
z-index: -1
}
.field-group:has(>.field-error) .field-error {
outline: none !important
}
.field-group:has(>.field-error) .field-error--message {
display: block;
font-size: max(.85em, 16px);
font-weight: 700;
margin-bottom: 15px;
margin-top: 15px
}
.field-group:has(>.field-error) .field-error--message:last-child {
margin-bottom: 0
}
.field-group:has(>.field-error:focus):before {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important
}
.field-group.field-group--border-top {
border-top: 1px solid var(--nyc-ref-color-gray-90)
}
.field-group.field-group--border-bottom {
border-bottom: 1px solid var(--nyc-ref-color-gray-90)
}
.field-group.field-group--no-border {
border: none !important
}
@media screen and (max-width:800px) {
.field-group .field-group--submit-reset {
align-items: center;
display: flex;
gap: 2.5%
}
}
.field {
--_size: 2;
--_size-shadow: max(2, var(--_size));
--_size-height: calc(22px*var(--_size));
--_size-font: max(12px, calc(var(--_size)*0.54*17px));
--_size-icon: calc(var(--_size-height)*0.5);
--_size-rim: 0 0 0 calc(1px*var(--_size-shadow));
--_size-rim-expand: 0 0 0 calc(2px*var(--_size-shadow));
--_size-border-radius: 2px;
--_size-gap: calc(5px*var(--_size));
--_color-rim: var(--nyc-sys-color-border-base, #ddd);
--_color-rim-icon: var(--nyc-sys-color-border-medium-high, #555);
--_color-bg: var(--nyc-sys-color-surface-base, #fff);
--_color-bg-icon: #f9f9f9;
--_color-text: var(--nyc-sys-color-text-base, #000);
border-radius: var(--_size-border-radius);
font-size: var(--_size-font);
height: var(--_size-height);
line-height: normal;
margin-bottom: 15px;
position: relative;
width: 100%
}
.field span {
display: inline-block;
pointer-events: none;
word-break: break-word
}
.field input,
.field label,
.field select,
.field textarea {
cursor: pointer;
margin: 0;
padding: 7px 12px
}
.field.margin--none {
margin: 0
}
.field.size--xs {
--_size: 1
}
.field.size--s {
--_size: 1.68
}
.field.size--m {
--_size: 2.5
}
.field.size--l {
--_size: 3
}
.field.size--xl {
--_size: 4
}
.field .shape--rim,
.field.shape--rim {
box-shadow: var(--_size-rim) var(--_color-rim)
}
.field .shape--circle,
.field .shape--square,
.field.shape--circle,
.field.shape--square {
max-width: var(--_size-height);
width: var(--_size-height)
}
.field .shape--circle,
.field.shape--circle {
--_size-border-radius: 1000px !important
}
.field .shape--pill,
.field.shape--pill {
--_size-border-radius: 1000px !important;
min-width: calc(var(--_size-height)*2);
width: auto
}
.field .shape--rounded,
.field.shape--rounded {
--_size-border-radius: max(2px, calc(2px*var(--_size)))
}
.field .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-font)*.8);
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon)
}
.field .icon.i--checkbox,
.field .icon.i--radio {
transform: translateY(10%)
}
.field .icon.i--checkbox:after,
.field .icon.i--checkbox:before,
.field .icon.i--radio:after,
.field .icon.i--radio:before {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
.field .icon.i--checkbox:before,
.field .icon.i--radio:before {
background: var(--_color-bg-icon);
border-radius: calc(var(--_size-border-radius)*.5);
box-shadow: 0 0 0 1px var(--_color-rim-icon);
content: "";
height: 100%;
width: 100%
}
.field .icon.i--checkbox:after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
height: 30%;
transform: translateY(-28%) rotate(-45deg);
width: 50%
}
.field .icon.i--radio:before {
border-radius: 1000px
}
.field .icon.i--radio:after {
background-color: #fff;
border-radius: 1000px;
height: 45%;
width: 45%
}
.field .icon.i--exclamation {
--_color-bg-icon: var(--nyc-sys-color-auxiliary-error);
align-items: center;
border-radius: 1000px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-auxiliary-error);
display: inline-flex !important;
flex-direction: column;
gap: 2px;
margin-right: 10px;
transform: translateY(-28%) scale(.9)
}
.field .icon.i--exclamation:after,
.field .icon.i--exclamation:before {
background: var(--_color-bg-icon);
border-radius: 1000px;
content: "";
display: block
}
.field .icon.i--exclamation:before {
height: 50%;
width: 16%
}
.field .icon.i--exclamation:after {
height: 20%;
width: 20%
}
.field-search,
.field-text {
--_size: 2;
--_size-shadow: max(2, var(--_size));
--_size-height: calc(22px*var(--_size));
--_size-font: max(12px, calc(var(--_size)*0.54*17px));
--_size-icon: calc(var(--_size-height)*0.5);
--_size-rim: 0 0 0 calc(1px*var(--_size-shadow));
--_size-rim-expand: 0 0 0 calc(2px*var(--_size-shadow));
--_size-border-radius: 2px;
--_size-gap: calc(5px*var(--_size));
--_color-rim: var(--nyc-sys-color-border-base, #ddd);
--_color-rim-icon: var(--nyc-sys-color-border-medium-high, #555);
--_color-bg: var(--nyc-sys-color-surface-base, #fff);
--_color-bg-icon: #f9f9f9;
--_color-text: var(--nyc-sys-color-text-base, #000);
border-radius: var(--_size-border-radius);
font-size: var(--_size-font);
height: var(--_size-height);
height: auto;
line-height: normal;
margin-bottom: 7px;
position: relative;
width: 100%
}
.field-search span,
.field-text span {
display: inline-block;
pointer-events: none;
word-break: break-word
}
.field-search input,
.field-search label,
.field-search select,
.field-search textarea,
.field-text input,
.field-text label,
.field-text select,
.field-text textarea {
cursor: pointer;
margin: 0;
padding: 7px 12px
}
.field-search.margin--none,
.field-text.margin--none {
margin: 0
}
.field-search.size--xs,
.field-text.size--xs {
--_size: 1
}
.field-search.size--s,
.field-text.size--s {
--_size: 1.68
}
.field-search.size--m,
.field-text.size--m {
--_size: 2.5
}
.field-search.size--l,
.field-text.size--l {
--_size: 3
}
.field-search.size--xl,
.field-text.size--xl {
--_size: 4
}
.field-search .shape--rim,
.field-search.shape--rim,
.field-text .shape--rim,
.field-text.shape--rim {
box-shadow: var(--_size-rim) var(--_color-rim)
}
.field-search .shape--square,
.field-search.shape--square,
.field-text .shape--square,
.field-text.shape--square {
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-search .shape--circle,
.field-search.shape--circle,
.field-text .shape--circle,
.field-text.shape--circle {
--_size-border-radius: 1000px !important;
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-search .shape--pill,
.field-search.shape--pill,
.field-text .shape--pill,
.field-text.shape--pill {
--_size-border-radius: 1000px !important;
min-width: calc(var(--_size-height)*2);
width: auto
}
.field-search .shape--rounded,
.field-search.shape--rounded,
.field-text .shape--rounded,
.field-text.shape--rounded {
--_size-border-radius: max(2px, calc(2px*var(--_size)))
}
.field-search .icon,
.field-text .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-font)*.8);
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon)
}
.field-search .icon.i--checkbox,
.field-search .icon.i--radio,
.field-text .icon.i--checkbox,
.field-text .icon.i--radio {
transform: translateY(10%)
}
.field-search .icon.i--checkbox:after,
.field-search .icon.i--checkbox:before,
.field-search .icon.i--radio:after,
.field-search .icon.i--radio:before,
.field-text .icon.i--checkbox:after,
.field-text .icon.i--checkbox:before,
.field-text .icon.i--radio:after,
.field-text .icon.i--radio:before {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
.field-search .icon.i--checkbox:before,
.field-search .icon.i--radio:before,
.field-text .icon.i--checkbox:before,
.field-text .icon.i--radio:before {
background: var(--_color-bg-icon);
border-radius: calc(var(--_size-border-radius)*.5);
box-shadow: 0 0 0 1px var(--_color-rim-icon);
content: "";
height: 100%;
width: 100%
}
.field-search .icon.i--checkbox:after,
.field-text .icon.i--checkbox:after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
height: 30%;
transform: translateY(-28%) rotate(-45deg);
width: 50%
}
.field-search .icon.i--radio:before,
.field-text .icon.i--radio:before {
border-radius: 1000px
}
.field-search .icon.i--radio:after,
.field-text .icon.i--radio:after {
background-color: #fff;
border-radius: 1000px;
height: 45%;
width: 45%
}
.field-search .icon.i--exclamation,
.field-text .icon.i--exclamation {
--_color-bg-icon: var(--nyc-sys-color-auxiliary-error);
align-items: center;
border-radius: 1000px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-auxiliary-error);
display: inline-flex !important;
flex-direction: column;
gap: 2px;
margin-right: 10px;
transform: translateY(-28%) scale(.9)
}
.field-search .icon.i--exclamation:after,
.field-search .icon.i--exclamation:before,
.field-text .icon.i--exclamation:after,
.field-text .icon.i--exclamation:before {
background: var(--_color-bg-icon);
border-radius: 1000px;
content: "";
display: block
}
.field-search .icon.i--exclamation:before,
.field-text .icon.i--exclamation:before {
height: 50%;
width: 16%
}
.field-search .icon.i--exclamation:after,
.field-text .icon.i--exclamation:after {
height: 20%;
width: 20%
}
.field-search input,
.field-search textarea,
.field-text input,
.field-text textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--_color-bg);
border: none;
border-radius: inherit;
box-shadow: var(--_size-rim) var(--_color-rim);
font-size: .9em;
line-height: 1;
outline: none
}
.field-search label,
.field-text label {
padding: 7px 0
}
.field-search input,
.field-text input {
padding: 10px 16px
}
.field-search .char-count,
.field-text .char-count {
color: var(--nyc-sys-color-text-secondary);
margin: 5px 0;
max-width: 100%;
width: 100%
}
.field-search:focus-within,
.field-search:hover,
.field-text:focus-within,
.field-text:hover {
z-index: 1
}
.field-search:focus-within ::-moz-placeholder,
.field-search:hover ::-moz-placeholder,
.field-text:focus-within ::-moz-placeholder,
.field-text:hover ::-moz-placeholder {
color: var(--_color-text)
}
.field-search:focus-within ::placeholder,
.field-search:hover ::placeholder,
.field-text:focus-within ::placeholder,
.field-text:hover ::placeholder {
color: var(--_color-text)
}
.field-search:focus-within input,
.field-search:focus-within textarea,
.field-search:hover input,
.field-search:hover textarea,
.field-text:focus-within input,
.field-text:focus-within textarea,
.field-text:hover input,
.field-text:hover textarea {
--_color-rim: var(--nyc-sys-color-primary, #103fef);
--_color-bg: var(--nyc-sys-color-surface-input-highlight, #e7f0fa)
}
.field-search:focus-within input:focus-visible,
.field-search:focus-within textarea:focus-visible,
.field-text:focus-within input:focus-visible,
.field-text:focus-within textarea:focus-visible {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.field-search:has(>[disabled], >.disabled, >:disabled),
.field-text:has(>[disabled], >.disabled, >:disabled) {
--_color-rim: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-text: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-bg: var(--nyc-sys-color-disabled, #ddd) !important;
opacity: .5 !important;
pointer-events: none !important
}
.field-search:has(>[disabled], >.disabled, >:disabled) input,
.field-search:has(>[disabled], >.disabled, >:disabled) textarea,
.field-text:has(>[disabled], >.disabled, >:disabled) input,
.field-text:has(>[disabled], >.disabled, >:disabled) textarea {
opacity: 1 !important
}
.field-search input {
height: var(--_size-height);
padding-right: 80px
}
.field-search .buton,
.field-search .cmp-button {
border-radius: 0;
border-bottom-right-radius: var(--_size-border-radius);
border-top-right-radius: var(--_size-border-radius);
bottom: 0;
height: var(--_size-height);
padding: 0;
position: absolute;
right: 0;
top: 0;
width: var(--_size-height);
z-index: 2
}
.field-search .buton:focus,
.field-search .buton:hover,
.field-search .cmp-button:focus,
.field-search .cmp-button:hover {
z-index: 10
}
.field-search .buton.search-reset,
.field-search .cmp-button.search-reset {
background-color: transparent;
border: none;
border-radius: none;
box-shadow: none;
display: none;
transform: translate(-100%)
}
.field-search .buton.search-reset .i-ph\:x,
.field-search .cmp-button.search-reset .i-ph\:x {
background-color: #000
}
.field-search .buton.search-reset:focus-visible,
.field-search .buton.search-reset:hover,
.field-search .cmp-button.search-reset:focus-visible,
.field-search .cmp-button.search-reset:hover {
background-color: var(--nyc-sys-color-disabled, #ddd)
}
.field-search:focus-within input {
--_color-bg: var(--nyc-sys-color-surface-base, #fff)
}
.field-search input.has-value+.buton.search-reset,
.field-search input.has-value+.cmp-button.search-reset {
display: inline-flex
}
.field-select {
--_size: 2;
--_size-shadow: max(2, var(--_size));
--_size-height: calc(22px*var(--_size));
--_size-font: max(12px, calc(var(--_size)*0.54*17px));
--_size-icon: calc(var(--_size-height)*0.5);
--_size-rim: 0 0 0 calc(1px*var(--_size-shadow));
--_size-rim-expand: 0 0 0 calc(2px*var(--_size-shadow));
--_size-border-radius: 2px;
--_size-gap: calc(5px*var(--_size));
--_color-rim: var(--nyc-sys-color-border-base, #ddd);
--_color-rim-icon: var(--nyc-sys-color-border-medium-high, #555);
--_color-bg: var(--nyc-sys-color-surface-base, #fff);
--_color-bg-icon: #f9f9f9;
--_color-text: var(--nyc-sys-color-text-base, #000);
border-radius: var(--_size-border-radius);
font-size: var(--_size-font);
height: var(--_size-height);
height: auto;
line-height: normal;
margin-bottom: 15px;
position: relative;
width: 100%
}
.field-select span {
display: inline-block;
pointer-events: none;
word-break: break-word
}
.field-select input,
.field-select label,
.field-select select,
.field-select textarea {
cursor: pointer;
margin: 0;
padding: 7px 12px
}
.field-select.margin--none {
margin: 0
}
.field-select.size--xs {
--_size: 1
}
.field-select.size--s {
--_size: 1.68
}
.field-select.size--m {
--_size: 2.5
}
.field-select.size--l {
--_size: 3
}
.field-select.size--xl {
--_size: 4
}
.field-select .shape--rim,
.field-select.shape--rim {
box-shadow: var(--_size-rim) var(--_color-rim)
}
.field-select .shape--square,
.field-select.shape--square {
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-select .shape--circle,
.field-select.shape--circle {
--_size-border-radius: 1000px !important;
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-select .shape--pill,
.field-select.shape--pill {
--_size-border-radius: 1000px !important;
min-width: calc(var(--_size-height)*2);
width: auto
}
.field-select .shape--rounded,
.field-select.shape--rounded {
--_size-border-radius: max(2px, calc(2px*var(--_size)))
}
.field-select .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-font)*.8);
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon)
}
.field-select .icon.i--checkbox,
.field-select .icon.i--radio {
transform: translateY(10%)
}
.field-select .icon.i--checkbox:after,
.field-select .icon.i--checkbox:before,
.field-select .icon.i--radio:after,
.field-select .icon.i--radio:before {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
.field-select .icon.i--checkbox:before,
.field-select .icon.i--radio:before {
background: var(--_color-bg-icon);
border-radius: calc(var(--_size-border-radius)*.5);
box-shadow: 0 0 0 1px var(--_color-rim-icon);
content: "";
height: 100%;
width: 100%
}
.field-select .icon.i--checkbox:after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
height: 30%;
transform: translateY(-28%) rotate(-45deg);
width: 50%
}
.field-select .icon.i--radio:before {
border-radius: 1000px
}
.field-select .icon.i--radio:after {
background-color: #fff;
border-radius: 1000px;
height: 45%;
width: 45%
}
.field-select .icon.i--exclamation {
--_color-bg-icon: var(--nyc-sys-color-auxiliary-error);
align-items: center;
border-radius: 1000px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-auxiliary-error);
display: inline-flex !important;
flex-direction: column;
gap: 2px;
margin-right: 10px;
transform: translateY(-28%) scale(.9)
}
.field-select .icon.i--exclamation:after,
.field-select .icon.i--exclamation:before {
background: var(--_color-bg-icon);
border-radius: 1000px;
content: "";
display: block
}
.field-select .icon.i--exclamation:before {
height: 50%;
width: 16%
}
.field-select .icon.i--exclamation:after {
height: 20%;
width: 20%
}
.field-select select {
background-color: var(--_color-bg);
border: none;
border-radius: inherit;
box-shadow: var(--_size-rim) var(--_color-rim);
height: 100%;
outline: none;
padding: 0 34px 0 12px;
position: relative;
width: 100%
}
.field-select label {
padding: 7px 0
}
.field-select optgroup {
font-size: 1em;
font-style: normal;
font-weight: 700
}
.field-select option {
padding: 3px 7px
}
.field-select option:checked,
.field-select option[aria-selected=true] {
background-color: var(--nyc-ref-color-blue-90, #add8e6)
}
.field-select.multiselect select {
padding: 7px 12px
}
.field-select:not(.multiselect):not(.cmp-form-options--multi-drop-down):after {
border: none;
border-bottom: 2px solid var(--nyc-ref-color-gray-20, #222);
border-right: 2px solid var(--nyc-ref-color-gray-20, #222);
bottom: 17%;
box-shadow: none;
content: "";
display: block;
height: 8px;
outline: none;
pointer-events: none;
position: absolute;
right: 12px;
transform: translateY(-50%) rotate(45deg);
width: 8px;
z-index: 1
}
.field-select.field-error:after {
bottom: 40% !important
}
.field-select.field-error.cmp-form-options:after {
bottom: 38% !important
}
.field-select:focus-within,
.field-select:hover {
--_color-rim: var(--nyc-ref-color-blue-40, blue) !important
}
.field-select:focus-within select {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.field-select:has([disabled], .disabled, :disabled) {
pointer-events: none !important
}
.field-select label+select.disabled,
.field-select label+select:disabled,
.field-select label+select[disabled],
.field-select:has([disabled], .disabled, :disabled) label,
.field-select:has([disabled], .disabled, :disabled):after {
--_color-rim: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-text: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-bg: var(--nyc-sys-color-disabled, #ddd) !important;
opacity: .35 !important;
pointer-events: none !important
}
.field-checkbox,
.field-lightbulb,
.field-radio {
--_size: 2;
--_size-shadow: max(2, var(--_size));
--_size-height: calc(22px*var(--_size));
--_size-font: max(12px, calc(var(--_size)*0.54*17px));
--_size-icon: calc(var(--_size-height)*0.5);
--_size-rim: 0 0 0 calc(1px*var(--_size-shadow));
--_size-rim-expand: 0 0 0 calc(2px*var(--_size-shadow));
--_size-border-radius: 2px;
--_size-gap: calc(5px*var(--_size));
--_color-rim: var(--nyc-sys-color-border-base, #ddd);
--_color-rim-icon: var(--nyc-sys-color-border-medium-high, #555);
--_color-bg: var(--nyc-sys-color-surface-base, #fff);
--_color-bg-icon: #f9f9f9;
--_color-text: var(--nyc-sys-color-text-base, #000);
border-radius: var(--_size-border-radius);
font-size: var(--_size-font);
height: var(--_size-height);
line-height: normal;
position: relative;
width: 100%;
--_color-bg: var(--nyc-ref-color-gray-90);
margin-bottom: 0
}
.field-checkbox span,
.field-lightbulb span,
.field-radio span {
display: inline-block;
pointer-events: none;
word-break: break-word
}
.field-checkbox input,
.field-checkbox label,
.field-checkbox select,
.field-checkbox textarea,
.field-lightbulb input,
.field-lightbulb label,
.field-lightbulb select,
.field-lightbulb textarea,
.field-radio input,
.field-radio label,
.field-radio select,
.field-radio textarea {
cursor: pointer;
margin: 0;
padding: 7px 12px
}
.field-checkbox.margin--none,
.field-lightbulb.margin--none,
.field-radio.margin--none {
margin: 0
}
.field-checkbox.size--xs,
.field-lightbulb.size--xs,
.field-radio.size--xs {
--_size: 1
}
.field-checkbox.size--s,
.field-lightbulb.size--s,
.field-radio.size--s {
--_size: 1.68
}
.field-checkbox.size--m,
.field-lightbulb.size--m,
.field-radio.size--m {
--_size: 2.5
}
.field-checkbox.size--l,
.field-lightbulb.size--l,
.field-radio.size--l {
--_size: 3
}
.field-checkbox.size--xl,
.field-lightbulb.size--xl,
.field-radio.size--xl {
--_size: 4
}
.field-checkbox .shape--rim,
.field-checkbox.shape--rim,
.field-lightbulb .shape--rim,
.field-lightbulb.shape--rim,
.field-radio .shape--rim,
.field-radio.shape--rim {
box-shadow: var(--_size-rim) var(--_color-rim)
}
.field-checkbox .shape--square,
.field-checkbox.shape--square,
.field-lightbulb .shape--square,
.field-lightbulb.shape--square,
.field-radio .shape--square,
.field-radio.shape--square {
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-checkbox .shape--circle,
.field-checkbox.shape--circle,
.field-lightbulb .shape--circle,
.field-lightbulb.shape--circle,
.field-radio .shape--circle,
.field-radio.shape--circle {
--_size-border-radius: 1000px !important;
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-checkbox .shape--pill,
.field-checkbox.shape--pill,
.field-lightbulb .shape--pill,
.field-lightbulb.shape--pill,
.field-radio .shape--pill,
.field-radio.shape--pill {
--_size-border-radius: 1000px !important;
min-width: calc(var(--_size-height)*2);
width: auto
}
.field-checkbox .shape--rounded,
.field-checkbox.shape--rounded,
.field-lightbulb .shape--rounded,
.field-lightbulb.shape--rounded,
.field-radio .shape--rounded,
.field-radio.shape--rounded {
--_size-border-radius: max(2px, calc(2px*var(--_size)))
}
.field-checkbox .icon,
.field-lightbulb .icon,
.field-radio .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-font)*.8);
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon)
}
.field-checkbox .icon.i--checkbox,
.field-checkbox .icon.i--radio,
.field-lightbulb .icon.i--checkbox,
.field-lightbulb .icon.i--radio,
.field-radio .icon.i--checkbox,
.field-radio .icon.i--radio {
transform: translateY(10%)
}
.field-checkbox .icon.i--checkbox:after,
.field-checkbox .icon.i--checkbox:before,
.field-checkbox .icon.i--radio:after,
.field-checkbox .icon.i--radio:before,
.field-lightbulb .icon.i--checkbox:after,
.field-lightbulb .icon.i--checkbox:before,
.field-lightbulb .icon.i--radio:after,
.field-lightbulb .icon.i--radio:before,
.field-radio .icon.i--checkbox:after,
.field-radio .icon.i--checkbox:before,
.field-radio .icon.i--radio:after,
.field-radio .icon.i--radio:before {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
.field-checkbox .icon.i--checkbox:before,
.field-checkbox .icon.i--radio:before,
.field-lightbulb .icon.i--checkbox:before,
.field-lightbulb .icon.i--radio:before,
.field-radio .icon.i--checkbox:before,
.field-radio .icon.i--radio:before {
background: var(--_color-bg-icon);
border-radius: calc(var(--_size-border-radius)*.5);
box-shadow: 0 0 0 1px var(--_color-rim-icon);
content: "";
height: 100%;
width: 100%
}
.field-checkbox .icon.i--checkbox:after,
.field-lightbulb .icon.i--checkbox:after,
.field-radio .icon.i--checkbox:after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
height: 30%;
transform: translateY(-28%) rotate(-45deg);
width: 50%
}
.field-checkbox .icon.i--radio:before,
.field-lightbulb .icon.i--radio:before,
.field-radio .icon.i--radio:before {
border-radius: 1000px
}
.field-checkbox .icon.i--radio:after,
.field-lightbulb .icon.i--radio:after,
.field-radio .icon.i--radio:after {
background-color: #fff;
border-radius: 1000px;
height: 45%;
width: 45%
}
.field-checkbox .icon.i--exclamation,
.field-lightbulb .icon.i--exclamation,
.field-radio .icon.i--exclamation {
--_color-bg-icon: var(--nyc-sys-color-auxiliary-error);
align-items: center;
border-radius: 1000px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-auxiliary-error);
display: inline-flex !important;
flex-direction: column;
gap: 2px;
margin-right: 10px;
transform: translateY(-28%) scale(.9)
}
.field-checkbox .icon.i--exclamation:after,
.field-checkbox .icon.i--exclamation:before,
.field-lightbulb .icon.i--exclamation:after,
.field-lightbulb .icon.i--exclamation:before,
.field-radio .icon.i--exclamation:after,
.field-radio .icon.i--exclamation:before {
background: var(--_color-bg-icon);
border-radius: 1000px;
content: "";
display: block
}
.field-checkbox .icon.i--exclamation:before,
.field-lightbulb .icon.i--exclamation:before,
.field-radio .icon.i--exclamation:before {
height: 50%;
width: 16%
}
.field-checkbox .icon.i--exclamation:after,
.field-lightbulb .icon.i--exclamation:after,
.field-radio .icon.i--exclamation:after {
height: 20%;
width: 20%
}
.field-checkbox input,
.field-checkbox label,
.field-lightbulb input,
.field-lightbulb label,
.field-radio input,
.field-radio label {
height: 100%;
left: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.field-checkbox input:focus-visible,
.field-checkbox label:focus-visible,
.field-lightbulb input:focus-visible,
.field-lightbulb label:focus-visible,
.field-radio input:focus-visible,
.field-radio label:focus-visible {
outline: none
}
.field-checkbox input,
.field-lightbulb input,
.field-radio input {
opacity: 0
}
.field-checkbox label,
.field-lightbulb label,
.field-radio label {
align-items: center;
background: var(--_color-bg);
border-radius: inherit;
color: var(--_color-text);
display: flex;
justify-content: center;
overflow: hidden;
position: static;
z-index: 1
}
.field-checkbox input:checked+label,
.field-lightbulb input:checked+label,
.field-radio input:checked+label {
--_color-bg: var(--nyc-sys-color-primary);
--_color-text: #fff
}
.field-checkbox:focus-within input:checked+label,
.field-checkbox:focus-within label,
.field-checkbox:hover input:checked+label,
.field-checkbox:hover label,
.field-lightbulb:focus-within input:checked+label,
.field-lightbulb:focus-within label,
.field-lightbulb:hover input:checked+label,
.field-lightbulb:hover label,
.field-radio:focus-within input:checked+label,
.field-radio:focus-within label,
.field-radio:hover input:checked+label,
.field-radio:hover label {
box-shadow: var(--_size-rim) #fff, var(--_size-rim-expand) var(--nyc-sys-color-primary)
}
.field-checkbox:focus-within label,
.field-lightbulb:focus-within label,
.field-radio:focus-within label {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.field-checkbox input.disabled,
.field-checkbox input.disabled:checked,
.field-checkbox input:checked:disabled,
.field-checkbox input:disabled,
.field-checkbox input[disabled],
.field-checkbox input[disabled]:checked,
.field-checkbox:has([disabled], .disabled, :disabled),
.field-lightbulb input.disabled,
.field-lightbulb input.disabled:checked,
.field-lightbulb input:checked:disabled,
.field-lightbulb input:disabled,
.field-lightbulb input[disabled],
.field-lightbulb input[disabled]:checked,
.field-lightbulb:has([disabled], .disabled, :disabled),
.field-radio input.disabled,
.field-radio input.disabled:checked,
.field-radio input:checked:disabled,
.field-radio input:disabled,
.field-radio input[disabled],
.field-radio input[disabled]:checked,
.field-radio:has([disabled], .disabled, :disabled) {
pointer-events: none !important
}
.field-checkbox input.disabled+label,
.field-checkbox input.disabled:checked+label,
.field-checkbox input:checked:disabled+label,
.field-checkbox input:disabled+label,
.field-checkbox input[disabled]+label,
.field-checkbox input[disabled]:checked+label,
.field-lightbulb input.disabled+label,
.field-lightbulb input.disabled:checked+label,
.field-lightbulb input:checked:disabled+label,
.field-lightbulb input:disabled+label,
.field-lightbulb input[disabled]+label,
.field-lightbulb input[disabled]:checked+label,
.field-radio input.disabled+label,
.field-radio input.disabled:checked+label,
.field-radio input:checked:disabled+label,
.field-radio input:disabled+label,
.field-radio input[disabled]+label,
.field-radio input[disabled]:checked+label {
--_color-rim: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-text: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-bg: var(--nyc-sys-color-disabled, #ddd) !important;
opacity: .35 !important;
pointer-events: none !important
}
.field-range {
--_size: 2;
--_size-shadow: max(2, var(--_size));
--_size-height: calc(22px*var(--_size));
--_size-font: max(12px, calc(var(--_size)*0.54*17px));
--_size-icon: calc(var(--_size-height)*0.5);
--_size-rim: 0 0 0 calc(1px*var(--_size-shadow));
--_size-rim-expand: 0 0 0 calc(2px*var(--_size-shadow));
--_size-border-radius: 2px;
--_size-gap: calc(5px*var(--_size));
--_color-rim: var(--nyc-sys-color-border-base, #ddd);
--_color-rim-icon: var(--nyc-sys-color-border-medium-high, #555);
--_color-bg: var(--nyc-sys-color-surface-base, #fff);
--_color-bg-icon: #f9f9f9;
--_color-text: var(--nyc-sys-color-text-base, #000);
border-radius: var(--_size-border-radius);
font-size: var(--_size-font);
height: var(--_size-height);
height: auto;
line-height: normal;
margin-bottom: 15px;
position: relative;
width: 100%
}
.field-range span {
display: inline-block;
pointer-events: none;
word-break: break-word
}
.field-range input,
.field-range label,
.field-range select,
.field-range textarea {
cursor: pointer;
margin: 0;
padding: 7px 12px
}
.field-range.margin--none {
margin: 0
}
.field-range.size--xs {
--_size: 1
}
.field-range.size--s {
--_size: 1.68
}
.field-range.size--m {
--_size: 2.5
}
.field-range.size--l {
--_size: 3
}
.field-range.size--xl {
--_size: 4
}
.field-range .shape--rim,
.field-range.shape--rim {
box-shadow: var(--_size-rim) var(--_color-rim)
}
.field-range .shape--circle,
.field-range .shape--square,
.field-range.shape--circle,
.field-range.shape--square {
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-range .shape--circle,
.field-range.shape--circle {
--_size-border-radius: 1000px !important
}
.field-range .shape--pill,
.field-range.shape--pill {
--_size-border-radius: 1000px !important;
min-width: calc(var(--_size-height)*2);
width: auto
}
.field-range .shape--rounded,
.field-range.shape--rounded {
--_size-border-radius: max(2px, calc(2px*var(--_size)))
}
.field-range .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-font)*.8);
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon)
}
.field-range .icon.i--checkbox,
.field-range .icon.i--radio {
transform: translateY(10%)
}
.field-range .icon.i--checkbox:after,
.field-range .icon.i--checkbox:before,
.field-range .icon.i--radio:after,
.field-range .icon.i--radio:before {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
.field-range .icon.i--checkbox:before,
.field-range .icon.i--radio:before {
background: var(--_color-bg-icon);
border-radius: calc(var(--_size-border-radius)*.5);
box-shadow: 0 0 0 1px var(--_color-rim-icon);
content: "";
height: 100%;
width: 100%
}
.field-range .icon.i--checkbox:after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
height: 30%;
transform: translateY(-28%) rotate(-45deg);
width: 50%
}
.field-range .icon.i--radio:before {
border-radius: 1000px
}
.field-range .icon.i--radio:after {
background-color: #fff;
border-radius: 1000px;
height: 45%;
width: 45%
}
.field-range .icon.i--exclamation {
--_color-bg-icon: var(--nyc-sys-color-auxiliary-error);
align-items: center;
border-radius: 1000px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-auxiliary-error);
display: inline-flex !important;
flex-direction: column;
gap: 2px;
margin-right: 10px;
transform: translateY(-28%) scale(.9)
}
.field-range .icon.i--exclamation:after,
.field-range .icon.i--exclamation:before {
background: var(--_color-bg-icon);
border-radius: 1000px;
content: "";
display: block
}
.field-range .icon.i--exclamation:before {
height: 50%;
width: 16%
}
.field-range .icon.i--exclamation:after {
height: 20%;
width: 20%
}
.field-range input {
border-radius: calc(var(--_size-border-radius)*2);
margin: 0;
padding: 12px 0
}
.field-range label {
padding: 7px 0;
position: relative
}
.field-range .field-range--max,
.field-range .field-range--min {
bottom: -15px;
display: block;
font-size: .9em;
left: 0;
position: absolute;
text-align: left
}
.field-range .field-range--max {
right: 0;
text-align: right
}
.field-range .field-range--indicator {
background-color: #fff;
border-radius: 4px;
bottom: -30px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
font-size: .8rem;
left: 0;
min-width: 40px;
opacity: 0;
padding: 5px 7px;
pointer-events: none;
position: absolute;
text-align: center;
transform: translateX(calc(-50% + 9px));
transition: opacity .2s ease-in;
will-change: left;
z-index: 99
}
.field-range .field-range--indicator:before {
border-color: #fff transparent transparent #fff;
border-style: solid;
border-width: 4px;
box-shadow: -3px -3px 5px rgba(0, 0, 0, .15);
content: "";
display: block;
height: 5px;
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, -50%) rotate(45deg);
width: 5px;
z-index: -1
}
.field-range input[type=range]::-moz-range-track {
background: #ddd;
height: 2px;
position: relative
}
.field-range input[type=range]::-webkit-slider-runnable-track {
background: #ddd;
height: 2px;
position: relative
}
.field-range input[type=range]::-webkit-slider-runnable-track:before {
background-color: #222;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
.field-range input[type=range]::-moz-range-thumb {
-moz-appearance: none;
background-color: #222;
border: none;
border-radius: 50px;
height: 18px;
-moz-transition: box-shadow .2s ease-in;
transition: box-shadow .2s ease-in;
width: 18px
}
.field-range input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #222;
border: none;
border-radius: 50px;
height: 18px;
transform: translateY(-50%);
-webkit-transition: box-shadow .2s ease-in;
transition: box-shadow .2s ease-in;
width: 18px
}
.field-range input[type=range]:focus::-moz-range-thumb,
.field-range input[type=range]:hover::-moz-range-thumb {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222
}
.field-range input[type=range]:focus::-webkit-slider-thumb,
.field-range input[type=range]:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222
}
.field-range input[type=range]:focus {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.field-range input[type=range]:focus+.field-range--indicator {
opacity: 1
}
.field-range:has([disabled], .disabled, :disabled),
.field-range:has([disabled], .disabled, :disabled) label .field-range:has([disabled], .disabled, :disabled) input {
pointer-events: none !important
}
.field-range:has([disabled], .disabled, :disabled) label {
opacity: .35 !important
}
.field-checker {
--_size: 2;
--_size-shadow: max(2, var(--_size));
--_size-height: calc(22px*var(--_size));
--_size-font: max(12px, calc(var(--_size)*0.54*17px));
--_size-icon: calc(var(--_size-height)*0.5);
--_size-rim: 0 0 0 calc(1px*var(--_size-shadow));
--_size-rim-expand: 0 0 0 calc(2px*var(--_size-shadow));
--_size-border-radius: 2px;
--_size-gap: calc(5px*var(--_size));
--_color-rim: var(--nyc-sys-color-border-base, #ddd);
--_color-rim-icon: var(--nyc-sys-color-border-medium-high, #555);
--_color-bg: var(--nyc-sys-color-surface-base, #fff);
--_color-bg-icon: #f9f9f9;
--_color-text: var(--nyc-sys-color-text-base, #000);
border-radius: var(--_size-border-radius);
font-size: var(--_size-font);
height: var(--_size-height);
height: auto;
line-height: normal;
margin-bottom: 15px;
min-height: var(--_size-height);
position: relative;
width: 100%
}
.field-checker span {
display: inline-block;
pointer-events: none;
word-break: break-word
}
.field-checker input,
.field-checker label,
.field-checker select,
.field-checker textarea {
cursor: pointer;
margin: 0;
padding: 7px 12px
}
.field-checker.margin--none {
margin: 0
}
.field-checker.size--xs {
--_size: 1
}
.field-checker.size--s {
--_size: 1.68
}
.field-checker.size--m {
--_size: 2.5
}
.field-checker.size--l {
--_size: 3
}
.field-checker.size--xl {
--_size: 4
}
.field-checker .shape--rim,
.field-checker.shape--rim {
box-shadow: var(--_size-rim) var(--_color-rim)
}
.field-checker .shape--square,
.field-checker.shape--square {
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-checker .shape--circle,
.field-checker.shape--circle {
--_size-border-radius: 1000px !important;
max-width: var(--_size-height);
width: var(--_size-height)
}
.field-checker .shape--pill,
.field-checker.shape--pill {
--_size-border-radius: 1000px !important;
min-width: calc(var(--_size-height)*2);
width: auto
}
.field-checker .shape--rounded,
.field-checker.shape--rounded {
--_size-border-radius: max(2px, calc(2px*var(--_size)))
}
.field-checker .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-font)*.8);
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon)
}
.field-checker .icon.i--checkbox,
.field-checker .icon.i--radio {
transform: translateY(10%)
}
.field-checker .icon.i--checkbox:after,
.field-checker .icon.i--checkbox:before,
.field-checker .icon.i--radio:after,
.field-checker .icon.i--radio:before {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
.field-checker .icon.i--checkbox:before,
.field-checker .icon.i--radio:before {
background: var(--_color-bg-icon);
border-radius: calc(var(--_size-border-radius)*.5);
box-shadow: 0 0 0 1px var(--_color-rim-icon);
content: "";
height: 100%;
width: 100%
}
.field-checker .icon.i--checkbox:after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
height: 30%;
transform: translateY(-28%) rotate(-45deg);
width: 50%
}
.field-checker .icon.i--radio:before {
border-radius: 1000px
}
.field-checker .icon.i--radio:after {
background-color: #fff;
border-radius: 1000px;
height: 45%;
width: 45%
}
.field-checker .icon.i--exclamation {
--_color-bg-icon: var(--nyc-sys-color-auxiliary-error);
align-items: center;
border-radius: 1000px;
box-shadow: 0 0 0 2px var(--nyc-sys-color-auxiliary-error);
display: inline-flex !important;
flex-direction: column;
gap: 2px;
margin-right: 10px;
transform: translateY(-28%) scale(.9)
}
.field-checker .icon.i--exclamation:after,
.field-checker .icon.i--exclamation:before {
background: var(--_color-bg-icon);
border-radius: 1000px;
content: "";
display: block
}
.field-checker .icon.i--exclamation:before {
height: 50%;
width: 16%
}
.field-checker .icon.i--exclamation:after {
height: 20%;
width: 20%
}
.field-checker input,
.field-checker label {
height: 100%;
left: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.field-checker input:focus-visible,
.field-checker label:focus-visible {
outline: none
}
.field-checker input {
opacity: 0
}
.field-checker label {
align-items: flex-start;
background: var(--_color-bg);
border-radius: inherit;
box-shadow: var(--_size-rim) var(--_color-rim);
display: flex;
font-size: var(--nyc-sys-size-text-fluid-base-lg);
gap: var(--_size-gap);
justify-content: flex-start;
overflow: hidden;
padding: 12px;
position: static;
z-index: 1
}
.field-checker label span:not(.icon) {
line-height: 1.25em;
width: calc(100% - var(--_size-icon) - var(--_size-gap))
}
.field-checker input:checked+label {
--_color-bg: var(--nyc-sys-color-surface-input-highlight, #e7f0fa);
--_color-bg-icon: var(--nyc-sys-color-primary, #103fef)
}
.field-checker input:checked+label .icon.i--checkbox:after,
.field-checker input:checked+label .icon.i--radio:after {
content: ""
}
.field-checker:focus-within,
.field-checker:hover {
--_color-bg-icon: var(--nyc-sys-color-surface-input-highlight, #e7f0fa)
}
.field-checker:focus-within .icon:before,
.field-checker:hover .icon:before {
box-shadow: 0 0 0 2px var(--nyc-sys-color-primary-hover, #050560)
}
.field-checker:focus-within input:checked+label,
.field-checker:hover input:checked+label {
--_color-bg-icon: var(--nyc-sys-color-primary-hover, #050560)
}
.field-checker:focus-within input:checked+label,
.field-checker:focus-within label,
.field-checker:hover input:checked+label,
.field-checker:hover label {
--_color-rim: var(--nyc-sys-color-primary, #103fef)
}
.field-checker:focus-within label {
outline: 2px dashed var(--nyc-sys-color-border-high, inherit) !important;
outline-offset: .3rem !important
}
.field-checker input.disabled,
.field-checker input.disabled:checked,
.field-checker input:checked:disabled,
.field-checker input:disabled,
.field-checker input[disabled],
.field-checker input[disabled]:checked,
.field-checker:has([disabled], .disabled, :disabled) {
pointer-events: none !important
}
.field-checker input.disabled+label,
.field-checker input.disabled:checked+label,
.field-checker input:checked:disabled+label,
.field-checker input:disabled+label,
.field-checker input[disabled]+label,
.field-checker input[disabled]:checked+label {
--_color-rim: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-text: var(--nyc-sys-color-on-disabled, #555) !important;
--_color-bg: transparent !important;
opacity: .35 !important;
pointer-events: none !important
}
.field-checker input.disabled:checked+label,
.field-checker input:checked:disabled+label,
.field-checker input[disabled]:checked+label {
--_color-bg-icon: var(--nyc-sys-color-on-disabled, #555) !important
}
.sr-only {
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
clip: rect(0, 0, 0, 0);
border-width: 0;
white-space: nowrap
}
.pointer-events-none {
pointer-events: none
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.box-border {
box-sizing: border-box
}
.hidden {
display: none
}
.important-hidden {
display: none !important
}
.w-full {
width: 100%
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.flex-row-reverse {
flex-direction: row-reverse
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-start {
align-items: flex-start
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.justify-start {
justify-content: flex-start
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-3xl {
gap: var(--nyc-sys-space-3xl)
}
.gap-fluid-3xl-5xl {
gap: var(--nyc-sys-space-fluid-3xl-5xl)
}
.gap-lg {
gap: var(--nyc-sys-space-lg)
}
.overflow-auto {
overflow: auto
}
.overflow-y-scroll {
overflow-y: scroll
}
.bg-surface-info {
background-color: var(--nyc-sys-color-surface-info)
}
.bg-surface-low {
background-color: var(--nyc-sys-color-surface-low)
}
.px-fluid-base-5xl {
padding-left: var(--nyc-sys-space-fluid-base-5xl);
padding-right: var(--nyc-sys-space-fluid-base-5xl)
}
.py-fluid-7xl-8xl {
padding-bottom: var(--nyc-sys-space-fluid-7xl-8xl);
padding-top: var(--nyc-sys-space-fluid-7xl-8xl)
}
.text-2xl {
font-size: var(--nyc-sys-size-text-2xl, 24px);
line-height: 1
}
.text-3xl {
font-size: var(--nyc-sys-size-text-3xl, 28px);
line-height: 1
}
.text-4xl {
font-size: var(--nyc-sys-size-text-4xl, 32px);
line-height: 1
}
.text-5xl {
font-size: var(--nyc-sys-size-text-5xl, 40px);
line-height: 1
}
.text-6xl {
font-size: var(--nyc-sys-size-text-6xl, 56px);
line-height: 1
}
.text-7xl {
font-size: var(--nyc-sys-size-text-7xl, 64px);
line-height: 1
}
.text-base {
font-size: var(--nyc-sys-size-text-base, 18px);
line-height: 1
}
.text-fluid-3xl-6xl {
font-size: var(--nyc-sys-size-text-fluid-3xl-6xl);
line-height: 1
}
.text-fluid-4xl-7xl {
font-size: var(--nyc-sys-size-text-fluid-4xl-7xl);
line-height: 1
}
.text-intro {
font-size: var(--nyc-sys-size-text-fluid-lg-xl, 20px);
line-height: 1
}
.text-lg {
font-size: var(--nyc-sys-size-text-lg, 20px);
line-height: 1
}
.text-sm {
font-size: var(--nyc-sys-size-text-sm, 16px);
line-height: 1
}
.text-xl {
font-size: var(--nyc-sys-size-text-xl, 22px);
line-height: 1
}
.text-xs {
font-size: var(--nyc-sys-size-text-xs, 14px);
line-height: 1
}
.text-white {
--nyc-text-opacity: 1;
color: rgba(255, 255, 255, var(--nyc-text-opacity))
}
.font-black {
font-weight: 900
}
.font-bold {
font-weight: 700
}
.font-semibold {
font-weight: 600
}
.font-clash-grotesk {
font-family: var(--nyc-ref-type-family-clash)
}
.font-noto-sans {
font-family: var(--nyc-ref-type-family-noto)
}
.lowercase {
text-transform: lowercase
}
.tab {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4
}
@media (max-width:939.9px) {
.max-lg-important-hidden {
display: none !important
}
.important-max-lg-flex {
display: flex !important
}
}
@media (max-width:767.9px) {
.max-md-basis-full {
flex-basis: 100%
}
}
@media (min-width:768px) {
.md-flex-row {
flex-direction: row
}
}
@media (min-width:940px) {
.lg-important-hidden {
display: none !important
}
}
.grow-3 {
flex-grow: 3
}
.grow-2-3>:first-child {
flex-grow: 1.6
}
.radius-base {
border-radius: var(--nyc-sys-radius-base)
}
.overflow-hidden {
overflow: hidden
}
.strong {
font-weight: 700
}
.color-primary {
color: var(--nyc-sys-color-primary)
}
.background-primary {
background-color: var(--nyc-sys-color-primary);
color: var(--nyc-sys-color-on-primary)
}
.background-base {
background-color: var(--nyc-sys-color-background)
}
.background-blue-100 {
background-color: var(--nyc-ref-color-blue-100)
}
.background-primary-light {
background-color: var(--nyc-sys-color-primary-light)
}
.background-primary-lighter {
background-color: var(--nyc-sys-color-primary-lighter);
color: var(--nyc-sys-color-on-primary-lighter)
}
.background-primary-lightest {
background-color: var(--nyc-sys-color-primary-lightest)
}
.background-gradient {
background: var(--nyc-sys-gradient-background)
}
.background-gradient-primary-light {
background: var(--nyc-sys-gradient-primary-light)
}
.text-base {
color: var(--nyc-sys-color-text) !important
}
.shadow-base {
box-shadow: var(--nyc-sys-shadow-base)
}
.border-rainbow {
background: linear-gradient(#000, #000) padding-box, var(--nyc-ref-gradient-rainbow) border-box !important;
border: var(--nyc-sys-size-border-sm) solid transparent !important
}
.background-rainbow {
background: var(--nyc-ref-gradient-rainbow) !important
}
.gradient-overlay--black {
position: relative
}
.gradient-overlay--black>* {
position: relative;
z-index: 1
}
.gradient-overlay--black:after {
background: linear-gradient(180deg, rgba(0, 0, 0, .2), #000);
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
.text-rainbow {
background: var(--nyc-ref-gradient-rainbow);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text
}
.radius-lg {
border-radius: var(--nyc-sys-radius-lg) !important
}
.heading-xl {
font-size: var(--nyc-sys-size-heading-fluid-xl)
}
.text-fluid-lg-xl {
font-size: var(--nyc-sys-size-text-fluid-lg-xl)
}
.text-fluid-5xl-7xl {
font-size: var(--nyc-sys-size-text-fluid-5xl-7xl)
}
.text-fluid-2xl-6xl {
font-size: var(--nyc-sys-size-text-fluid-2xl-6xl)
}
.padding-block-start-fluid-sm-xl {
padding-top: var(--nyc-sys-space-fluid-sm-xl)
}
.gap-fluid-sm-xl {
gap: var(--nyc-sys-space-fluid-sm-xl)
}
.gap-fluid-base-lg {
gap: var(--nyc-sys-space-fluid-base-lg)
}
.margin-block-start-fluid-base-xl {
margin-top: var(--nyc-sys-space-fluid-base-xl)
}
.max-w-hero {
max-width: 1090px
}
.max-w-line-length {
max-width: var(--nyc-sys-size-width-line-length)
}
[hidden] {
display: none !important
}
.image--float-right {
float: right;
margin-bottom: 20px;
margin-left: 20px
}
@media (max-width:767.98px) {
.image--float-right {
float: none;
margin-bottom: 1.25rem;
margin-left: 0;
margin-top: 1.25rem;
width: 100%
}
}
.cmp-accordion__item {
--_group-background: var(--nyc-cmp-accordion-group-background, transparent);
--_group-color: var(--nyc-cmp-accordion-group-color, currentcolor);
--_border-radius: var(--nyc-cmp-accordion-group-border-radius, 1rem);
background-color: var(--_group-background);
border: 1px solid var(--nyc-sys-color-border-base);
border-radius: var(--_border-radius);
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .15);
color: var(--_group-color);
display: flex;
flex-direction: column;
margin-bottom: var(--nyc-sys-space-fluid-lg-xl);
overflow: hidden
}
.cmp-accordion__item:last-child {
margin-bottom: 0
}
.cmp-accordion__item:has(button[aria-expanded]:focus-visible) {
outline: 2px dashed var(--nyc-sys-color-border-focus);
outline-offset: .25rem
}
.cmp-accordion__item button[aria-expanded]:focus-visible {
outline: none
}
.cmp-accordion__item [hidden] {
display: none
}
.cmp-accordion__item .accordion__group>:--heading {
background: transparent
}
.cmp-accordion__item .cmp-accordion__button--expanded .cmp-accordion__icon {
background-color: var(--nyc-sys-color-surface-highlight);
border-color: var(--nyc-sys-color-link)
}
.cmp-accordion__item .cmp-accordion__button--expanded .cmp-accordion__icon:before {
content: "";
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271.2em%27 height=%271.2em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
.cmp-accordion__header {
--_heading-background: var(--nyc-cmp-accordion-heading-background, transparent);
--_color: var(--nyc-cmp-accordion-heading-color, inherit);
--_font-size: var(--nyc-cmp-accordion-heading-font-size, 1rem);
--_padding-block: var(--nyc-cmp-accordion-heading-padding-block, 1rem);
--_padding-inline: var(--nyc-cmp-accordion-heading-padding-inline, 1rem);
--_icon-gap: var(--nyc-sys-space-fluid-base-lg);
background: var(--_heading-background);
color: var(--_color);
flex: 1;
font-size: var(--_font-size);
font-weight: 500;
padding: var(--_padding-block) var(--_padding-inline);
position: relative
}
.cmp-accordion__header :--heading {
color: inherit;
font-size: inherit;
font-weight: inherit;
margin: 0
}
.cmp-accordion__header:has(button[aria-expanded=true]) {
border-bottom: 2px solid var(--nyc-sys-color-border-base)
}
.cmp-accordion__header button {
align-items: center;
color: currentcolor;
cursor: pointer;
display: flex;
font-size: inherit;
font-weight: inherit;
gap: var(--_icon-gap);
justify-content: flex-start;
text-align: left;
-webkit-text-decoration: none;
text-decoration: none;
width: 100%
}
.cmp-accordion__header button [class^=i-]:last-child {
font-size: 1.5rem;
margin-left: auto
}
.cmp-accordion__header button:after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10
}
.cmp-accordion__header:has(>p) {
display: grid;
grid-template-columns: var(--nyc-sys-size-text-fluid-3xl-5xl) 1fr;
grid-template-rows: auto;
grid-column-gap: var(--nyc-sys-space-fluid-base-lg);
-moz-column-gap: var(--nyc-sys-space-fluid-base-lg);
column-gap: var(--nyc-sys-space-fluid-base-lg);
grid-row-gap: .45rem;
row-gap: .45rem
}
.cmp-accordion__header:has(>p)>:--heading,
.cmp-accordion__header:has(>p)>:--heading>button {
display: grid;
grid-column: 1/3;
grid-row: 1/span 2;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-gap: inherit;
gap: inherit;
z-index: 10
}
.cmp-accordion__header:has(>p)>p {
font-size: var(--nyc-sys-size-text-xs);
font-weight: 500;
grid-column: 2;
grid-row: 2;
margin: 0;
z-index: 0
}
@media (min-width:940px) {
.cmp-accordion__header:has(>p) {
row-gap: .75rem
}
.cmp-accordion__header:has(>p)>p {
font-size: var(--nyc-sys-size-text-sm)
}
}
.cmp-accordion__panel {
--_background: var(--nyc-cmp-accordion-body-background, transparent);
--_color: var(--nyc-cmp-accordion-body-color, currentcolor);
--_padding-inline: var(--nyc-cmp-accordion-body-padding-inline, 1rem);
--_padding-block: var(--nyc-cmp-accordion-body-padding-block, 1rem);
background: var(--_background);
color: var(--_color);
padding: var(--_padding-block) var(--_padding-inline)
}
.cmp-accordion__icon {
--_icon-size: var(--nyc-cmp-accordion-icon-size, 2.5rem);
align-items: center;
background-color: var(--nyc-sys-color-surface-low);
border: 2px solid var(--nyc-sys-color-border-base);
border-radius: 50%;
color: var(--nyc-sys-color-link);
display: inline-flex;
flex-shrink: 0;
font-size: .9em;
height: var(--_icon-size);
justify-content: center;
order: -1;
transition: all .3s ease;
width: var(--_icon-size)
}
.cmp-accordion__icon:before {
content: "";
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271em%27 height=%271em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8%27/%3E%3C/svg%3E");
background-color: currentcolor;
color: inherit;
height: 1em;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.cmp-accordion--simple .cmp-accordion__item {
--nyc-cmp-accordion-group-background: transparent;
--nyc-cmp-accordion-heading-background: transparent;
border: none;
border-radius: 0;
--nyc-cmp-accordion-heading-padding: 0
}
.cmp-accordion--simple .cmp-accordion__item>:--heading:has(button[aria-expanded=true]) {
border-bottom: none
}
.cmp-accordion--simple .cmp-accordion__item .cmp-accordion__icon {
background-color: transparent;
border: none;
color: currentcolor;
font-size: 1rem;
height: 1rem;
margin: 0;
order: 0;
width: 1rem
}
.cmp-accordion--simple .cmp-accordion__item .cmp-accordion__icon:before {
--nyc-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m216.49 104.49-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E")
}
.cmp-accordion--simple .cmp-accordion__item .cmp-accordion__button--expanded .cmp-accordion__icon:before {
--nyc-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49 168.49a12 12 0 0 1-17 0L128 97l-71.51 71.49a12 12 0 0 1-17-17l80-80a12 12 0 0 1 17 0l80 80a12 12 0 0 1 0 17'/%3E%3C/svg%3E")
}
.accordion--teaser .cmp-accordion__items {
--nyc-cmp-accordion-heading-background: transparent;
--nyc-cmp-accordion-heading-color: var(--nyc-sys-color-text-base-inverse);
--nyc-cmp-accordion-body-color: var(--nyc-sys-color-text-base-inverse);
--nyc-cmp-accordion-heading-padding-block: var(--nyc-sys-space-fluid-base-lg);
display: flex;
flex-direction: column;
gap: var(--nyc-sys-space-sm)
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item {
border: none;
flex: 1;
margin: 0;
position: relative
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item:after {
background: linear-gradient(270deg, rgba(0, 0, 0, .33) 1.39%, #000 75.35%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item[data-cmp-expanded] {
flex-grow: 2
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item[data-cmp-expanded]:after {
backdrop-filter: blur(10px);
background: linear-gradient(0deg, rgba(0, 0, 0, .66), #000 66%)
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item[data-cmp-expanded] .cmp-teaser__action-container,
.accordion--teaser .cmp-accordion__items .cmp-accordion__item[data-cmp-expanded] .cmp-teaser__description {
display: flex
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item[data-cmp-expanded] .cmp-teaser__pretitle {
align-items: flex-end
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__header {
border-bottom: none;
flex-direction: column;
z-index: 120
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__title {
text-shadow: 4px 4px 15px #000
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__panel {
padding-top: 0
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__panel:has(.teaser) {
display: contents;
padding: 0
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__panel:has(.teaser) .cmp-container,
.accordion--teaser .cmp-accordion__items .cmp-accordion__panel:has(.teaser) .container {
display: contents
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__icon {
background-color: var(--nyc-ref-color-purple-10);
border-color: var(--nyc-sys-color-border-medium-low);
color: var(--nyc-sys-color-text-base-inverse);
display: inline-flex
}
.accordion--teaser .cmp-accordion__items .cmp-teaser,
.accordion--teaser .cmp-accordion__items .teaser {
display: contents
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__title {
display: none
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__description {
flex-direction: column;
padding: 0
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__description p:has(.small-paragraph) {
font-family: inherit;
font-size: var(--nyc-sys-size-text-sm);
margin-bottom: .5rem
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__description p {
margin-bottom: var(--nyc-sys-space-lg);
margin-top: 0
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__pretitle {
display: flex;
flex: 1;
font-weight: 400;
margin: 0;
margin-top: var(--nyc-sys-space-lg);
order: 1
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__content {
backdrop-filter: none;
color: var(--nyc-cmp-accordion-body-color);
padding: 0 var(--nyc-sys-space-lg) var(--nyc-sys-space-lg);
position: relative;
z-index: 100
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__content p {
text-shadow: 4px 4px 15px #000
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__action-container,
.accordion--teaser .cmp-accordion__items .cmp-teaser__description {
display: none
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__action-link {
--nyc-cmp-button-shadow: 4px 4px 25px 0px rgba(0, 0, 0, .9);
--nyc-cmp-button-outline-color: var(--nyc-sys-color-border-focus-high)
}
@media (max-width:767.98px) {
.accordion--teaser .cmp-accordion__items .cmp-teaser__action-link {
flex: 1
}
}
.accordion--teaser .cmp-accordion__items .cmp-teaser__image {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item:not([data-cmp-expanded]) .cmp-accordion__header {
flex: 0
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item:not([data-cmp-expanded]) .cmp-accordion__button:after {
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
@media (min-width:940px) {
.accordion--teaser .cmp-accordion__items {
--nyc-cmp-accordion-heading-padding-inline: var(--nyc-sys-space-lg);
--nyc-cmp-accordion-heading-padding-block: var(--nyc-sys-space-lg);
--nyc-cmp-accordion-body-padding-inline: var(--nyc-sys-space-lg);
--nyc-cmp-accordion-body-padding-block: var(--nyc-sys-space-lg);
flex-direction: row;
gap: var(--nyc-sys-space-lg);
min-height: 465px
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item:after {
background: linear-gradient(0deg, rgba(0, 0, 0, .33) 10.99%, rgba(0, 0, 0, .9) 89.01%)
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__item[data-cmp-expanded]:after {
background: linear-gradient(0deg, rgba(0, 0, 0, .66), #000 66%)
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__icon {
display: none
}
.accordion--teaser .cmp-accordion__items .cmp-accordion__button {
align-items: flex-start;
flex: 1
}
}
.aem-AuthorLayer-Edit .accordion--teaser .cmp-accordion .cmp-teaser,
.aem-AuthorLayer-Edit .accordion--teaser .cmp-accordion .teaser,
.aem-AuthorLayer-structure .accordion--teaser .cmp-accordion .cmp-teaser,
.aem-AuthorLayer-structure .accordion--teaser .cmp-accordion .teaser {
display: flex
}
.cmp-accordion__expand-button {
gap: var(--nyc-sys-space-fluid-xs-base);
margin-bottom: var(--nyc-sys-space-fluid-lg-2xl)
}
.cmp-accordion__expand-button .cmp-accordion__icon {
--nyc-cmp-accordion-icon-size: var(--nyc-sys-size-text-fluid-2xl-4xl);
border-color: var(--nyc-sys-color-link)
}
.cmp-accordion__expand-button[data-expanded=true] .cmp-accordion__icon {
background-color: var(--nyc-sys-color-surface-highlight);
border-color: var(--nyc-sys-color-link)
}
.cmp-accordion__expand-button[data-expanded=true] .cmp-accordion__icon:before {
--nyc-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox=%270 0 256 256%27 width=%271.2em%27 height=%271.2em%27 xmlns=%27http://www.w3.org/2000/svg%27 %3E%3Cpath fill=%27currentColor%27 d=%27M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8%27/%3E%3C/svg%3E")
}
@media (min-width:940.02px) {
.globalheader {
--nyc-cmp-header-padding-inline: calc(var(--nyc-sys-space-base)*2)
}
}
@media (min-width:1200.02px) {
.globalheader {
--nyc-cmp-header-padding-inline: calc(var(--nyc-sys-space-base)*4)
}
}
.header-container {
position: sticky;
top: 0;
z-index: 900
}
@media (min-width:940.02px) {
.header-container:has(.cmp-navigation[data-expanded]):after,
.header-container:has(.navigation[data-expanded]):after {
backdrop-filter: blur(19px);
background: rgba(0, 0, 0, .3);
bottom: 0;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1
}
.header-container:has(#primary-navigation[data-expanded]) .header.header--secondary {
z-index: 1
}
}
.header>.cmp-container {
display: contents
}
.header--primary {
background: #000;
border-bottom: 1.5px solid gray;
position: relative;
z-index: 5
}
.header--primary>.cmp-header {
--_background: var(--nyc-cmp-header-background, #000);
--_color: var(--nyc-cmp-header-color, #fff);
--_padding-inline: var(--nyc-cmp-header-padding-inline, 1rem);
--_padding-block: var(--nyc-cmp-header-padding-block, 1rem);
background: var(--_background);
color: var(--_color);
padding: var(--_padding-block) var(--_padding-inline);
position: relative;
--nyc-cmp-header-background: var(--nyc-cmp-header-primary-background);
--nyc-cmp-header-color: var(--nyc-cmp-header-primary-color);
--nyc-cmp-header-padding-block: 0;
--nyc-cmp-button-font-size: var(--nyc-sys-size-text-lg);
--nyc-cmp-button-padding-block: 0.5rem;
--nyc-cmp-button-padding-inline: 1rem;
box-sizing: content-box;
display: flex;
gap: 0 1rem;
height: 64px;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
transition: border-radius .3s ease;
z-index: 100
}
.header--primary>.cmp-header nav a,
.header--primary>.cmp-header nav button:not(.cmp-button):not(.button) {
color: inherit
}
@media (min-width:940.02px) {
.header--primary>.cmp-header {
--nyc-cmp-header-padding-inline: calc(var(--nyc-sys-space-base)*2)
}
}
@media (min-width:1200.02px) {
.header--primary>.cmp-header {
--nyc-cmp-header-padding-inline: calc(var(--nyc-sys-space-base)*4)
}
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle),
.header--primary>.cmp-header .menu-toggle,
.header--primary>.cmp-header .search,
.header--primary>.cmp-header .translate {
align-items: center;
display: flex;
z-index: 900
}
.header--primary>.cmp-header .languagenavigation,
.header--primary>.cmp-header .translate {
align-items: center;
display: flex
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle),
.header--primary>.cmp-header .menu-toggle {
display: none
}
@media (min-width:940.02px) {
.header--primary>.cmp-header .navigation {
flex: 1
}
}
.header--primary>.cmp-header .navigation:has(#primary-navigation),
.header--primary>.cmp-header .navigation[data-variant=primary] {
z-index: 900
}
.header--primary>.cmp-header .nyc-primary-header__close-menu-button {
display: none
}
@media (max-width:940px) {
.header--primary>.cmp-header {
height: 56px
}
.header--primary>.cmp-header .header--secondary,
.header--primary>.cmp-header .header[data-variant=secondary],
.header--primary>.cmp-header .search,
.header--primary>.cmp-header .translate {
display: none
}
.header--primary>.cmp-header .header--secondary,
.header--primary>.cmp-header .header[data-variant=secondary] {
padding-left: 0;
padding-right: 0
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle),
.header--primary>.cmp-header .menu-toggle {
display: flex;
justify-content: flex-end
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) #mobile-menu-toggle,
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) .button,
.header--primary>.cmp-header .menu-toggle #mobile-menu-toggle,
.header--primary>.cmp-header .menu-toggle .button {
--nyc-cmp-button-outline-color: var(--nyc-sys-color-border-focus-high);
align-self: center;
border: 1px solid var(--nyc-sys-color-border-base);
font-size: 14px;
line-height: 1em;
overflow: hidden;
padding: .5rem .625rem;
position: relative;
transition: none
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) #mobile-menu-toggle[aria-expanded=true],
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) .button[aria-expanded=true],
.header--primary>.cmp-header .menu-toggle #mobile-menu-toggle[aria-expanded=true],
.header--primary>.cmp-header .menu-toggle .button[aria-expanded=true] {
background: none;
border: none;
color: inherit;
font-size: 1.125rem;
font-weight: 600;
padding: 0
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) #mobile-menu-toggle[aria-expanded=true]:before,
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) .button[aria-expanded=true]:before,
.header--primary>.cmp-header .menu-toggle #mobile-menu-toggle[aria-expanded=true]:before,
.header--primary>.cmp-header .menu-toggle .button[aria-expanded=true]:before {
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128 47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z'/%3E%3C/svg%3E");
background-color: currentcolor;
content: "";
display: inline-block;
height: 1em;
margin-top: .1rem;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
.header--primary>.cmp-header .home-link {
margin-right: auto;
max-width: 63px;
padding-bottom: 8px;
padding-top: 8px
}
.header--primary>.cmp-header .button:has(#global-search-button) {
order: 1
}
.header--primary>.cmp-header .header--secondary>.header__title,
.header--primary>.cmp-header .header[data-variant=secondary] .home-link {
display: none
}
}
.header--primary>.cmp-header .home-link {
align-items: center;
display: flex;
margin-left: -.5rem;
max-width: 80px;
z-index: 900
}
.header--primary>.cmp-header .home-link a {
--nyc-sys-color-border-focus: var(--nyc-cmp-header-primary-on-header);
outline-offset: 0;
padding: .5rem;
width: 100%
}
.header--primary>.cmp-header .home-link a:focus-visible {
background: hsla(0, 0%, 100%, .15)
}
@media (min-width:940.02px) {
.header--primary>.cmp-header .home-link {
flex: 1;
max-width: 150px
}
}
.header--primary>.cmp-header .home-link>.cmp-image {
display: flex
}
.header--primary>.cmp-header .button {
align-items: center;
display: flex
}
.header--primary>.cmp-header .button:has(#mobile-menu-toggle) {
order: 1
}
#global-search-button {
--nyc-cmp-button-border-color-hover: #fff;
--nyc-cmp-button-color-hover: var(--nyc-sys-color-primary);
--nyc-cmp-button-outline-color: var(--nyc-sys-color-border-focus-high)
}
#global-search-button:focus-visible {
--nyc-cmp-button-color: var(--nyc-sys-color-primary)
}
#global-search-button:before {
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49 215.51 185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68 68.07 68.07 0 0 1-68-68'/%3E%3C/svg%3E");
background-color: currentcolor;
content: "";
display: inline-block;
height: 1em;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
@media (max-width:940px) {
#global-search-button {
padding: .25rem
}
#global-search-button .cmp-button__text {
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
clip: rect(0, 0, 0, 0);
border-width: 0;
white-space: nowrap
}
}
.languagenavigation .cmp-language-navigation__action-button {
border-radius: .5rem;
padding: .625rem 1.125rem;
-webkit-text-decoration: none;
text-decoration: none
}
@media (max-width:1200px) {
.languagenavigation .cmp-language-navigation__action-button {
padding-left: .65rem;
padding-right: .65rem
}
}
.languagenavigation .cmp-language-navigation__action-button:hover {
background-color: hsla(0, 0%, 100%, .149);
-webkit-text-decoration: none;
text-decoration: none
}
.languagenavigation .cmp-language-navigation__action-button:focus-visible {
background: hsla(0, 0%, 100%, .15);
outline: .125rem dashed #fff
}
.languagenavigation .cmp-language-navigation__action-button * {
pointer-events: none
}
.languagenavigation .cmp-language-navigation__action-button .cmp-language-navigation__action-button--language {
background: var(--nyc-ref-gradient-rainbow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75rem
}
@media (max-width:1200px) {
.languagenavigation .cmp-language-navigation__action-button .cmp-language-navigation__action-button--language {
display: none
}
}
#global-translate-button:before {
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m250.73 210.63-56-112a12 12 0 0 0-21.46 0l-20.52 41A84.2 84.2 0 0 1 114 126.22 107.5 107.5 0 0 0 139.33 68H160a12 12 0 0 0 0-24h-52V32a12 12 0 0 0-24 0v12H32a12 12 0 0 0 0 24h83.13A83.7 83.7 0 0 1 96 110.35 84 84 0 0 1 83.6 91a12 12 0 1 0-21.81 10A107.6 107.6 0 0 0 78 126.24 83.54 83.54 0 0 1 32 140a12 12 0 0 0 0 24 107.47 107.47 0 0 0 64-21.07 108.4 108.4 0 0 0 45.39 19.44l-24.13 48.26a12 12 0 1 0 21.46 10.73L151.41 196h65.17l12.68 25.36a12 12 0 1 0 21.47-10.73M163.41 172 184 130.83 204.58 172Z'/%3E%3C/svg%3E");
background-color: currentcolor;
content: "";
display: inline-block;
height: 1em;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
@media (max-width:940px) {
#global-header-container[data-opened] {
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: scroll !important;
position: fixed;
width: 100vw;
z-index: 999
}
#global-header-container[data-opened] .header--primary .button:has(#global-search-button),
#global-header-container[data-opened] .header--primary .home-link,
#global-header-container[data-opened] .header--primary .languagenavigation,
#global-header-container[data-opened] .header--secondary .header__title:before,
#global-header-container[data-opened] .home-link {
display: none
}
#global-header-container[data-opened] .header--secondary,
#global-header-container[data-opened] .header--secondary>.header__title,
#global-header-container[data-opened] .header[data-variant=secondary],
#global-header-container[data-opened] .nyc-primary-header__close-menu-button {
display: flex
}
#global-header-container[data-opened] .button:has(#mobile-menu-toggle),
#global-header-container[data-opened] .header--secondary,
#global-header-container[data-opened] .header[data-variant=secondary],
#global-header-container[data-opened]>.menu-toggle {
order: -1
}
#global-header-container[data-opened] .button:has(#mobile-menu-toggle) {
background: #000;
border-bottom: 2px solid var(--nyc-sys-color-border-medium-high);
height: 56px;
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem
}
#global-header-container[data-opened]:has(.navigation--secondary) .navigation--primary:not(:has(.cmp-navigation[data-expanded])) .with-secondary-nav-heading,
#global-header-container[data-opened]:has(.navigation--secondary)>.navigation[data-variant=primary]:not([data-expanded]) .with-secondary-nav-heading,
#global-header-container[data-opened]:has(.navigation[data-variant=secondary]) .navigation--primary:not(:has(.cmp-navigation[data-expanded])) .with-secondary-nav-heading,
#global-header-container[data-opened]:has(.navigation[data-variant=secondary])>.navigation[data-variant=primary]:not([data-expanded]) .with-secondary-nav-heading {
border-bottom: 1px solid #fff;
display: flex;
font-size: var(--nyc-sys-size-text-lg);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
position: relative
}
#global-header-container[data-opened]:has(.cmp-navigation[data-expanded]) .header--secondary .header__title,
#global-header-container[data-opened]:has(.cmp-navigation[data-expanded]) .navigation:not(:has(.cmp-navigation[data-expanded])),
#global-header-container[data-opened]:has(.navigation[data-expanded]) .navigation:not([data-expanded]) {
display: none
}
}
@media (max-width:940px) {
#global-header-container[data-opened] .navigation,
#global-header-container[data-opened] .navigation>.cmp-navigation {
display: flex;
flex-direction: column
}
#global-header-container[data-opened] .navigation>.cmp-navigation>ul>li,
#global-header-container[data-opened] .navigation>ul>li {
display: flex
}
#global-header-container[data-opened] .navigation>.cmp-navigation>ul>li>ul>li,
#global-header-container[data-opened] .navigation>ul>li>ul>li {
border-top: 1px solid #fff;
display: flex;
font-size: 1rem;
max-width: none;
width: 100%
}
#global-header-container[data-opened] .navigation>.cmp-navigation>ul>li>ul>li>a,
#global-header-container[data-opened] .navigation>ul>li>ul>li>a {
line-height: 1.75rem;
padding: 1rem .5rem
}
#global-header-container[data-opened] .navigation>.cmp-navigation[data-expanded] .nyc-navigation__back-button,
#global-header-container[data-opened] .navigation[data-expanded] .nyc-navigation__back-button {
display: flex;
margin-top: 1rem;
opacity: 1;
z-index: 999
}
#global-header-container[data-opened] .navigation>.cmp-navigation[data-expanded]>ul>li,
#global-header-container[data-opened] .navigation[data-expanded]>ul>li {
display: none
}
#global-header-container[data-opened] .navigation>.cmp-navigation[data-expanded] ul>li:has(a[aria-expanded=true]),
#global-header-container[data-opened] .navigation[data-expanded] ul>li:has(a[aria-expanded=true]) {
border-bottom: none;
display: flex
}
#global-header-container[data-opened] .navigation>.cmp-navigation[data-expanded] ul>li:has(a[aria-expanded=true])>a,
#global-header-container[data-opened] .navigation[data-expanded] ul>li:has(a[aria-expanded=true])>a {
pointer-events: none
}
#global-header-container[data-opened] .navigation>.cmp-navigation[data-expanded] ul>li:has(a[aria-expanded=true])>ul>li,
#global-header-container[data-opened] .navigation[data-expanded] ul>li:has(a[aria-expanded=true])>ul>li {
grid-column: full
}
#global-header-container[data-opened] .navigation>.cmp-navigation[data-expanded] ul>li:has(a[aria-expanded=true])>ul>li.cmp-navigation__item--last,
#global-header-container[data-opened] .navigation[data-expanded] ul>li:has(a[aria-expanded=true])>ul>li.cmp-navigation__item--last {
font-weight: 600;
order: -1
}
}
@media (max-width:940px) {
#global-header-container[data-opened] #primary-navigation .nyc-primary-navigation__back-button,
#global-header-container[data-opened]>.navigation[data-variant=primary] .nyc-primary-navigation__back-button {
display: flex
}
#global-header-container[data-opened] .header--secondary .header__title {
border-bottom: 1px solid #fff;
margin-right: 0;
max-width: none;
order: -1
}
#global-header-container[data-opened] .header--secondary .header__title a {
display: flex;
font-size: var(--nyc-sys-size-text-lg);
padding-bottom: 1.5rem;
padding-top: 1.5rem
}
#global-header-container[data-opened] .header--secondary .header__title a:before {
display: none
}
#global-header-container[data-opened] .navigation--secondary,
#global-header-container[data-opened] .navigation[data-variant=secondary] {
order: -1
}
#global-header-container[data-opened] .navigation--secondary>ul>li:first-child,
#global-header-container[data-opened] .navigation[data-variant=secondary]>ul>li:first-child {
border-bottom: 1px solid #fff;
font-weight: 700;
height: auto;
padding-bottom: 1.5rem;
padding-top: 1.5rem
}
}
.page:has(.cmp-navigation[data-expanded]) {
overflow-x: hidden !important
}
@media (max-width:940px) {
.page:has(#global-header-container[data-opened]),
.root:has(#global-header-container[data-opened]) {
overflow: hidden !important
}
#global-header-container[data-opened] {
bottom: 0;
display: block;
left: 0;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
z-index: 999
}
#global-header-container[data-opened]:after {
backdrop-filter: blur(6px);
bottom: 0;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1
}
#global-header-container[data-opened] .cmp-navigation>ul>li {
display: flex
}
#global-header-container[data-opened] .accordion:has(#official-website-banner) {
display: none
}
#global-header-container[data-opened] .header--primary,
#global-header-container[data-opened] .header--primary>.cmp-header,
#global-header-container[data-opened] .header--secondary,
#global-header-container[data-opened] .header.header--primary>.cmp-container,
#global-header-container[data-opened] .header.header--secondary>.cmp-container,
#global-header-container[data-opened]>.cmp-container {
display: contents
}
#global-header-container[data-opened] .header.header--primary>.cmp-container .button:has(#global-search-button),
#global-header-container[data-opened] .header.header--primary>.cmp-container .button:has(#global-translate-button),
#global-header-container[data-opened] .header.header--primary>.cmp-container>:first-child {
display: none
}
#global-header-container {
background: rgba(0, 0, 0, .9)
}
#global-header-container[data-opened] .header-container {
display: flex;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem
}
.header.header--primary>.cmp-container>.button>.cmp-button {
font-size: 14px;
line-height: 1em;
padding-left: .5rem;
padding-right: .5rem
}
.header.header--primary>.cmp-container .button:has(#global-search-button) {
grid-column: 3;
grid-row: 1
}
.header.header--primary>.cmp-container .button:has(#global-search-button) .cmp-button__text {
display: none
}
.header.header--primary>.cmp-container .button:has(#global-translate-button) {
grid-column: 2;
grid-row: 1
}
.header.header--primary>.cmp-container .button:has(#global-translate-button) .cmp-button__text {
display: none
}
.header.header--primary>.cmp-container .navigation:has(#primary-navigation) {
--nyc-cmp-navigation-primary-padding-block: 2rem
}
.header.header--primary>.cmp-container .navigation:has(#primary-navigation):has(#primary-navigation[data-expanded]) {
--nyc-cmp-navigation-primary-padding-block: 1rem
}
#global-header-container[data-opened] .header.header--primary>.cmp-container .navigation:has(#primary-navigation) {
height: auto
}
.cmp-header--global-container:has(#primary-navigation[data-expanded]) .cmp-navigation--secondary {
display: none
}
}
.cmp-simple--header {
border-bottom-left-radius: var(--nyc-ref-length-20);
border-bottom-right-radius: var(--nyc-ref-length-20);
padding: var(--nyc-sys-space-fluid-lg-xl)
}
.cmp-simple--header .cmp-teaser__content {
background-color: transparent;
border: none;
box-shadow: none
}
.cmp-simple--header .cmp-teaser__content .cmp-teaser__title {
color: inherit;
font-size: var(--nyc-cmp-heading-h1-size);
font-weight: 700;
justify-self: center;
-webkit-text-decoration: none;
text-decoration: none
}
.cmp-simple--header .cmp-teaser__content .cmp-teaser__title:hover {
-webkit-text-decoration: none;
text-decoration: none
}
.header.header--secondary {
--nyc-cmp-header-padding-block: 0;
background: var(--nyc-cmp-header-background);
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
box-shadow: 0 0 16px 1px rgba(0, 0, 0, .2);
position: relative;
z-index: 3
}
@media (min-width:940.02px) {
.header.header--secondary {
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 1.25rem
}
.header.header--secondary:has(.cmp-navigation[data-expanded]) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
}
.header.header--secondary>.cmp-container {
--_background: var(--nyc-cmp-header-background, #000);
--_color: var(--nyc-cmp-header-color, #fff);
--_padding-inline: var(--nyc-cmp-header-padding-inline, 1rem);
--_padding-block: var(--nyc-cmp-header-padding-block, 1rem);
background: var(--_background);
color: var(--_color);
display: flex;
padding: var(--_padding-block) var(--_padding-inline);
position: relative;
--nyc-cmp-header-padding-block: 0;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem
}
.header.header--secondary>.cmp-container nav a,
.header.header--secondary>.cmp-container nav button:not(.cmp-button):not(.button) {
color: inherit
}
@media (min-width:940.02px) {
.header.header--secondary>.cmp-container {
--nyc-cmp-header-padding-inline: calc(var(--nyc-sys-space-base)*2)
}
}
@media (min-width:1200.02px) {
.header.header--secondary>.cmp-container {
--nyc-cmp-header-padding-inline: calc(var(--nyc-sys-space-base)*4)
}
}
@media (min-width:940.02px) {
.header.header--secondary>.cmp-container {
--nyc-cmp-header-padding-block: 0;
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
z-index: 100
}
}
.header__title {
--nyc-sys-color-border-focus: var(--nyc-cmp-header-primary-on-header);
display: flex;
font-size: var(--nyc-sys-size-text-2xl);
font-weight: 600;
margin-right: var(--nyc-sys-space-fluid-lg-3xl)
}
.header__title>:first-child {
align-items: center;
display: flex
}
.header__title p {
margin: 0
}
.header__title a,
.header__title a:hover {
color: inherit;
font-size: inherit;
font-weight: inherit;
-webkit-text-decoration: none;
text-decoration: none
}
@media (max-width:940px) {
.header__title a,
.header__title a:hover {
display: flex;
font-size: 1rem;
gap: 10px;
margin-right: 0;
padding-bottom: .5rem;
padding-top: .5rem
}
.header__title a:before,
.header__title a:hover:before {
content: "";
display: inline-block;
height: 1.2rem;
width: 1.2rem;
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 120v96a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8v-52a4 4 0 0 0-4-4h-40a4 4 0 0 0-4 4v52a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-96a16 16 0 0 1 4.69-11.31l80-80a16 16 0 0 1 22.62 0l80 80A16 16 0 0 1 224 120'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%
}
}
.cmp-header--article>.cmp-container {
--nyc-cmp-header-background: var(--nyc-sys-color-surface-base);
--nyc-cmp-header-color: var(--nyc-sys-color-on-surface-base);
--nyc-cmp-header-padding-block: 0;
--nyc-cmp-header-padding-inline: 0;
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
box-shadow: var(--nyc-sys-shadow-base);
display: block;
position: relative
}
.cmp-header--article>.cmp-container:before {
background: var(--nyc-cmp-header-background);
content: "";
height: 100px;
left: 0;
pointer-events: none;
position: absolute;
top: -100px;
width: 100%;
z-index: -1
}
.article-hero {
margin-left: auto;
margin-right: auto;
max-width: 1086px;
padding-left: var(--nyc-cmp-center-gutter, 1rem);
padding-right: var(--nyc-cmp-center-gutter, 1rem);
width: 100%
}
.testo {
background-color: red
}
.card {
--_background: var(--nyc-cmp-card-background, #fff);
--_background-hover: var(--nyc-cmp-card-background-hover, #fff);
--_shadow: var(--nyc-cmp-card-shadow, none);
--_color: var(--nyc-cmp-card-color, inherit);
--_color-hover: var(--nyc-cmp-card-color-hover, inherit);
--_body-color: var(--nyc-cmp-card-body-color, inherit);
--_border-color: var(--nyc-cmp-card-border-color, #ededed);
--_border-color-hover: var(--nyc-cmp-card-border-color-hover, #ededed);
--_border-width: var(--nyc-cmp-card-border-width, 1px);
--_border-radius: var(--nyc-cmp-card-border-radius, 0.5rem);
--_border-radius-hover: var(--nyc-cmp-card-border-radius-hover, 0.5rem);
--_border: var(--nyc-cmp-card-border, var(--_border-width) solid var(--_border-color));
--_border-hover: var(--_border-width) solid var(--_border-color-hover);
--_body-font-size: var(--nyc-cmp-card-body-size, 1rem);
--_outline-color: var(--nyc-cmp-button-outline-color, inherit);
--_padding-inline: var(--nyc-cmp-card-padding-inline, 1rem);
--_padding-block: var(--nyc-cmp-card-padding-block, 1rem);
--_gap: var(--nyc-cmp-card-gap, 1rem);
background: transparent;
border-radius: var(--_border-radius);
color: var(--_color);
display: flex;
flex-direction: column;
gap: var(--_gap);
position: relative;
transition: all .3s ease
}
.card:hover {
border-radius: var(--_border-radius-hover);
color: var(--_color-hover)
}
.card:has(.card__primary-action:focus-visible) {
outline: 2px dashed var(--_outline-color);
outline-offset: .25rem
}
.card:hover {
cursor: pointer
}
.card__title {
--_heading-font-size: var(--nyc-cmp-card-heading-size, 1.125rem);
align-items: center;
color: inherit;
display: flex;
font-size: var(--_heading-font-size);
gap: .75rem;
hyphenate-limit-chars: 13 3 1;
hyphens: auto;
justify-content: space-between;
justify-self: center;
line-height: 1.25;
word-break: break-word;
-webkit-hyphenate-limit-before: 8;
-webkit-hyphenate-limit-after: 3;
font-family: var(--nyc-sys-font-family-heading);
font-weight: 500;
-ms-hyphenate-limit-chars: 8 3 1;
letter-spacing: .01em
}
.card__title,
.card__title:hover {
-webkit-text-decoration: none;
text-decoration: none
}
.card__title:after {
content: "";
--nyc-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath d='m184.49 136.49-80 80a12 12 0 0 1-17-17L159 128 87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E");
background-color: currentcolor;
color: inherit;
height: 1.5rem;
-webkit-mask: var(--nyc-icon) no-repeat;
mask: var(--nyc-icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
min-width: 1.5rem;
pointer-events: none;
width: 1.5rem
}
.card__body {
background-color: var(--_background);
border: var(--_border-width) solid var(--_border-color);
border-radius: var(--_border-radius);
box-shadow: var(--_shadow);
color: var(--_body-color);
display: flex;
flex-direction: column;
flex-grow: 1;
font-size: 1rem;
justify-content: center;
padding: var(--_padding-block) var(--_padding-inline);
transition: all .3s ease
}
@media (min-width:768px) {
.card__body {
font-size: var(--_body-font-size)
}
}
.card__body :--heading {
--_heading-font-size: var(--nyc-cmp-card-heading-size, 1.125rem);
align-items: center;
color: inherit;
display: flex;
font-size: var(--_heading-font-size);
gap: .75rem;
hyphenate-limit-chars: 13 3 1;
hyphens: auto;
justify-content: space-between;
justify-self: center;
line-height: 1.25;
-webkit-text-decoration: none;
text-decoration: none;
word-break: break-word;
-webkit-hyphenate-limit-before: 8;
-webkit-hyphenate-limit-after: 3;
font-family: var(--nyc-sys-font-family-heading);
font-weight: 500;
-ms-hyphenate-limit-chars: 8 3 1;
letter-spacing: .01em
}
.card__body :--heading:hover {
-webkit-text-decoration: none;
text-decoration: none
}
.card:hover .card__body {
background: var(--_background-hover);
border: var(--_border-hover);
border-radius: var(--_border-radius-hover)
}
.card__meta {
margin-bottom: .75rem;
order: -1
}
.card__meta time {
font-size: 1rem
}
.card__description {
--_padding-block: var(--nyc-sys-space-fluid-2xs-sm);
flex: 1;
max-width: 46.875rem;
padding-bottom: var(--_padding-block);
padding-top: var(--_padding-block)
}
.card__description p {
margin: 0
}
.card__media {
margin-bottom: calc(var(--_gap)*-1 - .5rem);
margin-top: 0;
order: -1
}
.card__media img {
border-radius: var(--_border-radius);
height: 100%;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
width: 100%
}
.card__primary-action,
.card__primary-action:link {
align-items: flex-start;
display: flex;
font-weight: inherit
}
.card__primary-action,
.card__primary-action:hover,
.card__primary-action:link,
.card__primary-action:link:hover {
color: currentcolor;
-webkit-text-decoration: none;
text-decoration: none
}
.card__primary-action:focus-visible,
.card__primary-action:link:focus-visible {
outline: none
}
.card__primary-action:before,
.card__primary-action:link:before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1
}
.card__primary-action:link>:first-child,
.card__primary-action>:first-child {
display: -webkit-box;
flex: 1;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden
}
.card__primary-action [class*=i-],
.card__primary-action:link [class*=i-] {
font-size: 1.5rem;
margin-left: .5rem
}
.card[data-variant=event],
nyc-event-card {
--_border-radius: var(--nyc-cmp-card-radius-lg);
max-width: var(--nyc-sys-size-width-surface-sm);
min-height: 16rem;
width: 100%
}
.card[data-variant=event]:hover,
nyc-event-card:hover {
--_border-radius: var(--nyc-cmp-card-radius-lg-hover)
}
.card[data-variant=event] .card__body,
nyc-event-card .card__body {
display: flex;
flex-flow: column
}
@media (min-width:768px) {
.card[data-variant=event],
nyc-event-card {
max-width: var(--nyc-cmp-card-width-lg);
min-height: 22.5rem
}
}
.card__event-details {
margin-top: auto;
padding-top: 1rem
}
.card[data-variant^=promo] {
--nyc-cmp-card-heading-size: var(--nyc-cmp-heading-h2-size);
--nyc-cmp-card-gap: var(--nyc-sys-space-fluid-xl-2xl);
--nyc-cmp-card-padding-inline: 0;
--nyc-cmp-card-padding-block: 0;
container: promo-card/inline-size;
display: flex;
flex-flow: row wrap;
max-width: none
}
.card[data-variant^=promo]>* {
flex-basis: calc(34965rem - 99900%);
flex-grow: 1
}
.card[data-variant^=promo]>:nth-child(2) {
flex-grow: 1.5
}
.card[data-variant^=promo]>:nth-last-child(n+3),
.card[data-variant^=promo]>:nth-last-child(n+3)~* {
flex-basis: 100%
}
@media (min-width:768px) {
.card[data-variant^=promo] {
margin-left: 0;
margin-right: 0
}
}
.card[data-variant^=promo] .card__body {
backdrop-filter: none;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
font-size: var(--nyc-sys-size-text-lg);
justify-content: center
}
@media (min-width:768px) {
.card[data-variant^=promo] .card__body {
font-size: var(--nyc-sys-size-text-xl)
}
}
.card[data-variant^=promo] .card__media {
align-items: stretch;
aspect-ratio: 1/1;
display: flex;
justify-content: flex-end;
margin-bottom: 0
}
@container promo-card (width > 35rem) {
.card[data-variant^=promo] .card__media {
aspect-ratio: 644/320;
order: 0
}
}
.card[data-variant^=promo] .card__media:has(figcaption) {
flex-direction: column
}
.card[data-variant^=promo] .card__media img {
border-radius: calc(var(--_border-radius)*.4);
border-radius: var(--nyc-sys-radius-fluid-xs-base);
overflow: hidden
}
.card[data-variant=promo-surface] {
--nyc-cmp-card-border-radius: var(--nyc-sys-radius-fluid-base-2xl);
--nyc-cmp-card-background: var(--nyc-sys-color-surface-base);
background-color: var(--_background);
box-shadow: var(--_shadow);
padding: var(--nyc-sys-space-fluid-lg-xl)
}
.card[data-variant=promo-surface]:hover {
border-radius: var(--_border-radius)
}
.card[data-variant=topic] {
--nyc-cmp-card-heading-size: var(--nyc-sys-size-body-fluid-xl)
}
.card[data-variant=event] {
--_background: var(--nyc-cmp-card-background, #fff);
--_background-hover: var(--nyc-cmp-card-background-hover, #fff);
--_shadow: var(--nyc-cmp-card-shadow, none);
--_color: var(--nyc-cmp-card-color, inherit);
--_color-hover: var(--nyc-cmp-card-color-hover, inherit);
--_body-color: var(--nyc-cmp-card-body-color, inherit);
--_border-color: var(--nyc-cmp-card-border-color, #ededed);
--_border-color-hover: var(--nyc-cmp-card-border-color-hover, #ededed);
--_border-width: var(--nyc-cmp-card-border-width, 1px);
--_border-radius: var(--nyc-cmp-card-border-radius, 0.5rem);
--_border-radius-hover: var(--nyc-cmp-card-border-radius-hover, 0.5rem);
--_border: var(--nyc-cmp-card-border, var(--_border-width) solid var(--_border-color));
--_border-hover: var(--_border-width) solid var(--_border-color-hover);
--_body-font-size: var(--nyc-cmp-card-body-size, 1rem);
--_outline-color: var(--nyc-cmp-button-outline-color, inherit);
--_padding-inline: var(--nyc-cmp-card-padding-inline, 1rem);
--_padding-block: var(--nyc-cmp-card-padding-block, 1rem);
--_gap: var(--nyc-cmp-card-gap, 1rem);
background: transparent;
border-radius: var(--_border-radius);
color: var(--_color);
display: flex;
flex-direction: column;
gap: var(--_gap);
position: relative;
transition: all .3s ease;
--_padding-inline: var(--nyc-ref-length-20, 1rem);
--_padding-block: var(--nyc-ref-length-20, 1rem);
--_margin-card-bottom: calc(var(--_padding-block)*1.5);
--_background: #fff;
--_image-placeholder: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTYuNSAwaC0xNUExLjUgMS41IDAgMCAwIDAgMS41djE1QTEuNSAxLjUgMCAwIDAgMS41IDE4aDE1YTEuNSAxLjUgMCAwIDAgMS41LTEuNXYtMTVBMS41IDEuNSAwIDAgMCAxNi41IDBtLTE1IDEuNWgxNXY3LjI1NEwxNC4xODUgNi40NGExLjUgMS41IDAgMCAwLTIuMTIgMEwyLjAwMyAxNi41SDEuNXptMyA0LjVhMS41IDEuNSAwIDEgMSAzIDAgMS41IDEuNSAwIDAgMS0zIDAiLz48L3N2Zz4=);
container: card-event/inline-size
}
.card.labelled[data-variant=event] .cmp-teaser__title a {
margin-right: var(--nyc-ref-length-10)
}
.card[data-variant=event] p {
margin-bottom: var(--nyc-ref-length-10, 10px)
}
.card[data-variant=event] p.has-icon {
display: flex;
gap: 5px;
margin-top: 0
}
.card[data-variant=event] p.has-icon svg {
fill: var(--_color);
min-width: 20px;
transform: translateY(10%)
}
.card[data-variant=event] p.has-icon svg+span {
width: calc(100% - 28px)
}
.card[data-variant=event] .cmp-teaser__content {
border: none;
box-shadow: var(--_shadow);
gap: 10px;
justify-content: space-between;
overflow: hidden;
padding-bottom: var(--_margin-card-bottom)
}
.card[data-variant=event] .cmp-teaser__desc {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between
}
.card[data-variant=event] .cmp-teaser__title {
align-items: flex-start;
margin-bottom: 15px;
margin-top: 10px;
width: 100%
}
.card[data-variant=event] .cmp-teaser__title:after {
transform: translateY(calc(var(--nyc-cmp-card-heading-size, 1.125rem)*.14))
}
.card[data-variant=event] .cmp-teaser__title a {
color: var(--_color);
display: inline-block;
font-weight: 500;
outline: none !important;
-webkit-text-decoration: none;
text-decoration: none
}
.card[data-variant=event] .cmp-teaser__title a:focus-visible {
-webkit-text-decoration: underline;
text-decoration: underline
}
.card[data-variant=event] .cmp-teaser__title a:before {
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0
}
.card[data-variant=event] .cmp-teaser__image {
margin-bottom: 0;
margin-left: calc(var(--_padding-inline)*-1);
margin-right: calc(var(--_padding-inline)*-1);
margin-top: calc(var(--_padding-block)*-1)
}
.card[data-variant=event] .cmp-teaser__image img {
height: 150px;
overflow: hidden;
position: relative
}
.card[data-variant=event] .cmp-teaser__image img:after,
.card[data-variant=event] .cmp-teaser__image img:before {
background: #fff;
background-repeat: no-repeat;
bottom: 0;
content: "";
display: block;
height: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100%
}
.card[data-variant=event] .cmp-teaser__image img:before {
background-image: var(--_image-placeholder);
background-position: 50%;
background-size: 10%
}
.card[data-variant=event] .cmp-teaser__image img:after {
background: var(--bg-gradient--btt);
opacity: .75
}
.card[data-variant=event] .cmp-teaser__aux {
margin-top: var(--_margin-card-bottom)
}
@container card-event (width >=40em) {
.card.has-image--right[data-variant=event] .cmp-teaser__content,
.card.has-image[data-variant=event] .cmp-teaser__content {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: flex-start
}
.card.has-image[data-variant=event] .cmp-teaser__content>* {
grid-column: 2/2;
grid-row-start: span 1
}
.card.has-image--right[data-variant=event] .cmp-teaser__content>* {
grid-column: 1/1;
grid-row-start: span 1
}
.card.has-image--right[data-variant=event] .cmp-teaser__image,
.card.has-image[data-variant=event] .cmp-teaser__image {
grid-row-start: span 8;
margin-bottom: calc(var(--_margin-card-bottom)*-1);
width: 100%
}
.card.has-image[data-variant=event] .cmp-teaser__image {
grid-column: 1/1;
margin-right: auto
}
.card.has-image--right[data-variant=event] .cmp-teaser__image {
grid-column: 2/2;
margin-left: auto
}
}
.card[data-variant=event]:focus-within .cmp-teaser__content,
.card[data-variant=event]:hover .cmp-teaser__content {
border-radius: var(--nyc-cmp-card-padding-block, 16px);
outline-color: var(--nyc-sys-color-border-focus, inherit);
outline-width: 3px
}
.card[data-variant=event]:hover .cmp-teaser__content {
outline-style: solid
}
.card[data-variant=event]:focus-within .cmp-teaser__content {
outline-offset: .25rem;
outline-style: dashed
}
.cmp-language-navigation__modal {
background: #000;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
visibility: hidden;
width: 100%;
z-index: 800
}
.cmp-language-navigation__modal[aria-hidden=false] {
opacity: 1;
pointer-events: auto;
visibility: visible
}
.header .cmp-navigation a,
.header .cmp-navigation button {
--nyc-sys-color-border-focus: var(--nyc-cmp-header-primary-on-header);
color: inherit;
padding: .5rem;
-webkit-text-decoration: none;
text-decoration: none
}
.header .cmp-navigation a:hover,
.header .cmp-navigation button:hover {
color: currentcolor
}
@media (min-width:940.02px) {
.header .cmp-navigation a,
.header .cmp-navigation button {
border-radius: 8px
}
}
.header .cmp-navigation ul {
list-style-type: none
}
.header .cmp-navigation>ul {
align-items: center;
display: flex;
gap: .5rem;
height: 100%;
justify-content: flex-start;
padding-left: 0
}
.header .cmp-navigation>ul>li {
box-sizing: border-box;
display: flex;
height: 100%;
padding-bottom: .5rem;
padding-top: .5rem
}
.header .cmp-navigation>ul>li>a {
display: flex;
font-size: var(--nyc-sys-size-text-xl);
font-weight: 500;
line-height: 2rem;
padding: .5rem 1rem;
position: relative;
white-space: nowrap
}
@media (max-width:1200px) {
.header .cmp-navigation>ul>li>a {
font-size: var(--nyc-sys-size-text-lg);
padding-left: .5rem;
padding-right: .5rem
}
}
.header .cmp-navigation>ul>li>a:after {
background: transparent;
bottom: -8px;
content: "";
height: 10px;
left: 0;
position: absolute;
width: 100%
}
.header .cmp-navigation>ul>li>a:hover {
background: hsla(0, 0%, 100%, .15);
-webkit-text-decoration: none;
text-decoration: none
}
.header .cmp-navigation>ul>li>a:hover:after {
background: var(--_color);
height: 10px !important
}
.header .cmp-navigation>ul>li>a:focus-visible {
background: hsla(0, 0%, 100%, .15)
}
.header .cmp-navigation>ul>li:has(a[aria-expanded=true]) a:after {
background: var(--_color);
height: 10px
}
.header .cmp-navigation>ul>li.cmp-navigation__item--active a:after {
background: var(--_color);
height: 4px
}
.header .cmp-navigation>ul>li:has(a[aria-expanded=true])>ul {
opacity: 1;
pointer-events: auto;
z-index: 900
}
.header .cmp-navigation ul>li>ul {
display: flex;
flex-flow: column wrap;
gap: 24px;
height: 60vh;
left: 0;
opacity: 0;
padding: 60px 40% 60px var(--nyc-cmp-header-padding-inline);
pointer-events: none;
position: absolute;
transition: opacity .3s ease, top .3s ease;
width: 100%;
z-index: 800
}
.header .cmp-navigation ul>li>ul[hidden]>li {
display: none
}
@media (min-width:940.02px) {
.header .cmp-navigation ul>li>ul>li {
font-size: 28px;
line-height: 1.2;
max-width: 290px
}
}
.header .cmp-navigation ul>li>ul a {
font-weight: 500
}
@media (min-width:940.02px) {
.header .cmp-navigation ul>li>ul a {
font-weight: 400
}
}
.header .cmp-navigation ul>li>ul a:focus-visible,
.header .cmp-navigation ul>li>ul a:hover {
-webkit-text-decoration: underline;
text-decoration: underline
}
@media (min-width:940.02px) {
.header .cmp-navigation ul>li>ul {
min-height: 500px
}
.header .cmp-navigation ul>li>ul:after {
background: rgba(0, 0, 0, .9);
background: var(--nyc-cmp-header-background);
content: "";
display: none;
height: 100%;
left: 50%;
opacity: .9;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 100vw;
z-index: -1
}
}
.header .cmp-navigation .nyc-navigation__close-button {
display: none;
font-size: var(--nyc-sys-size-text-xl);
font-weight: 600;
position: absolute;
right: var(--nyc-cmp-header-padding-inline);
-webkit-text-decoration: none;
text-decoration: none;
z-index: 999
}
.header .cmp-navigation .nyc-navigation__close-button i {
margin-top: .1rem
}
.header .cmp-navigation .nyc-navigation__close-button>span {
align-items: center;
display: flex;
gap: .25rem
}
@media (min-width:940.02px) {
.header .cmp-navigation .nyc-navigation__close-button {
padding-left: 1.125rem;
padding-right: 1.125rem
}
.header .cmp-navigation .nyc-navigation__close-button>span {
gap: .5rem
}
}
@media (max-width:940px) {
.header .cmp-navigation .nyc-navigation__close-button {
font-size: inherit;
order: -1;
padding-bottom: 0;
padding-top: 1rem;
position: relative;
right: auto;
-webkit-text-decoration: underline;
text-decoration: underline;
top: 0
}
}
.header .cmp-navigation .nyc-navigation__back-button {
display: none;
opacity: 0;
order: -1;
-webkit-text-decoration: none;
text-decoration: none;
transition: opacity .3s ease
}
.header .cmp-navigation[data-expanded]>ul>li>ul:not([hidden])+.nyc-navigation__close-button {
display: flex
}
@media (min-width:940.02px) {
.header .cmp-navigation[data-expanded]>ul>li>ul:not([hidden])+.nyc-navigation__close-button {
display: flex
}
.header .cmp-navigation[data-expanded]>ul>li>ul:after {
display: block
}
}
@media (max-width:940px) {
.header .cmp-navigation>ul {
align-items: flex-start;
flex-direction: column;
gap: 0;
justify-content: flex-start;
left: 0;
top: 0;
width: 100%;
z-index: 999
}
.header .cmp-navigation>ul>li {
border-bottom: 1px solid #fff;
display: none;
flex-direction: column;
height: auto;
padding: 0;
position: relative;
width: 100%
}
.header .cmp-navigation>ul>li>a {
font-size: var(--nyc-sys-size-text-sm);
padding-bottom: 1rem;
padding-left: var(--nyc-sys-space-xs);
padding-right: var(--nyc-sys-space-xs);
padding-top: 1rem;
transition: none;
width: 100%
}
.header .cmp-navigation>ul>li>a:after {
display: none
}
.header .cmp-navigation>ul>li>ul {
border: 0;
clip: rect(0 0 0 0);
flex-wrap: nowrap;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 1rem 0;
position: absolute;
top: 0;
width: 1px
}
.header .cmp-navigation>ul>li:has(ul)>a:not([aria-expanded]):focus-visible,
.header .cmp-navigation>ul>li:has(ul)>a[aria-expanded=true] {
background: none;
font-size: var(--nyc-sys-size-text-lg)
}
.header .cmp-navigation>ul>li:has(ul)>a:not([aria-expanded]):focus-visible+ul,
.header .cmp-navigation>ul>li:has(ul)>a[aria-expanded=true]+ul {
opacity: 1;
clip: auto;
background: transparent;
display: flex;
flex-direction: column;
gap: 0;
height: auto;
margin: 0;
overflow: visible;
padding-bottom: 0;
padding-top: 0;
position: relative;
width: 100%;
z-index: 900
}
.header .cmp-navigation>ul>a {
padding-left: 0;
padding-right: 0
}
}
.header .cmp-navigation .cmp-navigation__item--last>a {
font-weight: 800
}
@media (min-width:940.02px) {
.header .cmp-navigation .cmp-navigation__item--mobile {
display: none
}
}
.navigation--primary {
display: flex
}
.navigation--primary .with-secondary-nav-heading {
display: none
}
.cmp-navigation#primary-navigation {
--_background: var(--nyc-cmp-navigation-primary-background, #000);
--_color: var(--nyc-cmp-navigation-primary-color, #fff);
--_padding-inline: var(--nyc-cmp-navigation-primary-padding-inline, 0);
--_padding-block: var(--nyc-cmp-navigation-primary-padding-block, 0);
color: var(--_color);
padding: var(--_padding-block) var(--_padding-inline)
}
#primary-navigation.cmp-navigation>ul {
z-index: 900
}
#primary-navigation.cmp-navigation>ul>li {
height: calc(100% + 1.5px)
}
#primary-navigation.cmp-navigation>ul>li>ul {
top: calc(100% + 1.5px)
}
@media (min-width:940.02px) {
#primary-navigation.cmp-navigation .nyc-navigation__close-button {
top: calc(100% + 55px)
}
#primary-navigation.cmp-navigation .nyc-navigation__close-button+ul[hidden] {
display: none
}
}
@media (max-width:940px) {
#primary-navigation.cmp-navigation>ul>li:has(ul)>a:not([aria-expanded]):focus-visible,
#primary-navigation.cmp-navigation>ul>li:has(ul)>a[aria-expanded=true] {
border-radius: 0;
outline: none;
padding-bottom: 1rem;
padding-top: 1rem;
z-index: 800
}
#primary-navigation.cmp-navigation>ul>li:has(ul)>a:not([aria-expanded]):focus-visible+ul,
#primary-navigation.cmp-navigation>ul>li:has(ul)>a[aria-expanded=true]+ul {
top: 0
}
}
.cmp-navigation--secondary>.cmp-container {
display: flex
}
.cmp-breadcrumb .cmp-breadcrumb__list {
display: flex;
padding: 0
}
.cmp-breadcrumb .cmp-breadcrumb__list .cmp-breadcrumb__item {
align-items: center;
display: flex
}
.cmp-breadcrumb .cmp-breadcrumb__list .cmp-breadcrumb__item:before {
color: var(--nyc-sys-color-link);
content: " ";
display: inline-block;
height: 17px;
margin: 0 var(--nyc-ref-length-8) 0 0;
width: 17px;
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M168.49 199.51a12 12 0 0 1-17 17l-80-80a12 12 0 0 1 0-17l80-80a12 12 0 0 1 17 17L97 128Z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%
}
.cmp-button,
.cmp-button:link,
.cmp-button:visited,
.cmp-form-button {
--_background: var(--nyc-cmp-button-background, #fff);
--_background-hover: var(--nyc-cmp-button-background-hover, #fff);
--_border-color: var(--nyc-cmp-button-border-color, #ededed);
--_border-color-hover: var(--nyc-cmp-button-border-color-hover, currentColor);
--_border-width: var(--nyc-cmp-button-border-width, 2px);
--_border-radius: var(--nyc-cmp-button-border-radius, 0);
--_color: var(--nyc-cmp-button-color, #000);
--_color-hover: var(--nyc-cmp-button-color-hover, #000);
--_font-weight: var(--nyc-cmp-button-font-weight, 600);
--_font-size: var(--nyc-cmp-button-font-size, 1rem);
--_shadow: var(--nyc-cmp-button-shadow, none);
--_padding-block: var(--nyc-cmp-button-padding-block, 0.75rem);
--_padding-inline: var(--nyc-cmp-button-padding-inline, 0.75rem);
--_outline-color: var(--nyc-cmp-button-outline-color, inherit);
--_gap: var(--nyc-cmp-button-gap, 0.5rem);
--_size-icon: var(--_font-size);
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--_background);
border-color: var(--_border-color);
border-radius: var(--_border-radius);
border-style: solid;
border-width: var(--_border-width);
box-shadow: var(--_shadow);
color: var(--_color);
cursor: pointer;
display: inline-flex;
font-size: var(--_font-size);
font-weight: var(--_font-weight);
gap: calc(var(--_gap)*.8);
justify-content: center;
line-height: 1.2;
padding: var(--_padding-block) var(--_padding-inline);
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
transition: all .3s ease
}
.cmp-button:hover,
.cmp-button:link:hover,
.cmp-button:visited:hover,
.cmp-form-button:hover {
background: var(--_background-hover);
border-color: var(--_border-color-hover);
color: var(--_color-hover);
-webkit-text-decoration: none;
text-decoration: none
}
.cmp-button:focus-visible,
.cmp-button:link:focus-visible,
.cmp-button:visited:focus-visible,
.cmp-form-button:focus-visible {
border-radius: var(--_border-radius);
outline: 2px dashed var(--_outline-color);
outline-offset: .25rem
}
.cmp-button.disabled,
.cmp-button.disabled:link,
.cmp-button.disabled:visited,
.cmp-button:disabled,
.cmp-button:link:disabled,
.cmp-button:visited:disabled,
.cmp-button[disabled],
.cmp-button[disabled]:link,
.cmp-button[disabled]:visited,
.cmp-form-button.disabled,
.cmp-form-button:disabled,
.cmp-form-button[disabled] {
--nyc-cmp-button-color: var(--nyc-sys-color-on-disabled) !important;
--nyc-cmp-button-background: var(--nyc-sys-color-disabled) !important;
--nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled) !important
}
.cmp-button *,
.cmp-button:link *,
.cmp-button:visited *,
.cmp-form-button * {
pointer-events: none
}
.cmp-button.active,
.cmp-button.active:link,
.cmp-button.active:visited,
.cmp-form-button.active {
background: var(--_color-hover);
color: #fff
}
.cmp-button.size--xs,
.cmp-button.size--xs:link,
.cmp-button.size--xs:visited,
.cmp-form-button.size--xs {
--_font-size: calc(var(--nyc-cmp-button-font-size, 1rem)*0.68);
--_padding-block: calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.58);
--_padding-inline: calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.4)
}
.cmp-button.size--s,
.cmp-button.size--s:link,
.cmp-button.size--s:visited,
.cmp-form-button.size--s {
--_font-size: calc(var(--nyc-cmp-button-font-size, 1rem)*0.84);
--_padding-block: calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.66);
--_padding-inline: calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.54)
}
.cmp-button.size--nm,
.cmp-button.size--nm:link,
.cmp-button.size--nm:visited,
.cmp-form-button.size--nm {
--_font-size: calc(var(--nyc-cmp-button-font-size, 1rem)*0.92);
--_padding-block: calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.8);
--_padding-inline: calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.62)
}
.cmp-button .rim-color--blue,
.cmp-button.rim-color--blue,
.cmp-button.rim-color--blue:link,
.cmp-button.rim-color--blue:visited,
.cmp-button:link .rim-color--blue,
.cmp-button:visited .rim-color--blue,
.cmp-form-button .rim-color--blue,
.cmp-form-button.rim-color--blue {
--_border-color: var(--nyc-sys-color-primary)
}
.cmp-button .rim-color--blue:hover,
.cmp-button.rim-color--blue:hover,
.cmp-button.rim-color--blue:link:hover,
.cmp-button.rim-color--blue:visited:hover,
.cmp-button:link .rim-color--blue:hover,
.cmp-button:visited .rim-color--blue:hover,
.cmp-form-button .rim-color--blue:hover,
.cmp-form-button.rim-color--blue:hover {
--_border-color-hover: var(--nyc-sys-color-primary)
}
.cmp-button .shape--square,
.cmp-button.shape--square,
.cmp-button.shape--square:link,
.cmp-button.shape--square:visited,
.cmp-button:link .shape--square,
.cmp-button:visited .shape--square,
.cmp-form-button .shape--square,
.cmp-form-button.shape--square {
border-radius: 0
}
.cmp-button .shape--rounded,
.cmp-button.shape--rounded,
.cmp-button.shape--rounded:link,
.cmp-button.shape--rounded:visited,
.cmp-button:link .shape--rounded,
.cmp-button:visited .shape--rounded,
.cmp-form-button .shape--rounded,
.cmp-form-button.shape--rounded {
border-radius: calc(var(--_border-radius)*.15)
}
.cmp-button .shape--circle,
.cmp-button.shape--circle,
.cmp-button.shape--circle:link,
.cmp-button.shape--circle:visited,
.cmp-button:link .shape--circle,
.cmp-button:visited .shape--circle,
.cmp-form-button .shape--circle,
.cmp-form-button.shape--circle {
border-radius: 50%
}
.cmp-button .shape--circle,
.cmp-button .shape--square,
.cmp-button.shape--circle,
.cmp-button.shape--circle:link,
.cmp-button.shape--circle:visited,
.cmp-button.shape--square,
.cmp-button.shape--square:link,
.cmp-button.shape--square:visited,
.cmp-button:link .shape--circle,
.cmp-button:link .shape--square,
.cmp-button:visited .shape--circle,
.cmp-button:visited .shape--square,
.cmp-form-button .shape--circle,
.cmp-form-button .shape--square,
.cmp-form-button.shape--circle,
.cmp-form-button.shape--square {
height: calc(var(--_padding-block)*2 + var(--_font-size)*1.15);
width: calc(var(--_padding-block)*2 + var(--_font-size)*1.15)
}
.cmp-button.has-count,
.cmp-button.has-count:link,
.cmp-button.has-count:visited,
.cmp-form-button.has-count {
--nyc-cmp-button-background: var(--nyc-ref-color-blue-90) !important;
--nyc-cmp-button-color: var(--nyc-sys-color-primary) !important;
--nyc-cmp-button-border-color: var(--nyc-sys-color-primary) !important
}
.cmp-button .icon,
.cmp-button:link .icon,
.cmp-button:visited .icon,
.cmp-form-button .icon {
align-items: center;
display: flex;
font-size: calc(var(--_size-icon)*.75);
font-style: normal;
font-weight: 300;
height: var(--_size-icon);
justify-content: center;
pointer-events: none;
position: relative;
text-align: center;
width: var(--_size-icon);
z-index: 20
}
.cmp-button .icon svg,
.cmp-button:link .icon svg,
.cmp-button:visited .icon svg,
.cmp-form-button .icon svg {
fill: var(--nyc-cmp-button-color)
}
.cmp-button .icon.i--count,
.cmp-button:link .icon.i--count,
.cmp-button:visited .icon.i--count,
.cmp-form-button .icon.i--count {
background-color: var(--nyc-cmp-button-color);
color: #fff;
font-weight: 600;
height: 22px;
line-height: 0;
width: 22px
}
.cmp-button--primary .cmp-button,
.cmp-button--primary.cmp-button,
.cmp-form-button[type=SUBMIT] {
--nyc-cmp-button-shadow: none;
--nyc-cmp-button-background: var(--nyc-sys-color-primary);
--nyc-cmp-button-background-hover: var(--nyc-sys-color-primary-hover);
--nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
--nyc-cmp-button-color-hover: var(--nyc-cmp-button-color);
--nyc-cmp-button-border-color: var(--nyc-sys-color-primary);
--nyc-cmp-button-border-color-hover: var(--nyc-sys-color-primary-hover)
}
.cmp-button--secondary .cmp-button,
.cmp-button--secondary.cmp-button,
.cmp-form-button[type=RESET] {
--nyc-cmp-button-shadow: none;
--nyc-cmp-button-background: var(--nyc-sys-color-secondary);
--nyc-cmp-button-color: var(--nyc-sys-color-on-secondary);
--nyc-cmp-button-color-hover: var(--nyc-sys-color-on-secondary-hover);
--nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
--nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base)
}
.cmp-button--secondary--black .cmp-button,
.cmp-button--secondary--black.cmp-button {
--nyc-cmp-button-color: var(--nyc-sys-color-text-base);
--nyc-cmp-button-color-hover: var(--nyc-sys-color-on-secondary-hover);
--nyc-cmp-button-border-color: var(--nyc-sys-color-text-base);
--nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base)
}
.cmp-button--filter {
--nyc-cmp-button-border-radius: 0.25rem;
--nyc-cmp-button-font-size: var(--nyc-sys-size-text-sm);
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-sm);
--nyc-cmp-button-padding-block: var(--nyc-sys-space-sm);
--nyc-cmp-button-border-color: var(--nyc-sys-color-border-medium);
--nyc-cmp-button-background-hover: var(--nyc-sys-color-surface-low);
--nyc-cmp-button-font-weight: 700;
line-height: 1.5
}
.cmp-button--filter[data-selected] {
--nyc-cmp-button-background: var(--nyc-sys-color-surface-input-highlight);
--nyc-cmp-button-border-color: var(--nyc-sys-color-border-selected);
--nyc-cmp-button-color: var(--nyc-sys-color-primary)
}
@media (min-width:768px) {
.cmp-button--filter {
--nyc-cmp-button-border-radius: 0.5rem;
--nyc-cmp-button-font-size: var(--nyc-sys-size-text-base);
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-base)
}
}
.cmp-button--icon .cmp-button,
.cmp-button--icon.cmp-button {
--nyc-cmp-button-shadow: none;
--nyc-cmp-button-background: var(--nyc-sys-color-primary);
--nyc-cmp-button-padding-inline: var(--nyc-cmp-button-padding-block);
--nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
--nyc-cmp-button-color-hover: var(--nyc-sys-color-on-primary-hover);
--nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
--nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base)
}
.cmp-button--sm .cmp-button,
.cmp-button--sm.cmp-button {
--nyc-cmp-button-border-radius: var(--nyc-sys-radius-lg);
--nyc-cmp-button-padding-block: var(--nyc-sys-space-2xs);
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-2xs);
--nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
--nyc-cmp-button-font-weight: 600
}
.cmp-button.format--link {
--nyc-cmp-button-color: var(--nyc-sys-color-primary);
--nyc-cmp-button-background: transparent;
--_padding-inline: 5px;
border: none;
-webkit-text-decoration: underline;
text-decoration: underline
}
.cmp-button.format--link:hover {
--nyc-cmp-button-color: var(--nyc-sys-color-link-hover)
}
.cmp-button.format--link.has-icon {
--_padding-block: 0.75rem;
--_padding-inline: 0.75rem
}
.flex-col:has(.button) .button {
display: flex
}
.flex-col:has(.button) .cmp-button {
flex: 1
}
@media (max-width:767.98px) {
.cmp-button--full-width .cmp-button:first-child,
.cmp-button--full-width.cmp-button:first-child {
width: 100%
}
}
.nyc-back-to-top {
display: contents
}
nyc-back-to-top {
display: block;
margin: var(--nyc-sys-space-3xl) var(--nyc-sys-space-fluid-base-5xl) var(--nyc-sys-space-5xl);
transition: opacity .3s ease
}
@media (min-width:768px) {
nyc-back-to-top {
bottom: var(--nyc-sys-space-5xl);
display: inline-block;
left: var(--nyc-sys-space-fluid-base-5xl);
margin: initial;
position: sticky;
z-index: 150
}
nyc-back-to-top.enabled {
opacity: 1;
pointer-events: all;
visibility: visible
}
nyc-back-to-top:not(.enabled) {
opacity: 0;
pointer-events: none;
visibility: hidden
}
}
.button--back-to-top .cmp-button {
--nyc-cmp-button-shadow: none;
--nyc-cmp-button-background: var(--nyc-sys-color-secondary);
--nyc-cmp-button-color: var(--nyc-sys-color-on-secondary);
--nyc-cmp-button-color-hover: var(--nyc-sys-color-on-secondary-hover);
--nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
--nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
--nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
--nyc-cmp-button-border-width: 2px;
--nyc-cmp-button-gap: 0;
--nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
--nyc-cmp-button-font-weight: 600;
--nyc-cmp-button-padding-block: var(--nyc-sys-space-sm);
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-sm);
width: 100%
}
@media (min-width:768px) {
.button--back-to-top .cmp-button {
--nyc-cmp-button-border-width: 3px;
--nyc-cmp-button-font-size: var(--nyc-sys-space-base);
--nyc-cmp-button-padding-block: var(--nyc-sys-space-base);
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-base);
width: auto
}
}
.button--back-to-top .cmp-button:before {
--icon-size: calc(1em - var(--nyc-cmp-button-border-width)*2);
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath stroke='currentColor' d='M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");
background-color: currentcolor;
content: "";
display: inline-block;
font-size: var(--nyc-sys-space-lg);
height: var(--icon-size);
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: var(--icon-size)
}
@media (min-width:768px) {
.button--back-to-top .cmp-button:before {
font-size: var(--nyc-sys-space-2xl)
}
}
.button--back-to-top .cmp-button span {
--space-btwn: var(--nyc-sys-space-base);
line-height: 1.1;
opacity: 1;
padding-left: var(--space-btwn);
text-align: left;
transition: padding .3s ease, max-width .3s ease, opacity .3s ease .3s
}
@media (min-width:768px) {
.button--back-to-top .cmp-button span {
max-height: 2.2em;
max-width: calc(3.5em + var(--space-btwn));
overflow: hidden;
padding-left: var(--space-btwn)
}
}
.button--back-to-top .cmp-button:hover {
border-color: var(--nyc-sys-color-primary);
color: var(--nyc-sys-color-primary)
}
.button--back-to-top .cmp-button:not(:hover) span {
transition: padding .3s ease .2s, max-width .3s ease .2s, opacity .3s ease
}
@media (min-width:768px) {
.button--back-to-top .cmp-button:not(:hover) span {
max-width: 0;
opacity: 0;
padding-left: 0;
visibility: hidden
}
}
.page:has(.nyc-modal[open]:not([data-variant=global-survey])) {
overflow: hidden
}
.nyc-modal {
background: transparent;
border: none;
display: flex;
margin: auto;
max-height: 75vh;
max-width: 720px;
opacity: 0;
overflow: hidden;
padding: 0 var(--nyc-sys-space-base);
transition: opacity .3s ease-in-out;
visibility: hidden;
width: 100%
}
.nyc-modal::backdrop {
background-color: #000;
opacity: .65;
transition: opacity .3s ease-in
}
.nyc-modal:has(.modal__footer) .modal__body {
padding-bottom: 0
}
@media (max-width:939.98px) {
.nyc-modal {
border-radius: 0;
height: 100%;
margin: 0;
max-height: none;
max-width: none;
padding: 0
}
}
.nyc-modal[data-size=lg] {
max-width: 940px
}
.nyc-modal[data-size=xl] {
max-width: 1200px
}
.nyc-modal[open] {
opacity: 1;
visibility: visible
}
.nyc-modal .modal__pane {
--_background: var(--nyc-cmp-modal-background, #fff);
--_border-radius: var(--nyc-cmp-modal-border-radius, 1.5rem);
background: var(--_background);
border: none;
border-radius: var(--_border-radius);
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%
}
@media (max-width:939.98px) {
.nyc-modal .modal__pane {
border-radius: 0;
height: 100%
}
}
.nyc-modal .modal__header {
--_padding-inline: var(--nyc-cmp-modal-header-padding-horizontal, 1.5rem);
--_padding-block: var(--nyc-cmp-modal-header-padding-vertical, 1rem);
border-bottom: 2px solid var(--nyc-sys-color-border-base);
display: flex;
padding: var(--_padding-block) var(--_padding-inline)
}
.nyc-modal .modal__header .modal__header-content {
align-items: center;
display: flex;
flex: 1;
flex-direction: row-reverse;
justify-content: space-between
}
.nyc-modal .modal__header button {
color: inherit;
font-size: var(--nyc-sys-size-text-fluid-base-xl);
-webkit-text-decoration: none;
text-decoration: none
}
.nyc-modal .modal__header button i,
.nyc-modal .modal__header button span {
pointer-events: none
}
@media (max-width:939.98px) {
.nyc-modal .modal__header {
background: #000;
color: #fff
}
}
.nyc-modal .modal__body {
--_padding-inline: var(--nyc-cmp-modal-body-padding-horizontal, 2rem);
--_padding-block: var(--nyc-cmp-modal-body-padding-vertical, 2rem);
flex: 1;
margin-left: auto;
margin-right: auto;
max-width: 1440px;
overflow-y: auto;
padding: var(--_padding-block) var(--_padding-inline);
width: 100%
}
.nyc-modal .modal__footer {
display: flex;
gap: var(--nyc-sys-space-lg);
justify-content: flex-end;
padding: var(--nyc-sys-space-fluid-base-lg) var(--nyc-cmp-modal-body-padding-horizontal) var(--nyc-cmp-modal-body-padding-vertical)
}
.nyc-modal .modal__footer:not(:has(*)) {
display: none
}
@media (max-width:939.98px) {
.nyc-modal .modal__footer {
flex-direction: column-reverse;
gap: var(--nyc-sys-space-base)
}
}
.nyc-modal[data-variant=global-header] {
--nyc-cmp-modal-background: #000;
--nyc-cmp-modal-body-padding-horizontal: var(--nyc-cmp-header-padding-inline);
--nyc-cmp-modal-header-padding-horizontal: var(--nyc-cmp-header-padding-inline);
--nyc-cmp-modal-header-padding-vertical: 0;
--nyc-cmp-modal-border-radius: 0;
border: 0;
color: #fff;
height: 100%;
margin: 0;
max-height: none;
max-width: none;
padding: 0;
width: 100%
}
.nyc-modal[data-variant=global-header] :focus-visible {
--nyc-sys-color-border-focus: var(--nyc-sys-color-border-focus-high)
}
.nyc-modal[data-variant=global-header] .modal__header {
border-bottom: 2px solid var(--nyc-sys-color-border-medium-high);
height: 54px
}
.nyc-modal[data-variant=global-header] .modal__header .modal__header-content {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: 1440px
}
.nyc-modal[data-variant=global-header] .modal__header h2 {
grid-column: 2
}
.nyc-modal[data-variant=global-header] .modal__header button {
grid-column: 3;
justify-self: end
}
@media (min-width:940.02px) {
.nyc-modal[data-variant=global-header] .modal__header {
height: 63px
}
}
.nyc-modal[data-variant=global-header] .modal__body {
padding: var(--nyc-sys-space-fluid-base-5xl) var(--nyc-cmp-header-padding-inline)
}
.nyc-modal[data-variant=citywide-status] {
--nyc-cmp-modal-body-padding-horizontal: var(--nyc-sys-space-fluid-base-lg);
--nyc-cmp-modal-body-padding-vertical: var(--nyc-sys-space-fluid-base-lg)
}
.nyc-modal.nyc-modal--legacy {
align-items: center;
bottom: 0;
flex-direction: column;
justify-content: center;
left: 0;
margin: auto;
max-height: 79vh;
position: fixed;
right: 0;
top: 0;
z-index: 9000
}
@media (max-width:939.98px) {
.nyc-modal.nyc-modal--legacy {
max-height: none
}
}
.nyc-modal.nyc-modal--legacy:before {
background-color: #000;
content: "";
display: block;
height: 100%;
left: 0;
margin: 0;
opacity: .65;
padding: 0;
position: fixed;
top: 0;
transition: opacity var(--modal-transition-behavior);
width: 100%;
z-index: -1
}
.nyc-modal.nyc-modal--legacy[aria-hidden=true] {
display: none;
opacity: 0;
pointer-events: none
}
.nyc-modal.nyc-modal--legacy[aria-hidden=true]:before {
opacity: 0
}
.nyc-modal.nyc-modal--legacy[aria-hidden=false] {
display: flex;
opacity: 1;
pointer-events: auto;
visibility: visible;
visibility: initial
}
.nyc-modal[data-variant=global-survey] {
margin: 0;
position: absolute;
z-index: 99999
}
.nyc-modal[data-variant=global-survey] .modal__pane {
backdrop-filter: blur(10px);
background: hsla(0, 0%, 100%, .93);
border: 2px solid var(--nyc-sys-color-border-medium-low);
border-bottom: none;
border-radius: 0;
border-top-left-radius: 24px;
bottom: 0;
max-width: 560px;
position: fixed;
right: 0
}
@media (max-width:939.98px) {
.nyc-modal[data-variant=global-survey] .modal__pane {
border-top-right-radius: 24px;
height: auto
}
}
.nyc-modal[data-variant=global-survey] .modal__pane[data-sent=true] .modal__footer {
display: none
}
.nyc-modal[data-variant=global-survey] .modal__footer {
flex-direction: row;
justify-content: space-between
}
.nyc-modal[data-variant=global-survey] .modal__body {
padding: 24px 24px 0
}
@media (max-width:939.98px) {
.nyc-modal[data-variant=global-survey] .modal__body {
padding: 16px 16px 0
}
}
.nyc-modal[data-variant=global-survey] .modal__footer {
padding: 24px
}
@media (max-width:939.98px) {
.nyc-modal[data-variant=global-survey] .modal__footer {
padding: 12px 16px 16px
}
}
.nyc-modal[data-variant=global-survey]::backdrop {
display: none
}
@media (max-width:939.98px) {
.nyc-modal[data-variant=global-survey] {
height: auto
}
}
.cmp-experiencefragment--footer {
margin-top: var(--nyc-sys-space-6xl)
}
@media (min-width:940.02px) {
.cmp-experiencefragment--footer {
margin-top: var(--nyc-sys-space-8xl)
}
}
.footer {
--_background: var(--nyc-cmp-footer-background);
--_color: var(--nyc-cmp-footer-color);
background: var(--_background, #000);
color: var(--_color)
}
.footer>.cmp-container {
display: grid;
grid-template-columns: 1fr;
padding: var(--nyc-sys-space-2xl) var(--nyc-sys-space-fluid-base-5xl);
grid-gap: var(--nyc-sys-space-base);
box-sizing: content-box;
gap: var(--nyc-sys-space-base);
justify-content: space-between;
margin-left: auto;
margin-right: auto;
max-width: 1440px
}
.footer>.cmp-container :--heading {
font-family: var(--nyc-sys-font-family-body);
font-size: var(--nyc-sys-size-text-xl);
font-weight: 600
}
.footer>.cmp-container a {
--nyc-sys-color-border-focus: var(--nyc-cmp-footer-color);
color: inherit;
font-weight: 700;
-webkit-text-decoration: none;
text-decoration: none
}
.footer>.cmp-container a:hover {
color: inherit
}
.footer>.cmp-container ul {
list-style-type: none;
padding: 0
}
.footer>.cmp-container .cmp-navigation ul,
.footer>.cmp-container .navigation ul {
border-top: 1px solid var(--nyc-cmp-footer-color);
display: grid;
padding-bottom: var(--nyc-sys-space-base);
padding-top: var(--nyc-sys-space-base)
}
.footer>.cmp-container .cmp-navigation ul a,
.footer>.cmp-container .navigation ul a {
padding-bottom: .5rem;
padding-top: .5rem
}
@media (min-width:940.02px) {
.footer>.cmp-container {
grid-template-columns: repeat(4, minmax(auto, 320px))
}
.footer>.cmp-container .cmp-navigation ul,
.footer>.cmp-container .navigation ul {
border: none;
padding: 0
}
.footer>.cmp-container .cmp-title__text {
font-size: var(--nyc-sys-size-text-2xl);
padding-bottom: .5rem;
padding-top: .5rem
}
}
.footer--primary .container:has(.cmp-navigation) {
display: contents
}
.footer--primary .container:has(.cmp-navigation) .list,
.footer--primary .container:has(.cmp-navigation)>.cmp-container {
display: contents
}
.footer--primary .text:has(time) {
border-top: 1px solid var(--nyc-cmp-footer-color);
max-width: none;
padding-top: var(--nyc-sys-space-fluid-base-lg)
}
.footer--primary .text:has(time) p {
margin: 0;
max-width: none
}
@media (min-width:940.02px) {
.footer--primary {
grid-template-rows: auto auto
}
.footer--primary .text:has(time) {
grid-column: span 4;
grid-row: 2
}
}
.footer--secondary .cmp-socialmedia {
border-top: 1px solid var(--nyc-cmp-footer-color);
display: grid;
padding-top: var(--nyc-sys-space-lg);
grid-gap: var(--nyc-sys-space-lg);
gap: var(--nyc-sys-space-lg)
}
@media (min-width:940.02px) {
.footer--secondary .cmp-socialmedia {
border: none;
padding: 0
}
}
.cmp-socialmedia__list-items {
display: flex;
flex-wrap: wrap;
gap: 1rem
}
:root {
--color-primary--font: var(--nyc-ref-color-gray-10, #000);
--color-primary--dark: var(--nyc-ref-color-gray-10, #000);
--color-primary--light: var(--nyc-ref-color-gray-100, #fff);
--color-primary--blue: var(--nyc-ref-color-blue-40, #103fef);
--color-primary--blue-faded: var(--nyc-ref-color-blue-90, #d5e8fd);
--color-secondary--orange: var(--nyc-ref-color-orange-40, #f68d29);
--color-secondary--gray: var(--nyc-ref-color-gray-70, #cecece);
--color-secondary--darkgray: var(--nyc-ref-color-gray-30, #333);
--color-secondary--lightgray: var(--nyc-ref-color-gray-90, #eee);
--color-secondary--midgray: #9f9f9f;
--color-secondary--offwhite: #fafafa;
--c: 1;
--n: 2;
--t: 5;
--s: 10;
--loop: infinite;
--tween--ei: ease-in;
--tween--eo: ease-out;
--tween--ln: linear;
--percent--max: 100%;
--percent--three-quarter: 75%;
--percent--two-third: 66.66%;
--percent--half: 50%;
--percent--third: 33.33%;
--percent--quarter: 25%;
--size--1n: calc(1px*var(--n));
--size--2n: calc(2px*var(--n));
--size--3n: calc(3px*var(--n));
--size--4n: calc(4px*var(--n));
--size--5n: calc(5px*var(--n));
--size--6n: calc(6px*var(--n));
--size--7n: calc(7px*var(--n));
--size--8n: calc(8px*var(--n));
--size--9n: calc(9px*var(--n));
--size--10n: calc(10px*var(--n));
--size--1t: calc(1px*var(--t));
--size--2t: calc(2px*var(--t));
--size--3t: calc(3px*var(--t));
--size--4t: calc(4px*var(--t));
--size--5t: calc(5px*var(--t));
--size--6t: calc(6px*var(--t));
--size--7t: calc(7px*var(--t));
--size--8t: calc(8px*var(--t));
--size--9t: calc(9px*var(--t));
--size--10t: calc(10px*var(--t));
--size--1s: calc(1px*var(--s));
--size--2s: calc(2px*var(--s));
--size--3s: calc(3px*var(--s));
--size--4s: calc(4px*var(--s));
--size--5s: calc(5px*var(--s));
--size--6s: calc(6px*var(--s));
--size--7s: calc(7px*var(--s));
--size--8s: calc(8px*var(--s));
--size--9s: calc(9px*var(--s));
--size--10s: calc(10px*var(--s));
--height-button--min: calc(var(--size--4s) + var(--size--2n));
--width-button--min: var(--height-button--min);
--width-content--min: var(--nyc-sys-size-width-page-min, 20rem);
--width-content--max: var(--nyc-sys-size-width-page-max, 64rem);
--font-size: clamp(16px, 19px);
--font-weight: 400;
--bg-gradient--btt: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
--pad: calc(var(--size--1s)*1.2);
--pad--2s: var(--size--2s);
--pad--3s: var(--size--3s);
--mar: calc(var(--size--1s)*1.2);
--mar--2s: var(--size--2s);
--mar--3s: var(--size--3s);
--mar--4s: var(--size--4s);
--mar--5s: var(--size--5s);
--corner--1n: var(--size--1n);
--corner--2n: var(--size--2n);
--corner--3n: var(--size--3n);
--corner--4n: var(--size--4n);
--corner--5n: var(--size--5n);
--corner--1t: var(--size--1t);
--corner--2t: var(--size--2t);
--corner--3t: var(--size--3t);
--corner--4t: var(--size--4t);
--corner--5t: var(--size--5t);
--corner--1s: var(--size--1s);
--corner--2s: var(--size--2s);
--corner--3s: var(--size--3s);
--corner--4s: var(--size--4s);
--corner--5s: var(--size--5s);
--timing--1n: calc(1s*var(--n));
--timing--2n: calc(2s*var(--n));
--timing--3n: calc(3s*var(--n));
--timing--4n: calc(4s*var(--n));
--timing--5n: calc(5s*var(--n));
--loader-bg-gradient: linear-gradient(135deg, var(--color-secondary--offwhite), var(--color-secondary--gray), var(--color-secondary--offwhite));
--loader-bg-gradient--2: linear-gradient(135deg, var(--color-secondary--offwhite), var(--color-secondary--gray));
--loader-bg-size--100s: calc(var(--size--1s)*100);
--loader-bg-size--150s: calc(var(--size--1s)*150);
--loader-bg-size--200s: calc(var(--size--1s)*200)
}
@keyframes flashing {
50% {
opacity: var(--percent--third)
}
}
@keyframes streak {
0% {
background-position: calc(var(--size--5s)*-20)
}
to {
background-position: calc(var(--size--5s)*20)
}
}
.loader-text {
margin-bottom: var(--mar)
}
.loader-button,
.loader-image {
margin-bottom: var(--mar--2s)
}
.loader-text {
--effect: var(--timing--2n) var(--tween--ln) var(--loop);
animation: flashing var(--effect), streak var(--effect);
background: linear-gradient(135deg, var(--color-secondary--offwhite), var(--color-secondary--gray), var(--color-secondary--offwhite));
background-size: calc(var(--size--1s)*100);
height: var(--size--2s);
width: var(--percent--max)
}
.loader-text.loader-text--tqr {
width: var(--percent--three-quarter)
}
.loader-text.loader-text--tth {
width: var(--percent--two-third)
}
.loader-text.loader-text--hf {
width: var(--percent--half)
}
.loader-text.loader-text--th {
width: var(--percent--third)
}
.loader-text.loader-text--qr {
width: var(--percent--quarter)
}
.loader-text.loader-text--xlg {
height: var(--size--5s)
}
.loader-text.loader-text--lg {
height: var(--size--4s)
}
.loader-text.loader-text--md {
height: var(--size--3s)
}
.loader-text.loader-text--s {
height: calc(var(--size--1s)*1.5)
}
.loader-text.loader-text--t {
height: var(--size--1s)
}
.loader-image {
--effect: var(--timing--1n) var(--tween--ln) var(--loop);
animation: flashing var(--effect);
background: linear-gradient(135deg, var(--color-secondary--offwhite), var(--color-secondary--gray));
border-radius: calc(var(--corner--1s) + var(--corner--1t));
height: 100%;
max-height: calc(var(--size--5s)*6);
max-width: calc(var(--size--5s)*12);
min-height: calc(var(--size--5s)*4.4);
width: var(--percent--max)
}
.loader-image.loader-image--max {
max-height: var(--percent--max);
max-width: var(--percent--max)
}
.loader-button {
--effect: var(--timing--2n) var(--tween--ln) var(--loop);
animation: flashing var(--effect), streak var(--effect);
background: linear-gradient(135deg, var(--color-secondary--offwhite), var(--color-secondary--gray), var(--color-secondary--offwhite));
background-size: calc(var(--size--1s)*100);
max-width: calc(var(--size--5s)*4);
min-height: calc(var(--size-1t)*4);
padding: var(--size--1s) calc(var(--size--1s) - var(--size--1n));
width: var(--percent--max)
}
.loader-button.loader-button--pill {
border-radius: var(--corner--5s)
}
.loader-button.loader-button--rounded {
border-radius: var(--corner--2n)
}
.loader-button.loader-button--xlg {
max-width: calc(var(--size--10s)*4);
min-height: var(--size--5s)
}
.loader-button.loader-button--lg {
max-width: calc(var(--size--10s)*3);
min-height: var(--size--4s)
}
.loader-button.loader-button--md {
max-width: calc(var(--size--10s)*2);
min-height: var(--size--3s)
}
.loader-button.loader-button--s {
max-width: calc(var(--size--10s)*1);
min-height: var(--size--3s)
}
.loader-button.loader-button--t {
max-width: calc(var(--size--10t)*1);
min-height: var(--size--3s)
}
.pane {
--citywide-padding-pane: 15px;
background-color: #fff;
border-radius: var(--size--4t);
container: pane/inline-size;
font-size: 1em;
height: 100%;
padding: var(--nyc-sys-space-fluid-base-lg)
}
.pane--header h3 span {
display: block
}
.pane--header h3 {
display: block;
font-size: var(--nyc-sys-size-text-fluid-lg-2xl)
}
.pane--header {
align-items: center;
display: flex;
flex-direction: row-reverse;
gap: var(--size--2t);
justify-content: space-between
}
.pane--body {
margin-top: var(--nyc-sys-space-lg);
min-height: 220px
}
.pane--holiday-message {
background-color: #eee;
border-radius: 8px;
margin-top: var(--nyc-sys-space-lg);
padding: 15px
}
.pane--modal-content {
--pane-modal_gap: 32px;
--pane-modal_width--block-1: calc(max(48%, 400px) - var(--pane-modal_gap));
--pane-modal_width--block-2: calc(100% - var(--pane-modal_width--block-1) - var(--pane-modal_gap));
align-items: center;
container: pane--modal-content/inline-size;
display: flex;
flex-wrap: wrap;
gap: var(--pane-modal_gap);
justify-content: space-between;
padding: 0;
width: 100%
}
.pane--modal-block {
flex-basis: calc(54945rem - 99900%);
flex-grow: 1;
height: 100%
}
.pane--modal-block .status--feed {
padding: 10px 5px
}
.pane--modal-block>.field-group {
border: none;
padding-top: 0
}
@container pane (width <=400px) {
.pane--header {
flex-direction: column-reverse
}
.pane--header>* {
width: 100%
}
}
@container pane--modal-content (width <=768px) {
.pane--modal-content .pane--modal-block {
height: auto;
width: 100%
}
}
@media screen and (max-width:768px) {
.pane--modal-content .pane--modal-block {
height: auto;
width: 100%
}
}
@media screen and (max-width:480px) {
.pane--header {
flex-direction: column-reverse
}
.pane--header>* {
width: 100%
}
.pane--modal-content {
display: block;
height: auto;
padding-bottom: 60px
}
.modal-pane:has(.modal-body .status--feed) .modal-header h3 {
clip: rect(0, 0, 0, 0);
border: 0;
height: 0;
opacity: 0;
outline: none;
overflow: hidden;
padding: 0;
position: absolute;
text-indent: -9999px;
white-space: nowrap;
width: 0;
z-index: -1
}
}
.status--feeds {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
position: relative
}
.status--feed {
border-top: 2px solid var(--nyc-sys-color-border-base);
container: status--feed/inline-size;
outline: none
}
.status--feed:focus,
.status--feed:focus-visible {
box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--color-primary--blue) !important
}
.status--feeds small,
.status--feeds span,
.status--feeds svg {
min-width: 24px;
pointer-events: none
}
.status--feed h4 {
align-items: flex-start;
display: flex;
font-family: var(--nyc-sys-font-family-body);
font-size: var(--nyc-sys-size-text-fluid-base-lg);
font-weight: 700;
gap: var(--size--5n);
margin-bottom: 0;
max-width: 280px;
text-align: left
}
.status--feed h4 svg {
min-width: 24px;
transform: translateY(-2px)
}
.status--feed h4>*,
.status--feed-header small {
z-index: 2
}
.status--feed p:last-child {
margin-bottom: var(--size--3t)
}
.status--feed p {
margin-bottom: var(--size--2t);
padding: 0 var(--size--1t) 0 var(--size--2t)
}
.status--feed:last-child {
border-bottom: none
}
.status--feed-body>div:first-child>div:first-child,
.status--feed-header,
.status--feed-header button {
align-items: center;
display: flex;
flex-wrap: wrap;
font-weight: 700;
gap: var(--size--4n);
justify-content: space-between;
padding: var(--size--3t) var(--size--4n);
position: relative
}
.status--feed-header>button {
display: none
}
.status--feed-header a:before,
.status--feed-header button:before {
background-color: var(--nyc-sys-color-element-hover);
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
.status--feed-header a {
color: inherit;
outline: none
}
.status--feed-header button {
align-items: flex-start;
border: none;
cursor: pointer;
flex-wrap: nowrap;
font-weight: 600;
justify-content: flex-start;
padding: 0;
position: static;
text-align: left;
-webkit-text-decoration: none;
text-decoration: none;
width: 100%
}
.status--feed-header a:focus:before,
.status--feed-header a:hover:before,
.status--feed-header button:focus:before,
.status--feed-header button:hover:before {
border-radius: 4px;
opacity: 1
}
.status--feed-header a:focus:before,
.status--feed-header button:focus:before {
box-shadow: 0 0 0 2px var(--color-primary--blue)
}
.status--feed.collapsible h4 {
color: var(--color-primary--blue);
font-size: var(--nyc-sys-size-text-base);
font-weight: 600;
-webkit-text-decoration: underline;
text-decoration: underline
}
@media screen and (max-width:480px) {
.status--feed.collapsible h4 {
font-size: var(--nyc-sys-size-text-sm)
}
}
.status--feed.collapsible .status--feed-body {
display: none;
flex-direction: column;
gap: var(--size--2t);
height: 100%;
justify-content: space-between;
outline: none
}
.status--feed.collapsible .status--feed-body a {
-webkit-text-decoration: none;
text-decoration: none
}
.status--feed.collapsible .status--feed-body p {
margin-bottom: var(--size--1s)
}
.status--feed.collapsible .status--feed-body p:last-child {
margin-bottom: var(--size--3s)
}
.status--feed.collapsible .status--feed-body>div:first-child {
height: calc(100% - 60px);
overflow: auto
}
.status--feed.collapsible .status--feed-body>div:last-child {
align-items: center;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
margin-bottom: 0
}
.status--feed.collapsible .status--feed-body>div:last-child a,
.status--feed.collapsible .status--feed-body>div:last-child button {
font-weight: 600;
margin: var(--size--3n) var(--size--1n)
}
.status--feed.collapsible .status--feed-body>div:last-child button {
background-color: transparent;
font-size: var(--nyc-sys-size-text-sm);
-webkit-text-decoration: underline;
text-decoration: underline
}
.status--feed.collapsible .status--feed-body>div:last-child a {
font-size: var(--nyc-sys-size-text-base)
}
.status--feed.collapsible.active {
background-color: var(--color-primary--light);
border: none;
border-radius: var(--size--2t);
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nyc-sys-color-border-base);
display: flex;
flex-direction: column;
height: 100%
}
.status--feed.collapsible.active h4 {
color: var(--color-primary--dark);
font-size: var(--nyc-sys-size-text-fluid-base-lg);
font-weight: 700;
-webkit-text-decoration: none;
text-decoration: none
}
.status--feed.collapsible.active .status--feed-header {
background-color: var(--nyc-sys-color-surface-low);
border-top-left-radius: var(--size--2t);
border-top-right-radius: var(--size--2t);
box-shadow: 0 0 0 2px var(--nyc-sys-color-surface-low)
}
.status--feed.collapsible.active .status--feed-header button[data-action=close] {
align-items: center
}
.status--feed.collapsible.active .status--feed-header button {
display: inline-flex;
font-size: 16px;
-webkit-text-decoration: underline;
text-decoration: underline
}
.status--feed.collapsible.active .status--feed-header h4,
.status--feed.collapsible.active .status--feed-header small {
display: none
}
.status--feed.collapsible.active .status--feed-body {
display: flex;
padding-top: var(--size--1t)
}
.status--feed.collapsible.hidden {
display: none
}
@container status--feed (width <=410px) {
.status--feed h4 {
width: 100%
}
.status--feed small {
margin-left: var(--size--6t)
}
}
.modal {
--modal-transition-behavior: .3s ease-in;
--modal-size: var(--width-content--max, 1140px);
--modal-size--tiny: calc(var(--modal-size)*0.46);
--modal-size--small: calc(var(--modal-size)*0.6);
--modal-size--large: calc(var(--modal-size)*0.72);
--modal-size--max: calc(100% - 20px);
--modal-size--header: max(1.225em, min(2.5vw, 1.5em));
--modal-size--body-pad: max(12px, min(3.4vw, 20px));
backdrop-filter: blur(12px);
box-sizing: border-box;
font-family: inherit;
height: 100vh;
position: fixed;
transition: backdrop-filter var(--modal-transition-behavior);
width: 100vw;
z-index: 9000
}
.modal,
.modal:before {
left: 0;
margin: 0;
padding: 0;
top: 0
}
.modal:before {
background-color: #000;
content: "";
display: block;
height: 100%;
opacity: .65;
position: absolute;
transition: opacity var(--modal-transition-behavior);
width: 100%
}
.modal h3 {
font-size: var(--modal-size--header);
max-width: calc(100% - 100px)
}
.modal button {
box-shadow: none;
outline: none
}
.modal[aria-hidden=true] {
display: none;
opacity: 0;
pointer-events: none
}
.modal[aria-hidden=true]:before {
opacity: 0
}
.modal-pane {
background-color: #fff;
border-radius: 24px;
display: flex;
flex-direction: column;
height: calc(100% - 20px);
justify-content: space-between;
left: 0;
margin: auto;
max-height: 690px;
max-width: 758px;
overflow: hidden;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: calc(100% - 20px)
}
.modal-pane--large-fluid,
.modal-pane--large-wide-fluid,
.modal-pane--small-fluid,
.modal-pane--small-wide-fluid,
.modal-pane--tiny-fluid,
.modal-pane--tiny-wide-fluid {
height: auto;
width: calc(100% - 20px)
}
.modal-pane--max {
max-height: var(--modal-size--max);
max-width: var(--modal-size--max)
}
.modal-pane--tiny {
max-height: var(--modal-size--tiny);
max-width: calc(var(--modal-size--tiny)*.8)
}
.modal-pane--tiny-wide {
max-height: calc(var(--modal-size--tiny)*.65);
max-width: var(--modal-size--tiny)
}
.modal-pane--small {
max-height: var(--modal-size--small);
max-width: calc(var(--modal-size--small)*.8)
}
.modal-pane--small-wide {
max-height: calc(var(--modal-size--small)*.6);
max-width: var(--modal-size--small)
}
.modal-pane--large {
max-height: var(--modal-size--large);
max-width: calc(var(--modal-size--large)*.8)
}
.modal-pane--large-wide {
max-height: calc(var(--modal-size)*.54);
max-width: var(--modal-size)
}
.modal-pane--tiny-fluid {
max-width: calc(var(--modal-size--tiny)*.8)
}
.modal-pane--tiny-wide-fluid {
max-width: var(--modal-size--tiny)
}
.modal-pane--small-fluid {
max-width: calc(var(--modal-size--small)*.8)
}
.modal-pane--small-wide-fluid {
max-width: var(--modal-size--small)
}
.modal-pane--large-fluid {
max-width: calc(var(--modal-size--large)*.8)
}
.modal-pane--large-wide-fluid {
max-width: var(--modal-size)
}
.modal-body,
.modal-header {
box-sizing: border-box;
padding: 15px var(--modal-size--body-pad)
}
.modal-body {
padding-bottom: 0;
padding-top: 0
}
.modal-header {
align-items: center;
background-color: #fff;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
height: 65px;
justify-content: space-between;
width: 100%
}
.modal-body {
height: calc(100% - 65px);
overflow-y: auto
}
.modal-ctrl--loopback {
transform: translate(12.5%, 75%) !important
}
.modal-ctrl--close.button {
font-weight: 600;
vertical-align: text-bottom
}
.modal-ctrl--close.button .i-cross:after,
.modal-ctrl--close.button .i-cross:before {
height: 1.5px
}
.cmp-button.format--link.modal-ctrl--close {
--nyc-cmp-button-color: var(--nyc-sys-color-text-base);
--_background: trapsparent;
-webkit-text-decoration: none;
text-decoration: none
}
.cmp-button.format--link.modal-ctrl--close:focus,
.cmp-button.format--link.modal-ctrl--close:hover {
-webkit-text-decoration: underline;
text-decoration: underline
}
.cmp-button.format--link.modal-ctrl--close:focus,
.cmp-button.format--link.modal-ctrl--close:focus-visible {
outline: 2px dashed var(--_outline-color);
outline-offset: .25rem
}
@media screen and (max-width:828px) {
.modal-pane--large-wide {
max-height: var(--modal-size);
max-width: calc(var(--modal-size)*.44)
}
}
@media screen and (max-width:600px) {
.modal-pane--small-wide {
max-height: var(--modal-size--small);
max-width: calc(var(--modal-size--small)*.6)
}
}
@media screen and (max-width:480px) {
.modal {
height: 100dvh
}
.modal-pane {
border-radius: 0 !important;
height: 100% !important;
max-height: 100% !important;
max-width: 100% !important;
width: 100% !important
}
.modal-header {
background-color: var(--color-primary--dark)
}
.modal-header h3 {
color: #fff;
opacity: 0
}
.cmp-button.format--link.modal-ctrl--close {
--nyc-cmp-button-color: var(--nyc-sys-color-text-base-inverse)
}
.cmp-button.format--link.modal-ctrl--close:focus-visible {
--_outline-color: #fff
}
.format--link.modal-ctrl--close.button:focus,
.format--link.modal-ctrl--close.button:hover {
--_outline-color: #fff;
box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--_outline-color)
}
}
@media screen and (max-width:400px) {
.modal-title {
border: 0;
height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 0;
clip: rect(0, 0, 0, 0);
outline: none;
text-indent: -9999px;
white-space: nowrap;
z-index: -1
}
}
@media screen and (max-width:350px) {
.modal-body {
padding-left: 2px;
padding-right: 2px
}
.modal-header {
padding-left: 7px;
padding-right: 7px
}
}
.calendar-widget .abbre {
display: block
}
.calendar-widget .initial {
display: none
}
.calendar-widget.mode--datepicker {
bottom: 0;
box-shadow: 0 4px 8px 2.5px rgba(0, 0, 0, .1);
position: absolute;
transform: translateY(100%);
z-index: 9999
}
.calendar-widget {
--calendar_box-shadow-focus: 0 0 0 2.5px #fff, 0 0 0 5px var(--color-primary--blue);
--calendar_box-shadow: 0 0 0 2.5px var(--color-primary--blue);
word-wrap: break-word;
background-color: #fff;
border: none;
box-sizing: border-box;
color: #666;
container: calendar-widget/inline-size;
font-family: inherit;
font-size: 17px;
font-weight: 400;
line-height: 1.4;
margin: 0 auto;
min-width: 320px;
padding: 15px 7px 25px;
right: 0;
width: 100%;
will-change: transform
}
.calendar-widget table {
margin-bottom: 10px
}
.calendar-widget table,
.calendar-widget table tbody,
.calendar-widget table thead,
.calendar-widget table tr {
border-collapse: collapse;
box-sizing: border-box;
text-align: center;
width: 100%
}
.calendar-widget table tr {
border-bottom: 2px solid #fff
}
.calendar-widget table thead tr {
background-color: #f3f3f3
}
.calendar-widget table thead th {
background-color: transparent;
color: #666;
text-align: inherit
}
.calendar-widget table td,
.calendar-widget table th {
border: none;
box-sizing: border-box;
padding: 6px 4px;
position: relative
}
.calendar-widget table th {
padding: 4px
}
.calendar-widget table td div {
margin: 0 auto
}
.calendar-widget .divider {
background-color: #eee;
border: none;
height: 1px;
margin: 10px 0 15px
}
.calendar-widget__overlay {
background-color: #222;
height: 100vh;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 100vw;
will-change: opacity;
z-index: 9000
}
.calendar-widget__overlay.active {
opacity: .9;
pointer-events: auto
}
@container calendar-widget (width <=480px) {
.calendar-widget .abbre {
display: none
}
.calendar-widget .initial {
display: block
}
}
@media only screen and (max-width:800px) {
.calendar-widget.mode--datepicker {
bottom: 50vh;
left: 0;
padding-left: 25px;
padding-right: 25px;
position: fixed;
right: 0;
transform: translateY(50%);
width: 95vw
}
.calendar-widget.mode--calendar {
bottom: auto;
left: auto;
position: relative;
top: auto;
transform: none;
width: 100%
}
}
@media only screen and (max-width:480px) {
.calendar-widget {
padding-left: 10px;
padding-right: 10px
}
.calendar-widget table td,
.calendar-widget table th {
box-sizing: border-box;
max-height: none;
max-height: 44px;
max-width: none;
max-width: 44px;
min-height: auto;
min-width: auto;
position: relative
}
.calendar-widget table thead {
font-size: .92em
}
}
@media only screen and (max-width:375px) {
.calendar-widget {
min-width: auto;
padding-left: 8px;
padding-right: 8px;
width: 97vw
}
}
.calendar-widget .flex {
align-items: center;
display: flex
}
.calendar-widget .flex-dir__row {
flex-direction: row
}
.calendar-widget .flex-dir__row-reverse {
flex-direction: row-reverse
}
.calendar-widget .flex-alignI__center {
align-items: center
}
.calendar-widget .flex-justify__between {
justify-content: space-between
}
.calendar-widget .flex-justify__end {
justify-content: flex-end
}
.calendar-widget .flex-justify__start {
justify-content: flex-start
}
.calendar-widget .gap-1 {
gap: var(--size--1t, 5px)
}
.calendar-widget .gap-2 {
gap: var(--size--2t, 10px)
}
.calendar-widget .gap-3 {
gap: var(--size--3t, 15px)
}
.calendar-widget .gap-4 {
gap: var(--size--4t, 20px)
}
.calendar-widget .gap-5 {
gap: var(--size--5t, 25px)
}
.calendar-widget .width_percent1 {
width: 10%
}
.calendar-widget .width_percent2 {
width: 20%
}
.calendar-widget .width_percent3 {
width: 30%
}
.calendar-widget .width_percent4 {
width: 40%
}
.calendar-widget .width_percent5 {
width: 50%
}
.calendar-widget .width_percent6 {
width: 60%
}
.calendar-widget .width_percent7 {
width: 70%
}
.calendar-widget .width_percent8 {
width: 80%
}
.calendar-widget .width_percent9 {
width: 90%
}
.calendar-widget .width_percent10 {
width: 100%
}
.cmp-button.cal-trigger {
background-color: #000;
bottom: -1px;
margin: 0;
padding: 0;
position: absolute;
right: -1px;
z-index: 99
}
.cmp-button.cal-trigger i {
background-color: #fff;
transform: scale(1.1)
}
.calendar-widget .cal-button {
--_border-color: transparent
}
.calendar-widget .field-lightbulb {
--_color-bg: transparent
}
.calendar-widget .field-select:first-child {
margin-left: 0
}
.calendar-widget .field-select {
--_color-rim: transparent;
--_color-bg: transparent;
--_size-font: max(12px, calc(var(--_size)*0.5*17px));
display: inline-block;
height: 44px;
margin-bottom: 0;
margin-left: 2px
}
.calendar-widget .field-select select {
background-color: #fff
}
.calendar-widget .field-select:after {
border-bottom-width: 1px !important;
border-right-width: 1px !important;
bottom: 36% !important
}
.calendar-widget .field-lightbulb.shape--circle input:disabled+label,
.calendar-widget .field-lightbulb.shape--circle input[disabled]+label {
--_color-bg: transparent !important
}
.in-range,
.in-range--end,
.in-range--start {
background-color: var(--color-primary--blue-faded) !important
}
.in-range--end,
.in-range--start {
z-index: 2
}
.in-range--start,
.in-range:first-child {
border-bottom-left-radius: 50px;
border-top-left-radius: 50px
}
.in-range--end,
.in-range:last-child {
border-bottom-right-radius: 50px;
border-top-right-radius: 50px
}
.in-range .cal-date input:focus+label,
.in-range .cal-date input:focus-within+label,
.in-range .cal-date input:hover+label {
box-shadow: var(--calendar_box-shadow-focus)
}
.calendar-widget .field-lightbulb input:checked+label {
--_color-bg: var(--nyc-sys-color-primary-hover, #050560)
}
.calendar-widget .field-lightbulb:focus-within input:checked+label,
.calendar-widget .field-lightbulb:focus-within label,
.calendar-widget .field-lightbulb:hover input:checked+label,
.calendar-widget .field-lightbulb:hover label {
box-shadow: var(--_size-rim) #fff, var(--_size-rim-expand) var(--nyc-sys-color-primary-hover, #050560)
}
.calendar-widget .field-lightbulb.cal-date--today:not(:hover):not(:focus-within):not(:has(input:checked, input:focus-visible)) label {
box-shadow: var(--_size-rim) #fff, var(--_size-rim-expand) #000
}
.calendar-widget .field-lightbulb label span {
word-break: normal
}
@media screen and (max-width:480px) {
.calendar-widget .cmp-button.size--nm {
--_padding-block: calc(var(--nyc-cmp-button-padding-block, 0.75rem)*1.4)
}
.calendar-widget .field-lightbulb {
--_size-height-multiplier: max(0.20833vw, .725px);
--_size-height: calc(var(--_size-height-multiplier)*22*var(--_size))
}
}
.calendar-widget.mode--calendar {
padding: 0
}
.calendar-widget.mode--calendar hr {
margin: 5px 0;
opacity: 0
}
.calendar-widget.mode--calendar .button.cal-submit {
margin: 0 auto 20px;
max-width: var(--btn_size-width);
width: 100%
}
.pane--body .status--feed:last-child {
display: none
}
.pane--header {
flex-direction: row-reverse !important
}
.pane--header .cmp-button--primary {
--_btn-size: max(44px, calc(var(--_font-size)*2.25));
height: var(--_btn-size);
padding-left: min(calc((var(--_btn-size) - var(--_size-icon))/2), var(--_padding-inline));
padding-right: min(calc((var(--_btn-size) - var(--_size-icon))/2), var(--_padding-inline));
width: var(--_btn-size)
}
.pane--header .cmp-button--primary span {
height: 0;
left: 0;
position: absolute;
text-indent: -9999px;
top: 0;
width: 0
}
.field-search input,
.field-text input {
line-height: 1
}
.pane--modal-block label {
font-weight: var(--nyc-sys-font-weight, 500)
}
.calendar-widget {
color: #222
}
header {
display: contents
}
header .container {
margin: inherit;
padding: inherit;
width: auto
}
header .container:before {
content: none
}
header .cmp-accordion__title {
font-size: 1rem
}
@media(max-width:940px) {
header .cmp-accordion__title {
font-size: .875rem
}
}
header #global-header-container[data-opened] .text.header__title a {
color: #fff
}
header .i-ph\:x-bold {
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128 47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z'/%3E%3C/svg%3E");
background-color: currentcolor;
content: "";
display: inline-block;
height: 1em;
margin-top: .1rem;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 1em
}
header .header--secondary.header--311 {
--nyc-cmp-header-background: #fff200
}
header .header--secondary.header--311 .cmp-container {
--_color: #000
}
@media(max-width:940px) {
header .header--secondary.header--311 .cmp-container {
--_color: #fff
}
}
header .header--secondary.header--311 .cmp-container .cmp-navigation__item-link {
--nyc-sys-color-border-focus: #000;
height: 52px
}
@media(max-width:940px) {
header .header--secondary.header--311 .cmp-container .cmp-navigation__item-link {
height: auto
}
}
header .header--secondary.header--311 .text {
display: none
}
header .header--secondary.header--311 .text a {
color: #000
}
header .header--secondary.header--311 .text a:before {
background-color: #000
}
@media(max-width:940px) {
header .header--secondary.header--311 .text {
display: block
}
header .header--secondary.header--311 .image {
display: none
}
}
header .header--secondary.header--311 .image figure {
height: 68px
}
header .image figure {
margin: 0
}
header .image figure img {
flex-shrink: 0
}
header .cmp-language-navigation__modal--translation-type:first-child {
display: none
}
header .cmp-language-navigation .loader {
border-radius: 4px;
margin-bottom: 20px
}
header .cmp-language-navigation input {
color: #000
}
.cmp-accordion__header,
header h4,
header ul {
margin: 0
}
.cmp-accordion__button {
display: block;
text-align: left;
width: 100%
}
.cmp-accordion__panel--hidden {
display: none
}
.cmp-accordion__panel--expanded {
display: block
}
html:has(#global-header-container[data-opened]) {
overflow: hidden
}
footer .container {
margin: inherit;
padding: inherit;
width: auto
}
footer .container:before {
content: none
}
footer .footer.footer--secondary {
background-color: #fff200;
color: #000
}
footer .footer.footer--secondary h4 {
font-family: var(--nyc-sys-font-family-body);
font-size: var(--nyc-sys-size-text-2xl);
font-weight: 600;
margin: 0
}
@media(max-width:940px) {
footer .footer.footer--secondary h4 {
font-size: var(--nyc-sys-size-text-xl)
}
}
footer .footer.footer--secondary .image {
margin: 0
}
@media(max-width:940px) {
footer .footer.footer--secondary .image {
margin: 0 auto
}
}
footer .footer.footer--secondary .image figure {
margin: 0;
max-width: 65px
}
footer .footer.footer--secondary .cmp-navigation__group,
footer .footer.footer--secondary .cmp-socialmedia {
border-color: #000
}
footer .footer.footer--secondary .cmp-socialmedia a img {
filter: brightness(0)
}
footer .footer.footer--secondary a:focus-visible {
--nyc-sys-color-border-focus: #000
}
@font-face {
font-display: swap;
font-family: Noto Sans;
font-weight: 400;
src: url(NotoSans-Regular263433c1d83c24bc729f.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Noto Sans;
font-weight: 500;
src: url(NotoSans-Medium811d1116d885275fb920.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Noto Sans;
font-weight: 600;
src: url(NotoSans-SemiBolde5f1b6333c53efb727aa.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Noto Sans;
font-weight: 700;
src: url(NotoSans-Bolde48095c9b55443257f83.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Noto Sans;
font-weight: 800;
src: url(NotoSans-ExtraBoldd748e3cb0e3d2d243fd4.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Clash Display;
font-weight: 700;
src: url(ClashDisplay-Semiboldaafc18ae9600df8496dc.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Clash Grotesk;
font-weight: 100;
src: url(ClashGrotesk-Medium70562d8c4c3ea4b66dd6.woff2) format("woff2")
}
@font-face {
font-display: swap;
font-family: Clash Grotesk;
font-weight: 600;
src: url(ClashGrotesk-Semiboldcbba0f20140f7d768ed5.woff2) format("woff2")
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
.hero[data-variant=homepage] {
--_border-radius: var(--nyc-sys-radius-lg);
background: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .8)), url(SummerSplash4b06176b06dc2719a274.jpg) 50% no-repeat;
background-size: cover;
border-radius: var(--_border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
margin-bottom: var(--nyc-sys-space-fluid-3xl-5xl);
margin-top: 0;
padding: var(--nyc-sys-space-fluid-base-5xl)
}
@media(min-width:940px) {
.hero[data-variant=homepage] {
--_border-radius: var(--nyc-sys-radius-xl);
border-top-left-radius: var(--_border-radius);
border-top-right-radius: var(--_border-radius);
margin-top: var(--nyc-sys-space-xl)
}
}
.hero[data-variant=homepage] h1 {
margin: 0
}
.hero[data-variant=homepage] a {
color: var(--nyc-sys-color-link-inverted)
}
.search-field {
--nyc-sys-color-border-focus: #fff;
display: flex;
height: 48px;
margin-bottom: var(--nyc-sys-space-fluid-xl-2xl);
margin-top: var(--nyc-sys-space-fluid-xl-2xl);
max-width: 750px;
width: 100%
}
@media(min-width:768px) {
.search-field {
height: 57px
}
}
.search-field:has(input[type=text]:focus-visible) {
border-radius: 12px;
outline: 2px dashed var(--nyc-sys-color-border-focus);
outline-offset: .25rem
}
.search-field input[type=text] {
border: 2px solid var(--nyc-sys-color-border-medium-high);
border-radius: var(--nyc-sys-radius-sm);
border-bottom-right-radius: 0;
border-right: none;
border-top-right-radius: 0;
color: var(--nyc-sys-color-text-input);
flex: 1;
font-size: var(--nyc-sys-size-text-base);
padding: var(--nyc-sys-space-xs) var(--nyc-sys-space-base)
}
.search-field input[type=text]:focus-visible {
outline: none
}
@media(min-width:768px) {
.search-field input[type=text] {
font-size: var(--nyc-sys-size-text-xl);
padding-bottom: var(--nyc-sys-space-sm);
padding-top: var(--nyc-sys-space-sm)
}
}
.search-button {
--nyc-sys-color-link-hover: #fff;
background: var(--nyc-sys-color-primary);
border: 2px solid var(--nyc-sys-color-border-medium-high);
border-bottom-right-radius: var(--nyc-sys-radius-sm);
border-left: none;
border-top-right-radius: var(--nyc-sys-radius-sm);
color: var(--nyc-sys-color-on-primary);
padding: var(--nyc-sys-space-xs) var(--nyc-sys-space-base)
}
@media(min-width:768px) {
.search-button {
padding: var(--nyc-sys-space-sm) var(--nyc-sys-space-lg)
}
}
.search-icon {
display: inline-block;
height: 24px;
width: 24px;
--svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49 215.51 185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68 68.07 68.07 0 0 1-68-68'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%
}
#mobile-app-promo .card__media {
aspect-ratio: unset;
flex-grow: 0;
margin-left: auto;
margin-right: auto
}
@container promo-card (width > 35rem) {
#mobile-app-promo .card__media {
flex-basis: 40%
}
}
#mobile-app-promo .card__media img {
-o-object-fit: contain;
object-fit: contain
}
#mobile-app-promo .card__body p {
font-size: var(--nyc-cmp-type-intro-size)
}
#mobile-app-promo .actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: var(--nyc-sys-space-fluid-xl-2xl)
}