/*** 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; 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; 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 */ 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 { appearance: revert; } .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; user-select: auto; } .gv-activated :where([draggable="true"]) { -webkit-user-drag: element; } /* Fluid */ /* Typography * Mixins to reuse text styles in other components */ /* Truncate */ /* Fluid space */ /* Container */ /* Stack space */ /* Flex layout */ /* Condensed */ /* Progress circle */ /* Reset */ /* Spacers for margin, paddings, etc. */ /* 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"); } /* Condensed mode */ .gv-activated { /* Deprecated long name classes */ } .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; } } @media (max-width: 599px ) { .gv-activated .gv-mobile-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-tablet-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 600px ) and (max-width: 767px ) { .gv-activated .gv-tablet-small-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 768px ) and (max-width: 1023px ) { .gv-activated .gv-tablet-large-mode-condensed { /* Form */ --form-element-height: 30px; } } @media (min-width: 1024px ) { .gv-activated .gv-desktop-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); font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .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 { transform: rotate(180deg); } .gv-activated .gv-accordion .gv-acc-content { padding: 0 var(--size-xl) var(--size-lg) 0; font-size: 14px; 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: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-action:hover { color: var(--color-state-form-active); } .gv-activated .gv-badge { --badge-color-background: inherit; --badge-color-border: inherit; --badge-color-text: inherit; background-color: var(--badge-color-background); border: var(--size-border) solid var(--badge-color-border); border-radius: var(--border-radius); color: var(--badge-color-text); display: inline-block; /* text-overflow doesn't work on flex or inline-flex, so use inline-block to keep the component simple */ height: 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: 12px; 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); --badge-color-text: var(--color-body-on-default); } .gv-activated .gv-badge.gv-badge-alert { --badge-color-background: var(--color-signal-alert-light); --badge-color-border: var(--color-signal-alert); --badge-color-text: 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); --badge-color-text: 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); --badge-color-text: 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); --badge-color-text: var(--color-signal-success); } .gv-activated .gv-breadcrumbs { font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); /* Back link */ } .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); } .gv-activated ul.gv-breadcrumbs { align-items: center; color: var(--color-body-on-alternative); display: inline-flex; flex-wrap: wrap; gap: var(--size-sm); padding: 0; } .gv-activated ul.gv-breadcrumbs li { align-items: center; display: inline-flex; list-style: none; margin: 0; } .gv-activated ul.gv-breadcrumbs li:last-child { color: var(--color-body-on-default); font-weight: var(--font-weight-semibold); } .gv-activated ul.gv-breadcrumbs li gv-icon { margin-left: var(--size-sm); } /* 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(--size-sm) var(--size-md); text-align: center; text-decoration: none; font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); /* Condensed mode */ /* Deprecated long name classes */ } .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-body-on-inverted); } .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-icon { border-radius: var(--button-height); padding-left: 0; padding-right: 0; width: var(--button-height); } .gv-activated .gv-button:active, .gv-activated .gv-button:hover, .gv-activated .gv-button:focus { 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; } @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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; 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-mobile-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-mobile-mode-condensed { font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-button .gv-tablet-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-tablet-mode-condensed { font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (min-width: 600px ) and (max-width: 767px ) { .gv-activated .gv-button .gv-tablet-small-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-tablet-small-mode-condensed { font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } } @media (min-width: 768px ) and (max-width: 1023px ) { .gv-activated .gv-button .gv-tablet-large-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-tablet-large-mode-condensed { font-size: 12px; 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-desktop-mode-condensed .gv-button, .gv-activated .gv-button .gv-button.gv-desktop-mode-condensed { font-size: 12px; 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(--button-radius); color: var(--color-body-on-alternative); cursor: pointer; display: inline-flex; font-family: inherit; height: var(--form-element-height); justify-content: center; outline: none; 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-card { 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:hover { color: var(--color-body-on-default); } .gv-activated .gv-card .gv-card-image, .gv-activated .gv-card .gv-card-video { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); height: 200px; overflow: hidden; width: 100%; } .gv-activated .gv-card .gv-card-image img, .gv-activated .gv-card .gv-card-video img { height: 100%; object-fit: cover; object-position: center center; transition: all 0.2s ease-out; width: 100%; } .gv-activated .gv-card .gv-card-video { position: relative; } .gv-activated .gv-card .gv-card-video > * { height: 100%; width: 100%; } .gv-activated .gv-card .gv-card-video .gv-video-overlay { align-items: center; background-color: var(--color-overlay-dark); bottom: 0; color: var(--color-on-fixed-white); cursor: pointer; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 200; } .gv-activated .gv-card .gv-card-content, .gv-activated .gv-card .gv-card-illustration, .gv-activated .gv-card .gv-card-icon { padding: 24px 24px 0; } .gv-activated .gv-card .gv-card-content { flex-grow: 1; font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-card .gv-card-content > *:not(:last-child) { margin-bottom: 8px; } .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 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-card .gv-card-title { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-card .gv-card-title { font-size: calc(14px + 4 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + -0.035 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-card .gv-card-title { font-size: 18px; letter-spacing: 0px; } } .gv-activated .gv-card .gv-card-footer { padding: 16px 24px 24px; } .gv-activated a.gv-card:hover .gv-card-image img { transform: scale(1.05); } /* Comparison table mixins */ .gv-activated .gv-comparison-table { --comparison-sidebar-width: 220px; --recommended-label-height: 0; --slider-dots-height: var(--size-lg); --slider-dots-space: calc(var(--slider-dots-height) + var(--size-sm)); } .gv-activated .gv-comparison-table.gv-has-recommended { --recommended-label-height: 26px; } .gv-activated .gv-comparison-table .gv-dots-scroll-area { position: relative; } .gv-activated .gv-comparison-table .gv-slider-pagination { display: none; justify-content: center; bottom: var(--size-lg); position: sticky; z-index: 210; width: 100%; } .gv-activated .gv-comparison-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-comparison-table .gv-slider-pagination .gv-dots > * { background: var(--color-gray-400); border-radius: var(--size-sm); color: transparent; display: block; height: var(--size-sm); width: var(--size-sm); } .gv-activated .gv-comparison-table .gv-slider-pagination .gv-dots > *.gv-active { background: var(--color-primary); } .gv-activated .gv-comparison-table .gv-slider-pagination.gv-state-top { bottom: 100%; transform: translateY(calc(var(--slider-dots-space) * -1)); } .gv-activated .gv-comparison-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-comparison-table .gv-slider-nav { display: none; position: sticky; top: 0; width: 100%; z-index: 210; } .gv-activated .gv-comparison-table .gv-slider-nav.gv-state-bottom { position: absolute; top: auto !important; } .gv-activated .gv-comparison-table .gv-slider-nav:not(.gv-state-bottom) { bottom: auto !important; } .gv-activated .gv-comparison-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-comparison-table .gv-slider-nav .gv-nav-button.gv-previous { left: 0; transform: translate(-50%, -50%); } .gv-activated .gv-comparison-table .gv-slider-nav .gv-nav-button.gv-next { right: 0; transform: translate(50%, -50%); } .gv-activated .gv-comparison-table .gv-slider-nav .gv-nav-button.gv-disabled { cursor: auto; opacity: var(--opacity-disabled-elements); pointer-events: none; } .gv-activated .gv-comparison-table .gv-table-container { position: relative; } .gv-activated .gv-comparison-table .gv-table-container::before, .gv-activated .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: 201; } .gv-activated .gv-comparison-table .gv-table-container::before { left: 0; } .gv-activated .gv-comparison-table .gv-table-container::after { right: 0; } @media screen and (max-width: 360px) { .gv-activated .gv-comparison-table .gv-table-slider { padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-comparison-table .gv-table-slider { padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-comparison-table .gv-table-slider { padding-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-comparison-table .gv-table-slider { margin-right: -24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-comparison-table .gv-table-slider { margin-right: calc(-24px + -24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-comparison-table .gv-table-slider { margin-right: -48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-comparison-table .gv-table-slider .gv-table { padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-comparison-table .gv-table-slider .gv-table { padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-comparison-table .gv-table-slider .gv-table { padding-right: 48px; } } .gv-activated .gv-comparison-table .gv-table { box-sizing: content-box; padding-top: var(--recommended-label-height); } .gv-activated .gv-comparison-table .gv-table-row { display: flex; flex-wrap: nowrap; position: relative; } .gv-activated .gv-comparison-table .gv-header-info, .gv-activated .gv-comparison-table .gv-cell-info { border-right: 1px solid var(--color-border); flex: 0 0 var(--comparison-sidebar-width); left: 0; position: sticky; width: var(--comparison-sidebar-width); z-index: 200; } .gv-activated .gv-comparison-table .gv-product, .gv-activated .gv-comparison-table .gv-cell { border-right: 1px solid var(--color-border); flex: 1; } .gv-activated .gv-comparison-table .gv-table-header, .gv-activated .gv-comparison-table .gv-header-info, .gv-activated .gv-comparison-table .gv-section, .gv-activated .gv-comparison-table .gv-table-row:nth-child(odd) .gv-cell-info { background: var(--color-surface-bright); } .gv-activated .gv-comparison-table .gv-table-row:nth-child(even), .gv-activated .gv-comparison-table .gv-table-row:nth-child(even) .gv-cell-info { background: var(--color-surface-dim); } .gv-activated .gv-comparison-table .gv-table-header { border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border); } .gv-activated .gv-comparison-table .gv-table-info { padding: var(--size-lg); font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-comparison-table .gv-bottom-info { display: none; } .gv-activated .gv-comparison-table .gv-product { display: flex; flex-direction: column; padding: var(--size-lg); position: relative; } .gv-activated .gv-comparison-table .gv-product .gv-recommended-label { background: var(--color-button-bg-cta); border-top-left-radius: var(--button-radius); border-top-right-radius: var(--button-radius); color: var(--color-button-fg-on-cta); left: 0; opacity: 1; padding: var(--size-xs) var(--size-sm); position: absolute; right: 0; text-align: center; top: 0; transform: translateY(-100%); transition: opacity 0.2s linear 0s; font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-comparison-table .gv-product .gv-content { flex-grow: 1; } .gv-activated .gv-comparison-table .gv-product .gv-content > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-comparison-table .gv-product .gv-content .gv-title { font-weight: var(--font-weight-semibold); letter-spacing: 0; line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-comparison-table .gv-product .gv-content .gv-title { font-size: 16px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-comparison-table .gv-product .gv-content .gv-title { font-size: calc(16px + 8 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-comparison-table .gv-product .gv-content .gv-title { font-size: 24px; } } .gv-activated .gv-comparison-table .gv-product .gv-bottom { padding-top: var(--size-lg); } .gv-activated .gv-comparison-table .gv-product .gv-bottom > *:not(:last-child) { margin-bottom: 24px; } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container > *:not(:last-child) { margin-bottom: 8px; } .gv-activated .gv-comparison-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-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-text { white-space: nowrap; font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-text { font-size: 16px; letter-spacing: 0.048px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-text { font-size: calc(16px + 12 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.048px + -0.006 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-text { font-size: 28px; letter-spacing: 0.042px; } } .gv-activated .gv-comparison-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: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-info { color: var(--color-body-on-alternative); font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-tooltip { display: inline-block; position: relative; vertical-align: middle; } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-tooltip gv-icon { height: var(--size-icon-sm); width: var(--size-icon-sm); } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-tooltip .gv-tooltip { bottom: 100%; display: none; left: 50%; position: absolute; transform: translateX(-50%); } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-price-container .gv-price-tooltip:hover .gv-tooltip { display: block; width: 120px; } .gv-activated .gv-comparison-table .gv-product .gv-bottom .gv-button { width: 100%; } .gv-activated .gv-comparison-table .gv-section { border-bottom: 1px solid var(--color-border); } .gv-activated .gv-comparison-table .gv-section .gv-section-header { border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); position: relative; } .gv-activated .gv-comparison-table .gv-section .gv-section-header .gv-title { display: block; left: 0; padding: var(--size-md) 0 var(--size-md) var(--size-lg); position: sticky; font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-comparison-table .gv-section .gv-section-header .gv-title { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-comparison-table .gv-section .gv-section-header .gv-title { font-size: calc(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-comparison-table .gv-section .gv-section-header .gv-title { font-size: 16px; letter-spacing: 0.08px; } } .gv-activated .gv-comparison-table .gv-section .gv-table-row { font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-comparison-table .gv-cell-info, .gv-activated .gv-comparison-table .gv-cell { display: flex; gap: var(--size-sm); padding: var(--size-sm) var(--size-lg); } .gv-activated .gv-comparison-table .gv-cell-tooltip { position: relative; } .gv-activated .gv-comparison-table .gv-cell-tooltip .gv-tooltip { bottom: 100%; display: none; left: 50%; position: absolute; transform: translateX(-50%); } .gv-activated .gv-comparison-table .gv-cell-tooltip:hover .gv-tooltip { display: block; min-width: 120px; } .gv-activated .gv-comparison-table .gv-cell { justify-content: center; } .gv-activated .gv-comparison-table.gv-products-2 .gv-product, .gv-activated .gv-comparison-table.gv-products-2 .gv-cell { max-width: calc((100% - var(--comparison-sidebar-width)) / 2); } .gv-activated .gv-comparison-table.gv-products-3 .gv-product, .gv-activated .gv-comparison-table.gv-products-3 .gv-cell { max-width: calc((100% - var(--comparison-sidebar-width)) / 3); } .gv-activated .gv-comparison-table.gv-products-4 .gv-product, .gv-activated .gv-comparison-table.gv-products-4 .gv-cell { max-width: calc((100% - var(--comparison-sidebar-width)) / 4); } .gv-activated .gv-comparison-table.gv-products-5 .gv-product, .gv-activated .gv-comparison-table.gv-products-5 .gv-cell { max-width: calc((100% - var(--comparison-sidebar-width)) / 5); } @media (max-width: 599px ) { .gv-activated .gv-comparison-table.gv-products-1 .gv-header-info { display: none; } .gv-activated .gv-comparison-table .gv-bottom-info { display: block; } .gv-activated .gv-comparison-table.gv-products-2 .gv-table { width: calc(var(--comparison-sidebar-width) + (100% * 2)); } .gv-activated .gv-comparison-table.gv-products-2 .gv-section-header .gv-title { width: calc(((100% - var(--comparison-sidebar-width)) / 2) - 1px); } .gv-activated .gv-comparison-table.gv-products-2 .gv-slider-nav, .gv-activated .gv-comparison-table.gv-products-2 .gv-slider-pagination { display: flex; } .gv-activated .gv-comparison-table.gv-products-2 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .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-comparison-table.gv-products-2 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-comparison-table.gv-products-2 .gv-table-header { scroll-snap-align: start; } .gv-activated .gv-comparison-table.gv-products-2 .gv-product { scroll-snap-align: end; } .gv-activated .gv-comparison-table.gv-products-3 .gv-table { width: calc(var(--comparison-sidebar-width) + (100% * 3)); } .gv-activated .gv-comparison-table.gv-products-3 .gv-section-header .gv-title { width: calc(((100% - var(--comparison-sidebar-width)) / 3) - 1px); } .gv-activated .gv-comparison-table.gv-products-4 .gv-table { width: calc(var(--comparison-sidebar-width) + (100% * 4)); } .gv-activated .gv-comparison-table.gv-products-4 .gv-section-header .gv-title { width: calc(((100% - var(--comparison-sidebar-width)) / 4) - 1px); } .gv-activated .gv-comparison-table.gv-products-5 .gv-table { width: calc(var(--comparison-sidebar-width) + (100% * 5)); } .gv-activated .gv-comparison-table.gv-products-5 .gv-section-header .gv-title { width: calc(((100% - var(--comparison-sidebar-width)) / 5) - 1px); } .gv-activated .gv-comparison-table:not(.gv-products-1) .gv-table-container::after { display: none; } .gv-activated .gv-comparison-table:not(.gv-products-1) .gv-table-header { scroll-snap-align: none !important; } .gv-activated .gv-comparison-table:not(.gv-products-1) .gv-product { scroll-snap-align: start !important; } .gv-activated .gv-comparison-table:not(.gv-products-1) .gv-header-info { opacity: 0; pointer-events: none; } .gv-activated .gv-comparison-table:not(.gv-products-1) .gv-cell { padding-left: calc(var(--comparison-sidebar-width) + var(--size-lg)); } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-comparison-table .gv-slider-pagination .gv-dots > *:last-child { display: none; } .gv-activated .gv-comparison-table.gv-products-3 .gv-table { width: calc(100% + ((100% - var(--comparison-sidebar-width)) / (3 - 1) * 1)); } .gv-activated .gv-comparison-table.gv-products-3 .gv-section-header .gv-title { width: calc(var(--comparison-sidebar-width) - 1px + (((100% - var(--comparison-sidebar-width)) / 3) * (3 - 1))); } .gv-activated .gv-comparison-table.gv-products-4 .gv-table { width: calc(100% + ((100% - var(--comparison-sidebar-width)) / (4 - 2) * 2)); } .gv-activated .gv-comparison-table.gv-products-4 .gv-section-header .gv-title { width: calc(var(--comparison-sidebar-width) - 1px + (((100% - var(--comparison-sidebar-width)) / 4) * (4 - 2))); } .gv-activated .gv-comparison-table.gv-products-5 .gv-table { width: calc(100% + ((100% - var(--comparison-sidebar-width)) / (5 - 3) * 3)); } .gv-activated .gv-comparison-table.gv-products-5 .gv-section-header .gv-title { width: calc(var(--comparison-sidebar-width) - 1px + (((100% - var(--comparison-sidebar-width)) / 5) * (5 - 3))); } } @media (min-width: 600px ) { .gv-activated .gv-comparison-table .gv-table-slider { margin-right: 0 !important; padding-right: 0 !important; } .gv-activated .gv-comparison-table .gv-table-slider .gv-table { padding-right: 0 !important; } .gv-activated .gv-comparison-table .gv-product .gv-recommended-label.gv-off-view { opacity: 0; } } @media (max-width: 1023px ) { .gv-activated .gv-comparison-table.gv-products-3 .gv-slider-nav, .gv-activated .gv-comparison-table.gv-products-4 .gv-slider-nav, .gv-activated .gv-comparison-table.gv-products-3 .gv-slider-pagination, .gv-activated .gv-comparison-table.gv-products-4 .gv-slider-pagination { display: flex; } .gv-activated .gv-comparison-table.gv-products-3 .gv-dots-scroll-area, .gv-activated .gv-comparison-table.gv-products-4 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .gv-comparison-table.gv-products-3 .gv-table-slider, .gv-activated .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-comparison-table.gv-products-3 .gv-table-slider::-webkit-scrollbar, .gv-activated .gv-comparison-table.gv-products-4 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-comparison-table.gv-products-3 .gv-table-header, .gv-activated .gv-comparison-table.gv-products-4 .gv-table-header { scroll-snap-align: start; } .gv-activated .gv-comparison-table.gv-products-3 .gv-product, .gv-activated .gv-comparison-table.gv-products-4 .gv-product { scroll-snap-align: end; } } @media (max-width: 1279px ) { .gv-activated .gv-comparison-table.gv-products-5 .gv-slider-nav, .gv-activated .gv-comparison-table.gv-products-5 .gv-slider-pagination { display: flex; } .gv-activated .gv-comparison-table.gv-products-5 .gv-dots-scroll-area { padding-top: var(--slider-dots-space); } .gv-activated .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-comparison-table.gv-products-5 .gv-table-slider::-webkit-scrollbar { display: none; } .gv-activated .gv-comparison-table.gv-products-5 .gv-table-header { scroll-snap-align: start; } .gv-activated .gv-comparison-table.gv-products-5 .gv-product { scroll-snap-align: end; } } @media (min-width: 1024px ) and (max-width: 1279px ) { .gv-activated .gv-comparison-table.gv-products-5 .gv-table { width: calc(100% + ((100% - var(--comparison-sidebar-width)) / (5 - 1) * 1)); } .gv-activated .gv-comparison-table.gv-products-5 .gv-section-header .gv-title { width: calc(var(--comparison-sidebar-width) - 1px + (((100% - var(--comparison-sidebar-width)) / 5) * (5 - 1))); } .gv-activated .gv-comparison-table.gv-products-5 .gv-slider-pagination .gv-dots > *:nth-last-child(-n + 3) { display: none; } } .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: 14px; 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: 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: 12px; 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: 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: 10px; 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: 10px; 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; } /* 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: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-data-table .gv-button { font-size: 12px; 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 { font-size: 14px; letter-spacing: 0.035px; } } @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(14px + 4 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + -0.035 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-data-table .gv-empty-state .gv-empty-state-content .gv-title { font-size: 18px; letter-spacing: 0px; } } .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; display: inline-flex; flex-wrap: nowrap; gap: 16px; } .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: 10px; 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: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-pagination .gv-button { font-size: 12px; 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: 14px; 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; transform: rotate(-90deg); 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-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-size: 14px; letter-spacing: 0.042px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-size: calc(14px + 10 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.042px + -0.006 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-empty-state .gv-empty-state-content .gv-title { font-size: 24px; letter-spacing: 0.036px; } } .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: 14px; 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 { font-size: 14px; letter-spacing: 0.035px; } } @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(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((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 { font-size: 16px; letter-spacing: 0.08px; } } .gv-activated .gv-filter-options { /* Form */ --form-element-height: 30px; } .gv-activated .gv-filter-options .gv-button { font-size: 12px; 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: 14px; 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 { position: relative; } .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; 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 { transform: rotate(180deg); } .gv-activated .gv-filter-bar .gv-filter-button .gv-button-label { font-size: 14px; 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: 12px; 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 { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { font-size: calc(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-filter-panel .gv-filter-options .gv-filter-name { font-size: 16px; letter-spacing: 0.08px; } } .gv-activated .gv-filters-drawer .gv-side-content { display: flex; flex-direction: column; height: 100%; } .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 { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { font-size: calc(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-filters-drawer .gv-filter-options .gv-options-title { font-size: 16px; letter-spacing: 0.08px; } } .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-footer { background-color: var(--color-surface-bright); color: var(--color-body-on-default); font-size: 14px; 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; } } /* Start grid mixins */ /* Grid template columns */ /* Grid item width */ /* Column start */ /* End grid mixins */ .gv-activated { /* Deprecated grid classes */ /* Deprecated long name classes */ /* Grid order */ } .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; } } @media screen and (max-width: 360px) { .gv-activated .gv-gap-medium { gap: 16px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-gap-medium { gap: calc(16px + 8 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-gap-medium { gap: 24px; } } @media screen and (max-width: 360px) { .gv-activated .gv-gap-small { gap: 8px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-gap-small { gap: calc(8px + 8 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-gap-small { gap: 16px; } } .gv-activated .gv-no-gap { gap: 0; } .gv-activated .gv-align-center { align-items: center; } @media (max-width: 599px ) { .gv-activated .gv-grid-container .gv-grid-item.gv-mobile-order-first { order: -1; } .gv-activated .gv-grid-container .gv-grid-item.gv-mobile-order-last { order: 99; } } @media (min-width: 600px ) { .gv-activated .gv-tabletspan-1 { grid-column: auto / span 1; } .gv-activated .gv-tabletspan-2 { grid-column: auto / span 2; } .gv-activated .gv-tabletspan-3 { grid-column: auto / span 3; } .gv-activated .gv-tabletspan-4 { grid-column: auto / span 4; } .gv-activated .gv-tabletspan-5 { grid-column: auto / span 5; } .gv-activated .gv-tabletspan-6 { grid-column: auto / span 6; } .gv-activated .gv-tabletspan-7 { grid-column: auto / span 7; } .gv-activated .gv-tabletspan-8 { grid-column: auto / span 8; } .gv-activated .gv-tabletspan-9 { grid-column: auto / span 9; } .gv-activated .gv-tabletspan-10 { grid-column: auto / span 10; } .gv-activated .gv-tabletspan-11 { grid-column: auto / span 11; } .gv-activated .gv-tabletspan-12 { grid-column: auto / span 12; } .gv-activated .gv-tabletstart-1 { grid-column-start: 1; } .gv-activated .gv-tabletstart-2 { grid-column-start: 2; } .gv-activated .gv-tabletstart-3 { grid-column-start: 3; } .gv-activated .gv-tabletstart-4 { grid-column-start: 4; } .gv-activated .gv-tabletstart-5 { grid-column-start: 5; } .gv-activated .gv-tabletstart-6 { grid-column-start: 6; } .gv-activated .gv-tabletstart-7 { grid-column-start: 7; } .gv-activated .gv-tabletstart-8 { grid-column-start: 8; } .gv-activated .gv-tabletstart-9 { grid-column-start: 9; } .gv-activated .gv-tabletstart-10 { grid-column-start: 10; } .gv-activated .gv-tabletstart-11 { grid-column-start: 11; } .gv-activated .gv-tabletstart-12 { grid-column-start: 12; } .gv-activated .gv-grid-container .gv-grid-item.gv-tablet-order-first { order: -1; } .gv-activated .gv-grid-container .gv-grid-item.gv-tablet-order-last { order: 99; } } @media (min-width: 768px ) { .gv-activated .gv-tablet-largespan-1 { grid-column: auto / span 1; } .gv-activated .gv-tablet-largespan-2 { grid-column: auto / span 2; } .gv-activated .gv-tablet-largespan-3 { grid-column: auto / span 3; } .gv-activated .gv-tablet-largespan-4 { grid-column: auto / span 4; } .gv-activated .gv-tablet-largespan-5 { grid-column: auto / span 5; } .gv-activated .gv-tablet-largespan-6 { grid-column: auto / span 6; } .gv-activated .gv-tablet-largespan-7 { grid-column: auto / span 7; } .gv-activated .gv-tablet-largespan-8 { grid-column: auto / span 8; } .gv-activated .gv-tablet-largespan-9 { grid-column: auto / span 9; } .gv-activated .gv-tablet-largespan-10 { grid-column: auto / span 10; } .gv-activated .gv-tablet-largespan-11 { grid-column: auto / span 11; } .gv-activated .gv-tablet-largespan-12 { grid-column: auto / span 12; } .gv-activated .gv-tablet-largestart-1 { grid-column-start: 1; } .gv-activated .gv-tablet-largestart-2 { grid-column-start: 2; } .gv-activated .gv-tablet-largestart-3 { grid-column-start: 3; } .gv-activated .gv-tablet-largestart-4 { grid-column-start: 4; } .gv-activated .gv-tablet-largestart-5 { grid-column-start: 5; } .gv-activated .gv-tablet-largestart-6 { grid-column-start: 6; } .gv-activated .gv-tablet-largestart-7 { grid-column-start: 7; } .gv-activated .gv-tablet-largestart-8 { grid-column-start: 8; } .gv-activated .gv-tablet-largestart-9 { grid-column-start: 9; } .gv-activated .gv-tablet-largestart-10 { grid-column-start: 10; } .gv-activated .gv-tablet-largestart-11 { grid-column-start: 11; } .gv-activated .gv-tablet-largestart-12 { grid-column-start: 12; } .gv-activated .gv-grid-container .gv-grid-item.gv-tablet-large-order-first { order: -1; } .gv-activated .gv-grid-container .gv-grid-item.gv-tablet-large-order-last { order: 99; } } @media (min-width: 1024px ) { .gv-activated .gv-desktopspan-1 { grid-column: auto / span 1; } .gv-activated .gv-desktopspan-2 { grid-column: auto / span 2; } .gv-activated .gv-desktopspan-3 { grid-column: auto / span 3; } .gv-activated .gv-desktopspan-4 { grid-column: auto / span 4; } .gv-activated .gv-desktopspan-5 { grid-column: auto / span 5; } .gv-activated .gv-desktopspan-6 { grid-column: auto / span 6; } .gv-activated .gv-desktopspan-7 { grid-column: auto / span 7; } .gv-activated .gv-desktopspan-8 { grid-column: auto / span 8; } .gv-activated .gv-desktopspan-9 { grid-column: auto / span 9; } .gv-activated .gv-desktopspan-10 { grid-column: auto / span 10; } .gv-activated .gv-desktopspan-11 { grid-column: auto / span 11; } .gv-activated .gv-desktopspan-12 { grid-column: auto / span 12; } .gv-activated .gv-desktopstart-1 { grid-column-start: 1; } .gv-activated .gv-desktopstart-2 { grid-column-start: 2; } .gv-activated .gv-desktopstart-3 { grid-column-start: 3; } .gv-activated .gv-desktopstart-4 { grid-column-start: 4; } .gv-activated .gv-desktopstart-5 { grid-column-start: 5; } .gv-activated .gv-desktopstart-6 { grid-column-start: 6; } .gv-activated .gv-desktopstart-7 { grid-column-start: 7; } .gv-activated .gv-desktopstart-8 { grid-column-start: 8; } .gv-activated .gv-desktopstart-9 { grid-column-start: 9; } .gv-activated .gv-desktopstart-10 { grid-column-start: 10; } .gv-activated .gv-desktopstart-11 { grid-column-start: 11; } .gv-activated .gv-desktopstart-12 { grid-column-start: 12; } .gv-activated .gv-grid-container .gv-grid-item.gv-desktop-order-first { order: -1; } .gv-activated .gv-grid-container .gv-grid-item.gv-desktop-order-last { order: 99; } } @media (min-width: 1280px ) { .gv-activated .gv-desktop-largespan-1 { grid-column: auto / span 1; } .gv-activated .gv-desktop-largespan-2 { grid-column: auto / span 2; } .gv-activated .gv-desktop-largespan-3 { grid-column: auto / span 3; } .gv-activated .gv-desktop-largespan-4 { grid-column: auto / span 4; } .gv-activated .gv-desktop-largespan-5 { grid-column: auto / span 5; } .gv-activated .gv-desktop-largespan-6 { grid-column: auto / span 6; } .gv-activated .gv-desktop-largespan-7 { grid-column: auto / span 7; } .gv-activated .gv-desktop-largespan-8 { grid-column: auto / span 8; } .gv-activated .gv-desktop-largespan-9 { grid-column: auto / span 9; } .gv-activated .gv-desktop-largespan-10 { grid-column: auto / span 10; } .gv-activated .gv-desktop-largespan-11 { grid-column: auto / span 11; } .gv-activated .gv-desktop-largespan-12 { grid-column: auto / span 12; } .gv-activated .gv-desktop-largestart-1 { grid-column-start: 1; } .gv-activated .gv-desktop-largestart-2 { grid-column-start: 2; } .gv-activated .gv-desktop-largestart-3 { grid-column-start: 3; } .gv-activated .gv-desktop-largestart-4 { grid-column-start: 4; } .gv-activated .gv-desktop-largestart-5 { grid-column-start: 5; } .gv-activated .gv-desktop-largestart-6 { grid-column-start: 6; } .gv-activated .gv-desktop-largestart-7 { grid-column-start: 7; } .gv-activated .gv-desktop-largestart-8 { grid-column-start: 8; } .gv-activated .gv-desktop-largestart-9 { grid-column-start: 9; } .gv-activated .gv-desktop-largestart-10 { grid-column-start: 10; } .gv-activated .gv-desktop-largestart-11 { grid-column-start: 11; } .gv-activated .gv-desktop-largestart-12 { grid-column-start: 12; } .gv-activated .gv-grid-container .gv-grid-item.gv-desktop-large-order-first { order: -1; } .gv-activated .gv-grid-container .gv-grid-item.gv-desktop-large-order-last { order: 99; } } .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 { background-color: var(--color-signal-info); border-radius: 50%; display: inline-block; flex-shrink: 0; height: 8px; width: 8px; } .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 { color: var(--color-body-on-alternative); display: flex; flex: 0 0 9px; flex-direction: column; gap: 4px; } .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 { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-initials { font-size: calc(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-initials { font-size: 16px; letter-spacing: 0.08px; } } .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: 10px; 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 { 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: 14px; 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-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: 12px; 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: 12px; 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); all: unset; box-sizing: border-box; display: revert; 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(--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 { --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: 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::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: 14px; 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 { align-items: center; display: flex; height: 100%; padding: 0 var(--input-padding); visibility: hidden; } .gv-activated .gv-input .gv-clear gv-icon { height: 100%; } .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: 10px; 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"] { 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 { 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: 134px; } .gv-activated .gv-input:not(.gv-w-full).gv-input-date { width: 270px; } } .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: 12px; 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-signal-alert); } .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-signal-alert); } .gv-activated .gv-password { display: flex; flex-direction: column; gap: 24px; } .gv-activated .gv-password .gv-password-form .gv-strength { margin-top: 8px; position: relative; } .gv-activated .gv-password .gv-password-form .gv-strength .gv-strength-label { position: absolute; right: 0; top: 8px; font-size: 10px; font-weight: var(--font-weight-medium); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-password .gv-password-form .gv-action { margin-top: 16px; } .gv-activated .gv-password .gv-requirements { background-color: var(--color-surface-dim); border-radius: var(--border-radius); padding: 24px; font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-password .gv-requirements > *:not(:last-child) { margin-bottom: 16px; } .gv-activated .gv-password .gv-requirements .gv-title { margin-bottom: 4px; font-size: 14px; 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: 8px; } .gv-activated .gv-password .gv-requirements .gv-list li { padding-left: 24px; 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: 20px; left: 0; position: absolute; top: 0; width: 20px; } .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-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; 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-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: 14px; 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 { font-size: 14px; letter-spacing: 0.035px; } } @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(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-search-advanced .gv-autocomplete-panel .gv-state-info .gv-title { font-size: 16px; letter-spacing: 0.08px; } } .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: 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: 14px; 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-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 { 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-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 { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { font-size: calc(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-form-option .gv-option-inline .gv-label { font-size: 16px; letter-spacing: 0.08px; } } .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-label .gv-description { color: var(--color-body-on-alternative); display: block; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-mode-condensed .gv-option-inline .gv-label { padding-top: 3px; font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-label { font-weight: var(--font-weight-semibold); font-size: 14px; 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: 12px; 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: 24px; 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: 20px; left: 0; position: absolute; top: 0; width: 20px; } .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 .gv-list-table { text-align: left; width: 100%; font-size: 14px; 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; } } @keyframes gv-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gv-activated gv-loader { align-items: center; 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: 14px; 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 { height: 100%; width: 100%; } .gv-activated.gv-dark-mode gv-logo .gv-mode-color { fill: var(--color-gray-100); } .gv-activated .gv-modal { 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-modal-content { background-color: var(--color-surface-bright); border-radius: var(--border-radius); color: var(--color-body-on-default); margin: auto; max-width: 700px; position: relative; width: 100%; font-size: 14px; 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; } @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-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { font-size: 14px; letter-spacing: 0.042px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { font-size: calc(14px + 10 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.042px + -0.006 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-title { font-size: 24px; letter-spacing: 0.036px; } } .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 { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { font-size: calc(14px + 4 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + -0.035 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-modal .gv-modal-content .gv-modal-subtitle { font-size: 18px; letter-spacing: 0px; } } .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-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-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-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 { align-items: center; display: flex; flex-wrap: nowrap; gap: 4px; } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-cart .gv-amount { background-color: var(--color-surface-muted); border-radius: var(--border-radius); color: var(--color-body-on-placeholder); line-height: 1; padding: 4px; font-size: 10px; font-weight: var(--font-weight-semibold); letter-spacing: 0.04px; line-height: var(--line-height-body); } .gv-activated .gv-main-header .gv-nav-menu .gv-btn-cart.gv-filled .gv-amount { background-color: var(--color-cta); color: var(--color-button-fg-on); } .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: 14px; 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: 14px; 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-notice { --notice-color-background: inherit; --notice-color-icon: inherit; --notice-color-text: var(--color-body-on-default); align-items: center; background: var(--notice-color-background); border-radius: var(--notice-radius); color: var(--notice-color-text); display: flex; flex-wrap: nowrap; gap: var(--size-md); padding: var(--size-lg); position: relative; } .gv-activated .gv-notice .gv-notice-icon { color: var(--notice-color-icon); flex-shrink: 0; } .gv-activated .gv-notice .gv-notice-content { flex-grow: 1; font-size: 14px; 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); --notice-color-icon: var(--color-signal-alert); } .gv-activated .gv-notice.gv-notice-warning { --notice-color-background: var(--color-signal-warning-light); --notice-color-icon: var(--color-signal-warning); } .gv-activated .gv-notice.gv-notice-success { --notice-color-background: var(--color-signal-success-light); --notice-color-icon: var(--color-signal-success); } .gv-activated .gv-notice.gv-notice-info { --notice-color-background: var(--color-signal-info-light); --notice-color-icon: var(--color-signal-info); } .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: 12px; 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: 12px; 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: 14px; 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 { transform: rotate(180deg); } .gv-activated .gv-main-header .gv-nav-select [aria-expanded="true"] + .gv-nav-dropdown { display: block; } .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-resource { display: flex; flex-direction: column; gap: 8px; font-size: 14px; 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: 12px; 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-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-shortcut { align-items: center; background: var(--color-surface-bright); border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); cursor: pointer; display: flex; gap: var(--size-md); padding: var(--size-md) var(--size-lg); text-decoration: none; } .gv-activated .gv-shortcut gv-icon { flex-shrink: 0; } .gv-activated .gv-shortcut .gv-content { color: var(--color-body-on-alternative); flex: 1; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-shortcut .gv-content .gv-status { align-items: center; display: flex; gap: var(--size-xs); font-size: 12px; font-weight: var(--font-weight-semibold); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-active { color: var(--color-signal-success); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-active .gv-indicator { background-color: var(--color-signal-success); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-high { color: var(--color-signal-warning); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-high .gv-indicator { background-color: var(--color-signal-warning); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-low { color: var(--color-body-on-alternative); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-inactive-prio-low .gv-indicator { background-color: var(--color-body-on-alternative); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-new { color: var(--color-signal-info); } .gv-activated .gv-shortcut .gv-content .gv-status.gv-new .gv-indicator { background-color: var(--color-signal-info); } .gv-activated .gv-shortcut .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 { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-shortcut .gv-content .gv-title { font-size: calc(14px + 4 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + -0.035 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-shortcut .gv-content .gv-title { font-size: 18px; letter-spacing: 0px; } } .gv-activated .gv-shortcut-tile { align-items: center; background: var(--color-surface-bright); border: 1px solid var(--color-border-alt); border-radius: var(--border-radius); cursor: pointer; display: flex; gap: var(--size-md); padding: var(--size-lg); text-decoration: none; } .gv-activated .gv-shortcut-tile gv-icon, .gv-activated .gv-shortcut-tile gv-tile { flex-shrink: 0; } .gv-activated .gv-shortcut-tile .gv-content { flex: 1; min-width: 0; } .gv-activated .gv-shortcut-tile .gv-content .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-shortcut-tile .gv-content .gv-title { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-shortcut-tile .gv-content .gv-title { font-size: calc(14px + 4 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + -0.035 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-shortcut-tile .gv-content .gv-title { font-size: 18px; letter-spacing: 0px; } } .gv-activated .gv-shortcut-tile .gv-content .gv-description { align-items: center; display: flex; gap: var(--size-md); font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-shortcut-tile .gv-content .gv-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-activated .gv-sidedrawer { --side-content-width: 300px; background-color: var(--color-overlay-dark); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1100; } .gv-activated .gv-sidedrawer.gv-slide-in { display: block; opacity: 0; transition: opacity 0.2s; visibility: hidden; } .gv-activated .gv-sidedrawer.gv-slide-in .gv-side-content { transition: transform 0.3s ease-in-out; } .gv-activated .gv-sidedrawer.gv-slide-in .gv-side-content:not(.gv-pos-right) { left: calc(-1 * var(--side-content-width)); } .gv-activated .gv-sidedrawer.gv-slide-in .gv-side-content.gv-pos-right { right: calc(-1 * var(--side-content-width)); } .gv-activated .gv-sidedrawer.gv-sidedrawer-open { display: block; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in { opacity: 1; visibility: visible; } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in .gv-side-content:not(.gv-pos-right) { transform: translateX(100%); } .gv-activated .gv-sidedrawer.gv-sidedrawer-open.gv-slide-in .gv-side-content.gv-pos-right { transform: translateX(-100%); } .gv-activated .gv-sidedrawer .gv-side-content { background: var(--color-surface-bright); bottom: 0; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 24px 32px; 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 .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: 14px; 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 { 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: 14px; 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-label { color: var(--color-body-on-alternative); margin-bottom: 8px; padding: 0 8px 8px; font-weight: var(--font-weight-semibold); font-size: 14px; 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; text-align: left; text-decoration: none; width: 100%; 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; } @keyframes gv-pulse { 50% { opacity: 0.4; } } .gv-activated .gv-skeleton { 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-alternative); display: flex; padding-bottom: var(--size-md); padding-top: var(--size-md); position: relative; width: 100%; font-size: 14px; 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-alternative); 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: 12px; 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; transform: rotate(-90deg); 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-alternative); 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: 10px; 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: 14px; 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-alternative); counter-reset: list-number; display: flex; flex-direction: column; position: relative; font-size: 14px; 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: 10px; 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-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: 14px; 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; width: var(--size-lg); font-size: 12px; 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[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-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-md); max-width: 100%; overflow: hidden; padding: var(--size-sm) var(--size-lg); position: relative; width: 300px; } .gv-activated .gv-toast .gv-toast-content { flex-grow: 1; font-size: 14px; 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-toast-close { cursor: pointer; padding: var(--size-sm); } .gv-activated .gv-toast.gv-toast-alert { --toast-color-background: var(--color-signal-alert-light); } .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-light); } .gv-activated .gv-toast.gv-toast-info { --toast-color-background: var(--color-signal-info-light); } .gv-activated .gv-toast-container { box-sizing: content-box; display: flex; flex-direction: column-reverse; gap: var(--size-sm); padding: var(--size-lg); pointer-events: none; position: fixed; right: 0; top: 0; width: 300px; z-index: 999999; } .gv-activated .gv-toast-container .gv-toast { opacity: 0; pointer-events: all; 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: 0 0 var(--size-xs); opacity: 1; transform: scale(1) translateY(0); } .gv-activated .gv-toast-container .gv-toast.gv-remove { opacity: 0; transform: scale(1) translateY(0) translateX(25px); } @media (max-width: 599px ) { .gv-activated .gv-toast-container { bottom: 0; flex-direction: column; max-width: 100%; padding: var(--size-sm); top: auto; } .gv-activated .gv-toast-container .gv-toast.gv-remove { transform: scale(1) translateY(25px) translateX(0); } } .gv-activated .gv-tooltip { background: var(--color-surface-inverted); border-radius: var(--border-radius); color: var(--color-body-on-inverted); max-width: 200px; padding: var(--size-md); position: fixed; text-align: left; z-index: 200; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .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; 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; 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%; transform: rotate(180deg) translateX(-50%); } .gv-activated .gv-tooltip.gv-arrow-top-center::before { left: 50%; transform: translateX(-50%); } .gv-activated .gv-tour { background: var(--color-primary); border-radius: var(--border-radius); color: var(--color-button-fg-on); display: flex; flex-direction: column; gap: var(--size-md); padding: var(--size-lg); position: relative; width: 300px; z-index: 200; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-tour::before { background: var(--color-primary); 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; transform-origin: center; } .gv-activated .gv-tour[class*="gv-arrow-top"] { margin-top: 11px; } .gv-activated .gv-tour[class*="gv-arrow-top"]::before { top: -11px; } .gv-activated .gv-tour[class*="gv-arrow-bottom"] { margin-bottom: 11px; } .gv-activated .gv-tour[class*="gv-arrow-bottom"]::before { bottom: -11px; 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; 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; transform: rotate(90deg); } .gv-activated .gv-tour .gv-tour-steps { display: flex; gap: var(--size-xs); font-size: 10px; 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: 12px; 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: 14px; 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: 12px; 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-button-fg-on); } .gv-activated .gv-tour .gv-tour-close { cursor: pointer; padding: var(--size-sm); position: absolute; right: 12px; top: 12px; } .gv-activated { color: var(--color-body-on-default); font-family: PlusJakartaSans, Arial, Verdana, sans-serif; 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 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-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated .gv-heading-xxxl { font-size: 26px; letter-spacing: 0.065px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-heading-xxxl { font-size: calc(26px + 34 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.065px + -0.065 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-heading-xxxl { font-size: 60px; letter-spacing: 0px; } } .gv-activated h1, .gv-activated .gv-heading-xxl { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated h1, .gv-activated .gv-heading-xxl { font-size: 22px; letter-spacing: 0.055px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h1, .gv-activated .gv-heading-xxl { font-size: calc(22px + 26 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.055px + -0.055 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated h1, .gv-activated .gv-heading-xxl { font-size: 48px; letter-spacing: 0px; } } .gv-activated h2, .gv-activated .gv-heading-xl { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated h2, .gv-activated .gv-heading-xl { font-size: 18px; letter-spacing: 0.045px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h2, .gv-activated .gv-heading-xl { font-size: calc(18px + 22 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.045px + 0.055 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated h2, .gv-activated .gv-heading-xl { font-size: 40px; letter-spacing: 0.1px; } } .gv-activated h3, .gv-activated .gv-heading-lg { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated h3, .gv-activated .gv-heading-lg { font-size: 16px; letter-spacing: 0px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h3, .gv-activated .gv-heading-lg { font-size: calc(16px + 16 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0px + 0.048 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated h3, .gv-activated .gv-heading-lg { font-size: 32px; letter-spacing: 0.048px; } } .gv-activated h4, .gv-activated .gv-heading-md { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated h4, .gv-activated .gv-heading-md { font-size: 16px; letter-spacing: 0.048px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h4, .gv-activated .gv-heading-md { font-size: calc(16px + 12 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.048px + -0.006 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated h4, .gv-activated .gv-heading-md { font-size: 28px; letter-spacing: 0.042px; } } .gv-activated h5, .gv-activated .gv-heading-sm { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated h5, .gv-activated .gv-heading-sm { font-size: 14px; letter-spacing: 0.042px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h5, .gv-activated .gv-heading-sm { font-size: calc(14px + 10 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.042px + -0.006 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated h5, .gv-activated .gv-heading-sm { font-size: 24px; letter-spacing: 0.036px; } } .gv-activated h6, .gv-activated .gv-heading-xs { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } @media screen and (max-width: 360px) { .gv-activated h6, .gv-activated .gv-heading-xs { font-size: 14px; letter-spacing: 0.042px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated h6, .gv-activated .gv-heading-xs { font-size: calc(14px + 6 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.042px + -0.012 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated h6, .gv-activated .gv-heading-xs { font-size: 20px; letter-spacing: 0.03px; } } .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: 16px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-text-xl { font-size: calc(16px + 8 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-text-xl { font-size: 24px; } } .gv-activated .gv-text-lg { line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated .gv-text-lg { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-text-lg { font-size: calc(14px + 4 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + -0.035 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-text-lg { font-size: 18px; letter-spacing: 0px; } } .gv-activated, .gv-activated .gv-text-md { line-height: var(--line-height-body); } @media screen and (max-width: 360px) { .gv-activated, .gv-activated .gv-text-md { font-size: 14px; letter-spacing: 0.035px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated, .gv-activated .gv-text-md { font-size: calc(14px + 2 * ((100vw - 360px ) / 1080 )); letter-spacing: calc(0.035px + 0.045 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated, .gv-activated .gv-text-md { font-size: 16px; letter-spacing: 0.08px; } } .gv-activated .gv-text-sm { font-size: 14px; letter-spacing: 0.035px; line-height: var(--line-height-body); } .gv-activated .gv-caption-lg { font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.048px; line-height: var(--line-height-body); } .gv-activated .gv-caption-sm { font-size: 10px; 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: 700px; } /* Utility classes */ /* Utility mixins */ /* Flex layout */ .gv-flex-row-sm { display: flex; flex-direction: row; gap: 8px; } .gv-flex-row-md { display: flex; flex-direction: row; gap: 16px; } .gv-flex-row-lg { display: flex; flex-direction: row; gap: 24px; } .gv-flex-column-sm { display: flex; flex-direction: column; gap: 8px; } .gv-flex-column-md { display: flex; flex-direction: column; gap: 16px; } .gv-flex-column-lg { display: flex; flex-direction: column; gap: 24px; } .gv-activated { /* Accessibility */ /* Background */ /* Border */ /* Flexbox */ /* Gap */ /* Overflow */ /* Position */ /* Shadow */ /* Sizing */ /* Text */ /* Spacing */ /* Fluid default */ /* Fluid sections */ /* Fluid default */ /* Fluid sections */ /* Breakpoint classes */ /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ /* Deprecated - Margins and paddings */ } .gv-activated .gv-sr-only { 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-surface-bright { background-color: var(--color-surface-bright); } .gv-activated .gv-surface-dim { background-color: var(--color-surface-dim); } .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-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-form { border: 1px solid var(--color-border-form); } .gv-activated .gv-radius { border-radius: var(--border-radius); } .gv-activated .gv-radius-0 { border-radius: 0 !important; } .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; } @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; } } .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: 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-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-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-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: 24px; margin-right: 24px; margin-top: 48px; margin-bottom: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-m-section { margin-left: calc(24px + 136 * ((100vw - 360px ) / 1080 )); margin-right: calc(24px + 136 * ((100vw - 360px ) / 1080 )); margin-top: calc(48px + 48 * ((100vw - 360px ) / 1080 )); margin-bottom: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-m-section { margin-left: 160px; margin-right: 160px; margin-top: 96px; margin-bottom: 96px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mt-section { margin-top: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mt-section { margin-top: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mt-section { margin-top: 96px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mb-section { margin-bottom: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mb-section { margin-bottom: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mb-section { margin-bottom: 96px; } } @media screen and (max-width: 360px) { .gv-activated .gv-ml-section { margin-left: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-ml-section { margin-left: calc(24px + 136 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-ml-section { margin-left: 160px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mr-section { margin-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mr-section { margin-right: calc(24px + 136 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mr-section { margin-right: 160px; } } @media screen and (max-width: 360px) { .gv-activated .gv-mx-section { margin-left: 24px; margin-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-mx-section { margin-left: calc(24px + 136 * ((100vw - 360px ) / 1080 )); margin-right: calc(24px + 136 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-mx-section { margin-left: 160px; margin-right: 160px; } } @media screen and (max-width: 360px) { .gv-activated .gv-my-section { margin-top: 48px; margin-bottom: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-my-section { margin-top: calc(48px + 48 * ((100vw - 360px ) / 1080 )); margin-bottom: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-my-section { margin-top: 96px; margin-bottom: 96px; } } @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: 24px; padding-right: 24px; padding-top: 48px; padding-bottom: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-p-section { padding-left: calc(24px + 136 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 136 * ((100vw - 360px ) / 1080 )); padding-top: calc(48px + 48 * ((100vw - 360px ) / 1080 )); padding-bottom: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-p-section { padding-left: 160px; padding-right: 160px; padding-top: 96px; padding-bottom: 96px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pt-section { padding-top: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pt-section { padding-top: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pt-section { padding-top: 96px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pb-section { padding-bottom: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pb-section { padding-bottom: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pb-section { padding-bottom: 96px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pl-section { padding-left: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pl-section { padding-left: calc(24px + 136 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pl-section { padding-left: 160px; } } @media screen and (max-width: 360px) { .gv-activated .gv-pr-section { padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-pr-section { padding-right: calc(24px + 136 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-pr-section { padding-right: 160px; } } @media screen and (max-width: 360px) { .gv-activated .gv-px-section { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-px-section { padding-left: calc(24px + 136 * ((100vw - 360px ) / 1080 )); padding-right: calc(24px + 136 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-px-section { padding-left: 160px; padding-right: 160px; } } @media screen and (max-width: 360px) { .gv-activated .gv-py-section { padding-top: 48px; padding-bottom: 48px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-py-section { padding-top: calc(48px + 48 * ((100vw - 360px ) / 1080 )); padding-bottom: calc(48px + 48 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-py-section { padding-top: 96px; padding-bottom: 96px; } } .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-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-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-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-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 { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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 { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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 { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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 { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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 { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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 { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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 (min-width: 1280px ) { .gv-activated { /* Flexbox and grid */ /* Hide */ /* Spacing */ /* Text */ } .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-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-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-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-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; } } .gv-activated .gv-margin-sm { margin: var(--size-sm); } .gv-activated .gv-margin-md { margin: var(--size-md); } .gv-activated .gv-margin-lg { margin: var(--size-lg); } .gv-activated .gv-margin-top-sm { margin-top: var(--size-sm); } .gv-activated .gv-margin-top-md { margin-top: var(--size-md); } .gv-activated .gv-margin-top-lg { margin-top: var(--size-lg); } .gv-activated .gv-margin-bottom-sm { margin-bottom: var(--size-sm); } .gv-activated .gv-margin-bottom-md { margin-bottom: var(--size-md); } .gv-activated .gv-margin-bottom-lg { margin-bottom: var(--size-lg); } .gv-activated .gv-margin-left-sm { margin-left: var(--size-sm); } .gv-activated .gv-margin-left-md { margin-left: var(--size-md); } .gv-activated .gv-margin-left-lg { margin-left: var(--size-lg); } .gv-activated .gv-margin-right-sm { margin-right: var(--size-sm); } .gv-activated .gv-margin-right-md { margin-right: var(--size-md); } .gv-activated .gv-margin-right-lg { margin-right: var(--size-lg); } .gv-activated .gv-padding-sm { padding: var(--size-sm); } .gv-activated .gv-padding-md { padding: var(--size-md); } .gv-activated .gv-padding-lg { padding: var(--size-lg); } .gv-activated .gv-padding-top-sm { padding-top: var(--size-sm); } .gv-activated .gv-padding-top-md { padding-top: var(--size-md); } .gv-activated .gv-padding-top-lg { padding-top: var(--size-lg); } .gv-activated .gv-padding-bottom-sm { padding-bottom: var(--size-sm); } .gv-activated .gv-padding-bottom-md { padding-bottom: var(--size-md); } .gv-activated .gv-padding-bottom-lg { padding-bottom: var(--size-lg); } .gv-activated .gv-padding-left-sm { padding-left: var(--size-sm); } .gv-activated .gv-padding-left-md { padding-left: var(--size-md); } .gv-activated .gv-padding-left-lg { padding-left: var(--size-lg); } .gv-activated .gv-padding-right-sm { padding-right: var(--size-sm); } .gv-activated .gv-padding-right-md { padding-right: var(--size-md); } .gv-activated .gv-padding-right-lg { padding-right: var(--size-lg); } .gv-activated .gv-no-margin { margin: 0 !important; } .gv-activated .gv-no-margin-top { margin-top: 0 !important; } .gv-activated .gv-no-margin-bottom { margin-bottom: 0 !important; } .gv-activated .gv-no-margin-top-bottom { margin-top: 0 !important; margin-bottom: 0 !important; } .gv-activated .gv-no-margin-left { margin-left: 0 !important; } .gv-activated .gv-no-margin-right { margin-right: 0 !important; } .gv-activated .gv-no-margin-left-right { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-no-padding { padding: 0 !important; } .gv-activated .gv-no-padding-top { padding-top: 0 !important; } .gv-activated .gv-no-padding-bottom { padding-bottom: 0 !important; } .gv-activated .gv-no-padding-top-bottom { padding-top: 0 !important; padding-bottom: 0 !important; } .gv-activated .gv-no-padding-left { padding-left: 0 !important; } .gv-activated .gv-no-padding-right { padding-right: 0 !important; } .gv-activated .gv-no-padding-left-right { padding-left: 0 !important; padding-right: 0 !important; } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin { margin: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin { margin: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-margin { margin: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin-top { margin-top: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin-top { margin-top: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-margin-top { margin-top: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin-bottom { margin-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin-bottom { margin-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-margin-bottom { margin-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin-left { margin-left: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin-left { margin-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-margin-left { margin-left: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin-right { margin-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin-right { margin-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-margin-right { margin-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin-top-bottom { margin-top: 24px; margin-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin-top-bottom { 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-fluid-margin-top-bottom { margin-top: 48px; margin-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-margin-left-right { margin-left: 24px; margin-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-margin-left-right { 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-fluid-margin-left-right { margin-left: 48px; margin-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding { padding: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding { padding: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-padding { padding: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding-top { padding-top: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding-top { padding-top: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-padding-top { padding-top: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding-bottom { padding-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding-bottom { padding-bottom: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-padding-bottom { padding-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding-left { padding-left: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding-left { padding-left: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-padding-left { padding-left: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding-right { padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding-right { padding-right: calc(24px + 24 * ((100vw - 360px ) / 1080 )); } } @media screen and (min-width: 1440px) { .gv-activated .gv-fluid-padding-right { padding-right: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding-top-bottom { padding-top: 24px; padding-bottom: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding-top-bottom { 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-fluid-padding-top-bottom { padding-top: 48px; padding-bottom: 48px; } } @media screen and (max-width: 360px) { .gv-activated .gv-fluid-padding-left-right { padding-left: 24px; padding-right: 24px; } } @media screen and (min-width: 361px) and (max-width: 1439px) { .gv-activated .gv-fluid-padding-left-right { 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-fluid-padding-left-right { padding-left: 48px; padding-right: 48px; } } @media (max-width: 599px ) { .gv-activated .gv-mobile-margin-sm { margin: var(--size-sm); } .gv-activated .gv-mobile-margin-md { margin: var(--size-md); } .gv-activated .gv-mobile-margin-lg { margin: var(--size-lg); } .gv-activated .gv-mobile-margin-top-sm { margin-top: var(--size-sm); } .gv-activated .gv-mobile-margin-top-md { margin-top: var(--size-md); } .gv-activated .gv-mobile-margin-top-lg { margin-top: var(--size-lg); } .gv-activated .gv-mobile-margin-bottom-sm { margin-bottom: var(--size-sm); } .gv-activated .gv-mobile-margin-bottom-md { margin-bottom: var(--size-md); } .gv-activated .gv-mobile-margin-bottom-lg { margin-bottom: var(--size-lg); } .gv-activated .gv-mobile-margin-left-sm { margin-left: var(--size-sm); } .gv-activated .gv-mobile-margin-left-md { margin-left: var(--size-md); } .gv-activated .gv-mobile-margin-left-lg { margin-left: var(--size-lg); } .gv-activated .gv-mobile-margin-right-sm { margin-right: var(--size-sm); } .gv-activated .gv-mobile-margin-right-md { margin-right: var(--size-md); } .gv-activated .gv-mobile-margin-right-lg { margin-right: var(--size-lg); } .gv-activated .gv-mobile-padding-sm { padding: var(--size-sm); } .gv-activated .gv-mobile-padding-md { padding: var(--size-md); } .gv-activated .gv-mobile-padding-lg { padding: var(--size-lg); } .gv-activated .gv-mobile-padding-top-sm { padding-top: var(--size-sm); } .gv-activated .gv-mobile-padding-top-md { padding-top: var(--size-md); } .gv-activated .gv-mobile-padding-top-lg { padding-top: var(--size-lg); } .gv-activated .gv-mobile-padding-bottom-sm { padding-bottom: var(--size-sm); } .gv-activated .gv-mobile-padding-bottom-md { padding-bottom: var(--size-md); } .gv-activated .gv-mobile-padding-bottom-lg { padding-bottom: var(--size-lg); } .gv-activated .gv-mobile-padding-left-sm { padding-left: var(--size-sm); } .gv-activated .gv-mobile-padding-left-md { padding-left: var(--size-md); } .gv-activated .gv-mobile-padding-left-lg { padding-left: var(--size-lg); } .gv-activated .gv-mobile-padding-right-sm { padding-right: var(--size-sm); } .gv-activated .gv-mobile-padding-right-md { padding-right: var(--size-md); } .gv-activated .gv-mobile-padding-right-lg { padding-right: var(--size-lg); } .gv-activated .gv-mobile-no-margin { margin: 0 !important; } .gv-activated .gv-mobile-no-margin-top { margin-top: 0 !important; } .gv-activated .gv-mobile-no-margin-bottom { margin-bottom: 0 !important; } .gv-activated .gv-mobile-no-margin-top-bottom { margin-top: 0 !important; margin-bottom: 0 !important; } .gv-activated .gv-mobile-no-margin-left { margin-left: 0 !important; } .gv-activated .gv-mobile-no-margin-right { margin-right: 0 !important; } .gv-activated .gv-mobile-no-margin-left-right { margin-left: 0 !important; margin-right: 0 !important; } .gv-activated .gv-mobile-no-padding { padding: 0 !important; } .gv-activated .gv-mobile-no-padding-top { padding-top: 0 !important; } .gv-activated .gv-mobile-no-padding-bottom { padding-bottom: 0 !important; } .gv-activated .gv-mobile-no-padding-top-bottom { padding-top: 0 !important; padding-bottom: 0 !important; } .gv-activated .gv-mobile-no-padding-left { padding-left: 0 !important; } .gv-activated .gv-mobile-no-padding-right { padding-right: 0 !important; } .gv-activated .gv-mobile-no-padding-left-right { padding-left: 0 !important; padding-right: 0 !important; } } @media (min-width: 600px ) and (max-width: 1023px ) { .gv-activated .gv-tablet-margin-sm { margin: var(--size-sm); } .gv-activated .gv-tablet-margin-md { margin: var(--size-md); } .gv-activated .gv-tablet-margin-lg { margin: var(--size-lg); } .gv-activated .gv-tablet-margin-top-sm { margin-top: var(--size-sm); } .gv-activated .gv-tablet-margin-top-md { margin-top: var(--size-md); } .gv-activated .gv-tablet-margin-top-lg { margin-top: var(--size-lg); } .gv-activated .gv-tablet-margin-bottom-sm { margin-bottom: var(--size-sm); } .gv-activated .gv-tablet-margin-bottom-md { margin-bottom: var(--size-md); } .gv-activated .gv-tablet-margin-bottom-lg { margin-bottom: var(--size-lg); } .gv-activated .gv-tablet-margin-left-sm { margin-left: var(--size-sm); } .gv-activated .gv-tablet-margin-left-md { margin-left: var(--size-md); } .gv-activated .gv-tablet-margin-left-lg { margin-left: var(--size-lg); } .gv-activated .gv-tablet-margin-right-sm { margin-right: var(--size-sm); } .gv-activated .gv-tablet-margin-right-md { margin-right: var(--size-md); } .gv-activated .gv-tablet-margin-right-lg { margin-right: var(--size-lg); } .gv-activated .gv-tablet-padding-sm { padding: var(--size-sm); } .gv-activated .gv-tablet-padding-md { padding: var(--size-md); } .gv-activated .gv-tablet-padding-lg { padding: var(--size-lg); } .gv-activated .gv-tablet-padding-top-sm { padding-top: var(--size-sm); } .gv-activated .gv-tablet-padding-top-md { padding-top: var(--size-md); } .gv-activated .gv-tablet-padding-top-lg { padding-top: var(--size-lg); } .gv-activated .gv-tablet-padding-bottom-sm { padding-bottom: var(--size-sm); } .gv-activated .gv-tablet-padding-bottom-md { padding-bottom: var(--size-md); } .gv-activated .gv-tablet-padding-bottom-lg { padding-bottom: var(--size-lg); } .gv-activated .gv-tablet-padding-left-sm { padding-left: var(--size-sm); } .gv-activated .gv-tablet-padding-left-md { padding-left: var(--size-md); } .gv-activated .gv-tablet-padding-left-lg { padding-left: var(--size-lg); } .gv-activated .gv-tablet-padding-right-sm { padding-right: var(--size-sm); } .gv-activated .gv-tablet-padding-right-md { padding-right: var(--size-md); } .gv-activated .gv-tablet-padding-right-lg { padding-right: var(--size-lg); } } @media (min-width: 600px ) and (max-width: 767px ) { .gv-activated .gv-tablet-small-margin-sm { margin: var(--size-sm); } .gv-activated .gv-tablet-small-margin-md { margin: var(--size-md); } .gv-activated .gv-tablet-small-margin-lg { margin: var(--size-lg); } .gv-activated .gv-tablet-small-margin-top-sm { margin-top: var(--size-sm); } .gv-activated .gv-tablet-small-margin-top-md { margin-top: var(--size-md); } .gv-activated .gv-tablet-small-margin-top-lg { margin-top: var(--size-lg); } .gv-activated .gv-tablet-small-margin-bottom-sm { margin-bottom: var(--size-sm); } .gv-activated .gv-tablet-small-margin-bottom-md { margin-bottom: var(--size-md); } .gv-activated .gv-tablet-small-margin-bottom-lg { margin-bottom: var(--size-lg); } .gv-activated .gv-tablet-small-margin-left-sm { margin-left: var(--size-sm); } .gv-activated .gv-tablet-small-margin-left-md { margin-left: var(--size-md); } .gv-activated .gv-tablet-small-margin-left-lg { margin-left: var(--size-lg); } .gv-activated .gv-tablet-small-margin-right-sm { margin-right: var(--size-sm); } .gv-activated .gv-tablet-small-margin-right-md { margin-right: var(--size-md); } .gv-activated .gv-tablet-small-margin-right-lg { margin-right: var(--size-lg); } .gv-activated .gv-tablet-small-padding-sm { padding: var(--size-sm); } .gv-activated .gv-tablet-small-padding-md { padding: var(--size-md); } .gv-activated .gv-tablet-small-padding-lg { padding: var(--size-lg); } .gv-activated .gv-tablet-small-padding-top-sm { padding-top: var(--size-sm); } .gv-activated .gv-tablet-small-padding-top-md { padding-top: var(--size-md); } .gv-activated .gv-tablet-small-padding-top-lg { padding-top: var(--size-lg); } .gv-activated .gv-tablet-small-padding-bottom-sm { padding-bottom: var(--size-sm); } .gv-activated .gv-tablet-small-padding-bottom-md { padding-bottom: var(--size-md); } .gv-activated .gv-tablet-small-padding-bottom-lg { padding-bottom: var(--size-lg); } .gv-activated .gv-tablet-small-padding-left-sm { padding-left: var(--size-sm); } .gv-activated .gv-tablet-small-padding-left-md { padding-left: var(--size-md); } .gv-activated .gv-tablet-small-padding-left-lg { padding-left: var(--size-lg); } .gv-activated .gv-tablet-small-padding-right-sm { padding-right: var(--size-sm); } .gv-activated .gv-tablet-small-padding-right-md { padding-right: var(--size-md); } .gv-activated .gv-tablet-small-padding-right-lg { padding-right: var(--size-lg); } } @media (min-width: 768px ) and (max-width: 1023px ) { .gv-activated .gv-tablet-large-margin-sm { margin: var(--size-sm); } .gv-activated .gv-tablet-large-margin-md { margin: var(--size-md); } .gv-activated .gv-tablet-large-margin-lg { margin: var(--size-lg); } .gv-activated .gv-tablet-large-margin-top-sm { margin-top: var(--size-sm); } .gv-activated .gv-tablet-large-margin-top-md { margin-top: var(--size-md); } .gv-activated .gv-tablet-large-margin-top-lg { margin-top: var(--size-lg); } .gv-activated .gv-tablet-large-margin-bottom-sm { margin-bottom: var(--size-sm); } .gv-activated .gv-tablet-large-margin-bottom-md { margin-bottom: var(--size-md); } .gv-activated .gv-tablet-large-margin-bottom-lg { margin-bottom: var(--size-lg); } .gv-activated .gv-tablet-large-margin-left-sm { margin-left: var(--size-sm); } .gv-activated .gv-tablet-large-margin-left-md { margin-left: var(--size-md); } .gv-activated .gv-tablet-large-margin-left-lg { margin-left: var(--size-lg); } .gv-activated .gv-tablet-large-margin-right-sm { margin-right: var(--size-sm); } .gv-activated .gv-tablet-large-margin-right-md { margin-right: var(--size-md); } .gv-activated .gv-tablet-large-margin-right-lg { margin-right: var(--size-lg); } .gv-activated .gv-tablet-large-padding-sm { padding: var(--size-sm); } .gv-activated .gv-tablet-large-padding-md { padding: var(--size-md); } .gv-activated .gv-tablet-large-padding-lg { padding: var(--size-lg); } .gv-activated .gv-tablet-large-padding-top-sm { padding-top: var(--size-sm); } .gv-activated .gv-tablet-large-padding-top-md { padding-top: var(--size-md); } .gv-activated .gv-tablet-large-padding-top-lg { padding-top: var(--size-lg); } .gv-activated .gv-tablet-large-padding-bottom-sm { padding-bottom: var(--size-sm); } .gv-activated .gv-tablet-large-padding-bottom-md { padding-bottom: var(--size-md); } .gv-activated .gv-tablet-large-padding-bottom-lg { padding-bottom: var(--size-lg); } .gv-activated .gv-tablet-large-padding-left-sm { padding-left: var(--size-sm); } .gv-activated .gv-tablet-large-padding-left-md { padding-left: var(--size-md); } .gv-activated .gv-tablet-large-padding-left-lg { padding-left: var(--size-lg); } .gv-activated .gv-tablet-large-padding-right-sm { padding-right: var(--size-sm); } .gv-activated .gv-tablet-large-padding-right-md { padding-right: var(--size-md); } .gv-activated .gv-tablet-large-padding-right-lg { padding-right: var(--size-lg); } } @media (min-width: 1024px ) { .gv-activated .gv-desktop-margin-sm { margin: var(--size-sm); } .gv-activated .gv-desktop-margin-md { margin: var(--size-md); } .gv-activated .gv-desktop-margin-lg { margin: var(--size-lg); } .gv-activated .gv-desktop-margin-top-sm { margin-top: var(--size-sm); } .gv-activated .gv-desktop-margin-top-md { margin-top: var(--size-md); } .gv-activated .gv-desktop-margin-top-lg { margin-top: var(--size-lg); } .gv-activated .gv-desktop-margin-bottom-sm { margin-bottom: var(--size-sm); } .gv-activated .gv-desktop-margin-bottom-md { margin-bottom: var(--size-md); } .gv-activated .gv-desktop-margin-bottom-lg { margin-bottom: var(--size-lg); } .gv-activated .gv-desktop-margin-left-sm { margin-left: var(--size-sm); } .gv-activated .gv-desktop-margin-left-md { margin-left: var(--size-md); } .gv-activated .gv-desktop-margin-left-lg { margin-left: var(--size-lg); } .gv-activated .gv-desktop-margin-right-sm { margin-right: var(--size-sm); } .gv-activated .gv-desktop-margin-right-md { margin-right: var(--size-md); } .gv-activated .gv-desktop-margin-right-lg { margin-right: var(--size-lg); } .gv-activated .gv-desktop-padding-sm { padding: var(--size-sm); } .gv-activated .gv-desktop-padding-md { padding: var(--size-md); } .gv-activated .gv-desktop-padding-lg { padding: var(--size-lg); } .gv-activated .gv-desktop-padding-top-sm { padding-top: var(--size-sm); } .gv-activated .gv-desktop-padding-top-md { padding-top: var(--size-md); } .gv-activated .gv-desktop-padding-top-lg { padding-top: var(--size-lg); } .gv-activated .gv-desktop-padding-bottom-sm { padding-bottom: var(--size-sm); } .gv-activated .gv-desktop-padding-bottom-md { padding-bottom: var(--size-md); } .gv-activated .gv-desktop-padding-bottom-lg { padding-bottom: var(--size-lg); } .gv-activated .gv-desktop-padding-left-sm { padding-left: var(--size-sm); } .gv-activated .gv-desktop-padding-left-md { padding-left: var(--size-md); } .gv-activated .gv-desktop-padding-left-lg { padding-left: var(--size-lg); } .gv-activated .gv-desktop-padding-right-sm { padding-right: var(--size-sm); } .gv-activated .gv-desktop-padding-right-md { padding-right: var(--size-md); } .gv-activated .gv-desktop-padding-right-lg { padding-right: var(--size-lg); } } /* Deprecated - Margin and padding mixins */ /* Deprecated - Remove spacing mixin */ /* Deprecated - Fluid mixin */ /* Brand bootstrapping */ .gv-activated { /* Universal sizes */ --size-xs: 4px; --size-sm: 8px; --size-md: 16px; --size-lg: 24px; --size-xl: 48px; --size-border: 1px; /* Icon sizes */ --size-icon-sm: 20px; --size-icon-md: 24px; /* Tile sizes */ --size-tile-sm: 48px; --size-tile-md: 72px; --size-tile-lg: 96px; --size-tile-xl: 144px; /* Section sizes */ --size-section-x-min: 24px; --size-section-x-max: 160px; --size-section-y-min: 48px; --size-section-y-max: 96px; /* Font weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line-heights */ --line-height-body: 1.5; --line-height-heading: 1.3; /** * 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-300: #e2e2e2; --color-gray-400: #cecece; --color-gray-500: #69686b; --color-gray-600: #3a383e; --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); /* 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); /* Button */ --color-button-bg-primary: var(--color-primary); --color-button-bg-cta: var(--color-cta); --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); /* 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-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-highlight: var(--color-state-active); /* 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.8); --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: #c70018; --color-signal-alert-light: #f8d9dd; --color-signal-info: #0066aa; --color-signal-info-light: #d9ebf7; --color-signal-success: #5d9a18; --color-signal-success-light: #ddedca; --color-signal-warning: #db7300; --color-signal-warning-light: #ffedd9; /* 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); --border-radius: 4px; --button-radius: var(--border-radius); --input-radius: var(--border-radius); --card-radius: var(--border-radius); --notice-radius: var(--border-radius); --chip-radius: 100px; /* Form */ --color-state-form-active: #0066aa; --color-fg-form-on: var(--color-gray-100); --form-element-height: 48px; /* 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; --color-primary: #0078c8; --color-secondary: #76b82a; --color-cta: var(--color-secondary); --color-illustration-100: #ebf5df; --color-illustration-200: #d9ebf7; --color-illustration-300: #a6d0ec; --color-state-active: #d9ebf7; --color-state-hover: #f2f8fc; --color-state-focus: #59a7db; --color-loader-primary: var(--color-primary); --color-loader-secondary: #b3d7ef; } .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); /* Surface */ --color-surface-bright: var(--color-gray-700); --color-surface-dim: var(--color-gray-800); --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); /* 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-light: rgba(20, 20, 20, 0.8); /* Signal colors */ --color-signal-alert: #f18c99; --color-signal-alert-light: #850d0a; --color-signal-info: #d9ebf7; --color-signal-info-light: #235c9d; --color-signal-success: #d7f4b5; --color-signal-success-light: #186065; --color-signal-warning: #febf79; --color-signal-warning-light: #856304; /* 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); /* Form */ --color-state-form-active: #bfd9ea; --color-fg-form-on: var(--color-gray-900); --color-illustration-100: #bcc4b2; --color-illustration-200: #aebaca; --color-illustration-300: #87a1c8; --color-state-active: #00548c; --color-state-hover: #003c64; --color-surface-highlight: #00426e; }