.border-linear-gradient-brand-blue{border-radius:var(--rounded-lg);padding:var(--spacing-1);background:linear-gradient( to right,var(--color-brand-banner) 25%,var(--interface-brand-primary-03),var(--interface-brand-accent-02) ) padding-box;} .border-linear-gradient-brand-blue > div{border-radius:var(--rounded-md);background-color:var(--interface-common-base-01);}  .quick-links-nav-bar{display:flex;flex-flow:row nowrap;justify-content:space-evenly;align-items:center;gap:clamp(var(--sizing-400),3vw,var(--spacing-700));border-radius:clamp(var(--rounded-md),1vw,var(--rounded-lg));padding-top:clamp(var(--spacing-300),1.1vw,var(--spacing-400));padding-bottom:clamp(var(--spacing-300),1.1vw,var(--spacing-400));background-color:var(--interface-brand-secondary-03);} .quick-links-nav-bar a{font:var(--body-sm);font-size:clamp(var(--font-size-10),1.4vw,var(--font-size-14));font-weight:var(--font-weight-semibold);text-align:center;text-decoration:none;color:var(--ink-brand-primary);} .quick-links-nav-bar a:hover{text-decoration:underline;} .quick-links-nav-bar__header{font:var(--body-sm);font-size:clamp(var(--font-size-10),1.4vw,var(--font-size-14));font-weight:var(--font-weight-bold);text-align:center;color:var(--ink-brand-primary);}  .comparison-table{border-radius:0px;border-collapse:separate;border-spacing:0px;background:var(--interface-common-base-01);} .comparison-table th,.comparison-table td{border:var(--size-10) solid var(--color-base-gray-1);padding-top:clamp(var(--spacing-400),2.2vw,var(--spacing-500));padding-right:clamp(var(--spacing-300),1.1vw,var(--spacing-500));padding-bottom:clamp(var(--spacing-400),2.2vw,var(--spacing-500));padding-left:clamp(var(--spacing-300),1.1vw,var(--spacing-500));font:var(--body-lg);font-size:clamp(var(--font-size-14),1.9vw,var(--font-size-18));} .comparison-table thead th{background-color:var(--interface-brand-primary-06);font-weight:var(--font-weight-semibold);color:var(--ink-common-light-01);text-transform:none;} .comparison-table tbody th,.comparison-table tbody td{line-height:var(--line-height-xl);} .comparison-table tbody th{border-color:var(--color-base-teal-300);background-color:var(--color-base-teal-200);font-weight:var(--font-weight-semibold);} .comparison-table--grouped-columns thead tr:first-child th{border:none;padding:var(--spacing-000) var(--spacing-400) var(--spacing-400) var(--spacing-400);background-color:transparent;font:var(--heading-xs);font-size:clamp(var(--font-size-14),1.9vw,var(--font-size-18));font-weight:var(--font-weight-bold);color:var(--ink-brand-primary);} .comparison-table--zebra tbody tr:nth-child(even) td{background-color:var(--color-background-table-row-zebra);}  .comparison-table-dropdown{display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--spacing-200);width:100%;} .comparison-table-dropdown__select{border-radius:var(--rounded-md);border-width:0px;padding:var(--spacing-1) var(--spacing-400);background-color:var(--interface-brand-primary-06);font:var(--body-lg);font-size:var(--font-size-16);font-weight:var(--font-weight-bold);color:var(--ink-common-light-01);} .comparison-table-dropdown__select option{background-color:var(--interface-common-base-01);font-family:var(--font-family-primary);font-size:var(--font-size-14);font-weight:var(--font-weight-bold);color:var(--ink-brand-primary);} .comparison-table-dropdown__table tbody td{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;gap:var(--spacing-2);padding:var(--spacing-400);text-align:right;} .comparison-table-dropdown__table--bordered td{border:var(--size-10) solid var(--color-base-gray-1);} .comparison-table-dropdown__composite-value-heading{display:flex;flex-flow:column;justify-content:space-between;gap:var(--spacing-200);} .comparison-table-dropdown__value-heading{font-family:var(--asset-font-montserrat-name);font-size:var(--font-size-20);line-height:var(--line-height-xl);font-weight:var(--font-weight-bold);text-align:left;} .comparison-table-dropdown__value-subheading{font:var(--body-md);line-height:var(--line-height-xl);font-size:var(--font-size-14);text-align:left;} .comparison-table-dropdown__value{flex:1 0 auto;font:var(--body-lg);line-height:var(--line-height-xl);font-size:var(--font-size-16);text-align:right;}  .comparison-table-dropdown:has( .comparison-table-dropdown__option--stacked-values:checked ) .comparison-table-dropdown__table td{flex-direction:column;align-items:stretch;} .comparison-table-dropdown:has( .comparison-table-dropdown__option--stacked-values:checked ) .comparison-table-dropdown__value{text-align:left;} .no-italic{font-style:normal;}
:root{/* HACK:Font size variable fix * .detail-md (and likely other classes) use --font-size-100,but it's being * overridden by web/public/bats_com/webroot/_css/_variables_brand.css,and * the new value is no good for our use case. */ --font-size-100:14px;}  @media only screen and (max-width:543px){.width-120--mobile{width:120px;}} @media only screen and (min-width:544px){.width-80\:120-fluid--tablet{width:clamp(80px,11.1vw,120px);}} @media only screen and (min-width:1366px){ .mh4-minus--desktop-wide{margin-left:calc(var(--spacing-4) * -1) !important;margin-right:calc(var(--spacing-4) * -1) !important;}}  .interface-brand-primary-06-I{background-color:var(--interface-brand-primary-06) !important;}  .svg--color-interface-brand-secondary-03 g > *,.svg--color-interface-brand-secondary-03 *{ stroke:var(--interface-brand-secondary-03);fill:var(--interface-brand-secondary-03);}  .svg--color-interface-common-base-01 g > *{stroke:var(--interface-common-base-01);fill:var(--interface-common-base-01);}  .background-image-desktop-header{background-image:url(https://cdn.cboe.com/assets/images/general/Desktop_Header_Background.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;} .background-linear-gradient-brand-blue-150-deg{background:linear-gradient( 150deg,var(--color-brand-banner),var(--interface-brand-primary-03),var(--interface-brand-accent-02) ) padding-box;}  .button--pill--background-color-interface-common-base-01{background-color:var(--interface-common-base-01);} .button--pill--border-color-interface-common-base-01{border-color:var(--interface-common-base-01);} .button--pill--ph-16\:24-fluid{padding-left:clamp(var(--spacing-400),3.3vw,var(--spacing-2));padding-right:clamp(var(--spacing-400),3.3vw,var(--spacing-2));}  .svg--path-stroke-width-3{stroke-width:3px;} .flex--basis-0{flex-basis:0px;} .circle{clip-path:circle();} hr{width:100%;height:var(--size-10);margin:var(--spacing-0) auto var(--spacing-0) auto;color:var(--color-base-gray-2);} .vertical-rule{align-self:stretch;width:var(--size-10);background:var(--color-base-gray-2);}  .white-space-nowrap{white-space:nowrap;} .font-montserrat{font-family:var(--asset-font-montserrat-name);} .font-style-normal{font-style:normal;}  .line-height-md{line-height:var(--line-height-md);} .line-height-lg{line-height:var(--line-height-lg);} .line-height-xl{line-height:var(--line-height-xl);} .font-size-14{font-size:var(--font-size-14);} .font-size-10\:14-fluid{font-size:clamp(var(--font-size-10),1.4vw,var(--font-size-14));} .font-size-12\:16-fluid{font-size:clamp(var(--font-size-12),1.7vw,var(--font-size-16));} .font-size-12\:18-fluid{font-size:clamp(var(--font-size-12),1.7vw,var(--font-size-18));} .font-size-14\:18-fluid{font-size:clamp(var(--font-size-14),1.9vw,var(--font-size-18));} .font-size-16\:24-fluid{font-size:clamp(var(--font-size-16),2.2vw,var(--font-size-24));} .font-size-20\:32-fluid{font-size:clamp(var(--font-size-20),2.8vw,var(--font-size-32));} .font-size-24\:40-fluid{font-size:clamp(var(--font-size-24),3.3vw,var(--font-size-40));} .font-size-32\:54-fluid{font-size:clamp(var(--font-size-32),4.4vw,var(--font-size-54));} .font-size-48\:62-fluid{font-size:clamp(var(--font-size-48),6.7vw,var(--font-size-62));}  .mv-8\:32-fluid{margin-top:clamp(var(--spacing-300),3.3vw,var(--spacing-500));margin-bottom:clamp(var(--spacing-300),3.3vw,var(--spacing-500));} .pa-400{padding:var(--spacing-400);} .ph-16\:32-fluid{padding-right:clamp(var(--spacing-400),2.2vw,var(--spacing-500));padding-left:clamp(var(--spacing-400),2.2vw,var(--spacing-500));} .pv-700{padding-top:var(--spacing-700);padding-bottom:var(--spacing-700);} .pv-24\:32-fluid{padding-top:clamp(var(--spacing-2),3.3vw,var(--spacing-500));padding-bottom:clamp(var(--spacing-2),3.3vw,var(--spacing-500));} .pv-32\:48-fluid{padding-top:clamp(var(--spacing-500),4.4vw,var(--spacing-600));padding-bottom:clamp(var(--spacing-500),4.4vw,var(--spacing-600));} .pv-32\:64-fluid{padding-top:clamp(var(--spacing-500),4.4vw,var(--spacing-700));padding-bottom:clamp(var(--spacing-500),4.4vw,var(--spacing-700));} .pv-48\:64-fluid{padding-top:clamp(var(--spacing-600),6.7vw,var(--spacing-700));padding-bottom:clamp(var(--spacing-600),6.7vw,var(--spacing-700));}  .gap-200{gap:var(--spacing-200);} .gap-400{gap:var(--spacing-400);} .gap-300{gap:var(--spacing-300);} .gap-500{gap:var(--spacing-500);} .gap-4\:8-fluid{gap:clamp(var(--spacing-200),1vw,var(--spacing-300));} .gap-16\:24-fluid{gap:clamp(var(--spacing-400),2.2vw,var(--spacing-2));} .gap-16\:32-fluid{gap:clamp(var(--spacing-400),2.2vw,var(--spacing-500));} .gap-24\:48-fluid{gap:clamp(var(--spacing-2),3.3vw,var(--spacing-600));} .gap-32\:48-fluid{gap:clamp(var(--spacing-500),4.4vw,var(--spacing-600));} .gap-32\:64-fluid{gap:clamp(var(--spacing-500),4.4vw,var(--spacing-700));} .gap-36\:48-fluid{gap:clamp(var(--spacing-3),4.4vw,var(--spacing-4));}  .height-auto{height:auto;} .width-340\:400-fluid{width:clamp(340px,45vw,400px);} .size-8\:16-fluid{width:clamp(var(--sizing-300),1.7vw,var(--sizing-400));height:clamp(var(--sizing-300),1.7vw,var(--sizing-400));} .size-16\:20-fluid{width:clamp(var(--sizing-400),2.2vw,var(--sizing-500));height:clamp(var(--sizing-400),2.2vw,var(--sizing-500));} .size-32\:40-fluid{width:clamp(var(--sizing-700),4.4vw,var(--sizing-800));height:clamp(var(--sizing-700),4.4vw,var(--sizing-800));} .size-32\:48-fluid{width:clamp(var(--sizing-700),4.4vw,var(--sizing-900));height:clamp(var(--sizing-700),4.4vw,var(--sizing-900));} .size-48\:64-fluid{width:clamp(var(--sizing-900),6.7vw,var(--sizing-1000));height:clamp(var(--sizing-900),6.7vw,var(--sizing-1000));} /* NOTE:Comparison table dropdown trickery * * Short version:* Rather than use JavaScript to change the table contents based on the * selected option,I've just thrown all the possible values into each cell of * the table and I'm un-hiding them individually when the corresponding option * is selected. * * Long version:* Each option in the select is a characteristic that is applicable to each of * the products being compared. Each row in the table contains the value of the * selected characteristic for a given product. * For a given row/product,I've thrown the values for all of the * characteristics into their own hidden spans,and the CSS below takes care of * un-hiding the correct span in each row based on which option/characteristic * is currently selected for comparison. */ select#options-comparison-characteristic-select{&:has( > option#contract-size-comparison:checked ) ~ table td .contract-size-comparison{display:revert !important;} &:has( > option#contract-multiplier-comparison:checked ) ~ table td .contract-multiplier-comparison{display:revert !important;} &:has( > option#notional-size-comparison:checked ) ~ table td .notional-size-comparison{display:revert !important;} &:has( > option#settlement-type-comparison:checked ) ~ table td .settlement-type-comparison{display:revert !important;} &:has( > option#exercise-style-comparison:checked ) ~ table td .exercise-style-comparison{display:revert !important;} &:has( > option#tax-treatment-comparison:checked ) ~ table td .tax-treatment-comparison{display:revert !important;} &:has( > option#extended-trading-hours-comparison:checked ) ~ table td .extended-trading-hours-comparison{display:revert !important;} &:has( > option#settlement-certainty-comparison:checked ) ~ table td .settlement-certainty-comparison{display:revert !important;}}
.bg-brand-primary,.hover\:bg-brand-primary:hover{background-color:var(--color-brand-primary) !important;} .bg-accent-primary{background-color:var(--color-accent-primary) !important;} .bg-transparent{background-color:transparent !important;} .bg-gradient{background:linear-gradient(to right,var(--color-brand-banner),dodgerblue) padding-box;height:168px;} .bg-\[rgb\(80\,217\,112\)\]{background-color:rgb(80,217,112);} .bg-linear-gradient-primary-to-dodgerblue{background:linear-gradient(to right,var(--color-brand-banner),dodgerblue) padding-box;} .bg-white,.hover\:bg-white:hover{background-color:var(--color-base-white) !important;} .border-radius-8{border-radius:8px;} .border-color-primary{border-color:var(--color-brand-primary);} .bottom-border-black-2{border-bottom:2px solid var(--color-base-black);} .border-right-1px-solid-white{border-right:1px solid white !important;} .color-accent-primary{color:var(--color-accent-primary) !important;} .color-white,.hover\:color-white:hover{color:var(--color-base-white) !important;} .color-brand-primary,.hover\:color-brand-primary:hover{color:var(--color-brand-primary) !important;} .color-accent-secondary{color:var(--color-accent-secondary) !important;} .color-accent-tertiary{color:var(--color-accent-tertiary) !important;} .color-base-neutral-1400{color:var(--color-base-neutral-1400);} .color-brand-light-aqua{color:var(--color-brand-light-aqua);} .display-flex{display:flex;} .font-family-heading{font-family:var(--font-family-heading) !important;} .font-family-display{font-family:var(--font-family-display) !important;} .font-family-primary{font-family:var(--font-family-primary) !important;} .font-size-10{font-size:10px !important;} .font-size-12{font-size:12px !important;} .font-size-14{font-size:14px !important;} .font-size-16{font-size:16px !important;} .font-size-18{font-size:18px !important;} .font-size-20{font-size:20px !important;} .font-size-24{font-size:24px !important;} .font-size-28{font-size:28px !important;} .font-size-34{font-size:34px !important;} .font-size-40{font-size:40px !important;} .font-size-44{font-size:40px !important;} .font-size-48{font-size:48px !important;} .font-size-58{font-size:58px !important;} .font-size-70{font-size:70px !important;} .font-size-78{font-size:78px !important;} .font-size-84{font-size:84px !important;} .font-size-100{font-size:100px !important;} .font-size-120{font-size:120px !important;} .font-size-12\:24-fluid{font-size:clamp(var(--font-size-12),3vw,var(--font-size-24));} .font-size-12\:2vw\:20-fluid{font-size:clamp(var(--font-size-12),2vw,var(--font-size-20));} .font-size-28\:6vw\:46-fluid{font-size:clamp(var(--font-size-28),6vw,var(--font-size-48));} .font-size-40\:48-fluid{font-size:clamp(var(--font-size-40),10vw,var(--font-size-48));} .font-size-48\:58-fluid{font-size:clamp(var(--font-size-48),10vw,var(--font-size-58));} .font-size-40\:58-fluid{font-size:clamp(var(--font-size-40),10vw,var(--font-size-58)) !important;} .font-size-40\:58-fluid-I{font-size:clamp(var(--font-size-40),10vw,var(--font-size-58)) !important;} .font-size-40\:54-fluid{font-size:clamp(var(--font-size-40),10vw,var(--font-size-54));} .font-size-40\:58-fluid{font-size:clamp(var(--font-size-40),10vw,var(--font-size-58));} .font-size-28\:78-fluid{font-size:clamp(var(--font-size-28),7.5vw,var(--font-size-78));} .font-weight-light{font-weight:var(--font-weight-light) !important;} .font-weight-regular{font-weight:var(--font-weight-regular) !important;} .font-weight-semibold{font-weight:var(--font-weight-semibold) !important;} .font-weight-bold{font-weight:var(--font-weight-bold) !important;} .font-weight-extra-bold{font-weight:var(--font-weight-extra-bold) !important;} .gap-spacing-600{gap:var(--spacing-600);} .ink-common-bold{color:var(--ink-common-bold);}  .mb-\[50px\]{margin-bottom:50px;} .mb72{margin-bottom:72px} .letter-spacing-lg{letter-spacing:0.1em;} .letter-spacing-xl{letter-spacing:0.3em;} .line-height-xs{line-height:.8 !important;} .line-height-1{line-height:1 !important;} .line-height-1\.5{line-height:1.5 !important;} .line-height-28{line-height:28px !important;} .line-height-36{line-height:36px !important;} .line-height-48{line-height:48px !important;} .line-height-56\:78-fluid{line-height:clamp(56px,7.5vw,78px);} .line-height-56\:78-fluid-I{line-height:clamp(56px,7.5vw,78px) !important;} .min-height-262{min-height:262px !important;} .text--transform-normal{text-transform:capitalize;} .text--transform-none{text-transform:none;} .text-shadow-1{text-shadow:1px 1px 1px rgba(29,41,82,1);} .forward-arrow{fill:var(--color-base-white);height:72px;width:72px;} @media only screen and (min-width:544px){.border-right-1px-solid-white--tablet{border-right:1px solid white;}} .no-italic{font-style:normal;}