CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" />  <meta content="width=device-width, initial-scale=1.0" name="viewport">  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta http-equiv="Content-type" content="text/html; charset=utf-8">  <meta name="format-detection" content="telephone=no">  <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//ajax.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com">  <meta name="application-name" content="Building Productive"/>  <meta name="apple-mobile-web-app-title" content="Building Productive"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-startup-image" href="/wp-content/themes/productive/public/logo.svg">  <link rel="icon" type="image/svg+xml" href="/wp-content/themes/productive/public/favicon.svg"> <link rel="alternate icon" href="/wp-content/themes/productive/public/favicon.ico"> <style id='esCssVariables-global'>:root {--global-custom-blocks-name: eightshift-block; --global-main-content-width: 12; --global-easing: cubic-bezier(0.55, 0, 0.45, 1); --global-base-font: InterVariable; --global-breakpoints-mobile: 479; --global-breakpoints-tablet: 1279; --global-breakpoints-desktop: 2159; --global-breakpoints-large: 2160; --global-grid-gutter: 2.78vw; --global-grid-side-padding: 5.56vw; --global-grid-max-content-width: 120rem; --global-section-spacing-min: -600; --global-section-spacing-max: 600; --global-section-spacing-step: 1; --global-section-in-spacing-min: 0; --global-section-in-spacing-max: 600; --global-section-in-spacing-step: 1; --global-z-index-compact-header: 101; --global-z-index-header: 102; --global-z-index-drawer-cta: 100; --global-z-index-drawer: 99; --global-z-index-overlay: 98; --global-z-index-cookie-modal: 95; --global-z-index-featured-price-item: 1; --global-z-index-progress-bar: 101; --global-z-index-small: 2; --global-colors-primary: #C3151B; --global-colors-primary-values: 195 21 27; --global-colors-black: #111111; --global-colors-black-values: 17 17 17; --global-colors-white: #FFFFFF; --global-colors-white-values: 255 255 255; --global-colors-light: #CCCCCC; --global-colors-light-values: 204 204 204; --global-colors-indigo: #5D2BFF; --global-colors-indigo-values: 93 43 255; --global-colors-indigoLight: #A79EFA; --global-colors-indigoLight-values: 167 158 250; --global-colors-indigoDark: #2D00AD; --global-colors-indigoDark-values: 45 0 173; --global-colors-indigo100: #ECE5FF; --global-colors-indigo100-values: 236 229 255; --global-colors-indigo700: #5000E5; --global-colors-indigo700-values: 80 0 229; --global-colors-indigo800: #20007A; --global-colors-indigo800-values: 32 0 122; --global-colors-indigo900: #130047; --global-colors-indigo900-values: 19 0 71; --global-colors-violet: #AB40FF; --global-colors-violet-values: 171 64 255; --global-colors-violetLight: #D6DDFF; --global-colors-violetLight-values: 214 221 255; --global-colors-violetDark: #5D2BFF; --global-colors-violetDark-values: 93 43 255; --global-colors-grey50: #F7F9FC; --global-colors-grey50-values: 247 249 252; --global-colors-grey100: #F2F5FF; --global-colors-grey100-values: 242 245 255; --global-colors-grey200: #DFE5F5; --global-colors-grey200-values: 223 229 245; --global-colors-grey300: #BABDD8; --global-colors-grey300-values: 186 189 216; --global-colors-grey400: #7F82A4; --global-colors-grey400-values: 127 130 164; --global-colors-grey500: #3C3F58; --global-colors-grey500-values: 60 63 88; --global-colors-red100: #FAF1ED; --global-colors-red100-values: 250 241 237; --global-colors-red200: #FFCCCB; --global-colors-red200-values: 255 204 203; --global-colors-red300: #FF6666; --global-colors-red300-values: 255 102 102; --global-colors-red400: #E45353; --global-colors-red400-values: 228 83 83; --global-colors-red500: #A52828; --global-colors-red500-values: 165 40 40; --global-colors-green100: #E6F9ED; --global-colors-green100-values: 230 249 237; --global-colors-green200: #8CEAB7; --global-colors-green200-values: 140 234 183; --global-colors-green300: #21D191; --global-colors-green300-values: 33 209 145; --global-colors-green400: #00AA6C; --global-colors-green400-values: 0 170 108; --global-colors-green500: #004F32; --global-colors-green500-values: 0 79 50; --global-colors-yellow100: #FFF6DD; --global-colors-yellow100-values: 255 246 221; --global-colors-yellow200: #FFE194; --global-colors-yellow200-values: 255 225 148; --global-colors-yellow300: #FFC837; --global-colors-yellow300-values: 255 200 55; --global-colors-yellow400: #F1B203; --global-colors-yellow400-values: 241 178 3; --global-colors-yellow500: #B86300; --global-colors-yellow500-values: 184 99 0; --global-colors-orange100: #FFEEE9; --global-colors-orange100-values: 255 238 233; --global-colors-orange200: #FFBDA7; --global-colors-orange200-values: 255 189 167; --global-colors-orange300: #FF784B; --global-colors-orange300-values: 255 120 75; --global-colors-orange350: #FF9875; --global-colors-orange350-values: 255 152 117; --global-colors-orange400: #ED5D2D; --global-colors-orange400-values: 237 93 45; --global-colors-orange500: #C53506; --global-colors-orange500-values: 197 53 6; --global-colors-blue100: #E0F6FF; --global-colors-blue100-values: 224 246 255; --global-colors-blue200: #96DFFF; --global-colors-blue200-values: 150 223 255; --global-colors-blue300: #55C9FB; --global-colors-blue300-values: 85 201 251; --global-colors-blue400: #0699EC; --global-colors-blue400-values: 6 153 236; --global-colors-blue500: #0062BD; --global-colors-blue500-values: 0 98 189; --global-colors-burgundy100: #FFF0F4; --global-colors-burgundy100-values: 255 240 244; --global-colors-burgundy200: #ECA7C8; --global-colors-burgundy200-values: 236 167 200; --global-colors-burgundy300: #CA6696; --global-colors-burgundy300-values: 202 102 150; --global-colors-burgundy400: #AC366F; --global-colors-burgundy400-values: 172 54 111; --global-colors-burgundy500: #850442; --global-colors-burgundy500-values: 133 4 66; --global-colors-turquoise100: #D2FFFA; --global-colors-turquoise100-values: 210 255 250; --global-colors-turquoise200: #6DEDE5; --global-colors-turquoise200-values: 109 237 229; --global-colors-turquoise300: #42DAD1; --global-colors-turquoise300-values: 66 218 209; --global-colors-turquoise400: #07B2A8; --global-colors-turquoise400-values: 7 178 168; --global-colors-turquoise500: #006B6B; --global-colors-turquoise500-values: 0 107 107; --global-colors-limegreen100: #F3FCE8; --global-colors-limegreen100-values: 243 252 232; --global-colors-limegreen200: #CFF5A3; --global-colors-limegreen200-values: 207 245 163; --global-colors-limegreen300: #9EE250; --global-colors-limegreen300-values: 158 226 80; --global-colors-limegreen400: #7FB540; --global-colors-limegreen400-values: 127 181 64; --global-colors-limegreen500: #4F7128; --global-colors-limegreen500-values: 79 113 40; --global-colors-celticBlue300: #B3BFFF; --global-colors-celticBlue300-values: 179 191 255; --global-colors-celticBlue500: #4F6BF8; --global-colors-celticBlue500-values: 79 107 248; --global-gradients-gradient-1: linear-gradient(90deg, #AB40FF 0%, #5D2BFF 100%); }</style><script> // Define dataLayer and the gtag function. window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} // Set default consent to 'denied' as a placeholder gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'denied' }); </script>  <script id="google-tag-manager-script">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-56RMXVV');</script>   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-56RMXVV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />  <title>Custom Fields: Give Your Customers the Fields They Need - Building Productive</title> <meta name="description" content="Here at Productive, we’re building an operating system for digital agencies. Because each agency is different, they need customization options for their workflows." /> <link rel="canonical" href="https://productive.io/engineering/blog/custom-fields-give-your-customers-the-fields-they-need/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Custom Fields: Give Your Customers the Fields They Need" /> <meta property="og:description" content="Here at Productive, we’re building an operating system for digital agencies. Because each agency is different, they need customization options for their workflows." /> <meta property="og:url" content="https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/" /> <meta property="og:site_name" content="Building Productive" /> <meta property="article:published_time" content="2022-11-14T07:01:58+00:00" /> <meta property="article:modified_time" content="2024-01-17T14:45:33+00:00" /> <meta property="og:image" content="https://website-assets.productive.io/uploads/sites/2/2022/11/Asset_11.png" /> <meta property="og:image:width" content="1901" /> <meta property="og:image:height" content="797" /> <meta property="og:image:type" content="image/png" /> <meta name="author" content="Nikola Buhiniček" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Nikola Buhiniček" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/","url":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/","name":"Custom Fields: Give Your Customers the Fields They Need - Building Productive","isPartOf":{"@id":"https://productive.io/engineering/#website"},"primaryImageOfPage":{"@id":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/#primaryimage"},"image":{"@id":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/#primaryimage"},"thumbnailUrl":"https://website-assets.productive.io/uploads/sites/2/2022/11/Asset_11.png","datePublished":"2022-11-14T07:01:58+00:00","dateModified":"2024-01-17T14:45:33+00:00","author":{"@id":"https://productive.io/engineering/#/schema/person/b8aea92d17640ade1fc1230b0812ae29"},"description":"Here at Productive, we’re building an operating system for digital agencies. Because each agency is different, they need customization options for their workflows.","breadcrumb":{"@id":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/#primaryimage","url":"https://website-assets.productive.io/uploads/sites/2/2022/11/Asset_11.png","contentUrl":"https://website-assets.productive.io/uploads/sites/2/2022/11/Asset_11.png","width":1901,"height":797},{"@type":"BreadcrumbList","@id":"https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://productive.io/engineering/"},{"@type":"ListItem","position":2,"name":"Custom Fields: Give Your Customers the Fields They Need"}]},{"@type":"WebSite","@id":"https://productive.io/engineering/#website","url":"https://productive.io/engineering/","name":"Building Productive","description":"Just another Productive Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://productive.io/engineering/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https://productive.io/engineering/#/schema/person/b8aea92d17640ade1fc1230b0812ae29","name":"Nikola Buhiniček","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://productive.io/engineering/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/c322cb4f8c04361430edcb9557a010c4?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/c322cb4f8c04361430edcb9557a010c4?s=96&d=mm&r=g","caption":"Nikola Buhiniček"},"url":"https://productive.io/engineering/author/nikola-buhincek/"}]}</script>  <link rel='dns-prefetch' href='//js.chilipiper.com' /> <link rel='dns-prefetch' href='//website-assets.productive.io' /> <link rel="alternate" type="application/rss+xml" title="Building Productive » Custom Fields: Give Your Customers the Fields They Need Comments Feed" href="https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need/feed/" /> <style id='wp-emoji-styles-inline-css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='Productive-block-style-css' href='https://productive.io/engineering/wp-content/themes/productive/public/applicationBlocks-32dd51df9af718b07bc4.css?ver=20241121151712.11956160953' media='all' /> <link rel='stylesheet' id='Productive-theme-styles-css' href='https://productive.io/engineering/wp-content/themes/productive/public/application-254597429f580bc12780.css?ver=20241121151712.11956160953' media='all' /> <link rel='stylesheet' id='eightshift-forms-block-frontend-mandatory-style-css' href='https://productive.io/engineering/wp-content/plugins/eightshift-forms/public/applicationBlocksFrontendMandatory-ba98b730b52f609c16db.css?ver=5.1.8' media='all' /> <link rel='stylesheet' id='eightshift-forms-block-frontend-style-css' href='https://productive.io/engineering/wp-content/plugins/eightshift-forms/public/applicationBlocksFrontend-bc136984875f746cf206.css?ver=5.1.8' media='all' /> <link rel='stylesheet' id='Productive-block-frontend-style-css' href='https://productive.io/engineering/wp-content/themes/productive/public/applicationBlocksFrontend-d74e1f17959c7c66139a.css?ver=20241121151712.11956160953' media='all' /> <link rel="https://api.w.org/" href="https://productive.io/engineering/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://productive.io/engineering/wp-json/wp/v2/posts/250" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://productive.io/engineering/xmlrpc.php?rsd" /> <link rel='shortlink' href='https://productive.io/engineering/?p=250' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://productive.io/engineering/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fproductive.io%2Fengineering%2Fcustom-fields-give-your-customers-the-fields-they-need%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://productive.io/engineering/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fproductive.io%2Fengineering%2Fcustom-fields-give-your-customers-the-fields-they-need%2F&format=xml" /> <meta name="generator" content="WP Rocket 3.17.2" data-wpr-features="wpr_desktop wpr_preload_links" /></head> <body data-page-category="backend, engineering" class="post-template-default single single-post postid-250 single-format-standard theme-engineering"> <div data-rocket-location-hash="7f8640e2c800c8267a8fe194d03297db" class="block-navbar js-block-navbar navbar-bp block-navbar--theme-light"> <a class="logo block-navbar__logo" href="https://productive.io" aria-label="Homepage" > <img src="https://website-assets.productive.io/uploads/sites/2/2022/11/logo-white.svg" alt="Building Productive" title="Building Productive" class="logo__img" width=180 height=36 /> </a> <div data-rocket-location-hash="f1f6a309f7c84d63266c9fe1a4d079c4" class="block-navbar-left js-block-navbar-left"> <a class="block-navbar-item js-block-navbar-item" href="https://productive.io/engineering/"> <div class="block-navbar-item__link"> <span>Building Productive</span> </div> </a> <a class="block-navbar-item js-block-navbar-item" href="https://productive.io/about-us/"> <div class="block-navbar-item__link"> <span>Company</span> </div> </a> </div> <div data-rocket-location-hash="6d1b2ccbea02e65506374ff0c6c8c799" class="block-navbar-cta js-navbar-cta"> <style id='esFormsCssVariables-global'>:root {--global-custom-blocks-name: eightshift-block;--global-es-max-cols: 12;--global-esf-spacing-xs: 0.25rem;--global-esf-spacing-s: 0.5rem;--global-esf-spacing-m: 1rem;--global-esf-spacing-l: 1.5rem;--global-esf-spacing-xl: 2rem;--global-esf-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);--global-esf-box-shadow: 0 0 0.5rem rgb(0 0 0 / 0.04);--global-esf-box-shadow-l: 0 0 0.125rem rgb(0 0 0 / 0.16), 0 0 0.5rem rgb(0 0 0 / 0.16);--global-esf-max-width: 36rem;--global-esf-input-height: 2.625rem;--global-breakpoints-mobile: 480;--global-breakpoints-tablet: 960;--global-breakpoints-desktop: 1920;--global-breakpoints-large: 1921;--global-colors-esf-admin-accent: #29A3A3;--global-colors-esf-admin-accent-values: 41 163 163;--global-colors-esf-admin-accent-50: #29A3A380;--global-colors-esf-admin-accent-50-values: 0 0 0;--global-colors-esf-admin-accent-30: #29a3a333;--global-colors-esf-admin-accent-30-values: 0 0 0;--global-colors-esf-admin-accent-10: #29A3A31A;--global-colors-esf-admin-accent-10-values: 0 0 0;--global-colors-esf-admin-accent-05: #29A3A30D;--global-colors-esf-admin-accent-05-values: 0 0 0;--global-colors-esf-admin-accent-dark: #218282;--global-colors-esf-admin-accent-dark-values: 33 130 130;--global-colors-esf-border: #DEDEDE;--global-colors-esf-border-values: 222 222 222;--global-colors-esf-black: #181818;--global-colors-esf-black-values: 24 24 24;--global-colors-esf-white: #FFFFFF;--global-colors-esf-white-values: 255 255 255;--global-colors-esf-gray: #484848;--global-colors-esf-gray-values: 72 72 72;--global-colors-esf-yellow-50: #FFFBEB;--global-colors-esf-yellow-50-values: 255 251 235;--global-colors-esf-yellow-100: #FEF3C7;--global-colors-esf-yellow-100-values: 254 243 199;--global-colors-esf-yellow-200: #FDE68A;--global-colors-esf-yellow-200-values: 253 230 138;--global-colors-esf-yellow-500: #EAB308;--global-colors-esf-yellow-500-values: 234 179 8;--global-colors-esf-yellow-950: #451A03;--global-colors-esf-yellow-950-values: 69 26 3;--global-colors-esf-sky-50: #F0F9FF;--global-colors-esf-sky-50-values: 240 249 255;--global-colors-esf-sky-100: #E0F2FE;--global-colors-esf-sky-100-values: 224 242 254;--global-colors-esf-sky-200: #BAE6FD;--global-colors-esf-sky-200-values: 186 230 253;--global-colors-esf-sky-500: #0EA5E9;--global-colors-esf-sky-500-values: 14 165 233;--global-colors-esf-sky-950: #082F49;--global-colors-esf-sky-950-values: 8 47 73;--global-colors-esf-gray-50: #F9FAFB;--global-colors-esf-gray-50-values: 249 250 251;--global-colors-esf-gray-100: #F3F4F6;--global-colors-esf-gray-100-values: 243 244 246;--global-colors-esf-gray-200: #E5E7EB;--global-colors-esf-gray-200-values: 229 231 235;--global-colors-esf-gray-300: #D1D5DB;--global-colors-esf-gray-300-values: 209 213 219;--global-colors-esf-gray-400: #9CA3AF;--global-colors-esf-gray-400-values: 156 163 175;--global-colors-esf-gray-500: #6B7280;--global-colors-esf-gray-500-values: 107 114 128;--global-colors-esf-gray-600: #4B5563;--global-colors-esf-gray-600-values: 75 85 99;--global-colors-esf-gray-950: #030712;--global-colors-esf-gray-950-values: 3 7 18;--global-colors-esf-red-50: #FEF2F2;--global-colors-esf-red-50-values: 254 242 242;--global-colors-esf-red-100: #FEE2E2;--global-colors-esf-red-100-values: 254 226 226;--global-colors-esf-red-200: #FECACA;--global-colors-esf-red-200-values: 254 202 202;--global-colors-esf-red-500: #EF4444;--global-colors-esf-red-500-values: 239 68 68;--global-colors-esf-red-400: #F87171;--global-colors-esf-red-400-values: 248 113 113;--global-colors-esf-red-600: #DC2626;--global-colors-esf-red-600-values: 220 38 38;--global-colors-esf-red-800: #991B1B;--global-colors-esf-red-800-values: 153 27 27;--global-colors-esf-red-950: #450A0A;--global-colors-esf-red-950-values: 69 10 10;--global-colors-esf-green-50: #F0FDF4;--global-colors-esf-green-50-values: 240 253 244;--global-colors-esf-green-100: #DCFCE7;--global-colors-esf-green-100-values: 220 252 231;--global-colors-esf-green-200: #BBF7D0;--global-colors-esf-green-200-values: 187 247 208;--global-colors-esf-green-500: #22C55E;--global-colors-esf-green-500-values: 34 197 94;--global-colors-esf-green-950: #052E16;--global-colors-esf-green-950-values: 5 46 22;}</style> <div class="es-block-forms js-es-block-forms" > <form class="es-form js-es-block-form" data-phone-sync='1' data-form-id='17' data-post-id='250' data-form-type='hubspot' data-conditional-tags='[]' method='post' data-block-ssr='false' data-disabled-default-styles='false' novalidate onsubmit="event.preventDefault();" > <div class="es-global-msg js-es-block-global-msg" > </div> <div class="es-form__fields"> <div class="es-field es-field--input js-es-block-field" data-id="ca6f3ed3" data-hubspot-type-id='0-1' data-field-name='email' data-field-type='input' data-type-custom='email' data-tracking='email'> <div class="es-field__inner"> <div class="es-field__content"> <div class="es-field__content-wrap"> <input class="es-input" name="email" id="email" type="email" placeholder='Your email, please' /> </div> </div> <div class="es-error es-field__es-error js-es-block-error" data-id="email" ></div> </div> </div><div class="es-field es-field--submit js-es-block-field" data-id="d0433ab8" data-field-type='submit'> <div class="es-field__inner"> <div class="es-field__content"> <div class="es-field__content-wrap"> <button class="es-submit es-submit--default" ><span class="es-submit__inner"> Get Engineering Updates</span></button> </div> </div> </div> </div> </div> <div class="es-loader js-es-block-loader es-loader__form"> <svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1' stroke='var(--loader-color-1, currentColor)'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle><circle cx='22' cy='22' r='1' stroke='var(--loader-color-2, currentColor)'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle></g></svg></div></form><div class="es-loader js-es-block-loader es-loader__geolocation"> <svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1' stroke='var(--loader-color-1, currentColor)'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle><circle cx='22' cy='22' r='1' stroke='var(--loader-color-2, currentColor)'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle></g></svg></div></div> <style id='esFormsCssVariables'>.es-field[data-id='ca6f3ed3']{--es-field-width: calc((12 / 12) * 100%);} .es-field[data-id='d0433ab8']{--es-field-width: calc((12 / 12) * 100%);} </style> </div> <button class="hamburger js-hamburger" style="--hamburger-background: var(--global-colors-grey100); --hamburger-foreground: var(--global-colors-black);" > <div class="hamburger__icon-line hamburger__icon-line--1"></div> <div class="hamburger__icon-line hamburger__icon-line--2"></div> </button> <div data-rocket-location-hash="f5e02911bb7619186ef3b17af9bc394f" class="block-navbar__flyout js-block-navbar-flyout"> <div data-rocket-location-hash="601cd433bb6a51f86c84242d1f8a5b93" class="block-navbar-left js-block-navbar-left"> <a class="block-navbar-item js-block-navbar-item" href="https://productive.io/engineering/"> <div class="block-navbar-item__link"> <span>Building Productive</span> </div> </a> <a class="block-navbar-item js-block-navbar-item" href="https://productive.io/about-us/"> <div class="block-navbar-item__link"> <span>Company</span> </div> </a> </div> <div data-rocket-location-hash="46ccfc1855959cdb1045c2e68a88e1b0" class="block-navbar-cta js-navbar-cta"> <style id='esFormsCssVariables-global'>:root {--global-custom-blocks-name: eightshift-block;--global-es-max-cols: 12;--global-esf-spacing-xs: 0.25rem;--global-esf-spacing-s: 0.5rem;--global-esf-spacing-m: 1rem;--global-esf-spacing-l: 1.5rem;--global-esf-spacing-xl: 2rem;--global-esf-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);--global-esf-box-shadow: 0 0 0.5rem rgb(0 0 0 / 0.04);--global-esf-box-shadow-l: 0 0 0.125rem rgb(0 0 0 / 0.16), 0 0 0.5rem rgb(0 0 0 / 0.16);--global-esf-max-width: 36rem;--global-esf-input-height: 2.625rem;--global-breakpoints-mobile: 480;--global-breakpoints-tablet: 960;--global-breakpoints-desktop: 1920;--global-breakpoints-large: 1921;--global-colors-esf-admin-accent: #29A3A3;--global-colors-esf-admin-accent-values: 41 163 163;--global-colors-esf-admin-accent-50: #29A3A380;--global-colors-esf-admin-accent-50-values: 0 0 0;--global-colors-esf-admin-accent-30: #29a3a333;--global-colors-esf-admin-accent-30-values: 0 0 0;--global-colors-esf-admin-accent-10: #29A3A31A;--global-colors-esf-admin-accent-10-values: 0 0 0;--global-colors-esf-admin-accent-05: #29A3A30D;--global-colors-esf-admin-accent-05-values: 0 0 0;--global-colors-esf-admin-accent-dark: #218282;--global-colors-esf-admin-accent-dark-values: 33 130 130;--global-colors-esf-border: #DEDEDE;--global-colors-esf-border-values: 222 222 222;--global-colors-esf-black: #181818;--global-colors-esf-black-values: 24 24 24;--global-colors-esf-white: #FFFFFF;--global-colors-esf-white-values: 255 255 255;--global-colors-esf-gray: #484848;--global-colors-esf-gray-values: 72 72 72;--global-colors-esf-yellow-50: #FFFBEB;--global-colors-esf-yellow-50-values: 255 251 235;--global-colors-esf-yellow-100: #FEF3C7;--global-colors-esf-yellow-100-values: 254 243 199;--global-colors-esf-yellow-200: #FDE68A;--global-colors-esf-yellow-200-values: 253 230 138;--global-colors-esf-yellow-500: #EAB308;--global-colors-esf-yellow-500-values: 234 179 8;--global-colors-esf-yellow-950: #451A03;--global-colors-esf-yellow-950-values: 69 26 3;--global-colors-esf-sky-50: #F0F9FF;--global-colors-esf-sky-50-values: 240 249 255;--global-colors-esf-sky-100: #E0F2FE;--global-colors-esf-sky-100-values: 224 242 254;--global-colors-esf-sky-200: #BAE6FD;--global-colors-esf-sky-200-values: 186 230 253;--global-colors-esf-sky-500: #0EA5E9;--global-colors-esf-sky-500-values: 14 165 233;--global-colors-esf-sky-950: #082F49;--global-colors-esf-sky-950-values: 8 47 73;--global-colors-esf-gray-50: #F9FAFB;--global-colors-esf-gray-50-values: 249 250 251;--global-colors-esf-gray-100: #F3F4F6;--global-colors-esf-gray-100-values: 243 244 246;--global-colors-esf-gray-200: #E5E7EB;--global-colors-esf-gray-200-values: 229 231 235;--global-colors-esf-gray-300: #D1D5DB;--global-colors-esf-gray-300-values: 209 213 219;--global-colors-esf-gray-400: #9CA3AF;--global-colors-esf-gray-400-values: 156 163 175;--global-colors-esf-gray-500: #6B7280;--global-colors-esf-gray-500-values: 107 114 128;--global-colors-esf-gray-600: #4B5563;--global-colors-esf-gray-600-values: 75 85 99;--global-colors-esf-gray-950: #030712;--global-colors-esf-gray-950-values: 3 7 18;--global-colors-esf-red-50: #FEF2F2;--global-colors-esf-red-50-values: 254 242 242;--global-colors-esf-red-100: #FEE2E2;--global-colors-esf-red-100-values: 254 226 226;--global-colors-esf-red-200: #FECACA;--global-colors-esf-red-200-values: 254 202 202;--global-colors-esf-red-500: #EF4444;--global-colors-esf-red-500-values: 239 68 68;--global-colors-esf-red-400: #F87171;--global-colors-esf-red-400-values: 248 113 113;--global-colors-esf-red-600: #DC2626;--global-colors-esf-red-600-values: 220 38 38;--global-colors-esf-red-800: #991B1B;--global-colors-esf-red-800-values: 153 27 27;--global-colors-esf-red-950: #450A0A;--global-colors-esf-red-950-values: 69 10 10;--global-colors-esf-green-50: #F0FDF4;--global-colors-esf-green-50-values: 240 253 244;--global-colors-esf-green-100: #DCFCE7;--global-colors-esf-green-100-values: 220 252 231;--global-colors-esf-green-200: #BBF7D0;--global-colors-esf-green-200-values: 187 247 208;--global-colors-esf-green-500: #22C55E;--global-colors-esf-green-500-values: 34 197 94;--global-colors-esf-green-950: #052E16;--global-colors-esf-green-950-values: 5 46 22;}</style> <div class="es-block-forms js-es-block-forms" > <form class="es-form js-es-block-form" data-phone-sync='1' data-form-id='17' data-post-id='250' data-form-type='hubspot' data-conditional-tags='[]' method='post' data-block-ssr='false' data-disabled-default-styles='false' novalidate onsubmit="event.preventDefault();" > <div class="es-global-msg js-es-block-global-msg" > </div> <div class="es-form__fields"> <div class="es-field es-field--input js-es-block-field" data-id="ca6f3ed3" data-hubspot-type-id='0-1' data-field-name='email' data-field-type='input' data-type-custom='email' data-tracking='email'> <div class="es-field__inner"> <div class="es-field__content"> <div class="es-field__content-wrap"> <input class="es-input" name="email" id="email" type="email" placeholder='Your email, please' /> </div> </div> <div class="es-error es-field__es-error js-es-block-error" data-id="email" ></div> </div> </div><div class="es-field es-field--submit js-es-block-field" data-id="d0433ab8" data-field-type='submit'> <div class="es-field__inner"> <div class="es-field__content"> <div class="es-field__content-wrap"> <button class="es-submit es-submit--default" ><span class="es-submit__inner"> Get Engineering Updates</span></button> </div> </div> </div> </div> </div> <div class="es-loader js-es-block-loader es-loader__form"> <svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1' stroke='var(--loader-color-1, currentColor)'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle><circle cx='22' cy='22' r='1' stroke='var(--loader-color-2, currentColor)'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle></g></svg></div></form><div class="es-loader js-es-block-loader es-loader__geolocation"> <svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1' stroke='var(--loader-color-1, currentColor)'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle><circle cx='22' cy='22' r='1' stroke='var(--loader-color-2, currentColor)'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle></g></svg></div></div> <style id='esFormsCssVariables'>.es-field[data-id='ca6f3ed3']{--es-field-width: calc((12 / 12) * 100%);} .es-field[data-id='d0433ab8']{--es-field-width: calc((12 / 12) * 100%);} </style> </div> </div> </div><progress class="progress-bar js-progress-bar" max="100" value="0" > </progress><svg class="icon-defs" aria-hidden="true" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id='icon-business__b' x1='26.5' y1='12.5' x2='22.5' y2='16.5' gradientUnits='userSpaceOnUse'> <stop stop-color='#FFC837' /> <stop offset='1' stop-color='#F1B203' /> </linearGradient> <linearGradient id='icon-business__c' x1='9' y1='29.5' x2='24' y2='17' gradientUnits='userSpaceOnUse'> <stop stop-color='#F1B203' /> <stop offset='1' stop-color='#FFC837' /> </linearGradient> <clipPath id='icon-business__a'> <path fill='#fff' transform='translate(6 4)' d='M0 0h29.6v29.6H0z' /> </clipPath> <linearGradient id='icon-project-management__a' x1='22.175' y1='22.297' x2='28.276' y2='26.18' gradientUnits='userSpaceOnUse'> <stop stop-color='#0062BD' /> <stop offset='1' stop-color='#0699EC' /> </linearGradient> <linearGradient id='icon-project-management__b' x1='22.73' y1='18.97' x2='13.856' y2='27.289' gradientUnits='userSpaceOnUse'> <stop stop-color='#0062BD' /> <stop offset='1' stop-color='#0699EC' /> </linearGradient> <linearGradient id='icon-billing__a' x1='34.15' y1='1.797' x2='11.361' y2='29.92' gradientUnits='userSpaceOnUse'> <stop stop-color='#FF784B' /> <stop offset='1' stop-color='#ED5D2D' /> </linearGradient> <linearGradient id='icon-sales__b' x1='32' y1='26' x2='24.5' y2='33.5' gradientUnits='userSpaceOnUse'> <stop stop-color='#21D191' /> <stop offset='1' stop-color='#00AA6C' /> </linearGradient> <clipPath id='icon-sales__a'> <path fill='#fff' transform='translate(4 5)' d='M0 0h31.33v29.67H0z' /> </clipPath> <linearGradient id='icon-resource-planning__a' x1='20.5' y1='16' x2='35' y2='16' gradientUnits='userSpaceOnUse'> <stop stop-color='#E45353' /> <stop offset='1' stop-color='#F66' /> </linearGradient> <linearGradient id='icon-resource-planning__b' x1='21' y1='27' x2='31' y2='27' gradientUnits='userSpaceOnUse'> <stop stop-color='#E45353' /> <stop offset='1' stop-color='#F66' /> </linearGradient> <clipPath id="icon-youtube-play-button__clip-path"> <rect width="98" height="69" fill="white"/> </clipPath> <linearGradient id="reporting_icon_gradient_1" x1="33.4027" y1="19.7828" x2="5.59725" y2="19.7828" gradientUnits="userSpaceOnUse"> <stop stop-color="#CA6696"/> <stop offset="1" stop-color="#AC366F"/> </linearGradient> <linearGradient id="reporting_icon_gradient_2" x1="22.2805" y1="6.12167" x2="22.2805" y2="28.366" gradientUnits="userSpaceOnUse"> <stop stop-color="#CA6696"/> <stop offset="1" stop-color="#AC366F"/> </linearGradient> <clipPath id="reporting_icon_clip"> <rect width="27.8055" height="28.4345" fill="white" transform="translate(5.59726 5.56555)"/> </clipPath> <linearGradient id='c-billing-40-a' x1='34.15' y1='1.797' x2='11.361' y2='29.92' gradientUnits='userSpaceOnUse'><stop stop-color='#FF784B' fill='none'/><stop offset='1' stop-color='#ED5D2D' fill='none'/></linearGradient> <clipPath id='c-budgeting-40-a'><path fill='#fff' transform='translate(6 4)' d='M0 0h29.6v29.6H0z'/></clipPath> <linearGradient id='c-budgeting-40-b' x1='26.5' y1='12.5' x2='22.5' y2='16.5' gradientUnits='userSpaceOnUse'><stop stop-color='#FFC837'/><stop offset='1' stop-color='#F1B203'/></linearGradient> <linearGradient id='c-budgeting-40-c' x1='9' y1='29.5' x2='24' y2='17' gradientUnits='userSpaceOnUse'><stop stop-color='#F1B203'/><stop offset='1' stop-color='#FFC837'/></linearGradient> <clipPath id='c-crm-40-a'><path fill='#fff' transform='translate(4 5)' d='M0 0h31.33v29.67H0z'/></clipPath> <linearGradient id='c-crm-40-b' x1='32' y1='26' x2='24.5' y2='33.5' gradientUnits='userSpaceOnUse'><stop stop-color='#21D191'/><stop offset='1' stop-color='#00AA6C'/></linearGradient> <linearGradient id='c-project-management-40-a' x1='22.175' y1='22.298' x2='28.276' y2='26.18' gradientUnits='userSpaceOnUse'><stop stop-color='#0062BD'/><stop offset='1' stop-color='#0699EC'/></linearGradient> <linearGradient id='c-project-management-40-b' x1='22.73' y1='18.97' x2='13.856' y2='27.289' gradientUnits='userSpaceOnUse'><stop stop-color='#0062BD' fill='none'/><stop offset='1' stop-color='#0699EC' fill='none'/></linearGradient> <linearGradient id='c-resource-planning-40-a' x1='20.5' y1='16' x2='35' y2='16' gradientUnits='userSpaceOnUse'><stop stop-color='#E45353'/><stop offset='1' stop-color='#F66'/></linearGradient> <linearGradient id='c-resource-planning-40-b' x1='21' y1='27' x2='31' y2='27' gradientUnits='userSpaceOnUse'><stop stop-color='#E45353' fill='none'/><stop offset='1' stop-color='#F66' fill='none'/></linearGradient> <clipPath id='c-time-tracking-40-a'><path fill='#fff' transform='translate(9 5)' d='M0 0h22.49v29.4H0z'/></clipPath> <linearGradient id='c-time-tracking-40-b' x1='23.5' y1='21.5' x2='16' y2='8' gradientUnits='userSpaceOnUse'><stop stop-color='#42DAD1'/><stop offset='1' stop-color='#07B2A8'/></linearGradient> <clipPath id='c-reporting-40-a'><path fill='#fff' transform='translate(5.597 5.566)' d='M0 0h27.805v28.434H0z'/></clipPath> <linearGradient id='c-reporting-40-b' x1='33.403' y1='19.783' x2='5.597' y2='19.783' gradientUnits='userSpaceOnUse'><stop stop-color='#CA6696'/><stop offset='1' stop-color='#AC366F'/></linearGradient> <linearGradient id='c-reporting-40-c' x1='22.28' y1='6.122' x2='22.28' y2='28.366' gradientUnits='userSpaceOnUse'><stop stop-color='#CA6696'/><stop offset='1' stop-color='#AC366F'/></linearGradient> </defs> </svg> <main data-rocket-location-hash="950389ae077130fc6228b3e229f430fd" class="main-content"> <div class="wrapper" data-id="e6f0ddb0" > <div data-rocket-location-hash="bd4592b4165de400d0652d037585401a" class="wrapper__inner"> <div class="block-group" data-id="d638b967"> <div class="wrapper wrapper--simple" data-id="95ea949b" > <div data-rocket-location-hash="41a911d69968347b035b71356072d094" class="wrapper__skip-dom"> <div class="block-columns" data-id="44082b43"> <div class="block-column" data-id="4851f530"> <div class="wrapper wrapper--simple" data-id="c1f0a095" > <div data-rocket-location-hash="7b54553ad76770de4f94a1504eeddc2d" class="wrapper__skip-dom"> <div class="block-post-meta js-block-post-meta" data-id="8a936d62"> <p class="typography block-post-meta__category" data-id="a50849c1" > <a href='https://productive.io/engineering/category/backend/'>Backend</a></p> <span> – </span> <p class="typography block-post-meta__reading-time js-reading-time is-reading-time-hidden" data-id="cbb3b704" > {{minutes}} min read</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="8ae558ec" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="15fb92fe"> <h1 class="typography block-heading__heading" data-id="b03e0eb4" > Custom Fields: Give Your Customers the Fields They Need</h1></div> </div> </div> </div> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="47db58c4" > <div class="wrapper__skip-dom"> <div class="block-columns" data-id="072328b0"> <div class="block-column" data-id="d03bfdc6"> <div class="wrapper wrapper--simple" data-id="5b64f522" > <div class="wrapper__skip-dom"> <div class="block-author-meta js-block-author-meta" data-id="cd3f7881"> <a href="https://productive.io/engineering/author/nikola-buhincek/"> <div class="block-author-meta__image-wrapper"> <picture class="image block-author-meta__image-picture" data-id="0efd19c3" > <img src="https://website-assets.productive.io/uploads/2024/02/profi-e1708437204597.webp" class="image image__img block-author-meta__image-img" alt="" /> </picture> </div> </a> <div class="block-author-meta__content-wrapper"> <a href="https://productive.io/engineering/author/nikola-buhincek/"> <p class="typography block-author-meta__author" data-id="46f39d80" > Nikola Buhiniček</p></a> <div class="typography block-author-meta__info" data-id="30a688c3" > Backend Tech Lead at Productive. Pretty passionate about working on one product and taking part in decision-making. When I’m not coding, you’ll probably find me chilling with my friends and family.</div><p class="typography block-author-meta__date" data-id="9eee8609" > November 14, 2022</p> </div> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="0110ed98" > <div class="wrapper__skip-dom"> <div class="block-share-icons" data-id="e8b4e34e"> <a aria-hidden="false" class="icon icon__link block-share-icons__icon" data-id="ad390155" href=https://www.facebook.com/sharer.php?u=https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-share-icons__icon-elem" data-name="facebook-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='m22 11.9941c0-5.52239-4.4776-9.99996-10-9.99996-5.52243 0-10 4.47757-10 9.99996 0 4.9909 3.65631 9.1282 8.4376 9.8791v-6.9878h-2.5397v-2.8913h2.5397v-2.20359c0-2.50597 1.4935-3.89115 3.7773-3.89115 1.0941 0 2.2388.19547 2.2388.19547v2.46098h-1.2615c-1.2417 0-1.6298.77063-1.6298 1.56239v1.8759h2.7731l-.4429 2.8913h-2.3302v6.9878c4.7813-.7495 8.4376-4.8868 8.4376-9.8791z' fill='currentColor'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-share-icons__icon" data-id="f5602a04" href=https://twitter.com/intent/tweet?text=Custom%20Fields%3A%20Give%20Your%20Customers%20the%20Fields%20They%20Need&url=https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-share-icons__icon-elem" data-name="twitter-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='m22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05-.79-.86-1.9-1.36-3.16-1.36-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.55996-.18-6.72996-1.89-8.83996-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21-.36.1-.74.15-1.13.15-.27 0-.54-.03-.8-.08.54 1.69 2.11 2.95 4 2.98-1.46 1.16-3.31 1.84-5.33 1.84-.34 0-.68-.02-1.02-.06 1.9 1.22 4.16 1.93 6.58 1.93 7.87996 0 12.20996-6.54 12.20996-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z' fill='currentColor'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-share-icons__icon" data-id="4ddc613f" href=https://www.linkedin.com/shareArticle?mini=true&url=https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-share-icons__icon-elem" data-name="linkedin-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='m21 5c0-1.10457-.8954-2-2-2h-14c-1.10457 0-2 .89543-2 2v14c0 1.1046.89543 2 2 2h14c1.1046 0 2-.8954 2-2zm-2.5 8.2v5.3h-2.79v-4.93c0-.7732-.6268-1.4-1.4-1.4-.77 0-1.39.63-1.39 1.4v4.93h-2.79v-8.37h2.79v1.11c.48-.78 1.47-1.3 2.32-1.3 1.8004 0 3.26 1.4596 3.26 3.26zm-11.62-4.64c.92784 0 1.68-.75216 1.68-1.68 0-.93-.75-1.69-1.68-1.69-.93336 0-1.69.75664-1.69 1.69 0 .93.76 1.68 1.69 1.68zm1.39 1.57v8.37h-2.77v-8.37z' fill='currentColor' fill-rule='evenodd'/></svg> </i> </div> </a></div> </div> </div> </div> <div class="block-column" data-id="c0d47746"> <div class="wrapper wrapper--simple" data-id="f83e0c7b" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="1503db75" > <picture class="image media__image-picture" data-id="1861add4" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/Asset_11.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="670f126e" > <div class="wrapper__skip-dom"> <div class="block-columns" data-id="b7d60e14"> <div class="block-column" data-id="393cd5c9"> </div> <div class="block-column" data-id="9dfb863b"> <div class="wrapper wrapper--simple" data-id="cf884480" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="46fe6bc8" > <p class="typography block-paragraph__paragraph" data-id="c34e2cea" > Here at Productive, <strong>we’re building an operating system for digital agencies</strong>.</p></div> </div> </div> </div> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="3c43dfa8" > <div class="wrapper__skip-dom"> <div class="block-columns" data-id="b7879ae2"> <div class="block-column" data-id="b84c35a4"> </div> <div class="block-column" data-id="761d6789"> <div class="wrapper wrapper--simple" data-id="b4034b38" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="8399330a" > <p class="typography block-paragraph__paragraph" data-id="3dd92d38" > But, because each agency is different (think type, size, services they offer, the way they’re set up as an organization…), they need customization options for their workflows. So it’s pretty hard to model all those needs and use cases through a unified data model.<br><br><strong>If only there were a way to let them shape those models to their own needs.</strong></p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="ff97a86f" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="2d226d32" > <picture class="image media__image-picture" data-id="c6dfdf74" > <source srcset="https://website-assets.productive.io/uploads/sites/2/2024/01/custom-fields-shape-those-models-to-your-own-needs.webp" media="(max-width: 479px)" /> <source srcset="https://website-assets.productive.io/uploads/sites/2/2024/01/custom-fields-shape-those-models-to-your-own-needs.webp" media="(max-width: 1279px)" /> <source srcset="https://website-assets.productive.io/uploads/sites/2/2024/01/custom-fields-shape-those-models-to-your-own-needs.webp" media="(max-width: 2159px)" /> <img src="https://website-assets.productive.io/uploads/sites/2/2024/01/custom-fields-shape-those-models-to-your-own-needs.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="f5aeacfe" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="d5a44a89" > <p class="typography block-paragraph__paragraph" data-id="72c91a79" > Let’s say that one of our customers, <em>ACME digital agency</em> wants to keep track of their employees’ nicknames and to be able to search them by that field. Other than that, they would also like to keep track of their birthdays and be able to sort them and group them by that date.<br><br>To me, as a developer, this sounds as simple as it gets—add two new columns to the <em>people</em> table, open those attributes to be editable over the API and send them back in the response.<br>But should we do that? Should we add all kinds of fields to our models even if those fields are going to be used only by a handful of our customers?<br><br>Let me show you how we tackled this type of feature request and made a pretty generic system around it.</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="a2548977" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="81829374"> <h2 class="typography block-heading__heading" data-id="c54e1919" > <strong>What Did Our Customers Want?</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="2d15be29" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="001bd231" > <p class="typography block-paragraph__paragraph" data-id="954db130" > It was pretty clear to us what our customers wanted, and that was:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="c38f76d1" > <div class="wrapper__skip-dom"> <div class="list block-list__list" data-id="94bafc10"> <ul class="typography list__list-element" data-id="c80e5bd7" > <li>to be able to <strong>add additional fields</strong> to some of our models (People, Projects, Tasks, …)</li><li>to have <strong>various data types on those fields</strong> (text, number, or date)</li><li>to be able to <strong>search, sort, or even group</strong> by those fields</li></ul></div> </div> </div> <div class="wrapper wrapper--simple" data-id="d86edd32" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="d4edf7d7"> <h2 class="typography block-heading__heading" data-id="ab0791f4" > <strong>Our Approach</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="06bf3c55" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="d855260a"> <h2 class="typography block-heading__heading" data-id="80a0cd34" > <strong>The Custom Field Model</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="4bb23b4b" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="b7d6626f" > <p class="typography block-paragraph__paragraph" data-id="a8ade8f9" > As we’re building a RESTful <a href="https://developer.productive.io" target="_blank" rel="noreferrer noopener nofollow">API</a> that’s formatted by the <a href="https://jsonapi.org" target="_blank" rel="noreferrer noopener nofollow">JSON:API specification</a> and store our data in a <a href="https://dev.mysql.com/doc/refman/8.0/en/" target="_blank" rel="noreferrer noopener nofollow">MySQL8</a> relational database, a few things were pretty straightforward – we need a new model and we’ll name it <strong>Custom Field</strong> (naming wasn’t an issue here 🥲).<br><br>The main attributes of that model should be:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="840e36d8" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="d5686406" > <picture class="image media__image-picture" data-id="071486a1" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/CF-5-t.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="1f635e68" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="c905b751"> <h2 class="typography block-heading__heading" data-id="7212be81" > <strong>How To Store the Field Values?</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="3f7bc67b" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="215d91b5" > <p class="typography block-paragraph__paragraph" data-id="2ef440ca" > OK, so now that we know how to define custom fields, how can we know which value someone assigned to a custom field for some object? And where to store that information?<br><br>Three possible solutions came to mind:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="43149cea" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="f0c0dc16" > <p class="typography block-paragraph__paragraph" data-id="dc0001cc" > <strong>1. Add a limited number of <em>custom_field</em> columns to our models</strong><br><br>We can add a few custom_field columns to our models and that will work for some of our customers but there will always be others that need few extra fields. Adding numerous columns to our models surely isn’t the best solution, we can do better than this 😅<br><br><br><strong>2. Add a join table</strong><br><br>As mentioned before, while relying on a relational database, a join table sounds like the go-to approach. That table would be a simple join table between the custom field and a polymorphic target (yay, Rails 🥳). Other than those foreign keys, we would have a column to store the value.<br><br><br><strong>3. Add a single JSON column to our models</strong><br><br>This sounded as flexible as it gets. It would be a simple map where the key would be the custom field ID and the value would be the assigned value for that custom field.</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="e62fe0c7" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="02b18e13" > <picture class="image media__image-picture" data-id="0328ed83" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/CF_3_t_1.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="80778d37" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="ac7e4ed1"> <h2 class="typography block-heading__heading" data-id="119039d8" > <strong>Why We Ended Up Choosing JSON</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="5744d2f3" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="bdb38530" > <p class="typography block-paragraph__paragraph" data-id="dcb09b94" > The first solution was just too limited so we discarded that one immediately and focused on the remaining two solutions.<br><br>On one hand, a better design would be to have the custom field values represented by a model but on the other hand, we won’t actually do much with that data. That would just be data that our users set on our objects, data that isn’t important for our business logic. So a simple JSON column didn’t sound bad either.<br><br>The searching and sorting aspect of this feature request was probably the most important one for us. That was supposed to work as fast as it gets, without being a burden to our performance.<br><br>That’s why we implemented both solutions, tested a lot of searching/sorting/grouping scenarios (we’ll go through that in more detail soon), and then checked the metrics.<br><br>The faster solution was the second one, the one with the JSON column, and that made sense to us. That solution doesn’t use <code>JOIN</code> clauses in SQL since the values are written directly in the searched table and can be queried in the <code>WHERE</code> clause. Luckily for us, MySQL8 supports a bunch of <a href="https://dev.mysql.com/doc/refman/8.0/en/json-functions.html" target="_blank" rel="noreferrer noopener">great functions to work with JSON columns</a> (<code>JSON_EXTRACT</code>, <code>JSON_UNQUOTE</code>, <code>JSON_CONTAINS</code> and others).</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="b9e4e625" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="d6f440ce"> <h2 class="typography block-heading__heading" data-id="cd5b62b2" > <strong>Great! Now that we know how to store the custom field values too, let’s dig into the coding.</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="57d809e1" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="0fd98014" > <p class="typography block-paragraph__paragraph" data-id="273409b9" > From a development point of view, we did the following:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="2444a720" > <div class="wrapper__skip-dom"> <div class="list block-list__list" data-id="37ae533b"> <ul class="typography list__list-element" data-id="9c85df8c" > <li>Added a new model, <strong>Custom Field</strong>, and implemented CRUD operations that can be called over the API</li><li>Wrote schema migrations that added a JSON column –<em>custom_fields</em> – to some of our models (people, projects, tasks, …)</li><li>Opened the <em>custom_fields</em> attribute so it can be edited over the API</li><li>Wrote a generic validation that checks if all the values in the <em>custom_fields</em> hash have the appropriate data type</li><li>Added the <em>custom_fields</em> attribute to the API response of the appropriate models</li></ul></div> </div> </div> <div class="wrapper wrapper--simple" data-id="fff68235" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="bc665cea" > <p class="typography block-paragraph__paragraph" data-id="034d51b7" > That was most of the work we needed to do to be able to manage custom fields in our models.<br><br>But…what about the searching and sorting aspect of custom fields?</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="9f7ea6ca" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="5c66bbaa"> <h2 class="typography block-heading__heading" data-id="99ef0a99" > <strong>Searching Through Custom Field Values</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="91102994" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="8cd72571" > <p class="typography block-paragraph__paragraph" data-id="d9908763" > We already had a generic solution written for <a href="https://developer.productive.io/index.html#header-filtering" target="_blank" rel="noreferrer noopener">searching over the API</a>.<br><br>We have a format of sending query params for searching, like <code>filter[attribute][operation]=value</code>. For searching through custom fields, we wanted to keep the same format so we ended with a quite similar one –<code>filter[custom_fields][custom_field_id][operation]=value</code>.<br><br>We had to add an if-else statement that would handle the custom fields filtering in a different way than filtering through other attributes as the format contained one additional argument—<code>custom_field_id</code>.<br><br>What was different in the filtering logic was that we have to load the custom field that’s being filtered by and check what data type its values are. That’s needed to cast the values into numbers or dates—text values don’t make a difference.<br><br>So the query params and its SQL query counterparts, based on custom field type, would look like this:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="2a9003c3" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="3f347fa1" > <picture class="image media__image-picture" data-id="2212f896" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/03.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="e343a26f" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="abc113b2"> <h2 class="typography block-heading__heading" data-id="edf105e4" > <strong>Sorting by Custom Field Values</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="9940012c" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="0ccb6f09" > <p class="typography block-paragraph__paragraph" data-id="70a8c823" > The concept of <a href="https://developer.productive.io/index.html#header-sorting" target="_blank" rel="noreferrer noopener">sorting</a> by attributes is something we also already tackled by abstracting logic.<br><br>The only thing that changes when sorting by custom fields is that we first need to cast the values and then sort by them.<br><br>Once again, there’s a small change in the format for custom fields sorters (<code>sort=custom_fields[custom_field_id]</code>) compared to when sorting by a standard attribute (<code>sort=attribute</code>). We need to handle the custom_fields sorters separately because we have to load the desired custom_field and check its type.<br><br>Then the <code>ORDER BY</code> statement, based on custom field types, looks like this:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="e775130d" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="bd37977e" > <picture class="image media__image-picture" data-id="ef6a4972" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/04.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="b36346d0" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="c744862f"> <h2 class="typography block-heading__heading" data-id="5167f91d" > <strong>Grouping by Custom Field Values</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="56fc957a" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="5c1ad4c9" > <p class="typography block-paragraph__paragraph" data-id="843e0c40" > This was a fun one. The main point here was that you should include the custom fields as some kind of columns stated in the <code>SELECT</code> statement so that you could later use those columns in the <code>GROUP BY</code> statement.<br><br>To get the custom field in the <code>SELECT</code> statement, you have to create a virtual column for it. All we needed to do was to extract the values of the grouped custom field and give that virtual column an alias so that we could reference it in the <code>GROUP BY</code> statement. For the column alias we went with the format <code>custom_fields_{custom_field_id}</code>.<br><br>For a custom field with id=<em>x,</em> this is done as following:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="b5af20af" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="864d9a0d" > <picture class="image media__image-picture" data-id="75ee68db" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/01.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="4ea7f68b" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="3314c8b5" > <p class="typography block-paragraph__paragraph" data-id="7fce2dec" > Once we have the virtual column defined, the grouping part gets done simply, by adding the <code>GROUP BY</code> statement with the earlier mentioned alias.<br><br>So in the end, you get a SQL query like:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="a7c1f73a" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="6b905b9c" > <picture class="image media__image-picture" data-id="4a110ecf" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/02.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="911d59fa" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="7da92cbf"> <h2 class="typography block-heading__heading" data-id="153ea36a" > <strong>What Our Customers Got</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="d406ad2f" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="b08e3464" > <p class="typography block-paragraph__paragraph" data-id="177cde0f" > A simple way to define Custom Fields:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="7979aa01" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="44e6bdfe" > <picture class="image media__image-picture" data-id="43abfb47" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/cf-2.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="0434460d" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="13a97438" > <p class="typography block-paragraph__paragraph" data-id="ecd681ab" > And a place to assign values to their fields:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="a5808f65" > <div class="wrapper__skip-dom"> <div class="media block-media__media media__aspect-ratio--auto" data-id="05f2c3be" > <picture class="image media__image-picture" data-id="44ad5078" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/Screenshot-2022-11-17-at-22.12.36.webp" class="image image__img media__image-img" alt="" /> </picture> </div> </div> </div> <div class="wrapper wrapper--simple" data-id="1c45d381" > <div class="wrapper__skip-dom"> <div class="block-heading" data-id="1f9f6774"> <h2 class="typography block-heading__heading" data-id="f9b8490d" > <strong>Summa Summarum</strong></h2></div> </div> </div> <div class="wrapper wrapper--simple" data-id="2b780d48" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="b225081f" > <p class="typography block-paragraph__paragraph" data-id="ebb864a8" > We made it possible for our customers to define custom fields in our data models. Also, we made it possible to search, sort and group by those fields.<br><br>It wasn’t long before we had even more requests that built upon our custom fields architecture. The fields we supported at first were okay, but now our customers wanted more field types. They wanted:</p></div> </div> </div> <div class="wrapper wrapper--simple" data-id="bf0851c3" > <div class="wrapper__skip-dom"> <div class="list block-list__list" data-id="2fb57357"> <ul class="typography list__list-element" data-id="e98217b4" > <li>to have dropdown custom fields</li><li>to have relational custom fields</li><li>a field where the values would be objects from one of our existing data models</li></ul></div> </div> </div> <div class="wrapper wrapper--simple" data-id="0c6232ab" > <div class="wrapper__skip-dom"> <div class="block-paragraph" data-id="445b0d3d" > <p class="typography block-paragraph__paragraph" data-id="50b6593a" > But before we dig into that, let’s give some time for this basics to sink in. I’ll be back soon with another blog post in which I cover how we solved that new set of feature requests.</p></div> </div> </div> </div> </div> </div> </div> <div class="wrapper" data-id="8c2323f5" > <div data-rocket-location-hash="c569182169106c8d04555ccd39a20279" class="wrapper__inner"> <div class="block-share-icons" data-id="c07f5181"> <a aria-hidden="false" class="icon icon__link block-share-icons__icon" data-id="f9e7a886" href=https://www.facebook.com/sharer.php?u=https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-share-icons__icon-elem" data-name="facebook-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='m22 11.9941c0-5.52239-4.4776-9.99996-10-9.99996-5.52243 0-10 4.47757-10 9.99996 0 4.9909 3.65631 9.1282 8.4376 9.8791v-6.9878h-2.5397v-2.8913h2.5397v-2.20359c0-2.50597 1.4935-3.89115 3.7773-3.89115 1.0941 0 2.2388.19547 2.2388.19547v2.46098h-1.2615c-1.2417 0-1.6298.77063-1.6298 1.56239v1.8759h2.7731l-.4429 2.8913h-2.3302v6.9878c4.7813-.7495 8.4376-4.8868 8.4376-9.8791z' fill='currentColor'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-share-icons__icon" data-id="d5952ee7" href=https://twitter.com/intent/tweet?text=Custom%20Fields%3A%20Give%20Your%20Customers%20the%20Fields%20They%20Need&url=https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-share-icons__icon-elem" data-name="twitter-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='m22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05-.79-.86-1.9-1.36-3.16-1.36-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.55996-.18-6.72996-1.89-8.83996-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21-.36.1-.74.15-1.13.15-.27 0-.54-.03-.8-.08.54 1.69 2.11 2.95 4 2.98-1.46 1.16-3.31 1.84-5.33 1.84-.34 0-.68-.02-1.02-.06 1.9 1.22 4.16 1.93 6.58 1.93 7.87996 0 12.20996-6.54 12.20996-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z' fill='currentColor'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-share-icons__icon" data-id="8ed3694f" href=https://www.linkedin.com/shareArticle?mini=true&url=https://productive.io/engineering/custom-fields-give-your-customers-the-fields-they-need target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-share-icons__icon-elem" data-name="linkedin-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='m21 5c0-1.10457-.8954-2-2-2h-14c-1.10457 0-2 .89543-2 2v14c0 1.1046.89543 2 2 2h14c1.1046 0 2-.8954 2-2zm-2.5 8.2v5.3h-2.79v-4.93c0-.7732-.6268-1.4-1.4-1.4-.77 0-1.39.63-1.39 1.4v4.93h-2.79v-8.37h2.79v1.11c.48-.78 1.47-1.3 2.32-1.3 1.8004 0 3.26 1.4596 3.26 3.26zm-11.62-4.64c.92784 0 1.68-.75216 1.68-1.68 0-.93-.75-1.69-1.68-1.69-.93336 0-1.69.75664-1.69 1.69 0 .93.76 1.68 1.69 1.68zm1.39 1.57v8.37h-2.77v-8.37z' fill='currentColor' fill-rule='evenodd'/></svg> </i> </div> </a></div> </div> </div> <div class="wrapper" data-id="fd8cdf8c" > <div data-rocket-location-hash="6c662d8228c352a4a1d379138f400a5b" class="wrapper__inner"> <div class="block-author-meta-position js-block-author-meta-position" data-id="ee427b4c"> <div class="block-author-meta-position__wrapper"> <div class="block-author-meta-position__image-wrapper"> <picture class="image block-author-meta-position__image-picture" data-id="e94de69a" > <img src="https://website-assets.productive.io/uploads/2024/02/profi-e1708437204597.webp" class="image image__img block-author-meta-position__image-img" alt="" /> </picture> </div> <div class="block-author-meta-position__content-wrapper"> <p class="typography block-author-meta-position__author" data-id="b4984013" > Nikola Buhiniček</p><div class="typography block-author-meta-position__info" data-id="1725e11b" > Backend Tech Lead at Productive. Pretty passionate about working on one product and taking part in decision-making. When I’m not coding, you’ll probably find me chilling with my friends and family.</div><a href="https://productive.io/engineering/author/nikola-buhincek/" class="btn btn__as-link btn__type--primary block-author-meta-position__button" id="" aria-label="" data-id="7bda677e" > More From This Author<div aria-hidden="true" class="icon btn__icon" data-id="b33ea855" > <i class="btn__icon-elem" data-name="arrow-right-16"> <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill='none' d='M0 8h14M8.678 13.36L14 8 8.678 2.64' stroke='currentColor' stroke-width='2'/></svg> </i> </div> </a> </div> </div> </div> </div> </div> <div class="wrapper" data-id="208c898f" > <div data-rocket-location-hash="3aaa0094e585bf405e4fe65d724a27b7" class="wrapper__inner"> <div class="block-heading" data-id="45c2ca07"> <h2 class="typography block-heading__heading" data-id="1e28b09b" > Related articles</h2></div> </div> </div> <div class="wrapper" data-id="8e72b306" > <div data-rocket-location-hash="1efae64b68eaf498abb903f943f1b7ec" class="wrapper__inner"> <div class="post-listing js-post-listing block-post-listing post-listing--related-posts js-post-listing" data-blog-slug="/engineering/" data-id=a7b739a1 data-per-page=2 data-display-as=card data-show-featured-img=true data-show-read-btn=false data-show-excerpt=false data-show-category=true data-read-btn-text=Read article data-block-class=post-listing data-nonce=ccabd9cae0 data-page=1 data-skip=0 data-categories=11,7 data-exclude=250 data-card-caption-color=green500 data-card-heading-color=black data-card-heading-highlight-color=black data-card-heading-font-size=24-bold data-card-paragraph-color=black data-card-paragraph-font-size=18-regular data-card-image-left=false > <div class="post-listing__posts js-post-listing-posts"> <a href="https://productive.io/engineering/integrations-series-authentication-and-connection/" class="card-simple post-listing__card-simple" data-id="ac0820b3" > <picture class="image card-simple__image-picture" data-id="35c386d6" > <img src="https://website-assets.productive.io/uploads/sites/2/2024/01/Blog@3x-768x322.webp" class="image image__img card-simple__image-img" alt="" /> </picture><p class="typography card-simple__intro" data-id="299c6754" > Engineering</p><h2 class="typography card-simple__heading" data-id="b5ac6e1f" > Integrations Series: Authentication And Connection</h2> </a><a href="https://productive.io/engineering/a-close-call-with-real-time-how-rethinking-pub-sub-saved-the-day/" class="card-simple post-listing__card-simple" data-id="5bc8f06a" > <picture class="image card-simple__image-picture" data-id="aef6d171" > <img src="https://website-assets.productive.io/uploads/sites/2/2024/01/BP@2x-768x322.webp" class="image image__img card-simple__image-img" alt="" /> </picture><p class="typography card-simple__intro" data-id="5a41655e" > Backend • Testing</p><h2 class="typography card-simple__heading" data-id="d0213541" > A Close Call with Real-Time: How Rethinking Pub-Sub Saved the Day</h2> </a> </div> <div class="post-listing__loader js-post-listing-loader"> <div class="loader"> <svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1' stroke='var(--loader-color-1, currentColor)'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle><circle cx='22' cy='22' r='1' stroke='var(--loader-color-2, currentColor)'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle></g></svg></div> </div> </div> </div> </div> <div class="wrapper" data-id="586ce053" > <div data-rocket-location-hash="5a59a2a611983f87fb50072404c8127c" class="wrapper__inner"> <div class="block-heading" data-id="c258e3e5"> <h2 class="typography block-heading__heading" data-id="a1a2d906" > Related jobs</h2></div> </div> </div> <div class="wrapper" data-id="8998b8d3" > <div data-rocket-location-hash="f7cb39a2dd7c0f3ac9f3390164776171" class="wrapper__inner"> <div class="block-job-listing job-listing"> <div> <a href="https://productive.io/careers/open-job-application/" class="job-card" data-id="3f5d8c41"> <div class="job-card__col job-card__col--left"> <p class="typography job-card__heading" data-id="5771ae6e"> Open Job Application</p><p class="typography job-card__paragraph" data-id="4d26939b"> </p> </div> <div class="job-card__col job-card__col--right"> <button class="chevron job-card__chevron" aria-label="" data-id="9cd05d31"> <div aria-hidden="true" class="icon chevron__icon" data-id="3be74d8c"> <i class="chevron__icon-elem" data-name="chevron-right-16"> <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 2.64L11.322 8 6 13.36' fill='none' stroke='currentColor' stroke-width='2' /></svg> </i> </div> </button> </div> </a> </div> </div> </div> </div> </main> <div data-rocket-location-hash="844db0852990759b40c699eeb18245e3" class="layout footer-partial"> <div data-rocket-location-hash="62f27bd5fd58902c388b30cac61ee567" class="layout__main footer-partial__main"> <div data-rocket-location-hash="cb35478668fb5f0f7109acec9a6a269c" class="layout__main-inner footer-partial__main-inner"> <div class="block-footer-minimal"> <a href="https://productive.io"> <div class="block-footer-minimal__logo"> <picture class="image block-footer-minimal__logo-picture" data-id="272be4da" > <img src="https://productive.io/engineering/wp-content/uploads/sites/2/2022/11/logo-white.svg" class="image image__img block-footer-minimal__logo-img" alt="" /> </picture> </div> </a> <div class="block-footer-minimal__social"> <a aria-hidden="false" class="icon icon__link block-footer-minimal__icon" data-id="8a97de43" href=https://www.facebook.com/productiveio/ target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-footer-minimal__icon-elem" data-name="facebook-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='m22 11.9941c0-5.52239-4.4776-9.99996-10-9.99996-5.52243 0-10 4.47757-10 9.99996 0 4.9909 3.65631 9.1282 8.4376 9.8791v-6.9878h-2.5397v-2.8913h2.5397v-2.20359c0-2.50597 1.4935-3.89115 3.7773-3.89115 1.0941 0 2.2388.19547 2.2388.19547v2.46098h-1.2615c-1.2417 0-1.6298.77063-1.6298 1.56239v1.8759h2.7731l-.4429 2.8913h-2.3302v6.9878c4.7813-.7495 8.4376-4.8868 8.4376-9.8791z' fill='currentColor'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-footer-minimal__icon" data-id="bdb13814" href=https://www.linkedin.com/company/productive-io/ target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-footer-minimal__icon-elem" data-name="linkedin-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='m21 5c0-1.10457-.8954-2-2-2h-14c-1.10457 0-2 .89543-2 2v14c0 1.1046.89543 2 2 2h14c1.1046 0 2-.8954 2-2zm-2.5 8.2v5.3h-2.79v-4.93c0-.7732-.6268-1.4-1.4-1.4-.77 0-1.39.63-1.39 1.4v4.93h-2.79v-8.37h2.79v1.11c.48-.78 1.47-1.3 2.32-1.3 1.8004 0 3.26 1.4596 3.26 3.26zm-11.62-4.64c.92784 0 1.68-.75216 1.68-1.68 0-.93-.75-1.69-1.68-1.69-.93336 0-1.69.75664-1.69 1.69 0 .93.76 1.68 1.69 1.68zm1.39 1.57v8.37h-2.77v-8.37z' fill='currentColor' fill-rule='evenodd'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-footer-minimal__icon" data-id="7ebfc8ed" href=https://www.instagram.com/productive.io/ target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-footer-minimal__icon-elem" data-name="instagram-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='m7.8 2h8.4c3.2 0 5.8 2.6 5.8 5.8v8.4c0 3.2033-2.5967 5.8-5.8 5.8h-8.4c-3.2 0-5.8-2.6-5.8-5.8v-8.4c0-3.20325 2.59675-5.8 5.8-5.8zm-.2 2c-1.98823 0-3.6 1.61177-3.6 3.6v8.8c0 1.99 1.61 3.6 3.6 3.6h8.8c1.9882 0 3.6-1.6118 3.6-3.6v-8.8c0-1.99-1.61-3.6-3.6-3.6zm10.9 2.75c0-.69036-.5596-1.25-1.25-1.25s-1.25.55964-1.25 1.25.5596 1.25 1.25 1.25 1.25-.55964 1.25-1.25zm-6.5.25c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.76142 0-5-2.2386-5-5 0-2.76142 2.23858-5 5-5zm-3 5c0-1.6569 1.3431-3 3-3s3 1.3431 3 3-1.3431 3-3 3-3-1.3431-3-3z' fill='currentColor' fill-rule='evenodd'/></svg> </i> </div> </a><a aria-hidden="false" class="icon icon__link block-footer-minimal__icon" data-id="669b99e3" href=https://twitter.com/productiveio target=_blank rel="noopener noreferrer" > <div class="icon__backplate" > <i class="block-footer-minimal__icon-elem" data-name="twitter-24"> <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='m22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05-.79-.86-1.9-1.36-3.16-1.36-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98-3.55996-.18-6.72996-1.89-8.83996-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21-.36.1-.74.15-1.13.15-.27 0-.54-.03-.8-.08.54 1.69 2.11 2.95 4 2.98-1.46 1.16-3.31 1.84-5.33 1.84-.34 0-.68-.02-1.02-.06 1.9 1.22 4.16 1.93 6.58 1.93 7.87996 0 12.20996-6.54 12.20996-12.21 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z' fill='currentColor'/></svg> </i> </div> </a> </div> </div> </div> </div> </div><div data-rocket-location-hash="2b0b5097ee87939a1d88097260b572c0" class="gdpr-modal__backdrop js-gdpr-modal-backdrop"></div> <div data-rocket-location-hash="b7c811cb2bbc63af176512bc61d172cb" class="gdpr-modal js-gdpr-modal" data-modal="gdpr"> <div data-rocket-location-hash="8d9f0ca99e678b76c1ea70015cdd6d96" class="gdpr-modal__container"> <div data-rocket-location-hash="57f57216aaeb3fc51ac81b4110afa504" class="gdpr-modal__content gdpr-modal__content--advance js-gdpr-modal-screen-advance"> <div class="gdpr-modal__header"> <p class="typography gdpr-modal__heading gdpr-modal__title" data-id="2d9c55d0" > We need your consent to continue</p> <i class="gdpr-modal__close js-gdpr-modal-hide-advance"></i> </div> <div class="gdpr-modal__body"> <div class="gdpr-modal__level"> <div class="gdpr-modal__level-content"> <h3 class="typography gdpr-modal__heading gdpr-modal__selection-item-title" data-id="9e2dd6aa" > Necessary cookies</h3><p class="typography gdpr-modal__paragraph gdpr-modal__selection-item-summary" data-id="6ab789a6" > Cookies for the basic functionality of the Productive website.</p> </div> <div class="gdpr-modal__toggle"> <p class="typography gdpr-modal__paragraph" data-id="73e3950b" > Always on</p> </div> </div> <div class="gdpr-modal__level"> <div class="gdpr-modal__level-content"> <h3 class="typography gdpr-modal__heading gdpr-modal__selection-item-title" data-id="f49cadc8" > Functional cookies</h3><p class="typography gdpr-modal__paragraph gdpr-modal__selection-item-summary" data-id="242a5869" > Cookies for additional functionality and increased website security.</p> </div> <div class="gdpr-modal__toggle"> <div class="toggle gdpr-modal__toggle js-gdpr-modal-toggle" data-id="d62d33bd"> <label class="toggle__label"> <input name="" class="toggle__checkbox js-gdpr-modal-toggle-input js-gdpr-modal-toggle-input-functional" value="functional" type="checkbox" data-level=1 /> <span class="toggle__background"></span> <span class="toggle__toggle-circle"></span> <span class="toggle__hidden-label"></span> </label> </div> </div> </div> <div class="gdpr-modal__level"> <div class="gdpr-modal__level-content"> <h3 class="typography gdpr-modal__heading gdpr-modal__selection-item-title" data-id="55619c57" > Targeting cookies</h3><p class="typography gdpr-modal__paragraph gdpr-modal__selection-item-summary" data-id="89b7508b" > Advertising and analytics service cookies that create day-to-day statistics and show ads on their site and on the advertiser’s partners websites.</p> </div> <div class="gdpr-modal__toggle"> <div class="toggle gdpr-modal__toggle js-gdpr-modal-toggle" data-id="3f1a6911"> <label class="toggle__label"> <input name="" class="toggle__checkbox js-gdpr-modal-toggle-input js-gdpr-modal-toggle-input-marketing" value="marketing" type="checkbox" data-level=2 /> <span class="toggle__background"></span> <span class="toggle__toggle-circle"></span> <span class="toggle__hidden-label"></span> </label> </div> </div> </div> </div> <div class="gdpr-modal__description"> <div class="gdpr-modal__btn-container"> <button name="" class="btn btn__type--primary gdpr-modal__btn js-gdpr-modal__btn-advance js-gdpr-modal-btn js-gdpr-modal-btn-advance" id="" aria-label="" data-id="bfa1ef3c" data-level=2 > <p class="typography btn__label js-gdpr-modal__btn-advance js-gdpr-modal-btn js-gdpr-modal-btn-advance js-button-label" data-id="000c57ba" > Save changes</p> </button> </div> <div class="gdpr-modal__btn-container"> <button name="" class="btn btn__as-link btn__type--primary gdpr-modal__btn" id="" aria-label="" data-id="f220e4dc" target=_blank rel="noopener noreferrer" > <p class="typography btn__label js-button-label" data-id="1c567a88" > Privacy Policy</p> </button> </div> </div> </div> <div data-rocket-location-hash="6492fdc453252217a47acfdefe8b2ea0" class="gdpr-modal__content gdpr-modal__content--basic js-gdpr-modal-screen-basic"> <span class="gdpr-modal__intro"> <p class="typography gdpr-modal__paragraph gdpr-modal__selection-item-summary" data-id="3e52400b" > <a href="#" class="gdpr-modal__more-link js-gdpr-modal-show-advance"><strong>Manage cookies</strong></a> and help us deliver our services. By using our services, you agree to our use of cookies.</p> </span> <button name="" class="btn btn__type--primary gdpr-modal__btn js-gdpr-modal-btn" id="" aria-label="" data-id="d9a5e7e1" data-level=2 > <p class="typography btn__label js-gdpr-modal-btn js-button-label" data-id="381ec08e" > I agree</p> </button> </div> </div> </div><style id='esCssVariables'> .block-post-meta[data-id='8a936d62']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .typography[data-id='a50849c1']{ --typography-color: var(--typography-color-override, var(--global-colors-green300)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-uppercase: uppercase; --typography-letter-spacing: 0.4px; --es-ft-sm-font-size: 0.6875; --es-ft-md-font-size: 0.75; --es-ft-lg-font-size: 0.875; --typography-line-height: 1.33; --typography-font-weight: bold; } .typography[data-id='cbb3b704']{ --typography-color: var(--typography-color-override, var(--global-colors-grey300)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-uppercase: uppercase; --typography-letter-spacing: 0.4px; --es-ft-sm-font-size: 0.6875; --es-ft-md-font-size: 0.75; --es-ft-lg-font-size: 0.875; --typography-line-height: 1.33; --typography-font-weight: bold; } .wrapper[data-id='c1f0a095']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='15fb92fe']{ --heading-align: left; } .typography[data-id='b03e0eb4']{ --typography-color: var(--typography-color-override, var(--global-colors-white)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-font-family: var(--global-font-family); --typography-letter-spacing: -3px; --es-ft-sm-font-size: 3; --es-ft-md-font-size: 4.375; --es-ft-lg-font-size: 5.625; --typography-line-height: 1.07; --typography-font-weight: bold; } .wrapper[data-id='8ae558ec']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-column[data-id='4851f530']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='4851f530']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .block-columns[data-id='44082b43']{ --columns-grid-side-columns: var(--wrapper-grid-side-columns); } .wrapper[data-id='95ea949b']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-author-meta[data-id='cd3f7881']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .image[data-id='0efd19c3']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .typography[data-id='46f39d80']{ --typography-color: var(--typography-color-override, var(--global-colors-green300)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-uppercase: uppercase; --typography-letter-spacing: 0.4px; --es-ft-sm-font-size: 0.6875; --es-ft-md-font-size: 0.75; --es-ft-lg-font-size: 0.875; --typography-line-height: 1.33; --typography-font-weight: bold; } .typography[data-id='30a688c3']{ --typography-color: var(--typography-color-override, var(--global-colors-white)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.875; --es-ft-md-font-size: 1; --es-ft-lg-font-size: 1.25; --typography-line-height: 1.5; } .typography[data-id='9eee8609']{ --typography-color: var(--typography-color-override, var(--global-colors-white)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.75; --es-ft-md-font-size: 0.875; --es-ft-lg-font-size: 1.0625; --typography-letter-spacing: 0.2px; --typography-line-height: 1.43; } .wrapper[data-id='5b64f522']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-share-icons[data-id='e8b4e34e']{ --share-icons-align: flex-start; } .icon[data-id='ad390155']{ --icon-backplate-color: var(--global-colors-white); --icon-color: var(--global-colors-white); --icon-on-backplate-color: var(--global-colors-black); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='f5602a04']{ --icon-backplate-color: var(--global-colors-white); --icon-color: var(--global-colors-white); --icon-on-backplate-color: var(--global-colors-black); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='4ddc613f']{ --icon-backplate-color: var(--global-colors-white); --icon-color: var(--global-colors-white); --icon-on-backplate-color: var(--global-colors-black); --icon-size: calc(var(--base-font-size) * 4rem); } .wrapper[data-id='0110ed98']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-column[data-id='d03bfdc6']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='d03bfdc6']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .media[data-id='1503db75']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(10 / 10) * 2rem)); } .image[data-id='1861add4']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='f83e0c7b']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-column[data-id='c0d47746']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='c0d47746']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .block-columns[data-id='072328b0']{ --columns-grid-side-columns: var(--wrapper-grid-side-columns); } .wrapper[data-id='47db58c4']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-group[data-id='d638b967']{ --group-border-radius: 0; } .wrapper[data-id='e6f0ddb0']{ --wrapper-z-index: 1; --wrapper-bg-color-solid: #1b0066; --wrapper-display-type: grid; } .block-column[data-id='393cd5c9']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='393cd5c9']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .block-paragraph[data-id='46fe6bc8']{ --paragraph-align: left; } .typography[data-id='c34e2cea']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-black); --typography-letter-spacing: -1px; --es-ft-sm-font-size: 1.5; --es-ft-md-font-size: 2.25; --es-ft-lg-font-size: 3; --typography-line-height: 1.167; } .wrapper[data-id='cf884480']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-column[data-id='9dfb863b']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='9dfb863b']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .block-columns[data-id='b7d60e14']{ --columns-grid-side-columns: var(--wrapper-grid-side-columns); } .wrapper[data-id='670f126e']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-column[data-id='b84c35a4']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='b84c35a4']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .block-paragraph[data-id='8399330a']{ --paragraph-align: left; } .typography[data-id='3dd92d38']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-black); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='b4034b38']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='2d226d32']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(10 / 10) * 2rem)); } .image[data-id='c6dfdf74']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='ff97a86f']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='d5a44a89']{ --paragraph-align: left; } .typography[data-id='72c91a79']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-indigo); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='f5aeacfe']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='81829374']{ --heading-align: left; } .typography[data-id='c54e1919']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='a2548977']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='001bd231']{ --paragraph-align: left; } .typography[data-id='954db130']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-indigo); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='2d15be29']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .list[data-id='94bafc10']{ --list-icon-type: ''; --list-icon-size: calc(var(--base-font-size) * 0.8rem); --list-icon-position-top-mobile: calc(var(--es-ft-list-sm-font-size) * 0.5rem); --list-icon-position-top-tablet: calc(var(--es-ft-list-md-font-size) * 0.5rem); --list-icon-position-top-desktop: calc(var(--es-ft-list-lg-font-size) * 0.5rem); --list-icon-position-top-large: calc(var(--es-ft-list-lg-font-size) * 0.5rem); --list-icon-position-transform: none; --list-icon-color: var(--global-colors-black); --list-item-margin-bottom: calc(var(--base-font-size) * 2.4rem); --es-ft-list-sm-font-size: 1.125; --es-ft-list-md-font-size: 1.25; --es-ft-list-lg-font-size: 1.625; --checkmark-top-margin: calc(var(--base-font-size) * 0.2rem); } .typography[data-id='c80e5bd7']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='c38f76d1']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='d4edf7d7']{ --heading-align: left; } .typography[data-id='ab0791f4']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-letter-spacing: -1px; --es-ft-sm-font-size: 1.5; --es-ft-md-font-size: 2.25; --es-ft-lg-font-size: 3; --typography-line-height: 1.167; } .wrapper[data-id='d86edd32']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='d855260a']{ --heading-align: left; } .typography[data-id='80a0cd34']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='06bf3c55']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='b7d6626f']{ --paragraph-align: left; } .typography[data-id='a8ade8f9']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-black); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='4bb23b4b']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='d5686406']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(10 / 10) * 2rem)); } .image[data-id='071486a1']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='840e36d8']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='c905b751']{ --heading-align: left; } .typography[data-id='7212be81']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='1f635e68']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='215d91b5']{ --paragraph-align: left; } .typography[data-id='2ef440ca']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-indigo); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='3f7bc67b']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='f0c0dc16']{ --paragraph-align: left; } .typography[data-id='dc0001cc']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-black); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='43149cea']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='02b18e13']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(10 / 10) * 2rem)); } .image[data-id='0328ed83']{ --image-width: 100%; --image-img-width: 100%; --image-height: 100%; --image-img-height: 100%; --image-img-max-width: 100%; --image-img-max-height: 100%; --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='e62fe0c7']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='ac7e4ed1']{ --heading-align: left; } .typography[data-id='119039d8']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; --typography-font-weight: bold; } .wrapper[data-id='80778d37']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='bdb38530']{ --paragraph-align: left; } .typography[data-id='dcb09b94']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-indigo); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='5744d2f3']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='d6f440ce']{ --heading-align: left; } .typography[data-id='cd5b62b2']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='b9e4e625']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='0fd98014']{ --paragraph-align: left; } .typography[data-id='273409b9']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='57d809e1']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .list[data-id='37ae533b']{ --list-icon-type: ''; --list-icon-size: calc(var(--base-font-size) * 0.8rem); --list-icon-position-top-mobile: calc(var(--es-ft-list-sm-font-size) * 0.5rem); --list-icon-position-top-tablet: calc(var(--es-ft-list-md-font-size) * 0.5rem); --list-icon-position-top-desktop: calc(var(--es-ft-list-lg-font-size) * 0.5rem); --list-icon-position-top-large: calc(var(--es-ft-list-lg-font-size) * 0.5rem); --list-icon-position-transform: none; --list-icon-color: var(--global-colors-black); --list-item-margin-bottom: calc(var(--base-font-size) * 2.4rem); --es-ft-list-sm-font-size: 1.125; --es-ft-list-md-font-size: 1.25; --es-ft-list-lg-font-size: 1.625; --checkmark-top-margin: calc(var(--base-font-size) * 0.2rem); } .typography[data-id='9c85df8c']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='2444a720']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='bc665cea']{ --paragraph-align: left; } .typography[data-id='034d51b7']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='fff68235']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='5c66bbaa']{ --heading-align: left; } .typography[data-id='99ef0a99']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='9f7ea6ca']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='8cd72571']{ --paragraph-align: left; } .typography[data-id='d9908763']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='91102994']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='3f347fa1']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(0 / 10) * 2rem)); } .image[data-id='2212f896']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='2a9003c3']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='abc113b2']{ --heading-align: left; } .typography[data-id='edf105e4']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='e343a26f']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='0ccb6f09']{ --paragraph-align: left; } .typography[data-id='70a8c823']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='9940012c']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='bd37977e']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(0 / 10) * 2rem)); } .image[data-id='ef6a4972']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='e775130d']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='c744862f']{ --heading-align: left; } .typography[data-id='5167f91d']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='b36346d0']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='5c1ad4c9']{ --paragraph-align: left; } .typography[data-id='843e0c40']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='56fc957a']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='864d9a0d']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(0 / 10) * 2rem)); } .image[data-id='75ee68db']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='b5af20af']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='3314c8b5']{ --paragraph-align: left; } .typography[data-id='7fce2dec']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='4ea7f68b']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='6b905b9c']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(0 / 10) * 2rem)); } .image[data-id='4a110ecf']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='a7c1f73a']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='7da92cbf']{ --heading-align: left; } .typography[data-id='153ea36a']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='911d59fa']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='b08e3464']{ --paragraph-align: left; } .typography[data-id='177cde0f']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='d406ad2f']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='44e6bdfe']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(10 / 10) * 2rem)); } .image[data-id='43abfb47']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='7979aa01']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='13a97438']{ --paragraph-align: left; } .typography[data-id='ecd681ab']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='0434460d']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .media[data-id='05f2c3be']{ --media-align-horizontal: center; --media-align-vertical: center; --media-object-position: center center; --media-rounded-corners: calc(var(--base-font-size) * (calc(10 / 10) * 2rem)); } .image[data-id='44ad5078']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .wrapper[data-id='a5808f65']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-heading[data-id='1f9f6774']{ --heading-align: left; } .typography[data-id='f9b8490d']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; } .wrapper[data-id='1c45d381']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='b225081f']{ --paragraph-align: left; } .typography[data-id='ebb864a8']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='2b780d48']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .list[data-id='2fb57357']{ --list-icon-type: ''; --list-icon-size: calc(var(--base-font-size) * 0.8rem); --list-icon-position-top-mobile: calc(var(--es-ft-list-sm-font-size) * 0.5rem); --list-icon-position-top-tablet: calc(var(--es-ft-list-md-font-size) * 0.5rem); --list-icon-position-top-desktop: calc(var(--es-ft-list-lg-font-size) * 0.5rem); --list-icon-position-top-large: calc(var(--es-ft-list-lg-font-size) * 0.5rem); --list-icon-position-transform: none; --list-icon-color: var(--global-colors-black); --list-item-margin-bottom: calc(var(--base-font-size) * 2.4rem); --es-ft-list-sm-font-size: 1.125; --es-ft-list-md-font-size: 1.25; --es-ft-list-lg-font-size: 1.625; --checkmark-top-margin: calc(var(--base-font-size) * 0.2rem); } .typography[data-id='e98217b4']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='bf0851c3']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-paragraph[data-id='445b0d3d']{ --paragraph-align: left; } .typography[data-id='50b6593a']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.125; --es-ft-md-font-size: 1.25; --es-ft-lg-font-size: 1.625; --typography-line-height: 1.4; } .wrapper[data-id='0c6232ab']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-column[data-id='761d6789']{ --column-horizontal-padding: calc(var(--base-font-size) * 0rem); --column-background-color: var(--global-colors-unset); --column-border-color-mobile: var(--global-colors-indigo); --column-border-color-desktop: var(--global-colors-indigo); } .block-column[data-id='761d6789']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .block-columns[data-id='b7879ae2']{ --columns-grid-side-columns: var(--wrapper-grid-side-columns); } .wrapper[data-id='3c43dfa8']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: block; } .block-share-icons[data-id='c07f5181']{ --share-icons-align: flex-end; } .icon[data-id='f9e7a886']{ --icon-backplate-color: var(--global-colors-black); --icon-color: var(--global-colors-black); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='d5952ee7']{ --icon-backplate-color: var(--global-colors-black); --icon-color: var(--global-colors-black); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='8ed3694f']{ --icon-backplate-color: var(--global-colors-black); --icon-color: var(--global-colors-black); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .wrapper[data-id='8c2323f5']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: grid; } .block-author-meta-position[data-id='ee427b4c']{ --wrapper-spacing-top: initial;; --wrapper-spacing-bottom: initial;; --wrapper-spacing-top-in: initial;; --wrapper-spacing-bottom-in: initial;; --wrapper-divider-top: initial; --wrapper-divider-bottom: initial;; --wrapper-display: initial;; --wrapper-is-full-width: initial;; --wrapper-grid-template-columns: initial;; --wrapper-display-type: initial; } .image[data-id='e94de69a']{ --image-width: 100%; --image-img-width: 100%; --image-height: 100%; --image-img-height: 100%; --image-img-max-width: 100%; --image-img-max-height: 100%; --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .typography[data-id='b4984013']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; --typography-font-weight: bold; } .typography[data-id='1725e11b']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.875; --es-ft-md-font-size: 1; --es-ft-lg-font-size: 1.25; --typography-line-height: 1.5; } .btn[data-id='7bda677e']{ --button-color: var(--global-colors-white); --button-color-hover: var(--global-colors-white); --button-secondary-color: var(--global-colors-indigo); --button-secondary-color-hover: var(--global-colors-white); --button-border-color: var(--global-colors-indigo); --button-background-color: var(--global-colors-indigo); --button-background-color-hover: var(--global-gradients-gradient-1); --button-color-is-link: var(--global-colors-indigo); --button-color-is-link-hover: var(--global-colors-black); --button-border-radius: calc(var(--base-font-size) * 3rem); --button-padding-vertical: calc(var(--base-font-size) * 1.3rem); --button-padding-horizontal: calc(var(--base-font-size) * 2.4rem); --button-display: inline-flex; --button-width: auto; --button-border-radius: 0; --button-background-color: transparent; --button-background-color-hover: transparent; --button-padding-vertical: 0; --button-padding-horizontal: 0; --button-color: var(--button-color-is-link); --button-color-hover: var(--button-color-is-link-hover); --button-display: inline; --button-icon-left-space: calc(var(--base-font-size) * 1rem); --button-icon-right-space: 0; --button-flex-direction: row; } .icon[data-id='b33ea855']{ --icon-size: calc(var(--base-font-size) * 1.6rem); } .wrapper[data-id='fd8cdf8c']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: grid; } .block-heading[data-id='45c2ca07']{ --heading-align: left; } .typography[data-id='1e28b09b']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-letter-spacing: -1px; --es-ft-sm-font-size: 1.5; --es-ft-md-font-size: 2.25; --es-ft-lg-font-size: 3; --typography-line-height: 1.167; --typography-font-weight: bold; } .wrapper[data-id='208c898f']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: grid; } .card-simple[data-id='ac0820b3']{ --card-text-align: left; --card-content-align: flex-start; --card-media-align: flex-start; --card-intro-margin-top: 0; --card-intro-margin-bottom: calc(var(--base-font-size) * 1.25rem); --card-template-rows: repeat(7, max-content); --card-template-cols: 1fr; --card-template-areas: 'a' 'b' 'c' 'd' 'e' 'f' 'g'; --card-forced-background-color: var(--global-colors-initial); --card-forced-border-radius: initial; } .image[data-id='35c386d6']{ --image-width: 100%; --image-img-width: 100%; --image-height: 100%; --image-img-height: 100%; --image-img-max-width: 100%; --image-img-max-height: 100%; --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: calc(var(--base-font-size) * 2rem); } .typography[data-id='299c6754']{ --typography-color: var(--typography-color-override, var(--global-colors-green500)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-uppercase: uppercase; --typography-letter-spacing: 0.4px; --es-ft-sm-font-size: 0.6875; --es-ft-md-font-size: 0.75; --es-ft-lg-font-size: 0.875; --typography-line-height: 1.33; --typography-font-weight: bold; } .typography[data-id='b5ac6e1f']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-black); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; --typography-font-weight: bold; } .card-simple[data-id='5bc8f06a']{ --card-text-align: left; --card-content-align: flex-start; --card-media-align: flex-start; --card-intro-margin-top: 0; --card-intro-margin-bottom: calc(var(--base-font-size) * 1.25rem); --card-template-rows: repeat(7, max-content); --card-template-cols: 1fr; --card-template-areas: 'a' 'b' 'c' 'd' 'e' 'f' 'g'; --card-forced-background-color: var(--global-colors-initial); --card-forced-border-radius: initial; } .image[data-id='aef6d171']{ --image-width: 100%; --image-img-width: 100%; --image-height: 100%; --image-img-height: 100%; --image-img-max-width: 100%; --image-img-max-height: 100%; --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: calc(var(--base-font-size) * 2rem); } .typography[data-id='5a41655e']{ --typography-color: var(--typography-color-override, var(--global-colors-green500)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-uppercase: uppercase; --typography-letter-spacing: 0.4px; --es-ft-sm-font-size: 0.6875; --es-ft-md-font-size: 0.75; --es-ft-lg-font-size: 0.875; --typography-line-height: 1.33; --typography-font-weight: bold; } .typography[data-id='d0213541']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-highlight-color: var(--global-colors-black); --es-ft-sm-font-size: 1.25; --es-ft-md-font-size: 1.5; --es-ft-lg-font-size: 1.875; --typography-letter-spacing: -0.5px; --typography-line-height: 1.33; --typography-font-weight: bold; } .post-listing[data-id='a7b739a1']{ --post-listing-title-max-lines: 2; --post-listing-excerpt-max-lines: 4; --post-listing-column-template: repeat(2, 1fr); --post-listing-columns-mobile: 2; } .wrapper[data-id='8e72b306']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: grid; } .block-heading[data-id='c258e3e5']{ --heading-align: left; } .typography[data-id='a1a2d906']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-letter-spacing: -1px; --es-ft-sm-font-size: 1.5; --es-ft-md-font-size: 2.25; --es-ft-lg-font-size: 3; --typography-line-height: 1.167; --typography-font-weight: bold; } .wrapper[data-id='586ce053']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: grid; } .typography[data-id='5771ae6e']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-letter-spacing: -1px; --es-ft-sm-font-size: 1.5; --es-ft-md-font-size: 2.25; --es-ft-lg-font-size: 3; --typography-line-height: 1.167; --typography-font-weight: bold; } .typography[data-id='4d26939b']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.75; --es-ft-md-font-size: 0.875; --es-ft-lg-font-size: 1.0625; --typography-letter-spacing: 0.2px; --typography-line-height: 1.43; } .chevron[data-id='9cd05d31']{ --chevron-color: var(--global-colors-black); --chevron-background-color: var(--global-colors-white); --chevron-background-color-inverse: var(--global-colors-grey100); } .chevron[data-id='9cd05d31']{ --chevron-size: calc(var(--base-font-size) * 4rem) } .icon[data-id='3be74d8c']{ --icon-size: calc(var(--base-font-size) * 1.6rem); } .wrapper[data-id='8998b8d3']{ --wrapper-z-index: 1; --wrapper-bg-color-gradient: none; --wrapper-display-type: grid; } .image[data-id='272be4da']{ --image-scale: 1; --image-overflow: hidden; --image-object-fit: cover; --image-default-border-radius: 0; } .icon[data-id='8a97de43']{ --icon-backplate-color: var(--global-colors-indigo); --icon-color: var(--global-colors-indigo); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='bdb13814']{ --icon-backplate-color: var(--global-colors-indigo); --icon-color: var(--global-colors-indigo); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='7ebfc8ed']{ --icon-backplate-color: var(--global-colors-indigo); --icon-color: var(--global-colors-indigo); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .icon[data-id='669b99e3']{ --icon-backplate-color: var(--global-colors-indigo); --icon-color: var(--global-colors-indigo); --icon-on-backplate-color: var(--global-colors-white); --icon-size: calc(var(--base-font-size) * 4rem); } .typography[data-id='2d9c55d0']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-letter-spacing: -1px; --es-ft-sm-font-size: 1.5; --es-ft-md-font-size: 2.25; --es-ft-lg-font-size: 3; --typography-line-height: 1.167; --typography-font-weight: bold; } .typography[data-id='9e2dd6aa']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1; --es-ft-md-font-size: 1.125; --es-ft-lg-font-size: 1.4375; --typography-line-height: 1.44; --typography-font-weight: bold; } .typography[data-id='6ab789a6']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.75; --es-ft-md-font-size: 0.875; --es-ft-lg-font-size: 1.0625; --typography-letter-spacing: 0.2px; --typography-line-height: 1.43; } .typography[data-id='73e3950b']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --typography-uppercase: uppercase; --typography-letter-spacing: 0.4px; --es-ft-md-font-size: 0.75; --es-ft-lg-font-size: 0.875; --typography-line-height: 1.33; } .typography[data-id='f49cadc8']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1; --es-ft-md-font-size: 1.125; --es-ft-lg-font-size: 1.4375; --typography-line-height: 1.44; --typography-font-weight: bold; } .typography[data-id='242a5869']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.75; --es-ft-md-font-size: 0.875; --es-ft-lg-font-size: 1.0625; --typography-letter-spacing: 0.2px; --typography-line-height: 1.43; } .toggle[data-id='d62d33bd']{ --toggle-color: var(--global-colors-indigo); } .typography[data-id='55619c57']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 1; --es-ft-md-font-size: 1.125; --es-ft-lg-font-size: 1.4375; --typography-line-height: 1.44; --typography-font-weight: bold; } .typography[data-id='89b7508b']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.75; --es-ft-md-font-size: 0.875; --es-ft-lg-font-size: 1.0625; --typography-letter-spacing: 0.2px; --typography-line-height: 1.43; } .toggle[data-id='3f1a6911']{ --toggle-color: var(--global-colors-indigo); } .btn[data-id='bfa1ef3c']{ --button-color: var(--global-colors-white); --button-color-hover: var(--global-colors-white); --button-secondary-color: var(--global-colors-indigo); --button-secondary-color-hover: var(--global-colors-white); --button-border-color: var(--global-colors-indigo); --button-background-color: var(--global-colors-indigo); --button-background-color-hover: var(--global-gradients-gradient-1); --button-color-is-link: var(--global-colors-indigo); --button-color-is-link-hover: var(--global-colors-black); --button-border-radius: calc(var(--base-font-size) * 3rem); --button-padding-vertical: calc(var(--base-font-size) * 1.3rem); --button-padding-horizontal: calc(var(--base-font-size) * 2.4rem); --button-display: inline-flex; --button-width: auto; --button-icon-left-space: calc(var(--base-font-size) * 1rem); --button-icon-right-space: 0; --button-flex-direction: row; } .typography[data-id='000c57ba']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.875; --es-ft-md-font-size: 1; --es-ft-lg-font-size: 1.25; --typography-line-height: 1.5; } .btn[data-id='f220e4dc']{ --button-color: var(--global-colors-white); --button-color-hover: var(--global-colors-white); --button-secondary-color: var(--global-colors-indigo); --button-secondary-color-hover: var(--global-colors-white); --button-border-color: var(--global-colors-indigo); --button-background-color: var(--global-colors-indigo); --button-background-color-hover: var(--global-gradients-gradient-1); --button-color-is-link: var(--global-colors-indigo); --button-color-is-link-hover: var(--global-colors-black); --button-border-radius: calc(var(--base-font-size) * 3rem); --button-padding-vertical: calc(var(--base-font-size) * 1.3rem); --button-padding-horizontal: calc(var(--base-font-size) * 2.4rem); --button-display: inline-flex; --button-width: auto; --button-border-radius: 0; --button-background-color: transparent; --button-background-color-hover: transparent; --button-padding-vertical: 0; --button-padding-horizontal: 0; --button-color: var(--button-color-is-link); --button-color-hover: var(--button-color-is-link-hover); --button-display: inline; --button-icon-left-space: calc(var(--base-font-size) * 1rem); --button-icon-right-space: 0; --button-flex-direction: row; } .typography[data-id='1c567a88']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.875; --es-ft-md-font-size: 1; --es-ft-lg-font-size: 1.25; --typography-line-height: 1.5; } .typography[data-id='3e52400b']{ --typography-color: var(--typography-color-override, var(--global-colors-black)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.75; --es-ft-md-font-size: 0.875; --es-ft-lg-font-size: 1.0625; --typography-letter-spacing: 0.2px; --typography-line-height: 1.43; } .btn[data-id='d9a5e7e1']{ --button-color: var(--global-colors-white); --button-color-hover: var(--global-colors-white); --button-secondary-color: var(--global-colors-indigo); --button-secondary-color-hover: var(--global-colors-white); --button-border-color: var(--global-colors-indigo); --button-background-color: var(--global-colors-indigo); --button-background-color-hover: var(--global-gradients-gradient-1); --button-color-is-link: var(--global-colors-indigo); --button-color-is-link-hover: var(--global-colors-black); --button-border-radius: calc(var(--base-font-size) * 3rem); --button-padding-vertical: calc(var(--base-font-size) * 1.3rem); --button-padding-horizontal: calc(var(--base-font-size) * 2.4rem); --button-display: inline-flex; --button-width: auto; --button-icon-left-space: calc(var(--base-font-size) * 1rem); --button-icon-right-space: 0; --button-flex-direction: row; } .typography[data-id='381ec08e']{ --typography-color: var(--typography-color-override, var(--global-colors-white)); --typography-link-color: var(--typography-link-color-override, var(--global-colors-indigo)); --es-ft-sm-font-size: 0.875; --es-ft-md-font-size: 1; --es-ft-lg-font-size: 1.25; --typography-line-height: 1.5; } @media (min-width:2159px){ .list[data-id='94bafc10']{ --checkmark-top-margin: calc(var(--base-font-size) * 0.1rem); } .list[data-id='37ae533b']{ --checkmark-top-margin: calc(var(--base-font-size) * 0.1rem); } .list[data-id='2fb57357']{ --checkmark-top-margin: calc(var(--base-font-size) * 0.1rem); } } .wrapper[data-id='c1f0a095']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top: 1; --wrapper-spacing-bottom: 1; --wrapper-spacing-top-in: 1; --wrapper-spacing-bottom-in: 26; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='8ae558ec']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .block-column[data-id='4851f530']{ --column-width: 9; --column-hide: flex; --column-position: unset; --column-space-between: unset; } .block-columns[data-id='44082b43']{ --columns-vertical-spacing: 0vw; } .wrapper[data-id='95ea949b']{ --wrapper-width: 14; --wrapper-offset: 1; --wrapper-spacing-top: 0; --wrapper-spacing-bottom: 0; --wrapper-spacing-top-in: 0; --wrapper-spacing-bottom-in: 0; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='5b64f522']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top: 1; --wrapper-spacing-bottom: 1; --wrapper-spacing-top-in: 1; --wrapper-spacing-bottom-in: 8; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='0110ed98']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .block-column[data-id='d03bfdc6']{ --column-width: 3; --column-offset: 1; --column-vertical-align: flex-end; --column-hide: flex; --column-position: unset; --column-space-between: unset; } .wrapper[data-id='f83e0c7b']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .block-column[data-id='c0d47746']{ --column-width: 11; --column-offset: 4; --column-hide: flex; --column-position: unset; --column-space-between: unset; } .block-columns[data-id='072328b0']{ --columns-vertical-spacing: 0vw; } .wrapper[data-id='47db58c4']{ --wrapper-width: 14; --wrapper-offset: 1; --wrapper-spacing-top: 0; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='e6f0ddb0']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top: 100; --wrapper-spacing-top-in: 64; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } .block-column[data-id='393cd5c9']{ --column-width: 3; --column-offset: 2; --column-hide: flex; --column-position: unset; --column-space-between: unset; } .wrapper[data-id='cf884480']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .block-column[data-id='9dfb863b']{ --column-width: 8; --column-hide: flex; --column-position: unset; --column-space-between: unset; } .block-columns[data-id='b7d60e14']{ --columns-vertical-spacing: 0vw; } .wrapper[data-id='670f126e']{ --wrapper-width: 14; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .block-column[data-id='b84c35a4']{ --column-width: 3; --column-offset: 2; --column-hide: flex; --column-position: sticky; --column-top-offset: calc(var(--header-height) + calc(var(--base-font-size) * 2rem)); --column-vertical-align: start; --column-space-between: unset; } .wrapper[data-id='b4034b38']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='ff97a86f']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='f5aeacfe']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='a2548977']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='2d15be29']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='c38f76d1']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='d86edd32']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='06bf3c55']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='4bb23b4b']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='840e36d8']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='1f635e68']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='3f7bc67b']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='43149cea']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='e62fe0c7']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='80778d37']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='5744d2f3']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='b9e4e625']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='57d809e1']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='2444a720']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='fff68235']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='9f7ea6ca']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='91102994']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='2a9003c3']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='e343a26f']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='9940012c']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='e775130d']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='b36346d0']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='56fc957a']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='b5af20af']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='4ea7f68b']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='a7c1f73a']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='911d59fa']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='d406ad2f']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='7979aa01']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='0434460d']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='a5808f65']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='1c45d381']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='2b780d48']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='bf0851c3']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='0c6232ab']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .block-column[data-id='761d6789']{ --column-width: 8; --column-hide: flex; --column-position: unset; --column-space-between: unset; } .block-columns[data-id='b7879ae2']{ --columns-vertical-spacing: 0vw; } .wrapper[data-id='3c43dfa8']{ --wrapper-width: 14; --wrapper-offset: 1; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 1; --wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns); --wrapper-rounded-corners: 0; } .wrapper[data-id='8c2323f5']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top-in: 20; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } .wrapper[data-id='fd8cdf8c']{ --wrapper-width: 7; --wrapper-offset: 4; --wrapper-spacing-top: 1; --wrapper-spacing-bottom: 1; --wrapper-spacing-top-in: 1; --wrapper-spacing-bottom-in: 140; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } .wrapper[data-id='208c898f']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 0; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } .card-simple[data-id='ac0820b3']{ --card-content-inset: calc(var(--base-font-size) * 0rem); --card-media-inset: calc(var(--base-font-size) * 0rem); --card-media-inset: var(--card-content-inset); --card-media-inset: calc(var(--base-font-size) * 0rem); --card-content-inset: calc(var(--base-font-size) * 0rem); --card-media-inset: var(--card-content-inset); } .card-simple[data-id='5bc8f06a']{ --card-content-inset: calc(var(--base-font-size) * 0rem); --card-media-inset: calc(var(--base-font-size) * 0rem); --card-media-inset: var(--card-content-inset); --card-media-inset: calc(var(--base-font-size) * 0rem); --card-content-inset: calc(var(--base-font-size) * 0rem); --card-media-inset: var(--card-content-inset); } .wrapper[data-id='8e72b306']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 24; --wrapper-spacing-bottom-in: 160; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } .wrapper[data-id='586ce053']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 0; --wrapper-spacing-bottom-in: 20; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } .wrapper[data-id='8998b8d3']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-top-in: 24; --wrapper-spacing-bottom-in: 160; --wrapper-divider-top: 0; --wrapper-divider-bottom: 0; --wrapper-display: var(--wrapper-display-type, grid); --wrapper-is-full-width: 0; --wrapper-grid-template-columns: repeat(var(--global-main-content-width), minmax(0, 1fr)); --wrapper-rounded-corners: 0; } @media (max-width:2159px){ .block-column[data-id='b84c35a4']{ --column-position: sticky; --column-top-offset: calc(var(--header-height) + calc(var(--base-font-size) * 2rem)); --column-vertical-align: start; } } @media (max-width:1279px){ .wrapper[data-id='c1f0a095']{ --wrapper-spacing-bottom-in: 16; } .block-column[data-id='4851f530']{ --column-width: 14; --column-offset: 1; } .wrapper[data-id='5b64f522']{ --wrapper-spacing-bottom-in: 4; } .block-column[data-id='d03bfdc6']{ --column-width: 14; --column-offset: 1; } .block-column[data-id='c0d47746']{ --column-width: 14; --column-offset: 1; } .block-column[data-id='393cd5c9']{ --column-width: 12; --column-offset: 2; --column-order: 2; --column-hide: none; } .block-column[data-id='9dfb863b']{ --column-width: 12; --column-offset: 2; --column-order: 1; } .block-column[data-id='b84c35a4']{ --column-width: 12; --column-offset: 2; --column-position: unset; } .wrapper[data-id='b4034b38']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='f5aeacfe']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='2d15be29']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='4bb23b4b']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='3f7bc67b']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='43149cea']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='5744d2f3']{ --wrapper-width: 12; --wrapper-offset: 1; } .block-column[data-id='761d6789']{ --column-width: 12; --column-offset: 2; } .wrapper[data-id='8c2323f5']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='fd8cdf8c']{ --wrapper-width: 12; --wrapper-offset: 1; --wrapper-spacing-bottom-in: 70; } .wrapper[data-id='208c898f']{ --wrapper-spacing-top-in: 0; } .wrapper[data-id='8e72b306']{ --wrapper-spacing-top-in: 4; --wrapper-spacing-bottom-in: 40; } .wrapper[data-id='586ce053']{ --wrapper-spacing-top-in: 0; } .wrapper[data-id='8998b8d3']{ --wrapper-spacing-top-in: 4; --wrapper-spacing-bottom-in: 40; } } @media (max-width:479px){ .wrapper[data-id='c1f0a095']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='8ae558ec']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='95ea949b']{ --wrapper-offset: 1; } .wrapper[data-id='5b64f522']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='0110ed98']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='f83e0c7b']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='47db58c4']{ --wrapper-offset: 1; } .wrapper[data-id='e6f0ddb0']{ --wrapper-width: 12; --wrapper-offset: 1; } .block-column[data-id='393cd5c9']{ --column-hide: none; } .wrapper[data-id='cf884480']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='670f126e']{ --wrapper-offset: 1; } .block-column[data-id='b84c35a4']{ --column-position: unset; } .wrapper[data-id='b4034b38']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='ff97a86f']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='f5aeacfe']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='a2548977']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='2d15be29']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='c38f76d1']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='d86edd32']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='06bf3c55']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='4bb23b4b']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='840e36d8']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='1f635e68']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='3f7bc67b']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='43149cea']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='e62fe0c7']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='80778d37']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='5744d2f3']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='b9e4e625']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='57d809e1']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='2444a720']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='fff68235']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='9f7ea6ca']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='91102994']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='2a9003c3']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='e343a26f']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='9940012c']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='e775130d']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='b36346d0']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='56fc957a']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='b5af20af']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='4ea7f68b']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='a7c1f73a']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='911d59fa']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='d406ad2f']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='7979aa01']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='0434460d']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='a5808f65']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='1c45d381']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='2b780d48']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='bf0851c3']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='0c6232ab']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='3c43dfa8']{ --wrapper-offset: 1; } .wrapper[data-id='8c2323f5']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='fd8cdf8c']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='208c898f']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='8e72b306']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='586ce053']{ --wrapper-width: 12; --wrapper-offset: 1; } .wrapper[data-id='8998b8d3']{ --wrapper-width: 12; --wrapper-offset: 1; } } :root {--es-loaded-opacity: 1;}</style><script src="https://js.chilipiper.com/marketing.js?ver=1.0.0" id="chili-piper-js"></script> <script id="rocket-browser-checker-js-after"> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script id="rocket-preload-links-js-extra"> var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/productive.io\/engineering","onHoverDelay":"100","rateThrottle":"3"}; </script> <script id="rocket-preload-links-js-after"> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script id="Productive-block-frontend-scripts-js-extra"> var productiveBlocks = {"initialCookieLevelBasic":"2","initialCookieLevelAdvanced":"2"}; var registrationEndpoints = {"thankYouPagePath":"","registrationEndpointPagePath":""}; var bookADemoValues = {"Tier1CompanyValues":[],"Tier1RedirectUrl":"","Tier2CompanyValues":[],"Tier2RedirectUrl":"","Tier3CompanyValues":[],"Tier3RedirectUrl":"","Tier4CompanyValues":[],"Tier4RedirectUrl":"","Tier5CompanyValues":[],"Tier5RedirectUrl":"","Tier6CompanyValues":[],"Tier6RedirectUrl":""}; </script> <script src="https://productive.io/engineering/wp-content/themes/productive/public/applicationBlocksFrontend-9f8518e5de2e9481b36e.js?ver=20241121151712.11956160953" id="Productive-block-frontend-scripts-js"></script> <script id="eightshift-forms-block-frontend-scripts-js-before"> const esFormsLocalization = {"restRoutes":{"prefix":"https:\/\/productive.io\/engineering\/wp-json\/eightshift-forms\/v1","prefixProject":"eightshift-forms\/v1","prefixSubmit":"submit","prefixTestApi":"test-api","files":"files","captcha":"captcha","geolocation":"geolocation","validationStep":"validate-step"},"hideGlobalMessageTimeout":6000,"redirectionTimeout":300,"fileRemoveLabel":"<div \n\taria-hidden=\"true\"\n\tclass=\"icon\"\n\tdata-id=\"eed78ac6\"\n\t>\n\t\t\t<i class=\"\" data-name=\"remove-attachment-24\">\n\t\t\t<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm5 1h8v-2H8v2z' fill='currentColor'\/><\/svg>\t\t<\/i>\n\t<\/div>","formDisableScrollToFieldOnError":false,"formDisableScrollToGlobalMessageOnSuccess":false,"formDisableAutoInit":false,"formResetOnSuccess":true,"formServerErrorMsg":"A server error occurred while submitting your form. Please try again.","formCaptchaErrorMsg":"A ReCaptcha error has occured. Please try again.","formMisconfigured":"","enrichment":{"isUsed":false,"isUsedPrefill":false,"isUsedPrefillUrl":false},"geolocation":{"isUsed":false},"captcha":{"isUsed":false},"isAdmin":false} </script> <script src="https://productive.io/engineering/wp-content/plugins/eightshift-forms/public/applicationBlocksFrontend-7eb600a1824877250da2.js?ver=5.1.8" id="eightshift-forms-block-frontend-scripts-js"></script> <script src="https://productive.io/engineering/wp-content/themes/productive/public/application-4bdf92b622426c75c09b.js?ver=20241121151712.11956160953" id="Productive-scripts-js"></script> <script>var rocket_beacon_data = {"ajax_url":"https:\/\/productive.io\/engineering\/wp-admin\/admin-ajax.php","nonce":"ade12b823a","url":"https:\/\/productive.io\/engineering\/custom-fields-give-your-customers-the-fields-they-need","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://productive.io/engineering/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body> </html>