@charset "UTF-8"; /************************************************************/ /* OIL-UI */ /************************************************************/ /************************************************************/ /* BREAKPOINTS */ /************************************************************/ /************************************************************/ /* SDX COLORS */ /************************************************************/ /************************************************************/ /* COLORS */ /************************************************************/ .order-tracking .more-links[hs-device="phone"] { width: 100%; } .order-tracking .more-links[hs-device="phone"] > * { padding: 0 22px; } .order-tracking .link-list[hs-device="phone"] { width: 100%; } .order-tracking .link-list { width: 45%; margin-top: 35px; margin-bottom: 40px; border-top: 3px solid #1781e3; border-bottom: 1px solid #1781e3; display: flex; flex-direction: column; } .order-tracking .link-list > * { background-color: #eef3f6; margin-top: 2px; margin: 0; padding: 0 10px; line-height: 56px; margin-bottom: 3px; } .order-tracking .link-list > *:last-child { margin-bottom: 0; } .order-tracking .link-list > h3 { font-size: 18px; } .order-tracking .link-list > a { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #333; text-decoration: none; } .order-tracking .link-list > a:hover { background-color: #e1eaef; } .order-tracking .link-list > a i { font-size: 28px; color: #449ee6; } .sdx-container { /*! * SDX Library v1.29.0 */ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ /* Document ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ /** * Add the correct display in IE 9-. */ /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. */ /** * Add the correct margin in IE 8. */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ /** * Add the correct display in IE. */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ /** * Add the correct font weight in Chrome, Edge, and Safari. */ /** * Add the correct font style in Android 4.3-. */ /** * Add the correct background and color in IE 9-. */ /** * Add the correct font size in all browsers. */ /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ /** * Add the correct display in iOS 4-7. */ /** * Remove the border on images inside links in IE 10-. */ /** * Hide the overflow in IE. */ /* Forms ========================================================================== */ /** * Known issues: * - `select`: * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. * - `[type="checkbox"]`: * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. * - `[type="number"]`: * Certain font size values applied to number inputs cause the cursor style of * the decrement button to change from `default` to `text`. * - `[type="search"]`: * The search input is not fully stylable by default. In Chrome and Safari on * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In * Chrome and Safari on Windows you can't control `border` properly. It will * apply `border-width` but will only show a border color (which cannot be * controlled) for the outer 1px of that border. Applying * `-webkit-appearance: textfield` addresses these issues without removing the * benefits of search inputs (e.g. showing past searches). Safari (but not * Chrome) will clip the cancel button on when it has padding (and `textfield` * appearance). * - `::placeholder`: * In Edge, placeholders will disappear on `relative` or `absolute` positioned * `` elements if you use `opacity` less than `1` due to a * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ /** * Show the overflow in IE. */ /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ /** * Show the overflow in Edge. */ /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ /** * Correct the cursor style of increment and decrement buttons in Chrome. */ /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ /** * Change the border, margin, and padding in all browsers (opinionated). */ /** * 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. */ /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ /** * Remove the default vertical scrollbar in IE. */ /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE, and Firefox. */ /* * Add the correct display in all browsers. */ /* * Add the correct display in IE 9-. */ /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ /** * Add the correct display in IE. */ /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ /* * reset body margin */ /*doc --- title: Icons name: 01-foundation-03-icons category: Foundation - Icons ---

Iconography within SDX is used to communicate with users clearly and concisely. Our icons complement our typography, follow a uniform structure and reinforce the underlying DNA of Swisscom digital experiences. Icons should never be used as imagery, they should always serve a functional purpose. The SDX icons have been created from the Swisscom pictograms, and refined for use within digital applications.

```section_design ```

Variations

In the developer section you can find the comprehensive collection of all the icons available for SDX.

Note: If you are not able to find the icon you need, contact the Brand and Strategy Team. Icons are designed and deployed by the brand team. New icons deviating from this set should not be created without the brand team’s approval.

Rules

Icon grid

Icons are constructed within a 15x15 grid template. The stroke weight of icons should be 1px of that grid, increasing in width proportionately as the icon scales.

Icon grid structure

Trim container

The icon container is a holding frame that are placed within. Icons within this container are given a minimum of 1px verticle and horizontal padding, which scales proportionately with the icon and container. Icons are aligned to the verticle and horizontal centre of this container. The icons have been designed scales and positioned so that they appear equal to one another.

Centrally aligned

Minimum size

Icons have a minimum size of 13px when displayed on standard resolution devices, and 26px when displayed on retina, or @2x resolution devices.

Minimum icon size

Maximum size

Icons have a maximum size of 150px when displayed on standard resolution devices, and 300px when displayed on retina, or @2x resolution devices.

Maximum icon size

Available sizes

Icons are offered in six different sizes.


56x56px

48x48px

40x40px

32x32px

24x24px

16x16px

Scaling icons

Icons, when displayed at minimum size, sit within a 15px x 15px container that ensures all icons, no matter their proportions, can be aligned without the need to manual and optical rescaling or repositioning.

Scaling icons with their container

Relative alignment

Icons should be aligned by their containers, not by the icons themselves. The icons have been positioned within the containers relatively to one another and are designed to automatically align correct when displayed side by side.

Container alignment

Minimum spacing

Icons have a minimum spacing of 0.4x their trim container, rounded up to the nearest pixel. For example, a 30px icon (including trim container) should have 12px of spacing between icons. There is no maximum spacing rule.

Spacing icons

Using colour

Icons should only be used in the brand and interactive colour palettes. Swisscom Navy should be used when pairing navigational text links with icons, or when displaying icons on their own within a navigation bar. Icons used for functionality, or in conjunction with in-page text links should use the interaction blue, and icons used with confirmation links should use the interaction green. When used in conjunction with alerts or alert notifications icons should use the interaction orange. Icons should never use the content colour palette, as these colours are reserved for non-functional elements. When displaying icons on coloured backgrounds, they should always be shown in white.

Interactive icons
Icons used on colours backgrounds

Buttons

When displaying icons in buttons, they should only ever be shown in white. They should be 15px (trim container) and should be spaced a minimum of 13px from the text label.

Icons and buttons

Never use icons as imagery

Icons within the SDX system are strictly for use as interactive elements only and should never be used as imagery.

Don’t use icons as imagery
```section_develop ``` ```htmlmixed_webcomponent_sdx-icon_accessible ```

Available Icons

CSS: icon-account
Sass: icon-char('account');

CSS: icon-arrow-down
Sass: icon-char('arrow-down');

CSS: icon-arrow-left
Sass: icon-char('arrow-left');

CSS: icon-arrow-right
Sass: icon-char('arrow-right');

CSS: icon-arrow-up
Sass: icon-char('arrow-up');

CSS: icon-attachment
Sass: icon-char('attachment');

CSS: icon-backup
Sass: icon-char('backup');

CSS: icon-bin
Sass: icon-char('bin');

CSS: icon-calendar
Sass: icon-char('calendar');

CSS: icon-cancel
Sass: icon-char('cancel');

CSS: icon-check-mark
Sass: icon-char('check-mark');

CSS: icon-check-mark-2-circle
Sass: icon-char('check-mark-2-circle');

CSS: icon-chevron-normal-down
Sass: icon-char('chevron-normal-down');

CSS: icon-chevron-normal-left
Sass: icon-char('chevron-normal-left');

CSS: icon-chevron-normal-right
Sass: icon-char('chevron-normal-right');

CSS: icon-chevron-normal-up
Sass: icon-char('chevron-normal-up');

CSS: icon-chevron-flat-down
Sass: icon-char('chevron-flat-down');

CSS: icon-chevron-flat-left
Sass: icon-char('chevron-flat-left');

CSS: icon-chevron-flat-right
Sass: icon-char('chevron-flat-right');

CSS: icon-chevron-flat-up
Sass: icon-char('chevron-flat-up');

CSS: icon-clock
Sass: icon-char('clock');

CSS: icon-close
Sass: icon-char('close');

CSS: icon-download
Sass: icon-char('download');

CSS: icon-download-cloud
Sass: icon-char('download-cloud');

CSS: icon-edit
Sass: icon-char('edit');

CSS: icon-exclamation-mark-circle
Sass: icon-char('exclamation-mark-circle');

CSS: icon-flag
Sass: icon-char('flag');

CSS: icon-folder-new
Sass: icon-char('folder-new');

CSS: icon-folder-video
Sass: icon-char('folder-video');

CSS: icon-forward
Sass: icon-char('forward');

CSS: icon-forward-filled
Sass: icon-char('forward-filled');

CSS: icon-forward-message
Sass: icon-char('forward-message');

CSS: icon-forward-message-2
Sass: icon-char('forward-message-2');

CSS: icon-fullscreen-enter
Sass: icon-char('fullscreen-enter');

CSS: icon-fullscreen-enter-2
Sass: icon-char('fullscreen-enter-2');

CSS: icon-fullscreen-leave
Sass: icon-char('fullscreen-leave');

CSS: icon-fullscreen-leave-2
Sass: icon-char('fullscreen-leave-2');

CSS: icon-go-to-end
Sass: icon-char('go-to-end');

CSS: icon-go-to-end-filled
Sass: icon-char('go-to-end-filled');

CSS: icon-go-to-start
Sass: icon-char('go-to-start');

CSS: icon-go-to-start-filled
Sass: icon-char('go-to-start-filled');

CSS: icon-group
Sass: icon-char('group');

CSS: icon-heart
Sass: icon-char('heart');

CSS: icon-home
Sass: icon-char('home');

CSS: icon-hourglass
Sass: icon-char('hourglass');

CSS: icon-information-circle
Sass: icon-char('information-circle');

CSS: icon-key
Sass: icon-char('key');

CSS: icon-link
Sass: icon-char('link');

CSS: icon-lock
Sass: icon-char('lock');

CSS: icon-menu
Sass: icon-char('menu');

CSS: icon-message
Sass: icon-char('message');

CSS: icon-minus
Sass: icon-char('minus');

CSS: icon-more
Sass: icon-char('more');

CSS: icon-new
Sass: icon-char('new');

CSS: icon-okay
Sass: icon-char('okay');

CSS: icon-pause
Sass: icon-char('pause');

CSS: icon-pause-filled
Sass: icon-char('pause-filled');

CSS: icon-person
Sass: icon-char('person');

CSS: icon-play
Sass: icon-char('play');

CSS: icon-play-filled
Sass: icon-char('play-filled');

CSS: icon-plus
Sass: icon-char('plus');

CSS: icon-question-mark-circle
Sass: icon-char('question-mark-circle');

CSS: icon-record
Sass: icon-char('record');

CSS: icon-record-filled
Sass: icon-char('record-filled');

CSS: icon-rename
Sass: icon-char('rename');

CSS: icon-replay
Sass: icon-char('replay');

CSS: icon-reply-message
Sass: icon-char('reply-message');

CSS: icon-reply-message-2
Sass: icon-char('reply-message-2');

CSS: icon-reply-message-all
Sass: icon-char('reply-message-all');

CSS: icon-reply-message-all-2
Sass: icon-char('reply-message-all-2');

CSS: icon-retry
Sass: icon-char('retry');

CSS: icon-rewind
Sass: icon-char('rewind');

CSS: icon-rewind-filled
Sass: icon-char('rewind-filled');

CSS: icon-save
Sass: icon-char('save');

CSS: icon-save-2
Sass: icon-char('save-2');

CSS: icon-save-3
Sass: icon-char('save-3');

CSS: icon-search
Sass: icon-char('search');

CSS: icon-settings
Sass: icon-char('settings');

CSS: icon-shopping-trolley
Sass: icon-char('shopping-trolley');

CSS: icon-speech-bubble
Sass: icon-char('speech-bubble');

CSS: icon-standby
Sass: icon-char('standby');

CSS: icon-star
Sass: icon-char('star');

CSS: icon-stop
Sass: icon-char('stop');

CSS: icon-stop-filled
Sass: icon-char('stop-filled');

CSS: icon-synchronise
Sass: icon-char('synchronise');

CSS: icon-thumb-up
Sass: icon-char('thumb-up');

CSS: icon-upload
Sass: icon-char('upload');

CSS: icon-upload-cloud
Sass: icon-char('upload-cloud');

CSS: icon-volume-fortissimo
Sass: icon-char('volume-fortissimo');

CSS: icon-volume-forte
Sass: icon-char('volume-forte');

CSS: icon-volume-piano
Sass: icon-char('volume-piano');

CSS: icon-volume-pianissimo
Sass: icon-char('volume-pianissimo');

CSS: icon-volume-mute
Sass: icon-char('volume-mute');

CSS: icon-warning
Sass: icon-char('warning');

CSS: icon-zoom-in
Sass: icon-char('zoom-in');

CSS: icon-zoom-out
Sass: icon-char('zoom-out');

CSS: icon-suitcase
Sass: icon-char('suitcase');

CSS: icon-ambulance
Sass: icon-char('ambulance');

CSS: icon-ambulance-2
Sass: icon-char('ambulance-2');

CSS: icon-van
Sass: icon-char('van');

CSS: icon-delivery
Sass: icon-char('delivery');

CSS: icon-delivery-2
Sass: icon-char('delivery-2');

CSS: icon-applications
Sass: icon-char('applications');

CSS: icon-assistant
Sass: icon-char('assistant');

CSS: icon-call-centre
Sass: icon-char('call-centre');

CSS: icon-bill
Sass: icon-char('bill');

CSS: icon-child-protection
Sass: icon-char('child-protection');

CSS: icon-coins
Sass: icon-char('coins');

CSS: icon-compass
Sass: icon-char('compass');

CSS: icon-mobile-phone
Sass: icon-char('mobile-phone');

CSS: icon-smartphone
Sass: icon-char('smartphone');

CSS: icon-tablet
Sass: icon-char('tablet');

CSS: icon-laptop
Sass: icon-char('laptop');

CSS: icon-computer
Sass: icon-char('computer');

CSS: icon-workstation
Sass: icon-char('workstation');

CSS: icon-credit-card
Sass: icon-char('credit-card');

CSS: icon-directory
Sass: icon-char('directory');

CSS: icon-document
Sass: icon-char('document');

CSS: icon-document-new
Sass: icon-char('document-new');

CSS: icon-document-excel
Sass: icon-char('document-excel');

CSS: icon-document-powerpoint
Sass: icon-char('document-powerpoint');

CSS: icon-document-word
Sass: icon-char('document-word');

CSS: icon-document-pdf
Sass: icon-char('document-pdf');

CSS: icon-document-txt
Sass: icon-char('document-txt');

CSS: icon-document-zip
Sass: icon-char('document-zip');

CSS: icon-document-code
Sass: icon-char('document-code');

CSS: icon-e-mail
Sass: icon-char('e-mail');

CSS: icon-film-camera
Sass: icon-char('film-camera');

CSS: icon-film-camera-2
Sass: icon-char('film-camera-2');

CSS: icon-film-camera-3
Sass: icon-char('film-camera-3');

CSS: icon-film-reel
Sass: icon-char('film-reel');

CSS: icon-folder
Sass: icon-char('folder');

CSS: icon-football
Sass: icon-char('football');

CSS: icon-game
Sass: icon-char('game');

CSS: icon-gaming
Sass: icon-char('gaming');

CSS: icon-globe
Sass: icon-char('globe');

CSS: icon-handset
Sass: icon-char('handset');

CSS: icon-headphone
Sass: icon-char('headphone');

CSS: icon-headset
Sass: icon-char('headset');

CSS: icon-index-card
Sass: icon-char('index-card');

CSS: icon-leaf
Sass: icon-char('leaf');

CSS: icon-lifesaver
Sass: icon-char('lifesaver');

CSS: icon-modem-wlan
Sass: icon-char('modem-wlan');

CSS: icon-movie
Sass: icon-char('movie');

CSS: icon-movie-2
Sass: icon-char('movie-2');

CSS: icon-movie-3
Sass: icon-char('movie-3');

CSS: icon-svod
Sass: icon-char('svod');

CSS: icon-music
Sass: icon-char('music');

CSS: icon-navigation
Sass: icon-char('navigation');

CSS: icon-network
Sass: icon-char('network');

CSS: icon-office
Sass: icon-char('office');

CSS: icon-phone-basic
Sass: icon-char('phone-basic');

CSS: icon-phone-pro
Sass: icon-char('phone-pro');

CSS: icon-photo
Sass: icon-char('photo');

CSS: icon-photo-camera
Sass: icon-char('photo-camera');

CSS: icon-postcard
Sass: icon-char('postcard');

CSS: icon-printer
Sass: icon-char('printer');

CSS: icon-radio
Sass: icon-char('radio');

CSS: icon-rss-feed
Sass: icon-char('rss-feed');

CSS: icon-wlan
Sass: icon-char('wlan');

CSS: icon-signal
Sass: icon-char('signal');

CSS: icon-server
Sass: icon-char('server');

CSS: icon-sms
Sass: icon-char('sms');

CSS: icon-translation
Sass: icon-char('translation');

CSS: icon-transmitter
Sass: icon-char('transmitter');

CSS: icon-tv
Sass: icon-char('tv');

CSS: icon-tv-hd
Sass: icon-char('tv-hd');

CSS: icon-tv-2-0
Sass: icon-char('tv-2-0');

CSS: icon-video-tape
Sass: icon-char('video-tape');

CSS: icon-video-tape-2
Sass: icon-char('video-tape-2');

CSS: icon-wearable-watch
Sass: icon-char('wearable-watch');

CSS: icon-weather-cloud
Sass: icon-char('weather-cloud');

CSS: icon-weather-rain
Sass: icon-char('weather-rain');

CSS: icon-weather-rain-unsettled
Sass: icon-char('weather-rain-unsettled');

CSS: icon-weather-snow
Sass: icon-char('weather-snow');

CSS: icon-weather-snow-unsettled
Sass: icon-char('weather-snow-unsettled');

CSS: icon-weather-storm
Sass: icon-char('weather-storm');

CSS: icon-weather-storm-unsettled
Sass: icon-char('weather-storm-unsettled');

CSS: icon-weather-sun
Sass: icon-char('weather-sun');

CSS: icon-weather-sun-unsettled
Sass: icon-char('weather-sun-unsettled');

CSS: icon-inbox-1
Sass: icon-char('inbox-1');

CSS: icon-drafts-3
Sass: icon-char('drafts-3');

CSS: icon-sent-6
Sass: icon-char('sent-6');

CSS: icon-sent-2
Sass: icon-char('sent-2');

CSS: icon-inbox-2
Sass: icon-char('inbox-2');

CSS: icon-drafts
Sass: icon-char('drafts');

CSS: icon-sent
Sass: icon-char('sent');

CSS: icon-sent-3
Sass: icon-char('sent-3');

CSS: icon-inbox-3
Sass: icon-char('inbox-3');

CSS: icon-drafts-2
Sass: icon-char('drafts-2');

CSS: icon-sent-5
Sass: icon-char('sent-5');

CSS: icon-sent-4
Sass: icon-char('sent-4');

CSS: icon-website
Sass: icon-char('website');

CSS: icon-website-2
Sass: icon-char('website-2');

CSS: icon-heart-filled
Sass: icon-char('heart-filled');

CSS: icon-exclamation-mark
Sass: icon-char('exclamation-mark');

CSS: icon-share
Sass: icon-char('share');

CSS: icon-chevron-small-down
Sass: icon-char('chevron-small-down');

CSS: icon-chevron-small-up
Sass: icon-char('chevron-small-up');

CSS: icon-chevron-small-left
Sass: icon-char('chevron-small-left');

CSS: icon-chevron-small-right
Sass: icon-char('chevron-small-right');

CSS: icon-clear-circle
Sass: icon-char('clear-circle');

CSS: icon-server
Sass: icon-char('server');

CSS: icon-cd
Sass: icon-char('cd');

CSS: icon-bundle
Sass: icon-char('bundle');

CSS: icon-database
Sass: icon-char('database');

CSS: icon-firewall
Sass: icon-char('firewall');

CSS: icon-proxy-server
Sass: icon-char('proxy-server');

CSS: icon-set-top-box
Sass: icon-char('set-top-box');

CSS: icon-puzzle
Sass: icon-char('puzzle');

CSS: icon-skull
Sass: icon-char('skull');

CSS: icon-fire
Sass: icon-char('fire');

CSS: icon-setting
Sass: icon-char('setting');

CSS: icon-present
Sass: icon-char('present');

CSS: icon-certificate
Sass: icon-char('certificate');

CSS: icon-waypointer
Sass: icon-char('waypointer');

CSS: icon-eye
Sass: icon-char('eye');

CSS: icon-eye-shut
Sass: icon-char('eye-shut');

CSS: icon-runtime
Sass: icon-char('runtime');

CSS: icon-list
Sass: icon-char('list');

CSS: icon-topology
Sass: icon-char('topology');

CSS: icon-blueprint
Sass: icon-char('blueprint');

CSS: icon-map-pointer
Sass: icon-char('map-pointer');

CSS: icon-console
Sass: icon-char('console');

CSS: icon-reboot
Sass: icon-char('reboot');

CSS: icon-reprovision
Sass: icon-char('reprovision');

CSS: icon-speech-bubble-filled
Sass: icon-char('speech-bubble-filled');

CSS: icon-star-filled
Sass: icon-char('star-filled');

CSS: icon-gateway
Sass: icon-char('gateway');

CSS: icon-flash
Sass: icon-char('flash');

CSS: icon-rocket
Sass: icon-char('rocket');

CSS: icon-robot-neutral
Sass: icon-char('robot-neutral');

CSS: icon-robot-happy
Sass: icon-char('robot-happy');

CSS: icon-robot-smile
Sass: icon-char('robot-smile');

CSS: icon-robot-laughing
Sass: icon-char('robot-laughing');

CSS: icon-robot-wink-1
Sass: icon-char('robot-wink-1');

CSS: icon-robot-relaxed
Sass: icon-char('robot-relaxed');

CSS: icon-robot-surprized
Sass: icon-char('robot-surprized');

CSS: icon-robot-confused
Sass: icon-char('robot-confused');

CSS: icon-robot-sad
Sass: icon-char('robot-sad');

CSS: icon-robot-broken
Sass: icon-char('robot-broken');

CSS: icon-umbrella
Sass: icon-char('umbrella');

CSS: icon-security
Sass: icon-char('security');

CSS: icon-routed-network
Sass: icon-char('routed-network');

CSS: icon-ip-sets
Sass: icon-char('ip-sets');

CSS: icon-resource-pool
Sass: icon-char('resource-pool');

CSS: icon-edge
Sass: icon-char('edge');

CSS: icon-switch
Sass: icon-char('switch');

CSS: icon-processor
Sass: icon-char('processor');

CSS: icon-distributed-network
Sass: icon-char('distributed-network');

CSS: icon-legacy-network
Sass: icon-char('legacy-network');

CSS: icon-star-half
Sass: icon-char('star-half');

CSS: icon-filter
Sass: icon-char('filter');

CSS: icon-idcard
Sass: icon-char('idcard');

CSS: icon-passport
Sass: icon-char('passport');

CSS: icon-thumb-up-filled
Sass: icon-char('thumb-up-filled');

CSS: icon-tag
Sass: icon-char('tag');

CSS: icon-bell
Sass: icon-char('bell');

CSS: icon-flash-multiple
Sass: icon-char('flash-multiple');

CSS: icon-lightbulb
Sass: icon-char('lightbulb');

CSS: icon-devices
Sass: icon-char('devices');

CSS: icon-smartphones-multiple
Sass: icon-char('smartphones-multiple');

CSS: icon-document-indesign
Sass: icon-char('document-indesign');

CSS: icon-document-illustrator
Sass: icon-char('document-illustrator');

CSS: icon-document-onenote
Sass: icon-char('document-onenote');

CSS: icon-document-eps
Sass: icon-char('document-eps');

CSS: icon-document-photoshop
Sass: icon-char('document-photoshop');

CSS: icon-document-visio
Sass: icon-char('document-visio');

CSS: icon-document-publisher
Sass: icon-char('document-publisher');

CSS: icon-document-unknowndoc
Sass: icon-char('document-unknowndoc');

CSS: icon-shop
Sass: icon-char('shop');

CSS: icon-scissors
Sass: icon-char('scissors');

CSS: icon-battery
Sass: icon-char('battery');

CSS: icon-battery-3
Sass: icon-char('battery-3');

CSS: icon-battery-2
Sass: icon-char('battery-2');

CSS: icon-battery-1
Sass: icon-char('battery-1');

CSS: icon-battery-0
Sass: icon-char('battery-0');

CSS: icon-battery-empty
Sass: icon-char('battery-empty');

CSS: icon-mouse
Sass: icon-char('mouse');

CSS: icon-pointer
Sass: icon-char('pointer');

CSS: icon-realmouse
Sass: icon-char('realmouse');

CSS: icon-bug
Sass: icon-char('bug');

CSS: icon-privacy
Sass: icon-char('privacy');

CSS: icon-ip
Sass: icon-char('ip');

CSS: icon-patch
Sass: icon-char('patch');

CSS: icon-microphone
Sass: icon-char('microphone');

CSS: icon-microphone-filled
Sass: icon-char('microphone-filled');

CSS: icon-handset-up
Sass: icon-char('handset-up');

CSS: icon-handset-up-stroke
Sass: icon-char('handset-up-stroke');

CSS: icon-handset-stroke
Sass: icon-char('handset-stroke');

CSS: icon-software
Sass: icon-char('software');

CSS: icon-dynamic-storage
Sass: icon-char('dynamic-storage');

CSS: icon-wireless-data
Sass: icon-char('wireless-data');

CSS: icon-wireless-voice
Sass: icon-char('wireless-voice');

CSS: icon-lips
Sass: icon-char('lips');

CSS: icon-flag-filled
Sass: icon-char('flag-filled');

CSS: icon-alarmclock
Sass: icon-char('alarmclock');

CSS: icon-copy
Sass: icon-char('copy');

CSS: icon-paste
Sass: icon-char('paste');

CSS: icon-plus-box
Sass: icon-char('plus-box');

CSS: icon-minus-box
Sass: icon-char('minus-box');

CSS: icon-service
Sass: icon-char('service');

CSS: icon-business-phone
Sass: icon-char('business-phone');

CSS: icon-accessibility
Sass: icon-char('accessibility');

CSS: icon-agile-process
Sass: icon-char('agile-process');

CSS: icon-airplaine
Sass: icon-char('airplaine');

CSS: icon-alarmcall
Sass: icon-char('alarmcall');

CSS: icon-auster
Sass: icon-char('auster');

CSS: icon-barcode
Sass: icon-char('barcode');

CSS: icon-bed
Sass: icon-char('bed');

CSS: icon-bee
Sass: icon-char('bee');

CSS: icon-beer
Sass: icon-char('beer');

CSS: icon-biker
Sass: icon-char('biker');

CSS: icon-blow-fish
Sass: icon-char('blow-fish');

CSS: icon-book
Sass: icon-char('book');

CSS: icon-broom
Sass: icon-char('broom');

CSS: icon-bubbles
Sass: icon-char('bubbles');

CSS: icon-bus
Sass: icon-char('bus');

CSS: icon-business-network
Sass: icon-char('business-network');

CSS: icon-buyback
Sass: icon-char('buyback');

CSS: icon-bicycle
Sass: icon-char('bicycle');

CSS: icon-cablecar
Sass: icon-char('cablecar');

CSS: icon-calculator
Sass: icon-char('calculator');

CSS: icon-call-log
Sass: icon-char('call-log');

CSS: icon-callfilter
Sass: icon-char('callfilter');

CSS: icon-car-pooling-2
Sass: icon-char('car-pooling-2');

CSS: icon-car-pooling
Sass: icon-char('car-pooling');

CSS: icon-car-sharing
Sass: icon-char('car-sharing');

CSS: icon-car
Sass: icon-char('car');

CSS: icon-carabiner
Sass: icon-char('carabiner');

CSS: icon-cardreader
Sass: icon-char('cardreader');

CSS: icon-care
Sass: icon-char('care');

CSS: icon-cashdesk
Sass: icon-char('cashdesk');

CSS: icon-ccserver
Sass: icon-char('ccserver');

CSS: icon-chairlift
Sass: icon-char('chairlift');

CSS: icon-child-protection-2
Sass: icon-char('child-protection-2');

CSS: icon-cocktail
Sass: icon-char('cocktail');

CSS: icon-coffee
Sass: icon-char('coffee');

CSS: icon-combox
Sass: icon-char('combox');

CSS: icon-computer-monitoring
Sass: icon-char('computer-monitoring');

CSS: icon-copier
Sass: icon-char('copier');

CSS: icon-crab
Sass: icon-char('crab');

CSS: icon-crime
Sass: icon-char('crime');

CSS: icon-cross
Sass: icon-char('cross');

CSS: icon-crowd
Sass: icon-char('crowd');

CSS: icon-crown
Sass: icon-char('crown');

CSS: icon-cruiser
Sass: icon-char('cruiser');

CSS: icon-dargebotene-hand
Sass: icon-char('dargebotene-hand');

CSS: icon-desktopsharing
Sass: icon-char('desktopsharing');

CSS: icon-diagram-2
Sass: icon-char('diagram-2');

CSS: icon-diagram
Sass: icon-char('diagram');

CSS: icon-dial
Sass: icon-char('dial');

CSS: icon-digihome
Sass: icon-char('digihome');

CSS: icon-discjockey
Sass: icon-char('discjockey');

CSS: icon-doctor
Sass: icon-char('doctor');

CSS: icon-driverless-car
Sass: icon-char('driverless-car');

CSS: icon-drone
Sass: icon-char('drone');

CSS: icon-ebike-2
Sass: icon-char('ebike-2');

CSS: icon-ebike
Sass: icon-char('ebike');

CSS: icon-ecar
Sass: icon-char('ecar');

CSS: icon-edge-2
Sass: icon-char('edge-2');

CSS: icon-elevator
Sass: icon-char('elevator');

CSS: icon-emotorcycle-2
Sass: icon-char('emotorcycle-2');

CSS: icon-emotorcycle
Sass: icon-char('emotorcycle');

CSS: icon-esim
Sass: icon-char('esim');

CSS: icon-ethernet
Sass: icon-char('ethernet');

CSS: icon-exit
Sass: icon-char('exit');

CSS: icon-factory
Sass: icon-char('factory');

CSS: icon-faultclearing
Sass: icon-char('faultclearing');

CSS: icon-fiber
Sass: icon-char('fiber');

CSS: icon-firebrigade
Sass: icon-char('firebrigade');

CSS: icon-fish
Sass: icon-char('fish');

CSS: icon-fitness
Sass: icon-char('fitness');

CSS: icon-flag-filled-wind
Sass: icon-char('flag-filled-wind');

CSS: icon-flag-wind
Sass: icon-char('flag-wind');

CSS: icon-fleet-management
Sass: icon-char('fleet-management');

CSS: icon-food
Sass: icon-char('food');

CSS: icon-freighter
Sass: icon-char('freighter');

CSS: icon-garderobe
Sass: icon-char('garderobe');

CSS: icon-gears-three
Sass: icon-char('gears-three');

CSS: icon-gears
Sass: icon-char('gears');

CSS: icon-globe-key
Sass: icon-char('globe-key');

CSS: icon-goggles-3d
Sass: icon-char('goggles-3d');

CSS: icon-green-laptop
Sass: icon-char('green-laptop');

CSS: icon-green-mobile
Sass: icon-char('green-mobile');

CSS: icon-hd-voice
Sass: icon-char('hd-voice');

CSS: icon-helicopter
Sass: icon-char('helicopter');

CSS: icon-helpline
Sass: icon-char('helpline');

CSS: icon-hiking
Sass: icon-char('hiking');

CSS: icon-home-ok
Sass: icon-char('home-ok');

CSS: icon-hospital-building
Sass: icon-char('hospital-building');

CSS: icon-hospital
Sass: icon-char('hospital');

CSS: icon-hotspot-localprodukt
Sass: icon-char('hotspot-localprodukt');

CSS: icon-hybrid-drive
Sass: icon-char('hybrid-drive');

CSS: icon-infinity
Sass: icon-char('infinity');

CSS: icon-informationint
Sass: icon-char('informationint');

CSS: icon-insert-banknote
Sass: icon-char('insert-banknote');

CSS: icon-insertcoin
Sass: icon-char('insertcoin');

CSS: icon-internet-of-things
Sass: icon-char('internet-of-things');

CSS: icon-ip-telephone
Sass: icon-char('ip-telephone');

CSS: icon-jelly-fish
Sass: icon-char('jelly-fish');

CSS: icon-juggler
Sass: icon-char('juggler');

CSS: icon-keyboard
Sass: icon-char('keyboard');

CSS: icon-laptop-internet
Sass: icon-char('laptop-internet');

CSS: icon-living-room
Sass: icon-char('living-room');

CSS: icon-lowradiation
Sass: icon-char('lowradiation');

CSS: icon-mail-storge
Sass: icon-char('mail-storge');

CSS: icon-mediabox
Sass: icon-char('mediabox');

CSS: icon-megaphone
Sass: icon-char('megaphone');

CSS: icon-mobile-buyback-2
Sass: icon-char('mobile-buyback-2');

CSS: icon-mobile-buyback-3
Sass: icon-char('mobile-buyback-3');

CSS: icon-mobile-buyback
Sass: icon-char('mobile-buyback');

CSS: icon-mobile-internet
Sass: icon-char('mobile-internet');

CSS: icon-mobile-laptop
Sass: icon-char('mobile-laptop');

CSS: icon-mobile-message
Sass: icon-char('mobile-message');

CSS: icon-mobile-payment
Sass: icon-char('mobile-payment');

CSS: icon-mobilecall
Sass: icon-char('mobilecall');

CSS: icon-mobileuser
Sass: icon-char('mobileuser');

CSS: icon-modem
Sass: icon-char('modem');

CSS: icon-motorcycle-2
Sass: icon-char('motorcycle-2');

CSS: icon-motorcycle
Sass: icon-char('motorcycle');

CSS: icon-mountainbiker
Sass: icon-char('mountainbiker');

CSS: icon-music-app-2
Sass: icon-char('music-app-2');

CSS: icon-music-app
Sass: icon-char('music-app');

CSS: icon-mycloud
Sass: icon-char('mycloud');

CSS: icon-network-3g
Sass: icon-char('network-3g');

CSS: icon-network-4g
Sass: icon-char('network-4g');

CSS: icon-network-4gplus
Sass: icon-char('network-4gplus');

CSS: icon-network-5g
Sass: icon-char('network-5g');

CSS: icon-network-improvement
Sass: icon-char('network-improvement');

CSS: icon-newspaper
Sass: icon-char('newspaper');

CSS: icon-nfc
Sass: icon-char('nfc');

CSS: icon-nordic-combined
Sass: icon-char('nordic-combined');

CSS: icon-notice
Sass: icon-char('notice');

CSS: icon-nut-and-bolt
Sass: icon-char('nut-and-bolt');

CSS: icon-online-storge
Sass: icon-char('online-storge');

CSS: icon-parking-garage
Sass: icon-char('parking-garage');

CSS: icon-parking-meter
Sass: icon-char('parking-meter');

CSS: icon-parking-2
Sass: icon-char('parking-2');

CSS: icon-parking
Sass: icon-char('parking');

CSS: icon-pbx
Sass: icon-char('pbx');

CSS: icon-personal-cloud
Sass: icon-char('personal-cloud');

CSS: icon-pet-bottle
Sass: icon-char('pet-bottle');

CSS: icon-pharmacy
Sass: icon-char('pharmacy');

CSS: icon-phone-security
Sass: icon-char('phone-security');

CSS: icon-phonecordless
Sass: icon-char('phonecordless');

CSS: icon-piggy-bank
Sass: icon-char('piggy-bank');

CSS: icon-podium
Sass: icon-char('podium');

CSS: icon-police
Sass: icon-char('police');

CSS: icon-power
Sass: icon-char('power');

CSS: icon-prepaid-mobile
Sass: icon-char('prepaid-mobile');

CSS: icon-presentation
Sass: icon-char('presentation');

CSS: icon-ray
Sass: icon-char('ray');

CSS: icon-relax
Sass: icon-char('relax');

CSS: icon-remote-control
Sass: icon-char('remote-control');

CSS: icon-restaurant
Sass: icon-char('restaurant');

CSS: icon-robot-wink-2
Sass: icon-char('robot-wink-2');

CSS: icon-runner
Sass: icon-char('runner');

CSS: icon-safety
Sass: icon-char('safety');

CSS: icon-sailer
Sass: icon-char('sailer');

CSS: icon-satellitedish
Sass: icon-char('satellitedish');

CSS: icon-satellite
Sass: icon-char('satellite');

CSS: icon-scale
Sass: icon-char('scale');

CSS: icon-screen-design
Sass: icon-char('screen-design');

CSS: icon-searchtext
Sass: icon-char('searchtext');

CSS: icon-securitycamera
Sass: icon-char('securitycamera');

CSS: icon-selfcheckout
Sass: icon-char('selfcheckout');

CSS: icon-server-small
Sass: icon-char('server-small');

CSS: icon-shakehands
Sass: icon-char('shakehands');

CSS: icon-shower
Sass: icon-char('shower');

CSS: icon-silence
Sass: icon-char('silence');

CSS: icon-simkarte
Sass: icon-char('simkarte');

CSS: icon-ski-biathlon
Sass: icon-char('ski-biathlon');

CSS: icon-ski-cross-country
Sass: icon-char('ski-cross-country');

CSS: icon-ski-freestyle
Sass: icon-char('ski-freestyle');

CSS: icon-ski-jumping
Sass: icon-char('ski-jumping');

CSS: icon-ski-racer
Sass: icon-char('ski-racer');

CSS: icon-ski-telemarking
Sass: icon-char('ski-telemarking');

CSS: icon-ski
Sass: icon-char('ski');

CSS: icon-small-meeting
Sass: icon-char('small-meeting');

CSS: icon-smoking
Sass: icon-char('smoking');

CSS: icon-snail
Sass: icon-char('snail');

CSS: icon-snow
Sass: icon-char('snow');

CSS: icon-snowboard
Sass: icon-char('snowboard');

CSS: icon-socialnetwork
Sass: icon-char('socialnetwork');

CSS: icon-sos
Sass: icon-char('sos');

CSS: icon-spam
Sass: icon-char('spam');

CSS: icon-spot
Sass: icon-char('spot');

CSS: icon-squid
Sass: icon-char('squid');

CSS: icon-stairs
Sass: icon-char('stairs');

CSS: icon-standing-meeting
Sass: icon-char('standing-meeting');

CSS: icon-station
Sass: icon-char('station');

CSS: icon-steeringwheel
Sass: icon-char('steeringwheel');

CSS: icon-strong-arm
Sass: icon-char('strong-arm');

CSS: icon-svod-2
Sass: icon-char('svod-2');

CSS: icon-swiss-1
Sass: icon-char('swiss-1');

CSS: icon-swiss-2
Sass: icon-char('swiss-2');

CSS: icon-switchboarding
Sass: icon-char('switchboarding');

CSS: icon-switchoff
Sass: icon-char('switchoff');

CSS: icon-taxcard
Sass: icon-char('taxcard');

CSS: icon-taxcardin
Sass: icon-char('taxcardin');

CSS: icon-taxcardout
Sass: icon-char('taxcardout');

CSS: icon-teddybear
Sass: icon-char('teddybear');

CSS: icon-telecommunication
Sass: icon-char('telecommunication');

CSS: icon-tent
Sass: icon-char('tent');

CSS: icon-thermometer
Sass: icon-char('thermometer');

CSS: icon-toilet-f
Sass: icon-char('toilet-f');

CSS: icon-toilet-m
Sass: icon-char('toilet-m');

CSS: icon-toilet-s
Sass: icon-char('toilet-s');

CSS: icon-touchdown
Sass: icon-char('touchdown');

CSS: icon-trafficinfo
Sass: icon-char('trafficinfo');

CSS: icon-trailrunner
Sass: icon-char('trailrunner');

CSS: icon-train
Sass: icon-char('train');

CSS: icon-tv-guide
Sass: icon-char('tv-guide');

CSS: icon-uhd-tv
Sass: icon-char('uhd-tv');

CSS: icon-usb
Sass: icon-char('usb');

CSS: icon-user-presence
Sass: icon-char('user-presence');

CSS: icon-van-fire-2
Sass: icon-char('van-fire-2');

CSS: icon-van-fire
Sass: icon-char('van-fire');

CSS: icon-ventilator
Sass: icon-char('ventilator');

CSS: icon-video-call-laptop
Sass: icon-char('video-call-laptop');

CSS: icon-video-call-mobile
Sass: icon-char('video-call-mobile');

CSS: icon-virus
Sass: icon-char('virus');

CSS: icon-waitingroom
Sass: icon-char('waitingroom');

CSS: icon-wearable-glasses
Sass: icon-char('wearable-glasses');

CSS: icon-webcam
Sass: icon-char('webcam');

CSS: icon-wheelchair
Sass: icon-char('wheelchair');

CSS: icon-wireless-charging
Sass: icon-char('wireless-charging');

*/ /* * Set html to full width and height * Set touch-action to avoid touch delay on mobile IE */ /* * Set display none to hidden elements * IE 9 and 10 support */ /* * Reset fonts for relevant elements */ /* * Remove the gray background color from active links in IE 10. */ /* iOS "clickable elements" fix for role="button" * * Fixes "clickability" issue (and more generally, the firing of events such as focus as well) * for traditionally non-focusable elements with role="button" * see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile */ /* ::selection { background: $color-selection-bg; color: $color-selection-fg; } */ /*doc --- title: Colours name: 01-foundation-02-colors-01-brand category: Foundation - Colours ---

Our colour system consists of four palettes, each with a specific role. They work together to create visual impact, reinforce the Swisscom brand, clearly signpost interactions and enrich content. Our colours have been chosen to work well on screen and support accessibility.

Primary colours
  • Swisscom Navy
  • Swisscom Blue
  • Swisscom Red
  • White
Support colours
  • Dark Grey
  • Grey Tint 2
  • Grey Tint 3
  • Grey Tint 4
  • Grey Tint 5
  • Grey Tint 6
  • Grey Tint 7
  • Grey Tint 8
  • Blue
  • Blue Tint 2
  • Blue Tint 3
  • Aluminium
  • Aluminium Tint 2
  • Horizon
  • Horizon Tint 2
Interaction colours
  • Interaction Blue
  • Blue Rollover
  • Interaction Grey
  • Grey Rollover
  • Interaction Green
  • Green Rollover
  • Interaction Red
  • Red Rollover
  • Interaction Orange
  • Orange Rollover
Accent colours
  • Turquoise
  • Turquoise Rollover
  • Azure
  • Azure Rollover
  • Iris
  • Iris Rollover
  • Orchid
  • Orchid Rollover
  • Pink
  • Pink Rollover
```section_design ```

Colour palette

The Swisscom colour palette consists of primary, support, interactive and accent colours:

The Swisscom colour palette for Adobe CC can be downloaded here.

Primary colours

The use of primary colours within SDX helps to reinforce the presence of the Swisscom master brand throughout all Swisscom digital experiences.

Swisscom Navy

CSS: .sc-navy
Sass: $color-sc-navy
Hex: #001155
RGB: 0, 17, 85

White

CSS: .sc-white
Sass: $color-sc-white
Hex: #FFFFFF
RGB: 255, 255, 255

Swisscom Blue

CSS: .sc-blue
Sass: $color-sc-blue
Hex: #11AAFF
RGB: 17, 170, 255

Swisscom Red

CSS: .sc-red
Sass: $color-sc-red
Hex: #DD1122
RGB: 221, 17, 34

Typography using primary colours
Icons using primary colours

Support colours

Support colours are the most widely used across all screens and components and used as the foundation on which all our products are made from.

Dark grey is used for the majority of non-interactive typography. Mid and light grey can be used for creating levels of hierarchy between similar size piece of text.

SDX has seperate interaction and accent colour palettes that feature AA accessible alternative colours to Swisscom blue and red for use in digital products.

Dark Grey

CSS: .gray
Sass: $color-gray
Hex: #333333
RGB: 51, 51, 51

Grey Tint 2

CSS: .gray-tint-2
Sass: $color-gray-tint-2
Hex: #474747
RGB: 71, 71, 71

Grey Tint 3

CSS: .gray-tint-3
Sass: $color-gray-tint-3
Hex: #5C5C5C
RGB: 92, 92, 92

Grey Tint 4

CSS: .gray-tint-4
Sass: $color-gray-tint-4
Hex: #666666
RGB: 102, 102, 102

Grey Tint 5

CSS: .gray-tint-5
Sass: $color-gray-tint-5
Hex: #858585
RGB: 133, 133, 133

Grey Tint 6

CSS: .gray-tint-6
Sass: $color-gray-tint-6
Hex: #ADADAD
RGB: 173, 173, 173

Grey Tint 7

CSS: .gray-tint-7
Sass: $color-gray-tint-7
Hex: #BBBBBB
RGB: 187, 187, 187

Grey Tint 8

CSS: .gray-tint-8
Sass: $color-gray-tint-8
Hex: #D6D6D6
RGB: 214, 214, 214

Interaction Blue

CSS: .int-blue
Sass: $color-int-blue
Hex: #1781E3
RGB: 23, 129, 227

Blue Tint 2

CSS: .blue-tint-2
Sass: $color-blue-tint-2
Hex: #A2CDF4
RGB: 162, 205, 244

Blue Tint 3

CSS: .blue-tint-3
Sass: $color-blue-tint-3
Hex: #D1E6F9
RGB: 209, 230, 249

Aluminium

CSS: .aluminum
Sass: $color-aluminum
Hex: #DDE3E7
RGB: 221, 227, 231

Aluminium Tint 2

CSS: .aluminum-tint-2
Sass: $color-aluminum-tint-2
Hex: #E4E9EC
RGB: 228, 233, 236

Horizon

CSS: .horizon
Sass: $color-horizon
Hex: #EEF3F6
RGB: 238, 243, 246

Horizon Tint 2

CSS: .horizon-tint-2
Sass: $color-horizon-tint-2
Hex: #F8FAFB
RGB: 248, 250, 251

Desktop mega menu using support colours
Mobile side navigation using support colours

Interaction colours

Interaction colours are designed to maintain a consistent treatment for interactive elements. They help to differentiate between static and interactive content in page, without relying on hover states.
This means both touch and mouse users are able to intuitively navigate content and services.

Primary interaction colours

Interaction Blue

CSS: .int-blue
Sass: $color-int-blue
Hex: #1781E3
RGB: 23, 129, 227

Blue rollover

CSS: .int-blue--active
Sass: $color-int-blue--active
Hex: #0851DA
RGB: 8, 81, 218

Interaction Grey

CSS: .int-gray
Sass: $color-int-gray
Hex: #CFD5D9
RGB: 207, 213, 217

Grey rollover

CSS: .int-gray--active
Sass: $color-int-gray--active
Hex: #B1B9BE
RGB: 177, 185, 190

Secondary interaction colours

Interaction Green

CSS: .int-green
Sass: $color-int-green
Hex: #25B252
RGB: 37, 178, 82

Green rollover

CSS: .int-green--active
Sass: $color-int-green--active
Hex: #008236
RGB: 0, 130, 54

Interaction Red

CSS: .int-red
Sass: $color-int-red
Hex: #DD1122
RGB: 221, 17, 34

Red rollover

CSS: .int-red--active
Sass: $color-int-red--active
Hex: #BE0000
RGB: 190, 0, 0

Interaction Orange

CSS: .int-orange
Sass: $color-int-orange
Hex: #FF8B2E
RGB: 255, 139, 46

Orange rollover

CSS: .int-orange--active
Sass: $color-int-orange--active
Hex: #E86416
RGB: 232, 100, 22

Interaction colours in buttons
Interaction colours in alerts

Accent colours

Accent colours are used as accents to help enrich content and experiences while serving a functional purpose. They help to create visual links between content and can act as signifiers of content themes throughout services.

They’re most commonly used within cards and when displaying data in graphs and charts.

Turquoise

CSS: .turquoise
Sass: $color-turquoise
Hex: #0EABA9
RGB: 14, 171, 169

Turquoise rollover

CSS: .turqoise--active
Sass: $color-turquoise--active
Hex: #OC847E
RGB: 12, 132, 126

Azure

CSS: .azure
Sass: $color-azure
Hex: #1781E3
RGB: 23, 129, 227

Azure rollover

CSS: .azure--active
Sass: $color-azure--active
Hex: #0851DA
RGB: 8, 81, 218

Iris

CSS: .iris
Sass: $color-iris
Hex: #5944C6
RGB: 89, 68, 198

Iris rollover

CSS: .iris--active
Sass: $color-iris--active
Hex: #42389E
RGB: 66, 56, 1578

Orchid

CSS: .orchid
Sass: $color-orchid
Hex: #A63297
RGB: 166, 50, 151

Orchid rollover

CSS: .orchid--active
Sass: $color-orchid--active
Hex: #7F2879
RGB: 127, 40, 121

Pink

CSS: .pink
Sass: $color-pink
Hex: #E61E64
RGB: 230, 30, 100

Pink rollover

CSS: .pink--active
Sass: $color-pink--active
Hex: #BF1B5A
RGB: 191, 27, 90

Standard variants of the content colours should always be used first.

Only use the dark variants specifically as a pair with the standard colour, or when all standard colours are already in use in the same visual. For interactive elements where the standard variants of content colours are used, the dark variants can be used as rollovers.

Pie charts using accent colours
Cards using accent colours

Colour Tints

Tints of accent colours are available for use within extremely complete data sets, but should not be used in any other context.

Using full bleed colour

Full bleed colour can be used in a number of instances, either to complement content or to add emphasis to an element within a page.

Full bleed colour should be used sparingly and a conscious effort should be made to maintain the proportionate usage of colour outlined in the colour ratio diagram at the top of this page.

When pairing content colours full bleed with badges, the dark variant should be used for the background, and the standard variant used for the badge. This helps to give badges more prominence, and prevents the background colour from dominating.

Combining accent colours

Accent colours can be used on their own or in combination with other accent colours, but should not be combined with colours from the other palettes.

Azure is the same colour like Swisscom interaction blue. While Azure can be used as an Accent on page content be aware that it can interfere with interaction elements.

Text should always be white, and buttons should revert to the ‘on dark’ variant of the secondary button and avoid using the interaction colours for buttons on colour.

Interaction colours in buttons
Interaction colours in alerts

Wayfinding with colour

They help to create visual links between content and can act as signifiers of content themes throughout services.

```section_develop ```

All colours can be applied to text, icons, or backgrounds using the corresponding CSS class. A prefix bg- is required to set a background colour.

*/ /*doc --- title: Typography name: 01-foundation-05-typography-01-typography category: Foundation - Typography ---

For each typeface there are specific type size rules in place to help to maintain contrast and hierarchy between content. The guidance below shows the typesize, leading and weights that can be used. Limiting the number of different styles used will help to keep products clean and simple.

As a guidance we strongly recommend to optimize the solid centre width of your body text to a maximum of 700 pixels. Because having the right amount of characters on each line is key to the readability of your text.

```section_design ```

Rules

Typefaces

When designing for SDX, there are two typefaces to choose from – the Sans and the Serif – each of which are available in semi-light and semi-bold. The Sans is our primary typeface and is used across all applications. The Serif is Swisscom’s voice, and is only used in small select cases, such as pull quotes and editorial style headings.

The Sans
The Serif

Using colour and typography

Typography itself should only ever appear in the core and interaction color palettes. Content colours should never be used for typography. When using color backgrounds, white should be used for typography

colour and typography

The colour matrix demonstrates the accessibility of typefaces across the entire colour palette, at all specified sizes. Use the matrix to ensure your color choices are at least AA compliant.

Type hierachy and color

When creating layouts using typography, colour from the primary colour palette should be used to help give content hierachy. Content colours should never be used for typography.

Type hierachy colour guidance on light
Type hierachy colour guidance on dark

Minimum type padding

Each type size has a minimum padding that makes sure there is adequate space around text.

Minimum type padding

Letter-spacing

The letter spacing guide should be used to support the consistent application of type and to ensure that legibility is maintained at all sizes in all contexts. Smaller text should use increased letter-spacing to aid legibility, and larger text should use tighter letterspacing.

Letter-spacing

Similarly to letter-spacing, to aid legibility, a scaled system for selecting the weight of typography should be used. Smaller typography should be semi-light or semi-bold, while larger type should be semi-light at all times.

Letter-spacing
```section_develop ```

The SDX Library includes the two standard fonts TheSans and TheSerif. It uses it's responsiveness to automatically adjust the font-size and properties depending on a series of media queries.

Font Type Sans

The default style uses the TheSans font.

```htmlmixed

Headline 4: Swisscom intends to continue reducing roaming prices

Swisscom intends to continue reducing roaming prices

```

Font Type Serif

To change the font to TheSerif font-face add the class serif to any element that should be serif.

```htmlmixed

Headline 4: Swisscom intends to continue reducing roaming prices

Swisscom intends to continue reducing roaming prices

```

Font Weight

To change the font weight form the default weight Light to a different weight add the classes font--light, font--semi-light or font--semi-bold to the element.

```htmlmixed

Swisscom intends to continue reducing roaming prices

Swisscom intends to continue reducing roaming prices

Swisscom intends to continue reducing roaming prices

```

Headings

All HTML headings, from <h1> to <h6>, should be used to structure the page semantically correct. Make sure to use just a single one <h1 class="text-h1"> on the entire page and do not skip a heading only for design matters. Instead, use classes like class="text-h1" to make your heading look the way you want it.

```htmlmixed

I’m a H1

I’m a H2

I’m a H3

I’m semantically a H4 but I look like a H1

I’m semantically a H5 but I look like a H2
I’m semantically a H6 but I look like a H3
```

Display Headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading, a larger slightly more opinionated heading style.
To add a display heading add one of the following classes text-d1, text-d2 or text-d3 to the element.

```htmlmixed

Display 1: Swisscom intends to continue reducing roaming prices

Display 2: Swisscom intends to continue reducing roaming prices

Display 3: Swisscom intends to continue reducing roaming prices

```

Inline text elements

Texts are written in paragraphs <p>. The standard style in the <p> element is text-b1.
The following classes are available for changing the font-size: text-b1, text-b2 or text-sm

```htmlmixed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```

Styling for common inline HTML5 elements.

```htmlmixed

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

```

While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Text on light, gray and dark backgrounds

Light Background (Standard)

```htmlmixed

Display 1: Swisscom intends to continue reducing roaming prices

H1: Swisscom intends to continue reducing roaming prices

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```

Gray Background

```htmlmixed

Display 1: Swisscom intends to continue reducing roaming prices

H1: Swisscom intends to continue reducing roaming prices

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```

Dark Background

```htmlmixed

Display 1: Swisscom intends to continue reducing roaming prices

H1: Swisscom intends to continue reducing roaming prices

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` */ /*doc --- title: Grids name: 01-foundation-03-grid-01 category: Foundation - Grids ---

Different combinations of column widths and arrangements can be used to support the intention of the design. Uniform column widths create calm, functional layouts. Variation between column widths can create visually dynamic and exciting layouts.


```section_design ```

Rules

Breakpoints

Breakpoints

Device coverage

Device coverage

Layout options

1440 — 480px column usage combinations
<480px column usage combinations

Baseline grid

Our baseline dictates the horizontal positioning of typography across all screens within Swisscom services. No matter the screen width, margins or column width, the baseline grid is always set to 8px. This ensures a consistent treatment of type placement and line spacing across all products at all sizes.

Baseline grid

All typography, when using the defined sizes, will naturally align to the baseline grid. Graphic elements should aim to align to the baseline where possible but this isn’t mandatory.

Axis alignment

The concept of the Swisscom axis within SDX is derived from the Swisscom master brand, and the Life Form itself. Use the axis plotted on any grid column to create interesting and asymmetric layouts.

The axis alignment stems from the central axis of the Swisscom Life Form

Axis in application

Vertical aligment in an article
Vertical aligment in an article

For mobile breakpoints, the left edge of page content aligns to the central axis in the Life Form and is always the outside margin of the underlying grid.

Vertical alignment on smaller screens
```section_develop ```

The SDX library includes a responsive, mobile first 12 column grid system. It includes predefined classes for easy layout options and is based on Bootstrap's Grid component.

The grid is using a flexbox based system by default.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Look to the examples for applying these principles to your code: samples/grid.

Media queries

We use the following media queries in our Sass files to create the key breakpoints in our grid system.

Breakpoint Minimal container-width Maximal container-width Grid Column class
Ultra Large 1440px - col-ul-*
Extra Large 1280px 1439px col-xl-*
Large 1024px 1279px col-lg-*
Medium 768px 1023px col-md-*
Small 480px 767px col-sm-*
Extra Small 0px 479px col-xs-*

A sample for testing the various breakpoints is available at samples/grid.

Sample Stacked-to-horizontal

Using a set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

```htmlmixed
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
```

Flexbox grid system

The flexbox grid system behaves similar to the classic grid system, but with a few notable differences:

Auto-layout columns

Utilize breakpoint-specific column classes for equal-width columns. Add any number of .col-{breakpoint}s for each breakpoint you need and every column will be the same width.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to ul.

```htmlmixed
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
```

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

```htmlmixed
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
```

Variable width content

Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with "horizontal alignment" classes, is very useful for centering layouts with uneven column sizes as viewport width changes.

```htmlmixed
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
```

Responsive classes

The SDX grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small (xs), small (sm), medium (md), large (lg), extra large (xl) or ultra large (ul) devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col-xs and .col-xs-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col-xs.

The grid requires a class for full-width columns. If you have a .col-sm-6 and don’t add .col-xs-12, your xs grid will not render correctly.

```htmlmixed
col-xs
col-xs
col-xs
col-xs
col-xs-8
col-xs-4
``` ```htmlmixed
1 of 2 (stacked on mobile)
1 of 2 (stacked on mobile)
```

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

```htmlmixed
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
``` ```htmlmixed
One of three columns
One of three columns
One of three columns
```

Horizontal alignment

```htmlmixed
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
```

No gutters

The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

```htmlmixed
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
```

Reordering

Flex order

Use flexbox utilities for controlling the visual order of your content.

```htmlmixed
First, but unordered
Second, but last
Third, but first
```

Offsetting columns

Move columns to the right using offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

```htmlmixed
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
```

Push and pull

Easily change the order of our built-in grid columns with .push-md-* and .pull-md-* modifier classes.

```htmlmixed
.col-md-9 .push-md-3
.col-md-3 .pull-md-9
```

Sample no margin on Mobile Only

Using .full-width--mobile-only on any element will render them in full screen mode for mobile devices and tablet devices (the extra small to small range) only, whereas larger screens render normally.

```htmlmixed
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
``` */ /*doc --- title: Loading Spinner name: 02-components-090-loader-spinner-01 category: Components - Loading Spinner ---

The loading spinner helps to reassure users that a process is taking place. It should be used when offering a numeric explanation of progress isn’t necessary.
The loading spinner is built around a central axis and is split into two colours. As soon as the loading stroke hits the axis the color changes.

The loader spinner has two base sizes small and large for a variety of different uses.

```section_design ```

Variations

Sizes

The small spinner is used where space is limited, for example on input fields to indicate loading.

The larger loading spinner is used on page loads and larger screen takeovers. This will often be the only element on the page so it needs to be more prominent.

Rules

Axis

The loading spinner is built around an axis and is split into two colours. As soon as the loading stroke hits the axis it changes the color. Please refer to the animation assets for behaviour and movement references.

Axis

Inside elements

The smaller spinner can be used inside elements, particularly when using AJAX which can take an undetermined amount of time. This ensures the user that an action is in progress.

Loading spinner inside elements
```section_develop ``` ```htmlmixed_webcomponent_sdx-loading-spinner_accessible ``` */ /*doc --- title: Dividers name: 02-components-060-divider category: Components - Dividers ---

Dividers help to establish a clear hierarchy. Placing content between dividers helps to create clear groups of related information. Dividers are especially useful in small screen experiences, such as mobile, where there is less opportunity to establish visual hierarchy using type or scale alone.

Light gray divider

Mid gray divider

Dark gray divider

```section_design ```

Variations

Grey dividers

There are three tiers of contrast on light backgrounds for divider lines and also a dark variant. Pick the most appropriate for your designs.

Dark gray divider
White (dark variant)

Rules

Vertical spacing

The vertical spacing between dividers should be 32px.

Vertical spacing

Minimum width

The divider is always 100% of the text width.

Minimum width
```section_develop ```

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

SDX dividers default to "full-bleed", eg (full width).

```htmlmixed_accessible

This text is above the divider

This text is below the divider

```

Light background dividers

There are three tiers of contrast on light backgrounds for divider lines, pick the most appropriate for your designs.

```htmlmixed_accessible

Light gray divider

Mid gray divider

Dark gray divider

```

Dark background dividers

There is only one contrast option on darker backgrounds

```htmlmixed_accessible

This text is above the divider

This text is below the divider

``` */ /*doc --- title: Text Links name: 02-components-185-text-links category: Components - Text Links ---

Introduction

Text links are the simplest interactive element. They help to clearly label interactive elements within text, footers and navigation.

This is some description text and a text link

```section_design ```

Variations

Standard

In page text links use the Swisscom interaction blue. This helps to differentiate them from standard body text and headings, without the need to use buttons across all CTAs.

An 18px unvisited link (top) and an 18px clicked/hover state link (bottom)
Dark variants
An 16px unvisited link (top) and an 16px clicked/hover state link (bottom)
Dark variants

Link list

When you display more than one link it is shown as a link list. The link list has a chevron to the right before each link element.

Example of a link list

Navigation

Navigation text links differ from conventional text links. Their static state is Swisscom Navy. They are positioning and scaled differently from conventional page text links to give them greater page hierarchy.

An 16px unvisited link (top) and an 16px clicked/hover state link (bottom)

Rules

Insertion

Insertion spacing is 8px between text and the list element.

Space between elements

Typography

Typography standard 18px
Typography standard 18px dark variant
Typography standard 16px
Typography standard 16px dark variant
Typography navigation
Typography linked list
```section_develop ```

In page text links are supported on both the <a> and <button> tag by applying the link class to the element.

```htmlmixed

This is some description text above the text link

Text link Text link ```

Text links can be used in text paragraphs.

```htmlmixed

This is a link in a inline text paragraph.

This is a link in a inline text paragraph.

This is a link in a inline text paragraph.

```

The link component automatically adjusts it's styling if it's used in conjunction with the dark background.

```htmlmixed_accessible

This is some description text above the text link

Text link
```

Force white link on any dark backgrounds.

```htmlmixed
Text link
``` */ /*doc --- title: Buttons name: 02-components-015-button-01-buttons category: Components - Buttons ---

Buttons are used as calls to action in page, they contain text and icons that help explain the buttons functionality. They’re more visually dominant than text links and help to highlight and clarify elements that are interactive.

```section_design ```

Variations

Primary Button

Primary buttons are used in the majority of cases. The interaction blue signifies that the buttons are clickable and have a hover state. Icons can be used in buttons to help give their funcationality more clarity at a glance.





Light variant




Dark Variant

Secondary button

Secondary buttons are used in conjunction with primary buttons to indicate that the button is of lower priority.





Light variant




Dark Variant

Confirmation button

Confirmation buttons are used for the final step in a process to indicate that an action is final and significant. For example, an ‘Order’ button at the end of a checkout process or the upload button for a file.





Light variant




Dark Variant

Image backgrounds

Buttons can be used over imagery. Always ensure high contrast between the imagery and the buttons by using the appropriate light or dark button variation.

Light Variant
Dark Variant

Rules

Buttons can be used over imagery. Always ensure high contrast between the imagery and the buttons by using the appropriate light or dark button variation.

Minimum Size

Buttons all have a minimum widths regardless of the word length, this ensures it all our buttons have a standard size.

Minimum button width

Optical centering

Buttons with icons should be optically aligned to ensure that the text and icon as a pair are aligned to the centre of the button.

Optical alignment with icons

Relationship with other buttons

Buttons feature a minimum of 14px padding between each other to help create clear click targets.

Relationship with other buttons

Full width spacing

Buttons can also be used full width within a container or aligning to the grid. The text remains centrally aligned.

Full width buttons

Typography

Light Variant
Dark Variant

Scroll to Top Button

Scroll to Top Button on differently coloured backgrounds
```section_develop ```

Button usage

Use the button class within the <button> element. This is very important, because of all the built-in events (e.g. keyboard events) of the button tag.

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

For an example of how to use buttons in a form, please see samples/form.

```htmlmixed_accessible
Link
```

Dark background

Buttons on dark background.

```htmlmixed_accessible
Link
```

Variations

There are three basic buttons styles: Primary, secondary and confirm. Simply apply the style modifier class for the desired action.

```htmlmixed_accessible
```

Dark background

Button styles on dark background.

```htmlmixed_accessible
```

Responsive Button

To make a button responsive add the button--responsive modifier.

```htmlmixed_accessible
```

Button with Icons

```htmlmixed_accessible
```

Full Width Button

Full width buttons should only be used in smaller containers. Example: sidebar
To make a button use 100% of the container width add the button--full modifier.

```htmlmixed_accessible
```

Button Group

Buttons should be placed inside a button-group. Button groups with the button-group--responsive modifier are always right aligned and reversed in order. This makes the first button in the DOM (primary) displayed as the first button on the right on desktops and on the top on mobiles.

Full Width of button groups

To make the buttons use the full width of a group, add the modifier button-group--fill.

```htmlmixed_accessible
```

Scroll to Top Button

This web component should preferrably be put either right to the beginning or the end within the body-tag, but can be put anywhere in between if need be. ```htmlmixed_webcomponent_sdx-scroll-to-top_no_preview ``` */ /*doc --- title: Input Fields name: 02-components-075-form-01-inputfields category: Components - Input Fields ---

Input fields allow users to enter data. They have a standardized height and corner radius treatment, but are flexible in width. Input fields are based on the grid.

If any validation is needed, you can display this in addition.

```section_design ```

Input Fields

Input fields have different states to guide users when interacting with them. The main advantage with this input field variant is that additional descriptions for conventions (e.g. telephone number) can be given.

There can be validations on input fields: A green tick appears when the content is validated. E.g. if the system has to validate the users` input of the “@” within an email address.

An error message occurs if the user input is invalid or breaks input rules, such as special characters and passwords (which should be introduced to the user to avoid errors in advance.

Rules

Spacing

There is an 8px margin between the label and the input field itself. Between each input field there is a 24px margin. Inside the input field the margin is 16px.

Spacing fixed labels

Autocomplete

Autocompletion speeds up the users interaction with the computer when it correctly predicts the word the user intends to enter – after 3 characters have been typed into the text field (mostly, this content is dynamic and comes from a database). Whereas a filterable drop-down allows the users to filter a large list of choices – like a country selector – by typing in some characters (mostly, this content is static within the website).

Autocompletion

Typography

Typography
```section_develop ```

Basic usage

```htmlmixed_accessible
```

For an example of how to use input fields in a form, please see samples/form.

Fixed Height

Adding the class input-field--fixed to the input-field element will prevent the input field to animate the formfield, when it has focus.

```htmlmixed_accessible
```

Read-only and disabled input fields.

If you want to block the user from changing an input field add the class readonly or disabled to the input element.

The difference between the readonly and disabled attribute is that in readonly the user can tab to the element and copy the text from the input field.

```htmlmixed
```

Validate input fields

Add the class validate to the input element to validate the field. The validate class leverages HTML5 validation and will add a valid and invalid class accordingly. If you don't want the valid and invalid states, just remove the validate class from your inputs.

If you have custom validations on a field add the valid or invalid class to the input element depending on your validation result.

Mark fields with asterix (\*) to denote them as required, make sure to explain the meaning of the asterix in a legend below the form in the current customer language.

```htmlmixed_accessible
Error
Error Message
Error Message
Error Message
* Mandatory field
```

Autocomplete input fields

```htmlmixed ActionScript AppleScript Asp Assembly BASIC Batch C C++ CSS Clojure COBOL ColdFusion Erlang Fortran Groovy Haskell HTML Java JavaScript Lisp Perl PHP PowerShell Python Ruby Scala Scheme SQL TeX XML AnyScript & OtherScript ```

Here is an example of how to connect the autocomplete to a real server (in this case, Apple iTunes):

This example is written in Stencil, but its principle can be applied to React, Angular, Vue or others:

```javascript_no_preview export class ItunesAutocomplete { @State() artists = [] @State() loading = false fetch(keyword) { // Ensure keyword length if (keyword.length < 3) { return } // Loading spinner this.loading = true // Request data fetch("https://itunes.apple.com/search?term=" + encodeURI(keyword)} + "&entity=musicArtist&limit=10", { method: "post" }) .then((payload) => payload.json()) .then((payload) => this.artists = payload.results.map((result) => result.artistName)) .then(() => this.loading = false) } render() { return ( this.fetch(selection[0])} keyboardBehavior="autocomplete" filterFunction={() => true} // iTunes already filters, bypass local filter loading={this.loading} > {this.artists.map((artist) => {artist} )} ) } } ```

Date input fields

JSON configuration options can be passed to the flatpickr date picker library by setting the data-options attribute. To enable/disable dates by function or Date, you need to pass the options to the InputField using the JavaScript API. More examples: https://flatpickr.js.org/examples/

```htmlmixed_accessible
```

Example of a form in a responsive grid

```htmlmixed_accessible
``` */ /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ /*doc --- title: Radio Buttons name: 02-components-140-form-30-radiobuttons category: Components - Radio Buttons ---

Radio buttons are used to ask the user multiple choice questions where they can make a single selection. Because radio buttons list out the options the user has, it provides a clearer overview of their choices than a dropdown menu. Radio buttons are also useful when the text label is long and might be obscured in a dropdown menu. If you are offering more than four options to users, consider using a dropdown menu.

Option 1
This is my supportive text.
Option 2
```section_design ```

Variations

States

Colour and the dot indicate that a radio button is selected, which means that it is active. In addition it has hover effects.

As radio buttons are a mandatory choice and very often preselected there is normally no need of an error state. Only in rare cases where radiobuttons are not preselected there is a need for an error state.

Normal and error states

Multiline and supporting line of text

Multi-line labels have so much text that they need more than one line. For consistency reasons the same font size is used in all lines.
If a description with more detail is needed, a description text with smaller font size is displayed below the label text.

Multiline of text
Supporting line of text

Radio buttons side by side

Radio button can also be displayed next to each other.

Radio buttons side by side

Rules

Up to four options on mobile

If you are offering more than four options to users, consider using a dropdown menu.

Spacings

The horizontal spacing between the radio buttons itself and the label is 16px.
The vertical spacing between different radio buttons is 24px.

Spacing between radio buttons
Spacing between radio buttons beside each other
Spaces for Multi-line labels

Typography

Typography
Typography of supporting text
```section_develop ``` ```htmlmixed_webcomponent_sdx-input-item_accessible Option 1 Option 2 Option 3
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
Option 3
You can't choose me
```

For an example of how to use radio buttons in a form, please see samples/form.

Validate radio buttons

```htmlmixed_accessible
Error Message
``` */ /*doc --- title: Checkboxes name: 02-components-050-form-20-checkboxes category: Components - Checkboxes ---

Checkboxes let users select from a small set of options, or make a binary decision (for example accepting terms and conditions).

Option 1
This is my supportive text.
Option 2
```section_design ```

Variations

Checkbox states

Colour and the check indicate that a checkbox is selected, which means that it is active. In addition it has hover effects.

As checkboxes are an optional choice there is normally no need of an error state. There are rare cases (e.g. in a survey) where the user has to select at least one checkbox.

Checkbox states
Error state

Multi-line and supporting description label

Multi-line labels have so much text that they need more than one line. For consistency reasons the same font size is used in all lines.
If a description with more detail is needed, a description text with smaller font size is displayed below the label text.

Multi-line label
Supporting description label

Checkboxes side by side

Checkboxes can also be displayed next to each other.

Checkboxes side by side

Rules

Minimum spacing

The horizontal spacing between the checkbox itself and the label is 16px.
The vertical spacing between different checkboxes is 24px.

Spacing
Spacing multi-line
Spacing side by side checkboxes

Typography

Typography
Checkboxes with supporting description label
```section_develop ``` ```htmlmixed_webcomponent_sdx-input-item_accessible Option 1
Option 1 Option 2 Option 3
Option 1
Multiple lines are also supported
Option 2
Additional description text for more information.
Option 3
You can't check me.
Option 4
You can't uncheck me.
```

For an example of how to use checkboxes in a form, please see samples/form.

Validate checkboxes

```htmlmixed_accessible
Error Message

Supporting description text

Error Message
```

Validate checkbox group

```htmlmixed_accessible
Error Message
Error Message
``` */ /*doc --- title: Menu (dropdown) name: 02-components-095-select-40-overview category: Components - Menu (dropdown) ---

Use dropdown menus to contain information without overwhelming the user. When asking users to make multiple separate selections in forms or settings, dropdown menus help to reduce the amount of information displayed on screen at any one time. This makes content more digestible and focused.

Option 1 Option 2 Option 3 Option 4 Option 5
Option 1 Option 2 Option 3 Option 4 Option 5
```section_design ```

Rules

Space between dropdowns

A minimum of 16px are required between dropdown boxes.

16px are required between dropdown boxes

Relationship with other elements

Each collection of dropdown labels has 24px between them and other elements.

Relationship with other elements
```section_develop ``` ```htmlmixed_webcomponent_sdx-select Saab Volvo BMW Mercedes VW Chevrolet Chrysler Mazda MG Toyota ```

For more sophisticated examples, please see samples/form.

Variations

On a dark background

```htmlmixed
Option 1 Option 2 Option 3
```

Validate

```htmlmixed
Error Message
``` */ /*doc --- title: Switches name: 02-components-170-switches-01-styles category: Components - Switches ---

Switches are used to change the status of an option or setting between on (active) and off (inactive).
They’re always shown with descriptive text thats used to explain their function, and feature a green active state to help confirm their status.

Enabled switches

Disabled switches

```section_design ```

Variations

Off states

When in the off state, switches are positioned to the left, with a grey keyline to indicate their sliding behavior. A grey keyline around the white button helps to maintain the accessibility of the switch on all background colours.

Inactive states

On states

In their on state, switches move to the right. As they transition into position, a green space is revealed behind the button. Using the interaction green helps to confirm the active state of the switch without the need for additional labelling.

Active states

Rules

Vertical spacing

There is a 12px margin between switches.

Spacing between listed switches

Horizontal spacing

There is 20px between switches and labels.

Spacing between switches and text labels

Typography

Typography
Dark variant
```section_develop ```

Use the following switch as a simple on/off toggle switch.

```htmlmixed_accessible
```

Switch with label on the left side

```htmlmixed_accessible
```

Switch on dark backgrounds

Switches are also available on dark backgrounds, just annotate the parent background element with the .bg--dark class and the switches will automatically adjust their styling accoordingly.

```htmlmixed_accessible
``` */ /*doc --- title: Sliders name: 02-components-160-range-01-rangeslider category: Components - Sliders ---

Sliders are used to control settings across a scale. Standard sliders feature fixed points on the scale, free sliders give users complete control over more specific variables like percentages.

```section_design ```

Variations

Step slider

Sliders use the same interaction states as primary CTAs, using the interaction palette to signify their state.

Static state
Dark variant
Hover state
Dark variant
On click/drag
Dark variant
Disabled state
ark variant

Step sliders with hints

Step sliders have hover states indicating the different steps along the scale with a dot hint. Users can click on them without the need to drag the slider.

Active slider with step rollover

Sliders with switches

Using switches can disable or enable a slider.

Slider with activity switch

Free slider

Free sliders have no fixed step options and give users a much wider range of selection options.

Static state
Dark variant
Hover state/drag
Dark variant
On click/drag
Dark variant
Disabled state
Dark variant

Rules

Breakpoints

When the screen becomes too small for the slider, it becomes a drop down menu.

Drop down on smaller devices

Vertical spacing

Slider containers should be seperated by 16px of verticle spacing.

Space between sliders

Clickable areas

A user can jump to any step along the slider without using the handle. This is done by clicking/tapping on clickable areas between the steps. A dot hint will appear on the slider bar to indicate where a user has activated.

Clickable areas

Typography

Typography
Dark variant
```section_develop ```

Step slider with data options

```htmlmixed
``` ```htmlmixed
``` ```htmlmixed
```

Ticks without explicit labels

If options are provided but no labels are specified the range component automatically generates the labels based on the provided options value.

```htmlmixed
```

Disabled step slider

```htmlmixed
```

Dark background

Step slider on dark background.

```htmlmixed
```

Disabled step slider

```htmlmixed
```

Free Slider (Light)

The light style of the free slider. Use the formatter parameter to customize output formatting on the thumb thumbnail and the output label. In order for the component to find your formatting function it has to be available globally.

```htmlmixed
0
0
```

Dark background

Slider on dark background.

```htmlmixed
0
0
``` */ /*doc --- title: Segmented Controls name: 02-components-151-segmented-controls category: Components - Segmented Controls ---

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.

```section_design ```

Pictures with spacings and typography will be updated.

```section_develop ```

Segmented Controls

The segmented controls should be used to select only one option among a certain group.

```htmlmixed_accessible
```

Segmented Controls with icon

```htmlmixed_accessible
```

Segmented Controls with centered icon and text

```htmlmixed_accessible
```

Segmented Controls with images

```htmlmixed_accessible
``` */ /*doc --- title: Lists name: 02-components-080-lists category: Components - Lists ---

Styled lists can be used to help group points together and give them prominence within the page hierarchy. There are two types of lists; structured lists that are numbered and unstructured lists that use bullet points.

```section_design ```

Variations

Ordered list

Single line list
Multi-line list

Unordered list

Single line list
Multi-line list

Rules

Alignment

Numbers should be aligned to the baseline of the text. Bullets are aligned to the vertical centre point of the text.

Ordered list alignment
Unordered list alignment

Vertical spacing between paragraphs or text and lists is set to 36px, and is measured from descender to ascender.

Space between elements

Insertion

Insertion spacing is 8px between text and the list element.

Insertion spacing

Typography

Typography ordered list
Typography unordered list
```section_develop ```

Bullet list

Bullet list single line

```htmlmixed_accessible

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```

Bullet list multi line

```htmlmixed_accessible

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```

Numbered list

Numbered list single line

```htmlmixed_accessible

Lorem ipsum dolor sit amet

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit atedur, labore aliqua.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  4. Lorem ipsum dolor sit atedur, labore aliqua.
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  6. Lorem ipsum dolor sit atedur, labore aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```

Numbered list multi line

```htmlmixed_accessible

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` */ /*doc --- title: Badges name: 02-components-010-badges-01-badges category: Components - Badges ---

Badges are small and subtle notification indicators used to provide users with additional information without disrupting their experience.

They can be used to indicate unread emails, changes to settings, and prompting actions such as refreshing as a page. They should always feature one of the three interaction colours, helping to clarify importance of the notification/alert.

5 new messages
8 new informations
654 new informations
Product added
Image description
8 new informations
Image description
654 new informations
Image description
like
```section_design ```

Variations

Icon badges

Icon badges are used for notifications that reference functionality, such as an unread mail or new product in the user’s basket. These are related to a user’s actions.

Color-coded icon notifications (top) and their respective hover states (bottom)
Dark variants
Color-coded icon notifications (top) and their respective hover states (bottom)
Dark variants

Avatar badges

Avatar badges relate to the user’s account.. This could be the user receiving a ‘like’ for a comment, or to signify an account authorisation. They’re used in conjunction with message notifications.

Color-coded icon notifications (top) and their respective hover states (bottom)
Dark variants

Message badge

Message notifications are often used in conjunction with avatar badges, and appear for a short time in the browser. They can simultaneously trigger an avatar badge notification.

Color-coded text notifications (top) and their respective hover states (bottom)
Dark variants

Rules

Positioning

Written alerts are positioned halfway over the top navigation and horizontally centered.

Positioning

Icon alignment

Badges are always positioned on the right axis of the icon.

Icon alignment is always positioned on the right axis of the icon

Typography

Typography
```section_develop ```

Badge types

There are five types of badges.

```htmlmixed_accessible
5 new messages
account 8 new informations
account 654 new informations
shopping-trolley Product added
Image description
8 new informations
Image description
654 new informations
Image description
like
```

Dark Background

Badges on dark background.

```htmlmixed_accessible
5 new messages
account 8 new informations
account 654 new informations
account Product added
Image description
8 new informations
Image description
654 new informations
Image description
like
```

Badge colours

General Notifications

```htmlmixed_accessible
5 new messages
account 2 new informations
Image description
like
```

Confirmations

```htmlmixed
5 new messages
account 2 new informations
Image description
ok
```

Alerts and notifications

```htmlmixed
5 new messages
account 2 new informations
Image description
caution
``` */ /*doc --- title: Cards name: 02-components-020-cards-01-cards category: Components - Cards ---

Cards are used to contain small amounts of focused information. They help when establishing hierarchy within a page or application because they stand out from normal page content. Cards can contain images, text and interactive elements such as buttons and text links. Cards can be colour coded to establish visual different between multiple card types within the same view.

Data

Today 13:21

Global roaming is now switched on

Data

Today 13:21

Global roaming is now switched on

```section_design ```

Variations

Actionable notification cards

Notification card with text-based content
Grey variant
Notification card with promotional imagery
Grey variant
Notification card with full width image
Grey variant
Notification card with full width image at top
Grey variant

Multi-column card

Multi-column cards are designed to house multiple images with a single concept, e.g. ‘most recent’, ‘most popular’, ‘trending’, etc.

A gridded multi-column card
Grey variant

Documents card

Document cards are designed to house complex information. They will often have a deeper level navigation spanning across multiple columns and require a strong typographic hierarchy.

Documents card with outgoing links
Grey variant
Timetable example with icons and outgoing links
Grey variant

Rules

Vertical spacing

The first card has a top margin of 24px and all cards beneath have a bottom margin of 16px.

Vertical spacing

Horizontal spacing

The first card has a top margin of 24px and all cards beneath have a bottom margin of 16px.

Horizontal spacing

8 column grid

All cards are built on an 8 column grid structure that helps make them flexible across different grid sizes. Content inside the card can vary in size and padding to fit into the grid.

8 column grid

Layout variations

Having a flexible grid system allows us to organise content within the card in various ways, fitting the needs of more content scenarios such as the use of icons and images.

Layout variations

Typography

Typography
```section_develop ```

Cards are used to group and smaller pieces of contain content in page, and give them extra emphasis. Cards are colour coded based on the content they’re surfacing.

How to use cards

Use cards to give content clearer separation from the rest of the content in page. With the addition of colour labelling, cards also helps to categorise content and makes wayfinding throughout products clearer.

8 column grid

All cards are built on an 8 column grid structure that helps make them flexible across different grid sizes. Content placed inside a card can change in size and padding to fit the variations in margin width and column width of the grid for the page that they're place inside. Use class row and classes col-1 to col-8 for the card grid.

Clickable Cards

Cards are by default not clickable. To make a card clickable add the class card--clickable to the card.

```htmlmixed_accessible

Data

Today 13:21

Global roaming is now switched on

Data

Today 13:21

Global roaming is now switched on

```

Corners

To change the corners of the card to rounded or not rounded, set the class card--rounded or card--not-rounded to the card.

```htmlmixed_accessible

Swisscom TV

Today 13:21

We use our users’ data responsibly, to deliver relevant experiences. Find out more

Swisscom TV

Today 13:21

We use our users’ data responsibly, to deliver relevant experiences. Find out more

```

Colours

Cards can be colour coded to establish visual different between multiple card types within the same view.

```htmlmixed_accessible

Data

Today 13:21

We use our users data responsibly, to deliver relevant experiences.

Data

Today 13:21

We use our users data responsibly, to deliver relevant experiences.

Data

Today 13:21

We use our users data responsibly, to deliver relevant experiences.

Data

Today 13:21

We use our users data responsibly, to deliver relevant experiences.

Data

Today 13:21

We use our users data responsibly, to deliver relevant experiences.

Data

Today 13:21

We use our users data responsibly, to deliver relevant experiences.

```

Notification Cards

Notification cards have by default rounded corners. If you want the card to have no rounded corners add the class card--not-rounded to the card.

General Notification Card

```htmlmixed_accessible

Data

Today 13:21

Global roaming is now switched on

Data

Today 13:21

Global roaming is now switched on

```

Actionable Notification Cards

```htmlmixed_accessible

Swisscom TV

Today 13:21

Download Swisscom TV 2.0 app on phone to view all your TV stats and usage

Swisscom TV 2.0

Swisscom TV

Today 13:21

Download Swisscom TV 2.0 app on phone to view all your TV stats and usage

Swisscom TV 2.0
```

Image Top Notification Card

```htmlmixed_accessible

Swisscom TV

Today 13:21

We use our users’ data responsibly, to deliver relevant experiences. Find out more

Swisscom TV

Today 13:21

We use our users’ data responsibly, to deliver relevant experiences. Find out more

```

Image Bottom Notification Card

```htmlmixed_accessible

Swisscom TV

Today 13:21

We use our users’ data responsibly, to deliver relevant experiences. Find out more

Swisscom TV

Today 13:21

We use our users’ data responsibly, to deliver relevant experiences. Find out more

```

Promo Notification Card

```htmlmixed_accessible

Offers

Today 13:21
Samsung Galaxy S6

Samsung Galaxy S6, 99 CHF monthly with our M tariff Find out more

Offers

Today 13:21
Samsung Galaxy S6

Samsung Galaxy S6, 99 CHF monthly with our M tariff Find out more

```

Notes Notification Card

```htmlmixed_accessible

Swisscom TV

Today 13:21

Combine your NATEL® infinity subscription with NATEL® data. Your benefits: greater speeds and data volume with any device, regardless of the location. You also benefit automatically from a monthly discount.

Swisscom TV

Today 13:21

Combine your NATEL® infinity subscription with NATEL® data. Your benefits: greater speeds and data volume with any device, regardless of the location. You also benefit automatically from a monthly discount.

```

Upload Cards

Upload cards have by default not rounded corners. If you want the card to have rounded corners add the class card--rounded to the card.

Uploaded Photos Card

```htmlmixed_accessible

Most recently uploaded photos

Mobileuser
Mobileuser
Mobileuser
Mobileuser
```

Uploaded Files Card

```htmlmixed
Recently uploaded files
pdf-document
sdx_grid.pdf
27.04.2016
12:28
word-document
sdx_grid.docx
27.04.2016
12:28
```

Documents Cards

Document cards have by default not rounded corners. If you want the card to have rounded corners add the class card--rounded to the card.

Documents Card

```htmlmixed
Documents
powerpoint-document

Swisscom live erleben

26.03.2016
word-document

Power Yoga

21.04.2016
excel-document

Swisscom Management Event

27.04.2016
pdf-document

Swisscom live erleben

27.04.2016
word-document

Swisscom live erleben

27.04.2016
```

Travel Card

```htmlmixed
Travel

Next trains

from Bern Station

in 5 min

17:45

IR 2529 nach

Luzern

in 5 min

17:45

IR 2529 nach

Luzern

in 5 min

17:45

IR 2529 nach

Luzern

in 5 min

17:45

IR 2529 nach

Luzern
```

News Cards

The news card is available in the default and the dark style.

```htmlmixed_accessible
Swisscom TV

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

likes9
comments11
favorites4
Swisscom TV

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

likes9
comments11
favorites4
```

Linkbox with icon

```htmlmixed
WLAN

Switch on WLAN

WLAN password and settings
```

Linkbox without truncate

```htmlmixed
Swisscom public WLAN

Surf the internet with your tablet, notebook or smartphone at hotspots.
```

Linkbox with additional text element and link

```htmlmixed
Passwords & login

Change Swisscom Login password
Please update your password here
```

Linkbox no background

```htmlmixed

iPhone 7

Settings, SIM-Options, PUK

MobilePay

Manage EasyPay, Natel®Pay-Options

Devices and SIM

Settings, SIM-Options, PUK

8

Technical Support

Help and Support
```

Action Message Card

```htmlmixed_accessible
This is an information message

Export your product list and learn more about your products. Product list with more details

```

Info Message Card

```htmlmixed_accessible
This is an information message

Improve your WLAN quality

With the help of the My Swisscom Assistant you can improve your WLAN quality.

```

Success Message Card

```htmlmixed_accessible
This is a success message

Your registration has succeeded

To resend your verification e-mail click here.

```

Important Message Card

```htmlmixed_accessible
This is a warning message

Router problems

Your DSL router cannot be reached. Therefore, it is only possible to view or print your data at the moment.

```

Alert Message Card

```htmlmixed_accessible
This is an error message

COMBOX® not found

No COMBOX® could be found with the number 079 12355 88. Not all COMBOX®-numbers can be displayed.

```

Message Card with huge content (to be used only for message cards with a title)

Here you have the option to align the content on the left

```htmlmixed_accessible
This is a warning message

Router problems

Your DSL router cannot be reached. Therefore, it is only possible to view or print your data at the moment. If you would like to change your data please ensure that your DSL router is switched on. If this warning also appears when the DSL router is switched on, please log in to the Customer Center to make changes later.

``` */ /*doc --- title: Loading Bar name: 02-components-085-loader-bar-01 category: Components - Loading Bar ---

Loading bars are percentage based data visualisations that show users how far along a process they are, for example file upload.

TestFile.jpg
50%
of 1.5MB
```section_design ```

Variations

Standard

The green bar indicates the percentage of a task that is underway.

Loading bar with 30% completed

Completed

When completed, the right text with the percentage switches to green

TestFile.jpg
100%
of 1.5MB

Rules

Bars and data

Bars containing data should have rounded ends. The bar that indicates data should always have a flat end.

Rounded edge bar and flat edge data

Typography

Typography
```section_develop ```

The SDX loading bar component with support for displaying the current progress as a bar, and with optional detail captions.

```htmlmixed
File_name.jpg
70%
of 1.5MB
```

Loader without detail text

```htmlmixed
```

Loader bar on dark backgrounds

Loader spinners are also available on dark backgrounds, just annotate the parent background element with the .bg--dark class and the loader will automatically adjust their styling accordingly.

```htmlmixed
File_name.jpg
70% of 1.5MB
```

Loading Bar Component

To use update the loader bar component from JavaScript use the provided LoaderBar JavaScript component.

```htmlmixed_no_preview ```

Updating progress

To update the progress of the LoaderBar set the progess property to the desired value in the range from 0..1.

Set the filename

The filename can be set using the `filename` property.

Note: If the detail element is not defined in your markup, setting the filename will cause an error to be thrown.

Set the file size

The file size can be set using the `fileSize` property.

Note: If the detail element is not defined in your markup, setting the fileSize will cause an error to be thrown.

*/ /*doc --- title: Status name: 02-components-165-status category: Components - Status --- ```htmlmixed_accessible

```

Example usage for unread/read messages:

```htmlmixed_accessible
Status Name Subject Date
Aria Stark On the road 23.05.1910
John Snow Winter 11.01.1910
``` */ /*doc --- title: Modals name: 02-components-105-modals-01-overview category: Components - Modals ---

Modals are pop up windows that are used to delivery timely information, or request action from users.

A responsive test page for the Modal dialog: samples/modal.

```section_design ```

Variations

Standard modals

For devices over 768px wide use modal windows with side by side CTAs. Mobile modals use full width and stacked CTA’s to save horizontal space.
Buttons align right on modals used for >768px devices.

768px uses side by size modals
768px modal view uses stacked CTA to save horizontal space

Icon modal

The icon modal varies in sizes, depending on the number of icons inside. These icons are distibuted evenly across the modal. When displaying more than five icons, a dividing line helps to separate the rows of icons.

Modal with two icons
Modal with three icons

Rules

Overlay

The ovelay is a globally 40% #333333 on all modal styles. The modal is always vertically centered within the viewport.

Background overlay color

Stacked buttons

Use no more than three stack buttons to avoid the modal getting too long.

Stacked buttons

Typography

Typography
```section_develop ```

Modals are used to display content in a layer above the app. There can only be one active modal dialog at a given time.

Interactive sample

A responsive test page for the Modal dialog is available at samples/modal. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.

Usage

There are serveral options for opening and closing a modal dialog, either use the Modal JavaScript component directly and call the open() and close() methods on the component; or add a button with the class modal-trigger and a href attribute with the id of the target modal dialog.

```htmlmixed ```

To close the dialog either call close() on the component manually or apply either the modal-close or modal-cancel class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.

Modal dialog with two buttons

```htmlmixed
```

Modal dialog with three buttons

```htmlmixed
``` */ /*doc --- title: Menu (flyout and contextual) name: 02-components-100-menu-01-flyout category: Components - Menu (flyout and contextual) ---

Flyout and contextual menus are used to house additional functionality and content within various different contexts. They can be used to house quick links within cards, profile information and settings, as well as to provide additional contextual functionality.

Deutsch English Français Italiano
```section_design ```

Variations

Regular flyout menu

Regular menus, or ‘flyouts’ are used to reveal functionality that’s behind an icon other than the navigation, such as settings and preferences, or glance views of your basket.

Regular flyout
Regular flyout with hover on first nav item

Flyout with any content

These menus can also be used to house any kind of content, e.g. text, and often feature titles to give a welcome message or title to explain the purpose of the menu. They can also contain a call to action (CTA), following the conventional logic for buttons.

Flyout with any content

Profile menu

Profile menus are the most complex form of menu, handling three different types of content in a single view. They feature listed offers contained within a grey panel, short text passages to give information to the user, and listed text links and CTAs.

Three column profile menu

Basket menu

Basket menus feature a two column structure to help house more complex information. These included the use of thumbnail images, product names, descriptions and price, as well as running totals. They also contain CTAs for checkout.

Regular flyout

Contextual menus

Contextual menus are used to surface additional functionality relevant to a page on native applications, while still prioritising a key function that is most commonly used in that instance. The additional functionality is hidden inside an ellipsis icon.

When placed in a button, they can be fixed to the bottom of the viewport. This makes it easy and quick for the user.

Closed contextual menu
Open contextual menu

Contextual flyout menu

Contextual flyout menus are used for in page functionality on web based applications. They can be global to a page, or be fixed to an element on the page to reveal additional functionality specific to that element.

Regular flyout
Regular flyout with hover on first list item

Rules

Spacing around menus

All menus have a margin of 24px around the element.

Spacing around menus

Grid structure

Profile menus follow the Swisscom grid, with the account sub navigation only ever using two columns. Promotional content can vary in size, typically taking up 2 or 3 columns.

Grid structure

Typography

Grid structure
```section_develop ```

Flyout Menu

Flyout Menus are used to reveal functionality that’s behind an icon other than the navigation, such as settings and preferences, or glance views of your basket.

```htmlmixed_webcomponent_sdx-menu-flyout_accessible Deutsch English Français Italiano Esperanto ```

Flyout with any content

These menus can also be used to house any kind of content. It is recommended to give them a width to make them fit your content. NOTE: Since they're responsive, they will change their width on mobiles, when there's not enough space. So make sure to create the content mobile-first.

```htmlmixed_playground_accessible

Welcome to My Swisscom

Log in to manage your invoices, products, orders and see more offers
```

Contextual Menu

Contextual menus are used to surface additional functionality relevant to a page on native applications, while still prioritising a key function that is most commonly used in that instance. The additional functionality is hidden inside an ellipsis icon.

NOTE: This component should only be used on the phone breakpoint and is not intended to be used on tablets and desktop breakpoints. For tablets and desktop it is recommended to use a flyout menu instead.

```htmlmixed
Check voicemail
``` */ /*doc --- title: Notifications (header) name: 02-components-125-notification-header-01-overview category: Components - Notifications (header) ---

Notification headers are colored strips which run across the top of a product, beneath the header bar or navigation.

How to use notification headers

Notifications headers are used to give users in page information about something new, or to confirm an action that’s just been made by the user. They do this in a discrete non-disruptive way. Notifications should always use the SDX interaction color palette to help explain the type of notification the user is receiving at a glance. They run the full width of the page.

```section_design ```

Variations

General notifications

Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.

New inbox notification
Hover state

Confirmation notifications

Green notifications should be used to indicate validation or success, for example to confirm success at the end of an order process.

Items added to basket confirmation
Hover state

Alert notifications

Orange notifications indicate an error or a warning, for example something that needs urgent attention.

Warning notification
Hover state

Rules

Closing the notification

Each notification can be closed, with the secondary action being positioned to the right.

Closing the notification

Fixed over content

Notifications are always placed over the content and fixed to the top of viewport, for emphasis and clarity.

Fixed over content

Typography

Typography
```section_develop ```

Usage

```htmlmixed
``` ```htmlmixed
You have 4 new messages in your inbox
``` ```htmlmixed
Please check the highlighted fields
```

Colours

Notifications are categorised into three categories: general, confirmation/success/ and alerts/warnings. Blue represents general notifications, e.g messages in your inbox. Green for confirmation of user actions or completion of a process, e.g completing checkout. Orange to give alerts and warnings to users, e.g failed uploads or storage reaching capacity.

General Notifications

```htmlmixed
You have 4 new messages in your inbox
```

Confirmations / Success

```htmlmixed
3 items added to your basket
```

Alerts and Warnings

```htmlmixed
You have 5 new alerts
``` */ /*doc --- title: Notifications (modal) name: 02-components-130-notification-modal-01-overview category: Components - Notifications (modal) ---

Modal notifications are large screen take overs featuring messaging and iconography that intentionally interrupt the users experience, usually require an action from the user in order to progress to the next stage in an experience, or because the notification is of particular significance.

How to use notification modals

Notifications modals behave just like conventional modal windows, but with the introduction of bold color. They're the only instance where the interaction color palette is used as a background color. They help to provide a clearly signposted and direct delivery of information to the user.

Inbox notification
```section_design ```

Variations

General notifications

Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.

Inbox notification

Confirmation notifcations

The green notification should be used to indicate validation or success, for example to confirm success at the end of an order process.

Order confirmation notification

Alert notifcations

Orange notifications indicate an error or a warning, for example something that needs urgent attention.

Error or warning notification

Rules

Overlay

The overlay is a globally 40% opacity and #333333 on all modal styles. The modal is always vertically centered within the viewport.

Modal overlay

Alignment

The modal is always horizontally and vertically centered within the viewport.

Centered alignment

Typography

Typography
```section_develop ```

Usage

Interactive sample

A responsive test page for the Notification Modal dialog is available at samples/notification-modal. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.

There are serveral options for opening and closing a notification modal dialog, either use the Modal JavaScript component directly and call the open() and close() methods on the component; or add a button with the class modal-trigger and a href attribute with the id of the target modal dialog.

```htmlmixed ```

To close the dialog either call close() on the component manually or apply either the modal-close or modal-cancel class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.

```htmlmixed
```

Colours

General Notifications

Use the blue notification for more generic messaging around the users general profile.

```htmlmixed
```

Confirmations / Rewards

Green notification should be used to indicate validation for example to reward a user at the end of an order process.

```htmlmixed
```

Alerts / Error Notifications

Only use interaction orange notifications to indicate an error or something that needs urgent attention.

```htmlmixed
``` */ /*doc --- title: Toolbar name: 02-components-190-toolbar-01-overview category: Components - Toolbar ---

Toolbars are groupings of key functions that are represented by icons and their label.

```section_design ```

Variations

Horizontal

The Toolbar is horizontal by default.

Standard
Dark variant
Hover
Dark variant
Disabled
Dark variant

Vertical

The vertical Toolbar displays the labels next to the icons.

Standard
Dark variant
Hover
Dark variant
Disabled
Dark variant

Typography

Typography
Dark variant
```section_develop ```

Provides a Toolbar with two alignments. Horizontal or vertical aligned.

Add the class toolbar to a wrapper div and place buttons inside the wrapper with the class toolbar__item item--show to add a toolbar.

Toolbar

Horizontal Toolbar

The horizontal Toolbar is the standard toolbar. You can add the class toolbar--horizontal next to the toolbar class but you don't have to.

```htmlmixed_accessible
```

Horizontal Toolbar on dark background

If the Toolbar component is embedded in a dark background it automatically adjusts its styling accordingly.

```htmlmixed_accessible
```

Vertical Toolbar

The vertical Toolbar uses labels next to the icon. To get a vertical toolbar add the class toolbar--vertical next to the toolbar class.

```htmlmixed_accessible
```

Vertical Toolbar on dark background

If the Toolbar component is embedded in a dark background it automatically adjusts its styling accordingly.

```htmlmixed_accessible
```

Disabled Toolbar

To disable the entire toolbar add the class toolbar--disabled to the toolbar and disable the buttons.

```htmlmixed_accessible
```

Disabled Toolbar items

To disable certain toolbar items, add the class item--disabled and attributes disabled to them.

```htmlmixed_accessible
```

Disabled Toolbar on dark background

```htmlmixed_accessible
``` */ /*doc --- title: Progress Bar (header) name: 02-components-135-progress-10-barfull category: Components - Progress Bar (header) ---

Progress bars step users through a process, clearly communicating where they are in that process. The steps that indicate the current position are clearly color coded and labeled to help orientate the user.

```section_design ```

Variations

Progress indicators

The interaction palette is used to give users clarity about what is completed and what is remaining. Green indicates a step is complete and blue indicates the step they are currently on. Stroked outlines are used to represent the remaining steps.

Completed step

Steps are in green to show the suer they have been completed

Completed step
Completed step on hover

Current step

The current step is colored in blue, while previous steps remain green.

Current step
Incomplete step on hover

Incomplete step

Incompleted steps are outlined blue when shown on light backgrounds, and white when show on dark backgrounds

Incomplete step
Incomplete step on hover
```section_develop ```

The full progress bar displays a circle for each entry in the progress-full__sections div. To specify the current item make sure to add the class section--active to the item.

To ensure that the progress bar component functions properly make sure to either add the data-init="auto" attribute, or to manually initialize the ProgressFull component on the element.

```htmlmixed_webcomponent_sdx-progress-full Introduction Settings Customization Connection Security Payment Confirmation
``` */ /*doc --- title: Progress Bar (header) name: 02-components-135-progress-10-barfull category: Components - Progress Bar (header) ---

Progress bars step users through a process, clearly communicating where they are in that process. The steps that indicate the current position are clearly color coded and labeled to help orientate the user.

```section_design ```

Variations

Progress indicators

The interaction palette is used to give users clarity about what is completed and what is remaining. Green indicates a step is complete and blue indicates the step they are currently on. Stroked outlines are used to represent the remaining steps.

Completed step

Steps are in green to show the suer they have been completed

Completed step
Completed step on hover

Current step

The current step is colored in blue, while previous steps remain green.

Current step
Incomplete step on hover

Incomplete step

Incompleted steps are outlined blue when shown on light backgrounds, and white when show on dark backgrounds

Incomplete step
Incomplete step on hover
```section_develop ```

The full progress bar displays a circle for each entry in the progress-full__sections div. To specify the current item make sure to add the class section--active to the item.

To ensure that the progress bar component functions properly make sure to either add the data-init="auto" attribute, or to manually initialize the ProgressFull component on the element.

```htmlmixed_webcomponent_sdx-progress-full Introduction Settings Customization Connection Security Payment Confirmation
``` */ /*doc --- title: Ribbons & Stickers name: 02-components-145-ribbons-and-stickers category: Components - Ribbons & Stickers ---

For marketing and sales there are two possible elements which should be used very carefully:

  1. Ribbons:
    Best used on product lists or sliders to differentiate the product family (e.g. devices).
  2. Stickers:
    Can be used on teasers, banners, images, products to show the uniqueness (e.g. “Only at Swisscom”, “Get 10% off”, etc.).

As it should draw the user’s attention to a special condition of a product (e.g. special price, new product, for a defined period of time, etc.), the usage must be well measured. Otherwise the user’s attention is spread across too many featured offers, which then is counter-productive and overwhelming.

Rule for e.g. a section like “Current offers”:

```section_design ```

Variations

Ribbons

There are two variations of ribbons, one on the corner and one the side.

Small ribbon on the corner
Small ribbon on the side

Stickers

There are variations of stickers in size and colour.

Nur bei
Swisscom

Nur bei
Swisscom

Nur bei
Swisscom

Nur bei
Swisscom

Rules

Ribbons

For each variant you can use a small (14px), medium (16px) and large font size (18px). The ribbons can be placed on the left and right hand side.

Guidelines for ribbon on the corner
Guidelines for ribbon on the side

Stickers

As a sticker should be flexible in size depending on the content there are 5 possible sizes (diameter) in which the text can be placed: 112 px, 120 px, 160 px, 180 px, 240 px.

Nur bei
Swisscom

sparen

SD Karte
zusätzlich
geschenkt

  Bis 5x

sparen  


XTRA
Rabatte

Guidelines for stickers

Typography

Ribbons Typography
```section_develop ```

Variations

Below you can see the regular size examples of the Ribbon Badge on Corner and the Ribbon Badge on Side.

```htmlmixed_webcomponent_sdx-ribbon

```

Below you can see Sticker examples.

```htmlmixed_webcomponent_sdx-sticker-circle_accessible

sparen

SD Karte
zusätzlich
geschenkt

  Bis 5x

sparen  


XTRA
Rabatte

``` ```htmlmixed_webcomponent_sdx-price_accessible
``` */ /*doc --- title: Tables name: 02-components-175-tables-01-tables category: Components - Tables ---

Tables allow complex data to be seen easily at a glance. They allow the user to compare values and in some cases re-order data. They can be used for promotional or user-specific purposes, such as a file management.

Yay this is a title

Internet
Swisscom TV
Landline
```section_design ```

Variation

Display tables

Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table. They are commonly used for product configurators, where users may be selecting add ons or additional features that incur charges. They can be used directly in page, or in cards. Display tables feature large titles and ‘stickers’ that label the product type where applicable.

Display table with drop shadow
Display table without drop shadow
Display table with live price
Display table without drop shadow

They can also feature a live total, helping show users the direct cost implications of their selections.

Image base tables

Image tables help to make information clearer and more tangible. They use images in headings to visually show what the column within the table relates to. This enables users to read tables in a more visual way, making the data clearer and easier to understand. They can be positioned directly in page, or within separate modules and cards to help them stand out.

Image base tables

Data-driven tables

Use data tables for managing lists. Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience. Checkboxes should accompany each row if the user needs to select or manipulate data.

Data driven table with drop shadow
Data driven table without drop shadow

Rules

Image table on mobile

On mobile, swipe the image table header to change product.

Margins

Tables do not have to adhere to the Swisscom grid, as a table columns can vary in length and number

Image table on mobile

On mobile, swipe the image table header to change product.

Drop shadows

Tables with a grey drop shadow are to be used in card-based layouts only.

Typography

Typography
```section_develop ```

Data-driven tables

Use data tables for managing lists. Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience. Checkboxes should accompany each row if the user needs to select or manipulate data.

Basic Table

Create a SDX styled table by wrapping a <table> with a wrapper <div> and add the class table to it.

```htmlmixed

Planets in the solar system

Planet Perihelion (AU) Volume Orbital period Escape velocity Satellites
Venus 0.718440 0.815 Earths 0.615198 yr 0.36 km/s 0
Earth 0.9832687 1.08321 × 1012 km3 1.00001742096 yr 11.186 km/s 1
Mars 1.3814 0.151 Earths 1.8808 yr 5.027 km/s 2
Jupiter 4.95029 1321 Earths 11.8618 yr 59.5 km/s 67
```

Responsive Table

Create responsive tables by wrapping any <table> in table__responsive to make them scroll horizontally when the container size smaller than the table.

```htmlmixed

Planets in the solar system

Planet Perihelion (AU) Volume Orbital period Escape velocity Satellites
Venus 0.718440 0.815 Earths 0.615198 yr 0.36 km/s 0
Earth 0.9832687 1.08321 × 1012 km3 1.00001742096 yr 11.186 km/s 1
Mars 1.3814 0.151 Earths 1.8808 yr 5.027 km/s 2
Jupiter 4.95029 1321 Earths 11.8618 yr 59.5 km/s 67
```

Table Styles

Table with highlighted header

```htmlmixed

Planets in the solar system

Planet Perihelion (AU) Volume Orbital period
Venus 0.718440 0.815 Earths 0.615198 yr
Earth 0.9832687 1.08321 × 1012 km3 1.00001742096 yr
Mars 1.3814 0.151 Earths 1.8808 yr
Jupiter 4.95029 1321 Earths 11.8618 yr
```

Table with no spacing

```htmlmixed

Planets in the solar system

Planet Perihelion (AU) Volume Orbital period
Venus 0.718440 0.815 Earths 0.615198 yr
Earth 0.9832687 1.08321 × 1012 km3 1.00001742096 yr
Mars 1.3814 0.151 Earths 1.8808 yr
Jupiter 4.95029 1321 Earths 11.8618 yr
```

Display tables

Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table. They are commonly used for product configurators, where users may be selecting add ons or additional features that incur charges. They can be used directly in page, or in cards. Display tables feature large titles and stickers that label the product type where applicable.

```htmlmixed

Yay this is a title

Internet
Swisscom TV
Landline
```

Table with arbitrary content

Tables with arbitrary content helps to easily build tables for a variety of use cases.

```htmlmixed

Vivo XL - Vivo M

Vivo S - Vivo XS

Natel infinity 2.0 M

Natel infinity 2.0 L

Natel infinity 2.0 XL

20.–

10.–

Natel infinity 2.0 XS

Natel infinity 2.0 S

10.–

5.–

``` */ /*doc --- title: Pie chart name: 02-components-040-pie-charts-01 category: Components - Chart (pie) ---

Pie charts are used to show percentage based data. Data is shown in segments of different colours, with the sum total equalling 100%.

```section_design ```

Variations

Placement of horizontal explanation

The side by side version positions the legend to the side of the pie chart. This version is used when horizontal space isn’t an issue, for example on wide viewports like desktop.

Stacked pie chart
Dark variant

Placement of vertical explanation

The stacked version positions the explanation below the pie chart. Best use when horizontal space is restricted, for example on a narrow viewports like mobile or when the pie chart is displayed within a card or a narrow column.

Side by side pie chart
Dark variant

Rules

Proportions

Data is shown in segments of different colours, with the sum total of segments equalling 100%.

The total sum of all segments is 100%

Spacing around

A margin of 24px is required above and below the elements.

Spacing around

Pie chart with one color

Make sure the pie chart has always an open end so users can still identify it as a pie chart - even it has only one color.

Make sure the pie chart has always an open end

Typography

Typography
Dark variant

Mini Pie Chart

The Mini Pie chart can be used to conserve space in appropriate situations, for example in tables or cards. Unlike the regular Pie chart, they only display one single value and have no gaps or open ends.

Stacked pie chart
Dark variant
```section_develop ```

Pie charts are used to show percentage based data. Data is shown in segments of different colours, with the sum total equalling 100%.

```htmlmixed_webcomponent_sdx-pie-chart_accessible ```

Variations

Mini Pie Chart

```htmlmixed_playground_accessible
```

Dark style

```htmlmixed_playground_accessible
``` */ /*doc --- title: Bar chart (horizontal) name: 02-components-030-bar-chart-horizontal-01 category: Components - Chart (bar horizontal) ---

Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data. Charts can be displayed directly into pages, or placed within cards.

Internet
Sandra’s Natel XL
```section_design ```

Variations

Unlimited data

Unlimited data charts show types of data which have no upper limit, for example additional costs.

Unlimited data charts
Dark variant

Limited data

Limited data charts are used to show data on a limited scale, such as percentages or limited allowances with a single colour displaying the used amount.

Light variant
Dark variant

Split data

Split data charts enable us to display mutliple data types in a single bar chart. A bar can be divided into different colours to show how the full bar is representing accumulated data from different sources.

Light variant
Dark variant

Using colour combinations

Bar charts can feature multiple colours to denote different data sets, which are explained using a colour coded key below.

Multiple colour bar chart example

Empty data

Empty data – or bars displaying zero – are represented by a grey dot.

Empty data chart

Tooltip

A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.

Tooltip on a light background
Tooltip on a dark background

Rules

Relative positioning

The bar chart should always have 32px space between itself and other elements.

Bar chart spacing

Minimum height

The bar chart always requires a minimum padding between elements to ensure a visual relationship between the data and labels remains clear at all times. There should always be 24px between the dividing line and the label. There should be 20px padding between labels and data, and 24px between data and the following dividing line.

A minimal height of 20px and 24px are required for padding

Minimum width

The limited data chart should have a minimum width of 272px to ensure legibility across devices.

Min width of 272px

Bars and data

Bars containing data have rounded ends, but data should always have a flat end point.

Visual construction

Typography

Typography
Typography
Dark variant
```section_develop ```

Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data. Charts can be displayed directly into pages, or placed within cards.

out of
Internet
Sandra’s Natel XL

Unlimited data

Unlimited data charts show types of data which have no upper limit, for example additional costs.

```htmlmixed
Subscription
Additional
Sandra’s Natel XL
Subscription
Additional
Marc’s Natel S
```

Limited data

Limited data charts are used to show data on a limited scale, such as percentages or limited allowances with a single colour displaying the used amount.

```htmlmixed
out of
Internet
Internet
Internet
Internet
```

Split data

Split data charts enable us to display mutliple data types in a single bar chart. A bar can be divided into different colours to show how the full bar is representing accumulated data from different sources.

```htmlmixed
Additional Costs
Subscription Costs
Internet
Additional Costs
Subscription Costs
TV
``` ```htmlmixed
Internet
Internet
TV
TV
```

Dark styles

```htmlmixed
Internet
Internet
TV
TV
```

Empty state

```htmlmixed
Internet
Internet
TV
TV
``` */ /*doc --- title: Bar chart (vertical) name: 02-components-035-bar-chart-vertical-01 category: Components - Chart (bar vertical) ---

Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data.

Subscription Cost
Additional Cost
Jan
Feb
Mar
Apr
May
  • 300
  • 200
  • 100
    Jan
    Feb
    Mar
    Apr
    May
  • Subscription Cost
  • Additional Cost
```section_design ```

Variations

Vertical data

Vertical bar charts can be used to track and compare data with multiple variables, for example call time consumption over five months. Charts can be displayed on light or dark backgrounds and use the content colour palette for treating data.

Light variant
Dark variant

Using colour combinations

The accent colour palette can be applied to data sets to make them clear and distinct. For further information about the accent colour palette, read here.

Split data

Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key should be used.

Light variant
Dark variant

Tooltip

A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.

Light variant
Dark variant

Rules

Minimum spacing

To ensure vertical data charts are clear and easy to read, a minimum spacing of 70px should be applied between bars.

Minimum spacing of 70px between bars.

Bars and data

To help users accurately interpret data, data bars should always use a flat end point. Bars start with a rounded edge, but this must sit below the chart’s axis.

Data bars have flat end points

Bars and data

To help users accurately interpret data, data bars should always use a flat end point. Bars start with a rounded edge, but this must sit below the chart’s axis.

Data bars have flat end points

Typography

Typography
Dark variant
```section_develop ```

Bar charts enable us to display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data.

  • 300
  • 200
  • 100

    You can either define the data elements in the markup and use the data-init="auto" attribute. Or update the data values using the provided JavaScript component. The data list is expected to be in the following format:

    ```javascript_no_preview { categories: [{ title: "Subscription Cost", color: "turquoise" }, { title: "Additional Cost", color: "iris" }], items: [{ title: "Jan", values: [150, 140] }, { title: "Feb", values: [110, 20] },{ title: "Mar", values: [50, 120] },{ title: "Apr", values: [0, 0], class: "hidden-phone-down" },{ title: "May", values: [80, 30], class: "hidden-phone-down" }] } ```

    In addition make sure to set the data-unit attribute to the desired value.

    Variations

    Vertical data

    Vertical bar charts can be used to track and compare data with multiple variables, for example call time consumption over five months. Charts can be displayed on light or dark backgrounds and use the content colour palette for treating data.

    ```htmlmixed

    Vertical bar chart title

    Subscription Cost
    Jan
    Feb
    Mar
    Apr
    May
    • 300
    • 200
    • 100

      Vertical bar chart title

      Subscription Cost
      Jan
      Feb
      Mar
      Apr
      May
      • 300
      • 200
      • 100
        ```

        Split data

        Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key (legend) should be used.

        ```htmlmixed

        Vertical bar chart title

        Subscription Cost
        Additional Cost
        Jan
        Feb
        Mar
        Apr
        May
        • 300
        • 200
        • 100

            Vertical bar chart title

            Subscription Cost
            Additional Cost
            Jan
            Feb
            Mar
            Apr
            May
            • 300
            • 200
            • 100
                ``` */ /*doc --- title: Tabs name: 02-components-180-tabs category: Components - Tabs ---

                Tabs organize and allow navigation between groups of content that are related and at the same level hierarchy.
                There can be active and disabled states.

                ```section_design ```

                There are different font sizes you can use for the tabs. 24px for large tabs, 18px for medium sized tabs and 16px for small ones.

                Tabs with different font sizes

                Variations

                There are different tab sizes you can use.

                Tabs on colored background
                Tabs switching to grey
                Tabs with Dropdown
                Tabs on mobile

                Rules

                Paddings between Tabs

                Paddings between Tabs
                ```section_develop ``` ```htmlmixed_accessible ```

                Tab sizes

                There are three different tab sizes available. By default the tab font size is 18px. If you want to change the size of the tab, add the classes tabs--small or tabs--big to the tabs element.

                ```htmlmixed_accessible ```

                Tab indicator sizes

                There are two tab indicator sizes available. By default the tab indicator is short (10px). If you want to change the size of the tab indicator to long, add the class tabs--long to the tabs element.

                ```htmlmixed_accessible ```

                More tabs options

                Scrollable tabs

                To make the tabs scrollable add the class tabs--scrollable to the tabs element.

                ```htmlmixed_accessible ```

                Tabs with no border

                To remove the bottom border on the tabs add the class tabs--no-border to the tabs element.

                ```htmlmixed_accessible ```

                Tabs with icons

                ```htmlmixed_accessible ```

                Tabs with images

                ```htmlmixed_accessible
                ```

                Responsive tabs example

                Responsive tabs are displayed as dropdown menus on specified screen sizes.

                ```htmlmixed_accessible
                ``` */ /*doc --- title: Accordions name: 02-components-005-accordion-01 category: Components - Accordions ---

                An accordion is a vertically stacked list of items that can be opened to reveal hidden content, or closed to save space on the screen. They are mainly used as navigation elements on small screens, and for revealing and hiding longer form content. Accordions are fully responsive components and can be used with any grid width.

                Internet unterbrochen

                Unsere Techniker arbeiten daran, die Störung zu beheben. Wir bitten um Entschuldigung.

                Wartungsarbeiten

                Im Zeitraum vom 02.03.2020-06.03.2020 werden in Ihrem Bereich Wartungarbeiten durchgeführt. Wir arbeiten an der Verbesserung Ihrer Leitungen und bitten um Entschuldigung.

                ```section_design ```

                Variations

                Standard accordion

                Standard accordions can be used across a range of columns widths on desktop and mobile. Arrows are used to control the open and closed state of the the accordion, revealing the contents within the item selected.

                Centered accordion

                Centred accordions are used to expand isolated elements, acting like a 'read more' link, revealing additional content in page. This differs from standard accordions which are conventionally used to expand items in lists.

                Colour variations

                There are three different colorways that can be used for accordions. The color should be selected based on the background color of the page, and the emphasis being placed on the content within that particular page.

                Light variant on white
                Dark variant on white
                Light variant on grey
                Dark variant on grey

                Rules

                Line length

                Line lengths for all copy inside an accordion is limited to 640px. This prevents excessive line lengths when using accordions in especially wide applications.

                Maximun line lentgh example

                Single column layout

                Accordions should only ever use a single column with all elements left aligned, with the exception of the control arrows. Content should never be centrally aligned.

                Single column layout

                Arrow behavior

                Accordions should only ever use a single column with all elements left aligned, with the exception of the control arrows. Content should never be centrally aligned.

                Single column layout

                Arrow behavior

                Accordions are controlled by arrows that open and close the panels. Arrows point down when the panel is closed, and flip when the panel is opened.

                Arrow controller behavior

                Typography

                Typography
                ```section_develop ```

                An accordion is a vertically stacked list of items that can be opened to reveal hidden content, or closed to save space on the screen. They are mainly used as navigation elements on small screens, and for revealing and hiding longer form content. Accordions are fully responsive components and can be used with any grid width.

                ```htmlmixed_webcomponent_sdx-accordion_accessible Accordion 1

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                Accordion 2

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                Accordion 3

                Lorem ipsum dolor sit amet, consectetur adipiscing elit

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


                Centered Accordion

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                ``` */ /*doc --- title: Carousel name: 02-components-025-carousel-01 category: Components - Carousel ---

                Carousels help to surface large quantities of content in smaller screen space. Organised into cards featuring images, headlines, category labels and meta data, content then links through to full content pages. Due to their full width presence on the page, carousels are best suited to use at the top or base of a page.

                A responsive test page for the Carousel is available at samples/carousel and samples/carousel-dark.

                ```section_design ```

                Variations

                How to scale the carousel

                On reduced width screens show one less card in the carousel, maintaining the visibility of the offscreen cards.
                Mobile carousels only display singular items, with arrows positioned below the card, with the addition of dot selection indicators that help to show the number of items in the carousel.

                Tablet carousel
                Mobile carousel

                Light and dark versions

                Two variation of carousels are available for your designs, choose which one to use based on your background colour.

                Light card version
                Dark card version

                Rules

                Cards move in batches

                Carousel cards move in batches, with a dot indicating how many steps are in the carousel. On desktop the carousel moves three cards at a time, on tablet by two cards and on mobile by one.

                Cards should move in batches at a time

                Pagination is always centred

                As cards move left to right the dot moves to indicate that a user has move to the next step. The current pagination dot is always positioned in the centre of the carousel.

                Pagination dots

                Outside the page margin

                Cards sat outside of the page margins are shown at a reduced opacity, allow users to focus on the smaller quantities of content at a time. Cards, although constructed on the grid, are positioned offset and centred to allow us to reveal addition cards that run of screen more clearly.

                Cards sat outside the page margin

                Typography

                Typography
                ```section_develop ```

                Carousels help to surface large quantities of content in smaller screen space. Organised into cards featuring images, headlines, category labels and meta data, content then links through to full content pages. Due to their full width presence on the page, carousels are best suited to use at the top or base of a page.

                Carousel sample

                The following component isAccessible - More info

                A responsive test page for the Carousel is available at samples/carousel and samples/carousel-dark

                JavaScript Component

                The JavaScript component documentation is available under /doc.

                */ /*doc --- title: Empty States name: 02-components-065-empty-states-01 category: Components - Empty States ---

                Empty states are intended to prompt a user to interact in various different ways with our products. The icon, messaging and CTAs are a constant feature that are interchangeable depending on its intended purpose.

                You haven’t uploaded any pictures yet
                Drag pictures into the browser window to start uploading
                ```section_design ```

                Full screen Empty States

                Empty states can take over the whole screen in a product to prompt the user to complete an action. In this example, the empty state is explaining how to upload a file.

                Inactive empty state
                Active empty state

                Empty States in modals

                Modals can also be used to provide an empty state prompt to the user. A modal empty state is useful where space is more limited within a product.

                Empty state in modal
                Active empty state in modal

                Rules

                Consistant layout

                The same layout can be used to house any icon and text, keeping a vertically centered position. This layout helps to give CTAs extra emphasis.

                An empty state with a different purpose

                Call to action depends on platform

                For mobile breakpoints, empty states can only be interacted with via a CTA button. This means the messaging needs to tailored appropriately.

                An empty state on mobile

                Typography

                Typography
                ```section_develop ```

                How to use Empty States

                Use empty states on user generated content products to prompt the interaction of users. They should use text, iconography and button CTAs to encourage user participation. There’s also used to help clarify that pages and products have loaded successfully.

                The empty state uses the form <input type="file"> element for handling files. You can specify the allowed file types for the file picker on mobile by setting the mime-type in the accept attribute. For more information see HTML DOM Input FileUpload Object.

                Make sure to validate the file-type before uploading the files.

                For the EmptyState component to be displayed properly make sure to either set the attribute data-init="auto" on the component, or the initialize it using the JavaScript API.

                Note: Drag and drop does not work in the sample below, it is presented for reference only. For a fully functional version see the samples under Variations.

                ```htmlmixed_accessible
                You haven’t uploaded any pictures yet
                Drag pictures into the browser window to start uploading
                ```

                Variations

                Full screen empty states

                Empty states can take over the whole screen in a product to prompt the user to complete an action. In this example, the empty state is explaining how to upload a file.

                samples/empty-state

                Empty States in modals

                Modals can also be used to provide an empty state prompt to the user. A modal empty state is useful where space is more limited within a product.

                samples/empty-state-modal

                */ /*doc --- title: Navigation (main) name: 02-components-110-navigation-01-overview category: Components - Navigation (main) ---

                Navigation enables users to find their way around products and services. Navigation types all follow a uniform aesthetic, but have different placement and structures to best serve various product types and sizes. The use of a mega menu can be used for larger services to help organise and catagorise pages, making them easy to find.

                ```section_design ```

                Variations

                Primary navigation

                Primary navigation is the basic system to which navigation should be structured across various screen sizes. Surfacing key page links in a page header, along with core functionality specific to the product. In this example, basket and search are surfaced at the top level. This system collapses into a burger menu on smaller screen sizes to help the nav accommodate a larger variety of links and functionality.

                Responsive navigation

                Alignment variants

                Navigation links can be aligned differently from product to product. For larger products the left hand alignment should be used to accommodate more links, and when using a mega menu. Centred alignment can be used for smaller products when less primary navigation links are required. It can also be used in conjunction with a side navigation, using the primary navigation bar to show page specific navigation links. Right hand alignment can be used, but not in conjunction with icons. When surfacing functionality through the use of icons, the centred or left aligned navigation should be used.

                Left, centred and right align navigation option

                Mega menu

                The mega menu system accompanies primary navigation systems. It is revealed on click only. Links are split into categories and can be spread across six columns on 1440px screen sizes. They can also feature a separate panel below for promotional links and additional conte

                Mega menu with offers bar (1440px)
                Mega menu with offers bar (1024px)

                Burger menu

                At widths below 768px the navigation reverts to a burger menu. All the items that live within the primary navigation and mega menu are placed inside an accordion system within a collapsed menu.

                768px menu — level one
                320px menu — level one

                To help simplify the navigation at that size, menus are split into two levels. Primary navigation links are shown at level one, plus any additional global CFU links where required.

                768px menu — level one
                320px menu — level one

                Level 2 contains links from the mega menu, but excludes deeper links. This is to reduce the number of levels within the navigation, and forces users to explore through landing pages or use the search functionality to navigate to deeper pages.

                CFU Switcher

                The CFU switcher is used to switch between portal types within larger products such as Swisscom.ch. It features a lower level of typographic hierarchy. It also houses global functionality, such as the language switcher and contact links. When using a burger menu, the CFU is positioned inside it, placed below the primary navigation links.

                Closed CFU (1440px)
                Closed CFU (1024px)
                768px CFU
                320px CFU

                At widths below 768px the CFU is contained within a burger menu, below the primary navigation.

                1440px CFU open
                768px CFU open
                320px CFU open

                Breadcrumb

                The breadcrumb enables users to return to the route page they came from. It also serves as a page heading, to aid user wayfinding around larger products, and houses sub navigation elements specific to the page the user is on. It should be used on larger applications where wayfinding is of extra importance.

                1440px breadcrumb
                1440px breadcrumb collapsed, and on scroll

                On scroll, the primary navigation disappears, and the breadcrumb collapses into a thin strip, displaying the back arrow, page title, and sub navigation throughout the rest of the page. This enables users to quickly return to the previous page without needing to scroll to the top.

                < 768px breadcrumb
                < 768px breadcrumb sub navigation dropdown

                Once the screen size becomes smaller than 768px wide, sub nav links are placed into a drop down menu.

                Rules

                Left aligned navigation links

                Left aligned navigations can contain five links when using three icons or less, and four when using more than three icons. There is a limit of five icons for both centred and left aligned navigation options.

                Left aligned navigation with more than three icons
                Left aligned navigation with more than three or less icons

                Centre aligned navigation links

                Centrally aligned navigations can contain five links when using three icons or less, and four when using more than three icons. There is a limit of five icons for both centred and left aligned navigation options.

                Centre aligned navigation link limit

                Right aligned navigation links

                Right aligned navigations never feature icons, therefore they can always accomodate five nav items regardless of screen size

                Mobile navigation bar icons

                When reduced to a burger menu, in both left and centrally aligned variations of the primary navigation, icons are limited to four, plus the burger icon. In this instance, search should be positioned within the menu.

                Right aligned navigation link limit

                Link spacing

                Links should be spaced 30px apart at all times. This helps to maintain clarity between links. This rule should be applied across all breakpoints.

                Navigation link spacing

                Icon spacing

                Icons placed in the primary navigation should be spaced 12px apart at all times, measuring from the trim container’s edge, not the icon itself. This rule should be applied across all breakpoints.

                Icon spacing

                Mobile alignment

                At widths below 768px, when reverting to the burger menu, navigation links should be left aligned at all times. This includes the use of side bar navigations, on both the left and right side.

                Navigation links within a burger menu should be left aligned at all times

                Mega menu column positioning

                The mega menu uses a responsive column structure enabling it to contain more content across multiple screen sizes. It uses a six column maximum for 1440px to 1280px widths. Below 1280px it switches to a three column structure, stacking content categories but shifting every other column beneath the one to its left. At this size, the offers panel positioned at the bottom of the menu also reduces to displaying only two offers.

                1440px six column layout switches to three columns at <1280px

                Typography

                Typography
                Typography
                ```section_develop ```

                Navigation, in its various forms, is what enables users to find their way around products and services. Navigation types all follow a uniform aesthetic, but have different placement and structures to best serve various product types and sizes.

                Primary navigation

                Primary navigation is the basic system to which navigation should be structured across various screen sizes. Surfacing key page links in a page header, along with core functionality specific to the product. In this example, basket and search are surfaced at the top level. This system collapses into a burger menu on smaller screen sizes to help the nav accommodate a larger variety of links and functionality.

                Only one drawer at a time must be open.

                Primary navigation without drawers

                If no drawers are present, you can toggle the active state by setting the classes "nav-link" (inactive) and "nav-link nav-link--active" (active).

                Navigation sample

                A responsive test page for the Navigation is available at samples/navigation.

                Nova sample

                The responsive test-page in the nova variation samples/navigation-nova.

                */ /*doc --- title: Navigation (side) name: 02-components-115-side-navigation-01-overview category: Components - Navigation (side) ---

                For shallower products and services, a combination of a primary and side navigation can be used. The primary navigation is this case is used to contain sub navigation elements specific to that page, while a burger menu contains global page navigation links for the the rest of the product.

                Lorem ipsum dolor sit amet, assum solet diceret mea id. Delectus legendos vulputate te eos, ius prima meliore ea, cum purto argumentum id. Eos porro tempor consectetuer ex, per option tacimates moderatius ea. Sed insolens eloquentiam ei, ad eirmod detracto definitiones eam. Ea has admodum electram, his ei iusto labores facilis. At liber efficiantur est, in velit aeterno constituto ius. Tempor aliquid ne ius.

                ```section_design ```

                Variations

                Alignment options

                Side navigation is available in both left and right hand versions. When using the left side navigation option, the Swisscom logo should be present within the side navigation.

                Left hand burger icon
                Left hand navigation includes the Swisscom logo

                When using the left hand side navigation, the Swisscom logo should be positioned inside the navigation, and not shown in the header.

                Dividing lines are used to help seperate items, and icons can be used to support link titles and make functionality clearer to the user.

                Right hand burger icon
                Right hand navigation doesn't include the Swisscom logo

                When using the right hand side nav, the Swisscom logo should be positioned in the header, and not positioned inside the navigation.

                Mobile side navigation

                Smaller products that don’t feature or require the use of a mega drop down should follow the side navigation styling, and not the responsive state of the navigation shown in the mega dropdown guidance.

                Left hand side nav at 320px
                Left hand side nav using scaling behavior

                On mobile, links are positioned in the verticle centre of the menu, with the Swisscom logo anchored to the bottom, and account information and avatars anchored to the top.

                On native applications, a scaling version of the side navigation which features a more dynamic behaviour can be used. Technical limitations mean that web based services should avoid using the scaling option.

                Left hand side navigation at 320px
                Left hand side navigation using scaling behavior

                Rules

                Vertical alignment

                Links within side navigation menus are aligned vertically to the middle.

                Verticle aignment of links

                Without icons

                Icons can be used to help further inform the users of the functionality or theme of a page that links lead to, but they’re not mandatory. Icons should be applied consistantly within the navigation, either being applied to all links, or none.

                Side navigation without icons

                Typography

                Typography
                ```section_develop ```

                For shallower products and services, a combination of a primary and side navigation can be used. The primary navigation is this case is used to contain sub navigation elements specific to that page, while a burger menu contains global page navigation links for the the rest of the product.

                Alignment options

                Side navigation is available in both left and right hand versions. When using the left side navigation option, the Swisscom logo should be present within the side navigation.

                Left hand side navigation

                A sample is available at samples/navigation-side-left.

                Right hand side navigation

                A sample is available at samples/navigation-side-right.

                */ /*doc --- title: Navigation (tab mobile) name: 02-components-120-tab-navigation-01-overview category: Components - Navigation (tab mobile) ---

                For mobile devices the navigation is also available as a Mobile Tab-Navigation. It is available with or without captions.

                NOTE: This component is only available on the phone breakpoint and is not intended to be used on tablets and desktop breakpoints.

                A sample is available at samples/navigation-tabs.

                ```htmlmixed_accessible ``` ```htmlmixed_accessible ``` */ /*doc --- title: Search name: 02-components-150-search category: Components - Search ---

                Search enables users to locate information without the need to go Rescale element through conventional navigation. Users are presented with ‘live search’ results as a drop down, or are taken through to a page of their specific search results.

                You can have a look at the search component on a responsive test page for the Navigation at samples/navigation.

                ```section_design ```

                Variations

                Live search

                Live search is the primary format for search, and should be implimented wherever technically possible. When the user starts typing, a close button appears which would delete the written search text.

                While typing, the live search shows the results in real time. An optional promotional bar can appear under the results.

                Live search states
                Live search results

                Classic search

                Classic search exists as a fall back option for when it's not possible to generate live search results inside a product or service. Classic search input follows the same styling as the live search input states. When active, the input field overlays the navigation header. Classic search results pages include filtering options, heroed ‘top results’, and listed link results with surfaced text content from the page.

                Classic search inputs
                Classic search results

                Sticky search

                The sticky search keeps the search bar and filters column fixed in the viewport, letting users edit searchs quickly and filter their results.

                Sticky search
                Sticky search

                Mobile filter

                To preserve screen real estate, the filter panel is reduced to a drop down menu on mobile screen sizes.

                When opened, the mobile filter follows the same styling as standard dropdown menus.

                Closed mobile filter
                Expanded mobile filter

                Rules

                10 results per page

                Live search should show a maximum of 10 results per page. If there are additional results, a ‘show all’ link should be used to take the user to a classic search results page.

                Live results dropdown with ‘view all’ link

                Responsive layout structure

                At 1024px wide, the right hand column content moves to the left column, beneath the filters. This left column also extents to occupy four columns, with the results column increasing to eight columns.

                1024px search results view

                Typography

                Typography
                ```section_develop ```

                Desktop Search

                ```htmlmixed_accessible
                ```

                Mobile Search

                ```htmlmixed_accessible
                ```

                Inline Search

                ```htmlmixed_webcomponent_sdx-search_accessible ```

                Colour options

                Light Color

                ```htmlmixed_accessible
                ```

                Search Live

                Desktop Search

                ```htmlmixed_accessible
                • iPhone 7 Plus
                • iPhone 6s
                • iPhone 5s
                • iPhone 6s Plus
                • iPhone SE 64GB
                Neu
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
                Lorem ipsum sit amet, consectetur elit, sed eiusmod.
                ```

                Mobile Search

                ```htmlmixed_accessible
                • iPhone 7 Plus
                • iPhone 6s
                • iPhone 5s
                • iPhone 6s Plus
                • iPhone SE 64GB
                ``` */ /*doc --- title: Footer name: 02-components-070-footer category: Components - Footer ---

                Footers are positioned at the bottom of a page or app and feature links to the primary areas of the product. Footers usually include legal information, as well as links to the relevant social media platforms. Use footers to enable users to get back to core site pages if they reach the end of a page.

                ```section_design ```

                Variations

                Full footer

                Full footer is recommended for medium and large sites or products where there are many links. This helps the user can easily navigate the site. There are two colour options for the footer. The dark version is the preferred option. Its contrast to our predominantly light look and feel means it creates a clear end point to pages. The light version, however, can be used if the dark footer feels visually incoherent with your design. The footer colour choice should be used consistently and should never change within that site or product.

                Dark footer
                Light footer

                Compact footer

                The light version of the footer is to be used for smaller products that contain less links and information.

                Dark compact footer
                Light compact footer

                Rules

                Logo position

                At breakpoints that have a mobile view the footer stacks and centres with the Swisscom logo at the top.

                Collapsed dark footer on mobile

                Monochrome links

                Footer text links use monochrome interactive states, differing from conventional text link and navigation link styles.

                Text links within the footer

                Grouping elements

                Text links are grouped into categories, with the category at the top of each column.

                Grouped text links

                List limit

                Lists within the footer should have a maximum of 6 rows, any more and a ‘More...’ link should appear as the last list item.

                Category list within the footer

                Typography

                Typography full footer dark variant
                Typography full footer light variant
                Typography compact footer dark variant
                Typography compact footer light variant
                ```section_develop ```

                Colour options

                There are two colour options for the footer. The dark grey version is the preferred option, and its contrast to our predominantly light look and feel means it provides us with a clear end point to pages. The light version, however, can be used if the dark footer feels visually incoherent in your specific use case. Footers should be colours consistently across the entire services, and should never change.

                Footer Compact

                Use this footer if there isn't a need for lots of links. A responsive test page for the compact footer is available at samples/footer-compact.

                ```htmlmixed_accessible ```

                Dark Version

                ```htmlmixed_accessible ```

                Light Version

                ```htmlmixed_accessible ```

                Footer Full

                Use this footer for sites that have a large site maps and require more room for links. A responsive test page for the compact footer is available at samples/footer-full.

                Dark Version

                Light Version

                */ /*doc --- title: Commenting name: 02-components-055-commenting category: Components - Commenting ---

                Commenting allows users to add comments to articles and posts. The commenting pattern follows a simple system of indentation for connected comments. The avatar, name and title of the contributor are all visible, along with basic functionality, for example like and follow.

                Robert Schmidt
                Deputy Director of Communication
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                ```section_design ```

                Variations

                Commenting

                The commenting functionality is position at the bottom of editorial or blog content. It features the user avatar, name and titles to help identify who is commenting, as well as a time stamp, reply and like functionality. Where applicable, commenting can also feature a follow button.

                Comment and input field on light
                Comment and input field on dark
                Mobile comment and input field on light
                Mobile comment and input field on dark Comment feeds

                Comment feeds

                When showing lists of comments, they’re stacked vertically, and ordered by date, displaying the newest comments last. Replies are conneted to the original comment by placing them directly below, and indenting them by a single column.

                Comment feed on light
                Comment feed on dark
                Comment feed on mobile on light
                Comment feed on mobile on dark

                Rules

                Indentation on desktop

                Replies within comment threads are displayed by indenting one column across from the original comment. This creates a clear visual link between the comments. Indentation on desktop is limited to two columns to preserve line length. The third reply would only have a two column indent.

                Comment indentation

                Indentation on mobile

                Indentation on mobile is limited to just one column, regardless of the number of replies. This is due to the restricted width of mobile.

                Comment indentation

                Comment input field

                Comment input fields have a different behaviour to conventional input fields. The follow the same type specificiations and colour treatment, but their scale changes over the course of the interaction. When the user first clicks into the field, it automatically grows to accomodate four lines of text, and an inactive call to action appears below the field. Once the user starts to input text into the field the call to action becomes active. As more text is input into the field, it will grow to accomodate an additional line, and continue to grow as required, with no limit.

                Static comment field
                Active comment field with no input
                Active comment field with input and active post button

                Typography

                Typography
                Dark variant
                ```section_develop ```

                Commenting allows users to add comments to articles and posts. The commenting pattern follows a simple system of indentation for connected comments. The avatar, name and title of the contributor are all visible, along with basic functionality, for example like and follow.

                Comment sample

                A responsive test page for the comment pattern is available at samples/comment.

                Variations

                Commenting

                The commenting functionality is position at the bottom of editorial or blog content. It features the user avatar, name and titles to help identify who is commenting, as well as a time stamp, reply and like functionality. Where applicable, commenting can also feature a follow button.

                ```htmlmixed_accessible
                Robert Schmidt
                Robert Schmidt
                Deputy Director of Communication
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                ```

                Dark background

                ```htmlmixed_accessible
                Robert Schmidt
                Robert Schmidt
                Deputy Director of Communication
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                ```

                Comment feeds

                When showing lists of comments, they’re stacked vertically, and ordered by date, displaying the newest comments last. Replies are conneted to the original comment by placing them directly below, and indenting them by a single column.

                ```htmlmixed_accessible
                Robert Schmidt
                Deputy Director of Communication
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                Tobias Herrmann
                Software Developer
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                Michael Höhn
                Software Developer
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                ```

                Dark background

                ```htmlmixed_accessible
                Robert Schmidt
                Deputy Director of Communication
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                Tobias Herrmann
                Software Developer
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                Michael Höhn
                Software Developer
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                25 minutes ago
                ``` */ /*doc --- title: Clearfix name: 05-utilities-clearfix-01 category: Dev Utilities - Clearfix ---

                Easily clear floats by adding .clearfix to the parent element.

                ```htmlmixed_no_preview
                ...
                ```

                Can also be used as a mixin.

                ```css_no_preview // Usage as a mixin .element { @include clearfix; } ``` */ /*doc --- title: Margin name: 05-utilities-margin-01 category: Dev Utilities - Margin ---

                Apply SDX conform margins to an element. The following margin options are available:

                Margin on all 4 sides of the element:

                Margin on the left and right side of the element:

                Margin on the top and bottom side of the element:

                Margin on the top of the element:

                Margin on the bottom of the element:

                Margin from a breakpoint and up, some examples:

                */ /*doc --- title: Padding name: 05-utilities-padding-01 category: Dev Utilities - Padding ---

                Apply SDX conform paddings to an element. The following padding options are available:

                Padding on all 4 sides of the element:

                Padding on the left and right side of the element:

                Padding on the top and bottom side of the element:

                Padding on the top of the element:

                Padding on the bottom of the element:

                Padding from a breakpoint and up, some examples:

                */ /*doc --- title: Screen Readers name: 05-utilities-screenreaders-01 category: Dev Utilities - Screen Readers ---

                Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user).

                ```htmlmixed_no_preview Skip to main content ```

                Can also be used as a mixin.

                ```css_no_preview // Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; } ``` */ /*doc --- title: Text name: 05-utilities-text-01 category: Dev Utilities - Text ---

                Text alignment

                Easily realign text to components with text alignment classes.

                ```htmlmixed_playground

                Left aligned text on all viewport sizes.

                Center aligned text on all viewport sizes.

                Right aligned text on all viewport sizes.

                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

                ```

                Text transformation

                Transform text in components with text capitalization classes.

                Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

                ```htmlmixed_playground

                Lowercased text.

                Uppercased text.

                capiTaliZed text.

                ```

                Text truncate

                Trunctate texts using the CSS class .text-truncate (which adds an ellipsis).

                ```htmlmixed_playground

                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

                ```

                In cases where the CSS class .text-truncate does not work (because of :before), the Web Component <sdx-text-truncate /> can be used.

                ```htmlmixed_playground

                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

                ```

                Maximum text width

                To make long text paragraphs easier to read, SDX recommends to limit their width to a maximum of 700px. This helper class makes it easy to ensure that the text will wrap and never exceed this limit.

                ```htmlmixed_playground

                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

                ``` */ /*doc --- title: Visibility name: 06-utilities-visibility-01 category: Dev Utilities - Visibility ---

                Invisible content

                The .invisible and .visible class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

                ```htmlmixed

                visible

                ```

                Responsive visibility

                For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.

                If you want to go for specific devices (phone, tablet or desktop) use the device specific classes instead of the breakpoint specific classes:

                */ } .sdx-container html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } .sdx-container body { margin: 0; } .sdx-container article, .sdx-container aside, .sdx-container footer, .sdx-container header, .sdx-container nav, .sdx-container section { display: block; } .sdx-container figcaption, .sdx-container figure { display: block; } .sdx-container figure { margin: 1em 40px; } .sdx-container hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } .sdx-container main { display: block; } .sdx-container code, .sdx-container kbd, .sdx-container samp, .sdx-container pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } .sdx-container a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } .sdx-container a:active, .sdx-container a:hover { outline-width: 0; } .sdx-container abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } .sdx-container b, .sdx-container strong { font-weight: inherit; } .sdx-container b, .sdx-container strong { font-weight: bolder; } .sdx-container dfn { font-style: italic; } .sdx-container mark { background-color: #ff0; color: #000; } .sdx-container small { font-size: 80%; } .sdx-container sub, .sdx-container sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .sdx-container sub { bottom: -0.25em; } .sdx-container sup { top: -0.5em; } .sdx-container audio, .sdx-container video { display: inline-block; } .sdx-container audio:not([controls]) { display: none; height: 0; } .sdx-container img { border-style: none; } .sdx-container svg:not(:root) { overflow: hidden; } .sdx-container button, .sdx-container input, .sdx-container optgroup, .sdx-container select, .sdx-container textarea { line-height: 1.15; /* 1 */ font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ margin: 0; /* 2 */ } .sdx-container button { overflow: visible; } .sdx-container button, .sdx-container select { /* 1 */ text-transform: none; } .sdx-container button, .sdx-container html [type=button], .sdx-container [type=reset], .sdx-container [type=submit] { -webkit-appearance: button; /* 2 */ } .sdx-container button, .sdx-container [type=button], .sdx-container [type=reset], .sdx-container [type=submit] { /** * Remove the inner border and padding in Firefox. */ /** * Restore the focus styles unset by the previous rule. */ } .sdx-container button::-moz-focus-inner, .sdx-container [type=button]::-moz-focus-inner, .sdx-container [type=reset]::-moz-focus-inner, .sdx-container [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } .sdx-container button:-moz-focusring, .sdx-container [type=button]:-moz-focusring, .sdx-container [type=reset]:-moz-focusring, .sdx-container [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } .sdx-container input { overflow: visible; } .sdx-container input[type=checkbox], .sdx-container input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } .sdx-container input[type=number]::-webkit-inner-spin-button, .sdx-container input[type=number]::-webkit-outer-spin-button { height: auto; } .sdx-container input[type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } .sdx-container input[type=search]::-webkit-search-cancel-button, .sdx-container input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } .sdx-container input[type=file]::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } .sdx-container fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } .sdx-container legend { box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ color: inherit; /* 2 */ white-space: normal; /* 1 */ } .sdx-container progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } .sdx-container textarea { overflow: auto; } .sdx-container details { display: block; } .sdx-container summary { display: list-item; } .sdx-container menu { display: block; } .sdx-container canvas { display: inline-block; } .sdx-container template { display: none; } .sdx-container [hidden] { display: none; } .sdx-container body { margin: 0; } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 200; font-style: normal; src: url("../fonts/TheSans/TheSansB_200_.eot") format("eot"), url("../fonts/TheSans/TheSansB_200_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_200_.woff") format("woff"), url("../fonts/TheSans/TheSansB_200_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_200_.svg#TheSansB_200_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 300; font-style: normal; src: url("../fonts/TheSans/TheSansB_300_.eot") format("eot"), url("../fonts/TheSans/TheSansB_300_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_300_.woff") format("woff"), url("../fonts/TheSans/TheSansB_300_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_300_.svg#TheSansB_300_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 400; font-style: normal; src: url("../fonts/TheSans/TheSansB_400_.eot") format("eot"), url("../fonts/TheSans/TheSansB_400_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_400_.woff") format("woff"), url("../fonts/TheSans/TheSansB_400_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_400_.svg#TheSansB_400_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 500; font-style: normal; src: url("../fonts/TheSans/TheSansB_500_.eot") format("eot"), url("../fonts/TheSans/TheSansB_500_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_500_.woff") format("woff"), url("../fonts/TheSans/TheSansB_500_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_500_.svg#TheSansB_500_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 600; font-style: normal; src: url("../fonts/TheSans/TheSansB_600_.eot") format("eot"), url("../fonts/TheSans/TheSansB_600_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_600_.woff") format("woff"), url("../fonts/TheSans/TheSansB_600_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_600_.svg#TheSansB_600_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 700; font-style: normal; src: url("../fonts/TheSans/TheSansB_700_.eot") format("eot"), url("../fonts/TheSans/TheSansB_700_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_700_.woff") format("woff"), url("../fonts/TheSans/TheSansB_700_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_700_.svg#TheSansB_700_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 800; font-style: normal; src: url("../fonts/TheSans/TheSansB_800_.eot") format("eot"), url("../fonts/TheSans/TheSansB_800_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_800_.woff") format("woff"), url("../fonts/TheSans/TheSansB_800_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_800_.svg#TheSansB_800_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 900; font-style: normal; src: url("../fonts/TheSans/TheSansB_900_.eot") format("eot"), url("../fonts/TheSans/TheSansB_900_.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_900_.woff") format("woff"), url("../fonts/TheSans/TheSansB_900_.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_900_.svg#TheSansB_900_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 200; font-style: italic; src: url("../fonts/TheSans/TheSansB_200i.eot") format("eot"), url("../fonts/TheSans/TheSansB_200i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_200i.woff") format("woff"), url("../fonts/TheSans/TheSansB_200i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_200i.svg#TheSansB_200i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 300; font-style: italic; src: url("../fonts/TheSans/TheSansB_300i.eot") format("eot"), url("../fonts/TheSans/TheSansB_300i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_300i.woff") format("woff"), url("../fonts/TheSans/TheSansB_300i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_300i.svg#TheSansB_300i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 400; font-style: italic; src: url("../fonts/TheSans/TheSansB_400i.eot") format("eot"), url("../fonts/TheSans/TheSansB_400i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_400i.woff") format("woff"), url("../fonts/TheSans/TheSansB_400i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_400i.svg#TheSansB_400i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 500; font-style: italic; src: url("../fonts/TheSans/TheSansB_500i.eot") format("eot"), url("../fonts/TheSans/TheSansB_500i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_500i.woff") format("woff"), url("../fonts/TheSans/TheSansB_500i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_500i.svg#TheSansB_500i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 600; font-style: italic; src: url("../fonts/TheSans/TheSansB_600i.eot") format("eot"), url("../fonts/TheSans/TheSansB_600i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_600i.woff") format("woff"), url("../fonts/TheSans/TheSansB_600i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_600i.svg#TheSansB_600i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 700; font-style: italic; src: url("../fonts/TheSans/TheSansB_700i.eot") format("eot"), url("../fonts/TheSans/TheSansB_700i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_700i.woff") format("woff"), url("../fonts/TheSans/TheSansB_700i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_700i.svg#TheSansB_700i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 800; font-style: italic; src: url("../fonts/TheSans/TheSansB_800i.eot") format("eot"), url("../fonts/TheSans/TheSansB_800i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_800i.woff") format("woff"), url("../fonts/TheSans/TheSansB_800i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_800i.svg#TheSansB_800i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSans"; font-weight: 900; font-style: italic; src: url("../fonts/TheSans/TheSansB_900i.eot") format("eot"), url("../fonts/TheSans/TheSansB_900i.woff2") format("woff2"), url("../fonts/TheSans/TheSansB_900i.woff") format("woff"), url("../fonts/TheSans/TheSansB_900i.ttf") format("truetype"), url("../fonts/TheSans/TheSansB_900i.svg#TheSansB_900i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 200; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_200_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_200_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_200_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_200_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_200_.svg#TheSerifB_200_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 300; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_300_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_300_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_300_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_300_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_300_.svg#TheSerifB_300_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 400; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_400_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_400_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_400_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_400_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_400_.svg#TheSerifB_400_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 500; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_500_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_500_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_500_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_500_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_500_.svg#TheSerifB_500_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 600; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_600_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_600_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_600_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_600_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_600_.svg#TheSerifB_600_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 700; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_700_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_700_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_700_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_700_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_700_.svg#TheSerifB_700_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 800; font-style: normal; src: url("../fonts/TheSerif/TheSerifB_800_.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_800_.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_800_.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_800_.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_800_.svg#TheSerifB_800_") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 200; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_200i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_200i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_200i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_200i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_200i.svg#TheSerifB_200i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 300; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_300i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_300i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_300i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_300i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_300i.svg#TheSerifB_300i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 400; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_400i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_400i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_400i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_400i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_400i.svg#TheSerifB_400i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 500; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_500i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_500i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_500i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_500i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_500i.svg#TheSerifB_500i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 600; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_600i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_600i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_600i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_600i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_600i.svg#TheSerifB_600i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 700; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_700i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_700i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_700i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_700i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_700i.svg#TheSerifB_700i") format("svg"); } } @font-face { .sdx-container { font-family: "TheSerif"; font-weight: 800; font-style: italic; src: url("../fonts/TheSerif/TheSerifB_800i.eot") format("eot"), url("../fonts/TheSerif/TheSerifB_800i.woff2") format("woff2"), url("../fonts/TheSerif/TheSerifB_800i.woff") format("woff"), url("../fonts/TheSerif/TheSerifB_800i.ttf") format("truetype"), url("../fonts/TheSerif/TheSerifB_800i.svg#TheSerifB_800i") format("svg"); } } @font-face { .sdx-container { font-family: "sdx-icons"; font-weight: normal; font-style: normal; src: url("../fonts/sdx-icons/sdx-icons.eot") format("eot"), url("../fonts/sdx-icons/sdx-icons.woff2") format("woff2"), url("../fonts/sdx-icons/sdx-icons.woff") format("woff"), url("../fonts/sdx-icons/sdx-icons.ttf") format("truetype"), url("../fonts/sdx-icons/sdx-icons.svg#sdx-icons") format("svg"); } } .sdx-container .icon { display: inline-block; text-transform: none; text-decoration: none; text-rendering: auto; line-height: 1; font-family: "sdx-icons"; font-size: inherit; font-weight: normal; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-stretch: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sdx-container .icon--s1 { font-size: 16px; } .sdx-container .icon--s2 { font-size: 24px; } .sdx-container .icon--s3 { font-size: 32px; } .sdx-container .icon--s4 { font-size: 40px; } .sdx-container .icon--s5 { font-size: 48px; } .sdx-container .icon--s6 { font-size: 56px; } .sdx-container .icon--flip-horizontal { transform: scale(-1, 1); } .sdx-container .icon--flip-vertical { transform: scale(1, -1); } .sdx-container .icon--flip-horizontal-vertical { transform: scale(-1, -1); } .sdx-container .icon--excel { color: #008236; } .sdx-container .icon--powerpoint { color: #e86416; } .sdx-container .icon--word { color: #1781e3; } .sdx-container .icon--pdf { color: #d12; } .sdx-container .icon-001-account::before, .sdx-container .icon-account::before { content: ""; } .sdx-container .icon-002-arrow-down::before, .sdx-container .icon-arrow-down::before { content: ""; } .sdx-container .icon-003-arrow-left::before, .sdx-container .icon-arrow-left::before { content: ""; } .sdx-container .icon-004-arrow-right::before, .sdx-container .icon-arrow-right::before { content: ""; } .sdx-container .icon-005-arrow-up::before, .sdx-container .icon-arrow-up::before { content: ""; } .sdx-container .icon-006-attachment::before, .sdx-container .icon-attachment::before { content: ""; } .sdx-container .icon-007-backup::before, .sdx-container .icon-backup::before { content: ""; } .sdx-container .icon-008-bin::before, .sdx-container .icon-bin::before { content: ""; } .sdx-container .icon-009-calendar::before, .sdx-container .icon-calendar::before { content: ""; } .sdx-container .icon-010-cancel::before, .sdx-container .icon-cancel::before { content: ""; } .sdx-container .icon-011-check-mark::before, .sdx-container .icon-check-mark::before { content: ""; } .sdx-container .icon-012-check-mark-2-circle::before, .sdx-container .icon-check-mark-2-circle::before { content: ""; } .sdx-container .icon-012-check-mark-circle::before, .sdx-container .icon-check-mark-circle::before { content: ""; } .sdx-container .icon-013-chevron-normal-down::before, .sdx-container .icon-chevron-normal-down::before { content: ""; } .sdx-container .icon-013-chevron-down::before, .sdx-container .icon-chevron-down::before { content: ""; } .sdx-container .icon-014-chevron-normal-left::before, .sdx-container .icon-chevron-normal-left::before { content: ""; } .sdx-container .icon-014-chevron-left::before, .sdx-container .icon-chevron-left::before { content: ""; } .sdx-container .icon-015-chevron-normal-right::before, .sdx-container .icon-chevron-normal-right::before { content: ""; } .sdx-container .icon-015-chevron-right::before, .sdx-container .icon-chevron-right::before { content: ""; } .sdx-container .icon-016-chevron-normal-up::before, .sdx-container .icon-chevron-normal-up::before { content: ""; } .sdx-container .icon-016-chevron-up::before, .sdx-container .icon-chevron-up::before { content: ""; } .sdx-container .icon-017-chevron-flat-down::before, .sdx-container .icon-chevron-flat-down::before { content: ""; } .sdx-container .icon-018-chevron-flat-left::before, .sdx-container .icon-chevron-flat-left::before { content: ""; } .sdx-container .icon-019-chevron-flat-right::before, .sdx-container .icon-chevron-flat-right::before { content: ""; } .sdx-container .icon-020-chevron-flat-up::before, .sdx-container .icon-chevron-flat-up::before { content: ""; } .sdx-container .icon-021-clock::before, .sdx-container .icon-clock::before { content: ""; } .sdx-container .icon-022-close::before, .sdx-container .icon-close::before { content: ""; } .sdx-container .icon-023-download::before, .sdx-container .icon-download::before { content: ""; } .sdx-container .icon-024-download-cloud::before, .sdx-container .icon-download-cloud::before { content: ""; } .sdx-container .icon-025-edit::before, .sdx-container .icon-edit::before { content: ""; } .sdx-container .icon-026-exclamation-mark-circle::before, .sdx-container .icon-exclamation-mark-circle::before { content: ""; } .sdx-container .icon-027-flag::before, .sdx-container .icon-flag::before { content: ""; } .sdx-container .icon-028-folder-new::before, .sdx-container .icon-folder-new::before { content: ""; } .sdx-container .icon-029-folder-video::before, .sdx-container .icon-folder-video::before { content: ""; } .sdx-container .icon-030-forward::before, .sdx-container .icon-forward::before { content: ""; } .sdx-container .icon-031-forward-filled::before, .sdx-container .icon-forward-filled::before { content: ""; } .sdx-container .icon-032-forward-message::before, .sdx-container .icon-forward-message::before { content: ""; } .sdx-container .icon-033-forward-message-2::before, .sdx-container .icon-forward-message-2::before { content: ""; } .sdx-container .icon-034-fullscreen-enter::before, .sdx-container .icon-fullscreen-enter::before { content: ""; } .sdx-container .icon-035-fullscreen-enter-2::before, .sdx-container .icon-fullscreen-enter-2::before { content: ""; } .sdx-container .icon-036-fullscreen-leave::before, .sdx-container .icon-fullscreen-leave::before { content: ""; } .sdx-container .icon-037-fullscreen-leave-2::before, .sdx-container .icon-fullscreen-leave-2::before { content: ""; } .sdx-container .icon-038-go-to-end::before, .sdx-container .icon-go-to-end::before { content: ""; } .sdx-container .icon-039-go-to-end-filled::before, .sdx-container .icon-go-to-end-filled::before { content: ""; } .sdx-container .icon-040-go-to-start::before, .sdx-container .icon-go-to-start::before { content: ""; } .sdx-container .icon-041-go-to-start-filled::before, .sdx-container .icon-go-to-start-filled::before { content: ""; } .sdx-container .icon-042-group::before, .sdx-container .icon-group::before { content: ""; } .sdx-container .icon-043-heart::before, .sdx-container .icon-heart::before { content: ""; } .sdx-container .icon-044-home::before, .sdx-container .icon-home::before { content: ""; } .sdx-container .icon-045-hourglass::before, .sdx-container .icon-hourglass::before { content: ""; } .sdx-container .icon-046-information-circle::before, .sdx-container .icon-information-circle::before { content: ""; } .sdx-container .icon-047-key::before, .sdx-container .icon-key::before { content: ""; } .sdx-container .icon-048-link::before, .sdx-container .icon-link::before { content: ""; } .sdx-container .icon-049-lock::before, .sdx-container .icon-lock::before { content: ""; } .sdx-container .icon-050-menu::before, .sdx-container .icon-menu::before { content: ""; } .sdx-container .icon-051-message::before, .sdx-container .icon-message::before { content: ""; } .sdx-container .icon-052-minus::before, .sdx-container .icon-minus::before { content: ""; } .sdx-container .icon-053-more::before, .sdx-container .icon-more::before { content: ""; } .sdx-container .icon-054-new::before, .sdx-container .icon-new::before { content: ""; } .sdx-container .icon-055-okay::before, .sdx-container .icon-okay::before { content: ""; } .sdx-container .icon-056-pause::before, .sdx-container .icon-pause::before { content: ""; } .sdx-container .icon-057-pause-filled::before, .sdx-container .icon-pause-filled::before { content: ""; } .sdx-container .icon-058-person::before, .sdx-container .icon-person::before { content: ""; } .sdx-container .icon-059-play::before, .sdx-container .icon-play::before { content: ""; } .sdx-container .icon-060-play-filled::before, .sdx-container .icon-play-filled::before { content: ""; } .sdx-container .icon-061-plus::before, .sdx-container .icon-plus::before { content: ""; } .sdx-container .icon-062-question-mark-circle::before, .sdx-container .icon-question-mark-circle::before { content: ""; } .sdx-container .icon-063-record::before, .sdx-container .icon-record::before { content: ""; } .sdx-container .icon-064-record-filled::before, .sdx-container .icon-record-filled::before { content: ""; } .sdx-container .icon-065-rename::before, .sdx-container .icon-rename::before { content: ""; } .sdx-container .icon-066-replay::before, .sdx-container .icon-replay::before { content: ""; } .sdx-container .icon-067-reply-message::before, .sdx-container .icon-reply-message::before { content: ""; } .sdx-container .icon-068-reply-message-2::before, .sdx-container .icon-reply-message-2::before { content: ""; } .sdx-container .icon-069-reply-message-all::before, .sdx-container .icon-reply-message-all::before { content: ""; } .sdx-container .icon-070-reply-message-all-2::before, .sdx-container .icon-reply-message-all-2::before { content: ""; } .sdx-container .icon-071-retry::before, .sdx-container .icon-retry::before { content: ""; } .sdx-container .icon-072-rewind::before, .sdx-container .icon-rewind::before { content: ""; } .sdx-container .icon-073-rewind-filled::before, .sdx-container .icon-rewind-filled::before { content: ""; } .sdx-container .icon-074-save::before, .sdx-container .icon-save::before { content: ""; } .sdx-container .icon-075-save-2::before, .sdx-container .icon-save-2::before { content: ""; } .sdx-container .icon-076-save-3::before, .sdx-container .icon-save-3::before { content: ""; } .sdx-container .icon-077-search::before, .sdx-container .icon-search::before { content: ""; } .sdx-container .icon-078-settings::before, .sdx-container .icon-settings::before { content: ""; } .sdx-container .icon-079-shopping-trolley::before, .sdx-container .icon-shopping-trolley::before { content: ""; } .sdx-container .icon-080-speech-bubble::before, .sdx-container .icon-speech-bubble::before { content: ""; } .sdx-container .icon-081-standby::before, .sdx-container .icon-standby::before { content: ""; } .sdx-container .icon-082-star::before, .sdx-container .icon-star::before { content: ""; } .sdx-container .icon-083-stop::before, .sdx-container .icon-stop::before { content: ""; } .sdx-container .icon-084-stop-filled::before, .sdx-container .icon-stop-filled::before { content: ""; } .sdx-container .icon-085-synchronise::before, .sdx-container .icon-synchronise::before { content: ""; } .sdx-container .icon-086-thumb-up::before, .sdx-container .icon-thumb-up::before { content: ""; } .sdx-container .icon-087-upload::before, .sdx-container .icon-upload::before { content: ""; } .sdx-container .icon-088-upload-cloud::before, .sdx-container .icon-upload-cloud::before { content: ""; } .sdx-container .icon-089-volume-fortissimo::before, .sdx-container .icon-volume-fortissimo::before { content: ""; } .sdx-container .icon-090-volume-forte::before, .sdx-container .icon-volume-forte::before { content: ""; } .sdx-container .icon-091-volume-piano::before, .sdx-container .icon-volume-piano::before { content: ""; } .sdx-container .icon-092-volume-pianissimo::before, .sdx-container .icon-volume-pianissimo::before { content: ""; } .sdx-container .icon-093-volume-mute::before, .sdx-container .icon-volume-mute::before { content: ""; } .sdx-container .icon-094-warning::before, .sdx-container .icon-warning::before { content: ""; } .sdx-container .icon-095-zoom-in::before, .sdx-container .icon-zoom-in::before { content: ""; } .sdx-container .icon-096-zoom-out::before, .sdx-container .icon-zoom-out::before { content: ""; } .sdx-container .icon-097-suitcase::before, .sdx-container .icon-suitcase::before { content: ""; } .sdx-container .icon-098-ambulance::before, .sdx-container .icon-ambulance::before { content: ""; } .sdx-container .icon-099-ambulance-2::before, .sdx-container .icon-ambulance-2::before { content: ""; } .sdx-container .icon-100-van::before, .sdx-container .icon-van::before { content: ""; } .sdx-container .icon-101-delivery::before, .sdx-container .icon-delivery::before { content: ""; } .sdx-container .icon-102-delivery-2::before, .sdx-container .icon-delivery-2::before { content: ""; } .sdx-container .icon-103-applications::before, .sdx-container .icon-applications::before { content: ""; } .sdx-container .icon-104-assistant::before, .sdx-container .icon-assistant::before { content: ""; } .sdx-container .icon-105-call-centre::before, .sdx-container .icon-call-centre::before { content: ""; } .sdx-container .icon-106-bill::before, .sdx-container .icon-bill::before { content: ""; } .sdx-container .icon-107-child-protection::before, .sdx-container .icon-child-protection::before { content: ""; } .sdx-container .icon-108-coins::before, .sdx-container .icon-coins::before { content: ""; } .sdx-container .icon-109-compass::before, .sdx-container .icon-compass::before { content: ""; } .sdx-container .icon-110-mobile-phone::before, .sdx-container .icon-mobile-phone::before { content: ""; } .sdx-container .icon-111-smartphone::before, .sdx-container .icon-smartphone::before { content: ""; } .sdx-container .icon-112-tablet::before, .sdx-container .icon-tablet::before { content: ""; } .sdx-container .icon-113-laptop::before, .sdx-container .icon-laptop::before { content: ""; } .sdx-container .icon-114-computer::before, .sdx-container .icon-computer::before { content: ""; } .sdx-container .icon-115-workstation::before, .sdx-container .icon-workstation::before { content: ""; } .sdx-container .icon-116-credit-card::before, .sdx-container .icon-credit-card::before { content: ""; } .sdx-container .icon-117-directory::before, .sdx-container .icon-directory::before { content: ""; } .sdx-container .icon-118-document::before, .sdx-container .icon-document::before { content: ""; } .sdx-container .icon-119-document-new::before, .sdx-container .icon-document-new::before { content: ""; } .sdx-container .icon-120-document-excel::before, .sdx-container .icon-document-excel::before { content: ""; } .sdx-container .icon-121-document-powerpoint::before, .sdx-container .icon-document-powerpoint::before { content: ""; } .sdx-container .icon-122-document-word::before, .sdx-container .icon-document-word::before { content: ""; } .sdx-container .icon-123-document-pdf::before, .sdx-container .icon-document-pdf::before { content: ""; } .sdx-container .icon-124-document-txt::before, .sdx-container .icon-document-txt::before { content: ""; } .sdx-container .icon-125-document-zip::before, .sdx-container .icon-document-zip::before { content: ""; } .sdx-container .icon-126-document-code::before, .sdx-container .icon-document-code::before { content: ""; } .sdx-container .icon-127-e-mail::before, .sdx-container .icon-e-mail::before { content: ""; } .sdx-container .icon-128-film-camera::before, .sdx-container .icon-film-camera::before { content: ""; } .sdx-container .icon-129-film-camera-2::before, .sdx-container .icon-film-camera-2::before { content: ""; } .sdx-container .icon-130-film-camera-3::before, .sdx-container .icon-film-camera-3::before { content: ""; } .sdx-container .icon-131-film-reel::before, .sdx-container .icon-film-reel::before { content: ""; } .sdx-container .icon-132-folder::before, .sdx-container .icon-folder::before { content: ""; } .sdx-container .icon-133-football::before, .sdx-container .icon-football::before { content: ""; } .sdx-container .icon-134-game::before, .sdx-container .icon-game::before { content: ""; } .sdx-container .icon-135-gaming::before, .sdx-container .icon-gaming::before { content: ""; } .sdx-container .icon-136-globe::before, .sdx-container .icon-globe::before { content: ""; } .sdx-container .icon-137-handset::before, .sdx-container .icon-handset::before { content: ""; } .sdx-container .icon-138-headphone::before, .sdx-container .icon-headphone::before { content: ""; } .sdx-container .icon-139-headset::before, .sdx-container .icon-headset::before { content: ""; } .sdx-container .icon-140-index-card::before, .sdx-container .icon-index-card::before { content: ""; } .sdx-container .icon-141-leaf::before, .sdx-container .icon-leaf::before { content: ""; } .sdx-container .icon-142-lifesaver::before, .sdx-container .icon-lifesaver::before { content: ""; } .sdx-container .icon-143-modem-wlan::before, .sdx-container .icon-modem-wlan::before { content: ""; } .sdx-container .icon-144-movie::before, .sdx-container .icon-movie::before { content: ""; } .sdx-container .icon-145-movie-2::before, .sdx-container .icon-movie-2::before { content: ""; } .sdx-container .icon-146-movie-3::before, .sdx-container .icon-movie-3::before { content: ""; } .sdx-container .icon-147-svod::before, .sdx-container .icon-svod::before { content: ""; } .sdx-container .icon-148-music::before, .sdx-container .icon-music::before { content: ""; } .sdx-container .icon-149-navigation::before, .sdx-container .icon-navigation::before { content: ""; } .sdx-container .icon-150-network::before, .sdx-container .icon-network::before { content: ""; } .sdx-container .icon-151-office::before, .sdx-container .icon-office::before { content: ""; } .sdx-container .icon-152-phone-basic::before, .sdx-container .icon-phone-basic::before { content: ""; } .sdx-container .icon-153-phone-pro::before, .sdx-container .icon-phone-pro::before { content: ""; } .sdx-container .icon-154-photo::before, .sdx-container .icon-photo::before { content: ""; } .sdx-container .icon-155-photo-camera::before, .sdx-container .icon-photo-camera::before { content: ""; } .sdx-container .icon-156-postcard::before, .sdx-container .icon-postcard::before { content: ""; } .sdx-container .icon-157-printer::before, .sdx-container .icon-printer::before { content: ""; } .sdx-container .icon-158-radio::before, .sdx-container .icon-radio::before { content: ""; } .sdx-container .icon-159-rss-feed::before, .sdx-container .icon-rss-feed::before { content: ""; } .sdx-container .icon-160-wlan::before, .sdx-container .icon-wlan::before { content: ""; } .sdx-container .icon-161-signal::before, .sdx-container .icon-signal::before { content: ""; } .sdx-container .icon-162-server::before, .sdx-container .icon-server::before { content: ""; } .sdx-container .icon-163-sms::before, .sdx-container .icon-sms::before { content: ""; } .sdx-container .icon-164-translation::before, .sdx-container .icon-translation::before { content: ""; } .sdx-container .icon-165-transmitter::before, .sdx-container .icon-transmitter::before { content: ""; } .sdx-container .icon-166-tv::before, .sdx-container .icon-tv::before { content: ""; } .sdx-container .icon-167-tv-hd::before, .sdx-container .icon-tv-hd::before { content: ""; } .sdx-container .icon-168-tv-2-0::before, .sdx-container .icon-tv-2-0::before { content: ""; } .sdx-container .icon-169-video-tape::before, .sdx-container .icon-video-tape::before { content: ""; } .sdx-container .icon-170-video-tape-2::before, .sdx-container .icon-video-tape-2::before { content: ""; } .sdx-container .icon-171-wearable-watch::before, .sdx-container .icon-wearable-watch::before { content: ""; } .sdx-container .icon-172-weather-cloud::before, .sdx-container .icon-weather-cloud::before { content: ""; } .sdx-container .icon-173-weather-rain::before, .sdx-container .icon-weather-rain::before { content: ""; } .sdx-container .icon-174-weather-rain-unsettled::before, .sdx-container .icon-weather-rain-unsettled::before { content: ""; } .sdx-container .icon-175-weather-snow::before, .sdx-container .icon-weather-snow::before { content: ""; } .sdx-container .icon-176-weather-snow-unsettled::before, .sdx-container .icon-weather-snow-unsettled::before { content: ""; } .sdx-container .icon-177-weather-storm::before, .sdx-container .icon-weather-storm::before { content: ""; } .sdx-container .icon-178-weather-storm-unsettled::before, .sdx-container .icon-weather-storm-unsettled::before { content: ""; } .sdx-container .icon-179-weather-sun::before, .sdx-container .icon-weather-sun::before { content: ""; } .sdx-container .icon-180-weather-sun-unsettled::before, .sdx-container .icon-weather-sun-unsettled::before { content: ""; } .sdx-container .icon-181-inbox-1::before, .sdx-container .icon-inbox-1::before { content: ""; } .sdx-container .icon-181-inbox::before, .sdx-container .icon-inbox::before { content: ""; } .sdx-container .icon-182-drafts-3::before, .sdx-container .icon-drafts-3::before { content: ""; } .sdx-container .icon-182-drafts::before, .sdx-container .icon-drafts::before { content: ""; } .sdx-container .icon-183-sent-6::before, .sdx-container .icon-sent-6::before { content: ""; } .sdx-container .icon-183-sent::before, .sdx-container .icon-sent::before { content: ""; } .sdx-container .icon-184-sent-2::before, .sdx-container .icon-sent-2::before { content: ""; } .sdx-container .icon-185-inbox-2::before, .sdx-container .icon-inbox-2::before { content: ""; } .sdx-container .icon-185-inbox::before, .sdx-container .icon-inbox::before { content: ""; } .sdx-container .icon-186-drafts::before, .sdx-container .icon-drafts::before { content: ""; } .sdx-container .icon-187-sent::before, .sdx-container .icon-sent::before { content: ""; } .sdx-container .icon-188-sent-3::before, .sdx-container .icon-sent-3::before { content: ""; } .sdx-container .icon-188-sent-2::before, .sdx-container .icon-sent-2::before { content: ""; } .sdx-container .icon-189-inbox-3::before, .sdx-container .icon-inbox-3::before { content: ""; } .sdx-container .icon-189-inbox::before, .sdx-container .icon-inbox::before { content: ""; } .sdx-container .icon-190-drafts-2::before, .sdx-container .icon-drafts-2::before { content: ""; } .sdx-container .icon-190-drafts::before, .sdx-container .icon-drafts::before { content: ""; } .sdx-container .icon-191-sent-5::before, .sdx-container .icon-sent-5::before { content: ""; } .sdx-container .icon-191-sent::before, .sdx-container .icon-sent::before { content: ""; } .sdx-container .icon-192-sent-4::before, .sdx-container .icon-sent-4::before { content: ""; } .sdx-container .icon-192-sent-2::before, .sdx-container .icon-sent-2::before { content: ""; } .sdx-container .icon-193-website::before, .sdx-container .icon-website::before { content: ""; } .sdx-container .icon-194-website-2::before, .sdx-container .icon-website-2::before { content: ""; } .sdx-container .icon-195-heart-filled::before, .sdx-container .icon-heart-filled::before { content: ""; } .sdx-container .icon-196-exclamation-mark::before, .sdx-container .icon-exclamation-mark::before { content: ""; } .sdx-container .icon-197-share::before, .sdx-container .icon-share::before { content: ""; } .sdx-container .icon-198-chevron-small-down::before, .sdx-container .icon-chevron-small-down::before { content: ""; } .sdx-container .icon-198-chevron-down-small::before, .sdx-container .icon-chevron-down-small::before { content: ""; } .sdx-container .icon-199-chevron-small-up::before, .sdx-container .icon-chevron-small-up::before { content: ""; } .sdx-container .icon-199-chevron-up-small::before, .sdx-container .icon-chevron-up-small::before { content: ""; } .sdx-container .icon-200-chevron-small-left::before, .sdx-container .icon-chevron-small-left::before { content: ""; } .sdx-container .icon-200-chevron-left-small::before, .sdx-container .icon-chevron-left-small::before { content: ""; } .sdx-container .icon-201-chevron-small-right::before, .sdx-container .icon-chevron-small-right::before { content: ""; } .sdx-container .icon-201-chevron-right-small::before, .sdx-container .icon-chevron-right-small::before { content: ""; } .sdx-container .icon-202-clear-circle::before, .sdx-container .icon-clear-circle::before { content: ""; } .sdx-container .icon-203-server::before, .sdx-container .icon-server::before { content: ""; } .sdx-container .icon-204-cd::before, .sdx-container .icon-cd::before { content: ""; } .sdx-container .icon-205-bundle::before, .sdx-container .icon-bundle::before { content: ""; } .sdx-container .icon-206-database::before, .sdx-container .icon-database::before { content: ""; } .sdx-container .icon-207-firewall::before, .sdx-container .icon-firewall::before { content: ""; } .sdx-container .icon-208-proxy-server::before, .sdx-container .icon-proxy-server::before { content: ""; } .sdx-container .icon-209-set-top-box::before, .sdx-container .icon-set-top-box::before { content: ""; } .sdx-container .icon-209-settopbox::before, .sdx-container .icon-settopbox::before { content: ""; } .sdx-container .icon-210-puzzle::before, .sdx-container .icon-puzzle::before { content: ""; } .sdx-container .icon-211-skull::before, .sdx-container .icon-skull::before { content: ""; } .sdx-container .icon-212-fire::before, .sdx-container .icon-fire::before { content: ""; } .sdx-container .icon-213-setting::before, .sdx-container .icon-setting::before { content: ""; } .sdx-container .icon-214-present::before, .sdx-container .icon-present::before { content: ""; } .sdx-container .icon-215-certificate::before, .sdx-container .icon-certificate::before { content: ""; } .sdx-container .icon-216-waypointer::before, .sdx-container .icon-waypointer::before { content: ""; } .sdx-container .icon-217-eye::before, .sdx-container .icon-eye::before { content: ""; } .sdx-container .icon-218-eye-shut::before, .sdx-container .icon-eye-shut::before { content: ""; } .sdx-container .icon-219-runtime::before, .sdx-container .icon-runtime::before { content: ""; } .sdx-container .icon-220-list::before, .sdx-container .icon-list::before { content: ""; } .sdx-container .icon-221-topology::before, .sdx-container .icon-topology::before { content: ""; } .sdx-container .icon-222-blueprint::before, .sdx-container .icon-blueprint::before { content: ""; } .sdx-container .icon-223-map-pointer::before, .sdx-container .icon-map-pointer::before { content: ""; } .sdx-container .icon-224-console::before, .sdx-container .icon-console::before { content: ""; } .sdx-container .icon-225-reboot::before, .sdx-container .icon-reboot::before { content: ""; } .sdx-container .icon-226-reprovision::before, .sdx-container .icon-reprovision::before { content: ""; } .sdx-container .icon-227-speech-bubble-filled::before, .sdx-container .icon-speech-bubble-filled::before { content: ""; } .sdx-container .icon-228-star-filled::before, .sdx-container .icon-star-filled::before { content: ""; } .sdx-container .icon-229-gateway::before, .sdx-container .icon-gateway::before { content: ""; } .sdx-container .icon-230-flash::before, .sdx-container .icon-flash::before { content: ""; } .sdx-container .icon-231-rocket::before, .sdx-container .icon-rocket::before { content: ""; } .sdx-container .icon-232-robot-neutral::before, .sdx-container .icon-robot-neutral::before { content: ""; } .sdx-container .icon-233-robot-happy::before, .sdx-container .icon-robot-happy::before { content: ""; } .sdx-container .icon-234-robot-smile::before, .sdx-container .icon-robot-smile::before { content: ""; } .sdx-container .icon-235-robot-laughing::before, .sdx-container .icon-robot-laughing::before { content: ""; } .sdx-container .icon-236-robot-wink-1::before, .sdx-container .icon-robot-wink-1::before { content: ""; } .sdx-container .icon-236-robot-wink::before, .sdx-container .icon-robot-wink::before { content: ""; } .sdx-container .icon-237-robot-relaxed::before, .sdx-container .icon-robot-relaxed::before { content: ""; } .sdx-container .icon-238-robot-surprized::before, .sdx-container .icon-robot-surprized::before { content: ""; } .sdx-container .icon-239-robot-confused::before, .sdx-container .icon-robot-confused::before { content: ""; } .sdx-container .icon-240-robot-sad::before, .sdx-container .icon-robot-sad::before { content: ""; } .sdx-container .icon-241-robot-broken::before, .sdx-container .icon-robot-broken::before { content: ""; } .sdx-container .icon-242-umbrella::before, .sdx-container .icon-umbrella::before { content: ""; } .sdx-container .icon-243-security::before, .sdx-container .icon-security::before { content: ""; } .sdx-container .icon-244-routed-network::before, .sdx-container .icon-routed-network::before { content: ""; } .sdx-container .icon-245-ip-sets::before, .sdx-container .icon-ip-sets::before { content: ""; } .sdx-container .icon-246-resource-pool::before, .sdx-container .icon-resource-pool::before { content: ""; } .sdx-container .icon-247-edge::before, .sdx-container .icon-edge::before { content: ""; } .sdx-container .icon-248-switch::before, .sdx-container .icon-switch::before { content: ""; } .sdx-container .icon-249-processor::before, .sdx-container .icon-processor::before { content: ""; } .sdx-container .icon-250-distributed-network::before, .sdx-container .icon-distributed-network::before { content: ""; } .sdx-container .icon-251-legacy-network::before, .sdx-container .icon-legacy-network::before { content: ""; } .sdx-container .icon-252-star-half::before, .sdx-container .icon-star-half::before { content: ""; } .sdx-container .icon-253-filter::before, .sdx-container .icon-filter::before { content: ""; } .sdx-container .icon-254-idcard::before, .sdx-container .icon-idcard::before { content: ""; } .sdx-container .icon-254_idcard::before, .sdx-container .icon-254_idcard::before { content: ""; } .sdx-container .icon-255-passport::before, .sdx-container .icon-passport::before { content: ""; } .sdx-container .icon-255_passport::before, .sdx-container .icon-255_passport::before { content: ""; } .sdx-container .icon-256-thumb-up-filled::before, .sdx-container .icon-thumb-up-filled::before { content: ""; } .sdx-container .icon-256_thumb_up_filled::before, .sdx-container .icon-256_thumb_up_filled::before { content: ""; } .sdx-container .icon-257-tag::before, .sdx-container .icon-tag::before { content: ""; } .sdx-container .icon-257_tag::before, .sdx-container .icon-257_tag::before { content: ""; } .sdx-container .icon-258-bell::before, .sdx-container .icon-bell::before { content: ""; } .sdx-container .icon-258_bell::before, .sdx-container .icon-258_bell::before { content: ""; } .sdx-container .icon-259-flash-multiple::before, .sdx-container .icon-flash-multiple::before { content: ""; } .sdx-container .icon-259_flash_multiple::before, .sdx-container .icon-259_flash_multiple::before { content: ""; } .sdx-container .icon-260-lightbulb::before, .sdx-container .icon-lightbulb::before { content: ""; } .sdx-container .icon-260_lightbulb::before, .sdx-container .icon-260_lightbulb::before { content: ""; } .sdx-container .icon-261-devices::before, .sdx-container .icon-devices::before { content: ""; } .sdx-container .icon-261_devices::before, .sdx-container .icon-261_devices::before { content: ""; } .sdx-container .icon-262-smartphones-multiple::before, .sdx-container .icon-smartphones-multiple::before { content: ""; } .sdx-container .icon-262_smartphone_multiple::before, .sdx-container .icon-262_smartphone_multiple::before { content: ""; } .sdx-container .icon-263-document-indesign::before, .sdx-container .icon-document-indesign::before { content: ""; } .sdx-container .icon-263_document_indesign::before, .sdx-container .icon-263_document_indesign::before { content: ""; } .sdx-container .icon-264-document-illustrator::before, .sdx-container .icon-document-illustrator::before { content: ""; } .sdx-container .icon-264_document_illustrator::before, .sdx-container .icon-264_document_illustrator::before { content: ""; } .sdx-container .icon-265-document-onenote::before, .sdx-container .icon-document-onenote::before { content: ""; } .sdx-container .icon-265_document_onenote::before, .sdx-container .icon-265_document_onenote::before { content: ""; } .sdx-container .icon-266-document-eps::before, .sdx-container .icon-document-eps::before { content: ""; } .sdx-container .icon-266_document_eps::before, .sdx-container .icon-266_document_eps::before { content: ""; } .sdx-container .icon-267-document-photoshop::before, .sdx-container .icon-document-photoshop::before { content: ""; } .sdx-container .icon-267_document_photoshop::before, .sdx-container .icon-267_document_photoshop::before { content: ""; } .sdx-container .icon-268-document-visio::before, .sdx-container .icon-document-visio::before { content: ""; } .sdx-container .icon-268_document_visio::before, .sdx-container .icon-268_document_visio::before { content: ""; } .sdx-container .icon-269-document-publisher::before, .sdx-container .icon-document-publisher::before { content: ""; } .sdx-container .icon-269_document_publisher::before, .sdx-container .icon-269_document_publisher::before { content: ""; } .sdx-container .icon-270-document-unknowndoc::before, .sdx-container .icon-document-unknowndoc::before { content: ""; } .sdx-container .icon-270_document_unknowndoc::before, .sdx-container .icon-270_document_unknowndoc::before { content: ""; } .sdx-container .icon-271-shop::before, .sdx-container .icon-shop::before { content: ""; } .sdx-container .icon-271_shop::before, .sdx-container .icon-271_shop::before { content: ""; } .sdx-container .icon-272-scissors::before, .sdx-container .icon-scissors::before { content: ""; } .sdx-container .icon-272_scissors::before, .sdx-container .icon-272_scissors::before { content: ""; } .sdx-container .icon-273-battery::before, .sdx-container .icon-battery::before { content: ""; } .sdx-container .icon-273_battery::before, .sdx-container .icon-273_battery::before { content: ""; } .sdx-container .icon-274-battery-3::before, .sdx-container .icon-battery-3::before { content: ""; } .sdx-container .icon-274_battery_3::before, .sdx-container .icon-274_battery_3::before { content: ""; } .sdx-container .icon-275-battery-2::before, .sdx-container .icon-battery-2::before { content: ""; } .sdx-container .icon-275_battery_2::before, .sdx-container .icon-275_battery_2::before { content: ""; } .sdx-container .icon-276-battery-1::before, .sdx-container .icon-battery-1::before { content: ""; } .sdx-container .icon-276_battery_1::before, .sdx-container .icon-276_battery_1::before { content: ""; } .sdx-container .icon-277-battery-0::before, .sdx-container .icon-battery-0::before { content: ""; } .sdx-container .icon-277_battery_0::before, .sdx-container .icon-277_battery_0::before { content: ""; } .sdx-container .icon-278-battery-empty::before, .sdx-container .icon-battery-empty::before { content: ""; } .sdx-container .icon-278_battery_empty::before, .sdx-container .icon-278_battery_empty::before { content: ""; } .sdx-container .icon-279-mouse::before, .sdx-container .icon-mouse::before { content: ""; } .sdx-container .icon-279_mouse::before, .sdx-container .icon-279_mouse::before { content: ""; } .sdx-container .icon-280-pointer::before, .sdx-container .icon-pointer::before { content: ""; } .sdx-container .icon-280_pointer::before, .sdx-container .icon-280_pointer::before { content: ""; } .sdx-container .icon-281-realmouse::before, .sdx-container .icon-realmouse::before { content: ""; } .sdx-container .icon-281_realmouse::before, .sdx-container .icon-281_realmouse::before { content: ""; } .sdx-container .icon-282-bug::before, .sdx-container .icon-bug::before { content: ""; } .sdx-container .icon-282_bug::before, .sdx-container .icon-282_bug::before { content: ""; } .sdx-container .icon-283-privacy::before, .sdx-container .icon-privacy::before { content: ""; } .sdx-container .icon-283_privacy::before, .sdx-container .icon-283_privacy::before { content: ""; } .sdx-container .icon-284-ip::before, .sdx-container .icon-ip::before { content: ""; } .sdx-container .icon-284_ip::before, .sdx-container .icon-284_ip::before { content: ""; } .sdx-container .icon-285-patch::before, .sdx-container .icon-patch::before { content: ""; } .sdx-container .icon-285_patch::before, .sdx-container .icon-285_patch::before { content: ""; } .sdx-container .icon-286-microphone::before, .sdx-container .icon-microphone::before { content: ""; } .sdx-container .icon-286_microphone_1::before, .sdx-container .icon-286_microphone_1::before { content: ""; } .sdx-container .icon-287-microphone-filled::before, .sdx-container .icon-microphone-filled::before { content: ""; } .sdx-container .icon-287_microphone_2::before, .sdx-container .icon-287_microphone_2::before { content: ""; } .sdx-container .icon-288-handset-up::before, .sdx-container .icon-handset-up::before { content: ""; } .sdx-container .icon-288_handset_up::before, .sdx-container .icon-288_handset_up::before { content: ""; } .sdx-container .icon-289-handset-up-stroke::before, .sdx-container .icon-handset-up-stroke::before { content: ""; } .sdx-container .icon-289_handset_up_stroke::before, .sdx-container .icon-289_handset_up_stroke::before { content: ""; } .sdx-container .icon-290-handset-stroke::before, .sdx-container .icon-handset-stroke::before { content: ""; } .sdx-container .icon-290_handset_stroke::before, .sdx-container .icon-290_handset_stroke::before { content: ""; } .sdx-container .icon-291-software::before, .sdx-container .icon-software::before { content: ""; } .sdx-container .icon-291_software::before, .sdx-container .icon-291_software::before { content: ""; } .sdx-container .icon-292-dynamic-storage::before, .sdx-container .icon-dynamic-storage::before { content: ""; } .sdx-container .icon-292_dynamic_storage::before, .sdx-container .icon-292_dynamic_storage::before { content: ""; } .sdx-container .icon-293-wireless-data::before, .sdx-container .icon-wireless-data::before { content: ""; } .sdx-container .icon-293_wireless_data::before, .sdx-container .icon-293_wireless_data::before { content: ""; } .sdx-container .icon-294-wireless-voice::before, .sdx-container .icon-wireless-voice::before { content: ""; } .sdx-container .icon-294_wireless_voice::before, .sdx-container .icon-294_wireless_voice::before { content: ""; } .sdx-container .icon-295-lips::before, .sdx-container .icon-lips::before { content: ""; } .sdx-container .icon-295_lips::before, .sdx-container .icon-295_lips::before { content: ""; } .sdx-container .icon-296-flag-filled::before, .sdx-container .icon-flag-filled::before { content: ""; } .sdx-container .icon-296_flag-filled::before, .sdx-container .icon-296_flag-filled::before { content: ""; } .sdx-container .icon-297-alarmclock::before, .sdx-container .icon-alarmclock::before { content: ""; } .sdx-container .icon-297_alarmclock::before, .sdx-container .icon-297_alarmclock::before { content: ""; } .sdx-container .icon-298-copy::before, .sdx-container .icon-copy::before { content: ""; } .sdx-container .icon-298_copy::before, .sdx-container .icon-298_copy::before { content: ""; } .sdx-container .icon-299-paste::before, .sdx-container .icon-paste::before { content: ""; } .sdx-container .icon-299_paste::before, .sdx-container .icon-299_paste::before { content: ""; } .sdx-container .icon-300-plus-box::before, .sdx-container .icon-plus-box::before { content: ""; } .sdx-container .icon-300_plus-box::before, .sdx-container .icon-300_plus-box::before { content: ""; } .sdx-container .icon-301-minus-box::before, .sdx-container .icon-minus-box::before { content: ""; } .sdx-container .icon-301_minus-box::before, .sdx-container .icon-301_minus-box::before { content: ""; } .sdx-container .icon-302-service::before, .sdx-container .icon-service::before { content: ""; } .sdx-container .icon-302_service::before, .sdx-container .icon-302_service::before { content: ""; } .sdx-container .icon-303-business-phone::before, .sdx-container .icon-business-phone::before { content: ""; } .sdx-container .icon-303_business-phone::before, .sdx-container .icon-303_business-phone::before { content: ""; } .sdx-container .icon-304-accessibility::before, .sdx-container .icon-accessibility::before { content: ""; } .sdx-container .icon-305-agile-process::before, .sdx-container .icon-agile-process::before { content: ""; } .sdx-container .icon-306-airplaine::before, .sdx-container .icon-airplaine::before { content: ""; } .sdx-container .icon-307-alarmcall::before, .sdx-container .icon-alarmcall::before { content: ""; } .sdx-container .icon-308-auster::before, .sdx-container .icon-auster::before { content: ""; } .sdx-container .icon-309-barcode::before, .sdx-container .icon-barcode::before { content: ""; } .sdx-container .icon-310-bed::before, .sdx-container .icon-bed::before { content: ""; } .sdx-container .icon-311-bee::before, .sdx-container .icon-bee::before { content: ""; } .sdx-container .icon-312-beer::before, .sdx-container .icon-beer::before { content: ""; } .sdx-container .icon-313-biker::before, .sdx-container .icon-biker::before { content: ""; } .sdx-container .icon-314-blow-fish::before, .sdx-container .icon-blow-fish::before { content: ""; } .sdx-container .icon-315-book::before, .sdx-container .icon-book::before { content: ""; } .sdx-container .icon-316-broom::before, .sdx-container .icon-broom::before { content: ""; } .sdx-container .icon-317-bubbles::before, .sdx-container .icon-bubbles::before { content: ""; } .sdx-container .icon-318-bus::before, .sdx-container .icon-bus::before { content: ""; } .sdx-container .icon-319-business-network::before, .sdx-container .icon-business-network::before { content: ""; } .sdx-container .icon-320-buyback::before, .sdx-container .icon-buyback::before { content: ""; } .sdx-container .icon-321-bicycle::before, .sdx-container .icon-bicycle::before { content: ""; } .sdx-container .icon-322-cablecar::before, .sdx-container .icon-cablecar::before { content: ""; } .sdx-container .icon-323-calculator::before, .sdx-container .icon-calculator::before { content: ""; } .sdx-container .icon-324-call-log::before, .sdx-container .icon-call-log::before { content: ""; } .sdx-container .icon-325-callfilter::before, .sdx-container .icon-callfilter::before { content: ""; } .sdx-container .icon-326-car-pooling-2::before, .sdx-container .icon-car-pooling-2::before { content: ""; } .sdx-container .icon-327-car-pooling::before, .sdx-container .icon-car-pooling::before { content: ""; } .sdx-container .icon-328-car-sharing::before, .sdx-container .icon-car-sharing::before { content: ""; } .sdx-container .icon-329-car::before, .sdx-container .icon-car::before { content: ""; } .sdx-container .icon-330-carabiner::before, .sdx-container .icon-carabiner::before { content: ""; } .sdx-container .icon-331-cardreader::before, .sdx-container .icon-cardreader::before { content: ""; } .sdx-container .icon-332-care::before, .sdx-container .icon-care::before { content: ""; } .sdx-container .icon-333-cashdesk::before, .sdx-container .icon-cashdesk::before { content: ""; } .sdx-container .icon-334-ccserver::before, .sdx-container .icon-ccserver::before { content: ""; } .sdx-container .icon-335-chairlift::before, .sdx-container .icon-chairlift::before { content: ""; } .sdx-container .icon-336-child-protection-2::before, .sdx-container .icon-child-protection-2::before { content: ""; } .sdx-container .icon-337-cocktail::before, .sdx-container .icon-cocktail::before { content: ""; } .sdx-container .icon-338-coffee::before, .sdx-container .icon-coffee::before { content: ""; } .sdx-container .icon-339-combox::before, .sdx-container .icon-combox::before { content: ""; } .sdx-container .icon-340-computer-monitoring::before, .sdx-container .icon-computer-monitoring::before { content: ""; } .sdx-container .icon-341-copier::before, .sdx-container .icon-copier::before { content: ""; } .sdx-container .icon-342-crab::before, .sdx-container .icon-crab::before { content: ""; } .sdx-container .icon-343-crime::before, .sdx-container .icon-crime::before { content: ""; } .sdx-container .icon-344-cross::before, .sdx-container .icon-cross::before { content: ""; } .sdx-container .icon-345-crowd::before, .sdx-container .icon-crowd::before { content: ""; } .sdx-container .icon-346-crown::before, .sdx-container .icon-crown::before { content: ""; } .sdx-container .icon-347-cruiser::before, .sdx-container .icon-cruiser::before { content: ""; } .sdx-container .icon-348-dargebotene-hand::before, .sdx-container .icon-dargebotene-hand::before { content: ""; } .sdx-container .icon-349-desktopsharing::before, .sdx-container .icon-desktopsharing::before { content: ""; } .sdx-container .icon-350-diagram-2::before, .sdx-container .icon-diagram-2::before { content: ""; } .sdx-container .icon-351-diagram::before, .sdx-container .icon-diagram::before { content: ""; } .sdx-container .icon-352-dial::before, .sdx-container .icon-dial::before { content: ""; } .sdx-container .icon-353-digihome::before, .sdx-container .icon-digihome::before { content: ""; } .sdx-container .icon-354-discjockey::before, .sdx-container .icon-discjockey::before { content: ""; } .sdx-container .icon-355-doctor::before, .sdx-container .icon-doctor::before { content: ""; } .sdx-container .icon-356-driverless-car::before, .sdx-container .icon-driverless-car::before { content: ""; } .sdx-container .icon-357-drone::before, .sdx-container .icon-drone::before { content: ""; } .sdx-container .icon-358-ebike-2::before, .sdx-container .icon-ebike-2::before { content: ""; } .sdx-container .icon-359-ebike::before, .sdx-container .icon-ebike::before { content: ""; } .sdx-container .icon-360-ecar::before, .sdx-container .icon-ecar::before { content: ""; } .sdx-container .icon-361-edge-2::before, .sdx-container .icon-edge-2::before { content: ""; } .sdx-container .icon-362-elevator::before, .sdx-container .icon-elevator::before { content: ""; } .sdx-container .icon-363-emotorcycle-2::before, .sdx-container .icon-emotorcycle-2::before { content: ""; } .sdx-container .icon-364-emotorcycle::before, .sdx-container .icon-emotorcycle::before { content: ""; } .sdx-container .icon-365-esim::before, .sdx-container .icon-esim::before { content: ""; } .sdx-container .icon-366-ethernet::before, .sdx-container .icon-ethernet::before { content: ""; } .sdx-container .icon-367-exit::before, .sdx-container .icon-exit::before { content: ""; } .sdx-container .icon-368-factory::before, .sdx-container .icon-factory::before { content: ""; } .sdx-container .icon-369-faultclearing::before, .sdx-container .icon-faultclearing::before { content: ""; } .sdx-container .icon-370-fiber::before, .sdx-container .icon-fiber::before { content: ""; } .sdx-container .icon-371-firebrigade::before, .sdx-container .icon-firebrigade::before { content: ""; } .sdx-container .icon-372-fish::before, .sdx-container .icon-fish::before { content: ""; } .sdx-container .icon-373-fitness::before, .sdx-container .icon-fitness::before { content: ""; } .sdx-container .icon-374-flag-filled-wind::before, .sdx-container .icon-flag-filled-wind::before { content: ""; } .sdx-container .icon-375-flag-wind::before, .sdx-container .icon-flag-wind::before { content: ""; } .sdx-container .icon-376-fleet-management::before, .sdx-container .icon-fleet-management::before { content: ""; } .sdx-container .icon-377-food::before, .sdx-container .icon-food::before { content: ""; } .sdx-container .icon-378-freighter::before, .sdx-container .icon-freighter::before { content: ""; } .sdx-container .icon-379-garderobe::before, .sdx-container .icon-garderobe::before { content: ""; } .sdx-container .icon-380-gears-three::before, .sdx-container .icon-gears-three::before { content: ""; } .sdx-container .icon-381-gears::before, .sdx-container .icon-gears::before { content: ""; } .sdx-container .icon-382-globe-key::before, .sdx-container .icon-globe-key::before { content: ""; } .sdx-container .icon-383-goggles-3d::before, .sdx-container .icon-goggles-3d::before { content: ""; } .sdx-container .icon-384-green-laptop::before, .sdx-container .icon-green-laptop::before { content: ""; } .sdx-container .icon-385-green-mobile::before, .sdx-container .icon-green-mobile::before { content: ""; } .sdx-container .icon-386-hd-voice::before, .sdx-container .icon-hd-voice::before { content: ""; } .sdx-container .icon-387-helicopter::before, .sdx-container .icon-helicopter::before { content: ""; } .sdx-container .icon-388-helpline::before, .sdx-container .icon-helpline::before { content: ""; } .sdx-container .icon-389-hiking::before, .sdx-container .icon-hiking::before { content: ""; } .sdx-container .icon-390-home-ok::before, .sdx-container .icon-home-ok::before { content: ""; } .sdx-container .icon-391-hospital-building::before, .sdx-container .icon-hospital-building::before { content: ""; } .sdx-container .icon-392-hospital::before, .sdx-container .icon-hospital::before { content: ""; } .sdx-container .icon-393-hotspot-localprodukt::before, .sdx-container .icon-hotspot-localprodukt::before { content: ""; } .sdx-container .icon-394-hybrid-drive::before, .sdx-container .icon-hybrid-drive::before { content: ""; } .sdx-container .icon-395-infinity::before, .sdx-container .icon-infinity::before { content: ""; } .sdx-container .icon-396-informationint::before, .sdx-container .icon-informationint::before { content: ""; } .sdx-container .icon-397-insert-banknote::before, .sdx-container .icon-insert-banknote::before { content: ""; } .sdx-container .icon-398-insertcoin::before, .sdx-container .icon-insertcoin::before { content: ""; } .sdx-container .icon-399-internet-of-things::before, .sdx-container .icon-internet-of-things::before { content: ""; } .sdx-container .icon-400-ip-telephone::before, .sdx-container .icon-ip-telephone::before { content: ""; } .sdx-container .icon-401-jelly-fish::before, .sdx-container .icon-jelly-fish::before { content: ""; } .sdx-container .icon-402-juggler::before, .sdx-container .icon-juggler::before { content: ""; } .sdx-container .icon-403-keyboard::before, .sdx-container .icon-keyboard::before { content: ""; } .sdx-container .icon-404-laptop-internet::before, .sdx-container .icon-laptop-internet::before { content: ""; } .sdx-container .icon-405-living-room::before, .sdx-container .icon-living-room::before { content: ""; } .sdx-container .icon-406-lowradiation::before, .sdx-container .icon-lowradiation::before { content: ""; } .sdx-container .icon-407-mail-storge::before, .sdx-container .icon-mail-storge::before { content: ""; } .sdx-container .icon-408-mediabox::before, .sdx-container .icon-mediabox::before { content: ""; } .sdx-container .icon-409-megaphone::before, .sdx-container .icon-megaphone::before { content: ""; } .sdx-container .icon-410-mobile-buyback-2::before, .sdx-container .icon-mobile-buyback-2::before { content: ""; } .sdx-container .icon-411-mobile-buyback-3::before, .sdx-container .icon-mobile-buyback-3::before { content: ""; } .sdx-container .icon-412-mobile-buyback::before, .sdx-container .icon-mobile-buyback::before { content: ""; } .sdx-container .icon-413-mobile-internet::before, .sdx-container .icon-mobile-internet::before { content: ""; } .sdx-container .icon-414-mobile-laptop::before, .sdx-container .icon-mobile-laptop::before { content: ""; } .sdx-container .icon-415-mobile-message::before, .sdx-container .icon-mobile-message::before { content: ""; } .sdx-container .icon-416-mobile-payment::before, .sdx-container .icon-mobile-payment::before { content: ""; } .sdx-container .icon-417-mobilecall::before, .sdx-container .icon-mobilecall::before { content: ""; } .sdx-container .icon-418-mobileuser::before, .sdx-container .icon-mobileuser::before { content: ""; } .sdx-container .icon-419-modem::before, .sdx-container .icon-modem::before { content: ""; } .sdx-container .icon-420-motorcycle-2::before, .sdx-container .icon-motorcycle-2::before { content: ""; } .sdx-container .icon-421-motorcycle::before, .sdx-container .icon-motorcycle::before { content: ""; } .sdx-container .icon-422-mountainbiker::before, .sdx-container .icon-mountainbiker::before { content: ""; } .sdx-container .icon-423-music-app-2::before, .sdx-container .icon-music-app-2::before { content: ""; } .sdx-container .icon-424-music-app::before, .sdx-container .icon-music-app::before { content: ""; } .sdx-container .icon-425-mycloud::before, .sdx-container .icon-mycloud::before { content: ""; } .sdx-container .icon-426-network-3g::before, .sdx-container .icon-network-3g::before { content: ""; } .sdx-container .icon-427-network-4g::before, .sdx-container .icon-network-4g::before { content: ""; } .sdx-container .icon-428-network-4gplus::before, .sdx-container .icon-network-4gplus::before { content: ""; } .sdx-container .icon-429-network-5g::before, .sdx-container .icon-network-5g::before { content: ""; } .sdx-container .icon-430-network-improvement::before, .sdx-container .icon-network-improvement::before { content: ""; } .sdx-container .icon-431-newspaper::before, .sdx-container .icon-newspaper::before { content: ""; } .sdx-container .icon-432-nfc::before, .sdx-container .icon-nfc::before { content: ""; } .sdx-container .icon-433-nordic-combined::before, .sdx-container .icon-nordic-combined::before { content: ""; } .sdx-container .icon-434-notice::before, .sdx-container .icon-notice::before { content: ""; } .sdx-container .icon-435-nut-and-bolt::before, .sdx-container .icon-nut-and-bolt::before { content: ""; } .sdx-container .icon-436-online-storge::before, .sdx-container .icon-online-storge::before { content: ""; } .sdx-container .icon-437-parking-garage::before, .sdx-container .icon-parking-garage::before { content: ""; } .sdx-container .icon-438-parking-meter::before, .sdx-container .icon-parking-meter::before { content: ""; } .sdx-container .icon-439-parking-2::before, .sdx-container .icon-parking-2::before { content: ""; } .sdx-container .icon-440-parking::before, .sdx-container .icon-parking::before { content: ""; } .sdx-container .icon-441-pbx::before, .sdx-container .icon-pbx::before { content: ""; } .sdx-container .icon-442-personal-cloud::before, .sdx-container .icon-personal-cloud::before { content: ""; } .sdx-container .icon-443-pet-bottle::before, .sdx-container .icon-pet-bottle::before { content: ""; } .sdx-container .icon-444-pharmacy::before, .sdx-container .icon-pharmacy::before { content: ""; } .sdx-container .icon-445-phone-security::before, .sdx-container .icon-phone-security::before { content: ""; } .sdx-container .icon-446-phonecordless::before, .sdx-container .icon-phonecordless::before { content: ""; } .sdx-container .icon-447-piggy-bank::before, .sdx-container .icon-piggy-bank::before { content: ""; } .sdx-container .icon-448-podium::before, .sdx-container .icon-podium::before { content: ""; } .sdx-container .icon-449-police::before, .sdx-container .icon-police::before { content: ""; } .sdx-container .icon-450-power::before, .sdx-container .icon-power::before { content: ""; } .sdx-container .icon-451-prepaid-mobile::before, .sdx-container .icon-prepaid-mobile::before { content: ""; } .sdx-container .icon-452-presentation::before, .sdx-container .icon-presentation::before { content: ""; } .sdx-container .icon-453-ray::before, .sdx-container .icon-ray::before { content: ""; } .sdx-container .icon-454-relax::before, .sdx-container .icon-relax::before { content: ""; } .sdx-container .icon-455-remote-control::before, .sdx-container .icon-remote-control::before { content: ""; } .sdx-container .icon-456-restaurant::before, .sdx-container .icon-restaurant::before { content: ""; } .sdx-container .icon-457-robot-wink-2::before, .sdx-container .icon-robot-wink-2::before { content: ""; } .sdx-container .icon-458-runner::before, .sdx-container .icon-runner::before { content: ""; } .sdx-container .icon-459-safety::before, .sdx-container .icon-safety::before { content: ""; } .sdx-container .icon-460-sailer::before, .sdx-container .icon-sailer::before { content: ""; } .sdx-container .icon-461-satellitedish::before, .sdx-container .icon-satellitedish::before { content: ""; } .sdx-container .icon-462-satellite::before, .sdx-container .icon-satellite::before { content: ""; } .sdx-container .icon-463-scale::before, .sdx-container .icon-scale::before { content: ""; } .sdx-container .icon-464-screen-design::before, .sdx-container .icon-screen-design::before { content: ""; } .sdx-container .icon-465-searchtext::before, .sdx-container .icon-searchtext::before { content: ""; } .sdx-container .icon-466-securitycamera::before, .sdx-container .icon-securitycamera::before { content: ""; } .sdx-container .icon-467-selfcheckout::before, .sdx-container .icon-selfcheckout::before { content: ""; } .sdx-container .icon-468-server-small::before, .sdx-container .icon-server-small::before { content: ""; } .sdx-container .icon-469-shakehands::before, .sdx-container .icon-shakehands::before { content: ""; } .sdx-container .icon-470-shower::before, .sdx-container .icon-shower::before { content: ""; } .sdx-container .icon-471-silence::before, .sdx-container .icon-silence::before { content: ""; } .sdx-container .icon-472-simkarte::before, .sdx-container .icon-simkarte::before { content: ""; } .sdx-container .icon-473-ski-biathlon::before, .sdx-container .icon-ski-biathlon::before { content: ""; } .sdx-container .icon-474-ski-cross-country::before, .sdx-container .icon-ski-cross-country::before { content: ""; } .sdx-container .icon-475-ski-freestyle::before, .sdx-container .icon-ski-freestyle::before { content: ""; } .sdx-container .icon-476-ski-jumping::before, .sdx-container .icon-ski-jumping::before { content: ""; } .sdx-container .icon-477-ski-racer::before, .sdx-container .icon-ski-racer::before { content: ""; } .sdx-container .icon-478-ski-telemarking::before, .sdx-container .icon-ski-telemarking::before { content: ""; } .sdx-container .icon-479-ski::before, .sdx-container .icon-ski::before { content: ""; } .sdx-container .icon-480-small-meeting::before, .sdx-container .icon-small-meeting::before { content: ""; } .sdx-container .icon-481-smoking::before, .sdx-container .icon-smoking::before { content: ""; } .sdx-container .icon-482-snail::before, .sdx-container .icon-snail::before { content: ""; } .sdx-container .icon-483-snow::before, .sdx-container .icon-snow::before { content: ""; } .sdx-container .icon-484-snowboard::before, .sdx-container .icon-snowboard::before { content: ""; } .sdx-container .icon-485-socialnetwork::before, .sdx-container .icon-socialnetwork::before { content: ""; } .sdx-container .icon-486-sos::before, .sdx-container .icon-sos::before { content: ""; } .sdx-container .icon-487-spam::before, .sdx-container .icon-spam::before { content: ""; } .sdx-container .icon-488-spot::before, .sdx-container .icon-spot::before { content: ""; } .sdx-container .icon-489-squid::before, .sdx-container .icon-squid::before { content: ""; } .sdx-container .icon-490-stairs::before, .sdx-container .icon-stairs::before { content: ""; } .sdx-container .icon-491-standing-meeting::before, .sdx-container .icon-standing-meeting::before { content: ""; } .sdx-container .icon-492-station::before, .sdx-container .icon-station::before { content: ""; } .sdx-container .icon-493-steeringwheel::before, .sdx-container .icon-steeringwheel::before { content: ""; } .sdx-container .icon-494-strong-arm::before, .sdx-container .icon-strong-arm::before { content: ""; } .sdx-container .icon-495-svod-2::before, .sdx-container .icon-svod-2::before { content: ""; } .sdx-container .icon-496-swiss-1::before, .sdx-container .icon-swiss-1::before { content: ""; } .sdx-container .icon-497-swiss-2::before, .sdx-container .icon-swiss-2::before { content: ""; } .sdx-container .icon-498-switchboarding::before, .sdx-container .icon-switchboarding::before { content: ""; } .sdx-container .icon-499-switchoff::before, .sdx-container .icon-switchoff::before { content: ""; } .sdx-container .icon-500-taxcard::before, .sdx-container .icon-taxcard::before { content: ""; } .sdx-container .icon-501-taxcardin::before, .sdx-container .icon-taxcardin::before { content: ""; } .sdx-container .icon-502-taxcardout::before, .sdx-container .icon-taxcardout::before { content: ""; } .sdx-container .icon-503-teddybear::before, .sdx-container .icon-teddybear::before { content: ""; } .sdx-container .icon-504-telecommunication::before, .sdx-container .icon-telecommunication::before { content: ""; } .sdx-container .icon-505-tent::before, .sdx-container .icon-tent::before { content: ""; } .sdx-container .icon-506-thermometer::before, .sdx-container .icon-thermometer::before { content: ""; } .sdx-container .icon-507-toilet-f::before, .sdx-container .icon-toilet-f::before { content: ""; } .sdx-container .icon-508-toilet-m::before, .sdx-container .icon-toilet-m::before { content: ""; } .sdx-container .icon-509-toilet-s::before, .sdx-container .icon-toilet-s::before { content: ""; } .sdx-container .icon-510-touchdown::before, .sdx-container .icon-touchdown::before { content: ""; } .sdx-container .icon-511-trafficinfo::before, .sdx-container .icon-trafficinfo::before { content: ""; } .sdx-container .icon-512-trailrunner::before, .sdx-container .icon-trailrunner::before { content: ""; } .sdx-container .icon-513-train::before, .sdx-container .icon-train::before { content: ""; } .sdx-container .icon-514-tv-guide::before, .sdx-container .icon-tv-guide::before { content: ""; } .sdx-container .icon-515-uhd-tv::before, .sdx-container .icon-uhd-tv::before { content: ""; } .sdx-container .icon-516-usb::before, .sdx-container .icon-usb::before { content: ""; } .sdx-container .icon-517-user-presence::before, .sdx-container .icon-user-presence::before { content: ""; } .sdx-container .icon-518-van-fire-2::before, .sdx-container .icon-van-fire-2::before { content: ""; } .sdx-container .icon-519-van-fire::before, .sdx-container .icon-van-fire::before { content: ""; } .sdx-container .icon-520-ventilator::before, .sdx-container .icon-ventilator::before { content: ""; } .sdx-container .icon-521-video-call-laptop::before, .sdx-container .icon-video-call-laptop::before { content: ""; } .sdx-container .icon-522-video-call-mobile::before, .sdx-container .icon-video-call-mobile::before { content: ""; } .sdx-container .icon-523-virus::before, .sdx-container .icon-virus::before { content: ""; } .sdx-container .icon-524-waitingroom::before, .sdx-container .icon-waitingroom::before { content: ""; } .sdx-container .icon-525-wearable-glasses::before, .sdx-container .icon-wearable-glasses::before { content: ""; } .sdx-container .icon-526-webcam::before, .sdx-container .icon-webcam::before { content: ""; } .sdx-container .icon-527-wheelchair::before, .sdx-container .icon-wheelchair::before { content: ""; } .sdx-container .icon-528-wireless-charging::before, .sdx-container .icon-wireless-charging::before { content: ""; } .sdx-container html { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; } .sdx-container *[hidden] { display: none !important; } .sdx-container input, .sdx-container button, .sdx-container select, .sdx-container textarea { margin: 0; outline: none; border-radius: 0; text-align: left; line-height: normal; font: inherit; font-size: 100%; } .sdx-container hr { height: 0; box-sizing: content-box; } .sdx-container a { background-color: transparent; /* * Improve readability of focused elements when they are also in an * active/hover state. */ } .sdx-container a:active, .sdx-container a:hover { outline: 0; } .sdx-container input, .sdx-container button, .sdx-container submit { margin: 0; border: 0; background-color: transparent; padding: 0; color: inherit; /* * Improve readability of focused elements when they are also in an * active/hover state. */ /* * Remove IE11+ item jump on click */ } .sdx-container input:active, .sdx-container input:hover, .sdx-container button:active, .sdx-container button:hover, .sdx-container submit:active, .sdx-container submit:hover { outline: 0; } .sdx-container input > *, .sdx-container button > *, .sdx-container submit > * { position: relative; } .sdx-container [role=button] { cursor: pointer; } .sdx-container *, .sdx-container *::before, .sdx-container *::after { box-sizing: inherit; } .sdx-container body { font-family: "TheSans", sans-serif; font-weight: 300; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff; text-rendering: optimizeLegibility; color: #333; box-sizing: border-box; } .sdx-container .major-wrapper { display: flex; flex-direction: column; } .sdx-container .main-wrapper { display: flex; min-height: 100vh; flex-direction: column; } .sdx-container .main-wrapper.flex { flex: 1 0 auto; } .sdx-container .page { flex: 1 0 auto; min-height: 1px; } .sdx-container .white { color: #fff; } .sdx-container .navy { color: #015; } .sdx-container .blue { color: #1781e3; } .sdx-container .blue-tint-2, .sdx-container .blue-40 { color: #a2cdf4; } .sdx-container .blue-tint-3, .sdx-container .blue-20 { color: #d1e6f9; } .sdx-container .aluminum, .sdx-container .aluminium { color: #dde3e7; } .sdx-container .aluminum-tint-2, .sdx-container .aluminum-80, .sdx-container .aluminium-tint-2, .sdx-container .aluminium-80 { color: #e4e9ec; } .sdx-container .horizon { color: #eef3f6; } .sdx-container .horizon-tint-2, .sdx-container .horizon-40 { color: #f8fafb; } .sdx-container .gray { color: #333; } .sdx-container .gray-tint-2, .sdx-container .gray-90 { color: #474747; } .sdx-container .gray-tint-3, .sdx-container .gray-80 { color: #5c5c5c; } .sdx-container .gray-tint-4, .sdx-container .gray-mid { color: #666; } .sdx-container .gray-tint-5, .sdx-container .gray-60 { color: #858585; } .sdx-container .gray-tint-6, .sdx-container .gray-40 { color: #adadad; } .sdx-container .gray-tint-7, .sdx-container .gray-light { color: #bbb; } .sdx-container .gray-tint-8, .sdx-container .gray-20 { color: #d6d6d6; } .sdx-container .sc-blue { color: #1af; } .sdx-container .sc-red { color: #d12; } .sdx-container .sc-purple { color: #5944c6; } .sdx-container .sc-navy { color: #015; } .sdx-container .sc-white { color: #fff; } .sdx-container .sc-gray { color: #333; } .sdx-container .sc-gray-mid { color: #666; } .sdx-container .sc-gray-light { color: #bbb; } .sdx-container .int-blue { color: #1781e3; } .sdx-container .int-blue--active { color: #0851da; } .sdx-container .int-gray { color: #cfd5d9; } .sdx-container .int-gray--active { color: #b1b9be; } .sdx-container .int-green { color: #25b252; } .sdx-container .int-green--active { color: #008236; } .sdx-container .int-red { color: #d12; } .sdx-container .int-red--active { color: #be0000; } .sdx-container .int-orange { color: #ff8b2e; } .sdx-container .int-orange--active { color: #e86416; } .sdx-container .azure { color: #1781e3; } .sdx-container .azure--active { color: #0851da; } .sdx-container .orchid { color: #a63297; } .sdx-container .orchid--active { color: #7f2879; } .sdx-container .orchid-tint-2 { color: #ab449f; } .sdx-container .orchid-tint-3 { color: #b458a8; } .sdx-container .orchid-tint-4 { color: #bb6ab1; } .sdx-container .orchid-tint-5 { color: #c47fbb; } .sdx-container .orchid-tint-6 { color: #cb91c2; } .sdx-container .orchid-tint-7 { color: #d2a4cc; } .sdx-container .orchid-tint-8 { color: #dab7d5; } .sdx-container .iris { color: #5944c6; } .sdx-container .iris--active { color: #42389e; } .sdx-container .iris-tint-2 { color: #6754c8; } .sdx-container .iris-tint-3 { color: #7765ce; } .sdx-container .iris-tint-4 { color: #7177d2; } .sdx-container .iris-tint-5 { color: #9589d7; } .sdx-container .iris-tint-6 { color: #a59adb; } .sdx-container .iris-tint-7 { color: #b4abe0; } .sdx-container .iris-tint-8 { color: #c3bce2; } .sdx-container .pink { color: #e61e64; } .sdx-container .pink--active { color: #bf1b5a; } .sdx-container .pink-tint-2 { color: #e63a70; } .sdx-container .pink-tint-3 { color: #e74e7f; } .sdx-container .pink-tint-4 { color: #e8628d; } .sdx-container .pink-tint-5 { color: #ea779c; } .sdx-container .pink-tint-6 { color: #eb8baa; } .sdx-container .pink-tint-7 { color: #eca0b8; } .sdx-container .pink-tint-8 { color: #edb4c6; } .sdx-container .turquoise, .sdx-container .apple, .sdx-container .petrol { color: #0eaba9; } .sdx-container .turquoise--active, .sdx-container .apple--active, .sdx-container .petrol--active { color: #0c847e; } .sdx-container .turquoise-tint-2 { color: #21b1af; } .sdx-container .turquoise-tint-3 { color: #38b8b6; } .sdx-container .turquoise-tint-4 { color: #4cc0bd; } .sdx-container .turquoise-tint-5 { color: #67c7c5; } .sdx-container .turquoise-tint-6 { color: #7ececd; } .sdx-container .turquoise-tint-7 { color: #97d5d4; } .sdx-container .turquoise-tint-8 { color: #a9dbdb; } .sdx-container .bg-white { background-color: #fff; } .sdx-container .bg-navy { background-color: #015; } .sdx-container .bg-blue { background-color: #1781e3; } .sdx-container .bg-blue-tint-2, .sdx-container .bg-blue-40 { background-color: #a2cdf4; } .sdx-container .bg-blue-tint-3, .sdx-container .bg-blue-20 { background-color: #d1e6f9; } .sdx-container .bg-aluminum, .sdx-container .bg-aluminium { background-color: #dde3e7; } .sdx-container .bg-aluminum-tint-2, .sdx-container .bg-aluminum-80, .sdx-container .bg-aluminium-tint-2, .sdx-container .bg-aluminium-80 { background-color: #e4e9ec; } .sdx-container .bg-horizon { background-color: #eef3f6; } .sdx-container .bg-horizon-tint-2, .sdx-container .bg-horizon-40 { background-color: #f8fafb; } .sdx-container .bg-gray { background-color: #333; } .sdx-container .bg-gray-tint-2, .sdx-container .bg-gray-90 { background-color: #474747; } .sdx-container .bg-gray-tint-3, .sdx-container .bg-gray-80 { background-color: #5c5c5c; } .sdx-container .bg-gray-tint-4, .sdx-container .bg-gray-mid { background-color: #666; } .sdx-container .bg-gray-tint-5, .sdx-container .bg-gray-60 { background-color: #858585; } .sdx-container .bg-gray-tint-6, .sdx-container .bg-gray-40 { background-color: #adadad; } .sdx-container .bg-gray-tint-7, .sdx-container .bg-gray-light { background-color: #bbb; } .sdx-container .bg-gray-tint-8, .sdx-container .bg-gray-20 { background-color: #d6d6d6; } .sdx-container .bg-sc-blue { background-color: #1af; } .sdx-container .bg-sc-red { background-color: #d12; } .sdx-container .bg-sc-navy { background-color: #015; } .sdx-container .bg-sc-white { background-color: #fff; } .sdx-container .bg-int-blue { background-color: #1781e3; } .sdx-container .bg-int-blue--active { background-color: #0851da; } .sdx-container .bg-int-gray { background-color: #cfd5d9; } .sdx-container .bg-int-gray--active { background-color: #b1b9be; } .sdx-container .bg-int-green { background-color: #25b252; } .sdx-container .bg-int-green--active { background-color: #008236; } .sdx-container .bg-int-red { background-color: #d12; } .sdx-container .bg-int-red--active { background-color: #be0000; } .sdx-container .bg-int-orange { background-color: #ff8b2e; } .sdx-container .bg-int-orange--active { background-color: #e86416; } .sdx-container .bg-azure { background-color: #1781e3; } .sdx-container .bg-azure--active { background-color: #0851da; } .sdx-container .bg-orchid { background-color: #a63297; } .sdx-container .bg-orchid--active { background-color: #7f2879; } .sdx-container .bg-iris { background-color: #5944c6; } .sdx-container .bg-iris--active { background-color: #42389e; } .sdx-container .bg-pink { background-color: #e61e64; } .sdx-container .bg-pink--active { background-color: #bf1b5a; } .sdx-container .bg-turquoise, .sdx-container .bg-apple, .sdx-container .bg-petrol { background-color: #0eaba9; } .sdx-container .bg-turquoise--active, .sdx-container .bg-apple--active, .sdx-container .bg-petrol--active { background-color: #0c847e; } .sdx-container .text-body-1 { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; } .sdx-container .text-body-2 { line-height: 24px; letter-spacing: 0; font-size: 16px; } .sdx-container h1, .sdx-container h2, .sdx-container h3, .sdx-container h4, .sdx-container h5, .sdx-container h6, .sdx-container p { font-family: "TheSans", sans-serif; margin: 0; margin-bottom: 32px; padding: 0; text-align: left; word-wrap: break-word; } .sdx-container h1:last-child, .sdx-container h2:last-child, .sdx-container h3:last-child, .sdx-container h4:last-child, .sdx-container h5:last-child, .sdx-container h6:last-child, .sdx-container p:last-child { margin-bottom: 0; } .sdx-container .text-compact { line-height: 21px; } .sdx-container h1, .sdx-container .text-h1 { line-height: 48px; letter-spacing: -1.2px; font-size: 40px; font-weight: 300; } .sdx-container h2, .sdx-container .text-h2 { line-height: 40px; letter-spacing: -1px; font-size: 32px; font-weight: 300; } .sdx-container h3, .sdx-container .text-h3 { line-height: 32px; letter-spacing: -0.75px; font-size: 28px; } .sdx-container h3, .sdx-container h3--light, .sdx-container .text-h3, .sdx-container .text-h3--light { font-weight: 300; } .sdx-container h3--semi-light, .sdx-container .text-h3--semi-light { font-weight: 400; } .sdx-container h3--semi-bold, .sdx-container .text-h3--semi-bold { font-weight: 600; } .sdx-container h3.text-compact, .sdx-container .text-h3.text-compact { line-height: 31px; } .sdx-container h4, .sdx-container .text-h4 { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; } .sdx-container h4, .sdx-container h4--light, .sdx-container .text-h4, .sdx-container .text-h4--light { font-weight: 300; } .sdx-container h4--semi-light, .sdx-container .text-h4--semi-light { font-weight: 400; } .sdx-container h4--semi-bold, .sdx-container .text-h4--semi-bold { font-weight: 600; } .sdx-container h4.text-compact, .sdx-container .text-h4.text-compact { line-height: 27px; } .sdx-container h5, .sdx-container .text-h5 { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 400; } .sdx-container h5, .sdx-container h5--semi-light, .sdx-container .text-h5, .sdx-container .text-h5--semi-light { font-weight: 400; } .sdx-container h5--semi-bold, .sdx-container .text-h5--semi-bold { font-weight: 600; } .sdx-container h6, .sdx-container .text-h6 { line-height: 24px; letter-spacing: -0.1px; font-size: 16px; font-weight: 400; } .sdx-container h6, .sdx-container h6--semi-light, .sdx-container .text-h6, .sdx-container .text-h6--semi-light { font-weight: 400; } .sdx-container h6--semi-bold, .sdx-container .text-h6--semi-bold { font-weight: 600; } .sdx-container .d1, .sdx-container .text-d1 { line-height: 48px; letter-spacing: -1.2px; font-size: 40px; font-weight: 300; } @media (min-width: 1024px) { .sdx-container .d1, .sdx-container .text-d1 { line-height: 80px; letter-spacing: -1.75px; font-size: 70px; } } .sdx-container .d2, .sdx-container .text-d2 { line-height: 40px; letter-spacing: -1px; font-size: 32px; font-weight: 300; } @media (min-width: 1024px) { .sdx-container .d2, .sdx-container .text-d2 { line-height: 64px; letter-spacing: -1.35px; font-size: 54px; } } .sdx-container .d3, .sdx-container .text-d3 { line-height: 32px; letter-spacing: -0.75px; font-size: 28px; font-weight: 300; } @media (min-width: 1024px) { .sdx-container .d3, .sdx-container .text-d3 { line-height: 56px; letter-spacing: -1.2px; font-size: 48px; } } .sdx-container p { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 400; } .sdx-container .text-b1 { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 400; } .sdx-container .text-b2 { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 400; } .sdx-container .text-sm { line-height: 24px; letter-spacing: 0.1px; font-size: 14px; font-weight: 400; } .sdx-container address { font-style: normal; } .sdx-container strong { font-weight: 600; } .sdx-container em { font-style: italic; } .sdx-container .font { font-family: "TheSans", sans-serif; } .sdx-container .font--sans { font-family: "TheSans", sans-serif; } .sdx-container .font--serif { font-family: "TheSerif", serif; } .sdx-container .font--light { font-weight: 300; } .sdx-container .font--semi-light { font-weight: 400; } .sdx-container .font--semi-bold { font-weight: 600; } @media (min-width: 0) { .sdx-container .flex-xs-first { order: -1; } .sdx-container .flex-xs-last { order: 1; } .sdx-container .flex-xs-unordered { order: 0; } .sdx-container .flex-items-xs-top { align-items: flex-start; } .sdx-container .flex-items-xs-middle { align-items: center; } .sdx-container .flex-items-xs-bottom { align-items: flex-end; } .sdx-container .flex-xs-top { align-self: flex-start; } .sdx-container .flex-xs-middle { align-self: center; } .sdx-container .flex-xs-bottom { align-self: flex-end; } .sdx-container .flex-items-xs-left { justify-content: flex-start; } .sdx-container .flex-items-xs-center { justify-content: center; } .sdx-container .flex-items-xs-right { justify-content: flex-end; } .sdx-container .flex-items-xs-around { justify-content: space-around; } .sdx-container .flex-items-xs-between { justify-content: space-between; } } @media (min-width: 480px) { .sdx-container .flex-sm-first { order: -1; } .sdx-container .flex-sm-last { order: 1; } .sdx-container .flex-sm-unordered { order: 0; } .sdx-container .flex-items-sm-top { align-items: flex-start; } .sdx-container .flex-items-sm-middle { align-items: center; } .sdx-container .flex-items-sm-bottom { align-items: flex-end; } .sdx-container .flex-sm-top { align-self: flex-start; } .sdx-container .flex-sm-middle { align-self: center; } .sdx-container .flex-sm-bottom { align-self: flex-end; } .sdx-container .flex-items-sm-left { justify-content: flex-start; } .sdx-container .flex-items-sm-center { justify-content: center; } .sdx-container .flex-items-sm-right { justify-content: flex-end; } .sdx-container .flex-items-sm-around { justify-content: space-around; } .sdx-container .flex-items-sm-between { justify-content: space-between; } } @media (min-width: 768px) { .sdx-container .flex-md-first { order: -1; } .sdx-container .flex-md-last { order: 1; } .sdx-container .flex-md-unordered { order: 0; } .sdx-container .flex-items-md-top { align-items: flex-start; } .sdx-container .flex-items-md-middle { align-items: center; } .sdx-container .flex-items-md-bottom { align-items: flex-end; } .sdx-container .flex-md-top { align-self: flex-start; } .sdx-container .flex-md-middle { align-self: center; } .sdx-container .flex-md-bottom { align-self: flex-end; } .sdx-container .flex-items-md-left { justify-content: flex-start; } .sdx-container .flex-items-md-center { justify-content: center; } .sdx-container .flex-items-md-right { justify-content: flex-end; } .sdx-container .flex-items-md-around { justify-content: space-around; } .sdx-container .flex-items-md-between { justify-content: space-between; } } @media (min-width: 1024px) { .sdx-container .flex-lg-first { order: -1; } .sdx-container .flex-lg-last { order: 1; } .sdx-container .flex-lg-unordered { order: 0; } .sdx-container .flex-items-lg-top { align-items: flex-start; } .sdx-container .flex-items-lg-middle { align-items: center; } .sdx-container .flex-items-lg-bottom { align-items: flex-end; } .sdx-container .flex-lg-top { align-self: flex-start; } .sdx-container .flex-lg-middle { align-self: center; } .sdx-container .flex-lg-bottom { align-self: flex-end; } .sdx-container .flex-items-lg-left { justify-content: flex-start; } .sdx-container .flex-items-lg-center { justify-content: center; } .sdx-container .flex-items-lg-right { justify-content: flex-end; } .sdx-container .flex-items-lg-around { justify-content: space-around; } .sdx-container .flex-items-lg-between { justify-content: space-between; } } @media (min-width: 1280px) { .sdx-container .flex-xl-first { order: -1; } .sdx-container .flex-xl-last { order: 1; } .sdx-container .flex-xl-unordered { order: 0; } .sdx-container .flex-items-xl-top { align-items: flex-start; } .sdx-container .flex-items-xl-middle { align-items: center; } .sdx-container .flex-items-xl-bottom { align-items: flex-end; } .sdx-container .flex-xl-top { align-self: flex-start; } .sdx-container .flex-xl-middle { align-self: center; } .sdx-container .flex-xl-bottom { align-self: flex-end; } .sdx-container .flex-items-xl-left { justify-content: flex-start; } .sdx-container .flex-items-xl-center { justify-content: center; } .sdx-container .flex-items-xl-right { justify-content: flex-end; } .sdx-container .flex-items-xl-around { justify-content: space-around; } .sdx-container .flex-items-xl-between { justify-content: space-between; } } @media (min-width: 1440px) { .sdx-container .flex-ul-first { order: -1; } .sdx-container .flex-ul-last { order: 1; } .sdx-container .flex-ul-unordered { order: 0; } .sdx-container .flex-items-ul-top { align-items: flex-start; } .sdx-container .flex-items-ul-middle { align-items: center; } .sdx-container .flex-items-ul-bottom { align-items: flex-end; } .sdx-container .flex-ul-top { align-self: flex-start; } .sdx-container .flex-ul-middle { align-self: center; } .sdx-container .flex-ul-bottom { align-self: flex-end; } .sdx-container .flex-items-ul-left { justify-content: flex-start; } .sdx-container .flex-items-ul-center { justify-content: center; } .sdx-container .flex-items-ul-right { justify-content: flex-end; } .sdx-container .flex-items-ul-around { justify-content: space-around; } .sdx-container .flex-items-ul-between { justify-content: space-between; } } @media (min-width: 0) { .sdx-container .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 480px) { .sdx-container .container { margin-left: auto; margin-right: auto; padding-left: 4px; padding-right: 4px; width: 436px; } } @media (min-width: 768px) { .sdx-container .container { margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; width: 742px; } } @media (min-width: 1024px) { .sdx-container .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 964px; } } @media (min-width: 1280px) { .sdx-container .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 1224px; } } @media (min-width: 1440px) { .sdx-container .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 1380px; } } @media (min-width: 0) { .sdx-container .container-fluid { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } .sdx-container .row { display: flex; flex-wrap: wrap; } @media (min-width: 0) { .sdx-container .row { margin-left: -4px; margin-right: -4px; } } @media (min-width: 480px) { .sdx-container .row { margin-left: -4px; margin-right: -4px; } } @media (min-width: 768px) { .sdx-container .row { margin-left: -8px; margin-right: -8px; } } @media (min-width: 1024px) { .sdx-container .row { margin-left: -12px; margin-right: -12px; } } @media (min-width: 1280px) { .sdx-container .row { margin-left: -12px; margin-right: -12px; } } @media (min-width: 1440px) { .sdx-container .row { margin-left: -12px; margin-right: -12px; } } .sdx-container .no-gutters { margin-right: 0; margin-left: 0; } .sdx-container .no-gutters > .col, .sdx-container .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0; } .sdx-container .col, .sdx-container [class*=col-] { position: relative; width: 100%; min-height: 1px; } @media (min-width: 0) { .sdx-container .col, .sdx-container [class*=col-] { padding-left: 4px; padding-right: 4px; } .sdx-container .col-xs { flex-grow: 1; flex-basis: 0; max-width: 100%; } .sdx-container .col-xs-auto { flex: 0 0 auto; width: auto; } .sdx-container .col-xs-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .sdx-container .col-xs-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .sdx-container .col-xs-3 { flex: 0 0 25%; max-width: 25%; } .sdx-container .col-xs-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .sdx-container .col-xs-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .sdx-container .col-xs-6 { flex: 0 0 50%; max-width: 50%; } .sdx-container .col-xs-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .sdx-container .col-xs-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .sdx-container .col-xs-9 { flex: 0 0 75%; max-width: 75%; } .sdx-container .col-xs-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .sdx-container .col-xs-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .sdx-container .col-xs-12 { flex: 0 0 100%; max-width: 100%; } .sdx-container .pull-xs-0 { right: auto; } .sdx-container .pull-xs-1 { right: 8.3333333333%; } .sdx-container .pull-xs-2 { right: 16.6666666667%; } .sdx-container .pull-xs-3 { right: 25%; } .sdx-container .pull-xs-4 { right: 33.3333333333%; } .sdx-container .pull-xs-5 { right: 41.6666666667%; } .sdx-container .pull-xs-6 { right: 50%; } .sdx-container .pull-xs-7 { right: 58.3333333333%; } .sdx-container .pull-xs-8 { right: 66.6666666667%; } .sdx-container .pull-xs-9 { right: 75%; } .sdx-container .pull-xs-10 { right: 83.3333333333%; } .sdx-container .pull-xs-11 { right: 91.6666666667%; } .sdx-container .pull-xs-12 { right: 100%; } .sdx-container .push-xs-0 { left: auto; } .sdx-container .push-xs-1 { left: 8.3333333333%; } .sdx-container .push-xs-2 { left: 16.6666666667%; } .sdx-container .push-xs-3 { left: 25%; } .sdx-container .push-xs-4 { left: 33.3333333333%; } .sdx-container .push-xs-5 { left: 41.6666666667%; } .sdx-container .push-xs-6 { left: 50%; } .sdx-container .push-xs-7 { left: 58.3333333333%; } .sdx-container .push-xs-8 { left: 66.6666666667%; } .sdx-container .push-xs-9 { left: 75%; } .sdx-container .push-xs-10 { left: 83.3333333333%; } .sdx-container .push-xs-11 { left: 91.6666666667%; } .sdx-container .push-xs-12 { left: 100%; } .sdx-container .offset-xs-1 { margin-left: 8.3333333333%; } .sdx-container .offset-xs-2 { margin-left: 16.6666666667%; } .sdx-container .offset-xs-3 { margin-left: 25%; } .sdx-container .offset-xs-4 { margin-left: 33.3333333333%; } .sdx-container .offset-xs-5 { margin-left: 41.6666666667%; } .sdx-container .offset-xs-6 { margin-left: 50%; } .sdx-container .offset-xs-7 { margin-left: 58.3333333333%; } .sdx-container .offset-xs-8 { margin-left: 66.6666666667%; } .sdx-container .offset-xs-9 { margin-left: 75%; } .sdx-container .offset-xs-10 { margin-left: 83.3333333333%; } .sdx-container .offset-xs-11 { margin-left: 91.6666666667%; } } @media (min-width: 480px) { .sdx-container .col, .sdx-container [class*=col-] { padding-left: 4px; padding-right: 4px; } .sdx-container .col-sm { flex-grow: 1; flex-basis: 0; max-width: 100%; } .sdx-container .col-sm-auto { flex: 0 0 auto; width: auto; } .sdx-container .col-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .sdx-container .col-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .sdx-container .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .sdx-container .col-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .sdx-container .col-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .sdx-container .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .sdx-container .col-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .sdx-container .col-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .sdx-container .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .sdx-container .col-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .sdx-container .col-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .sdx-container .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .sdx-container .pull-sm-0 { right: auto; } .sdx-container .pull-sm-1 { right: 8.3333333333%; } .sdx-container .pull-sm-2 { right: 16.6666666667%; } .sdx-container .pull-sm-3 { right: 25%; } .sdx-container .pull-sm-4 { right: 33.3333333333%; } .sdx-container .pull-sm-5 { right: 41.6666666667%; } .sdx-container .pull-sm-6 { right: 50%; } .sdx-container .pull-sm-7 { right: 58.3333333333%; } .sdx-container .pull-sm-8 { right: 66.6666666667%; } .sdx-container .pull-sm-9 { right: 75%; } .sdx-container .pull-sm-10 { right: 83.3333333333%; } .sdx-container .pull-sm-11 { right: 91.6666666667%; } .sdx-container .pull-sm-12 { right: 100%; } .sdx-container .push-sm-0 { left: auto; } .sdx-container .push-sm-1 { left: 8.3333333333%; } .sdx-container .push-sm-2 { left: 16.6666666667%; } .sdx-container .push-sm-3 { left: 25%; } .sdx-container .push-sm-4 { left: 33.3333333333%; } .sdx-container .push-sm-5 { left: 41.6666666667%; } .sdx-container .push-sm-6 { left: 50%; } .sdx-container .push-sm-7 { left: 58.3333333333%; } .sdx-container .push-sm-8 { left: 66.6666666667%; } .sdx-container .push-sm-9 { left: 75%; } .sdx-container .push-sm-10 { left: 83.3333333333%; } .sdx-container .push-sm-11 { left: 91.6666666667%; } .sdx-container .push-sm-12 { left: 100%; } .sdx-container .offset-sm-1 { margin-left: 8.3333333333%; } .sdx-container .offset-sm-2 { margin-left: 16.6666666667%; } .sdx-container .offset-sm-3 { margin-left: 25%; } .sdx-container .offset-sm-4 { margin-left: 33.3333333333%; } .sdx-container .offset-sm-5 { margin-left: 41.6666666667%; } .sdx-container .offset-sm-6 { margin-left: 50%; } .sdx-container .offset-sm-7 { margin-left: 58.3333333333%; } .sdx-container .offset-sm-8 { margin-left: 66.6666666667%; } .sdx-container .offset-sm-9 { margin-left: 75%; } .sdx-container .offset-sm-10 { margin-left: 83.3333333333%; } .sdx-container .offset-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 768px) { .sdx-container .col, .sdx-container [class*=col-] { padding-left: 8px; padding-right: 8px; } .sdx-container .col-md { flex-grow: 1; flex-basis: 0; max-width: 100%; } .sdx-container .col-md-auto { flex: 0 0 auto; width: auto; } .sdx-container .col-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .sdx-container .col-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .sdx-container .col-md-3 { flex: 0 0 25%; max-width: 25%; } .sdx-container .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .sdx-container .col-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .sdx-container .col-md-6 { flex: 0 0 50%; max-width: 50%; } .sdx-container .col-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .sdx-container .col-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .sdx-container .col-md-9 { flex: 0 0 75%; max-width: 75%; } .sdx-container .col-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .sdx-container .col-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .sdx-container .col-md-12 { flex: 0 0 100%; max-width: 100%; } .sdx-container .pull-md-0 { right: auto; } .sdx-container .pull-md-1 { right: 8.3333333333%; } .sdx-container .pull-md-2 { right: 16.6666666667%; } .sdx-container .pull-md-3 { right: 25%; } .sdx-container .pull-md-4 { right: 33.3333333333%; } .sdx-container .pull-md-5 { right: 41.6666666667%; } .sdx-container .pull-md-6 { right: 50%; } .sdx-container .pull-md-7 { right: 58.3333333333%; } .sdx-container .pull-md-8 { right: 66.6666666667%; } .sdx-container .pull-md-9 { right: 75%; } .sdx-container .pull-md-10 { right: 83.3333333333%; } .sdx-container .pull-md-11 { right: 91.6666666667%; } .sdx-container .pull-md-12 { right: 100%; } .sdx-container .push-md-0 { left: auto; } .sdx-container .push-md-1 { left: 8.3333333333%; } .sdx-container .push-md-2 { left: 16.6666666667%; } .sdx-container .push-md-3 { left: 25%; } .sdx-container .push-md-4 { left: 33.3333333333%; } .sdx-container .push-md-5 { left: 41.6666666667%; } .sdx-container .push-md-6 { left: 50%; } .sdx-container .push-md-7 { left: 58.3333333333%; } .sdx-container .push-md-8 { left: 66.6666666667%; } .sdx-container .push-md-9 { left: 75%; } .sdx-container .push-md-10 { left: 83.3333333333%; } .sdx-container .push-md-11 { left: 91.6666666667%; } .sdx-container .push-md-12 { left: 100%; } .sdx-container .offset-md-1 { margin-left: 8.3333333333%; } .sdx-container .offset-md-2 { margin-left: 16.6666666667%; } .sdx-container .offset-md-3 { margin-left: 25%; } .sdx-container .offset-md-4 { margin-left: 33.3333333333%; } .sdx-container .offset-md-5 { margin-left: 41.6666666667%; } .sdx-container .offset-md-6 { margin-left: 50%; } .sdx-container .offset-md-7 { margin-left: 58.3333333333%; } .sdx-container .offset-md-8 { margin-left: 66.6666666667%; } .sdx-container .offset-md-9 { margin-left: 75%; } .sdx-container .offset-md-10 { margin-left: 83.3333333333%; } .sdx-container .offset-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 1024px) { .sdx-container .col, .sdx-container [class*=col-] { padding-left: 12px; padding-right: 12px; } .sdx-container .col-lg { flex-grow: 1; flex-basis: 0; max-width: 100%; } .sdx-container .col-lg-auto { flex: 0 0 auto; width: auto; } .sdx-container .col-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .sdx-container .col-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .sdx-container .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .sdx-container .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .sdx-container .col-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .sdx-container .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .sdx-container .col-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .sdx-container .col-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .sdx-container .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .sdx-container .col-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .sdx-container .col-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .sdx-container .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .sdx-container .pull-lg-0 { right: auto; } .sdx-container .pull-lg-1 { right: 8.3333333333%; } .sdx-container .pull-lg-2 { right: 16.6666666667%; } .sdx-container .pull-lg-3 { right: 25%; } .sdx-container .pull-lg-4 { right: 33.3333333333%; } .sdx-container .pull-lg-5 { right: 41.6666666667%; } .sdx-container .pull-lg-6 { right: 50%; } .sdx-container .pull-lg-7 { right: 58.3333333333%; } .sdx-container .pull-lg-8 { right: 66.6666666667%; } .sdx-container .pull-lg-9 { right: 75%; } .sdx-container .pull-lg-10 { right: 83.3333333333%; } .sdx-container .pull-lg-11 { right: 91.6666666667%; } .sdx-container .pull-lg-12 { right: 100%; } .sdx-container .push-lg-0 { left: auto; } .sdx-container .push-lg-1 { left: 8.3333333333%; } .sdx-container .push-lg-2 { left: 16.6666666667%; } .sdx-container .push-lg-3 { left: 25%; } .sdx-container .push-lg-4 { left: 33.3333333333%; } .sdx-container .push-lg-5 { left: 41.6666666667%; } .sdx-container .push-lg-6 { left: 50%; } .sdx-container .push-lg-7 { left: 58.3333333333%; } .sdx-container .push-lg-8 { left: 66.6666666667%; } .sdx-container .push-lg-9 { left: 75%; } .sdx-container .push-lg-10 { left: 83.3333333333%; } .sdx-container .push-lg-11 { left: 91.6666666667%; } .sdx-container .push-lg-12 { left: 100%; } .sdx-container .offset-lg-1 { margin-left: 8.3333333333%; } .sdx-container .offset-lg-2 { margin-left: 16.6666666667%; } .sdx-container .offset-lg-3 { margin-left: 25%; } .sdx-container .offset-lg-4 { margin-left: 33.3333333333%; } .sdx-container .offset-lg-5 { margin-left: 41.6666666667%; } .sdx-container .offset-lg-6 { margin-left: 50%; } .sdx-container .offset-lg-7 { margin-left: 58.3333333333%; } .sdx-container .offset-lg-8 { margin-left: 66.6666666667%; } .sdx-container .offset-lg-9 { margin-left: 75%; } .sdx-container .offset-lg-10 { margin-left: 83.3333333333%; } .sdx-container .offset-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1280px) { .sdx-container .col, .sdx-container [class*=col-] { padding-left: 12px; padding-right: 12px; } .sdx-container .col-xl { flex-grow: 1; flex-basis: 0; max-width: 100%; } .sdx-container .col-xl-auto { flex: 0 0 auto; width: auto; } .sdx-container .col-xl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .sdx-container .col-xl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .sdx-container .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .sdx-container .col-xl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .sdx-container .col-xl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .sdx-container .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .sdx-container .col-xl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .sdx-container .col-xl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .sdx-container .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .sdx-container .col-xl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .sdx-container .col-xl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .sdx-container .col-xl-12 { flex: 0 0 100%; max-width: 100%; } .sdx-container .pull-xl-0 { right: auto; } .sdx-container .pull-xl-1 { right: 8.3333333333%; } .sdx-container .pull-xl-2 { right: 16.6666666667%; } .sdx-container .pull-xl-3 { right: 25%; } .sdx-container .pull-xl-4 { right: 33.3333333333%; } .sdx-container .pull-xl-5 { right: 41.6666666667%; } .sdx-container .pull-xl-6 { right: 50%; } .sdx-container .pull-xl-7 { right: 58.3333333333%; } .sdx-container .pull-xl-8 { right: 66.6666666667%; } .sdx-container .pull-xl-9 { right: 75%; } .sdx-container .pull-xl-10 { right: 83.3333333333%; } .sdx-container .pull-xl-11 { right: 91.6666666667%; } .sdx-container .pull-xl-12 { right: 100%; } .sdx-container .push-xl-0 { left: auto; } .sdx-container .push-xl-1 { left: 8.3333333333%; } .sdx-container .push-xl-2 { left: 16.6666666667%; } .sdx-container .push-xl-3 { left: 25%; } .sdx-container .push-xl-4 { left: 33.3333333333%; } .sdx-container .push-xl-5 { left: 41.6666666667%; } .sdx-container .push-xl-6 { left: 50%; } .sdx-container .push-xl-7 { left: 58.3333333333%; } .sdx-container .push-xl-8 { left: 66.6666666667%; } .sdx-container .push-xl-9 { left: 75%; } .sdx-container .push-xl-10 { left: 83.3333333333%; } .sdx-container .push-xl-11 { left: 91.6666666667%; } .sdx-container .push-xl-12 { left: 100%; } .sdx-container .offset-xl-1 { margin-left: 8.3333333333%; } .sdx-container .offset-xl-2 { margin-left: 16.6666666667%; } .sdx-container .offset-xl-3 { margin-left: 25%; } .sdx-container .offset-xl-4 { margin-left: 33.3333333333%; } .sdx-container .offset-xl-5 { margin-left: 41.6666666667%; } .sdx-container .offset-xl-6 { margin-left: 50%; } .sdx-container .offset-xl-7 { margin-left: 58.3333333333%; } .sdx-container .offset-xl-8 { margin-left: 66.6666666667%; } .sdx-container .offset-xl-9 { margin-left: 75%; } .sdx-container .offset-xl-10 { margin-left: 83.3333333333%; } .sdx-container .offset-xl-11 { margin-left: 91.6666666667%; } } @media (min-width: 1440px) { .sdx-container .col, .sdx-container [class*=col-] { padding-left: 12px; padding-right: 12px; } .sdx-container .col-ul { flex-grow: 1; flex-basis: 0; max-width: 100%; } .sdx-container .col-ul-auto { flex: 0 0 auto; width: auto; } .sdx-container .col-ul-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .sdx-container .col-ul-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .sdx-container .col-ul-3 { flex: 0 0 25%; max-width: 25%; } .sdx-container .col-ul-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .sdx-container .col-ul-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .sdx-container .col-ul-6 { flex: 0 0 50%; max-width: 50%; } .sdx-container .col-ul-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .sdx-container .col-ul-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .sdx-container .col-ul-9 { flex: 0 0 75%; max-width: 75%; } .sdx-container .col-ul-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .sdx-container .col-ul-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .sdx-container .col-ul-12 { flex: 0 0 100%; max-width: 100%; } .sdx-container .pull-ul-0 { right: auto; } .sdx-container .pull-ul-1 { right: 8.3333333333%; } .sdx-container .pull-ul-2 { right: 16.6666666667%; } .sdx-container .pull-ul-3 { right: 25%; } .sdx-container .pull-ul-4 { right: 33.3333333333%; } .sdx-container .pull-ul-5 { right: 41.6666666667%; } .sdx-container .pull-ul-6 { right: 50%; } .sdx-container .pull-ul-7 { right: 58.3333333333%; } .sdx-container .pull-ul-8 { right: 66.6666666667%; } .sdx-container .pull-ul-9 { right: 75%; } .sdx-container .pull-ul-10 { right: 83.3333333333%; } .sdx-container .pull-ul-11 { right: 91.6666666667%; } .sdx-container .pull-ul-12 { right: 100%; } .sdx-container .push-ul-0 { left: auto; } .sdx-container .push-ul-1 { left: 8.3333333333%; } .sdx-container .push-ul-2 { left: 16.6666666667%; } .sdx-container .push-ul-3 { left: 25%; } .sdx-container .push-ul-4 { left: 33.3333333333%; } .sdx-container .push-ul-5 { left: 41.6666666667%; } .sdx-container .push-ul-6 { left: 50%; } .sdx-container .push-ul-7 { left: 58.3333333333%; } .sdx-container .push-ul-8 { left: 66.6666666667%; } .sdx-container .push-ul-9 { left: 75%; } .sdx-container .push-ul-10 { left: 83.3333333333%; } .sdx-container .push-ul-11 { left: 91.6666666667%; } .sdx-container .push-ul-12 { left: 100%; } .sdx-container .offset-ul-1 { margin-left: 8.3333333333%; } .sdx-container .offset-ul-2 { margin-left: 16.6666666667%; } .sdx-container .offset-ul-3 { margin-left: 25%; } .sdx-container .offset-ul-4 { margin-left: 33.3333333333%; } .sdx-container .offset-ul-5 { margin-left: 41.6666666667%; } .sdx-container .offset-ul-6 { margin-left: 50%; } .sdx-container .offset-ul-7 { margin-left: 58.3333333333%; } .sdx-container .offset-ul-8 { margin-left: 66.6666666667%; } .sdx-container .offset-ul-9 { margin-left: 75%; } .sdx-container .offset-ul-10 { margin-left: 83.3333333333%; } .sdx-container .offset-ul-11 { margin-left: 91.6666666667%; } } .sdx-container .loader-spinner { position: relative; } .sdx-container .loader-spinner, .sdx-container .loader-spinner--large { background-size: 3750px 50px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/loader-spinner-navy-large.png"); width: 50px; height: 50px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: anim-sheet-navy-large 1.25s steps(75) infinite; animation: anim-sheet-navy-large 1.25s steps(75) infinite; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .loader-spinner, .sdx-container .loader-spinner--large { background-image: url("../images/loader-spinner-navy-large@2x.png"); } } @-webkit-keyframes anim-sheet-navy-large { 0% { background-position: 0 0; } 100% { background-position: -3750px 0; } } @keyframes anim-sheet-navy-large { 0% { background-position: 0 0; } 100% { background-position: -3750px 0; } } .sdx-container .loader-spinner.loader-spinner--plain, .sdx-container .loader-spinner--large.loader-spinner--plain { background-size: 3750px 50px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/loader-spinner-plain-large.png"); width: 50px; height: 50px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: anim-sheet-plain-large 1.25s steps(75) infinite; animation: anim-sheet-plain-large 1.25s steps(75) infinite; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .loader-spinner.loader-spinner--plain, .sdx-container .loader-spinner--large.loader-spinner--plain { background-image: url("../images/loader-spinner-plain-large@2x.png"); } } @-webkit-keyframes anim-sheet-plain-large { 0% { background-position: 0 0; } 100% { background-position: -3750px 0; } } @keyframes anim-sheet-plain-large { 0% { background-position: 0 0; } 100% { background-position: -3750px 0; } } .sdx-container .loader-spinner--small { background-size: 1875px 25px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/loader-spinner-navy-small.png"); width: 25px; height: 25px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: anim-sheet-navy-small 1.25s steps(75) infinite; animation: anim-sheet-navy-small 1.25s steps(75) infinite; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .loader-spinner--small { background-image: url("../images/loader-spinner-navy-small@2x.png"); } } @-webkit-keyframes anim-sheet-navy-small { 0% { background-position: 0 0; } 100% { background-position: -1875px 0; } } @keyframes anim-sheet-navy-small { 0% { background-position: 0 0; } 100% { background-position: -1875px 0; } } .sdx-container .loader-spinner--small.loader-spinner--plain { background-size: 1875px 25px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/loader-spinner-plain-small.png"); width: 25px; height: 25px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: anim-sheet-plain-small 1.25s steps(75) infinite; animation: anim-sheet-plain-small 1.25s steps(75) infinite; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .loader-spinner--small.loader-spinner--plain { background-image: url("../images/loader-spinner-plain-small@2x.png"); } } @-webkit-keyframes anim-sheet-plain-small { 0% { background-position: 0 0; } 100% { background-position: -1875px 0; } } @keyframes anim-sheet-plain-small { 0% { background-position: 0 0; } 100% { background-position: -1875px 0; } } .sdx-container .bg--dark .loader-spinner, .sdx-container .bg--dark .loader-spinner--large { background-size: 3750px 50px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/loader-spinner-dark-large.png"); width: 50px; height: 50px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: anim-sheet-dark-large 1.25s steps(75) infinite; animation: anim-sheet-dark-large 1.25s steps(75) infinite; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .bg--dark .loader-spinner, .sdx-container .bg--dark .loader-spinner--large { background-image: url("../images/loader-spinner-dark-large@2x.png"); } } @-webkit-keyframes anim-sheet-dark-large { 0% { background-position: 0 0; } 100% { background-position: -3750px 0; } } @keyframes anim-sheet-dark-large { 0% { background-position: 0 0; } 100% { background-position: -3750px 0; } } .sdx-container .bg--dark .loader-spinner--small { background-size: 1875px 25px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/loader-spinner-dark-small.png"); width: 25px; height: 25px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: anim-sheet-dark-small 1.25s steps(75) infinite; animation: anim-sheet-dark-small 1.25s steps(75) infinite; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .bg--dark .loader-spinner--small { background-image: url("../images/loader-spinner-dark-small@2x.png"); } } @-webkit-keyframes anim-sheet-dark-small { 0% { background-position: 0 0; } 100% { background-position: -1875px 0; } } @keyframes anim-sheet-dark-small { 0% { background-position: 0 0; } 100% { background-position: -1875px 0; } } .sdx-container .bg { color: #333; } .sdx-container .bg--light .primary-navy, .sdx-container .bg--gray .primary-navy { color: #015; } .sdx-container .bg--light .primary-gray, .sdx-container .bg--gray .primary-gray { color: #333; } .sdx-container .bg--light .secondary, .sdx-container .bg--gray .secondary { color: #666; } .sdx-container .bg--light { background-color: #fff; color: #333; } .sdx-container .bg--gray { background-color: #dde3e7; color: #333; } .sdx-container .bg--dark { background-color: #015; color: #fff; } .sdx-container hr, .sdx-container .divider { margin: 32px 0; border: 0; border-bottom: 1px solid #d6d6d6; } .sdx-container hr--light-gray, .sdx-container .divider--light-gray { border-bottom-color: #d6d6d6; } .sdx-container hr--mid-gray, .sdx-container .divider--mid-gray { border-bottom-color: #adadad; } .sdx-container hr--dark-gray, .sdx-container .divider--dark-gray { border-bottom-color: #5c5c5c; } .sdx-container hr--white, .sdx-container .divider--white { border-bottom-color: rgba(255, 255, 255, 0.6); } .sdx-container .bg--dark hr, .sdx-container .bg--dark .divider { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.6); } .sdx-container a, .sdx-container a.link, .sdx-container button.link { position: relative; transition: border-bottom 200ms cubic-bezier(0.4, 0, 0.6, 1), color 200ms cubic-bezier(0.4, 0, 0.6, 1); outline: none; border-bottom: 1px solid transparent; cursor: pointer; text-decoration: none; color: #1781e3; } .sdx-container a:hover, .sdx-container a:focus, .sdx-container a.link:hover, .sdx-container a.link:focus, .sdx-container button.link:hover, .sdx-container button.link:focus { border-bottom: 1px solid #0851da; color: #0851da; } .sdx-container a:focus, .sdx-container a.link:focus, .sdx-container button.link:focus { outline: none; } .sdx-container a + a, .sdx-container a + a.link, .sdx-container a + button.link, .sdx-container a.link + a, .sdx-container a.link + a.link, .sdx-container a.link + button.link, .sdx-container button.link + a, .sdx-container button.link + a.link, .sdx-container button.link + button.link { margin-left: 24px; } .sdx-container a--white, .sdx-container a--white:hover, .sdx-container a--white:focus, .sdx-container a.link--white, .sdx-container a.link--white:hover, .sdx-container a.link--white:focus, .sdx-container button.link--white, .sdx-container button.link--white:hover, .sdx-container button.link--white:focus { color: #fff; border-color: #fff; } .sdx-container a--white:focus, .sdx-container a.link--white:focus, .sdx-container button.link--white:focus { box-shadow: 0 0 2px #fff; border: 1px solid; } .sdx-container p a + a, .sdx-container p a + a.link, .sdx-container p a + button.link, .sdx-container p a.link + a, .sdx-container p a.link + a.link, .sdx-container p a.link + button.link, .sdx-container p button.link + a, .sdx-container p button.link + a.link, .sdx-container p button.link + button.link { margin-left: 0; } .sdx-container .link--dark, .sdx-container .bg--dark a, .sdx-container .bg--dark a.link, .sdx-container .bg--dark button.link { border-bottom: 1px solid #fff; color: #fff; } .sdx-container .link--dark:hover, .sdx-container .bg--dark a:hover, .sdx-container .bg--dark button.link:hover { border-bottom: 1px solid #fff; color: #fff; } .sdx-container .link--dark:focus, .sdx-container .bg--dark a:focus, .sdx-container .bg--dark button.link:focus { box-shadow: 0 0 1px #fff; } .sdx-container .button-group { display: flex; margin: -8px -6px; flex-wrap: wrap; } .sdx-container .button-group .button { margin: 8px 6px; } .sdx-container .button-group--responsive { flex-direction: row-reverse; } .sdx-container .button-group--responsive .button { width: 100%; } @media (min-width: 480px) { .sdx-container .button-group--responsive .button { width: auto; } } .sdx-container .button-group--left { justify-content: flex-end; } @media (min-width: 480px) { .sdx-container .button-group--fill { flex-wrap: nowrap; } } .sdx-container .button-group--fill .button { width: 100%; min-width: 0; flex: 0 1 auto; } .sdx-container .button-group + .button-group { margin-top: 8px; } .sdx-container button, .sdx-container .button { cursor: pointer; } .sdx-container .button { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; position: relative; transition: all 70ms cubic-bezier(0.4, 0, 0.6, 1); margin: 0; outline: none; border: 0; border-bottom-style: none; border-radius: 5px; background: none; cursor: pointer; padding: 12px 24px; min-width: 160px; vertical-align: middle; text-align: center; text-decoration: none; text-shadow: 0 0 0; transform-origin: 50% 50%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sdx-container .button:active { transform: scale(0.98); } .sdx-container .button.disabled, .sdx-container .button:disabled { cursor: not-allowed; } .sdx-container .button.disabled:active, .sdx-container .button:disabled:active { pointer-events: none; transform: none; } .sdx-container .button, .sdx-container .button--primary { border: 0; border-bottom-style: none; border-color: #1781e3; background-color: #1781e3; color: #fff; } .sdx-container .button:hover, .sdx-container .button:focus, .sdx-container .button:active, .sdx-container .button--primary:hover, .sdx-container .button--primary:focus, .sdx-container .button--primary:active { border: 0; border-bottom-style: none; border-color: #0851da; background-color: #0851da; color: #fff; } .sdx-container .button.disabled, .sdx-container .button:disabled, .sdx-container .button--primary.disabled, .sdx-container .button--primary:disabled { border-color: rgba(23, 129, 227, 0.4); background-color: rgba(23, 129, 227, 0.4); color: rgba(255, 255, 255, 0.6); } .sdx-container .button--secondary { border: 0; border-bottom-style: none; border-color: #cfd5d9; background-color: #cfd5d9; color: #333; } .sdx-container .button--secondary:hover, .sdx-container .button--secondary:focus, .sdx-container .button--secondary:active { border: 0; border-bottom-style: none; border-color: #b1b9be; background-color: #b1b9be; color: #333; } .sdx-container .button--secondary.disabled, .sdx-container .button--secondary:disabled { border-color: rgba(207, 213, 217, 0.4); background-color: rgba(207, 213, 217, 0.4); color: rgba(51, 51, 51, 0.4); } .sdx-container .button--confirm { border: 0; border-bottom-style: none; border-color: #25b252; background-color: #25b252; color: #fff; } .sdx-container .button--confirm:hover, .sdx-container .button--confirm:focus, .sdx-container .button--confirm:active { border: 0; border-bottom-style: none; border-color: #008236; background-color: #008236; color: #fff; } .sdx-container .button--confirm.disabled, .sdx-container .button--confirm:disabled { border-color: rgba(37, 178, 82, 0.4); background-color: rgba(37, 178, 82, 0.4); color: rgba(255, 255, 255, 0.6); } .sdx-container .button__icon { padding: 12px 24px 12px 16px; } .sdx-container .button .icon { margin-right: 7px; font-size: 18px; } .sdx-container .button--thin, .sdx-container .bg--dark .button { padding: 11px 23px; } .sdx-container .button--thin, .sdx-container .button--thin.button--primary, .sdx-container .bg--dark .button { border: 1px solid #1781e3; background-color: transparent; color: #fff; } .sdx-container .button--thin:hover, .sdx-container .button--thin:focus, .sdx-container .button--thin:active, .sdx-container .button--thin.button--primary:hover, .sdx-container .button--thin.button--primary:focus, .sdx-container .button--thin.button--primary:active, .sdx-container .bg--dark .button:hover, .sdx-container .bg--dark .button:focus, .sdx-container .bg--dark .button:active { border-color: #0851da; background-color: rgba(23, 129, 227, 0.15); color: #fff; } .sdx-container .button--thin.disabled, .sdx-container .button--thin:disabled, .sdx-container .button--thin.button--primary.disabled, .sdx-container .button--thin.button--primary:disabled, .sdx-container .bg--dark .disabled.button, .sdx-container .bg--dark .button:disabled { border-color: rgba(23, 129, 227, 0.4); background-color: transparent; color: rgba(255, 255, 255, 0.4); } .sdx-container .button--thin.button--secondary, .sdx-container .bg--dark .button--secondary.button { border: 1px solid #cfd5d9; background-color: transparent; color: #fff; } .sdx-container .button--thin.button--secondary:hover, .sdx-container .button--thin.button--secondary:focus, .sdx-container .button--thin.button--secondary:active, .sdx-container .bg--dark .button--secondary.button:hover, .sdx-container .bg--dark .button--secondary.button:focus, .sdx-container .bg--dark .button--secondary.button:active { border-color: #b1b9be; background-color: rgba(207, 213, 217, 0.15); color: #fff; } .sdx-container .button--thin.button--secondary.disabled, .sdx-container .button--thin.button--secondary:disabled, .sdx-container .bg--dark .button--secondary.disabled.button, .sdx-container .bg--dark .button--secondary.button:disabled { border-color: rgba(207, 213, 217, 0.4); background-color: transparent; color: rgba(255, 255, 255, 0.4); } .sdx-container .button--thin.button--confirm, .sdx-container .bg--dark .button--confirm.button { border: 1px solid #25b252; background-color: transparent; color: #fff; } .sdx-container .button--thin.button--confirm:hover, .sdx-container .button--thin.button--confirm:focus, .sdx-container .button--thin.button--confirm:active, .sdx-container .bg--dark .button--confirm.button:hover, .sdx-container .bg--dark .button--confirm.button:focus, .sdx-container .bg--dark .button--confirm.button:active { border-color: #008236; background-color: rgba(37, 178, 82, 0.15); color: #fff; } .sdx-container .button--thin.button--confirm.disabled, .sdx-container .button--thin.button--confirm:disabled, .sdx-container .bg--dark .button--confirm.disabled.button, .sdx-container .bg--dark .button--confirm.button:disabled { border-color: rgba(37, 178, 82, 0.4); background-color: transparent; color: rgba(255, 255, 255, 0.4); } .sdx-container .bg--dark a.button:focus { outline: 1px dotted #0851da; } .sdx-container .button-group--responsive .button--full, .sdx-container .button--full, .sdx-container input[type=submit].button--full, .sdx-container input[type=reset].button--full, .sdx-container input[type=button].button--full { display: block; width: 100%; } .sdx-container .button-group--responsive .button--full:active, .sdx-container .button--full:active, .sdx-container input[type=submit].button--full:active, .sdx-container input[type=reset].button--full:active, .sdx-container input[type=button].button--full:active { transform: scale(0.9925, 0.98); } .sdx-container .button--responsive, .sdx-container input[type=submit].button--responsive, .sdx-container input[type=reset].button--responsive, .sdx-container input[type=button].button--responsive { width: 100%; } @media (min-width: 480px) { .sdx-container .button--responsive, .sdx-container input[type=submit].button--responsive, .sdx-container input[type=reset].button--responsive, .sdx-container input[type=button].button--responsive { width: auto; } } .sdx-container fieldset { margin: 0; border: 0; padding: 0; min-width: 0; } .sdx-container legend { display: block; border: 0; padding: 0; width: 100%; line-height: inherit; } .sdx-container input[type=search] { box-sizing: border-box; } .sdx-container input[type=file] { display: block; } .sdx-container input[type=radio], .sdx-container input[type=checkbox] { padding: 0; box-sizing: border-box; } .sdx-container label, .sdx-container .label { display: inline-block; margin-bottom: 4px; cursor: text; max-width: 100%; color: #666; font-size: 14px; } .sdx-container .bg--dark label, .sdx-container .bg--dark .label { color: #fff; } .sdx-container input, .sdx-container textarea { -webkit-border-radius: 0; } .sdx-container input::-ms-clear, .sdx-container textarea::-ms-clear { display: none; } @-webkit-keyframes onAutoFillStart { from { /* Empty */ } to { /* Empty */ } } @keyframes onAutoFillStart { from { /* Empty */ } to { /* Empty */ } } .sdx-container input:-webkit-autofill, .sdx-container textarea:-webkit-autofill { -webkit-animation-name: onAutoFillStart; animation-name: onAutoFillStart; transition: background-color 50000s ease-in-out 0s; } .sdx-container .input-field { box-sizing: border-box; position: relative; margin-bottom: 11px; padding: 0; } .sdx-container .input-field .message { max-height: 0; margin-top: 0; opacity: 0; z-index: 101; transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .input-field .icon { margin-right: 4px; } .sdx-container .input-field:first-child input:not([type]), .sdx-container .input-field:first-child input[type=text], .sdx-container .input-field:first-child input[type=password], .sdx-container .input-field:first-child input[type=email], .sdx-container .input-field:first-child input[type=url], .sdx-container .input-field:first-child input[type=time], .sdx-container .input-field:first-child input[type=date], .sdx-container .input-field:first-child input[type=datetime], .sdx-container .input-field:first-child input[type=datetime-local], .sdx-container .input-field:first-child input[type=tel], .sdx-container .input-field:first-child input[type=number], .sdx-container .input-field:first-child input[type=search], .sdx-container .input-field:first-child textarea { margin-top: 0; } .sdx-container .input-field input, .sdx-container .input-field textarea { -webkit-border-radius: 0; } .sdx-container .input-field input::-ms-clear, .sdx-container .input-field textarea::-ms-clear { display: none; } .sdx-container .input-field input:not([type]), .sdx-container .input-field input[type=text], .sdx-container .input-field input[type=password], .sdx-container .input-field input[type=email], .sdx-container .input-field input[type=url], .sdx-container .input-field input[type=time], .sdx-container .input-field input[type=date], .sdx-container .input-field input[type=datetime], .sdx-container .input-field input[type=datetime-local], .sdx-container .input-field input[type=tel], .sdx-container .input-field input[type=number], .sdx-container .input-field input[type=search], .sdx-container .input-field textarea { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; position: relative; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; margin-top: 13px; outline: none; border: 1px solid #d6d6d6; border-radius: 5px; background-color: #fff; padding: 0 16px; width: 100%; height: 48px; color: #333; font-weight: 300; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .input-field input:not([type]) + label, .sdx-container .input-field input[type=text] + label, .sdx-container .input-field input[type=password] + label, .sdx-container .input-field input[type=email] + label, .sdx-container .input-field input[type=url] + label, .sdx-container .input-field input[type=time] + label, .sdx-container .input-field input[type=date] + label, .sdx-container .input-field input[type=datetime] + label, .sdx-container .input-field input[type=datetime-local] + label, .sdx-container .input-field input[type=tel] + label, .sdx-container .input-field input[type=number] + label, .sdx-container .input-field input[type=search] + label, .sdx-container .input-field textarea + label { position: absolute; top: 0; left: 0; transform: translateY(24px); transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; cursor: text; color: #666; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdx-container .input-field input:not([type]) ~ .icon, .sdx-container .input-field input[type=text] ~ .icon, .sdx-container .input-field input[type=password] ~ .icon, .sdx-container .input-field input[type=email] ~ .icon, .sdx-container .input-field input[type=url] ~ .icon, .sdx-container .input-field input[type=time] ~ .icon, .sdx-container .input-field input[type=date] ~ .icon, .sdx-container .input-field input[type=datetime] ~ .icon, .sdx-container .input-field input[type=datetime-local] ~ .icon, .sdx-container .input-field input[type=tel] ~ .icon, .sdx-container .input-field input[type=number] ~ .icon, .sdx-container .input-field input[type=search] ~ .icon, .sdx-container .input-field textarea ~ .icon { display: block; position: absolute; right: 0; bottom: 0; opacity: 0; z-index: 101; width: 48px; height: 48px; text-align: center; line-height: 48px; color: #25b252; font-size: 22px; } .sdx-container .input-field input:not([type])::-webkit-input-placeholder, .sdx-container .input-field input[type=text]::-webkit-input-placeholder, .sdx-container .input-field input[type=password]::-webkit-input-placeholder, .sdx-container .input-field input[type=email]::-webkit-input-placeholder, .sdx-container .input-field input[type=url]::-webkit-input-placeholder, .sdx-container .input-field input[type=time]::-webkit-input-placeholder, .sdx-container .input-field input[type=date]::-webkit-input-placeholder, .sdx-container .input-field input[type=datetime]::-webkit-input-placeholder, .sdx-container .input-field input[type=datetime-local]::-webkit-input-placeholder, .sdx-container .input-field input[type=tel]::-webkit-input-placeholder, .sdx-container .input-field input[type=number]::-webkit-input-placeholder, .sdx-container .input-field input[type=search]::-webkit-input-placeholder, .sdx-container .input-field textarea::-webkit-input-placeholder { transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; color: #bbb; } .sdx-container .input-field input:not([type])::-moz-placeholder, .sdx-container .input-field input[type=text]::-moz-placeholder, .sdx-container .input-field input[type=password]::-moz-placeholder, .sdx-container .input-field input[type=email]::-moz-placeholder, .sdx-container .input-field input[type=url]::-moz-placeholder, .sdx-container .input-field input[type=time]::-moz-placeholder, .sdx-container .input-field input[type=date]::-moz-placeholder, .sdx-container .input-field input[type=datetime]::-moz-placeholder, .sdx-container .input-field input[type=datetime-local]::-moz-placeholder, .sdx-container .input-field input[type=tel]::-moz-placeholder, .sdx-container .input-field input[type=number]::-moz-placeholder, .sdx-container .input-field input[type=search]::-moz-placeholder, .sdx-container .input-field textarea::-moz-placeholder { transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; color: #bbb; } .sdx-container .input-field input:not([type])::-ms-input-placeholder, .sdx-container .input-field input[type=text]::-ms-input-placeholder, .sdx-container .input-field input[type=password]::-ms-input-placeholder, .sdx-container .input-field input[type=email]::-ms-input-placeholder, .sdx-container .input-field input[type=url]::-ms-input-placeholder, .sdx-container .input-field input[type=time]::-ms-input-placeholder, .sdx-container .input-field input[type=date]::-ms-input-placeholder, .sdx-container .input-field input[type=datetime]::-ms-input-placeholder, .sdx-container .input-field input[type=datetime-local]::-ms-input-placeholder, .sdx-container .input-field input[type=tel]::-ms-input-placeholder, .sdx-container .input-field input[type=number]::-ms-input-placeholder, .sdx-container .input-field input[type=search]::-ms-input-placeholder, .sdx-container .input-field textarea::-ms-input-placeholder { transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; color: #bbb; } .sdx-container .input-field input:not([type])::placeholder, .sdx-container .input-field input[type=text]::placeholder, .sdx-container .input-field input[type=password]::placeholder, .sdx-container .input-field input[type=email]::placeholder, .sdx-container .input-field input[type=url]::placeholder, .sdx-container .input-field input[type=time]::placeholder, .sdx-container .input-field input[type=date]::placeholder, .sdx-container .input-field input[type=datetime]::placeholder, .sdx-container .input-field input[type=datetime-local]::placeholder, .sdx-container .input-field input[type=tel]::placeholder, .sdx-container .input-field input[type=number]::placeholder, .sdx-container .input-field input[type=search]::placeholder, .sdx-container .input-field textarea::placeholder { transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; color: #bbb; } .sdx-container .input-field input:not([type]):-ms-input-placeholder, .sdx-container .input-field input[type=text]:-ms-input-placeholder, .sdx-container .input-field input[type=password]:-ms-input-placeholder, .sdx-container .input-field input[type=email]:-ms-input-placeholder, .sdx-container .input-field input[type=url]:-ms-input-placeholder, .sdx-container .input-field input[type=time]:-ms-input-placeholder, .sdx-container .input-field input[type=date]:-ms-input-placeholder, .sdx-container .input-field input[type=datetime]:-ms-input-placeholder, .sdx-container .input-field input[type=datetime-local]:-ms-input-placeholder, .sdx-container .input-field input[type=tel]:-ms-input-placeholder, .sdx-container .input-field input[type=number]:-ms-input-placeholder, .sdx-container .input-field input[type=search]:-ms-input-placeholder, .sdx-container .input-field textarea:-ms-input-placeholder { color: #bbb !important; } .sdx-container .input-field input:not([type]):focus:not([readonly]), .sdx-container .input-field input[type=text]:focus:not([readonly]), .sdx-container .input-field input[type=password]:focus:not([readonly]), .sdx-container .input-field input[type=email]:focus:not([readonly]), .sdx-container .input-field input[type=url]:focus:not([readonly]), .sdx-container .input-field input[type=time]:focus:not([readonly]), .sdx-container .input-field input[type=date]:focus:not([readonly]), .sdx-container .input-field input[type=datetime]:focus:not([readonly]), .sdx-container .input-field input[type=datetime-local]:focus:not([readonly]), .sdx-container .input-field input[type=tel]:focus:not([readonly]), .sdx-container .input-field input[type=number]:focus:not([readonly]), .sdx-container .input-field input[type=search]:focus:not([readonly]), .sdx-container .input-field textarea:focus:not([readonly]) { margin-top: 29px; border-color: #1781e3; color: #333; } .sdx-container .input-field input:not([type]):focus:not([readonly]) + label, .sdx-container .input-field input[type=text]:focus:not([readonly]) + label, .sdx-container .input-field input[type=password]:focus:not([readonly]) + label, .sdx-container .input-field input[type=email]:focus:not([readonly]) + label, .sdx-container .input-field input[type=url]:focus:not([readonly]) + label, .sdx-container .input-field input[type=time]:focus:not([readonly]) + label, .sdx-container .input-field input[type=date]:focus:not([readonly]) + label, .sdx-container .input-field input[type=datetime]:focus:not([readonly]) + label, .sdx-container .input-field input[type=datetime-local]:focus:not([readonly]) + label, .sdx-container .input-field input[type=tel]:focus:not([readonly]) + label, .sdx-container .input-field input[type=number]:focus:not([readonly]) + label, .sdx-container .input-field input[type=search]:focus:not([readonly]) + label, .sdx-container .input-field textarea:focus:not([readonly]) + label { transform: translateY(0); opacity: 1; } .sdx-container .input-field input:not([type]):focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=text]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=password]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=email]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=url]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=time]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=date]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=datetime]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=tel]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=number]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field input[type=search]:focus:not([readonly])::-webkit-input-placeholder, .sdx-container .input-field textarea:focus:not([readonly])::-webkit-input-placeholder { opacity: 0; } .sdx-container .input-field input:not([type]):focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=text]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=password]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=email]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=url]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=time]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=date]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=datetime]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=tel]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=number]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field input[type=search]:focus:not([readonly])::-moz-placeholder, .sdx-container .input-field textarea:focus:not([readonly])::-moz-placeholder { opacity: 0; } .sdx-container .input-field input:not([type]):focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=text]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=password]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=email]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=url]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=time]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=date]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=datetime]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=tel]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=number]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field input[type=search]:focus:not([readonly])::-ms-input-placeholder, .sdx-container .input-field textarea:focus:not([readonly])::-ms-input-placeholder { opacity: 0; } .sdx-container .input-field input:not([type]):focus:not([readonly])::placeholder, .sdx-container .input-field input[type=text]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=password]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=email]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=url]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=time]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=date]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=datetime]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=datetime-local]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=tel]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=number]:focus:not([readonly])::placeholder, .sdx-container .input-field input[type=search]:focus:not([readonly])::placeholder, .sdx-container .input-field textarea:focus:not([readonly])::placeholder { opacity: 0; } .sdx-container .input-field input:not([type]):disabled, .sdx-container .input-field input:not([type])[readonly], .sdx-container .input-field input[type=text]:disabled, .sdx-container .input-field input[type=text][readonly], .sdx-container .input-field input[type=password]:disabled, .sdx-container .input-field input[type=password][readonly], .sdx-container .input-field input[type=email]:disabled, .sdx-container .input-field input[type=email][readonly], .sdx-container .input-field input[type=url]:disabled, .sdx-container .input-field input[type=url][readonly], .sdx-container .input-field input[type=time]:disabled, .sdx-container .input-field input[type=time][readonly], .sdx-container .input-field input[type=date]:disabled, .sdx-container .input-field input[type=date][readonly], .sdx-container .input-field input[type=datetime]:disabled, .sdx-container .input-field input[type=datetime][readonly], .sdx-container .input-field input[type=datetime-local]:disabled, .sdx-container .input-field input[type=datetime-local][readonly], .sdx-container .input-field input[type=tel]:disabled, .sdx-container .input-field input[type=tel][readonly], .sdx-container .input-field input[type=number]:disabled, .sdx-container .input-field input[type=number][readonly], .sdx-container .input-field input[type=search]:disabled, .sdx-container .input-field input[type=search][readonly], .sdx-container .input-field textarea:disabled, .sdx-container .input-field textarea[readonly] { opacity: 1; border-color: #dde3e7; background-color: #f8fafb; color: #bbb; } .sdx-container .input-field input:not([type]):disabled + label, .sdx-container .input-field input:not([type])[readonly] + label, .sdx-container .input-field input[type=text]:disabled + label, .sdx-container .input-field input[type=text][readonly] + label, .sdx-container .input-field input[type=password]:disabled + label, .sdx-container .input-field input[type=password][readonly] + label, .sdx-container .input-field input[type=email]:disabled + label, .sdx-container .input-field input[type=email][readonly] + label, .sdx-container .input-field input[type=url]:disabled + label, .sdx-container .input-field input[type=url][readonly] + label, .sdx-container .input-field input[type=time]:disabled + label, .sdx-container .input-field input[type=time][readonly] + label, .sdx-container .input-field input[type=date]:disabled + label, .sdx-container .input-field input[type=date][readonly] + label, .sdx-container .input-field input[type=datetime]:disabled + label, .sdx-container .input-field input[type=datetime][readonly] + label, .sdx-container .input-field input[type=datetime-local]:disabled + label, .sdx-container .input-field input[type=datetime-local][readonly] + label, .sdx-container .input-field input[type=tel]:disabled + label, .sdx-container .input-field input[type=tel][readonly] + label, .sdx-container .input-field input[type=number]:disabled + label, .sdx-container .input-field input[type=number][readonly] + label, .sdx-container .input-field input[type=search]:disabled + label, .sdx-container .input-field input[type=search][readonly] + label, .sdx-container .input-field textarea:disabled + label, .sdx-container .input-field textarea[readonly] + label { color: #666; } .sdx-container .input-field input:not([type]):disabled, .sdx-container .input-field input[type=text]:disabled, .sdx-container .input-field input[type=password]:disabled, .sdx-container .input-field input[type=email]:disabled, .sdx-container .input-field input[type=url]:disabled, .sdx-container .input-field input[type=time]:disabled, .sdx-container .input-field input[type=date]:disabled, .sdx-container .input-field input[type=datetime]:disabled, .sdx-container .input-field input[type=datetime-local]:disabled, .sdx-container .input-field input[type=tel]:disabled, .sdx-container .input-field input[type=number]:disabled, .sdx-container .input-field input[type=search]:disabled, .sdx-container .input-field textarea:disabled { cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sdx-container .input-field input:not([type]).valid, .sdx-container .input-field input:not([type]):valid, .sdx-container .input-field input:not([type]).invalid, .sdx-container .input-field input:not([type]):invalid, .sdx-container .input-field input[type=text].valid, .sdx-container .input-field input[type=text]:valid, .sdx-container .input-field input[type=text].invalid, .sdx-container .input-field input[type=text]:invalid, .sdx-container .input-field input[type=password].valid, .sdx-container .input-field input[type=password]:valid, .sdx-container .input-field input[type=password].invalid, .sdx-container .input-field input[type=password]:invalid, .sdx-container .input-field input[type=email].valid, .sdx-container .input-field input[type=email]:valid, .sdx-container .input-field input[type=email].invalid, .sdx-container .input-field input[type=email]:invalid, .sdx-container .input-field input[type=url].valid, .sdx-container .input-field input[type=url]:valid, .sdx-container .input-field input[type=url].invalid, .sdx-container .input-field input[type=url]:invalid, .sdx-container .input-field input[type=time].valid, .sdx-container .input-field input[type=time]:valid, .sdx-container .input-field input[type=time].invalid, .sdx-container .input-field input[type=time]:invalid, .sdx-container .input-field input[type=date].valid, .sdx-container .input-field input[type=date]:valid, .sdx-container .input-field input[type=date].invalid, .sdx-container .input-field input[type=date]:invalid, .sdx-container .input-field input[type=datetime].valid, .sdx-container .input-field input[type=datetime]:valid, .sdx-container .input-field input[type=datetime].invalid, .sdx-container .input-field input[type=datetime]:invalid, .sdx-container .input-field input[type=datetime-local].valid, .sdx-container .input-field input[type=datetime-local]:valid, .sdx-container .input-field input[type=datetime-local].invalid, .sdx-container .input-field input[type=datetime-local]:invalid, .sdx-container .input-field input[type=tel].valid, .sdx-container .input-field input[type=tel]:valid, .sdx-container .input-field input[type=tel].invalid, .sdx-container .input-field input[type=tel]:invalid, .sdx-container .input-field input[type=number].valid, .sdx-container .input-field input[type=number]:valid, .sdx-container .input-field input[type=number].invalid, .sdx-container .input-field input[type=number]:invalid, .sdx-container .input-field input[type=search].valid, .sdx-container .input-field input[type=search]:valid, .sdx-container .input-field input[type=search].invalid, .sdx-container .input-field input[type=search]:invalid, .sdx-container .input-field textarea.valid, .sdx-container .input-field textarea:valid, .sdx-container .input-field textarea.invalid, .sdx-container .input-field textarea:invalid { box-shadow: none; background-repeat: no-repeat; background-position: center right 16px; background-size: 22px 22px; } .sdx-container .input-field input:not([type]).valid ~ .icon, .sdx-container .input-field input:not([type]):valid ~ .icon, .sdx-container .input-field input:not([type]).invalid ~ .icon, .sdx-container .input-field input:not([type]):invalid ~ .icon, .sdx-container .input-field input[type=text].valid ~ .icon, .sdx-container .input-field input[type=text]:valid ~ .icon, .sdx-container .input-field input[type=text].invalid ~ .icon, .sdx-container .input-field input[type=text]:invalid ~ .icon, .sdx-container .input-field input[type=password].valid ~ .icon, .sdx-container .input-field input[type=password]:valid ~ .icon, .sdx-container .input-field input[type=password].invalid ~ .icon, .sdx-container .input-field input[type=password]:invalid ~ .icon, .sdx-container .input-field input[type=email].valid ~ .icon, .sdx-container .input-field input[type=email]:valid ~ .icon, .sdx-container .input-field input[type=email].invalid ~ .icon, .sdx-container .input-field input[type=email]:invalid ~ .icon, .sdx-container .input-field input[type=url].valid ~ .icon, .sdx-container .input-field input[type=url]:valid ~ .icon, .sdx-container .input-field input[type=url].invalid ~ .icon, .sdx-container .input-field input[type=url]:invalid ~ .icon, .sdx-container .input-field input[type=time].valid ~ .icon, .sdx-container .input-field input[type=time]:valid ~ .icon, .sdx-container .input-field input[type=time].invalid ~ .icon, .sdx-container .input-field input[type=time]:invalid ~ .icon, .sdx-container .input-field input[type=date].valid ~ .icon, .sdx-container .input-field input[type=date]:valid ~ .icon, .sdx-container .input-field input[type=date].invalid ~ .icon, .sdx-container .input-field input[type=date]:invalid ~ .icon, .sdx-container .input-field input[type=datetime].valid ~ .icon, .sdx-container .input-field input[type=datetime]:valid ~ .icon, .sdx-container .input-field input[type=datetime].invalid ~ .icon, .sdx-container .input-field input[type=datetime]:invalid ~ .icon, .sdx-container .input-field input[type=datetime-local].valid ~ .icon, .sdx-container .input-field input[type=datetime-local]:valid ~ .icon, .sdx-container .input-field input[type=datetime-local].invalid ~ .icon, .sdx-container .input-field input[type=datetime-local]:invalid ~ .icon, .sdx-container .input-field input[type=tel].valid ~ .icon, .sdx-container .input-field input[type=tel]:valid ~ .icon, .sdx-container .input-field input[type=tel].invalid ~ .icon, .sdx-container .input-field input[type=tel]:invalid ~ .icon, .sdx-container .input-field input[type=number].valid ~ .icon, .sdx-container .input-field input[type=number]:valid ~ .icon, .sdx-container .input-field input[type=number].invalid ~ .icon, .sdx-container .input-field input[type=number]:invalid ~ .icon, .sdx-container .input-field input[type=search].valid ~ .icon, .sdx-container .input-field input[type=search]:valid ~ .icon, .sdx-container .input-field input[type=search].invalid ~ .icon, .sdx-container .input-field input[type=search]:invalid ~ .icon, .sdx-container .input-field textarea.valid ~ .icon, .sdx-container .input-field textarea:valid ~ .icon, .sdx-container .input-field textarea.invalid ~ .icon, .sdx-container .input-field textarea:invalid ~ .icon { display: none; } .sdx-container .input-field input:not([type]).valid, .sdx-container .input-field input[type=text].valid, .sdx-container .input-field input[type=password].valid, .sdx-container .input-field input[type=email].valid, .sdx-container .input-field input[type=url].valid, .sdx-container .input-field input[type=time].valid, .sdx-container .input-field input[type=date].valid, .sdx-container .input-field input[type=datetime].valid, .sdx-container .input-field input[type=datetime-local].valid, .sdx-container .input-field input[type=tel].valid, .sdx-container .input-field input[type=number].valid, .sdx-container .input-field input[type=search].valid, .sdx-container .input-field textarea.valid { border-color: #666; padding-right: 52px; color: #333; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%20width='30'%20height='30'%3E%3Crect%20fill='none'%20width='30'%20height='30'/%3E%3Cpath%20fill='%2325b252'%20d='M14,24c0.38,0,0.7-0.21,0.87-0.51l9-16c0.27-0.48,0.1-1.09-0.38-1.36c-0.48-0.27-1.09-0.1-1.36,0.38l-8.35,14.85l-6.07-6.07%20c-0.39-0.39-1.02-0.39-1.41,0s-0.39,1.02,0,1.41l7,7C13.48,23.9,13.74,24,14,24z'/%3E%3C/svg%3E"); } .sdx-container .input-field input:not([type]).invalid, .sdx-container .input-field input[type=text].invalid, .sdx-container .input-field input[type=password].invalid, .sdx-container .input-field input[type=email].invalid, .sdx-container .input-field input[type=url].invalid, .sdx-container .input-field input[type=time].invalid, .sdx-container .input-field input[type=date].invalid, .sdx-container .input-field input[type=datetime].invalid, .sdx-container .input-field input[type=datetime-local].invalid, .sdx-container .input-field input[type=tel].invalid, .sdx-container .input-field input[type=number].invalid, .sdx-container .input-field input[type=search].invalid, .sdx-container .input-field textarea.invalid { border-color: #be0000; color: #d12; } .sdx-container .input-field input:not([type]).invalid--inline, .sdx-container .input-field input[type=text].invalid--inline, .sdx-container .input-field input[type=password].invalid--inline, .sdx-container .input-field input[type=email].invalid--inline, .sdx-container .input-field input[type=url].invalid--inline, .sdx-container .input-field input[type=time].invalid--inline, .sdx-container .input-field input[type=date].invalid--inline, .sdx-container .input-field input[type=datetime].invalid--inline, .sdx-container .input-field input[type=datetime-local].invalid--inline, .sdx-container .input-field input[type=tel].invalid--inline, .sdx-container .input-field input[type=number].invalid--inline, .sdx-container .input-field input[type=search].invalid--inline, .sdx-container .input-field textarea.invalid--inline { padding-right: 52px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2030'%20width='30'%20height='30'%3E%3Crect%20fill='none'%20width='30'%20height='30'/%3E%3Cpath%20fill='%23DD1122'%20d='M15,2C7.83,2,2,7.83,2,15s5.83,13,13,13s13-5.83,13-13S22.17,2,15,2z%20M15,26C8.93,26,4,21.07,4,15S8.93,4,15,4%20s11,4.93,11,11S21.07,26,15,26z%20M17,21c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-1.1,0.9-2,2-2S17,19.9,17,21z%20M13,7h4v4l-1,6h-2l-1-6V7z'/%3E%3C/svg%3E"); } .sdx-container .input-field input:not([type]).invalid ~ .message, .sdx-container .input-field input[type=text].invalid ~ .message, .sdx-container .input-field input[type=password].invalid ~ .message, .sdx-container .input-field input[type=email].invalid ~ .message, .sdx-container .input-field input[type=url].invalid ~ .message, .sdx-container .input-field input[type=time].invalid ~ .message, .sdx-container .input-field input[type=date].invalid ~ .message, .sdx-container .input-field input[type=datetime].invalid ~ .message, .sdx-container .input-field input[type=datetime-local].invalid ~ .message, .sdx-container .input-field input[type=tel].invalid ~ .message, .sdx-container .input-field input[type=number].invalid ~ .message, .sdx-container .input-field input[type=search].invalid ~ .message, .sdx-container .input-field textarea.invalid ~ .message { max-height: 50px; margin-top: 6px; opacity: 1; color: #d12; } .sdx-container .input-field input:not([type]).validate + label, .sdx-container .input-field input[type=text].validate + label, .sdx-container .input-field input[type=password].validate + label, .sdx-container .input-field input[type=email].validate + label, .sdx-container .input-field input[type=url].validate + label, .sdx-container .input-field input[type=time].validate + label, .sdx-container .input-field input[type=date].validate + label, .sdx-container .input-field input[type=datetime].validate + label, .sdx-container .input-field input[type=datetime-local].validate + label, .sdx-container .input-field input[type=tel].validate + label, .sdx-container .input-field input[type=number].validate + label, .sdx-container .input-field input[type=search].validate + label, .sdx-container .input-field textarea.validate + label { width: 100%; pointer-events: none; } .sdx-container .input-field input:not([type]).is-fixed, .sdx-container .input-field input[type=text].is-fixed, .sdx-container .input-field input[type=password].is-fixed, .sdx-container .input-field input[type=email].is-fixed, .sdx-container .input-field input[type=url].is-fixed, .sdx-container .input-field input[type=time].is-fixed, .sdx-container .input-field input[type=date].is-fixed, .sdx-container .input-field input[type=datetime].is-fixed, .sdx-container .input-field input[type=datetime-local].is-fixed, .sdx-container .input-field input[type=tel].is-fixed, .sdx-container .input-field input[type=number].is-fixed, .sdx-container .input-field input[type=search].is-fixed, .sdx-container .input-field textarea.is-fixed { margin-top: 29px; } .sdx-container .input-field input:not([type]).is-fixed + label, .sdx-container .input-field input[type=text].is-fixed + label, .sdx-container .input-field input[type=password].is-fixed + label, .sdx-container .input-field input[type=email].is-fixed + label, .sdx-container .input-field input[type=url].is-fixed + label, .sdx-container .input-field input[type=time].is-fixed + label, .sdx-container .input-field input[type=date].is-fixed + label, .sdx-container .input-field input[type=datetime].is-fixed + label, .sdx-container .input-field input[type=datetime-local].is-fixed + label, .sdx-container .input-field input[type=tel].is-fixed + label, .sdx-container .input-field input[type=number].is-fixed + label, .sdx-container .input-field input[type=search].is-fixed + label, .sdx-container .input-field textarea.is-fixed + label { transform: translateY(0); opacity: 1; } .sdx-container .input-field--fixed input:not([type]), .sdx-container .input-field--fixed input[type=text], .sdx-container .input-field--fixed input[type=password], .sdx-container .input-field--fixed input[type=email], .sdx-container .input-field--fixed input[type=url], .sdx-container .input-field--fixed input[type=time], .sdx-container .input-field--fixed input[type=date], .sdx-container .input-field--fixed input[type=datetime], .sdx-container .input-field--fixed input[type=datetime-local], .sdx-container .input-field--fixed input[type=tel], .sdx-container .input-field--fixed input[type=number], .sdx-container .input-field--fixed input[type=search], .sdx-container .input-field--fixed textarea { margin-top: 29px; } .sdx-container .input-field input:not([type]):first-child, .sdx-container .input-field input:not([type]), .sdx-container .input-field input[type=text]:first-child, .sdx-container .input-field input[type=text], .sdx-container .input-field input[type=password]:first-child, .sdx-container .input-field input[type=password], .sdx-container .input-field input[type=email]:first-child, .sdx-container .input-field input[type=email], .sdx-container .input-field input[type=url]:first-child, .sdx-container .input-field input[type=url], .sdx-container .input-field input[type=time]:first-child, .sdx-container .input-field input[type=time], .sdx-container .input-field input[type=date]:first-child, .sdx-container .input-field input[type=date], .sdx-container .input-field input[type=datetime]:first-child, .sdx-container .input-field input[type=datetime], .sdx-container .input-field input[type=datetime-local]:first-child, .sdx-container .input-field input[type=datetime-local], .sdx-container .input-field input[type=tel]:first-child, .sdx-container .input-field input[type=tel], .sdx-container .input-field input[type=number]:first-child, .sdx-container .input-field input[type=number], .sdx-container .input-field input[type=search]:first-child, .sdx-container .input-field input[type=search], .sdx-container .input-field textarea:first-child, .sdx-container .input-field textarea { margin-top: 29px; } .sdx-container .input-field input:not([type]):first-child + label, .sdx-container .input-field input:not([type]) + label, .sdx-container .input-field input[type=text]:first-child + label, .sdx-container .input-field input[type=text] + label, .sdx-container .input-field input[type=password]:first-child + label, .sdx-container .input-field input[type=password] + label, .sdx-container .input-field input[type=email]:first-child + label, .sdx-container .input-field input[type=email] + label, .sdx-container .input-field input[type=url]:first-child + label, .sdx-container .input-field input[type=url] + label, .sdx-container .input-field input[type=time]:first-child + label, .sdx-container .input-field input[type=time] + label, .sdx-container .input-field input[type=date]:first-child + label, .sdx-container .input-field input[type=date] + label, .sdx-container .input-field input[type=datetime]:first-child + label, .sdx-container .input-field input[type=datetime] + label, .sdx-container .input-field input[type=datetime-local]:first-child + label, .sdx-container .input-field input[type=datetime-local] + label, .sdx-container .input-field input[type=tel]:first-child + label, .sdx-container .input-field input[type=tel] + label, .sdx-container .input-field input[type=number]:first-child + label, .sdx-container .input-field input[type=number] + label, .sdx-container .input-field input[type=search]:first-child + label, .sdx-container .input-field input[type=search] + label, .sdx-container .input-field textarea:first-child + label, .sdx-container .input-field textarea + label { transform: translateY(0); opacity: 1; } .sdx-container .input-field--autocomplete .autocomplete { position: absolute; transform: scale(1, 0); transform-origin: 50% 0; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.2; width: 100%; height: auto; margin-top: -1px; z-index: 101; cursor: pointer; overflow: hidden; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); color: #333; } .sdx-container .input-field--autocomplete .autocomplete strong { font-weight: 400; color: #1781e3; } .sdx-container .input-field--autocomplete .autocomplete li.js-hover, .sdx-container .input-field--autocomplete .autocomplete li:hover { background: #eef3f6; } .sdx-container .input-field--autocomplete .autocomplete li .autocomplete__result { margin: 0 22px; padding: 12px 0; } .sdx-container .input-field--autocomplete .autocomplete li:not(:last-child) .autocomplete__result { border-bottom: 1px solid #e4e9ec; } .sdx-container .input-field--autocomplete.is-open input:not([type]), .sdx-container .input-field--autocomplete.is-open input[type=text], .sdx-container .input-field--autocomplete.is-open input[type=password], .sdx-container .input-field--autocomplete.is-open input[type=email], .sdx-container .input-field--autocomplete.is-open input[type=url], .sdx-container .input-field--autocomplete.is-open input[type=time], .sdx-container .input-field--autocomplete.is-open input[type=date], .sdx-container .input-field--autocomplete.is-open input[type=datetime], .sdx-container .input-field--autocomplete.is-open input[type=datetime-local], .sdx-container .input-field--autocomplete.is-open input[type=tel], .sdx-container .input-field--autocomplete.is-open input[type=number], .sdx-container .input-field--autocomplete.is-open input[type=search], .sdx-container .input-field--autocomplete.is-open textarea { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .sdx-container .input-field--autocomplete.is-open .autocomplete { transform: scale(1, 1); opacity: 1; z-index: 999999; } .sdx-container .input-field.flatpickr .flatpickr-input.valid + i + a[data-toggle], .sdx-container .input-field.flatpickr .flatpickr-input.valid + label + i + a[data-toggle], .sdx-container .input-field.flatpickr .flatpickr-input.invalid--inline + a[data-toggle], .sdx-container .input-field.flatpickr .flatpickr-input.invalid--inline + label + a[data-toggle] { display: none; } .sdx-container .input-field.flatpickr .flatpickr-input { -webkit-appearance: none; padding-right: 48px; } .sdx-container .input-field.flatpickr .flatpickr-input[readonly] { cursor: text; } .sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile { font-size: 0; } .sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile::before { content: attr(placeholder); color: #bbb; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; } .sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus, .sdx-container .input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; margin-top: 29px; } .sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus + label, .sdx-container .input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile + label { transform: translateY(0); opacity: 1; } .sdx-container .input-field.flatpickr .flatpickr-input.flatpickr-mobile:focus::before, .sdx-container .input-field.flatpickr .flatpickr-input.is-fixed + .flatpickr-mobile::before { content: ""; } .sdx-container .input-field.flatpickr input ~ a { position: static; } .sdx-container .input-field.flatpickr input ~ a .icon-009-calendar { position: absolute; right: 0; bottom: 0; z-index: 101; width: 48px; height: 48px; text-align: center; line-height: 48px; color: #666; font-size: 30px; margin: 0 6px 1px 0; } .sdx-container .input-field.flatpickr input:disabled ~ a .icon-009-calendar, .sdx-container .input-field.flatpickr input[readonly] ~ a .icon-009-calendar { color: #bbb; pointer-events: none; } .sdx-container .input-field.flatpickr .flatpickr-input:focus:not([readonly]) ~ a .icon-009-calendar { color: #1781e3; } .sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-text { color: transparent; } .sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-month-field { color: transparent; } .sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-day-field { color: transparent; } .sdx-container .input-field.flatpickr input[type=date]::-webkit-datetime-edit-year-field { color: transparent; } .sdx-container .input-field.flatpickr input[type=text] { margin-top: 29px; } .sdx-container .input-multiline textarea, .sdx-container .input-field--multiline textarea { width: 100%; height: auto; padding: 11px 16px; resize: none; box-sizing: border-box; } .sdx-container .input-field__legend-mandatory { color: #666; font-size: 14px; } .sdx-container .flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; box-sizing: border-box; touch-action: manipulation; background: #fff; box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); } .sdx-container .flatpickr-calendar.open, .sdx-container .flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible; } .sdx-container .flatpickr-calendar.open { display: inline-block; z-index: 99999; } .sdx-container .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .sdx-container .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } .sdx-container .flatpickr-calendar.static { position: absolute; top: calc(100% + 2px); } .sdx-container .flatpickr-calendar.static.open { z-index: 999; display: block; } .sdx-container .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { box-shadow: none !important; } .sdx-container .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .sdx-container .flatpickr-calendar .hasWeeks .dayContainer, .sdx-container .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .sdx-container .flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; } .sdx-container .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #e6e6e6; } .sdx-container .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .sdx-container .flatpickr-calendar:before, .sdx-container .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ""; height: 0; width: 0; left: 22px; } .sdx-container .flatpickr-calendar.rightMost:before, .sdx-container .flatpickr-calendar.rightMost:after { left: auto; right: 22px; } .sdx-container .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; } .sdx-container .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; } .sdx-container .flatpickr-calendar.arrowTop:before, .sdx-container .flatpickr-calendar.arrowTop:after { bottom: 100%; } .sdx-container .flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6; } .sdx-container .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; } .sdx-container .flatpickr-calendar.arrowBottom:before, .sdx-container .flatpickr-calendar.arrowBottom:after { top: 100%; } .sdx-container .flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6; } .sdx-container .flatpickr-calendar.arrowBottom:after { border-top-color: #fff; } .sdx-container .flatpickr-calendar:focus { outline: 0; } .sdx-container .flatpickr-wrapper { position: relative; display: inline-block; } .sdx-container .flatpickr-months { display: flex; } .sdx-container .flatpickr-months .flatpickr-month { background: transparent; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); height: 28px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; flex: 1; } .sdx-container .flatpickr-months .flatpickr-prev-month, .sdx-container .flatpickr-months .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; top: 0px; line-height: 16px; height: 28px; padding: 10px; z-index: 3; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); } .sdx-container .flatpickr-months .flatpickr-prev-month.disabled, .sdx-container .flatpickr-months .flatpickr-next-month.disabled { display: none; } .sdx-container .flatpickr-months .flatpickr-prev-month i, .sdx-container .flatpickr-months .flatpickr-next-month i { position: relative; } .sdx-container .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .sdx-container .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ /* */ left: 0; /* /*rtl:end:ignore*/ /* */ } .sdx-container .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .sdx-container .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ /* */ right: 0; /* /*rtl:end:ignore*/ /* */ } .sdx-container .flatpickr-months .flatpickr-prev-month:hover, .sdx-container .flatpickr-months .flatpickr-next-month:hover { color: #959ea9; } .sdx-container .flatpickr-months .flatpickr-prev-month:hover svg, .sdx-container .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } .sdx-container .flatpickr-months .flatpickr-prev-month svg, .sdx-container .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; } .sdx-container .flatpickr-months .flatpickr-prev-month svg path, .sdx-container .flatpickr-months .flatpickr-next-month svg path { transition: fill 0.1s; fill: inherit; } .sdx-container .numInputWrapper { position: relative; height: auto; } .sdx-container .numInputWrapper input, .sdx-container .numInputWrapper span { display: inline-block; } .sdx-container .numInputWrapper input { width: 100%; } .sdx-container .numInputWrapper input::-ms-clear { display: none; } .sdx-container .numInputWrapper input::-webkit-outer-spin-button, .sdx-container .numInputWrapper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .sdx-container .numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(57, 57, 57, 0.15); box-sizing: border-box; } .sdx-container .numInputWrapper span:hover { background: rgba(0, 0, 0, 0.1); } .sdx-container .numInputWrapper span:active { background: rgba(0, 0, 0, 0.2); } .sdx-container .numInputWrapper span:after { display: block; content: ""; position: absolute; } .sdx-container .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .sdx-container .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(57, 57, 57, 0.6); top: 26%; } .sdx-container .numInputWrapper span.arrowDown { top: 50%; } .sdx-container .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(57, 57, 57, 0.6); top: 40%; } .sdx-container .numInputWrapper span svg { width: inherit; height: auto; } .sdx-container .numInputWrapper span svg path { fill: rgba(0, 0, 0, 0.5); } .sdx-container .numInputWrapper:hover { background: rgba(0, 0, 0, 0.05); } .sdx-container .numInputWrapper:hover span { opacity: 1; } .sdx-container .flatpickr-current-month { font-size: 135%; line-height: inherit; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 6.16px 0 0 0; line-height: 1; height: 28px; display: inline-block; text-align: center; transform: translate3d(0px, 0px, 0px); } .sdx-container .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; } .sdx-container .flatpickr-current-month span.cur-month:hover { background: rgba(0, 0, 0, 0.05); } .sdx-container .flatpickr-current-month .numInputWrapper { width: 6ch; width: 7ch\0; display: inline-block; } .sdx-container .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0, 0, 0, 0.9); } .sdx-container .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0, 0, 0, 0.9); } .sdx-container .flatpickr-current-month input.cur-year { background: transparent; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .sdx-container .flatpickr-current-month input.cur-year:focus { outline: 0; } .sdx-container .flatpickr-current-month input.cur-year[disabled], .sdx-container .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } .sdx-container .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; width: 100%; display: flex; align-items: center; height: 28px; } .sdx-container .flatpickr-weekdays .flatpickr-weekdaycontainer { display: flex; flex: 1; } .sdx-container span.flatpickr-weekday { cursor: default; font-size: 90%; background: transparent; color: rgba(0, 0, 0, 0.54); line-height: 1; margin: 0; text-align: center; display: block; flex: 1; font-weight: bolder; } .sdx-container .dayContainer, .sdx-container .flatpickr-weeks { padding: 1px 0 0 0; } .sdx-container .flatpickr-days { position: relative; overflow: hidden; display: flex; align-items: flex-start; width: 307.875px; } .sdx-container .flatpickr-days:focus { outline: 0; } .sdx-container .dayContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; box-sizing: border-box; display: inline-block; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: space-around; transform: translate3d(0px, 0px, 0px); opacity: 1; } .sdx-container .dayContainer + .dayContainer { box-shadow: -1px 0 0 #e6e6e6; } .sdx-container .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; box-sizing: border-box; color: #393939; cursor: pointer; font-weight: 400; width: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 0; display: inline-block; position: relative; justify-content: center; text-align: center; } .sdx-container .flatpickr-day.inRange, .sdx-container .flatpickr-day.prevMonthDay.inRange, .sdx-container .flatpickr-day.nextMonthDay.inRange, .sdx-container .flatpickr-day.today.inRange, .sdx-container .flatpickr-day.prevMonthDay.today.inRange, .sdx-container .flatpickr-day.nextMonthDay.today.inRange, .sdx-container .flatpickr-day:hover, .sdx-container .flatpickr-day.prevMonthDay:hover, .sdx-container .flatpickr-day.nextMonthDay:hover, .sdx-container .flatpickr-day:focus, .sdx-container .flatpickr-day.prevMonthDay:focus, .sdx-container .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #e6e6e6; border-color: #e6e6e6; } .sdx-container .flatpickr-day.today { border-color: #959ea9; } .sdx-container .flatpickr-day.today:hover, .sdx-container .flatpickr-day.today:focus { border-color: #959ea9; background: #959ea9; color: #fff; } .sdx-container .flatpickr-day.selected, .sdx-container .flatpickr-day.startRange, .sdx-container .flatpickr-day.endRange, .sdx-container .flatpickr-day.selected.inRange, .sdx-container .flatpickr-day.startRange.inRange, .sdx-container .flatpickr-day.endRange.inRange, .sdx-container .flatpickr-day.selected:focus, .sdx-container .flatpickr-day.startRange:focus, .sdx-container .flatpickr-day.endRange:focus, .sdx-container .flatpickr-day.selected:hover, .sdx-container .flatpickr-day.startRange:hover, .sdx-container .flatpickr-day.endRange:hover, .sdx-container .flatpickr-day.selected.prevMonthDay, .sdx-container .flatpickr-day.startRange.prevMonthDay, .sdx-container .flatpickr-day.endRange.prevMonthDay, .sdx-container .flatpickr-day.selected.nextMonthDay, .sdx-container .flatpickr-day.startRange.nextMonthDay, .sdx-container .flatpickr-day.endRange.nextMonthDay { background: #569ff7; box-shadow: none; color: #fff; border-color: #569ff7; } .sdx-container .flatpickr-day.selected.startRange, .sdx-container .flatpickr-day.startRange.startRange, .sdx-container .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; } .sdx-container .flatpickr-day.selected.endRange, .sdx-container .flatpickr-day.startRange.endRange, .sdx-container .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; } .sdx-container .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .sdx-container .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .sdx-container .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 #569ff7; } .sdx-container .flatpickr-day.selected.startRange.endRange, .sdx-container .flatpickr-day.startRange.startRange.endRange, .sdx-container .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } .sdx-container .flatpickr-day.inRange { border-radius: 0; box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .sdx-container .flatpickr-day.disabled, .sdx-container .flatpickr-day.disabled:hover, .sdx-container .flatpickr-day.prevMonthDay, .sdx-container .flatpickr-day.nextMonthDay, .sdx-container .flatpickr-day.notAllowed, .sdx-container .flatpickr-day.notAllowed.prevMonthDay, .sdx-container .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3); background: transparent; border-color: transparent; cursor: default; } .sdx-container .flatpickr-day.disabled, .sdx-container .flatpickr-day.disabled:hover { cursor: not-allowed; color: rgba(57, 57, 57, 0.1); } .sdx-container .flatpickr-day.week.selected { border-radius: 0; box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; } .sdx-container .flatpickr-day.hidden { visibility: hidden; } .sdx-container .rangeMode .flatpickr-day { margin-top: 1px; } .sdx-container .flatpickr-weekwrapper { display: inline-block; float: left; } .sdx-container .flatpickr-weekwrapper .flatpickr-weeks { padding: 0 12px; box-shadow: 1px 0 0 #e6e6e6; } .sdx-container .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 28px; } .sdx-container .flatpickr-weekwrapper span.flatpickr-day, .sdx-container .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(57, 57, 57, 0.3); background: transparent; cursor: default; border: none; } .sdx-container .flatpickr-innerContainer { display: block; display: flex; box-sizing: border-box; overflow: hidden; } .sdx-container .flatpickr-rContainer { display: inline-block; padding: 0; box-sizing: border-box; } .sdx-container .flatpickr-time { text-align: center; outline: 0; display: block; height: 0; line-height: 40px; max-height: 40px; box-sizing: border-box; overflow: hidden; display: flex; } .sdx-container .flatpickr-time:after { content: ""; display: table; clear: both; } .sdx-container .flatpickr-time .numInputWrapper { flex: 1; width: 40%; height: 40px; float: left; } .sdx-container .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #393939; } .sdx-container .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #393939; } .sdx-container .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .sdx-container .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .sdx-container .flatpickr-time input { background: transparent; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #393939; font-size: 14px; position: relative; box-sizing: border-box; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .sdx-container .flatpickr-time input.flatpickr-hour { font-weight: bold; } .sdx-container .flatpickr-time input.flatpickr-minute, .sdx-container .flatpickr-time input.flatpickr-second { font-weight: 400; } .sdx-container .flatpickr-time input:focus { outline: 0; border: 0; } .sdx-container .flatpickr-time .flatpickr-time-separator, .sdx-container .flatpickr-time .flatpickr-am-pm { height: inherit; display: inline-block; float: left; line-height: inherit; color: #393939; font-weight: bold; width: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; align-self: center; } .sdx-container .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .sdx-container .flatpickr-time input:hover, .sdx-container .flatpickr-time .flatpickr-am-pm:hover, .sdx-container .flatpickr-time input:focus, .sdx-container .flatpickr-time .flatpickr-am-pm:focus { background: #eee; } .sdx-container .flatpickr-input[readonly] { cursor: pointer; } @-webkit-keyframes fpFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @-webkit-keyframes fpFadeOutDown { from { visibility: visible; transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -20px, 0); } } @keyframes fpFadeOutDown { from { visibility: visible; transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -20px, 0); } } @-webkit-keyframes fpFadeOutUp { from { visibility: visible; transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 20px, 0); } } @keyframes fpFadeOutUp { from { visibility: visible; transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 20px, 0); } } @-webkit-keyframes fpFadeInUp { from { visibility: hidden; transform: translate3d(0, 20px, 0); } to { visibility: visible; transform: translate3d(0, 0, 0); } } @keyframes fpFadeInUp { from { visibility: hidden; transform: translate3d(0, 20px, 0); } to { visibility: visible; transform: translate3d(0, 0, 0); } } .sdx-container .flatpickr-calendar { margin-top: 15px; border-radius: 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); /* Animation for flatpickr going upwards */ /* month and year */ /* weekdays */ /* day */ } .sdx-container .flatpickr-calendar::before { border: 0; } .sdx-container .flatpickr-calendar::after { left: 28px; margin: -1px -12px; border-width: 8px; } .sdx-container .flatpickr-calendar.arrowTop::after { left: 38px; margin-bottom: -5px; border-color: #eef3f6 transparent transparent #eef3f6; box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.1); transform-origin: 0 0; transform: rotate(45deg); z-index: -1; } .sdx-container .flatpickr-calendar.arrowTop.rightMost::after { left: auto; } .sdx-container .flatpickr-calendar.arrowBottom { margin-top: -15px; } .sdx-container .flatpickr-calendar.inline { margin-top: 10px; } .sdx-container .flatpickr-calendar.arrowBottom::after { border-color: transparent transparent #fff #fff; box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1); transform-origin: 0 0; transform: rotate(-45deg); } .sdx-container .flatpickr-calendar.arrowBottom.rightMost::after { right: 28px; } .sdx-container .flatpickr-calendar.inline::after { display: none; } .sdx-container .flatpickr-calendar.animate { display: none; position: absolute; z-index: 99999; visibility: hidden; -webkit-animation: fpFadeOutDown 200ms; animation: fpFadeOutDown 200ms; -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); /* ease-in-quad */ opacity: 0; transition: opacity 200ms; transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); /* ease-in-quad */ } .sdx-container .flatpickr-calendar.animate.open { visibility: visible; opacity: 1; display: inline-block; /* flatpickr lib handles the opacity animation */ transition: none; } .sdx-container .flatpickr-calendar.animate.arrowBottom { -webkit-animation-name: fpFadeOutUp; animation-name: fpFadeOutUp; } .sdx-container .flatpickr-calendar.animate.arrowBottom.open { -webkit-animation-name: fpFadeInUp; animation-name: fpFadeInUp; } .sdx-container .flatpickr-calendar, .sdx-container .flatpickr-calendar .dayContainer, .sdx-container .flatpickr-calendar .flatpickr-days { width: 392px; } .sdx-container .flatpickr-calendar .dayContainer { min-width: 392px; max-width: 392px; } .sdx-container .flatpickr-calendar, .sdx-container .flatpickr-calendar .flatpickr-day, .sdx-container .flatpickr-calendar .flatpickr-weekday, .sdx-container .flatpickr-calendar .flatpickr-current-month, .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month, .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year, .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year.cur-year:focus { color: #015; font-weight: 300; } .sdx-container .flatpickr-calendar .flatpickr-month { height: 70px; background-color: #eef3f6; } .sdx-container .flatpickr-calendar .flatpickr-current-month { padding-top: 22px; } .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month, .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year { font-size: 24px; letter-spacing: -0.35px; } .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month:hover, .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year:hover { background: transparent; } .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year { /* override SDX styles when using inline */ z-index: auto; margin-top: 0; border: 0; background-color: transparent; padding: 0 0 0 0.5ch; height: auto; } .sdx-container .flatpickr-calendar .flatpickr-current-month input.cur-year.cur-year:focus { margin-top: 0; /* override SDX style when using inline */ } .sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 8ch; } .sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowUp, .sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper .arrowDown { display: none; } .sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover { background: transparent; } .sdx-container .flatpickr-calendar .flatpickr-prev-month, .sdx-container .flatpickr-calendar .flatpickr-next-month { padding: 30px 20px; } .sdx-container .flatpickr-calendar .flatpickr-prev-month svg, .sdx-container .flatpickr-calendar .flatpickr-next-month svg { width: 16px; fill: #1781e3; stroke: #1781e3; } .sdx-container .flatpickr-calendar .flatpickr-prev-month:hover, .sdx-container .flatpickr-calendar .flatpickr-next-month:hover, .sdx-container .flatpickr-calendar .flatpickr-prev-month:focus, .sdx-container .flatpickr-calendar .flatpickr-next-month:focus { color: #0851da; } .sdx-container .flatpickr-calendar .flatpickr-prev-month:hover svg, .sdx-container .flatpickr-calendar .flatpickr-next-month:hover svg, .sdx-container .flatpickr-calendar .flatpickr-prev-month:focus svg, .sdx-container .flatpickr-calendar .flatpickr-next-month:focus svg { fill: #0851da; stroke: #0851da; } .sdx-container .flatpickr-calendar .flatpickr-weekdays { height: 40px; background-color: #eef3f6; } .sdx-container .flatpickr-calendar .flatpickr-weekday { font-size: 14px; } .sdx-container .flatpickr-calendar .flatpickr-day { color: #1781e3; font-size: 18px; font-weight: 600; margin: 5px; max-width: 46px; height: 46px; line-height: 45px; } .sdx-container .flatpickr-calendar .flatpickr-day.today { border-color: #bbb; color: #1781e3; transition: all 200ms; } .sdx-container .flatpickr-calendar .flatpickr-day.today.selected { box-shadow: inset 0 0 0 1px #fff; } .sdx-container .flatpickr-calendar .flatpickr-day.disabled, .sdx-container .flatpickr-calendar .flatpickr-day.disabled:hover, .sdx-container .flatpickr-calendar .flatpickr-day.disabled:focus { color: #bbb; border-color: transparent; font-weight: 300; } .sdx-container .flatpickr-calendar .flatpickr-day.prevMonthDay.prevMonthDay, .sdx-container .flatpickr-calendar .flatpickr-day.nextMonthDay.nextMonthDay { transition: all 200ms; font-weight: 300; } .sdx-container .flatpickr-calendar .flatpickr-day.prevMonthDay.prevMonthDay.selected, .sdx-container .flatpickr-calendar .flatpickr-day.nextMonthDay.nextMonthDay.selected { color: #fff; } .sdx-container .flatpickr-calendar .flatpickr-day:hover, .sdx-container .flatpickr-calendar .flatpickr-day:focus, .sdx-container .flatpickr-calendar .flatpickr-day.selected { background: transparent; border-color: #1781e3; transition: all 200ms; } .sdx-container .flatpickr-calendar .flatpickr-day.selected { color: #fff; background: #1781e3; transition: all 200ms; } .sdx-container .flatpickr-calendar .flatpickr-day.selected:hover, .sdx-container .flatpickr-calendar .flatpickr-day.selected:focus { background: #0851da; border-color: #0851da; transition: all 200ms; } @media (max-width: 767px) { .sdx-container .flatpickr-calendar, .sdx-container .flatpickr-calendar .dayContainer, .sdx-container .flatpickr-calendar .flatpickr-days { width: 280px; } .sdx-container .flatpickr-calendar .dayContainer { min-width: 280px; max-width: 280px; } .sdx-container .flatpickr-calendar .flatpickr-month { height: 45px; } .sdx-container .flatpickr-calendar .flatpickr-current-month { padding-top: 18px; left: 17.5%; } .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-month, .sdx-container .flatpickr-calendar .flatpickr-current-month .cur-year.cur-year { font-size: 18px; letter-spacing: -0.1px; } .sdx-container .flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 6ch; } .sdx-container .flatpickr-calendar .flatpickr-prev-month, .sdx-container .flatpickr-calendar .flatpickr-next-month { padding-top: 22px; } .sdx-container .flatpickr-calendar .flatpickr-day { font-size: 16px; max-width: 30px; height: 30px; line-height: 28px; } } .sdx-container .radio { box-sizing: border-box; } .sdx-container .radio + .radio { margin-top: 14px; } .sdx-container .radio.add-space { margin-bottom: 24px; } .sdx-container .radio p { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; margin-top: 5px; margin-bottom: 0; padding-left: 36px; color: #666; } .sdx-container .radio [type=radio]:not(:checked), .sdx-container .radio [type=radio]:checked { position: absolute; left: -9999px; opacity: 0; } .sdx-container .radio [type=radio] + label { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; display: inline-block; position: relative; cursor: pointer; margin-bottom: 0; padding-left: 36px; color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .radio [type=radio] + label::before, .sdx-container .radio [type=radio] + label::after { position: absolute; top: 0; left: 0; z-index: 0; margin-top: 1px; border-radius: 50%; content: ""; } .sdx-container .radio [type=radio] + label::before { transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86); width: 22px; height: 22px; } .sdx-container .radio [type=radio] + label::after { top: 6px; left: 6px; transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86); transform-origin: 50% 50%; width: 10px; height: 10px; } .sdx-container .radio [type=radio]:not(:checked) + label::before { border: 2px solid #adadad; } .sdx-container .radio [type=radio]:not(:checked) + label::after { background: #adadad; border: 5px solid #adadad; border-radius: 52%; content: ""; left: 6px; opacity: 1; position: absolute; top: 6px; transform: scale(0); } .sdx-container .radio [type=radio]:hover + label::before { border: 2px solid #adadad; } .sdx-container .radio [type=radio]:hover + label::after { background: #adadad; border: 5px solid #adadad; border-radius: 52%; content: ""; left: 6px; opacity: 1; position: absolute; top: 6px; transform: scale(0.5); } .sdx-container .radio [type=radio]:focus + label::before { border: 2px solid #1781e3; } .sdx-container .radio [type=radio]:focus + label::after { border: 5px solid #1781e3; border-radius: 52%; content: ""; left: 6px; opacity: 1; position: absolute; top: 6px; } .sdx-container .radio [type=radio]:checked + label::before { border: 2px solid #1781e3; } .sdx-container .radio [type=radio]:checked + label::after { background: #1781e3; border: 5px solid #1781e3; border-radius: 52%; content: ""; left: 6px; opacity: 1; position: absolute; top: 6px; transform: scale(1); } .sdx-container .radio [type=radio]:checked:focus + label::before { border: 2px solid #1781e3; } .sdx-container .radio [type=radio]:checked:focus + label::after { border: 5px solid #1781e3; border-radius: 52%; content: ""; left: 6px; opacity: 1; position: absolute; top: 6px; } .sdx-container .radio [type=radio]:checked:hover + label::before { border: 2px solid #0851da; } .sdx-container .radio [type=radio]:checked:hover + label::after { background: #0851da; border: 5px solid #0851da; border-radius: 52%; content: ""; left: 6px; opacity: 1; position: absolute; top: 6px; transform: scale(1); } .sdx-container .radio [type=radio]:disabled + label { opacity: 0.4; pointer-events: none; } .sdx-container .radio [type=radio]:disabled + label::before { border-color: #adadad; background-color: transparent; } .sdx-container .radio [type=radio]:disabled:hover + label::before { border: 2px solid #adadad; } .sdx-container .radio [type=radio]:disabled:hover + label::after { background: none; } .sdx-container .radio [type=radio]:disabled:checked + label::before { border: 2px solid #adadad; } .sdx-container .radio [type=radio]:disabled:checked + label::after { background-color: #adadad; } .sdx-container .radio [type=radio]:disabled:not(:checked) + label::before { border-color: #adadad; } .sdx-container .radio--only [type=radio] + label { padding-left: 22px; } .sdx-container .form-inline .radio { display: inline-block; vertical-align: top; } .sdx-container .form-inline .radio + .radio { margin-top: 0; margin-left: 14px; } .sdx-container .form-group label, .sdx-container .form-group .label { display: block; margin-bottom: 8px; } .sdx-container .form-group .message { max-height: 0; margin-top: 0; opacity: 0; transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .sdx-container .form-group.invalid > .message { max-height: 50px; margin-top: 6px; opacity: 1; color: #d12; } .sdx-container .checkbox { box-sizing: border-box; } .sdx-container .checkbox + .checkbox { margin-top: 24px; } .sdx-container .checkbox.add-space { margin-bottom: 24px; } .sdx-container .checkbox p { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; margin-top: 5px; margin-bottom: 0; padding-left: 36px; color: #666; } .sdx-container .checkbox .message { max-height: 0; margin-top: 0; opacity: 0; transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .sdx-container .checkbox.invalid > .message { max-height: 50px; margin-top: 6px; opacity: 1; color: #d12; } .sdx-container .checkbox [type=checkbox]:not(:checked), .sdx-container .checkbox [type=checkbox]:checked { position: absolute; left: -9999px; opacity: 0; } .sdx-container .checkbox [type=checkbox] + label { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; position: relative; cursor: pointer; margin-bottom: 0; padding-left: 36px; color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .checkbox [type=checkbox] + label::before, .sdx-container .checkbox [type=checkbox] + label::after { position: absolute; top: 1px; left: 0; z-index: 0; content: ""; } .sdx-container .checkbox [type=checkbox] + label::before { transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid #adadad; border-radius: 5px; width: 22px; height: 22px; } .sdx-container .checkbox [type=checkbox] + label::after { transform: scale(0); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); transform-origin: 50% 50%; width: 22px; height: auto; text-align: center; line-height: 22px; color: #adadad; font-family: sdx-icons; font-size: 18px; content: ""; } .sdx-container .checkbox [type=checkbox]:hover + label::before { border: 2px solid #adadad; background: transparent; } .sdx-container .checkbox [type=checkbox]:hover + label::after { transform: scale(0.5); color: #adadad; } .sdx-container .checkbox [type=checkbox]:focus + label::before { border: 2px solid #1781e3; } .sdx-container .checkbox [type=checkbox]:focus + label::after { color: #1781e3; } .sdx-container .checkbox [type=checkbox]:checked + label::before { border: 2px solid #1781e3; background: transparent; } .sdx-container .checkbox [type=checkbox]:checked + label::after { transform: scale(1); color: #1781e3; } .sdx-container .checkbox [type=checkbox]:checked:focus + label::before { border: 2px solid #1781e3; } .sdx-container .checkbox [type=checkbox]:checked:focus + label::after { color: #1781e3; } .sdx-container .checkbox [type=checkbox]:checked:hover + label::before { border: 2px solid #0851da; background: transparent; } .sdx-container .checkbox [type=checkbox]:checked:hover + label::after { transform: scale(0.5); color: #0851da; } .sdx-container .checkbox [type=checkbox]:disabled + label, .sdx-container .checkbox [type=checkbox]:disabled + label + p { opacity: 0.4; pointer-events: none; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:hover + label::before { border: 2px solid #adadad; background: transparent; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:hover + label::after { transform: scale(0); color: #adadad; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:focus + label::before { border: 2px solid #1781e3; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:focus + label::after { color: #1781e3; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:checked + label::before { border: 2px solid #1781e3; background: transparent; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:checked + label::after { transform: scale(1); color: #1781e3; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:checked:focus + label::before { border: 2px solid #1781e3; } .sdx-container .hiddenscroll.touchevents .checkbox [type=checkbox]:checked:focus + label::after { color: #1781e3; } .sdx-container .checkbox--only [type=checkbox] + label { display: inline; padding-left: 22px; } .sdx-container .checkbox--inverted [type=checkbox]:hover + label::before { border: 2px solid #0851da; background: #0851da; } .sdx-container .checkbox--inverted [type=checkbox]:hover + label::after { transform: scale(0.5); color: #fff; } .sdx-container .checkbox--inverted [type=checkbox]:focus + label::before { border: 2px solid #0851da; } .sdx-container .checkbox--inverted [type=checkbox]:focus + label::after { color: #fff; } .sdx-container .checkbox--inverted [type=checkbox]:checked + label::before { border: 2px solid #1781e3; background: #1781e3; } .sdx-container .checkbox--inverted [type=checkbox]:checked + label::after { transform: scale(1); color: #fff; } .sdx-container .checkbox--inverted [type=checkbox]:checked:focus + label::before { border: 2px solid #0851da; } .sdx-container .checkbox--inverted [type=checkbox]:checked:focus + label::after { color: #fff; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:hover + label::before { border: 2px solid #adadad; background: transparent; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:hover + label::after { transform: scale(0); color: #adadad; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:focus + label::before { border: 2px solid #0851da; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:focus + label::after { color: #fff; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:checked + label::before { border: 2px solid #1781e3; background: #1781e3; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:checked + label::after { transform: scale(1); color: #fff; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:checked:focus + label::before { border: 2px solid #0851da; } .sdx-container .hiddenscroll.touchevents .checkbox--inverted [type=checkbox]:checked:focus + label::after { color: #fff; } .sdx-container .form-inline .checkbox { display: inline-block; vertical-align: top; } .sdx-container .form-inline .checkbox + .checkbox { margin-top: 0; margin-left: 14px; } .sdx-container .form-group label, .sdx-container .form-group .label { display: block; margin-bottom: 8px; } .sdx-container .select { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; position: relative; margin-bottom: 16px; outline: none; cursor: pointer; z-index: 500; color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sdx-container .select:last-of-type { margin-bottom: 0; } .sdx-container .select select { display: none; } .sdx-container .select .select__button { position: relative; width: 100%; height: 48px; } .sdx-container .select .select__button:hover .select__thumb { background: #1781e3; color: #fff; } .sdx-container .select .select__button:hover .select__thumb .thumb-icon { position: relative; } .sdx-container .select .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .select .select__button:hover .select__thumb .thumb-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; background: #fff; width: 20px; height: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .select .select__button:hover .select__thumb .thumb-icon::before { left: 0; } .sdx-container .select .select__button:hover .select__thumb .thumb-icon::after { left: 15px; } .sdx-container .select .select__thumb { position: absolute; top: 0; right: 0; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 501; border-radius: 0 5px 5px 0; cursor: inherit; width: 34px; height: inherit; color: #1781e3; transform-origin: 50% 50%; } .sdx-container .select .select__thumb .thumb-icon { position: relative; display: flex; transform: scale(0.5); margin: 0; width: 100%; height: 100%; pointer-events: none; align-items: center; justify-content: center; transform-origin: 50% 50%; } .sdx-container .select .select__thumb .thumb-icon::before, .sdx-container .select .select__thumb .thumb-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; background: #1781e3; width: 20px; height: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .select .select__thumb .thumb-icon::before { left: 0; } .sdx-container .select .select__thumb .thumb-icon::after { left: 15px; } .sdx-container .select .select__thumb .loader-spinner { display: none; } .sdx-container .select .select__placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; display: block; position: relative; border: 1px solid #d6d6d6; border-radius: 5px; cursor: inherit; padding: 12px 55px 12px 15px; width: 100%; height: inherit; -webkit-appearance: none; } .sdx-container .select .select__dropdown { position: absolute; right: 0; left: 0; margin-bottom: 20px; transform: scale(1, 1); transform-origin: 50% 0; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; z-index: 501; border-radius: 0 0 5px 5px; box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.1); background: #fff; width: 100%; height: auto; max-height: 0; overflow: hidden; color: #333; } .sdx-container .select .select__dropdown .dropdown-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #d6d6d6; border-top: 0; padding: 12px 15px 15px; width: 100%; height: 48px; } .sdx-container .select .select__dropdown .dropdown-item:last-child { border-radius: 0 0 5px 5px; } .sdx-container .select .select__dropdown .dropdown-item:hover, .sdx-container .select .select__dropdown .dropdown-item--focused { border-color: #1781e3; background: #1781e3; color: #fff; } .sdx-container .select .select__dropdown .dropdown-item--selected { color: #25b252; } .sdx-container .select .select__dropdown .dropdown-item--selected::before { float: right; margin-right: -7px; font-family: sdx-icons; font-size: 16px; content: ""; } .sdx-container .select .select__dropdown .dropdown-item--disabled, .sdx-container .select .select__dropdown .dropdown-item--disabled:hover { border-color: #d6d6d6; background: none; cursor: not-allowed; color: rgba(51, 51, 51, 0.4); } .sdx-container .select .message { max-height: 0; margin-top: 0; opacity: 0; transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .sdx-container .select.invalid > .message { max-height: 50px; margin-top: 6px; opacity: 1; color: #d12; } .sdx-container .select .dropdown-group__item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #d6d6d6; border-top: 0; padding: 12px 15px 15px; width: 100%; height: 48px; background-color: #eef3f6; color: #666; pointer-events: none; } .sdx-container .select .dropdown-group__item:hover { cursor: default; } .sdx-container .select .dropdown-group .dropdown-item:last-child { border-radius: 0; } .sdx-container .select .dropdown-group:last-child .dropdown-item:last-child { border-radius: 0 0 5px 5px; } .sdx-container .select--closed .select__thumb .thumb-icon::before { transform: rotate(35deg); } .sdx-container .select--closed .select__thumb .thumb-icon::after { transform: rotate(-35deg); } .sdx-container .select--closed .select__dropdown { transform: scale(1, 0); opacity: 0.2; } .sdx-container .select--open { z-index: 999999; } .sdx-container .select--open .select__thumb { border-radius: 0 5px 0 0; } .sdx-container .select--open .select__thumb .thumb-icon::before { transform: rotate(-35deg); } .sdx-container .select--open .select__thumb .thumb-icon::after { transform: rotate(35deg); } .sdx-container .select--open .select__placeholder { border-radius: 5px 5px 0 0; box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.1); color: #1781e3; } .sdx-container .select--open .select__dropdown { max-height: 512px; overflow-y: auto; } .sdx-container .select--disabled { opacity: 0.4; cursor: not-allowed; } .sdx-container .select--disabled .select__button:hover .select__thumb { background: none; color: #1781e3; } .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon { position: relative; } .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; background: #1781e3; width: 20px; height: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::before { left: 0; } .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::after { left: 15px; } .sdx-container .select--filterable .select__dropdown .dropdown-item strong { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .select--filterable .select__dropdown .dropdown-item:hover strong { color: #fff !important; } .sdx-container .select--filterable .select__dropdown .dropdown-item.dropdown-item--selected strong { font-weight: inherit; } .sdx-container .select--filterable .select__dropdown .dropdown-item:not(.dropdown-item--selected) strong { color: #1781e3; } .sdx-container .select--filterable .select__placeholder:focus:not([readonly]) { border-color: #1781e3; } .sdx-container .select--loading { pointer-events: none; } .sdx-container .select--loading .select__thumb .loader-spinner { display: block; top: 50%; left: 50%; margin-top: -12.5px; margin-left: -12.5px; } .sdx-container .select--loading .select__thumb .thumb-icon { display: none; } .sdx-container .select--minimal .select__button:hover .select__thumb { background: none; color: #0851da; } .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon { position: relative; } .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; background: #0851da; width: 20px; height: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::before { left: 0; } .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::after { left: 15px; } .sdx-container .select--minimal .select__placeholder { border: 0; border-bottom: 1px solid #d6d6d6; border-radius: 0; box-shadow: none; color: #333; } .sdx-container .select--minimal .select__dropdown { border: 0; border-radius: 0; box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.15); } .sdx-container .select--minimal .select__dropdown .dropdown-item { border: 0; border-bottom: 1px solid #d6d6d6; border-radius: 0; } .sdx-container .select--minimal .select__dropdown .dropdown-item:last-child { border-bottom: 0; border-radius: 0; } .sdx-container .select--minimal.select--open .select__placeholder { border-color: transparent; } .sdx-container .select--minimal.select--tabs .select__placeholder { border: 0; border-bottom: 4px solid #1781e3; border-radius: 0; box-shadow: none; color: #333; } .sdx-container select { display: block; position: relative; border: 1px solid #d6d6d6; border-radius: 5px; background: #fff; cursor: pointer; padding: 12px 55px 12px 15px; width: auto; height: 48px; color: #333; -webkit-appearance: none; } .sdx-container .bg--dark label { font-weight: 400; } .sdx-container .switch { display: flex; position: relative; margin-bottom: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .switch p { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; position: relative; top: 2px; color: #333; flex-grow: 1; flex-shrink: 1; flex-basis: 0; } .sdx-container .switch [type=checkbox]:not(:checked), .sdx-container .switch [type=checkbox]:checked { position: absolute; left: -9999px; opacity: 0; } .sdx-container .switch [type=checkbox] + label { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 400; height: 24px; top: 2px; color: #333; display: block; line-height: 24px; margin-bottom: 8px; position: relative; cursor: pointer; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding-left: 78px; z-index: 0; } .sdx-container .switch [type=checkbox] + label::before { position: absolute; top: -2px; transition: all 180ms cubic-bezier(0.985, 0.385, 0.41, 0.445); z-index: 1; left: 0; margin: 0 auto; border-radius: 28px; background: #d6d6d6; width: 58px; height: 28px; content: ""; } .sdx-container .switch [type=checkbox] + label::after { position: absolute; top: -2px; bottom: 0; left: 0; transition: all 180ms 120ms cubic-bezier(0.445, 0.41, 0.395, 0.985); z-index: 2; margin: 0; border: 2px solid #adadad; border-radius: 28px; background: #fff; width: 28px; height: 28px; content: ""; } .sdx-container .switch [type=checkbox]:hover + label::before { z-index: 1; } .sdx-container .switch [type=checkbox]:hover + label::after { border-color: #858585; z-index: 2; } .sdx-container .switch [type=checkbox]:focus + label { outline: none; } .sdx-container .switch [type=checkbox]:focus + label::after { border-color: #858585; outline: none; } .sdx-container .switch [type=checkbox]:checked + label::before { top: -2px; border-radius: 28px; background-color: #25b252; height: 28px; } .sdx-container .switch [type=checkbox]:checked + label::after { left: 30px; } .sdx-container .switch [type=checkbox]:checked + label:hover::after { border-color: #858585; z-index: 2; } .sdx-container .switch [type=checkbox]:checked + label:focus { outline: none; } .sdx-container .switch [type=checkbox]:checked + label:focus::after { border-color: #858585; } .sdx-container .switch [type=checkbox].disabled > label, .sdx-container .switch [type=checkbox]:disabled + label { cursor: not-allowed; opacity: 0.4; filter: alpha(opacity=40); } .sdx-container .switch [type=checkbox]:disabled + label:hover::after { border-color: #adadad; } .sdx-container .switch [type=checkbox]:disabled + label + p { opacity: 0.6; } .sdx-container .switch--left [type=checkbox] + label { padding: 0 20px 0 0; margin-right: 78px; } .sdx-container .switch--left [type=checkbox] + label::before { left: 100%; } .sdx-container .switch--left [type=checkbox] + label::after { left: 100%; } .sdx-container .switch--left [type=checkbox]:checked + label::after { left: calc(100% + 30px); } .sdx-container .bg--dark .switch label { color: #fff; font-weight: 400; } .sdx-container .bg--dark .switch p { color: #fff; } .sdx-container .range { font-family: "TheSans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; margin: 0 16px 24px; outline: none; height: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 768px) { .sdx-container .range { margin: 0 32px 24px; } } .sdx-container .range input[type=range] { display: none; } .sdx-container .range label { margin: 0; margin-top: 32px; } .sdx-container .range output { font-weight: 600; line-height: 24px; letter-spacing: 0.1px; font-size: 14px; color: #333; } .sdx-container .range .range-container { position: relative; margin-top: 19px; cursor: pointer; width: 100%; height: auto; min-height: 28px; } .sdx-container .range .range-container:focus { outline: none; } .sdx-container .range .range-track { transition: all 200ms ease; width: 100%; height: 2px; position: absolute; top: 13px; left: 0; z-index: 1; background: #adadad; } .sdx-container .range .range-track__progress { position: absolute; top: 0; left: 0; background: #1781e3; width: 0; height: 2px; } .sdx-container .range .range-slider { display: table; } .sdx-container .range .range-tick { display: table-cell; position: relative; padding: 40px 8px 0; height: auto; text-align: center; color: #adadad; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; word-break: break-all; } .sdx-container .range .range-tick::before { position: absolute; top: 13px; left: 50%; background: #adadad; width: 1px; height: 8px; content: ""; } .sdx-container .range .range-tick:first-child { padding-left: 0; text-align: left; } .sdx-container .range .range-tick:first-child::before { position: absolute; top: 13px; left: 32px; } .sdx-container .range .range-tick:first-child::after { position: absolute; top: 12px; left: 30px; } .sdx-container .range .range-tick:last-child { padding-right: 0; text-align: right; } .sdx-container .range .range-tick:last-child::before { position: absolute; top: 13px; right: 32px; left: inherit; } .sdx-container .range .range-tick:last-child::after { position: absolute; top: 12px; right: 30px; left: inherit; } .sdx-container .range .range-tick::after { position: absolute; top: 12px; left: calc(50% - 2px); transform: scale(0); transition: 120ms all ease-in-out; z-index: 5; border-radius: 100%; background: #0851da; width: 5px; height: 5px; content: ""; transform-origin: 50% 50%; } .sdx-container .range .range-tick__label { font-weight: 400; position: relative; text-align: center; color: #333; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sdx-container .range .range-tick--active .range-tick__label, .sdx-container .range .range-tick:hover .range-tick__label { font-weight: 600; color: #0851da; } .sdx-container .range .range-tick:hover::after { transform: scale(1); } .sdx-container .range .range-thumb { z-index: 1; border: 2px solid #1781e3; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; background-color: #fff; width: 28px; height: 28px; transform-origin: 50% 50%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 0; z-index: 10; margin: 0; } .sdx-container .range .range-thumb:active { background-color: #0851da; } .sdx-container .range .range-thumb:hover { border-color: #0851da; } .sdx-container .range .range-thumb__value { position: absolute; bottom: 37px; left: calc(50% - 25px); transform: scale(0); transition: 120ms all; opacity: 1; border-radius: 8px; background: #0851da; min-width: 48px; height: 48px; text-align: center; line-height: 48px; color: #fff; font-size: 16px; } .sdx-container .range .range-thumb:active { border-color: #0851da; background-color: #0851da; } .sdx-container .range .range-thumb:active .range-thumb__value { transform: scale(1); } .sdx-container .range--active .range-thumb { border-color: #0851da; background-color: #0851da; } .sdx-container .range--active .range-thumb .range-thumb__value { transform: scale(1); } .sdx-container .range--disabled .range-container { cursor: not-allowed; } .sdx-container .range--disabled .range-track { background: #d6d6d6 !important; } .sdx-container .range--disabled .range-track__progress { background: #d6d6d6 !important; } .sdx-container .range--disabled .range-thumb .range-thumb__value { transform: scale(0); } .sdx-container .range--disabled .range-thumb, .sdx-container .range--disabled .range-thumb:hover { border-color: #d6d6d6 !important; } .sdx-container .range--disabled .range-thumb:active { background-color: #fff; } .sdx-container .range--disabled .range-thumb:active .range-thumb__value { transform: scale(0); } .sdx-container .range--disabled .range-tick { color: #d6d6d6 !important; } .sdx-container .range--disabled .range-tick::before { background: #d6d6d6 !important; } .sdx-container .range--disabled .range-tick .range-tick__label, .sdx-container .range--disabled .range-tick:hover .range-tick__label { font-weight: 400; color: #d6d6d6 !important; } .sdx-container .range--disabled .range-tick::after, .sdx-container .range--disabled .range-tick:hover::after { transform: scale(0); } .sdx-container .range--dragging .range-tick:hover::after { transform: scale(0); } .sdx-container .range--light { margin: 40px; } @media (min-width: 768px) { .sdx-container .range--light { margin: 40px; } } .sdx-container .bg--dark .range output { color: #fff; } .sdx-container .bg--dark .range .range-track { background: #fff; } .sdx-container .bg--dark .range .range-tick, .sdx-container .bg--dark .range .range-tick__label { color: #fff; } .sdx-container .bg--dark .range .range-tick--active .range-tick__label, .sdx-container .bg--dark .range .range-tick:hover .range-tick__label { color: #0851da; } .sdx-container .bg--dark .range .range-thumb { box-shadow: inset 0 0 0 3px #015; background-color: #015; } .sdx-container .bg--dark .range .range-thumb:active { border-color: #0851da; background-color: #0851da; } .sdx-container .bg--dark .range .range-thumb:active .range-thumb__value { transform: scale(1); } .sdx-container .bg--dark .range--active .range-thumb { border-color: #0851da; background-color: #0851da; } .sdx-container .bg--dark .range--active .range-thumb .range-thumb__value { transform: scale(1); } .sdx-container .bg--dark .range--disabled { opacity: 0.5; } .sdx-container .bg--dark .range--disabled .range-thumb .range-thumb__value { transform: scale(0); } .sdx-container .bg--dark .range--disabled .range-thumb:active { background-color: #015; } .sdx-container .bg--dark .range--disabled .range-thumb:active .range-thumb__value { transform: scale(0); } .sdx-container input[type=range].html5 { position: relative; margin: 14px 0; outline: none; border: 0; background-color: transparent; cursor: pointer; padding: 0; width: 100%; } .sdx-container input[type=range].html5:focus { outline: none; } .sdx-container input[type=range].html5::-webkit-slider-runnable-track { transition: all 200ms ease; width: 100%; height: 2px; border: 0 solid transparent; border-radius: 20px; background: #adadad; } .sdx-container input[type=range].html5::-webkit-slider-thumb { z-index: 1; border: 2px solid #1781e3; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; background-color: #fff; width: 28px; height: 28px; transform-origin: 50% 50%; -webkit-user-select: none; user-select: none; margin: 14px 0 0; margin-top: -13px; -webkit-appearance: none; } .sdx-container input[type=range].html5::-webkit-slider-thumb:active { background-color: #0851da; } .sdx-container input[type=range].html5::-webkit-slider-thumb:hover { border-color: #0851da; } .sdx-container input[type=range].html5 { /* fix for FF unable to apply focus style bug */ border: 1px solid #fff; } .sdx-container input[type=range].html5::-moz-range-track { /*required for proper track sizing in FF*/ border: 0; background: #adadad; height: 2px; } .sdx-container input[type=range].html5::-moz-range-thumb { z-index: 1; border: 2px solid #1781e3; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; background-color: #fff; width: 24px; height: 24px; transform-origin: 50% 50%; -moz-user-select: none; user-select: none; margin: 12px 0 0; outline: none; } .sdx-container input[type=range].html5::-moz-range-thumb:active { background-color: #0851da; } .sdx-container input[type=range].html5::-moz-range-thumb:hover { border-color: #0851da; } .sdx-container input[type=range].html5:-moz-focusring { outline: 1px solid transparent; outline-offset: -1px; } .sdx-container input[type=range].html5::-moz-focus-outer { border: 0; } .sdx-container input[type=range].html5::-ms-track { transition: all 200ms ease; width: 100%; height: 2px; border-width: 28px 0; border-color: transparent; background: transparent; color: transparent; } .sdx-container input[type=range].html5::-ms-fill-lower { background: #1781e3; } .sdx-container input[type=range].html5::-ms-fill-upper { background: #adadad; } .sdx-container input[type=range].html5::-ms-thumb { z-index: 1; border: 2px solid #1781e3; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; background-color: #fff; width: 28px; height: 28px; transform-origin: 50% 50%; -ms-user-select: none; user-select: none; margin: 14px 0 0; margin: 14px 0; } .sdx-container input[type=range].html5::-ms-thumb:active { background-color: #0851da; } .sdx-container input[type=range].html5::-ms-thumb:hover { border-color: #0851da; } .sdx-container input[type=range].html5::-ms-tooltip { display: none; } .sdx-container .segmented-controls-group, .sdx-container .toggle-button-group { display: flex; flex-wrap: wrap; } .sdx-container .segmented-controls-group [type=radio]:not(:checked), .sdx-container .segmented-controls-group [type=radio]:checked, .sdx-container .segmented-controls-group [type=checkbox]:not(:checked), .sdx-container .segmented-controls-group [type=checkbox]:checked, .sdx-container .toggle-button-group [type=radio]:not(:checked), .sdx-container .toggle-button-group [type=radio]:checked, .sdx-container .toggle-button-group [type=checkbox]:not(:checked), .sdx-container .toggle-button-group [type=checkbox]:checked { position: absolute; left: -9999px; opacity: 0; } .sdx-container .segmented-controls-group [type=radio].disabled > label, .sdx-container .segmented-controls-group [type=radio]:disabled + label, .sdx-container .segmented-controls-group [type=checkbox].disabled > label, .sdx-container .segmented-controls-group [type=checkbox]:disabled + label, .sdx-container .toggle-button-group [type=radio].disabled > label, .sdx-container .toggle-button-group [type=radio]:disabled + label, .sdx-container .toggle-button-group [type=checkbox].disabled > label, .sdx-container .toggle-button-group [type=checkbox]:disabled + label { cursor: not-allowed; opacity: 0.4; filter: alpha(opacity=40); } .sdx-container .segmented-controls-group [type=radio] + label, .sdx-container .segmented-controls-group [type=checkbox] + label, .sdx-container .toggle-button-group [type=radio] + label, .sdx-container .toggle-button-group [type=checkbox] + label { background-color: #fff; border: 1px solid #d6d6d6; border-radius: 5px; color: #333; cursor: pointer; font-size: 18px; padding: 12px 24px; margin-right: 12px; margin-bottom: 16px; font-weight: 400; } .sdx-container .segmented-controls-group [type=radio] + label:active, .sdx-container .segmented-controls-group [type=radio] + label:focus, .sdx-container .segmented-controls-group [type=checkbox] + label:active, .sdx-container .segmented-controls-group [type=checkbox] + label:focus, .sdx-container .toggle-button-group [type=radio] + label:active, .sdx-container .toggle-button-group [type=radio] + label:focus, .sdx-container .toggle-button-group [type=checkbox] + label:active, .sdx-container .toggle-button-group [type=checkbox] + label:focus { outline: none; } .sdx-container .segmented-controls-group [type=radio] + label:last-child, .sdx-container .segmented-controls-group [type=checkbox] + label:last-child, .sdx-container .toggle-button-group [type=radio] + label:last-child, .sdx-container .toggle-button-group [type=checkbox] + label:last-child { margin-right: 0; } .sdx-container .segmented-controls-group [type=radio]:checked + label, .sdx-container .segmented-controls-group [type=checkbox]:checked + label, .sdx-container .toggle-button-group [type=radio]:checked + label, .sdx-container .toggle-button-group [type=checkbox]:checked + label { border-color: #1781e3; color: #1781e3; } .sdx-container .segmented-controls-group [type=radio]:checked + label:hover, .sdx-container .segmented-controls-group [type=checkbox]:checked + label:hover, .sdx-container .toggle-button-group [type=radio]:checked + label:hover, .sdx-container .toggle-button-group [type=checkbox]:checked + label:hover { color: #0851da; } .sdx-container .segmented-controls-group [type=radio]:disabled + label:hover, .sdx-container .segmented-controls-group [type=checkbox]:disabled + label:hover, .sdx-container .toggle-button-group [type=radio]:disabled + label:hover, .sdx-container .toggle-button-group [type=checkbox]:disabled + label:hover { border-color: #d6d6d6; color: #333; } .sdx-container .segmented-controls-group .icon, .sdx-container .toggle-button-group .icon { margin-right: 5px; } .sdx-container .segmented-controls-group--centered .segmented-controls__label, .sdx-container .segmented-controls-group--centered .toggle-button__label, .sdx-container .toggle-button-group--centered .segmented-controls__label, .sdx-container .toggle-button-group--centered .toggle-button__label { text-align: center; max-width: 280px; min-width: 270px; } .sdx-container .segmented-controls-group--centered .toggle-button__text, .sdx-container .toggle-button-group--centered .toggle-button__text { float: left; } .sdx-container .segmented-controls-group--image [type=checkbox] + label, .sdx-container .segmented-controls-group--image [type=radio] + label, .sdx-container .toggle-button-group--image [type=checkbox] + label, .sdx-container .toggle-button-group--image [type=radio] + label { background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; display: inline; height: 72px; padding: 4px; text-align: center; width: 72px; } .sdx-container .segmented-controls-group--image [type=checkbox] + label img, .sdx-container .segmented-controls-group--image [type=radio] + label img, .sdx-container .toggle-button-group--image [type=checkbox] + label img, .sdx-container .toggle-button-group--image [type=radio] + label img { pointer-events: none; } .sdx-container ul, .sdx-container menu, .sdx-container dir { display: block; padding: 0; } .sdx-container ul, .sdx-container ol { margin: 0; padding: 0; list-style: none; } .sdx-container ul.list, .sdx-container ol.list { margin-top: 29px; margin-bottom: 28px; } .sdx-container ul.list ul.list, .sdx-container ul.list ol.list, .sdx-container ol.list ul.list, .sdx-container ol.list ol.list { margin-top: 0; margin-bottom: 0; padding-left: 18px; } .sdx-container ul.list li, .sdx-container ol.list li { margin-bottom: 13px; } @media (min-width: 480px) { .sdx-container ul.list li, .sdx-container ol.list li { margin-bottom: 12px; } } .sdx-container ul.list li::before, .sdx-container ol.list li::before { float: left; color: #1781e3; content: ""; } .sdx-container ul.list li.single-line, .sdx-container ol.list li.single-line, .sdx-container ul.list.single-line > li, .sdx-container ol.list.single-line > li { margin-bottom: 7px; } @media (min-width: 480px) { .sdx-container ul.list li.single-line, .sdx-container ol.list li.single-line, .sdx-container ul.list.single-line > li, .sdx-container ol.list.single-line > li { margin-bottom: 6px; } } .sdx-container dt.list { font-weight: 300; } .sdx-container ul.list li { margin-left: 18px; } .sdx-container ul.list li::before { margin-left: -20px; font-size: 33px; content: "•"; } .sdx-container ol.list li { margin-left: 32px; counter-increment: item; } @media (min-width: 480px) { .sdx-container ol.list li { margin-left: 30px; } } .sdx-container ol.list li::before { margin-left: -32px; font-weight: 600; content: counter(item) "."; } @media (min-width: 480px) { .sdx-container ol.list li::before { margin-left: -30px; } } .sdx-container .badge { display: inline-block; position: relative; } .sdx-container .badge__content { font-family: "TheSans", sans-serif; font-weight: 300; display: inline-block; position: relative; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; background: #1781e3; cursor: pointer; height: 24px; text-align: center; line-height: 1; color: #fff; font-size: 16px; transform-origin: 50% 50%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .badge__content:hover { background: #0851da; } .sdx-container .badge--message { display: flex; height: 24px; justify-content: center; } .sdx-container .badge--message .badge__content { -webkit-animation: badge-message 600ms linear both; animation: badge-message 600ms linear both; padding: 0; max-width: calc(100% - (2 * 24px)); overflow: hidden; transform-origin: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .badge--message .badge__text { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; -webkit-animation: badge-message-text 600ms linear both; animation: badge-message-text 600ms linear both; padding: 4px 12px 2px; height: 100%; letter-spacing: -0.6px; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sdx-container .badge--icon .avatar, .sdx-container .badge--avatar .avatar { width: 32px; height: 32px; } .sdx-container .badge--icon .badge__content, .sdx-container .badge--avatar .badge__content { position: absolute; top: 0; left: calc(100% - 9px); -webkit-animation: badge-icon 500ms linear both; animation: badge-icon 500ms linear both; padding: 2px 5px; min-width: 16px; height: 16px; font-size: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; } .sdx-container .badge--icon .badge__content--icon, .sdx-container .badge--avatar .badge__content--icon { padding: 0; width: 16px; height: 16px; } .sdx-container .badge--icon .badge__content--icon .icon, .sdx-container .badge--avatar .badge__content--icon .icon { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; width: 16px; text-align: center; line-height: 16px; letter-spacing: normal; font-size: 12px; } .sdx-container .badge--icon .badge__content--icon .icon-heart, .sdx-container .badge--avatar .badge__content--icon .icon-heart { font-size: 8px; } .sdx-container .badge--icon .badge__content--icon .icon-heart::before, .sdx-container .badge--avatar .badge__content--icon .icon-heart::before { content: ""; } .sdx-container .badge--icon .badge__content--icon .icon-check::before, .sdx-container .badge--avatar .badge__content--icon .icon-check::before { content: ""; } .sdx-container .badge--icon .badge__content--icon .icon-alert::before, .sdx-container .badge--avatar .badge__content--icon .icon-alert::before { content: ""; } .sdx-container .badge--alert .badge__content, .sdx-container .badge--notification .badge__content { background: #ff8b2e; } .sdx-container .badge--alert .badge__content:hover, .sdx-container .badge--notification .badge__content:hover { background: #e86416; } .sdx-container .badge--confirmation .badge__content { background: #25b252; } .sdx-container .badge--confirmation .badge__content:hover { background: #008236; } @-webkit-keyframes badge-message { 0% { transform: scale(0); max-width: 24px; } 30% { transform: scale(1); max-width: 24px; } 75% { max-width: 272px; } } @keyframes badge-message { 0% { transform: scale(0); max-width: 24px; } 30% { transform: scale(1); max-width: 24px; } 75% { max-width: 272px; } } @-webkit-keyframes badge-message-text { 0% { opacity: 0; } 75% { transform: scale(0.95); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } 100% { transform: scale(1); opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @keyframes badge-message-text { 0% { opacity: 0; } 75% { transform: scale(0.95); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } 100% { transform: scale(1); opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @-webkit-keyframes badge-icon { 0% { transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1); } 4% { transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1); } 4.3% { transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1); } 7.91% { transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1); } 8.61% { transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1); } 11.91% { transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1); } 12.91% { transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1); } 15.82% { transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1); } 17.22% { transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1); } 20.42% { transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1); } 24.92% { transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1); } 28.33% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1); } 29.53% { transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1); } 34.03% { transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1); } 39.44% { transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1); } 43.14% { transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1); } 52.15% { transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1); } 61.66% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1); } 70.37% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes badge-icon { 0% { transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 1.4, 0, 1); } 4% { transform: matrix3d(0.83, 0, 0, 0, 0, 0.83, 0, 0, 0, 0, 1, 0, 0, 0.86, 0, 1); } 4.3% { transform: matrix3d(0.841, 0, 0, 0, 0, 0.841, 0, 0, 0, 0, 1, 0, 0, 0.817, 0, 1); } 7.91% { transform: matrix3d(0.967, 0, 0, 0, 0, 0.967, 0, 0, 0, 0, 1, 0, 0, 0.323, 0, 1); } 8.61% { transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.24, 0, 1); } 11.91% { transform: matrix3d(1.057, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, -0.056, 0, 1); } 12.91% { transform: matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, -0.112, 0, 1); } 15.82% { transform: matrix3d(1.083, 0, 0, 0, 0, 1.083, 0, 0, 0, 0, 1, 0, 0, -0.195, 0, 1); } 17.22% { transform: matrix3d(1.08, 0, 0, 0, 0, 1.08, 0, 0, 0, 0, 1, 0, 0, -0.202, 0, 1); } 20.42% { transform: matrix3d(1.059, 0, 0, 0, 0, 1.059, 0, 0, 0, 0, 1, 0, 0, -0.17, 0, 1); } 24.92% { transform: matrix3d(1.018, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -0.091, 0, 1); } 28.33% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.041, 0, 1); } 29.53% { transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -0.028, 0, 1); } 34.03% { transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0.003, 0, 1); } 39.44% { transform: matrix3d(0.987, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, 0.012, 0, 1); } 43.14% { transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0.01, 0, 1); } 52.15% { transform: matrix3d(1.005, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0.002, 0, 1); } 61.66% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.001, 0, 1); } 70.37% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } .sdx-container .card { position: relative; width: 100%; margin-left: auto; margin-right: auto; padding: 30px 24px; background: #fff; color: #333; overflow: hidden; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .card .row { display: flex; flex-wrap: wrap; margin-left: -4px; margin-right: -4px; } .sdx-container .card .col, .sdx-container .card [class*=col-] { position: relative; width: 100%; min-height: 1px; padding-left: 4px; padding-right: 4px; } .sdx-container .card .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .sdx-container .card .col-1 { flex: 0 0 12.5%; max-width: 12.5%; } .sdx-container .card .col-2 { flex: 0 0 25%; max-width: 25%; } .sdx-container .card .col-3 { flex: 0 0 37.5%; max-width: 37.5%; } .sdx-container .card .col-4 { flex: 0 0 50%; max-width: 50%; } .sdx-container .card .col-5 { flex: 0 0 62.5%; max-width: 62.5%; } .sdx-container .card .col-6 { flex: 0 0 75%; max-width: 75%; } .sdx-container .card .col-7 { flex: 0 0 87.5%; max-width: 87.5%; } .sdx-container .card .col-8 { flex: 0 0 100%; max-width: 100%; } .sdx-container .card .pull-0 { right: auto; } .sdx-container .card .pull-1 { right: 12.5%; } .sdx-container .card .pull-2 { right: 25%; } .sdx-container .card .pull-3 { right: 37.5%; } .sdx-container .card .pull-4 { right: 50%; } .sdx-container .card .pull-5 { right: 62.5%; } .sdx-container .card .pull-6 { right: 75%; } .sdx-container .card .pull-7 { right: 87.5%; } .sdx-container .card .pull-8 { right: 100%; } .sdx-container .card .push-0 { left: auto; } .sdx-container .card .push-1 { left: 12.5%; } .sdx-container .card .push-2 { left: 25%; } .sdx-container .card .push-3 { left: 37.5%; } .sdx-container .card .push-4 { left: 50%; } .sdx-container .card .push-5 { left: 62.5%; } .sdx-container .card .push-6 { left: 75%; } .sdx-container .card .push-7 { left: 87.5%; } .sdx-container .card .push-8 { left: 100%; } .sdx-container .card .offset-1 { margin-left: 12.5%; } .sdx-container .card .offset-2 { margin-left: 25%; } .sdx-container .card .offset-3 { margin-left: 37.5%; } .sdx-container .card .offset-4 { margin-left: 50%; } .sdx-container .card .offset-5 { margin-left: 62.5%; } .sdx-container .card .offset-6 { margin-left: 75%; } .sdx-container .card .offset-7 { margin-left: 87.5%; } .sdx-container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #015; } .sdx-container .card .card__header { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 400; } .sdx-container .card .card__footer { padding: 24px; } .sdx-container .card .card__text { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; margin: 0; } .sdx-container .card .link::before { content: ""; display: block; margin-top: 4px; } .sdx-container .card--dark { background: #eef3f6; } .sdx-container .card.card--clickable { cursor: pointer; } .sdx-container .card.card--clickable:hover { background: #eef3f6; } .sdx-container .card.card--clickable:hover.card--dark { background: #dde3e7; } .sdx-container .card--notification { padding: 12px 16px 20px; border-radius: 3px; } .sdx-container .card--notification .card__header::after { content: ""; display: block; clear: both; } .sdx-container .card--notification .card__header h1, .sdx-container .card--notification .card__header h2, .sdx-container .card--notification .card__header span { line-height: 24px; letter-spacing: 0.1px; font-size: 14px; margin-bottom: 4px; } .sdx-container .card--notification .card__header h1 { font-weight: 600; } .sdx-container .card--notification .card__header h2, .sdx-container .card--notification .card__header span { font-weight: 400; color: #666; } .sdx-container .card--image-top, .sdx-container .card--image-bottom { padding: 0; } .sdx-container .card--image-top::before, .sdx-container .card--image-bottom::before { content: none; } .sdx-container .card--image-top .card__image, .sdx-container .card--image-bottom .card__image { position: relative; width: 100%; height: 168px; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; } .sdx-container .card--image-top .card__image::before, .sdx-container .card--image-bottom .card__image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); opacity: 0; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .card--image-top .card__body, .sdx-container .card--image-bottom .card__body { position: relative; padding: 12px 16px 20px; } .sdx-container .card--image-top .card__body::before, .sdx-container .card--image-bottom .card__body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #015; } .sdx-container .card--image-top .card__image::before { border-radius: 3px 3px 0 0; } .sdx-container .card--image-top.card--clickable:hover .card__image::before { opacity: 1; } .sdx-container .card--image-bottom .card__image::before { border-radius: 0 0 3px 3px; } .sdx-container .card--image-bottom.card--clickable:hover .card__image::before { opacity: 1; } .sdx-container .card--promo .card__image { display: block; max-width: 100%; margin: 0 auto; opacity: 1; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .card--promo.card--clickable:hover .card__image { opacity: 0.95; } .sdx-container .card--upload-photos { padding-top: 23px; padding-bottom: 24px; border-radius: 0; } .sdx-container .card--upload-photos .card__header { padding-bottom: 25px; } .sdx-container .card--upload-photos .card__body { display: flex; overflow: hidden; } .sdx-container .card--upload-photos .card__image:not(:last-child) { margin-right: 20px; } .sdx-container .card--upload-photos .card__image img { display: block; width: auto; height: 103px; } .sdx-container .card--upload-files { padding: 0; border-radius: 0; } .sdx-container .card--upload-files .card__header { padding: 25px 24px 21px; border-bottom: 1px solid #dde3e7; } .sdx-container .card--upload-files .card__item { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; padding: 21px 24px 22px; align-items: center; } .sdx-container .card--upload-files .card__item:not(:last-child) { border-bottom: 1px solid #dde3e7; } .sdx-container .card--upload-files .card__item .card__item-icon { margin-right: 6px; float: left; font-size: 30px; } .sdx-container .card--upload-files .card__item .card__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdx-container .card--document { padding: 0; border-radius: 0; } .sdx-container .card--document a { margin: 0; color: inherit; border-bottom: inherit; } .sdx-container .card--document a .card__item-detail { color: #1781e3; } .sdx-container .card--document a:hover .card__item-detail { color: #0851da; } .sdx-container .card--document .card__header { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; font-weight: 300; padding: 22px 24px 17px; border-bottom: 1px solid #dde3e7; } .sdx-container .card--document .card__footer { border-top: 1px solid #dde3e7; text-align: center; } .sdx-container .card--document .card__item { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: block; padding: 15px 24px 16px; align-items: center; } .sdx-container .card--document .card__item:not(:last-child) { border-bottom: 1px solid #dde3e7; } .sdx-container .card--document .card__item .card__item-icon { margin-top: 1px; margin-right: 6px; float: left; font-size: 30px; } .sdx-container .card--document .card__item .card__item-detail { font-size: 21px; } .sdx-container .card--document .card__item .card__item-detail .icon { font-weight: 600; } .sdx-container .card--document .card__item .card__item-wrapper { overflow: hidden; } .sdx-container .card--document .card__item .card__item-wrapper p:hover { text-decoration: underline; color: #0851da; } .sdx-container .card--document .card__item .card__item--no-truncate h1, .sdx-container .card--document .card__item .card__item--no-truncate p { white-space: normal; } .sdx-container .card--document .card__item h1, .sdx-container .card--document .card__item p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .sdx-container .card--document .card__item h1 { font-weight: 600; line-height: 22px; letter-spacing: 0; font-size: 16px; } .sdx-container .card--document .card__item p { line-height: normal; letter-spacing: 0.1px; font-size: 14px; color: #666; } .sdx-container .card--document .card__travel-station h1 { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; font-weight: 300; color: #666; } .sdx-container .card--document .card__travel-station p { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 300; color: #666; } .sdx-container .card--document .card__travel-station p strong { font-weight: 600; color: #333; } .sdx-container .card--document .card__travel-time h1 { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; font-weight: 300; color: #333; } .sdx-container .card--document .card__travel-time p { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 400; color: #666; } .sdx-container .card--document .card__travel-direction h1 { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 600; color: #333; } .sdx-container .card--document .card__travel-direction p { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 400; color: #666; } .sdx-container .card--news { padding: 0; } .sdx-container .card--news::before { content: none; } .sdx-container .card--news .card__image { position: relative; width: 100%; height: 180px; background-size: cover; background-repeat: no-repeat; background-position: center top; overflow: hidden; } .sdx-container .card--news .card__header::after { content: ""; display: block; clear: both; } .sdx-container .card--news .card__header h2, .sdx-container .card--news .card__header p, .sdx-container .card--news .card__header a { line-height: 24px; letter-spacing: 0; font-size: 16px; } .sdx-container .card--news .card__body { position: relative; padding: 7px 16px 12px; } .sdx-container .card--news .card__body .card__title { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; font-weight: 400; margin-bottom: 5px; } .sdx-container .card--news .card__body .card__text { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 400; } .sdx-container .card--news .card__tray { width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: flex-start; } .sdx-container .card--news .tray-item { position: relative; margin-right: 30px; } .sdx-container .card--news .tray-item .icon { color: #1781e3; font-size: 24px; } .sdx-container .card--news .tray-item .count { font-weight: 400; position: absolute; top: -4px; font-size: 12px; color: #333; } .sdx-container .card--dark.card--news { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #015; color: #fff; } .sdx-container .card--dark.card--news .tray-item .count { color: #1781e3; } .sdx-container .card--rounded { border-radius: 3px; } .sdx-container .card--not-rounded, .sdx-container .card--not-rounded .card__image::before { border-radius: 0; } .sdx-container .card--border { border: 0 solid #d6d6d6; border-width: 0 1px 1px 1px; } .sdx-container .card--navigation .card__header .icon { margin-right: 16px; } .sdx-container .card--navigation .card__item:hover { text-decoration: underline; -webkit-text-decoration-color: #0851da; text-decoration-color: #0851da; } .sdx-container .card--navigation .card__item h1 { font-size: 16px; font-weight: normal; } .sdx-container .card--navigation .card__text { padding: 15px 24px; } .sdx-container .card--navigation .card__text a { color: #1781e3; } .sdx-container .card--navigation .card__text a:hover { color: #0851da; } .sdx-container .card--navigation .card__text .link::before { content: normal; } .sdx-container .card--icon .card__body { padding-bottom: 0; padding-left: 50px; padding-right: 0; padding-top: 3px; } .sdx-container .card--compact .card__body { padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 3px; } .sdx-container .card--compact .card__body > h1, .sdx-container .card--compact .card__body h2, .sdx-container .card--compact .card__body h3, .sdx-container .card--compact .card__body h4, .sdx-container .card--compact .card__body h5, .sdx-container .card--compact .card__body h6 { padding-left: 50px; } .sdx-container .card__item-icon { float: left; } .sdx-container .card--message-action::before { background: #1781e3; } .sdx-container .card--message-action .card__item-icon { color: #1781e3; } .sdx-container .card--message-info::before { background: #0eaba9; } .sdx-container .card--message-info .card__item-icon { color: #0eaba9; } .sdx-container .card--message-success::before { background: #25b252; } .sdx-container .card--message-success .card__item-icon { color: #25b252; } .sdx-container .card--message-important::before { background: #ff8b2e; } .sdx-container .card--message-important .card__item-icon { color: #ff8b2e; } .sdx-container .card--message-alert::before { background: #d12; } .sdx-container .card--message-alert .card__item-icon { color: #d12; } .sdx-container .card--navy::before { background: #015; } .sdx-container .card--blue::before { background: #1781e3; } .sdx-container .card--purple::before { background: #a63297; } .sdx-container .card--turquoise::before, .sdx-container .card--apple::before, .sdx-container .card--petrol::before { background: #0eaba9; } .sdx-container .card--iris::before { background: #5944c6; } .sdx-container .card--pink::before { background: #e61e64; } .sdx-container .card--orchid::before { background: #a63297; } .sdx-container .card--green::before { background: #25b252; } .sdx-container .card--orange::before { background: #ff8b2e; } .sdx-container .card--red::before { background: #d12; } .sdx-container .card--no-color::before { background: #d6d6d6; height: 1px; } .sdx-container .card .badge.badge--icon { margin: 0 0 16px 16px; } .sdx-container [class^="card card--message-"] .card__body h1, .sdx-container [class^="card card--message-"] .card__body h2, .sdx-container [class^="card card--message-"] .card__body h3, .sdx-container [class^="card card--message-"] .card__body h4, .sdx-container [class^="card card--message-"] .card__body h5, .sdx-container [class^="card card--message-"] .card__body h6 { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; font-weight: 300; margin-bottom: 24px; } .sdx-container .loader-bar { position: relative; width: 100%; } .sdx-container .loader-bar > .detail { line-height: 24px; letter-spacing: 0; font-size: 16px; display: flex; margin-bottom: 8px; justify-content: space-between; } .sdx-container .loader-bar > .detail .name { text-align: left; } .sdx-container .loader-bar > .detail .detail-right .progress { display: inline-block; text-align: right; } .sdx-container .loader-bar > .detail .detail-right .file-size { display: none; } .sdx-container .loader-bar > .detail .detail-right .file-size::before { content: " "; } @media (min-width: 480px) { .sdx-container .loader-bar > .detail .detail-right .file-size { display: inline; float: right; } } .sdx-container .loader-bar--progress { border-radius: 5px; position: relative; background-color: #d6d6d6; width: 100%; height: 10px; overflow: hidden; } .sdx-container .loader-bar--progress > .indicator { position: absolute; top: 0; left: 0; transition: width 90ms linear; z-index: 30; background-color: #25b252; width: 0%; height: 10px; } .sdx-container .loader-bar--progress > .indicator::after { position: absolute; top: 0; right: -5px; background: inherit; width: 10px; height: 10px; content: ""; } .sdx-container .loader-bar--progress > .indicator--busy { left: 0; -webkit-animation: busy 2.1s linear infinite; animation: busy 2.1s linear infinite; width: 50%; will-change: left, right; } .sdx-container .loader-bar--progress > .indicator--busy::before { position: absolute; top: 0; left: -5px; background: inherit; width: 10px; height: 10px; content: ""; } .sdx-container .bg--dark .loader-bar--progress { background-color: #fff; } @-webkit-keyframes busy { 0% { left: -50%; } 100% { left: 100%; } } @keyframes busy { 0% { left: -50%; } 100% { left: 100%; } } .sdx-container .status:before { color: #1781e3; content: ""; display: inline-block; font-family: "sdx-icons"; } .sdx-container .modal { display: none; position: fixed; top: 0; left: 0; z-index: 900001; width: 100%; height: 100%; outline: none; pointer-events: none; } .sdx-container .modal--open { display: flex; } .sdx-container .modal--open .modal__content { transform: scale(1); visibility: visible; opacity: 1; } .sdx-container .modal > .container { display: flex; } .sdx-container .modal__content { position: relative; margin: auto; max-height: calc(100vh - 80px); align-self: center; padding: 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); background: #fff; overflow-x: hidden; overflow-y: auto; pointer-events: auto; visibility: hidden; opacity: 0; transform: scale(0.92); transition: transform 300ms 50ms, opacity 300ms 50ms, visibility 300ms 50ms; } .sdx-container .modal__close { position: absolute; top: 16px; right: 13px; width: 32px; height: 32px; cursor: pointer; color: #015; } @media (min-width: 1024px) { .sdx-container .modal__close { top: 24px; right: 26px; } } .sdx-container .modal__close .icon { line-height: 32px; font-size: 24px; font-weight: 600; } @media (min-width: 1024px) { .sdx-container .modal__close .icon { font-size: 30px; font-weight: 600; } } .sdx-container .modal__header { border-bottom: 1px solid #d6d6d6; padding: 20px 64px 0 24px; width: 100%; height: 64px; } @media (min-width: 1024px) { .sdx-container .modal__header { padding: 24px 64px 0 32px; height: 80px; } } .sdx-container .modal__header h1, .sdx-container .modal__header h2, .sdx-container .modal__header h3, .sdx-container .modal__header h4, .sdx-container .modal__header h5, .sdx-container .modal__header h6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0; } .sdx-container .modal__header h1 { font-weight: 600; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; } @media (min-width: 1024px) { .sdx-container .modal__header h1 { font-weight: 300; line-height: 32px; letter-spacing: -0.35px; font-size: 24px; } } .sdx-container .modal__body { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: calc(100vh - 80px - 80px); padding: 21px 24px 24px; } @media (min-width: 1024px) { .sdx-container .modal__body { padding: 29px 32px 32px; } } .sdx-container .modal__body .button-group { margin-top: 21px; } @media (min-width: 1024px) { .sdx-container .modal__body .button-group { margin-top: 34px; } } @media (max-width: 479px) { .sdx-container .modal > .container { width: calc(102% - (2 * 24px)); } } .sdx-container .backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; transition: opacity 600ms, visibility 600ms; visibility: hidden; opacity: 0; z-index: 900000; background: rgba(0, 0, 0, 0.45); width: 100%; height: 100%; } .sdx-container .backdrop--open { visibility: visible; opacity: 1; pointer-events: auto; } .sdx-container .flyout { display: none; position: absolute; top: 20px; opacity: 0; transform: translateY(-20px); z-index: 60000; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); } .sdx-container .flyout.is-open { display: block; opacity: 1; transform: translateY(0); } .sdx-container .flyout--left { left: 0; } .sdx-container .flyout--left .flyout__indicator::before { left: 24px; } .sdx-container .flyout--right { right: 0; } .sdx-container .flyout--top { top: auto; bottom: 100%; transform: translateY(20px); } .sdx-container .flyout--top .flyout__indicator::before { top: auto; bottom: -7px; box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15); } .sdx-container .flyout__indicator::before { position: absolute; top: -7px; right: 24px; width: 14px; height: 14px; background: inherit; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.15); transform: rotate(45deg); z-index: -1; content: ""; } .sdx-container .flyout__content { background: inherit; } .sdx-container .flyout__title { margin-top: -4px; text-align: center; } .sdx-container .flyout__text { margin-bottom: 16px; text-align: center; } .sdx-container .flyout--list { width: 254px; padding: 0; } .sdx-container .flyout--list li:not(:last-child) { border-bottom: 1px solid #e4e9ec; } .sdx-container .flyout--list .list-link { display: block; width: 100%; padding: 12px 24px; border: 0; background: #fff; } .sdx-container .flyout--list .list-link:hover, .sdx-container .flyout--list .list-link:focus { color: #fff; background: #1781e3; } .sdx-container .flyout--info { width: 369px; padding: 24px; } .sdx-container .flyout--info hr, .sdx-container .flyout--info .divider { margin: 16px 0; } .sdx-container .context { position: fixed; bottom: 0; width: 100%; z-index: 60000; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); } .sdx-container .context .context-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; width: 100%; height: 73px; padding: 0 24px; flex: 1; color: #1781e3; border: 0; background: #fff; line-height: 73px; vertical-align: middle; text-align: center; } .sdx-container .context__primary { display: flex; position: relative; width: 100%; height: 73px; z-index: 60010; } .sdx-container .context__primary .context-link { color: #fff; background: #1781e3; } .sdx-container .context__primary .context-link:not(:last-child) { border-right: 1px solid #e4e9ec; } .sdx-container .context__primary .context-link--more { width: 73px; padding: 0; flex: 0 0 auto; font-size: 40px; } .sdx-container .context__primary .context-link--more.is-open { color: #1781e3; background: #fff; } .sdx-container .context__secondary { display: none; position: absolute; bottom: 73px; width: 100%; padding: 0; opacity: 0; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); z-index: 60005; } .sdx-container .context__secondary.is-open { display: block; opacity: 1; } .sdx-container .context__secondary li { border-bottom: 1px solid #e4e9ec; } .sdx-container .context--flyout { position: initial; display: flex; justify-content: space-between; padding: 24px; box-shadow: none; } .sdx-container .context--flyout .flyout-icon { color: #015; } .sdx-container .context--flyout ~ .flyout { top: 67px; right: 20px; max-width: 280px; width: 100%; } .sdx-container .context--flyout ~ .flyout::before { right: 13px; } .sdx-container .notification-header { position: relative; overflow: hidden; height: 0; transition: height 400ms cubic-bezier(0.35, 0.035, 0.275, 0.9); } .sdx-container .notification-header .notification__content { display: flex; position: absolute; bottom: 0; width: 100%; height: 74px; padding: 21px 24px; transition: background 400ms cubic-bezier(0.35, 0.035, 0.275, 0.9); background: #1781e3; align-items: center; justify-content: space-between; cursor: pointer; z-index: 1; outline: none; } .sdx-container .notification-header .notification__content:hover { background: #0851da; } @media (min-width: 768px) { .sdx-container .notification-header .notification__content { padding: 21px 38px; } } .sdx-container .notification-header .notification__content .notification__body { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; opacity: 0; -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); } .sdx-container .notification-header .notification__content .notification__body strong { font-weight: 600; font-size: 16px; } .sdx-container .notification-header .notification__content button { position: relative; right: -5px; cursor: pointer; width: 32px; height: 32px; opacity: 0; -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); } .sdx-container .notification-header .notification__content button .icon { line-height: 32px; color: #fff; font-size: 34px; } .sdx-container .notification--open { height: 74px; } .sdx-container .notification--alert .notification__content { background: #ff8b2e; } .sdx-container .notification--alert .notification__content:hover { background: #e86416; } .sdx-container .notification--confirmation .notification__content { background: #25b252; } .sdx-container .notification--confirmation .notification__content:hover { background: #008236; } @-webkit-keyframes notification-show { 0% { height: 0; } 100% { height: 74px; } } @keyframes notification-show { 0% { height: 0; } 100% { height: 74px; } } .sdx-container .modal--notification .modal__content { background: #1781e3; width: 100%; height: 100%; } @media (min-width: 768px) { .sdx-container .modal--notification .modal__content { max-width: 460px; height: auto; } } .sdx-container .modal--notification .modal__content .modal__close { top: 22px; right: 22px; color: #fff; } .sdx-container .modal--notification .modal__content .modal__body { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 30px; } .sdx-container .modal--notification .modal__content .modal__body .notification-message { font-weight: 400; line-height: 32px; letter-spacing: -0.35px; font-size: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; width: 100%; color: #fff; text-align: center; } .sdx-container .modal--notification .modal__content .modal__body .notification-message .icon { font-size: 64px; margin-bottom: 20px; } .sdx-container .modal--notification .modal__content .modal__body .button { border: 1px solid #fff; background-color: transparent; color: #fff; margin-top: 30px; } .sdx-container .modal--notification .modal__content .modal__body .button:hover, .sdx-container .modal--notification .modal__content .modal__body .button:focus, .sdx-container .modal--notification .modal__content .modal__body .button:active { border-color: rgba(255, 255, 255, 0.6); } @media (max-width: 479px) { .sdx-container .modal--notification > .container { height: calc(100% - 48px); } } .sdx-container .modal--notification--alert .modal__content { background: #ff8b2e; } .sdx-container .modal--notification--confirmation .modal__content { background: #25b252; } .sdx-container .tooltip { display: inline-block; position: relative; z-index: 1; outline: none; cursor: pointer; } .sdx-container .tooltip::before, .sdx-container .tooltip::after { position: absolute; transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none; transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0ms; } .sdx-container .tooltip:hover::before, .sdx-container .tooltip:hover::after, .sdx-container .tooltip:focus::before, .sdx-container .tooltip:focus::after { visibility: visible; opacity: 1; transition-delay: 100ms; } .sdx-container .tooltip::before { position: absolute; background: 0 0; border: 8px solid transparent; z-index: 1000001; content: ""; } .sdx-container .tooltip::after { font-family: "TheSans", sans-serif; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 200px; height: 32px; padding: 8px 15px; color: #fff; border-radius: 8px; background: #0851da; font-size: 16px; line-height: 16px; content: attr(aria-label); } .sdx-container .tooltip::before, .sdx-container .tooltip::after, .sdx-container .tooltip--top::before, .sdx-container .tooltip--top::after { left: 50%; bottom: calc(100% + 2px); margin: 0; } .sdx-container .tooltip::before, .sdx-container .tooltip--top::before { left: calc(50% - 8px); margin-bottom: -15px; border-color: transparent; border-top-color: #0851da; } .sdx-container .tooltip::after, .sdx-container .tooltip--top::after { transform: translateX(-50%); } .sdx-container .tooltip:hover::before, .sdx-container .tooltip:focus::before, .sdx-container .tooltip--top:hover::before, .sdx-container .tooltip--top:focus::before { transform: translateY(-8px); } .sdx-container .tooltip:hover::after, .sdx-container .tooltip:focus::after, .sdx-container .tooltip--top:hover::after, .sdx-container .tooltip--top:focus::after { transform: translateX(-50%) translateY(-8px); } .sdx-container .tooltip--bottom::before, .sdx-container .tooltip--bottom::after { left: 50%; top: calc(100% + 2px); bottom: auto; margin: 0; } .sdx-container .tooltip--bottom::before { left: calc(50% - 8px); margin-top: -15px; border-color: transparent; border-bottom-color: #0851da; } .sdx-container .tooltip--bottom::after { transform: translateX(-50%); } .sdx-container .tooltip--bottom:hover::before, .sdx-container .tooltip--bottom:focus::before { transform: translateY(8px); } .sdx-container .tooltip--bottom:hover::after, .sdx-container .tooltip--bottom:focus::after { transform: translateX(-50%) translateY(8px); } .sdx-container .tooltip--left::before, .sdx-container .tooltip--left::after { left: auto; right: calc(100% + 2px); bottom: 50%; margin: 0; } .sdx-container .tooltip--left::before { margin-right: -15px; margin-bottom: -8px; border-color: transparent; border-left-color: #0851da; } .sdx-container .tooltip--left::after { transform: translateX(0) translateY(0); margin-bottom: -16px; } .sdx-container .tooltip--left:hover::before, .sdx-container .tooltip--left:focus::before { transform: translateX(-8px); } .sdx-container .tooltip--left:hover::after, .sdx-container .tooltip--left:focus::after { transform: translateX(-8px) translateY(0); } .sdx-container .tooltip--right::before, .sdx-container .tooltip--right::after { left: calc(100% + 2px); bottom: 50%; margin: 0; } .sdx-container .tooltip--right::before { margin-left: -15px; margin-bottom: -8px; border-color: transparent; border-right-color: #0851da; } .sdx-container .tooltip--right::after { transform: translateX(0) translateY(0); margin-bottom: -16px; } .sdx-container .tooltip--right:hover::before, .sdx-container .tooltip--right:focus::before { transform: translateX(8px); } .sdx-container .tooltip--right:hover::after, .sdx-container .tooltip--right:focus::after { transform: translateX(8px) translateY(0); } .sdx-container .tooltip--multiline::after { height: auto; text-align: center; white-space: pre-wrap; word-break: break-all; } .sdx-container .tooltip:not([aria-label])::before, .sdx-container .tooltip:not([aria-label])::after, .sdx-container .tooltip[aria-label=""]::before, .sdx-container .tooltip[aria-label=""]::after { display: none !important; } .sdx-container .toolbar { font-family: "TheSans", sans-serif; font-weight: 400; } .sdx-container .toolbar__item { display: inline-block; padding: 10px; text-align: center; color: #1781e3; opacity: 0; transform: translate(0, 10px); transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.87, -0.41, 0.19, 1.44); } .sdx-container .toolbar__item:hover, .sdx-container .toolbar__item:focus { color: #0851da; } .sdx-container .toolbar__item:hover .toolbar__label, .sdx-container .toolbar__item:focus .toolbar__label { color: #0851da; } .sdx-container .toolbar__item .toolbar__label { display: block; font-size: 14px; color: #333; } .sdx-container .toolbar__item .icon { font-size: 30px; } .sdx-container .toolbar__item.item--show { opacity: 1; transform: translate(0, 0); } .sdx-container .toolbar--vertical .toolbar__item { display: block; opacity: 0; transform: translate(10px, 0); text-align: left; align-items: center; } .sdx-container .toolbar--vertical .toolbar__item .toolbar__label { display: inline-block; margin-left: 12px; line-height: 1; } .sdx-container .toolbar--vertical .toolbar__item .icon { vertical-align: middle; } .sdx-container .toolbar--vertical .toolbar__item.item--show { opacity: 1; transform: translate(0, 0); } .sdx-container .toolbar .item--disabled, .sdx-container .toolbar.toolbar--disabled .toolbar__item { color: #d6d6d6; } .sdx-container .toolbar .item--disabled.disabled, .sdx-container .toolbar .item--disabled:disabled, .sdx-container .toolbar.toolbar--disabled .disabled.toolbar__item, .sdx-container .toolbar.toolbar--disabled .toolbar__item:disabled { cursor: not-allowed; } .sdx-container .toolbar .item--disabled.disabled:active, .sdx-container .toolbar .item--disabled:disabled:active, .sdx-container .toolbar.toolbar--disabled .disabled.toolbar__item:active, .sdx-container .toolbar.toolbar--disabled .toolbar__item:disabled:active { pointer-events: none; transform: none; } .sdx-container .toolbar .item--disabled .toolbar__label, .sdx-container .toolbar.toolbar--disabled .toolbar__item .toolbar__label { color: #d6d6d6; } .sdx-container .toolbar .item--disabled .toolbar__label:hover, .sdx-container .toolbar.toolbar--disabled .toolbar__item .toolbar__label:hover { text-decoration: none; } .sdx-container .bg--dark .toolbar__item:hover .toolbar__label, .sdx-container .bg--dark .toolbar__item:focus .toolbar__label { color: #fff; text-decoration: underline; } .sdx-container .bg--dark .toolbar__item .toolbar__label { color: #fff; } .sdx-container .bg--dark .toolbar .item--disabled, .sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item { opacity: 0.4; color: #fff; } .sdx-container .bg--dark .toolbar .item--disabled.disabled, .sdx-container .bg--dark .toolbar .item--disabled:disabled, .sdx-container .bg--dark .toolbar.toolbar--disabled .disabled.toolbar__item, .sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item:disabled { cursor: not-allowed; } .sdx-container .bg--dark .toolbar .item--disabled.disabled:active, .sdx-container .bg--dark .toolbar .item--disabled:disabled:active, .sdx-container .bg--dark .toolbar.toolbar--disabled .disabled.toolbar__item:active, .sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item:disabled:active { pointer-events: none; transform: none; } .sdx-container .bg--dark .toolbar .item--disabled .toolbar__label, .sdx-container .bg--dark .toolbar.toolbar--disabled .toolbar__item .toolbar__label { color: #fff; text-decoration: none; } .sdx-container .progress-light { position: relative; margin: 24px 0; width: 100%; } @media (min-width: 768px) { .sdx-container .progress-light { margin: 32px 0; } } .sdx-container .progress-light .arrow { position: absolute; top: 16px; width: 24px; height: 24px; } @media (min-width: 768px) { .sdx-container .progress-light .arrow { top: 22px; } } .sdx-container .progress-light .arrow .icon { line-height: 24px; font-size: 17px; font-weight: bold; pointer-events: none; color: #1781e3; outline: none; } .sdx-container .progress-light .arrow:hover .icon { color: #0851da; } .sdx-container .progress-light .arrow--disabled .icon { color: #cfd5d9; } .sdx-container .progress-light .arrow--disabled:hover .icon { color: #b1b9be; } .sdx-container .progress-light .arrow--left { left: -8px; } .sdx-container .progress-light .arrow--right { right: -8px; } .sdx-container .progress-light__detail { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 400; display: block; color: #666; margin: 0 18px 7px; line-height: 1; } @media (min-width: 768px) { .sdx-container .progress-light__detail { margin: 0 18px 13px; } } .sdx-container .progress-light__bar { position: relative; background-color: #d6d6d6; height: 9px; margin: 0 18px 10px; overflow: hidden; border-radius: 9px; } @media (min-width: 768px) { .sdx-container .progress-light__bar { margin: 0 18px; } } .sdx-container .progress-light__bar .bar__progress { background-color: #1781e3; height: 9px; width: 0; } .sdx-container .progress-light__bar .bar__progress--complete { background-color: #25b252; } .sdx-container .progress-light__bar .bar__tick { position: absolute; } .sdx-container .progress-light__bar .bar__tick::before { position: absolute; top: 0; background: #000; opacity: 0.5; width: 1px; height: 9px; content: ""; } .sdx-container .bg--dark .progress-light__detail { color: #fff; } .sdx-container .bg--dark .progress-light__bar { background-color: #fff; } .sdx-container .progress-full { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; width: 100%; margin: 24px 0; text-align: center; overflow: hidden; } @media (min-width: 768px) { .sdx-container .progress-full { margin: 32px 0; } } .sdx-container .progress-full__bar { outline: none; } .sdx-container .progress-full__bar .indicator { font-weight: 400; width: 24px; height: 24px; border: 1px solid #1781e3; border-radius: 100%; color: #1781e3; background-color: transparent; line-height: 1; letter-spacing: normal; font-size: 14px; text-align: center; transition: all 150ms ease-in-out; cursor: pointer; } .sdx-container .progress-full__bar .indicator + .indicator { margin-left: 16px; } @media (min-width: 768px) { .sdx-container .progress-full__bar .indicator + .indicator { margin-left: 24px; } } .sdx-container .progress-full__bar .indicator:hover { color: #0851da; border-color: #0851da; } .sdx-container .progress-full__bar .indicator--completed { color: #fff; border-color: #25b252; background-color: #25b252; } .sdx-container .progress-full__bar .indicator--completed:hover { color: #fff; border-color: #008236; background-color: #008236; } .sdx-container .progress-full__bar .indicator--current { color: #fff; border-color: #1781e3; background-color: #1781e3; } .sdx-container .progress-full__bar .indicator--current:hover { color: #fff; border-color: #0851da; background-color: #0851da; } .sdx-container .progress-full__sections { font-weight: 400; position: relative; width: 100%; height: 18px; margin-top: 11px; line-height: 1; letter-spacing: -0.35px; font-size: 16px; color: #666; } .sdx-container .progress-full__sections span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; } .sdx-container .progress-full__sections .section--active { visibility: visible; } .sdx-container .bg--dark .progress-full__bar .indicator { color: #fff; border-color: #fff; } .sdx-container .bg--dark .progress-full__bar .indicator:hover { color: #1781e3; border-color: #1781e3; } .sdx-container .bg--dark .progress-full__bar .indicator--completed { color: #fff; border-color: #25b252; background-color: #25b252; } .sdx-container .bg--dark .progress-full__bar .indicator--completed:hover { color: #fff; border-color: #008236; background-color: #008236; } .sdx-container .bg--dark .progress-full__bar .indicator--current { color: #fff; border-color: #1781e3; background-color: #1781e3; } .sdx-container .bg--dark .progress-full__bar .indicator--current:hover { color: #fff; border-color: #0851da; background-color: #0851da; } .sdx-container .bg--dark .progress-full__sections { color: #fff; } .sdx-container .progress-full { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; width: 100%; margin: 24px 0; text-align: center; overflow: hidden; } @media (min-width: 768px) { .sdx-container .progress-full { margin: 32px 0; } } .sdx-container .progress-full__bar { outline: none; } .sdx-container .progress-full__bar .indicator { font-weight: 400; width: 24px; height: 24px; border: 1px solid #1781e3; border-radius: 100%; color: #1781e3; background-color: transparent; line-height: 1; letter-spacing: normal; font-size: 14px; text-align: center; transition: all 150ms ease-in-out; cursor: pointer; } .sdx-container .progress-full__bar .indicator + .indicator { margin-left: 16px; } @media (min-width: 768px) { .sdx-container .progress-full__bar .indicator + .indicator { margin-left: 24px; } } .sdx-container .progress-full__bar .indicator:hover { color: #0851da; border-color: #0851da; } .sdx-container .progress-full__bar .indicator--completed { color: #fff; border-color: #25b252; background-color: #25b252; } .sdx-container .progress-full__bar .indicator--completed:hover { color: #fff; border-color: #008236; background-color: #008236; } .sdx-container .progress-full__bar .indicator--current { color: #fff; border-color: #1781e3; background-color: #1781e3; } .sdx-container .progress-full__bar .indicator--current:hover { color: #fff; border-color: #0851da; background-color: #0851da; } .sdx-container .progress-full__sections { font-weight: 400; position: relative; width: 100%; height: 18px; margin-top: 11px; line-height: 1; letter-spacing: -0.35px; font-size: 16px; color: #666; } .sdx-container .progress-full__sections span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; } .sdx-container .progress-full__sections .section--active { visibility: visible; } .sdx-container .bg--dark .progress-full__bar .indicator { color: #fff; border-color: #fff; } .sdx-container .bg--dark .progress-full__bar .indicator:hover { color: #1781e3; border-color: #1781e3; } .sdx-container .bg--dark .progress-full__bar .indicator--completed { color: #fff; border-color: #25b252; background-color: #25b252; } .sdx-container .bg--dark .progress-full__bar .indicator--completed:hover { color: #fff; border-color: #008236; background-color: #008236; } .sdx-container .bg--dark .progress-full__bar .indicator--current { color: #fff; border-color: #1781e3; background-color: #1781e3; } .sdx-container .bg--dark .progress-full__bar .indicator--current:hover { color: #fff; border-color: #0851da; background-color: #0851da; } .sdx-container .bg--dark .progress-full__sections { color: #fff; } .sdx-container .ribbon, .sdx-container .ribbon-badge { font-size: 16px; position: relative; width: 100%; height: 0; z-index: 10; } .sdx-container .ribbon .ribbon__wrap { width: 112px; height: 112px; position: absolute; overflow: hidden; top: -5px; right: -5px; } .sdx-container .ribbon.ribbon--left .ribbon__wrap { right: auto; left: -5px; } .sdx-container .ribbon.ribbon--left .ribbon__content { transform: rotate(-45deg); top: auto; bottom: 0; } .sdx-container .ribbon.ribbon--small { font-size: 14px; } .sdx-container .ribbon.ribbon--small .ribbon__wrap { width: 96px; height: 96px; } .sdx-container .ribbon.ribbon--large { font-size: 18px; } .sdx-container .ribbon.ribbon--large .ribbon__wrap { width: 128px; height: 128px; } .sdx-container .ribbon .ribbon__content { color: #fff; background-color: #a63297; text-align: center; box-shadow: 0 -1px 3px #333; transform: rotate(45deg); transform-origin: bottom left; position: absolute; top: -24px; /* 24px lineheight */ width: calc(100% * 1.414); /* 100% * sqrt(2) - pythagoras */ } .sdx-container .ribbon .ribbon__content::before, .sdx-container .ribbon .ribbon__content::after { content: ""; position: absolute; bottom: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #7f2879; } .sdx-container .ribbon .ribbon__content::before { left: 0; } .sdx-container .ribbon .ribbon__content::after { right: 0; } .sdx-container .ribbon-badge .ribbon__content { position: absolute; display: inline-block; right: -8px; top: 6px; min-width: 70px; padding: 6px 8px 6px; background-color: #0eaba9; color: #fff; } .sdx-container .ribbon-badge .ribbon__content::after { content: ""; position: absolute; right: 0; bottom: -8px; border-top: 8px solid #0c847e; border-right: 8px solid transparent; } .sdx-container .ribbon-badge.ribbon--left .ribbon__content { right: auto; left: -8px; } .sdx-container .ribbon-badge.ribbon--left .ribbon__content::after { right: auto; left: 0; border-right: 0; border-left: 8px solid transparent; } .sdx-container .ribbon-badge.ribbon--small { font-size: 14px; } .sdx-container .ribbon-badge.ribbon--small .ribbon__content { padding: 4px 8px 4px; } .sdx-container .ribbon-badge.ribbon--large { font-size: 18px; } .sdx-container .ribbon-badge.ribbon--large .ribbon__content { padding: 8px 8px 8px; } .sdx-container .table-generic { display: block; } .sdx-container .table-generic .table__title { margin-bottom: 16px; border-bottom: 1px solid #adadad; } .sdx-container .table-generic .table__wrapper > .row { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; } .sdx-container .table-generic .table__wrapper > .row > [class*=col-] { padding: 0; flex: 1; } .sdx-container .table-generic .table__wrapper .table-items { display: flex; justify-content: space-around; height: 100%; } .sdx-container .table-generic .table__wrapper .table-item { display: inline-block; margin: 0 12px; } .sdx-container .table-generic .table__wrapper .table-image { width: 80px; height: auto; } .sdx-container .table-generic .highlight { background: #f8fafb; } .sdx-container .table-generic .border { margin: 16px; padding: 16px; border: 1px solid #adadad; } .sdx-container .table-generic .border-horizontal { margin: 16px 0; border-bottom: 1px solid #adadad; } .sdx-container .table-generic .border-vertical { margin: 0 16px; border-right: 1px solid #adadad; } .sdx-container .table-display { display: block; } .sdx-container .table-display::after { content: ""; display: block; clear: both; } .sdx-container .table-display .table__wrapper { margin-bottom: 16px; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; } .sdx-container .table-display .table__wrapper > .row { margin: 0; padding: 10px 0; } .sdx-container .table-display .table__wrapper > .row:not(:last-child) { border-bottom: 1px solid #adadad; } .sdx-container .table-display .table__wrapper > .row > [class^=col-] { padding: 6px 16px 0; } .sdx-container .table-display .table__wrapper .checkbox + .checkbox { margin-top: 8px; } .sdx-container .table-display .table__wrapper .radio + .radio { margin-top: 8px; } .sdx-container .table-display .button { margin: 0 16px; } .sdx-container .table { display: table; width: 100%; } .sdx-container .table .table__wrapper { display: table; width: 100%; } .sdx-container .table table { display: table; width: 100%; color: #333; border-collapse: collapse; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; } .sdx-container .table table:not(:last-child) { margin-bottom: 16px; } .sdx-container .table th, .sdx-container .table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; padding-right: 8px; text-align: left; } .sdx-container .table th:first-child, .sdx-container .table td:first-child { padding-left: 16px; } .sdx-container .table th:last-child, .sdx-container .table td:last-child { padding-right: 16px; } .sdx-container .table thead { line-height: 24px; letter-spacing: -0.1px; font-size: 16px; font-weight: 600; } .sdx-container .table thead tr { border-bottom: 1px solid #adadad; text-align: left; } .sdx-container .table thead th { padding-top: 25px; padding-bottom: 23px; } .sdx-container .table thead th[data-type] { cursor: pointer; } .sdx-container .table thead th .arrow-icon { position: relative; display: inline-block; visibility: hidden; opacity: 0; width: 16px; height: 16px; margin-left: 8px; pointer-events: none; transform-origin: 50% 50%; transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .table thead th .arrow-icon::before, .sdx-container .table thead th .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .table thead th .arrow-icon::before { left: 0; } .sdx-container .table thead th .arrow-icon::after { left: 6px; } .sdx-container .table thead th.js-ascending .arrow-icon { visibility: visible; opacity: 1; } .sdx-container .table thead th.js-ascending .arrow-icon::before { transform: rotate(45deg); } .sdx-container .table thead th.js-ascending .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .table thead th.js-descending .arrow-icon { visibility: visible; opacity: 1; } .sdx-container .table thead th.js-descending .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .table thead th.js-descending .arrow-icon::after { transform: rotate(45deg); } .sdx-container .table tbody { line-height: 24px; letter-spacing: 0; font-size: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdx-container .table tbody tr { text-align: left; } .sdx-container .table tbody tr:not(:last-child) { border-bottom: 1px solid #adadad; } .sdx-container .table tbody td { padding-top: 20px; padding-bottom: 17px; } .sdx-container .table .button { margin: 0 16px; } .sdx-container .table--responsive { display: block; } .sdx-container .table--responsive::after { content: ""; display: block; clear: both; } .sdx-container .table--responsive:not(:last-child) { margin-bottom: 16px; } .sdx-container .table--responsive .table__wrapper { display: block; width: 100%; min-height: 0; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } .sdx-container .table--responsive .table__wrapper:not(:last-child) { margin-bottom: 16px; } .sdx-container .table--reflow { display: block; } .sdx-container .table--reflow .table__wrapper { display: block; width: 100%; } .sdx-container .table--reflow table { display: block; position: relative; width: 100%; } .sdx-container .table--reflow td:first-child, .sdx-container .table--reflow th:first-child { padding-left: 8px; } .sdx-container .table--reflow td:last-child, .sdx-container .table--reflow th:last-child { padding-right: 8px; } .sdx-container .table--reflow thead { display: block; float: left; } .sdx-container .table--reflow thead tr { display: block; border-bottom: 0; } .sdx-container .table--reflow thead tr th { padding-left: 16px; } .sdx-container .table--reflow thead tr th::after { content: " "; } .sdx-container .table--reflow tbody { display: block; width: auto; white-space: nowrap; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } .sdx-container .table--reflow tbody tr { display: table-cell; border-bottom: 0; } .sdx-container .table--reflow tbody tr:last-child td { padding-right: 16px; } .sdx-container .table--reflow thead tr, .sdx-container .table--reflow tbody tr, .sdx-container .table--reflow tfoot tr { border-bottom: 0 !important; } .sdx-container .table--reflow td:empty::after { content: " "; } .sdx-container .table--reflow tr td, .sdx-container .table--reflow tr th { display: block; padding-top: 20px; padding-bottom: 17px; border-bottom: 1px solid #adadad; } .sdx-container .table--reflow tr td:last-child, .sdx-container .table--reflow tr th:last-child { border-bottom: 0; } .sdx-container .table--highlight thead { background: #f8fafb; } .sdx-container .table--no-border .table__title { padding-left: 0; padding-right: 0; } .sdx-container .table--no-border table th:first-child, .sdx-container .table--no-border table td:first-child { padding-left: 0; } .sdx-container .table--no-border table th:last-child, .sdx-container .table--no-border table td:last-child { padding-right: 0; } .sdx-container .table__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; padding: 0 16px 15px; text-align: left; } .sdx-container .bar-chart-horizontal .js-data, .sdx-container .bar-chart-horizontal .js-data-list, .sdx-container .bar-chart-vertical .js-data, .sdx-container .bar-chart-vertical .js-data-list, .sdx-container .pie-chart .js-data, .sdx-container .pie-chart .js-data-list { display: none; } .sdx-container .bar-chart-horizontal .tooltip--right::before, .sdx-container .bar-chart-vertical .tooltip--right::before, .sdx-container .pie-chart .tooltip--right::before { margin-bottom: -13px; } .sdx-container .bar-chart-horizontal .tooltip::after, .sdx-container .bar-chart-vertical .tooltip::after, .sdx-container .pie-chart .tooltip::after { min-width: 200px; font-size: 14px; } .sdx-container .bar-chart__legend, .sdx-container .pie-chart__legend { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-wrap: wrap; list-style-type: none; min-height: 24px; margin-top: 29px; margin-bottom: 28px; } .sdx-container .bar-chart__legend li, .sdx-container .pie-chart__legend li { margin: 0 20px 0 0; } .sdx-container .bar-chart__legend li::before, .sdx-container .pie-chart__legend li::before { content: ""; } .sdx-container .bar-chart__legend li .bullet, .sdx-container .pie-chart__legend li .bullet { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; } .sdx-container .pie-chart__legend .orchid, .sdx-container .bar-chart__legend .orchid, .sdx-container .bar-chart-horizontal .orchid, .sdx-container .bar-chart-vertical .orchid { background-color: #a63297; } .sdx-container .pie-chart__legend .orchid--active, .sdx-container .bar-chart__legend .orchid--active, .sdx-container .bar-chart-horizontal .orchid--active, .sdx-container .bar-chart-vertical .orchid--active { background-color: #7f2879; } .sdx-container .pie-chart__legend .iris, .sdx-container .bar-chart__legend .iris, .sdx-container .bar-chart-horizontal .iris, .sdx-container .bar-chart-vertical .iris { background-color: #5944c6; } .sdx-container .pie-chart__legend .iris--active, .sdx-container .bar-chart__legend .iris--active, .sdx-container .bar-chart-horizontal .iris--active, .sdx-container .bar-chart-vertical .iris--active { background-color: #42389e; } .sdx-container .pie-chart__legend .pink, .sdx-container .bar-chart__legend .pink, .sdx-container .bar-chart-horizontal .pink, .sdx-container .bar-chart-vertical .pink { background-color: #e61e64; } .sdx-container .pie-chart__legend .pink--active, .sdx-container .bar-chart__legend .pink--active, .sdx-container .bar-chart-horizontal .pink--active, .sdx-container .bar-chart-vertical .pink--active { background-color: #bf1b5a; } .sdx-container .pie-chart__legend .turquoise, .sdx-container .pie-chart__legend .apple, .sdx-container .pie-chart__legend .petrol, .sdx-container .bar-chart__legend .turquoise, .sdx-container .bar-chart__legend .apple, .sdx-container .bar-chart__legend .petrol, .sdx-container .bar-chart-horizontal .turquoise, .sdx-container .bar-chart-horizontal .apple, .sdx-container .bar-chart-horizontal .petrol, .sdx-container .bar-chart-vertical .turquoise, .sdx-container .bar-chart-vertical .apple, .sdx-container .bar-chart-vertical .petrol { background-color: #0eaba9; } .sdx-container .pie-chart__legend .turquoise--active, .sdx-container .pie-chart__legend .apple--active, .sdx-container .pie-chart__legend .petrol--active, .sdx-container .bar-chart__legend .turquoise--active, .sdx-container .bar-chart__legend .apple--active, .sdx-container .bar-chart__legend .petrol--active, .sdx-container .bar-chart-horizontal .turquoise--active, .sdx-container .bar-chart-horizontal .apple--active, .sdx-container .bar-chart-horizontal .petrol--active, .sdx-container .bar-chart-vertical .turquoise--active, .sdx-container .bar-chart-vertical .apple--active, .sdx-container .bar-chart-vertical .petrol--active { background-color: #0c847e; } .sdx-container .pie-chart { position: relative; } .sdx-container .pie-chart .js-chart { position: relative; height: 182px; width: 182px; text-align: center; margin: 0 auto; transform: rotate(-90deg); } .sdx-container .pie-chart .js-chart > svg { position: absolute; top: 0; left: 0; width: 182px; height: 182px; fill: transparent; stroke-width: 2; stroke-linecap: round; } .sdx-container .pie-chart .meta { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 28px; letter-spacing: -0.89px; font-size: 32px; position: absolute; display: flex; top: 10px; left: 0; width: 182px; height: 172px; margin: 0 auto; flex-direction: column; align-items: center; justify-content: center; } .sdx-container .pie-chart .meta .subtitle { font-weight: 300; font-size: 16px; color: #666; text-transform: capitalize; } .sdx-container .pie-chart .chart-wrapper { position: relative; margin: 20px auto; width: 182px; } .sdx-container .pie-chart--stacked { display: flex; justify-content: center; } .sdx-container .pie-chart--stacked .chart-wrapper { margin: 20px; } .sdx-container .pie-chart--stacked .pie-chart__legend { flex-direction: column; align-items: flex-start; margin-left: 32px; } .sdx-container .pie-chart--stacked .pie-chart__legend li { margin-bottom: 5px; } .sdx-container .pie-chart--stacked .pie-chart__legend .bullet { margin-right: 10px; } .sdx-container .pie-chart .orchid { stroke: #a63297; } .sdx-container .pie-chart .orchid--active { stroke: #7f2879; } .sdx-container .pie-chart .iris { stroke: #5944c6; } .sdx-container .pie-chart .iris--active { stroke: #42389e; } .sdx-container .pie-chart .pink { stroke: #e61e64; } .sdx-container .pie-chart .pink--active { stroke: #bf1b5a; } .sdx-container .pie-chart .turquoise, .sdx-container .pie-chart .apple, .sdx-container .pie-chart .petrol { stroke: #0eaba9; } .sdx-container .pie-chart .turquoise--active, .sdx-container .pie-chart .apple--active, .sdx-container .pie-chart .petrol--active { stroke: #0c847e; } .sdx-container .pie-chart__legend { align-items: center; justify-content: center; } .sdx-container .bg--dark .pie-chart .meta .subtitle { color: #fff; } .sdx-container .bar-chart__progress { position: relative; width: 100%; height: 8px; margin-bottom: 32px; } .sdx-container .bar-chart__progress .indicator { position: relative; float: left; width: 100%; height: 8px; } .sdx-container .bar-chart__progress .indicator-wrapper { position: relative; float: left; } .sdx-container .bar-chart__progress .indicator-wrapper:first-child .indicator { border-radius: 8px 0 0 8px; } .sdx-container .bar-chart-horizontal { position: relative; min-width: 272px; margin-bottom: 32px; color: #333; } .sdx-container .bar-chart-horizontal:last-child { margin-bottom: 0; } .sdx-container .bar-chart-horizontal--limited { padding: 16px 22px 22px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); } .sdx-container .bar-chart-horizontal--limited .bar-chart__progress { margin: 7px 0 0 0; border-radius: 8px; background-color: #e4e9ec; overflow: hidden; } .sdx-container .bar-chart-horizontal--limited .detail-left { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 24px; letter-spacing: -0.22px; font-size: 20px; text-align: left; } .sdx-container .bar-chart-horizontal--limited .detail-bottom { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: flex; margin-top: 12px; } .sdx-container .bar-chart-horizontal--limited .detail-bottom .value { display: inline-block; text-align: right; } .sdx-container .bar-chart-horizontal--limited .detail-bottom .value:not(:first-child) { color: #666; } .sdx-container .bar-chart-horizontal--limited .detail-bottom .value:not(:first-child)::before { content: "/ "; } .sdx-container .bar-chart-horizontal--limited .detail-bottom .value:not(:first-child)::after { content: " "; } .sdx-container .bar-chart-horizontal--limited .detail-bottom .unit { color: #666; } .sdx-container .bar-chart-horizontal--unlimited { padding: 16px 22px 22px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); } .sdx-container .bar-chart-horizontal--unlimited .bar-chart__progress { margin: 14px 0 0 0; } .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail { display: flex; justify-content: space-between; } .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-left { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 24px; letter-spacing: -0.22px; font-size: 20px; text-align: left; } .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: flex; } .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value { display: inline-block; text-align: right; } .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value::before, .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .value::after { content: " "; } .sdx-container .bar-chart-horizontal--unlimited > .bar-chart__detail .detail-right .unit { color: #666; } .sdx-container .bar-chart-horizontal--split { border-top: 1px solid #d6d6d6; } .sdx-container .bar-chart-horizontal--split > .bar-chart__detail { display: flex; justify-content: space-between; margin: 13px 0 18px; padding-top: 8px; } .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-left { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; text-align: left; } .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: flex; } .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value { font-weight: 600; display: inline-block; text-align: right; } .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value::before, .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value::after { content: " "; } .sdx-container .bar-chart-horizontal--split > .bar-chart__detail .detail-right .value:nth-child(3)::before { font-weight: normal; content: " / "; color: #666; } .sdx-container .bar-chart__legend { padding-top: 32px; border-top: 1px solid #d6d6d6; } .sdx-container .bg--dark .bar-chart-horizontal--split { border-top: 1px solid rgba(255, 255, 255, 0.4); } .sdx-container .bg--dark .bar-chart-horizontal--split .detail-left, .sdx-container .bg--dark .bar-chart-horizontal--split .detail-right { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; } .sdx-container .bg--dark .bar-chart__legend { border-top: 1px solid rgba(255, 255, 255, 0.4); } .sdx-container .bar-chart-vertical { min-width: 272px; width: 100%; } .sdx-container .bar-chart-vertical:last-child { margin-bottom: 0; } .sdx-container .bar-chart-vertical .chart-wrapper { position: relative; height: 100%; margin-bottom: 54px; } .sdx-container .bar-chart-vertical .chart { position: relative; display: flex; justify-content: space-between; margin-left: 30px; height: 172px; } .sdx-container .bar-chart-vertical .chart .indicator-wrapper { position: relative; height: 172px; min-width: 70px; } .sdx-container .bar-chart-vertical .chart .indicator-wrapper-inner { position: absolute; bottom: 0; left: calc( 50% - 4px); display: flex; flex-direction: column-reverse; } .sdx-container .bar-chart-vertical .chart li { text-align: center; z-index: 1; } .sdx-container .bar-chart-vertical .chart li:first-child .indicator-wrapper { min-width: 42px; } .sdx-container .bar-chart-vertical .chart li:hover { z-index: 100; } .sdx-container .bar-chart-vertical .chart .indicator { width: 8px; margin: 0 auto; } .sdx-container .bar-chart-vertical .chart .indicator:first-child::before { position: absolute; height: 8px; width: 8px; bottom: -4px; transform: translateX(-4px); -ms-transform: translateX(0); content: ""; background: inherit; border-radius: 8px; } .sdx-container .bar-chart-vertical .chart .indicator.empty { background-color: #d6d6d6; } .sdx-container .bar-chart-vertical .chart .axis-x-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 12px; font-size: 16px; align-content: center; } .sdx-container .bar-chart-vertical .chart .tooltip--right::after { bottom: calc(50% - 4px); } .sdx-container .bar-chart-vertical .chart .tooltip--multiline::before { margin-bottom: -8px; } .sdx-container .bar-chart-vertical .chart .tooltip--multiline::after { bottom: calc(50% - 7px); } .sdx-container .bar-chart-vertical .bar-chart__grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sdx-container .bar-chart-vertical .bar-chart__grid li { border-top: 1px solid #adadad; height: 33.333%; } .sdx-container .bar-chart-vertical .bar-chart__grid li:last-child { border-bottom: 1px solid #adadad; } .sdx-container .bar-chart-vertical .bar-chart__grid .axis-y-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; width: 30px; font-size: 14px; } .sdx-container .bar-chart-vertical .bar-chart__legend { padding-top: 0; border-top: 0; } .sdx-container .bg--dark .bar-chart__grid li { border-top: 1px solid rgba(255, 255, 255, 0.4); } .sdx-container .bg--dark .bar-chart__grid li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .sdx-container .tabs { position: relative; width: 100%; white-space: nowrap; border-bottom: 1px solid #d6d6d6; overflow-x: hidden; } .sdx-container .tabs .tab { display: table-cell; margin: 0; padding: 0; text-align: center; list-style: none; } .sdx-container .tabs .tab:active { outline: none; } .sdx-container .tabs .tab:focus { outline: 1px dotted; } .sdx-container .tabs .tab .tab-link { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: block; padding: 6px 10px; color: #015; border-bottom: 4px solid transparent; } .sdx-container .tabs .tab .tab-link:hover, .sdx-container .tabs .tab .tab-link:focus { color: #1781e3; } .sdx-container .tabs .tab .tab-link.active { color: #1781e3; border-bottom: 4px solid #1781e3; outline: none !important; } .sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled { cursor: not-allowed; } .sdx-container .tabs .tab .tab-link.disabled:active, .sdx-container .tabs .tab .tab-link:disabled:active { pointer-events: none; transform: none; } .sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0.4; border-bottom: 0; } .sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled { color: #333; } .sdx-container .tabs .tab--flyout .flyout__indicator::before { right: calc(50% - 7px); } .sdx-container .tabs--small .tab .tab-link { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 16px; padding-top: 5px; padding-bottom: 5px; } .sdx-container .tabs--big .tab .tab-link { font-weight: 400; line-height: 32px; letter-spacing: -0.35px; font-size: 24px; padding-top: 8px; padding-bottom: 8px; } .sdx-container .tabs--long .tab .tab-link { padding-left: 20px; padding-right: 20px; } .sdx-container .tabs--no-border { border-bottom: 0; } .sdx-container .tabs--scrollable { overflow-x: auto; } .sdx-container .tabs--image { border-bottom: 0; overflow-x: visible; } .sdx-container .tabs--image ul { overflow-x: auto; margin-left: -20px; padding-left: 20px; margin-right: -20px; } .sdx-container .tabs--image ul::before, .sdx-container .tabs--image ul::after { content: " "; position: absolute; top: 0; bottom: 0; width: 20px; z-index: 1; pointer-events: none; } .sdx-container .tabs--image ul::before { left: -20px; background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); } .sdx-container .tabs--image ul::after { right: -20px; background: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 100%); } .sdx-container .tabs--image .tab { vertical-align: top; padding-right: 20px; } @media (max-width: 767px) { .sdx-container .tabs--image .tab { padding-right: 8px; } } .sdx-container .tabs--image .tab:last-child { padding-right: 20px; } .sdx-container .tabs--image .tab .tab-link { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 16px; background: #eef3f6; width: 160px; height: 160px; display: flex; flex-direction: column; } .sdx-container .tabs--image .tab span { display: flex; justify-content: center; align-items: center; } .sdx-container .tabs--image .tab span.image { height: 105px; } .sdx-container .tabs--image .tab span.image img { max-height: 90px; pointer-events: none; -moz-user-select: none; } .sdx-container .tabs--image .tab span.title { white-space: normal; line-height: 1; flex: 1; } .sdx-container .bg--dark .tabs { border-bottom-color: #fff; } .sdx-container .bg--dark .tabs .tab .tab-link { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0.7; color: #fff; border-bottom: 4px solid transparent; } .sdx-container .bg--dark .tabs .tab .tab-link:hover, .sdx-container .bg--dark .tabs .tab .tab-link:focus { opacity: 1; color: #fff; border-bottom: 4px solid transparent; box-shadow: none; } .sdx-container .bg--dark .tabs .tab .tab-link.active { opacity: 1; color: #fff; border-bottom: 4px solid #fff; } .sdx-container .bg--dark .tabs .tab .tab-link.disabled, .sdx-container .bg--dark .tabs .tab .tab-link:disabled { cursor: not-allowed; } .sdx-container .bg--dark .tabs .tab .tab-link.disabled:active, .sdx-container .bg--dark .tabs .tab .tab-link:disabled:active { pointer-events: none; transform: none; } .sdx-container .bg--dark .tabs .tab .tab-link.disabled, .sdx-container .bg--dark .tabs .tab .tab-link:disabled { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0.4; border-bottom: 0; } .sdx-container .bg--dark .tabs .tab .tab-link.disabled, .sdx-container .bg--dark .tabs .tab .tab-link:disabled { color: #fff; } .sdx-container .bg--dark .tabs--inverted { background: #fff; border-bottom: 0; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; color: #015; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link:hover, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:focus { color: #015; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link.active { color: #015; border-bottom: 4px solid #015; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link.disabled, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:disabled { cursor: not-allowed; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link.disabled:active, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:disabled:active { pointer-events: none; transform: none; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link.disabled, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:disabled { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0.4; border-bottom: 0; } .sdx-container .bg--dark .tabs--inverted .tab .tab-link.disabled, .sdx-container .bg--dark .tabs--inverted .tab .tab-link:disabled { color: #333; } .sdx-container .collapse { display: none; position: relative; height: 0; overflow: hidden; } .sdx-container .collapse.is-open { display: block; height: auto; } .sdx-container tr.collapse.is-open { display: table-row; } .sdx-container tbody.collapse.is-open { display: table-row-group; } @media (min-width: 0) { .sdx-container .accordion--hidden-xs-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xs-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xs-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xs-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 479px) { .sdx-container .accordion--hidden-xs-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xs-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xs-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xs-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 480px) { .sdx-container .accordion--hidden-sm-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-sm-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-sm-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-sm-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 767px) { .sdx-container .accordion--hidden-sm-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-sm-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-sm-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-sm-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 768px) { .sdx-container .accordion--hidden-md-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-md-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-md-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-md-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1023px) { .sdx-container .accordion--hidden-md-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-md-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-md-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-md-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1024px) { .sdx-container .accordion--hidden-lg-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-lg-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-lg-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-lg-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1279px) { .sdx-container .accordion--hidden-lg-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-lg-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-lg-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-lg-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1280px) { .sdx-container .accordion--hidden-xl-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xl-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xl-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xl-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1439px) { .sdx-container .accordion--hidden-xl-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xl-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xl-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xl-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1440px) { .sdx-container .accordion--hidden-ul-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-ul-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-ul-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-ul-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } .sdx-container .accordion--hidden-ul-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-ul-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-ul-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-ul-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } @media (min-width: 0) { .sdx-container .accordion--hidden-phone-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-phone-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-phone-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-phone-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 767px) { .sdx-container .accordion--hidden-phone-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-phone-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-phone-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-phone-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 768px) { .sdx-container .accordion--hidden-tablet-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-tablet-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-tablet-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-tablet-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1023px) { .sdx-container .accordion--hidden-tablet-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-tablet-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-tablet-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-tablet-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1024px) { .sdx-container .accordion--hidden-desktop-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-desktop-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-desktop-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-desktop-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1279px) { .sdx-container .accordion--hidden-desktop-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-desktop-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-desktop-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-desktop-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } .sdx-container .accordion .js-hidden { display: none; position: absolute; left: -9999px; visibility: visible; } .sdx-container .accordion__item { position: relative; } .sdx-container .accordion__toggle { display: block; margin: 0; padding: 0; border: 0; width: 100%; cursor: pointer; } .sdx-container .accordion__toggle .arrow-icon { float: right; pointer-events: none; transform-origin: 50% 50%; } .sdx-container .accordion__toggle .arrow-icon:focus { color: #0851da; } .sdx-container .accordion__toggle .arrow-icon { float: right; pointer-events: none; transform-origin: 50% 50%; } .sdx-container .accordion__toggle--arrow-left .accordion__header { padding-left: 10px; } .sdx-container .accordion__toggle--arrow-left .arrow-icon { float: left; } .sdx-container .accordion__toggle--arrow-centered { width: 100%; min-height: 32px; border-top: 1px solid #d6d6d6; } .sdx-container .accordion__toggle--arrow-centered .arrow-icon { display: table; margin: 3px auto 0 auto; float: none; } .sdx-container .accordion__header { display: inline-block; position: relative; } .sdx-container .accordion__keep-open { display: block; } .sdx-container .accordion__collapse { position: relative; overflow: hidden; display: none; height: 0; width: 100%; opacity: 0; } .sdx-container .accordion__collapse.is-open { display: block; height: auto; width: 100%; opacity: 1; } .sdx-container .accordion .accordion__toggle .accordion__header, .sdx-container .accordion--arrow-flat .accordion__toggle .accordion__header { width: calc(100% - 35px - 8px); } .sdx-container .accordion .accordion__toggle .arrow-icon, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon { position: relative; top: 4px; left: 0; width: 35px; height: 16px; transform: scale(0.68); } .sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; background: #1781e3; width: 20px; height: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before { left: 0; } .sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::after { left: 15px; } .sdx-container .accordion .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::before { transform: rotate(35deg); } .sdx-container .accordion .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle .arrow-icon::after { transform: rotate(-35deg); } .sdx-container .accordion .accordion__toggle:hover .arrow-icon, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon { position: relative; } .sdx-container .accordion .accordion__toggle:hover .arrow-icon::before, .sdx-container .accordion .accordion__toggle:hover .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; background: #0851da; width: 20px; height: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .accordion .accordion__toggle:hover .arrow-icon::before, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::before { left: 0; } .sdx-container .accordion .accordion__toggle:hover .arrow-icon::after, .sdx-container .accordion--arrow-flat .accordion__toggle:hover .arrow-icon::after { left: 15px; } .sdx-container .accordion .is-open .accordion__toggle .arrow-icon::before, .sdx-container .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::before { transform: rotate(-35deg); } .sdx-container .accordion .is-open .accordion__toggle .arrow-icon::after, .sdx-container .accordion--arrow-flat .is-open .accordion__toggle .arrow-icon::after { transform: rotate(35deg); } .sdx-container .accordion--border { border-bottom: 1px solid #d6d6d6; } .sdx-container .accordion--border .accordion__item { border: 1px solid #d6d6d6; border-bottom: 0; padding: 13px 13px 14px 19px; } .sdx-container .accordion .accordion__border { border: 1px solid #d6d6d6; } .sdx-container .accordion .accordion__border .accordion__header { padding-top: 16px; padding-bottom: 16px; padding-left: 15px; padding-right: 15px; } .sdx-container .accordion .accordion__border .accordion__collapse { padding-left: 15px; padding-right: 15px; } .sdx-container .accordion .accordion__border .accordion__collapse.is-open { padding-bottom: 16px; } @media (min-width: 0) { .sdx-container .accordion--hidden-xs-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xs-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xs-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xs-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 479px) { .sdx-container .accordion--hidden-xs-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xs-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xs-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xs-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 480px) { .sdx-container .accordion--hidden-sm-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-sm-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-sm-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-sm-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 767px) { .sdx-container .accordion--hidden-sm-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-sm-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-sm-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-sm-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 768px) { .sdx-container .accordion--hidden-md-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-md-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-md-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-md-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1023px) { .sdx-container .accordion--hidden-md-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-md-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-md-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-md-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1024px) { .sdx-container .accordion--hidden-lg-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-lg-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-lg-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-lg-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1279px) { .sdx-container .accordion--hidden-lg-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-lg-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-lg-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-lg-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1280px) { .sdx-container .accordion--hidden-xl-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xl-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xl-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xl-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1439px) { .sdx-container .accordion--hidden-xl-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-xl-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-xl-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-xl-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1440px) { .sdx-container .accordion--hidden-ul-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-ul-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-ul-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-ul-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } .sdx-container .accordion--hidden-ul-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-ul-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-ul-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-ul-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } @media (min-width: 0) { .sdx-container .accordion--hidden-phone-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-phone-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-phone-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-phone-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 767px) { .sdx-container .accordion--hidden-phone-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-phone-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-phone-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-phone-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 768px) { .sdx-container .accordion--hidden-tablet-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-tablet-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-tablet-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-tablet-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1023px) { .sdx-container .accordion--hidden-tablet-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-tablet-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-tablet-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-tablet-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (min-width: 1024px) { .sdx-container .accordion--hidden-desktop-up .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-desktop-up .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-desktop-up .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-desktop-up .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } @media (max-width: 1279px) { .sdx-container .accordion--hidden-desktop-down .js-hidden { visibility: hidden !important; } .sdx-container .accordion--hidden-desktop-down .accordion__toggle { display: inherit; width: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; } .sdx-container .accordion--hidden-desktop-down .accordion__toggle .arrow-icon { display: none !important; } .sdx-container .accordion--hidden-desktop-down .accordion__collapse { display: block; height: 100%; width: 100%; opacity: 1; } } .sdx-container .accordion .js-hidden { display: none; position: absolute; left: -9999px; visibility: visible; } .sdx-container .accordion--sidebar .accordion__toggle .accordion__header { width: calc(100% - 16px - 8px); } .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon { position: relative; top: 4px; left: 0; width: 16px; height: 16px; transform: none; } .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::before, .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::before { left: 0; } .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::after { left: 6px; } .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::before { transform: rotate(45deg); } .sdx-container .accordion--sidebar .accordion__toggle .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon { position: relative; } .sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::before, .sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #0851da; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::before { left: 0; } .sdx-container .accordion--sidebar .accordion__toggle:hover .arrow-icon::after { left: 6px; } .sdx-container .accordion--sidebar .is-open .accordion__toggle .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .accordion--sidebar .is-open .accordion__toggle .arrow-icon::after { transform: rotate(45deg); } .sdx-container .accordion--sidebar a, .sdx-container .accordion--sidebar button { margin: 0; padding: 0; border: 0; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); color: #015; } .sdx-container .accordion--sidebar a:hover, .sdx-container .accordion--sidebar button:hover { color: #0851da; } .sdx-container .accordion--sidebar .nav-items { display: flex; flex-direction: column; margin-top: 8px; margin-bottom: 0; } .sdx-container .accordion--sidebar .nav-item { position: relative; float: left; margin: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .accordion--sidebar .nav-item::before { content: none; } .sdx-container .accordion--sidebar .nav-item:not(:first-child) { margin-top: 8px; } .sdx-container .accordion--sidebar .nav-item:last-child { margin-right: 0; padding-bottom: 2px; } .sdx-container .accordion--sidebar .nav-title { font-weight: 600; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; } .sdx-container .accordion--sidebar .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; text-decoration: none; white-space: normal; } .sdx-container .accordion--sidebar .nav-link .text-underline { position: relative; pointer-events: none; } .sdx-container .accordion--sidebar .nav-link .text-underline::before { position: absolute; top: 24px; width: 100%; height: 1px; pointer-events: none; background-color: #015; transform: scaleX(0); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; } .sdx-container .accordion--sidebar .nav-link.is-active .text-underline::before, .sdx-container .accordion--sidebar .nav-link--active .text-underline::before { transform: scaleX(1); } .sdx-container .accordion--sidebar .nav-link:hover { color: #0851da; } .sdx-container .accordion--sidebar .nav-link:hover .text-underline::before { background-color: #0851da; } .sdx-container .carousel { overflow: hidden; outline: none; } .sdx-container .carousel__container { width: 100%; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .sdx-container .carousel__slider { margin-bottom: 21px; cursor: -webkit-grab; cursor: grab; } .sdx-container .carousel__slider-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .sdx-container .carousel__slider .slide { position: relative; flex-shrink: 0; width: auto; height: 100%; max-width: 100%; margin: 0 10px; opacity: 0.2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); } @media (min-width: 768px) { .sdx-container .carousel__slider .slide { max-width: 300px; } } @media (min-width: 1280px) { .sdx-container .carousel__slider .slide { max-width: 321px; } } .sdx-container .carousel__slider .slide--active { opacity: 1; } @media (min-width: 768px) { .sdx-container .carousel__slider .slide--next { opacity: 1; } } @media (min-width: 1280px) { .sdx-container .carousel__slider .slide--prev { opacity: 1; } } .sdx-container .carousel__pagination { position: relative; height: 24px; text-align: center; transition: 300ms; transform: translate3d(0, 0, 0); z-index: 10; } .sdx-container .carousel__pagination .pagination-bullet { display: inline-block; position: relative; width: 16px; height: 16px; margin: 4px 2px; opacity: 0.5; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .sdx-container .carousel__pagination .pagination-bullet::before { position: absolute; top: 0; left: 0; width: inherit; height: inherit; background: #1781e3; border-radius: 100%; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transform: scale(0.5); content: ""; } .sdx-container .carousel__pagination .pagination-bullet:hover { opacity: 0.75; } .sdx-container .carousel__pagination .pagination-bullet:focus { outline: none; } .sdx-container .carousel__pagination .pagination-bullet--active, .sdx-container .carousel__pagination .pagination-bullet--active:hover { opacity: 1; } .sdx-container .carousel__pagination .pagination-bullet--active::before { transform: scale(1); } .sdx-container .carousel__button-wrapper { position: absolute; bottom: 0; width: inherit; height: 24px; z-index: 15; pointer-events: none; } @media (min-width: 768px) { .sdx-container .carousel__button-wrapper { top: calc(50% - 60px); bottom: inherit; height: 60px; } } .sdx-container .carousel__button-prev, .sdx-container .carousel__button-next { position: absolute; width: auto; height: auto; font-size: 22px; background-image: none; cursor: pointer; outline: none; pointer-events: auto; color: #1781e3; transition: color 200ms cubic-bezier(0.4, 0, 0.6, 1), transform 300ms cubic-bezier(0.4, 0, 0.6, 1); } @media (min-width: 768px) { .sdx-container .carousel__button-prev, .sdx-container .carousel__button-next { font-size: 60px; } } .sdx-container .carousel__button-prev:hover, .sdx-container .carousel__button-next:hover { color: #0851da; } .sdx-container .carousel__button-prev:focus, .sdx-container .carousel__button-next:focus { outline: none; } .sdx-container .carousel__button-prev:disabled, .sdx-container .carousel__button-next:disabled { pointer-events: none; opacity: 0.4; } .sdx-container .carousel__button-prev .icon, .sdx-container .carousel__button-next .icon { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } .sdx-container .carousel__button-prev { top: -15px; left: -20px; padding: 15px 5px 15px 15px; } .sdx-container .carousel__button-prev:hover { transform: translateX(-2px); } @media (min-width: 768px) { .sdx-container .carousel__button-prev { top: 0; left: -10px; padding: 0; } } .sdx-container .carousel__button-next { right: -20px; top: -15px; padding: 15px 15px 15px 5px; } .sdx-container .carousel__button-next:hover { transform: translateX(2px); } @media (min-width: 768px) { .sdx-container .carousel__button-next { top: 0; right: -10px; padding: 0; } } .sdx-container .carousel .js-phone { visibility: hidden; } @media (max-width: 767px) { .sdx-container .carousel .js-phone { visibility: visible; } } .sdx-container .carousel .js-tablet { visibility: hidden; } @media (min-width: 768px) and (max-width: 1279px) { .sdx-container .carousel .js-tablet { visibility: visible; } } .sdx-container .carousel .js-desktop { visibility: hidden; } @media (min-width: 1280px) { .sdx-container .carousel .js-desktop { visibility: visible; } } .sdx-container .empty-state { display: flex; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; justify-content: center; align-items: center; } .sdx-container .empty-state input[type=file] { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .sdx-container .empty-state label { margin-top: 36px; min-width: 206px; } .sdx-container .empty-state__icon { width: 100%; margin-top: -10px; color: #d6d6d6; font-size: 230px; text-align: center; transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .empty-state__body { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; font-weight: 400; color: #333; text-align: center; } @media (min-width: 768px) { .sdx-container .empty-state__body { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; } } .sdx-container .empty-state__body .body__status { transition: visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 768px) { .sdx-container .empty-state__body .body__status { font-weight: 600; } } .sdx-container .empty-state__body .body__cta { display: none; margin-bottom: 0; } @media (min-width: 768px) { .sdx-container .empty-state__body .body__cta { display: inline; } } .sdx-container .empty-state__footer { text-align: center; transition: visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 768px) { .sdx-container .empty-state.is-active { z-index: 700001; } } .sdx-container .empty-state.is-active form { pointer-events: none; } .sdx-container .empty-state.is-active .empty-state__icon { color: #1781e3; transform: scale(1.025); } .sdx-container .empty-state.is-active .empty-state__footer { visibility: hidden; opacity: 0; } .sdx-container .empty-state.is-active .body__status { opacity: 0; } .sdx-container .empty-state.has-files .body__status { visibility: hidden; opacity: 0; } .sdx-container .empty-state--modal { position: relative; width: auto; height: auto; pointer-events: none; } .sdx-container .empty-state--modal label { pointer-events: auto; } .sdx-container .empty-state__bg { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; } .sdx-container .empty-state__border { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 10px solid #1781e3; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); visibility: hidden; opacity: 0; z-index: 700000; pointer-events: none; transition: visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .empty-state__border--modal { position: absolute; pointer-events: none; background: none; } @media (min-width: 768px) { .sdx-container .empty-state__border.is-active { visibility: visible; opacity: 1; } } .sdx-container .nav { position: relative; z-index: 50000; background: #fff; } .sdx-container .nav a, .sdx-container .nav button { margin: 0; padding: 0; border: 0; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav ul, .sdx-container .nav ol { margin: 0; padding: 0; list-style: none; } .sdx-container .nav .nav-items::after { content: ""; display: block; clear: both; } .sdx-container .nav .logo .logo-lifeform, .sdx-container .nav .logo .logo-type { display: inline-block; float: left; position: relative; left: 0; top: 0; height: 40px; } .sdx-container .nav .logo .logo-lifeform { background-size: 3600px 40px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/lifeform-spritesheet.png"); width: 40px; height: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width: 40px; -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .nav .logo .logo-lifeform { background-image: url("../images/lifeform-spritesheet@2x.png"); } } @-webkit-keyframes initialAnimation { 100% { background-position: -3600px; } } @keyframes initialAnimation { 100% { background-position: -3600px; } } @-webkit-keyframes repeatingAnimation { 0% { background-position: 0; } 80% { background-position: 0; } 100% { background-position: -3600px; } } @keyframes repeatingAnimation { 0% { background-position: 0; } 80% { background-position: 0; } 100% { background-position: -3600px; } } .sdx-container .nav .logo .nova-flag { display: inline-block; float: left; position: relative; margin-left: 10px; margin-top: 5px; } .sdx-container .nav .nav-hamburger { display: block; } .sdx-container .nav .nav-hamburger span { display: block; position: relative; width: 20px; height: 2px; margin: 5px 0; border-radius: 2px; background: #015; transform-origin: center; transition: all 75ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav .nav-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sdx-container .nav .nav-hamburger.is-active span:nth-child(2) { opacity: 0; } .sdx-container .nav .nav-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 0) { .sdx-container .nav .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 480px) { .sdx-container .nav .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 768px) { .sdx-container .nav .container { margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; width: 742px; } } @media (min-width: 1024px) { .sdx-container .nav .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 964px; } } @media (min-width: 1280px) { .sdx-container .nav .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 1224px; } } @media (min-width: 1440px) { .sdx-container .nav .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 1380px; } } .sdx-container .nav .nav-section--col-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .nav .nav-section--col-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .nav .nav-section--col-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .nav .nav-section--col-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .nav .nav-section--col-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .nav .nav-section--col-6 { -moz-column-count: 6; column-count: 6; } @media (max-width: 767px) { .sdx-container .nav .nav-section { -moz-column-count: 1; column-count: 1; } } @media (min-width: 768px) { .sdx-container .nav .nav-section { -moz-column-gap: 16px; column-gap: 16px; } .sdx-container .nav .nav-section--col-md-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .nav .nav-section--col-md-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .nav .nav-section--col-md-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .nav .nav-section--col-md-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .nav .nav-section--col-md-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .nav .nav-section--col-md-6 { -moz-column-count: 6; column-count: 6; } } @media (min-width: 1024px) { .sdx-container .nav .nav-section { -moz-column-gap: 24px; column-gap: 24px; } .sdx-container .nav .nav-section--col-lg-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .nav .nav-section--col-lg-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .nav .nav-section--col-lg-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .nav .nav-section--col-lg-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .nav .nav-section--col-lg-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .nav .nav-section--col-lg-6 { -moz-column-count: 6; column-count: 6; } } @media (min-width: 1280px) { .sdx-container .nav .nav-section { -moz-column-gap: 24px; column-gap: 24px; } .sdx-container .nav .nav-section--col-xl-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .nav .nav-section--col-xl-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .nav .nav-section--col-xl-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .nav .nav-section--col-xl-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .nav .nav-section--col-xl-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .nav .nav-section--col-xl-6 { -moz-column-count: 6; column-count: 6; } } @media (min-width: 1440px) { .sdx-container .nav .nav-section { -moz-column-gap: 24px; column-gap: 24px; } .sdx-container .nav .nav-section--col-ul-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .nav .nav-section--col-ul-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .nav .nav-section--col-ul-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .nav .nav-section--col-ul-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .nav .nav-section--col-ul-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .nav .nav-section--col-ul-6 { -moz-column-count: 6; column-count: 6; } } .sdx-container .nav .nav-section { margin: 24px 0; } .sdx-container .nav .nav-section .nav-col { width: 100%; padding-bottom: 10px; overflow: hidden; } .sdx-container .nav .logo { float: left; margin-left: -18px; margin-right: 37px; margin-top: 22px; } @media (min-width: 1280px) { .sdx-container .nav .logo { margin-right: 80px; } } @media (min-width: 1440px) { .sdx-container .nav .logo { margin-right: 106px; } } @media (max-width: 479px) { .sdx-container .nav .logo .logo-type { display: none; } } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link { color: #015; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link .text-underline { display: inline-block; position: relative; pointer-events: none; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link .text-underline::before { position: absolute; top: 28px; width: 100%; height: 1px; pointer-events: none; background-color: #015; transform: scaleX(0); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon { position: relative; display: inline-block; top: 3px; left: 2px; width: 16px; height: 16px; pointer-events: none; transform: scale(0.8125); transform-origin: 50% 50%; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before { left: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after { left: 6px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before { transform: rotate(45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .text-underline::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .text-underline::before { transform: scaleX(1); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link.is-active .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::after, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--active .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link--active .arrow-icon::after { transform: rotate(45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover { color: #0851da; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .text-underline::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .text-underline::before { background-color: #0851da; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon { position: relative; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #0851da; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before { left: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link:hover .arrow-icon::after, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after { left: 6px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link { color: #666; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link:focus, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link:focus, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link:hover, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link:hover { color: #0851da; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link .icon, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-link .icon { margin-right: 7px; } .sdx-container .nav .nav__level0 { display: none; position: relative; float: none; background: #fff; z-index: 51000; } @media (min-width: 768px) { .sdx-container .nav .nav__level0 { display: block; } } .sdx-container .nav .nav__level0 .nav-section { margin: 0; padding: 20px 0 2px; } .sdx-container .nav .nav__level0 .nav-section .nav-col { padding-bottom: 23px; opacity: 0; } .sdx-container .nav .nav__level0 .nav-section .nav-col.is-active { opacity: 1; } .sdx-container .nav .nav__level0 a.nav-icon, .sdx-container .nav .nav__level0 a.nav-title, .sdx-container .nav .nav__level0 a.nav-link, .sdx-container .nav .nav__level0 button.nav-icon, .sdx-container .nav .nav__level0 button.nav-title, .sdx-container .nav .nav__level0 button.nav-link { color: #015; } .sdx-container .nav .nav__level0 a.nav-icon:focus, .sdx-container .nav .nav__level0 a.nav-icon:hover, .sdx-container .nav .nav__level0 a.nav-title:focus, .sdx-container .nav .nav__level0 a.nav-title:hover, .sdx-container .nav .nav__level0 a.nav-link:focus, .sdx-container .nav .nav__level0 a.nav-link:hover, .sdx-container .nav .nav__level0 button.nav-icon:focus, .sdx-container .nav .nav__level0 button.nav-icon:hover, .sdx-container .nav .nav__level0 button.nav-title:focus, .sdx-container .nav .nav__level0 button.nav-title:hover, .sdx-container .nav .nav__level0 button.nav-link:focus, .sdx-container .nav .nav__level0 button.nav-link:hover { color: #0851da; } .sdx-container .nav .nav__level0 .nav-item { position: relative; margin: 0; } .sdx-container .nav .nav__level0 .language-selector .nav-link { text-transform: uppercase; } .sdx-container .nav .nav__level0 > .nav__mainnav { height: 40px; border-bottom: 1px solid #dde3e7; transform-origin: bottom; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav-item { float: left; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; text-decoration: none; white-space: nowrap; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary { padding-top: 10px; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item { display: flex; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item:first-child, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item:first-child { margin-left: 0; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item:last-child, .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item:last-child { margin-right: 0; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary { float: left; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__primary .nav-item { margin-right: 40px; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary { float: right; } .sdx-container .nav .nav__level0 > .nav__mainnav .nav__secondary .nav-item { margin-left: 22px; } .sdx-container .nav .nav__level0 > .nav__subnav { display: none; height: 0; overflow: hidden; background: #eef3f6; } .sdx-container .nav .nav__level0 > .nav__subnav.is-open { display: block; height: 100%; } .sdx-container .nav .nav__level0 > .nav__subnav .nav-section { display: none; -moz-column-count: 2; column-count: 2; } @media (min-width: 1280px) { .sdx-container .nav .nav__level0 > .nav__subnav .nav-section { -moz-column-count: 4; column-count: 4; } } .sdx-container .nav .nav__level0 > .nav__subnav .nav-section.is-open { display: block; } .sdx-container .nav .nav__level0 > .nav__subnav .nav-section .nav-col { transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } @media (min-width: 1280px) { .sdx-container .nav .nav__level0 > .nav__subnav .nav-section .nav-col { page-break-after: column; -moz-column-break-after: column; break-after: column; } } .sdx-container .nav .nav__level0 > .nav__subnav .nav-title { font-weight: 600; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; padding-bottom: 4px; } .sdx-container .nav .nav__level0 > .nav__subnav .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; text-decoration: none; } .sdx-container .nav .nav__level0 > .nav__subnav .nav-items { display: flex; flex-direction: column; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile { display: none; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; text-decoration: none; white-space: nowrap; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary { display: block; position: static; height: auto; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link, .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__secondary .nav-link { height: auto; padding: 16px 24px 15px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link .text-underline::before { top: 22px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header { display: flex; justify-content: space-between; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav-link--header .arrow-icon { left: 0; margin-bottom: 0; transform: scale(1); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-section { padding: 22px 24px 7px; border: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-col { padding: 0 0 23px; border: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-title { font-weight: 600; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; padding-bottom: 4px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; text-decoration: none; padding: 0; border: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-items { margin: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-item { display: inline; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile .nav__primary .nav__subnav .nav-link { padding: 0; border: 0; } @media (max-width: 767px) { .sdx-container .nav .nav__level1 .nav__mainnav .nav__level0-mobile { display: block; } } .sdx-container .nav .nav__level1 { position: relative; float: none; height: 80px; border-bottom: 1px solid #dde3e7; background: #fff; transform-origin: bottom; z-index: 50100; } .sdx-container .nav .nav__level1 .nav-section { margin: 30px 0 -6px; } .sdx-container .nav .nav__level1 .nav-section .nav-col { padding-bottom: 36px; } .sdx-container .nav .nav__level1 a.nav-icon, .sdx-container .nav .nav__level1 a.nav-title, .sdx-container .nav .nav__level1 a.nav-link, .sdx-container .nav .nav__level1 button.nav-icon, .sdx-container .nav .nav__level1 button.nav-title, .sdx-container .nav .nav__level1 button.nav-link { color: #015; } .sdx-container .nav .nav__level1 a.nav-icon:focus, .sdx-container .nav .nav__level1 a.nav-icon:hover, .sdx-container .nav .nav__level1 a.nav-title:focus, .sdx-container .nav .nav__level1 a.nav-title:hover, .sdx-container .nav .nav__level1 a.nav-link:focus, .sdx-container .nav .nav__level1 a.nav-link:hover, .sdx-container .nav .nav__level1 button.nav-icon:focus, .sdx-container .nav .nav__level1 button.nav-icon:hover, .sdx-container .nav .nav__level1 button.nav-title:focus, .sdx-container .nav .nav__level1 button.nav-title:hover, .sdx-container .nav .nav__level1 button.nav-link:focus, .sdx-container .nav .nav__level1 button.nav-link:hover { color: #0851da; } .sdx-container .nav .nav__level1 .nav-icon { font-size: 26px; } .sdx-container .nav .nav__level1 .nav__mainnav { width: 100%; height: 80px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav-item { float: left; margin: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav-link { font-weight: 400; line-height: 32px; letter-spacing: -0.35px; font-size: 24px; text-decoration: none; white-space: nowrap; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item:first-child, .sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item:first-child { margin-left: 0; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item:last-child, .sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item:last-child { margin-right: 0; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary { float: left; padding-top: 24px; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item { margin-right: 28px; } @media (min-width: 768px) { .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-item.is-open .nav__subnav { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); } } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link { color: #015; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link .text-underline { position: relative; pointer-events: none; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link .text-underline::before { position: absolute; top: 34px; width: 100%; height: 1px; pointer-events: none; background-color: #015; transform: scaleX(0); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link--header { content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link.is-active .text-underline::before, .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link--active .text-underline::before { transform: scaleX(1); } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link:hover { color: #0851da; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__primary .nav-link:hover .text-underline::before { background-color: #0851da; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary { float: right; padding-top: 28px; } .sdx-container .nav .nav__level1 .nav__mainnav > .nav__secondary .nav-item { margin-left: 20px; } .sdx-container .nav .nav__level1 .nav__subnav { position: absolute; left: 0; top: 80px; width: 100%; background: #eef3f6; } .sdx-container .nav .nav__level1 .nav__subnav .nav-body, .sdx-container .nav .nav__level1 .nav__subnav .nav-footer { position: relative; overflow: hidden; display: none; height: 0; } .sdx-container .nav .nav__level1 .nav__subnav .nav-body.is-open, .sdx-container .nav .nav__level1 .nav__subnav .nav-footer.is-open { display: block; height: 100%; } .sdx-container .nav .nav__level1 .nav__subnav .nav-body .nav-item, .sdx-container .nav .nav__level1 .nav__subnav .nav-footer .nav-item { margin: 0; } .sdx-container .nav .nav__level1 .nav__subnav .nav-footer { background: #dde3e7; } .sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer { padding: 23px 0 24px; } .sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer--first { border-right: 1px solid #dde3e7; } .sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer__items { margin-top: 8px; } .sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer__items .offer__image { float: left; margin-right: 18px; } .sdx-container .nav .nav__level1 .nav__subnav .nav-footer .offer__items .offer__content { display: table; word-wrap: normal; } .sdx-container .nav .nav__level1 .nav__subnav .nav-section .nav-col { opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } @media (min-width: 1280px) { .sdx-container .nav .nav__level1 .nav__subnav .nav-section .nav-col { page-break-after: column; -moz-column-break-after: column; break-after: column; } } .sdx-container .nav .nav__level1 .nav__subnav .nav-section .nav-col.is-active { opacity: 1; } .sdx-container .nav .nav__level1 .nav__subnav .nav-title { font-weight: 600; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; } .sdx-container .nav .nav__level1 .nav__subnav .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; text-decoration: none; white-space: normal; } .sdx-container .nav .nav__level1 .nav__subnav .nav-items { display: flex; flex-direction: column; margin-top: 8px; } .sdx-container .nav .nav__level1 .nav__subnav .nav-item { position: relative; float: left; } .sdx-container .nav .nav__level1 .nav__subnav .nav-item:not(:first-child) { margin-top: 8px; } @media (max-width: 767px) { .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary { display: none; position: absolute; left: 0; top: 80px; width: 100%; height: 0; padding: 0; margin: 0; background: #fff; overflow: hidden; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary.is-open { display: block; height: auto; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-item { width: 100%; margin: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link { display: block; height: 80px; padding: 24px 24px 20px; border-bottom: 1px solid #dde3e7; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header { display: flex; justify-content: space-between; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon { position: relative; display: inline-block; left: 0; width: 16px; margin-bottom: 1px; pointer-events: none; transform-origin: 50% 50%; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before { left: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after { left: 6px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::before { transform: rotate(45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--header .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--active .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link.is-active .arrow-icon::after, .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link--active .arrow-icon::after { transform: rotate(45deg); } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon { position: relative; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before, .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #0851da; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::before { left: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__primary .nav-link:hover .arrow-icon::after { left: 6px; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav { position: static; left: 0; top: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .container { padding: 0; margin: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-footer, .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .offer { overflow: hidden; display: none; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-section { margin: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-col { padding: 15px 24px; border-bottom: 1px solid #dde3e7; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-title { font-weight: 400; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-items { margin: 0; } .sdx-container .nav .nav__level1 .nav__mainnav .nav__subnav .nav-item { display: none; } } .sdx-container .nav .nav__level2.is-sticky .nav-back, .sdx-container .nav .nav__level2 .nav-back { position: absolute; margin-top: 14px; } .sdx-container .nav .nav__level2.is-sticky .nav-back::after, .sdx-container .nav .nav__level2 .nav-back::after { position: absolute; top: 4px; left: 32px; height: 16px; border-right: 1px solid #979797; opacity: 1; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; } .sdx-container .nav .nav__level2 .nav-back .nav-text { padding-left: 8px; opacity: 0; transition: visibility 0ms linear, opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav .nav__level2.is-sticky .nav-title, .sdx-container .nav .nav__level2 .nav-title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 16px; position: relative; width: 100%; margin-left: 30px; padding-left: 17px; color: #666; transition-property: margin, padding, line-height, letter-spacing, font-size; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav .nav__level2 { position: relative; width: 100%; height: 48px; background: #eef3f6; transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav .nav__level2 .nav__wrapper { display: block; padding-top: 14px; transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav .nav__level2 .nav__currentpage { display: flex; justify-content: space-between; cursor: pointer; } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon { position: relative; display: inline-block; float: right; top: 3px; left: 2px; width: 16px; height: 16px; pointer-events: none; transform: scale(0.8125); transform-origin: 50% 50%; } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::before, .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::before { left: 0; } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::after { left: 6px; } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::before { transform: rotate(45deg); } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .nav .nav__level2 .nav__currentpage.is-open .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .nav .nav__level2 .nav__currentpage.is-open .arrow-icon::after { transform: rotate(45deg); } .sdx-container .nav .nav__level2 .nav__quicklinks { display: none; position: absolute; top: 48px; left: 0; width: 100%; height: 0; overflow: hidden; background: #dde3e7; } .sdx-container .nav .nav__level2 .nav__quicklinks.is-open { display: block; height: auto; } .sdx-container .nav .nav__level2 .nav-link { color: #015; } .sdx-container .nav .nav__level2 .nav-link .icon { position: relative; top: 1px; margin-left: -2px; font-size: 21px; } .sdx-container .nav .nav__level2 .nav-link:hover { color: #0851da; } .sdx-container .nav .nav__level2 .nav-items { padding: 20px 24px 19px; transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav .nav__level2 .nav-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 15px; } .sdx-container .nav .nav__level2 .nav-item:last-child { margin-bottom: 0; } @media (min-width: 768px) { .sdx-container .nav .nav__level2 { height: 104px; } .sdx-container .nav .nav__level2 .nav__wrapper { display: flex; justify-content: space-between; padding-top: 55px; } .sdx-container .nav .nav__level2 .nav__currentpage { cursor: auto; } .sdx-container .nav .nav__level2 .nav__currentpage .arrow-icon { display: none; } .sdx-container .nav .nav__level2 .nav__quicklinks { display: block; position: static; left: auto; width: auto; height: 100%; margin: 0; margin-left: 24px; background: none; } .sdx-container .nav .nav__level2 .nav-back { margin-top: 14px; } .sdx-container .nav .nav__level2 .nav-back::after { opacity: 0; } .sdx-container .nav .nav__level2 .nav-back .nav-text { opacity: 1; } .sdx-container .nav .nav__level2 .nav-title { line-height: 32px; letter-spacing: -0.35px; font-size: 24px; margin-left: 0; padding-left: 0; } .sdx-container .nav .nav__level2 .nav-title::before { content: none; } .sdx-container .nav .nav__level2 .nav-items { display: flex; justify-content: flex-end; padding: 0; padding-top: 6px; } .sdx-container .nav .nav__level2 .nav-item { position: relative; margin: 0; padding: 0 18px; flex: 0 1 auto; } .sdx-container .nav .nav__level2 .nav-item:first-child { padding-left: 0; } .sdx-container .nav .nav__level2 .nav-item:last-child { padding-right: 0; } .sdx-container .nav .nav__level2 .nav-item:not(:last-child)::after { position: absolute; top: 2px; right: 0; height: 18px; border-right: 1px solid #d6d6d6; content: ""; } } .sdx-container .nav .nav__level2.is-sticky { position: fixed; top: 0; left: 0; height: 48px; } .sdx-container .nav .nav__level2.is-sticky .nav__wrapper { padding-top: 14px; } @media (min-width: 768px) { .sdx-container .nav .nav__level2.is-sticky .nav-back .nav-text { opacity: 0; } .sdx-container .nav .nav__level2.is-sticky .nav-items { padding: 0; padding-top: 1px; } } .sdx-container .nav-top { position: relative; height: 80px; border-bottom: 1px solid #dde3e7; background: #fff; transform-origin: bottom; z-index: 50100; } .sdx-container .nav-top a, .sdx-container .nav-top button { margin: 0; padding: 0; border: 0; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav-top ul, .sdx-container .nav-top ol { margin: 0; padding: 0; list-style: none; } .sdx-container .nav-top .nav-items::after { content: ""; display: block; clear: both; } .sdx-container .nav-top .logo .logo-lifeform, .sdx-container .nav-top .logo .logo-type { display: inline-block; float: left; position: relative; left: 0; top: 0; height: 40px; } .sdx-container .nav-top .logo .logo-lifeform { background-size: 3600px 40px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/lifeform-spritesheet.png"); width: 40px; height: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width: 40px; -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .nav-top .logo .logo-lifeform { background-image: url("../images/lifeform-spritesheet@2x.png"); } } @keyframes initialAnimation { 100% { background-position: -3600px; } } @keyframes repeatingAnimation { 0% { background-position: 0; } 80% { background-position: 0; } 100% { background-position: -3600px; } } .sdx-container .nav-top .logo .nova-flag { display: inline-block; float: left; position: relative; margin-left: 10px; margin-top: 5px; } .sdx-container .nav-top .nav-hamburger { display: block; } .sdx-container .nav-top .nav-hamburger span { display: block; position: relative; width: 20px; height: 2px; margin: 5px 0; border-radius: 2px; background: #015; transform-origin: center; transition: all 75ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav-top .nav-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sdx-container .nav-top .nav-hamburger.is-active span:nth-child(2) { opacity: 0; } .sdx-container .nav-top .nav-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 0) { .sdx-container .nav-top .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 480px) { .sdx-container .nav-top .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 768px) { .sdx-container .nav-top .container { margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; width: 742px; } } @media (min-width: 1024px) { .sdx-container .nav-top .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 964px; } } @media (min-width: 1280px) { .sdx-container .nav-top .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 1224px; } } @media (min-width: 1440px) { .sdx-container .nav-top .container { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; width: 1380px; } } .sdx-container .nav-top .logo { margin-left: -18px; } @media (max-width: 479px) { .sdx-container .nav-top .logo .logo-type { display: none; } } .sdx-container .nav-top .nav-section { margin: 30px 0 -6px; } .sdx-container .nav-top .nav-section .nav-col { padding-bottom: 36px; } .sdx-container .nav-top .nav-item { float: left; margin: 0; margin-right: 28px; } .sdx-container .nav-top .nav-item:last-child { margin-right: 0; } .sdx-container .nav-top a.nav-icon, .sdx-container .nav-top a.nav-link, .sdx-container .nav-top button.nav-icon, .sdx-container .nav-top button.nav-link { color: #015; } .sdx-container .nav-top a.nav-icon:focus, .sdx-container .nav-top a.nav-icon:hover, .sdx-container .nav-top a.nav-link:focus, .sdx-container .nav-top a.nav-link:hover, .sdx-container .nav-top button.nav-icon:focus, .sdx-container .nav-top button.nav-icon:hover, .sdx-container .nav-top button.nav-link:focus, .sdx-container .nav-top button.nav-link:hover { color: #0851da; } .sdx-container .nav-top .nav-icon { font-size: 26px; } .sdx-container .nav-top .nav-link { font-weight: 400; line-height: 32px; letter-spacing: -0.35px; font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #015; } .sdx-container .nav-top .nav-link .text-underline { position: relative; pointer-events: none; } .sdx-container .nav-top .nav-link .text-underline::before { position: absolute; top: 34px; width: 100%; height: 1px; pointer-events: none; background-color: #015; transform: scaleX(0); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; } .sdx-container .nav-top .nav-link.is-active .text-underline::before, .sdx-container .nav-top .nav-link--active .text-underline::before { transform: scaleX(1); } .sdx-container .nav-top .nav-link:hover { color: #0851da; } .sdx-container .nav-top .nav-link:hover .text-underline::before { background-color: #0851da; } .sdx-container .nav-top .nav__wrapper { display: flex; width: 100%; height: 80px; } .sdx-container .nav-top .nav__wrapper > .nav__menu { display: flex; flex: 1 1 100%; justify-content: flex-start; padding-top: 24px; } .sdx-container .nav-top .nav__wrapper > .nav__menu > * { display: inherit; } .sdx-container .nav-top .nav__wrapper > .nav__menu--logo { padding-top: 22px; } .sdx-container .nav-top .nav__wrapper > .nav__menu--icon { padding-top: 28px; } .sdx-container .nav-top .nav__wrapper > .nav__menu--icon .nav-item { margin-right: 20px; } .sdx-container .nav-top .nav__wrapper > .nav__menu--icon .nav-item:last-child { margin-right: 0; } .sdx-container .nav-top .nav__wrapper > .nav__menu--left { flex: 1 0 0%; justify-content: flex-start; margin-right: 36px; } .sdx-container .nav-top .nav__wrapper > .nav__menu--center { flex: 0 1 auto; justify-content: center; } .sdx-container .nav-top .nav__wrapper > .nav__menu--right { flex: 1 0 0%; justify-content: flex-end; margin-left: 36px; } @media (max-width: 767px) { .sdx-container .nav-top .nav-toggle { display: block; } .sdx-container .nav-top .nav-toggle.is-open .nav-link .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .nav-top .nav-toggle.is-open .nav-link .arrow-icon::after { transform: rotate(45deg); } .sdx-container .nav-top .nav-toggle .nav-link { display: flex; } .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon { position: relative; display: inline-block; left: 0; width: 16px; margin-bottom: 1px; margin-left: 16px; pointer-events: none; transform-origin: 50% 50%; } .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::before, .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::before { left: 0; } .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::after { left: 6px; } .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::before { transform: rotate(45deg); } .sdx-container .nav-top .nav-toggle .nav-link .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .nav-top .nav-toggle .nav-link:hover { color: #015; } .sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon { position: relative; } .sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::before, .sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #015; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::before { left: 0; } .sdx-container .nav-top .nav-toggle .nav-link:hover .arrow-icon::after { left: 6px; } .sdx-container .nav-top .nav-collapse { display: none; position: absolute; top: 80px; left: 0; width: 100%; height: 0; overflow: hidden; background: #fff; } .sdx-container .nav-top .nav-collapse.is-open { display: block; height: auto; } .sdx-container .nav-top .nav-collapse .nav-item { width: 100%; margin: 0; text-align: center; } .sdx-container .nav-top .nav-collapse .nav-link { display: block; height: 80px; padding: 24px 24px 20px; border-bottom: 1px solid #dde3e7; } } .sdx-container .nav-side { display: flex; flex-direction: column; position: fixed; top: 0; width: 272px; height: 100%; background: #eef3f6; overflow-y: auto; z-index: 50500; } .sdx-container .nav-side a, .sdx-container .nav-side button { margin: 0; padding: 0; border: 0; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav-side ul, .sdx-container .nav-side ol { margin: 0; padding: 0; list-style: none; } .sdx-container .nav-side .nav-items::after { content: ""; display: block; clear: both; } .sdx-container .nav-side .logo .logo-lifeform, .sdx-container .nav-side .logo .logo-type { display: inline-block; float: left; position: relative; left: 0; top: 0; height: 40px; } .sdx-container .nav-side .logo .logo-lifeform { background-size: 3600px 40px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/lifeform-spritesheet.png"); width: 40px; height: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width: 40px; -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .nav-side .logo .logo-lifeform { background-image: url("../images/lifeform-spritesheet@2x.png"); } } @keyframes initialAnimation { 100% { background-position: -3600px; } } @keyframes repeatingAnimation { 0% { background-position: 0; } 80% { background-position: 0; } 100% { background-position: -3600px; } } .sdx-container .nav-side .logo .nova-flag { display: inline-block; float: left; position: relative; margin-left: 10px; margin-top: 5px; } .sdx-container .nav-side .nav-hamburger { display: block; } .sdx-container .nav-side .nav-hamburger span { display: block; position: relative; width: 20px; height: 2px; margin: 5px 0; border-radius: 2px; background: #015; transform-origin: center; transition: all 75ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav-side .nav-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sdx-container .nav-side .nav-hamburger.is-active span:nth-child(2) { opacity: 0; } .sdx-container .nav-side .nav-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .sdx-container .nav-side ~ .site-wrapper { transition: left 0.3s cubic-bezier(0.55, 0.085, 0.32, 1); } .sdx-container .nav-side, .sdx-container .nav-side--left { left: -272px; transition: left 0.3s cubic-bezier(0.55, 0.085, 0.32, 1); } .sdx-container .nav-side.is-open, .sdx-container .nav-side--left.is-open { left: 0; } .sdx-container .nav-side ~ .site-wrapper, .sdx-container .nav-side--left ~ .site-wrapper { position: relative; left: 0; } .sdx-container .nav-side ~ .site-wrapper.is-open, .sdx-container .nav-side--left ~ .site-wrapper.is-open { left: 272px; } .sdx-container .nav-side--right { left: auto; right: -272px; transition: right 0.3s cubic-bezier(0.55, 0.085, 0.32, 1); } .sdx-container .nav-side--right.is-open { left: auto; right: 0; } .sdx-container .nav-side--right ~ .site-wrapper.is-open { left: -272px; } .sdx-container .nav-side .logo { display: block; margin: 0 30px 30px; } .sdx-container .nav-side .nav-items { flex: 1 1 auto; margin: 30px 36px; } .sdx-container .nav-side .nav-items--border .nav-item:not(:last-child) { border-bottom: 1px solid #dde3e7; } .sdx-container .nav-side .nav-item { width: 100%; } .sdx-container .nav-side .nav-item .nav-link { display: flex; padding: 10px 0 9px; color: #015; align-items: center; } .sdx-container .nav-side .nav-item .nav-link .text-underline { position: relative; pointer-events: none; } .sdx-container .nav-side .nav-item .nav-link .text-underline::before { position: absolute; top: 24px; width: 100%; height: 1px; pointer-events: none; background-color: #015; transform: scaleX(0); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); content: ""; } .sdx-container .nav-side .nav-item .nav-link.is-active .text-underline::before, .sdx-container .nav-side .nav-item .nav-link--active .text-underline::before { transform: scaleX(1); } .sdx-container .nav-side .nav-item .nav-link:hover { color: #0851da; } .sdx-container .nav-side .nav-item .nav-link:hover .text-underline::before { background-color: #0851da; } .sdx-container .nav-side .nav-item .icon { margin-right: 16px; font-size: 30px; text-align: center; } .sdx-container .nav-side .nav-item--active .nav-link { color: #1781e3; } @media (max-width: 767px) { .sdx-container .nav-side { width: 250px; } .sdx-container .nav-side ~ .site-wrapper.is-open, .sdx-container .nav-side--left ~ .site-wrapper.is-open { left: 250px; } .sdx-container .nav-side--right { left: auto; right: -250px; } .sdx-container .nav-side--right ~ .site-wrapper.is-open { left: -250px; } .sdx-container .nav-side .logo { margin: 0 14px 14px; } .sdx-container .nav-side .nav-items { margin: 30px 20px; } } .sdx-container .nav-tabs { background: #fff; border-top: 1px solid #e4e9ec; position: fixed; bottom: 0; width: 100%; height: 65px; } .sdx-container .nav-tabs a, .sdx-container .nav-tabs button { margin: 0; padding: 0; border: 0; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .nav-tabs ul, .sdx-container .nav-tabs ol { margin: 0; padding: 0; list-style: none; } .sdx-container .nav-tabs .nav-items { display: flex; flex: 0 1 auto; height: 100%; } .sdx-container .nav-tabs .nav-item { width: 100%; height: 100%; } .sdx-container .nav-tabs .nav-item .nav-link { width: 100%; height: 100%; color: #015; } .sdx-container .nav-tabs .nav-item .nav-link:focus { color: #1781e3; } .sdx-container .nav-tabs .nav-item .nav-link__wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; } .sdx-container .nav-tabs .nav-item .icon { font-size: 30px; text-align: center; } .sdx-container .nav-tabs .nav-item .button__label { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 64px; font-size: 12px; line-height: 1; text-align: center; padding-bottom: 1px; } .sdx-container .nav-tabs .nav-item--active .nav-link { color: #1781e3; } .sdx-container .search { z-index: 50500; } .sdx-container .search.search--mobile { display: block; } @media (min-width: 768px) { .sdx-container .search.search--mobile { display: none; } } .sdx-container .search.search--desktop { display: none; position: absolute; left: 0; width: 100%; } @media (min-width: 768px) { .sdx-container .search.search--desktop { display: block; } } .sdx-container .search__input { display: block; overflow: hidden; position: relative; width: 100%; background: #d1e6f9; color: #666; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .search__input .search__input-wrapper { display: flex; position: relative; justify-content: space-between; align-items: center; width: 100%; height: 80px; } .sdx-container .search__input .search__box { display: flex; width: 100%; } .sdx-container .search__input .search__field { font-weight: 300; line-height: 32px; letter-spacing: -0.35px; font-size: 24px; display: block; width: 100%; vertical-align: middle; transform: translateX(0); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @supports (-ms-ime-align: auto) { .sdx-container .search__input .search__field { line-height: 0; } } .sdx-container .search__input .search__field::-webkit-input-placeholder { color: #666; opacity: 1; } .sdx-container .search__input .search__field::-moz-placeholder { color: #666; opacity: 1; } .sdx-container .search__input .search__field::-ms-input-placeholder { color: #666; opacity: 1; } .sdx-container .search__input .search__field::placeholder { color: #666; opacity: 1; } .sdx-container .search__input .search__field:invalid { transform: translateX(-34px); } .sdx-container .search__input .search__field:invalid ~ .search__icon-clear { visibility: hidden; opacity: 0; transform: scale(0); } .sdx-container .search__input .search__icon-clear { margin-right: 14px; z-index: 10; order: -1; font-size: 20px; visibility: visible; opacity: 1; transform: scale(1); transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .search__input .search__icon-close, .sdx-container .search__input .search__icon-search { margin-left: 14px; font-size: 30px; } .sdx-container .search__input.is-active, .sdx-container .search__input.search--light.is-active { background: #d1e6f9; color: #333; } .sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::-webkit-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::-webkit-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::-moz-placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::-moz-placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::-ms-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::-ms-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field, .sdx-container .search__input.is-active .search__field::placeholder, .sdx-container .search__input.search--light.is-active .search__field, .sdx-container .search__input.search--light.is-active .search__field::placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field:focus::-webkit-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::-webkit-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field:focus::-moz-placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::-moz-placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field:focus::-ms-input-placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::-ms-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input.is-active .search__field:focus::placeholder, .sdx-container .search__input.search--light.is-active .search__field:focus::placeholder { color: #333; opacity: 1; } @media (min-width: 768px) { .sdx-container .search__input, .sdx-container .search__input.search--light { background: #d1e6f9; color: #333; } .sdx-container .search__input .search__field, .sdx-container .search__input .search__field::-webkit-input-placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::-webkit-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field, .sdx-container .search__input .search__field::-moz-placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::-moz-placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field, .sdx-container .search__input .search__field::-ms-input-placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::-ms-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field, .sdx-container .search__input .search__field::placeholder, .sdx-container .search__input.search--light .search__field, .sdx-container .search__input.search--light .search__field::placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field:focus::-webkit-input-placeholder, .sdx-container .search__input.search--light .search__field:focus::-webkit-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field:focus::-moz-placeholder, .sdx-container .search__input.search--light .search__field:focus::-moz-placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field:focus::-ms-input-placeholder, .sdx-container .search__input.search--light .search__field:focus::-ms-input-placeholder { color: #333; opacity: 1; } .sdx-container .search__input .search__field:focus::placeholder, .sdx-container .search__input.search--light .search__field:focus::placeholder { color: #333; opacity: 1; } } .sdx-container .search__input.search--dark.is-active { background: #1781e3; color: #fff; } .sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::-webkit-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::-moz-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::-ms-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field, .sdx-container .search__input.search--dark.is-active .search__field::placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field:focus::-webkit-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field:focus::-moz-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field:focus::-ms-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark.is-active .search__field:focus::placeholder { color: #fff; opacity: 1; } @media (min-width: 768px) { .sdx-container .search__input.search--dark { background: #1781e3; color: #fff; } .sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::-webkit-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::-moz-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::-ms-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field, .sdx-container .search__input.search--dark .search__field::placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field:focus::-webkit-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field:focus::-moz-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field:focus::-ms-input-placeholder { color: #fff; opacity: 1; } .sdx-container .search__input.search--dark .search__field:focus::placeholder { color: #fff; opacity: 1; } } @media (min-width: 768px) { .sdx-container .search--desktop .search__input { max-height: 0; transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .sdx-container .search--desktop .search__input.is-open { max-height: 80px; } } .sdx-container .search__live { display: none; height: 0; width: 100%; overflow: hidden; border-bottom: 1px solid #dde3e7; } .sdx-container .search__live.is-open { display: block; height: auto; } .sdx-container .search__live .live-suggestions { display: none; height: 0; background: #fff; color: #333; } .sdx-container .search__live .live-suggestions.is-open { display: block; height: auto; } .sdx-container .search__live .live-suggestions strong { font-weight: 400; color: #1781e3; } .sdx-container .search__live .live-suggestions li { padding: 15px 0 16px; } .sdx-container .search__live .live-suggestions li:not(:last-child) { border-bottom: 1px solid #e4e9ec; } .sdx-container .search__live .live-footer { display: none; height: 0; background: #dde3e7; } .sdx-container .search__live .live-footer.is-open { display: block; height: auto; } .sdx-container .search__live .live-footer .container { padding-top: 21px; padding-bottom: 24px; } .sdx-container .search__live .live-footer a.live-icon, .sdx-container .search__live .live-footer a.live-title, .sdx-container .search__live .live-footer a.live-link, .sdx-container .search__live .live-footer button.live-icon, .sdx-container .search__live .live-footer button.live-title, .sdx-container .search__live .live-footer button.live-link { color: #015; } .sdx-container .search__live .live-footer a.live-icon:focus, .sdx-container .search__live .live-footer a.live-icon:hover, .sdx-container .search__live .live-footer a.live-title:focus, .sdx-container .search__live .live-footer a.live-title:hover, .sdx-container .search__live .live-footer a.live-link:focus, .sdx-container .search__live .live-footer a.live-link:hover, .sdx-container .search__live .live-footer button.live-icon:focus, .sdx-container .search__live .live-footer button.live-icon:hover, .sdx-container .search__live .live-footer button.live-title:focus, .sdx-container .search__live .live-footer button.live-title:hover, .sdx-container .search__live .live-footer button.live-link:focus, .sdx-container .search__live .live-footer button.live-link:hover { color: #0851da; } .sdx-container .search__live .live-footer .offer { margin-top: 10px; } .sdx-container .search__live .live-footer .offer .offer__image { float: left; margin-right: 18px; } .sdx-container .search__live .live-footer .offer .offer__image img { max-width: 64px; max-height: 64px; } .sdx-container .search__live .live-footer .offer .offer__content { line-height: 24px; letter-spacing: 0; font-size: 16px; display: table; word-wrap: normal; } .sdx-container .footer { z-index: 20000; overflow: hidden; } .sdx-container .footer a, .sdx-container .footer button { margin: 0; padding: 0; } .sdx-container .footer .logo { border: 0; } .sdx-container .footer .nav-section--col-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .footer .nav-section--col-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .footer .nav-section--col-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .footer .nav-section--col-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .footer .nav-section--col-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .footer .nav-section--col-6 { -moz-column-count: 6; column-count: 6; } @media (max-width: 767px) { .sdx-container .footer .nav-section { -moz-column-count: 1; column-count: 1; } } @media (min-width: 768px) { .sdx-container .footer .nav-section { -moz-column-gap: 16px; column-gap: 16px; } .sdx-container .footer .nav-section--col-md-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .footer .nav-section--col-md-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .footer .nav-section--col-md-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .footer .nav-section--col-md-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .footer .nav-section--col-md-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .footer .nav-section--col-md-6 { -moz-column-count: 6; column-count: 6; } } @media (min-width: 1024px) { .sdx-container .footer .nav-section { -moz-column-gap: 24px; column-gap: 24px; } .sdx-container .footer .nav-section--col-lg-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .footer .nav-section--col-lg-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .footer .nav-section--col-lg-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .footer .nav-section--col-lg-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .footer .nav-section--col-lg-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .footer .nav-section--col-lg-6 { -moz-column-count: 6; column-count: 6; } } @media (min-width: 1280px) { .sdx-container .footer .nav-section { -moz-column-gap: 24px; column-gap: 24px; } .sdx-container .footer .nav-section--col-xl-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .footer .nav-section--col-xl-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .footer .nav-section--col-xl-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .footer .nav-section--col-xl-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .footer .nav-section--col-xl-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .footer .nav-section--col-xl-6 { -moz-column-count: 6; column-count: 6; } } @media (min-width: 1440px) { .sdx-container .footer .nav-section { -moz-column-gap: 24px; column-gap: 24px; } .sdx-container .footer .nav-section--col-ul-1 { -moz-column-count: 1; column-count: 1; } .sdx-container .footer .nav-section--col-ul-2 { -moz-column-count: 2; column-count: 2; } .sdx-container .footer .nav-section--col-ul-3 { -moz-column-count: 3; column-count: 3; } .sdx-container .footer .nav-section--col-ul-4 { -moz-column-count: 4; column-count: 4; } .sdx-container .footer .nav-section--col-ul-5 { -moz-column-count: 5; column-count: 5; } .sdx-container .footer .nav-section--col-ul-6 { -moz-column-count: 6; column-count: 6; } } .sdx-container .footer .nav-section .nav-col { display: table; width: 100%; overflow: hidden; page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } @media (min-width: 1024px) { .sdx-container .footer .nav-section .nav-col { page-break-after: column; -moz-column-break-after: column; break-after: column; } } .sdx-container .footer .nav-items::after { content: ""; display: block; clear: both; } .sdx-container .footer .logo { display: flex; width: 100%; margin-top: 31px; text-align: center; justify-content: center; } @media (min-width: 768px) { .sdx-container .footer .logo { width: auto; margin-top: 22px; margin-left: -18px; float: left; text-align: left; } } .sdx-container .footer .logo .logo-lifeform { background-size: 3600px 40px; background-position: 0 0; background-repeat: no-repeat; background-image: url("../images/lifeform-spritesheet.png"); width: 40px; height: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width: 40px; -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90); display: inline-block; position: relative; left: 0; top: 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .sdx-container .footer .logo .logo-lifeform { background-image: url("../images/lifeform-spritesheet@2x.png"); } } @keyframes initialAnimation { 100% { background-position: -3600px; } } @keyframes repeatingAnimation { 0% { background-position: 0; } 80% { background-position: 0; } 100% { background-position: -3600px; } } @media (min-width: 768px) { .sdx-container .footer--compact { height: 80px; } } .sdx-container .footer--compact .nav-link { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sdx-container .footer--compact .nav-items { margin-top: 26px; margin-bottom: 49px; text-align: center; } @media (min-width: 768px) { .sdx-container .footer--compact .nav-items { float: right; margin-top: 29px; margin-bottom: 0; text-align: inherit; } } .sdx-container .footer--compact .nav-items .nav-item { margin-bottom: 22px; margin-right: 0; } .sdx-container .footer--compact .nav-items .nav-item:first-child { margin-left: 0; } .sdx-container .footer--compact .nav-items .nav-item:last-child { margin-right: 0; } @media (min-width: 768px) { .sdx-container .footer--compact .nav-items .nav-item { float: left; margin-bottom: 0; margin-right: 22px; } } .sdx-container .footer--full .nav-section { min-height: 100%; } .sdx-container .footer--full .nav-title { font-weight: 400; line-height: 24px; letter-spacing: -0.1px; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: 0; } .sdx-container .footer--full .nav-link { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sdx-container .footer--full .nav-icon { display: flex; border: 0; background: 0; } .sdx-container .footer--full .nav-items { text-align: center; } @media (min-width: 768px) { .sdx-container .footer--full .nav-items { text-align: inherit; } } .sdx-container .footer--full .nav-items--divider .nav-item { margin: 0; } .sdx-container .footer--full .nav-items--divider .nav-item:not(:first-child)::before { content: "|"; position: relative; top: -1px; margin: 0; padding-left: 11px; padding-right: 11px; font-size: 16px; color: #fff; } @media (max-width: 1023px) { .sdx-container .footer--full .nav-section { -moz-column-count: 1; column-count: 1; } } .sdx-container .footer--full .footer__top { padding: 35px 0 72px; } @media (min-width: 0) { .sdx-container .footer--full .footer__top .nav-col > .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 480px) { .sdx-container .footer--full .footer__top .nav-col > .container { margin-left: calc(24px - 4px); margin-right: calc(24px - 4px); padding-left: 4px; padding-right: 4px; width: auto; } } @media (min-width: 768px) { .sdx-container .footer--full .footer__top .nav-col > .container { margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; width: 742px; } } @media (min-width: 1024px) { .sdx-container .footer--full .footer__top .nav-col > .container { padding: 0; margin: 0; width: auto; } } .sdx-container .footer--full .footer__top .nav-items { margin-top: 8px; } .sdx-container .footer--full .footer__top .nav-items .nav-item { margin-bottom: 8px; } .sdx-container .footer--full .footer__top .nav-items .nav-item:last-child { margin: 0; } @media (max-width: 1023px) { .sdx-container .footer--full .footer__top { padding: 0; } .sdx-container .footer--full .footer__top > .container { padding: 0; margin: 0; width: auto; } .sdx-container .footer--full .footer__top .nav-col { padding: 22px 0 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .sdx-container .footer--full .footer__top .nav-col:last-of-type { border-bottom: 0; } .sdx-container .footer--full .footer__top .nav-items { text-align: inherit; } } .sdx-container .footer--full .footer__bottom { height: 100%; padding: 27px 0 25px; } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom { height: 128px; padding: 25px 0; } } .sdx-container .footer--full .footer__bottom .row { margin-bottom: 0; } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom .row { margin-bottom: 13px; } } .sdx-container .footer--full .footer__bottom .row:last-child { margin-bottom: 0; } .sdx-container .footer--full .footer__bottom .nav-items { display: inline-block; } .sdx-container .footer--full .footer__bottom .nav-items--divider .nav-item { margin: 0; } .sdx-container .footer--full .footer__bottom .nav-item { float: left; margin-right: 22px; text-align: center; } .sdx-container .footer--full .footer__bottom .nav-item:last-child { margin: 0; } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom .nav-item { text-align: left; } } .sdx-container .footer--full .footer__bottom .footer--left, .sdx-container .footer--full .footer__bottom .footer--right { float: none; margin-top: 0; text-align: center; } .sdx-container .footer--full .footer__bottom .footer--social-icons { text-align: center; margin-bottom: 12px; } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom .footer--social-icons { margin-bottom: 0; } } .sdx-container .footer--full .footer__bottom .footer--social-icons .nav-item { margin-right: 24px; } .sdx-container .footer--full .footer__bottom .footer--social-icons .nav-item:last-child { margin: 0; } .sdx-container .footer--full .footer__bottom .footer--nav { margin-bottom: 9px; } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom .footer--nav { margin-bottom: 0; } } .sdx-container .footer--full .footer__bottom .footer--copyright { font-weight: 400; line-height: 24px; letter-spacing: 0; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom .footer--copyright { font-weight: 400; line-height: 24px; letter-spacing: 0.1px; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } @media (min-width: 768px) { .sdx-container .footer--full .footer__bottom .footer--left { float: left; } .sdx-container .footer--full .footer__bottom .footer--right { float: right; } .sdx-container .footer--full .footer__bottom .footer--nav { margin-top: 6px; } } .sdx-container .footer--full .nav-title, .sdx-container .footer--full.footer--dark .nav-title { color: #fff; } .sdx-container .footer--full .footer__top, .sdx-container .footer--full.footer--dark .footer__top { background: #474747; } .sdx-container .footer--full .footer__top .nav-col, .sdx-container .footer--full.footer--dark .footer__top .nav-col { border-bottom-color: rgba(255, 255, 255, 0.4); } .sdx-container .footer--full .footer__top .accordion__toggle .accordion__header, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .accordion__header { width: calc(100% - 16px - 8px); } .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon { position: relative; top: 4px; left: 0; width: 16px; height: 16px; transform: none; } .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #fff; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before { left: 0; } .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after { left: 6px; } .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before { transform: rotate(45deg); } .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon { position: relative; } .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #1781e3; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before { left: 0; } .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::after { left: 6px; } .sdx-container .footer--full .footer__top .is-open .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .footer--full .footer__top .is-open .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::after { transform: rotate(45deg); } .sdx-container .footer--full .footer__bottom, .sdx-container .footer--full.footer--dark .footer__bottom { background: #333; } .sdx-container .footer--full.footer--light .nav-title { color: #333; } .sdx-container .footer--full.footer--light .nav-items--divider .nav-item::before { color: #333; } .sdx-container .footer--full.footer--light .footer__top { background: #eef3f6; } .sdx-container .footer--full.footer--light .footer__top .nav-col { border-bottom-color: #bbb; } .sdx-container .footer--full.footer--light .footer__top .nav-link { color: #666; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .accordion__header { width: calc(100% - 16px - 8px); } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon { position: relative; top: 4px; left: 0; width: 16px; height: 16px; transform: none; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #333; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before { left: 0; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after { left: 6px; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before { transform: rotate(45deg); } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after { transform: rotate(-45deg); } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon { position: relative; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::after { position: absolute; top: 50%; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; background: #1781e3; width: 10px; height: 2px; -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ""; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before { left: 0; } .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::after { left: 6px; } .sdx-container .footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::before { transform: rotate(-45deg); } .sdx-container .footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::after { transform: rotate(45deg); } .sdx-container .footer--full.footer--light .footer__bottom { background: #dde3e7; } .sdx-container .footer--full.footer--light .footer__bottom .footer--copyright { color: #333; } .sdx-container .footer, .sdx-container .footer.footer--dark { color: #fff; background: #474747; } .sdx-container .footer a.nav-title, .sdx-container .footer a.nav-link, .sdx-container .footer button.nav-title, .sdx-container .footer button.nav-link, .sdx-container .footer.footer--dark a.nav-title, .sdx-container .footer.footer--dark a.nav-link, .sdx-container .footer.footer--dark button.nav-title, .sdx-container .footer.footer--dark button.nav-link { color: #fff; } .sdx-container .footer a.nav-title:hover, .sdx-container .footer a.nav-title:focus, .sdx-container .footer a.nav-link:hover, .sdx-container .footer a.nav-link:focus, .sdx-container .footer button.nav-title:hover, .sdx-container .footer button.nav-title:focus, .sdx-container .footer button.nav-link:hover, .sdx-container .footer button.nav-link:focus, .sdx-container .footer.footer--dark a.nav-title:hover, .sdx-container .footer.footer--dark a.nav-title:focus, .sdx-container .footer.footer--dark a.nav-link:hover, .sdx-container .footer.footer--dark a.nav-link:focus, .sdx-container .footer.footer--dark button.nav-title:hover, .sdx-container .footer.footer--dark button.nav-title:focus, .sdx-container .footer.footer--dark button.nav-link:hover, .sdx-container .footer.footer--dark button.nav-link:focus { border-bottom-color: #fff; color: #fff; } .sdx-container .footer svg .icon, .sdx-container .footer.footer--dark svg .icon { fill: #fff; } .sdx-container .footer.footer--light { color: #333; background: #eef3f6; } .sdx-container .footer.footer--light a.nav-title, .sdx-container .footer.footer--light a.nav-link, .sdx-container .footer.footer--light button.nav-title, .sdx-container .footer.footer--light button.nav-link { color: #333; } .sdx-container .footer.footer--light a.nav-title:hover, .sdx-container .footer.footer--light a.nav-title:focus, .sdx-container .footer.footer--light a.nav-link:hover, .sdx-container .footer.footer--light a.nav-link:focus, .sdx-container .footer.footer--light button.nav-title:hover, .sdx-container .footer.footer--light button.nav-title:focus, .sdx-container .footer.footer--light button.nav-link:hover, .sdx-container .footer.footer--light button.nav-link:focus { border-bottom-color: #333; color: #333; } .sdx-container .footer.footer--light svg .icon { fill: #333; } .sdx-container .footer--left { float: left; } .sdx-container .footer--right { float: right; } .sdx-container .footer .text-sm { font-weight: 400; line-height: 24px; letter-spacing: 0.1px; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sdx-container .comments__input { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: flex; border: 0; } .sdx-container .comments__input .input-wrapper { width: 100%; } .sdx-container .comments__input .input-wrapper .button { float: right; margin-bottom: 24px; } .sdx-container .comments__input .input-wrapper .button.disabled { border-color: rgba(207, 213, 217, 0.4); background-color: rgba(207, 213, 217, 0.4); color: rgba(51, 51, 51, 0.4); } @media (max-width: 767px) { .sdx-container .comments__input .input-wrapper .button { display: none; } } .sdx-container .comments__input .avatar { margin-right: 18px; margin-top: 5px; } @media (max-width: 767px) { .sdx-container .comments__input .avatar { display: none; } } .sdx-container .comments__input .avatar .avatar__image { width: 41px; height: 41px; border-radius: 50%; } .sdx-container .comments__input .input-multiline, .sdx-container .comments__input .input-field--multiline { display: inline-flex; width: 100%; margin-bottom: 24px; } .sdx-container .comments__input .input-multiline textarea, .sdx-container .comments__input .input-field--multiline textarea { margin-top: 0 !important; } .sdx-container .comments__input .is-hidden { display: none; } .sdx-container .comments__feed { margin-top: 1px; } .sdx-container .comment { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; } @media (min-width: 0) { .sdx-container .comment > .comment { padding-left: calc((98vw - 48px) / 12); } } @media (min-width: 480px) { .sdx-container .comment > .comment { padding-left: 36.3333333333px; } } @media (min-width: 768px) { .sdx-container .comment > .comment { padding-left: 61.8333333333px; } } @media (min-width: 1024px) { .sdx-container .comment > .comment { padding-left: 80.3333333333px; } } @media (min-width: 1280px) { .sdx-container .comment > .comment { padding-left: 102px; } } @media (min-width: 1440px) { .sdx-container .comment > .comment { padding-left: 115px; } } .sdx-container .comment > .comment > .comment { padding-left: 0; } @media (min-width: 768px) and (min-width: 0) { .sdx-container .comment > .comment > .comment { padding-left: calc((98vw - 48px) / 12); } } @media (min-width: 768px) and (min-width: 480px) { .sdx-container .comment > .comment > .comment { padding-left: 36.3333333333px; } } @media (min-width: 768px) and (min-width: 768px) { .sdx-container .comment > .comment > .comment { padding-left: 61.8333333333px; } } @media (min-width: 768px) and (min-width: 1024px) { .sdx-container .comment > .comment > .comment { padding-left: 80.3333333333px; } } @media (min-width: 768px) and (min-width: 1280px) { .sdx-container .comment > .comment > .comment { padding-left: 102px; } } @media (min-width: 768px) and (min-width: 1440px) { .sdx-container .comment > .comment > .comment { padding-left: 115px; } } .sdx-container .comment > .comment > .comment .comment { padding-left: 0; } .sdx-container .comment__wrapper { margin-top: -1px; padding: 13px 0 16px; border-top: 1px solid #e4e9ec; border-bottom: 1px solid #e4e9ec; } .sdx-container .comment__header { line-height: 24px; letter-spacing: -0.1px; font-size: 18px; display: flex; margin-bottom: 8px; } .sdx-container .comment__header .author { flex: 1; overflow: hidden; } .sdx-container .comment__header .author__title, .sdx-container .comment__header .author__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; } .sdx-container .comment__header .meta { margin-left: 18px; align-self: center; } @media (max-width: 767px) { .sdx-container .comment__header .meta { display: none; } } .sdx-container .comment__body { margin-bottom: 7px; } .sdx-container .comment__footer .icon { bottom: -1px; font-size: 20px; } .sdx-container .comment__footer .time { line-height: 24px; letter-spacing: 0.1px; font-size: 14px; float: right; margin-top: 2px; opacity: 0.5; } .sdx-container .comment .link, .sdx-container .comment .link:hover, .sdx-container .comment .link:focus { border: 0; } .sdx-container .comment .avatar { margin-right: 18px; margin-top: 3px; } .sdx-container .comment .avatar .avatar__image { width: 41px; height: 41px; border-radius: 50%; } .sdx-container .bg--dark .comments__input .input-wrapper .button.disabled { background-color: transparent; color: rgba(207, 213, 217, 0.4); } .sdx-container .bg--dark .comment__wrapper { border-top: 1px solid #e4e9ec; border-bottom: 1px solid #e4e9ec; } .sdx-container .bg--dark .comment .link { border: 0; color: #1781e3; } .sdx-container .bg--dark .comment .link:hover, .sdx-container .bg--dark .comment .link:focus { border: 0; color: #0851da; } .sdx-container .clearfix::after { content: ""; display: block; clear: both; } @media (min-width: 0) { .sdx-container .margin-xs-0 { margin: 0px !important; } .sdx-container .margin-xs-1 { margin: 8px !important; } .sdx-container .margin-xs-2 { margin: 16px !important; } .sdx-container .margin-xs-3 { margin: 24px !important; } .sdx-container .margin-xs-4 { margin: 32px !important; } .sdx-container .margin-xs-top-0 { margin-top: 0px !important; } .sdx-container .margin-xs-top-1 { margin-top: 8px !important; } .sdx-container .margin-xs-top-2 { margin-top: 16px !important; } .sdx-container .margin-xs-top-3 { margin-top: 24px !important; } .sdx-container .margin-xs-top-4 { margin-top: 32px !important; } .sdx-container .margin-xs-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-xs-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-xs-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-xs-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-xs-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-xs-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-xs-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-xs-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-xs-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-xs-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-xs-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-xs-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-xs-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-xs-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-xs-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } } @media (min-width: 480px) { .sdx-container .margin-sm-0 { margin: 0px !important; } .sdx-container .margin-sm-1 { margin: 8px !important; } .sdx-container .margin-sm-2 { margin: 16px !important; } .sdx-container .margin-sm-3 { margin: 24px !important; } .sdx-container .margin-sm-4 { margin: 32px !important; } .sdx-container .margin-sm-top-0 { margin-top: 0px !important; } .sdx-container .margin-sm-top-1 { margin-top: 8px !important; } .sdx-container .margin-sm-top-2 { margin-top: 16px !important; } .sdx-container .margin-sm-top-3 { margin-top: 24px !important; } .sdx-container .margin-sm-top-4 { margin-top: 32px !important; } .sdx-container .margin-sm-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-sm-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-sm-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-sm-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-sm-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-sm-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-sm-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-sm-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-sm-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-sm-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-sm-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-sm-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-sm-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-sm-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-sm-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } } @media (min-width: 768px) { .sdx-container .margin-md-0 { margin: 0px !important; } .sdx-container .margin-md-1 { margin: 8px !important; } .sdx-container .margin-md-2 { margin: 16px !important; } .sdx-container .margin-md-3 { margin: 24px !important; } .sdx-container .margin-md-4 { margin: 32px !important; } .sdx-container .margin-md-top-0 { margin-top: 0px !important; } .sdx-container .margin-md-top-1 { margin-top: 8px !important; } .sdx-container .margin-md-top-2 { margin-top: 16px !important; } .sdx-container .margin-md-top-3 { margin-top: 24px !important; } .sdx-container .margin-md-top-4 { margin-top: 32px !important; } .sdx-container .margin-md-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-md-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-md-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-md-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-md-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-md-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-md-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-md-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-md-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-md-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-md-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-md-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-md-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-md-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-md-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } } @media (min-width: 1024px) { .sdx-container .margin-lg-0 { margin: 0px !important; } .sdx-container .margin-lg-1 { margin: 8px !important; } .sdx-container .margin-lg-2 { margin: 16px !important; } .sdx-container .margin-lg-3 { margin: 24px !important; } .sdx-container .margin-lg-4 { margin: 32px !important; } .sdx-container .margin-lg-top-0 { margin-top: 0px !important; } .sdx-container .margin-lg-top-1 { margin-top: 8px !important; } .sdx-container .margin-lg-top-2 { margin-top: 16px !important; } .sdx-container .margin-lg-top-3 { margin-top: 24px !important; } .sdx-container .margin-lg-top-4 { margin-top: 32px !important; } .sdx-container .margin-lg-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-lg-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-lg-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-lg-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-lg-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-lg-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-lg-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-lg-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-lg-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-lg-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-lg-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-lg-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-lg-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-lg-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-lg-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } } @media (min-width: 1280px) { .sdx-container .margin-xl-0 { margin: 0px !important; } .sdx-container .margin-xl-1 { margin: 8px !important; } .sdx-container .margin-xl-2 { margin: 16px !important; } .sdx-container .margin-xl-3 { margin: 24px !important; } .sdx-container .margin-xl-4 { margin: 32px !important; } .sdx-container .margin-xl-top-0 { margin-top: 0px !important; } .sdx-container .margin-xl-top-1 { margin-top: 8px !important; } .sdx-container .margin-xl-top-2 { margin-top: 16px !important; } .sdx-container .margin-xl-top-3 { margin-top: 24px !important; } .sdx-container .margin-xl-top-4 { margin-top: 32px !important; } .sdx-container .margin-xl-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-xl-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-xl-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-xl-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-xl-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-xl-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-xl-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-xl-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-xl-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-xl-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-xl-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-xl-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-xl-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-xl-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-xl-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } } @media (min-width: 1440px) { .sdx-container .margin-ul-0 { margin: 0px !important; } .sdx-container .margin-ul-1 { margin: 8px !important; } .sdx-container .margin-ul-2 { margin: 16px !important; } .sdx-container .margin-ul-3 { margin: 24px !important; } .sdx-container .margin-ul-4 { margin: 32px !important; } .sdx-container .margin-ul-top-0 { margin-top: 0px !important; } .sdx-container .margin-ul-top-1 { margin-top: 8px !important; } .sdx-container .margin-ul-top-2 { margin-top: 16px !important; } .sdx-container .margin-ul-top-3 { margin-top: 24px !important; } .sdx-container .margin-ul-top-4 { margin-top: 32px !important; } .sdx-container .margin-ul-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-ul-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-ul-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-ul-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-ul-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-ul-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-ul-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-ul-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-ul-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-ul-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-ul-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-ul-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-ul-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-ul-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-ul-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } } .sdx-container .margin-0 { margin: 0px !important; } .sdx-container .margin-1 { margin: 8px !important; } .sdx-container .margin-2 { margin: 16px !important; } .sdx-container .margin-3 { margin: 24px !important; } .sdx-container .margin-4 { margin: 32px !important; } .sdx-container .margin-top-0 { margin-top: 0px !important; } .sdx-container .margin-top-1 { margin-top: 8px !important; } .sdx-container .margin-top-2 { margin-top: 16px !important; } .sdx-container .margin-top-3 { margin-top: 24px !important; } .sdx-container .margin-top-4 { margin-top: 32px !important; } .sdx-container .margin-bottom-0 { margin-bottom: 0px !important; } .sdx-container .margin-bottom-1 { margin-bottom: 8px !important; } .sdx-container .margin-bottom-2 { margin-bottom: 16px !important; } .sdx-container .margin-bottom-3 { margin-bottom: 24px !important; } .sdx-container .margin-bottom-4 { margin-bottom: 32px !important; } .sdx-container .margin-h-0 { margin-left: 0px !important; margin-right: 0px !important; } .sdx-container .margin-h-1 { margin-left: 8px !important; margin-right: 8px !important; } .sdx-container .margin-h-2 { margin-left: 16px !important; margin-right: 16px !important; } .sdx-container .margin-h-3 { margin-left: 24px !important; margin-right: 24px !important; } .sdx-container .margin-h-4 { margin-left: 32px !important; margin-right: 32px !important; } .sdx-container .margin-v-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .sdx-container .margin-v-1 { margin-top: 8px !important; margin-bottom: 8px !important; } .sdx-container .margin-v-2 { margin-top: 16px !important; margin-bottom: 16px !important; } .sdx-container .margin-v-3 { margin-top: 24px !important; margin-bottom: 24px !important; } .sdx-container .margin-v-4 { margin-top: 32px !important; margin-bottom: 32px !important; } @media (min-width: 0) { .sdx-container .padding-xs-0 { padding: 0px !important; } .sdx-container .padding-xs-1 { padding: 8px !important; } .sdx-container .padding-xs-2 { padding: 16px !important; } .sdx-container .padding-xs-3 { padding: 24px !important; } .sdx-container .padding-xs-4 { padding: 32px !important; } .sdx-container .padding-xs-top-0 { padding-top: 0px !important; } .sdx-container .padding-xs-top-1 { padding-top: 8px !important; } .sdx-container .padding-xs-top-2 { padding-top: 16px !important; } .sdx-container .padding-xs-top-3 { padding-top: 24px !important; } .sdx-container .padding-xs-top-4 { padding-top: 32px !important; } .sdx-container .padding-xs-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-xs-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-xs-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-xs-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-xs-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-xs-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-xs-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-xs-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-xs-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-xs-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-xs-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-xs-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-xs-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-xs-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-xs-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } } @media (min-width: 480px) { .sdx-container .padding-sm-0 { padding: 0px !important; } .sdx-container .padding-sm-1 { padding: 8px !important; } .sdx-container .padding-sm-2 { padding: 16px !important; } .sdx-container .padding-sm-3 { padding: 24px !important; } .sdx-container .padding-sm-4 { padding: 32px !important; } .sdx-container .padding-sm-top-0 { padding-top: 0px !important; } .sdx-container .padding-sm-top-1 { padding-top: 8px !important; } .sdx-container .padding-sm-top-2 { padding-top: 16px !important; } .sdx-container .padding-sm-top-3 { padding-top: 24px !important; } .sdx-container .padding-sm-top-4 { padding-top: 32px !important; } .sdx-container .padding-sm-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-sm-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-sm-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-sm-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-sm-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-sm-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-sm-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-sm-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-sm-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-sm-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-sm-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-sm-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-sm-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-sm-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-sm-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } } @media (min-width: 768px) { .sdx-container .padding-md-0 { padding: 0px !important; } .sdx-container .padding-md-1 { padding: 8px !important; } .sdx-container .padding-md-2 { padding: 16px !important; } .sdx-container .padding-md-3 { padding: 24px !important; } .sdx-container .padding-md-4 { padding: 32px !important; } .sdx-container .padding-md-top-0 { padding-top: 0px !important; } .sdx-container .padding-md-top-1 { padding-top: 8px !important; } .sdx-container .padding-md-top-2 { padding-top: 16px !important; } .sdx-container .padding-md-top-3 { padding-top: 24px !important; } .sdx-container .padding-md-top-4 { padding-top: 32px !important; } .sdx-container .padding-md-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-md-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-md-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-md-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-md-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-md-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-md-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-md-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-md-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-md-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-md-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-md-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-md-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-md-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-md-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } } @media (min-width: 1024px) { .sdx-container .padding-lg-0 { padding: 0px !important; } .sdx-container .padding-lg-1 { padding: 8px !important; } .sdx-container .padding-lg-2 { padding: 16px !important; } .sdx-container .padding-lg-3 { padding: 24px !important; } .sdx-container .padding-lg-4 { padding: 32px !important; } .sdx-container .padding-lg-top-0 { padding-top: 0px !important; } .sdx-container .padding-lg-top-1 { padding-top: 8px !important; } .sdx-container .padding-lg-top-2 { padding-top: 16px !important; } .sdx-container .padding-lg-top-3 { padding-top: 24px !important; } .sdx-container .padding-lg-top-4 { padding-top: 32px !important; } .sdx-container .padding-lg-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-lg-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-lg-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-lg-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-lg-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-lg-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-lg-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-lg-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-lg-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-lg-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-lg-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-lg-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-lg-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-lg-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-lg-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } } @media (min-width: 1280px) { .sdx-container .padding-xl-0 { padding: 0px !important; } .sdx-container .padding-xl-1 { padding: 8px !important; } .sdx-container .padding-xl-2 { padding: 16px !important; } .sdx-container .padding-xl-3 { padding: 24px !important; } .sdx-container .padding-xl-4 { padding: 32px !important; } .sdx-container .padding-xl-top-0 { padding-top: 0px !important; } .sdx-container .padding-xl-top-1 { padding-top: 8px !important; } .sdx-container .padding-xl-top-2 { padding-top: 16px !important; } .sdx-container .padding-xl-top-3 { padding-top: 24px !important; } .sdx-container .padding-xl-top-4 { padding-top: 32px !important; } .sdx-container .padding-xl-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-xl-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-xl-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-xl-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-xl-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-xl-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-xl-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-xl-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-xl-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-xl-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-xl-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-xl-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-xl-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-xl-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-xl-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } } @media (min-width: 1440px) { .sdx-container .padding-ul-0 { padding: 0px !important; } .sdx-container .padding-ul-1 { padding: 8px !important; } .sdx-container .padding-ul-2 { padding: 16px !important; } .sdx-container .padding-ul-3 { padding: 24px !important; } .sdx-container .padding-ul-4 { padding: 32px !important; } .sdx-container .padding-ul-top-0 { padding-top: 0px !important; } .sdx-container .padding-ul-top-1 { padding-top: 8px !important; } .sdx-container .padding-ul-top-2 { padding-top: 16px !important; } .sdx-container .padding-ul-top-3 { padding-top: 24px !important; } .sdx-container .padding-ul-top-4 { padding-top: 32px !important; } .sdx-container .padding-ul-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-ul-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-ul-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-ul-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-ul-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-ul-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-ul-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-ul-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-ul-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-ul-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-ul-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-ul-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-ul-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-ul-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-ul-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } } .sdx-container .padding-0 { padding: 0px !important; } .sdx-container .padding-1 { padding: 8px !important; } .sdx-container .padding-2 { padding: 16px !important; } .sdx-container .padding-3 { padding: 24px !important; } .sdx-container .padding-4 { padding: 32px !important; } .sdx-container .padding-top-0 { padding-top: 0px !important; } .sdx-container .padding-top-1 { padding-top: 8px !important; } .sdx-container .padding-top-2 { padding-top: 16px !important; } .sdx-container .padding-top-3 { padding-top: 24px !important; } .sdx-container .padding-top-4 { padding-top: 32px !important; } .sdx-container .padding-bottom-0 { padding-bottom: 0px !important; } .sdx-container .padding-bottom-1 { padding-bottom: 8px !important; } .sdx-container .padding-bottom-2 { padding-bottom: 16px !important; } .sdx-container .padding-bottom-3 { padding-bottom: 24px !important; } .sdx-container .padding-bottom-4 { padding-bottom: 32px !important; } .sdx-container .padding-h-0 { padding-left: 0px !important; padding-right: 0px !important; } .sdx-container .padding-h-1 { padding-left: 8px !important; padding-right: 8px !important; } .sdx-container .padding-h-2 { padding-left: 16px !important; padding-right: 16px !important; } .sdx-container .padding-h-3 { padding-left: 24px !important; padding-right: 24px !important; } .sdx-container .padding-h-4 { padding-left: 32px !important; padding-right: 32px !important; } .sdx-container .padding-v-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .sdx-container .padding-v-1 { padding-top: 8px !important; padding-bottom: 8px !important; } .sdx-container .padding-v-2 { padding-top: 16px !important; padding-bottom: 16px !important; } .sdx-container .padding-v-3 { padding-top: 24px !important; padding-bottom: 24px !important; } .sdx-container .padding-v-4 { padding-top: 32px !important; padding-bottom: 32px !important; } .sdx-container .align-left { float: left !important; } .sdx-container .align-right { float: right !important; } .sdx-container .center-block { display: block; float: none; margin-right: auto; margin-left: auto; } .sdx-container .center-vertical { display: flex; align-items: center; } .sdx-container .full-width { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; } @media only screen and (max-width: 767px) { .sdx-container .full-width--mobile-only { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; padding-left: 12px; padding-right: 12px; } } .sdx-container .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sdx-container .sr-only-focusable:active, .sdx-container .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .sdx-container .text-align-left { text-align: left !important; } .sdx-container .text-align-center { text-align: center !important; } .sdx-container .text-align-right { text-align: right !important; } .sdx-container .text-align-justify { text-align: justify !important; } .sdx-container .text-lowercase { text-transform: lowercase !important; } .sdx-container .text-uppercase { text-transform: uppercase !important; } .sdx-container .text-capitalize { text-transform: capitalize !important; } .sdx-container .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdx-container .text-recommended-max-width { max-width: 700px; } .sdx-container .visible { visibility: visible !important; } .sdx-container .invisible { visibility: hidden !important; } .sdx-container .hide, .sdx-container .hidden { display: none !important; } .sdx-container .show { display: block !important; } @media (min-width: 0) { .sdx-container .hidden-xs-up { display: none !important; } } @media (max-width: 479px) { .sdx-container .hidden-xs-down { display: none !important; } } @media (min-width: 0) { .sdx-container .visible-xs-up { display: block !important; } } @media (min-width: 480px) { .sdx-container .hidden-sm-up { display: none !important; } } @media (max-width: 767px) { .sdx-container .hidden-sm-down { display: none !important; } } @media (min-width: 480px) { .sdx-container .visible-sm-up { display: block !important; } } @media (min-width: 768px) { .sdx-container .hidden-md-up { display: none !important; } } @media (max-width: 1023px) { .sdx-container .hidden-md-down { display: none !important; } } @media (min-width: 768px) { .sdx-container .visible-md-up { display: block !important; } } @media (min-width: 1024px) { .sdx-container .hidden-lg-up { display: none !important; } } @media (max-width: 1279px) { .sdx-container .hidden-lg-down { display: none !important; } } @media (min-width: 1024px) { .sdx-container .visible-lg-up { display: block !important; } } @media (min-width: 1280px) { .sdx-container .hidden-xl-up { display: none !important; } } @media (max-width: 1439px) { .sdx-container .hidden-xl-down { display: none !important; } } @media (min-width: 1280px) { .sdx-container .visible-xl-up { display: block !important; } } @media (min-width: 1440px) { .sdx-container .hidden-ul-up { display: none !important; } } .sdx-container .hidden-ul-down { display: none !important; } @media (min-width: 1440px) { .sdx-container .visible-ul-up { display: block !important; } } @media (min-width: 0) { .sdx-container .hidden-phone-up { display: none !important; } } @media (max-width: 767px) { .sdx-container .hidden-phone-down { display: none !important; } } @media (min-width: 768px) { .sdx-container .hidden-tablet-up { display: none !important; } } @media (max-width: 1023px) { .sdx-container .hidden-tablet-down { display: none !important; } } @media (min-width: 1024px) { .sdx-container .hidden-desktop-up { display: none !important; } } @media (max-width: 1279px) { .sdx-container .hidden-desktop-down { display: none !important; } } @media (min-width: 0) { .sdx-container .visible-phone-up { display: block !important; } } @media (min-width: 768px) { .sdx-container .visible-tablet-up { display: block !important; } } @media (min-width: 1024px) { .sdx-container .visible-desktop-up { display: block !important; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fade-in-from-none { 0% { display: none; opacity: 0; } .001% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fade-in-from-none { 0% { display: none; opacity: 0; } .001% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-webkit-keyframes fade-out-to-none { 0% { display: block; opacity: 1; } 99.999% { display: block; opacity: 0; } 100% { display: none; opacity: 0; } } @keyframes fade-out-to-none { 0% { display: block; opacity: 1; } 99.999% { display: block; opacity: 0; } 100% { display: none; opacity: 0; } } .sdx-container .ngdialog.ngdialog-theme-default.ngdialog-orderdetail .ngdialog-content { width: 550px; } .sdx-container .ngdialog.ngdialog-theme-default.ngdialog-orderdetail .ngdialog-content h1 { padding-right: 62px; } .sdx-container .flatpickr-wrapper, .sdx-container .input-field { width: 100%; } .sdx-container .flatpickr-wrapper input[type='text'].date-picker-input, .sdx-container .input-field input[type='text'].date-picker-input { border: 1px solid #d6d6d6; } .sdx-container a, .sdx-container a.link, .sdx-container button.link { color: #ffffff; background-color: #1781e3; } [hs-device="phone"] map-hs-label-value span { display: block !important; width: 100% !important; } [hs-device="phone"] .order-tracking > [hs-layout="row"] > div { width: 100%; } .date-picker-delete-btn, .date-picker-input-btn { top: 28px; } .hs-orderdetail .hs-collapsible .sdx-container a.hs-button-primary:hover { background-color: #0851da; color: #ffffff; }