#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;}
2017년 2월 16일
Kibana UI의 컴포넌트화 1부 : 확장 가능한 CSS 코드 Share
확장 가능한 CSS 코드
수만줄의 CSS 코드가 있습니다. 셀렉터는 8개 레벨까지 중첩되었습니다. 끝없는 오버라이딩 위의 오버라이딩이 계속됩니다… (헥헥) !잠시 주목하십시오!
이 끔찍한 괴물의 목을 어서 따버립시다! 상상만 해도 공포감에 고개를 떨구고 몸서리치는 분도 계시겠지만, 여기 Kibana 팀이 있습니다. 함께 이 괴물을 퇴치합시다! 뱃속 가득 커피를 충전하고 웹 개발자 도구를 장착하고 나아갑시다!
제 말이 너무 드라마틱한가요? 그렇게 느끼실 수 있지만, SCC의 확장성 문제는 현실 입니다. Kibana team, 팀은 CSS 작성에 대한 정형화된 접근법을 통해 이 문제를 해결합니다.
Kibana UI를 컴포넌트로 간주합니다.
클래스를 사용하여 CSS를 간소화 합니다.
BEM 명명 규칙을 사용하여 예측 가능성 과 가독성이 높은 마크업 및 CSS를 제작합니다.
컴포넌트로 UI 구성
컴포넌트 는 UI 의 블럭 조각들입니다. 버튼, form 필드, modal 창 등의 여러 가지 시각 요소가 존재하며 엔지니어는 이들을 모아 통합된 기능을 구축합니다.
컴포넌트 형태로 CSS를 작성하면 직접 작성하는 대신에 기존의 CSS 및 마크업을 이용할 수 있어 엔지니어의 삶이 더욱 편리해집니다.
컴포넌트는 특성상 그 스타일의 범위에 한계가 존재하고, 변경을 적용할 때 우연한 부작용이 발생할 가능성을 방지할 수 있어 컴포넌트로 작성된 CSS는 유지보수가 편리합니다.
컴포넌트의 한 예를 보여드리겠습니다. 이것을 우리는 패널이라고 합니다.
컴포넌트는 시각적인 표기명과 코드 표기명을 가지며, 두 표기명 모두 같은 이름으로 지정되었습니다. 따라서 공통된 어휘들로 UI에 대해 얘기해볼 수 있습니다. 이제 디자이너, 엔지니어, 프로덕트 매니저가 "패널"이라고 할 때마다 대화에 참여 중인 모든 사람은 무엇을 이야기하고 있는지 정확하게 알 수 있습니다.
이제, Kibana에서 CSS를 단순하게 유지하는 방법을 알아본 후, 패널 구성 요소 뒤에 있는 CSS에 대해 살펴보겠습니다.
CSS 확장성의 기초는 단순성에서 시작합니다
단순한 코드는 부품의 수가 적고 의도를 명확하게 표시합니다. 코드의 논리 단위는 서로 분리되어 명시적이고 확실하게 상호 작용하며 명확한 경계를 갖습니다.
간단한 CSS에도 이와 같은 특성들이 있지만, CSS를 간소화하는 방법은 JavaScript나 Python과 같은 명령형 언어로 작성된 코드를 간소화하는 것과 다릅니다. Kibana 팀은 단순성을 위한 도구 상자에서 가장 강력한 도구는 CSS 클래스 라는 것을 알게 되었습니다.
다음은 클래스를 사용하여 CSS를 간소화 하는 방법에 관한 일반적인 원칙들입니다.
클래스에 명시적으로 마크업 된 UI 렌더링을 매핑합니다. 컴포넌트를 미리 염두 해 두고 클래스에 이름을 붙이면 클래스명에 기능적인 의미가 추가됩니다. 이 클래스명은 마크업의 랜드마크나 도로 표지판과 같은 기능을 합니다. 브라우저를 계속해서 확인하지 않아도 마크업을 탐색하거나, 엘리먼트 간 관계를 이해하고 UI의 기능적인 이미지를 기억하는데에 도움이 됩니다.
셀렉터를 하나의 클래스로 제한합니다. 셀렉터가 2개 이상의 클래스에 연결되게 되면 컨텍스트에 대해 의존성을 가지게 됩니다. 즉, 스타일이 효과를 가지려면 엘리먼트들 간에 특별한 관계성이 필요하며, 마크업을 읽을 때 이러한 관계성을 찾기 어려울 수 있습니다. Kibana는 각 셀렉터를 하나의 클래스로 제한함으로써, 엘리먼트 간 관계를 간소화하고, 마크업을 더 쉽게 읽고, 컨텍스트에 변경을 가할 때 실수로 깨질 확률을 줄입니다.
**상속된 속성은 "리프(단말)" 노드에서만 사용합니다. ** CSS가 "폰트 크기"나 "색상"과 같은 속성을 엘리먼트에 적용하는 경우, 상속을 통해 하위 엘리먼트에도 적용됩니다. 이러한 부작용은 예측이 불가능하며 잘못 된 결과를 초래할 수도 있습니다. Kibana는 상속된 속성을 하위 엘리먼트가 포함되지 않은 UI 요소(예: 레이블, 버튼)에 대해서만 사용하도록 하여 UI 외형에 대한 상속을 방지하는 방법을 해결책으로 사용합니다.
이 원칙들이 패널 컴포넌트 코드에 적용되는 방식을 알아보겠습니다. 다음은 패널 생성에 대한 마크업입니다.
<div class = "panel" >
<div class = "panelHeader" >
<div class = "panelHeader__title" >
Panel title
</div>
</div>
<div class = "panelBody" >
<!-- Content goes here -->
</div>
</div>
마크업에서 클래스 이름을 사용해서 UI를 명확하게 지정한 것에 주목하십시오. 이것은 머리글과 본문이 포함된 패널 구성 요소인 게 확실합니다. Kibana 팀은 마크업 가독성을 개선함으로써 UI를 더 신속하고 안정적으로 구축할 수 있다는 것을 알게 되었습니다.
다음은 이 마크업의 외형을 정의하는 CSS입니다.
. panel {
border - left : 2px solid #e4e4e4;
border - right : 2px solid #e4e4e4;
border - bottom : 2px solid #e4e4e4;
}
. panelHeader {
display : flex ;
align - items : center ;
padding : 10px ;
height : 50px ;
background - color : #e4e4e4;
}
/*
* FYI, we indent child classes like this to emphasize its role
* in the markup as a tightly-coupled child of the .panel class.
*/
. panelHeader__title {
font - size : 18px ;
line - height : 1.5 ;
}
. panelBody {
padding : 10px ;
}
각 셀렉터를 단일 클래스로 지정한 것에 주목하십시오. CSS가 마크업에 대해 작용하는 방식과 비주얼 UI 구성 요소의 결과를 정말 쉽게 이해할 수 있습니다.
마지막으로, 상속된 성질을 가지는 유일한 셀렉터는 .panelHeader__title
클래스인 점에 주목하십시오. 이 셀렉터가 적용될 엘리먼트에는 패널 제목의 텍스트 이상의 하위 요소가 절대 포함되지 않다는 것을 압니다. 이는 CSS의 상속 모델이 도입될 수 있는 문제를 회피하는 방법을 보여주는 한 가지 사례입니다.
BEM 명명 규칙
BEM 명명 규칙은 2007년 Yandex 에서 처음 개발된 후 널리 퍼져왔습니다. 이 블로그에서는 BEM에 대해 설명하지 않으므로, 관심이 있으시다면 Harry Roberts의 기사 또는 CSS-Tricks 기사 에서 자세한 내용을 읽어보시길 바랍니다.
마크 업을 해독 할 때 컴포넌트를 구성하는 다양한 클래스 사이의 정리를 식별하는 방법이 필요했기 때문에 우리는 BEM을 CSS의 명명 규칙으로 선택했습니다. 이와 동시에, 각 클래스가 마크업에서 수행하는 역할을 구별할 수 있는 방법도 필요했습니다. 어떤 클래스는 구조적 역할을, 어떤 클래스는 다른 클래스를 수정하는 역할을, 어떤 클래스는 JavaScript를 통해 동적으로 적용되게 되어있습니다. BEM은 이러한 서로 다른 클래스를 구분해주는 패턴을 제공합니다.
BEM 작동 방식에 대한 자세한 내용은 위에 언급된 링크를 참조하십시오.
다음 단계: 컴포넌트화 프로세스
이 기사는 여러 파트로 연재되는 게시물의 1부입니다. 다음 화에서는 재사용성과 요소성을 고려한 컴포넌트의 설계 방법과 컴포넌트의 구성 요소화 과정에서 배운 것을 공유합니다. 읽어주셔서 감사합니다!
그리고 Kibana 팀에서는 언제나 훌륭한 인재를 찾고 있습니다. 관심 있는 분은 꼭 문의해 주십시오 .