/* stylelint-disable at-rule-no-vendor-prefix, value-keyword-case, length-zero-no-unit, declaration-empty-line-before, rule-empty-line-before, selector-pseudo-element-colon-notation, hue-degree-notation, value-no-vendor-prefix, selector-no-vendor-prefix, font-family-no-missing-generic-family-keyword, shorthand-property-no-redundant-values, number-max-precision, no-duplicate-selectors, keyframes-name-pattern, comment-empty-line-before, media-feature-name-value-no-unknown, declaration-block-no-duplicate-properties, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, declaration-block-no-duplicate-custom-properties, media-feature-range-notation, color-function-alias-notation, custom-property-empty-line-before, font-family-name-quotes, declaration-property-value-no-unknown, property-no-vendor-prefix, selector-attribute-quotes */
/* ==========================================================================
* ASUS Design System
* Based on ASUS brand guidelines and Figma design specifications
* ========================================================================== */
/* CSS Custom Properties for Colors - Aligned with webpack/scss design system */
:root {
/* Font families */
--font-text: "Roboto";
--font-display: "TTNormsProMedium";
--font-display-regular: "TTNormsProRegular";
--regular: 400;
--medium: 500;
/* Container widths */
--container: 100%;
--container-xl: 1240px;
--container-xxl: 1440px;
/* Brand colors */
--color-brand-asus: #0057b7;
--color-brand-rog: #f7323f;
/* Base colors */
--color-black: #000;
--color-white: #fff;
/* Status colors */
--color-success: #6fc371;
--color-info: #006ce1;
--color-warning: #f05f17;
--color-error: #e75b4b;
--color-focus-ring: #006ce1;
--color-border-type: #1a821c;
--color-select-box-highlight: #248dff;
/* Primary color palette */
--color-primary: #000;
--color-primary-base: #000;
--color-primary-50: #16151b;
--color-primary-100: #181818;
--color-primary-200: #262626;
--color-primary-300: #4d4d4d;
--color-primary-400: #666;
--color-primary-500: #818181;
--color-primary-600: #999;
--color-primary-700: #ccc;
--color-primary-800: #dcdcdc;
--color-primary-900: #f5f5f5;
--color-primary-950: #fff;
/* Border radius */
--border-radius-xs: 0.25rem;
--border-radius-sm: 0.375rem;
--border-radius: 0.5rem;
--border-radius-md: 0.625rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-xxl: 1.25rem;
--border-radius-xxxl: 1.5rem;
--border-radius-xxxxl: 2rem;
/* Spacing scale */
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-13: 3.25rem;
--spacing-14: 3.5rem;
--spacing-15: 3.75rem;
--spacing-16: 4rem;
--spacing-18: 4.5rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
--spacing-40: 10rem;
--spacing-48: 12rem;
--spacing-56: 14rem;
--spacing-64: 16rem;
/* Shadows / Elevations */
--shadow-normal: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
--shadow-interactive: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
--shadow-hover: 0px 8px 24px 0px rgba(0, 0, 0, 0.22);
--shadow-strong: 0px 8px 30px 0px rgba(0, 0, 0, 0.3);
--shadow-strong-light-blue: 0 0 30px rgba(0, 183, 255, 0.6);
/* Typography scale (font-size / line-height) */
--text-xxs: 0.75rem;
--text-xxs-lh: 1.125rem;
--text-xs: 0.8125rem;
--text-xs-lh: 1.125rem;
--text-sm: 0.875rem;
--text-sm-lh: 1.25rem;
--text-base: 1rem;
--text-base-lh: 1.5rem;
--text-lg: 1.125rem;
--text-lg-lh: 1.5rem;
--text-xl: 1.125rem;
--text-xl-lh: 1.625rem;
--text-2xl: 1.25rem;
--text-2xl-lh: 1.75rem;
--text-3xl: 1.875rem;
--text-3xl-lh: 2.375rem;
--text-4xl: 2.75rem;
--text-4xl-lh: 3.25rem;
--text-5xl: 3.25rem;
--text-5xl-lh: 3.75rem;
--text-pdp-font: 0.875rem;
--text-pdp-font-lh: 1.125rem;
/* Gradients */
--gradient-product-card: conic-gradient(from 90deg,
rgba(107, 121, 145, 1) 0deg,
rgba(107, 121, 145, 1) 71.2543deg,
rgba(107, 121, 145, 1) 161.353deg,
rgba(107, 121, 145, 1) 245.421deg,
rgba(107, 121, 145, 1) 339.262deg,
rgba(107, 121, 145, 1) 360deg);
/* Swiper resets */
--swiper-pagination-bullet-horizontal-gap: 0;
}
/* LCP Font Loading Optimization - Prevent FOIT (Flash of Invisible Text) */
@font-face {
font-family: 'Roboto';
font-display: swap;
/* Immediate text render with fallback, swap to web font when loaded */
}
@font-face {
font-family: 'TTNormsProMedium';
font-display: swap;
/* Immediate text render with fallback, swap to web font when loaded */
}
@font-face {
font-family: 'TTNormsProRegular';
font-display: swap;
/* Immediate text render with fallback, swap to web font when loaded */
}
html,
body {
margin: 0;
scroll-behavior: smooth;
overflow-x: hidden;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: var(--color-primary);
color: var(--color-primary-950);
overflow-x: hidden;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
}
.sr-only,
.sr-only-fixed {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-fixed {
position: fixed;
top: -20px;
left: -20px;
}
/**
* ==========================================================================
* Base Typography
* ==========================================================================
*/
h1,
.text-h1,
.text-display1 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 3.25rem;
line-height: 3.75rem;
}
h2,
.text-h2,
.text-display2 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 2.75rem;
line-height: 3.25rem;
}
h3,
.text-h3,
.text-display3 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.875rem;
line-height: 2.375rem;
}
h4,
.text-h4,
.text-display4 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.75rem;
}
h5,
.text-h5,
.text-display5 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.125rem;
line-height: 1.625rem;
}
h6,
.text-h6,
.text-display6 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
}
.text-display7 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 0.875rem;
line-height: 1.25rem;
}
p,
.text-base {
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
}
.text-bolder {
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: var(--medium);
}
b,
strong,
.text-bold {
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
font-weight: var(--medium);
}
small,
.text-small {
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 0.875rem;
line-height: 1.25rem;
letter-spacing: 0.16px;
}
.text-x-small {
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 0.8125rem;
line-height: 1.125rem;
letter-spacing: 0.24px;
}
@media only screen and (max-width: 35.9375rem) {
h1,
.text-h1,
.text-display1 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.875rem;
line-height: 2.375rem;
}
h2,
.text-h2,
.text-display2 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.875rem;
line-height: 2.375rem;
}
h3,
.text-h3,
.text-display3 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.25rem;
line-height: 1.75rem;
}
h4,
.text-h4,
.text-display4 {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.125rem;
line-height: 1.625rem;
}
}
/**
* ==========================================================================
* A11Y
* ==========================================================================
*/
:focus-visible {
outline: solid 2px var(--color-focus-ring);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/**
* ==========================================================================
* Light theme
* ==========================================================================
*/
.light-mode {
background-color: var(--color-primary-950);
color: var(--color-primary);
}
/**
* ==========================================================================
* Generic classes for testing
* We can remove these classes later if not in use.
* ==========================================================================
*/
.product-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media only screen and (min-width: 45.6875rem) {
.product-grid {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (min-width: 64rem) {
.product-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.section-with-bottom-spacing {
padding-bottom: 120px;
}
@media only screen and (max-width: 45.625rem) {
.section-with-bottom-spacing {
padding-bottom: 2rem;
}
}
@media only screen and (max-width: 63.9375rem) {
.section-with-bottom-spacing {
padding-bottom: 2rem;
}
}
.section-with-top-spacing {
padding-top: 4rem;
}
@media only screen and (max-width: 45.625rem) {
.section-with-top-spacing {
padding-top: 2rem;
}
}
@media only screen and (max-width: 63.9375rem) {
.section-with-top-spacing {
padding-top: 2rem;
}
}
body.no-scroll {
overflow: hidden;
height: 100%;
}
@media only screen and (max-width: 45.625rem) {
.hide-on-mobile {
display: none;
}
}
/* Carousel - Starts*/
.carousel .cmp-carousel__actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.75rem;
}
.carousel .cmp-carousel__actions:has(.cmp-carousel__action--disabled + .cmp-carousel__action--disabled) {
display: none;
}
.carousel .cmp-carousel__action {
width: 48px;
height: 48px;
background: url('data:image/svg+xml,') center/contain no-repeat;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
border: 0;
}
.carousel .cmp-carousel__action--previous {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.carousel .cmp-carousel__action--disabled {
background: url('data:image/svg+xml,') center/contain no-repeat;
cursor: default;
}
@media only screen and (max-width: 79.9375rem) {
.carousel .cmp-carousel__action {
width: 28px;
height: 28px;
}
}
.cmp-carousel {
position: relative;
}
.cmp-carousel__content {
position: relative;
}
.cmp-carousel__content--overflow .swiper {
overflow: visible;
}
.cmp-carousel__footer {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
bottom: 20px;
min-height: 32px;
width: 100%;
z-index: 2;
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.cmp-carousel__indicators-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.8);
border-radius: 32px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 16px;
}
.cmp-carousel__indicators {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
margin-top: -4px;
margin-left: -4px;
}
.cmp-carousel__indicator {
width: 24px;
height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
background-color: transparent;
margin: 0;
padding: 0;
}
.cmp-carousel__indicator::before {
content: "";
width: 8px;
height: 8px;
border-radius: 8px;
background-color: transparent;
border: 1px solid var(--color-primary-950);
display: inline-block;
opacity: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cmp-carousel__indicator:hover::before {
background-color: rgba(255, 255, 255, 0.4);
}
.cmp-carousel__indicator:focus {
outline: 0;
}
.cmp-carousel__indicator:focus::before {
outline: 2px solid var(--color-focus-ring);
}
.cmp-carousel__indicator--active {
width: 96px;
margin: 0 8px;
border: 0;
cursor: default;
}
.cmp-carousel__indicator--active::before {
width: 100%;
background-color: var(--color-primary-300);
border: 0;
}
.cmp-carousel__indicator--active::after {
content: "";
background-color: var(--color-primary-950);
border-radius: 8px;
-webkit-transform-origin: left;
transform-origin: left;
position: absolute;
top: 8px;
height: 8px;
width: calc(100% * var(--slide-progress, 0));
left: 0px;
}
.cmp-carousel__indicator--active-full::after {
content: "";
background-color: var(--color-primary-950);
border-radius: 8px;
-webkit-transform-origin: left;
transform-origin: left;
position: absolute;
top: 8px;
height: 8px;
width: 99%;
left: 0px;
}
.cmp-carousel__media-controls {
position: absolute;
right: 32px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
gap: 0.5rem;
display: none;
}
.cmp-carousel__media-controls .cmp-carousel__media-control--play-pause {
background: url('data:image/svg+xml,');
}
.cmp-carousel__media-controls.paused .cmp-carousel__media-control--play-pause {
background-image: url('data:image/svg+xml,');
}
.cmp-carousel__media-control {
width: 32px;
height: 32px;
background-color: var(--color-primary-950);
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
border: none;
}
.cmp-carousel .carousel-autoplay-toggle {
background: url('data:image/svg+xml,') center/16px no-repeat;
width: 24px;
height: 24px;
border: 0;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
color: var(--color-primary-950);
padding: 0.25rem;
margin-top: -4px;
}
.cmp-carousel:has(.swiper-slide-active .hero-video) .cmp-carousel__media-controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.cmp-carousel[data-carousel-effect=creative] {
overflow-x: visible;
gap: 1.25rem;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__content {
grid-column: 1/12;
}
.cmp-carousel[data-carousel-effect=creative] .swiper-3d {
overflow: visible;
width: 100%;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__footer {
position: relative;
top: unset;
bottom: unset;
margin-top: 2rem;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__actions {
display: none;
}
@media only screen and (min-width: 64rem) {
.cmp-carousel[data-carousel-effect=creative] {
display: grid;
grid-template-columns: repeat(12, 1fr);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__content {
grid-column: 2/12;
}
.cmp-carousel[data-carousel-effect=creative] .swiper-3d {
max-width: 1032px;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__action {
position: relative;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__action--previous {
left: -32px;
translate: -100% 0;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__action--next {
right: -32px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.cmp-carousel:has(.is-autoplay-paused) .carousel-autoplay-toggle {
background-image: url('data:image/svg+xml,');
}
.swiper:not(.is-autoplay-enabled) .cmp-carousel__indicator--active {
background-color: var(--color-primary-950);
}
@media only screen and (max-width: 45.625rem) {
.cmp-carousel__footer {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.cmp-carousel__footer .cmp-carousel__media-controls {
position: static;
right: unset;
top: unset;
-webkit-transform: none;
transform: none;
margin-left: auto;
}
.cmp-carousel[data-carousel-effect=creative] .cmp-carousel__footer {
margin-top: 1.25rem;
}
}
.cmp-carousel__item {
display: block;
}
.cmp-carousel__item.swiper-slide {
width: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
}
.swiper-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
section:has(.cmp-carousel) {
overflow: hidden;
}
/* Carousel - Ends*/
@media only screen and (max-width: 45.5625rem) {
.cmp-carousel:has(.cmp-hero-banner) .cmp-carousel__footer {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
bottom: 20px;
justify-content: space-between
}
}
.section-heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 2rem;
gap: 1.25rem;
}
.section-heading__text-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
}
.section-heading.content-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.section-heading.content-center .section-heading__text-group {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.section-heading .section-heading__title {
color: var(--color-primary-950);
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 2.75rem;
line-height: 3.25rem;
margin: 0;
}
.section-heading .section-heading__description {
color: var(--color-primary-950);
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
margin-top: 0.5rem;
}
.section-heading .section-heading__subtitle-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1rem;
}
.section-heading .section-heading__subtitle-container .section-heading__description {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
margin-top: 0.5rem;
}
.section-heading .section-heading__action-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 1rem;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.section-heading .section-heading__action-buttons .sr-only {
color: var(--color-primary-950);
}
@media only screen and (max-width: 79.9375rem) {
.section-heading {
margin-bottom: 1.25rem;
}
.section-heading__text-group {
word-wrap: break-word;
overflow-wrap: break-word;
-ms-hyphens: auto;
hyphens: auto;
}
.section-heading .section-heading__title {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 1.875rem;
line-height: 2.375rem;
}
.section-heading .section-heading__description {
font-family: var(--font-display);
font-weight: var(--medium);
letter-spacing: 0;
font-size: 0.875rem;
line-height: 1.25rem;
}
.section-heading .section-heading__action-buttons {
gap: 0.75rem;
}
}
@media only screen and (max-width: 79.9375rem) {
.product-matches-page .section-heading.content-center {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: left;
}
.product-matches-page .section-heading.content-center .section-heading__text-group {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.section-actions-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 2rem;
}
.section-actions-container .section-actions-btn {
background-color: var(--color-black-50);
color: var(--color-white);
border: none;
cursor: pointer;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1.125rem;
line-height: 1.5rem;
}
.section-actions-container .section-actions-btn .icon {
width: 12px;
height: 12px;
}
.section-actions-container .loader {
display: none;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite;
}
.section-actions-container .loader .icon {
width: 48px;
height: 48px;
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.section-actions-container.is-loading {
margin-top: 0;
padding-top: 6rem;
}
.section-actions-container.is-loading .section-actions-btn {
display: none;
}
.section-actions-container.is-loading .loader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.section-actions-container.has-more:not(.is-loading) .section-actions-btn {
display: block;
}
@media only screen and (max-width: 79.9375rem) {
.section-actions-container {
margin-top: 1.25rem;
}
}
.gradient-animation--active::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: conic-gradient(from 90deg, rgb(24, 36, 75) 0deg, rgb(25, 54, 122) 109.038deg, rgb(89, 21, 67) 188.654deg, rgb(23, 19, 31) 256.154deg, rgb(24, 36, 75) 360deg);
-webkit-filter: blur(150px);
filter: blur(150px);
/* Gaussian blur */
-webkit-animation: rotateGradient 20s linear infinite;
animation: rotateGradient 20s linear infinite;
/* animate rotation */
}
/* Gradient rotation animation */
@-webkit-keyframes rotateGradient {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotateGradient {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.star-rating-wrapper [data-bv-theme=light] .bv_main_container .bv_text {
color: var(--color-primary-300) !important;
}
/**
* ==========================================================================
* Utility classes
* ==========================================================================
*/
/**
* ==========================================================================
* Background Colors
* ==========================================================================
*/
.bg-light {
background-color: #fff;
}
.bg-dark {
background-color: #000;
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-info {
background-color: var(--color-info);
}
.bg-warning {
background-color: var(--color-warning);
}
.bg-error {
background-color: var(--color-error);
}
.bg-success {
background-color: var(--color-success);
}
.bg-primary-base {
background-color: #000;
}
.bg-primary-50 {
background-color: #16151b;
}
.bg-primary-100 {
background-color: #181818;
}
.bg-primary-200 {
background-color: #262626;
}
.bg-primary-300 {
background-color: #4d4d4d;
}
.bg-primary-400 {
background-color: #666;
}
.bg-primary-500 {
background-color: #818181;
}
.bg-primary-600 {
background-color: #999;
}
.bg-primary-700 {
background-color: #ccc;
}
.bg-primary-800 {
background-color: #dcdcdc;
}
.bg-primary-900 {
background-color: #f5f5f5;
}
.bg-primary-950 {
background-color: #fff;
}
/**
* ==========================================================================
* Border Utility Classes
* ==========================================================================
*/
.border-t-0 {
border: 0;
}
.border-r-0 {
border: 0;
}
.border-b-0 {
border: 0;
}
.border-l-0 {
border: 0;
}
.border-x-0 {
border: 0;
}
.border-y-0 {
border: 0;
}
.border-0 {
border: 0;
}
.border-t-1 {
border: 0.25rem;
}
.border-r-1 {
border: 0.25rem;
}
.border-b-1 {
border: 0.25rem;
}
.border-l-1 {
border: 0.25rem;
}
.border-x-1 {
border: 0.25rem;
}
.border-y-1 {
border: 0.25rem;
}
.border-1 {
border: 0.25rem;
}
.border-t-2 {
border: 0.5rem;
}
.border-r-2 {
border: 0.5rem;
}
.border-b-2 {
border: 0.5rem;
}
.border-l-2 {
border: 0.5rem;
}
.border-x-2 {
border: 0.5rem;
}
.border-y-2 {
border: 0.5rem;
}
.border-2 {
border: 0.5rem;
}
.border-t-3 {
border: 0.75rem;
}
.border-r-3 {
border: 0.75rem;
}
.border-b-3 {
border: 0.75rem;
}
.border-l-3 {
border: 0.75rem;
}
.border-x-3 {
border: 0.75rem;
}
.border-y-3 {
border: 0.75rem;
}
.border-3 {
border: 0.75rem;
}
.border-t-4 {
border: 1rem;
}
.border-r-4 {
border: 1rem;
}
.border-b-4 {
border: 1rem;
}
.border-l-4 {
border: 1rem;
}
.border-x-4 {
border: 1rem;
}
.border-y-4 {
border: 1rem;
}
.border-4 {
border: 1rem;
}
.border-t-5 {
border: 1.25rem;
}
.border-r-5 {
border: 1.25rem;
}
.border-b-5 {
border: 1.25rem;
}
.border-l-5 {
border: 1.25rem;
}
.border-x-5 {
border: 1.25rem;
}
.border-y-5 {
border: 1.25rem;
}
.border-5 {
border: 1.25rem;
}
.border-t-6 {
border: 1.5rem;
}
.border-r-6 {
border: 1.5rem;
}
.border-b-6 {
border: 1.5rem;
}
.border-l-6 {
border: 1.5rem;
}
.border-x-6 {
border: 1.5rem;
}
.border-y-6 {
border: 1.5rem;
}
.border-6 {
border: 1.5rem;
}
.border-t-7 {
border: 1.75rem;
}
.border-r-7 {
border: 1.75rem;
}
.border-b-7 {
border: 1.75rem;
}
.border-l-7 {
border: 1.75rem;
}
.border-x-7 {
border: 1.75rem;
}
.border-y-7 {
border: 1.75rem;
}
.border-7 {
border: 1.75rem;
}
.border-t-8 {
border: 2rem;
}
.border-r-8 {
border: 2rem;
}
.border-b-8 {
border: 2rem;
}
.border-l-8 {
border: 2rem;
}
.border-x-8 {
border: 2rem;
}
.border-y-8 {
border: 2rem;
}
.border-8 {
border: 2rem;
}
.border-t-9 {
border: 2.25rem;
}
.border-r-9 {
border: 2.25rem;
}
.border-b-9 {
border: 2.25rem;
}
.border-l-9 {
border: 2.25rem;
}
.border-x-9 {
border: 2.25rem;
}
.border-y-9 {
border: 2.25rem;
}
.border-9 {
border: 2.25rem;
}
.border-t-10 {
border: 2.5rem;
}
.border-r-10 {
border: 2.5rem;
}
.border-b-10 {
border: 2.5rem;
}
.border-l-10 {
border: 2.5rem;
}
.border-x-10 {
border: 2.5rem;
}
.border-y-10 {
border: 2.5rem;
}
.border-10 {
border: 2.5rem;
}
.border-t-11 {
border: 2.75;
}
.border-r-11 {
border: 2.75;
}
.border-b-11 {
border: 2.75;
}
.border-l-11 {
border: 2.75;
}
.border-x-11 {
border: 2.75;
}
.border-y-11 {
border: 2.75;
}
.border-11 {
border: 2.75;
}
.border-t-12 {
border: 3rem;
}
.border-r-12 {
border: 3rem;
}
.border-b-12 {
border: 3rem;
}
.border-l-12 {
border: 3rem;
}
.border-x-12 {
border: 3rem;
}
.border-y-12 {
border: 3rem;
}
.border-12 {
border: 3rem;
}
.border-t-13 {
border: 3.25rem;
}
.border-r-13 {
border: 3.25rem;
}
.border-b-13 {
border: 3.25rem;
}
.border-l-13 {
border: 3.25rem;
}
.border-x-13 {
border: 3.25rem;
}
.border-y-13 {
border: 3.25rem;
}
.border-13 {
border: 3.25rem;
}
.border-t-14 {
border: 3.5rem;
}
.border-r-14 {
border: 3.5rem;
}
.border-b-14 {
border: 3.5rem;
}
.border-l-14 {
border: 3.5rem;
}
.border-x-14 {
border: 3.5rem;
}
.border-y-14 {
border: 3.5rem;
}
.border-14 {
border: 3.5rem;
}
.border-t-15 {
border: 3.75rem;
}
.border-r-15 {
border: 3.75rem;
}
.border-b-15 {
border: 3.75rem;
}
.border-l-15 {
border: 3.75rem;
}
.border-x-15 {
border: 3.75rem;
}
.border-y-15 {
border: 3.75rem;
}
.border-15 {
border: 3.75rem;
}
.border-t-16 {
border: 4rem;
}
.border-r-16 {
border: 4rem;
}
.border-b-16 {
border: 4rem;
}
.border-l-16 {
border: 4rem;
}
.border-x-16 {
border: 4rem;
}
.border-y-16 {
border: 4rem;
}
.border-16 {
border: 4rem;
}
.border-t-18 {
border: 4.5rem;
}
.border-r-18 {
border: 4.5rem;
}
.border-b-18 {
border: 4.5rem;
}
.border-l-18 {
border: 4.5rem;
}
.border-x-18 {
border: 4.5rem;
}
.border-y-18 {
border: 4.5rem;
}
.border-18 {
border: 4.5rem;
}
.border-t-20 {
border: 5rem;
}
.border-r-20 {
border: 5rem;
}
.border-b-20 {
border: 5rem;
}
.border-l-20 {
border: 5rem;
}
.border-x-20 {
border: 5rem;
}
.border-y-20 {
border: 5rem;
}
.border-20 {
border: 5rem;
}
.border-t-24 {
border: 6rem;
}
.border-r-24 {
border: 6rem;
}
.border-b-24 {
border: 6rem;
}
.border-l-24 {
border: 6rem;
}
.border-x-24 {
border: 6rem;
}
.border-y-24 {
border: 6rem;
}
.border-24 {
border: 6rem;
}
.border-t-32 {
border: 8rem;
}
.border-r-32 {
border: 8rem;
}
.border-b-32 {
border: 8rem;
}
.border-l-32 {
border: 8rem;
}
.border-x-32 {
border: 8rem;
}
.border-y-32 {
border: 8rem;
}
.border-32 {
border: 8rem;
}
.border-t-40 {
border: 10rem;
}
.border-r-40 {
border: 10rem;
}
.border-b-40 {
border: 10rem;
}
.border-l-40 {
border: 10rem;
}
.border-x-40 {
border: 10rem;
}
.border-y-40 {
border: 10rem;
}
.border-40 {
border: 10rem;
}
.border-t-48 {
border: 12rem;
}
.border-r-48 {
border: 12rem;
}
.border-b-48 {
border: 12rem;
}
.border-l-48 {
border: 12rem;
}
.border-x-48 {
border: 12rem;
}
.border-y-48 {
border: 12rem;
}
.border-48 {
border: 12rem;
}
.border-t-56 {
border: 14rem;
}
.border-r-56 {
border: 14rem;
}
.border-b-56 {
border: 14rem;
}
.border-l-56 {
border: 14rem;
}
.border-x-56 {
border: 14rem;
}
.border-y-56 {
border: 14rem;
}
.border-56 {
border: 14rem;
}
.border-t-64 {
border: 16rem;
}
.border-r-64 {
border: 16rem;
}
.border-b-64 {
border: 16rem;
}
.border-l-64 {
border: 16rem;
}
.border-x-64 {
border: 16rem;
}
.border-y-64 {
border: 16rem;
}
.border-64 {
border: 16rem;
}
/**
* ==========================================================================
* Display Classes
* ==========================================================================
*/
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none !important;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex-col-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/**
* ==========================================================================
* Spacing Utility Classes
* ==========================================================================
*/
.mt-0 {
margin-top: 0;
}
.pt-0 {
padding-top: 0;
}
.mr-0 {
margin-right: 0;
}
.pr-0 {
padding-right: 0;
}
.mb-0 {
margin-bottom: 0;
}
.pb-0 {
padding-bottom: 0;
}
.ml-0 {
margin-left: 0;
}
.pl-0 {
padding-left: 0;
}
.mx-0 {
margin-left: 0;
margin-right: 0;
}
.px-0 {
padding-left: 0;
padding-right: 0;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.py-0 {
padding-top: 0;
padding-bottom: 0;
}
.m-0 {
margin: 0;
}
.p-0 {
padding: 0;
}
.gap-0 {
gap: 0;
}
.gap-x-0 {
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.gap-y-0 {
row-gap: 0;
}
.mt-1 {
margin-top: 0.25rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.pr-1 {
padding-right: 0.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.m-1 {
margin: 0.25rem;
}
.p-1 {
padding: 0.25rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-x-1 {
-webkit-column-gap: 0.25rem;
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.m-2 {
margin: 0.5rem;
}
.p-2 {
padding: 0.5rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-x-2 {
-webkit-column-gap: 0.5rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.mx-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.m-3 {
margin: 0.75rem;
}
.p-3 {
padding: 0.75rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-x-3 {
-webkit-column-gap: 0.75rem;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-y-3 {
row-gap: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.pt-4 {
padding-top: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.pr-4 {
padding-right: 1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.ml-4 {
margin-left: 1rem;
}
.pl-4 {
padding-left: 1rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.m-4 {
margin: 1rem;
}
.p-4 {
padding: 1rem;
}
.gap-4 {
gap: 1rem;
}
.gap-x-4 {
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.mr-5 {
margin-right: 1.25rem;
}
.pr-5 {
padding-right: 1.25rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
.ml-5 {
margin-left: 1.25rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.m-5 {
margin: 1.25rem;
}
.p-5 {
padding: 1.25rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-x-5 {
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.gap-y-5 {
row-gap: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.mr-6 {
margin-right: 1.5rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.m-6 {
margin: 1.5rem;
}
.p-6 {
padding: 1.5rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-x-6 {
-webkit-column-gap: 1.5rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.mt-7 {
margin-top: 1.75rem;
}
.pt-7 {
padding-top: 1.75rem;
}
.mr-7 {
margin-right: 1.75rem;
}
.pr-7 {
padding-right: 1.75rem;
}
.mb-7 {
margin-bottom: 1.75rem;
}
.pb-7 {
padding-bottom: 1.75rem;
}
.ml-7 {
margin-left: 1.75rem;
}
.pl-7 {
padding-left: 1.75rem;
}
.mx-7 {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.my-7 {
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.py-7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.m-7 {
margin: 1.75rem;
}
.p-7 {
padding: 1.75rem;
}
.gap-7 {
gap: 1.75rem;
}
.gap-x-7 {
-webkit-column-gap: 1.75rem;
-moz-column-gap: 1.75rem;
column-gap: 1.75rem;
}
.gap-y-7 {
row-gap: 1.75rem;
}
.mt-8 {
margin-top: 2rem;
}
.pt-8 {
padding-top: 2rem;
}
.mr-8 {
margin-right: 2rem;
}
.pr-8 {
padding-right: 2rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.ml-8 {
margin-left: 2rem;
}
.pl-8 {
padding-left: 2rem;
}
.mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.m-8 {
margin: 2rem;
}
.p-8 {
padding: 2rem;
}
.gap-8 {
gap: 2rem;
}
.gap-x-8 {
-webkit-column-gap: 2rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.gap-y-8 {
row-gap: 2rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.pt-9 {
padding-top: 2.25rem;
}
.mr-9 {
margin-right: 2.25rem;
}
.pr-9 {
padding-right: 2.25rem;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.pb-9 {
padding-bottom: 2.25rem;
}
.ml-9 {
margin-left: 2.25rem;
}
.pl-9 {
padding-left: 2.25rem;
}
.mx-9 {
margin-left: 2.25rem;
margin-right: 2.25rem;
}
.px-9 {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.my-9 {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
.py-9 {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.m-9 {
margin: 2.25rem;
}
.p-9 {
padding: 2.25rem;
}
.gap-9 {
gap: 2.25rem;
}
.gap-x-9 {
-webkit-column-gap: 2.25rem;
-moz-column-gap: 2.25rem;
column-gap: 2.25rem;
}
.gap-y-9 {
row-gap: 2.25rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.mr-10 {
margin-right: 2.5rem;
}
.pr-10 {
padding-right: 2.5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.ml-10 {
margin-left: 2.5rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.m-10 {
margin: 2.5rem;
}
.p-10 {
padding: 2.5rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-x-10 {
-webkit-column-gap: 2.5rem;
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
.mt-11 {
margin-top: 2.75;
}
.pt-11 {
padding-top: 2.75;
}
.mr-11 {
margin-right: 2.75;
}
.pr-11 {
padding-right: 2.75;
}
.mb-11 {
margin-bottom: 2.75;
}
.pb-11 {
padding-bottom: 2.75;
}
.ml-11 {
margin-left: 2.75;
}
.pl-11 {
padding-left: 2.75;
}
.mx-11 {
margin-left: 2.75;
margin-right: 2.75;
}
.px-11 {
padding-left: 2.75;
padding-right: 2.75;
}
.my-11 {
margin-top: 2.75;
margin-bottom: 2.75;
}
.py-11 {
padding-top: 2.75;
padding-bottom: 2.75;
}
.m-11 {
margin: 2.75;
}
.p-11 {
padding: 2.75;
}
.gap-11 {
gap: 2.75;
}
.gap-x-11 {
-webkit-column-gap: 2.75;
-moz-column-gap: 2.75;
column-gap: 2.75;
}
.gap-y-11 {
row-gap: 2.75;
}
.mt-12 {
margin-top: 3rem;
}
.pt-12 {
padding-top: 3rem;
}
.mr-12 {
margin-right: 3rem;
}
.pr-12 {
padding-right: 3rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.ml-12 {
margin-left: 3rem;
}
.pl-12 {
padding-left: 3rem;
}
.mx-12 {
margin-left: 3rem;
margin-right: 3rem;
}
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.m-12 {
margin: 3rem;
}
.p-12 {
padding: 3rem;
}
.gap-12 {
gap: 3rem;
}
.gap-x-12 {
-webkit-column-gap: 3rem;
-moz-column-gap: 3rem;
column-gap: 3rem;
}
.gap-y-12 {
row-gap: 3rem;
}
.mt-13 {
margin-top: 3.25rem;
}
.pt-13 {
padding-top: 3.25rem;
}
.mr-13 {
margin-right: 3.25rem;
}
.pr-13 {
padding-right: 3.25rem;
}
.mb-13 {
margin-bottom: 3.25rem;
}
.pb-13 {
padding-bottom: 3.25rem;
}
.ml-13 {
margin-left: 3.25rem;
}
.pl-13 {
padding-left: 3.25rem;
}
.mx-13 {
margin-left: 3.25rem;
margin-right: 3.25rem;
}
.px-13 {
padding-left: 3.25rem;
padding-right: 3.25rem;
}
.my-13 {
margin-top: 3.25rem;
margin-bottom: 3.25rem;
}
.py-13 {
padding-top: 3.25rem;
padding-bottom: 3.25rem;
}
.m-13 {
margin: 3.25rem;
}
.p-13 {
padding: 3.25rem;
}
.gap-13 {
gap: 3.25rem;
}
.gap-x-13 {
-webkit-column-gap: 3.25rem;
-moz-column-gap: 3.25rem;
column-gap: 3.25rem;
}
.gap-y-13 {
row-gap: 3.25rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.pt-14 {
padding-top: 3.5rem;
}
.mr-14 {
margin-right: 3.5rem;
}
.pr-14 {
padding-right: 3.5rem;
}
.mb-14 {
margin-bottom: 3.5rem;
}
.pb-14 {
padding-bottom: 3.5rem;
}
.ml-14 {
margin-left: 3.5rem;
}
.pl-14 {
padding-left: 3.5rem;
}
.mx-14 {
margin-left: 3.5rem;
margin-right: 3.5rem;
}
.px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
.my-14 {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}
.py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.m-14 {
margin: 3.5rem;
}
.p-14 {
padding: 3.5rem;
}
.gap-14 {
gap: 3.5rem;
}
.gap-x-14 {
-webkit-column-gap: 3.5rem;
-moz-column-gap: 3.5rem;
column-gap: 3.5rem;
}
.gap-y-14 {
row-gap: 3.5rem;
}
.mt-15 {
margin-top: 3.75rem;
}
.pt-15 {
padding-top: 3.75rem;
}
.mr-15 {
margin-right: 3.75rem;
}
.pr-15 {
padding-right: 3.75rem;
}
.mb-15 {
margin-bottom: 3.75rem;
}
.pb-15 {
padding-bottom: 3.75rem;
}
.ml-15 {
margin-left: 3.75rem;
}
.pl-15 {
padding-left: 3.75rem;
}
.mx-15 {
margin-left: 3.75rem;
margin-right: 3.75rem;
}
.px-15 {
padding-left: 3.75rem;
padding-right: 3.75rem;
}
.my-15 {
margin-top: 3.75rem;
margin-bottom: 3.75rem;
}
.py-15 {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
.m-15 {
margin: 3.75rem;
}
.p-15 {
padding: 3.75rem;
}
.gap-15 {
gap: 3.75rem;
}
.gap-x-15 {
-webkit-column-gap: 3.75rem;
-moz-column-gap: 3.75rem;
column-gap: 3.75rem;
}
.gap-y-15 {
row-gap: 3.75rem;
}
.mt-16 {
margin-top: 4rem;
}
.pt-16 {
padding-top: 4rem;
}
.mr-16 {
margin-right: 4rem;
}
.pr-16 {
padding-right: 4rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.ml-16 {
margin-left: 4rem;
}
.pl-16 {
padding-left: 4rem;
}
.mx-16 {
margin-left: 4rem;
margin-right: 4rem;
}
.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.m-16 {
margin: 4rem;
}
.p-16 {
padding: 4rem;
}
.gap-16 {
gap: 4rem;
}
.gap-x-16 {
-webkit-column-gap: 4rem;
-moz-column-gap: 4rem;
column-gap: 4rem;
}
.gap-y-16 {
row-gap: 4rem;
}
.mt-18 {
margin-top: 4.5rem;
}
.pt-18 {
padding-top: 4.5rem;
}
.mr-18 {
margin-right: 4.5rem;
}
.pr-18 {
padding-right: 4.5rem;
}
.mb-18 {
margin-bottom: 4.5rem;
}
.pb-18 {
padding-bottom: 4.5rem;
}
.ml-18 {
margin-left: 4.5rem;
}
.pl-18 {
padding-left: 4.5rem;
}
.mx-18 {
margin-left: 4.5rem;
margin-right: 4.5rem;
}
.px-18 {
padding-left: 4.5rem;
padding-right: 4.5rem;
}
.my-18 {
margin-top: 4.5rem;
margin-bottom: 4.5rem;
}
.py-18 {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
.m-18 {
margin: 4.5rem;
}
.p-18 {
padding: 4.5rem;
}
.gap-18 {
gap: 4.5rem;
}
.gap-x-18 {
-webkit-column-gap: 4.5rem;
-moz-column-gap: 4.5rem;
column-gap: 4.5rem;
}
.gap-y-18 {
row-gap: 4.5rem;
}
.mt-20 {
margin-top: 5rem;
}
.pt-20 {
padding-top: 5rem;
}
.mr-20 {
margin-right: 5rem;
}
.pr-20 {
padding-right: 5rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.ml-20 {
margin-left: 5rem;
}
.pl-20 {
padding-left: 5rem;
}
.mx-20 {
margin-left: 5rem;
margin-right: 5rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.m-20 {
margin: 5rem;
}
.p-20 {
padding: 5rem;
}
.gap-20 {
gap: 5rem;
}
.gap-x-20 {
-webkit-column-gap: 5rem;
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.gap-y-20 {
row-gap: 5rem;
}
.mt-24 {
margin-top: 6rem;
}
.pt-24 {
padding-top: 6rem;
}
.mr-24 {
margin-right: 6rem;
}
.pr-24 {
padding-right: 6rem;
}
.mb-24 {
margin-bottom: 6rem;
}
.pb-24 {
padding-bottom: 6rem;
}
.ml-24 {
margin-left: 6rem;
}
.pl-24 {
padding-left: 6rem;
}
.mx-24 {
margin-left: 6rem;
margin-right: 6rem;
}
.px-24 {
padding-left: 6rem;
padding-right: 6rem;
}
.my-24 {
margin-top: 6rem;
margin-bottom: 6rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.m-24 {
margin: 6rem;
}
.p-24 {
padding: 6rem;
}
.gap-24 {
gap: 6rem;
}
.gap-x-24 {
-webkit-column-gap: 6rem;
-moz-column-gap: 6rem;
column-gap: 6rem;
}
.gap-y-24 {
row-gap: 6rem;
}
.mt-32 {
margin-top: 8rem;
}
.pt-32 {
padding-top: 8rem;
}
.mr-32 {
margin-right: 8rem;
}
.pr-32 {
padding-right: 8rem;
}
.mb-32 {
margin-bottom: 8rem;
}
.pb-32 {
padding-bottom: 8rem;
}
.ml-32 {
margin-left: 8rem;
}
.pl-32 {
padding-left: 8rem;
}
.mx-32 {
margin-left: 8rem;
margin-right: 8rem;
}
.px-32 {
padding-left: 8rem;
padding-right: 8rem;
}
.my-32 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.m-32 {
margin: 8rem;
}
.p-32 {
padding: 8rem;
}
.gap-32 {
gap: 8rem;
}
.gap-x-32 {
-webkit-column-gap: 8rem;
-moz-column-gap: 8rem;
column-gap: 8rem;
}
.gap-y-32 {
row-gap: 8rem;
}
.mt-40 {
margin-top: 10rem;
}
.pt-40 {
padding-top: 10rem;
}
.mr-40 {
margin-right: 10rem;
}
.pr-40 {
padding-right: 10rem;
}
.mb-40 {
margin-bottom: 10rem;
}
.pb-40 {
padding-bottom: 10rem;
}
.ml-40 {
margin-left: 10rem;
}
.pl-40 {
padding-left: 10rem;
}
.mx-40 {
margin-left: 10rem;
margin-right: 10rem;
}
.px-40 {
padding-left: 10rem;
padding-right: 10rem;
}
.my-40 {
margin-top: 10rem;
margin-bottom: 10rem;
}
.py-40 {
padding-top: 10rem;
padding-bottom: 10rem;
}
.m-40 {
margin: 10rem;
}
.p-40 {
padding: 10rem;
}
.gap-40 {
gap: 10rem;
}
.gap-x-40 {
-webkit-column-gap: 10rem;
-moz-column-gap: 10rem;
column-gap: 10rem;
}
.gap-y-40 {
row-gap: 10rem;
}
.mt-48 {
margin-top: 12rem;
}
.pt-48 {
padding-top: 12rem;
}
.mr-48 {
margin-right: 12rem;
}
.pr-48 {
padding-right: 12rem;
}
.mb-48 {
margin-bottom: 12rem;
}
.pb-48 {
padding-bottom: 12rem;
}
.ml-48 {
margin-left: 12rem;
}
.pl-48 {
padding-left: 12rem;
}
.mx-48 {
margin-left: 12rem;
margin-right: 12rem;
}
.px-48 {
padding-left: 12rem;
padding-right: 12rem;
}
.my-48 {
margin-top: 12rem;
margin-bottom: 12rem;
}
.py-48 {
padding-top: 12rem;
padding-bottom: 12rem;
}
.m-48 {
margin: 12rem;
}
.p-48 {
padding: 12rem;
}
.gap-48 {
gap: 12rem;
}
.gap-x-48 {
-webkit-column-gap: 12rem;
-moz-column-gap: 12rem;
column-gap: 12rem;
}
.gap-y-48 {
row-gap: 12rem;
}
.mt-56 {
margin-top: 14rem;
}
.pt-56 {
padding-top: 14rem;
}
.mr-56 {
margin-right: 14rem;
}
.pr-56 {
padding-right: 14rem;
}
.mb-56 {
margin-bottom: 14rem;
}
.pb-56 {
padding-bottom: 14rem;
}
.ml-56 {
margin-left: 14rem;
}
.pl-56 {
padding-left: 14rem;
}
.mx-56 {
margin-left: 14rem;
margin-right: 14rem;
}
.px-56 {
padding-left: 14rem;
padding-right: 14rem;
}
.my-56 {
margin-top: 14rem;
margin-bottom: 14rem;
}
.py-56 {
padding-top: 14rem;
padding-bottom: 14rem;
}
.m-56 {
margin: 14rem;
}
.p-56 {
padding: 14rem;
}
.gap-56 {
gap: 14rem;
}
.gap-x-56 {
-webkit-column-gap: 14rem;
-moz-column-gap: 14rem;
column-gap: 14rem;
}
.gap-y-56 {
row-gap: 14rem;
}
.mt-64 {
margin-top: 16rem;
}
.pt-64 {
padding-top: 16rem;
}
.mr-64 {
margin-right: 16rem;
}
.pr-64 {
padding-right: 16rem;
}
.mb-64 {
margin-bottom: 16rem;
}
.pb-64 {
padding-bottom: 16rem;
}
.ml-64 {
margin-left: 16rem;
}
.pl-64 {
padding-left: 16rem;
}
.mx-64 {
margin-left: 16rem;
margin-right: 16rem;
}
.px-64 {
padding-left: 16rem;
padding-right: 16rem;
}
.my-64 {
margin-top: 16rem;
margin-bottom: 16rem;
}
.py-64 {
padding-top: 16rem;
padding-bottom: 16rem;
}
.m-64 {
margin: 16rem;
}
.p-64 {
padding: 16rem;
}
.gap-64 {
gap: 16rem;
}
.gap-x-64 {
-webkit-column-gap: 16rem;
-moz-column-gap: 16rem;
column-gap: 16rem;
}
.gap-y-64 {
row-gap: 16rem;
}
/**
* ==========================================================================
* Text Color Utility Classes
* ==========================================================================
*/
.text-primary {
color: var(--color-primary);
}
.text-info {
color: var(--color-info);
}
.text-warning {
color: var(--color-warning);
}
.text-error {
color: var(--color-error);
}
.text-success {
color: var(--color-success);
}
/**
* ==========================================================================
* Text Alignment Utility Classes
* ==========================================================================
*/
.text-center {
text-align: center;
}
/**
* ==========================================================================
* Grid Container
* ==========================================================================
*/
.layout-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.25rem;
/**
* ==========================================================================
* Grid Column
* ==========================================================================
*/
/**
* ==========================================================================
* Gap Modifiers
* ==========================================================================
*/
}
.layout-grid--cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.layout-grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.layout-grid--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.layout-grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.layout-grid--cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.layout-grid--cols-6 {
grid-template-columns: repeat(6, 1fr);
}
.layout-grid--cols-7 {
grid-template-columns: repeat(7, 1fr);
}
.layout-grid--cols-8 {
grid-template-columns: repeat(8, 1fr);
}
.layout-grid--cols-9 {
grid-template-columns: repeat(9, 1fr);
}
.layout-grid--cols-10 {
grid-template-columns: repeat(10, 1fr);
}
.layout-grid--cols-11 {
grid-template-columns: repeat(11, 1fr);
}
.layout-grid--cols-12 {
grid-template-columns: repeat(12, 1fr);
}
.layout-grid__col {
grid-column: span 12;
}
.layout-grid__col--span-1 {
grid-column: span 1;
}
.layout-grid__col--span-2 {
grid-column: span 2;
}
.layout-grid__col--span-3 {
grid-column: span 3;
}
.layout-grid__col--span-4 {
grid-column: span 4;
}
.layout-grid__col--span-5 {
grid-column: span 5;
}
.layout-grid__col--span-6 {
grid-column: span 6;
}
.layout-grid__col--span-7 {
grid-column: span 7;
}
.layout-grid__col--span-8 {
grid-column: span 8;
}
.layout-grid__col--span-9 {
grid-column: span 9;
}
.layout-grid__col--span-10 {
grid-column: span 10;
}
.layout-grid__col--span-11 {
grid-column: span 11;
}
.layout-grid__col--span-12 {
grid-column: span 12;
}
.layout-grid--gap-0 {
gap: 0;
}
.layout-grid--gap-1 {
gap: 0.25rem;
}
.layout-grid--gap-2 {
gap: 0.5rem;
}
.layout-grid--gap-3 {
gap: 0.75rem;
}
.layout-grid--gap-4 {
gap: 1rem;
}
.layout-grid--gap-5 {
gap: 1.25rem;
}
.layout-grid--gap-6 {
gap: 1.5rem;
}
.layout-grid--gap-7 {
gap: 1.75rem;
}
.layout-grid--gap-8 {
gap: 2rem;
}
.layout-grid--gap-9 {
gap: 2.25rem;
}
.layout-grid--gap-10 {
gap: 2.5rem;
}
.layout-grid--gap-11 {
gap: 2.75;
}
.layout-grid--gap-12 {
gap: 3rem;
}
.layout-grid--gap-13 {
gap: 3.25rem;
}
.layout-grid--gap-14 {
gap: 3.5rem;
}
.layout-grid--gap-15 {
gap: 3.75rem;
}
.layout-grid--gap-16 {
gap: 4rem;
}
.layout-grid--gap-18 {
gap: 4.5rem;
}
.layout-grid--gap-20 {
gap: 5rem;
}
.layout-grid--gap-24 {
gap: 6rem;
}
.layout-grid--gap-32 {
gap: 8rem;
}
.layout-grid--gap-40 {
gap: 10rem;
}
.layout-grid--gap-48 {
gap: 12rem;
}
.layout-grid--gap-56 {
gap: 14rem;
}
.layout-grid--gap-64 {
gap: 16rem;
}
@media only screen and (max-width: 45.625rem) {
.layout-grid {
gap: 0.5rem;
}
}
/**
* ==========================================================================
* Responsive Variants
* ==========================================================================
*/
@media only screen and (max-width: 19.9375rem) {
.layout-grid--xs-gap-0 {
gap: 0;
}
.layout-grid--xs-gap-1 {
gap: 0.25rem;
}
.layout-grid--xs-gap-2 {
gap: 0.5rem;
}
.layout-grid--xs-gap-3 {
gap: 0.75rem;
}
.layout-grid--xs-gap-4 {
gap: 1rem;
}
.layout-grid--xs-gap-5 {
gap: 1.25rem;
}
.layout-grid--xs-gap-6 {
gap: 1.5rem;
}
.layout-grid--xs-gap-7 {
gap: 1.75rem;
}
.layout-grid--xs-gap-8 {
gap: 2rem;
}
.layout-grid--xs-gap-9 {
gap: 2.25rem;
}
.layout-grid--xs-gap-10 {
gap: 2.5rem;
}
.layout-grid--xs-gap-11 {
gap: 2.75;
}
.layout-grid--xs-gap-12 {
gap: 3rem;
}
.layout-grid--xs-gap-13 {
gap: 3.25rem;
}
.layout-grid--xs-gap-14 {
gap: 3.5rem;
}
.layout-grid--xs-gap-15 {
gap: 3.75rem;
}
.layout-grid--xs-gap-16 {
gap: 4rem;
}
.layout-grid--xs-gap-18 {
gap: 4.5rem;
}
.layout-grid--xs-gap-20 {
gap: 5rem;
}
.layout-grid--xs-gap-24 {
gap: 6rem;
}
.layout-grid--xs-gap-32 {
gap: 8rem;
}
.layout-grid--xs-gap-40 {
gap: 10rem;
}
.layout-grid--xs-gap-48 {
gap: 12rem;
}
.layout-grid--xs-gap-56 {
gap: 14rem;
}
.layout-grid--xs-gap-64 {
gap: 16rem;
}
.layout-grid__col--xs-span-1 {
grid-column: span 1;
}
.layout-grid__col--xs-span-2 {
grid-column: span 2;
}
.layout-grid__col--xs-span-3 {
grid-column: span 3;
}
.layout-grid__col--xs-span-4 {
grid-column: span 4;
}
.layout-grid__col--xs-span-5 {
grid-column: span 5;
}
.layout-grid__col--xs-span-6 {
grid-column: span 6;
}
.layout-grid__col--xs-span-7 {
grid-column: span 7;
}
.layout-grid__col--xs-span-8 {
grid-column: span 8;
}
.layout-grid__col--xs-span-9 {
grid-column: span 9;
}
.layout-grid__col--xs-span-10 {
grid-column: span 10;
}
.layout-grid__col--xs-span-11 {
grid-column: span 11;
}
.layout-grid__col--xs-span-12 {
grid-column: span 12;
}
}
@media only screen and (max-width: 35.9375rem) {
.layout-grid--sm-gap-0 {
gap: 0;
}
.layout-grid--sm-gap-1 {
gap: 0.25rem;
}
.layout-grid--sm-gap-2 {
gap: 0.5rem;
}
.layout-grid--sm-gap-3 {
gap: 0.75rem;
}
.layout-grid--sm-gap-4 {
gap: 1rem;
}
.layout-grid--sm-gap-5 {
gap: 1.25rem;
}
.layout-grid--sm-gap-6 {
gap: 1.5rem;
}
.layout-grid--sm-gap-7 {
gap: 1.75rem;
}
.layout-grid--sm-gap-8 {
gap: 2rem;
}
.layout-grid--sm-gap-9 {
gap: 2.25rem;
}
.layout-grid--sm-gap-10 {
gap: 2.5rem;
}
.layout-grid--sm-gap-11 {
gap: 2.75;
}
.layout-grid--sm-gap-12 {
gap: 3rem;
}
.layout-grid--sm-gap-13 {
gap: 3.25rem;
}
.layout-grid--sm-gap-14 {
gap: 3.5rem;
}
.layout-grid--sm-gap-15 {
gap: 3.75rem;
}
.layout-grid--sm-gap-16 {
gap: 4rem;
}
.layout-grid--sm-gap-18 {
gap: 4.5rem;
}
.layout-grid--sm-gap-20 {
gap: 5rem;
}
.layout-grid--sm-gap-24 {
gap: 6rem;
}
.layout-grid--sm-gap-32 {
gap: 8rem;
}
.layout-grid--sm-gap-40 {
gap: 10rem;
}
.layout-grid--sm-gap-48 {
gap: 12rem;
}
.layout-grid--sm-gap-56 {
gap: 14rem;
}
.layout-grid--sm-gap-64 {
gap: 16rem;
}
.layout-grid__col--sm-span-1 {
grid-column: span 1;
}
.layout-grid__col--sm-span-2 {
grid-column: span 2;
}
.layout-grid__col--sm-span-3 {
grid-column: span 3;
}
.layout-grid__col--sm-span-4 {
grid-column: span 4;
}
.layout-grid__col--sm-span-5 {
grid-column: span 5;
}
.layout-grid__col--sm-span-6 {
grid-column: span 6;
}
.layout-grid__col--sm-span-7 {
grid-column: span 7;
}
.layout-grid__col--sm-span-8 {
grid-column: span 8;
}
.layout-grid__col--sm-span-9 {
grid-column: span 9;
}
.layout-grid__col--sm-span-10 {
grid-column: span 10;
}
.layout-grid__col--sm-span-11 {
grid-column: span 11;
}
.layout-grid__col--sm-span-12 {
grid-column: span 12;
}
}
@media only screen and (max-width: 45.625rem) {
.layout-grid--tab-gap-0 {
gap: 0;
}
.layout-grid--tab-gap-1 {
gap: 0.25rem;
}
.layout-grid--tab-gap-2 {
gap: 0.5rem;
}
.layout-grid--tab-gap-3 {
gap: 0.75rem;
}
.layout-grid--tab-gap-4 {
gap: 1rem;
}
.layout-grid--tab-gap-5 {
gap: 1.25rem;
}
.layout-grid--tab-gap-6 {
gap: 1.5rem;
}
.layout-grid--tab-gap-7 {
gap: 1.75rem;
}
.layout-grid--tab-gap-8 {
gap: 2rem;
}
.layout-grid--tab-gap-9 {
gap: 2.25rem;
}
.layout-grid--tab-gap-10 {
gap: 2.5rem;
}
.layout-grid--tab-gap-11 {
gap: 2.75;
}
.layout-grid--tab-gap-12 {
gap: 3rem;
}
.layout-grid--tab-gap-13 {
gap: 3.25rem;
}
.layout-grid--tab-gap-14 {
gap: 3.5rem;
}
.layout-grid--tab-gap-15 {
gap: 3.75rem;
}
.layout-grid--tab-gap-16 {
gap: 4rem;
}
.layout-grid--tab-gap-18 {
gap: 4.5rem;
}
.layout-grid--tab-gap-20 {
gap: 5rem;
}
.layout-grid--tab-gap-24 {
gap: 6rem;
}
.layout-grid--tab-gap-32 {
gap: 8rem;
}
.layout-grid--tab-gap-40 {
gap: 10rem;
}
.layout-grid--tab-gap-48 {
gap: 12rem;
}
.layout-grid--tab-gap-56 {
gap: 14rem;
}
.layout-grid--tab-gap-64 {
gap: 16rem;
}
.layout-grid__col--tab-span-1 {
grid-column: span 1;
}
.layout-grid__col--tab-span-2 {
grid-column: span 2;
}
.layout-grid__col--tab-span-3 {
grid-column: span 3;
}
.layout-grid__col--tab-span-4 {
grid-column: span 4;
}
.layout-grid__col--tab-span-5 {
grid-column: span 5;
}
.layout-grid__col--tab-span-6 {
grid-column: span 6;
}
.layout-grid__col--tab-span-7 {
grid-column: span 7;
}
.layout-grid__col--tab-span-8 {
grid-column: span 8;
}
.layout-grid__col--tab-span-9 {
grid-column: span 9;
}
.layout-grid__col--tab-span-10 {
grid-column: span 10;
}
.layout-grid__col--tab-span-11 {
grid-column: span 11;
}
.layout-grid__col--tab-span-12 {
grid-column: span 12;
}
}
@media only screen and (max-width: 45.625rem) {
.layout-grid--md-gap-0 {
gap: 0;
}
.layout-grid--md-gap-1 {
gap: 0.25rem;
}
.layout-grid--md-gap-2 {
gap: 0.5rem;
}
.layout-grid--md-gap-3 {
gap: 0.75rem;
}
.layout-grid--md-gap-4 {
gap: 1rem;
}
.layout-grid--md-gap-5 {
gap: 1.25rem;
}
.layout-grid--md-gap-6 {
gap: 1.5rem;
}
.layout-grid--md-gap-7 {
gap: 1.75rem;
}
.layout-grid--md-gap-8 {
gap: 2rem;
}
.layout-grid--md-gap-9 {
gap: 2.25rem;
}
.layout-grid--md-gap-10 {
gap: 2.5rem;
}
.layout-grid--md-gap-11 {
gap: 2.75;
}
.layout-grid--md-gap-12 {
gap: 3rem;
}
.layout-grid--md-gap-13 {
gap: 3.25rem;
}
.layout-grid--md-gap-14 {
gap: 3.5rem;
}
.layout-grid--md-gap-15 {
gap: 3.75rem;
}
.layout-grid--md-gap-16 {
gap: 4rem;
}
.layout-grid--md-gap-18 {
gap: 4.5rem;
}
.layout-grid--md-gap-20 {
gap: 5rem;
}
.layout-grid--md-gap-24 {
gap: 6rem;
}
.layout-grid--md-gap-32 {
gap: 8rem;
}
.layout-grid--md-gap-40 {
gap: 10rem;
}
.layout-grid--md-gap-48 {
gap: 12rem;
}
.layout-grid--md-gap-56 {
gap: 14rem;
}
.layout-grid--md-gap-64 {
gap: 16rem;
}
.layout-grid__col--md-span-1 {
grid-column: span 1;
}
.layout-grid__col--md-span-2 {
grid-column: span 2;
}
.layout-grid__col--md-span-3 {
grid-column: span 3;
}
.layout-grid__col--md-span-4 {
grid-column: span 4;
}
.layout-grid__col--md-span-5 {
grid-column: span 5;
}
.layout-grid__col--md-span-6 {
grid-column: span 6;
}
.layout-grid__col--md-span-7 {
grid-column: span 7;
}
.layout-grid__col--md-span-8 {
grid-column: span 8;
}
.layout-grid__col--md-span-9 {
grid-column: span 9;
}
.layout-grid__col--md-span-10 {
grid-column: span 10;
}
.layout-grid__col--md-span-11 {
grid-column: span 11;
}
.layout-grid__col--md-span-12 {
grid-column: span 12;
}
}
@media only screen and (max-width: 63.9375rem) {
.layout-grid--lg-gap-0 {
gap: 0;
}
.layout-grid--lg-gap-1 {
gap: 0.25rem;
}
.layout-grid--lg-gap-2 {
gap: 0.5rem;
}
.layout-grid--lg-gap-3 {
gap: 0.75rem;
}
.layout-grid--lg-gap-4 {
gap: 1rem;
}
.layout-grid--lg-gap-5 {
gap: 1.25rem;
}
.layout-grid--lg-gap-6 {
gap: 1.5rem;
}
.layout-grid--lg-gap-7 {
gap: 1.75rem;
}
.layout-grid--lg-gap-8 {
gap: 2rem;
}
.layout-grid--lg-gap-9 {
gap: 2.25rem;
}
.layout-grid--lg-gap-10 {
gap: 2.5rem;
}
.layout-grid--lg-gap-11 {
gap: 2.75;
}
.layout-grid--lg-gap-12 {
gap: 3rem;
}
.layout-grid--lg-gap-13 {
gap: 3.25rem;
}
.layout-grid--lg-gap-14 {
gap: 3.5rem;
}
.layout-grid--lg-gap-15 {
gap: 3.75rem;
}
.layout-grid--lg-gap-16 {
gap: 4rem;
}
.layout-grid--lg-gap-18 {
gap: 4.5rem;
}
.layout-grid--lg-gap-20 {
gap: 5rem;
}
.layout-grid--lg-gap-24 {
gap: 6rem;
}
.layout-grid--lg-gap-32 {
gap: 8rem;
}
.layout-grid--lg-gap-40 {
gap: 10rem;
}
.layout-grid--lg-gap-48 {
gap: 12rem;
}
.layout-grid--lg-gap-56 {
gap: 14rem;
}
.layout-grid--lg-gap-64 {
gap: 16rem;
}
.layout-grid__col--lg-span-1 {
grid-column: span 1;
}
.layout-grid__col--lg-span-2 {
grid-column: span 2;
}
.layout-grid__col--lg-span-3 {
grid-column: span 3;
}
.layout-grid__col--lg-span-4 {
grid-column: span 4;
}
.layout-grid__col--lg-span-5 {
grid-column: span 5;
}
.layout-grid__col--lg-span-6 {
grid-column: span 6;
}
.layout-grid__col--lg-span-7 {
grid-column: span 7;
}
.layout-grid__col--lg-span-8 {
grid-column: span 8;
}
.layout-grid__col--lg-span-9 {
grid-column: span 9;
}
.layout-grid__col--lg-span-10 {
grid-column: span 10;
}
.layout-grid__col--lg-span-11 {
grid-column: span 11;
}
.layout-grid__col--lg-span-12 {
grid-column: span 12;
}
}
@media only screen and (max-width: 79.9375rem) {
.layout-grid--xl-gap-0 {
gap: 0;
}
.layout-grid--xl-gap-1 {
gap: 0.25rem;
}
.layout-grid--xl-gap-2 {
gap: 0.5rem;
}
.layout-grid--xl-gap-3 {
gap: 0.75rem;
}
.layout-grid--xl-gap-4 {
gap: 1rem;
}
.layout-grid--xl-gap-5 {
gap: 1.25rem;
}
.layout-grid--xl-gap-6 {
gap: 1.5rem;
}
.layout-grid--xl-gap-7 {
gap: 1.75rem;
}
.layout-grid--xl-gap-8 {
gap: 2rem;
}
.layout-grid--xl-gap-9 {
gap: 2.25rem;
}
.layout-grid--xl-gap-10 {
gap: 2.5rem;
}
.layout-grid--xl-gap-11 {
gap: 2.75;
}
.layout-grid--xl-gap-12 {
gap: 3rem;
}
.layout-grid--xl-gap-13 {
gap: 3.25rem;
}
.layout-grid--xl-gap-14 {
gap: 3.5rem;
}
.layout-grid--xl-gap-15 {
gap: 3.75rem;
}
.layout-grid--xl-gap-16 {
gap: 4rem;
}
.layout-grid--xl-gap-18 {
gap: 4.5rem;
}
.layout-grid--xl-gap-20 {
gap: 5rem;
}
.layout-grid--xl-gap-24 {
gap: 6rem;
}
.layout-grid--xl-gap-32 {
gap: 8rem;
}
.layout-grid--xl-gap-40 {
gap: 10rem;
}
.layout-grid--xl-gap-48 {
gap: 12rem;
}
.layout-grid--xl-gap-56 {
gap: 14rem;
}
.layout-grid--xl-gap-64 {
gap: 16rem;
}
.layout-grid__col--xl-span-1 {
grid-column: span 1;
}
.layout-grid__col--xl-span-2 {
grid-column: span 2;
}
.layout-grid__col--xl-span-3 {
grid-column: span 3;
}
.layout-grid__col--xl-span-4 {
grid-column: span 4;
}
.layout-grid__col--xl-span-5 {
grid-column: span 5;
}
.layout-grid__col--xl-span-6 {
grid-column: span 6;
}
.layout-grid__col--xl-span-7 {
grid-column: span 7;
}
.layout-grid__col--xl-span-8 {
grid-column: span 8;
}
.layout-grid__col--xl-span-9 {
grid-column: span 9;
}
.layout-grid__col--xl-span-10 {
grid-column: span 10;
}
.layout-grid__col--xl-span-11 {
grid-column: span 11;
}
.layout-grid__col--xl-span-12 {
grid-column: span 12;
}
}
@media only screen and (max-width: 95.9375rem) {
.layout-grid--2xl-gap-0 {
gap: 0;
}
.layout-grid--2xl-gap-1 {
gap: 0.25rem;
}
.layout-grid--2xl-gap-2 {
gap: 0.5rem;
}
.layout-grid--2xl-gap-3 {
gap: 0.75rem;
}
.layout-grid--2xl-gap-4 {
gap: 1rem;
}
.layout-grid--2xl-gap-5 {
gap: 1.25rem;
}
.layout-grid--2xl-gap-6 {
gap: 1.5rem;
}
.layout-grid--2xl-gap-7 {
gap: 1.75rem;
}
.layout-grid--2xl-gap-8 {
gap: 2rem;
}
.layout-grid--2xl-gap-9 {
gap: 2.25rem;
}
.layout-grid--2xl-gap-10 {
gap: 2.5rem;
}
.layout-grid--2xl-gap-11 {
gap: 2.75;
}
.layout-grid--2xl-gap-12 {
gap: 3rem;
}
.layout-grid--2xl-gap-13 {
gap: 3.25rem;
}
.layout-grid--2xl-gap-14 {
gap: 3.5rem;
}
.layout-grid--2xl-gap-15 {
gap: 3.75rem;
}
.layout-grid--2xl-gap-16 {
gap: 4rem;
}
.layout-grid--2xl-gap-18 {
gap: 4.5rem;
}
.layout-grid--2xl-gap-20 {
gap: 5rem;
}
.layout-grid--2xl-gap-24 {
gap: 6rem;
}
.layout-grid--2xl-gap-32 {
gap: 8rem;
}
.layout-grid--2xl-gap-40 {
gap: 10rem;
}
.layout-grid--2xl-gap-48 {
gap: 12rem;
}
.layout-grid--2xl-gap-56 {
gap: 14rem;
}
.layout-grid--2xl-gap-64 {
gap: 16rem;
}
.layout-grid__col--2xl-span-1 {
grid-column: span 1;
}
.layout-grid__col--2xl-span-2 {
grid-column: span 2;
}
.layout-grid__col--2xl-span-3 {
grid-column: span 3;
}
.layout-grid__col--2xl-span-4 {
grid-column: span 4;
}
.layout-grid__col--2xl-span-5 {
grid-column: span 5;
}
.layout-grid__col--2xl-span-6 {
grid-column: span 6;
}
.layout-grid__col--2xl-span-7 {
grid-column: span 7;
}
.layout-grid__col--2xl-span-8 {
grid-column: span 8;
}
.layout-grid__col--2xl-span-9 {
grid-column: span 9;
}
.layout-grid__col--2xl-span-10 {
grid-column: span 10;
}
.layout-grid__col--2xl-span-11 {
grid-column: span 11;
}
.layout-grid__col--2xl-span-12 {
grid-column: span 12;
}
}
/**
* ==========================================================================
* AEM Grid custom spacings
* ==========================================================================
*/
.aem-Grid--custom-spacing-default {
margin: -10px;
width: unset;
}
.aem-Grid--custom-spacing-default .aem-GridColumn {
padding: 10px;
}
@media only screen and (max-width: 63.9375rem) {
.aem-Grid--custom-spacing-default {
margin: -4px;
}
.aem-Grid--custom-spacing-default .aem-GridColumn {
padding: 4px;
}
}
.aem-Grid--custom-spacing-dense {
margin: -4px;
width: unset;
}
.aem-Grid--custom-spacing-dense .aem-GridColumn {
padding: 4px;
}
/**
* ==========================================================================
* List Utility Classes
* ==========================================================================
*/
.list-style-square {
list-style: square;
}
.list-style-disc {
list-style: disc;
}
.list-style-none {
list-style: none;
}
.list-style-circle {
list-style: circle;
}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search] {
border-radius: 0.5rem;
border: 1px solid var(--color-primary-600);
background-color: var(--color-primary-100);
color: var(--color-primary-950);
padding: 7px 16px;
outline: none;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1.125rem;
line-height: 1.5rem;
}
input[type=text]:focus-visible,
input[type=email]:focus-visible,
input[type=password]:focus-visible,
input[type=number]:focus-visible,
input[type=search]:focus-visible {
border-color: var(--color-select-box-highlight);
outline: 1px solid var(--color-select-box-highlight);
}
input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: var(--color-primary-600);
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=search]::-moz-placeholder {
color: var(--color-primary-600);
}
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder {
color: var(--color-primary-600);
}
input[type=text]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder,
input[type=search]::-ms-input-placeholder {
color: var(--color-primary-600);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder,
input[type=search]::placeholder {
color: var(--color-primary-600);
}
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border-radius: 4px;
width: 16px;
height: 16px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
position: relative;
margin: 0;
}
input[type=checkbox]::before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 1px solid var(--color-primary-600);
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input[type=checkbox]:focus-visible {
outline: solid 2px var(--color-focus-ring);
outline-offset: 2px;
}
input[type=checkbox]:checked {
color: var(--color-primary);
}
input[type=checkbox]:checked::before {
background: var(--color-primary-950);
border: 1px solid var(--color-primary-950);
}
input[type=checkbox]:checked::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.light-mode input[type=checkbox] {
border-color: var(--color-primary-500);
}
.light-mode input[type=checkbox]:checked::before {
background: var(--color-primary-100);
border-color: var(--color-primary-100);
}
.light-mode input[type=checkbox]:checked::after {
color: var(--color-primary-950);
}
/* ===============================
= Choices =
=============================== */
.choices {
position: relative;
overflow: hidden;
margin-bottom: 24px;
font-size: 16px;
}
.choices:focus {
outline: none;
}
.choices:last-child {
margin-bottom: 0;
}
.choices.is-open {
overflow: visible;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: #eaeaea;
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.choices.is-disabled .choices__item {
cursor: not-allowed;
}
.choices [hidden] {
display: none !important;
}
.choices[data-type*=select-one] {
cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input {
display: block;
width: 100%;
padding: 10px;
border-bottom: 1px solid #ddd;
background-color: #fff;
margin: 0;
}
.choices[data-type*=select-one] .choices__button {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
padding: 0;
background-size: 8px;
position: absolute;
top: 50%;
right: 0;
margin-top: -10px;
margin-right: 25px;
height: 20px;
width: 20px;
border-radius: 10em;
opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:hover,
.choices[data-type*=select-one] .choices__button:focus {
opacity: 1;
}
.choices[data-type*=select-one] .choices__button:focus {
-webkit-box-shadow: 0 0 0 2px #005F75;
box-shadow: 0 0 0 2px #005F75;
}
.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
display: none;
}
.choices[data-type*=select-one]::after {
content: "";
height: 0;
width: 0;
border-style: solid;
border-color: #333 transparent transparent transparent;
border-width: 5px;
position: absolute;
right: 11.5px;
top: 50%;
margin-top: -2.5px;
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
border-color: transparent transparent #333;
margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
left: 11.5px;
right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
right: auto;
left: 0;
margin-left: 25px;
margin-right: 0;
}
.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
cursor: text;
}
.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
position: relative;
display: inline-block;
margin-top: 0;
margin-right: -4px;
margin-bottom: 0;
margin-left: 8px;
padding-left: 16px;
border-left: 1px solid rgb(0, 53.5897435897, 66);
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
background-size: 8px;
width: 8px;
line-height: 1;
opacity: 0.75;
border-radius: 0;
}
.choices[data-type*=select-multiple] .choices__button:hover,
.choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus {
opacity: 1;
}
.choices__inner {
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #f9f9f9;
padding: 7.5px 7.5px 3.75px;
border: 1px solid #ddd;
border-radius: 2.5px;
font-size: 14px;
min-height: 44px;
overflow: hidden;
}
.is-focused .choices__inner,
.is-open .choices__inner {
border-color: rgb(182.75, 182.75, 182.75);
}
.is-open .choices__inner {
border-radius: 2.5px 2.5px 0 0;
}
.is-flipped.is-open .choices__inner {
border-radius: 0 0 2.5px 2.5px;
}
.choices__list {
margin: 0;
padding-left: 0;
list-style: none;
}
.choices__list--single {
display: inline-block;
padding: 4px 16px 4px 4px;
width: 100%;
}
[dir=rtl] .choices__list--single {
padding-right: 4px;
padding-left: 16px;
}
.choices__list--single .choices__item {
width: 100%;
}
.choices__list--multiple {
display: inline;
}
.choices__list--multiple .choices__item {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
margin-right: 3.75px;
margin-bottom: 3.75px;
background-color: #005F75;
border: 1px solid rgb(0, 74.2948717949, 91.5);
color: #fff;
word-break: break-all;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
margin-right: 0;
margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
background-color: rgb(0, 74.2948717949, 91.5);
border: 1px solid rgb(0, 53.5897435897, 66);
}
.is-disabled .choices__list--multiple .choices__item {
background-color: rgb(170.25, 170.25, 170.25);
border: 1px solid rgb(144.75, 144.75, 144.75);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
display: none;
z-index: 1;
position: absolute;
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
border-bottom-right-radius: 2.5px;
overflow: hidden;
word-break: break-all;
}
.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] {
display: block;
}
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
border-color: rgb(182.75, 182.75, 182.75);
}
.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: -1px;
border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
position: relative;
max-height: 300px;
overflow: auto;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
position: relative;
padding: 10px;
font-size: 14px;
}
[dir=rtl] .choices__list--dropdown .choices__item,
[dir=rtl] .choices__list[aria-expanded] .choices__item {
text-align: right;
}
@media (min-width: 640px) {
.choices__list--dropdown .choices__item--selectable[data-select-text],
.choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
padding-right: 100px;
}
.choices__list--dropdown .choices__item--selectable[data-select-text]::after,
.choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
content: attr(data-select-text);
font-size: 12px;
opacity: 0;
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text],
[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
text-align: right;
padding-left: 100px;
padding-right: 10px;
}
[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after,
[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
right: auto;
left: 10px;
}
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: rgb(242.25, 242.25, 242.25);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
opacity: 0.5;
}
.choices__item {
cursor: default;
}
.choices__item--selectable {
cursor: pointer;
}
.choices__item--disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0.5;
}
.choices__heading {
font-weight: 600;
font-size: 12px;
padding: 10px;
border-bottom: 1px solid rgb(246.5, 246.5, 246.5);
color: rgb(127.5, 127.5, 127.5);
}
.choices__button {
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.choices__button:focus {
outline: none;
}
.choices__input {
display: inline-block;
vertical-align: baseline;
background-color: #f9f9f9;
font-size: 14px;
margin-bottom: 5px;
border: 0;
border-radius: 0;
max-width: 100%;
padding: 4px 0 4px 2px;
}
.choices__input:focus {
outline: 0;
}
.choices__input::-webkit-search-decoration,
.choices__input::-webkit-search-cancel-button,
.choices__input::-webkit-search-results-button,
.choices__input::-webkit-search-results-decoration {
display: none;
}
.choices__input::-ms-clear,
.choices__input::-ms-reveal {
display: none;
width: 0;
height: 0;
}
[dir=rtl] .choices__input {
padding-right: 2px;
padding-left: 0;
}
.choices__placeholder {
opacity: 0.5;
}
/* ===== End of Choices ====== */
.choices {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
margin-bottom: 0 !important;
padding: 0;
}
.choices .choices__inner {
background: transparent;
border: 0;
border-radius: 0.5rem;
color: var(--color-primary-950);
width: 100%;
position: relative;
min-height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-shadow: inset 0 0 0 1px var(--color-primary-600);
box-shadow: inset 0 0 0 1px var(--color-primary-600);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
gap: 0.5rem;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
}
.choices .choices__inner::after {
content: "";
width: 12px;
height: 12px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 10;
}
.choices .choices__inner .choices__item {
min-width: 136px;
}
.choices[data-type*=select-one] .choices__inner {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.choices .choices__list--single {
padding: 0;
}
.choices .choices__list--single .choices__item {
color: var(--color-primary-700);
min-width: none;
}
.choices::before,
.choices::after {
display: none !important;
}
.choices .choices__button {
display: none !important;
}
.choices .choices__list--dropdown {
background: var(--color-primary-base);
border: 1px solid var(--color-primary-600);
border-radius: 0.5rem;
z-index: 2000;
position: absolute;
min-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
left: 0;
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
margin-top: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.choices .choices__list--dropdown .choices__item {
color: var(--color-primary-700);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
}
.choices .choices__list--dropdown .choices__item:hover {
background: var(--color-primary-base);
color: var(--color-primary-950);
}
.choices .choices__list--dropdown .choices__item.is-selected {
background: #006CE1;
color: var(--color-primary-950);
}
.choices .choices__list--dropdown .choices__item.is-selected.is-highlighted {
background: #006CE1;
outline: 2px solid var(--color-primary-950);
outline-offset: -2px;
}
.choices .choices__list--dropdown .choices__item:not(.is-selected).is-highlighted {
background: var(--color-primary-base);
color: var(--color-primary-950);
outline: 2px solid #006CE1;
outline-offset: -2px;
}
.choices.is-open {
outline: none;
border-radius: 0;
}
.choices.is-open .choices__inner {
-webkit-box-shadow: inset 0 0 0 1px var(--color-primary-950);
box-shadow: inset 0 0 0 1px var(--color-primary-950);
}
.choices.is-open .choices__list--dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.choices:has(.choices__inner:focus-visible) {
overflow: visible;
}
.choices .choices__inner:focus-visible {
outline: 2px solid var(--color-focus-ring);
}
.choices.is-flipped.is-open .choices__inner {
border-radius: 0.5rem;
}
.choices.is-flipped .choices__list--dropdown {
background: var(--color-primary-base);
border: 1px solid var(--color-primary-600);
border-radius: 0.5rem;
z-index: 2000;
position: absolute;
min-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
left: 0;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.choices.is-flipped .choices__list--dropdown .choices__item {
color: var(--color-primary-950);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
}
@media only screen and (min-width: 64rem) {
.choices::before,
.choices::after {
display: none !important;
}
.choices .choices__button {
display: none !important;
}
}
@media only screen and (max-width: 63.9375rem) {
.choices .choices__inner,
.choices[data-type*=select-one] .choices__inner {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
/**
* ==========================================================================
* Plugins
* ==========================================================================
*/
/**
* Swiper 11.2.10
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 28, 2025
*/
@font-face {
font-family: "swiper-icons";
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/
}
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
display: block;
}
.swiper-vertical>.swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.swiper-slide {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
.swiper-backface-hidden .swiper-slide {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-3d {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode>.swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */
}
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode>.swiper-wrapper>.swiper-slide {
scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical>.swiper-wrapper {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
-ms-scroll-snap-type: none;
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-ordinal-group: 10000;
-ms-flex-order: 9999;
order: 9999;
}
.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
-webkit-margin-start: var(--swiper-centered-offset-before);
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
-webkit-margin-before: var(--swiper-centered-offset-before);
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
-webkit-animation: swiper-preloader-spin 1s infinite linear;
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@-webkit-keyframes swiper-preloader-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Slide styles end */
/**
* Swiper 11.2.10
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 28, 2025
*/
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
*/
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-webkit-transform-origin: center;
transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset, 10px);
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-lock {
display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: "prev";
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: "next";
}
/* Navigation font end */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
}
.noUi-base,
.noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Wrapper for all connect elements.
*/
.noUi-connects {
overflow: hidden;
z-index: 0;
}
.noUi-connect,
.noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
-webkit-transform-style: flat;
transform-style: flat;
}
/* Offset direction
*/
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
left: 0;
right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.noUi-vertical .noUi-origin {
top: -100%;
width: 0;
}
.noUi-horizontal .noUi-origin {
height: 0;
}
.noUi-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}
.noUi-touch-area {
height: 100%;
width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
right: -17px;
top: -6px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
right: -6px;
bottom: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
left: -17px;
right: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.noUi-target {
background: #FAFAFA;
border-radius: 4px;
border: 1px solid #D3D3D3;
-webkit-box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
border-radius: 3px;
}
.noUi-connect {
background: #3FB8AF;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
-webkit-box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
-webkit-box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.noUi-horizontal .noUi-origin>.noUi-tooltip {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
left: auto;
bottom: 10px;
}
.noUi-vertical .noUi-origin>.noUi-tooltip {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
top: auto;
right: 28px;
}
/**
* ==========================================================================
* Components
* Include only the components that are used in the project
* TODO: Check if we should move components to SCSS directory
* ==========================================================================
*/
/**
* ==========================================================================
* Base Container
* Todo: We might need to remove this if we use AEM container.
* ==========================================================================
*/
.container {
max-width: 100%;
padding: 0 20px;
margin: 0 auto;
}
@media only screen and (min-width: 45.6875rem) {
.container {
padding: 0 40px;
}
}
@media only screen and (min-width: 80rem) {
.container {
max-width: 1240px;
padding: 0;
}
}
@media only screen and (max-width: 45.625rem) {
.container-mobile-full {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
}
:root {
--btn-bg: var(--color-primary-950);
--btn-color: var(--color-primary);
--btn-disabled-bg: var(--color-primary-600);
--btn-disabled-color: var(--color-primary-800);
--btn-hover-bg: var(--color-primary-700);
--btn-outline-border: var(--color-primary-950);
--btn-outline-disabled-border: var(--color-primary-600);
--btn-outline-hover-bg: var(--color-primary-950);
--btn-outline-hover-color: var(--color-primary);
--btn-link-color: var(--color-primary-950);
--btn-link-disabled-color: var(--color-primary-600);
--btn-link-hover-color: var(--color-primary-950);
}
.light-mode {
--btn-bg: var(--color-primary);
--btn-color: var(--color-primary-950);
--btn-disabled-bg: var(--color-primary-700);
--btn-disabled-color: var(--color-primary-400);
--btn-hover-bg: var(--color-primary-300);
--btn-outline-border: var(--color-primary);
--btn-outline-disabled-border: var(--color-primary-700);
--btn-outline-hover-bg: var(--color-primary);
--btn-outline-hover-color: var(--color-primary-950);
--btn-link-color: var(--color-primary);
--btn-link-disabled-color: var(--color-primary-700);
--btn-link-hover-color: var(--color-primary);
}
.btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: none;
text-decoration: none;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 400;
white-space: nowrap;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
gap: 0.75rem;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 1.125rem;
line-height: 1.5rem;
background-color: var(--btn-bg);
color: var(--btn-color);
}
.btn:disabled {
cursor: not-allowed;
background-color: var(--btn-disabled-bg);
color: var(--btn-disabled-color);
}
.btn:hover:not(:disabled) {
background-color: var(--btn-hover-bg);
}
.btn:focus-visible:not(:disabled) {
outline: solid 2px var(--color-focus-ring);
outline-offset: 2px;
}
.btn-sm {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
gap: 0.5rem;
font-size: 0.8125rem;
line-height: 1.125rem;
}
.btn-outline {
background-color: transparent;
-webkit-box-shadow: inset 0 0 0 2px var(--btn-outline-border);
box-shadow: inset 0 0 0 2px var(--btn-outline-border);
color: var(--btn-outline-border);
}
.btn-outline:disabled {
background-color: transparent;
-webkit-box-shadow: inset 0 0 0 2px var(--btn-outline-disabled-border);
box-shadow: inset 0 0 0 2px var(--btn-outline-disabled-border);
color: var(--btn-outline-disabled-border);
}
.btn-outline:hover:not(:disabled),
.btn-outline:focus:not(:disabled) {
background-color: var(--btn-outline-hover-bg);
color: var(--btn-outline-hover-color);
}
.btn-link {
background-color: transparent;
color: var(--btn-link-color);
padding: 0;
gap: 0.5rem;
}
.btn-link:disabled {
background-color: transparent;
color: var(--btn-link-disabled-color);
}
.btn-link:hover:not(:disabled),
.btn-link:focus:not(:disabled) {
background-color: transparent;
color: var(--btn-link-hover-color);
text-decoration: underline;
}
.btn-link:focus-visible:not(:disabled) {
outline-color: var(--color-focus-ring);
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link.btn-sm {
font-size: 1rem;
line-height: 1.5rem;
}
/* Icons - Starts */
.icon {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.icon--plus {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--plus-white {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
color: var(--color-primary-950);
}
.icon--info {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--arrow-right {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--arrow-left {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--arrow-bottom {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--arrow-top {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--arrow-wide-right {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.icon--loader {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.icon--profile {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.icon--cart {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.icon--search {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.icon--hamburger {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0_12937_3961)'%3E%3Cmask id='mask0_12937_3961' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Cpath d='M0 0H18V18H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_12937_3961)'%3E%3Cpath d='M1.5 9H16.5M1.5 3.5H16.5M1.5 14.5H16.5' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12937_3961'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0_12937_3961)'%3E%3Cmask id='mask0_12937_3961' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Cpath d='M0 0H18V18H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_12937_3961)'%3E%3Cpath d='M1.5 9H16.5M1.5 3.5H16.5M1.5 14.5H16.5' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12937_3961'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.icon--close {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M15 3L3 15M3 3L15 15' stroke='white' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M15 3L3 15M3 3L15 15' stroke='white' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon--bookmark {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.icon--info-filled {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.icon--right-arrow {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.icon--info-blue {
background: url('data:image/svg+xml,') center center;
}
.icon--info-white {
background: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8.5' r='7' fill='white'/%3E%3Crect x='8.75' y='9.5' width='1.5' height='5.5' rx='0.75' transform='rotate(-180 8.75 9.5)' fill='black'/%3E%3Crect x='9' y='12.5' width='2' height='2' rx='1' transform='rotate(-180 9 12.5)' fill='black'/%3E%3C/svg%3E%0A") center center;
}
.icon--info-white-filled {
background: url('data:image/svg+xml,') center center;
width: 14px;
height: 14px;
}
/* Icons - End */
/* Tooltip trigger with pointer cursor */
[data-tooltip-trigger] {
cursor: pointer;
}
.tooltip__content {
--tooltip-background: var(--color-primary-950);
--tooltip-color: var(--color-primary);
--tooltip-offset: 0;
position: fixed;
top: -9999px;
left: -9999px;
background: var(--tooltip-background);
color: var(--tooltip-color);
z-index: 99999;
opacity: 0;
visibility: hidden;
pointer-events: none;
max-width: 400px;
border-radius: 0.5rem;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform, opacity;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1.25rem;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 0.875rem;
line-height: 1.25rem;
letter-spacing: 0.16px;
}
.tooltip__content--theme-dark {
--tooltip-background: var(--color-primary-50);
--tooltip-color: var(--color-primary-950);
}
.tooltip__content--size-small {
max-width: 245px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
font-family: var(--font-text);
font-weight: var(--regular);
letter-spacing: 0;
font-size: 0.8125rem;
line-height: 1.125rem;
letter-spacing: 0.24px;
}
.tooltip__content.tooltip--visible {
opacity: 1;
visibility: visible;
}
/* Base arrow */
.tooltip__content::after {
content: "";
top: 50%;
left: -5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: url('data:image/svg+xml,') center/contain no-repeat;
width: 6px;
height: 11px;
position: absolute;
z-index: 1;
pointer-events: none;
}
.tooltip__content--theme-dark::after {
background: url('data:image/svg+xml,') center/contain no-repeat;
}
/* Arrows by direction */
.tooltip--position-top {
margin-bottom: var(--tooltip-offset);
}
.tooltip--position-top::after {
bottom: -7px;
left: 50%;
top: unset;
-webkit-transform: translateX(-50%) rotate(270deg);
transform: translateX(-50%) rotate(270deg);
}
.tooltip--position-bottom {
margin-top: var(--tooltip-offset);
}
.tooltip--position-bottom::after {
top: -7px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg);
}
.tooltip--position-left {
margin-right: var(--tooltip-offset);
}
.tooltip--position-left::after {
top: 50%;
right: -5px;
left: unset;
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
background-position: left center;
}
.tooltip--position-right {
margin-left: var(--tooltip-offset);
}
.tooltip--position-right::after {
top: 50%;
left: -5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-position: right center;
}
/* Adjust tooltip position when near viewport edges */
.tooltip--flip-x.tooltip--position-top,
.tooltip--flip-x.tooltip--position-bottom {
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
left: auto !important;
right: 0;
}
.tooltip--flip-x.tooltip--position-top::after,
.tooltip--flip-x.tooltip--position-bottom::after {
left: auto;
right: 12px;
-webkit-transform: none;
transform: none;
}
.tooltip--flip-y.tooltip--position-left,
.tooltip--flip-y.tooltip--position-right {
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
top: auto !important;
bottom: 0;
}
.tooltip--flip-y.tooltip--position-left::after,
.tooltip--flip-y.tooltip--position-right::after {
top: auto;
bottom: 12px;
-webkit-transform: none;
transform: none;
}
/* ==========================================================================
* Custom Styling - Starts
* ========================================================================== */
:root {
--header-height: 64px;
--hero-banner-height: 777px;
}
@media only screen and (max-width: 79.9375rem) {
:root {
--hero-banner-height: 429px
}
}
@media only screen and (max-width: 45.625rem) {
:root {
--header-height: 48px;
--hero-banner-height: 548px
}
}
header {
min-height: 48px;
}
header .header.block[data-block-status="loading"] {
max-height: var(--header-height);
overflow: hidden;
}
/* Ensure all images are responsive and maintain aspect ratio */
img {
height: auto;
max-width: 100%;
display: block;
}
/* Prevent CLS for images with width/height attributes */
img[width][height] {
height: 100%;
}
.section.section-spacing-top-small {
padding-top: 1.25rem;
}
.section.section-spacing-top {
padding-top: 4rem;
}
.section.section-spacing-bottom {
padding-bottom: 120px;
}
@media only screen and (width <=63.9375rem) {
.section.section-spacing-top {
padding-top: 2rem;
}
.section.section-spacing-bottom {
padding-bottom: 2rem;
}
}
.choices .choices__inner::after {
z-index: auto;
}
/* Gradient Animation Active - Same as .gradient-animation--active::after */
.gradient-animation-active::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: conic-gradient(from 90deg, rgb(24, 36, 75) 0deg, rgb(25, 54, 122) 109.038deg, rgb(89, 21, 67) 188.654deg, rgb(23, 19, 31) 256.154deg, rgb(24, 36, 75) 360deg);
-webkit-filter: blur(150px);
filter: blur(150px);
/* Gaussian blur */
-webkit-animation: rotateGradient 20s linear infinite;
animation: rotateGradient 20s linear infinite;
/* animate rotation */
}
/* Swiper CSS Override */
.swiper-pagination {
position: static !important;
width: auto !important;
}
.hero-banner {
visibility: hidden;
}
/* ==========================================================================
* Custom Styling - Ends
* ========================================================================== */
/* stylelint-enable at-rule-no-vendor-prefix, value-keyword-case, length-zero-no-unit, declaration-empty-line-before, rule-empty-line-before, selector-pseudo-element-colon-notation, hue-degree-notation, value-no-vendor-prefix, selector-no-vendor-prefix, font-family-no-missing-generic-family-keyword, shorthand-property-no-redundant-values, number-max-precision, no-duplicate-selectors, keyframes-name-pattern, comment-empty-line-before, media-feature-name-value-no-unknown, declaration-block-no-duplicate-properties, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, declaration-block-no-duplicate-custom-properties, media-feature-range-notation, color-function-alias-notation, custom-property-empty-line-before, font-family-name-quotes, declaration-property-value-no-unknown, property-no-vendor-prefix, selector-attribute-quotes */