/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Customized reset: - Added .gv-activated class - Moved all:unset; display: revert; part to component level - Added reset for buttons and form elements */ .gv-activated { /* Preferred box-sizing value */ /* Remove margins around the body */ /* Reset buttons and form elements */ /* Set cursor for interactive elements */ /* Remove list styles (bullets/numbers) */ /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ /* revert the 'white-space' property for textarea elements on Safari */ /* minimum style to allow to style meter element */ /* reset default text opacity of input placeholder */ /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ /* apply back the draggable feature - exist only in Chromium and Safari */ } .gv-activated, .gv-activated *, .gv-activated *::before, .gv-activated *::after { box-sizing: border-box; } body.gv-activated { margin: 0; } .gv-activated button, .gv-activated input, .gv-activated optgroup, .gv-activated select, .gv-activated textarea { color: inherit; font-family: inherit; -webkit-font-feature-settings: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; padding: 0; } .gv-activated button:focus, .gv-activated input:focus, .gv-activated optgroup:focus, .gv-activated select:focus, .gv-activated textarea:focus { outline: none; } .gv-activated button, .gv-activated select { text-transform: none; } .gv-activated button, .gv-activated [type="button"], .gv-activated [type="reset"], .gv-activated [type="submit"] { background-color: transparent; background-image: none; border: none; -webkit-user-select: none; user-select: none; } .gv-activated input, .gv-activated textarea { box-shadow: none; outline: none; /* Safari - solving issue when using user-select:none on the text input doesn't working */ -webkit-user-select: auto; user-select: auto; } .gv-activated a[href], .gv-activated button:not(:disabled), .gv-activated [role="button"] { cursor: pointer; } .gv-activated :disabled { cursor: default; } .gv-activated ol, .gv-activated ul, .gv-activated menu { list-style: none; margin: 0; padding: 0; } .gv-activated img { max-width: 100%; } .gv-activated table { border-collapse: collapse; } .gv-activated textarea { white-space: revert; } .gv-activated meter { -webkit-appearance: revert; appearance: revert; } .gv-activated ::-webkit-input-placeholder { color: unset; } .gv-activated ::placeholder { color: unset; } .gv-activated :where([hidden]) { display: none; } .gv-activated :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; user-select: auto; } .gv-activated :where([draggable="true"]) { -webkit-user-drag: element; } /* Fluid */ /* Typography * Mixins to reuse text styles in other components */ /* Storefront */ /* Truncate */ /* Fluid space */ /* Container */ /* Content container */ /* Stack space */ /* Flex layout */ /* Condensed */ /* Skip link */ /* Progress circle */ /* Background states */ /* Focus visible */ /* Reset */ /* Spacers for margin, paddings, etc. */ /* Fluid sizes */ /* Icons sizes */ /* Breakpoints */ /* Fine grained break points */ /* Min and Max container sizes. */ /* Media queries */ /* Colors (for LESS functions) */ /* Z-level indexes * TODO: Would be nice to generate levels automatically by a constant number, based * on a list - LESS does not offer a solution for this currently without drawbacks */ @font-face { font-display: swap; font-family: PlusJakartaSans; font-style: normal; font-weight: 400 700; src: url("../fonts/PlusJakartaSans.woff2") format("woff2"), url("../fonts/PlusJakartaSans.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; src: url("../fonts/JetBrainsMono.woff2") format("woff2"), url("../fonts/JetBrainsMono.ttf") format("truetype"); } @font-face { font-display: swap; font-family: Gellix; font-style: normal; font-weight: 400 700; src: url("../fonts/Gellix-SemiBold.woff2") format("woff2"), url("../fonts/Gellix-SemiBold.ttf") format("truetype"); } .gv-activated.gv-text-non-fluid, .gv-activated .gv-text-non-fluid { /* Font size */ --font-size-heading-xxxl-min: var(--font-size-heading-xxxl-max); --font-size-heading-xxl-min: var(--font-size-heading-xxl-max); --font-size-heading-xl-min: var(--font-size-heading-xl-max); --font-size-heading-lg-min: var(--font-size-heading-lg-max); --font-size-heading-md-min: var(--font-size-heading-md-max); --font-size-heading-sm-min: var(--font-size-heading-sm-max); --font-size-heading-xs-min: var(--font-size-heading-xs-max); --font-size-text-xl-min: var(--font-size-text-xl-max); --font-size-text-lg-min: var(--font-size-text-lg-max); --font-size-text-md-min: var(--font-size-text-md-max); /* Letterspacing */ --letterspacing-heading-xxxl-min: var(--letterspacing-heading-xxxl-max); --letterspacing-heading-xxl-min: var(--letterspacing-heading-xxl-max); --letterspacing-heading-xl-min: var(--letterspacing-heading-xl-max); --letterspacing-heading-lg-min: var(--letterspacing-heading-lg-max); --letterspacing-heading-md-min: var(--letterspacing-heading-md-max); --letterspacing-heading-sm-min: var(--letterspacing-heading-sm-max); --letterspacing-heading-xs-min: var(--letterspacing-heading-xs-max); --letterspacing-text-lg-min: var(--letterspacing-text-lg-max); --letterspacing-text-md-min: var(--letterspacing-text-md-max); } .gv-activated .gv-mode-condensed { /* Form */ --form-element-height: 30px; } @media (max-width: 599px ) { .gv-activated .gv-max-mob-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 600px ) { .gv-activated .gv-tab-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (max-width: 767px ) { .gv-activated .gv-max-tab-sm-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 768px ) { .gv-activated .gv-tab-lg-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (max-width: 1023px ) { .gv-activated .gv-max-tab-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 1024px ) { .gv-activated .gv-desk-mode-condensed { /* Form */ --form-element-height: 30px; } } .gv-activated .gv-accordion .gv-acc-item:not(:first-child) { border-top: var(--size-border) solid var(--color-border); } .gv-activated .gv-accordion .gv-acc-header { display: block; width: 100%; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-accordion .gv-acc-header { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-accordion .gv-acc-header { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-accordion .gv-acc-header { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-accordion .gv-acc-header { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-accordion .gv-acc-header { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-accordion .gv-acc-header { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger { display: flex; flex-direction: column; gap: var(--size-xs); padding: var(--size-md) 0 var(--size-md) 0; position: relative; text-align: left; width: 100%; } .gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger .gv-acc-title { display: block; padding-right: var(--size-xl); position: relative; width: 100%; } .gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger .gv-acc-title::after { background-color: var(--color-body-on-default); content: ""; display: block; -webkit-mask: url("../images/chevron-down.svg") no-repeat 50% 50%; mask: url("../images/chevron-down.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: var(--size-icon-md); right: var(--size-sm); position: absolute; top: 0; width: var(--size-icon-md); } .gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger.gv-expanded .gv-acc-title::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-accordion .gv-acc-content { padding: var(--size-sm) var(--size-xl) var(--size-lg) 0; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } @media (min-width: 600px ) { .gv-activated .gv-accordion .gv-acc-header .gv-acc-trigger { gap: var(--size-sm); padding: var(--size-lg) 0 var(--size-lg) 0; } } .gv-activated .gv-action { align-items: center; color: var(--color-state-form-active); cursor: pointer; display: inline-flex; flex-wrap: nowrap; gap: 4px; text-decoration: none; font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-action:hover { color: var(--color-state-form-active); } .gv-activated .gv-action:disabled { color: var(--color-body-on-disabled); cursor: auto; pointer-events: none; } .gv-activated .gv-action.gv-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-app-rail { background-color: var(--color-surface-dim); border-right: 1px solid var(--color-border-alt); flex: 0 0 73px; padding: var(--size-md) 0; width: 73px; } .gv-activated .gv-app-rail .gv-nav-list { padding-left: var(--size-xs); padding-right: var(--size-xs); } .gv-activated .gv-app-rail .gv-nav-list > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-app-rail .gv-divider { margin: var(--size-sm); width: auto; } .gv-activated .gv-app-rail .gv-item { align-items: center; border-radius: var(--border-radius); display: flex; flex-direction: column; gap: var(--size-xs); padding-bottom: var(--size-sm); position: relative; text-align: center; text-decoration: none; width: 100%; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-app-rail .gv-item .gv-indicator { position: absolute; right: var(--size-xs); top: var(--size-xs); } .gv-activated .gv-app-rail .gv-item .gv-item-icon { border-radius: var(--border-radius); display: inline-block; padding: var(--size-xs) var(--size-sm); } .gv-activated .gv-app-rail .gv-item.gv-new { background-color: var(--color-signal-info-light); } .gv-activated .gv-app-rail .gv-item.gv-active.gv-new, .gv-activated .gv-app-rail .gv-item.gv-active .gv-item-icon { background-color: var(--color-state-active); } .gv-activated .gv-app-rail .gv-item.gv-new:hover, .gv-activated .gv-app-rail .gv-item:hover .gv-item-icon { background-color: var(--color-state-hover); } .gv-activated .gv-badge { --badge-color-background: inherit; --badge-color-border: inherit; background-color: var(--badge-color-background); border: var(--size-border) solid var(--badge-color-border); border-radius: var(--border-radius); color: var(--color-body-on-default); display: inline-block; /* text-overflow doesn't work on flex or inline-flex, so use inline-block to keep the component simple */ height: 1.625rem; /* 26px */ max-width: 100%; padding: calc(var(--size-xs) - var(--size-border)) var(--size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-badge.gv-badge-generic { --badge-color-background: var(--color-surface-bright); --badge-color-border: var(--color-border); } .gv-activated .gv-badge.gv-badge-alert { --badge-color-background: var(--color-signal-alert-light); --badge-color-border: var(--color-signal-alert); } .gv-activated .gv-badge.gv-badge-warning { --badge-color-background: var(--color-signal-warning-light); --badge-color-border: var(--color-signal-warning); } .gv-activated .gv-badge.gv-badge-info { --badge-color-background: var(--color-signal-info-light); --badge-color-border: var(--color-signal-info); } .gv-activated .gv-badge.gv-badge-success { --badge-color-background: var(--color-signal-success-light); --badge-color-border: var(--color-signal-success); } .gv-activated .gv-badge.gv-badge-discount { --badge-color-background: #f9df79; --badge-color-border: #f6c844; color: var(--color-on-fixed-black); } .gv-activated .gv-badge.gv-badge-aida { --badge-color-background: var(--color-surface-bright); --badge-color-border: var(--color-surface-accent); align-items: center; display: inline-flex; gap: var(--size-xs); max-width: unset; overflow: unset; text-overflow: unset; white-space: unset; } .gv-activated .gv-badge.gv-badge-aida svg { height: 14px; width: auto; } .gv-activated .gv-breadcrumbs { align-items: center; color: var(--color-body-on-alternative); display: inline-flex; flex-wrap: wrap; gap: var(--size-sm); padding: 0; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); /* Back link */ } .gv-activated .gv-breadcrumbs li { align-items: center; display: inline-flex; list-style: none; margin: 0; } .gv-activated .gv-breadcrumbs li:last-child { color: var(--color-body-on-default); font-weight: var(--font-weight-semibold); } .gv-activated .gv-breadcrumbs li gv-icon { margin-left: var(--size-sm); } .gv-activated .gv-breadcrumbs a, .gv-activated .gv-breadcrumbs span { /* Apply values to calculate em_based margins that work with any font size */ } .gv-activated .gv-breadcrumbs a::before, .gv-activated .gv-breadcrumbs span::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-breadcrumbs a::after, .gv-activated .gv-breadcrumbs span::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-breadcrumbs a::before, .gv-activated .gv-breadcrumbs span::before, .gv-activated .gv-breadcrumbs a::after, .gv-activated .gv-breadcrumbs span::after { content: ""; display: block; height: 0; width: 0; } .gv-activated .gv-breadcrumbs a { color: var(--color-body-on-alternative); text-decoration: none; } .gv-activated .gv-breadcrumbs a:hover { color: var(--color-body-on-alternative); } .gv-activated .gv-breadcrumbs > a { align-items: center; display: inline-flex; } .gv-activated .gv-breadcrumbs > a gv-icon { margin-right: var(--size-xs); } /* Button group mixin */ /* Button component */ .gv-activated .gv-button { --button-color-background: inherit; --button-color-border: transparent; --button-color-text: inherit; --button-height: var(--form-element-height); align-items: center; background: var(--button-color-background); border: var(--size-border) solid var(--button-color-border); border-radius: var(--button-radius); color: var(--button-color-text); cursor: pointer; display: inline-flex; gap: var(--size-xs); height: var(--button-height); font-family: inherit; font-weight: var(--font-weight-semibold); justify-content: center; outline: none; padding: var(--button-padding-tb) var(--button-padding-lr); text-align: center; text-decoration: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); /* Condensed mode */ } .gv-activated .gv-button.gv-button-primary { --button-color-background: var(--color-button-bg-primary); --button-color-border: var(--color-button-bg-primary); --button-color-text: var(--color-button-fg-on-primary); } .gv-activated .gv-button.gv-button-secondary { --button-color-background: var(--color-surface-bright); --button-color-border: var(--color-button-border-secondary); --button-color-text: var(--color-body-on-default); } .gv-activated .gv-button.gv-button-cta { --button-color-background: var(--color-button-bg-cta); --button-color-border: var(--color-button-bg-cta); --button-color-text: var(--color-button-fg-on-cta); } .gv-activated .gv-button.gv-button-cancel { --button-color-background: transparent; --button-color-border: var(--color-border); --button-color-text: var(--color-body-on-default); } .gv-activated .gv-button.gv-button-destructive { --button-color-background: var(--color-signal-alert); --button-color-border: var(--color-signal-alert); --button-color-text: var(--color-on-fixed-white); } .gv-activated .gv-button.gv-button-neutral { --button-color-background: var(--color-on-fixed-white); --button-color-border: var(--color-on-fixed-white); --button-color-text: var(--color-on-fixed-black); } .gv-activated .gv-button.gv-button-upgrade { --button-color-background: var(--color-button-bg-upgrade); --button-color-border: var(--color-button-bg-upgrade); --button-color-text: var(--color-on-fixed-white); } .gv-activated .gv-button.gv-button-icon { border-radius: var(--button-height); padding-left: 0; padding-right: 0; width: var(--button-height); } .gv-activated .gv-button:active { color: var(--button-color-text); opacity: var(--opacity-active-elements); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .gv-activated .gv-button:hover { color: var(--button-color-text); opacity: var(--opacity-active-elements); text-decoration: none; } } .gv-activated .gv-button.gv-disabled, .gv-activated .gv-button:disabled { cursor: auto; opacity: var(--opacity-disabled-elements); pointer-events: none; } .gv-activated .gv-button gv-icon { flex-shrink: 0; } @media (max-width: 599px ) { .gv-activated .gv-button { width: 100%; } } .gv-activated .gv-button .gv-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } @media (max-width: 599px ) { .gv-activated .gv-button .gv-max-mob-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-max-mob-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (min-width: 600px ) { .gv-activated .gv-button .gv-tab-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-tab-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (max-width: 767px ) { .gv-activated .gv-button .gv-max-tab-sm-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-max-tab-sm-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (min-width: 768px ) { .gv-activated .gv-button .gv-tab-lg-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-tab-lg-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (max-width: 1023px ) { .gv-activated .gv-button .gv-max-tab-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-max-tab-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (min-width: 1024px ) { .gv-activated .gv-button .gv-desk-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-desk-mode-condensed { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } .gv-activated .gv-button-group { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--size-md); } .gv-activated .gv-button-group.gv-vertical { align-items: stretch; flex-direction: column; gap: var(--size-sm); width: 100%; } @media (max-width: 599px ) { .gv-activated .gv-button-group { align-items: stretch; flex-direction: column; gap: var(--size-sm); width: 100%; } } .gv-activated .gv-button-toggle-group { display: flex; flex-wrap: nowrap; } .gv-activated .gv-button-toggle-group .gv-button-toggle { align-items: center; background: none; border-radius: var(--border-radius); color: var(--color-body-on-alternative); cursor: pointer; display: inline-flex; font-family: inherit; height: var(--form-element-height); justify-content: center; padding: var(--size-sm) var(--size-md); } .gv-activated .gv-button-toggle-group .gv-button-toggle:hover { background-color: var(--color-state-hover); } .gv-activated .gv-button-toggle-group .gv-button-toggle.gv-active { background-color: var(--color-state-active); color: var(--color-body-on-default); } .gv-activated .gv-button-toggle-group.gv-toggle-view { background: var(--color-surface-form); border: 1px solid var(--color-border); border-radius: var(--border-radius); display: inline-flex; } .gv-activated .gv-button-toggle-group.gv-toggle-view.gv-on-surface-dim { background-color: var(--color-surface-bright); } .gv-activated .gv-button-toggle-group.gv-toggle-view .gv-button-toggle { border-radius: 0; color: var(--color-body-on-default); gap: var(--size-xs); padding: var(--size-xs); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-button-toggle-group.gv-toggle-view .gv-button-toggle:first-child { border-bottom-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); } .gv-activated .gv-button-toggle-group.gv-toggle-view .gv-button-toggle:last-child { border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-divider-button { align-items: center; display: flex; gap: var(--size-md); /* Form */ --form-element-height: 30px; } .gv-activated .gv-divider-button .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-divider-button .gv-checkbox { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-divider-button .gv-radio { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-divider-button .gv-radio:checked::after { border-width: 5px; } .gv-activated .gv-divider-button .gv-input.gv-input-number button { padding: 0; } .gv-activated .gv-divider-button .gv-toggle { --toggle-height: 16px; --toggle-width: 28px; --toggle-dot-indent: 2px; } .gv-activated .gv-divider-button gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-divider-button .gv-divider { --divider-color: var(--color-border-alt); } .gv-activated .gv-divider-button .gv-button { white-space: nowrap; } .gv-activated .gv-divider-button .gv-button[aria-expanded="true"] gv-icon:last-child { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-card { background: var(--color-surface-bright); border-radius: var(--border-radius); border: var(--size-border) solid var(--color-border-alt); color: var(--color-body-on-default); display: flex; flex-direction: column; max-width: 100%; position: relative; text-decoration: none; } .gv-activated .gv-card .gv-card-image { background: var(--color-surface-dim); border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); height: 200px; margin: 24px 24px 0 24px; overflow: hidden; position: relative; text-align: center; width: calc(100% - 48px); } .gv-activated .gv-card .gv-card-image img { height: 220px; left: 50%; max-width: none; position: absolute; top: 16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 280px; } .gv-activated .gv-card .gv-card-illustration, .gv-activated .gv-card .gv-card-tile, .gv-activated .gv-card .gv-card-score { padding: 24px 24px 0; } .gv-activated .gv-card .gv-card-resource { margin-top: 8px; } .gv-activated .gv-card .gv-card-legend { position: relative; } .gv-activated .gv-card .gv-card-legend .gv-card-title { padding-right: 24px; } .gv-activated .gv-card .gv-card-legend .gv-legend-info { color: var(--color-body-on-default); } .gv-activated .gv-card .gv-card-legend .gv-legend-info .gv-score { margin-right: 8px; font-weight: var(--font-weight-semibold); } .gv-activated .gv-card .gv-card-legend gv-icon[class*="gv-legend-"] { position: absolute; top: calc(24px); right: 24px; } .gv-activated .gv-card .gv-card-content { color: var(--color-body-on-alternative); flex-grow: 1; padding: 24px 24px 0; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-card .gv-card-content > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-card .gv-card-content .gv-card-resource { color: var(--color-body-on-default); margin: 8px 0 16px 0; } .gv-activated .gv-card .gv-card-content:last-child { padding-bottom: 24px; } .gv-activated .gv-card .gv-card-content + .gv-notice-addon { margin-top: 24px; } .gv-activated .gv-card .gv-card-title { color: var(--color-body-on-default); font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-card .gv-card-footer { padding: 16px 24px 24px; } .gv-activated .gv-card .gv-card-footer .gv-button { width: 100%; } .gv-activated .gv-card.gv-hug-button .gv-card-footer .gv-button { width: auto; } @media (max-width: 599px ) { .gv-activated .gv-card.gv-hug-button .gv-card-footer .gv-button { width: 100%; } } /* Shared slider mixins */ /* Product table mixins */ /* Comparison table mixins */ /* Shared css */ .gv-activated .gv-features-table { --slider-px-max: var(--size-fluid-max-value); --slider-px-min: var(--size-fluid-min-value); --table-sidebar-width: calc(0 * 1px); /* Ensures unit is preserved for calc() used in mixins */ --table-slider-gap: calc(0 * 1px); /* Ensures unit is preserved for calc() used in mixins */ --recommended-label-height: 0; --slider-dots-height: var(--size-lg); --slider-dots-space: calc(var(--slider-dots-height) + var(--size-sm)); --table-zebra-even: var(--color-zebra-odd); --table-zebra-odd: var(--color-zebra-even); /* Slider navigation */ /* Table content */ /* Product table css */ /* Comparison table css */ /* Deprecated recommended class */ } .gv-activated .gv-features-table.gv-products-2 .gv-product, .gv-activated .gv-features-table.gv-products-2 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (2 - 1))) / 2); } .gv-activated .gv-features-table.gv-products-3 .gv-product, .gv-activated .gv-features-table.gv-products-3 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (3 - 1))) / 3); } .gv-activated .gv-features-table.gv-products-4 .gv-product, .gv-activated .gv-features-table.gv-products-4 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (4 - 1))) / 4); } .gv-activated .gv-features-table.gv-products-5 .gv-product, .gv-activated .gv-features-table.gv-products-5 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (5 - 1))) / 5); } .gv-activated .gv-features-table .gv-dots-scroll-area { position: relative; } .gv-activated .gv-features-table .gv-slider-pagination { display: none; justify-content: center; bottom: var(--size-lg); position: -webkit-sticky; position: sticky; z-index: 199; width: 100%; } .gv-activated .gv-features-table .gv-slider-pagination .gv-dots { align-items: center; background-color: transparent; border: 1px solid transparent; border-radius: var(--border-radius); display: flex; gap: var(--size-sm); height: var(--slider-dots-height); padding: 0 var(--size-md); transition: all 1s; } .gv-activated .gv-features-table .gv-slider-pagination .gv-dots > * { background: var(--color-gray-400); border-radius: var(--size-sm); color: transparent; cursor: pointer; display: block; height: var(--size-sm); width: var(--size-sm); } .gv-activated .gv-features-table .gv-slider-pagination .gv-dots > *.gv-active { background: var(--color-primary); } .gv-activated .gv-features-table .gv-slider-pagination.gv-state-top { bottom: 100%; -webkit-transform: translateY(calc(var(--slider-dots-space) * -1)); transform: translateY(calc(var(--slider-dots-space) * -1)); } .gv-activated .gv-features-table .gv-slider-pagination.gv-state-overlay .gv-dots { background-color: rgb(from var(--color-surface-bright) r g b / 90%); border: 1px solid var(--color-border); } .gv-activated .gv-features-table .gv-slider-nav { display: none; position: -webkit-sticky; position: sticky; top: 0; width: 100%; z-index: 199; } .gv-activated .gv-features-table .gv-slider-nav.gv-state-bottom { position: absolute; top: auto !important; /* Override value added by Javascript */ } .gv-activated .gv-features-table .gv-slider-nav:not(.gv-state-bottom) { bottom: auto !important; /* Override value added by Javascript */ } .gv-activated .gv-features-table .gv-slider-nav .gv-nav-button { align-items: center; background-color: var(--color-primary); border-radius: var(--border-radius); color: var(--color-button-fg-on); display: flex; height: 40px; justify-content: center; position: absolute; top: 0; width: 40px; } .gv-activated .gv-features-table .gv-slider-nav .gv-nav-button.gv-previous { left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .gv-activated .gv-features-table .gv-slider-nav .gv-nav-button.gv-next { right: 0; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .gv-activated .gv-features-table .gv-slider-nav .gv-nav-button.gv-disabled { cursor: auto; opacity: var(--opacity-disabled-elements); pointer-events: none; } .gv-activated .gv-features-table .gv-table-container { position: relative; } .gv-activated .gv-features-table .gv-table { box-sizing: content-box; padding-top: var(--recommended-label-height); } .gv-activated .gv-features-table .gv-section .gv-table-row { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-features-table .gv-table-row { display: flex; flex-wrap: nowrap; position: relative; } .gv-activated .gv-features-table .gv-table-row:nth-child(odd) .gv-cell-info, .gv-activated .gv-features-table .gv-table-row:nth-child(odd) .gv-cell { background: var(--table-zebra-odd); } .gv-activated .gv-features-table .gv-table-row:nth-child(even) .gv-cell-info, .gv-activated .gv-features-table .gv-table-row:nth-child(even) .gv-cell { background: var(--table-zebra-even); } .gv-activated .gv-features-table .gv-product, .gv-activated .gv-features-table .gv-cell { flex: 1; position: relative; } .gv-activated .gv-features-table .gv-header-info, .gv-activated .gv-features-table .gv-product { background: var(--table-zebra-odd); border-color: var(--color-border); border-style: solid; border-width: 1px 1px 0 0; } .gv-activated .gv-features-table .gv-cell-info, .gv-activated .gv-features-table .gv-cell { border-color: var(--color-border); border-style: solid; border-width: 0 1px 0 0; display: flex; gap: var(--size-sm); padding: var(--size-sm) var(--size-lg); } .gv-activated .gv-features-table .gv-cell-info .gv-tooltip-button, .gv-activated .gv-features-table .gv-cell .gv-tooltip-button { color: var(--color-body-on-alternative); } .gv-activated .gv-features-table .gv-product { display: flex; flex-direction: column; } .gv-activated .gv-features-table .gv-product .gv-recommended-label { background: var(--color-recommended-bg); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); color: var(--color-recommended-fg-on); left: -1px; opacity: 1; padding: var(--size-xs) var(--size-sm); position: absolute; right: -1px; text-align: center; top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: opacity 0.2s linear 0s; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-features-table .gv-product .gv-content { border-bottom: 1px solid var(--color-border); color: var(--color-body-on-alternative); flex-grow: 1; padding: var(--size-lg); position: relative; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-features-table .gv-product .gv-content .gv-title { color: var(--color-body-on-default); margin-bottom: var(--size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0; line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-title { font-size: calc(var(--font-size-text-xl-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-title { font-size: calc(calc(var(--font-size-text-xl-min) * 1rem) + (var(--font-size-text-xl-max) - var(--font-size-text-xl-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-title { font-size: calc(var(--font-size-text-xl-max) * 1rem); } } .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { display: block; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-content .gv-subtitle { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-features-table .gv-product .gv-bottom { padding: var(--size-lg); position: relative; } .gv-activated .gv-features-table .gv-product .gv-bottom > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-discount, .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-with-badge { align-content: flex-start; align-items: center; display: flex; flex-flow: row wrap; gap: var(--size-sm); } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-old { color: var(--color-body-on-alternative); text-decoration: line-through; } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price { align-items: flex-end; display: flex; flex-wrap: wrap; gap: var(--size-sm); } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { white-space: nowrap; font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-md); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { font-size: calc(var(--font-size-heading-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-text { font-size: calc(var(--font-size-heading-md-max) * 1rem); } } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-period { padding-bottom: var(--size-xs); white-space: nowrap; font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-price-info { color: var(--color-body-on-alternative); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { color: var(--color-state-form-active); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-info-label { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-tooltip-container { display: inline-block; vertical-align: middle; } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-price-container .gv-tooltip-container gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-features-table .gv-product .gv-bottom .gv-button { width: 100%; } .gv-activated .gv-features-table .gv-cell > *:not(.gv-sr-only) { position: relative; } .gv-activated .gv-features-table .gv-cell .gv-cell-text { flex-grow: 1; } .gv-activated .gv-features-table.gv-product-table.gv-current-1:not(.gv-recommended-1) .gv-product:nth-child(1), .gv-activated .gv-features-table.gv-product-table.gv-current-1:not(.gv-recommended-1) .gv-cell:nth-child(1) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-product-table.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(2), .gv-activated .gv-features-table.gv-product-table.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(2) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(3), .gv-activated .gv-features-table.gv-product-table.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(3) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(4), .gv-activated .gv-features-table.gv-product-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(4) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(5), .gv-activated .gv-features-table.gv-product-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(5) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-product:nth-child(1), .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-cell:nth-child(1) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-product:nth-child(1)::before, .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-cell:nth-child(1)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-product:nth-child(1)::after, .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-cell:nth-child(1)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-table-row:nth-child(even) .gv-cell:nth-child(1)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-1 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(1) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2), .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2)::before, .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-product:nth-child(2)::after, .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-cell:nth-child(2)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3), .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::before, .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-product:nth-child(3)::after, .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-cell:nth-child(3)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4), .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::before, .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-product:nth-child(4)::after, .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-cell:nth-child(4)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5), .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::before, .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-product:nth-child(5)::after, .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-cell:nth-child(5)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-product-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) { border-bottom-color: var(--color-recommended-bg); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-product-table .gv-table-slider { scroll-padding: calc(var(--slider-px-min) * 1px); padding-left: calc(var(--slider-px-min) * 1px); padding-right: calc(var(--slider-px-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-product-table .gv-table-slider { scroll-padding: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)); padding-left: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)); padding-right: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-product-table .gv-table-slider { scroll-padding: calc(var(--slider-px-max) * 1px); padding-left: calc(var(--slider-px-max) * 1px); padding-right: calc(var(--slider-px-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-product-table .gv-table-slider { margin-left: calc((var(--slider-px-min) * 1px) * -1); margin-right: calc((var(--slider-px-min) * 1px) * -1); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-product-table .gv-table-slider { margin-left: calc((calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)) * -1); margin-right: calc((calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)) * -1); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-product-table .gv-table-slider { margin-left: calc((var(--slider-px-max) * 1px) * -1); margin-right: calc((var(--slider-px-max) * 1px) * -1); } } .gv-activated .gv-features-table.gv-product-table .gv-product { scroll-snap-align: start; } .gv-activated .gv-features-table.gv-product-table .gv-product .gv-bottom { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-features-table.gv-product-table .gv-product:first-child, .gv-activated .gv-features-table.gv-product-table .gv-cell:first-child { border-left-width: 1px; } .gv-activated .gv-features-table.gv-product-table .gv-section-header { display: flex; flex-wrap: nowrap; position: relative; } .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-cell { padding-top: var(--size-md); } .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { position: relative; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-product-table .gv-section-header .gv-title { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-features-table.gv-product-table .gv-icons { display: grid; gap: var(--size-sm); grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; width: 100%; } .gv-activated .gv-features-table.gv-product-table .gv-icons .gv-item { align-items: center; display: flex; flex-direction: column; } .gv-activated .gv-features-table.gv-product-table .gv-icons .gv-item-label { color: var(--color-body-on-alternative); display: block; width: 100%; font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-features-table.gv-product-table .gv-section:last-child .gv-table-row:last-child .gv-cell { border-bottom-width: 1px; } @media (max-width: 599px ) { .gv-activated .gv-features-table.gv-product-table.gv-products-2, .gv-activated .gv-features-table.gv-product-table.gv-products-3 { --table-slider-gap: var(--size-md); } .gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-2 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-2 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-2 .gv-cell, .gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-2 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (2 - 1))) / 2); } .gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-3 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-3 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-2.gv-products-3 .gv-cell, .gv-activated .gv-features-table.gv-product-table.gv-products-3.gv-products-3 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (3 - 1))) / 3); } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-slider-nav, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-slider-nav, .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-slider-pagination, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-slider-pagination { display: flex; } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-dots-scroll-area, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-slider, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-slider { margin-bottom: var(--size-lg); overflow-x: auto; overscroll-behavior-x: none; position: relative; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-slider::-webkit-scrollbar, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-row, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-row { gap: var(--table-slider-gap); } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-cell, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-cell { border-left-width: 1px; } .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table { width: calc(100% + (1 * var(--table-slider-gap)) + (1 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1))); } .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table { width: calc(100% + (2 * var(--table-slider-gap)) + (2 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1))); } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table { width: calc(100% + (3 * var(--table-slider-gap)) + (3 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1))); } .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table { width: calc(100% + (4 * var(--table-slider-gap)) + (4 * ((100% - (var(--table-slider-gap) * (1 - 1))) / 1))); } } @media (min-width: 600px ) { .gv-activated .gv-features-table.gv-product-table.gv-products-2 .gv-table-slider, .gv-activated .gv-features-table.gv-product-table.gv-products-3 .gv-table-slider { margin: 0; padding: 0; } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-features-table.gv-product-table .gv-slider-pagination .gv-dots > *:last-child { display: none; } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 2), .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 2) { display: none; } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table { width: calc(100% + (1 * var(--table-slider-gap)) + (1 * ((100% - (var(--table-slider-gap) * (3 - 1))) / 3))); } .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table { width: calc(100% + (2 * var(--table-slider-gap)) + (2 * ((100% - (var(--table-slider-gap) * (3 - 1))) / 3))); } } @media (max-width: 1023px ) { .gv-activated .gv-features-table.gv-product-table.gv-products-4, .gv-activated .gv-features-table.gv-product-table.gv-products-5 { --table-slider-gap: var(--size-md); } .gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-4 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-4 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-4 .gv-cell, .gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-4 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (4 - 1))) / 4); } .gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-5 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-5 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-4.gv-products-5 .gv-cell, .gv-activated .gv-features-table.gv-product-table.gv-products-5.gv-products-5 .gv-cell { max-width: calc((100% - var(--table-sidebar-width) - (var(--table-slider-gap) * (5 - 1))) / 5); } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-slider-nav, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-slider-nav, .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-slider-pagination, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-slider-pagination { display: flex; } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-dots-scroll-area, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-slider, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-slider { margin-bottom: var(--size-lg); overflow-x: auto; overscroll-behavior-x: none; position: relative; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-slider::-webkit-scrollbar, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-row, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-row { gap: var(--table-slider-gap); } .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-product, .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-cell, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-cell { border-left-width: 1px; } } @media (min-width: 1024px ) { .gv-activated .gv-features-table.gv-product-table.gv-products-4 .gv-table-slider, .gv-activated .gv-features-table.gv-product-table.gv-products-5 .gv-table-slider { margin: 0; padding: 0; } } .gv-activated .gv-features-table.gv-comparison-table { --table-sidebar-width: 220px; } .gv-activated .gv-features-table.gv-comparison-table.gv-current-1:not(.gv-recommended-1) .gv-product:nth-child(2), .gv-activated .gv-features-table.gv-comparison-table.gv-current-1:not(.gv-recommended-1) .gv-cell:nth-child(2) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-comparison-table.gv-current-2:not(.gv-recommended-2) .gv-product:nth-child(3), .gv-activated .gv-features-table.gv-comparison-table.gv-current-2:not(.gv-recommended-2) .gv-cell:nth-child(3) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-comparison-table.gv-current-3:not(.gv-recommended-3) .gv-product:nth-child(4), .gv-activated .gv-features-table.gv-comparison-table.gv-current-3:not(.gv-recommended-3) .gv-cell:nth-child(4) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-comparison-table.gv-current-4:not(.gv-recommended-4) .gv-product:nth-child(5), .gv-activated .gv-features-table.gv-comparison-table.gv-current-4:not(.gv-recommended-4) .gv-cell:nth-child(5) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-comparison-table.gv-current-5:not(.gv-recommended-5) .gv-product:nth-child(6), .gv-activated .gv-features-table.gv-comparison-table.gv-current-5:not(.gv-recommended-5) .gv-cell:nth-child(6) { --table-zebra-even: var(--color-surface-toned); --table-zebra-odd: var(--color-surface-dim); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-product:nth-child(2), .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-cell:nth-child(2) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-product:nth-child(2)::before, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-cell:nth-child(2)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-product:nth-child(2)::after, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-cell:nth-child(2)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-table-row:nth-child(even) .gv-cell:nth-child(2)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-1 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(2) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-product:nth-child(3), .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-cell:nth-child(3) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-product:nth-child(3)::before, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-cell:nth-child(3)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-product:nth-child(3)::after, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-cell:nth-child(3)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-table-row:nth-child(even) .gv-cell:nth-child(3)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-2 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(3) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-product:nth-child(4), .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-cell:nth-child(4) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-product:nth-child(4)::before, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-cell:nth-child(4)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-product:nth-child(4)::after, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-cell:nth-child(4)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-table-row:nth-child(even) .gv-cell:nth-child(4)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-3 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(4) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-product:nth-child(5), .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-cell:nth-child(5) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-product:nth-child(5)::before, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-cell:nth-child(5)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-product:nth-child(5)::after, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-cell:nth-child(5)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-table-row:nth-child(even) .gv-cell:nth-child(5)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-4 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(5) { border-bottom-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 { --recommended-label-height: 26px; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-product:nth-child(6), .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-cell:nth-child(6) { border-color: var(--color-recommended-bg); } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-product:nth-child(6)::before, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-cell:nth-child(6)::before { background-color: var(--color-recommended-bg); content: ""; inset: 0; opacity: 0.1; position: absolute; z-index: 0; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-product:nth-child(6)::after, .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-cell:nth-child(6)::after { background-color: var(--color-recommended-bg); bottom: 0; content: ""; left: -1px; position: absolute; top: 0; width: 1px; z-index: 1; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-table-row:nth-child(even) .gv-cell:nth-child(6)::before { opacity: 0.18; } .gv-activated .gv-features-table.gv-comparison-table.gv-recommended-5 .gv-section:last-child .gv-table-row:last-child .gv-cell:nth-child(6) { border-bottom-color: var(--color-recommended-bg); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { padding-right: calc(var(--slider-px-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { padding-right: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { padding-right: calc(var(--slider-px-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { margin-right: calc(calc(var(--slider-px-min) * 1px) * -1); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { margin-right: calc((calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)) * -1); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { margin-right: calc(calc(var(--slider-px-max) * 1px) * -1); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table { padding-right: calc(var(--slider-px-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table { padding-right: calc(calc(var(--slider-px-min) * 1px) + (var(--slider-px-max) - var(--slider-px-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table { padding-right: calc(var(--slider-px-max) * 1px); } } .gv-activated .gv-features-table.gv-comparison-table .gv-table-container::before, .gv-activated .gv-features-table.gv-comparison-table .gv-table-container::after { background-color: var(--color-border); bottom: 0; content: ""; position: absolute; top: var(--recommended-label-height); width: 1px; z-index: 198; } .gv-activated .gv-features-table.gv-comparison-table .gv-table-container::before { left: 0; } .gv-activated .gv-features-table.gv-comparison-table .gv-table-container::after { right: 0; } .gv-activated .gv-features-table.gv-comparison-table .gv-product { border-bottom-width: 1px; scroll-snap-align: end; } .gv-activated .gv-features-table.gv-comparison-table .gv-table-info { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-features-table.gv-comparison-table .gv-table-info.gv-header-info { border-bottom-width: 1px; padding: var(--size-lg); } .gv-activated .gv-features-table.gv-comparison-table .gv-bottom-info { display: none; padding: var(--size-lg) 0 0; } .gv-activated .gv-features-table.gv-comparison-table .gv-header-info, .gv-activated .gv-features-table.gv-comparison-table .gv-cell-info { border-right: 1px solid var(--color-border); flex: 0 0 var(--table-sidebar-width); left: 0; position: -webkit-sticky; position: sticky; width: var(--table-sidebar-width); z-index: 190; } .gv-activated .gv-features-table.gv-comparison-table .gv-section-header { background-color: var(--color-surface-bright); border-right: 1px solid var(--color-border); position: relative; } .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { display: block; left: 0; padding: var(--size-md) 0 var(--size-md) var(--size-lg); position: -webkit-sticky; position: sticky; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-features-table.gv-comparison-table .gv-section-header .gv-title { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-features-table.gv-comparison-table .gv-cell-info .gv-cell-label { flex-grow: 1; } .gv-activated .gv-features-table.gv-comparison-table .gv-cell { justify-content: center; } .gv-activated .gv-features-table.gv-comparison-table .gv-cell .gv-cell-text { text-align: center; } .gv-activated .gv-features-table.gv-comparison-table .gv-section-header + .gv-table-row .gv-cell-info, .gv-activated .gv-features-table.gv-comparison-table .gv-section-header + .gv-table-row .gv-cell { border-top-width: 1px; } .gv-activated .gv-features-table.gv-comparison-table .gv-section .gv-table-row:last-child .gv-cell-info, .gv-activated .gv-features-table.gv-comparison-table .gv-section .gv-table-row:last-child .gv-cell { border-bottom-width: 1px; } @media (max-width: 599px ) { .gv-activated .gv-features-table.gv-comparison-table.gv-products-1 .gv-header-info { display: none; } .gv-activated .gv-features-table.gv-comparison-table .gv-bottom-info { display: block; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table { width: calc(var(--table-sidebar-width) + (100% * 2)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-section-title .gv-title { width: calc(((100% - var(--table-sidebar-width)) / 2) - 1px); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-slider-nav, .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-slider-pagination { display: flex; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table-slider { margin-bottom: var(--size-lg); overflow-x: auto; overscroll-behavior-x: none; position: relative; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-2 .gv-table-row { gap: var(--table-slider-gap); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table { width: calc(var(--table-sidebar-width) + (100% * 3)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-section-title .gv-title { width: calc(((100% - var(--table-sidebar-width)) / 3) - 1px); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table { width: calc(var(--table-sidebar-width) + (100% * 4)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-section-title .gv-title { width: calc(((100% - var(--table-sidebar-width)) / 4) - 1px); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table { width: calc(var(--table-sidebar-width) + (100% * 5)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-section-title .gv-title { width: calc(((100% - var(--table-sidebar-width)) / 5) - 1px); } .gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-table-container::after { display: none; } .gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-product { scroll-snap-align: start !important; } .gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-header-info { opacity: 0; pointer-events: none; } .gv-activated .gv-features-table.gv-comparison-table:not(.gv-products-1) .gv-cell { padding-left: calc(var(--table-sidebar-width) + var(--size-lg)); } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-features-table.gv-comparison-table .gv-slider-pagination .gv-dots > *:last-child { display: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table { width: calc(100% + ((100% - var(--table-sidebar-width)) / 2 * 1)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-section-title .gv-title { width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 3) * 2)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table { width: calc(100% + ((100% - var(--table-sidebar-width)) / 2 * 2)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-section-title .gv-title { width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 4) * 2)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table { width: calc(100% + ((100% - var(--table-sidebar-width)) / 2 * 3)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-section-title .gv-title { width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 5) * 2)); } } @media (min-width: 600px ) { .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider { margin-right: 0 !important; /* Override fluid */ padding-right: 0 !important; /* Override fluid */ } .gv-activated .gv-features-table.gv-comparison-table .gv-table-slider .gv-table { padding-right: 0 !important; /* Override fluid */ } .gv-activated .gv-features-table.gv-comparison-table .gv-product .gv-recommended-label.gv-off-view { opacity: 0; } } @media (max-width: 1023px ) { .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-slider-nav, .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-slider-nav, .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-slider-pagination, .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-slider-pagination { display: flex; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-dots-scroll-area, .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table-slider, .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table-slider { margin-bottom: var(--size-lg); overflow-x: auto; overscroll-behavior-x: none; position: relative; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table-slider::-webkit-scrollbar, .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-3 .gv-table-row, .gv-activated .gv-features-table.gv-comparison-table.gv-products-4 .gv-table-row { gap: var(--table-slider-gap); } } @media (max-width: 1279px ) { .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-slider-nav, .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-slider-pagination { display: flex; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table-slider { margin-bottom: var(--size-lg); overflow-x: auto; overscroll-behavior-x: none; position: relative; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table-row { gap: var(--table-slider-gap); } } @media (min-width: 1024px ) and (max-width: 1279px ) { .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-table { width: calc(100% + ((100% - var(--table-sidebar-width)) / 4 * 1)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-section-title .gv-title { width: calc(var(--table-sidebar-width) - 1px + (((100% - var(--table-sidebar-width)) / 5) * 4)); } .gv-activated .gv-features-table.gv-comparison-table.gv-products-5 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 3) { display: none; } } .gv-activated .gv-features-table.gv-has-recommended { --recommended-label-height: 26px; } .gv-activated .gv-content-container { background-color: var(--color-surface-bright); border: var(--size-border) solid var(--color-border-alt); border-radius: var(--border-radius); box-shadow: var(--color-shadow-subtle); } .gv-activated .gv-contextual-menu { z-index: 1100; } .gv-activated .gv-contextual-menu .gv-menu { background-color: var(--color-surface-bright); padding: var(--size-sm); width: 100%; } .gv-activated .gv-contextual-menu .gv-menu > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-contextual-menu .gv-btn-close { display: none; padding: 8px; position: absolute; right: var(--size-sm); top: var(--size-sm); } .gv-activated .gv-contextual-menu ul { list-style: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-contextual-menu ul > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-contextual-menu ul li { display: flex; flex-direction: column; gap: var(--size-sm); } .gv-activated .gv-contextual-menu .gv-menu-item { align-items: center; border-radius: var(--border-radius); display: flex; gap: var(--size-sm); height: var(--size-xl); padding: 0 var(--size-sm); position: relative; text-align: left; text-decoration: none; width: 100%; } .gv-activated .gv-contextual-menu .gv-menu-item:hover { background-color: var(--color-state-hover); } .gv-activated .gv-contextual-menu .gv-menu-item.gv-active, .gv-activated .gv-contextual-menu .gv-menu-item[aria-selected="true"] { background-color: var(--color-state-active); } .gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"] { padding-right: 32px; } .gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"] .gv-indicator { margin-left: var(--size-xs); margin-right: var(--size-sm); } .gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"]::after { background-color: var(--color-body-on-default); content: ""; display: block; -webkit-mask: url("../images/open_in_new.svg") no-repeat 50% 50%; mask: url("../images/open_in_new.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: 100%; right: var(--size-sm); position: absolute; top: 0; width: var(--size-icon-md); } .gv-activated .gv-contextual-menu .gv-menu-item gv-icon { flex-shrink: 0; } .gv-activated .gv-contextual-menu .gv-menu-item > span { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-contextual-menu .gv-divider { margin-top: var(--size-md); } @media (max-width: 599px ) { .gv-activated .gv-contextual-menu { bottom: 0; background: var(--color-overlay-dark); left: 0; position: fixed; right: 0; top: 0; } .gv-activated .gv-contextual-menu .gv-menu { bottom: 0; left: 0; padding-top: var(--size-xl); position: absolute; } .gv-activated .gv-contextual-menu .gv-btn-close { display: block; } } @media (min-width: 600px ) { .gv-activated .gv-contextual-menu { max-width: 300px; min-width: 200px; position: absolute; } .gv-activated .gv-contextual-menu .gv-menu { border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); box-shadow: var(--color-shadow-elevated); } .gv-activated .gv-contextual-menu .gv-menu gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-contextual-menu .gv-menu-item { height: 30px; } .gv-activated .gv-contextual-menu .gv-menu-item[target="_blank"]::after { width: var(--size-icon-sm); } } .gv-activated .gv-chip { --chip-color-background: var(--color-surface-dim); --chip-color-border: var(--color-border); --chip-color-text: var(--color-body-on-default); --chip-height: 1.75rem; /* 28px */ background-color: var(--chip-color-background); border: var(--size-border) solid var(--chip-color-border); border-radius: var(--chip-radius); color: var(--chip-color-text); cursor: pointer; display: inline-block; /* text-overflow doesn't work on flex or inline-flex, so use inline-block to keep the component simple */ height: var(--chip-height); max-width: 100%; padding: var(--size-xs) var(--size-md); position: relative; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-chip.gv-chip-active { --chip-color-background: var(--color-state-active); --chip-color-border: var(--color-state-focus); } .gv-activated .gv-chip.gv-chip-active:not(.gv-chip-radio) { padding-right: 40px; /* Padding-right + icon size + gap */ } .gv-activated .gv-chip.gv-chip-active:not(.gv-chip-radio)::after { background-color: var(--chip-color-text); content: ""; display: block; -webkit-mask: url("../images/close.svg") no-repeat 50% 50%; mask: url("../images/close.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: 100%; right: 16px; position: absolute; top: 0; width: var(--size-icon-sm); } .gv-activated .gv-chip.gv-chip-active.gv-chip-radio { cursor: default; } .gv-activated .gv-chip-labels { --chip-label-height: 1rem; /* 16px */ display: flex; flex-wrap: wrap; gap: 4px; } .gv-activated .gv-chip-labels .gv-item { background-color: var(--color-state-active); border-radius: 16px; color: var(--color-body-on-default); height: var(--chip-label-height); line-height: var(--chip-label-height); padding: 0 8px; text-transform: uppercase; font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-chip-labels .gv-more { color: var(--color-state-form-active); line-height: var(--chip-label-height); padding-left: 8px; position: relative; text-decoration: none; white-space: nowrap; font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-chip-labels .gv-more::before { content: "+"; display: block; left: 0; position: absolute; top: -1px; } .gv-activated .gv-data-field { display: flex; flex-direction: column; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-data-field .gv-label { align-items: center; color: var(--color-body-on-alternative); display: flex; flex-wrap: nowrap; gap: 4px; } .gv-activated .gv-data-field .gv-label gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-data-field .gv-content { align-items: center; display: flex; flex-wrap: nowrap; gap: 4px; } .gv-activated .gv-data-field .gv-content span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-field .gv-content button { flex-shrink: 0; } /* Data table mixins */ .gv-activated .gv-data-table { background-color: var(--color-surface-bright); border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); box-shadow: var(--color-shadow-subtle); overflow: hidden; width: 100%; /* Form */ --form-element-height: 30px; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-data-table .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-data-table .gv-checkbox { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-data-table .gv-radio { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-data-table .gv-radio:checked::after { border-width: 5px; } .gv-activated .gv-data-table .gv-input.gv-input-number button { padding: 0; } .gv-activated .gv-data-table .gv-toggle { --toggle-height: 16px; --toggle-width: 28px; --toggle-dot-indent: 2px; } .gv-activated .gv-data-table .gv-col-1-text-right tr > *:nth-child(1) { text-align: right; } .gv-activated .gv-data-table .gv-col-1-shrink tr > *:nth-child(1) { width: 1px; } .gv-activated .gv-data-table .gv-col-1-truncate tr > *:nth-child(1) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-2-text-right tr > *:nth-child(2) { text-align: right; } .gv-activated .gv-data-table .gv-col-2-shrink tr > *:nth-child(2) { width: 1px; } .gv-activated .gv-data-table .gv-col-2-truncate tr > *:nth-child(2) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-3-text-right tr > *:nth-child(3) { text-align: right; } .gv-activated .gv-data-table .gv-col-3-shrink tr > *:nth-child(3) { width: 1px; } .gv-activated .gv-data-table .gv-col-3-truncate tr > *:nth-child(3) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-4-text-right tr > *:nth-child(4) { text-align: right; } .gv-activated .gv-data-table .gv-col-4-shrink tr > *:nth-child(4) { width: 1px; } .gv-activated .gv-data-table .gv-col-4-truncate tr > *:nth-child(4) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-5-text-right tr > *:nth-child(5) { text-align: right; } .gv-activated .gv-data-table .gv-col-5-shrink tr > *:nth-child(5) { width: 1px; } .gv-activated .gv-data-table .gv-col-5-truncate tr > *:nth-child(5) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-6-text-right tr > *:nth-child(6) { text-align: right; } .gv-activated .gv-data-table .gv-col-6-shrink tr > *:nth-child(6) { width: 1px; } .gv-activated .gv-data-table .gv-col-6-truncate tr > *:nth-child(6) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-7-text-right tr > *:nth-child(7) { text-align: right; } .gv-activated .gv-data-table .gv-col-7-shrink tr > *:nth-child(7) { width: 1px; } .gv-activated .gv-data-table .gv-col-7-truncate tr > *:nth-child(7) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-8-text-right tr > *:nth-child(8) { text-align: right; } .gv-activated .gv-data-table .gv-col-8-shrink tr > *:nth-child(8) { width: 1px; } .gv-activated .gv-data-table .gv-col-8-truncate tr > *:nth-child(8) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-9-text-right tr > *:nth-child(9) { text-align: right; } .gv-activated .gv-data-table .gv-col-9-shrink tr > *:nth-child(9) { width: 1px; } .gv-activated .gv-data-table .gv-col-9-truncate tr > *:nth-child(9) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-10-text-right tr > *:nth-child(10) { text-align: right; } .gv-activated .gv-data-table .gv-col-10-shrink tr > *:nth-child(10) { width: 1px; } .gv-activated .gv-data-table .gv-col-10-truncate tr > *:nth-child(10) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-11-text-right tr > *:nth-child(11) { text-align: right; } .gv-activated .gv-data-table .gv-col-11-shrink tr > *:nth-child(11) { width: 1px; } .gv-activated .gv-data-table .gv-col-11-truncate tr > *:nth-child(11) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-col-12-text-right tr > *:nth-child(12) { text-align: right; } .gv-activated .gv-data-table .gv-col-12-shrink tr > *:nth-child(12) { width: 1px; } .gv-activated .gv-data-table .gv-col-12-truncate tr > *:nth-child(12) { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-empty-state { gap: 16px; padding: var(--size-lg); } .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content > *:not(:last-child) { margin-bottom: 0; } .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-data-table .gv-load-more { padding: 16px 24px; text-align: center; } .gv-activated .gv-data-table table { line-height: var(--line-height-body); width: 100%; } .gv-activated .gv-data-table thead { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-data-table tbody tr:nth-child(even) { background-color: var(--color-zebra-even); } .gv-activated .gv-data-table tbody tr:nth-child(odd) { background-color: var(--color-zebra-odd); } .gv-activated .gv-data-table tbody tr:hover { background-color: var(--color-zebra-hover); } .gv-activated .gv-data-table.gv-data-table-alternative tbody tr { background-color: var(--color-zebra-even); } .gv-activated .gv-data-table.gv-data-table-alternative tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-data-table th, .gv-activated .gv-data-table td { padding: 8px 16px; white-space: nowrap; } .gv-activated .gv-data-table th { font-weight: var(--font-weight-semibold); } .gv-activated .gv-data-table th:not(.gv-text-right) { text-align: left; } .gv-activated .gv-data-table th .gv-th-sort { align-items: center; border-radius: var(--border-radius); display: inline-flex; flex-wrap: nowrap; gap: var(--size-sm); } .gv-activated .gv-data-table th .gv-th-tooltip { align-items: center; display: inline-flex; flex-wrap: nowrap; gap: var(--size-sm); } .gv-activated .gv-data-table th .gv-th-tooltip gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-data-table .gv-col-shrink { width: 1px; } .gv-activated .gv-data-table .gv-col-truncate { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-underline { color: var(--color-body-on-alternative); display: block; font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table .gv-text-icon { align-items: center; max-width: 100%; } .gv-activated .gv-data-table .gv-text-icon gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-data-table .gv-text-icon span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-data-table a[target="_blank"]:not(.gv-button, .gv-no-external-icon) { padding-right: calc(var(--size-icon-sm) + var(--size-xs)); position: relative; } .gv-activated .gv-data-table a[target="_blank"]:not(.gv-button, .gv-no-external-icon)::after { background-color: var(--color-body-on-default); content: ""; display: block; -webkit-mask: url("../images/open_in_new.svg") no-repeat 50% 50%; mask: url("../images/open_in_new.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: 100%; right: 0; position: absolute; top: 0; width: var(--size-icon-sm); } .gv-activated .gv-data-table a[target="_blank"]:not(.gv-button, .gv-no-external-icon).gv-action::after { background-color: var(--color-state-form-active); } @media (max-width: 599px ) { .gv-activated .gv-data-table .gv-max-mob-col-1-hidden tr > *:nth-child(1) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-2-hidden tr > *:nth-child(2) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-3-hidden tr > *:nth-child(3) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-4-hidden tr > *:nth-child(4) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-5-hidden tr > *:nth-child(5) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-6-hidden tr > *:nth-child(6) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-7-hidden tr > *:nth-child(7) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-8-hidden tr > *:nth-child(8) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-9-hidden tr > *:nth-child(9) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-10-hidden tr > *:nth-child(10) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-11-hidden tr > *:nth-child(11) { display: none; } .gv-activated .gv-data-table .gv-max-mob-col-12-hidden tr > *:nth-child(12) { display: none; } } @media (max-width: 767px ) { .gv-activated .gv-data-table .gv-max-tab-sm-col-1-hidden tr > *:nth-child(1) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-2-hidden tr > *:nth-child(2) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-3-hidden tr > *:nth-child(3) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-4-hidden tr > *:nth-child(4) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-5-hidden tr > *:nth-child(5) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-6-hidden tr > *:nth-child(6) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-7-hidden tr > *:nth-child(7) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-8-hidden tr > *:nth-child(8) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-9-hidden tr > *:nth-child(9) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-10-hidden tr > *:nth-child(10) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-11-hidden tr > *:nth-child(11) { display: none; } .gv-activated .gv-data-table .gv-max-tab-sm-col-12-hidden tr > *:nth-child(12) { display: none; } } @media (max-width: 1023px ) { .gv-activated .gv-data-table .gv-max-tab-col-1-hidden tr > *:nth-child(1) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-2-hidden tr > *:nth-child(2) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-3-hidden tr > *:nth-child(3) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-4-hidden tr > *:nth-child(4) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-5-hidden tr > *:nth-child(5) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-6-hidden tr > *:nth-child(6) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-7-hidden tr > *:nth-child(7) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-8-hidden tr > *:nth-child(8) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-9-hidden tr > *:nth-child(9) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-10-hidden tr > *:nth-child(10) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-11-hidden tr > *:nth-child(11) { display: none; } .gv-activated .gv-data-table .gv-max-tab-col-12-hidden tr > *:nth-child(12) { display: none; } } .gv-activated .gv-pagination { --pagination-btn-size: 40px; align-items: center; border-top: 1px solid var(--color-border-alt); display: flex; flex-flow: column nowrap; gap: var(--size-sm); padding: var(--size-sm) var(--size-md); /* Form */ --form-element-height: 30px; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-pagination .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-pagination .gv-checkbox { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-pagination .gv-radio { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-pagination .gv-radio:checked::after { border-width: 5px; } .gv-activated .gv-pagination .gv-input.gv-input-number button { padding: 0; } .gv-activated .gv-pagination .gv-toggle { --toggle-height: 16px; --toggle-width: 28px; --toggle-dot-indent: 2px; } .gv-activated .gv-pagination gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-pagination nav ul { display: flex; flex-wrap: nowrap; list-style: none; padding: 0; } .gv-activated .gv-pagination nav li { display: block; height: var(--pagination-btn-size); } .gv-activated .gv-pagination nav li.gv-page-select { align-items: center; display: flex; padding-left: var(--size-xs); padding-right: var(--size-xs); } .gv-activated .gv-pagination nav li.gv-page-select .gv-input-select { width: 112px; } .gv-activated .gv-pagination nav li:not(.gv-page-select) { width: var(--pagination-btn-size); } .gv-activated .gv-pagination nav li:not(.gv-page-select) > * { align-items: center; display: inline-flex; justify-content: center; height: 100%; width: 100%; } .gv-activated .gv-pagination nav li:not(.gv-page-select) > *:not(span) { border-radius: var(--border-radius); text-decoration: none; font-weight: var(--font-weight-semibold); } .gv-activated .gv-pagination nav li:not(.gv-page-select) > *:not(span):hover { background-color: var(--color-state-hover); } .gv-activated .gv-pagination nav li:not(.gv-page-select).gv-active > * { background-color: var(--color-state-active); pointer-events: none; } .gv-activated .gv-pagination nav li:not(.gv-page-select).gv-disabled > * { color: var(--color-body-on-alternative); pointer-events: none; } .gv-activated .gv-pagination .gv-amount-select { align-items: center; display: flex; gap: var(--size-sm); white-space: nowrap; } .gv-activated .gv-pagination .gv-amount-select .gv-input-select { width: 120px; } @media (max-width: 599px ) { .gv-activated .gv-pagination nav li.gv-page { display: none; } } @media (min-width: 600px ) { .gv-activated .gv-pagination nav li.gv-first, .gv-activated .gv-pagination nav li.gv-last, .gv-activated .gv-pagination nav li.gv-page-select { display: none; } } @media (min-width: 1024px ) { .gv-activated .gv-pagination { flex-flow: row-reverse wrap; justify-content: space-between; } .gv-activated .gv-pagination .gv-note { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .gv-activated .gv-divider { --divider-color: var(--color-border); --divider-color-alternative: var(--color-border-alt); border-top: 1px solid var(--divider-color); border-right: 0; border-bottom: 0; border-left: 0; display: block; height: 1px; width: 100%; } .gv-activated .gv-divider.gv-divider-vertical { border-left: 1px solid var(--divider-color); border-top: 0; height: 100%; min-height: var(--size-md); width: 1px; } .gv-activated .gv-divider.gv-divider-dashed { border-style: dashed; } .gv-activated .gv-divider.gv-divider-light { border-color: var(--divider-color-alternative); } .gv-activated .gv-donut-chart { align-items: center; display: flex; height: 72px; justify-content: center; width: 72px; } .gv-activated .gv-donut-chart .gv-progress-circle { background-color: var(--color-surface-dim); color: var(--color-body-on-alternative); align-items: center; border-radius: 50%; display: flex; height: 60px; justify-content: center; position: relative; width: 60px; font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-donut-chart .gv-progress-circle gv-indicator { height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; transform-origin: center; width: 100%; } .gv-activated .gv-donut-chart .gv-progress-circle .gv-circle-top { transition: stroke-dashoffset 400ms ease-in-out; } .gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="20"] .gv-circle-top { stroke-dasharray: 188.49555922; stroke-dashoffset: 150.79644737; } .gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="40"] .gv-circle-top { stroke-dasharray: 188.49555922; stroke-dashoffset: 113.09733553; } .gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="60"] .gv-circle-top { stroke-dasharray: 188.49555922; stroke-dashoffset: 75.39822369; } .gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="80"] .gv-circle-top { stroke-dasharray: 188.49555922; stroke-dashoffset: 37.69911184; } .gv-activated .gv-donut-chart .gv-progress-circle[data-progress-percent="100"] .gv-circle-top { stroke-dasharray: 188.49555922; stroke-dashoffset: 0; } .gv-activated .gv-donut-chart .gv-progress-circle circle { stroke-width: 3px; } .gv-activated .gv-donut-chart .gv-progress-circle.gv-state-success { background-color: var(--color-signal-success-light); color: var(--color-signal-success); } .gv-activated .gv-donut-chart .gv-progress-circle.gv-state-warning { background-color: var(--color-signal-warning-light); color: var(--color-signal-warning); } .gv-activated .gv-donut-chart .gv-progress-circle.gv-state-alert { background-color: var(--color-signal-alert-light); color: var(--color-signal-alert); } .gv-activated .gv-empty-state { align-items: center; display: flex; flex-direction: column; gap: var(--size-lg); } @media screen and (max-width: 360px) { .gv-activated .gv-empty-state { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-empty-state { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-empty-state { padding: 48px; } } .gv-activated .gv-empty-state .gv-empty-state-content { text-align: center; } .gv-activated .gv-empty-state .gv-empty-state-content > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-sm); } @media screen and (max-width: 360px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(var(--font-size-heading-sm-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(var(--font-size-heading-sm-max) * 1rem); } } .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mode-condensed .gv-empty-state .gv-empty-state-content .gv-title, .gv-activated .gv-empty-state.gv-mode-condensed .gv-empty-state-content .gv-title { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-filter-options { /* Form */ --form-element-height: 30px; } .gv-activated .gv-filter-options .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-filter-options .gv-checkbox { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-filter-options .gv-radio { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-filter-options .gv-radio:checked::after { border-width: 5px; } .gv-activated .gv-filter-options .gv-input.gv-input-number button { padding: 0; } .gv-activated .gv-filter-options .gv-toggle { --toggle-height: 16px; --toggle-width: 28px; --toggle-dot-indent: 2px; } .gv-activated .gv-filter-options .gv-options { border: none; margin: 0; min-width: 0; padding: 0; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-filter-options .gv-option { align-items: center; cursor: pointer; display: flex; gap: var(--size-sm); padding: var(--size-sm) 0; text-align: left; text-decoration: none; width: 100%; } .gv-activated .gv-filter-options .gv-option .gv-checkbox, .gv-activated .gv-filter-options .gv-option .gv-radio { flex-shrink: 0; } .gv-activated .gv-filter-options .gv-option .gv-item-text { display: inline-flex; gap: var(--size-xs); min-width: 0; } .gv-activated .gv-filter-options .gv-option .gv-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-filter-options .gv-option .gv-item-count { color: var(--color-body-on-alternative); flex-shrink: 0; } .gv-activated .gv-filter-bar { --filter-button-background: var(--color-surface-bright); position: relative; } .gv-activated .gv-filter-bar.gv-filters-transparent { --filter-button-background: transparent; } .gv-activated .gv-filter-bar .gv-bar { display: flex; flex-direction: row; gap: var(--size-sm); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .gv-activated .gv-filter-bar .gv-filter-button { align-items: center; background: var(--filter-button-background); border: 1px solid var(--color-border-alt); border-radius: var(--chip-radius); display: flex; flex-shrink: 0; gap: var(--size-sm); min-width: 0; padding: var(--size-xs) var(--size-md); position: relative; scroll-snap-align: start; } .gv-activated .gv-filter-bar .gv-filter-button.gv-all-filters { border: none; padding-left: var(--size-sm); padding-right: var(--size-sm); } .gv-activated .gv-filter-bar .gv-filter-button.gv-expanded gv-icon:last-child { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-filter-bar .gv-filter-button .gv-button-label { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-filter-bar .gv-filter-button gv-icon { flex-shrink: 0; } .gv-activated .gv-filter-bar .gv-filter-button .gv-total-selected { align-items: center; background-color: var(--color-surface-highlight); border-radius: var(--border-radius); flex-shrink: 0; height: var(--size-lg); justify-content: center; width: var(--size-lg); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-filter-bar .gv-filter-button .gv-total-selected:not(.gv-hidden) { display: flex; } .gv-activated .gv-filter-bar .gv-bar-actions { align-items: stretch; display: flex; flex-shrink: 0; gap: var(--size-sm); } .gv-activated .gv-filter-bar .gv-bar-actions .gv-action-reset { border-left: 1px solid var(--color-border); padding-left: var(--size-md); } .gv-activated .gv-filter-panel { left: 0; } .gv-activated .gv-filter-panel .gv-filter-options { background-color: var(--color-surface-bright); } .gv-activated .gv-filter-panel .gv-filter-options .gv-panel-header { margin-bottom: var(--size-lg); } .gv-activated .gv-filter-panel .gv-filter-options .gv-panel-header .gv-btn-close { padding: var(--size-sm); position: absolute; right: var(--size-md); top: var(--size-md); } .gv-activated .gv-filter-panel .gv-filter-options .gv-button-group { padding-top: var(--size-md); } .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { display: block; padding-bottom: var(--size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-filters-drawer .gv-side-header { padding: var(--size-md) var(--size-sm) var(--size-sm); } .gv-activated .gv-filters-drawer .gv-filter-options { flex: 1; overflow-y: auto; padding-left: var(--size-sm); } .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { margin-bottom: var(--size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-filters-drawer .gv-filter-options .gv-options { padding-top: var(--size-sm); } .gv-activated .gv-filters-drawer .gv-filter-options .gv-options .gv-filter-name { padding: var(--size-sm) 0 var(--size-md); } .gv-activated .gv-filters-drawer .gv-filter-options .gv-options:not(:last-child) { border-bottom: 1px solid var(--color-border); padding-bottom: var(--size-md); } .gv-activated .gv-filters-drawer .gv-filter-options .gv-options:not(:first-child) .gv-filter-name { padding-top: var(--size-lg); } .gv-activated .gv-filters-drawer .gv-side-footer { padding: var(--size-md) var(--size-sm); } @media (max-width: 599px ) { .gv-activated .gv-filter-panel { background-color: var(--color-overlay-dark); display: flex; flex-direction: column; height: 100%; justify-content: flex-end; left: 0 !important; padding-top: var(--size-xl); position: fixed; top: 0; width: 100%; z-index: 1100; } .gv-activated .gv-filter-panel .gv-filter-options { display: flex; flex-direction: column; flex-shrink: 1; min-height: 0; padding: var(--size-lg); position: relative; } .gv-activated .gv-filter-panel .gv-options-content { overflow-y: auto; } .gv-activated .gv-filter-panel .gv-button-group { flex-shrink: 0; } .gv-activated .gv-filter-panel .gv-button-group .gv-clear { display: none; } .gv-activated .gv-sidedrawer.gv-filters-drawer { padding-top: var(--size-xl); } .gv-activated .gv-sidedrawer.gv-filters-drawer.gv-sidedrawer-open { display: flex; flex-direction: column; justify-content: flex-end; } .gv-activated .gv-sidedrawer.gv-filters-drawer .gv-side-content { flex-shrink: 1; height: auto; min-height: 0; padding: var(--size-sm) var(--size-md); position: relative; width: 100%; } .gv-activated .gv-sidedrawer.gv-filters-drawer .gv-side-content .gv-btn-close { top: var(--size-md); } .gv-activated .gv-sidedrawer.gv-filters-drawer .gv-side-footer { padding-top: 0; } } @media (min-width: 600px ) { .gv-activated .gv-filter-panel { position: absolute; top: calc(100% + var(--size-xs)); z-index: 200; } .gv-activated .gv-filter-panel .gv-filter-options { border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); padding: var(--size-md) var(--size-lg); width: 300px; } .gv-activated .gv-filter-panel .gv-panel-header, .gv-activated .gv-filter-panel .gv-button-group .gv-cancel { display: none; } .gv-activated .gv-filter-bar .gv-filter-panel .gv-filter-name { display: none; } } .gv-activated gv-flag { width: var(--size-icon-md); height: var(--size-icon-md); display: inline-block; vertical-align: text-bottom; font-size: 0; } .gv-activated gv-flag svg { height: 100%; width: 100%; } .gv-activated .gv-mode-condensed gv-flag, .gv-activated gv-flag.gv-mode-condensed { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-footer { background-color: var(--color-surface-bright); color: var(--color-body-on-default); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); /* Hide border if support block is added/visible */ } .gv-activated .gv-footer .gv-footer-content { margin-left: auto; margin-right: auto; max-width: 1536px; } @media screen and (max-width: 360px) { .gv-activated .gv-footer .gv-footer-content { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-footer .gv-footer-content { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-footer .gv-footer-content { padding-left: 48px; padding-right: 48px; } } .gv-activated .gv-footer .gv-footer-support { background-color: var(--color-surface-highlight); } .gv-activated .gv-footer .gv-footer-support .gv-footer-content { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; padding-top: 16px; } .gv-activated .gv-footer .gv-footer-support .gv-support-text { align-items: center; display: flex; gap: 24px; } .gv-activated .gv-footer .gv-footer-support gv-tile, .gv-activated .gv-footer .gv-footer-support .gv-button { flex-shrink: 0; } .gv-activated .gv-footer .gv-footer-bar { background-color: var(--color-surface-bright); border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-footer .gv-footer-bar .gv-footer-content { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; padding-top: 24px; } .gv-activated .gv-footer .gv-footer-support:not(.gv-hidden) + .gv-footer-bar { border: none; } .gv-activated .gv-footer ul.gv-footer-links { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; } .gv-activated .gv-footer ul.gv-footer-links li { margin: 0; } .gv-activated .gv-footer ul.gv-footer-links a { color: var(--color-body-on-default); text-decoration: none; white-space: nowrap; } .gv-activated .gv-footer .gv-footer-copyright { color: var(--color-body-on-alternative); } @media (min-width: 600px ) { .gv-activated .gv-footer .gv-footer-support .gv-footer-content { align-items: center; flex-direction: row; gap: 24px; justify-content: center; padding-bottom: 16px; } } @media (min-width: 1024px ) { .gv-activated .gv-footer .gv-footer-bar .gv-footer-content { flex-direction: row; gap: 24px; justify-content: space-between; } .gv-activated .gv-footer ul.gv-footer-links { align-items: center; flex-direction: row; gap: 16px; } .gv-activated .gv-footer ul.gv-footer-links li:not(:last-child) { border-right: 1px solid var(--color-border-alt); padding-right: 16px; } } .gv-activated .gv-global-nav { background-color: var(--color-surface-dim); border-right: 1px solid var(--color-border-alt); flex: 0 0 73px; padding: var(--size-lg) var(--size-md); width: 73px; } .gv-activated .gv-global-nav .gv-nav-list > *:not(:last-child) { margin-bottom: var(--size-md); } /* Start grid mixins */ /* Grid template columns */ /* Grid item width */ /* Column start */ /* End grid mixins */ .gv-activated .gv-grid { display: grid; } .gv-activated .gv-grid-container { display: grid; grid-template-columns: repeat(12, 1fr); } @media screen and (max-width: 360px) { .gv-activated .gv-grid-container { gap: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-grid-container { gap: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-grid-container { gap: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-grid-container { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-grid-container { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-grid-container { padding-left: 48px; padding-right: 48px; } } .gv-activated .gv-grid-container > * { grid-column: auto / span 12; max-width: 100%; } .gv-activated .gv-grid-container > * > .gv-grid-container { padding-left: 0; padding-right: 0; } .gv-activated .gv-grid-dense { grid-auto-flow: dense; } .gv-activated .gv-span-1 { grid-column: auto / span 1; } .gv-activated .gv-span-2 { grid-column: auto / span 2; } .gv-activated .gv-span-3 { grid-column: auto / span 3; } .gv-activated .gv-span-4 { grid-column: auto / span 4; } .gv-activated .gv-span-5 { grid-column: auto / span 5; } .gv-activated .gv-span-6 { grid-column: auto / span 6; } .gv-activated .gv-span-7 { grid-column: auto / span 7; } .gv-activated .gv-span-8 { grid-column: auto / span 8; } .gv-activated .gv-span-9 { grid-column: auto / span 9; } .gv-activated .gv-span-10 { grid-column: auto / span 10; } .gv-activated .gv-span-11 { grid-column: auto / span 11; } .gv-activated .gv-span-12 { grid-column: auto / span 12; } .gv-activated .gv-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .gv-activated .gv-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gv-activated .gv-start-1 { grid-column-start: 1; } .gv-activated .gv-start-2 { grid-column-start: 2; } .gv-activated .gv-start-3 { grid-column-start: 3; } .gv-activated .gv-start-4 { grid-column-start: 4; } .gv-activated .gv-start-5 { grid-column-start: 5; } .gv-activated .gv-start-6 { grid-column-start: 6; } .gv-activated .gv-start-7 { grid-column-start: 7; } .gv-activated .gv-start-8 { grid-column-start: 8; } .gv-activated .gv-start-9 { grid-column-start: 9; } .gv-activated .gv-start-10 { grid-column-start: 10; } .gv-activated .gv-start-11 { grid-column-start: 11; } .gv-activated .gv-start-12 { grid-column-start: 12; } @media (min-width: 600px ) { .gv-activated .gv-tab-span-1 { grid-column: auto / span 1; } .gv-activated .gv-tab-span-2 { grid-column: auto / span 2; } .gv-activated .gv-tab-span-3 { grid-column: auto / span 3; } .gv-activated .gv-tab-span-4 { grid-column: auto / span 4; } .gv-activated .gv-tab-span-5 { grid-column: auto / span 5; } .gv-activated .gv-tab-span-6 { grid-column: auto / span 6; } .gv-activated .gv-tab-span-7 { grid-column: auto / span 7; } .gv-activated .gv-tab-span-8 { grid-column: auto / span 8; } .gv-activated .gv-tab-span-9 { grid-column: auto / span 9; } .gv-activated .gv-tab-span-10 { grid-column: auto / span 10; } .gv-activated .gv-tab-span-11 { grid-column: auto / span 11; } .gv-activated .gv-tab-span-12 { grid-column: auto / span 12; } .gv-activated .gv-tab-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .gv-activated .gv-tab-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gv-activated .gv-tab-start-1 { grid-column-start: 1; } .gv-activated .gv-tab-start-2 { grid-column-start: 2; } .gv-activated .gv-tab-start-3 { grid-column-start: 3; } .gv-activated .gv-tab-start-4 { grid-column-start: 4; } .gv-activated .gv-tab-start-5 { grid-column-start: 5; } .gv-activated .gv-tab-start-6 { grid-column-start: 6; } .gv-activated .gv-tab-start-7 { grid-column-start: 7; } .gv-activated .gv-tab-start-8 { grid-column-start: 8; } .gv-activated .gv-tab-start-9 { grid-column-start: 9; } .gv-activated .gv-tab-start-10 { grid-column-start: 10; } .gv-activated .gv-tab-start-11 { grid-column-start: 11; } .gv-activated .gv-tab-start-12 { grid-column-start: 12; } } @media (min-width: 768px ) { .gv-activated .gv-tab-lg-span-1 { grid-column: auto / span 1; } .gv-activated .gv-tab-lg-span-2 { grid-column: auto / span 2; } .gv-activated .gv-tab-lg-span-3 { grid-column: auto / span 3; } .gv-activated .gv-tab-lg-span-4 { grid-column: auto / span 4; } .gv-activated .gv-tab-lg-span-5 { grid-column: auto / span 5; } .gv-activated .gv-tab-lg-span-6 { grid-column: auto / span 6; } .gv-activated .gv-tab-lg-span-7 { grid-column: auto / span 7; } .gv-activated .gv-tab-lg-span-8 { grid-column: auto / span 8; } .gv-activated .gv-tab-lg-span-9 { grid-column: auto / span 9; } .gv-activated .gv-tab-lg-span-10 { grid-column: auto / span 10; } .gv-activated .gv-tab-lg-span-11 { grid-column: auto / span 11; } .gv-activated .gv-tab-lg-span-12 { grid-column: auto / span 12; } .gv-activated .gv-tab-lg-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gv-activated .gv-tab-lg-start-1 { grid-column-start: 1; } .gv-activated .gv-tab-lg-start-2 { grid-column-start: 2; } .gv-activated .gv-tab-lg-start-3 { grid-column-start: 3; } .gv-activated .gv-tab-lg-start-4 { grid-column-start: 4; } .gv-activated .gv-tab-lg-start-5 { grid-column-start: 5; } .gv-activated .gv-tab-lg-start-6 { grid-column-start: 6; } .gv-activated .gv-tab-lg-start-7 { grid-column-start: 7; } .gv-activated .gv-tab-lg-start-8 { grid-column-start: 8; } .gv-activated .gv-tab-lg-start-9 { grid-column-start: 9; } .gv-activated .gv-tab-lg-start-10 { grid-column-start: 10; } .gv-activated .gv-tab-lg-start-11 { grid-column-start: 11; } .gv-activated .gv-tab-lg-start-12 { grid-column-start: 12; } } @media (min-width: 1024px ) { .gv-activated .gv-desk-span-1 { grid-column: auto / span 1; } .gv-activated .gv-desk-span-2 { grid-column: auto / span 2; } .gv-activated .gv-desk-span-3 { grid-column: auto / span 3; } .gv-activated .gv-desk-span-4 { grid-column: auto / span 4; } .gv-activated .gv-desk-span-5 { grid-column: auto / span 5; } .gv-activated .gv-desk-span-6 { grid-column: auto / span 6; } .gv-activated .gv-desk-span-7 { grid-column: auto / span 7; } .gv-activated .gv-desk-span-8 { grid-column: auto / span 8; } .gv-activated .gv-desk-span-9 { grid-column: auto / span 9; } .gv-activated .gv-desk-span-10 { grid-column: auto / span 10; } .gv-activated .gv-desk-span-11 { grid-column: auto / span 11; } .gv-activated .gv-desk-span-12 { grid-column: auto / span 12; } .gv-activated .gv-desk-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .gv-activated .gv-desk-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gv-activated .gv-desk-start-1 { grid-column-start: 1; } .gv-activated .gv-desk-start-2 { grid-column-start: 2; } .gv-activated .gv-desk-start-3 { grid-column-start: 3; } .gv-activated .gv-desk-start-4 { grid-column-start: 4; } .gv-activated .gv-desk-start-5 { grid-column-start: 5; } .gv-activated .gv-desk-start-6 { grid-column-start: 6; } .gv-activated .gv-desk-start-7 { grid-column-start: 7; } .gv-activated .gv-desk-start-8 { grid-column-start: 8; } .gv-activated .gv-desk-start-9 { grid-column-start: 9; } .gv-activated .gv-desk-start-10 { grid-column-start: 10; } .gv-activated .gv-desk-start-11 { grid-column-start: 11; } .gv-activated .gv-desk-start-12 { grid-column-start: 12; } } @media (min-width: 1280px ) { .gv-activated .gv-desk-lg-span-1 { grid-column: auto / span 1; } .gv-activated .gv-desk-lg-span-2 { grid-column: auto / span 2; } .gv-activated .gv-desk-lg-span-3 { grid-column: auto / span 3; } .gv-activated .gv-desk-lg-span-4 { grid-column: auto / span 4; } .gv-activated .gv-desk-lg-span-5 { grid-column: auto / span 5; } .gv-activated .gv-desk-lg-span-6 { grid-column: auto / span 6; } .gv-activated .gv-desk-lg-span-7 { grid-column: auto / span 7; } .gv-activated .gv-desk-lg-span-8 { grid-column: auto / span 8; } .gv-activated .gv-desk-lg-span-9 { grid-column: auto / span 9; } .gv-activated .gv-desk-lg-span-10 { grid-column: auto / span 10; } .gv-activated .gv-desk-lg-span-11 { grid-column: auto / span 11; } .gv-activated .gv-desk-lg-span-12 { grid-column: auto / span 12; } .gv-activated .gv-desk-lg-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gv-activated .gv-desk-lg-start-1 { grid-column-start: 1; } .gv-activated .gv-desk-lg-start-2 { grid-column-start: 2; } .gv-activated .gv-desk-lg-start-3 { grid-column-start: 3; } .gv-activated .gv-desk-lg-start-4 { grid-column-start: 4; } .gv-activated .gv-desk-lg-start-5 { grid-column-start: 5; } .gv-activated .gv-desk-lg-start-6 { grid-column-start: 6; } .gv-activated .gv-desk-lg-start-7 { grid-column-start: 7; } .gv-activated .gv-desk-lg-start-8 { grid-column-start: 8; } .gv-activated .gv-desk-lg-start-9 { grid-column-start: 9; } .gv-activated .gv-desk-lg-start-10 { grid-column-start: 10; } .gv-activated .gv-desk-lg-start-11 { grid-column-start: 11; } .gv-activated .gv-desk-lg-start-12 { grid-column-start: 12; } } .gv-activated .gv-page-header .gv-header-content { display: flex; gap: var(--size-lg); } .gv-activated .gv-page-header .gv-header-content .gv-content { flex: 1; min-width: 0; } .gv-activated .gv-page-header .gv-header-content .gv-button-group { flex-shrink: 0; } .gv-activated .gv-page-header .gv-description { max-width: var(--text-max-width); } .gv-activated .gv-page-header .gv-description > *:not(:last-child) { margin-bottom: var(--size-md); } .gv-activated .gv-page-header.gv-header .gv-breadcrumbs { margin-bottom: var(--size-sm); } .gv-activated .gv-page-header.gv-header .gv-header-content .gv-content { padding-top: 2px; } .gv-activated .gv-page-header.gv-header .gv-header-content .gv-content > *:not(:last-child) { margin-bottom: var(--size-xs); } .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-lg); } @media screen and (max-width: 360px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { font-size: calc(var(--font-size-heading-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-title { font-size: calc(var(--font-size-heading-lg-max) * 1rem); } } .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { color: var(--color-body-on-alternative); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-sm); } @media screen and (max-width: 360px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { font-size: calc(var(--font-size-heading-sm-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-page-header.gv-header .gv-header-content .gv-subtitle { font-size: calc(var(--font-size-heading-sm-max) * 1rem); } } .gv-activated .gv-page-header.gv-header .gv-header-status, .gv-activated .gv-page-header.gv-header .gv-description { margin-top: var(--size-sm); } .gv-activated .gv-page-header.gv-header .gv-header-actions { margin-bottom: var(--size-sm); margin-top: var(--size-xs); } .gv-activated .gv-page-header .gv-header-actions { display: flex; flex-direction: column; gap: var(--size-xs); } .gv-activated .gv-page-header .gv-header-status { display: flex; flex-wrap: wrap; gap: var(--size-xs) var(--size-md); } .gv-activated .gv-page-header .gv-header-status .gv-status { color: var(--color-body-on-alternative); display: flex; flex: 0 0 auto; gap: var(--size-xs); } .gv-activated .gv-page-header .gv-header-status .gv-status .gv-text { display: inline-flex; font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-page-header .gv-header-status .gv-status gv-icon, .gv-activated .gv-page-header .gv-header-status .gv-status .gv-title { flex-shrink: 0; } .gv-activated .gv-page-header .gv-header-status .gv-status .gv-separator { padding-right: var(--size-xs); } .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-content { align-items: center; display: flex; gap: var(--size-sm); } .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { min-width: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-title { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-page-header.gv-subheader .gv-description { margin-top: var(--size-xs); } .gv-activated .gv-page-header.gv-subheader .gv-button-group { /* Form */ --form-element-height: 30px; } .gv-activated .gv-page-header.gv-subheader .gv-button-group .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } @media (max-width: 599px ) { .gv-activated .gv-page-header .gv-header-status { flex-direction: column; } .gv-activated .gv-page-header .gv-header-content { flex-direction: column; gap: 0; } .gv-activated .gv-page-header.gv-header .gv-button-group { margin-top: var(--size-md); /* Form */ --form-element-height: 30px; } .gv-activated .gv-page-header.gv-header .gv-button-group .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-page-header.gv-subheader .gv-header-content .gv-content { justify-content: space-between; } .gv-activated .gv-page-header.gv-subheader .gv-button-group { margin-top: var(--size-xs); } } @media (min-width: 600px ) { .gv-activated .gv-page-header .gv-header-content .gv-button-group { flex-direction: row-reverse; } } .gv-activated .gv-help-centre > *:not(:last-child) { margin-bottom: var(--size-md); } .gv-activated .gv-help-centre .gv-header > *:not(:last-child) { margin-bottom: var(--size-xs); } .gv-activated .gv-help-centre .gv-header .gv-title { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-help-centre .gv-header .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-help-centre .gv-header .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-help-centre .gv-header .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-help-centre .gv-header .gv-title { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-help-centre .gv-header .gv-title { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-help-centre .gv-header .gv-title { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-help-centre .gv-header .gv-description { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-help-centre .gv-content { display: grid; gap: var(--size-md); grid-template-columns: 1fr; } .gv-activated .gv-help-centre .gv-content-container { padding: var(--size-lg); } .gv-activated .gv-help-centre .gv-content-container > *:not(:last-child) { margin-bottom: var(--size-md); } .gv-activated .gv-help-centre .gv-help-list { list-style: none; } .gv-activated .gv-help-centre .gv-help-list > *:not(:last-child) { margin-bottom: var(--size-md); } .gv-activated .gv-help-centre .gv-help-link { display: block; min-height: var(--size-icon-md); padding-right: calc(var(--size-icon-md) + var(--size-sm)); position: relative; text-decoration: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-help-centre .gv-help-link::after { background-color: var(--color-body-on-default); content: ""; display: block; -webkit-mask: url("../images/open_in_new.svg") no-repeat 50% 50%; mask: url("../images/open_in_new.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: var(--size-icon-md); right: 0; position: absolute; top: 0; width: var(--size-icon-md); } .gv-activated .gv-help-centre .gv-help-link .gv-link-label { display: block; padding-top: 1px; } @media (min-width: 1280px ) { .gv-activated .gv-help-centre .gv-content { grid-template-columns: repeat(2, 1fr); } } .gv-activated .gv-legend-normal { color: var(--color-body-on-default); } .gv-activated .gv-legend-poor { color: var(--color-signal-alert); } .gv-activated .gv-legend-improve { color: var(--color-signal-warning); } .gv-activated .gv-legend-good { color: var(--color-signal-success); } .gv-activated .gv-legend .gv-legend-bar { display: flex; flex-direction: row; margin-bottom: 16px; } .gv-activated .gv-legend .gv-legend-bar li { align-items: center; display: flex; margin-right: 16px; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-legend .gv-legend-bar li gv-icon { margin-right: 4px; } @media (max-width: 599px ) { .gv-activated .gv-legend .gv-legend-bar { flex-direction: column; } .gv-activated .gv-legend .gv-legend-bar li { margin-bottom: 8px; } } .gv-activated gv-icon { width: var(--size-icon-md); height: var(--size-icon-md); display: inline-block; vertical-align: text-bottom; font-size: 0; } .gv-activated gv-icon svg { width: 100%; height: 100%; fill: currentcolor; } .gv-activated .gv-mode-condensed gv-icon, .gv-activated gv-icon.gv-mode-condensed, .gv-activated gv-icon[size="small"] { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated gv-illustration { align-items: center; display: flex; } .gv-activated gv-illustration svg, .gv-activated gv-tile svg { color: var(--color-illustration-line); height: 100%; width: 100%; } .gv-activated gv-illustration svg .gv-stroke-alert, .gv-activated gv-tile svg .gv-stroke-alert { stroke: var(--color-signal-alert); } .gv-activated gv-illustration svg .gv-fill-bg, .gv-activated gv-tile svg .gv-fill-bg { fill: var(--color-illustration-background); } .gv-activated gv-illustration svg .gv-fill-gray, .gv-activated gv-tile svg .gv-fill-gray { fill: var(--color-illustration-gray); } .gv-activated gv-illustration svg .gv-fill-line, .gv-activated gv-tile svg .gv-fill-line { fill: var(--color-illustration-line); } .gv-activated gv-illustration svg .gv-fill-100, .gv-activated gv-tile svg .gv-fill-100 { fill: var(--color-illustration-100); } .gv-activated gv-illustration svg .gv-fill-200, .gv-activated gv-tile svg .gv-fill-200 { fill: var(--color-illustration-200); } .gv-activated gv-illustration svg .gv-fill-300, .gv-activated gv-tile svg .gv-fill-300 { fill: var(--color-illustration-300); } .gv-activated gv-illustration svg .gv-fill-alert-light, .gv-activated gv-tile svg .gv-fill-alert-light { fill: var(--color-signal-alert-light); } .gv-activated .gv-indicator { --indicator-color-background: var(--color-signal-info); background-color: var(--indicator-color-background); border-radius: 50%; display: inline-block; flex-shrink: 0; height: 8px; width: 8px; } .gv-activated .gv-indicator.gv-state-attention { /* This colour is intentionally hardcoded */ --indicator-color-background: #d27401; } .gv-activated .gv-indicator.gv-state-blank { --indicator-color-background: var(--color-surface-bright); } .gv-activated .gv-indicator.gv-state-busy { --indicator-color-background: var(--color-signal-info); } .gv-activated .gv-indicator.gv-state-critical { --indicator-color-background: var(--color-signal-alert); } .gv-activated .gv-indicator.gv-state-informative { --indicator-color-background: var(--color-gray-400); } .gv-activated .gv-indicator.gv-state-positive { --indicator-color-background: var(--color-signal-success); } .gv-activated .gv-text-indicator { align-items: center; display: inline-flex; gap: 8px; max-width: 100%; } .gv-activated .gv-text-indicator > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-icon-indicator { position: relative; } .gv-activated .gv-icon-indicator::before { background-color: var(--color-primary); border: 1px solid var(--color-body-on-default); border-radius: 50%; content: ""; display: block; position: absolute; right: 0; top: 2px; height: 8px; width: 8px; } .gv-activated gv-indicator { display: inline-block; font-size: 0; } .gv-activated gv-indicator svg { height: 100%; width: 100%; } .gv-activated .gv-sort { align-items: center; color: var(--color-body-on-alternative); display: flex; flex: 0 0 var(--size-icon-sm); flex-direction: column; gap: 4px; height: var(--size-icon-sm); justify-content: center; width: var(--size-icon-sm); } .gv-activated .gv-sort gv-indicator { height: 6px; width: 9px; } .gv-activated .gv-sort.gv-asc gv-indicator:first-child { color: var(--color-body-on-default); } .gv-activated .gv-sort.gv-desc gv-indicator:last-child { color: var(--color-body-on-default); } .gv-activated .gv-initials { align-items: center; background-color: var(--color-surface-highlight); border-radius: var(--size-xl); color: var(--color-body-on-default); display: flex; height: var(--size-xl); justify-content: center; text-transform: uppercase; width: var(--size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-initials { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-initials { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-initials { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-initials { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-initials { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-initials { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-initials > span { /* Apply values to calculate em_based margins that work with any font size */ } .gv-activated .gv-initials > span::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-initials > span::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-initials > span::before, .gv-activated .gv-initials > span::after { content: ""; display: block; height: 0; width: 0; } .gv-activated .gv-mode-condensed .gv-initials, .gv-activated .gv-initials.gv-mode-condensed { height: var(--size-lg); width: var(--size-lg); font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-autocomplete .gv-input:not(.gv-input-search) .gv-expanded gv-icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-autocomplete .gv-input [aria-expanded="true"] + .gv-clear { visibility: visible; } .gv-activated .gv-autocomplete-panel { background: var(--color-surface-bright); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--size-sm); position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 200; } .gv-activated .gv-autocomplete-panel .gv-state-info { padding: var(--size-sm); width: 100%; } .gv-activated .gv-autocomplete-panel .gv-state-info > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-autocomplete-panel .gv-listbox { max-height: 40vh; overflow: auto; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-autocomplete-panel .gv-listbox > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option { border-radius: var(--border-radius); cursor: pointer; min-height: 40px; padding: var(--size-sm); text-align: left; text-decoration: none; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option:hover { background-color: var(--color-state-hover); } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option[aria-selected="true"], .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option:focus { background-color: var(--color-state-active); } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option.gv-option-row { align-items: center; display: flex; flex-direction: row; gap: var(--size-sm); } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-highlight { font-weight: var(--font-weight-semibold); } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-text-icon { align-items: center; display: flex; } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-text-icon span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-with-underline { display: flex; flex-direction: column; } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-with-underline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-autocomplete-panel .gv-listbox .gv-option .gv-with-underline .gv-underline { color: var(--color-body-on-alternative); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-char-counter-input { position: relative; } .gv-activated .gv-char-counter-input .gv-highlighted { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; z-index: 0; pointer-events: none; } .gv-activated .gv-char-counter-input .gv-highlighted .gv-exceed { background-color: var(--color-signal-alert-light); color: transparent; } .gv-activated .gv-char-counter-input .gv-highlighted:not(.gv-input-textarea) { white-space: nowrap; } .gv-activated .gv-char-counter-input .gv-highlighted.gv-input-textarea { white-space: pre-wrap; } .gv-activated .gv-char-counter-input input, .gv-activated .gv-char-counter-input textarea { position: relative; z-index: 1; background: transparent; } .gv-activated .gv-char-counter-info { display: flex; gap: var(--size-xs); justify-content: flex-end; } .gv-activated .gv-char-counter-info .gv-input-message { flex-grow: 1; } .gv-activated .gv-char-counter-info .gv-char-counter { color: var(--color-body-on-alternative); white-space: nowrap; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-error .gv-char-counter { color: var(--color-signal-alert); } .gv-activated .gv-checkbox { --checkbox-color-fill: var(--color-surface-form); --checkbox-color-border: var(--color-border-form); --checkbox-color-fill-checked: var(--color-state-form-active); --checkbox-color-border-checked: transparent; --checkbox-color-icon-checked: var(--color-fg-form-on); --checkbox-border-radius: 4px; all: unset; box-sizing: border-box; display: revert; border-radius: var(--checkbox-border-radius); cursor: pointer; height: var(--size-lg); position: relative; width: var(--size-lg); /* The custom unchecked appearance: */ /* The custom ticked appearance: */ } .gv-activated .gv-checkbox:disabled { cursor: default; opacity: var(--opacity-disabled-elements); pointer-events: none; } .gv-activated .gv-checkbox::before { background-color: var(--checkbox-color-fill); border: var(--size-border) solid var(--checkbox-color-border); border-radius: var(--checkbox-border-radius); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .gv-activated .gv-checkbox:checked::before { align-items: center; background-color: var(--checkbox-color-fill-checked); border-color: var(--checkbox-color-border-checked); } .gv-activated .gv-checkbox:checked::after { background-color: var(--checkbox-color-icon-checked); content: ""; -webkit-mask: url("../images/check.svg") no-repeat 50% 50%; mask: url("../images/check.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .gv-activated .gv-checkbox.gv-checkbox-mixed:checked::after { -webkit-mask: url("../images/mixed.svg") no-repeat 50% 50%; mask: url("../images/mixed.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; } .gv-activated .gv-mode-condensed .gv-checkbox, .gv-activated .gv-checkbox.gv-mode-condensed { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-input-file-picker { align-items: end; display: flex; flex-wrap: wrap; gap: 16px; width: 100%; } .gv-activated .gv-input-file-picker .gv-form-option { flex: 1 1 auto; } .gv-activated .gv-input-file-picker .gv-button:focus-within { outline: 2px solid var(--color-state-focus-visible); outline-offset: 2px; } .gv-activated .gv-input-file-picker .gv-input-message { display: block; width: 100%; } .gv-activated .gv-input-file-picker.gv-error .gv-button { margin-bottom: 22px; } @media (max-width: 599px ) { .gv-activated .gv-input-file-picker { align-items: start; flex-direction: column; } .gv-activated .gv-input-file-picker .gv-form-option { width: 100%; } } .gv-activated .gv-input { --input-color-background: var(--color-surface-form); --input-color-text: var(--color-body-on-default); --input-color-border: var(--color-border-form); --input-padding: var(--size-md); background: var(--input-color-background); border: var(--size-border) solid var(--input-color-border); border-radius: var(--input-radius); color: var(--input-color-text); cursor: text; font-family: inherit; font-size: 1rem; /* 16px */ font-weight: var(--font-weight-regular); height: var(--form-element-height); line-height: var(--form-element-height); overflow: hidden; padding: 0 var(--input-padding); text-align: left; width: 100%; } .gv-activated .gv-input input, .gv-activated .gv-input select, .gv-activated .gv-input textarea { all: unset; box-sizing: border-box; display: revert; height: 100%; width: 100%; } .gv-activated .gv-input:not(.gv-disabled, .gv-read-only) select:not(:disabled, [readonly]) { background: var(--input-color-background); } .gv-activated .gv-input:hover:not([readonly], .gv-read-only, .gv-disabled), .gv-activated .gv-input:focus:not([readonly], .gv-read-only, .gv-disabled), .gv-activated .gv-input:focus-within:not([readonly], .gv-read-only, .gv-disabled) { --input-color-border: var(--color-state-form-active); } .gv-activated .gv-input:disabled, .gv-activated .gv-input.gv-disabled { cursor: default; pointer-events: none; } .gv-activated .gv-input:disabled, .gv-activated .gv-input.gv-disabled, .gv-activated .gv-input[readonly], .gv-activated .gv-input.gv-read-only { --input-color-background: var(--color-surface-form-disabled); --input-color-text: var(--color-body-on-disabled); --input-color-border: var(--color-border-form-disabled); } .gv-activated .gv-input[readonly] .gv-addon, .gv-activated .gv-input.gv-read-only .gv-addon, .gv-activated .gv-input[readonly] .gv-prefix, .gv-activated .gv-input.gv-read-only .gv-prefix { color: var(--color-body-on-default); } .gv-activated .gv-input.gv-input-select.gv-read-only { pointer-events: none; } .gv-activated .gv-input::-webkit-input-placeholder, .gv-activated .gv-input input::-webkit-input-placeholder, .gv-activated .gv-input textarea::-webkit-input-placeholder { color: var(--color-body-on-placeholder); opacity: 1; } .gv-activated .gv-input::placeholder, .gv-activated .gv-input input::placeholder, .gv-activated .gv-input textarea::placeholder, .gv-activated .gv-input.gv-has-placeholder { color: var(--color-body-on-placeholder); opacity: 1; } .gv-activated .gv-input.gv-input-textarea { min-height: 100px; line-height: var(--line-height-body); padding: var(--input-padding); overflow: auto; resize: none; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; } .gv-activated .gv-input.gv-input-textarea textarea { line-height: var(--line-height-body); } .gv-activated .gv-input.gv-input-select { padding: 0; position: relative; } .gv-activated .gv-input.gv-input-select select { cursor: pointer; line-height: calc(var(--form-element-height) - (var(--size-border) * 2)); padding-left: var(--input-padding); padding-right: 72px; } .gv-activated .gv-input.gv-input-select gv-icon { border-left: var(--size-border) solid var(--input-color-border); box-sizing: content-box; height: 100%; padding: 0 var(--size-md); pointer-events: none; position: absolute; right: 0; top: 0; width: 24px; } .gv-activated .gv-input.gv-with-addon, .gv-activated .gv-input.gv-input-search { align-items: center; display: flex; padding: 0; } .gv-activated .gv-input.gv-with-addon input, .gv-activated .gv-input.gv-input-search input { padding: 0 var(--input-padding); } .gv-activated .gv-input.gv-with-addon .gv-addon, .gv-activated .gv-input.gv-input-search .gv-addon, .gv-activated .gv-input.gv-with-addon .gv-prefix, .gv-activated .gv-input.gv-input-search .gv-prefix { align-items: center; display: flex; height: 100%; max-width: 156px; padding: 0 var(--input-padding); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-input.gv-with-addon .gv-addon gv-icon, .gv-activated .gv-input.gv-input-search .gv-addon gv-icon, .gv-activated .gv-input.gv-with-addon .gv-prefix gv-icon, .gv-activated .gv-input.gv-input-search .gv-prefix gv-icon { height: 100%; } .gv-activated .gv-input.gv-with-addon .gv-addon, .gv-activated .gv-input.gv-input-search .gv-addon { border-left: var(--size-border) solid var(--input-color-border); } .gv-activated .gv-input.gv-with-addon .gv-prefix, .gv-activated .gv-input.gv-input-search .gv-prefix { border-right: var(--size-border) solid var(--input-color-border); } .gv-activated .gv-input.gv-input-date.gv-with-addon { position: relative; } .gv-activated .gv-input.gv-input-date.gv-with-addon .gv-addon { background: var(--input-color-background); pointer-events: none; position: absolute; right: 0; } .gv-activated .gv-input.gv-input-date.gv-with-addon.gv-read-only .gv-addon { color: var(--color-body-on-disabled); } .gv-activated .gv-input.gv-input-textarea.gv-with-addon textarea { padding: var(--input-padding); } .gv-activated .gv-input.gv-input-textarea.gv-with-addon .gv-addon { align-items: flex-start; padding: var(--input-padding); } .gv-activated .gv-input.gv-input-textarea.gv-with-addon .gv-addon gv-icon { height: var(--size-icon-md); } .gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-ms-clear, .gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-ms-reveal { display: none; height: 0; width: 0; } .gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-decoration, .gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-cancel-button, .gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-results-button, .gv-activated .gv-input.gv-input-search.gv-with-clear input[type="search"]::-webkit-search-results-decoration { display: none; } .gv-activated .gv-input .gv-clear, .gv-activated .gv-input .gv-filters { align-items: center; display: flex; height: 100%; padding: 0 var(--input-padding) 0 0; } .gv-activated .gv-input .gv-clear gv-icon, .gv-activated .gv-input .gv-filters gv-icon { height: 100%; } .gv-activated .gv-input .gv-clear { visibility: hidden; } .gv-activated .gv-input:hover .gv-clear, .gv-activated .gv-input:focus-within .gv-clear { visibility: visible; } .gv-activated .gv-input .gv-shortcut { align-items: center; background-color: var(--color-surface-dim); border: var(--size-border) solid var(--color-border-alt); border-radius: var(--border-radius); box-shadow: var(--color-shadow-subtle); display: flex; flex-wrap: nowrap; gap: var(--size-xs); height: 18px; margin-right: var(--input-padding); padding: 0 var(--size-xs); font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-input.gv-input-domain-checker { --checker-padding: calc(var(--size-xs) - var(--size-border)); display: flex; height: calc(var(--form-element-height) + (var(--size-xs) * 2)); padding: var(--checker-padding) var(--checker-padding) var(--checker-padding) 0; } .gv-activated .gv-input.gv-input-domain-checker input { padding: 0 var(--input-padding); } .gv-activated .gv-input.gv-input-number { align-items: center; display: flex; gap: var(--size-md); padding: 0 var(--size-sm); } .gv-activated .gv-input.gv-input-number input[type="number"] { -webkit-appearance: textfield; appearance: textfield; text-align: center; } .gv-activated .gv-input.gv-input-number input[type="number"]::-webkit-inner-spin-button, .gv-activated .gv-input.gv-input-number input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .gv-activated .gv-input.gv-input-number button { background-color: var(--color-surface-bright); border-radius: var(--border-radius); color: var(--color-body-on-default); padding: var(--size-xs); } .gv-activated .gv-input.gv-input-number button:disabled, .gv-activated .gv-input.gv-input-number button.gv-disabled { cursor: default; opacity: var(--opacity-disabled-elements); pointer-events: none; } @media (max-width: 599px ) { .gv-activated .gv-input .gv-button { width: auto; } .gv-activated .gv-input.gv-input-domain-checker .gv-button span { display: none; } } @media (min-width: 600px ) { .gv-activated .gv-input:not(.gv-w-full).gv-input-country-number, .gv-activated .gv-input:not(.gv-w-full).gv-input-zipcode { width: var(--size-input-sm); } .gv-activated .gv-input:not(.gv-w-full).gv-input-date { width: var(--size-input-md); } .gv-activated .gv-input-sm { max-width: var(--size-input-sm); } .gv-activated .gv-input-md { max-width: var(--size-input-md); } .gv-activated .gv-input-lg { max-width: var(--size-input-lg); } } .gv-activated .gv-mode-condensed .gv-input.gv-input-number button, .gv-activated .gv-input.gv-mode-condensed.gv-input-number button { padding: 0; } .gv-activated .gv-on-surface-dim .gv-input, .gv-activated .gv-input.gv-on-surface-dim { --input-color-background: var(--color-surface-bright); } .gv-activated .gv-input-message { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-error .gv-input, .gv-activated .gv-input.gv-error { --input-color-border: var(--color-validation-error); } .gv-activated .gv-error .gv-input-message:not(.gv-message-info), .gv-activated .gv-input-message.gv-error:not(.gv-message-info) { color: var(--color-validation-error); } .gv-activated .gv-deleted .gv-input { --input-color-background: var(--color-surface-form-deleted); --input-color-border: var(--color-border-form-deleted); --input-color-text: var(--color-body-on-deleted); } .gv-activated .gv-password { display: flex; flex-direction: column; gap: var(--size-md); } .gv-activated .gv-password .gv-password-form .gv-strength { align-items: flex-end; display: flex; flex-direction: column; margin-top: var(--size-sm); position: relative; } .gv-activated .gv-password .gv-password-form .gv-strength .gv-strength-label { font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-password .gv-requirements { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-password .gv-requirements > *:not(:last-child) { margin-bottom: var(--size-md); } .gv-activated .gv-password .gv-requirements .gv-title { margin-bottom: var(--size-xs); margin-top: var(--size-sm); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); font-weight: var(--font-weight-semibold); } .gv-activated .gv-password .gv-requirements .gv-list { list-style: none; padding: 0; } .gv-activated .gv-password .gv-requirements .gv-list > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-password .gv-requirements .gv-list li { align-items: flex-start; color: var(--color-body-on-disabled); display: flex; flex-wrap: wrap; gap: var(--size-xs); padding-left: calc(var(--size-icon-sm) + var(--size-xs)); position: relative; } .gv-activated .gv-password .gv-requirements .gv-list li::before { background-color: var(--color-body-on-default); content: ""; -webkit-mask: url("../images/remove.svg") no-repeat 50% 50%; mask: url("../images/remove.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: var(--size-icon-sm); left: 0; position: absolute; top: 0; width: var(--size-icon-sm); } .gv-activated .gv-password .gv-requirements .gv-list li.gv-valid { color: var(--color-body-on-default); } .gv-activated .gv-password .gv-requirements .gv-list li.gv-valid::before { background-color: var(--color-signal-success); -webkit-mask: url("../images/check.svg") no-repeat 50% 50%; mask: url("../images/check.svg") no-repeat 50% 50%; } .gv-activated .gv-password .gv-requirements .gv-list li .gv-tooltip-container { color: var(--color-body-on-default); } .gv-activated .gv-radio { --radio-color-fill: var(--color-surface-form); --radio-color-border: var(--color-border-form); --radio-color-fill-selected: var(--color-fg-form-on); --radio-color-border-selected: var(--color-state-form-active); all: unset; box-sizing: border-box; display: revert; border-radius: 100%; cursor: pointer; height: var(--size-lg); position: relative; width: var(--size-lg); /* The custom unchecked appearance: */ /* The custom checked appearance: */ } .gv-activated .gv-radio:disabled { cursor: default; opacity: var(--opacity-disabled-elements); pointer-events: none; } .gv-activated .gv-radio::after { background-color: var(--radio-color-fill); border: var(--size-border) solid var(--radio-color-border); border-radius: 100%; box-sizing: border-box; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .gv-activated .gv-radio:checked::after { background-color: var(--radio-color-fill-selected); border-color: var(--radio-color-border-selected); border-width: 7px; } .gv-activated .gv-mode-condensed .gv-radio, .gv-activated .gv-radio.gv-mode-condensed { height: var(--size-md); width: var(--size-md); } .gv-activated .gv-mode-condensed .gv-radio:checked::after, .gv-activated .gv-radio.gv-mode-condensed:checked::after { border-width: 5px; } .gv-activated .gv-rich-option-group-item { align-items: center; background: var(--color-surface-bright); border-radius: var(--border-radius); border: 1px solid var(--color-border-alt); cursor: pointer; display: flex; gap: 16px; padding: 24px; position: relative; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-rich-option-group-item:hover { background-color: var(--color-state-hover); } .gv-activated .gv-rich-option-group-item:active { background-color: var(--color-state-active); } .gv-activated .gv-rich-option-group-item:has(input:checked) { border-color: var(--color-state-form-active); } .gv-activated .gv-rich-option-group-item .gv-radio, .gv-activated .gv-rich-option-group-item gv-tile, .gv-activated .gv-rich-option-group-item gv-icon { flex: 0 0 auto; } .gv-activated .gv-rich-option-group-item .gv-content { display: flex; flex-direction: column; justify-content: center; } .gv-activated .gv-rich-option-group-item .gv-content .gv-title { line-height: var(--line-height-body); font-weight: var(--font-weight-semibold); } @media screen and (max-width: 360px) { .gv-activated .gv-rich-option-group-item .gv-content .gv-title { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-rich-option-group-item .gv-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-rich-option-group-item .gv-content .gv-title { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-rich-option-group-item .gv-content .gv-title { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-rich-option-group-item .gv-content .gv-title { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-rich-option-group-item .gv-content .gv-title { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-rich-option-group-item .gv-content .gv-description { color: var(--color-body-on-alternative); } .gv-activated .gv-rich-option-group-item.gv-mode-condensed { padding: 16px; } .gv-activated .gv-rich-option-group-item.gv-mode-condensed .gv-content .gv-title { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-rich-option-group-item.gv-mode-condensed .gv-content .gv-description { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-form-title { font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-divider-label { align-items: center; color: var(--color-body-on-alternative); display: flex; gap: var(--size-sm); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-divider-label .gv-divider { --divider-color: var(--color-border-alt); } .gv-activated .gv-repeatable-fields { display: flex; gap: var(--size-xs); flex-direction: column; } .gv-activated .gv-repeatable-fields .gv-row, .gv-activated .gv-repeatable-fields .gv-fields { display: flex; gap: var(--size-md); } .gv-activated .gv-repeatable-fields .gv-fields { flex: 1; } .gv-activated .gv-repeatable-fields .gv-fields > * { width: 100%; } .gv-activated .gv-repeatable-fields .gv-button { flex-shrink: 0; } @media (max-width: 599px ) { .gv-activated .gv-repeatable-fields { border-bottom: 1px solid var(--color-border-alt); padding-bottom: var(--size-md); } .gv-activated .gv-repeatable-fields .gv-fields { align-items: flex-start; flex-direction: column; } .gv-activated .gv-repeatable-fields .gv-button { width: auto; } } @media (min-width: 600px ) { .gv-activated .gv-repeatable-fields .gv-fields .gv-form-option:nth-child(2) { max-width: var(--size-input-md); } } .gv-activated .gv-search-advanced { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1100; } .gv-activated .gv-search-advanced .gv-search-container { height: 100%; margin-left: auto; margin-right: auto; max-width: 1536px; } @media screen and (max-width: 360px) { .gv-activated .gv-search-advanced .gv-search-container { padding-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-search-advanced .gv-search-container { padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-search-advanced .gv-search-container { padding-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-search-advanced .gv-search-container { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-search-advanced .gv-search-container { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-search-advanced .gv-search-container { padding-left: 48px; padding-right: 48px; } } .gv-activated .gv-search-advanced .gv-search-content { display: flex; flex-direction: column; height: 100%; } .gv-activated .gv-search-advanced .gv-autocomplete-panel { overflow-y: auto; padding: var(--size-lg); position: relative; } .gv-activated .gv-search-advanced .gv-autocomplete-panel > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info { padding: 0; text-align: center; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info gv-loader { height: var(--size-lg); width: var(--size-lg); } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips { position: relative; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-slide-button { height: 100%; position: absolute; top: 0; z-index: 1; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-slide-button.gv-previous { background: linear-gradient(270deg, rgb(from var(--color-surface-bright) r g b / 0%) 0%, var(--color-surface-bright) 40%); left: calc(-1 * var(--size-lg)); padding: 0 var(--size-sm) 0 var(--size-lg); } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-slide-button.gv-next { background: linear-gradient(270deg, var(--color-surface-bright) 60%, rgb(from var(--color-surface-bright) r g b / 0%) 100%); padding: 0 var(--size-lg) 0 var(--size-sm); right: calc(-1 * var(--size-lg)); } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-bar { overflow: hidden; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-items { display: flex; gap: var(--size-md); transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-chips .gv-chip { flex-shrink: 0; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-results > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-header { display: flex; gap: var(--size-md); justify-content: space-between; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-panel-header .gv-title { color: var(--color-body-on-alternative); font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-listbox { max-height: none; overflow: visible; } @media (max-width: 1023px ) { .gv-activated .gv-search-advanced { background-color: var(--color-surface-bright); } .gv-activated .gv-search-advanced .gv-search-container { padding: 0; } .gv-activated .gv-search-advanced .gv-autocomplete-panel { border: none; display: flex; flex-direction: column; flex-grow: 1; } .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info { align-items: center; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; } .gv-activated .gv-search-advanced .gv-search-header { display: flex; gap: var(--size-md); padding: var(--size-lg) var(--size-lg) 0; } .gv-activated .gv-search-advanced .gv-search-header .gv-button { width: auto; } } @media (min-width: 1024px ) { .gv-activated .gv-search-advanced { background-color: var(--color-overlay-dark); } .gv-activated .gv-search-advanced .gv-search-container { display: flex; justify-content: flex-end; } .gv-activated .gv-search-advanced .gv-search-content { width: 360px; } .gv-activated .gv-search-advanced .gv-search-header { padding-top: var(--size-xs); } .gv-activated .gv-search-advanced .gv-search-header .gv-button-cancel { display: none; } } .gv-activated .gv-option-group .gv-option-group-label { margin-bottom: 8px; } .gv-activated .gv-option-group .gv-option-group-types > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-option-group .gv-input-message { margin-top: 8px; } .gv-activated .gv-option-group .gv-options { border: none; margin: 0; min-width: 0; padding: 0; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-toggle { --toggle-color-on: var(--color-state-form-active); --toggle-color-off: var(--color-border-form); --toggle-color-dot: var(--color-fg-form-on); --toggle-height: 24px; --toggle-width: 42px; --toggle-dot-indent: 3px; --toggle-dot-size: calc(var(--toggle-height) - (var(--toggle-dot-indent) * 2)); display: inline-block; position: relative; } .gv-activated .gv-toggle .gv-toggle-slider { background-color: var(--toggle-color-off); border-radius: 100px; height: var(--toggle-height); position: relative; width: var(--toggle-width); } .gv-activated .gv-toggle .gv-toggle-slider::before { background-color: var(--toggle-color-dot); border-radius: 100px; box-sizing: content-box; content: ""; display: block; height: var(--toggle-dot-size); left: var(--toggle-dot-indent); position: absolute; top: var(--toggle-dot-indent); transition: all 0.2s ease-out; width: var(--toggle-dot-size); } .gv-activated .gv-toggle input[type="checkbox"] { all: unset; box-sizing: border-box; display: revert; cursor: pointer; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .gv-activated .gv-toggle input[type="checkbox"]:checked + .gv-toggle-slider { background-color: var(--toggle-color-on); } .gv-activated .gv-toggle input[type="checkbox"]:checked + .gv-toggle-slider::before { -webkit-transform: translateX(calc(var(--toggle-width) - var(--toggle-height))); transform: translateX(calc(var(--toggle-width) - var(--toggle-height))); } .gv-activated .gv-toggle input[type="checkbox"]:disabled { cursor: default; opacity: var(--opacity-disabled-elements); pointer-events: none; } .gv-activated .gv-toggle input[type="checkbox"]:disabled + .gv-toggle-slider { opacity: var(--opacity-disabled-elements); } .gv-activated .gv-mode-condensed .gv-toggle, .gv-activated .gv-toggle.gv-mode-condensed { --toggle-height: 16px; --toggle-width: 28px; --toggle-dot-indent: 2px; } .gv-activated .gv-form-option { display: flex; gap: var(--size-xs); flex-direction: column; } .gv-activated .gv-form-option .gv-label-with-action { align-items: flex-end; display: flex; justify-content: space-between; } .gv-activated .gv-form-option .gv-input-action { color: var(--color-state-form-active); text-decoration: none; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-form-option .gv-option-inline { align-items: flex-start; display: flex; flex-wrap: nowrap; gap: var(--size-sm); } .gv-activated .gv-form-option .gv-option-inline .gv-checkbox, .gv-activated .gv-form-option .gv-option-inline .gv-radio, .gv-activated .gv-form-option .gv-option-inline .gv-toggle { flex-shrink: 0; } .gv-activated .gv-form-option .gv-option-inline .gv-label { cursor: pointer; font-weight: var(--font-weight-regular); padding-top: 6px; line-height: var(--line-height-body); /* Apply values to calculate em_based margins that work with any font size */ } @media screen and (max-width: 360px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-form-option .gv-option-inline .gv-label::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-form-option .gv-option-inline .gv-label::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-form-option .gv-option-inline .gv-label::before, .gv-activated .gv-form-option .gv-option-inline .gv-label::after { content: ""; display: block; height: 0; width: 0; } .gv-activated .gv-form-option .gv-option-inline .gv-description { color: var(--color-body-on-alternative); display: block; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-form-option .gv-option-inline .gv-label-with-tooltip { align-items: flex-start; display: flex; flex-wrap: nowrap; gap: var(--size-sm); } .gv-activated .gv-mode-condensed .gv-option-inline .gv-label { padding-top: 3px; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-label { font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-label .gv-label-optional { color: var(--color-body-on-alternative); margin-left: var(--size-sm); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-label.gv-label-with-icon { align-items: center; display: flex; gap: var(--size-xs); } .gv-activated .gv-label.gv-label-with-icon gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated ul.gv-list-items { list-style: none; padding: 0; } .gv-activated ul.gv-list-items > *:not(:last-child) { margin-bottom: 16px; } .gv-activated ul.gv-list-items li { padding-left: 32px; position: relative; } .gv-activated ul.gv-list-items li::before { background-color: var(--color-body-on-default); content: ""; -webkit-mask: url("../images/remove.svg") no-repeat 50% 50%; mask: url("../images/remove.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: 24px; left: 0; position: absolute; top: 0; width: 24px; } .gv-activated ul.gv-list-items.gv-list-check li::before { -webkit-mask: url("../images/check.svg") no-repeat 50% 50%; mask: url("../images/check.svg") no-repeat 50% 50%; } .gv-activated ul.gv-list-items.gv-list-bullet li::before { -webkit-mask: url("../images/gv-bullet.svg") no-repeat 50% 50%; mask: url("../images/gv-bullet.svg") no-repeat 50% 50%; } .gv-activated ul.gv-list-items.gv-mode-condensed li { padding-left: 28px; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated ul.gv-list-items.gv-mode-condensed li::before { height: 20px; top: 2px; width: 20px; } .gv-activated .gv-list-table { text-align: left; width: 100%; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); /* Form */ --form-element-height: 30px; } .gv-activated .gv-list-table tr:nth-child(even) { background-color: var(--color-zebra-even); } .gv-activated .gv-list-table tr:nth-child(odd) { background-color: var(--color-zebra-odd); } .gv-activated .gv-list-table tr:hover { background-color: var(--color-zebra-hover); } .gv-activated .gv-list-table th { font-weight: var(--font-weight-semibold); } .gv-activated .gv-list-table .gv-col-action { width: 1px; } .gv-activated .gv-list-table th, .gv-activated .gv-list-table td:not(.gv-col-action) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 599px ) { .gv-activated .gv-list-table, .gv-activated .gv-list-table tbody { display: block; } .gv-activated .gv-list-table tr { display: flex; flex-direction: column; } .gv-activated .gv-list-table th { padding: var(--size-sm) var(--size-md); } .gv-activated .gv-list-table td:not(.gv-col-action) { padding: 0 var(--size-md) var(--size-sm); } .gv-activated .gv-list-table td.gv-col-action { padding: 0 var(--size-md); } .gv-activated .gv-list-table td.gv-col-action > * { margin-bottom: var(--size-sm); } } @media (min-width: 600px ) { .gv-activated .gv-list-table th, .gv-activated .gv-list-table td { padding: var(--size-sm) var(--size-md); } .gv-activated .gv-list-table th { max-width: 200px; width: 200px; } .gv-activated .gv-list-table td:not(.gv-col-action) { max-width: 1px; } } .gv-activated gv-loader { align-items: center; -webkit-animation: gv-spin 1s linear infinite; animation: gv-spin 1s linear infinite; display: inline-flex; height: var(--size-xl); width: var(--size-xl); } .gv-activated gv-loader svg { height: 100%; width: 100%; } .gv-activated gv-loader .gv-primary-color { fill: var(--color-loader-primary); } .gv-activated gv-loader .gv-secondary-color { fill: var(--color-loader-secondary); } .gv-activated .gv-mode-condensed gv-loader, .gv-activated gv-loader.gv-mode-condensed { height: var(--size-lg); width: var(--size-lg); } .gv-activated .gv-loader-container { align-items: center; background-color: var(--color-overlay-light); display: flex; flex-direction: column; gap: var(--size-sm); padding: var(--size-lg); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-loader-container gv-loader { height: var(--size-lg); width: var(--size-lg); } .gv-activated gv-logo { align-items: center; display: inline-flex; height: 40px; } .gv-activated gv-logo svg { max-width: 100%; } .gv-activated gv-logo[fit="auto"] { height: auto; } .gv-activated.gv-dark-mode gv-logo .gv-mode-color { fill: var(--color-gray-100); } .gv-activated .gv-modal { --modal-max-width: 700px; --modal-product-max-width: 978px; --modal-product-mob-max-image-height: 255px; align-items: center; background-color: var(--color-overlay-dark); display: flex; height: 100%; justify-content: center; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 1100; } @media screen and (max-width: 360px) { .gv-activated .gv-modal { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal { padding: 48px; } } .gv-activated .gv-modal.gv-no-overlay { background: none; border-radius: var(--border-radius); display: block; height: auto; max-height: calc(100vh - (var(--size-xl) * 2)); max-width: var(--modal-max-width); padding: 0; width: calc(100vw - (var(--size-xl) * 2)); } .gv-activated .gv-modal .gv-modal-content { background-color: var(--color-surface-bright); border-radius: var(--border-radius); color: var(--color-body-on-default); margin: auto; max-width: var(--modal-max-width); position: relative; width: 100%; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content { padding: 48px; } } .gv-activated .gv-modal .gv-modal-content > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-modal .gv-modal-content .gv-modal-close { cursor: pointer; padding: var(--size-sm); position: absolute; right: 0; top: 0; z-index: 200; } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-close { right: 8px; top: 8px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-close { right: calc(8px + 8 * ((100vw - 360px ) / 1080 )); top: calc(8px + 8 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-close { right: 16px; top: 16px; } } .gv-activated .gv-modal .gv-modal-content .gv-modal-body > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-modal .gv-modal-content .gv-modal-title { margin-right: 24px; font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-sm); } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { font-size: calc(var(--font-size-heading-sm-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { font-size: calc(var(--font-size-heading-sm-max) * 1rem); } } .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-modal .gv-modal-content .gv-modal-progress { align-items: center; display: flex; gap: 16px; justify-content: space-between; } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-close { background: var(--color-surface-bright); border-radius: var(--border-radius); } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { margin-right: 24px; font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-lg); } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { font-size: calc(var(--font-size-heading-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-title { font-size: calc(var(--font-size-heading-lg-max) * 1rem); } } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-content { display: flex; flex-wrap: wrap; max-width: var(--modal-product-max-width); } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body { flex: 0 0 calc(50% - 16px); } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-intro { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price { margin: 24px 0; } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount { display: flex; gap: 8px; } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { color: var(--color-body-on-alternative); text-decoration: line-through; line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-discount .gv-price-old { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-md); } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { font-size: calc(var(--font-size-heading-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price { font-size: calc(var(--font-size-heading-md-max) * 1rem); } } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { margin-left: 4px; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-price .gv-price-current .gv-price-period { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-info, .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-key-benefits, .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-more-info { display: flex; flex-direction: column; gap: 16px; } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-info, .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body .gv-product-key-benefits { margin-bottom: 24px; } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-image { height: 100%; position: absolute; right: 0; top: 0; width: calc(50% - 16px); } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-image img { display: block; height: 100%; object-fit: cover; object-position: left top; width: 100%; } .gv-activated .gv-modal.gv-upgrade-modal .gv-button-group { flex: 0 0 100%; margin-bottom: 0; } .gv-activated .gv-modal .gv-progress-bullets { align-items: center; display: flex; gap: 8px; } .gv-activated .gv-modal .gv-progress-bullets > span { background-color: var(--color-state-hover); border-radius: 50%; display: block; height: 8px; width: 8px; } .gv-activated .gv-modal .gv-progress-bullets > span.gv-bullet-current { background-color: var(--color-state-focus); } .gv-activated .gv-modal .gv-progress-bullets > span.gv-bullet-done { background-color: var(--color-state-active); } @media (max-width: 599px ) { .gv-activated .gv-modal { align-items: flex-end; padding-bottom: 0; padding-left: 0; padding-right: 0; } .gv-activated .gv-modal.gv-no-overlay { border-radius: 0; bottom: 0; left: 0; max-height: calc(100vh - var(--size-lg)); top: auto; -webkit-transform: none; transform: none; width: 100%; } .gv-activated .gv-modal .gv-modal-content { border-radius: 0; margin: 0; max-height: 100%; overflow: auto; } .gv-activated .gv-modal .gv-modal-content .gv-modal-progress .gv-button { width: auto; } .gv-activated .gv-modal .gv-button-group { flex-direction: column-reverse; } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-body { flex: 0 0 100%; padding-top: var(--modal-product-mob-max-image-height); } .gv-activated .gv-modal.gv-upgrade-modal .gv-modal-image { right: 0; left: 0; height: var(--modal-product-mob-max-image-height); width: 100%; } } .gv-activated .gv-main-header { background-color: var(--color-surface-bright); border-bottom: 1px solid var(--color-border-alt); height: var(--navigation-bar-height); left: 0; position: fixed; top: 0; width: 100%; z-index: 1000; } .gv-activated .gv-main-header .gv-header-nav { align-items: center; display: flex; flex-wrap: nowrap; gap: 24px; height: var(--navigation-bar-height); justify-content: space-between; position: relative; width: 100%; margin-left: auto; margin-right: auto; max-width: 1536px; } @media screen and (max-width: 360px) { .gv-activated .gv-main-header .gv-header-nav { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-main-header .gv-header-nav { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-main-header .gv-header-nav { padding-left: 48px; padding-right: 48px; } } .gv-activated .gv-main-header .gv-nav-left { align-items: center; display: flex; gap: 24px; flex-wrap: nowrap; } .gv-activated .gv-main-header .gv-nav-menu { align-items: center; display: flex; flex-wrap: nowrap; gap: 24px; } .gv-activated .gv-main-header .gv-nav-menu > * { display: block; position: relative; text-decoration: none; } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-cart { display: flex; } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account { align-items: center; display: flex; gap: var(--size-sm); } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); /* Apply values to calculate em_based margins that work with any font size */ } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::before, .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label::after { content: ""; display: block; height: 0; width: 0; } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account.gv-icon-indicator::before { left: calc(var(--size-icon-md) - var(--size-sm)); right: auto; } @media (max-width: 599px ) { .gv-activated .gv-main-header .gv-nav-menu .gv-btn-account .gv-btn-label { display: none; } } @media (max-width: 1023px ) { .gv-activated .gv-main-header .gv-nav-links, .gv-activated .gv-main-header .gv-btn-notification, .gv-activated .gv-main-header .gv-btn-search { display: none; } } @media (min-width: 1024px ) { .gv-activated .gv-main-header .gv-btn-menu { display: none; } .gv-activated .gv-main-header .gv-nav-links ul { display: flex; list-style: none; padding: 0; } .gv-activated .gv-main-header .gv-nav-links ul a { border-bottom: 1px solid var(--color-border-alt); display: block; font-weight: var(--font-weight-medium); height: var(--navigation-bar-height); padding: 16px 24px; text-decoration: none; white-space: nowrap; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-main-header .gv-nav-links ul a:hover { background-color: var(--color-state-hover); } .gv-activated .gv-main-header .gv-nav-links ul .gv-active a { background-color: var(--color-state-active); border-color: var(--color-border); } } .gv-activated .gv-btn-cart { --color-bg-empty: var(--color-surface-muted); --color-on-empty: var(--color-body-on-placeholder); --color-bg-filled: var(--color-cta); --color-on-filled: var(--color-button-fg-on); align-items: center; display: flex; flex-wrap: nowrap; gap: var(--size-xs); position: relative; text-decoration: none; } .gv-activated .gv-btn-cart.gv-alternative { --color-bg-empty: var(--color-overlay-dark); --color-on-empty: var(--color-on-fixed-white); } .gv-activated .gv-btn-cart.gv-alternative gv-icon { color: var(--color-on-fixed-white); } .gv-activated .gv-btn-cart .gv-amount { background-color: var(--color-bg-empty); border-radius: var(--border-radius); color: var(--color-on-empty); line-height: 1; padding: var(--size-xs); font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-btn-cart.gv-filled .gv-amount { background-color: var(--color-bg-filled); color: var(--color-on-filled); } .gv-activated .gv-notice { --notice-color-background: inherit; align-items: center; background: var(--notice-color-background); border-radius: var(--notice-radius); color: var(--color-body-on-default); display: flex; flex-wrap: nowrap; gap: var(--size-md); padding: var(--size-lg); position: relative; } .gv-activated .gv-notice .gv-notice-icon { flex-shrink: 0; } .gv-activated .gv-notice .gv-notice-content { flex-grow: 1; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-notice .gv-notice-content > *:not(:last-child) { margin-bottom: var(--size-xs); } .gv-activated .gv-notice .gv-notice-title { font-weight: var(--font-weight-semibold); } .gv-activated .gv-notice .gv-button { flex-shrink: 0; } .gv-activated .gv-notice .gv-notice-close { cursor: pointer; padding: var(--size-sm); } .gv-activated .gv-notice.gv-notice-alert { --notice-color-background: var(--color-signal-alert-light); } .gv-activated .gv-notice.gv-notice-warning { --notice-color-background: var(--color-signal-warning-light); } .gv-activated .gv-notice.gv-notice-success { --notice-color-background: var(--color-signal-success-light); } .gv-activated .gv-notice.gv-notice-info { --notice-color-background: var(--color-signal-info-light); } .gv-activated .gv-notice.gv-notice-upgrade { --notice-color-background: var(--color-signal-upgrade-light); } .gv-activated .gv-notice.gv-notice-upgrade .gv-notice-icon .gv-upgrade-icon-bg { fill: var(--color-icon-upgrade-bg); } .gv-activated .gv-notice.gv-notice-upgrade .gv-notice-icon .gv-upgrade-icon-flash { fill: var(--color-icon-upgrade-flash); } .gv-activated .gv-notice.gv-notice-addon { border-top-left-radius: 0; border-top-right-radius: 0; padding: var(--size-sm) var(--size-lg); /* Form */ --form-element-height: 30px; } .gv-activated .gv-notice.gv-notice-addon .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } @media (max-width: 599px ) { .gv-activated .gv-notice { flex-wrap: wrap; gap: var(--size-sm); justify-content: space-between; } .gv-activated .gv-notice .gv-notice-content { width: 100%; } .gv-activated .gv-notice .gv-button { margin-top: var(--size-sm); } .gv-activated .gv-notice .gv-notice-close { position: absolute; right: var(--size-lg); top: var(--size-md); } } .gv-activated .gv-mode-condensed .gv-notice, .gv-activated .gv-notice.gv-mode-condensed { gap: var(--size-sm); padding: var(--size-sm); } .gv-activated .gv-mode-condensed .gv-notice .gv-notice-content, .gv-activated .gv-notice.gv-mode-condensed .gv-notice-content { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } @media (max-width: 599px ) { .gv-activated .gv-mode-condensed .gv-notice .gv-notice-close, .gv-activated .gv-notice.gv-mode-condensed .gv-notice-close { right: var(--size-sm); top: 0; } } .gv-activated .gv-main-header .gv-nav-select .gv-btn-select { display: flex; gap: 4px; padding: 8px 0 8px 8px; } .gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown { background-color: var(--color-surface-bright); border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); display: none; padding: 16px; position: absolute; right: 0; top: 100%; width: 200px; } .gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown ul { list-style: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown ul > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-main-header .gv-nav-select .gv-nav-dropdown li { display: flex; flex-direction: column; gap: 8px; } .gv-activated .gv-main-header .gv-nav-select [aria-expanded="true"] gv-icon:last-child { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-main-header .gv-nav-select [aria-expanded="true"] + .gv-nav-dropdown { display: block; } .gv-activated .gv-main-header .gv-btn-logout { white-space: nowrap; } .gv-activated .gv-overlay { background-color: var(--color-overlay-dark); inset: 0; opacity: 0; position: fixed; pointer-events: none; z-index: 1100; } .gv-activated .gv-overlay.gv-overlay-light { background-color: var(--color-overlay-light); } .gv-activated .gv-overlay.gv-state-open, .gv-activated .gv-overlay[data-state="open"] { -webkit-animation: gv-fade-in 0.3s ease-out forwards; animation: gv-fade-in 0.3s ease-out forwards; pointer-events: auto; } .gv-activated .gv-overlay.gv-state-closed, .gv-activated .gv-overlay[data-state="closed"] { -webkit-animation: gv-fade-out 0.3s ease-in forwards; animation: gv-fade-out 0.3s ease-in forwards; } .gv-activated gv-pay-icon { display: inline-block; height: 26px; width: 34px; font-size: 0; vertical-align: text-bottom; } .gv-activated gv-pay-icon svg { width: 100%; height: 100%; } .gv-activated .gv-layout-product { display: grid; grid-template-columns: 1fr; grid-template-areas: "nav" "header" "table" "details" "content"; } @media screen and (max-width: 360px) { .gv-activated .gv-layout-product { gap: calc(var(--size-fluid-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-layout-product { gap: calc(calc(var(--size-fluid-min-value) * 1px) + (var(--size-fluid-max-value) - var(--size-fluid-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-layout-product { gap: calc(var(--size-fluid-max-value) * 1px); } } .gv-activated .gv-layout-product > * { min-width: 0; } .gv-activated .gv-layout-product .gv-area-nav { grid-area: nav; } .gv-activated .gv-layout-product .gv-area-header { grid-area: header; } .gv-activated .gv-layout-product .gv-area-table { grid-area: table; } .gv-activated .gv-layout-product .gv-area-details { grid-area: details; } .gv-activated .gv-layout-product .gv-area-content { grid-area: content; } .gv-activated .gv-layout-product .gv-product-header { background: var(--color-surface-highlight); border: 1px solid var(--color-border); border-radius: var(--border-radius); display: flex; flex-direction: column; overflow: hidden; } @media screen and (max-width: 360px) { .gv-activated .gv-layout-product .gv-product-header .gv-content { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-layout-product .gv-product-header .gv-content { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-layout-product .gv-product-header .gv-content { padding: 48px; } } .gv-activated .gv-layout-product .gv-product-header .gv-image { position: relative; } .gv-activated .gv-layout-product .gv-product-header .gv-image img { display: block; height: auto; max-width: 480px; object-fit: cover; object-position: left top; width: 100%; } @media (min-width: 768px ) { .gv-activated .gv-layout-product.gv-product-single { grid-template-columns: 1fr 1fr; grid-template-areas: "nav nav" "header table" "details table" "content content"; } .gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header { align-items: center; flex-direction: row; } .gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-content { flex: 0 0 50%; min-width: 0; } .gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-image { flex: 0 0 50%; height: 100%; min-height: 360px; min-width: 0; } .gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-image picture { align-items: stretch; display: flex; height: 100%; } .gv-activated .gv-layout-product:not(.gv-product-single) .gv-product-header .gv-image img { height: 100%; width: auto; max-width: none; } } @media (min-width: 1024px ) { .gv-activated .gv-layout-product.gv-product-single { grid-template-columns: 2fr 1fr; } .gv-activated .gv-layout-product.gv-product-single .gv-product-header { align-items: center; flex-direction: row; } .gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-content { flex: 0 0 50%; min-width: 0; } .gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-image { flex: 0 0 50%; height: 100%; min-height: 360px; min-width: 0; } .gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-image picture { align-items: stretch; display: flex; height: 100%; } .gv-activated .gv-layout-product.gv-product-single .gv-product-header .gv-image img { height: 100%; width: auto; max-width: none; } } .gv-activated .gv-resource { display: flex; flex-direction: column; gap: 8px; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-resource .gv-content { display: flex; flex-direction: column; gap: 4px; } .gv-activated .gv-resource .gv-amount { font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-resource .gv-description { color: var(--color-body-on-alternative); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } .gv-activated .gv-progress { background-color: var(--color-border-alt); border-radius: var(--border-radius); height: 8px; overflow: hidden; position: relative; width: 100%; } .gv-activated .gv-progress .gv-bar { background-color: var(--color-signal-info); border-radius: var(--border-radius); display: block; height: 100%; transition: width 400ms ease-in-out; } .gv-activated .gv-progress .gv-bar.gv-alert { background-color: var(--color-signal-alert); } .gv-activated .gv-progress .gv-bar.gv-good { background-color: var(--color-signal-success); } .gv-activated .gv-progress .gv-bar.gv-warning { background-color: var(--color-signal-warning); } .gv-activated .gv-resource-card { background-color: var(--color-surface-bright); border: var(--size-border) solid var(--color-border-alt); border-radius: var(--border-radius); box-shadow: var(--color-shadow-subtle); display: flex; flex-direction: column; gap: var(--size-md); min-width: 0; padding: var(--size-lg); } .gv-activated .gv-resource-card .gv-title { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 360px) { .gv-activated .gv-resource-card .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-resource-card .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-resource-card .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-resource-card .gv-title { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-resource-card .gv-title { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-resource-card .gv-title { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-resource-card .gv-resource { flex-grow: 1; } .gv-activated .gv-shortcut { gap: var(--size-md); } .gv-activated .gv-shortcut .gv-content .gv-status { align-items: center; color: var(--color-body-on-default); display: flex; gap: var(--size-sm); max-width: 100%; } .gv-activated .gv-shortcut .gv-content .gv-status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-shortcut .gv-content .gv-status.gv-active .gv-indicator { --indicator-color-background: var(--color-signal-success); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-high .gv-indicator { /* This colour is intentionally hardcoded */ --indicator-color-background: #d27401; } .gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-low .gv-indicator { --indicator-color-background: var(--color-gray-400); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-new .gv-indicator { --indicator-color-background: var(--color-signal-info); } .gv-activated .gv-shortcut-tile .gv-content { padding-left: var(--size-md); padding-right: calc(var(--size-icon-md) + var(--size-md)); position: relative; } .gv-activated .gv-shortcut-tile .gv-content .gv-description > gv-icon { bottom: 0; position: absolute; right: 0; } .gv-activated .gv-shortcut-tile .gv-content + .gv-button { margin-left: calc(var(--size-icon-md) * -1); } .gv-activated .gv-shortcut, .gv-activated .gv-shortcut-tile { align-items: center; cursor: pointer; display: flex; padding: var(--size-lg); text-decoration: none; background-color: var(--color-surface-bright); border: var(--size-border) solid var(--color-border-alt); border-radius: var(--border-radius); box-shadow: var(--color-shadow-subtle); } .gv-activated .gv-shortcut gv-icon, .gv-activated .gv-shortcut-tile gv-icon, .gv-activated .gv-shortcut gv-tile, .gv-activated .gv-shortcut-tile gv-tile { flex-shrink: 0; } .gv-activated .gv-shortcut .gv-content, .gv-activated .gv-shortcut-tile .gv-content { color: var(--color-body-on-alternative); flex: 1; min-width: 0; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-shortcut .gv-content .gv-extra-info, .gv-activated .gv-shortcut-tile .gv-content .gv-extra-info { color: var(--color-body-on-default); } .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { color: var(--color-body-on-default); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-shortcut .gv-content .gv-title, .gv-activated .gv-shortcut-tile .gv-content .gv-title { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-shortcut .gv-content .gv-price, .gv-activated .gv-shortcut-tile .gv-content .gv-price { color: var(--color-body-on-default); padding-top: var(--size-xs); font-weight: var(--font-weight-semibold); } .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-shortcut .gv-content .gv-price .gv-price-text, .gv-activated .gv-shortcut-tile .gv-content .gv-price .gv-price-text { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated .gv-shortcut .gv-content gv-icon, .gv-activated .gv-shortcut-tile .gv-content gv-icon { color: var(--color-body-on-default); } .gv-activated .gv-shortcut .gv-content + gv-icon, .gv-activated .gv-shortcut-tile .gv-content + gv-icon { align-self: flex-end; } .gv-activated .gv-shortcut .gv-button, .gv-activated .gv-shortcut-tile .gv-button { width: auto; } .gv-activated .gv-sidedrawer { --side-content-width: 300px; display: none; opacity: 0; position: fixed; z-index: 1100; } .gv-activated .gv-sidedrawer:not(.gv-no-overlay) { background-color: var(--color-overlay-dark); inset: 0; } .gv-activated .gv-sidedrawer.gv-no-overlay { inset-block: 0; max-width: var(--side-content-width); width: 100%; } .gv-activated .gv-sidedrawer.gv-no-overlay:not(.gv-pos-right) { left: 0; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open, .gv-activated .gv-sidedrawer.gv-state-open, .gv-activated .gv-sidedrawer[data-state="open"] { display: block; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open:not(.gv-slide-in), .gv-activated .gv-sidedrawer.gv-state-open:not(.gv-slide-in), .gv-activated .gv-sidedrawer[data-state="open"]:not(.gv-slide-in) { opacity: 1; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in:not(.gv-no-overlay), .gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in:not(.gv-no-overlay), .gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in:not(.gv-no-overlay) { -webkit-animation: gv-fade-in 0.3s ease-out forwards; animation: gv-fade-in 0.3s ease-out forwards; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right), .gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right), .gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right) { -webkit-animation: gv-slide-in-from-left 0.3s ease-in-out forwards; animation: gv-slide-in-from-left 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right, .gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right, .gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right { -webkit-animation: gv-slide-in-from-right 0.3s ease-in-out forwards; animation: gv-slide-in-from-right 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in.gv-no-overlay, .gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in.gv-no-overlay, .gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in.gv-no-overlay { opacity: 1; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in.gv-no-overlay:not(.gv-pos-right), .gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in.gv-no-overlay:not(.gv-pos-right), .gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in.gv-no-overlay:not(.gv-pos-right) { -webkit-animation: gv-slide-in-from-left 0.3s ease-in-out forwards; animation: gv-slide-in-from-left 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in.gv-no-overlay.gv-pos-right, .gv-activated .gv-sidedrawer.gv-state-open.gv-slide-in.gv-no-overlay.gv-pos-right, .gv-activated .gv-sidedrawer[data-state="open"].gv-slide-in.gv-no-overlay.gv-pos-right { -webkit-animation: gv-slide-in-from-right 0.3s ease-in-out forwards; animation: gv-slide-in-from-right 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-state-closed, .gv-activated .gv-sidedrawer[data-state="closed"] { display: block; pointer-events: none; } .gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in:not(.gv-no-overlay), .gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in:not(.gv-no-overlay) { -webkit-animation: gv-fade-out 0.3s ease-in forwards; animation: gv-fade-out 0.3s ease-in forwards; } .gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right), .gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in:not(.gv-no-overlay) .gv-side-content:not(.gv-pos-right) { -webkit-animation: gv-slide-out-from-left 0.3s ease-in-out forwards; animation: gv-slide-out-from-left 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right, .gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in:not(.gv-no-overlay) .gv-side-content.gv-pos-right { -webkit-animation: gv-slide-out-from-right 0.3s ease-in-out forwards; animation: gv-slide-out-from-right 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in.gv-no-overlay, .gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in.gv-no-overlay { opacity: 1; } .gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in.gv-no-overlay:not(.gv-pos-right), .gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in.gv-no-overlay:not(.gv-pos-right) { -webkit-animation: gv-slide-out-from-left 0.3s ease-in-out forwards; animation: gv-slide-out-from-left 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer.gv-state-closed.gv-slide-in.gv-no-overlay.gv-pos-right, .gv-activated .gv-sidedrawer[data-state="closed"].gv-slide-in.gv-no-overlay.gv-pos-right { -webkit-animation: gv-slide-out-from-right 0.3s ease-in-out forwards; animation: gv-slide-out-from-right 0.3s ease-in-out forwards; } .gv-activated .gv-sidedrawer .gv-side-content { background: var(--color-surface-bright); bottom: 0; display: flex; flex-direction: column; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 24px 16px; position: absolute; top: 0; width: var(--side-content-width); } .gv-activated .gv-sidedrawer .gv-side-content > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-sidedrawer .gv-side-content:not(.gv-pos-right) { left: 0; } .gv-activated .gv-sidedrawer .gv-side-content .gv-btn-close { padding: 8px; position: absolute; right: 16px; top: 8px; } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account { padding: 16px 8px; } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-account-info { padding-right: 24px; } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-account-info > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-name { font-weight: var(--font-weight-semibold); } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-sub { color: var(--color-body-on-alternative); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-name, .gv-activated .gv-sidedrawer .gv-side-content .gv-side-account .gv-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-sidedrawer .gv-side-content .gv-side-dropdown { display: none; padding: 0 8px 0 32px; } .gv-activated .gv-sidedrawer .gv-side-content [aria-expanded="true"] gv-icon:last-child { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-sidedrawer .gv-side-content [aria-expanded="true"] + .gv-side-dropdown { display: block; } .gv-activated .gv-sidebar { border-right: 1px solid var(--color-border-alt); flex: 0 0 232px; width: 232px; padding: 24px 16px 24px 40px; } .gv-activated .gv-sidebar > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-side-nav ul { list-style: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-side-nav ul > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-side-nav ul li { display: flex; flex-direction: column; gap: 8px; } .gv-activated .gv-side-nav ul li.gv-has-submenu ul { display: none; padding: 4px 4px 4px calc(24px + 8px); } .gv-activated .gv-side-nav ul li.gv-has-submenu > .gv-nav-item::after { content: ""; position: absolute; top: var(--size-sm); right: var(--size-sm); width: var(--size-icon-md); height: var(--size-icon-md); background-color: var(--color-body-on-default); -webkit-mask: url("../images/chevron-down.svg") no-repeat 50% 50% / contain; mask: url("../images/chevron-down.svg") no-repeat 50% 50% / contain; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .gv-activated .gv-side-nav ul li.gv-has-submenu.gv-expanded ul { display: block; } .gv-activated .gv-side-nav ul li.gv-has-submenu.gv-expanded > .gv-nav-item::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-side-label { color: var(--color-body-on-alternative); margin-bottom: 8px; padding: 0 8px 8px; font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-nav-item { align-items: flex-start; border-radius: var(--border-radius); display: flex; gap: 8px; min-height: 40px; padding: 8px 8px; position: relative; text-align: left; text-decoration: none; width: 100%; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; } .gv-activated .gv-nav-item:hover { background-color: var(--color-state-hover); } .gv-activated .gv-nav-item.gv-active, .gv-activated .gv-nav-item[aria-selected="true"] { background-color: var(--color-state-active); } .gv-activated .gv-nav-item gv-icon { flex-shrink: 0; } .gv-activated .gv-nav-item > span { flex-grow: 1; padding-top: 1px; } .gv-activated .gv-skeleton { -webkit-animation: gv-pulse 2s ease-in-out infinite; animation: gv-pulse 2s ease-in-out infinite; background-color: var(--color-surface-muted); border-radius: var(--border-radius); min-width: var(--size-md); } .gv-activated .gv-skeleton::before { content: "\00a0"; display: inline-block; } /* Stepper component */ .gv-activated { --size-stepper-dot: 20px; } .gv-activated .gv-stepper { align-items: flex-start; color: var(--color-body-on-default); display: flex; padding-bottom: var(--size-md); padding-top: var(--size-md); position: relative; width: 100%; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-stepper { gap: 24px; padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-stepper { gap: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-stepper { gap: 48px; padding-left: 48px; padding-right: 48px; } } .gv-activated .gv-stepper .gv-stepper-back a { align-items: center; color: var(--color-body-on-default); display: inline-flex; gap: var(--size-xs); text-decoration: none; } .gv-activated .gv-stepper .gv-stepper-back a:hover { color: var(--color-body-on-alternative); } .gv-activated .gv-stepper .gv-stepper-back a span { /* Apply values to calculate em_based margins that work with any font size */ } .gv-activated .gv-stepper .gv-stepper-back a span::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-stepper .gv-stepper-back a span::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-stepper .gv-stepper-back a span::before, .gv-activated .gv-stepper .gv-stepper-back a span::after { content: ""; display: block; height: 0; width: 0; } .gv-activated .gv-stepper .gv-stepper-collapsed { align-items: center; background-color: var(--color-surface-dim); cursor: pointer; display: flex; flex: 1; gap: var(--size-md); padding: var(--size-md) var(--size-lg); } .gv-activated .gv-stepper .gv-stepper-collapsed .gv-step-label { flex-grow: 1; } .gv-activated .gv-stepper .gv-stepper-progress { background-color: var(--color-state-active); color: var(--color-primary); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); align-items: center; border-radius: 50%; display: flex; height: 32px; justify-content: center; position: relative; width: 32px; } .gv-activated .gv-stepper .gv-stepper-progress gv-indicator { height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; transform-origin: center; width: 100%; } .gv-activated .gv-stepper .gv-stepper-progress .gv-circle-top { transition: stroke-dashoffset 400ms ease-in-out; } .gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="20"] .gv-circle-top { stroke-dasharray: 100.53096491; stroke-dashoffset: 80.42477193; } .gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="40"] .gv-circle-top { stroke-dasharray: 100.53096491; stroke-dashoffset: 60.31857895; } .gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="60"] .gv-circle-top { stroke-dasharray: 100.53096491; stroke-dashoffset: 40.21238597; } .gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="80"] .gv-circle-top { stroke-dasharray: 100.53096491; stroke-dashoffset: 20.10619298; } .gv-activated .gv-stepper .gv-stepper-progress[data-progress-percent="100"] .gv-circle-top { stroke-dasharray: 100.53096491; stroke-dashoffset: 0; } .gv-activated .gv-stepper .gv-stepper-list { align-items: center; color: var(--color-body-on-default); display: flex; flex: 1; flex-wrap: nowrap; padding: 0; } .gv-activated .gv-stepper .gv-step { align-items: center; display: inline-flex; flex: 1; list-style: none; position: relative; } .gv-activated .gv-stepper .gv-step.gv-step-last { max-width: 20px; } .gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-content { align-items: flex-end; } .gv-activated .gv-stepper .gv-step .gv-step-line { background-color: var(--color-border); height: 1px; left: 0; position: absolute; top: 10px; width: 100%; } .gv-activated .gv-stepper .gv-step .gv-step-content { cursor: default; display: inline-flex; gap: var(--size-sm); flex-direction: column; max-width: 100%; position: relative; z-index: 1; } .gv-activated .gv-stepper .gv-step .gv-step-type { align-items: center; background-color: var(--color-surface-muted); border-radius: 50%; display: flex; flex-shrink: 0; height: var(--size-stepper-dot); justify-content: center; width: var(--size-stepper-dot); font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-stepper .gv-step .gv-step-type gv-icon { color: var(--color-link); display: none; height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-stepper .gv-step .gv-step-label { white-space: nowrap; /* Apply values to calculate em_based margins that work with any font size */ } .gv-activated .gv-stepper .gv-step .gv-step-label::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-stepper .gv-step .gv-step-label::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-stepper .gv-step .gv-step-label::before, .gv-activated .gv-stepper .gv-step .gv-step-label::after { content: ""; display: block; height: 0; width: 0; } .gv-activated .gv-stepper .gv-step.gv-step-current .gv-step-type { background-color: var(--color-primary); color: var(--color-button-fg-on); } .gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-line { background-color: var(--color-state-focus); } .gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type { background-color: var(--color-state-active); } .gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type gv-icon { display: block; } .gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type .gv-step-nr { display: none; } .gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-type, .gv-activated .gv-stepper .gv-step.gv-step-done .gv-step-label { cursor: pointer; } @media (max-width: 599px ) { .gv-activated .gv-stepper { --size-stepper-dot: 32px; background-color: var(--color-overlay-dark); padding: 0; } .gv-activated .gv-stepper .gv-stepper-back { display: none; } .gv-activated .gv-stepper .gv-stepper-button-close { cursor: pointer; display: block; } .gv-activated .gv-stepper .gv-stepper-list { align-items: flex-start; background-color: var(--color-surface-dim); display: none; flex-direction: column; padding: var(--size-md) var(--size-lg); } .gv-activated .gv-stepper .gv-step { width: 100%; } .gv-activated .gv-stepper .gv-step:not(.gv-step-last) { padding-bottom: var(--size-lg); } .gv-activated .gv-stepper .gv-step.gv-step-last { align-items: center; max-width: none; } .gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-content { align-items: center; } .gv-activated .gv-stepper .gv-step .gv-step-line { bottom: 0; height: var(--size-lg); left: calc(var(--size-stepper-dot) / 2); width: 1px; top: auto; } .gv-activated .gv-stepper .gv-step .gv-step-content { align-items: center; flex-direction: row; flex-grow: 1; } .gv-activated .gv-stepper .gv-step .gv-step-type { height: var(--size-stepper-dot); width: var(--size-stepper-dot); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-stepper .gv-step .gv-step-label { flex-grow: 1; } .gv-activated .gv-stepper.gv-stepper-open { bottom: 0; left: 0; position: fixed; right: 0; top: var(--navigation-bar-height); z-index: 900; } .gv-activated .gv-stepper.gv-stepper-open .gv-stepper-collapsed { display: none; } .gv-activated .gv-stepper.gv-stepper-open .gv-stepper-list { display: flex; } } @media (min-width: 600px ) { .gv-activated .gv-stepper .gv-stepper-collapsed, .gv-activated .gv-stepper .gv-stepper-button-close { display: none; } } @media (min-width: 600px ) and (max-width: 1279px ) { .gv-activated .gv-stepper { align-items: center; } .gv-activated .gv-stepper .gv-step { align-items: center; flex-direction: row; } .gv-activated .gv-stepper .gv-step .gv-step-line { flex-grow: 1; position: relative; top: auto; width: auto; } .gv-activated .gv-stepper .gv-step .gv-step-content { align-items: center; flex-direction: row; } .gv-activated .gv-stepper .gv-step.gv-step-last { flex: 0 1 auto; max-width: none; } .gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-content { align-items: center; flex-direction: row-reverse; } .gv-activated .gv-stepper .gv-step.gv-step-last .gv-step-label { padding-left: var(--size-sm); } .gv-activated .gv-stepper .gv-step:not(.gv-step-last) .gv-step-label { padding-right: var(--size-sm); } .gv-activated .gv-stepper .gv-step:not(.gv-step-current) .gv-step-label { display: none; } } .gv-activated .gv-stepper-vertical { align-items: flex-start; color: var(--color-body-on-default); counter-reset: list-number; display: flex; flex-direction: column; position: relative; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-stepper-vertical .gv-step { align-items: flex-start; display: inline-flex; gap: var(--size-sm); list-style: none; position: relative; width: 100%; } .gv-activated .gv-stepper-vertical .gv-step:not(:last-child) { padding-bottom: var(--size-lg); } .gv-activated .gv-stepper-vertical .gv-step:not(:last-child)::after { background-color: var(--color-border); bottom: 0; content: ""; height: auto; left: calc(var(--size-stepper-dot) / 2); position: absolute; top: 20px; width: 1px; } .gv-activated .gv-stepper-vertical .gv-step::before { align-items: center; background-color: var(--color-primary); border-radius: 50%; color: var(--color-button-fg-on); content: counter(list-number); counter-increment: list-number; display: flex; flex-shrink: 0; height: var(--size-stepper-dot); justify-content: center; padding-top: 1px; width: var(--size-stepper-dot); font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-sticky-bar .gv-stepper { padding: 0; align-items: center; } .gv-activated .gv-sticky-bar .gv-stepper .gv-step { align-items: center; flex-direction: row; } .gv-activated .gv-sticky-bar .gv-stepper .gv-step .gv-step-line { flex-grow: 1; position: relative; top: auto; width: auto; } .gv-activated .gv-sticky-bar .gv-stepper .gv-step .gv-step-content { align-items: center; flex-direction: row; } .gv-activated .gv-sticky-bar .gv-stepper .gv-step.gv-step-last { flex: 0 1 auto; max-width: none; } .gv-activated .gv-sticky-bar .gv-stepper .gv-step.gv-step-last .gv-step-content { align-items: center; flex-direction: row-reverse; } .gv-activated .gv-sticky-bar .gv-stepper .gv-step.gv-step-last .gv-step-label { padding-left: var(--size-sm); } .gv-activated .gv-sticky-bar .gv-stepper .gv-step:not(.gv-step-last) .gv-step-label { padding-right: var(--size-sm); } .gv-activated .gv-sticky-bar .gv-stepper .gv-step:not(.gv-step-current) .gv-step-label { display: none; } .gv-activated .gv-sticky-bar { display: none; } @media screen and (max-width: 360px) { .gv-activated .gv-sticky-bar .gv-sticky-content { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-sticky-bar .gv-sticky-content { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-sticky-bar .gv-sticky-content { padding-left: 48px; padding-right: 48px; } } @media (min-width: 600px ) { .gv-activated .gv-sticky-bar { background-color: var(--color-surface-dim); box-shadow: var(--color-shadow-elevated); left: 0; position: fixed; top: var(--navigation-bar-height); width: 100%; z-index: 900; } .gv-activated .gv-sticky-bar.gv-sticky-visible { display: block; } .gv-activated .gv-sticky-bar .gv-sticky-content { padding-bottom: var(--size-md); padding-top: var(--size-md); width: 100%; } } .gv-activated .gv-system-wide { align-items: center; background-color: var(--color-surface-inverted); /* Form */ --form-element-height: 30px; } .gv-activated .gv-system-wide .gv-notice-content { color: var(--color-body-on-inverted); } .gv-activated .gv-system-wide .gv-notice-icon { color: var(--color-body-on-inverted); } .gv-activated .gv-system-wide .gv-notice-close { color: var(--color-body-on-inverted); } .gv-activated .gv-system-wide .gv-button { --button-color-text: var(--color-body-on-inverted); border-color: var(--color-body-on-inverted); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-tab-list { --tab-color-text: var(--color-body-on-alternative); display: flex; max-width: 100%; border-bottom: var(--size-border) solid var(--color-border); } .gv-activated .gv-tab-list .gv-tab { align-items: center; background: none; border: none; color: var(--tab-color-text); cursor: pointer; display: flex; flex: 0 1 auto; flex-wrap: nowrap; gap: 8px; height: 54px; margin-bottom: calc(var(--size-border) * -1); min-width: 0; padding: 0 24px; text-decoration: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-tab-list .gv-tab.gv-tab-active { --tab-color-text: var(--color-body-on-default); border-bottom: var(--size-border) solid var(--color-primary); font-weight: var(--font-weight-semibold); } .gv-activated .gv-tab-list .gv-tab gv-icon { flex-shrink: 0; height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-tab-list .gv-tab .gv-tab-content { display: block; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-tab-list .gv-tab:hover .gv-tab-content { color: var(--color-body-on-default); } .gv-activated .gv-tab-list .gv-tab .gv-tab-counter { align-items: center; background-color: var(--color-surface-muted); border-radius: var(--border-radius); color: var(--color-body-on-alternative); display: flex; flex-shrink: 0; height: var(--size-lg); justify-content: center; min-width: var(--size-lg); padding: 0 var(--size-xs); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } @media (max-width: 599px ) { .gv-activated .gv-tab-select + .gv-tab-list { display: none; } } @media (min-width: 600px ) { .gv-activated .gv-tab-select { display: none; } } .gv-activated .gv-tab-panel { display: none; } .gv-activated .gv-tab-panel.gv-panel-active { display: block; } .gv-activated .gv-rounded-tabs .gv-tab-bar { align-items: center; display: flex; gap: var(--size-sm); justify-content: space-between; } .gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list { border: none; flex: 0 1 auto; gap: var(--size-xs); min-width: 0; } .gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list .gv-tab { border: var(--size-border) solid var(--color-border); border-bottom: none; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list .gv-tab.gv-tab-active { background-color: var(--color-surface-bright); border-bottom: none; } .gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tabs-addon { flex-shrink: 0; padding: var(--size-sm); } .gv-activated .gv-rounded-tabs .gv-tab-panel { background: var(--color-surface-bright); border: var(--size-border) solid var(--color-border); border-radius: var(--border-radius); padding: var(--size-md); } @media (max-width: 599px ) { .gv-activated .gv-rounded-tabs .gv-tab-bar { margin-bottom: var(--size-sm); } .gv-activated .gv-rounded-tabs .gv-tab-bar .gv-tab-list { display: none; } } @media (min-width: 600px ) { .gv-activated .gv-rounded-tabs .gv-tab-bar .gv-input-select { display: none; } .gv-activated .gv-rounded-tabs .gv-tab-panel { border-top-left-radius: 0; } } .gv-activated gv-tile { display: inline-block; vertical-align: text-bottom; font-size: 0; height: var(--size-tile-sm); width: var(--size-tile-sm); } .gv-activated gv-tile .gv-tile-100 { fill: var(--color-tile-100); } .gv-activated gv-tile .gv-tile-200 { fill: var(--color-tile-200); } .gv-activated gv-tile[size="xs"] { height: var(--size-tile-xs); width: var(--size-tile-xs); } .gv-activated gv-tile[size="md"] { height: var(--size-tile-md); width: var(--size-tile-md); } .gv-activated gv-tile[size="lg"] { height: var(--size-tile-lg); width: var(--size-tile-lg); } .gv-activated gv-tile[size="xl"] { height: var(--size-tile-xl); width: var(--size-tile-xl); } .gv-activated gv-tile[variant="duotone"]:not([size="xs"]), .gv-activated gv-tile[src*="/duotone/"]:not([size="xs"]) { background: var(--color-tile-bg); border-radius: var(--color-tile-radius); box-shadow: var(--color-tile-box-shadow); } .gv-activated .gv-toast { --toast-color-background: inherit; --toast-color-text: var(--color-body-on-default); align-items: center; background: var(--toast-color-background); border-radius: var(--notice-radius); color: var(--toast-color-text); display: flex; flex-wrap: nowrap; gap: var(--size-sm); min-width: 240px; max-width: 360px; overflow: hidden; padding: var(--size-sm) var(--size-md); position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .gv-activated .gv-toast gv-icon { flex-shrink: 0; } .gv-activated .gv-toast .gv-toast-content { flex-grow: 1; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-toast .gv-toast-content > *:not(:last-child) { margin-bottom: var(--size-xs); } .gv-activated .gv-toast .gv-toast-title { font-weight: var(--font-weight-semibold); } .gv-activated .gv-toast .gv-button { --button-color-border: var(--toast-color-text); --button-color-text: var(--toast-color-text); margin-left: var(--size-md); /* Form */ --form-element-height: 30px; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-toast .gv-toast-close { cursor: pointer; margin-left: var(--size-sm); padding: var(--size-sm); } .gv-activated .gv-toast.gv-toast-alert { --toast-color-background: var(--color-signal-alert); --toast-color-text: var(--color-on-fixed-white); } .gv-activated .gv-toast.gv-toast-warning { --toast-color-background: var(--color-signal-warning-light); } .gv-activated .gv-toast.gv-toast-success { --toast-color-background: var(--color-signal-success); --toast-color-text: var(--color-on-fixed-white); } .gv-activated .gv-toast.gv-toast-info { --toast-color-background: var(--color-signal-info-light); } @media (max-width: 599px ) { .gv-activated .gv-toast { max-width: 100%; width: 312px; } } .gv-activated .gv-toast-container { box-sizing: content-box; display: flex; flex-direction: column-reverse; gap: var(--size-sm); pointer-events: none; position: fixed; right: 0; top: 0; z-index: 999999; } @media screen and (max-width: 360px) { .gv-activated .gv-toast-container { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-toast-container { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-toast-container { padding: 48px; } } .gv-activated .gv-toast-container .gv-toast { opacity: 0; pointer-events: all; -webkit-transform: scale(0.7) translateY(-30px); transform: scale(0.7) translateY(-30px); transition: all 0.25s; } .gv-activated .gv-toast-container .gv-toast + .gv-toast { margin-bottom: -50px; } .gv-activated .gv-toast-container .gv-toast.gv-visible { margin-bottom: var(--size-xs); opacity: 1; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .gv-activated .gv-toast-container .gv-toast.gv-remove { opacity: 0; -webkit-transform: scale(1) translateY(0) translateX(25px); transform: scale(1) translateY(0) translateX(25px); } @media (max-width: 599px ) { .gv-activated .gv-toast-container { bottom: 0; flex-direction: column; left: 0; right: 0; top: auto; } .gv-activated .gv-toast-container .gv-toast { margin-left: auto; margin-right: auto; } .gv-activated .gv-toast-container .gv-toast.gv-remove { -webkit-transform: scale(1) translateY(25px) translateX(0); transform: scale(1) translateY(25px) translateX(0); } } .gv-activated .gv-to-do { border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); } .gv-activated .gv-to-do .gv-item { list-style: none; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-to-do .gv-item:not(:last-child) { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-to-do .gv-item .gv-trigger { display: flex; gap: var(--size-md); padding: var(--size-md) var(--size-lg) 0; text-align: left; text-decoration: none; width: 100%; } .gv-activated .gv-to-do .gv-item .gv-trigger gv-icon { margin-top: 1px; } .gv-activated .gv-to-do .gv-item .gv-trigger-content { display: flex; flex: 1; flex-direction: row-reverse; gap: var(--size-sm); justify-content: flex-end; } .gv-activated .gv-to-do .gv-item .gv-text { display: flex; flex-direction: column; flex-grow: 1; gap: var(--size-sm); justify-content: center; min-height: 26px; } .gv-activated .gv-to-do .gv-item .gv-title { font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-to-do .gv-item .gv-badge, .gv-activated .gv-to-do .gv-item gv-icon { flex-shrink: 0; } .gv-activated .gv-to-do.gv-task-list .gv-trigger { align-items: center; padding-bottom: var(--size-md); } .gv-activated .gv-to-do.gv-task-list .gv-trigger-content { align-items: center; } .gv-activated .gv-to-do.gv-task-list .gv-description { color: var(--color-body-on-alternative); } .gv-activated .gv-to-do.gv-task-accordion .gv-item { padding-bottom: var(--size-md); } .gv-activated .gv-to-do.gv-task-accordion .gv-trigger.gv-expanded gv-icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-to-do.gv-task-accordion .gv-trigger-content { align-items: flex-start; } .gv-activated .gv-to-do.gv-task-accordion .gv-body-content { padding: var(--size-md) var(--size-xl) 0 var(--size-lg); } .gv-activated .gv-to-do.gv-task-accordion .gv-body-content > *:not(:last-child) { margin-bottom: 16px; } @media (max-width: 599px ) { .gv-activated .gv-to-do .gv-trigger-content { flex-wrap: wrap; } .gv-activated .gv-to-do .gv-trigger-content .gv-text { width: 100%; } } .gv-activated .gv-tooltip { --tooltip-max-width: 200px; background: var(--color-surface-inverted); border-radius: var(--border-radius); color: var(--color-body-on-inverted); max-width: var(--tooltip-max-width); padding: var(--size-md); position: fixed; text-align: left; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; z-index: 200; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-tooltip.gv-mode-condensed { padding: var(--size-sm); } .gv-activated .gv-tooltip::before { background: var(--color-surface-inverted); content: ""; -webkit-mask: url("../images/tooltip-arrow.svg") no-repeat 50% 50%; mask: url("../images/tooltip-arrow.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; position: absolute; width: 17px; height: 6px; -webkit-transform-origin: center; transform-origin: center; z-index: -1; } .gv-activated .gv-tooltip[class*="gv-arrow-top"] { margin-top: 6px; } .gv-activated .gv-tooltip[class*="gv-arrow-top"]::before { top: -6px; } .gv-activated .gv-tooltip[class*="gv-arrow-bottom"] { margin-bottom: 6px; } .gv-activated .gv-tooltip[class*="gv-arrow-bottom"]::before { bottom: -6px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-tooltip.gv-arrow-bottom-left::before, .gv-activated .gv-tooltip.gv-arrow-top-left::before { left: 8px; } .gv-activated .gv-tooltip.gv-arrow-bottom-right::before, .gv-activated .gv-tooltip.gv-arrow-top-right::before { right: 8px; } .gv-activated .gv-tooltip.gv-arrow-bottom-center::before { right: 50%; -webkit-transform: rotate(180deg) translateX(-50%); transform: rotate(180deg) translateX(-50%); } .gv-activated .gv-tooltip.gv-arrow-top-center::before { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .gv-activated .gv-tooltip-container { display: inline-block; position: relative; } .gv-activated .gv-tooltip-container .gv-tooltip { display: none; min-width: -webkit-max-content; min-width: max-content; position: absolute; } .gv-activated .gv-tooltip-container .gv-tooltip > * { max-width: var(--tooltip-max-width); } .gv-activated .gv-tooltip-container:hover .gv-tooltip, .gv-activated .gv-tooltip-container .gv-tooltip-button:focus + .gv-tooltip { display: block; } .gv-activated .gv-tooltip-container[class*="gv-tooltip-top"] .gv-tooltip { bottom: 100%; } .gv-activated .gv-tooltip-container[class*="gv-tooltip-bottom"] .gv-tooltip { top: 100%; } .gv-activated .gv-tooltip-container.gv-tooltip-top-left .gv-tooltip, .gv-activated .gv-tooltip-container.gv-tooltip-bottom-left .gv-tooltip { left: 50%; -webkit-transform: translateX(-16px); transform: translateX(-16px); } .gv-activated .gv-tooltip-container.gv-tooltip-top-center .gv-tooltip, .gv-activated .gv-tooltip-container.gv-tooltip-bottom-center .gv-tooltip { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .gv-activated .gv-tooltip-container.gv-tooltip-top-right .gv-tooltip, .gv-activated .gv-tooltip-container.gv-tooltip-bottom-right .gv-tooltip { right: 50%; -webkit-transform: translateX(16px); transform: translateX(16px); } .gv-activated .gv-tour, .gv-activated .gv-tour-with-media { display: flex; position: relative; z-index: 200; } .gv-activated .gv-tour { --color-state-focus-visible: var(--color-body-on-inverted); background: var(--color-surface-inverted); border-radius: var(--border-radius); color: var(--color-body-on-inverted); flex-direction: column; gap: var(--size-md); padding: var(--size-lg); width: 300px; font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-tour::before { background: var(--color-surface-inverted); content: ""; -webkit-mask: url("../images/tour-arrow.svg") no-repeat 50% 50%; mask: url("../images/tour-arrow.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; position: absolute; width: 27px; height: 11px; -webkit-transform-origin: center; transform-origin: center; } .gv-activated .gv-tour[class*="gv-arrow-top"], .gv-activated .gv-tour[class*="gv-arrow-top"] + .gv-tour-media { margin-top: 11px; } .gv-activated .gv-tour[class*="gv-arrow-top"]::before { top: -11px; } .gv-activated .gv-tour[class*="gv-arrow-bottom"], .gv-activated .gv-tour[class*="gv-arrow-bottom"] + .gv-tour-media { margin-bottom: 11px; } .gv-activated .gv-tour[class*="gv-arrow-bottom"]::before { bottom: -11px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gv-activated .gv-tour.gv-arrow-bottom-left::before, .gv-activated .gv-tour.gv-arrow-top-left::before { left: 24px; } .gv-activated .gv-tour.gv-arrow-bottom-right::before, .gv-activated .gv-tour.gv-arrow-top-right::before { right: 24px; } .gv-activated .gv-tour.gv-arrow-left { margin-left: 11px; } .gv-activated .gv-tour.gv-arrow-left::before { left: -19px; top: 24px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .gv-activated .gv-tour.gv-arrow-right { margin-right: 11px; } .gv-activated .gv-tour.gv-arrow-right::before { right: -19px; top: 24px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .gv-activated .gv-tour .gv-tour-steps { display: flex; gap: var(--size-xs); font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-tour .gv-tour-body { padding-right: var(--size-icon-md); font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-tour .gv-tour-body > *:not(:last-child) { margin-bottom: var(--size-xs); } .gv-activated .gv-tour .gv-tour-body .gv-tour-title { font-weight: var(--font-weight-semibold); font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-tour .gv-button-group { /* Form */ --form-element-height: 30px; } .gv-activated .gv-tour .gv-button-group .gv-button { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-tour .gv-button-group .gv-button-cancel { color: var(--color-body-on-inverted); } .gv-activated .gv-tour .gv-tour-close { cursor: pointer; padding: var(--size-sm); position: absolute; right: 12px; top: 12px; } .gv-activated .gv-tour-with-media { align-items: stretch; flex-flow: nowrap row; } .gv-activated .gv-tour-with-media .gv-tour-media { overflow: hidden; position: relative; width: 300px; } .gv-activated .gv-tour-with-media .gv-tour-media img { display: block; } .gv-activated .gv-tour-with-media .gv-tour-media iframe { border: none; max-width: 100%; } @media (max-width: 767px ) { .gv-activated .gv-tour-with-media .gv-tour-media { display: none; } } @media (min-width: 768px ) { .gv-activated .gv-tour-with-media .gv-arrow-left.gv-tour, .gv-activated .gv-tour-with-media .gv-arrow-top-left.gv-tour, .gv-activated .gv-tour-with-media .gv-arrow-bottom-left.gv-tour { border-top-right-radius: 0; border-bottom-right-radius: 0; } .gv-activated .gv-tour-with-media .gv-arrow-left + .gv-tour-media, .gv-activated .gv-tour-with-media .gv-arrow-top-left + .gv-tour-media, .gv-activated .gv-tour-with-media .gv-arrow-bottom-left + .gv-tour-media { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tour-with-media .gv-arrow-right.gv-tour, .gv-activated .gv-tour-with-media .gv-arrow-top-right.gv-tour, .gv-activated .gv-tour-with-media .gv-arrow-bottom-right.gv-tour { border-top-left-radius: 0; border-bottom-left-radius: 0; } .gv-activated .gv-tour-with-media .gv-arrow-right + .gv-tour-media, .gv-activated .gv-tour-with-media .gv-arrow-top-right + .gv-tour-media, .gv-activated .gv-tour-with-media .gv-arrow-bottom-right + .gv-tour-media { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); order: -1; } } .gv-activated { color: var(--color-body-on-default); font-family: PlusJakartaSans, Arial, Verdana, sans-serif; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; font-weight: var(--font-weight-regular); -webkit-font-smoothing: antialiased; /* Headings */ /* Body text */ /* Captions */ /* Links */ /* Font-weight */ /* Text with icon */ /* Text width */ } .gv-activated .gv-font-mono { font-family: "JetBrains Mono", monospace; } .gv-activated h1, .gv-activated h2, .gv-activated h3, .gv-activated h4, .gv-activated h5, .gv-activated h6 { margin: 0; } .gv-activated .gv-heading-xxxl { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-xxxl); } @media screen and (max-width: 360px) { .gv-activated .gv-heading-xxxl { letter-spacing: calc(var(--letterspacing-heading-xxxl-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-heading-xxxl { letter-spacing: calc(calc(var(--letterspacing-heading-xxxl-min) * 1px) + (var(--letterspacing-heading-xxxl-max) - var(--letterspacing-heading-xxxl-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-heading-xxxl { letter-spacing: calc(var(--letterspacing-heading-xxxl-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-heading-xxxl { font-size: calc(var(--font-size-heading-xxxl-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-heading-xxxl { font-size: calc(calc(var(--font-size-heading-xxxl-min) * 1rem) + (var(--font-size-heading-xxxl-max) - var(--font-size-heading-xxxl-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-heading-xxxl { font-size: calc(var(--font-size-heading-xxxl-max) * 1rem); } } .gv-activated h1, .gv-activated .gv-heading-xxl { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-xxl); } @media screen and (max-width: 360px) { .gv-activated h1, .gv-activated .gv-heading-xxl { letter-spacing: calc(var(--letterspacing-heading-xxl-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h1, .gv-activated .gv-heading-xxl { letter-spacing: calc(calc(var(--letterspacing-heading-xxl-min) * 1px) + (var(--letterspacing-heading-xxl-max) - var(--letterspacing-heading-xxl-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated h1, .gv-activated .gv-heading-xxl { letter-spacing: calc(var(--letterspacing-heading-xxl-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated h1, .gv-activated .gv-heading-xxl { font-size: calc(var(--font-size-heading-xxl-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h1, .gv-activated .gv-heading-xxl { font-size: calc(calc(var(--font-size-heading-xxl-min) * 1rem) + (var(--font-size-heading-xxl-max) - var(--font-size-heading-xxl-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated h1, .gv-activated .gv-heading-xxl { font-size: calc(var(--font-size-heading-xxl-max) * 1rem); } } .gv-activated h2, .gv-activated .gv-heading-xl { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-xl); } @media screen and (max-width: 360px) { .gv-activated h2, .gv-activated .gv-heading-xl { letter-spacing: calc(var(--letterspacing-heading-xl-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h2, .gv-activated .gv-heading-xl { letter-spacing: calc(calc(var(--letterspacing-heading-xl-min) * 1px) + (var(--letterspacing-heading-xl-max) - var(--letterspacing-heading-xl-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated h2, .gv-activated .gv-heading-xl { letter-spacing: calc(var(--letterspacing-heading-xl-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated h2, .gv-activated .gv-heading-xl { font-size: calc(var(--font-size-heading-xl-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h2, .gv-activated .gv-heading-xl { font-size: calc(calc(var(--font-size-heading-xl-min) * 1rem) + (var(--font-size-heading-xl-max) - var(--font-size-heading-xl-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated h2, .gv-activated .gv-heading-xl { font-size: calc(var(--font-size-heading-xl-max) * 1rem); } } .gv-activated h3, .gv-activated .gv-heading-lg { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-lg); } @media screen and (max-width: 360px) { .gv-activated h3, .gv-activated .gv-heading-lg { letter-spacing: calc(var(--letterspacing-heading-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h3, .gv-activated .gv-heading-lg { letter-spacing: calc(calc(var(--letterspacing-heading-lg-min) * 1px) + (var(--letterspacing-heading-lg-max) - var(--letterspacing-heading-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated h3, .gv-activated .gv-heading-lg { letter-spacing: calc(var(--letterspacing-heading-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated h3, .gv-activated .gv-heading-lg { font-size: calc(var(--font-size-heading-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h3, .gv-activated .gv-heading-lg { font-size: calc(calc(var(--font-size-heading-lg-min) * 1rem) + (var(--font-size-heading-lg-max) - var(--font-size-heading-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated h3, .gv-activated .gv-heading-lg { font-size: calc(var(--font-size-heading-lg-max) * 1rem); } } .gv-activated h4, .gv-activated .gv-heading-md { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-md); } @media screen and (max-width: 360px) { .gv-activated h4, .gv-activated .gv-heading-md { letter-spacing: calc(var(--letterspacing-heading-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h4, .gv-activated .gv-heading-md { letter-spacing: calc(calc(var(--letterspacing-heading-md-min) * 1px) + (var(--letterspacing-heading-md-max) - var(--letterspacing-heading-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated h4, .gv-activated .gv-heading-md { letter-spacing: calc(var(--letterspacing-heading-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated h4, .gv-activated .gv-heading-md { font-size: calc(var(--font-size-heading-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h4, .gv-activated .gv-heading-md { font-size: calc(calc(var(--font-size-heading-md-min) * 1rem) + (var(--font-size-heading-md-max) - var(--font-size-heading-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated h4, .gv-activated .gv-heading-md { font-size: calc(var(--font-size-heading-md-max) * 1rem); } } .gv-activated h5, .gv-activated .gv-heading-sm { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-sm); } @media screen and (max-width: 360px) { .gv-activated h5, .gv-activated .gv-heading-sm { letter-spacing: calc(var(--letterspacing-heading-sm-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h5, .gv-activated .gv-heading-sm { letter-spacing: calc(calc(var(--letterspacing-heading-sm-min) * 1px) + (var(--letterspacing-heading-sm-max) - var(--letterspacing-heading-sm-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated h5, .gv-activated .gv-heading-sm { letter-spacing: calc(var(--letterspacing-heading-sm-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated h5, .gv-activated .gv-heading-sm { font-size: calc(var(--font-size-heading-sm-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h5, .gv-activated .gv-heading-sm { font-size: calc(calc(var(--font-size-heading-sm-min) * 1rem) + (var(--font-size-heading-sm-max) - var(--font-size-heading-sm-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated h5, .gv-activated .gv-heading-sm { font-size: calc(var(--font-size-heading-sm-max) * 1rem); } } .gv-activated h6, .gv-activated .gv-heading-xs { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading-xs); } @media screen and (max-width: 360px) { .gv-activated h6, .gv-activated .gv-heading-xs { letter-spacing: calc(var(--letterspacing-heading-xs-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h6, .gv-activated .gv-heading-xs { letter-spacing: calc(calc(var(--letterspacing-heading-xs-min) * 1px) + (var(--letterspacing-heading-xs-max) - var(--letterspacing-heading-xs-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated h6, .gv-activated .gv-heading-xs { letter-spacing: calc(var(--letterspacing-heading-xs-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated h6, .gv-activated .gv-heading-xs { font-size: calc(var(--font-size-heading-xs-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h6, .gv-activated .gv-heading-xs { font-size: calc(calc(var(--font-size-heading-xs-min) * 1rem) + (var(--font-size-heading-xs-max) - var(--font-size-heading-xs-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated h6, .gv-activated .gv-heading-xs { font-size: calc(var(--font-size-heading-xs-max) * 1rem); } } .gv-activated p { margin: 0; } .gv-activated .gv-text-xl { letter-spacing: 0; line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-text-xl { font-size: calc(var(--font-size-text-xl-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-text-xl { font-size: calc(calc(var(--font-size-text-xl-min) * 1rem) + (var(--font-size-text-xl-max) - var(--font-size-text-xl-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-text-xl { font-size: calc(var(--font-size-text-xl-max) * 1rem); } } .gv-activated .gv-text-lg { line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-text-lg { letter-spacing: calc(var(--letterspacing-text-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-text-lg { letter-spacing: calc(calc(var(--letterspacing-text-lg-min) * 1px) + (var(--letterspacing-text-lg-max) - var(--letterspacing-text-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-text-lg { letter-spacing: calc(var(--letterspacing-text-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-text-lg { font-size: calc(var(--font-size-text-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-text-lg { font-size: calc(calc(var(--font-size-text-lg-min) * 1rem) + (var(--font-size-text-lg-max) - var(--font-size-text-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-text-lg { font-size: calc(var(--font-size-text-lg-max) * 1rem); } } .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { letter-spacing: calc(var(--letterspacing-text-md-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { letter-spacing: calc(calc(var(--letterspacing-text-md-min) * 1px) + (var(--letterspacing-text-md-max) - var(--letterspacing-text-md-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { letter-spacing: calc(var(--letterspacing-text-md-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { font-size: calc(var(--font-size-text-md-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { font-size: calc(calc(var(--font-size-text-md-min) * 1rem) + (var(--font-size-text-md-max) - var(--font-size-text-md-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated, .gv-activated .gv-text-md, .gv-activated .gv-text-non-fluid { font-size: calc(var(--font-size-text-md-max) * 1rem); } } .gv-activated .gv-text-sm { font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-caption-lg { font-size: calc(var(--font-size-caption-lg) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-caption-sm { font-size: calc(var(--font-size-caption-sm) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated a { color: var(--color-link); font-weight: var(--font-weight-regular); text-decoration: underline; } .gv-activated a:hover { color: var(--color-link); } .gv-activated b, .gv-activated strong, .gv-activated .gv-text-bold { font-weight: var(--font-weight-semibold); } .gv-activated .gv-text-icon { display: inline-flex; gap: 4px; } .gv-activated .gv-text-icon gv-icon { flex-shrink: 0; } .gv-activated .gv-text-max { max-width: var(--text-max-width); } /* Accessibility */ .gv-activated a:focus-visible, .gv-activated button:focus-visible, .gv-activated .gv-button:focus-visible, .gv-activated input[type="checkbox"]:focus-visible, .gv-activated .gv-checkbox:focus-visible, .gv-activated input[type="radio"]:focus-visible, .gv-activated .gv-radio:focus-visible, .gv-activated .gv-autocomplete-panel .gv-option:focus-visible { outline: 2px solid var(--color-state-focus-visible); outline-offset: 2px; } .gv-activated .gv-toggle input[type="checkbox"]:focus-visible + .gv-toggle-slider { outline: 2px solid var(--color-state-focus-visible); outline-offset: 2px; } .gv-activated .gv-autocomplete-panel .gv-option:focus-visible, .gv-activated .gv-chip:focus-visible, .gv-activated .gv-filter-bar .gv-bar button:focus-visible, .gv-activated .gv-input button:focus-visible, .gv-activated .gv-main-header .gv-nav-links a:focus-visible, .gv-activated .gv-tab-list .gv-tab:focus-visible { outline-offset: -2px; } .gv-activated .gv-button-toggle:focus-visible, .gv-activated .gv-card:focus-visible, .gv-activated .gv-shortcut:focus-visible, .gv-activated .gv-accordion .gv-acc-trigger:focus-visible, .gv-activated .gv-to-do .gv-trigger:focus-visible { outline-offset: 0; } .gv-activated .gv-accordion .gv-acc-trigger:focus-visible, .gv-activated .gv-to-do .gv-trigger:focus-visible { border-radius: var(--border-radius); } /* Storefront */ .gv-activated .gv-storefront-section { --bg-pattern-color: rgba(20, 20, 20, 0.15); --bg-pattern-size-max: 3; --bg-pattern-size-min: 1.5; --bg-pattern-spacing-max: 48; --bg-pattern-spacing-min: 24; --font-family-heading: var(--font-heading-storefront); --font-weight-heading: var(--font-weight-heading-storefront); /* Font size rem values */ --sf-font-size-h1-max: 7.5; /* 120px */ --sf-font-size-h1-min: 3.25; /* 52px */ --sf-font-size-h2-max: 4.5; /* 72px */ --sf-font-size-h2-min: 2.875; /* 46px */ --sf-font-size-h3-max: 3; /* 48px */ --sf-font-size-h3-min: 2.25; /* 36px */ --sf-font-size-h4-max: 2.25; /* 36px */ --sf-font-size-h4-min: 1.75; /* 28px */ --sf-font-size-h5-max: 1.625; /* 26px */ --sf-font-size-h5-min: 1.375; /* 22px */ --sf-font-size-body-lg-max: 1.3125; /* 21px */ --sf-font-size-body-lg-min: 1.125; /* 18px */ --sf-font-size-body-md: 1; /* 16px */ --sf-font-size-body-sm: 0.875; /* 14px */ --sf-font-size-body-xs: 0.75; /* 12px */ /* Line-heights */ --line-height-body: 1.5; --line-height-body-lg: 1.35; --line-height-heading: 1; /* Letterspacing px values */ --sf-letterspacing-h1-max: -3; --sf-letterspacing-h1-min: -0.4; --sf-letterspacing-h2-max: -3; --sf-letterspacing-h2-min: -0.4; --sf-letterspacing-h3-max: -1; --sf-letterspacing-h3-min: -0.3; --sf-letterspacing-h4-max: -1; --sf-letterspacing-h4-min: -0.2; --sf-letterspacing-h5-max: -1; --sf-letterspacing-h5-min: -0.2; --sf-letterspacing-body-lg-max: 0; --sf-letterspacing-body-lg-min: 0.4; --sf-letterspacing-body-md: 0.08; --sf-letterspacing-body-sm: 0.04; --sf-letterspacing-body-xs: 0.05; /* Text styles */ } .gv-activated .gv-storefront-section .gv-sf-heading-1 { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-1 { letter-spacing: calc(var(--sf-letterspacing-h1-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-1 { letter-spacing: calc(calc(var(--sf-letterspacing-h1-min) * 1px) + (var(--sf-letterspacing-h1-max) - var(--sf-letterspacing-h1-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-1 { letter-spacing: calc(var(--sf-letterspacing-h1-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-1 { font-size: calc(var(--sf-font-size-h1-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-1 { font-size: calc(calc(var(--sf-font-size-h1-min) * 1rem) + (var(--sf-font-size-h1-max) - var(--sf-font-size-h1-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-1 { font-size: calc(var(--sf-font-size-h1-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-sf-heading-2 { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-2 { letter-spacing: calc(var(--sf-letterspacing-h2-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-2 { letter-spacing: calc(calc(var(--sf-letterspacing-h2-min) * 1px) + (var(--sf-letterspacing-h2-max) - var(--sf-letterspacing-h2-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-2 { letter-spacing: calc(var(--sf-letterspacing-h2-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-2 { font-size: calc(var(--sf-font-size-h2-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-2 { font-size: calc(calc(var(--sf-font-size-h2-min) * 1rem) + (var(--sf-font-size-h2-max) - var(--sf-font-size-h2-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-2 { font-size: calc(var(--sf-font-size-h2-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-sf-heading-3 { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-3 { letter-spacing: calc(var(--sf-letterspacing-h3-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-3 { letter-spacing: calc(calc(var(--sf-letterspacing-h3-min) * 1px) + (var(--sf-letterspacing-h3-max) - var(--sf-letterspacing-h3-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-3 { letter-spacing: calc(var(--sf-letterspacing-h3-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-3 { font-size: calc(var(--sf-font-size-h3-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-3 { font-size: calc(calc(var(--sf-font-size-h3-min) * 1rem) + (var(--sf-font-size-h3-max) - var(--sf-font-size-h3-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-3 { font-size: calc(var(--sf-font-size-h3-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-sf-heading-4 { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-4 { letter-spacing: calc(var(--sf-letterspacing-h4-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-4 { letter-spacing: calc(calc(var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-4 { letter-spacing: calc(var(--sf-letterspacing-h4-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-4 { font-size: calc(var(--sf-font-size-h4-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-4 { font-size: calc(calc(var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-4 { font-size: calc(var(--sf-font-size-h4-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-sf-heading-5 { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-5 { letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-5 { letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-5 { letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-heading-5 { font-size: calc(var(--sf-font-size-h5-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-heading-5 { font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-heading-5 { font-size: calc(var(--sf-font-size-h5-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-sf-body-lg { font-weight: var(--font-weight-medium); line-height: var(--line-height-body-lg); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-body-lg { letter-spacing: calc(var(--sf-letterspacing-body-lg-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-body-lg { letter-spacing: calc(calc(var(--sf-letterspacing-body-lg-min) * 1px) + (var(--sf-letterspacing-body-lg-max) - var(--sf-letterspacing-body-lg-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-body-lg { letter-spacing: calc(var(--sf-letterspacing-body-lg-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-sf-body-lg { font-size: calc(var(--sf-font-size-body-lg-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-sf-body-lg { font-size: calc(calc(var(--sf-font-size-body-lg-min) * 1rem) + (var(--sf-font-size-body-lg-max) - var(--sf-font-size-body-lg-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-sf-body-lg { font-size: calc(var(--sf-font-size-body-lg-max) * 1rem); } } .gv-activated .gv-storefront-section, .gv-activated .gv-storefront-section .gv-sf-body-md { font-size: calc(var(--sf-font-size-body-md) * 1rem); line-height: var(--line-height-body); letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px); } .gv-activated .gv-storefront-section .gv-sf-body-sm { font-size: calc(var(--sf-font-size-body-sm) * 1rem); letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px); line-height: var(--line-height-body); } .gv-activated .gv-storefront-section .gv-sf-body-xs { font-size: calc(var(--sf-font-size-body-xs) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: calc(var(--sf-letterspacing-body-xs) * 1px); line-height: var(--line-height-body); } .gv-activated .gv-storefront-section .gv-section-content { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; max-width: 1536px; } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-section-content { gap: calc(var(--section-gap-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-section-content { gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-section-content { gap: calc(var(--section-gap-max-value) * 1px); } } .gv-activated .gv-storefront-section.gv-bg-pattern, .gv-activated .gv-storefront-section .gv-bg-pattern { --bg-pattern-size: calc(var(--bg-pattern-size-min) * 1px); --bg-pattern-spacing: calc(var(--bg-pattern-spacing-min) * 1px); background-repeat: repeat; background-image: radial-gradient(var(--bg-pattern-color) var(--bg-pattern-size), transparent var(--bg-pattern-size)); background-size: var(--bg-pattern-spacing) var(--bg-pattern-spacing); } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-bg-pattern, .gv-activated .gv-storefront-section .gv-bg-pattern { --bg-pattern-size: calc(calc(var(--bg-pattern-size-min) * 1px) + (var(--bg-pattern-size-max) - var(--bg-pattern-size-min)) * ((100vw - 360px) / 1080)); --bg-pattern-spacing: calc(calc(var(--bg-pattern-spacing-min) * 1px) + (var(--bg-pattern-spacing-max) - var(--bg-pattern-spacing-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-bg-pattern, .gv-activated .gv-storefront-section .gv-bg-pattern { --bg-pattern-size: calc(var(--bg-pattern-size-max) * 1px); --bg-pattern-spacing: calc(var(--bg-pattern-spacing-max) * 1px); } } .gv-activated [class*="gv-bento-"] { display: grid; gap: var(--size-lg); } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated [class*="gv-bento-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-bento-5a > *:last-child, .gv-activated .gv-bento-5c > *:first-child { grid-column: auto / span 2; } } @media (min-width: 1024px ) { .gv-activated [class*="gv-bento-"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv-activated .gv-bento-4a > *:first-child, .gv-activated .gv-bento-4a > *:last-child { grid-column: auto / span 3; } .gv-activated .gv-bento-5a > *:first-child { grid-column: auto / span 2; } .gv-activated .gv-bento-5a > *:last-child { grid-column: auto / span 3; } .gv-activated .gv-bento-5b > *:nth-child(2) { grid-column: auto / span 3; } .gv-activated .gv-bento-5b > *:nth-child(3) { grid-column: auto / span 2; } .gv-activated .gv-bento-5c > *:first-child { grid-column: auto / span 3; } .gv-activated .gv-bento-5c > *:last-child { grid-column: auto / span 2; } } .gv-activated .gv-section-body > *:not(:last-child) { margin-bottom: var(--size-lg); } .gv-activated .gv-section-body .gv-content { display: flex; flex-flow: nowrap column; } @media screen and (max-width: 360px) { .gv-activated .gv-section-body .gv-content { -webkit-column-gap: calc(var(--section-gap-min-value) * 1px); column-gap: calc(var(--section-gap-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-section-body .gv-content { -webkit-column-gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080)); column-gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-section-body .gv-content { -webkit-column-gap: calc(var(--section-gap-max-value) * 1px); column-gap: calc(var(--section-gap-max-value) * 1px); } } .gv-activated .gv-section-body .gv-content:has(.gv-text) { row-gap: var(--size-sm); } .gv-activated .gv-section-body .gv-title { flex: 1; } .gv-activated .gv-section-body .gv-text, .gv-activated .gv-section-body .gv-button-only { flex: 1; min-width: calc(50% - (var(--size-lg) / 2)); } .gv-activated .gv-section-body .gv-text > *:not(:last-child), .gv-activated .gv-section-body .gv-button-only > *:not(:last-child) { margin-bottom: var(--size-lg); } .gv-activated .gv-section-body .gv-button-only { display: flex; flex-direction: column; width: 100%; } .gv-activated .gv-section-body .gv-description > *:not(:last-child) { margin-bottom: var(--size-md); } .gv-activated .gv-section-body.gv-section-body-vertical { text-align: center; } .gv-activated .gv-section-body.gv-section-body-vertical .gv-content { align-items: center; flex-direction: column; } .gv-activated .gv-section-body.gv-section-body-vertical .gv-button-only { align-items: center; padding-top: var(--size-lg); } @media (min-width: 768px ) { .gv-activated .gv-section-body .gv-content { flex-direction: row; } } @media (max-width: 767px ) { .gv-activated .gv-section-body .gv-button-only { padding-top: var(--size-lg); } } .gv-activated .gv-section-card { background: var(--storefront-card-bg); border-radius: var(--outer-container-radius); color: var(--storefront-card-text); display: flex; flex-direction: column; max-width: 100%; overflow: hidden; position: relative; text-decoration: none; font-size: calc(var(--sf-font-size-body-md) * 1rem); line-height: var(--line-height-body); letter-spacing: calc(var(--sf-letterspacing-body-md) * 1px); } .gv-activated .gv-section-card:hover { color: var(--storefront-card-text); } .gv-activated .gv-section-card .gv-card-content { flex-grow: 1; padding: 34px var(--size-lg) var(--size-lg) var(--size-lg); } .gv-activated .gv-section-card .gv-card-content > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-section-card .gv-link-title { align-items: flex-start; display: flex; gap: var(--size-lg); justify-content: space-between; } .gv-activated .gv-section-card .gv-link-title gv-icon { flex-shrink: 0; } .gv-activated .gv-section-card .gv-card-title { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-section-card .gv-card-title { letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-section-card .gv-card-title { letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-section-card .gv-card-title { letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-section-card .gv-card-title { font-size: calc(var(--sf-font-size-h5-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-section-card .gv-card-title { font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-section-card .gv-card-title { font-size: calc(var(--sf-font-size-h5-max) * 1rem); } } .gv-activated .gv-section-card .gv-card-image { position: relative; width: 100%; } .gv-activated .gv-section-card .gv-card-image img { display: block; height: auto; width: 100%; } .gv-activated a.gv-section-card .gv-card-title { padding-right: var(--size-xl); position: relative; } .gv-activated a.gv-section-card .gv-card-title::after { background-color: var(--storefront-card-text); content: ""; display: block; -webkit-mask: url("../images/arrow-right.svg") no-repeat 50% 50%; mask: url("../images/arrow-right.svg") no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; height: var(--size-icon-md); right: 0; position: absolute; top: 0; width: var(--size-icon-md); } @media screen and (max-width: 360px) { .gv-activated .gv-section-comparison-table .gv-section-content > *:not(:last-child), .gv-activated .gv-section-product-table .gv-section-content > *:not(:last-child) { margin-bottom: calc(var(--size-fluid-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-section-comparison-table .gv-section-content > *:not(:last-child), .gv-activated .gv-section-product-table .gv-section-content > *:not(:last-child) { margin-bottom: calc(calc(var(--size-fluid-min-value) * 1px) + (var(--size-fluid-max-value) - var(--size-fluid-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-section-comparison-table .gv-section-content > *:not(:last-child), .gv-activated .gv-section-product-table .gv-section-content > *:not(:last-child) { margin-bottom: calc(var(--size-fluid-max-value) * 1px); } } .gv-activated .gv-section-comparison-table .gv-features-table, .gv-activated .gv-section-product-table .gv-features-table { --slider-px-max: var(--section-x-max-value); --slider-px-min: var(--section-x-min-value); } .gv-activated .gv-storefront-section.gv-section-header { --header-body-max-width: 750px; position: relative; } .gv-activated .gv-storefront-section.gv-section-header .gv-bg-image { overflow: hidden; position: absolute; height: 100%; width: 100%; } .gv-activated .gv-storefront-section.gv-section-header .gv-bg-image img { display: block; height: 100%; object-fit: none; object-position: center center; width: 100%; } .gv-activated .gv-storefront-section.gv-section-header .gv-section-content { align-items: center; position: relative; } .gv-activated .gv-storefront-section.gv-section-header .gv-header-body { align-items: center; display: flex; flex-direction: column; gap: var(--size-lg); max-width: var(--header-body-max-width); text-align: center; } .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text { display: flex; flex-direction: column; } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text { gap: 8px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text { gap: calc(8px + 16 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-text { gap: 24px; } } .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container > *:not(:last-child) { margin-bottom: var(--size-xs); } .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { letter-spacing: calc(var(--sf-letterspacing-h4-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { letter-spacing: calc(calc(var(--sf-letterspacing-h4-min) * 1px) + (var(--sf-letterspacing-h4-max) - var(--sf-letterspacing-h4-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { letter-spacing: calc(var(--sf-letterspacing-h4-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { font-size: calc(var(--sf-font-size-h4-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { font-size: calc(calc(var(--sf-font-size-h4-min) * 1rem) + (var(--sf-font-size-h4-max) - var(--sf-font-size-h4-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-text { font-size: calc(var(--sf-font-size-h4-max) * 1rem); } } .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { font-size: calc(var(--sf-font-size-h5-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-period { font-size: calc(var(--sf-font-size-h5-max) * 1rem); } } .gv-activated .gv-storefront-section.gv-section-header .gv-header-body .gv-price-container .gv-price-info { font-size: calc(var(--sf-font-size-body-xs) * 1rem); font-weight: var(--font-weight-medium); letter-spacing: calc(var(--sf-letterspacing-body-xs) * 1px); line-height: var(--line-height-body); } .gv-activated .gv-storefront-section.gv-section-header .gv-domain-checker { align-items: center; display: flex; flex-direction: column; gap: var(--size-md); max-width: var(--header-body-max-width); width: 100%; } .gv-activated .gv-storefront-section.gv-section-header .gv-domain-checker form { margin: 0; width: 100%; } .gv-activated .gv-storefront-section.gv-section-header .gv-tlds { text-align: center; width: 100%; } .gv-activated .gv-storefront-section.gv-section-header .gv-tlds > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-storefront-section.gv-section-header .gv-tld-card { background-color: var(--color-surface-bright); border: var(--size-border) solid var(--color-border-alt); border-radius: var(--border-radius); padding: var(--size-lg) var(--size-lg) var(--size-xl); text-align: left; } .gv-activated .gv-storefront-section.gv-section-header .gv-tld-card > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-storefront-section.gv-section-header .gv-tld-card .gv-card-content > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-storefront-section.gv-section-header .gv-tld-card .gv-card-content .gv-price-info { color: var(--color-body-on-alternative); } .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview { align-items: center; display: grid; } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview { padding-left: calc(var(--section-x-min-value) * 1px); padding-right: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview { padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview { padding-left: calc(var(--section-x-max-value) * 1px); padding-right: calc(var(--section-x-max-value) * 1px); } } .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body { align-items: flex-start; text-align: left; } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body { padding-right: calc(var(--section-gap-min-value) * 1px); padding-top: calc(var(--section-y-min-value) * 1px); padding-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body { padding-right: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080)); padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body { padding-right: calc(var(--section-gap-max-value) * 1px); padding-top: calc(var(--section-y-max-value) * 1px); padding-bottom: calc(var(--section-y-max-value) * 1px); } } .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-image img { display: block; } .gv-activated .gv-storefront-section.gv-section-header.gv-big-title { --header-body-max-width: 875px; --section-padding-y: 168px; } .gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-section-content { padding-bottom: var(--section-padding-y); padding-top: var(--size-xl); } .gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-header-body { padding-top: calc(var(--section-padding-y) - var(--size-xl)); } .gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-domain-checker { max-width: 500px; } .gv-activated .gv-storefront-section.gv-section-header.gv-big-title .gv-domain-checker + .gv-header-body { padding-top: 0; } @media (max-width: 1023px ) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-header-body { padding-right: 0; } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview .gv-image img { margin: 0 auto; } } @media (min-width: 1024px ) { .gv-activated .gv-storefront-section.gv-section-header .gv-header-splitview { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; } } .gv-activated .gv-section-steps .gv-section-main { counter-reset: counter; } .gv-activated .gv-section-steps .gv-numbered-title { counter-increment: counter; } .gv-activated .gv-section-steps .gv-numbered-title .gv-title::before { content: counter(counter) ". "; } .gv-activated .gv-storefront-section .gv-card-item { background-color: var(--color-surface-dim); display: flex; position: relative; border: solid 1px var(--color-border-alt); border-radius: var(--border-radius); flex-direction: column; padding: var(--size-lg); align-items: start; } .gv-activated .gv-storefront-section .gv-card-item > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-storefront-section .gv-card-item .gv-number { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-card-item .gv-number { letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-card-item .gv-number { letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-card-item .gv-number { letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-card-item .gv-number { font-size: calc(var(--sf-font-size-h5-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-card-item .gv-number { font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-card-item .gv-number { font-size: calc(var(--sf-font-size-h5-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-card-item .gv-title { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-card-item .gv-title { letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-card-item .gv-title { letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-card-item .gv-title { letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-card-item .gv-title { font-size: calc(var(--sf-font-size-h5-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-card-item .gv-title { font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-card-item .gv-title { font-size: calc(var(--sf-font-size-h5-max) * 1rem); } } .gv-activated .gv-storefront-section .gv-card-item .gv-text { font-size: calc(var(--sf-font-size-body-sm) * 1rem); letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px); line-height: var(--line-height-body); } .gv-activated .gv-storefront-section .gv-card-item .gv-numbered-title .gv-title { display: flex; gap: var(--size-xs); } .gv-activated .gv-storefront-section .gv-card-item .gv-card-content { margin-bottom: var(--size-xl); } .gv-activated .gv-storefront-section .gv-card-item .gv-card-footer { margin-top: auto; } .gv-activated .gv-storefront-section.gv-section-splitview .gv-section-content { gap: var(--size-xl); } .gv-activated .gv-storefront-section .gv-splitview { display: grid; row-gap: var(--size-xl); } .gv-activated .gv-storefront-section .gv-splitview .gv-content > *:not(:last-child) { margin-bottom: var(--size-lg); } .gv-activated .gv-storefront-section .gv-splitview .gv-text { display: flex; flex-direction: column; } @media screen and (max-width: 360px) { .gv-activated .gv-storefront-section .gv-splitview .gv-text { gap: 8px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-storefront-section .gv-splitview .gv-text { gap: calc(8px + 16 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-storefront-section .gv-splitview .gv-text { gap: 24px; } } .gv-activated .gv-storefront-section .gv-splitview .gv-image { border-radius: var(--outer-container-radius); overflow: hidden; position: relative; } .gv-activated .gv-storefront-section .gv-splitview .gv-image img { height: auto; max-height: none; max-width: none; width: auto; } @media (max-width: 1023px ) { .gv-activated .gv-storefront-section .gv-splitview .gv-content { padding: 0; } .gv-activated .gv-storefront-section .gv-splitview .gv-image { order: 2; } .gv-activated .gv-storefront-section .gv-splitview .gv-image img { left: 50%; position: relative; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media (min-width: 1024px ) { .gv-activated .gv-storefront-section.gv-section-splitview .gv-section-content { padding-left: 0; padding-right: 0; } .gv-activated .gv-storefront-section .gv-splitview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv-activated .gv-storefront-section .gv-splitview .gv-image { min-height: 500px; } .gv-activated .gv-storefront-section .gv-splitview .gv-image img { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .gv-activated .gv-section-usp .gv-usp { display: flex; flex-direction: column; } .gv-activated .gv-section-usp .gv-usp > *:not(:last-child) { margin-bottom: var(--size-sm); } .gv-activated .gv-section-usp .gv-usp .gv-title { font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-section-usp .gv-usp .gv-title { letter-spacing: calc(var(--sf-letterspacing-h5-min) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-section-usp .gv-usp .gv-title { letter-spacing: calc(calc(var(--sf-letterspacing-h5-min) * 1px) + (var(--sf-letterspacing-h5-max) - var(--sf-letterspacing-h5-min)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-section-usp .gv-usp .gv-title { letter-spacing: calc(var(--sf-letterspacing-h5-max) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-section-usp .gv-usp .gv-title { font-size: calc(var(--sf-font-size-h5-min) * 1rem); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-section-usp .gv-usp .gv-title { font-size: calc(calc(var(--sf-font-size-h5-min) * 1rem) + (var(--sf-font-size-h5-max) - var(--sf-font-size-h5-min)) * ((100vw - 22.5rem) / 67.5)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-section-usp .gv-usp .gv-title { font-size: calc(var(--sf-font-size-h5-max) * 1rem); } } .gv-activated .gv-section-usp .gv-usp .gv-text { font-size: calc(var(--sf-font-size-body-sm) * 1rem); letter-spacing: calc(var(--sf-letterspacing-body-sm) * 1px); line-height: var(--line-height-body); } /* Utility classes */ @-webkit-keyframes gv-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes gv-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes gv-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes gv-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes gv-slide-in-from-left { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes gv-slide-in-from-left { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes gv-slide-out-from-left { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes gv-slide-out-from-left { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes gv-slide-in-from-right { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes gv-slide-in-from-right { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes gv-slide-out-from-right { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes gv-slide-out-from-right { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes gv-pulse { 50% { opacity: 0.4; } } @keyframes gv-pulse { 50% { opacity: 0.4; } } @-webkit-keyframes gv-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes gv-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gv-activated { /* Add animation overrides here to tone down animations to avoid vestibular motion triggers. */ } .gv-activated .gv-overlay, .gv-activated .gv-sidedrawer, .gv-activated .gv-sidedrawer .gv-side-content { -webkit-animation-duration: 0.001ms !important; animation-duration: 0.001ms !important; } } /* Utility mixins */ .gv-activated { /* Accessibility */ /* Background */ /* Background storefront sections */ /* Border */ /* Flexbox */ /* Flex layout */ /* Gap */ /* Overflow */ /* Position */ /* Object */ /* Aspect ratio */ /* Shadow */ /* Sizing */ /* Text */ /* Spacing */ /* Fluid default */ /* Fluid storefront sections */ /* Fluid default */ /* Fluid storefront sections */ /* Breakpoint classes */ /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-sr-only, .gv-activated .gv-skip-link:not(:focus, :active) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .gv-activated .gv-skip-link:active, .gv-activated .gv-skip-link:focus { align-items: center; background: var(--color-surface-bright); border: 2px solid var(--color-state-focus-visible); border-radius: var(--button-radius); color: var(--color-body-on-default); display: inline-flex; font-weight: var(--font-weight-semibold); height: var(--form-element-height); left: 0; margin: var(--size-md); outline-offset: -2px; padding: var(--button-padding-tb) var(--button-padding-lr); position: absolute; text-decoration: none; top: 0; z-index: 999999; font-size: calc(var(--font-size-text-sm) * 1rem); letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-surface-bright { background-color: var(--color-surface-bright); --bg-pattern-color: var(--bg-pattern-color-on-light); } .gv-activated .gv-surface-dim { background-color: var(--color-surface-dim); --bg-pattern-color: var(--bg-pattern-color-on-light); } .gv-activated .gv-surface-muted { background-color: var(--color-surface-muted); } .gv-activated .gv-surface-form { background-color: var(--color-surface-form); } .gv-activated .gv-surface-highlight { background-color: var(--color-surface-highlight); } .gv-activated .gv-surface-accent { background-color: var(--color-surface-accent); --bg-pattern-color: var(--bg-pattern-color-on-medium); } .gv-activated .gv-surface-accent-light { background-color: var(--color-surface-accent-light); --bg-pattern-color: var(--bg-pattern-color-on-light); } .gv-activated .gv-surface-core { background-color: var(--color-surface-core); --bg-pattern-color: var(--bg-pattern-color-on-medium); } .gv-activated .gv-surface-core-light { background-color: var(--color-surface-core-light); --bg-pattern-color: var(--bg-pattern-color-on-light); } .gv-activated .gv-surface-contrast { background-color: var(--color-surface-contrast); color: var(--on-surface-contrast); --bg-pattern-color: var(--bg-pattern-color-on-dark); } .gv-activated .gv-surface-interactive:hover { background-color: var(--color-state-hover); } .gv-activated .gv-surface-interactive:active { background-color: var(--color-state-active); } .gv-activated .gv-section-surface-100 { background-color: var(--color-section-surface-100); } .gv-activated .gv-section-surface-200 { background-color: var(--color-section-surface-200); } .gv-activated .gv-section-surface-300 { background-color: var(--color-section-surface-300); } .gv-activated .gv-section-surface-product-default { background-color: var(--color-section-surface-product-default); } .gv-activated .gv-border-form { border: 1px solid var(--color-border-form); } .gv-activated .gv-flex { display: flex; } .gv-activated .gv-inline-flex { display: inline-flex; } .gv-activated .gv-flex-1 { flex: 1 1 0; } .gv-activated .gv-flex-auto { flex: 1 1 auto; } .gv-activated .gv-flex-none { flex: none; } .gv-activated .gv-flex-shrink { flex-shrink: 1; } .gv-activated .gv-flex-shrink-0 { flex-shrink: 0; } .gv-activated .gv-flex-grow { flex-grow: 1; } .gv-activated .gv-flex-grow-0 { flex-grow: 0; } .gv-activated .gv-flex-wrap { flex-wrap: wrap; } .gv-activated .gv-flex-nowrap { flex-wrap: nowrap; } .gv-activated .gv-flex-row-xs { display: flex; flex-direction: row; gap: 4px; } .gv-activated .gv-flex-row-sm { display: flex; flex-direction: row; gap: 8px; } .gv-activated .gv-flex-row-md { display: flex; flex-direction: row; gap: 16px; } .gv-activated .gv-flex-row-lg { display: flex; flex-direction: row; gap: 24px; } .gv-activated .gv-flex-column-xs { display: flex; flex-direction: column; gap: 4px; } .gv-activated .gv-flex-column-sm { display: flex; flex-direction: column; gap: 8px; } .gv-activated .gv-flex-column-md { display: flex; flex-direction: column; gap: 16px; } .gv-activated .gv-flex-column-lg { display: flex; flex-direction: column; gap: 24px; } @media screen and (max-width: 360px) { .gv-activated .gv-gap-fluid { gap: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-gap-fluid { gap: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-gap-fluid { gap: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-gap-section { gap: calc(var(--section-gap-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-gap-section { gap: calc(calc(var(--section-gap-min-value) * 1px) + (var(--section-gap-max-value) - var(--section-gap-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-gap-section { gap: calc(var(--section-gap-max-value) * 1px); } } .gv-activated .gv-overflow-auto { overflow: auto; } .gv-activated .gv-overflow-x-auto { overflow-x: auto; } .gv-activated .gv-overflow-y-auto { overflow-y: auto; } .gv-activated .gv-overflow-hidden { overflow: hidden; } .gv-activated .gv-overflow-x-hidden { overflow-x: hidden; } .gv-activated .gv-overflow-y-hidden { overflow-y: hidden; } .gv-activated .gv-overflow-scroll { overflow: scroll; } .gv-activated .gv-overflow-x-scroll { overflow-x: scroll; } .gv-activated .gv-overflow-y-scroll { overflow-y: scroll; } .gv-activated .gv-pos-fixed { position: fixed; } .gv-activated .gv-pos-absolute { position: absolute; } .gv-activated .gv-pos-relative { position: relative; } .gv-activated .gv-pos-sticky { position: -webkit-sticky; position: sticky; } .gv-activated .gv-pos-bottom { bottom: 0; } .gv-activated .gv-pos-left { left: 0; } .gv-activated .gv-pos-right { right: 0; } .gv-activated .gv-pos-top { top: 0; } .gv-activated .gv-pos-x-center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .gv-activated .gv-pos-y-center { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .gv-activated .gv-pos-center { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .gv-activated .gv-object-pos-bottom { object-position: bottom; } .gv-activated .gv-object-pos-center { object-position: center; } .gv-activated .gv-object-pos-left { object-position: left; } .gv-activated .gv-object-pos-left-bottom { object-position: left bottom; } .gv-activated .gv-object-pos-left-top { object-position: left top; } .gv-activated .gv-object-pos-right { object-position: right; } .gv-activated .gv-object-pos-right-bottom { object-position: right bottom; } .gv-activated .gv-object-pos-right-top { object-position: right top; } .gv-activated .gv-object-pos-top { object-position: top; } .gv-activated .gv-object-contain { object-fit: contain; } .gv-activated .gv-object-cover { object-fit: cover; } .gv-activated .gv-object-fill { object-fit: fill; } .gv-activated .gv-aspect-video { aspect-ratio: 16 / 9; } .gv-activated .gv-shadow-subtle { box-shadow: var(--color-shadow-subtle); } .gv-activated .gv-shadow-elevated { box-shadow: var(--color-shadow-elevated); } .gv-activated .gv-h-full { height: 100%; } .gv-activated .gv-w-auto { width: auto; } .gv-activated .gv-w-full { width: 100%; } .gv-activated .gv-w-max-container { max-width: 1536px; } .gv-activated .gv-w-max-form { max-width: var(--form-max-width); } .gv-activated .gv-w-max-features-table { max-width: var(--features-table-max-width); } .gv-activated .gv-min-w-0 { min-width: 0; } .gv-activated .gv-children-min-w-0 > * { min-width: 0; } .gv-activated .gv-text-on-default { color: var(--color-body-on-default); } .gv-activated .gv-text-on-alternative { color: var(--color-body-on-alternative); } .gv-activated .gv-text-on-inverted { color: var(--color-body-on-inverted); } .gv-activated .gv-text-primary { color: var(--color-primary); } .gv-activated .gv-text-secondary { color: var(--color-secondary); } .gv-activated .gv-text-uppercase { text-transform: uppercase; } .gv-activated .gv-text-capitalize { text-transform: capitalize; } .gv-activated .gv-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-white-space-nowrap { white-space: nowrap; } .gv-activated .gv-break-word { overflow-wrap: break-word; } .gv-activated .gv-break-all { word-break: break-all; } .gv-activated .gv-list-unstyled { list-style: none; padding-left: 0; } .gv-activated .gv-text-trim { /* Apply values to calculate em_based margins that work with any font size */ } .gv-activated .gv-text-trim::before { margin-bottom: calc(-0.375em + 0px); } .gv-activated .gv-text-trim::after { margin-top: calc(-0.3125em + 0px); } .gv-activated .gv-text-trim::before, .gv-activated .gv-text-trim::after { content: ""; display: block; height: 0; width: 0; } .gv-activated.gv-pt-nav, .gv-activated .gv-pt-nav { padding-top: var(--navigation-bar-height); } @media screen and (max-width: 360px) { .gv-activated .gv-m-fluid { margin: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-m-fluid { margin: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-m-fluid { margin: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mt-fluid { margin-top: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mt-fluid { margin-top: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mt-fluid { margin-top: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mb-fluid { margin-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mb-fluid { margin-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mb-fluid { margin-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-ml-fluid { margin-left: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-ml-fluid { margin-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-ml-fluid { margin-left: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mr-fluid { margin-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mr-fluid { margin-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mr-fluid { margin-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mx-fluid { margin-left: 24px; margin-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mx-fluid { margin-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); margin-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mx-fluid { margin-left: 48px; margin-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-my-fluid { margin-top: 24px; margin-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-my-fluid { margin-top: calc(24px + 24 * ((100vw - 360px ) / 1080 )); margin-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-my-fluid { margin-top: 48px; margin-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-m-section { margin-left: calc(var(--section-x-min-value) * 1px); margin-right: calc(var(--section-x-min-value) * 1px); margin-top: calc(var(--section-y-min-value) * 1px); margin-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-m-section { margin-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); margin-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); margin-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); margin-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-m-section { margin-left: calc(var(--section-x-max-value) * 1px); margin-right: calc(var(--section-x-max-value) * 1px); margin-top: calc(var(--section-y-max-value) * 1px); margin-bottom: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-mt-section { margin-top: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mt-section { margin-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mt-section { margin-top: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-mb-section { margin-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mb-section { margin-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mb-section { margin-bottom: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-ml-section { margin-left: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-ml-section { margin-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-ml-section { margin-left: calc(var(--section-x-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-mr-section { margin-right: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mr-section { margin-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mr-section { margin-right: calc(var(--section-x-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-mx-section { margin-left: calc(var(--section-x-min-value) * 1px); margin-right: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mx-section { margin-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); margin-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mx-section { margin-left: calc(var(--section-x-max-value) * 1px); margin-right: calc(var(--section-x-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-my-section { margin-top: calc(var(--section-y-min-value) * 1px); margin-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-my-section { margin-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); margin-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-my-section { margin-top: calc(var(--section-y-max-value) * 1px); margin-bottom: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-p-fluid { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-p-fluid { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-p-fluid { padding: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pt-fluid { padding-top: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pt-fluid { padding-top: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pt-fluid { padding-top: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pb-fluid { padding-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pb-fluid { padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pb-fluid { padding-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pl-fluid { padding-left: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pl-fluid { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pl-fluid { padding-left: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pr-fluid { padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pr-fluid { padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pr-fluid { padding-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-px-fluid { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-px-fluid { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-px-fluid { padding-left: 48px; padding-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-py-fluid { padding-top: 24px; padding-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-py-fluid { padding-top: calc(24px + 24 * ((100vw - 360px ) / 1080 )); padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-py-fluid { padding-top: 48px; padding-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-p-section { padding-left: calc(var(--section-x-min-value) * 1px); padding-right: calc(var(--section-x-min-value) * 1px); padding-top: calc(var(--section-y-min-value) * 1px); padding-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-p-section { padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-p-section { padding-left: calc(var(--section-x-max-value) * 1px); padding-right: calc(var(--section-x-max-value) * 1px); padding-top: calc(var(--section-y-max-value) * 1px); padding-bottom: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-pt-section { padding-top: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pt-section { padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pt-section { padding-top: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-pb-section { padding-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pb-section { padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pb-section { padding-bottom: calc(var(--section-y-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-pl-section { padding-left: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pl-section { padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pl-section { padding-left: calc(var(--section-x-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-pr-section { padding-right: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pr-section { padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pr-section { padding-right: calc(var(--section-x-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-px-section { padding-left: calc(var(--section-x-min-value) * 1px); padding-right: calc(var(--section-x-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-px-section { padding-left: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); padding-right: calc(calc(var(--section-x-min-value) * 1px) + (var(--section-x-max-value) - var(--section-x-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-px-section { padding-left: calc(var(--section-x-max-value) * 1px); padding-right: calc(var(--section-x-max-value) * 1px); } } @media screen and (max-width: 360px) { .gv-activated .gv-py-section { padding-top: calc(var(--section-y-min-value) * 1px); padding-bottom: calc(var(--section-y-min-value) * 1px); } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-py-section { padding-top: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); padding-bottom: calc(calc(var(--section-y-min-value) * 1px) + (var(--section-y-max-value) - var(--section-y-min-value)) * ((100vw - 360px) / 1080)); } } @media screen and (min-width: 1440px) { .gv-activated .gv-py-section { padding-top: calc(var(--section-y-max-value) * 1px); padding-bottom: calc(var(--section-y-max-value) * 1px); } } .gv-activated .gv-border { border: 1px solid var(--color-border); } .gv-activated .gv-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-border-0 { border: none !important; } .gv-activated .gv-radius { border-radius: var(--border-radius); } .gv-activated .gv-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-radius-0 { border-radius: 0 !important; } .gv-activated .gv-flex-row { flex-direction: row; } .gv-activated .gv-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-flex-col { flex-direction: column; } .gv-activated .gv-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-content-center { align-content: center; } .gv-activated .gv-items-start { align-items: flex-start; } .gv-activated .gv-items-end { align-items: flex-end; } .gv-activated .gv-items-center { align-items: center; } .gv-activated .gv-items-baseline { align-items: baseline; } .gv-activated .gv-items-stretch { align-items: stretch; } .gv-activated .gv-justify-start { justify-content: flex-start; } .gv-activated .gv-justify-end { justify-content: flex-end; } .gv-activated .gv-justify-center { justify-content: center; } .gv-activated .gv-justify-between { justify-content: space-between; } .gv-activated .gv-justify-around { justify-content: space-around; } .gv-activated .gv-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-order-first { order: -1; } .gv-activated .gv-order-last { order: 99; } .gv-activated .gv-gap-xs { gap: 4px; } .gv-activated .gv-gap-sm { gap: 8px; } .gv-activated .gv-gap-md { gap: 16px; } .gv-activated .gv-gap-lg { gap: 24px; } .gv-activated .gv-gap-0 { gap: 0 !important; } .gv-activated .gv-flex { display: flex; } .gv-activated .gv-block { display: block; } .gv-activated .gv-inline { display: inline; } .gv-activated .gv-inline-block { display: inline-block; } .gv-activated .gv-hidden { display: none; } .gv-activated .gv-invisible { visibility: hidden; } .gv-activated .gv-collapse { visibility: collapse; } .gv-activated .gv-m-0 { margin: 0 !important; } .gv-activated .gv-mt-0 { margin-top: 0 !important; } .gv-activated .gv-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-ml-0 { margin-left: 0 !important; } .gv-activated .gv-mr-0 { margin-right: 0 !important; } .gv-activated .gv-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-m-xs { margin: 4px; } .gv-activated .gv-mt-xs { margin-top: 4px; } .gv-activated .gv-mb-xs { margin-bottom: 4px; } .gv-activated .gv-ml-xs { margin-left: 4px; } .gv-activated .gv-mr-xs { margin-right: 4px; } .gv-activated .gv-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-m-sm { margin: 8px; } .gv-activated .gv-mt-sm { margin-top: 8px; } .gv-activated .gv-mb-sm { margin-bottom: 8px; } .gv-activated .gv-ml-sm { margin-left: 8px; } .gv-activated .gv-mr-sm { margin-right: 8px; } .gv-activated .gv-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-m-md { margin: 16px; } .gv-activated .gv-mt-md { margin-top: 16px; } .gv-activated .gv-mb-md { margin-bottom: 16px; } .gv-activated .gv-ml-md { margin-left: 16px; } .gv-activated .gv-mr-md { margin-right: 16px; } .gv-activated .gv-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-m-lg { margin: 24px; } .gv-activated .gv-mt-lg { margin-top: 24px; } .gv-activated .gv-mb-lg { margin-bottom: 24px; } .gv-activated .gv-ml-lg { margin-left: 24px; } .gv-activated .gv-mr-lg { margin-right: 24px; } .gv-activated .gv-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-m-auto { margin: auto; } .gv-activated .gv-mt-auto { margin-top: auto; } .gv-activated .gv-mb-auto { margin-bottom: auto; } .gv-activated .gv-ml-auto { margin-left: auto; } .gv-activated .gv-mr-auto { margin-right: auto; } .gv-activated .gv-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-p-0 { padding: 0 !important; } .gv-activated .gv-pt-0 { padding-top: 0 !important; } .gv-activated .gv-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-pl-0 { padding-left: 0 !important; } .gv-activated .gv-pr-0 { padding-right: 0 !important; } .gv-activated .gv-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-p-xs { padding: 4px; } .gv-activated .gv-pt-xs { padding-top: 4px; } .gv-activated .gv-pb-xs { padding-bottom: 4px; } .gv-activated .gv-pl-xs { padding-left: 4px; } .gv-activated .gv-pr-xs { padding-right: 4px; } .gv-activated .gv-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-p-sm { padding: 8px; } .gv-activated .gv-pt-sm { padding-top: 8px; } .gv-activated .gv-pb-sm { padding-bottom: 8px; } .gv-activated .gv-pl-sm { padding-left: 8px; } .gv-activated .gv-pr-sm { padding-right: 8px; } .gv-activated .gv-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-p-md { padding: 16px; } .gv-activated .gv-pt-md { padding-top: 16px; } .gv-activated .gv-pb-md { padding-bottom: 16px; } .gv-activated .gv-pl-md { padding-left: 16px; } .gv-activated .gv-pr-md { padding-right: 16px; } .gv-activated .gv-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-p-lg { padding: 24px; } .gv-activated .gv-pt-lg { padding-top: 24px; } .gv-activated .gv-pb-lg { padding-bottom: 24px; } .gv-activated .gv-pl-lg { padding-left: 24px; } .gv-activated .gv-pr-lg { padding-right: 24px; } .gv-activated .gv-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-text-left { text-align: left; } .gv-activated .gv-text-center { text-align: center; } .gv-activated .gv-text-right { text-align: right; } @media (max-width: 599px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-max-mob-border { border: 1px solid var(--color-border); } .gv-activated .gv-max-mob-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-max-mob-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-max-mob-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-max-mob-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-max-mob-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-max-mob-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-max-mob-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-max-mob-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-max-mob-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-max-mob-border-0 { border: none !important; } .gv-activated .gv-max-mob-radius { border-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-mob-radius-0 { border-radius: 0 !important; } .gv-activated .gv-max-mob-flex-row { flex-direction: row; } .gv-activated .gv-max-mob-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-max-mob-flex-col { flex-direction: column; } .gv-activated .gv-max-mob-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-max-mob-content-center { align-content: center; } .gv-activated .gv-max-mob-items-start { align-items: flex-start; } .gv-activated .gv-max-mob-items-end { align-items: flex-end; } .gv-activated .gv-max-mob-items-center { align-items: center; } .gv-activated .gv-max-mob-items-baseline { align-items: baseline; } .gv-activated .gv-max-mob-items-stretch { align-items: stretch; } .gv-activated .gv-max-mob-justify-start { justify-content: flex-start; } .gv-activated .gv-max-mob-justify-end { justify-content: flex-end; } .gv-activated .gv-max-mob-justify-center { justify-content: center; } .gv-activated .gv-max-mob-justify-between { justify-content: space-between; } .gv-activated .gv-max-mob-justify-around { justify-content: space-around; } .gv-activated .gv-max-mob-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-max-mob-order-first { order: -1; } .gv-activated .gv-max-mob-order-last { order: 99; } .gv-activated .gv-max-mob-gap-xs { gap: 4px; } .gv-activated .gv-max-mob-gap-sm { gap: 8px; } .gv-activated .gv-max-mob-gap-md { gap: 16px; } .gv-activated .gv-max-mob-gap-lg { gap: 24px; } .gv-activated .gv-max-mob-gap-0 { gap: 0 !important; } .gv-activated .gv-max-mob-flex { display: flex; } .gv-activated .gv-max-mob-block { display: block; } .gv-activated .gv-max-mob-inline { display: inline; } .gv-activated .gv-max-mob-inline-block { display: inline-block; } .gv-activated .gv-max-mob-hidden { display: none; } .gv-activated .gv-max-mob-invisible { visibility: hidden; } .gv-activated .gv-max-mob-collapse { visibility: collapse; } .gv-activated .gv-max-mob-m-0 { margin: 0 !important; } .gv-activated .gv-max-mob-mt-0 { margin-top: 0 !important; } .gv-activated .gv-max-mob-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-max-mob-ml-0 { margin-left: 0 !important; } .gv-activated .gv-max-mob-mr-0 { margin-right: 0 !important; } .gv-activated .gv-max-mob-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-mob-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-mob-m-xs { margin: 4px; } .gv-activated .gv-max-mob-mt-xs { margin-top: 4px; } .gv-activated .gv-max-mob-mb-xs { margin-bottom: 4px; } .gv-activated .gv-max-mob-ml-xs { margin-left: 4px; } .gv-activated .gv-max-mob-mr-xs { margin-right: 4px; } .gv-activated .gv-max-mob-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-max-mob-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-max-mob-m-sm { margin: 8px; } .gv-activated .gv-max-mob-mt-sm { margin-top: 8px; } .gv-activated .gv-max-mob-mb-sm { margin-bottom: 8px; } .gv-activated .gv-max-mob-ml-sm { margin-left: 8px; } .gv-activated .gv-max-mob-mr-sm { margin-right: 8px; } .gv-activated .gv-max-mob-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-max-mob-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-max-mob-m-md { margin: 16px; } .gv-activated .gv-max-mob-mt-md { margin-top: 16px; } .gv-activated .gv-max-mob-mb-md { margin-bottom: 16px; } .gv-activated .gv-max-mob-ml-md { margin-left: 16px; } .gv-activated .gv-max-mob-mr-md { margin-right: 16px; } .gv-activated .gv-max-mob-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-max-mob-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-max-mob-m-lg { margin: 24px; } .gv-activated .gv-max-mob-mt-lg { margin-top: 24px; } .gv-activated .gv-max-mob-mb-lg { margin-bottom: 24px; } .gv-activated .gv-max-mob-ml-lg { margin-left: 24px; } .gv-activated .gv-max-mob-mr-lg { margin-right: 24px; } .gv-activated .gv-max-mob-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-max-mob-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-max-mob-m-auto { margin: auto; } .gv-activated .gv-max-mob-mt-auto { margin-top: auto; } .gv-activated .gv-max-mob-mb-auto { margin-bottom: auto; } .gv-activated .gv-max-mob-ml-auto { margin-left: auto; } .gv-activated .gv-max-mob-mr-auto { margin-right: auto; } .gv-activated .gv-max-mob-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-max-mob-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-max-mob-p-0 { padding: 0 !important; } .gv-activated .gv-max-mob-pt-0 { padding-top: 0 !important; } .gv-activated .gv-max-mob-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-max-mob-pl-0 { padding-left: 0 !important; } .gv-activated .gv-max-mob-pr-0 { padding-right: 0 !important; } .gv-activated .gv-max-mob-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-mob-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-mob-p-xs { padding: 4px; } .gv-activated .gv-max-mob-pt-xs { padding-top: 4px; } .gv-activated .gv-max-mob-pb-xs { padding-bottom: 4px; } .gv-activated .gv-max-mob-pl-xs { padding-left: 4px; } .gv-activated .gv-max-mob-pr-xs { padding-right: 4px; } .gv-activated .gv-max-mob-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-max-mob-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-max-mob-p-sm { padding: 8px; } .gv-activated .gv-max-mob-pt-sm { padding-top: 8px; } .gv-activated .gv-max-mob-pb-sm { padding-bottom: 8px; } .gv-activated .gv-max-mob-pl-sm { padding-left: 8px; } .gv-activated .gv-max-mob-pr-sm { padding-right: 8px; } .gv-activated .gv-max-mob-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-max-mob-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-max-mob-p-md { padding: 16px; } .gv-activated .gv-max-mob-pt-md { padding-top: 16px; } .gv-activated .gv-max-mob-pb-md { padding-bottom: 16px; } .gv-activated .gv-max-mob-pl-md { padding-left: 16px; } .gv-activated .gv-max-mob-pr-md { padding-right: 16px; } .gv-activated .gv-max-mob-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-max-mob-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-max-mob-p-lg { padding: 24px; } .gv-activated .gv-max-mob-pt-lg { padding-top: 24px; } .gv-activated .gv-max-mob-pb-lg { padding-bottom: 24px; } .gv-activated .gv-max-mob-pl-lg { padding-left: 24px; } .gv-activated .gv-max-mob-pr-lg { padding-right: 24px; } .gv-activated .gv-max-mob-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-max-mob-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-max-mob-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-max-mob-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-max-mob-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-max-mob-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-max-mob-text-left { text-align: left; } .gv-activated .gv-max-mob-text-center { text-align: center; } .gv-activated .gv-max-mob-text-right { text-align: right; } } @media (min-width: 600px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-tab-border { border: 1px solid var(--color-border); } .gv-activated .gv-tab-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-tab-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-tab-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-tab-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-tab-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-border-0 { border: none !important; } .gv-activated .gv-tab-radius { border-radius: var(--border-radius); } .gv-activated .gv-tab-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-tab-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-tab-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-tab-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tab-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-tab-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tab-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tab-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-tab-radius-0 { border-radius: 0 !important; } .gv-activated .gv-tab-flex-row { flex-direction: row; } .gv-activated .gv-tab-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-tab-flex-col { flex-direction: column; } .gv-activated .gv-tab-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-tab-content-center { align-content: center; } .gv-activated .gv-tab-items-start { align-items: flex-start; } .gv-activated .gv-tab-items-end { align-items: flex-end; } .gv-activated .gv-tab-items-center { align-items: center; } .gv-activated .gv-tab-items-baseline { align-items: baseline; } .gv-activated .gv-tab-items-stretch { align-items: stretch; } .gv-activated .gv-tab-justify-start { justify-content: flex-start; } .gv-activated .gv-tab-justify-end { justify-content: flex-end; } .gv-activated .gv-tab-justify-center { justify-content: center; } .gv-activated .gv-tab-justify-between { justify-content: space-between; } .gv-activated .gv-tab-justify-around { justify-content: space-around; } .gv-activated .gv-tab-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-tab-order-first { order: -1; } .gv-activated .gv-tab-order-last { order: 99; } .gv-activated .gv-tab-gap-xs { gap: 4px; } .gv-activated .gv-tab-gap-sm { gap: 8px; } .gv-activated .gv-tab-gap-md { gap: 16px; } .gv-activated .gv-tab-gap-lg { gap: 24px; } .gv-activated .gv-tab-gap-0 { gap: 0 !important; } .gv-activated .gv-tab-flex { display: flex; } .gv-activated .gv-tab-block { display: block; } .gv-activated .gv-tab-inline { display: inline; } .gv-activated .gv-tab-inline-block { display: inline-block; } .gv-activated .gv-tab-hidden { display: none; } .gv-activated .gv-tab-invisible { visibility: hidden; } .gv-activated .gv-tab-collapse { visibility: collapse; } .gv-activated .gv-tab-m-0 { margin: 0 !important; } .gv-activated .gv-tab-mt-0 { margin-top: 0 !important; } .gv-activated .gv-tab-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-tab-ml-0 { margin-left: 0 !important; } .gv-activated .gv-tab-mr-0 { margin-right: 0 !important; } .gv-activated .gv-tab-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-tab-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-tab-m-xs { margin: 4px; } .gv-activated .gv-tab-mt-xs { margin-top: 4px; } .gv-activated .gv-tab-mb-xs { margin-bottom: 4px; } .gv-activated .gv-tab-ml-xs { margin-left: 4px; } .gv-activated .gv-tab-mr-xs { margin-right: 4px; } .gv-activated .gv-tab-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-tab-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-tab-m-sm { margin: 8px; } .gv-activated .gv-tab-mt-sm { margin-top: 8px; } .gv-activated .gv-tab-mb-sm { margin-bottom: 8px; } .gv-activated .gv-tab-ml-sm { margin-left: 8px; } .gv-activated .gv-tab-mr-sm { margin-right: 8px; } .gv-activated .gv-tab-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-tab-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-tab-m-md { margin: 16px; } .gv-activated .gv-tab-mt-md { margin-top: 16px; } .gv-activated .gv-tab-mb-md { margin-bottom: 16px; } .gv-activated .gv-tab-ml-md { margin-left: 16px; } .gv-activated .gv-tab-mr-md { margin-right: 16px; } .gv-activated .gv-tab-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-tab-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-tab-m-lg { margin: 24px; } .gv-activated .gv-tab-mt-lg { margin-top: 24px; } .gv-activated .gv-tab-mb-lg { margin-bottom: 24px; } .gv-activated .gv-tab-ml-lg { margin-left: 24px; } .gv-activated .gv-tab-mr-lg { margin-right: 24px; } .gv-activated .gv-tab-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-tab-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-tab-m-auto { margin: auto; } .gv-activated .gv-tab-mt-auto { margin-top: auto; } .gv-activated .gv-tab-mb-auto { margin-bottom: auto; } .gv-activated .gv-tab-ml-auto { margin-left: auto; } .gv-activated .gv-tab-mr-auto { margin-right: auto; } .gv-activated .gv-tab-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-tab-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-tab-p-0 { padding: 0 !important; } .gv-activated .gv-tab-pt-0 { padding-top: 0 !important; } .gv-activated .gv-tab-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-tab-pl-0 { padding-left: 0 !important; } .gv-activated .gv-tab-pr-0 { padding-right: 0 !important; } .gv-activated .gv-tab-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-tab-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-tab-p-xs { padding: 4px; } .gv-activated .gv-tab-pt-xs { padding-top: 4px; } .gv-activated .gv-tab-pb-xs { padding-bottom: 4px; } .gv-activated .gv-tab-pl-xs { padding-left: 4px; } .gv-activated .gv-tab-pr-xs { padding-right: 4px; } .gv-activated .gv-tab-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-tab-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-tab-p-sm { padding: 8px; } .gv-activated .gv-tab-pt-sm { padding-top: 8px; } .gv-activated .gv-tab-pb-sm { padding-bottom: 8px; } .gv-activated .gv-tab-pl-sm { padding-left: 8px; } .gv-activated .gv-tab-pr-sm { padding-right: 8px; } .gv-activated .gv-tab-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-tab-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-tab-p-md { padding: 16px; } .gv-activated .gv-tab-pt-md { padding-top: 16px; } .gv-activated .gv-tab-pb-md { padding-bottom: 16px; } .gv-activated .gv-tab-pl-md { padding-left: 16px; } .gv-activated .gv-tab-pr-md { padding-right: 16px; } .gv-activated .gv-tab-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-tab-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-tab-p-lg { padding: 24px; } .gv-activated .gv-tab-pt-lg { padding-top: 24px; } .gv-activated .gv-tab-pb-lg { padding-bottom: 24px; } .gv-activated .gv-tab-pl-lg { padding-left: 24px; } .gv-activated .gv-tab-pr-lg { padding-right: 24px; } .gv-activated .gv-tab-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-tab-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-tab-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-tab-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-tab-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-tab-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-tab-text-left { text-align: left; } .gv-activated .gv-tab-text-center { text-align: center; } .gv-activated .gv-tab-text-right { text-align: right; } } @media (max-width: 767px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-max-tab-sm-border { border: 1px solid var(--color-border); } .gv-activated .gv-max-tab-sm-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-max-tab-sm-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-max-tab-sm-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-max-tab-sm-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-max-tab-sm-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-sm-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-sm-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-sm-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-sm-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-sm-border-0 { border: none !important; } .gv-activated .gv-max-tab-sm-radius { border-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-tab-sm-radius-0 { border-radius: 0 !important; } .gv-activated .gv-max-tab-sm-flex-row { flex-direction: row; } .gv-activated .gv-max-tab-sm-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-max-tab-sm-flex-col { flex-direction: column; } .gv-activated .gv-max-tab-sm-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-max-tab-sm-content-center { align-content: center; } .gv-activated .gv-max-tab-sm-items-start { align-items: flex-start; } .gv-activated .gv-max-tab-sm-items-end { align-items: flex-end; } .gv-activated .gv-max-tab-sm-items-center { align-items: center; } .gv-activated .gv-max-tab-sm-items-baseline { align-items: baseline; } .gv-activated .gv-max-tab-sm-items-stretch { align-items: stretch; } .gv-activated .gv-max-tab-sm-justify-start { justify-content: flex-start; } .gv-activated .gv-max-tab-sm-justify-end { justify-content: flex-end; } .gv-activated .gv-max-tab-sm-justify-center { justify-content: center; } .gv-activated .gv-max-tab-sm-justify-between { justify-content: space-between; } .gv-activated .gv-max-tab-sm-justify-around { justify-content: space-around; } .gv-activated .gv-max-tab-sm-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-max-tab-sm-order-first { order: -1; } .gv-activated .gv-max-tab-sm-order-last { order: 99; } .gv-activated .gv-max-tab-sm-gap-xs { gap: 4px; } .gv-activated .gv-max-tab-sm-gap-sm { gap: 8px; } .gv-activated .gv-max-tab-sm-gap-md { gap: 16px; } .gv-activated .gv-max-tab-sm-gap-lg { gap: 24px; } .gv-activated .gv-max-tab-sm-gap-0 { gap: 0 !important; } .gv-activated .gv-max-tab-sm-flex { display: flex; } .gv-activated .gv-max-tab-sm-block { display: block; } .gv-activated .gv-max-tab-sm-inline { display: inline; } .gv-activated .gv-max-tab-sm-inline-block { display: inline-block; } .gv-activated .gv-max-tab-sm-hidden { display: none; } .gv-activated .gv-max-tab-sm-invisible { visibility: hidden; } .gv-activated .gv-max-tab-sm-collapse { visibility: collapse; } .gv-activated .gv-max-tab-sm-m-0 { margin: 0 !important; } .gv-activated .gv-max-tab-sm-mt-0 { margin-top: 0 !important; } .gv-activated .gv-max-tab-sm-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-max-tab-sm-ml-0 { margin-left: 0 !important; } .gv-activated .gv-max-tab-sm-mr-0 { margin-right: 0 !important; } .gv-activated .gv-max-tab-sm-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-tab-sm-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-tab-sm-m-xs { margin: 4px; } .gv-activated .gv-max-tab-sm-mt-xs { margin-top: 4px; } .gv-activated .gv-max-tab-sm-mb-xs { margin-bottom: 4px; } .gv-activated .gv-max-tab-sm-ml-xs { margin-left: 4px; } .gv-activated .gv-max-tab-sm-mr-xs { margin-right: 4px; } .gv-activated .gv-max-tab-sm-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-max-tab-sm-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-max-tab-sm-m-sm { margin: 8px; } .gv-activated .gv-max-tab-sm-mt-sm { margin-top: 8px; } .gv-activated .gv-max-tab-sm-mb-sm { margin-bottom: 8px; } .gv-activated .gv-max-tab-sm-ml-sm { margin-left: 8px; } .gv-activated .gv-max-tab-sm-mr-sm { margin-right: 8px; } .gv-activated .gv-max-tab-sm-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-max-tab-sm-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-max-tab-sm-m-md { margin: 16px; } .gv-activated .gv-max-tab-sm-mt-md { margin-top: 16px; } .gv-activated .gv-max-tab-sm-mb-md { margin-bottom: 16px; } .gv-activated .gv-max-tab-sm-ml-md { margin-left: 16px; } .gv-activated .gv-max-tab-sm-mr-md { margin-right: 16px; } .gv-activated .gv-max-tab-sm-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-max-tab-sm-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-max-tab-sm-m-lg { margin: 24px; } .gv-activated .gv-max-tab-sm-mt-lg { margin-top: 24px; } .gv-activated .gv-max-tab-sm-mb-lg { margin-bottom: 24px; } .gv-activated .gv-max-tab-sm-ml-lg { margin-left: 24px; } .gv-activated .gv-max-tab-sm-mr-lg { margin-right: 24px; } .gv-activated .gv-max-tab-sm-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-max-tab-sm-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-max-tab-sm-m-auto { margin: auto; } .gv-activated .gv-max-tab-sm-mt-auto { margin-top: auto; } .gv-activated .gv-max-tab-sm-mb-auto { margin-bottom: auto; } .gv-activated .gv-max-tab-sm-ml-auto { margin-left: auto; } .gv-activated .gv-max-tab-sm-mr-auto { margin-right: auto; } .gv-activated .gv-max-tab-sm-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-max-tab-sm-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-max-tab-sm-p-0 { padding: 0 !important; } .gv-activated .gv-max-tab-sm-pt-0 { padding-top: 0 !important; } .gv-activated .gv-max-tab-sm-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-max-tab-sm-pl-0 { padding-left: 0 !important; } .gv-activated .gv-max-tab-sm-pr-0 { padding-right: 0 !important; } .gv-activated .gv-max-tab-sm-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-tab-sm-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-tab-sm-p-xs { padding: 4px; } .gv-activated .gv-max-tab-sm-pt-xs { padding-top: 4px; } .gv-activated .gv-max-tab-sm-pb-xs { padding-bottom: 4px; } .gv-activated .gv-max-tab-sm-pl-xs { padding-left: 4px; } .gv-activated .gv-max-tab-sm-pr-xs { padding-right: 4px; } .gv-activated .gv-max-tab-sm-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-max-tab-sm-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-max-tab-sm-p-sm { padding: 8px; } .gv-activated .gv-max-tab-sm-pt-sm { padding-top: 8px; } .gv-activated .gv-max-tab-sm-pb-sm { padding-bottom: 8px; } .gv-activated .gv-max-tab-sm-pl-sm { padding-left: 8px; } .gv-activated .gv-max-tab-sm-pr-sm { padding-right: 8px; } .gv-activated .gv-max-tab-sm-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-max-tab-sm-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-max-tab-sm-p-md { padding: 16px; } .gv-activated .gv-max-tab-sm-pt-md { padding-top: 16px; } .gv-activated .gv-max-tab-sm-pb-md { padding-bottom: 16px; } .gv-activated .gv-max-tab-sm-pl-md { padding-left: 16px; } .gv-activated .gv-max-tab-sm-pr-md { padding-right: 16px; } .gv-activated .gv-max-tab-sm-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-max-tab-sm-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-max-tab-sm-p-lg { padding: 24px; } .gv-activated .gv-max-tab-sm-pt-lg { padding-top: 24px; } .gv-activated .gv-max-tab-sm-pb-lg { padding-bottom: 24px; } .gv-activated .gv-max-tab-sm-pl-lg { padding-left: 24px; } .gv-activated .gv-max-tab-sm-pr-lg { padding-right: 24px; } .gv-activated .gv-max-tab-sm-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-max-tab-sm-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-max-tab-sm-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-max-tab-sm-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-max-tab-sm-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-max-tab-sm-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-max-tab-sm-text-left { text-align: left; } .gv-activated .gv-max-tab-sm-text-center { text-align: center; } .gv-activated .gv-max-tab-sm-text-right { text-align: right; } } @media (min-width: 768px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-tab-lg-border { border: 1px solid var(--color-border); } .gv-activated .gv-tab-lg-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-tab-lg-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-tab-lg-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-tab-lg-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-tab-lg-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-lg-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-lg-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-lg-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-lg-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-tab-lg-border-0 { border: none !important; } .gv-activated .gv-tab-lg-radius { border-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-tab-lg-radius-0 { border-radius: 0 !important; } .gv-activated .gv-tab-lg-flex-row { flex-direction: row; } .gv-activated .gv-tab-lg-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-tab-lg-flex-col { flex-direction: column; } .gv-activated .gv-tab-lg-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-tab-lg-content-center { align-content: center; } .gv-activated .gv-tab-lg-items-start { align-items: flex-start; } .gv-activated .gv-tab-lg-items-end { align-items: flex-end; } .gv-activated .gv-tab-lg-items-center { align-items: center; } .gv-activated .gv-tab-lg-items-baseline { align-items: baseline; } .gv-activated .gv-tab-lg-items-stretch { align-items: stretch; } .gv-activated .gv-tab-lg-justify-start { justify-content: flex-start; } .gv-activated .gv-tab-lg-justify-end { justify-content: flex-end; } .gv-activated .gv-tab-lg-justify-center { justify-content: center; } .gv-activated .gv-tab-lg-justify-between { justify-content: space-between; } .gv-activated .gv-tab-lg-justify-around { justify-content: space-around; } .gv-activated .gv-tab-lg-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-tab-lg-order-first { order: -1; } .gv-activated .gv-tab-lg-order-last { order: 99; } .gv-activated .gv-tab-lg-gap-xs { gap: 4px; } .gv-activated .gv-tab-lg-gap-sm { gap: 8px; } .gv-activated .gv-tab-lg-gap-md { gap: 16px; } .gv-activated .gv-tab-lg-gap-lg { gap: 24px; } .gv-activated .gv-tab-lg-gap-0 { gap: 0 !important; } .gv-activated .gv-tab-lg-flex { display: flex; } .gv-activated .gv-tab-lg-block { display: block; } .gv-activated .gv-tab-lg-inline { display: inline; } .gv-activated .gv-tab-lg-inline-block { display: inline-block; } .gv-activated .gv-tab-lg-hidden { display: none; } .gv-activated .gv-tab-lg-invisible { visibility: hidden; } .gv-activated .gv-tab-lg-collapse { visibility: collapse; } .gv-activated .gv-tab-lg-m-0 { margin: 0 !important; } .gv-activated .gv-tab-lg-mt-0 { margin-top: 0 !important; } .gv-activated .gv-tab-lg-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-tab-lg-ml-0 { margin-left: 0 !important; } .gv-activated .gv-tab-lg-mr-0 { margin-right: 0 !important; } .gv-activated .gv-tab-lg-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-tab-lg-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-tab-lg-m-xs { margin: 4px; } .gv-activated .gv-tab-lg-mt-xs { margin-top: 4px; } .gv-activated .gv-tab-lg-mb-xs { margin-bottom: 4px; } .gv-activated .gv-tab-lg-ml-xs { margin-left: 4px; } .gv-activated .gv-tab-lg-mr-xs { margin-right: 4px; } .gv-activated .gv-tab-lg-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-tab-lg-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-tab-lg-m-sm { margin: 8px; } .gv-activated .gv-tab-lg-mt-sm { margin-top: 8px; } .gv-activated .gv-tab-lg-mb-sm { margin-bottom: 8px; } .gv-activated .gv-tab-lg-ml-sm { margin-left: 8px; } .gv-activated .gv-tab-lg-mr-sm { margin-right: 8px; } .gv-activated .gv-tab-lg-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-tab-lg-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-tab-lg-m-md { margin: 16px; } .gv-activated .gv-tab-lg-mt-md { margin-top: 16px; } .gv-activated .gv-tab-lg-mb-md { margin-bottom: 16px; } .gv-activated .gv-tab-lg-ml-md { margin-left: 16px; } .gv-activated .gv-tab-lg-mr-md { margin-right: 16px; } .gv-activated .gv-tab-lg-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-tab-lg-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-tab-lg-m-lg { margin: 24px; } .gv-activated .gv-tab-lg-mt-lg { margin-top: 24px; } .gv-activated .gv-tab-lg-mb-lg { margin-bottom: 24px; } .gv-activated .gv-tab-lg-ml-lg { margin-left: 24px; } .gv-activated .gv-tab-lg-mr-lg { margin-right: 24px; } .gv-activated .gv-tab-lg-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-tab-lg-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-tab-lg-m-auto { margin: auto; } .gv-activated .gv-tab-lg-mt-auto { margin-top: auto; } .gv-activated .gv-tab-lg-mb-auto { margin-bottom: auto; } .gv-activated .gv-tab-lg-ml-auto { margin-left: auto; } .gv-activated .gv-tab-lg-mr-auto { margin-right: auto; } .gv-activated .gv-tab-lg-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-tab-lg-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-tab-lg-p-0 { padding: 0 !important; } .gv-activated .gv-tab-lg-pt-0 { padding-top: 0 !important; } .gv-activated .gv-tab-lg-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-tab-lg-pl-0 { padding-left: 0 !important; } .gv-activated .gv-tab-lg-pr-0 { padding-right: 0 !important; } .gv-activated .gv-tab-lg-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-tab-lg-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-tab-lg-p-xs { padding: 4px; } .gv-activated .gv-tab-lg-pt-xs { padding-top: 4px; } .gv-activated .gv-tab-lg-pb-xs { padding-bottom: 4px; } .gv-activated .gv-tab-lg-pl-xs { padding-left: 4px; } .gv-activated .gv-tab-lg-pr-xs { padding-right: 4px; } .gv-activated .gv-tab-lg-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-tab-lg-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-tab-lg-p-sm { padding: 8px; } .gv-activated .gv-tab-lg-pt-sm { padding-top: 8px; } .gv-activated .gv-tab-lg-pb-sm { padding-bottom: 8px; } .gv-activated .gv-tab-lg-pl-sm { padding-left: 8px; } .gv-activated .gv-tab-lg-pr-sm { padding-right: 8px; } .gv-activated .gv-tab-lg-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-tab-lg-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-tab-lg-p-md { padding: 16px; } .gv-activated .gv-tab-lg-pt-md { padding-top: 16px; } .gv-activated .gv-tab-lg-pb-md { padding-bottom: 16px; } .gv-activated .gv-tab-lg-pl-md { padding-left: 16px; } .gv-activated .gv-tab-lg-pr-md { padding-right: 16px; } .gv-activated .gv-tab-lg-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-tab-lg-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-tab-lg-p-lg { padding: 24px; } .gv-activated .gv-tab-lg-pt-lg { padding-top: 24px; } .gv-activated .gv-tab-lg-pb-lg { padding-bottom: 24px; } .gv-activated .gv-tab-lg-pl-lg { padding-left: 24px; } .gv-activated .gv-tab-lg-pr-lg { padding-right: 24px; } .gv-activated .gv-tab-lg-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-tab-lg-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-tab-lg-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-tab-lg-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-tab-lg-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-tab-lg-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-tab-lg-text-left { text-align: left; } .gv-activated .gv-tab-lg-text-center { text-align: center; } .gv-activated .gv-tab-lg-text-right { text-align: right; } } @media (max-width: 1023px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-max-tab-border { border: 1px solid var(--color-border); } .gv-activated .gv-max-tab-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-max-tab-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-max-tab-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-max-tab-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-max-tab-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-max-tab-border-0 { border: none !important; } .gv-activated .gv-max-tab-radius { border-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-tab-radius-0 { border-radius: 0 !important; } .gv-activated .gv-max-tab-flex-row { flex-direction: row; } .gv-activated .gv-max-tab-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-max-tab-flex-col { flex-direction: column; } .gv-activated .gv-max-tab-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-max-tab-content-center { align-content: center; } .gv-activated .gv-max-tab-items-start { align-items: flex-start; } .gv-activated .gv-max-tab-items-end { align-items: flex-end; } .gv-activated .gv-max-tab-items-center { align-items: center; } .gv-activated .gv-max-tab-items-baseline { align-items: baseline; } .gv-activated .gv-max-tab-items-stretch { align-items: stretch; } .gv-activated .gv-max-tab-justify-start { justify-content: flex-start; } .gv-activated .gv-max-tab-justify-end { justify-content: flex-end; } .gv-activated .gv-max-tab-justify-center { justify-content: center; } .gv-activated .gv-max-tab-justify-between { justify-content: space-between; } .gv-activated .gv-max-tab-justify-around { justify-content: space-around; } .gv-activated .gv-max-tab-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-max-tab-order-first { order: -1; } .gv-activated .gv-max-tab-order-last { order: 99; } .gv-activated .gv-max-tab-gap-xs { gap: 4px; } .gv-activated .gv-max-tab-gap-sm { gap: 8px; } .gv-activated .gv-max-tab-gap-md { gap: 16px; } .gv-activated .gv-max-tab-gap-lg { gap: 24px; } .gv-activated .gv-max-tab-gap-0 { gap: 0 !important; } .gv-activated .gv-max-tab-flex { display: flex; } .gv-activated .gv-max-tab-block { display: block; } .gv-activated .gv-max-tab-inline { display: inline; } .gv-activated .gv-max-tab-inline-block { display: inline-block; } .gv-activated .gv-max-tab-hidden { display: none; } .gv-activated .gv-max-tab-invisible { visibility: hidden; } .gv-activated .gv-max-tab-collapse { visibility: collapse; } .gv-activated .gv-max-tab-m-0 { margin: 0 !important; } .gv-activated .gv-max-tab-mt-0 { margin-top: 0 !important; } .gv-activated .gv-max-tab-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-max-tab-ml-0 { margin-left: 0 !important; } .gv-activated .gv-max-tab-mr-0 { margin-right: 0 !important; } .gv-activated .gv-max-tab-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-tab-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-tab-m-xs { margin: 4px; } .gv-activated .gv-max-tab-mt-xs { margin-top: 4px; } .gv-activated .gv-max-tab-mb-xs { margin-bottom: 4px; } .gv-activated .gv-max-tab-ml-xs { margin-left: 4px; } .gv-activated .gv-max-tab-mr-xs { margin-right: 4px; } .gv-activated .gv-max-tab-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-max-tab-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-max-tab-m-sm { margin: 8px; } .gv-activated .gv-max-tab-mt-sm { margin-top: 8px; } .gv-activated .gv-max-tab-mb-sm { margin-bottom: 8px; } .gv-activated .gv-max-tab-ml-sm { margin-left: 8px; } .gv-activated .gv-max-tab-mr-sm { margin-right: 8px; } .gv-activated .gv-max-tab-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-max-tab-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-max-tab-m-md { margin: 16px; } .gv-activated .gv-max-tab-mt-md { margin-top: 16px; } .gv-activated .gv-max-tab-mb-md { margin-bottom: 16px; } .gv-activated .gv-max-tab-ml-md { margin-left: 16px; } .gv-activated .gv-max-tab-mr-md { margin-right: 16px; } .gv-activated .gv-max-tab-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-max-tab-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-max-tab-m-lg { margin: 24px; } .gv-activated .gv-max-tab-mt-lg { margin-top: 24px; } .gv-activated .gv-max-tab-mb-lg { margin-bottom: 24px; } .gv-activated .gv-max-tab-ml-lg { margin-left: 24px; } .gv-activated .gv-max-tab-mr-lg { margin-right: 24px; } .gv-activated .gv-max-tab-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-max-tab-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-max-tab-m-auto { margin: auto; } .gv-activated .gv-max-tab-mt-auto { margin-top: auto; } .gv-activated .gv-max-tab-mb-auto { margin-bottom: auto; } .gv-activated .gv-max-tab-ml-auto { margin-left: auto; } .gv-activated .gv-max-tab-mr-auto { margin-right: auto; } .gv-activated .gv-max-tab-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-max-tab-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-max-tab-p-0 { padding: 0 !important; } .gv-activated .gv-max-tab-pt-0 { padding-top: 0 !important; } .gv-activated .gv-max-tab-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-max-tab-pl-0 { padding-left: 0 !important; } .gv-activated .gv-max-tab-pr-0 { padding-right: 0 !important; } .gv-activated .gv-max-tab-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-tab-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-tab-p-xs { padding: 4px; } .gv-activated .gv-max-tab-pt-xs { padding-top: 4px; } .gv-activated .gv-max-tab-pb-xs { padding-bottom: 4px; } .gv-activated .gv-max-tab-pl-xs { padding-left: 4px; } .gv-activated .gv-max-tab-pr-xs { padding-right: 4px; } .gv-activated .gv-max-tab-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-max-tab-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-max-tab-p-sm { padding: 8px; } .gv-activated .gv-max-tab-pt-sm { padding-top: 8px; } .gv-activated .gv-max-tab-pb-sm { padding-bottom: 8px; } .gv-activated .gv-max-tab-pl-sm { padding-left: 8px; } .gv-activated .gv-max-tab-pr-sm { padding-right: 8px; } .gv-activated .gv-max-tab-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-max-tab-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-max-tab-p-md { padding: 16px; } .gv-activated .gv-max-tab-pt-md { padding-top: 16px; } .gv-activated .gv-max-tab-pb-md { padding-bottom: 16px; } .gv-activated .gv-max-tab-pl-md { padding-left: 16px; } .gv-activated .gv-max-tab-pr-md { padding-right: 16px; } .gv-activated .gv-max-tab-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-max-tab-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-max-tab-p-lg { padding: 24px; } .gv-activated .gv-max-tab-pt-lg { padding-top: 24px; } .gv-activated .gv-max-tab-pb-lg { padding-bottom: 24px; } .gv-activated .gv-max-tab-pl-lg { padding-left: 24px; } .gv-activated .gv-max-tab-pr-lg { padding-right: 24px; } .gv-activated .gv-max-tab-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-max-tab-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-max-tab-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-max-tab-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-max-tab-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-max-tab-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-max-tab-text-left { text-align: left; } .gv-activated .gv-max-tab-text-center { text-align: center; } .gv-activated .gv-max-tab-text-right { text-align: right; } } @media (min-width: 1024px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-desk-border { border: 1px solid var(--color-border); } .gv-activated .gv-desk-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-desk-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-desk-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-desk-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-desk-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-border-0 { border: none !important; } .gv-activated .gv-desk-radius { border-radius: var(--border-radius); } .gv-activated .gv-desk-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-desk-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-desk-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-desk-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-desk-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-desk-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-desk-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-desk-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-desk-radius-0 { border-radius: 0 !important; } .gv-activated .gv-desk-flex-row { flex-direction: row; } .gv-activated .gv-desk-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-desk-flex-col { flex-direction: column; } .gv-activated .gv-desk-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-desk-content-center { align-content: center; } .gv-activated .gv-desk-items-start { align-items: flex-start; } .gv-activated .gv-desk-items-end { align-items: flex-end; } .gv-activated .gv-desk-items-center { align-items: center; } .gv-activated .gv-desk-items-baseline { align-items: baseline; } .gv-activated .gv-desk-items-stretch { align-items: stretch; } .gv-activated .gv-desk-justify-start { justify-content: flex-start; } .gv-activated .gv-desk-justify-end { justify-content: flex-end; } .gv-activated .gv-desk-justify-center { justify-content: center; } .gv-activated .gv-desk-justify-between { justify-content: space-between; } .gv-activated .gv-desk-justify-around { justify-content: space-around; } .gv-activated .gv-desk-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-desk-order-first { order: -1; } .gv-activated .gv-desk-order-last { order: 99; } .gv-activated .gv-desk-gap-xs { gap: 4px; } .gv-activated .gv-desk-gap-sm { gap: 8px; } .gv-activated .gv-desk-gap-md { gap: 16px; } .gv-activated .gv-desk-gap-lg { gap: 24px; } .gv-activated .gv-desk-gap-0 { gap: 0 !important; } .gv-activated .gv-desk-flex { display: flex; } .gv-activated .gv-desk-block { display: block; } .gv-activated .gv-desk-inline { display: inline; } .gv-activated .gv-desk-inline-block { display: inline-block; } .gv-activated .gv-desk-hidden { display: none; } .gv-activated .gv-desk-invisible { visibility: hidden; } .gv-activated .gv-desk-collapse { visibility: collapse; } .gv-activated .gv-desk-m-0 { margin: 0 !important; } .gv-activated .gv-desk-mt-0 { margin-top: 0 !important; } .gv-activated .gv-desk-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-desk-ml-0 { margin-left: 0 !important; } .gv-activated .gv-desk-mr-0 { margin-right: 0 !important; } .gv-activated .gv-desk-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-desk-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-desk-m-xs { margin: 4px; } .gv-activated .gv-desk-mt-xs { margin-top: 4px; } .gv-activated .gv-desk-mb-xs { margin-bottom: 4px; } .gv-activated .gv-desk-ml-xs { margin-left: 4px; } .gv-activated .gv-desk-mr-xs { margin-right: 4px; } .gv-activated .gv-desk-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-desk-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-desk-m-sm { margin: 8px; } .gv-activated .gv-desk-mt-sm { margin-top: 8px; } .gv-activated .gv-desk-mb-sm { margin-bottom: 8px; } .gv-activated .gv-desk-ml-sm { margin-left: 8px; } .gv-activated .gv-desk-mr-sm { margin-right: 8px; } .gv-activated .gv-desk-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-desk-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-desk-m-md { margin: 16px; } .gv-activated .gv-desk-mt-md { margin-top: 16px; } .gv-activated .gv-desk-mb-md { margin-bottom: 16px; } .gv-activated .gv-desk-ml-md { margin-left: 16px; } .gv-activated .gv-desk-mr-md { margin-right: 16px; } .gv-activated .gv-desk-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-desk-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-desk-m-lg { margin: 24px; } .gv-activated .gv-desk-mt-lg { margin-top: 24px; } .gv-activated .gv-desk-mb-lg { margin-bottom: 24px; } .gv-activated .gv-desk-ml-lg { margin-left: 24px; } .gv-activated .gv-desk-mr-lg { margin-right: 24px; } .gv-activated .gv-desk-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-desk-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-desk-m-auto { margin: auto; } .gv-activated .gv-desk-mt-auto { margin-top: auto; } .gv-activated .gv-desk-mb-auto { margin-bottom: auto; } .gv-activated .gv-desk-ml-auto { margin-left: auto; } .gv-activated .gv-desk-mr-auto { margin-right: auto; } .gv-activated .gv-desk-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-desk-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-desk-p-0 { padding: 0 !important; } .gv-activated .gv-desk-pt-0 { padding-top: 0 !important; } .gv-activated .gv-desk-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-desk-pl-0 { padding-left: 0 !important; } .gv-activated .gv-desk-pr-0 { padding-right: 0 !important; } .gv-activated .gv-desk-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-desk-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-desk-p-xs { padding: 4px; } .gv-activated .gv-desk-pt-xs { padding-top: 4px; } .gv-activated .gv-desk-pb-xs { padding-bottom: 4px; } .gv-activated .gv-desk-pl-xs { padding-left: 4px; } .gv-activated .gv-desk-pr-xs { padding-right: 4px; } .gv-activated .gv-desk-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-desk-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-desk-p-sm { padding: 8px; } .gv-activated .gv-desk-pt-sm { padding-top: 8px; } .gv-activated .gv-desk-pb-sm { padding-bottom: 8px; } .gv-activated .gv-desk-pl-sm { padding-left: 8px; } .gv-activated .gv-desk-pr-sm { padding-right: 8px; } .gv-activated .gv-desk-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-desk-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-desk-p-md { padding: 16px; } .gv-activated .gv-desk-pt-md { padding-top: 16px; } .gv-activated .gv-desk-pb-md { padding-bottom: 16px; } .gv-activated .gv-desk-pl-md { padding-left: 16px; } .gv-activated .gv-desk-pr-md { padding-right: 16px; } .gv-activated .gv-desk-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-desk-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-desk-p-lg { padding: 24px; } .gv-activated .gv-desk-pt-lg { padding-top: 24px; } .gv-activated .gv-desk-pb-lg { padding-bottom: 24px; } .gv-activated .gv-desk-pl-lg { padding-left: 24px; } .gv-activated .gv-desk-pr-lg { padding-right: 24px; } .gv-activated .gv-desk-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-desk-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-desk-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-desk-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-desk-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-desk-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-desk-text-left { text-align: left; } .gv-activated .gv-desk-text-center { text-align: center; } .gv-activated .gv-desk-text-right { text-align: right; } } @media (max-width: 1279px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-max-desk-sm-border { border: 1px solid var(--color-border); } .gv-activated .gv-max-desk-sm-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-max-desk-sm-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-max-desk-sm-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-max-desk-sm-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-max-desk-sm-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-max-desk-sm-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-max-desk-sm-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-max-desk-sm-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-max-desk-sm-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-max-desk-sm-border-0 { border: none !important; } .gv-activated .gv-max-desk-sm-radius { border-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-max-desk-sm-radius-0 { border-radius: 0 !important; } .gv-activated .gv-max-desk-sm-flex-row { flex-direction: row; } .gv-activated .gv-max-desk-sm-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-max-desk-sm-flex-col { flex-direction: column; } .gv-activated .gv-max-desk-sm-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-max-desk-sm-content-center { align-content: center; } .gv-activated .gv-max-desk-sm-items-start { align-items: flex-start; } .gv-activated .gv-max-desk-sm-items-end { align-items: flex-end; } .gv-activated .gv-max-desk-sm-items-center { align-items: center; } .gv-activated .gv-max-desk-sm-items-baseline { align-items: baseline; } .gv-activated .gv-max-desk-sm-items-stretch { align-items: stretch; } .gv-activated .gv-max-desk-sm-justify-start { justify-content: flex-start; } .gv-activated .gv-max-desk-sm-justify-end { justify-content: flex-end; } .gv-activated .gv-max-desk-sm-justify-center { justify-content: center; } .gv-activated .gv-max-desk-sm-justify-between { justify-content: space-between; } .gv-activated .gv-max-desk-sm-justify-around { justify-content: space-around; } .gv-activated .gv-max-desk-sm-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-max-desk-sm-order-first { order: -1; } .gv-activated .gv-max-desk-sm-order-last { order: 99; } .gv-activated .gv-max-desk-sm-gap-xs { gap: 4px; } .gv-activated .gv-max-desk-sm-gap-sm { gap: 8px; } .gv-activated .gv-max-desk-sm-gap-md { gap: 16px; } .gv-activated .gv-max-desk-sm-gap-lg { gap: 24px; } .gv-activated .gv-max-desk-sm-gap-0 { gap: 0 !important; } .gv-activated .gv-max-desk-sm-flex { display: flex; } .gv-activated .gv-max-desk-sm-block { display: block; } .gv-activated .gv-max-desk-sm-inline { display: inline; } .gv-activated .gv-max-desk-sm-inline-block { display: inline-block; } .gv-activated .gv-max-desk-sm-hidden { display: none; } .gv-activated .gv-max-desk-sm-invisible { visibility: hidden; } .gv-activated .gv-max-desk-sm-collapse { visibility: collapse; } .gv-activated .gv-max-desk-sm-m-0 { margin: 0 !important; } .gv-activated .gv-max-desk-sm-mt-0 { margin-top: 0 !important; } .gv-activated .gv-max-desk-sm-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-max-desk-sm-ml-0 { margin-left: 0 !important; } .gv-activated .gv-max-desk-sm-mr-0 { margin-right: 0 !important; } .gv-activated .gv-max-desk-sm-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-desk-sm-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-max-desk-sm-m-xs { margin: 4px; } .gv-activated .gv-max-desk-sm-mt-xs { margin-top: 4px; } .gv-activated .gv-max-desk-sm-mb-xs { margin-bottom: 4px; } .gv-activated .gv-max-desk-sm-ml-xs { margin-left: 4px; } .gv-activated .gv-max-desk-sm-mr-xs { margin-right: 4px; } .gv-activated .gv-max-desk-sm-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-max-desk-sm-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-max-desk-sm-m-sm { margin: 8px; } .gv-activated .gv-max-desk-sm-mt-sm { margin-top: 8px; } .gv-activated .gv-max-desk-sm-mb-sm { margin-bottom: 8px; } .gv-activated .gv-max-desk-sm-ml-sm { margin-left: 8px; } .gv-activated .gv-max-desk-sm-mr-sm { margin-right: 8px; } .gv-activated .gv-max-desk-sm-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-max-desk-sm-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-max-desk-sm-m-md { margin: 16px; } .gv-activated .gv-max-desk-sm-mt-md { margin-top: 16px; } .gv-activated .gv-max-desk-sm-mb-md { margin-bottom: 16px; } .gv-activated .gv-max-desk-sm-ml-md { margin-left: 16px; } .gv-activated .gv-max-desk-sm-mr-md { margin-right: 16px; } .gv-activated .gv-max-desk-sm-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-max-desk-sm-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-max-desk-sm-m-lg { margin: 24px; } .gv-activated .gv-max-desk-sm-mt-lg { margin-top: 24px; } .gv-activated .gv-max-desk-sm-mb-lg { margin-bottom: 24px; } .gv-activated .gv-max-desk-sm-ml-lg { margin-left: 24px; } .gv-activated .gv-max-desk-sm-mr-lg { margin-right: 24px; } .gv-activated .gv-max-desk-sm-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-max-desk-sm-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-max-desk-sm-m-auto { margin: auto; } .gv-activated .gv-max-desk-sm-mt-auto { margin-top: auto; } .gv-activated .gv-max-desk-sm-mb-auto { margin-bottom: auto; } .gv-activated .gv-max-desk-sm-ml-auto { margin-left: auto; } .gv-activated .gv-max-desk-sm-mr-auto { margin-right: auto; } .gv-activated .gv-max-desk-sm-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-max-desk-sm-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-max-desk-sm-p-0 { padding: 0 !important; } .gv-activated .gv-max-desk-sm-pt-0 { padding-top: 0 !important; } .gv-activated .gv-max-desk-sm-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-max-desk-sm-pl-0 { padding-left: 0 !important; } .gv-activated .gv-max-desk-sm-pr-0 { padding-right: 0 !important; } .gv-activated .gv-max-desk-sm-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-desk-sm-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-max-desk-sm-p-xs { padding: 4px; } .gv-activated .gv-max-desk-sm-pt-xs { padding-top: 4px; } .gv-activated .gv-max-desk-sm-pb-xs { padding-bottom: 4px; } .gv-activated .gv-max-desk-sm-pl-xs { padding-left: 4px; } .gv-activated .gv-max-desk-sm-pr-xs { padding-right: 4px; } .gv-activated .gv-max-desk-sm-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-max-desk-sm-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-max-desk-sm-p-sm { padding: 8px; } .gv-activated .gv-max-desk-sm-pt-sm { padding-top: 8px; } .gv-activated .gv-max-desk-sm-pb-sm { padding-bottom: 8px; } .gv-activated .gv-max-desk-sm-pl-sm { padding-left: 8px; } .gv-activated .gv-max-desk-sm-pr-sm { padding-right: 8px; } .gv-activated .gv-max-desk-sm-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-max-desk-sm-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-max-desk-sm-p-md { padding: 16px; } .gv-activated .gv-max-desk-sm-pt-md { padding-top: 16px; } .gv-activated .gv-max-desk-sm-pb-md { padding-bottom: 16px; } .gv-activated .gv-max-desk-sm-pl-md { padding-left: 16px; } .gv-activated .gv-max-desk-sm-pr-md { padding-right: 16px; } .gv-activated .gv-max-desk-sm-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-max-desk-sm-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-max-desk-sm-p-lg { padding: 24px; } .gv-activated .gv-max-desk-sm-pt-lg { padding-top: 24px; } .gv-activated .gv-max-desk-sm-pb-lg { padding-bottom: 24px; } .gv-activated .gv-max-desk-sm-pl-lg { padding-left: 24px; } .gv-activated .gv-max-desk-sm-pr-lg { padding-right: 24px; } .gv-activated .gv-max-desk-sm-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-max-desk-sm-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-max-desk-sm-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-max-desk-sm-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-max-desk-sm-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-max-desk-sm-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-max-desk-sm-text-left { text-align: left; } .gv-activated .gv-max-desk-sm-text-center { text-align: center; } .gv-activated .gv-max-desk-sm-text-right { text-align: right; } } @media (min-width: 1280px ) { .gv-activated { /* Border */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .gv-activated .gv-desk-lg-border { border: 1px solid var(--color-border); } .gv-activated .gv-desk-lg-border-t { border-top: 1px solid var(--color-border); } .gv-activated .gv-desk-lg-border-b { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-desk-lg-border-l { border-left: 1px solid var(--color-border); } .gv-activated .gv-desk-lg-border-r { border-right: 1px solid var(--color-border); } .gv-activated .gv-desk-lg-border-alt { border: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-lg-border-alt-t { border-top: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-lg-border-alt-b { border-bottom: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-lg-border-alt-l { border-left: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-lg-border-alt-r { border-right: 1px solid var(--color-border-alt); } .gv-activated .gv-desk-lg-border-0 { border: none !important; } .gv-activated .gv-desk-lg-radius { border-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-tl { border-top-left-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-tr { border-top-right-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-bl { border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-br { border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-t { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-r { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-b { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-l { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .gv-activated .gv-desk-lg-radius-0 { border-radius: 0 !important; } .gv-activated .gv-desk-lg-flex-row { flex-direction: row; } .gv-activated .gv-desk-lg-flex-row-reverse { flex-direction: row-reverse; } .gv-activated .gv-desk-lg-flex-col { flex-direction: column; } .gv-activated .gv-desk-lg-flex-col-reverse { flex-direction: column-reverse; } .gv-activated .gv-desk-lg-content-center { align-content: center; } .gv-activated .gv-desk-lg-items-start { align-items: flex-start; } .gv-activated .gv-desk-lg-items-end { align-items: flex-end; } .gv-activated .gv-desk-lg-items-center { align-items: center; } .gv-activated .gv-desk-lg-items-baseline { align-items: baseline; } .gv-activated .gv-desk-lg-items-stretch { align-items: stretch; } .gv-activated .gv-desk-lg-justify-start { justify-content: flex-start; } .gv-activated .gv-desk-lg-justify-end { justify-content: flex-end; } .gv-activated .gv-desk-lg-justify-center { justify-content: center; } .gv-activated .gv-desk-lg-justify-between { justify-content: space-between; } .gv-activated .gv-desk-lg-justify-around { justify-content: space-around; } .gv-activated .gv-desk-lg-justify-evenly { justify-content: space-evenly; } .gv-activated .gv-desk-lg-order-first { order: -1; } .gv-activated .gv-desk-lg-order-last { order: 99; } .gv-activated .gv-desk-lg-gap-xs { gap: 4px; } .gv-activated .gv-desk-lg-gap-sm { gap: 8px; } .gv-activated .gv-desk-lg-gap-md { gap: 16px; } .gv-activated .gv-desk-lg-gap-lg { gap: 24px; } .gv-activated .gv-desk-lg-gap-0 { gap: 0 !important; } .gv-activated .gv-desk-lg-flex { display: flex; } .gv-activated .gv-desk-lg-block { display: block; } .gv-activated .gv-desk-lg-inline { display: inline; } .gv-activated .gv-desk-lg-inline-block { display: inline-block; } .gv-activated .gv-desk-lg-hidden { display: none; } .gv-activated .gv-desk-lg-invisible { visibility: hidden; } .gv-activated .gv-desk-lg-collapse { visibility: collapse; } .gv-activated .gv-desk-lg-m-0 { margin: 0 !important; } .gv-activated .gv-desk-lg-mt-0 { margin-top: 0 !important; } .gv-activated .gv-desk-lg-mb-0 { margin-bottom: 0 !important; } .gv-activated .gv-desk-lg-ml-0 { margin-left: 0 !important; } .gv-activated .gv-desk-lg-mr-0 { margin-right: 0 !important; } .gv-activated .gv-desk-lg-mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-desk-lg-my-0 { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-desk-lg-m-xs { margin: 4px; } .gv-activated .gv-desk-lg-mt-xs { margin-top: 4px; } .gv-activated .gv-desk-lg-mb-xs { margin-bottom: 4px; } .gv-activated .gv-desk-lg-ml-xs { margin-left: 4px; } .gv-activated .gv-desk-lg-mr-xs { margin-right: 4px; } .gv-activated .gv-desk-lg-mx-xs { margin-left: 4px; margin-right: 4px; } .gv-activated .gv-desk-lg-my-xs { margin-top: 4px; margin-bottom: 4px; } .gv-activated .gv-desk-lg-m-sm { margin: 8px; } .gv-activated .gv-desk-lg-mt-sm { margin-top: 8px; } .gv-activated .gv-desk-lg-mb-sm { margin-bottom: 8px; } .gv-activated .gv-desk-lg-ml-sm { margin-left: 8px; } .gv-activated .gv-desk-lg-mr-sm { margin-right: 8px; } .gv-activated .gv-desk-lg-mx-sm { margin-left: 8px; margin-right: 8px; } .gv-activated .gv-desk-lg-my-sm { margin-top: 8px; margin-bottom: 8px; } .gv-activated .gv-desk-lg-m-md { margin: 16px; } .gv-activated .gv-desk-lg-mt-md { margin-top: 16px; } .gv-activated .gv-desk-lg-mb-md { margin-bottom: 16px; } .gv-activated .gv-desk-lg-ml-md { margin-left: 16px; } .gv-activated .gv-desk-lg-mr-md { margin-right: 16px; } .gv-activated .gv-desk-lg-mx-md { margin-left: 16px; margin-right: 16px; } .gv-activated .gv-desk-lg-my-md { margin-top: 16px; margin-bottom: 16px; } .gv-activated .gv-desk-lg-m-lg { margin: 24px; } .gv-activated .gv-desk-lg-mt-lg { margin-top: 24px; } .gv-activated .gv-desk-lg-mb-lg { margin-bottom: 24px; } .gv-activated .gv-desk-lg-ml-lg { margin-left: 24px; } .gv-activated .gv-desk-lg-mr-lg { margin-right: 24px; } .gv-activated .gv-desk-lg-mx-lg { margin-left: 24px; margin-right: 24px; } .gv-activated .gv-desk-lg-my-lg { margin-top: 24px; margin-bottom: 24px; } .gv-activated .gv-desk-lg-m-auto { margin: auto; } .gv-activated .gv-desk-lg-mt-auto { margin-top: auto; } .gv-activated .gv-desk-lg-mb-auto { margin-bottom: auto; } .gv-activated .gv-desk-lg-ml-auto { margin-left: auto; } .gv-activated .gv-desk-lg-mr-auto { margin-right: auto; } .gv-activated .gv-desk-lg-mx-auto { margin-left: auto; margin-right: auto; } .gv-activated .gv-desk-lg-my-auto { margin-top: auto; margin-bottom: auto; } .gv-activated .gv-desk-lg-p-0 { padding: 0 !important; } .gv-activated .gv-desk-lg-pt-0 { padding-top: 0 !important; } .gv-activated .gv-desk-lg-pb-0 { padding-bottom: 0 !important; } .gv-activated .gv-desk-lg-pl-0 { padding-left: 0 !important; } .gv-activated .gv-desk-lg-pr-0 { padding-right: 0 !important; } .gv-activated .gv-desk-lg-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-desk-lg-py-0 { padding-left: 0 !important; padding-right: 0 !important; } .gv-activated .gv-desk-lg-p-xs { padding: 4px; } .gv-activated .gv-desk-lg-pt-xs { padding-top: 4px; } .gv-activated .gv-desk-lg-pb-xs { padding-bottom: 4px; } .gv-activated .gv-desk-lg-pl-xs { padding-left: 4px; } .gv-activated .gv-desk-lg-pr-xs { padding-right: 4px; } .gv-activated .gv-desk-lg-px-xs { padding-left: 4px; padding-right: 4px; } .gv-activated .gv-desk-lg-py-xs { padding-top: 4px; padding-bottom: 4px; } .gv-activated .gv-desk-lg-p-sm { padding: 8px; } .gv-activated .gv-desk-lg-pt-sm { padding-top: 8px; } .gv-activated .gv-desk-lg-pb-sm { padding-bottom: 8px; } .gv-activated .gv-desk-lg-pl-sm { padding-left: 8px; } .gv-activated .gv-desk-lg-pr-sm { padding-right: 8px; } .gv-activated .gv-desk-lg-px-sm { padding-left: 8px; padding-right: 8px; } .gv-activated .gv-desk-lg-py-sm { padding-top: 8px; padding-bottom: 8px; } .gv-activated .gv-desk-lg-p-md { padding: 16px; } .gv-activated .gv-desk-lg-pt-md { padding-top: 16px; } .gv-activated .gv-desk-lg-pb-md { padding-bottom: 16px; } .gv-activated .gv-desk-lg-pl-md { padding-left: 16px; } .gv-activated .gv-desk-lg-pr-md { padding-right: 16px; } .gv-activated .gv-desk-lg-px-md { padding-left: 16px; padding-right: 16px; } .gv-activated .gv-desk-lg-py-md { padding-top: 16px; padding-bottom: 16px; } .gv-activated .gv-desk-lg-p-lg { padding: 24px; } .gv-activated .gv-desk-lg-pt-lg { padding-top: 24px; } .gv-activated .gv-desk-lg-pb-lg { padding-bottom: 24px; } .gv-activated .gv-desk-lg-pl-lg { padding-left: 24px; } .gv-activated .gv-desk-lg-pr-lg { padding-right: 24px; } .gv-activated .gv-desk-lg-px-lg { padding-left: 24px; padding-right: 24px; } .gv-activated .gv-desk-lg-py-lg { padding-top: 24px; padding-bottom: 24px; } .gv-activated .gv-desk-lg-stack-space-xs > *:not(:last-child) { margin-bottom: 4px; } .gv-activated .gv-desk-lg-stack-space-sm > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-desk-lg-stack-space-md > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-desk-lg-stack-space-lg > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-desk-lg-text-left { text-align: left; } .gv-activated .gv-desk-lg-text-center { text-align: center; } .gv-activated .gv-desk-lg-text-right { text-align: right; } } /* Brand bootstrapping */ .gv-activated { /* Universal sizes */ --size-xs: 4px; --size-sm: 8px; --size-md: 16px; --size-lg: 24px; --size-xl: 48px; --size-border: 1px; /* Fluid */ --size-fluid-max-value: 48; --size-fluid-min-value: 24; /* Icon sizes */ --size-icon-sm: 20px; --size-icon-md: 24px; /* Tile sizes */ --size-tile-xs: 24px; --size-tile-sm: 48px; --size-tile-md: 72px; --size-tile-lg: 96px; --size-tile-xl: 144px; /* Input sizes */ --size-input-sm: 134px; --size-input-md: 270px; --size-input-lg: 420px; /* Font size rem values */ --font-size-heading-xxxl-max: 3.75; /* 60px */ --font-size-heading-xxxl-min: 1.625; /* 26px */ --font-size-heading-xxl-max: 3; /* 48px */ --font-size-heading-xxl-min: 1.375; /* 22px */ --font-size-heading-xl-max: 2.5; /* 40px */ --font-size-heading-xl-min: 1.125; /* 18px */ --font-size-heading-lg-max: 2; /* 32px */ --font-size-heading-lg-min: 1; /* 16px */ --font-size-heading-md-max: 1.75; /* 28px */ --font-size-heading-md-min: 1; /* 16px */ --font-size-heading-sm-max: 1.5; /* 24px */ --font-size-heading-sm-min: 0.875; /* 14px */ --font-size-heading-xs-max: 1.25; /* 20px */ --font-size-heading-xs-min: 0.875; /* 14px */ --font-size-text-xl-max: 1.5; /* 24px */ --font-size-text-xl-min: 1; /* 16px */ --font-size-text-lg-max: 1.125; /* 18px */ --font-size-text-lg-min: 0.875; /* 14px */ --font-size-text-md-max: 1; /* 16px */ --font-size-text-md-min: 0.875; /* 14px */ --font-size-text-sm: 0.875; /* 14px */ --font-size-caption-lg: 0.75; /* 12px */ --font-size-caption-sm: 0.625; /* 10px */ /* Letterspacing px values */ --letterspacing-heading-xxxl-max: 0; --letterspacing-heading-xxxl-min: 0.04; --letterspacing-heading-xxl-max: 0; --letterspacing-heading-xxl-min: 0.04; --letterspacing-heading-xl-max: 0.1; --letterspacing-heading-xl-min: 0; --letterspacing-heading-lg-max: 0.05; --letterspacing-heading-lg-min: 0; --letterspacing-heading-md-max: 0.04; --letterspacing-heading-md-min: 0.05; --letterspacing-heading-sm-max: 0.04; --letterspacing-heading-sm-min: 0.05; --letterspacing-heading-xs-max: 0.03; --letterspacing-heading-xs-min: 0.05; --letterspacing-text-lg-max: 0; --letterspacing-text-lg-min: 0.035; --letterspacing-text-md-max: 0.08; --letterspacing-text-md-min: 0.035; /* Font family */ --font-heading-storefront: plusjakartasans, arial, verdana, sans-serif; /* Font weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-heading-default: var(--font-weight-bold); --font-weight-heading-storefront: var(--font-weight-semibold); --font-weight-heading: var(--font-weight-heading-default); /* Line-heights */ --line-height-body: 1.5; --line-height-heading: 1.3; --line-height-heading-xxxl: var(--line-height-heading); --line-height-heading-xxl: var(--line-height-heading); --line-height-heading-xl: var(--line-height-heading); --line-height-heading-lg: var(--line-height-heading); --line-height-heading-md: var(--line-height-heading); --line-height-heading-sm: var(--line-height-heading); --line-height-heading-xs: var(--line-height-heading); /** * Generic colors, these are defined by the gravity design system. If you want the brand specific colors, use the * "[brand]-styles.less" file. */ --color-gray-100: #ffffff; --color-gray-200: #f7f7f7; --color-gray-250: #f1f1f1; --color-gray-300: #e2e2e2; --color-gray-400: #cecece; --color-gray-500: #69686b; --color-gray-600: #3a383e; --color-gray-650: #312f34; --color-gray-700: #282629; --color-gray-800: #1e1d1f; --color-gray-900: #141414; /* On fixed */ --color-on-fixed-white: var(--color-gray-100); --color-on-fixed-black: var(--color-gray-900); --color-on-fixed-alternative: var(--color-gray-500); /* On body */ --color-body-on-default: var(--color-gray-900); --color-body-on-alternative: var(--color-gray-500); --color-body-on-inverted: var(--color-gray-200); --color-body-on-placeholder: var(--color-gray-500); --color-body-on-disabled: rgba(20, 20, 20, 0.5); --color-body-on-deleted: rgba(20, 20, 20, 0.8); /* Button */ --color-button-bg-primary: var(--color-primary); --color-button-bg-cta: var(--color-cta); --color-button-bg-upgrade: #733183; --color-button-border-secondary: var(--color-primary); --color-button-fg-on: var(--color-on-fixed-white); --color-button-fg-on-primary: var(--color-button-fg-on); --color-button-fg-on-cta: var(--color-button-fg-on); /* Icon */ --color-icon-upgrade-bg: #733183; --color-icon-upgrade-flash: var(--color-gray-100); /* Tile */ --color-tile-100: var(--color-gray-200); --color-tile-200: var(--color-gray-300); --color-tile-bg: var(--color-surface-bright); --color-tile-radius: 8px; --color-tile-shadow-color: rgba(20, 20, 20, 0.15); --color-tile-box-shadow: 0 2px 8px var(--color-tile-shadow-color); /* Chart */ --color-chart-100: #0066aa; --color-chart-200: #fec600; --color-chart-300: #63528d; --color-chart-400: #029697; --color-chart-500: #965592; --color-chart-600: #7ebdf0; --color-chart-700: #c55986; --color-chart-800: #89a8c2; --color-chart-neutral: #cecece; --color-chart-100-hover: #004777; --color-chart-200-hover: #b28b00; --color-chart-300-hover: #453963; --color-chart-400-hover: #01696a; --color-chart-500-hover: #693c66; --color-chart-600-hover: #5884a8; --color-chart-700-hover: #9e476b; --color-chart-800-hover: #6e869b; --color-chart-neutral-hover: #909090; /* Link */ --color-link: var(--color-body-on-default); /* Surface */ --color-surface-bright: var(--color-gray-100); --color-surface-dim: var(--color-gray-200); --color-surface-toned: var(--color-gray-250); --color-surface-muted: var(--color-gray-300); --color-surface-inverted: var(--color-gray-700); --color-surface-form: var(--color-gray-200); --color-surface-form-disabled: rgba(247, 247, 247, 0.5); --color-surface-form-deleted: rgba(248, 217, 221, 0.5); --color-surface-highlight: var(--color-state-active); --color-surface-core: var(--color-surface-dim); --color-surface-core-light: var(--color-surface-dim); --color-surface-accent: #fec600; --color-surface-accent-light: #fffdf8; --color-surface-contrast: var(--color-gray-800); --on-surface-contrast: var(--color-on-fixed-white); /* Illustration */ --color-illustration-background: var(--color-gray-100); --color-illustration-gray: var(--color-gray-200); --color-illustration-line: var(--color-gray-900); /* Shades */ --color-overlay-dark: rgba(20, 20, 20, 0.6); --color-overlay-light: rgba(255, 255, 255, 0.9); --color-shadow-subtle: 0 1px 1px 0 rgba(20, 20, 20, 0.05); --color-shadow-elevated: 0 2px 2px 0 rgba(20, 20, 20, 0.05); /* Opacity */ --opacity-active-elements: 0.7; --opacity-disabled-elements: 0.5; /** * Signal colors, these are not separated by brand. * They are used in things like badges and notices. * While it may seem like there is duplication here with brand colors, these are fixed between brands. */ --color-signal-alert: #b30016; --color-signal-alert-light: #f8d9dd; --color-signal-info: #0066aa; --color-signal-info-light: #d9ebf7; --color-signal-success: #467412; --color-signal-success-light: #ddedca; --color-signal-warning: #a35700; --color-signal-warning-light: #ffedd9; --color-signal-upgrade-light: #ecdfed; /* Borders */ --color-border: var(--color-gray-400); --color-border-alt: var(--color-gray-300); --color-border-form: var(--color-border); --color-border-form-disabled: rgba(206, 206, 206, 0.5); --color-border-form-deleted: var(--color-border-form-disabled); --border-radius: 6px; --input-radius: var(--border-radius); --card-radius: var(--border-radius); --notice-radius: var(--border-radius); --chip-radius: 100px; --inner-container-radius: 6px; --outer-container-radius: 12px; /* Form */ --button-radius: var(--border-radius); --button-padding-lr: var(--size-md); --button-padding-tb: var(--size-sm); --color-state-form-active: #0066aa; --color-fg-form-on: var(--color-gray-100); --color-validation-error: var(--color-signal-alert); --form-element-height: 48px; --form-max-width: 700px; /* Focus */ --color-state-focus-visible: var(--color-state-form-active); /* Zebra */ --color-zebra-odd: var(--color-surface-dim); --color-zebra-even: var(--color-surface-bright); --color-zebra-hover: var(--color-state-hover); /* Navigation */ --navigation-bar-height: 56px; /* Text */ --text-max-width: 700px; /* Tables */ --color-recommended-bg: var(--color-button-bg-cta); --color-recommended-fg-on: var(--color-button-fg-on-cta); --features-table-max-width: 672px; /* Storefront sections */ --section-y-max-value: 144; --section-y-min-value: 48; --section-x-max-value: 120; --section-x-min-value: 24; --section-gap-max-value: 96; --section-gap-min-value: 48; --storefront-card-bg: var(--color-surface-dim); --storefront-card-text: var(--color-body-on-default); --color-primary: #fec600; --color-secondary: #ffffff; --color-cta: var(--color-primary); --color-illustration-100: #ffffff; --color-illustration-200: #fff7d9; --color-illustration-300: #ffeba6; --color-state-active: #fff9e5; --color-state-hover: #fffcf2; --color-state-focus: #feda59; --color-button-fg-on: var(--color-on-fixed-black); --color-loader-primary: var(--color-primary); --color-loader-secondary: #ffeeb3; /* Tile */ --color-tile-100: #fec600; --color-tile-200: #fae394; } .gv-activated.gv-dark-mode { /* On body */ --color-body-on-default: var(--color-gray-200); --color-body-on-alternative: var(--color-gray-400); --color-body-on-inverted: var(--color-gray-900); --color-body-on-placeholder: var(--color-gray-400); --color-body-on-disabled: rgba(247, 247, 247, 0.5); --color-body-on-deleted: rgba(247, 247, 247, 0.8); /* Surface */ --color-surface-bright: var(--color-gray-700); --color-surface-dim: var(--color-gray-800); --color-surface-toned: var(--color-gray-650); --color-surface-muted: var(--color-gray-600); --color-surface-inverted: var(--color-gray-100); --color-surface-form: var(--color-gray-600); --color-surface-form-disabled: rgba(58, 56, 62, 0.5); --color-surface-form-deleted: rgba(133, 13, 10, 0.5); --color-surface-accent: #fec600; --color-surface-accent-light: #fffdf8; --on-surface-contrast: var(--color-on-fixed-white); /* Illustration */ --color-illustration-background: var(--color-gray-700); --color-illustration-gray: var(--color-gray-500); --color-illustration-line: var(--color-gray-200); /* Shades */ --color-overlay-dark: rgba(20, 20, 20, 0.8); --color-overlay-light: rgba(20, 20, 20, 0.8); /* Signal colors */ --color-signal-alert: #d2011a; --color-signal-alert-light: #850d0a; --color-signal-info: #017ed2; --color-signal-info-light: #235c9d; --color-signal-success: #4a7b13; --color-signal-success-light: #34560d; --color-signal-warning: #d27401; --color-signal-warning-light: #856304; --color-signal-upgrade-light: #7d2b87; /* Borders */ --color-border: var(--color-gray-500); --color-border-alt: var(--color-gray-600); --color-border-form: var(--color-border); --color-border-form-disabled: rgba(105, 104, 107, 0.5); /* Icon */ --color-icon-upgrade-bg: var(--color-gray-100); --color-icon-upgrade-flash: #733183; /* Chart */ --color-chart-100: #d9ebf7; --color-chart-200: #b28b00; --color-chart-300: #453963; --color-chart-400: #029697; --color-chart-500: #965592; --color-chart-600: #6b8aa4; --color-chart-700: #c55986; --color-chart-800: #89a8c2; --color-chart-neutral: #a5a5a5; --color-chart-100-hover: #98a4ad; --color-chart-200-hover: #7f6300; --color-chart-300-hover: #736398; --color-chart-400-hover: #01696a; --color-chart-500-hover: #a66fa2; --color-chart-600-hover: #4b6173; --color-chart-700-hover: #9e476b; --color-chart-800-hover: #acc2d4; --color-chart-neutral-hover: #7c7c7c; /* Form */ --color-state-form-active: #29a9ff; --color-fg-form-on: var(--color-gray-900); --color-validation-error: #fe485d; /* Tile */ --color-tile-shadow-color: rgba(255, 255, 255, 0.15); --color-illustration-100: #cccccc; --color-illustration-200: #ccc6ae; --color-illustration-300: #ccbc85; --color-state-active: #534621; --color-state-hover: #3d3625; --color-surface-highlight: #8c6d00; /* Tile */ --color-tile-100: #fec600; --color-tile-200: #786113; } .gv-activated.gv-dark-mode .gv-fill-3rd-party { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }