:root{--vs-colors--lightest: rgba(60, 60, 60, .26);--vs-colors--light: rgba(60, 60, 60, .5);--vs-colors--dark: #333;--vs-colors--darkest: rgba(0, 0, 0, .15);--vs-search-input-color: inherit;--vs-search-input-placeholder-color: inherit;--vs-font-size: 1rem;--vs-line-height: 1.4;--vs-state-disabled-bg: rgb(248, 248, 248);--vs-state-disabled-color: var(--vs-colors--light);--vs-state-disabled-controls-color: var(--vs-colors--light);--vs-state-disabled-cursor: not-allowed;--vs-border-color: var(--vs-colors--lightest);--vs-border-width: 1px;--vs-border-style: solid;--vs-border-radius: 4px;--vs-actions-padding: 4px 6px 0 3px;--vs-controls-color: var(--vs-colors--light);--vs-controls-size: 1;--vs-controls--deselect-text-shadow: 0 1px 0 #fff;--vs-selected-bg: #f0f0f0;--vs-selected-color: var(--vs-colors--dark);--vs-selected-border-color: var(--vs-border-color);--vs-selected-border-style: var(--vs-border-style);--vs-selected-border-width: var(--vs-border-width);--vs-dropdown-bg: #fff;--vs-dropdown-color: inherit;--vs-dropdown-z-index: 1000;--vs-dropdown-min-width: 160px;--vs-dropdown-max-height: 350px;--vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);--vs-dropdown-option-bg: #000;--vs-dropdown-option-color: var(--vs-dropdown-color);--vs-dropdown-option-padding: 3px 20px;--vs-dropdown-option--active-bg: #5897fb;--vs-dropdown-option--active-color: #fff;--vs-dropdown-option--deselect-bg: #fb5858;--vs-dropdown-option--deselect-color: #fff;--vs-transition-timing-function: cubic-bezier(1, -.115, .975, .855);--vs-transition-duration: .15s}.v-select{position:relative;font-family:inherit}.v-select,.v-select *{box-sizing:border-box}:root{--vs-transition-timing-function: cubic-bezier(1, .5, .8, 1);--vs-transition-duration: .15s}@-webkit-keyframes vSelectSpinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes vSelectSpinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vs__fade-enter-active,.vs__fade-leave-active{pointer-events:none;transition:opacity var(--vs-transition-duration) var(--vs-transition-timing-function)}.vs__fade-enter,.vs__fade-leave-to{opacity:0}:root{--vs-disabled-bg: var(--vs-state-disabled-bg);--vs-disabled-color: var(--vs-state-disabled-color);--vs-disabled-cursor: var(--vs-state-disabled-cursor)}.vs--disabled .vs__dropdown-toggle,.vs--disabled .vs__clear,.vs--disabled .vs__search,.vs--disabled .vs__selected,.vs--disabled .vs__open-indicator{cursor:var(--vs-disabled-cursor);background-color:var(--vs-disabled-bg)}.v-select[dir=rtl] .vs__actions{padding:0 3px 0 6px}.v-select[dir=rtl] .vs__clear{margin-left:6px;margin-right:0}.v-select[dir=rtl] .vs__deselect{margin-left:0;margin-right:2px}.v-select[dir=rtl] .vs__dropdown-menu{text-align:right}.vs__dropdown-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;padding:0 0 4px;background:none;border:var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);border-radius:var(--vs-border-radius);white-space:normal}.vs__selected-options{display:flex;flex-basis:100%;flex-grow:1;flex-wrap:wrap;padding:0 2px;position:relative}.vs__actions{display:flex;align-items:center;padding:var(--vs-actions-padding)}.vs--searchable .vs__dropdown-toggle{cursor:text}.vs--unsearchable .vs__dropdown-toggle{cursor:pointer}.vs--open .vs__dropdown-toggle{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.vs__open-indicator{fill:var(--vs-controls-color);transform:scale(var(--vs-controls-size));transition:transform var(--vs-transition-duration) var(--vs-transition-timing-function);transition-timing-function:var(--vs-transition-timing-function)}.vs--open .vs__open-indicator{transform:rotate(180deg) scale(var(--vs-controls-size))}.vs--loading .vs__open-indicator{opacity:0}.vs__clear{fill:var(--vs-controls-color);padding:0;border:0;background-color:transparent;cursor:pointer;margin-right:8px}.vs__dropdown-menu{display:block;box-sizing:border-box;position:absolute;top:calc(100% - var(--vs-border-width));left:0;z-index:var(--vs-dropdown-z-index);padding:5px 0;margin:0;width:100%;max-height:var(--vs-dropdown-max-height);min-width:var(--vs-dropdown-min-width);overflow-y:auto;box-shadow:var(--vs-dropdown-box-shadow);border:var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);border-top-style:none;border-radius:0 0 var(--vs-border-radius) var(--vs-border-radius);text-align:left;list-style:none;background:var(--vs-dropdown-bg);color:var(--vs-dropdown-color)}.vs__no-options{text-align:center}.vs__dropdown-option{line-height:1.42857143;display:block;padding:var(--vs-dropdown-option-padding);clear:both;color:var(--vs-dropdown-option-color);white-space:nowrap;cursor:pointer}.vs__dropdown-option--highlight{background:var(--vs-dropdown-option--active-bg);color:var(--vs-dropdown-option--active-color)}.vs__dropdown-option--deselect{background:var(--vs-dropdown-option--deselect-bg);color:var(--vs-dropdown-option--deselect-color)}.vs__dropdown-option--disabled{background:var(--vs-state-disabled-bg);color:var(--vs-state-disabled-color);cursor:var(--vs-state-disabled-cursor)}.vs__selected{display:flex;align-items:center;background-color:var(--vs-selected-bg);border:var(--vs-selected-border-width) var(--vs-selected-border-style) var(--vs-selected-border-color);border-radius:var(--vs-border-radius);color:var(--vs-selected-color);line-height:var(--vs-line-height);margin:4px 2px 0;padding:0 .25em;z-index:0}.vs__deselect{display:inline-flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:4px;padding:0;border:0;cursor:pointer;background:none;fill:var(--vs-controls-color);text-shadow:var(--vs-controls--deselect-text-shadow)}.vs--single .vs__selected{background-color:transparent;border-color:transparent}.vs--single.vs--open .vs__selected,.vs--single.vs--loading .vs__selected{position:absolute;opacity:.4}.vs--single.vs--searching .vs__selected{display:none}.vs__search::-webkit-search-cancel-button{display:none}.vs__search::-webkit-search-decoration,.vs__search::-webkit-search-results-button,.vs__search::-webkit-search-results-decoration,.vs__search::-ms-clear{display:none}.vs__search,.vs__search:focus{color:var(--vs-search-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:var(--vs-line-height);font-size:var(--vs-font-size);border:1px solid transparent;border-left:none;outline:none;margin:4px 0 0;padding:0 7px;background:none;box-shadow:none;width:0;max-width:100%;flex-grow:1;z-index:1}.vs__search::-moz-placeholder{color:var(--vs-search-input-placeholder-color)}.vs__search::placeholder{color:var(--vs-search-input-placeholder-color)}.vs--unsearchable .vs__search{opacity:1}.vs--unsearchable:not(.vs--disabled) .vs__search{cursor:pointer}.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search{opacity:.2}.vs__spinner{align-self:center;opacity:0;font-size:5px;text-indent:-9999em;overflow:hidden;border-top:.9em solid rgba(100,100,100,.1);border-right:.9em solid rgba(100,100,100,.1);border-bottom:.9em solid rgba(100,100,100,.1);border-left:.9em solid rgba(60,60,60,.45);transform:translateZ(0) scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));-webkit-animation:vSelectSpinner 1.1s infinite linear;animation:vSelectSpinner 1.1s infinite linear;transition:opacity .1s}.vs__spinner,.vs__spinner:after{border-radius:50%;width:5em;height:5em;transform:scale(var(--vs-controls--spinner-size, var(--vs-controls-size)))}.vs--loading .vs__spinner{opacity:1} @charset "UTF-8"; /** * Import all scss files */ /** * Custom variable settings * Not available in Foundation * @path: settings/custom * * 1. Font * 2. Colors * 3. Global * 4. Flex * 5. Headings * 6. Spacing * 7. Breakpoints * 8. Grid * 9. Buttons * 10. Hero * 11. Card * 12. Navigation * 13. Footer * 14. Image * 15. Accordion * 16. Content block * 17. Datepicker * 18. Loader * 19. Icons * 20. Alert */ @font-face { font-family: "FedraSansMedium"; src: url("/fonts/fedra-sans-medium/fedra_sans_medium-webfont.eot"); src: url("/fonts/fedra-sans-medium/fedra_sans_medium-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/fedra-sans-medium/fedra_sans_medium-webfont.woff2") format("woff2"), url("/fonts/fedra-sans-medium/fedra_sans_medium-webfont.woff") format("woff"), url("/fonts/fedra-sans-medium/fedra_sans_medium-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "FedraSansBook"; src: url("/fonts/fedra-sans-book/fedrasans-book-webfont.eot"); src: url("/fonts/fedra-sans-book/fedrasans-book-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/fedra-sans-book/fedrasans-book-webfont.woff2") format("woff2"), url("/fonts/fedra-sans-book/fedrasans-book-webfont.woff") format("woff"), url("/fonts/fedra-sans-book/fedrasans-book-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } /* * Alert boxes (from Foundation 5) * * 1. Alert base * 2. Alert style * 3. Alert close * 4. Alert */ /** * Mixins and functions for breakpoint media queries * @path: tools/breakpoint * * 1. Breakpoint * 2. Breakpoint from map * 3. Get media query string * 4. Breakpoint to em * 5. Create media query string */ /** * Mixin to manage responsive breakpoints * * Examples: * @include breakpoint(md) // Output: @media screen and (min-width: 48em) * @include breakpoint(md up) // Output: @media screen and (min-width: 48em) * @include breakpoint(lg only) // Output: @media screen and (min-width: 62em) and (max-width: 74.99875em) * @include breakpoint(lg down) // Output: @media screen and (max-width: 74.99875em) * @include breakpoint(576px) // Output: @media screen and (min-width: 36em) * @include breakpoint(75em). // Output: @media screen and (min-width: 75em) * @include breakpoint(landscape) // Output: @media screen and (orientation: landscape) * @include breakpoint(portrait) // Output: @media screen and (orientation: portrait) * * I.E. for combination of orientation and min/max media query, use include inside an include: * @include breakpoint(lg) { * @include breakpoint(landscape) { * // ... * } * } * // Output: @media screen and (min-width: 62em) and (orientation: landscape) * * @param {String} $breakpoint - Breakpoint name, px or em value */ /** * Generate the `@content` passed to the mixin with a value `$-cl-breakpoint-value` related to a breakpoint, * depending on the `$name` parameter: * - For a single value, `$-cl-breakpoint-value` is this value. * - For a breakpoint name, `$-cl-breakpoint-value` is the corresponding breakpoint value in `$map`. * - For "auto", `$-cl-breakpoint-value` is the corresponding breakpoint value in `$map` and is passed * to `@content`, which is made responsive for each breakpoint of `$map`. * * @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint * names to use. "auto" by default. * @param {Number|Map} $map - Map of breakpoints and values or single value to use. */ /** * Generates a media query string matching the input value * * @author Rianne Oosthoek * @param {[type]} $value: $zero-breakpoint [description] * @return {string} $value [xsmall] - Breakpoint name, px, or em value to process. */ /** * Convert given value to em. Used in media queries * * @author Rianne Oosthoek * @param {string} $value unitless, pixel or rem value * @return {string} number in em value */ /** * Return media query string from the given min and/or max limits. * If a limit is equal to `null` or `0`, it is ignored. * * @author Rianne Oosthoek * @param {Number} $breakpoint-min [0] - Min media query limit. * @param {Number} $breakpoint-max [0] - Max media query limit. * @param {String} $breakpoint-name-min ['min-width'] - Name of the min media query limit. * @param {String} $breakpoint-name-max ['max-width'] - Name of the max media query limit. * @returns {String} Media Query string. */ /** * Flexbox utility mixins * @path: tools/flexbox * * 1. Flex-align */ /** * Generates horizontal and vertical flexbox alignment classes * * @author Rianne Oosthoek * @param {string} $x-alignment: null Horizontal alignment to use. Can be `left`, `right`, `center`, * `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment. * @param {string} $y-alignment: null Vertical alignment to use. Can be `top`, `bottom`, `middle`, * or `stretch`. Or, set it to `null` (the default) to not set vertical alignment. * * @credits: https://github.com/foundation/foundation-sites/blob/4e6c218993188d9f5368061d5dc1426978ab01bf/scss/util/_flex.scss */ /** * Grid mixins and functions * @path: tools/grid * * 1. Calculate column size percentage * 2. Gutters * 3. Grid sizes * 4. Spacing */ /** * Set the gutters on a column * * @param {Number|Keyword} $gutter [auto] * Spacing between columns, accepts multiple values: * - A single value will make the gutter that exact size. * - A breakpoint name will make the gutter the corresponding size in the $gutters map. * - "auto" will make the gutter responsive, using the $gutters map values. * @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default. */ /** * Generate a set of grid column classes using a breakpoint-size * .o-col-[breakpoint-size]-[number] for a column that covers a specific number of columns (e.g. 1-12 by default) * .o-push-[breakpoint-size]-[number] for pushing a col a specific number of columns (e.g. 1-11 by default) * .o-push-[breakpoint-size]-reset for resetting a col's offset for that and larger breakpoint-sizes */ /** * Link * @path: tools/link */ /** * 3. Mixin for adding the external url properties * * @author Yonita van Oudheusden */ /** * Handy helper functions * @path: tools/unit * * 1. Unit removal */ /** * Removes the unit (e.g. px, em, rem) from a value, returning the number only. * * @author Rianne Oosthoek * @param {Number} $number - Number to strip unit from. * @returns {Number} The same number, sans unit. */ /** * Functions for retrieving specific values * @path: tools/value * * 1. Map keys * 2. Get specific side of value * */ /** * Find the next key in a map. * * @author Rianne Oosthoek * @param {Map} $map - Map to traverse. * @param {Mixed} $key - Key to use as a starting point. * @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` * was not found, or `$key` was the last value in the map, returns `null`. */ /** * Determine a top/right/bottom/right value on a padding, margin, etc. property, * no matter how many values were passed in. Use this function if you need to * know the specific side of a value, but don't know if the value is using a shorthand format. * * @author Rianne Oosthoek * @param {List|Number} $value - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em" * @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`. * @returns {Number} A single value based on `$value` and `$side`. */ /** * Visibility mixins * @path: tools/visibility */ /** * Normalize * @path: elements/normalize */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ *, ::after, ::before { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { font-size: 62.5%; line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } a { text-decoration: none; } /** * Bodystyle * @path: elements/body */ body { font-size: 1.6rem; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; background-color: #ffffff; color: #000000; display: flex; flex-direction: column; } /** * Button * @path: elements/button */ button, [type=button], [type=reset], [type=submit] { border: none; background: transparent; transition: background-color 0.2s ease-in, background 0.2s ease-in, color 0.2s ease-in, border-color 0.2s ease-in; } /** * Button * @path: elements/form */ input, select, textarea { font-size: 100%; } /** * Headings * @path: elements/headings */ h1, h2, h3, h4, h5, h6 { font-family: "FedraSansMedium"; font-weight: 400; line-height: 1.2; } /** * Link * @path: elements/link */ .is-desktop a:hover { color: #173eab; } a { color: #1D4ED8; transition: background-color 0.15s ease-in, color 0.15s ease-in, border-color 0.15s ease-in; } /** * Media * @path: elements/media */ figure { margin: 0; } /** * Meta * @path: elements/meta */ .bp { font-family: "xs=-zf-bp-to-em(0)&sm=-zf-bp-to-em(576px)&md=-zf-bp-to-em(768px)&lg=-zf-bp-to-em(992px)&xl=-zf-bp-to-em(1200px)&xxl=-zf-bp-to-em(1400px)"; } /** * Animations * @path: objects/animation */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /** * Background * @path: components/background */ .o-background { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } .o-background--contain { background-size: contain; } /** * Flexbox classes * @path: objects/flex */ .o-flex { display: flex; } .o-flex--left { justify-content: flex-start; } .o-flex--right { justify-content: flex-end; } .o-flex--center { justify-content: center; } .o-flex--justify { justify-content: space-between; } .o-flex--spaced { justify-content: space-around; } .o-flex--top { align-items: flex-start; } .o-flex--bottom { align-items: flex-end; } .o-flex--middle { align-items: center; } .o-flex--stretch { align-items: stretch; } .o-flex--default { flex: 0 1 auto; } .o-flex--grow { flex: 1 0 auto; } .o-flex--auto { flex: 1 1 auto; } .o-flex--even { flex: 1 1 0%; } .o-flex--none { flex: 0 0 auto; } .o-flex--column { flex-direction: column; } .o-flex--row-reverse { flex-direction: row-reverse; } .o-flex--wrap { flex-wrap: wrap; } .o-flex--no-wrap { flex-wrap: nowrap; } .o-flex--align-self-center { align-self: center; } .o-flex--align-self-start { align-self: flex-start; } .o-flex--justify-end { justify-content: flex-end; } .o-flex--full-width { flex: 1 0 100%; } .o-gap-x-3 { -moz-column-gap: 2.4rem; column-gap: 2.4rem; } @media screen and (min-width: 36em) { .o-sm-flex--justify { justify-content: space-between; } .o-sm-flex--default { flex: 0 1 auto; } } /** * Grid * @path: objects/grid * @credits: https://github.com/kodolen/ljvw-portfolio/blob/master/src/style/_flex-grid.scss */ .o-row { max-width: 129.2rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: row; flex-wrap: wrap; } .o-row .o-row { margin-left: -1.2rem; margin-right: -1.2rem; } @media screen and (min-width: 48em) { .o-row .o-row { margin-left: -1.8rem; margin-right: -1.8rem; } } @media screen and (min-width: 75em) { .o-row .o-row { margin-left: -2.2rem; margin-right: -2.2rem; } } .o-row--reverse { flex-direction: row-reverse; } .o-col { padding-right: 1.2rem; padding-left: 1.2rem; flex-grow: 1; flex-shrink: 1; flex-basis: 100%; } @media screen and (min-width: 48em) { .o-col { padding-right: 1.8rem; padding-left: 1.8rem; } } @media screen and (min-width: 75em) { .o-col { padding-right: 2.2rem; padding-left: 2.2rem; } } /** * For each namespace, wrap the col width/offset measurements in their breakpoint media query */ @media only screen and (min-width: 0) { .o-col--xs-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .o-col--xs-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .o-col--xs-3 { flex-basis: 25%; max-width: 25%; } .o-col--xs-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .o-col--xs-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .o-col--xs-6 { flex-basis: 50%; max-width: 50%; } .o-col--xs-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .o-col--xs-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .o-col--xs-9 { flex-basis: 75%; max-width: 75%; } .o-col--xs-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .o-col--xs-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .o-col--xs-12 { flex-basis: 100%; max-width: 100%; } .o-offset--xs-0 { margin-left: 0%; } .o-offset--xs-1 { margin-left: 8.3333333333%; } .o-offset--xs-2 { margin-left: 16.6666666667%; } .o-offset--xs-3 { margin-left: 25%; } .o-offset--xs-4 { margin-left: 33.3333333333%; } .o-offset--xs-5 { margin-left: 41.6666666667%; } .o-offset--xs-6 { margin-left: 50%; } .o-offset--xs-7 { margin-left: 58.3333333333%; } .o-offset--xs-8 { margin-left: 66.6666666667%; } .o-offset--xs-9 { margin-left: 75%; } .o-offset--xs-10 { margin-left: 83.3333333333%; } .o-offset--xs-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 576px) { .o-col--sm-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .o-col--sm-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .o-col--sm-3 { flex-basis: 25%; max-width: 25%; } .o-col--sm-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .o-col--sm-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .o-col--sm-6 { flex-basis: 50%; max-width: 50%; } .o-col--sm-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .o-col--sm-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .o-col--sm-9 { flex-basis: 75%; max-width: 75%; } .o-col--sm-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .o-col--sm-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .o-col--sm-12 { flex-basis: 100%; max-width: 100%; } .o-offset--sm-0 { margin-left: 0%; } .o-offset--sm-1 { margin-left: 8.3333333333%; } .o-offset--sm-2 { margin-left: 16.6666666667%; } .o-offset--sm-3 { margin-left: 25%; } .o-offset--sm-4 { margin-left: 33.3333333333%; } .o-offset--sm-5 { margin-left: 41.6666666667%; } .o-offset--sm-6 { margin-left: 50%; } .o-offset--sm-7 { margin-left: 58.3333333333%; } .o-offset--sm-8 { margin-left: 66.6666666667%; } .o-offset--sm-9 { margin-left: 75%; } .o-offset--sm-10 { margin-left: 83.3333333333%; } .o-offset--sm-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 768px) { .o-col--md-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .o-col--md-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .o-col--md-3 { flex-basis: 25%; max-width: 25%; } .o-col--md-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .o-col--md-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .o-col--md-6 { flex-basis: 50%; max-width: 50%; } .o-col--md-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .o-col--md-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .o-col--md-9 { flex-basis: 75%; max-width: 75%; } .o-col--md-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .o-col--md-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .o-col--md-12 { flex-basis: 100%; max-width: 100%; } .o-offset--md-0 { margin-left: 0%; } .o-offset--md-1 { margin-left: 8.3333333333%; } .o-offset--md-2 { margin-left: 16.6666666667%; } .o-offset--md-3 { margin-left: 25%; } .o-offset--md-4 { margin-left: 33.3333333333%; } .o-offset--md-5 { margin-left: 41.6666666667%; } .o-offset--md-6 { margin-left: 50%; } .o-offset--md-7 { margin-left: 58.3333333333%; } .o-offset--md-8 { margin-left: 66.6666666667%; } .o-offset--md-9 { margin-left: 75%; } .o-offset--md-10 { margin-left: 83.3333333333%; } .o-offset--md-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 992px) { .o-col--lg-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .o-col--lg-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .o-col--lg-3 { flex-basis: 25%; max-width: 25%; } .o-col--lg-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .o-col--lg-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .o-col--lg-6 { flex-basis: 50%; max-width: 50%; } .o-col--lg-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .o-col--lg-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .o-col--lg-9 { flex-basis: 75%; max-width: 75%; } .o-col--lg-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .o-col--lg-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .o-col--lg-12 { flex-basis: 100%; max-width: 100%; } .o-offset--lg-0 { margin-left: 0%; } .o-offset--lg-1 { margin-left: 8.3333333333%; } .o-offset--lg-2 { margin-left: 16.6666666667%; } .o-offset--lg-3 { margin-left: 25%; } .o-offset--lg-4 { margin-left: 33.3333333333%; } .o-offset--lg-5 { margin-left: 41.6666666667%; } .o-offset--lg-6 { margin-left: 50%; } .o-offset--lg-7 { margin-left: 58.3333333333%; } .o-offset--lg-8 { margin-left: 66.6666666667%; } .o-offset--lg-9 { margin-left: 75%; } .o-offset--lg-10 { margin-left: 83.3333333333%; } .o-offset--lg-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 1200px) { .o-col--xl-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .o-col--xl-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .o-col--xl-3 { flex-basis: 25%; max-width: 25%; } .o-col--xl-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .o-col--xl-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .o-col--xl-6 { flex-basis: 50%; max-width: 50%; } .o-col--xl-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .o-col--xl-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .o-col--xl-9 { flex-basis: 75%; max-width: 75%; } .o-col--xl-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .o-col--xl-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .o-col--xl-12 { flex-basis: 100%; max-width: 100%; } .o-offset--xl-0 { margin-left: 0%; } .o-offset--xl-1 { margin-left: 8.3333333333%; } .o-offset--xl-2 { margin-left: 16.6666666667%; } .o-offset--xl-3 { margin-left: 25%; } .o-offset--xl-4 { margin-left: 33.3333333333%; } .o-offset--xl-5 { margin-left: 41.6666666667%; } .o-offset--xl-6 { margin-left: 50%; } .o-offset--xl-7 { margin-left: 58.3333333333%; } .o-offset--xl-8 { margin-left: 66.6666666667%; } .o-offset--xl-9 { margin-left: 75%; } .o-offset--xl-10 { margin-left: 83.3333333333%; } .o-offset--xl-11 { margin-left: 91.6666666667%; } } @media only screen and (min-width: 1400px) { .o-col--xxl-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .o-col--xxl-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .o-col--xxl-3 { flex-basis: 25%; max-width: 25%; } .o-col--xxl-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .o-col--xxl-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .o-col--xxl-6 { flex-basis: 50%; max-width: 50%; } .o-col--xxl-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .o-col--xxl-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .o-col--xxl-9 { flex-basis: 75%; max-width: 75%; } .o-col--xxl-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .o-col--xxl-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .o-col--xxl-12 { flex-basis: 100%; max-width: 100%; } .o-offset--xxl-0 { margin-left: 0%; } .o-offset--xxl-1 { margin-left: 8.3333333333%; } .o-offset--xxl-2 { margin-left: 16.6666666667%; } .o-offset--xxl-3 { margin-left: 25%; } .o-offset--xxl-4 { margin-left: 33.3333333333%; } .o-offset--xxl-5 { margin-left: 41.6666666667%; } .o-offset--xxl-6 { margin-left: 50%; } .o-offset--xxl-7 { margin-left: 58.3333333333%; } .o-offset--xxl-8 { margin-left: 66.6666666667%; } .o-offset--xxl-9 { margin-left: 75%; } .o-offset--xxl-10 { margin-left: 83.3333333333%; } .o-offset--xxl-11 { margin-left: 91.6666666667%; } } /** * Lists * @path: objects/list */ .o-list-unstyled { margin: 0; padding: 0; list-style-type: none; } /** * Accordion * @path: components/accordion */ .c-accordion__item { border-bottom: 0.1rem solid #000000; } .c-accordion__item--active .c-accordion__content { display: block; } .c-accordion__item--active .c-accordion__header { padding-bottom: 0; } .c-accordion__header { padding: 2rem 0; width: 100%; text-align: left; cursor: pointer; } .c-accordion__content { display: none; } .c-accordion__icon { padding-left: 2rem; } .c-accordion__icon, .c-accordion__title { margin: 0; color: #000000; pointer-events: none; } .c-accordion--panel .c-accordion__content { border: 0.1rem solid #000000; border-radius: 0 0 0.5rem 0.5rem; border-top: none; } .c-accordion--panel .c-accordion__item { margin-bottom: 1.2rem; } .c-accordion--panel .c-accordion__item:nth-last-child(1) { margin-bottom: 0; } .c-accordion--panel .c-accordion__item--active .c-accordion__header { border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; } .c-accordion--panel .c-accordion__header { border: 0.1rem solid #000000; padding: 2rem; border-radius: 0.5rem; } /** * Alert * @path: components/alert */ /** * Alert boxes * From Foundation 5 * @path: components/alert-box */ .c-alert { margin-bottom: 2.4rem; padding: 1.6rem 1.6rem 1.6rem 1.6rem; position: relative; z-index: 1; font-weight: normal; border-style: solid; border-width: 1px; border-radius: 0.5rem; font-size: 1.6rem; transition: opacity 300ms ease-out; display: flex; background-color: #e0f3fc; border-color: #0095db; color: #0095db; } .c-alert--success { background-color: #e8f3e7; border-color: #46973a; color: #46973a; } .c-alert--warning { background-color: #fbf3e5; border-color: #f39c12; color: #f39c12; } .c-alert--alert { background-color: #f9ebe9; border-color: #dd4b39; color: #dd4b39; } .c-alert--info { background-color: #e7f2fa; border-color: #2199e8; color: #2199e8; } .c-alert--radius { border-radius: 0.5rem; } .c-alert--sticky { max-width: 129.2rem; min-height: 8rem; width: 100%; margin: 1.6rem 0 0 0; position: fixed; left: 50%; z-index: 1000; transform: translateX(-50%); } .c-alert--sticky .c-alert { min-height: 8rem; } /** * Block loader * @path: components/block-loader */ .c-block-loader { width: 100%; height: 2rem; background-color: #f3f3f6; position: relative; margin-bottom: 1.2rem; border-radius: 0.5rem; overflow: hidden; } .c-block-loader--large { height: 4rem; } .c-block-loader--title { width: 30rem; } .c-block-loader--text { width: 12rem; } .c-block-loader--image { height: 24rem; } .c-block-loader::after { position: absolute; content: ""; width: 100%; height: 100%; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(222, 222, 222, 0.2), transparent); -webkit-animation: loading 0.8s infinite; animation: loading 0.8s infinite; } @-webkit-keyframes loading { 100% { transform: translateX(100%); } } @keyframes loading { 100% { transform: translateX(100%); } } /** * Buttons * @path: components/button */ .is-desktop .c-button--solid:hover { color: #ffffff; background-image: linear-gradient(195deg, #286bff 10%, #5000cc); } .is-desktop .c-button--solid.c-button--secondary:hover { color: #ffffff; background-color: #666666; } .is-desktop .c-button--solid.c-button--success:hover { color: #ffffff; background-color: #3c8031; } .is-desktop .c-button--hollow:hover { color: #280066; background-color: transparent; border: 0.1rem solid #280066; } .is-desktop .c-button--hollow.c-button--secondary:hover { color: #666666; background-color: transparent; border: 0.1rem solid #666666; } .is-desktop .c-button--hollow.c-button--white:hover { color: #0095db; background-color: #ffffff; border: 0.1rem solid #ffffff; } .is-desktop .c-button--clear:hover { color: #173eab; background-color: transparent; border: 0.1rem solid transparent; } .is-desktop .c-button.disabled:hover, .is-desktop .c-button[disabled=true]:hover { background: #999999; background-color: #999999; color: #ffffff; cursor: not-allowed; } .c-button { min-width: 4.4rem; height: 4.4rem; padding: 1.2rem 2.4rem; border-radius: 0.8rem; font-family: inherit; font-size: 1.6rem; font-weight: 700; vertical-align: middle; line-height: 1; transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, background-position 0.25s ease-out; display: inline-flex; justify-content: center; align-items: center; flex-wrap: nowrap; -moz-column-gap: 0.8rem; column-gap: 0.8rem; white-space: nowrap; cursor: pointer; } .c-button ~ .c-button { margin-left: 0.5rem; } .c-button--solid { color: #ffffff; background-image: linear-gradient(195deg, #2563eb 10%, #3c0099); background-color: #3c0099; border: unset; } .c-button--solid.c-button--secondary { color: #ffffff; background: #000000; background-color: #000000; } .c-button--hollow { color: #3c0099; background-color: transparent; border: 0.1rem solid #3c0099; } .c-button--hollow.c-button--secondary { color: #000000; border: 0.1rem solid #000000; } .c-button--hollow.c-button--white { color: #ffffff; border: 0.1rem solid #ffffff; } .c-button--clear { padding: 0; cursor: pointer; background-color: transparent; border: 0.1rem solid transparent; color: #1D4ED8; transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, background-position 0.25s ease-out; } .c-button.disabled, .c-button[disabled=true] { background: #999999; background-color: #999999; color: #ffffff; } .c-button--expanded { width: 100%; } .c-button__icon { margin-left: 0.6rem; } .c-button__icon--left { margin-right: 0.6rem; } /** * Card * @path: components/Card */ .is-desktop .c-card__title:hover { color: #0095db; } .is-desktop .c-card__image:hover { transform: scale(1.05); } .c-card { height: 100%; background-color: #ffffff; border-radius: 0.8rem; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } .c-card__image { width: 100%; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -o-object-fit: cover; object-fit: cover; display: block; } .c-card__content { height: 100%; padding: 2.4rem 2.4rem 0; display: flex; flex-direction: column; } .c-card__title { color: #000000; transition: color 0.25s ease-out; } .c-card__body { display: flex; flex-grow: 1; } .c-card--loaded { opacity: 0; -webkit-animation: fadeIn 0.8s forwards; animation: fadeIn 0.8s forwards; } /** * Checkbox * @path: components/checkbox */ .c-checkbox-wrapper { position: relative; } .c-checkbox-wrapper .c-checkbox { display: none; } .c-checkbox-wrapper .c-checkbox + label::after { content: none; } .c-checkbox-wrapper .c-checkbox:checked + label::after { content: ""; } .c-checkbox-wrapper .c-checkbox-label { margin-left: 0; padding-left: 3.5rem; color: #000000; position: relative; font-size: 1.5rem; } .c-checkbox-wrapper .c-checkbox-label::before { opacity: 0.8; content: ""; display: inline-block; position: absolute; top: 0.2rem; left: 0; background-color: #ffffff; height: 2rem; width: 2rem; border: 0.1rem solid #999999; border-radius: 4px; } .c-checkbox-wrapper .c-checkbox-label::after { position: absolute; content: ""; display: inline-block; height: 0.8rem; width: 1.2rem; border-left: 0.2rem solid; border-bottom: 0.2rem solid; transform: rotate(-45deg); left: 0.4rem; top: 0.6rem; color: #1D4ED8; } .c-checkbox-wrapper .c-checkbox-label.white { color: #ffffff; } .c-checkbox-wrapper .c-checkbox-label.white .c-link { color: #ffffff; border-bottom-color: #ffffff; } /** * Progress * @path: components/progress */ .c-checkout-bar__items { position: relative; display: flex; justify-content: space-between; } .c-checkout-bar__step { flex-basis: 20%; display: flex; flex-direction: column; align-items: center; } .c-checkout-bar__step:first-child .c-checkout-bar__line::before { content: unset; } .c-checkout-bar__step:last-child .c-checkout-bar__line::after { content: unset; } .c-checkout-bar__step.is-current .c-checkout-bar__line::before { background-color: #3c0099; } .c-checkout-bar__step.is-current .c-checkout-bar__circle { background: linear-gradient(-90deg, #0095db 0%, #3c0099 100%); background-color: #3c0099; color: #ffffff; border: unset; } .c-checkout-bar__step.is-current .c-checkout-bar__name { color: #3c0099; } .c-checkout-bar__step.is-completed .c-checkout-bar__line::before, .c-checkout-bar__step.is-completed .c-checkout-bar__line::after { background-color: #3c0099; } .c-checkout-bar__step.is-completed .c-checkout-bar__circle { color: #3c0099; border-color: #3c0099; } .c-checkout-bar__step.is-completed .c-checkout-bar__name { color: #3c0099; } .c-checkout-bar__line { width: 100%; position: relative; z-index: 1; display: flex; justify-content: center; } .c-checkout-bar__line::before, .c-checkout-bar__line::after { width: 50%; height: 0.2rem; position: absolute; z-index: 1; top: 50%; background-color: #999999; content: ""; transform: translateY(-50%); } .c-checkout-bar__line::before { left: 0; } .c-checkout-bar__line::after { left: 50%; } .c-checkout-bar__circle { width: 3.8rem; height: 3.8rem; position: relative; z-index: 5; color: #999999; background-color: #ffffff; border: 0.1rem solid #999999; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .c-checkout-bar__name { margin-top: 0.8rem; color: #999999; font-size: 1.2rem; white-space: nowrap; } @media screen and (min-width: 48em) { .c-checkout-bar__name { font-size: 1.6rem; } } /** * Cookie * @path: components/cookie */ .c-cookie { width: 100%; background-color: #ffffff; border-radius: 0.5rem; padding: 2.4rem 2.4rem 0; } .c-cookie__buttons { display: flex; flex-wrap: wrap; margin-bottom: 1.2rem; } .c-cookie__button { margin-bottom: 1.2rem; } @media screen and (min-width: 48em) { .c-cookie { width: 70%; } } @media screen and (min-width: 62em) { .c-cookie { width: 50%; } } /** * Dropdown * @path: components/dropdown */ .c-dropdown .vs__dropdown-toggle { border: none; width: auto; } .c-dropdown .vs__selected-options { width: 3rem; display: unset; flex-basis: unset; flex-grow: unset; } .c-dropdown .vs__dropdown-menu { border-top-style: solid; } .c-dropdown .vs__actions { margin-left: 0.4rem; padding-right: 0; } .c-dropdown .vs__open-indicator { fill: #000000; } /** * Panel * @path: components/panel */ .c-panel { background-color: #ffffff; padding: 2.4rem; border-radius: 1.2rem; color: #000000; word-break: break-word; } .c-panel--form { border: 0.1rem solid #000000; } .c-panel__header--column { flex-direction: column; align-items: flex-start; } .c-panel__select-wrapper { padding: 2.4rem; border-radius: 1.2rem; border: 0.1rem solid #000000; margin-bottom: 2.4rem; position: relative; } .c-panel__select-wrapper:nth-child(1) { z-index: 99; } .c-panel__select-wrapper:nth-child(2) { z-index: 98; } .c-panel__select-wrapper:nth-child(3) { z-index: 97; } .c-panel__select-wrapper:nth-child(4) { z-index: 96; } .c-panel__select-wrapper:nth-child(5) { z-index: 95; } .c-panel__select-wrapper:nth-child(6) { z-index: 94; } .c-panel__select-wrapper:nth-child(7) { z-index: 93; } .c-panel__select-wrapper:nth-child(8) { z-index: 92; } .c-panel__select-wrapper:nth-child(9) { z-index: 91; } .c-panel__select-wrapper:nth-child(10) { z-index: 90; } .c-panel__select-wrapper:nth-child(11) { z-index: 89; } .c-panel__select-wrapper:nth-child(12) { z-index: 88; } .c-panel__select-wrapper:nth-child(13) { z-index: 87; } .c-panel__select-wrapper:nth-child(14) { z-index: 86; } .c-panel__select-wrapper:nth-child(15) { z-index: 85; } .c-panel__select-wrapper:nth-child(16) { z-index: 84; } .c-panel__select-wrapper:nth-child(17) { z-index: 83; } .c-panel__select-wrapper:nth-child(18) { z-index: 82; } .c-panel__select-wrapper:nth-child(19) { z-index: 81; } .c-panel__select-wrapper:nth-child(20) { z-index: 80; } .c-panel__select-wrapper:nth-child(21) { z-index: 79; } .c-panel__select-wrapper:nth-child(22) { z-index: 78; } .c-panel__select-wrapper:nth-child(23) { z-index: 77; } .c-panel__select-wrapper:nth-child(24) { z-index: 76; } .c-panel__select-wrapper:nth-child(25) { z-index: 75; } .c-panel__select-wrapper:nth-child(26) { z-index: 74; } .c-panel__select-wrapper:nth-child(27) { z-index: 73; } .c-panel__select-wrapper:nth-child(28) { z-index: 72; } .c-panel__select-wrapper:nth-child(29) { z-index: 71; } .c-panel__select-wrapper:nth-child(30) { z-index: 70; } .c-panel__select-wrapper:nth-child(31) { z-index: 69; } .c-panel__select-wrapper:nth-child(32) { z-index: 68; } .c-panel__select-wrapper:nth-child(33) { z-index: 67; } .c-panel__select-wrapper:nth-child(34) { z-index: 66; } .c-panel__select-wrapper:nth-child(35) { z-index: 65; } .c-panel__select-wrapper:nth-child(36) { z-index: 64; } .c-panel__select-wrapper:nth-child(37) { z-index: 63; } .c-panel__select-wrapper:nth-child(38) { z-index: 62; } .c-panel__select-wrapper:nth-child(39) { z-index: 61; } .c-panel__select-wrapper:nth-child(40) { z-index: 60; } .c-panel__select-wrapper:nth-child(41) { z-index: 59; } .c-panel__select-wrapper:nth-child(42) { z-index: 58; } .c-panel__select-wrapper:nth-child(43) { z-index: 57; } .c-panel__select-wrapper:nth-child(44) { z-index: 56; } .c-panel__select-wrapper:nth-child(45) { z-index: 55; } .c-panel__select-wrapper:nth-child(46) { z-index: 54; } .c-panel__select-wrapper:nth-child(47) { z-index: 53; } .c-panel__select-wrapper:nth-child(48) { z-index: 52; } .c-panel__select-wrapper:nth-child(49) { z-index: 51; } .c-panel__select-wrapper:nth-child(50) { z-index: 50; } .c-panel__select-wrapper:nth-child(51) { z-index: 49; } .c-panel__select-wrapper:nth-child(52) { z-index: 48; } .c-panel__select-wrapper:nth-child(53) { z-index: 47; } .c-panel__select-wrapper:nth-child(54) { z-index: 46; } .c-panel__select-wrapper:nth-child(55) { z-index: 45; } .c-panel__select-wrapper:nth-child(56) { z-index: 44; } .c-panel__select-wrapper:nth-child(57) { z-index: 43; } .c-panel__select-wrapper:nth-child(58) { z-index: 42; } .c-panel__select-wrapper:nth-child(59) { z-index: 41; } .c-panel__select-wrapper:nth-child(60) { z-index: 40; } .c-panel__select-wrapper:nth-child(61) { z-index: 39; } .c-panel__select-wrapper:nth-child(62) { z-index: 38; } .c-panel__select-wrapper:nth-child(63) { z-index: 37; } .c-panel__select-wrapper:nth-child(64) { z-index: 36; } .c-panel__select-wrapper:nth-child(65) { z-index: 35; } .c-panel__select-wrapper:nth-child(66) { z-index: 34; } .c-panel__select-wrapper:nth-child(67) { z-index: 33; } .c-panel__select-wrapper:nth-child(68) { z-index: 32; } .c-panel__select-wrapper:nth-child(69) { z-index: 31; } .c-panel__select-wrapper:nth-child(70) { z-index: 30; } .c-panel__select-wrapper:nth-child(71) { z-index: 29; } .c-panel__select-wrapper:nth-child(72) { z-index: 28; } .c-panel__select-wrapper:nth-child(73) { z-index: 27; } .c-panel__select-wrapper:nth-child(74) { z-index: 26; } .c-panel__select-wrapper:nth-child(75) { z-index: 25; } .c-panel__select-wrapper:nth-child(76) { z-index: 24; } .c-panel__select-wrapper:nth-child(77) { z-index: 23; } .c-panel__select-wrapper:nth-child(78) { z-index: 22; } .c-panel__select-wrapper:nth-child(79) { z-index: 21; } .c-panel__select-wrapper:nth-child(80) { z-index: 20; } .c-panel__select-wrapper:nth-child(81) { z-index: 19; } .c-panel__select-wrapper:nth-child(82) { z-index: 18; } .c-panel__select-wrapper:nth-child(83) { z-index: 17; } .c-panel__select-wrapper:nth-child(84) { z-index: 16; } .c-panel__select-wrapper:nth-child(85) { z-index: 15; } .c-panel__select-wrapper:nth-child(86) { z-index: 14; } .c-panel__select-wrapper:nth-child(87) { z-index: 13; } .c-panel__select-wrapper:nth-child(88) { z-index: 12; } .c-panel__select-wrapper:nth-child(89) { z-index: 11; } .c-panel__select-wrapper:nth-child(90) { z-index: 10; } .c-panel__select-wrapper:nth-child(91) { z-index: 9; } .c-panel__select-wrapper:nth-child(92) { z-index: 8; } .c-panel__select-wrapper:nth-child(93) { z-index: 7; } .c-panel__select-wrapper:nth-child(94) { z-index: 6; } .c-panel__select-wrapper:nth-child(95) { z-index: 5; } .c-panel__select-wrapper:nth-child(96) { z-index: 4; } .c-panel__select-wrapper:nth-child(97) { z-index: 3; } .c-panel__select-wrapper:nth-child(98) { z-index: 2; } .c-panel__select-wrapper:nth-child(99) { z-index: 1; } .c-panel__select-wrapper:nth-child(100) { z-index: 0; } .c-panel__select-wrapper--disabled { border-color: #999999; color: #999999; background-color: #f3f3f6; } .c-panel__select-wrapper--loading { border-color: #dedede; } .c-panel__select-wrapper--loaded { opacity: 0; -webkit-animation: fadeIn 0.8s forwards; animation: fadeIn 0.8s forwards; } .c-panel__items { margin-bottom: -2.4rem; } .c-panel__body { padding: 2.4rem 0; } .c-panel__body .c-panel__item { margin-bottom: 1.2rem; } .c-panel__body .c-panel__item:nth-last-child(1) { margin-bottom: 0; } .c-panel__delete { margin-left: -0.5rem; padding: 0.5rem; color: #999999; cursor: pointer; } .c-panel__delete--active { transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, background-position 0.25s ease-out; } .c-panel__delete:hover .c-panel__delete--active { color: #0095db; } .c-panel__footer { border-top: 0.1rem solid #999999; padding-top: 2.4rem; } .c-panel__price { display: flex; justify-content: flex-end; min-width: 7rem; } @media screen and (min-width: 36em) { .c-panel__header--column { flex-direction: unset; } } @media screen and (min-width: 48em) { .c-panel__delete { margin-top: 0; } } /** * Footer * @path: components/footer */ .is-desktop .c-footer__item a:hover, .is-desktop .c-footer__item-anchor:hover { color: #1D4ED8; } .c-footer { background-color: #000000; color: #ffffff; padding: 2rem 0; font-size: 1.4rem; flex-shrink: 0; } .c-footer__inner { display: flex; flex-direction: column-reverse; } .c-footer__items { margin-bottom: 1.2rem; } .c-footer__item { margin-bottom: 1.2rem; } .c-footer__item a, .c-footer__item-anchor { color: #ffffff; } .c-footer__item a[target=_blank], .c-footer__item-anchor[target=_blank] { display: inline-flex; align-items: center; } .c-footer__item a[target=_blank]::after, .c-footer__item-anchor[target=_blank]::after { margin-left: 0.4rem; font-size: 1.2rem; content: ""; } @media screen and (min-width: 48em) { .c-footer__inner { flex-direction: row; justify-content: space-between; } .c-footer__items { margin-bottom: 0; } .c-footer__item { float: left; margin-left: 2.4rem; margin-bottom: 0; } } /** * Form styling * @path: components/form */ .c-form__group { display: flex; flex-direction: column; margin-bottom: 2.4rem; } .c-form__group--infix { display: flex; flex-direction: column; margin-bottom: 2.4rem; } .c-form__input { margin-top: 0.4rem; padding: 1.2rem 0.8rem; border-radius: 0.5rem; border: 0.1rem solid #999999; } .c-form__input:disabled { background-color: #f3f3f6; cursor: not-allowed; } .c-form__submit { margin-bottom: 1.2rem; } .c-form__message { margin-top: 0.6rem; margin-bottom: 0; font-size: 1.4rem; } .c-form__message--error { color: #dd4b39; } @media screen and (min-width: 36em) { .c-form__button-group { display: flex; align-items: center; } .c-form__submit { margin-bottom: 0; margin-right: 1.2rem; } } @media screen and (min-width: 48em) { .c-form--grow { display: flex; flex-direction: row; } .c-form--grow .c-form__group { flex: 1 1 0%; margin-right: 1.2rem; } .c-form--grow .c-form__group--infix { flex: 1 1 0%; flex-grow: inherit; margin-right: 1.2rem; } .c-form--grow .c-form__group:nth-last-child(1) { margin-right: 0; } } /** * Headings * @path: components/headings */ .c-hamburger { width: 2.5rem; height: 6.4rem; margin-right: 2.4rem; margin-bottom: 0.9rem; padding-left: 0; position: relative; z-index: 200; } .c-hamburger__inner { top: 2.1rem; transition: background-color 0s linear 0.13s; } .c-hamburger__inner, .c-hamburger__inner::after, .c-hamburger__inner::before { width: 2.5rem; height: 0.2rem; position: absolute; background-color: #000000; display: block; content: ""; } .c-hamburger__inner::before { top: 1rem; transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .c-hamburger__inner::after { top: 2rem; transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .c-hamburger__inner--animate { background-color: transparent; transition-delay: 0.22s; } .c-hamburger__inner--animate::before { top: 0; transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; transform: translate3d(0, 10px, 0) rotate(45deg); } .c-hamburger__inner--animate::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; transform: translate3d(0, 10px, 0) rotate(-45deg); } /** * Header * @path: components/header */ .c-header { position: fixed; width: 100%; left: 0; top: 0; z-index: 998; background-color: #ffffff; } .c-header--open { -webkit-animation: HeaderSlideIn 600ms forwards; animation: HeaderSlideIn 600ms forwards; } .c-header--close { -webkit-animation: HeaderSlideOut 600ms forwards; animation: HeaderSlideOut 600ms forwards; } @media screen and (min-width: 62em) { .c-header { background-color: transparent; } } @-webkit-keyframes HeaderSlideIn { 0% { top: -100px; } 100% { top: 0; } } @keyframes HeaderSlideIn { 0% { top: -100px; } 100% { top: 0; } } @-webkit-keyframes HeaderSlideOut { 0% { top: 0; } 100% { top: -150px; } } @keyframes HeaderSlideOut { 0% { top: 0; } 100% { top: -150px; } } /** * Headings * @path: components/headings */ /** * Creates helper classes for heading styles * * @var {Map} $headings - settings/custom * @output e.g. '.c-heading-small' */ .c-heading--xsmall { font-size: 1.6rem; } .c-heading--small { font-size: 1.8rem; } .c-heading--medium { font-size: 2.2rem; } .c-heading--large { font-size: 2.8rem; } .c-heading--xlarge { font-size: 3.6rem; } @media screen and (min-width: 48em) { .c-heading--xsmall { font-size: 1.8rem; } .c-heading--small { font-size: 2rem; } .c-heading--medium { font-size: 2.6rem; } .c-heading--large { font-size: 3.6rem; } .c-heading--xlarge { font-size: 4.6rem; } } @media screen and (min-width: 62em) { .c-heading--xsmall { font-size: 2rem; } .c-heading--small { font-size: 2.4rem; } .c-heading--medium { font-size: 3rem; } .c-heading--large { font-size: 4.4rem; } .c-heading--xlarge { font-size: 5.6rem; } } /** * Hero * @path: components/hero */ .c-hero__slide--large { height: 70vh; min-height: 58rem; } .c-hero__slide--medium { height: 50vh; } .c-hero__cards { margin-top: 3.2rem; position: relative; z-index: 5; } .c-hero--featured { padding-top: 3.2rem; padding-bottom: 3.2rem; position: relative; z-index: 1; overflow: hidden; } .c-hero--featured .c-hero__swirl--small { position: absolute; z-index: -1; top: 0; left: 0; } .c-hero--featured .c-hero__swirl--large { position: absolute; z-index: -1; right: -14.7rem; bottom: 0; } .c-hero--featured .c-hero__image { margin-top: 3.2rem; } .c-hero .c-swiper-slider { margin-top: 3.2rem; } @media screen and (min-width: 48em) { .c-hero__cards { margin-top: -10rem; } .c-hero--featured { padding-top: 4.8rem; padding-bottom: 15.6rem; } .c-hero--featured.c-hero--slider { padding-bottom: 4.8rem; } .c-hero--featured .c-hero__swirl--large { right: 0; } .c-hero .c-swiper-slider { margin-top: 4.8rem; } } @media screen and (min-width: 62em) { .c-hero--featured { overflow: visible; } .c-hero--featured .c-hero__content { padding-right: 4.8rem; } .c-hero--featured .c-hero__title { font-size: 4rem; } .c-hero--featured .c-hero__swirl--large { right: auto; left: 29.667%; bottom: 0; } } @media screen and (min-width: 75em) { .c-hero--featured { padding-top: 11.2rem; } .c-hero--featured.c-hero--slider { padding-bottom: 4.8rem; } .c-hero--featured .c-hero__image { margin-top: -16.8rem; } } /** * Icon styling * @path: components/icon * @cheatsheet: https://fontawesome.com/icons?d=gallery&q=&s=brands,regular,solid * */ @font-face { font-family: "fa-light-300"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/font-awesome/fa-light-300.otf") format("opentype"); } @font-face { font-family: "fa-regular-400"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/font-awesome/fa-regular-400.otf") format("opentype"); } .c-nav__anchor[target=_blank]::after, .c-link[target=_blank]::after, .far, .fal, .c-footer__item a[target=_blank]::after, .c-footer__item-anchor[target=_blank]::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .c-nav__anchor[target=_blank]::after, .c-link[target=_blank]::after, .fal, .c-footer__item a[target=_blank]::after, .c-footer__item-anchor[target=_blank]::after { font-family: "fa-light-300"; } .far { font-family: "fa-regular-400"; } .fa-arrow-left::before { content: ""; } .fa-arrow-right::before { content: ""; } .fa-arrow-up-right-from-square::before { content: ""; } .fa-bin::before { content: ""; } .fa-check::before { content: ""; } .fa-chevron-down::before { content: ""; } .fa-chevron-right::before { content: ""; } .fa-chevron-up::before { content: ""; } .fa-location::before { content: ""; } .fa-preview::before { content: ""; } .fa-times::before { content: ""; } .fa-user::before { content: ""; } .fa-triangle-exclamation::before { content: ""; } .icon-user { background-image: url("/images/frontend/icon/user.svg"); background-repeat: no-repeat; display: block; width: 1.6rem; height: 1.8rem; margin-top: -0.2rem; } .c-icon__arrow-right { background-image: url("/images/frontend/icon/arrow-right.svg"); background-repeat: no-repeat; background-position: center; display: block; width: 1.6rem; height: 1.6rem; } .c-icon__arrow-right--black { background-image: url("/images/frontend/icon/arrow-right-black.svg"); } .c-icon__arrow-right--tertiary { background-image: url("/images/frontend/icon/arrow-right-blue.svg"); } .c-icon__arrow-left { background-image: url("/images/frontend/icon/arrow-left.svg"); background-repeat: no-repeat; background-position: center; display: block; width: 1.6rem; height: 1.6rem; } .c-icon__arrow-left--black { background-image: url("/images/frontend/icon/arrow-left-black.svg"); } .c-icon__arrow-left--tertiary { background-image: url("/images/frontend/icon/arrow-left-blue.svg"); } /** * Image * @path: components/image */ .c-image__slide { height: 35rem; width: 100% !important; } .c-image__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.2rem; } .c-image--margin { margin-bottom: 1.6rem; } @media screen and (min-width: 48em) { .c-image__slide { height: 50rem; } .c-image--margin { margin-bottom: 0; } } /** * Link * @path: components/link */ .c-link { transition: color 0.25s ease-out; } .c-link:hover { transition: color 0.25s ease-out; color: #0095db; text-decoration: underline; } .c-link[target=_blank] { display: inline-flex; align-items: center; } .c-link[target=_blank]::after { margin-left: 0.4rem; font-size: 1.2rem; content: ""; } /** * Loader * @path: components/loader */ .c-loader { color: #000000; display: block; position: relative; width: 100%; } .c-loader::after, .c-loader::before { content: ""; box-sizing: border-box; position: absolute; } .c-loader.is-xsmall { width: 1.6rem; height: 1.6rem; } .c-loader.is-xsmall .c-loader__inner::after, .c-loader.is-xsmall .c-loader__inner::before { width: 0.8rem; height: 0.8rem; } .c-loader.is-xsmall .c-loader__inner::before { top: calc(50% - 0.8rem); left: calc(50% - 0.8rem); } .c-loader__inner::after, .c-loader__inner::before { content: ""; box-sizing: border-box; position: absolute; width: 2.4rem; height: 2.4rem; background-color: #000000; } .c-loader__inner::after { top: 50%; left: 50%; -webkit-animation: blockAnimationAfter 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; animation: blockAnimationAfter 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } .c-loader__inner::before { top: calc(50% - 2.4rem); left: calc(50% - 2.4rem); -webkit-animation: blockAnimationBefore 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; animation: blockAnimationBefore 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } @-webkit-keyframes blockAnimationBefore { 0%, 100% { transform: none; } 25% { transform: translateX(100%); } 50% { transform: translateX(100%) translateY(100%); } 75% { transform: translateY(100%); } } @keyframes blockAnimationBefore { 0%, 100% { transform: none; } 25% { transform: translateX(100%); } 50% { transform: translateX(100%) translateY(100%); } 75% { transform: translateY(100%); } } @-webkit-keyframes blockAnimationAfter { 0%, 100% { transform: none; } 25% { transform: translateX(-100%); } 50% { transform: translateX(-100%) translateY(-100%); } 75% { transform: translateY(-100%); } } @keyframes blockAnimationAfter { 0%, 100% { transform: none; } 25% { transform: translateX(-100%); } 50% { transform: translateX(-100%) translateY(-100%); } 75% { transform: translateY(-100%); } } /** * Navigation * @path: components/nav */ .is-desktop .c-nav__anchor:hover, .is-desktop .c-nav__anchor:focus { color: #1D4ED8; } .c-nav { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .c-nav__bar { height: 8rem; border-radius: 1.2rem; z-index: 99; background-color: #ffffff; } .c-nav__logo { width: 9.8rem; height: 4rem; } .c-nav__items { margin-left: 2.4rem; display: flex; -moz-column-gap: 1.6rem; column-gap: 1.6rem; } .c-nav__items--secondary { margin-left: auto; } .c-nav__icon { width: 2rem; height: 2rem; } .c-nav__item { transition: color 0.25s ease-out; } .c-nav__item--active .c-nav__anchor { font-weight: 900; color: #1D4ED8; } .c-nav__item--drawer { float: none; margin-bottom: 1.6rem; font-size: 2rem; } .c-nav__anchor { color: #000000; } .c-nav__anchor[target=_blank] { display: inline-flex; align-items: center; } .c-nav__anchor[target=_blank]::after { margin-left: 0.4rem; font-size: 1.408rem; content: ""; } .c-nav__drawer { position: absolute; width: 100%; height: 100vh; right: 0; top: 0; padding-top: 12rem; background-color: #ffffff; z-index: -1; visibility: hidden; } .c-nav__drawer--open { visibility: visible; -webkit-animation: navDrawerSlideIn 600ms forwards; animation: navDrawerSlideIn 600ms forwards; } .c-nav__drawer--close { visibility: visible; -webkit-animation: navDrawerSlideOut 600ms forwards; animation: navDrawerSlideOut 600ms forwards; } .c-nav__drawer .c-nav__items { flex-direction: column; } .c-nav__shopping-cart-icon { background-image: url("/images/frontend/icon/cart.svg"); background-repeat: no-repeat; background-size: contain; display: block; width: 2rem; height: 2rem; } .c-nav__shopping-cart:hover .c-nav__shopping-cart-icon { background-image: url("/images/frontend/icon/cart_blue.svg"); background-repeat: no-repeat; background-size: contain; } .c-nav__counter { position: absolute; color: #ffffff; top: -1.2rem; right: -1.2rem; background-color: #1D4ED8; border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 900; border: 0.1rem solid #ffffff; } @media screen and (min-width: 62em) { .c-nav { box-shadow: none; margin-top: 1.6rem; } .c-nav__bar { padding: 0 2.4rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } } @-webkit-keyframes navDrawerSlideIn { 0% { right: 100%; } 100% { right: 0; } } @keyframes navDrawerSlideIn { 0% { right: 100%; } 100% { right: 0; } } @-webkit-keyframes navDrawerSlideOut { 0% { right: 0; } 100% { right: 100%; } } @keyframes navDrawerSlideOut { 0% { right: 0; } 100% { right: 100%; } } /** * Overlay * @path: components/overlay */ .c-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; } .c-overlay--open { display: flex; } /** * Custom radio buttons * @path: components/radio */ .c-radio { display: flex; align-items: center; padding-bottom: 2.4rem; } .c-radio__label { padding: 1rem; border: 0.1rem solid #000000; border-radius: 0.5rem; margin-right: 2.4rem; cursor: pointer; } .c-radio__label:hover { background-color: #000000; color: #ffffff; } .c-radio__label--disabled { pointer-events: none; opacity: 0.4; } .c-radio__inner { display: none; } .c-radio__inner:checked + .c-radio__label { background-color: #0095db; border-color: #0095db; color: #ffffff; } /** * Summary * @path: components/summary */ .c-summary__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 2.4rem; border-bottom: 0.1rem solid #000000; } .c-summary__footer { padding: 2.4rem 0; text-align: right; } .c-summary__item { padding: 2.4rem 0; display: flex; flex-direction: column; border-bottom: 0.1rem solid #000000; } .c-summary__item-inner { margin-bottom: 2.4rem; } @media screen and (min-width: 48em) { .c-summary__item { flex-direction: row; justify-content: space-between; align-items: center; } .c-summary__item--column { flex-direction: column; align-items: unset; justify-content: unset; } .c-summary__item-inner { margin-bottom: 0; } } /** * Switch * @path: components/switch */ .c-switch { position: relative; display: inline-block; width: 3rem; height: 1.7rem; } .c-switch input { opacity: 0; width: 0; height: 0; } .c-switch input:checked + .c-switch__slider { background-color: #0095db; } .c-switch input:checked + .c-switch__slider:before { transform: translateX(1.3rem); } .c-switch__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #dedede; transition: 0.4s; border-radius: 1.7rem; } .c-switch__slider:before { position: absolute; content: ""; height: 1.3rem; width: 1.3rem; left: 0.2rem; bottom: 0.2rem; background-color: #ffffff; transition: 0.4s; border-radius: 50%; } /** * Widget * @path: components/widget */ .c-widget { display: flex; justify-content: center; } @media screen and (min-width: 62em) { .c-widget { justify-content: flex-end; } } /** * Colors * @path: utilities/colors * ---------------------- * * Table of Contents: * * 1. Colors */ /** * Creates helper classes for colors * * @var {Map} $foundation-palette - settings/foundation * @output e.g. '.u-color-primary' */ .u-color-primary { color: #0095db !important; } .u-color-hover-primary:hover { color: #0095db; } .u-bg-primary { background-color: #0095db !important; } .u-fill-primary { fill: #0095db !important; } .u-color-secondary { color: #3c0099 !important; } .u-color-hover-secondary:hover { color: #3c0099; } .u-bg-secondary { background-color: #3c0099 !important; } .u-fill-secondary { fill: #3c0099 !important; } .u-color-tertiary { color: #1D4ED8 !important; } .u-color-hover-tertiary:hover { color: #1D4ED8; } .u-bg-tertiary { background-color: #1D4ED8 !important; } .u-fill-tertiary { fill: #1D4ED8 !important; } .u-color-success { color: #46973a !important; } .u-color-hover-success:hover { color: #46973a; } .u-bg-success { background-color: #46973a !important; } .u-fill-success { fill: #46973a !important; } .u-color-warning { color: #f39c12 !important; } .u-color-hover-warning:hover { color: #f39c12; } .u-bg-warning { background-color: #f39c12 !important; } .u-fill-warning { fill: #f39c12 !important; } .u-color-alert { color: #dd4b39 !important; } .u-color-hover-alert:hover { color: #dd4b39; } .u-bg-alert { background-color: #dd4b39 !important; } .u-fill-alert { fill: #dd4b39 !important; } .u-color-info { color: #2199e8 !important; } .u-color-hover-info:hover { color: #2199e8; } .u-bg-info { background-color: #2199e8 !important; } .u-fill-info { fill: #2199e8 !important; } .u-color-light-gray { color: #f3f3f6 !important; } .u-color-hover-light-gray:hover { color: #f3f3f6; } .u-bg-light-gray { background-color: #f3f3f6 !important; } .u-fill-light-gray { fill: #f3f3f6 !important; } .u-color-dark-gray { color: #999999 !important; } .u-color-hover-dark-gray:hover { color: #999999; } .u-bg-dark-gray { background-color: #999999 !important; } .u-fill-dark-gray { fill: #999999 !important; } .u-color-black { color: #000000 !important; } .u-color-hover-black:hover { color: #000000; } .u-bg-black { background-color: #000000 !important; } .u-fill-black { fill: #000000 !important; } .u-color-white { color: #ffffff !important; } .u-color-hover-white:hover { color: #ffffff; } .u-bg-white { background-color: #ffffff !important; } .u-fill-white { fill: #ffffff !important; } .u-bg-gradient { background: linear-gradient(-135deg, #0095db 10%, #3c0099 100%); } /** * Cursor * @path: utilities/cursor */ .u-cursor-pointer { cursor: pointer; } /** * Dimensions * @path: utilities/dimension */ .u-full-width { width: 100%; } .u-max-w-xl { max-width: 140rem; margin: 0 auto; } .u-full-height { height: 100%; } /** * Overflow * @path: utilities/overflow */ .u-overflow-hidden { overflow: hidden; } .u-overflow-x-hidden { overflow-x: hidden; } /** * Position * @path: utilities/position */ .u-relative { position: relative; } .u-z-1 { z-index: 1; } /** * Rounded * @path: utilities/rounded */ .u-rounded-md { border-radius: 1.2rem; } @media screen and (min-width: 87.5em) { .u-xl-rounded-md { border-radius: 1.2rem; } } /** * Scroll helper classes * @path: utilities/scroll */ .u-disable-scroll { width: 100%; overflow: hidden; position: fixed; } /** * Horizontal and vertical spacing * @path: utilities/spacing */ /** * Create helpers classes for top and bottom padding of elements * * @var {Map} $v-spacing - settings/custom * @var {List} $spacing-type - determines for which spacing types the classes should be created * @output e.g. '.u-padding-top-small' */ .u-margin-vertical-xsmall { margin-top: .8rem; margin-bottom: .8rem; } .u-margin-top-xsmall { margin-top: .8rem; } .u-margin-bottom-xsmall { margin-bottom: .8rem; } .u-margin-left-xsmall { margin-left: .8rem; } .u-margin-right-xsmall { margin-right: .8rem; } .u-margin-vertical-small { margin-top: 1.6rem; margin-bottom: 1.6rem; } .u-margin-top-small { margin-top: 1.6rem; } .u-margin-bottom-small { margin-bottom: 1.6rem; } .u-margin-left-small { margin-left: 1.6rem; } .u-margin-right-small { margin-right: 1.6rem; } .u-margin-vertical-medium { margin-top: 3.2rem; margin-bottom: 3.2rem; } .u-margin-top-medium { margin-top: 3.2rem; } .u-margin-bottom-medium { margin-bottom: 3.2rem; } .u-margin-left-medium { margin-left: 3.2rem; } .u-margin-right-medium { margin-right: 3.2rem; } .u-margin-vertical-large { margin-top: 4rem; margin-bottom: 4rem; } .u-margin-top-large { margin-top: 4rem; } .u-margin-bottom-large { margin-bottom: 4rem; } .u-margin-left-large { margin-left: 4rem; } .u-margin-right-large { margin-right: 4rem; } .u-margin-vertical-xlarge { margin-top: 12rem; margin-bottom: 12rem; } .u-margin-top-xlarge { margin-top: 12rem; } .u-margin-bottom-xlarge { margin-bottom: 12rem; } .u-margin-left-xlarge { margin-left: 12rem; } .u-margin-right-xlarge { margin-right: 12rem; } .u-padding-vertical-xsmall { padding-top: .8rem; padding-bottom: .8rem; } .u-padding-top-xsmall { padding-top: .8rem; } .u-padding-bottom-xsmall { padding-bottom: .8rem; } .u-padding-left-xsmall { padding-left: .8rem; } .u-padding-right-xsmall { padding-right: .8rem; } .u-padding-vertical-small { padding-top: 1.6rem; padding-bottom: 1.6rem; } .u-padding-top-small { padding-top: 1.6rem; } .u-padding-bottom-small { padding-bottom: 1.6rem; } .u-padding-left-small { padding-left: 1.6rem; } .u-padding-right-small { padding-right: 1.6rem; } .u-padding-vertical-medium { padding-top: 3.2rem; padding-bottom: 3.2rem; } .u-padding-top-medium { padding-top: 3.2rem; } .u-padding-bottom-medium { padding-bottom: 3.2rem; } .u-padding-left-medium { padding-left: 3.2rem; } .u-padding-right-medium { padding-right: 3.2rem; } .u-padding-vertical-large { padding-top: 4rem; padding-bottom: 4rem; } .u-padding-top-large { padding-top: 4rem; } .u-padding-bottom-large { padding-bottom: 4rem; } .u-padding-left-large { padding-left: 4rem; } .u-padding-right-large { padding-right: 4rem; } .u-padding-vertical-xlarge { padding-top: 12rem; padding-bottom: 12rem; } .u-padding-top-xlarge { padding-top: 12rem; } .u-padding-bottom-xlarge { padding-bottom: 12rem; } .u-padding-left-xlarge { padding-left: 12rem; } .u-padding-right-xlarge { padding-right: 12rem; } @media screen and (min-width: 48em) { .u-margin-vertical-small { margin-top: 2rem; margin-bottom: 2rem; } .u-margin-top-small { margin-top: 2rem; } .u-margin-bottom-small { margin-bottom: 2rem; } .u-margin-left-small { margin-left: 2rem; } .u-margin-right-small { margin-right: 2rem; } .u-margin-vertical-medium { margin-top: 4rem; margin-bottom: 4rem; } .u-margin-top-medium { margin-top: 4rem; } .u-margin-bottom-medium { margin-bottom: 4rem; } .u-margin-left-medium { margin-left: 4rem; } .u-margin-right-medium { margin-right: 4rem; } .u-margin-vertical-large { margin-top: 7.2rem; margin-bottom: 7.2rem; } .u-margin-top-large { margin-top: 7.2rem; } .u-margin-bottom-large { margin-bottom: 7.2rem; } .u-margin-left-large { margin-left: 7.2rem; } .u-margin-right-large { margin-right: 7.2rem; } .u-padding-vertical-small { padding-top: 2rem; padding-bottom: 2rem; } .u-padding-top-small { padding-top: 2rem; } .u-padding-bottom-small { padding-bottom: 2rem; } .u-padding-left-small { padding-left: 2rem; } .u-padding-right-small { padding-right: 2rem; } .u-padding-vertical-medium { padding-top: 4rem; padding-bottom: 4rem; } .u-padding-top-medium { padding-top: 4rem; } .u-padding-bottom-medium { padding-bottom: 4rem; } .u-padding-left-medium { padding-left: 4rem; } .u-padding-right-medium { padding-right: 4rem; } .u-padding-vertical-large { padding-top: 7.2rem; padding-bottom: 7.2rem; } .u-padding-top-large { padding-top: 7.2rem; } .u-padding-bottom-large { padding-bottom: 7.2rem; } .u-padding-left-large { padding-left: 7.2rem; } .u-padding-right-large { padding-right: 7.2rem; } } @media screen and (min-width: 62em) { .u-margin-vertical-small { margin-top: 2.4rem; margin-bottom: 2.4rem; } .u-margin-top-small { margin-top: 2.4rem; } .u-margin-bottom-small { margin-bottom: 2.4rem; } .u-margin-left-small { margin-left: 2.4rem; } .u-margin-right-small { margin-right: 2.4rem; } .u-margin-vertical-medium { margin-top: 4.8rem; margin-bottom: 4.8rem; } .u-margin-top-medium { margin-top: 4.8rem; } .u-margin-bottom-medium { margin-bottom: 4.8rem; } .u-margin-left-medium { margin-left: 4.8rem; } .u-margin-right-medium { margin-right: 4.8rem; } .u-margin-vertical-xlarge { margin-top: 13.6rem; margin-bottom: 13.6rem; } .u-margin-top-xlarge { margin-top: 13.6rem; } .u-margin-bottom-xlarge { margin-bottom: 13.6rem; } .u-margin-left-xlarge { margin-left: 13.6rem; } .u-margin-right-xlarge { margin-right: 13.6rem; } .u-padding-vertical-small { padding-top: 2.4rem; padding-bottom: 2.4rem; } .u-padding-top-small { padding-top: 2.4rem; } .u-padding-bottom-small { padding-bottom: 2.4rem; } .u-padding-left-small { padding-left: 2.4rem; } .u-padding-right-small { padding-right: 2.4rem; } .u-padding-vertical-medium { padding-top: 4.8rem; padding-bottom: 4.8rem; } .u-padding-top-medium { padding-top: 4.8rem; } .u-padding-bottom-medium { padding-bottom: 4.8rem; } .u-padding-left-medium { padding-left: 4.8rem; } .u-padding-right-medium { padding-right: 4.8rem; } .u-padding-vertical-xlarge { padding-top: 13.6rem; padding-bottom: 13.6rem; } .u-padding-top-xlarge { padding-top: 13.6rem; } .u-padding-bottom-xlarge { padding-bottom: 13.6rem; } .u-padding-left-xlarge { padding-left: 13.6rem; } .u-padding-right-xlarge { padding-right: 13.6rem; } } @media screen and (min-width: 75em) { .u-margin-vertical-xlarge { margin-top: 16.8rem; margin-bottom: 16.8rem; } .u-margin-top-xlarge { margin-top: 16.8rem; } .u-margin-bottom-xlarge { margin-bottom: 16.8rem; } .u-margin-left-xlarge { margin-left: 16.8rem; } .u-margin-right-xlarge { margin-right: 16.8rem; } .u-padding-vertical-xlarge { padding-top: 16.8rem; padding-bottom: 16.8rem; } .u-padding-top-xlarge { padding-top: 16.8rem; } .u-padding-bottom-xlarge { padding-bottom: 16.8rem; } .u-padding-left-xlarge { padding-left: 16.8rem; } .u-padding-right-xlarge { padding-right: 16.8rem; } } .u-padding-top-xxlarge { padding-top: 12rem; } @media screen and (min-width: 62em) { .u-lg-no-padding-right { padding-right: 0 !important; } .u-lg-no-padding-left { padding-left: 0 !important; } .u-padding-top-xxlarge { padding-top: 15rem !important; } } @media screen and (min-width: 75em) { .u-xl-padding-top-small { padding-top: 2.4rem !important; } } /** * Creates spacing classes that apply from the breakpoint they're named after * * @var {List} $spacing-type - determines for which spacing types the classes should be created * @output e.g. '.u-no-small-padding-top' */ .u-no-margin-left { margin-left: 0 !important; } .u-no-margin-top { margin-top: 0 !important; } .u-no-margin-bottom { margin-bottom: 0 !important; } .u-no-margin { margin: 0 !important; } .u-no-padding-top { padding-top: 0 !important; } .u-no-padding-right { padding-right: 0 !important; } .u-no-padding-bottom { padding-bottom: 0 !important; } .u-no-padding-left { padding-left: 0 !important; } .u-padding-top-header { padding-top: 8rem; } /** * Typography * @path: utilities/typography * * 1. Alignment * 2. Sizes * 3. Font weights * 4. Font decoration * */ .u-text-left { text-align: left; } .u-text-right { text-align: right; } .u-text-center { text-align: center; } .u-text-justify { text-align: justify; } @media screen and (min-width: 36em) { .u-sm-text-left { text-align: left; } .u-sm-text-right { text-align: right; } .u-sm-text-center { text-align: center; } .u-sm-text-justify { text-align: justify; } } @media screen and (min-width: 48em) { .u-md-text-left { text-align: left; } .u-md-text-right { text-align: right; } .u-md-text-center { text-align: center; } .u-md-text-justify { text-align: justify; } } @media screen and (min-width: 62em) { .u-lg-text-left { text-align: left; } .u-lg-text-right { text-align: right; } .u-lg-text-center { text-align: center; } .u-lg-text-justify { text-align: justify; } } @media screen and (min-width: 75em) { .u-xl-text-left { text-align: left; } .u-xl-text-right { text-align: right; } .u-xl-text-center { text-align: center; } .u-xl-text-justify { text-align: justify; } } @media screen and (min-width: 87.5em) { .u-xxl-text-left { text-align: left; } .u-xxl-text-right { text-align: right; } .u-xxl-text-center { text-align: center; } .u-xxl-text-justify { text-align: justify; } } .u-font-small { font-size: 1.2rem; } .u-font-base { font-size: 1.6rem; } .u-font-medium { font-size: 2rem; } .u-font-large { font-size: 2.4rem; } .u-font-weight-regular { font-weight: 400; } .u-font-weight-bold { font-weight: 700; } .u-font-line-through { text-decoration: line-through; } .u-break-word { word-break: break-word; } /** * Visibility * @path: utilities/visibility */ .u-show-for-xs { display: none !important; } .u-hide-for-xs { display: none !important; } @media screen and (max-width: 35.99875em) { .u-show-for-sm { display: none !important; } } @media screen and (min-width: 36em) { .u-hide-for-sm { display: none !important; } } @media screen and (max-width: 47.99875em) { .u-show-for-md { display: none !important; } } @media screen and (min-width: 48em) { .u-hide-for-md { display: none !important; } } @media screen and (max-width: 61.99875em) { .u-show-for-lg { display: none !important; } } @media screen and (min-width: 62em) { .u-hide-for-lg { display: none !important; } } @media screen and (max-width: 74.99875em) { .u-show-for-xl { display: none !important; } } @media screen and (min-width: 75em) { .u-hide-for-xl { display: none !important; } } @media screen and (max-width: 87.49875em) { .u-show-for-xxl { display: none !important; } } @media screen and (min-width: 87.5em) { .u-hide-for-xxl { display: none !important; } } .u-hidden { visibility: hidden; } /** * Swiper 11.1.15 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 18, 2024 */ @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 { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { 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 { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { 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: ""; flex-shrink: 0; 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: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { 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: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { 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; transform-origin: 50%; 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% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ :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: flex; align-items: 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; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { 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 */ :root { /* --swiper-scrollbar-border-radius: 10px; --swiper-scrollbar-top: auto; --swiper-scrollbar-bottom: 4px; --swiper-scrollbar-left: auto; --swiper-scrollbar-right: 4px; --swiper-scrollbar-sides-offset: 1%; --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1); --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5); --swiper-scrollbar-size: 4px; */ } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } /** * Swiper * @path: vender/swiper/main */ .is-desktop .c-swiper swiper-container:hover::after, .is-desktop .c-swiper swiper-container:hover::before { opacity: 0; } .is-desktop .c-swiper .c-swiper__arrow-prev:hover ~ swiper-container::after, .is-desktop .c-swiper .c-swiper__arrow-prev:hover ~ swiper-container::before, .is-desktop .c-swiper .c-swiper__arrow-next:hover ~ swiper-container::after, .is-desktop .c-swiper .c-swiper__arrow-next:hover ~ swiper-container::before { opacity: 0; } swiper-container::part(container) { padding-bottom: 2.4rem; overflow: visible; } swiper-container { --swiper-scrollbar-sides-offset: 1px; height: calc(100% - 2.4rem); position: relative; z-index: 1; } swiper-container::after, swiper-container::before { width: 100vw; height: 100%; position: absolute; z-index: 10; top: 0; transition: opacity 0.3s ease-in-out; content: ""; } swiper-container::after { left: 100%; } swiper-container::before { right: 100%; } swiper-container:hover::after, swiper-container:hover::before { opacity: 0; } .c-swiper__arrow-next, .c-swiper__arrow-prev { width: 4.8rem; height: 4.8rem; position: absolute; z-index: 15; top: 50%; transform: translateY(-50%); display: none; justify-content: center; align-items: center; background-color: #ffffff; border: 0.1rem solid #000000; border-radius: 10rem; cursor: pointer; opacity: 1; visibility: visible; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } .c-swiper__arrow-next.is-hidden, .c-swiper__arrow-prev.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .c-swiper__arrow-next { right: -1.2rem; } .c-swiper__arrow-prev { left: -1.2rem; } .c-swiper-slider.u-bg-light-gray swiper-container::after, .c-swiper-slider.u-bg-light-gray swiper-container::before { background: #f3f3f6; } .c-swiper-slider swiper-container::after, .c-swiper-slider swiper-container::before { background: #ffffff; } swiper-slide { height: 100%; } @media screen and (min-width: 48em) { swiper-container::part(container) { padding-bottom: 4rem; } swiper-container { height: calc(100% - 4rem); } } @media screen and (min-width: 87.5em) { .c-swiper__arrow-next, .c-swiper__arrow-prev { display: flex; } } /** * Vue datepicker overrides * @path: vendor/vue-datepicker */ /** * Datepicker naming override * https://vue3datepicker.com/customization/scss/ * @path: settings/datepicker */ .dp__input_wrap { position: relative; width: 100%; box-sizing: unset; } .dp__input_wrap:focus { border-color: var(--dp-border-color-hover); outline: none; } .dp__input { background-color: var(--dp-background-color); border-radius: 4px; font-family: Arial, Helvetica, sans-serif; border: 1px solid var(--dp-border-color); outline: none; transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; font-size: 1.2rem; line-height: 1.8rem; padding: 6px 12px; color: var(--dp-text-color); box-sizing: border-box; } .dp__input::-moz-placeholder { opacity: 0.7; } .dp__input::placeholder { opacity: 0.7; } .dp__input:hover { border-color: var(--dp-border-color-hover); } .dp__input_reg { caret-color: transparent; } .dp__input_focus { border-color: var(--dp-border-color-hover); } .dp__disabled { background: var(--dp-disabled-color); } .dp__disabled::-moz-placeholder { color: var(--dp-disabled-color-text); } .dp__disabled::placeholder { color: var(--dp-disabled-color-text); } .dp__input_icons { display: inline-block; width: 1.2rem; height: 1.2rem; stroke-width: 0; font-size: 1.2rem; line-height: 1.8rem; padding: 6px 12px; color: var(--dp-icon-color); box-sizing: content-box; } .dp__input_icon { cursor: pointer; position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--dp-icon-color); } .dp__clear_icon { position: absolute; top: 50%; right: 0; transform: translateY(-50%); cursor: pointer; color: var(--dp-icon-color); } .dp__input_icon_pad { padding-left: 35px; } .dp__input_valid { box-shadow: 0 0 4px var(--dp-success-color); border-color: var(--dp-success-color); } .dp__input_valid:hover { border-color: var(--dp-success-color); } .dp__input_invalid { box-shadow: 0 0 4px var(--dp-danger-color); border-color: var(--dp-danger-color); } .dp__input_invalid:hover { border-color: var(--dp-danger-color); } .dp__menu { position: absolute; background: var(--dp-background-color); border-radius: 4px; min-width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: 1px solid var(--dp-menu-border-color); box-sizing: border-box; } .dp__menu::after { box-sizing: border-box; } .dp__menu::before { box-sizing: border-box; } .dp__menu:focus { border: 1px solid var(--dp-menu-border-color); outline: none; } .dp__menu_index { z-index: 99999; } .dp__menu_readonly, .dp__menu_disabled { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .dp__menu_disabled { background: rgba(255, 255, 255, 0.5); cursor: not-allowed; } .dp__menu_readonly { background: transparent; cursor: default; } .dp__arrow_top { left: 50%; top: -1px; height: 12px; width: 12px; background-color: var(--dp-background-color); position: absolute; border-left: 1px solid var(--dp-menu-border-color); border-top: 1px solid var(--dp-menu-border-color); transform: translate(-50%, -50%) rotate(45deg); } .dp__arrow_bottom { left: 50%; bottom: -1px; height: 12px; width: 12px; background-color: var(--dp-background-color); position: absolute; border-right: 1px solid var(--dp-menu-border-color); border-bottom: 1px solid var(--dp-menu-border-color); transform: translate(-50%, 50%) rotate(45deg); } .dp__now_wrap { text-align: center; padding: 2px 0; } .dp__now_button { border: 1px solid var(--dp-primary-color); color: var(--dp-primary-color); padding: 0 4px; font-weight: bold; border-radius: 4px; font-size: 1.2rem; cursor: pointer; background: transparent; } .dp__preset_ranges { padding: 5px; border-right: 1px solid var(--dp-border-color); } .dp__preset_range { padding: 5px; } .dp__preset_range:hover { background-color: var(--dp-hover-color); cursor: pointer; } .dp__menu_content_wrapper { display: flex; } .dp__calendar_wrap { display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: Arial, Helvetica, sans-serif; flex: 0; } .dp__calendar_header { position: relative; display: flex; justify-content: center; align-items: center; color: var(--dp-text-color); white-space: nowrap; font-weight: bold; } .dp__calendar_header_item { text-align: center; flex-grow: 1; height: 35px; padding: 5px; width: 35px; box-sizing: border-box; } .dp__calendar_row { display: flex; justify-content: center; align-items: center; margin: 5px 0; } .dp__calendar_item { text-align: center; flex-grow: 1; box-sizing: border-box; color: var(--dp-text-color); } .dp__calendar { position: relative; } .dp__calendar_header_cell { border-bottom: thin solid var(--dp-border-color); padding: 0.5rem; } .dp__cell_inner { display: flex; align-items: center; text-align: center; justify-content: center; border-radius: 4px; height: 35px; padding: 5px; width: 35px; border: 1px solid transparent; box-sizing: border-box; position: relative; } .dp__cell_auto_range_start, .dp__date_hover_start:hover, .dp__range_start { border-bottom-right-radius: 0; border-top-right-radius: 0; } .dp__cell_auto_range_end, .dp__date_hover_end:hover, .dp__range_end { border-bottom-left-radius: 0; border-top-left-radius: 0; } .dp__range_end, .dp__range_start, .dp__active_date { background: var(--dp-primary-color); color: var(--dp-primary-text-color); } .dp__cell_auto_range_end, .dp__cell_auto_range_start { border-top: 1px dashed var(--dp-primary-color); border-bottom: 1px dashed var(--dp-primary-color); } .dp__date_hover_end:hover, .dp__date_hover_start:hover, .dp__date_hover:hover { background: var(--dp-hover-color); color: var(--dp-hover-text-color); } .dp__cell_offset { color: var(--dp-secondary-color); } .dp__cell_disabled { color: var(--dp-secondary-color); cursor: not-allowed; } .dp__range_between { background: var(--dp-hover-color); border-radius: 0; border-top: 1px solid var(--dp-hover-color); border-bottom: 1px solid var(--dp-hover-color); } .dp__range_between_week { background: var(--dp-primary-color); color: var(--dp-primary-text-color); border-radius: 0; border-top: 1px solid var(--dp-primary-color); border-bottom: 1px solid var(--dp-primary-color); } .dp__today { border: 1px solid var(--dp-primary-color); } .dp__week_num { color: var(--dp-secondary-color); text-align: center; } .dp__cell_auto_range { border-radius: 0; border-top: 1px dashed var(--dp-primary-color); border-bottom: 1px dashed var(--dp-primary-color); } .dp__cell_auto_range_start { border-left: 1px dashed var(--dp-primary-color); } .dp__cell_auto_range_end { border-right: 1px dashed var(--dp-primary-color); } .dp__calendar_header_separator { width: 100%; height: 1px; background: var(--dp-border-color); } .dp__calendar_next { margin-left: 10px; } .dp__marker_line, .dp__marker_dot { height: 5px; background-color: var(--dp-marker-color); position: absolute; bottom: 0; } .dp__marker_dot { width: 5px; border-radius: 50%; left: 50%; transform: translateX(-50%); } .dp__marker_line { width: 100%; left: 0; } .dp__marker_tooltip { position: absolute; border-radius: 4px; background-color: var(--dp-tooltip-color); padding: 5px; border: 1px solid var(--dp-border-color); z-index: 99999; box-sizing: border-box; cursor: default; } .dp__tooltip_content { white-space: nowrap; } .dp__tooltip_text { display: flex; align-items: center; flex-flow: row nowrap; color: var(--dp-text-color); } .dp__tooltip_mark { height: 5px; width: 5px; border-radius: 50%; background-color: var(--dp-text-color); color: var(--dp-text-color); margin-right: 5px; } .dp__arrow_bottom_tp { left: 50%; bottom: 0; height: 8px; width: 8px; background-color: var(--dp-tooltip-color); position: absolute; border-right: 1px solid var(--dp-border-color); border-bottom: 1px solid var(--dp-border-color); transform: translate(-50%, 50%) rotate(45deg); } .dp__instance_calendar { position: relative; } @media only screen and (max-width: 600px) { .dp__flex_display { flex-direction: column; } } .dp__cell_highlight { background-color: var(--dp-highlight-color); } .dp__month_year_row { display: flex; align-items: center; height: 35px; color: var(--dp-text-color); box-sizing: border-box; } .dp__inner_nav { display: flex; align-items: center; justify-content: center; cursor: pointer; height: 25px; width: 25px; color: var(--dp-icon-color); text-align: center; border-radius: 50%; } .dp__inner_nav svg { height: 20px; width: 20px; } .dp__inner_nav:hover { background: var(--dp-hover-color); color: var(--dp-hover-icon-color); } .dp__inner_nav_disabled:hover, .dp__inner_nav_disabled { background: var(--dp-disabled-color); color: var(--dp-disabled-color-text); cursor: not-allowed; } .dp__month_year_select { width: 50%; text-align: center; cursor: pointer; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 4px; box-sizing: border-box; } .dp__month_year_select:hover { background: var(--dp-hover-color); color: var(--dp-hover-text-color); } .dp__overlay { position: absolute; overflow-y: auto; width: 100%; height: 100%; background: var(--dp-background-color); top: 0; left: 0; transition: opacity 1s ease-out; z-index: 99999; font-family: Arial, Helvetica, sans-serif; color: var(--dp-text-color); box-sizing: border-box; } .dp__overlay::-webkit-scrollbar-track { box-shadow: var(--dp-scroll-bar-background); background-color: var(--dp-scroll-bar-background); } .dp__overlay::-webkit-scrollbar { width: 5px; background-color: var(--dp-scroll-bar-background); } .dp__overlay::-webkit-scrollbar-thumb { background-color: var(--dp-scroll-bar-color); border-radius: 10px; } .dp__overlay:focus { border: none; outline: none; } .dp__container_flex { display: flex; } .dp__container_block { display: block; } .dp__overlay_container { height: 100%; flex-direction: column; } .dp__overlay_row { padding: 0; box-sizing: border-box; display: flex; margin-left: auto; margin-right: auto; flex-wrap: wrap; max-width: 100%; width: 100%; align-items: center; } .dp__overlay_container > .dp__overlay_row { flex: 1; } .dp__overlay_col { box-sizing: border-box; width: 33%; padding: 3px; white-space: nowrap; } .dp__overlay_cell_pad { padding: 10px 0; } .dp__overlay_cell_active { cursor: pointer; border-radius: 4px; text-align: center; background: var(--dp-primary-color); color: var(--dp-primary-text-color); } .dp__overlay_cell { cursor: pointer; border-radius: 4px; text-align: center; } .dp__overlay_cell:hover { background: var(--dp-hover-color); color: var(--dp-hover-text-color); } .dp__cell_in_between { background: var(--dp-hover-color); color: var(--dp-hover-text-color); } .dp__overlay_action { position: sticky; bottom: 0; background: #fff; } .dp__over_action_scroll { right: 5px; box-sizing: border-box; } .dp__overlay_cell_disabled { cursor: not-allowed; background: var(--dp-disabled-color); } .dp__overlay_cell_disabled:hover { background: var(--dp-disabled-color); } .dp__overlay_cell_active_disabled { cursor: not-allowed; background: var(--dp-primary-disabled-color); } .dp__overlay_cell_active_disabled:hover { background: var(--dp-primary-disabled-color); } .dp__month_picker_header { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 35px; } .dp__time_input { width: 100%; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-family: Arial, Helvetica, sans-serif; color: var(--dp-text-color); } .dp__time_col_reg { padding: 0 20px; } .dp__time_col_reg_with_button { padding: 0 15px; } .dp__time_col_sec { padding: 0 10px; } .dp__time_col_sec_with_button { padding: 0 5px; } .dp__time_col { font-size: 2rem; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; } .dp__time_display { cursor: pointer; color: var(--dp-text-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .dp__time_display:hover { background: var(--dp-hover-color); color: var(--dp-hover-text-color); } .dp__inc_dec_button { padding: 5px; margin: 0; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; color: var(--dp-icon-color); box-sizing: border-box; } .dp__inc_dec_button svg { height: 32px; width: 32px; } .dp__inc_dec_button:hover { background: var(--dp-hover-color); color: var(--dp-primary-color); } .dp__pm_am_button { background: var(--dp-primary-color); color: var(--dp-primary-text-color); border: none; padding: 10px; border-radius: 4px; cursor: pointer; } .dp__action_row { display: flex; align-items: center; width: 100%; padding: 10px; box-sizing: border-box; color: var(--dp-text-color); background: var(--dp-background-color); } .dp__action_row svg { height: 20px; width: auto; } .dp__selection_preview { width: 50%; color: var(--dp-text-color); font-size: 0.8rem; } .dp__action_buttons { width: 50%; text-align: right; } .dp__action { font-weight: bold; cursor: pointer; padding: 2px 5px; border-radius: 4px; display: inline-flex; align-items: center; } .dp__select { color: var(--dp-success-color); } .dp__action_disabled { color: var(--dp-success-color-disabled); cursor: not-allowed; } .dp__cancel { color: var(--dp-secondary-color); } .dp__theme_dark { --dp-background-color: #212121; --dp-text-color: #fff; --dp-hover-color: #484848; --dp-hover-text-color: #fff; --dp-hover-icon-color: #959595; --dp-primary-color: #005cb2; --dp-primary-disabled-color: #61a8ea; --dp-primary-text-color: #fff; --dp-secondary-color: #a9a9a9; --dp-border-color: #2d2d2d; --dp-menu-border-color: #2d2d2d; --dp-border-color-hover: #aaaeb7; --dp-disabled-color: #737373; --dp-disabled-color-text: #d0d0d0; --dp-scroll-bar-background: #212121; --dp-scroll-bar-color: #484848; --dp-success-color: #00701a; --dp-success-color-disabled: #428f59; --dp-icon-color: #959595; --dp-danger-color: #e53935; --dp-marker-color: #e53935; --dp-tooltip-color: #3e3e3e; --dp-highlight-color: rgb(0 92 178 / 20%); } .dp__theme_light { --dp-background-color: #fff; --dp-text-color: #212121; --dp-hover-color: #f3f3f3; --dp-hover-text-color: #212121; --dp-hover-icon-color: #959595; --dp-primary-color: #1976d2; --dp-primary-disabled-color: #6bacea; --dp-primary-text-color: #f8f5f5; --dp-secondary-color: #c0c4cc; --dp-border-color: #ddd; --dp-menu-border-color: #ddd; --dp-border-color-hover: #aaaeb7; --dp-disabled-color: #f6f6f6; --dp-scroll-bar-background: #f3f3f3; --dp-scroll-bar-color: #959595; --dp-success-color: #76d275; --dp-success-color-disabled: #a3d9b1; --dp-icon-color: #959595; --dp-danger-color: #ff6f60; --dp-marker-color: #ff6f60; --dp-tooltip-color: #fafafa; --dp-disabled-color-text: #8e8e8e; --dp-highlight-color: rgb(25 118 210 / 10%); } .dp__main { font-family: Arial, Helvetica, sans-serif; -webkit-user-select: none; -moz-user-select: none; user-select: none; box-sizing: border-box; } .dp__pointer { cursor: pointer; } .dp__icon { stroke: currentcolor; fill: currentcolor; } .dp__button { width: 100%; text-align: center; color: var(--dp-icon-color); background: var(--dp-background-color); cursor: pointer; display: flex; align-items: center; align-content: center; justify-content: center; padding: 10px; box-sizing: border-box; height: 35px; } .dp__button:hover { background: var(--dp-hover-color); color: var(--dp-hover-icon-color); } .dp__button svg { height: 20px; width: auto; } .dp__button_bottom { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .dp__flex_display { display: flex; } .dp__flex_display_with_input { flex-direction: column; align-items: start; } .dp__relative { position: relative; } .calendar-next-enter-active, .calendar-next-leave-active, .calendar-prev-enter-active, .calendar-prev-leave-active { transition: all 0.1s ease-out; } .calendar-next-enter-from { opacity: 0; transform: translateX(22px); } .calendar-next-leave-to { opacity: 0; transform: translateX(-22px); } .calendar-prev-enter-from { opacity: 0; transform: translateX(-22px); } .calendar-prev-leave-to { opacity: 0; transform: translateX(22px); } .dp-menu-appear-enter-active, .dp-menu-appear-leave-active, .dp-slide-up-enter-active, .dp-slide-up-leave-active, .dp-slide-down-enter-active, .dp-slide-down-leave-active { transition: all 0.1s ease-out; } .dp-slide-down-leave-to, .dp-slide-up-enter-from { opacity: 0; transform: translateY(22px); } .dp-slide-down-enter-from, .dp-slide-up-leave-to { opacity: 0; transform: translateY(-22px); } .dp-menu-appear-enter-from { opacity: 0; } .dp-menu-appear-leave-to { opacity: 1; } .dp__main { max-width: 46rem; width: 100%; } .dp__instance_calendar { width: 100%; padding: 2rem; } .dp__calendar_header { width: 100%; } .dp__calendar_item { display: flex; justify-content: center; } .dp__calendar { width: 100%; } .dp__active_date { background-color: #0095db; } .dp__today { border-color: #000000; } .dp__date_hover, .dp__active_date, .dp__today { border-radius: 50% !important; } /** * Vue select overrides * @path: vendor/vue-select */ :root { --vs-dropdown-min-width: unset; } .v-select { margin-left: 1.2rem; } .vs__dropdown-toggle { height: 3.2rem; width: 6.2rem; border-color: #000000; } .vs__dropdown-menu { width: 6.2rem; min-width: none; } .vs__open-indicator { fill: #000000; } .vs__search, .vs__search:focus { font-size: 100%; } /** * Agile slider * @path: vendor/agile/slider */ .agile__dots { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); } .agile__dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0.2rem solid #ffffff; margin-right: 1.6rem; } .agile__dot--current { background-color: #ffffff; } .agile__dot:nth-last-child(1) { margin-right: 0; } .agile__dot button { width: 100%; height: 100%; } /*# sourceMappingURL=frontend.css.map*/