#greyscale");filter:url("data:image/svg+xml;utf8, #greyscale");filter:grey;-webkit-filter:greyscale(100%);-webkit-backface-visibility:hidden;}.shadow-light{-moz-box-shadow:0 10px 20px 0 rgba(152,162,179,0.1),0 2px 6px 0 rgba(152,162,179,0.25) !important;-webkit-box-shadow:0 10px 20px 0 rgba(152,162,179,0.1),0 2px 6px 0 rgba(152,162,179,0.25) !important;-o-box-shadow:0 10px 20px 0 rgba(152,162,179,0.1),0 2px 6px 0 rgba(152,162,179,0.25) !important;-ms-box-shadow:0 10px 20px 0 rgba(152,162,179,0.1),0 2px 6px 0 rgba(152,162,179,0.25) !important;box-shadow:0 10px 20px 0 rgba(152,162,179,0.1),0 2px 6px 0 rgba(152,162,179,0.25) !important;}.shadow-dark{-moz-box-shadow:0 10px 20px 0 rgba(83,89,102,0.1),0 2px 6px 0 rgba(83,89,102,0.25) !important;-webkit-box-shadow:0 10px 20px 0 rgba(83,89,102,0.1),0 2px 6px 0 rgba(83,89,102,0.25) !important;-o-box-shadow:0 10px 20px 0 rgba(83,89,102,0.1),0 2px 6px 0 rgba(83,89,102,0.25) !important;-ms-box-shadow:0 10px 20px 0 rgba(83,89,102,0.1),0 2px 6px 0 rgba(83,89,102,0.25) !important;box-shadow:0 10px 20px 0 rgba(83,89,102,0.1),0 2px 6px 0 rgba(83,89,102,0.25) !important;}figure{margin:0;text-align:center;}figure i,.border-circle{background-position:center center;background-repeat:no-repeat;background-size:120% auto;display:block;height:170px;margin:0 auto;overflow:hidden;width:170px;border-top:6px solid #ccc;border-right:6px solid #ccc;border-bottom:6px solid #ccc;border-left:6px solid #ccc;-webkit-border-radius:340px;-moz-border-radius:340px;-ms-border-radius:340px;border-radius:340px;}figcaption{text-align:center;font-size:14px;line-height:24px;font-style:italic;}.circle-bg{background:#fff;-webkit-border-radius:104px;-moz-border-radius:104px;-ms-border-radius:104px;border-radius:104px;-moz-box-shadow:0px 2px 5px rgba(0,0,0,0.2);-webkit-box-shadow:0px 2px 5px rgba(0,0,0,0.2);-o-box-shadow:0px 2px 5px rgba(0,0,0,0.2);-ms-box-shadow:0px 2px 5px rgba(0,0,0,0.2);box-shadow:0px 2px 5px rgba(0,0,0,0.2);width:104px;height:104px;position:relative;display:inline-block;z-index:1;}.circle-bg img{bottom:0;height:70%;left:0;margin:auto;position:absolute;right:0;top:0;width:70%;}.circle-bg:before{content:" ";vertical-align:middle;height:100%;}.circle-bg .graph-img-center{left:6px;}.image-32-icon{height:32px !important;margin:0 0 16px !important;width:32px !important;}.image-64-icon{height:64px !important;margin:0 auto 16px !important;width:64px !important;}.onlyFadeIn{-webkit-animation:onlyFadeIn 1s;animation:onlyFadeIn 1s;}@-webkit-keyframes onlyFadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframes onlyFadeIn{0%{opacity:0;}100%{opacity:1;}}.img-overflow{max-width:100%;height:auto;}@media (min-width:992px){.img-overflow{max-width:unset;max-height:500px;}}.embed-container iframe,.video iframe{border:0;height:287px;width:100%;}.play-icon{bottom:0;display:block;height:50px;left:0;margin:auto;position:absolute;right:0;top:0;z-index:2;}.video-thumb{position:relative;display:inline-block;max-width:100%;border-radius:10px;overflow:hidden;}.video-thumb .play-btn{bottom:0;height:64px;left:0;margin:auto;position:absolute;right:0;top:0;width:64px;}@media screen and (max-width:600px){.video-thumb{max-width:295px;}}.video-content-wrapper h3{color:var(--color-dark-blue);}.video-content-wrapper h3 a{color:var(--color-dark-blue);}.right-arrow{background-image:url(/static-res/images/right-blue-arrow.png);background-repeat:no-repeat;background-position:right 4px;padding-right:25px !important;color:#00a9e5;font-size:16px;display:inline-block;}.right-arrow:hover{color:#00a9e5;}.right-arrow .upgrade-icon{background-image:url(/static-res/images/refresh-icon.svg);background-repeat:no-repeat;background-position:0px 0px;display:inline-block;height:17px;padding-left:28px;vertical-align:middle;}.right-arrow:before{content:" ";vertical-align:middle;height:100%;}.right-arrow .graph-img-center{left:6px;}.checkmark{height:63px;width:63px;}.position-relative{position:relative;}.position-absolute{position:absolute;}@media screen and (min-width:768px) and (max-width:991px){.container{max-width:100% !important;}}@media screen and (max-width:767px){.container{width:100%;max-width:unset;}.common-container{width:100%;}.no-gutters{margin-right:0;margin-left:0;}.no-gutters>[class*=col-]{padding-right:0;padding-left:0;}}@media screen and (max-width:480px){.table-responsive table,.table-responsive table td{border:1px solid #ccc;}.table-responsive table th,.table-responsive table td th{text-align:center;font-weight:600;font-size:13px;}.table-responsive table td,.table-responsive table td td{padding:5px;font-size:13px;line-height:18px;}.table-responsive table td p a{font-size:13px;line-height:18px;}}a{color:var(--link-color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;text-decoration:underline;font-weight:600;}a:hover,a:focus{color:var(--link-hover-color);text-decoration:underline;box-shadow:none !important;}a.whiteurl{color:var(--color-white);}a.stretched-link:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background:transparent !important;background-color:rgba(0,0,0,0);}.btn-tertiary,.cta-link,a.btn-tertiary:not([href]):not([tabindex]){cursor:pointer;display:inline-block;text-decoration:none;color:var(--button-tertiary-color);font-weight:600;}.btn-tertiary svg,.cta-link svg,a.btn-tertiary:not([href]):not([tabindex]) svg{-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;left:8px;position:relative;height:inherit;}.btn-tertiary svg path,.cta-link svg path,a.btn-tertiary:not([href]):not([tabindex]) svg path{stroke:var(--button-tertiary-color);}.btn-tertiary:hover,.cta-link:hover,a.btn-tertiary:not([href]):not([tabindex]):hover{text-decoration:none;color:var(--button-tertiary-hover-color);}.btn-tertiary:hover svg,.cta-link:hover svg,a.btn-tertiary:not([href]):not([tabindex]):hover svg{left:14px;}.btn-tertiary:hover svg path,.cta-link:hover svg path,a.btn-tertiary:not([href]):not([tabindex]):hover svg path{stroke:var(--button-tertiary-hover-color);}.btn-tertiary:focus-visible,.cta-link:focus-visible,a.btn-tertiary:not([href]):not([tabindex]):focus-visible{text-decoration:none;color:var(--button-tertiary-hover-color);outline:2px solid var(--button-tertiary-active-offset-color);outline-offset:4px;border-radius:4px;padding-right:12px;}.btn-tertiary:focus-visible svg,.cta-link:focus-visible svg,a.btn-tertiary:not([href]):not([tabindex]):focus-visible svg{stroke:var(--button-tertiary-hover-color);}.btn-tertiary:focus-visible svg path,.cta-link:focus-visible svg path,a.btn-tertiary:not([href]):not([tabindex]):focus-visible svg path{stroke:var(--button-tertiary-hover-color);}.gdpr-text{margin-top:10px;}.gdpr-text p{font-size:12px;line-height:18px;opacity:1;}#marketo-fe-form{position:relative;}#marketo-fe-form .mktoForm{position:relative;width:100% !important;}#marketo-fe-form .mktoForm .mktoOffset{display:none;}#marketo-fe-form .mktoForm .mktoLabel,#marketo-fe-form .mktoForm legend{font-size:14px;font-weight:600;line-height:24px !important;text-align:left;width:auto !important;padding-top:0;margin-left:0;float:none;display:block;margin-bottom:4px;}#marketo-fe-form .mktoForm .mktoLabel[for=tempCheckBoxforForm]{margin-left:23px;width:calc(100% - 23px) !important;font-weight:normal;}#marketo-fe-form .mktoForm p,#marketo-fe-form .mktoForm #gdpr{opacity:1;margin-bottom:8px;}#marketo-fe-form .mktoForm .mktoFormCol{width:100%;min-height:unset;margin-bottom:0 !important;}#marketo-fe-form .mktoForm .mktoFieldWrap{margin-right:0px !important;width:100%;}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=hidden]{display:none;}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=text],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=email],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=number],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=url]{-webkit-appearance:none;}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=text],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=email],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=number],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel],#marketo-fe-form .mktoForm .mktoFieldWrap input[type=url],#marketo-fe-form .mktoForm .mktoFieldWrap select{width:100% !important;color:var(--color-ink);height:50px;line-height:40px !important;min-width:190px;padding:8px !important;font-size:14px;font-weight:400;border:1px solid var(--color-dark-gray);border-radius:0;position:relative;z-index:1;}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=text]:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=email]:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=number]:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel]:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=url]:focus,#marketo-fe-form .mktoForm .mktoFieldWrap select:focus{border-bottom:2px solid var(--color-elastic-blue);outline:none !important;}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=text].mktoInvalid,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=email].mktoInvalid,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=number].mktoInvalid,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel].mktoInvalid,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=url].mktoInvalid,#marketo-fe-form .mktoForm .mktoFieldWrap select.mktoInvalid{border-bottom:2px solid var(--color-dark-orange);}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=text].mktoInvalid:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=email].mktoInvalid:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=number].mktoInvalid:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel].mktoInvalid:focus,#marketo-fe-form .mktoForm .mktoFieldWrap input[type=url].mktoInvalid:focus,#marketo-fe-form .mktoForm .mktoFieldWrap select.mktoInvalid:focus{border-bottom:2px solid var(--color-elastic-blue);}#marketo-fe-form .mktoForm .mktoFieldWrap select{background-color:#fff;position:relative;line-height:normal !important;padding:8px 32px 8px 8px !important;appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;background-image:url("/static-res/images/svg/icon-down-arrow-16-blue.svg");background-repeat:no-repeat;background-position:98% 50%;background-size:16px;}#marketo-fe-form .mktoForm .mktoFieldWrap textarea{border:1px solid var(--color-dark-gray);font-size:14px;height:6em;width:100% !important;padding:8px 16px;margin-bottom:32px;padding:8px 16px;position:relative;z-index:1;}#marketo-fe-form .mktoForm .mktoFieldWrap textarea:focus{outline:none;border-bottom:2px solid var(--color-elastic-blue);}#marketo-fe-form .mktoForm .mktoFieldWrap textarea.mktoInvalid{border-bottom:2px solid var(--color-dark-orange);}#marketo-fe-form .mktoForm .mktoFieldWrap textarea.mktoInvalid:focus{border-bottom:2px solid var(--color-elastic-blue);}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=checkbox]{height:auto !important;width:16px !important;position:relative;z-index:1;}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=checkbox]:after{background-color:var(--color-white);content:"";height:17px;left:-2px;position:absolute;top:-2px;width:17px;border-top:1px solid var(--color-dark-gray);border-right:1px solid var(--color-dark-gray);border-bottom:1px solid var(--color-dark-gray);border-left:1px solid var(--color-dark-gray);}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=checkbox]:checked:after{background-color:var(--color-elastic-blue);border-color:var(--color-elastic-blue);}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=checkbox]:checked:before{content:"";height:12px;left:3px;position:absolute;top:-2px;width:7px;z-index:1;border-right:2px solid rgb(255,255,255);border-bottom:2px solid rgb(255,255,255);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}#marketo-fe-form .mktoForm .mktoFieldWrap input[type=checkbox][disabled]:after{border-color:#f8f9fb;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoRadioList{position:relative;z-index:1;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoRadioList label{margin-left:28px;margin-bottom:16px;line-height:14px;}#marketo-fe-form .mktoForm .mktoFieldWrap::-webkit-input-placeholder{font-size:14px;line-height:24px;}#marketo-fe-form .mktoForm .mktoFieldWrap::-moz-placeholder{font-size:14px;line-height:24px;}#marketo-fe-form .mktoForm .mktoFieldWrap:-ms-input-placeholder{font-size:14px;line-height:24px;}#marketo-fe-form .mktoForm .mktoFieldWrap:-moz-placeholder{font-size:14px;line-height:24px;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoCheckboxList{margin:16px 0px 10px 0px;width:100% !important;z-index:1;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoCheckboxList>label{font-size:14px;margin-bottom:8px;margin-left:32px;min-height:25px;margin-top:-2px;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoHtmlText{width:100% !important;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoGutter.mktoHasWidth{display:none;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoError{left:0;right:unset !important;bottom:unset !important;position:relative !important;z-index:0;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoError .mktoErrorArrowWrap{display:none;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg{background-image:none !important;background-color:transparent !important;border:none !important;max-width:unset !important;box-shadow:none !important;text-shadow:none !important;color:var(--color-dark-orange) !important;font-size:14px !important;line-height:24px !important;margin-top:4px !important;padding-left:0;clear:both;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg .mktoErrorDetail{display:inline !important;}#marketo-fe-form .mktoForm .mktoOffset,#marketo-fe-form .mktoForm .mktoRequiredField .mktoAsterix{display:none;}#marketo-fe-form .mktoForm .mktoButtonRow{width:100%;}#marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap{margin-left:unset !important;}#marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton{background:var(--color-elastic-blue);color:var(--color-white);display:inline-block;font-size:16px;font-weight:600;font-family:"MierB","Inter",Arial,sans-serif;height:50px;line-height:30px;margin:0;min-width:150px;padding:0 16px !important;text-align:center;text-transform:none;width:100%;border-top:1px solid var(--color-elastic-blue);border-right:1px solid var(--color-elastic-blue);border-bottom:1px solid var(--color-elastic-blue);border-left:1px solid var(--color-elastic-blue);-webkit-border-radius:4px !important;-moz-border-radius:4px !important;-ms-border-radius:4px !important;border-radius:4px !important;-moz-transition:all 200ms ease-in;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-ms-transition:all 200ms ease-in;transition:all 200ms ease-in;}#marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton:hover{background:var(--color-dark-blue);border-color:var(--color-dark-blue);outline:none !important;}#marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton:active,#marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton:focus,#marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton:active:focus{border-color:var(--color-light-blue);outline:none !important;}.error-message{color:var(--color-dark-orange);font-size:14px;}#fallback-form{position:relative;}#fallback-form .fallback-form-title{font-weight:600;padding-bottom:10px;}#fallback-form .debug{border:1px solid red;color:red;position:absolute;top:-20px;display:none;}#fallback-form .input-wrapper p{font-size:12px;line-height:18px;}#fallback-form form.fallback{position:relative;text-align:left;max-width:100%;}#fallback-form form.fallback .input-wrapper input{width:100%;outline:none;}#fallback-form form.fallback .input-wrapper input[type=text],#fallback-form form.fallback .input-wrapper input[type=email],#fallback-form form.fallback .input-wrapper input[type=number],#fallback-form form.fallback .input-wrapper input[type=tel],#fallback-form form.fallback .input-wrapper input[type=url],#fallback-form form.fallback .input-wrapper select{width:100% !important;color:var(--color-ink);height:50px;max-height:50px;line-height:40px !important;min-width:190px;padding-left:8px !important;padding-right:8px !important;font-size:14px;font-weight:400;border-radius:0;border:1px solid var(--color-dark-gray);}#fallback-form form.fallback .input-wrapper input[type=text]:focus,#fallback-form form.fallback .input-wrapper input[type=email]:focus,#fallback-form form.fallback .input-wrapper input[type=number]:focus,#fallback-form form.fallback .input-wrapper input[type=tel]:focus,#fallback-form form.fallback .input-wrapper input[type=url]:focus,#fallback-form form.fallback .input-wrapper select:focus{border-bottom:2px solid var(--color-elastic-blue);outline:none !important;}#fallback-form form.fallback .input-wrapper input[type=text].mktoInvalid,#fallback-form form.fallback .input-wrapper input[type=email].mktoInvalid,#fallback-form form.fallback .input-wrapper input[type=number].mktoInvalid,#fallback-form form.fallback .input-wrapper input[type=tel].mktoInvalid,#fallback-form form.fallback .input-wrapper input[type=url].mktoInvalid,#fallback-form form.fallback .input-wrapper select.mktoInvalid{border-bottom:2px solid var(--color-dark-orange);}#fallback-form form.fallback .input-wrapper input[type=text].mktoInvalid:focus,#fallback-form form.fallback .input-wrapper input[type=email].mktoInvalid:focus,#fallback-form form.fallback .input-wrapper input[type=number].mktoInvalid:focus,#fallback-form form.fallback .input-wrapper input[type=tel].mktoInvalid:focus,#fallback-form form.fallback .input-wrapper input[type=url].mktoInvalid:focus,#fallback-form form.fallback .input-wrapper select.mktoInvalid:focus{border-bottom:2px solid var(--color-elastic-blue);}#fallback-form form.fallback .input-wrapper textarea{border:1px solid var(--color-dark-gray);height:4.5em;width:100% !important;margin-bottom:32px;}#fallback-form form.fallback .input-wrapper textarea:focus{outline:none;border-bottom:2px solid var(--color-elastic-blue);}#fallback-form form.fallback .input-wrapper textarea.mktoInvalid{border-bottom:2px solid var(--color-dark-orange);}#fallback-form form.fallback .input-wrapper textarea.mktoInvalid:focus{border-bottom:2px solid var(--color-elastic-blue);}#fallback-form form.fallback .input-wrapper input[type=checkbox]{height:auto !important;position:relative;width:16px !important;}#fallback-form form.fallback .input-wrapper input[type=checkbox]:after{background-color:var(--color-white);content:"";height:16px;left:0;position:absolute;top:0;width:16px;border-top:1px solid var(--color-dark-gray);border-right:1px solid var(--color-dark-gray);border-bottom:1px solid var(--color-dark-gray);border-left:1px solid var(--color-dark-gray);}#fallback-form form.fallback .input-wrapper input[type=checkbox]:checked:after{background-color:var(--color-elastic-blue);border-color:var(--color-elastic-blue);}#fallback-form form.fallback .input-wrapper input[type=checkbox]:checked:before{content:"";height:12px;left:5px;position:absolute;top:0px;width:7px;z-index:1;border-right:2px solid rgb(255,255,255);border-bottom:2px solid rgb(255,255,255);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}#fallback-form form.fallback .input-wrapper::-webkit-input-placeholder{font-size:14px;line-height:24px;}#fallback-form form.fallback .input-wrapper::-moz-placeholder{font-size:14px;line-height:24px;}#fallback-form form.fallback .input-wrapper:-ms-input-placeholder{font-size:14px;line-height:24px;}#fallback-form form.fallback .input-wrapper:-moz-placeholder{font-size:14px;line-height:24px;}#fallback-form form.fallback label{font-size:14px;font-weight:600;line-height:24px !important;text-align:left;width:100% !important;margin-bottom:0;margin-top:24px;}#fallback-form form.fallback .asterix{font-weight:700;color:var(--color-dark-orange);}#fallback-form form.fallback .submit-form{cursor:pointer;min-width:140px;width:max-content;padding-right:16px;padding-left:16px;-webkit-transition:all 200ms ease-in;transition:all 200ms ease-in;background-color:var(--color-elastic-blue);color:var(--color-white);height:50px;font-weight:700;text-align:center;letter-spacing:0.025em;margin:0;border:1px solid var(--color-elastic-blue);border-radius:4px;cursor:pointer;}#fallback-form form.fallback .submit-form:hover{background:var(--color-dark-blue);border-color:var(--color-dark-blue);}#fallback-form form.fallback .submit-form:active{border-color:var(--color-light-blue);}#fallback-form form.fallback .submit-form:focus{box-shadow:none;}.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap,.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap{margin-bottom:24px;}.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=text],.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=email],.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=number],.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel],.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=url],.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=text],.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=email],.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=number],.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=tel],.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap input[type=url]{height:40px !important;}.mkto-form-wrapper.long-form #marketo-fe-form .mktoForm .mktoFieldWrap select,.marketo-form.long-form #marketo-fe-form .mktoForm .mktoFieldWrap select{height:auto !important;}.mkto-form-wrapper.inline #marketo-fe-form{position:relative;width:100%;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm{width:100% !important;padding:0px;position:relative;display:inline-flex;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoOffset,.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoAsterix{display:none;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol{margin-bottom:0 !important;float:none;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap{width:100%;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoHtmlText{display:none !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoHtmlText p{margin:0 !important;line-height:0 !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap input[type=email],.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap select{min-width:289px;width:100% !important;max-width:350px !important;margin-top:4px;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError{position:absolute !important;padding-bottom:unset;bottom:-52px !important;width:max-content;z-index:99 !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError .mktoErrorArrowWrap{display:block;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError .mktoErrorArrowWrap .mktoErrorArrow{background:rgba(255,255,255,0.9);border:1px solid var(--color-dark-orange) !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError .mktoErrorMsg{border:1px solid var(--color-dark-orange) !important;color:var(--color-dark-orange) !important;padding:8px !important;background:rgba(255,255,255,0.9) !important;border-radius:0 !important;width:auto !important;margin-top:7px !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoButtonRow{margin-top:4px;margin-left:16px;width:max-content !important;align-self:flex-end;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap{margin-left:0px !important;}.mkto-form-wrapper.inline .success-message{max-width:455px;width:100%;margin:0 auto;}.mkto-form-wrapper.inline.fallback{width:100%;max-width:455px;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback{display:inline-flex;align-items:end;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .input-wrapper input,.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .input-wrapper select{min-width:307px;width:100% !important;max-width:350px !important;margin-top:4px;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .button-wrapper{margin-top:4px;margin-left:16px;}.mkto-form-wrapper.inline.center #marketo-fe-form{margin-left:auto;margin-right:auto;}.mkto-form-wrapper.inline.center #marketo-fe-form .mktoForm{justify-content:center;}.mkto-form-wrapper.inline.center.fallback{max-width:455px !important;margin-left:auto;margin-right:auto;}.mkto-form-wrapper.inline.center.fallback #fallback-form{text-align:center;}.mkto-form-wrapper.inline.center .error-message{margin-top:16px;}@media screen and (max-width:1200px){.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap input[type=email],.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap select{min-width:270px;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback{width:100%;margin:0;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .input-wrapper input,.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .input-wrapper select{min-width:270px;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .button-wrapper{width:100%;}}@media screen and (max-width:991px){.react-tabs .react-tabs__tab{font-size:14px;}.mkto-form-wrapper.inline{margin-left:auto;margin-right:auto;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm{position:relative;display:block;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap{width:100%;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap input[type=email],.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap select{width:100% !important;max-width:unset !important;min-width:unset;margin-top:0;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError{width:auto;position:relative !important;top:8px;bottom:unset !important;padding-bottom:0;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError .mktoErrorMsg{padding:0 !important;width:auto !important;border:none !important;background:transparent !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoFormCol .mktoFieldWrap .mktoError .mktoErrorArrowWrap{display:none !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoButtonRow{margin-top:16px;margin-left:0;width:100% !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap{margin-left:0px !important;}.mkto-form-wrapper.inline #marketo-fe-form .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton{width:100% !important;}.mkto-form-wrapper.inline.fallback{max-width:455px;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback{display:block;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .input-wrapper input,.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .input-wrapper select{width:100% !important;max-width:unset !important;min-width:unset;margin-top:0;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .button-wrapper{margin:16px 0 0 0;}.mkto-form-wrapper.inline.fallback #fallback-form form.fallback .button-wrapper .submit-form{width:100% !important;}}.success-message{background:var(--color-white);color:var(--color-dark-teal) !important;border:1px solid var(--color-dark-teal) !important;padding:8px;text-align:center;}.success-message a{color:var(--color-dark-teal) !important;}.filter-wrapper{padding:32px 0px;}.filter-wrapper .header{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-dark-gray);}.filter-wrapper .filter-row{width:100%;display:grid;grid-column-gap:32px;grid-row-gap:32px;grid-template-columns:1fr 1fr 1fr 1fr;align-items:baseline;}.filter-wrapper .filter-row .filter-column{width:100%;}.filter-wrapper .filter-row .filter-label{font-size:14px;font-weight:600;margin-bottom:5px;}@media screen and (max-width:991px){.filter-wrapper .container{padding:0 15px;}}@media screen and (max-width:768px){.filter-wrapper .header{padding-bottom:8px;}.filter-wrapper .container{padding:0 15px;}.filter-wrapper .filter-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}}@media screen and (max-width:575px){.filter-wrapper .header{display:flex;flex-direction:column;}.filter-wrapper .filter-row{grid-template-columns:1fr;}.filter-wrapper .filter-row .filter-column{margin:0 auto;width:300px;}}.card-small-padding{padding:8px;}.card-medium-padding{padding:16px;}.card-large-padding{padding:32px;}.card-xlarge-padding{padding:40px;}.card-xxlarge-padding{padding:48px;}.card-grid{display:-ms-grid;display:grid;grid-auto-columns:1fr;grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto;grid-row-gap:32px;grid-column-gap:32px;}.card-grid-1x1{margin-right:auto;margin-left:auto;gap:32px;}@media (min-width:992px){.card-grid-1x1{gap:64px;}}.card-grid-1x1,.card-grid-1x1-sidebar{display:grid;justify-content:stretch;grid-auto-columns:1fr;grid-template-areas:".";grid-template-columns:1fr;grid-template-rows:auto;}.card-grid-1x1.col-sm-8,.card-grid-1x1-sidebar.col-sm-8{padding:0px;}.card-grid-1x1 .card-footer div:first-child,.card-grid-1x1-sidebar .card-footer div:first-child{margin-right:24px;}.card-grid-2x1{display:grid;margin-right:auto;margin-left:auto;justify-content:stretch;grid-auto-columns:1fr;grid-template-areas:".";grid-template-columns:repeat(2,1fr);grid-template-rows:auto;}.card-grid-2x1 .card-footer.align-self-left div:first-child{margin-right:24px;}.card-grid-3x1{display:grid;margin-right:auto;margin-left:auto;padding-left:0px;justify-content:stretch;grid-template-areas:".";grid-template-columns:repeat(3,1fr);grid-auto-columns:1fr;grid-template-rows:auto;}.card-grid-3x1 .card-footer.align-self-left div:first-child{margin-right:24px;}.card-grid-4x1{display:grid;margin-right:auto;margin-left:auto;justify-content:stretch;grid-column-gap:32px;grid-row-gap:32px;grid-template-columns:repeat(4,1fr);grid-template-rows:auto;}@media screen and (max-width:991px){.card-grid-3x1{grid-auto-flow:row;grid-template-areas:".";grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,auto);}.card-grid-4x1{grid-row-gap:32px;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}}@media screen and (max-width:768px){.card-grid-3x1,.card-grid-4x1{grid-template-columns:1fr 1fr;}}@media screen and (max-width:575px){.card-grid-2x1{grid-template-columns:1fr;grid-template-rows:repeat(2,auto);}.card-grid-3x1{grid-template-columns:1fr;grid-template-rows:repeat(3,auto);}.card-grid-4x1{grid-template-columns:1fr;grid-template-rows:repeat(4,auto);}}.react-tabs .react-tabs__tab{cursor:pointer;margin-bottom:-2px;padding:0px 16px;margin-left:0;margin-right:0;}.react-tabs .react-tabs__tab h2{color:var(--color-black);font-size:16px;line-height:24px;padding-bottom:16px;font-weight:400;}.react-tabs .react-tabs__tab:focus{outline:0px none;}.react-tabs .react-tabs__tab:hover{border-bottom:2px solid var(--color-ink);}.react-tabs .react-tabs__tab--selected{color:var(--color-elastic-blue);cursor:text;display:block;margin-bottom:-2px;border-bottom:4px solid var(--carousel-tab-hover-border-color);}.react-tabs .react-tabs__tab--selected h2{color:var(--color-elastic-blue);}.react-tabs .react-tabs__tab--selected:hover{border-color:var(--color-elastic-blue);}.react-tabs .react-tabs__tab-panel{display:none;}.react-tabs .react-tabs__tab-panel--selected{display:block;}.instruction-module .react-tabs ul{border-bottom:0;}.instruction-module .react-tabs .top-tabs .react-tabs__tab{color:rgb(52,55,65);font-weight:400;height:40px;line-height:40px;margin:0px;padding:0px;text-align:center;text-transform:unset;width:200px;border-width:1px;border-style:solid;border-color:rgb(0,120,160);display:flex;justify-content:center;align-items:center;}.instruction-module .react-tabs .top-tabs .react-tabs__tab h2{padding-bottom:2px;}.instruction-module .react-tabs .top-tabs .react-tabs__tab--selected{background-color:var(--color-elastic-blue);}.instruction-module .react-tabs .top-tabs .react-tabs__tab--selected h2{color:#FFFFFF !important;}.instruction-module .react-tabs .vertical-tabs .react-tabs__tab h2{font-size:18px;line-height:22px;font-family:Inter,arial,sans-serif;}@media screen and (min-width:768px){.react-tabs .vertical-tabs .react-tabs__tab-list{border-bottom:0;border-left:1px solid var(--color-dark-gray);}.react-tabs .vertical-tabs .react-tabs__tab{margin-bottom:0;border-left:2px solid transparent;padding:8px 16px;}.react-tabs .vertical-tabs .react-tabs__tab h2{padding:5px 0;}.react-tabs .vertical-tabs .react-tabs__tab:hover{border-bottom:0;border-left:2px solid var(--color-ink);}.react-tabs .vertical-tabs .react-tabs__tab--selected{border-bottom:0;border-left:2px solid var(--color-elastic-blue);}.react-tabs .vertical-tabs .react-tabs__tab--selected:hover{border-left:2px solid var(--color-elastic-blue);}}@media screen and (max-width:767px){.code-carousel .react-tabs .react-tabs__tab-list{display:flex;flex-wrap:wrap;flex-direction:unset;margin-bottom:10px;}.code-carousel .react-tabs .react-tabs__tab{border-bottom:2px solid transparent;}.code-carousel .react-tabs .react-tabs__tab:hover{border-bottom:2px solid var(--color-ink);}.code-carousel .react-tabs .react-tabs__tab--selected{border-bottom:2px solid var(--carousel-tab-border-color);}.code-carousel .react-tabs .react-tabs__tab--selected:hover{border-bottom:4px solid var(--carousel-tab-hover-border-color);}}.carousel .carousel-one-column .react-tabs__tab,.carousel .carousel-two-column__tab-labels-left .react-tabs__tab{color:var(--carousel-tab-color);cursor:pointer;margin-left:0;margin-right:0;position:relative;font-size:16px;line-height:22px;font-weight:700;font-style:normal;}.carousel .carousel-one-column .react-tabs__tab:focus,.carousel .carousel-two-column__tab-labels-left .react-tabs__tab:focus{outline:0px none;}.carousel .carousel-one-column .react-tabs__tab h2,.carousel .carousel-two-column__tab-labels-left .react-tabs__tab h2{color:var(--carousel-tab-color);font-size:16px;line-height:24px;font-weight:400;padding:0px;}.carousel .carousel-one-column .react-tabs__tab--selected,.carousel .carousel-two-column__tab-labels-left .react-tabs__tab--selected{cursor:text;display:block;cursor:text;}.carousel .carousel-one-column .carousel-asset .card-deck-container-block.container,.carousel .carousel-one-column .carousel-asset .illustration-icon-grid-container-block.container,.carousel .carousel-two-column__tab-labels-left .carousel-asset .card-deck-container-block.container,.carousel .carousel-two-column__tab-labels-left .carousel-asset .illustration-icon-grid-container-block.container{padding:0px;}.carousel .carousel-asset-code .carousel-asset-code-block{background-image:url(https://assets.website-files.com/5d35f5b2989a23dd99c4cb9a/5dd5be9fcd567c46f05e5544_image-dots-browser-16-colored.svg);background-repeat:no-repeat;background-position:32px 32px;background-color:var(--color-light-gray);height:500px;overflow-y:scroll;padding:40px 32px 32px;position:relative;-moz-box-shadow:0 10px 20px 0 rgba(152,162,179,0.25);-webkit-box-shadow:0 10px 20px 0 rgba(152,162,179,0.25);-o-box-shadow:0 10px 20px 0 rgba(152,162,179,0.25);-ms-box-shadow:0 10px 20px 0 rgba(152,162,179,0.25);box-shadow:0 10px 20px 0 rgba(152,162,179,0.25);}.carousel .carousel-asset-code .carousel-asset-code-block .react-tabs__tab-panel{height:484px;overflow:auto;width:100%;}.carousel .carousel-asset-code .prettyprint{background-color:var(--color-light-gray);border:0px none !important;left:0;margin:20px auto 0;padding:16px;position:absolute;right:0;width:675px;}.carousel .carousel-asset-code .prettyprint ol li{background:none;}.carousel .carousel-asset-code .prettyprint .linenums{color:#999;display:contents;}.carousel .carousel-asset-code .prettyprint code{display:inline-block;left:0;overflow:hidden;position:relative;vertical-align:top;white-space:pre-wrap;width:90%;word-break:break-word;}.carousel .carousel-description{width:auto;max-width:854px;text-align:center;padding:0px 16px;margin-right:auto;margin-left:auto;}.carousel .icon-text-card-deck .container{padding-left:0px !important;padding-right:0px !important;}.carousel .icon-text-card.card .card-body{text-align:left;}.carousel .icon-text-card.card .card-body h3{font-size:24px;line-height:28px;}.carousel .icon-text-card.card .card-footer{text-align:left;}.carousel .icon-text-card.card .card-footer .card-footer{margin-top:16px !important;}@media screen and (max-width:991px) and (min-width:768px){.carousel .card.icon-text-card{width:100%;}}@media screen and (max-width:768px){.carousel .carousel .description{width:100%;margin:32px auto 8px auto;}}@media screen and (max-width:575px){.carousel .react-tabs__tab h2{font-size:14px !important;line-height:24px !important;}.carousel .icon-text-card-deck{margin:auto;}}.training .rail>div{position:relative;}.euiComboBox .euiFormControlLayoutIcons{position:absolute !important;}.euiComboBox .euiFormControlLayoutCustomIcon--clickable{border:0;background-color:transparent;padding:0;}.euiComboBox .euiFormControlLayoutClearButton{display:flex;justify-content:center;align-items:center;border:1px solid #98A2B3;}.css-1yifmy7-euiBadge-hollow{display:flex;align-items:center;}.euiBadge__iconButton.css-iqdgtj-euiBadge__iconButton-right{border:0;background:transparent;padding:0;}.euiComboBoxOptionsList__rowWrap{border-radius:6px;}.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem{border:0;background:#fff;border-bottom:1px solid #EEF2F7;font-size:14px;font-weight:400;display:flex;align-items:center;}.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem-isFocused{background-color:rgba(0,119,204,0.1);}@media (max-width:767px){.horizontal-scroll-table{width:100vw;overflow-x:auto;}}.comparison-table{max-width:830px;margin:0 auto;}.comparison-table thead{border-bottom:4px solid #000;}.comparison-table th{text-transform:uppercase;font-weight:700;letter-spacing:0.1em;padding:1rem 1.5rem;text-align:center;}.comparison-table td{padding:1rem 1.5rem;}.comparison-table td:not(:first-child){text-align:center;}.comparison-table tbody{font-size:0.875rem;}.comparison-table tbody tr{border-bottom:1px solid #ccc;}.comparison-table tfoot td{width:100%;color:#ccc;}.pricing-card.bg-dark-teal,.list.bg-dark-teal{--bullet-color:var(--color-dark-teal);}.pricing-card.bg-yellow,.list.bg-yellow{--bullet-color:var(--color-yellow);}.pricing-card.bg-elastic-teal,.list.bg-elastic-teal{--bullet-color:var(--color-elastic-teal);}.pricing-card.bg-pink,.list.bg-pink{--bullet-color:var(--color-pink);}.pricing-card.bg-blurple,.list.bg-blurple{--bullet-color:var(--color-blurple);}.list.dark-teal{--bullet-color:var(--color-dark-teal);}.list.yellow{--bullet-color:var(--color-yellow);}.list.elastic-teal{--bullet-color:var(--color-elastic-teal);}.list.pink{--bullet-color:var(--color-pink);}.list.blurple{--bullet-color:var(--color-blurple);}.serverless-pricing-table{width:100%;border-spacing:32px 0;table-layout:fixed;height:1px;}.serverless-pricing-table h4{letter-spacing:-0.04em;line-height:1.1;}.serverless-pricing-table tr{height:100%;}@media (min-width:767px){.serverless-pricing-table tr{border-bottom:1px solid var(--color-dark-gray);}}.serverless-pricing-table tr:last-child{border:none;}@media (max-width:767px){.serverless-pricing-table tr:not(:first-of-type){display:none;visibility:hidden;}}.serverless-pricing-table th{padding:0 0.5rem;}.serverless-pricing-table th:first-child{padding:0 1rem 1.5rem;}.serverless-pricing-table th:last-child{padding-right:0;}.serverless-pricing-table td,.serverless-pricing-table th{padding:0 0.5rem;vertical-align:top;height:100%;}.serverless-pricing-table td:first-child,.serverless-pricing-table th:first-child{padding:1.5rem 1rem 0 1.5rem;}@media (max-width:767px){.serverless-pricing-table td:first-child,.serverless-pricing-table th:first-child{border-bottom:none;padding:0;margin:0;}}.serverless-pricing-table td:last-child,.serverless-pricing-table th:last-child{padding-right:0;}@media (max-width:767px){.serverless-pricing-table td,.serverless-pricing-table th{display:block;height:initial;padding:0;margin:0 0 1.5rem;border-bottom:1px solid var(--color-dark-gray);}}.serverless-pricing-table td.feature-label,.serverless-pricing-table th.feature-label{font-family:'MierB','Inter',Arial,sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;padding:1.5rem 1rem 1.5rem 1.5rem;}.serverless-pricing-table td.feature-label span:last-child,.serverless-pricing-table th.feature-label span:last-child{margin-top:6px;display:block;font-weight:normal;}.serverless-pricing-table td.feature,.serverless-pricing-table th.feature{vertical-align:middle;text-align:center;}.serverless-pricing-table td.feature .card-content,.serverless-pricing-table th.feature .card-content{padding:24px 0;height:100%;display:flex;flex-direction:column;justify-content:center;}.serverless-pricing-table td.feature .card-content *,.serverless-pricing-table th.feature .card-content *{vertical-align:middle;}.serverless-pricing-table .card-content{border-left:1px solid var(--color-dark-gray);border-right:1px solid var(--color-dark-gray);background:#fff;padding:0 0.5rem;}.serverless-pricing-table .card-content__container{padding:0 0.5rem 1.5rem;display:flex;flex-flow:column nowrap;align-items:center;justify-content:space-between;}.serverless-pricing-table .card-content__container p{margin:0;}.serverless-pricing-table .card-content__container .button{width:max-content;margin:0 auto;align-self:end;}.serverless-pricing-table .card-content__content{flex:1;display:grid;}.serverless-pricing-table .card-content.header{display:flex;flex-flow:column nowrap;justify-content:space-between;}.serverless-pricing-table .button-unstyled{padding:8px 24px;min-height:50px;display:inline-block;border:2px solid transparent;width:max-content;margin:0 auto;align-self:end;}.serverless-pricing-table .header{padding:0;}.serverless-pricing-table .card-content__header,.serverless-pricing-table .card-content__includes{padding:0 0.5rem;}.serverless-pricing-table .card-content__includes{padding:2rem 0.5rem;border-top:1px solid var(--color-dark-gray);}.serverless-pricing-table .border-bottom{border-bottom:1px solid var(--color-dark-gray);border-bottom-left-radius:16px;border-bottom-right-radius:16px;}.serverless-pricing-table .borderless-bottom{border-bottom:none;}.serverless-pricing-table .pricing-card{border-top-left-radius:16px;border-top-right-radius:16px;height:100%;padding-top:16px;}.serverless-pricing-table .pricing-card .card-label{padding:0.875rem 0;}.serverless-pricing-table .pricing-card .header{height:100%;border-top-left-radius:16px;border-top-right-radius:16px;border-top:1px solid var(--color-dark-gray);}.serverless-pricing-table .topic-heading{color:var(--color-light-ink);font-size:1rem;font-weight:700;line-height:22px;letter-spacing:0.1em;text-transform:uppercase;}.serverless-pricing-table .price{font-family:'MierB','Inter',Arial,sans-serif;font-size:1.75rem;font-weight:700;letter-spacing:-0.04em;margin-top:8px;}.serverless-pricing-table .list{max-width:250px;width:max-content;margin:0 auto;text-align:left;text-indent:-1.5rem;}.serverless-pricing-table .list li{font-weight:normal;margin-bottom:0.75rem;}.serverless-pricing-table .list li:before{content:"✓";position:relative;top:-2px;left:0;display:inline-block;background-color:var(--bullet-color,black);border-radius:50%;border-style:none;height:16px;width:16px;font-size:0.75rem;line-height:normal;color:#fff;padding-top:0;padding-left:3px;margin-right:0.5rem;text-indent:0;}.mobile-container{border-top:1px solid var(--color-dark-gray);margin:2rem 0 0;padding:1rem 0 0;}@media (min-width:767px){.mobile-container{display:none;visibility:hidden;}}.mobile-container__item{margin:1rem 0;}.mobile-container .topic-heading{padding-bottom:0.25rem;}.mobile-container__price-heading{font-weight:normal;}.mobile-container__price{font-weight:700;}.card-content--stretch .card-content__includes{min-height:373px;}.feature .pricing{margin:0 0 1rem;}.optional-eyebrow{display:block;font-size:1rem;text-transform:uppercase;color:var(--color-dark-teal);letter-spacing:0.1rem;}.pill>.topic-heading{font-size:0.875rem;}#LbltempCheckBoxforForm{padding-left:20px;}#marketo-fe-form .mktoForm .mktoFieldWrap .mktoCheckboxList{margin:0;}#LbltempCheckbox1{padding-left:20px;}#tempCheckbox1{margin-top:5px;}
08 July 2021 How to
How to add search to your iOS app with Elastic App Search: Part 2 Share
In part one , we went over setting up your Elastic stack and ingesting data. In the second part of this blog series, we will be creating an iOS app that uses Elasticsearch for searching a movie database.
Note: This tutorial is based on Elasticsearch version 7.12.x
Starting a New Xcode Project
Open Xcode and create a new project. In the iOS tab, select App and choose Next Configure the options for setting up the new app
Product name: App-Search
Team: <your team name>
Organization Identifier: <your identifier>
Interface: SwiftUI
Life Cycle: SwiftUI App
Language: Swift
Use core data: No
Include tests: No
Select Next Choose where to save your project, and select Create Building the UI The UI will be built out in the ContentView.swift
file. The basic structure of the UI will be as follows: CODE DIAGRAM VStack {
HStack {
HStack {
Image () #Magnify glass
TextField () #Search
Button () #"x" clear
}
Button () #"Cancel"
}
List ( results ) {
HStack {
Image () #Movie poster
VStack {
Text () #Title
Text () #Description
}
}
}
}
Since the UI is not the main focus of this tutorial, I'll just post the full code for the UI without going into too much detail.
//
// ContentView.swift
// app-search
//
// Created by Ethan Groves on 3/5/21.
//
import SwiftUI
struct ContentView : View {
// @State variables are special variables that are automatically monitored for changes, and will update any UI elements that contain references
@State var results : [ Result ] = []
@State private var searchText = ""
@State private var showCancelButton : Bool = false
private let TmdbApiKey = "my_tmdb_api_key"
//------------------------------------
// The main body of the UI
//------------------------------------
var body : some View {
VStack ( alignment : . leading ) {
//--------------------------------
// Search bar
//--------------------------------
HStack {
HStack {
Image ( systemName : "magnifyingglass" )
TextField ( "search" , text : $searchText , onEditingChanged : { isEditing in
// Set Bool to show the cancel button whenever there is text in the field
self . showCancelButton = true
}, onCommit : {
// When a search is submitted, send it to App Search and get the results
AppSearch (). getResults ( searchTerm : searchText ) { ( results ) in
self . results = results
}
})
// Display a small 'x' button in the text field which can clear all text
Button ( action : {
self . searchText = ""
}) {
Image ( systemName : "xmark.circle.fill" ). opacity ( searchText == "" ? 0 : 1 )
}
}
// Formatting and styling for the search bar
. padding ( EdgeInsets ( top : 8 , leading : 6 , bottom : 8 , trailing : 6 ))
. foregroundColor (. secondary )
. background ( Color (. secondarySystemBackground ))
. cornerRadius ( 10.0 )
// Display a 'Cancel' button to clear text whenever there is text in the TextField
if showCancelButton {
Button ( "Cancel" ) {
UIApplication . shared . endEditing ()
self . searchText = ""
self . showCancelButton = false
}
}
}
// Formatting and styling for the 'Cancel' button
. padding (. horizontal )
//--------------------------------
// Table containing search results
//--------------------------------
List ( results ) { result in
// For each search result returned from App Search, build a simple UI element
HStack {
// If the search results contain a URL path for a movie poster, use that for the image
// Otherwise, grab a random image from http://source.unsplash.com
if result . posterPath . raw != nil {
let imageURL = "https://image.tmdb.org/t/p/w500" + result . posterPath . raw ! + "?api_key=" + TmdbApiKey
AsyncImage (
url : URL ( string : imageURL )!,
placeholder : { Text ( "Loading..." )},
image : { Image ( uiImage : $0 ). resizable () }
)
// Formatting and styling for the image
. aspectRatio ( contentMode : . fit )
. frame ( width : 100 )
} else {
let imageURL = "https://source.unsplash.com/user/jakobowens1/100x150?" + String ( Int . random ( in : 1. .< 930 ))
AsyncImage (
url : URL ( string : imageURL )!,
placeholder : { Text ( "Loading..." )},
image : { Image ( uiImage : $0 ). resizable () }
)
// Formatting and styling for the image
. aspectRatio ( contentMode : . fit )
. frame ( width : 100 )
}
// Display the movie title and description
VStack {
Text ( result . title . raw !)
// Formatting and styling for the title
. fontWeight ( /*@START_MENU_TOKEN@*/ . bold /*@END_MENU_TOKEN@*/ )
. multilineTextAlignment ( /*@START_MENU_TOKEN@*/ . leading /*@END_MENU_TOKEN@*/ )
Text ( result . overview . raw !)
// Formatting and styling for the description
. font (. caption )
. foregroundColor ( Color ( red : 0.4 , green : 0.4 , blue : 0.4 , opacity : 1.0 ))
}
// Formatting and styling for the title and description container
. frame ( height : 150 )
}
// Formatting and styling for the search results container
. frame ( alignment : . topLeading )
}
}
}
}
// This struct is used for generating a preview in Xcode
struct ContentView_Previews : PreviewProvider {
static var previews : some View {
ContentView ()
}
}
// A simple function for removing "focus" from (i.e. unselecting) a UI element
extension UIApplication {
func endEditing () {
sendAction (# selector ( UIResponder . resignFirstResponder ), to : nil , from : nil , for : nil )
}
}
You will need to register for an API key at TMDB in order to access the movie poster images: Send search request to App Search
Elastic doesn't have a Swift client for App Search yet, therefore we will need to build the request ourselves. In the nav, in the app-search
directory, create a new file called Data.swift
. We will create a class called AppSearch
that will handle all of our queries to App Search. class AppSearch {}
Inside the class, we will create a single function called getResults
which will handle everything. The function is passed a string of text (the searchTerm
) and asynchronously (completion: @escaping) returns an array of results. class AppSearch {
func getResults ( searchTerm : String , completion : @escaping ([ Result ]) -> ()) {
}
}
First, we will need to turn the searchTerm
string that gets passed into the function into a JSON object. let searchObject : [ String : Any ] = [ "query" : searchTerm ]
let jsonSearchQuery = try ? JSONSerialization . data ( withJSONObject : searchObject )
Next, we will need to grab the credentials and API endpoint from App Search.
Navigate to your App Search instance. In the left sidebar, select the Credentials
tab. Copy and paste the search-key
and the API Endpoint
into the following two variables in Xcode: let authenticationToken = "Bearer my_authentication_token"
let appSearchURL = URL ( string : "my_app_search_url" )!
Next, let’s package all of these variables into a request that we can send to App Search. var request = URLRequest ( url : appSearchURL )
request . httpMethod = "POST"
request . setValue ( authenticationToken , forHTTPHeaderField : "Authorization" )
request . httpBody = jsonSearchQuery
Finally, let’s send everything to App Search, and wait for a response. URLSession . shared . dataTask ( with : request ) { ( data , response , error ) in
let JSONData = try !
JSONDecoder (). decode ( JSONResponse . self , from : data !)
DispatchQueue . main . async {
completion ( JSONData . results )
}
}
. resume ()
The completed code should look something like the following: class AppSearch {
func getResults ( searchTerm : String , completion : @escaping ([ Result ]) -> ()) {
let searchObject : [ String : Any ] = [ "query" : searchTerm ]
let jsonSearchQuery = try ? JSONSerialization . data ( withJSONObject : searchObject )
let authenticationToken = "Bearer my_authentication_token"
let appSearchURL = URL ( string : "my_app_search_url" )!
var request = URLRequest ( url : appSearchURL )
request . httpMethod = "POST"
request . setValue ( authenticationToken , forHTTPHeaderField : "Authorization" )
request . httpBody = jsonSearchQuery
URLSession . shared . dataTask ( with : request ) { ( data , response , error ) in
let JSONData = try ! JSONDecoder (). decode ( JSONResponse . self , from : data !)
DispatchQueue . main . async {
completion ( JSONData . results )
}
}
. resume ()
}
}
Decode JSON response
In the code above, you will notice there is a line of code that attempts to
decode the JSON response from App Search.
let JSONData = try ! JSONDecoder (). decode ( JSONResponse . self , from : data !)
The Swift language is pretty strict about defining everything up front, so even the format of the incoming JSON results needs to be explicitly defined. However, when a JSON object is reasonably complex, constructing the necessary Swift equivalent code can be notoriously tedious and difficult. Thankfully, there is an online resource for this very issue: https://app.quicktype.io .
First we need to know what kind of JSON is going to be returned when we query the App Search API endpoint. In the Github tutorial repo, I’ve provided an example JSON document: https://github.com/elastic/tutorials/blob/master/app-search/example.json I also provided a python script so that you can send test queries for yourself
OPTIONAL: Python script for sending quick test queries: https://github.com/elastic/tutorials/blob/master/app-search/app_search_query.py Copy and paste the search-key
credentials and the App Search API Endpoint
into the python script: api_endpoint = 'my_api_endpoint'
api_key = 'my_api_key'
Run the script: python3 ./app_search_query.py
. Once you have JSON results from App Search, navigate to https://app.quicktype.io Copy and paste your JSON results into the left panel In the left panel, set
Source type = JSON
In the right panel, set
Language = Swift
Struct or classes = Struct
Explicit CodingKey values in Codable types = Yes
Copy the resulting code in the right panel, and paste it into the bottom of your Data.swift
file in Xcode.
Tweaking the JSON decoder https://app.quicktype.io has given us a good starting place, but we will need to tweak things a little bit to make them work. The main issue is that App Search stores all of its document fields as a raw
type, which causes quicktype.io to think everything is the same type, even though they should actually be handled differently. For example, you can see below that the value for the field budget
is an object of type raw
instead of being a simple key: value
pair."budget" : { "raw" : 94000000 }
First, let’s rename the Welcome
struct at the top to be something a little more descriptive: rename it to JSONResponse
. BEFORE AFTER // MARK: - Welcome
struct Welcome : Codable {
let meta : Meta
let results : [ Result ]
}
// MARK: - JSON Response
struct JSONResponse : Codable {
let meta : Meta
let results : [ Result ]
}
Next, we need to properly define the types for each of the fields in the Result
struct. We will also need to set the id
field to be equal to UUID()
, which is a special function that generates a unique (Swift approved) ID for each result.
BEFORE AFTER struct Result : Codable {
let genres : Genres
let overview , tagline : Adult
let meta : MetaClass
let id : Adult
let runtime : Budget
let spokenLanguages , productionCompanies : Genres
let budget : Budget
let belongsToCollection , backdropPath , homepage , title : Adult
let adult , originalTitle : Adult
let revenue : Budget
let imdbID , video : Adult
let voteCount : Budget
let status : Adult
let voteAverage : Budget
let originalLanguage : Adult
let productionCountries : Genres
let releaseDate , posterPath : Adult
let popularity : Budget
...
struct Result : Codable , Identifiable {
let id = UUID ()
let adult : RawString ?
let backdropPath : RawString ?
let belongsToCollection : RawString ?
let budget : RawNumber ?
let genres : RawArrayOfStrings ?
let homepage : RawString ?
let imdbID : RawString ?
let meta : MetaClass
let originalLanguage : RawString ?
let originalTitle : RawString ?
let overview : RawString
let popularity : RawNumber ?
let posterPath : RawString
let productionCompanies : RawArrayOfStrings ?
let productionCountries : RawArrayOfStrings ?
let releaseDate : RawString ?
let revenue : RawNumber ?
let runtime : RawNumber ?
let spokenLanguages : RawArrayOfStrings ?
let status : RawString ?
let tagline : RawString ?
let title : RawString
let video : RawString ?
let voteAverage : RawNumber ?
let voteCount : RawNumber ?
...
Finally, we will need to define structs for each of the types that we created:
RawString
RawArrayOfStrings
RawNumber
Depending on what quicktype.io spits out, your BEFORE may look different, but don’t worry. Just make sure that the final result matches the AFTER .
BEFORE AFTER // MARK: - Adult
struct Adult : Codable {
let raw : String
}
// MARK: - Genres
struct Genres : Codable {
let raw : [ String ]
}
// MARK: - Budget
struct Budget : Codable {
let raw : Double
}
// MARK: - RawString
struct RawString : Codable {
let raw : String ?
}
// MARK: - RawArrayOfStrings
struct RawArrayOfStrings : Codable {
let raw : [ String ]?
}
// MARK: - RawNumber
struct RawNumber : Codable {
let raw : Double ?
}
Adding async image handler
The last bit of code that we will need to include is a way to asynchronously load images off of the internet. Fortunately, this problem has already been solved. I used a slightly modified version of this https://github.com/V8tr/AsyncImage solution. In Xcode, in the app-search
folder, create a new file called AsyncImage.swift
. Copy the contents of this file (it’s basically just V8tr’s solution condensed into a single file), and paste it into your AsyncImage.swift
file: https://github.com/elastic/tutorials/blob/master/app-search/xcode/app-search/AsyncImage.swift That’s it! That should be all the code we need! 🎉 Run your code In Xcode, select the simulator that you would like to run your app on (e.g., iPhone 11 Pro) Build and run your project. CONGRATULATIONS! (Hopefully!)
OPTIONAL: Compare your code to the source code here to debug any issues:https://github.com/elastic/tutorials/tree/master/app-search Optimizing your App Search experience Type a generic search term into your app simulator, and see what kind of results you get.
Search for something generic, like family
. The results are a little lack-luster. Normally, you would expect the search results to return items with the term family
in the title. So, let’s boost the importance of the movie title in our search results.
Navigate to your App Search instance. In the left sidebar, click on Relevance Tuning
. Click on the title
field. Drag the WEIGHT
parameter up to approx. 5
or something close. Select Save
. In your app simulator, run the same generic search that you did earlier. You should get much better results this time. Cool! You just tuned and improved your search results without restarting the app or writing a single line of code! Congratulations! 🎉 You just built a mobile app with incredibly powerful search capabilities. Elasticsearch provides lightning fast search results and can scale to handle petabytes of data. The crazy part is, all of that power is now available to your mobile app users, and it's free! Try experimenting with some of the other App Search features like synonyms , curations , and the Web Crawler . Have fun!