@charset "UTF-8"; @import url(../css/tds-base/tds-base.css); @import url(../tds-bundle/_customProps.css); /*doc --- title: Typography Variables name: 01_typography category: Typography ---
Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style fonts in the website based on the locale that the page is rendered in. Here are all the variables that are currently available ```sass_example // Base font size $base-font-size: 16px; $font-path: '/assets/fonts/' !default; // Gotham Variables $gotham-light: 'Gotham Light'; // font-weight: 100; $gotham-book: 'Gotham Book'; // font-weight: 300; $gotham-medium: 'Gotham Medium'; // font-weight: 500; $gotham-bold: 'Gotham Bold'; // font-weight: 700; // Base font stack $fonts-base: Arial, sans-serif; $fonts-opensans: 'Open Sans'; $fonts-base-secondary: 'HelveticaNeue-Regular', 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, $fonts-base; $fonts-fancypants: 'Palatino' !default; $fonts-monospace: 'Menlo', 'Monaco', 'Courier New', monospace !default; // Japanese font stack $fonts-jp-primary: 'AXIS Font Japanese W55' !default; $fonts-jp-secondary: 'Hiragino Kaku Gothic ProN' !default; // Chinese font stack $fonts-china-primary: 'M Hei PRC W45' !default; $fonts-china-secondary: 'HeiS ASC Simplified Chinese', 'HeiS ASC Simplified Chinese_n5' !default; // Traditional Chinese font stack $fonts-traditional-chinese-primary: 'M Hei HK W42', 'M Hei HK W40' !default; $fonts-traditional-chinese-secondary: 'HeiT ASC Traditional Chinese' !default; // Combined China font stack $fontstack-china-primary: $fonts-china-primary, $fonts-traditional-chinese-primary !default; $fontstack-china-secondary: $fonts-china-secondary, $fonts-traditional-chinese-secondary !default; // Actual font stack variables to be used by the typography mixin: $fonts-secondary: $fontstack-china-secondary, $fonts-base-secondary !default; ``` */ /*doc --- categories: Variables title: Locale Variables name: 00_localevarsintro --- Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic. ## Example Here are a couple examples of how you can use the locale variables in your code. ### Basic Usage ```sass_example .i18n-ja_JP { background-color: #f00; } ``` ```css_example .i18n-jp { background-color: #f00; } ``` ### Parent selector usage ```sass_example .someclass { color: red; .i18n-ja_JP & { color: purple; } } ``` ```css_example .someclass { color: red; } .i18n-jp .someclass { color: purple; } ``` ## Let's talk about CSS specificity As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package. **YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things. When writing Sass, keep asking yourself this question: > What will this selector look like when it is rendered in plain CSS? If you start seeing a lot of nesting ask yourself: > Can this become less specfiic without messing up styles downstream? If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables. */ /*doc --- categories: Variables title: All available locale variables name: 02_localevarexample parent: 00_localevarsintro --- Here are all the variables that are currently available ```sass_example // Super regions $region-na: superregion-north-america; $region-eu: superregion-europe; $region-apac: superregion-apac; $region-me: superregion-middle-east; // North America $locale-canada_english: i18n-en_CA; // en_CA $locale-canada_french: i18n-fr_CA; // fr_CA $locale-mexico_spanish: i18n-es_MX; // es_MX $locale-us_english: i18n-en_US; // US // Europe $locale-belgium_french: i18n-fr_BE; // fr_BE $locale-belgium_dutch: i18n-nl_BE; // nl_BE $locale-denmark_danish: i18n-da_DK; // da_DK $locale-germany_german: i18n-de_DE; // de_DE $locale-france_french: i18n-fr_FR; // fr_FR $locale-great_britain: i18n-en_GB; // en_GB $locale-italy_italian: i18n-it_IT; // it_IT $locale-ireland: i18n-en_IE; // en_IE $locale-netherlands_dutch: i18n-nl_NL; // nl_NL $locale-norway_norwegian: i18n-no_NO; // no_NO $locale-austria: i18n-de_AT; // de_AT $locale-switzerland_german: i18n-de_CH; // de_CH $locale-switzerland_french: i18n-fr_CH; // fr_CH $locale-switzerland_italian: i18n-it_CH; // it_CH $locale-sweden: i18n-sv_SE; // sv_SE $locale-other_europe: i18n-en_EU; // en_EU $locale-finland: i18n-fi_FI; // fi_FI $locale-luxembourg_french: i18n-fr_LU; // fr_LU $locale-luxembourg_german: i18n-de_LU; // de_LU $locale-portugal: i18n-pt_PT; // pt_PT $locale-spain: i18n-es_ES; // es_ES // Asia-Pacific $locale-australia: i18n-en_AU; // en_AU $locale-china: i18n-zh_CN; // zh_CN $locale-hongkong: i18n-en_HK; // en_HK $locale-hongkong_chinese: i18n-zh_HK; // zh_HK $locale-macau: i18n-en_MO; // en_MO $locale-macau_chinese: i18n-zh_MO; // zh_MO $locale-japan: i18n-ja_JP; // Japan $locale-new_zealand: i18n-en_NZ; // en_NZ $locale-taiwan: i18n-zh_TW; // zh_TW $locale-south_korea: i18n-ko_KR; // ko_KR // Middle-East $locale-jordan_english: i18n-en_JO; // en_JO $locale-jordan_arabic: i18n-ar_JO; // ar_JO $locale-uae_english: i18n-en_AE; // en_AE $locale-uae_arabic: i18n-ar_AE; // ar_AE $locale-saudi-arabia_english: i18n-en_SA; // en_SA $locale-saudi-arabia_arabic: i18n-ar_SA; // ar_SA // Africa $locale-south_africa: i18n-en_ZA; // not in Drupal language list default ``` The following variables are only to be used within the Drupal ecosystem: ```sass_example $locale_us: i18n-en; // US $locale-denmark: i18n-da; // da_DK $locale-germany: i18n-de; // de_DE $locale-france: i18n-fr; // fr_FR $locale-italy: i18n-it; // it_IT $locale-netherlands: i18n-nl; // nl_NL $locale-norway: i18n-no; // no_NO ``` */ /*doc --- title: Introduction category: Colors name: 00_colors --- The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature. An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work. */ /*doc --- title: Primary Colors category: Colors name: 01_colors ---
$tesla-primary
$tesla-active
$tesla-transactional
*/ /*doc --- title: Grey Scale Colors category: Colors name: 02_colors ---
$black
$grey-1
$grey-2
$grey-3
$grey-4
$grey-6
$grey-8
$grey-9
$grey-a
$grey-b
$grey-c
$grey-d
$grey-e
$white
*/ /*doc --- title: Background Colors category: Colors name: 03_colors ---
$grey-background-color
$grey-background-color-light
$grey-background-color-lightest
$grey-background-color-even-lighterest
*/ /*doc --- title: Extra Colors category: Colors name: 04_colors ---
$border-footer
$form-label-color
$border-content
$ui-text
*/ /*doc --- title: Base "T-shirt" Sizes category: Variables for Sizing name: 00_intro --- These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added. ```sass_example $tsla-size--xsmall: 10px !default; $tsla-size--small: 20px !default; $tsla-size--medium: 30px !default; $tsla-size--large: 40px !default; $tsla-size--xlarge: 50px !default; $tsla-size--xxlarge: 60px !default; $tsla-size--jumbo: 70px !default; ``` */ /*doc --- title: Media Queries name: 01_layout category: Layout --- When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens. Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system. */ /*doc --- title: Available Media Queries category: Layout name: 02_layout --- We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.
Variable Name Value Sample Devices Type
Note: All of tesla.com is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
$mobile-only 0-639px
  • HTC One, Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
Legacy
$small-desktop-only 640px-940px
  • Small screens only (640px - 960px)
Legacy
$small-desktop 640px+
  • Small devices (640px+)
Legacy
$large-desktop 960px+
  • Large desktop screens (960px+)
Legacy
$mobile-phone-only 0-736px
  • HTC One (639px)
  • Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
  • iPhone 6 (667px)
  • iPhone 6+ (736px)
New
$tablet-only 601-1280px
  • iPad (768px - 1024px)
  • Galaxy (800px - 1280px)
  • Nexus (601px - 906px)
  • Kindle (800px - 1280px)
New
$large-devices 1200px+
  • gigantic screens?
New
*/ /*doc --- title: Transitions name: Transitions category: Animations --- When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users. Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition: 1. `.{custom}-enter` 2. `.{custom}-enter-active` 3. `.{custom}-leave` 4. `.{custom}-leave-active` - [ReactJS Animation](https://facebook.github.io/react/docs/animation.html) - [AngularJS Animation](https://docs.angularjs.org/guide/animations) ## Default Animations The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations: 1. Animated element starts off with opacity: .01, 2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function, 3. when leaving the DOM the element starts with opacity: 1, 4. and transitions to opacity: .01 in its leave-active state with 300ms transition on all properties with no transition timing function. ```sass_example @include enter-leave-animation-default(ng) ``` The above sass @include example produces the following css: ```sass_example .ng-enter { opacity: .01; } .ng-enter.ng-enter-active { opacity: 1; -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } .ng-leave { opacity: 1; } .ng-leave.ng-leave-active { opacity: .01; -webkit-transition: opacity 300ms ease-in; -moz-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } ``` The included mixin in use: ```sass_example @mixin enter-leave-animation-default($classname: general) { @include enter-animation($classname) @include enter-active-animation($classname, opacity, 500ms, ease-in) @include leave-animation($classname) @include leave-active-animation($classname, opacity, 300ms, ease-in) } ``` ## Custom Variations We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one: ```sass_example @include enter-animation(ng) @include enter-active-animation(ng, opacity, 500ms, ease-in) @include leave-animation(ng) @include leave-active-animation(ng, opacity, 300ms, ease-in) ``` The parameters passed are: 1. `$classname` - Optional. Defaults to "general" 2. `$property` - Optional. Defaults to "all" 3. `$duration` - Optional. Defaults to "500ms" 4. `$function` - Optional. Defaults to "false" Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows: ```sass_example @include enter-animation(general) { width: 100%; } @include enter-active-animation(general, width, 2s, ease-in) { width: 50%; } ``` The above mixin will produce the following css: ```sass_example .general-enter { width: 100%; } .general-enter.general-enter-active { width: 50%; -webkit-transition: width 2s ease-in; -moz-transition: width 2s ease-in; -o-transition: width 2s ease-in; transition: width 2s ease-in; } ``` */ @import url(../css/marketing/tds-fonts-override.css); .btn-navigate { background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); } [dir='rtl'] .tsla-header-main--container .container { -ms-flex-pack: normal; justify-content: normal; } [dir='rtl'] .tsla-header-main--container .container .tsla-header-main--logo_container { margin-right: 20px; } [dir='rtl'] .tsla-header-main--container .container [for='tsla-header-main--trigger'] { -ms-flex-order: -1; order: -1; } [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last { right: auto; left: 0; } [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last .tsla-header-nav--list { margin-left: 0; padding-left: 0; } [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last .tsla-header-nav--list .tsla-header-nav--primary_right { margin-left: 0; margin-right: 20px; padding-left: 0; padding-right: 10px; } .link-1 { color: #fff; text-decoration: none; } .pager-load-more .ajax-progress .throbber, .loader span { background-image: url("/tesla_theme/assets/img/loader.gif?20150303"); background-position: 0; background-repeat: no-repeat; height: 15px; width: 15px; } @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .pager-load-more .ajax-progress .throbber, .loader span { background-image: url("/tesla_theme/assets/img/loader2x.gif?20150303"); background-size: 15px auto; } } #comments_block .pager-load-more .ajax-progress .throbber, .pager-load-more .ajax-progress #comments_block .throbber, #comments_block .loader span, .loader #comments_block span { background-image: url("/tesla_theme/assets/img/comment_loader.gif?20150303"); } @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #comments_block .pager-load-more .ajax-progress .throbber, .pager-load-more .ajax-progress #comments_block .throbber, #comments_block .loader span, .loader #comments_block span { background-image: url("/tesla_theme/assets/img/comment_loader2x.gif?20150303"); } } .extend_loader { background-image: url("/tesla_theme/assets/img/loader.gif?20150303"); background-position: 0 0; background-repeat: no-repeat; height: 15px; width: 15px; } @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .extend_loader { background-image: url("/tesla_theme/assets/img/loader2x.gif?20150303"); background-size: 15px auto; } } #comments_block .extend_loader { background-image: url("/tesla_theme/assets/img/comment_loader.gif?20150303"); } @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #comments_block .extend_loader { background-image: url("/tesla_theme/assets/img/comment_loader2x.gif?20150303"); } } html.footer-fixed { height: 100%; min-height: 100%; } html.page-has-full-footer { height: auto; min-height: 0; } .footer-fixed [id='page'], .footer-fixed .content-constrain, .footer-fixed body { height: 100%; min-height: 100%; } .footer-fixed .full-footer [id='page'], .footer-fixed .full-footer .content-constrain, .footer-fixed .full-footer body { height: auto; min-height: 0; } body { margin: 0; position: relative; } .pager-load-more_link { padding-bottom: 50px; } .pager-load-more_link.pager-load-more-empty { display: none; } .pager-load-more_link a { font-family: Gotham Medium, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 12px; line-height: 20px; text-transform: uppercase; color: #b74134; } .pager-load-more li { position: relative; } .pager-load-more .ajax-progress-throbber { margin-top: -7px; position: absolute; top: 50%; } .pager-load-more .ajax-progress .throbber { margin: 0 0 0 10px !important; } .loader { text-align: center; } .loader span { display: inline-block; } .hero-container { overflow: hidden; position: relative; } .hero-container .section-hero { float: left; width: 100%; } .basic-two-column-page .left-column { width: 48.78049%; float: left; margin-right: 2.43902%; } .basic-two-column-page .right-column { width: 48.78049%; float: right; margin-right: 0; } .white-background { background-color: #fff; background-color: var(--tds-color--white); } @media (min-width: 960px) { .container { max-width: container; width: auto; } [id='system_messages'], main { width: auto; } header.main, footer.main { width: auto; } } @media (min-width: 0) and (max-width: 639px) { .container { position: relative; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .basic-two-column-page .left-column, .basic-two-column-page .right-column { width: 100%; clear: both; float: none; display: block; margin-right: auto; margin-left: auto; } } @media (min-width: 640px) { .container { margin-left: auto; margin-right: auto; max-width: 1060px; padding-left: 20px; padding-right: 20px; position: relative; width: auto; } [id='system_messages'], main { min-width: 940px; } header.main, footer.main { min-width: 940px; } .show-tablet { display: block !important; } header .main { padding-bottom: 11px; } } @media (min-width: 640px) and (max-width: 960px) { .container { margin-left: auto; margin-right: auto; max-width: 984px; position: relative; } } .sidebar { display: none; margin-top: 5px; } .sidebar .pane-title, .sidebar .section-subtitle { font-family: "Gotham Book"; margin-bottom: 31px; padding-bottom: 10px; font-size: 18px; line-height: 20px; color: #a2a3a5; color: var(--tds-color--grey40); border-bottom: 1px solid #f4f4f4; } .sidebar .post { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #d0d1d2; border-bottom: 1px solid var(--tds-color--grey50); overflow: hidden; } .sidebar .post:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; } .sidebar .post-link { font-family: "Gotham Medium"; font-size: 15px; line-height: 16px; margin-bottom: 6px; display: block; color: #000; } .sidebar .post-media { margin-left: 5px; float: right; width: 110px; } .sidebar .post-info { color: #a2a3a5; color: var(--tds-color--grey40); margin: 0; } @media (min-width: 0) and (max-width: 639px) { .sidebar { display: none; } } .two-columns .sidebar { margin-top: 4px; } .sidebar .wrapper > .panel-pane { margin-bottom: 45px; } .sidebar .wrapper > .panel-pane:last-child { margin-bottom: 0; } .sidebar .post-media { margin-left: 5px; } @media (min-width: 640px) { .sidebar { display: block; } } [id='masquerade'] { background-color: #f4f4f4; background-color: var(--tds-color--grey70); max-height: 40px; } [id='masquerade']::before, [id='masquerade']::after { content: ''; display: table; } [id='masquerade']::after { clear: both; } [id='masquerade'] .piped { border-right: solid 1px #393c41; border-right: solid 1px var(--tds-color--grey20); } .tsla-header-semitransparent [id='masquerade'], .tsla-header-transparent [id='masquerade'] { position: relative; z-index: 10; } [id='masquerade'] .links { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; } [id='masquerade'] .links li { margin-left: 0; padding: 0 20px; } [id='masquerade'] .links li .nav-link { color: #171a20; color: var(--tds-color--grey10); line-height: 20px; font-size: 14px; } @media (min-width: 0) and (max-width: 639px) { [id='masquerade'] .masq-status { display: none; } } .admin-menu [id='admin-menu'] { z-index: 9999 !important; } @media (min-width: 0) and (max-width: 639px) { .admin-menu .tsla-header-nav, .admin-menu [id='tsla-header-mask'] { top: 80px; } .admin-menu .tsla-header-main { top: 28px; } .admin-menu.tsla-header-semitransparent .tsla-header-main .tsla-header-nav, .admin-menu.tsla-header-transparent .tsla-header-main .tsla-header-nav { padding-top: 80px; } } .tsla-header-semitransparent.with-masquerade, .tsla-header-transparent.with-masquerade { top: 40px; } .hide-for-none-basic-countries, a.nav-used-desk-link, a.nav-tradein-link, a.nav-energy-link, a.nav-charging-main-link, a.nav-charging-mobile-link, a.nav-events-link { display: inherit; } .i18n-en_SG .hide-for-none-basic-countries, .i18n-en_IN .hide-for-none-basic-countries, .i18n-cs_CZ .hide-for-none-basic-countries, .i18n-el_GR .hide-for-none-basic-countries, .i18n-hr_HR .hide-for-none-basic-countries, .i18n-es_PR .hide-for-none-basic-countries, .i18n-en_PR .hide-for-none-basic-countries, .i18n-is_IS .hide-for-none-basic-countries, .i18n-he_IL .hide-for-none-basic-countries, .i18n-pl_PL .hide-for-none-basic-countries, .i18n-sl_SI .hide-for-none-basic-countries, .i18n-en_SG a.nav-used-desk-link, .i18n-en_SG a.nav-tradein-link, .i18n-en_SG a.nav-energy-link, .i18n-en_SG a.nav-charging-main-link, .i18n-en_SG a.nav-charging-mobile-link, .i18n-en_SG a.nav-events-link, .i18n-en_IN a.nav-used-desk-link, .i18n-en_IN a.nav-tradein-link, .i18n-en_IN a.nav-energy-link, .i18n-en_IN a.nav-charging-main-link, .i18n-en_IN a.nav-charging-mobile-link, .i18n-en_IN a.nav-events-link, .i18n-cs_CZ a.nav-used-desk-link, .i18n-cs_CZ a.nav-tradein-link, .i18n-cs_CZ a.nav-energy-link, .i18n-cs_CZ a.nav-charging-main-link, .i18n-cs_CZ a.nav-charging-mobile-link, .i18n-cs_CZ a.nav-events-link, .i18n-el_GR a.nav-used-desk-link, .i18n-el_GR a.nav-tradein-link, .i18n-el_GR a.nav-energy-link, .i18n-el_GR a.nav-charging-main-link, .i18n-el_GR a.nav-charging-mobile-link, .i18n-el_GR a.nav-events-link, .i18n-hr_HR a.nav-used-desk-link, .i18n-hr_HR a.nav-tradein-link, .i18n-hr_HR a.nav-energy-link, .i18n-hr_HR a.nav-charging-main-link, .i18n-hr_HR a.nav-charging-mobile-link, .i18n-hr_HR a.nav-events-link, .i18n-es_PR a.nav-used-desk-link, .i18n-es_PR a.nav-tradein-link, .i18n-es_PR a.nav-energy-link, .i18n-es_PR a.nav-charging-main-link, .i18n-es_PR a.nav-charging-mobile-link, .i18n-es_PR a.nav-events-link, .i18n-en_PR a.nav-used-desk-link, .i18n-en_PR a.nav-tradein-link, .i18n-en_PR a.nav-energy-link, .i18n-en_PR a.nav-charging-main-link, .i18n-en_PR a.nav-charging-mobile-link, .i18n-en_PR a.nav-events-link, .i18n-is_IS a.nav-used-desk-link, .i18n-is_IS a.nav-tradein-link, .i18n-is_IS a.nav-energy-link, .i18n-is_IS a.nav-charging-main-link, .i18n-is_IS a.nav-charging-mobile-link, .i18n-is_IS a.nav-events-link, .i18n-he_IL a.nav-used-desk-link, .i18n-he_IL a.nav-tradein-link, .i18n-he_IL a.nav-energy-link, .i18n-he_IL a.nav-charging-main-link, .i18n-he_IL a.nav-charging-mobile-link, .i18n-he_IL a.nav-events-link, .i18n-pl_PL a.nav-used-desk-link, .i18n-pl_PL a.nav-tradein-link, .i18n-pl_PL a.nav-energy-link, .i18n-pl_PL a.nav-charging-main-link, .i18n-pl_PL a.nav-charging-mobile-link, .i18n-pl_PL a.nav-events-link, .i18n-sl_SI a.nav-used-desk-link, .i18n-sl_SI a.nav-tradein-link, .i18n-sl_SI a.nav-energy-link, .i18n-sl_SI a.nav-charging-main-link, .i18n-sl_SI a.nav-charging-mobile-link, .i18n-sl_SI a.nav-events-link { display: none; } a.nav-cybertruck-main-link { display: none; } .i18n-en_CA a.nav-cybertruck-main-link, .i18n-fr_CA a.nav-cybertruck-main-link, .i18n-es_MX a.nav-cybertruck-main-link, .i18n-zh_CN a.nav-cybertruck-main-link, .i18n-en_HK a.nav-cybertruck-main-link, .i18n-zh_HK a.nav-cybertruck-main-link, .i18n-en_MO a.nav-cybertruck-main-link, .i18n-zh_MO a.nav-cybertruck-main-link, .i18n-zh_TW a.nav-cybertruck-main-link, .i18n-ko_KR a.nav-cybertruck-main-link, .i18n-ja_JP a.nav-cybertruck-main-link, .i18n-en_AU a.nav-cybertruck-main-link, .i18n-en_NZ a.nav-cybertruck-main-link, .i18n-cs_CZ a.nav-cybertruck-main-link, .i18n-is_IS a.nav-cybertruck-main-link { display: inherit; } a.nav-cybertruck-secondary-link { display: inherit; } .i18n-en_SG a.nav-cybertruck-secondary-link, .i18n-en_IN a.nav-cybertruck-secondary-link, .i18n-en_CA a.nav-cybertruck-secondary-link, .i18n-fr_CA a.nav-cybertruck-secondary-link, .i18n-es_MX a.nav-cybertruck-secondary-link, .i18n-zh_CN a.nav-cybertruck-secondary-link, .i18n-en_HK a.nav-cybertruck-secondary-link, .i18n-zh_HK a.nav-cybertruck-secondary-link, .i18n-en_MO a.nav-cybertruck-secondary-link, .i18n-zh_MO a.nav-cybertruck-secondary-link, .i18n-zh_TW a.nav-cybertruck-secondary-link, .i18n-ko_KR a.nav-cybertruck-secondary-link, .i18n-ja_JP a.nav-cybertruck-secondary-link, .i18n-en_AU a.nav-cybertruck-secondary-link, .i18n-en_NZ a.nav-cybertruck-secondary-link, .i18n-cs_CZ a.nav-cybertruck-secondary-link, .i18n-is_IS a.nav-cybertruck-secondary-link, .i18n-el_GR a.nav-cybertruck-secondary-link, .i18n-hr_HR a.nav-cybertruck-secondary-link, .i18n-es_PR a.nav-cybertruck-secondary-link, .i18n-en_PR a.nav-cybertruck-secondary-link, .i18n-he_IL a.nav-cybertruck-secondary-link, .i18n-pl_PL a.nav-cybertruck-secondary-link, .i18n-sl_SI a.nav-cybertruck-secondary-link, .i18n-en_JO a.nav-cybertruck-secondary-link, .i18n-en_EU a.nav-cybertruck-secondary-link { display: none; } a.nav-cybertruck-mobile-link { display: inherit; } .i18n-en_SG a.nav-cybertruck-mobile-link, .i18n-en_IN a.nav-cybertruck-mobile-link, .i18n-el_GR a.nav-cybertruck-mobile-link, .i18n-hr_HR a.nav-cybertruck-mobile-link, .i18n-es_PR a.nav-cybertruck-mobile-link, .i18n-en_PR a.nav-cybertruck-mobile-link, .i18n-he_IL a.nav-cybertruck-mobile-link, .i18n-pl_PL a.nav-cybertruck-mobile-link, .i18n-sl_SI a.nav-cybertruck-mobile-link, .i18n-en_JO a.nav-cybertruck-mobile-link, .i18n-en_EU a.nav-cybertruck-mobile-link { display: none; } a.nav-powerwall-mobile-link { display: block; } .i18n-en_SG a.nav-powerwall-mobile-link, .i18n-en_IN a.nav-powerwall-mobile-link, .i18n-cs_CZ a.nav-powerwall-mobile-link, .i18n-el_GR a.nav-powerwall-mobile-link, .i18n-hr_HR a.nav-powerwall-mobile-link, .i18n-es_PR a.nav-powerwall-mobile-link, .i18n-en_PR a.nav-powerwall-mobile-link, .i18n-is_IS a.nav-powerwall-mobile-link, .i18n-he_IL a.nav-powerwall-mobile-link, .i18n-en_EU a.nav-powerwall-mobile-link, .i18n-pl_PL a.nav-powerwall-mobile-link, .i18n-sl_SI a.nav-powerwall-mobile-link { display: none; } a.nav-shop-link { display: none; } .i18n-en_CA a.nav-shop-link, .i18n-fr_CA a.nav-shop-link, .i18n-en a.nav-shop-link { display: block; } .i18n-en_IE a.nav-used-desk-link, .i18n-en_JO a.nav-used-desk-link, .i18n-zh_MO a.nav-used-desk-link, .i18n-en_MO a.nav-used-desk-link, .i18n-es_MX a.nav-used-desk-link, .i18n-en_EU a.nav-used-desk-link, .i18n-ko_KR a.nav-used-desk-link { display: none; } .i18n-en_EU a.nav-tradein-link { display: none; } a.nav-semi-link { display: none; } .i18n-en_GB a.nav-semi-link, .i18n-nl a.nav-semi-link, .i18n-no a.nav-semi-link, .i18n-en a.nav-semi-link { display: inherit; } a.nav-ecommerce-link { display: none; } .i18n-ja_JP a.nav-ecommerce-link { display: block; } a.nav-energy-link { display: inherit; } .i18n-is_IS a.nav-energy-link { display: none; } .i18n-en a.nav-energy-link { display: none; } .i18n-en_IN a.nav-energy-link, .i18n-en_PR a.nav-energy-link, .i18n-es_PR a.nav-energy-link { display: block; } a.nav-enterprise-link { display: none; } a.nav-fleet-company-link { display: none; } .i18n-en_AE a.nav-fleet-company-link, .i18n-de_AT a.nav-fleet-company-link, .i18n-nl_BE a.nav-fleet-company-link, .i18n-fr_BE a.nav-fleet-company-link, .i18n-fr_CH a.nav-fleet-company-link, .i18n-de_CH a.nav-fleet-company-link, .i18n-it_CH a.nav-fleet-company-link, .i18n-cs_CZ a.nav-fleet-company-link, .i18n-de a.nav-fleet-company-link, .i18n-da a.nav-fleet-company-link, .i18n-es_ES a.nav-fleet-company-link, .i18n-fr a.nav-fleet-company-link, .i18n-fi_FI a.nav-fleet-company-link, .i18n-en_GB a.nav-fleet-company-link, .i18n-en_IE a.nav-fleet-company-link, .i18n-is_IS a.nav-fleet-company-link, .i18n-it a.nav-fleet-company-link, .i18n-fr_LU a.nav-fleet-company-link, .i18n-de_LU a.nav-fleet-company-link, .i18n-nl a.nav-fleet-company-link, .i18n-no a.nav-fleet-company-link, .i18n-pt_PT a.nav-fleet-company-link, .i18n-sv_SE a.nav-fleet-company-link { display: inherit; } a.nav-corporate-link { display: none; } .i18n-ko_KR a.nav-corporate-link, .i18n-en_AU a.nav-corporate-link, .i18n-en_NZ a.nav-corporate-link { display: inherit; } .i18n-en_JO a.nav-charging-main-link, .i18n-en_EU a.nav-charging-main-link { display: none; } a.nav-charging-secondary-link { display: none; } .superregion-north-america a.nav-charging-secondary-link, .superregion-apac a.nav-charging-secondary-link { display: inherit; } .i18n-en_PR a.nav-charging-secondary-link, .i18n-es_PR a.nav-charging-secondary-link { display: none; } .i18n-is_IS a.nav-charging-mobile-link { display: none; } .i18n-de_AT a.nav-events-link, .i18n-en_IE a.nav-events-link, .i18n-en_EU a.nav-events-link, .i18n-ja_JP a.nav-events-link, .i18n-ko_KR a.nav-events-link { display: none; } a.nav-updates-link { display: none; } .i18n-cs_CZ a.nav-updates-link, .i18n-is_IS a.nav-updates-link, .i18n-el_GR a.nav-updates-link, .i18n-hr_HR a.nav-updates-link, .i18n-es_PR a.nav-updates-link, .i18n-en_PR a.nav-updates-link, .i18n-he_IL a.nav-updates-link, .i18n-pl_PL a.nav-updates-link, .i18n-en_SG a.nav-updates-link, .i18n-en_IN a.nav-updates-link, .i18n-sl_SI a.nav-updates-link { display: inherit; } a.nav-faq-link { display: none; } .i18n-en_IN a.nav-faq-link, .i18n-el_GR a.nav-faq-link, .i18n-hr_HR a.nav-faq-link, .i18n-es_PR a.nav-faq-link, .i18n-en_PR a.nav-faq-link, .i18n-he_IL a.nav-faq-link, .i18n-pl_PL a.nav-faq-link, .i18n-sl_SI a.nav-faq-link { display: inherit; } a.nav-faq-link-singapore { display: none; } .i18n-en_SG a.nav-faq-link-singapore { display: inherit; } a.nav-supercharging-link { display: inherit; } .i18n-hr_HR a.nav-support-link, .i18n-el_GR a.nav-support-link, .i18n-pl_PL a.nav-support-link, .i18n-sl_SI a.nav-support-link, .i18n-is_IS a.nav-support-link, .i18n-cs_CZ a.nav-support-link { display: block; } a.nav-customer-story-link { display: none; } .i18n-zh_TW a.nav-customer-story-link { display: block; } a.nav-videos-link { display: none; } .i18n-zh_TW a.nav-videos-link { display: block; } a.nav-careers-link { display: block; } .i18n-hr_HR a.nav-careers-link, .i18n-is_IS a.nav-careers-link, .i18n-el_GR a.nav-careers-link, .i18n-he_IL a.nav-careers-link, .i18n-en_EU a.nav-careers-link, .i18n-pt_PT a.nav-careers-link, .i18n-es_PR a.nav-careers-link, .i18n-en_PR a.nav-careers-link, .i18n-en_SG a.nav-careers-link, .i18n-en_IN a.nav-careers-link, .i18n-sl_SI a.nav-careers-link { display: none; } a.nav-existing-inventory-link { display: block; } .superregion-europe a.nav-existing-inventory-link, .superregion-middle-east a.nav-existing-inventory-link, .i18n-zh_CN a.nav-existing-inventory-link, .i18n-en_SG a.nav-existing-inventory-link, .i18n-en_IN a.nav-existing-inventory-link, .i18n-es_PR a.nav-existing-inventory-link, .i18n-en_PR a.nav-existing-inventory-link, .i18n-ko_KR a.nav-existing-inventory-link { display: none; } a.nav-existing-inventory-link-m3 { display: none; } .superregion-europe a.nav-existing-inventory-link-m3, .superregion-middle-east a.nav-existing-inventory-link-m3 { display: block; } .i18n-he_IL a.nav-existing-inventory-link-m3, .i18n-pl_PL a.nav-existing-inventory-link-m3, .i18n-sl_SI a.nav-existing-inventory-link-m3, .i18n-hr_HR a.nav-existing-inventory-link-m3, .i18n-el_GR a.nav-existing-inventory-link-m3, .i18n-en_EU a.nav-existing-inventory-link-m3 { display: none; } a.nav-news-blog-link { display: block; } .i18n-he_IL a.nav-news-blog-link { display: none; } .i18n-en_IN a.nav-model-y-link, .i18n-es_PR a.nav-model-y-link, .i18n-en_PR a.nav-model-y-link { display: block; } .tsla-header-nav--list_link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tsla-header-nav--list_link.modified-link { display: none; } .superregion-north-america .tsla-header-nav--list_link.modified-link, .i18n-fr_BE .tsla-header-nav--list_link.modified-link, .i18n-nl_BE .tsla-header-nav--list_link.modified-link, .i18n-de_AT .tsla-header-nav--list_link.modified-link, .i18n-sv_SE .tsla-header-nav--list_link.modified-link, .i18n-fr .tsla-header-nav--list_link.modified-link, .i18n-de_CH .tsla-header-nav--list_link.modified-link, .i18n-fr_CH .tsla-header-nav--list_link.modified-link, .i18n-it_CH .tsla-header-nav--list_link.modified-link, .i18n-nl .tsla-header-nav--list_link.modified-link, .i18n-de .tsla-header-nav--list_link.modified-link, .i18n-no .tsla-header-nav--list_link.modified-link, .i18n-zh_CN .tsla-header-nav--list_link.modified-link { display: block; } body:not(.i18n-en_AU):not(.i18n-en_NZ) .hide-for-non-au-and-nz { display: none; } body:not(.i18n-en) .hide-for-non-us { display: none; } .hide-for-test-drive-menu-not-enabled { display: block; } .i18n-he_IL .hide-for-test-drive-menu-not-enabled, .i18n-ar_JO .hide-for-test-drive-menu-not-enabled, .i18n-en_JO .hide-for-test-drive-menu-not-enabled, .i18n-en_EU .hide-for-test-drive-menu-not-enabled, .i18n-zh_CN .hide-for-test-drive-menu-not-enabled, .i18n-en_HK .hide-for-test-drive-menu-not-enabled, .i18n-zh_HK .hide-for-test-drive-menu-not-enabled, .i18n-en_MO .hide-for-test-drive-menu-not-enabled, .i18n-zh_MO .hide-for-test-drive-menu-not-enabled, .i18n-zh_TW .hide-for-test-drive-menu-not-enabled, .i18n-ko_KR .hide-for-test-drive-menu-not-enabled, .i18n-ja_JP .hide-for-test-drive-menu-not-enabled, .i18n-en_IN .hide-for-test-drive-menu-not-enabled, .i18n-hr_HR .hide-for-test-drive-menu-not-enabled, .i18n-es_PR .hide-for-test-drive-menu-not-enabled, .i18n-en_PR .hide-for-test-drive-menu-not-enabled { display: none; } [id='page-carbonimpact'].tsla-user_is--logged_out .tsla-header-nav--primary .tsla-link_for-logout { display: none; } [id='page-carbonimpact'].tsla-user_is--logged_in .tsla-header-nav--primary .tsla-link_for-login { display: none; } @media (max-width: 640px) { .tsla-header-nav { padding-bottom: 100px; } } /*doc --- title: Typography Variables name: 01_typography category: Typography ---
Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style fonts in the website based on the locale that the page is rendered in. Here are all the variables that are currently available ```sass_example // Base font size $base-font-size: 16px; $font-path: '/assets/fonts/' !default; // Gotham Variables $gotham-light: 'Gotham Light'; // font-weight: 100; $gotham-book: 'Gotham Book'; // font-weight: 300; $gotham-medium: 'Gotham Medium'; // font-weight: 500; $gotham-bold: 'Gotham Bold'; // font-weight: 700; // Base font stack $fonts-base: Arial, sans-serif; $fonts-opensans: 'Open Sans'; $fonts-base-secondary: 'HelveticaNeue-Regular', 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, $fonts-base; $fonts-fancypants: 'Palatino' !default; $fonts-monospace: 'Menlo', 'Monaco', 'Courier New', monospace !default; // Japanese font stack $fonts-jp-primary: 'AXIS Font Japanese W55' !default; $fonts-jp-secondary: 'Hiragino Kaku Gothic ProN' !default; // Chinese font stack $fonts-china-primary: 'M Hei PRC W45' !default; $fonts-china-secondary: 'HeiS ASC Simplified Chinese', 'HeiS ASC Simplified Chinese_n5' !default; // Traditional Chinese font stack $fonts-traditional-chinese-primary: 'M Hei HK W42', 'M Hei HK W40' !default; $fonts-traditional-chinese-secondary: 'HeiT ASC Traditional Chinese' !default; // Combined China font stack $fontstack-china-primary: $fonts-china-primary, $fonts-traditional-chinese-primary !default; $fontstack-china-secondary: $fonts-china-secondary, $fonts-traditional-chinese-secondary !default; // Actual font stack variables to be used by the typography mixin: $fonts-secondary: $fontstack-china-secondary, $fonts-base-secondary !default; ``` */ /*doc --- categories: Variables title: Locale Variables name: 00_localevarsintro --- Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic. ## Example Here are a couple examples of how you can use the locale variables in your code. ### Basic Usage ```sass_example .i18n-ja_JP { background-color: #f00; } ``` ```css_example .i18n-jp { background-color: #f00; } ``` ### Parent selector usage ```sass_example .someclass { color: red; .i18n-ja_JP & { color: purple; } } ``` ```css_example .someclass { color: red; } .i18n-jp .someclass { color: purple; } ``` ## Let's talk about CSS specificity As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package. **YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things. When writing Sass, keep asking yourself this question: > What will this selector look like when it is rendered in plain CSS? If you start seeing a lot of nesting ask yourself: > Can this become less specfiic without messing up styles downstream? If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables. */ /*doc --- categories: Variables title: All available locale variables name: 02_localevarexample parent: 00_localevarsintro --- Here are all the variables that are currently available ```sass_example // Super regions $region-na: superregion-north-america; $region-eu: superregion-europe; $region-apac: superregion-apac; $region-me: superregion-middle-east; // North America $locale-canada_english: i18n-en_CA; // en_CA $locale-canada_french: i18n-fr_CA; // fr_CA $locale-mexico_spanish: i18n-es_MX; // es_MX $locale-us_english: i18n-en_US; // US // Europe $locale-belgium_french: i18n-fr_BE; // fr_BE $locale-belgium_dutch: i18n-nl_BE; // nl_BE $locale-denmark_danish: i18n-da_DK; // da_DK $locale-germany_german: i18n-de_DE; // de_DE $locale-france_french: i18n-fr_FR; // fr_FR $locale-great_britain: i18n-en_GB; // en_GB $locale-italy_italian: i18n-it_IT; // it_IT $locale-ireland: i18n-en_IE; // en_IE $locale-netherlands_dutch: i18n-nl_NL; // nl_NL $locale-norway_norwegian: i18n-no_NO; // no_NO $locale-austria: i18n-de_AT; // de_AT $locale-switzerland_german: i18n-de_CH; // de_CH $locale-switzerland_french: i18n-fr_CH; // fr_CH $locale-switzerland_italian: i18n-it_CH; // it_CH $locale-sweden: i18n-sv_SE; // sv_SE $locale-other_europe: i18n-en_EU; // en_EU $locale-finland: i18n-fi_FI; // fi_FI $locale-luxembourg_french: i18n-fr_LU; // fr_LU $locale-luxembourg_german: i18n-de_LU; // de_LU $locale-portugal: i18n-pt_PT; // pt_PT $locale-spain: i18n-es_ES; // es_ES // Asia-Pacific $locale-australia: i18n-en_AU; // en_AU $locale-china: i18n-zh_CN; // zh_CN $locale-hongkong: i18n-en_HK; // en_HK $locale-hongkong_chinese: i18n-zh_HK; // zh_HK $locale-macau: i18n-en_MO; // en_MO $locale-macau_chinese: i18n-zh_MO; // zh_MO $locale-japan: i18n-ja_JP; // Japan $locale-new_zealand: i18n-en_NZ; // en_NZ $locale-taiwan: i18n-zh_TW; // zh_TW $locale-south_korea: i18n-ko_KR; // ko_KR // Middle-East $locale-jordan_english: i18n-en_JO; // en_JO $locale-jordan_arabic: i18n-ar_JO; // ar_JO $locale-uae_english: i18n-en_AE; // en_AE $locale-uae_arabic: i18n-ar_AE; // ar_AE $locale-saudi-arabia_english: i18n-en_SA; // en_SA $locale-saudi-arabia_arabic: i18n-ar_SA; // ar_SA // Africa $locale-south_africa: i18n-en_ZA; // not in Drupal language list default ``` The following variables are only to be used within the Drupal ecosystem: ```sass_example $locale_us: i18n-en; // US $locale-denmark: i18n-da; // da_DK $locale-germany: i18n-de; // de_DE $locale-france: i18n-fr; // fr_FR $locale-italy: i18n-it; // it_IT $locale-netherlands: i18n-nl; // nl_NL $locale-norway: i18n-no; // no_NO ``` */ /*doc --- title: Introduction category: Colors name: 00_colors --- The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature. An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work. */ /*doc --- title: Primary Colors category: Colors name: 01_colors ---
$tesla-primary
$tesla-active
$tesla-transactional
*/ /*doc --- title: Grey Scale Colors category: Colors name: 02_colors ---
$black
$grey-1
$grey-2
$grey-3
$grey-4
$grey-6
$grey-8
$grey-9
$grey-a
$grey-b
$grey-c
$grey-d
$grey-e
$white
*/ /*doc --- title: Background Colors category: Colors name: 03_colors ---
$grey-background-color
$grey-background-color-light
$grey-background-color-lightest
$grey-background-color-even-lighterest
*/ /*doc --- title: Extra Colors category: Colors name: 04_colors ---
$border-footer
$form-label-color
$border-content
$ui-text
*/ /*doc --- title: Base "T-shirt" Sizes category: Variables for Sizing name: 00_intro --- These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added. ```sass_example $tsla-size--xsmall: 10px !default; $tsla-size--small: 20px !default; $tsla-size--medium: 30px !default; $tsla-size--large: 40px !default; $tsla-size--xlarge: 50px !default; $tsla-size--xxlarge: 60px !default; $tsla-size--jumbo: 70px !default; ``` */ /*doc --- title: Media Queries name: 01_layout category: Layout --- When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens. Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system. */ /*doc --- title: Available Media Queries category: Layout name: 02_layout --- We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.
Variable Name Value Sample Devices Type
Note: All of tesla.com is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
$mobile-only 0-639px
  • HTC One, Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
Legacy
$small-desktop-only 640px-940px
  • Small screens only (640px - 960px)
Legacy
$small-desktop 640px+
  • Small devices (640px+)
Legacy
$large-desktop 960px+
  • Large desktop screens (960px+)
Legacy
$mobile-phone-only 0-736px
  • HTC One (639px)
  • Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
  • iPhone 6 (667px)
  • iPhone 6+ (736px)
New
$tablet-only 601-1280px
  • iPad (768px - 1024px)
  • Galaxy (800px - 1280px)
  • Nexus (601px - 906px)
  • Kindle (800px - 1280px)
New
$large-devices 1200px+
  • gigantic screens?
New
*/ /*doc --- title: Transitions name: Transitions category: Animations --- When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users. Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition: 1. `.{custom}-enter` 2. `.{custom}-enter-active` 3. `.{custom}-leave` 4. `.{custom}-leave-active` - [ReactJS Animation](https://facebook.github.io/react/docs/animation.html) - [AngularJS Animation](https://docs.angularjs.org/guide/animations) ## Default Animations The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations: 1. Animated element starts off with opacity: .01, 2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function, 3. when leaving the DOM the element starts with opacity: 1, 4. and transitions to opacity: .01 in its leave-active state with 300ms transition on all properties with no transition timing function. ```sass_example @include enter-leave-animation-default(ng) ``` The above sass @include example produces the following css: ```sass_example .ng-enter { opacity: .01; } .ng-enter.ng-enter-active { opacity: 1; -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } .ng-leave { opacity: 1; } .ng-leave.ng-leave-active { opacity: .01; -webkit-transition: opacity 300ms ease-in; -moz-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } ``` The included mixin in use: ```sass_example @mixin enter-leave-animation-default($classname: general) { @include enter-animation($classname) @include enter-active-animation($classname, opacity, 500ms, ease-in) @include leave-animation($classname) @include leave-active-animation($classname, opacity, 300ms, ease-in) } ``` ## Custom Variations We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one: ```sass_example @include enter-animation(ng) @include enter-active-animation(ng, opacity, 500ms, ease-in) @include leave-animation(ng) @include leave-active-animation(ng, opacity, 300ms, ease-in) ``` The parameters passed are: 1. `$classname` - Optional. Defaults to "general" 2. `$property` - Optional. Defaults to "all" 3. `$duration` - Optional. Defaults to "500ms" 4. `$function` - Optional. Defaults to "false" Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows: ```sass_example @include enter-animation(general) { width: 100%; } @include enter-active-animation(general, width, 2s, ease-in) { width: 50%; } ``` The above mixin will produce the following css: ```sass_example .general-enter { width: 100%; } .general-enter.general-enter-active { width: 50%; -webkit-transition: width 2s ease-in; -moz-transition: width 2s ease-in; -o-transition: width 2s ease-in; transition: width 2s ease-in; } ``` */ .btn-navigate { background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); } [dir='rtl'] .tsla-header-main--container .container { -ms-flex-pack: normal; justify-content: normal; } [dir='rtl'] .tsla-header-main--container .container .tsla-header-main--logo_container { margin-right: 20px; } [dir='rtl'] .tsla-header-main--container .container [for='tsla-header-main--trigger'] { -ms-flex-order: -1; order: -1; } [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last { right: auto; left: 0; } [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last .tsla-header-nav--list { margin-left: 0; padding-left: 0; } [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last .tsla-header-nav--list .tsla-header-nav--primary_right { margin-left: 0; margin-right: 20px; padding-left: 0; padding-right: 10px; } .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; width: 215px; padding: 1px; font-size: 14px; font-weight: normal; line-height: 1.42857; text-align: left; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.8); white-space: normal; } .popover.top { margin-top: -10px; } .popover.right { margin-left: 10px; } .popover.bottom { margin-top: 10px; } .popover.left { margin-left: -10px; } .popover.top > .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: rgba(13, 13, 13, 0.2); bottom: -11px; } .popover.top > .arrow::after { content: ' '; bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #fff; } .popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: rgba(13, 13, 13, 0.2); } .popover.right > .arrow::after { content: ' '; left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #fff; } .popover.bottom > .arrow { left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: rgba(13, 13, 13, 0.2); top: -11px; } .popover.bottom > .arrow::after { content: ' '; top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: #fff; } .popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: rgba(13, 13, 13, 0.2); } .popover.left > .arrow::after { content: ' '; right: 1px; border-right-width: 0; border-left-color: #fff; bottom: -10px; } .popover-title { margin: 0; padding: 8px 14px; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .popover-content { padding: 9px 14px; } .popover > .arrow { border-width: 11px; } .popover > .arrow, .popover > .arrow::after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover > .arrow::after { border-width: 10px; content: ''; } .pane-skinny-footer { padding-bottom: 12px; margin-top: -34px; width: 100%; -webkit-text-size-adjust: 100%; max-height: 1000000000000px; } @media (min-width: 640px) { .page-order .pane-skinny-footer, [id*='page-mytesla'] .pane-skinny-footer { margin-top: 0; } } @media (min-width: 0) and (max-width: 639px) { .pane-skinny-footer { background-color: #393c41; padding-bottom: 0; margin-top: 0; } .i18n-ko_KR .pane-skinny-footer { margin-top: 0; } } .tsla-user_is--logged_out .pane-skinny-footer .tsla-link_for-logout { display: none; } .admin-menu .pane-skinny-footer { bottom: 29px; } .footer-fixed .pane-skinny-footer { position: absolute; left: 0; bottom: 0; } @media (min-width: 0) and (max-width: 639px) { .footer-fixed .pane-skinny-footer { position: static; } } .pane-skinny-footer .localization-modal .modal-link { display: none; } .pane-skinny-footer .navigation { display: none; } .footer-dark .pane-skinny-footer .vertical-separator { border-left-color: rgba(255, 255, 255, 0.5); } footer { clear: both; } footer .footer-links-column, footer p { font-size: 13px; } footer .navigation { padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #5c5e62; border-bottom: 1px solid var(--tds-color--grey30); overflow: hidden; } footer .footer-links-column { width: 48.78049%; float: left; margin-right: 2.43902%; color: #f4f4f4; } footer .footer-links-column ul { margin-top: 25px; } footer .footer-links-column ul:first-child { margin-top: 0; } footer .footer-links-column li { margin-bottom: 5px; } footer .footer-links-column + .footer-links-column { float: right; margin-right: 0; } footer .footer-links-column a { color: #f4f4f4; } footer .footer-copy { text-align: left; } footer .footer-copy a { color: #5c5e62; color: var(--tds-color--grey30); } @media (min-width: 0) and (max-width: 639px) { footer .footer-copy a { color: #f4f4f4; } } @media (min-width: 0) and (max-width: 639px) { footer .footer-copy { padding-top: 20px; } } footer .colophon { clear: both; color: #5c5e62; color: var(--tds-color--grey30); text-align: left; margin: 0; } @media (min-width: 0) and (max-width: 639px) { footer .colophon { color: #f4f4f4; text-align: center; } .superregion-apac footer .colophon { text-align: center; } .pane-full-footer footer .colophon a { text-align: center; } } .pane-full-footer footer .colophon { color: #f4f4f4; } .pane-full-footer footer .colophon a { color: #f4f4f4; } .i18n-ko_KR footer .colophon { white-space: nowrap; } @media (min-width: 0) and (max-width: 639px) { .i18n-ko_KR footer .colophon { white-space: normal; } } footer .localization-modal a { color: #fff; } [id='follow_us'] { text-align: center; margin-bottom: 0; } .i18n-zh_CN [id='follow_us'] { text-align: right; } [id='follow_us'] nav { display: inline-block; } [id='follow_us'] nav a { margin: 0 3px; position: relative; float: left; color: #f4f4f4; } [id='follow_us'] nav a::after { font-size: 31px; } .i18n-zh_CN [id='follow_us'] nav a::after { font-size: 27px; } [id='follow_us'] nav .icon-wechat .popover-content { padding: 0; } [id='follow_us'] .popover { width: 215px; top: -225px; left: -60px; } .pane-full-footer .vertical-separator, .pane-skinny-footer .vertical-separator { border-left: 1px solid rgba(244, 244, 244, 0.5); padding-left: 8px; margin-left: 4px; } .pane-full-footer .cn-icp-icon, .pane-skinny-footer .cn-icp-icon { height: 18px; vertical-align: top; } .pane-full-footer { padding: 30px 30px 32px; min-width: 940px; background-color: #393c41; overflow: hidden; position: relative; } .pane-full-footer .wrapper { padding: 0 19px; } .pane-full-footer footer .footer-copy { position: absolute; left: 37px; bottom: 14px; } .pane-full-footer::before { box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25); content: ' '; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; z-index: 1; } .pane-full-footer .locations-map-images { margin-top: 20px; } .pane-full-footer .locations { width: 65.85366%; float: left; margin-right: 2.43902%; text-align: left; font-size: 13px; color: #f4f4f4; } .pane-full-footer .locations a { color: #f4f4f4; white-space: nowrap; display: block; margin-bottom: 10px; } .pane-full-footer .locations nav { margin-bottom: 14px; } .pane-full-footer .locations .location-img-wrapper { float: left; padding-right: 10px; } .pane-full-footer .locations .location-img-wrapper.last { padding-right: 0; } .pane-full-footer .locations .location-img-wrapper a { text-overflow: ellipsis; overflow: hidden; } .pane-full-footer .navigation { width: 31.70732%; float: right; margin-right: 0; padding-top: 18px; border-left: 1px solid #444; border-left: 1px solid var(--tds-color--grey25); border-bottom: 0 none; margin-bottom: 0; } .pane-full-footer .social_locale { border-top: 1px solid #444; border-top: 1px solid var(--tds-color--grey25); padding-top: 20px; margin-top: 20px; clear: both; } .pane-full-footer .localization { position: relative; } @media (min-width: 0) and (max-width: 639px) { .pane-full-footer, .pane-skinny-footer { background-color: #393c41; } .pane-full-footer .vertical-separator, .pane-skinny-footer .vertical-separator { border-left: 0; margin: 0; padding: 0; } .pane-full-footer { min-width: 0; padding-left: 0; padding-right: 0; } .pane-full-footer footer .footer-copy { width: 100%; position: static; text-align: center; } .pane-full-footer .wrapper { padding: 0; } .pane-full-footer .locations, .pane-full-footer .navigation { display: block; float: none; width: 100%; border: 0; padding: 0; } .pane-full-footer .maps nav, .pane-full-footer [id='follow_us'] nav { display: none; } .footer-copy { width: 75%; margin: auto; display: block; } .footer-copy a { display: block; } .pane-skinny-footer .navigation { display: block; } .pane-skinny-footer .localization-modal .modal-link { display: inline-block; } } [id='system_messages'] { background-color: #eee; background-color: var(--tds-color--grey60); } [id='system_messages'] ul.tabs::before, [id='system_messages'] ul.tabs::after { content: ''; display: table; } [id='system_messages'] ul.tabs::after { clear: both; } [id='system_messages'] ul.tabs li { display: inline-block; float: left; margin-right: 20px; padding: 10px 0; } [id='system_messages'] ul.tabs a { color: #393c41; } [id='system_messages'] .panel-pane { font-size: 14px; } [id='second-nav'] .nav-block li { float: left; list-style-image: none; list-style-type: none; margin-right: 15px; padding-bottom: 0; } [id='second-nav'] .nav-block li a { box-shadow: none; color: #393c41; font-size: 13px; line-height: 48px; padding: 32px 0 8px; } [id='second-nav'] .nav-block li a:hover { color: #000; } [id='second-nav'] .nav-block li.nav-selected .nav-link { box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='second-nav'] .nav-block li.last, [id='second-nav'] .nav-block li:last-child { margin-right: 0; } .sub-nav-mobile { margin: 0 20px; } .sub-nav-mobile ul { border: 1px solid #d0d1d2; border: 1px solid var(--tds-color--grey50); padding: 20px; margin: 0; border-radius: 10px; display: -ms-flexbox; display: flex; width: 100%; background: #fff; } .sub-nav-mobile li { -ms-flex-positive: 1; flex-grow: 1; text-align: center; } .sub-nav-mobile a { color: #393c41; font-size: 12px; } .sub-nav-mobile a:hover { color: #b74134; } .sub-nav-mobile.floating-nav { position: fixed; margin: 0; width: 100%; top: -100px; z-index: 100; transition: top .5s; } .sub-nav-mobile.floating-nav nav { margin: 0 20px; } .sub-nav-mobile.floating-nav.show { top: 60px; } .sub-nav-mobile.non-floating-nav { margin-top: 20px; } .section-sub-nav { position: relative; } .section-sub-nav::before, .section-sub-nav::after { content: ''; display: table; } .section-sub-nav::after { clear: both; } .section-sub-nav .container { position: relative; } .page-models-preowned .section-sub-nav .container .sub-nav { margin-right: 20px; } .tsla-header-semitransparent .section-sub-nav, .tsla-header-transparent .section-sub-nav { margin-top: 96px; } .section-sub-nav .section-title { border-bottom: 1px solid #f4f4f4; color: #000; font-size: 30px; margin-bottom: 35px; padding-bottom: 25px; padding-top: 0; position: relative; top: 0; font-weight: normal; margin-top: 0; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav .section-title { border-bottom: 0; font-size: 24px; } } .section-sub-nav .section-title a { color: #000; } .section-sub-nav .sub-nav { clear: both; position: absolute; right: 20px; top: 9px; } [dir='rtl'] .section-sub-nav .sub-nav { right: auto; left: 20px; } .section-sub-nav .sub-nav .nav-item { display: block; float: left; margin: 0 0 0 20px; } .section-sub-nav .sub-nav .nav-item:first-child { margin-left: 0; } .section-sub-nav .sub-nav .nav-selected .nav-link { opacity: .7; } .section-sub-nav .sub-nav .nav-selected .nav-item { display: block; float: left; margin: 0 0 0 20px; } .section-sub-nav .sub-nav .nav-selected .nav-item:first-child { margin-left: 0; } .section-sub-nav .sub-nav .nav-link { color: #393c41; font-size: 13px; text-decoration: none; box-shadow: none; } .section-sub-nav .sub-nav .btn-order { color: #fff; font-size: 8px; } .i18n-zh_CN .section-sub-nav .sub-nav .btn-order { font-size: 13px; padding: 6px 12px 5px; position: relative; top: -2px; } .section-sub-nav .separator-before { border-left: 1px solid rgba(57, 60, 65, 0.5); padding-left: 20px; } .section-sub-nav .separator-after { border-right: 1px solid rgba(57, 60, 65, 0.5); padding-right: 20px; } .section-sub-nav.alternative .section-title, .alternative .section-sub-nav .section-title { border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } .section-sub-nav.alternative .section-title a, .alternative .section-sub-nav .section-title a { color: #fff; } .section-sub-nav.alternative .nav-link, .alternative .section-sub-nav .nav-link { color: #fff; transition: color 100ms linear; } .section-sub-nav.alternative .nav-link:hover, .alternative .section-sub-nav .nav-link:hover { color: #f4f4f4; transition: color 100ms linear; } .section-sub-nav.alternative .sub-nav a, .alternative .section-sub-nav .sub-nav a { color: #fff; } .section-sub-nav.alternative .separator-before, .alternative .section-sub-nav .separator-before { border-left-color: rgba(255, 255, 255, 0.5); } .section-sub-nav.alternative .separator-after, .alternative .section-sub-nav .separator-after { border-right-color: rgba(255, 255, 255, 0.5); } .section-sub-nav.no-keyline .section-title, .no-keyline .section-sub-nav .section-title { border-bottom: 0; margin-bottom: 0; } .nav-left { float: left; } .nav-right { float: right; } .nav-centered { display: block; margin: auto; overflow: hidden; text-align: center; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav .sub-nav { display: none; } } @media (min-width: 640px) { .nav_search { display: -ms-flexbox; display: flex; padding: 0 0 22px; text-align: right; width: auto; } .expanded-search .nav_search { float: right; text-align: right; width: auto; } [dir='rtl'] .nav_search { float: left; } } main .nav_search { display: none; } @media (min-width: 640px) { main .nav_search { display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; } main .nav_search .nav-left { float: left; } main .nav_search .nav-right { float: right; } } .nav-sticky { max-width: 1440px; position: absolute; top: -1px; width: 100%; z-index: 10; } .nav-sticky.nav-animate { transition: top 0.5s linear; transform: translateZ(0); } .nav-sticky.nav-animate.is-stuck, .nav-sticky.nav-animate.nav-animate-away { transition: top 0.5s linear; transform: translateZ(0); } .nav-sticky.is-stuck, .nav-sticky.nav-animate-away { max-width: 1440px; position: fixed; width: 100%; z-index: 10; } .nav-sticky.nav-animate-away { top: -100px; } .section-sub-nav .nav-sticky .sub-nav { top: 21px; } .nav-pill { text-align: center; } .nav-pill .nav-block { border-radius: 100px; border: 1px solid #f4f4f4; border: 1px solid var(--tds-color--grey70); display: inline-block; margin-bottom: 1px; overflow: hidden; } .nav-pill .nav-link { font-weight: 100; color: #000; cursor: pointer; display: block; font-size: 18px; padding: 16px 0; width: 175px; } .nav-pill .nav-selected { background-color: #a2a3a5; color: #000; } .nav-pill .nav-item { border-left: 1px solid #f4f4f4; margin: 0; } .nav-pill .nav-item:first-child { border-left: 0; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav { margin-top: 33px; } .section-sub-nav .sub-nav { display: none; } .section-sub-nav .section-title { margin-bottom: 27px; } .page-about .section-sub-nav .section-title { padding-bottom: 18px; } .page-about-legal .section-sub-nav .section-title { padding-bottom: 22px; } .page-careers .section-sub-nav .section-title { margin-bottom: 31px; } .header-semitransparent .section-sub-nav, .header-transparent .section-sub-nav { margin-top: 83px; } } /** Markup example for nav-tabs and tabs
*/ .nav-tabs, .nav-tabs-inner, .nav-tabs-tesla-credit, .nav-tabs-solar { font-weight: 400; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: stretch; align-content: stretch; font-size: 12px; } .nav-tabs > li, .nav-tabs-inner > li, .nav-tabs-tesla-credit > li, .nav-tabs-solar > li { -ms-flex-order: 1; order: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; font-size: 12px; line-height: 20px; background-color: #fff; border-bottom: 2px solid #fff; color: #a2a3a5; color: var(--tds-color--grey40); min-height: 45px; padding: 14px 14px 10px; margin-right: 2px; } .nav-tabs > li > a, .nav-tabs-inner > li > a, .nav-tabs-tesla-credit > li > a, .nav-tabs-solar > li > a { color: #a2a3a5; color: var(--tds-color--grey40); } .nav-tabs > li > a:hover, .nav-tabs-inner > li > a:hover, .nav-tabs-tesla-credit > li > a:hover, .nav-tabs-solar > li > a:hover { color: #b74134; } .nav-tabs > li.active, .nav-tabs-inner > li.active, .nav-tabs-tesla-credit > li.active, .nav-tabs-solar > li.active { font-weight: 500; color: #000; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover, .nav-tabs-inner > li.active > a, .nav-tabs-inner > li.active > a:focus, .nav-tabs-inner > li.active > a:hover, .nav-tabs-tesla-credit > li.active > a, .nav-tabs-tesla-credit > li.active > a:focus, .nav-tabs-tesla-credit > li.active > a:hover, .nav-tabs-solar > li.active > a, .nav-tabs-solar > li.active > a:focus, .nav-tabs-solar > li.active > a:hover { color: #000; } .main-nav > .active { border-color: #b74134; } .tab-pane { display: none; } .tab-pane.active { display: block; } .js-nav .not-front main { box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.25); } .front main { box-shadow: 0 0 0 0 transparent; } [id='page'] { background-color: #fafafa; } [id='media_block'] { margin-bottom: 48px; margin-top: 8px; } [id='media_block'] .loader { display: none; } @media (min-width: 0) and (max-width: 639px) { .content-constrain, [id='page'] { height: auto; min-height: 0; margin-bottom: 0; } } .content-constrain { position: relative; } .page-modelx .content-constrain, .page-models-drive .content-constrain, .page-supercharger .content-constrain, .page-homecharger .content-constrain, .page-destinationcharger .content-constrain, .page-about .content-constrain, .page-careers .content-constrain, .page-contact .content-constrain, .page-about-legal .content-constrain, .page-charging .content-constrain, [id*='page-customer-stories'] .content-constrain, [id*='page-models-preowned'] .content-constrain, [id*='page-support'] .content-constrain, [id*='page-blog'] .content-constrain, [id*='page-customer-stories'] .content-constrain, [id*='page-press'] .content-constrain, [id*='page-search'] .content-constrain, [id*='page-videos'] .content-constrain, [id*='page-events'] .content-constrain, [id*='page-test-events-listing'] .content-constrain, .node-type-event .content-constrain { background-color: #fff; background-color: var(--tds-color--white); } [id='page_title'] { padding: 33px 0 50px; } @media (min-width: 0) and (max-width: 639px) { [id='page_title'] { padding-bottom: 51px; } } @media (min-width: 640px) { main header { padding-top: 45px; margin-bottom: 30px; } .page-about main header, .page-contact main header { margin-bottom: 0; } .page-about-legal main header { margin-bottom: 7px; } .two-columns main header { margin-bottom: 38px; } main header .container > .wrapper { border-bottom: 1px solid #eee; border-bottom: 1px solid var(--tds-color--grey60); display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-direction: row; flex-direction: row; } main header .container .hide-wrapper-border { border-bottom: 0; } [id='page_title'] { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; margin: 0; padding: 0 0 22px; } [dir='rtl'] [id='page_title'] { float: right; } } [id='second_header'] .wrapper { min-height: 38px; } @media (min-width: 0) and (max-width: 639px) { [id='second_header'] .wrapper { min-height: 0; } } [id='second_header'] [id='page_title'] { position: relative; z-index: 1; padding: 0; background-color: #fff; background-color: var(--tds-color--white); } @media (min-width: 0) and (max-width: 639px) { [id='second_header'] [id='page_title'] { position: static; padding: 33px 0 22px; } } [id='second_header'] [id='page_title'] h1 { font-weight: lighter; margin: 0; font-family: 'Gotham Light', 'system', sans-serif; font-family: var(--tds-fonts-combined--light); font-size: 30px; padding-top: 0; line-height: 34px; } @media (min-width: 0) and (max-width: 639px) { [id='second_header'] .section-title--article { padding-top: 40px; } } .file-image img, .file-video img { display: block; width: 100%; height: auto; } [id='story-list'] .view-content { margin-bottom: 14px; } [id='story-list'] .view-content::before, [id='story-list'] .view-content::after { content: ''; display: table; } [id='story-list'] .view-content::after { clear: both; } [id='story-list'] .pager-load-more { text-align: center; margin-bottom: 44px; } [id='story-list'] .pager-load-more .pager-next { max-width: 100%; } [id='story-list'] .pager-load-more a { font-weight: 500; text-transform: uppercase; font-size: 12px; line-height: 20px; } [id='story-list'] .item-wrap a { box-shadow: 0 0; } .grid-photo-item { width: 23.17073%; float: left; margin-right: 2.43902%; margin-bottom: 64px; clear: right; } .grid-photo-item:nth-child(4n) { float: right; margin-right: 0; } .grid-photo-item h2 { font-weight: 500; font-size: 15px; line-height: 16px; margin: 0; padding-top: 0; } .grid-photo-item a { color: #000; color: var(--tds-color--black); } .grid-photo-item .file { margin-bottom: 19px; border: 1px solid #f4f4f4; } .grid-photo-item .post-info { margin-top: 10px; } .item-wrap { clear: both; overflow: hidden; } @media (min-width: 0) and (max-width: 639px) { .grid-photo-item { width: 100%; float: right; margin-right: 0; } .page-press .grid-photo-item > a { width: 31.70732%; float: left; margin-right: 2.43902%; margin-right: 8.53659%; } .grid-photo-item.views-row-last { margin-bottom: 86px; } .grid-photo-item .file { margin-bottom: 14px; border: 0; } .grid-photo-item .post-info { margin-top: 5px; } [id='story-list'] .pager-load-more { margin-bottom: 54px; } } [id='feature_blog'] { padding-bottom: 45px; margin-bottom: 45px; border-bottom: 1px solid #d0d1d2; border-bottom: 1px solid var(--tds-color--grey50); overflow: hidden; } [id='feature_blog'] .file-image, [id='feature_blog'] .file-video { margin-left: -20px; margin-right: -20px; margin-bottom: 17px; } [id='feature_blog'] h2 { font-weight: 500; font-size: 18px; line-height: 19px; margin: 0 0 5px; } [id='feature_blog'] h2 a { color: #000; color: var(--tds-color--black); } [id='feature_blog'] .post-info { color: #a2a3a5; color: var(--tds-color--grey40); margin-bottom: 19px; } [id='feature_blog'] p { margin: 0 0 16px; } [id='blog-lists'], [id='story-list'] { padding-bottom: 48px; } [id='blog-lists'] h3, [id='story-list'] h3 { display: none; } [id='blog-lists'] .pager-load-more, [id='story-list'] .pager-load-more { padding-bottom: 50px; } [id='blog-lists'] .pager-load-more.pager-load-more-empty, [id='story-list'] .pager-load-more.pager-load-more-empty { display: none; } [id='blog-lists'] .pager-load-more a, [id='story-list'] .pager-load-more a { font-family: Gotham Medium, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 12px; line-height: 20px; text-transform: uppercase; color: #b74134; } [id='blog-lists'] .pager-load-more a, [id='story-list'] .pager-load-more a { box-shadow: none; } [id='blog-lists'] .pane-articles .pane-title, [id='blog-lists'] .pane-customer-stories .pane-title, [id='story-list'] .pane-articles .pane-title, [id='story-list'] .pane-customer-stories .pane-title { margin-bottom: 38px; } @media (min-width: 640px) { .page-support-tagged [id='blog-lists'] .pane-articles .pane-title, .page-support-tagged [id='blog-lists'] .pane-customer-stories .pane-title, .page-support-tagged [id='story-list'] .pane-articles .pane-title, .page-support-tagged [id='story-list'] .pane-customer-stories .pane-title { margin-bottom: 42px; } } .group-month:last-child .views-row-last { position: relative; margin: 0 -20px; border-bottom: 0 none; padding-bottom: 0; max-height: 448px; overflow: hidden; } .group-month:last-child .views-row-last .blog-wrapper { padding: 0 20px; } .group-month:last-child .views-row-last .blog-wrapper::after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 80%); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } @media (min-width: 0) and (max-width: 639px) { .group-month:last-child .views-row-last .blog-wrapper::after { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, #fff 70%); } } #comments_block .group-month:last-child .views-row-last .blog-wrapper::after { background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.01) 0%, #f2f2f2 100%); } .group-month:last-child .views-row-last .blog-wrapper p { margin-bottom: 0; } .group-month:last-child .views-row-last.no-pager, .group-month:last-child .views-row-last.views-row-first { max-height: none; } .group-month:last-child .views-row-last.no-pager::after, .group-month:last-child .views-row-last.views-row-first::after { display: none; } .group-month:last-child .views-row-last.no-pager .blog-wrapper p, .group-month:last-child .views-row-last.views-row-first .blog-wrapper p { margin-bottom: 22px; } .group-month:last-child .views-row-last.no-pager .blog-wrapper::after, .group-month:last-child .views-row-last.views-row-first .blog-wrapper::after { display: none; } .group-month:last-child.views-row-last .blog-wrapper::after { display: block; } .page-blog-tagged .pane-page-content > .pane-title, .page-customer-stories-tagged .pane-page-content > .pane-title, .page-photos-tagged .pane-page-content > .pane-title, .page-press-tagged .pane-page-content > .pane-title, .page-support-tagged .pane-page-content > .pane-title, .page-videos-tagged .pane-page-content > .pane-title { display: none; } .group-month { margin-top: 0; } @media (min-width: 640px) { .group-month { margin-top: -27px; } } .blog-list-item { padding-bottom: 45px; border-bottom: 1px solid #d0d1d2; border-bottom: 1px solid var(--tds-color--grey50); margin: 0 -20px 50px; position: relative; } .tesla-now .blog-list-item { padding: 15px 0; border-top: 1px dotted #f4f4f4; } .tesla-now .blog-list-item:first-child { border-top: 0; } .tesla-now .blog-list-item p:last-child { margin-bottom: 0; } .tesla-now .blog-list-item .post-info { margin: 0; font-size: 11px; } .tesla-now .blog-list-item .post-info span { position: absolute; top: 15px; right: 0; text-transform: uppercase; } .blog-list-item .file { margin: 4px 0 12px; padding: 0 20px; } .blog-list-item .file.file-video { display: none; } .blog-list-item .blog-wrapper { padding: 0 20px; } .blog-list-item h2 { font-family: 'Gotham Medium', 'system', sans-serif; font-family: var(--tds-fonts-combined--medium); font-size: 17px; line-height: 20px; margin: 0 0 4px; } .tesla-now .blog-list-item h2 { font-size: 14px; margin: 0 100px 0 0; } .blog-list-item h2 a { color: #000; color: var(--tds-color--black); } .tesla-now .blog-list-item h2 a { color: #b74134; } @media (min-width: 0) and (max-width: 639px) { .blog-list-item .file { padding: 0; } } @media (min-width: 640px) { [id='blog-lists'] h3 { font-weight: 300; border-top: 1px solid #d0d1d2; border-top: 1px solid var(--tds-color--grey50); font-size: 30px; font-family: var(--tds-font-combined--base); font-family: var(--tds-font-combined--base); padding-top: 45px; margin-top: 45px; display: block; color: #d0d1d2; color: var(--tds-color--grey50); } [id='blog-lists'].no-feature-blog h3:first-child { border-top: 0 none; padding-top: 0; } [id='blog-lists'] .pager-load-more { margin-left: 34.14634%; } .group-month:last-child .views-row-last { max-height: 160px; margin: 0; } .group-month:last-child .views-row-last .blog-wrapper { padding: 0; } .group-month:last-child.views-row-last .blog-wrapper::after { display: block; } .blog-list-item { border-bottom: 0; margin: 0; } .blog-list-item::before, .blog-list-item::after { content: ''; display: table; } .blog-list-item::after { clear: both; } .front .blog-list-item { padding-bottom: 50px; } .front .blog-list-item.views-row-first { margin-top: 0; } .blog-list-item .file-image, .blog-list-item .file-video { margin-left: 20px; padding: 0; } .front .blog-list-item .file-image, .front .blog-list-item .file-video { margin-bottom: 16px; } .not-front .blog-list-item .file-image, .not-front .blog-list-item .file-video { width: 48.78049%; float: right; margin-right: 0; } .blog-list-item .blog-wrapper { width: 65.85366%; float: left; margin-right: 2.43902%; margin-left: 34.14634%; padding: 0; } .tesla-now .blog-list-item::after { position: absolute; top: -9999px; left: -9999px; } .blog-list-item.views-row-last { padding-bottom: 0; } .blog-list-item.views-row-last::after { border-bottom: 0 none; } [id='feature_blog'] { margin-bottom: 28px; border-bottom: 0 none; padding-bottom: 0; } [id='feature_blog'] .left-column { width: 31.70732%; float: left; margin-right: 2.43902%; } [id='feature_blog'] .right-column { width: 65.85366%; float: right; margin-right: 0; margin-top: 3px; } [id='feature_blog'] .file-image, [id='feature_blog'] .file-video { margin-left: 0; margin-right: 0; margin-bottom: 43px; } [id='feature_blog'] h2 { font-weight: 500; font-size: 30px; line-height: 36px; margin: 0 0 4px; } [id='feature_blog'] .post-info { color: #5c5e62; color: var(--tds-color--grey30); } .feature-blog-wrapper::before, .feature-blog-wrapper::after { content: ''; display: table; } .feature-blog-wrapper::after { clear: both; } } .blog-content { color: #5c5e62; color: var(--tds-color--grey30); } .blog-content p { font-size: 15px; line-height: 20px; } .read-more { font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 20px; font-size: 15px; line-height: 21px; clear: both; cursor: pointer; color: #b74134; } .read-more a { color: #b74134; } .read-more a:hover { color: #ed4e3b; color: var(--tds-color--red20); } .read-more:hover { color: #ed4e3b; color: var(--tds-color--red20); } .comments-tags { font-size: 13px; line-height: 20px; color: #a2a3a5; color: var(--tds-color--grey40); } .comments-tags strong { font-weight: normal; margin-right: 3px; } .comments-tags .tags { display: inline; } .comments-tags .comment-count { display: none; } .comments-tags .comment-count::after { padding-left: 9px; padding-right: 10px; font-size: 9px; content: '\e604'; line-height: 1; position: relative; } [id='article_content'] { margin-top: 0; } [id='article_content'] .submitted { font-size: 13px; line-height: 18px; color: #5c5e62; color: var(--tds-color--grey30); margin-bottom: 16px; } [id='article_content'] .submitted span { display: inline; } @media (min-width: 0) and (max-width: 639px) { [id='article_content'] .submitted .author-info { display: block; } [id='article_content'] .submitted .author-info::after { content: ''; margin: 0; } } [id='article_content'] .submitted .author-info::after { content: '\2022'; margin: 0 10px 0 11px; } [id='article_content'] .subhead { font-weight: 400; font-size: 24px; line-height: 28px; margin-bottom: 21px; margin-top: -10px; color: #a2a3a5; color: var(--tds-color--grey40); } @media (min-width: 0) and (max-width: 639px) { [id='article_content'] .subhead { font-size: 17px; line-height: 20px; margin-top: 15px; } } [id='article_content'] .left-column { margin-bottom: 50px; } [id='article_content'].no-right-column .left-column { margin-bottom: 0; } [id='article_content'] .field-name-field-tags { padding-top: 21px; position: relative; font-size: 13px; line-height: 22px; font-weight: normal; } [id='article_content'] .field-name-field-tags::before, [id='article_content'] .field-name-field-tags::after { content: ''; display: table; } [id='article_content'] .field-name-field-tags::after { clear: both; } [id='article_content'] .field-name-field-tags .field-label { color: #5c5e62; color: var(--tds-color--grey30); } [id='article_content'] .field-name-field-tags > * { display: inline; } [id='article_content'] .field-name-field-tags::before { content: ''; width: 110px; position: absolute; top: 0; left: 0; height: 1px; background-color: #d0d1d2; background-color: var(--tds-color--grey50); } [id='article_content'] .support .field-name-field-tags { margin-bottom: 45px; } @media (min-width: 640px) { .left-column { width: 65.85366%; float: left; margin-right: 2.43902%; padding-bottom: 50px; margin-bottom: 0; } .one-column-layout .left-column { clear: both; width: 100%; float: left; margin-left: 0; margin-right: 0; padding-right: 17.07317%; padding-left: 17.07317%; } .right-column { width: 31.70732%; float: right; margin-right: 0; } .right-column .wrapper { padding-left: 8px; } [id='article_content']::before, [id='article_content']::after { content: ''; display: table; } [id='article_content']::after { clear: both; } [id='article_content'] .submitted { margin-bottom: 42px; } [id='article_content'] .field-name-field-tags::before { background-color: #a2a3a5; background-color: var(--tds-color--grey40); } .no-media, [id='media_block'] + [id='article_content'] { padding-bottom: 67px; } [id='media_block'] { margin-bottom: 60px; } } [id='read_more_block'] { background-color: #a2a3a5; padding: 20px 0; text-align: center; font-size: 15px; line-height: 20px; color: #5c5e62; color: var(--tds-color--grey30); } @media (min-width: 640px) { [id='read_more_block'] { background-color: #a2a3a5; padding: 65px 0; } } [id='submit-story-block'] { background-color: #a2a3a5; padding: 50px 0 75px; } [id='submit-story-block'] .pane-content { padding-left: 70px; position: relative; } [id='submit-story-block'] .pane-content::before { content: '\e903'; position: absolute; left: 0; top: 0; font-size: 46px; line-height: 1; color: #a2a3a5; color: var(--tds-color--grey40); } [id='submit-story-block'] h2 { font-weight: 500; font-size: 15px; line-height: 16px; margin: 0 0 10px; } [id='submit-story-block'] p { font-size: 13px; line-height: 16px; margin: 0; } .pane-tesla-next-article-next-article { font-size: 13px; line-height: 22px; margin-bottom: 45px; } .pane-tesla-next-article-next-article .next-label { color: #5c5e62; color: var(--tds-color--grey30); } .pane-service-links-service-links, .pane-tesla-article-helper-service-links { margin-bottom: 20px; } .pane-service-links-service-links::before, .pane-service-links-service-links::after, .pane-tesla-article-helper-service-links::before, .pane-tesla-article-helper-service-links::after { content: ''; display: table; } .pane-service-links-service-links::after, .pane-tesla-article-helper-service-links::after { clear: both; } .pane-service-links-service-links:last-child, .pane-tesla-article-helper-service-links:last-child { margin-bottom: 45px; } .pane-service-links-service-links .pane-title, .pane-tesla-article-helper-service-links .pane-title { font-weight: 500; font-size: 12px; line-height: 16px; font-weight: normal; text-transform: uppercase; float: left; margin-top: 3px; } .i18n-zh_CN .pane-service-links-service-links, .i18n-zh_CN .pane-tesla-article-helper-service-links { display: none; } .service-links [class*='service-links-'] { width: 24px; height: 24px; margin-left: 7px; float: left; text-indent: 15984px; display: block; overflow: hidden; position: relative; color: #d0d1d2; color: var(--tds-color--grey50); } .service-links [class*='service-links-']::after { font-size: 22px; text-indent: 0; position: absolute; line-height: 1; top: 0; left: 0; } .has-sticky-footer .nav-sticky--footer-buttons { margin: 0; max-width: 100%; position: fixed; top: inherit; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; background-color: rgba(238, 238, 238, 0.95); } @media (min-width: 640px) { .has-sticky-footer .nav-sticky--footer-buttons { height: 70px; border-top: 1px solid #d0d1d2; } } @media (min-width: 0) and (max-width: 639px) { .has-sticky-footer .nav-sticky--footer-buttons { top: 96px; bottom: inherit; height: 52px; } } .has-sticky-footer .nav-sticky--footer-buttons.is-stuck { transform: translate3d(0, 52px, 0); transition: transform 300ms ease-in-out; } .tsla-header-scrolled.has-sticky-footer .nav-sticky--footer-buttons { transform: translate3d(0, 0, 0); transition: transform 300ms ease-in-out; } .tsla-prevent-scroll.has-sticky-footer .nav-sticky--footer-buttons { transform: none; display: none; } .i18n-he_IL .nav-sticky--mobile_only.page-type-auto { display: none; } .has-sticky-footer .nav-sticky--footer-buttons .container { width: 100%; } .has-sticky-footer .nav-sticky--footer-buttons .btn-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; align-items: center; } @media (min-width: 0) and (max-width: 639px) { .has-sticky-footer .nav-sticky--footer-buttons .btn-group [class*='btn-'] { font-size: 11px; padding: 0 10px; height: 40px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } } .has-sticky-footer .nav-sticky--footer-buttons .btn-primary--link { color: #3e6ae1; color: var(--tds-color--blue30); box-shadow: 0 0 0 0 transparent; color: #2e4994; color: var(--tds-color--blue10); } .has-sticky-footer .nav-sticky--footer-buttons .btn-primary--link:hover { color: #3457b1; color: var(--tds-color--blue20); box-shadow: 0 0 0 0 transparent; } .has-sticky-footer .nav-sticky--footer-buttons .btn-primary--link:last-child { margin-left: 12px; padding-left: 13px; border-left: 1px solid #a2a3a5; border-left: 1px solid var(--tds-color--grey40); } .has-sticky-footer .nav-sticky--footer-buttons .btn-primary:first-child { margin-right: 10px; } .has-sticky-footer .nav-sticky--footer-buttons .banner-text { font-size: 15px; -ms-flex-positive: 2; flex-grow: 2; color: #5c5e62; color: var(--tds-color--grey30); } @media (min-width: 640px) { .has-sticky-footer .pane-full-footer { margin-bottom: 70px; } } [id='sticky-footer-btns'] > span { display: inline-block; width: 100%; text-align: right; } [id='sticky-footer-btns'] > span:first-child { text-align: left; } @media (min-width: 640px) { .centered { padding-right: 17.07317%; padding-left: 17.07317%; } } .tsla-user_is--logged_out .hide-for-unauthenticated { display: none; } .tsla-user_is--logged_in .hide-for-authenticated { display: none; } @media (min-width: 640px) { .tsla-user_is--logged_out .tsla-link_for-logout { display: none; } .tsla-user_is--logged_in .tsla-link_for-login { display: none; } } @media (min-width: 0) and (max-width: 639px) { .tesla-insider-form .btn-group { padding-left: 20px; padding-right: 20px; } } .tesla-red { color: #b74134; } [id*='page-support'].dark-mode .content-constrain, [id*='page-support'].dark-mode main { background-color: #222222; background-color: var(--tds-color--grey15); color: #a2a3a5; color: var(--tds-color--grey40); } [id*='page-support'].dark-mode .tsla-header-main--trigger_icon, [id*='page-support'].dark-mode .tsla-sidescroll-menu { display: none; } [id*='page-support'].dark-mode main p, [id*='page-support'].dark-mode main table, [id*='page-support'].dark-mode main thead, [id*='page-support'].dark-mode main tbody, [id*='page-support'].dark-mode main tfoot, [id*='page-support'].dark-mode main tr, [id*='page-support'].dark-mode main th, [id*='page-support'].dark-mode main td, [id*='page-support'].dark-mode main caption, [id*='page-support'].dark-mode main li { color: #d0d1d2; color: var(--tds-color--grey50); } [id*='page-support'].dark-mode main h1, [id*='page-support'].dark-mode main h2, [id*='page-support'].dark-mode main h3, [id*='page-support'].dark-mode main a { color: #fff; color: var(--tds-color--white); } [id*='page-support'].dark-mode .tsla-sidescroll-menu .tsla-nav--list_items { background-color: #222222; background-color: var(--tds-color--grey15); } [id*='page-support'].dark-mode .pwallsoftware thead td, [id*='page-support'].dark-mode .pwallsoftware-mobile thead td { background: #444; background: var(--tds-color--grey25); } [id*='page-support'].dark-mode [id='second_header'] [id='page_title'] { background-color: #222222; background-color: var(--tds-color--grey15); } [id*='page-support'].dark-mode [id='second_header'] [id='page_title']::after { background-image: none; } [id*='page-support'].ham-burglar [for='tsla-header-main--trigger'] { display: none; } [id='second-nav'] .nav-link { text-decoration: none; } .pane-full-footer a, .pane-full-footer a:hover { text-decoration: none; color: #eee; color: var(--tds-color--grey60); box-shadow: 0 0; } .modal-open, .tds-modal--is-open { overflow: hidden; } .modal-open .modal, .tds-modal--is-open .modal { background-color: rgba(0, 0, 0, 0.4); overflow-x: hidden; overflow-y: auto; } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; height: 100%; width: 100%; } .modal.fade .modal-dialog { opacity: 0; transition: opacity .15s linear; } .modal.in .modal-dialog { opacity: 1; transition: opacity .15s linear; } .modal-dialog { overflow: hidden; position: relative; top: 20%; right: 0; bottom: 0; left: 0; min-height: 500px; max-width: 940px; margin: auto; } @media screen and (max-height: 720px) { .modal-dialog { margin-top: 52px; top: 0; } } @media screen and (max-height: 720px) { .admin-menu .modal-dialog { margin-top: calc(49px + 52px); top: 0; } } .modal-content { max-width: 940px; margin: auto; position: relative; background-color: rgba(0, 0, 0, 0.95); background-clip: padding-box; color: #fff; outline: 0; } .modal-alternate .modal-content { color: #5c5e62; color: var(--tds-color--grey30); background-color: #fff; } .modal-alternate .modal-content.transparent { color: #5c5e62; color: var(--tds-color--grey30); background-color: rgba(255, 255, 255, 0.93); } .modal-content .label-checkbox { padding-top: 2px; } .modal-content .icon-checkbox, .modal-content .icon-radio { top: 0; } .modal-backdrop { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.in { opacity: .5; filter: alpha(opacity=50); } .modal-header { padding: 15px; border-bottom: 1px solid #d0d1d2; border-bottom: 1px solid var(--tds-color--grey50); min-height: 16.42857143px; } .modal-dialog .btn-close, .modal-close { top: 15px; right: 15px; width: 15px; height: 15px; position: absolute; z-index: 1; cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: contain; border: 0; background-image: url("/tesla_theme/assets/img/icon-close-alternate.svg"); } .modal-alternate .modal-dialog .btn-close, .modal-alternate .modal-close { background-image: url("/tesla_theme/assets/img/icon-close.svg"); background-image: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="utf-8"%3F%3E%3C!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"%3E%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="892.8 379.8 1080 1080" enable-background="new 892.8 379.8 1080 1080" xml:space="preserve"%3E%3Cmetadata%3E%3C%3Fxpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"%3F%3E%3Cx:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c014 79.156821, 2014/08/29-03:07:50 "%3E%3Crdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns%23"%3E%3Crdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef%23" xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent%23" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpGImg="http://ns.adobe.com/xap/1.0/g/img/" xmlns:pdf="http://ns.adobe.com/pdf/1.3/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xmpTPg="http://ns.adobe.com/xap/1.0/t/pg/" xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions%23" xmlns:xmpG="http://ns.adobe.com/xap/1.0/g/"%3E%3CxmpMM:RenditionClass%3Eproof:pdf%3C/xmpMM:RenditionClass%3E%3CxmpMM:DocumentID%3Exmp.did:d8ab9105-7b7b-4512-bea7-d25e6df72e22%3C/xmpMM:DocumentID%3E%3CxmpMM:InstanceID%3Exmp.iid:d8ab9105-7b7b-4512-bea7-d25e6df72e22%3C/xmpMM:InstanceID%3E%3CxmpMM:OriginalDocumentID%3Euuid:8a0f02e2-ea98-5a40-b6fd-eb0fbdb8c69e%3C/xmpMM:OriginalDocumentID%3E%3CxmpMM:DerivedFrom rdf:parseType="Resource"%3E%3CstRef:instanceID%3Euuid:b3152c65-ac72-364f-98ad-22f418414e36%3C/stRef:instanceID%3E%3CstRef:documentID%3Euuid:8a0f02e2-ea98-5a40-b6fd-eb0fbdb8c69e%3C/stRef:documentID%3E%3CstRef:originalDocumentID%3Euuid:8a0f02e2-ea98-5a40-b6fd-eb0fbdb8c69e%3C/stRef:originalDocumentID%3E%3CstRef:renditionClass%3Eproof:pdf%3C/stRef:renditionClass%3E%3C/xmpMM:DerivedFrom%3E%3CxmpMM:History%3E%3Crdf:Seq%3E%3Crdf:li rdf:parseType="Resource"%3E%3CstEvt:action%3Esaved%3C/stEvt:action%3E%3CstEvt:instanceID%3Exmp.iid:d8ab9105-7b7b-4512-bea7-d25e6df72e22%3C/stEvt:instanceID%3E%3CstEvt:when%3E2014-11-17T11:24:23-08:00%3C/stEvt:when%3E%3CstEvt:softwareAgent%3EAdobe Illustrator CC 2014 (Macintosh)%3C/stEvt:softwareAgent%3E%3CstEvt:changed%3E/%3C/stEvt:changed%3E%3C/rdf:li%3E%3C/rdf:Seq%3E%3C/xmpMM:History%3E%3Cxmp:CreateDate%3E2014-11-17T11:24:22-08:00%3C/xmp:CreateDate%3E%3Cxmp:CreatorTool%3EAdobe Illustrator CC 2014 (Macintosh)%3C/xmp:CreatorTool%3E%3Cxmp:ModifyDate%3E2014-11-17T11:24:23-08:00%3C/xmp:ModifyDate%3E%3Cxmp:MetadataDate%3E2014-11-17T11:24:23-08:00%3C/xmp:MetadataDate%3E%3Cxmp:Thumbnails%3E%3Crdf:Alt%3E%3Crdf:li rdf:parseType="Resource"%3E%3CxmpGImg:width%3E256%3C/xmpGImg:width%3E%3CxmpGImg:height%3E256%3C/xmpGImg:height%3E%3CxmpGImg:format%3EJPEG%3C/xmpGImg:format%3E%3CxmpGImg:image%3E/9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABAASAAAAAEA&%23xA;AQBIAAAAAQAB/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoK&%23xA;DBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8f&%23xA;Hx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgBAAEAAwER&%23xA;AAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAA&%23xA;AQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPB&%23xA;UtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE&%23xA;1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZ&%23xA;qbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEy&%23xA;obHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp&%23xA;0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo&%23xA;+DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8AS/5yR/5yR9b615K8lXX7&%23xA;n4odZ1mFvt9mt7dh+z2dx16DapKqE/5xv/5yQOmm18l+dLqummkOj6xMf95+ywTsf91dkc/Y6H4f&%23xA;sqvrkEEVG4PQ4q7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7F&%23xA;XYqtkkjijaSRgkaAs7sQFVQKkknoBir41/5yM/5yNl8zSz+UvKNw0fl2NimoajGSrXrKd0QjcQA/&%23xA;8H/q9VWS/wDOOv8AzkwpW18neebo86rDpOuTNUEHZYbpz37LIfk3jiqW/wDOSH/ON5003XnTyXa1&%23xA;001m1jR4R/vP3aeBR/uru6D7HUfD9lV8zYq+mf8AnG//AJyQOmm18l+dLqummkOj6xMf95+ywTsf&%23xA;91dkc/Y6H4fsqvrkEEVG4PQ4q7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7&%23xA;FXYq7FXYq0zKqlmIVVFWY7AAdzir48/5yS/5yLHmD6z5M8oT/wC4JT6eq6pGf96yp3ihI/3SCPib&%23xA;9v8A1ftKvnHFX0z/AM43/wDON51I2vnTzpa000Um0fR5h/vR3WedT/uruiH7fU/D9pV9ckAih3B6&%23xA;jFXyN/zkh/zjedNN1508l2tdNNZtY0eEf7z92ngUf7q7ug+x1Hw/ZVfM2Kvpn/nG/wD5yQOmm18l&%23xA;+dLqummkOj6xMf8AefssE7H/AHV2Rz9jofh+yq+uQQRUbg9DirsVdirsVdirsVdirsVdirsVdirs&%23xA;VdirsVdirsVdirsVdirsVdirsVdirTMqqWYhVUVZjsAB3OKvj3/nI/8A5yPbXWufJ3k65K6IpMWq&%23xA;6rEaG7I2aGFh/uj+Zv2/9X7Sr5wxV9M/843/APON51I2vnTzpa000Um0fR5h/vR3WedT/uruiH7f&%23xA;U/D9pV9cgACg2A6DFXYq4gEUO4PUYq+Rv+ckP+cbzppuvOnku1rpprNrGjwj/efu08Cj/dXd0H2O&%23xA;o+H7Kr5mxV9M/wDON/8AzkgdNNr5L86XVdNNIdH1iY/7z9lgnY/7q7I5+x0Pw/ZVfXIIIqNwehxV&%23xA;2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxVpmVVLMQqqKsx2AA7nFXx7/AM5H&%23xA;/wDOR7a61z5O8nXJXRFJi1XVYjQ3ZGzQwsP90fzN+3/q/aVfOGKvpn/nG/8A5xvOpG186edLWmmi&%23xA;k2j6PMP96O6zzqf91d0Q/b6n4ftKvrkAAUGwHQYq7FXYq7FXEAih3B6jFXyN/wA5If8AON5003Xn&%23xA;TyXa1001m1jR4R/vP3aeBR/uru6D7HUfD9lV8zYq+mf+cb/+ckDpptfJfnS6rpppDo+sTH/efssE&%23xA;7H/dXZHP2Oh+H7Kr65BBFRuD0OKuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KtMyq&%23xA;pZiFVRVmOwAHc4q+Pf8AnI//AJyPbXWufJ3k65K6IpMWq6rEaG7I2aGFh/uj+Zv2/wDV+0q+cMVf&%23xA;TP8Azjf/AM43nUja+dPOlrTTRSbR9HmH+9HdZ51P+6u6Ift9T8P2lX1yAAKDYDoMVdirsVdirsVd&%23xA;iriARQ7g9Rir5G/5yQ/5xvOmm686eS7Wumms2saPCP8Aefu08Cj/AHV3dB9jqPh+yq+ZsVfTP/ON&%23xA;/wDzkgdNNr5L86XVdNNIdH1iY/7z9lgnY/7q7I5+x0Pw/ZVfXIIIqNwehxV2KuxV2KuxV2KuxV2K&%23xA;uxV2KuxV2KuxV2KuxV2KuxVpmVVLMQqqKsx2AA7nFXx7/wA5H/8AOR7a61z5O8nXJXRFJi1XVYjQ&%23xA;3ZGzQwsP90fzN+3/AKv2lXzhir6Z/wCcb/8AnG86kbXzp50taaaKTaPo8w/3o7rPOp/3V3RD9vqf&%23xA;h+0q+uQABQbAdBirsVdirsVdirsVdirsVcQCKHcHqMVfHn/OR/8Azjg2hNc+cfJ1sW0RiZdV0qIV&%23xA;NoTu00Kj/dH8y/sf6v2VXzhir6Z/5xv/AOckDpptfJfnS6rpppDo+sTH/efssE7H/dXZHP2Oh+H7&%23xA;Kr65BBFRuD0OKuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KtMyqpZiFVRVmOwAHc4q+Pf8AnI//&%23xA;AJyPbXWufJ3k65K6IpMWq6rEaG7I2aGFh/uj+Zv2/wDV+0q+cMVfTP8Azjf/AM43nUja+dPOlrTT&%23xA;RSbR9HmH+9HdZ51P+6u6Ift9T8P2lX1yAAKDYDoMVdirsVdirsVdirsVdirsVdirTKrKVYBlYUZT&%23xA;uCD2OKvj3/nI/wD5xwbQmufOPk62LaIxMuq6VEKm0J3aaFR/uj+Zf2P9X7Kr5wxV9M/843/85IHT&%23xA;Ta+S/Ol1XTTSHR9YmP8AvP2WCdj/ALq7I5+x0Pw/ZVfXIIIqNwehxV2KuxV2KuxV2KuxV2KuxV2K&%23xA;uxV2KuxVpmVVLMQqqKsx2AA7nFXx7/zkf/zke2utc+TvJ1yV0RSYtV1WI0N2Rs0MLD/dH8zft/6v&%23xA;2lXzhir6Z/5xv/5xvOpG186edLWmmik2j6PMP96O6zzqf91d0Q/b6n4ftKvrkAAUGwHQYq7FXYq7&%23xA;FXYq7FXYq7FXYq7FXYq7FWmVWUqwDKwoyncEHscVfHv/ADkf/wA44NoTXPnHydbFtEYmXVdKiFTa&%23xA;E7tNCo/3R/Mv7H+r9lV84Yq+mf8AnG//AJyQOmm18l+dLqummkOj6xMf95+ywTsf91dkc/Y6H4fs&%23xA;qvrkEEVG4PQ4q7FXYq7FXYq7FXYq7FXYq7FXYq0zKqlmIVVFWY7AAdzir49/5yP/AOcj211rnyd5&%23xA;OuSuiKTFquqxGhuyNmhhYf7o/mb9v/V+0q+cMVfTP/ON/wDzjedSNr5086WtNNFJtH0eYf70d1nn&%23xA;U/7q7oh+31Pw/aVfXIAAoNgOgxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KtMqspVgGVhRlO4IPY&%23xA;4q+Pf+cj/wDnHBtCa584+TrYtojEy6rpUQqbQndpoVH+6P5l/Y/1fsqvnDFX0z/zjf8A85IHTTa+&%23xA;S/Ol1XTTSHR9YmP+8/ZYJ2P+6uyOfsdD8P2VX1yCCKjcHocVdirsVdirsVdirsVdirsVcSAKnYDq&%23xA;cVfHn/OR/wDzke2utc+TvJ1yV0RSYtV1WI0N2Rs0MLD/AHR/M37f+r9pV84Yq+mf+cb/APnG86kb&%23xA;Xzp50taaaKTaPo8w/wB6O6zzqf8AdXdEP2+p+H7Sr65AAFBsB0GKuxV2KuxV2KuxV2KuxV2KuxV2&%23xA;KuxV2KuxV2KuxVplVlKsAysKMp3BB7HFXx7/AM5H/wDOODaE1z5x8nWxbRGJl1XSohU2hO7TQqP9&%23xA;0fzL+x/q/ZVfOGKvpn/nG/8A5yQOmm18l+dLqummkOj6xMf95+ywTsf91dkc/Y6H4fsqvrkEEVG4&%23xA;PQ4q7FXYq7FXYq7FXYq4kAVOwHU4q+Rv+ckP+ckDqRuvJfku6pporDrGsQn/AHo7NBAw/wB1dncf&%23xA;b6D4ftKvmbFX0z/zjf8A843nUja+dPOlrTTRSbR9HmH+9HdZ51P+6u6Ift9T8P2lX1yAAKDYDoMV&%23xA;dirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirTKrKVYBlYUZTuCD2OKvj3/nI//nHBtCa5&%23xA;84+TrYtojEy6rpUQqbQndpoVH+6P5l/Y/wBX7Kr5wxV9M/8AON//ADkgdNNr5L86XVdNNIdH1iY/&%23xA;7z9lgnY/7q7I5+x0Pw/ZVfXIIIqNwehxV2KuxV2KuxVxIAqdgOpxV8jf85If85IHUjdeS/Jd1TTR&%23xA;WHWNYhP+9HZoIGH+6uzuPt9B8P2lXzNir6Z/5xv/AOcbzqRtfOnnS1ppopNo+jzD/ejus86n/dXd&%23xA;EP2+p+H7Sr65AAFBsB0GKuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxVplVlKsA&%23xA;ysKMp3BB7HFXx7/zkf8A844NoTXPnHydbFtEYmXVdKiFTaE7tNCo/wB0fzL+x/q/ZVfOGKvpn/nG&%23xA;/wD5yQOmm18l+dLqummkOj6xMf8AefssE7H/AHV2Rz9jofh+yq+uQQRUbg9DirsVdiriQBU7AdTi&%23xA;r5G/5yQ/5yQOpG68l+S7qmmisOsaxCf96OzQQMP91dncfb6D4ftKvmbFX0z/AM43/wDON51I2vnT&%23xA;zpa000Um0fR5h/vR3WedT/uruiH7fU/D9pV9cgACg2A6DFXYq7FXYq7FXYq7FXYq7FXYq7FXYq7F&%23xA;XYq7FXYq7FXYq7FXYq7FXYq0yqylWAZWFGU7gg9jir49/wCcj/8AnHBtCa584+TrYtojEy6rpUQq&%23xA;bQndpoVH+6P5l/Y/1fsqvnDFX0z/AM43/wDOSB002vkvzpdV000h0fWJj/vP2WCdj/ursjn7HQ/D&%23xA;9lV9cggio3B6HFXEgCp2A6nFXyN/zkh/zkgdSN15L8l3VNNFYdY1iE/70dmggYf7q7O4+30Hw/aV&%23xA;fM2Kvpn/AJxv/wCcbzqRtfOnnS1ppopNo+jzD/ejus86n/dXdEP2+p+H7Sr65AAFBsB0GKuxV2Ku&%23xA;xV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxVplVlKsAysKMp3BB7HFXx5/zk&%23xA;l/zjoPL/ANZ85+UIP9wTH1NV0uMf7yFjvLCB/ukk/Ev7H+r9lV844q+mf+cb/wDnJA6abXyX50uq&%23xA;6aaQ6PrEx/3n7LBOx/3V2Rz9jofh+yq7/nJD/nJA6kbryX5LuqaaKw6xrEJ/3o7NBAw/3V2dx9vo&%23xA;Ph+0q+ZsVfTP/ON//ON51I2vnTzpa000Um0fR5h/vR3WedT/ALq7oh+31Pw/aVfXIAAoNgOgxV2K&%23xA;uxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KrZI45Y2jkUPG4Kuj&%23xA;AFWUihBB6g4q+Nf+cjP+cc5PLElx5u8o25fy45MmoafGCWsmJ3dB3gP/AAn+r0VfPOKuxV9M/wDO&%23xA;N/8AzjedSNr5086WtNNFJtH0eYf70d1nnU/7q7oh+31Pw/aVfXIAAoNgOgxV2KuxV2KuxV2KuxV2&%23xA;KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxVbJJHFG0kjBI0BZ3YgKqgVJJPQDF&%23xA;Xxr/AM5Gf85GSeZ5Ljyj5RuCnlxCY9Q1CMkNesDuiHtAP+H/ANXqq+ecVdir6Z/5xv8A+ckDpptf&%23xA;JfnS6rpppDo+sTH/AHn7LBOx/wB1dkc/Y6H4fsqvrkEEVG4PQ4q7FXYq7FXYq7FXYq7FXYq7FXYq&%23xA;7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FWmZVUsxCqoqzHYADucVfHn/ADkl/wA5FjzB9Z8m&%23xA;eUJ/9wSn09V1SM/71lTvFCR/ukEfE37f+r9pV844q+mf+cb/APnG86kbXzp50taaaKTaPo8w/wB6&%23xA;O6zzqf8AdXdEP2+p+H7Srv8AnJD/AJxvOmm686eS7Wumms2saPCP95+7TwKP91d3QfY6j4fsqvmb&%23xA;FX0z/wA43/8AOSB002vkvzpdV000h0fWJj/vP2WCdj/ursjn7HQ/D9lV9cggio3B6HFXYq7FXYq7&%23xA;FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq0zKqlmIVVFWY7AAdzir49/5yP8A&%23xA;+cj211rnyd5OuSuiKTFquqxGhuyNmhhYf7o/mb9v/V+0q+cMVfTP/ON//ON51I2vnTzpa000Um0f&%23xA;R5h/vR3WedT/ALq7oh+31Pw/aVfXIAAoNgOgxVxAIodweoxV8jf85If843nTTdedPJdrXTTWbWNH&%23xA;hH+8/dp4FH+6u7oPsdR8P2VXzNir6Z/5xv8A+ckDpptfJfnS6rpppDo+sTH/AHn7LBOx/wB1dkc/&%23xA;Y6H4fsqvrkEEVG4PQ4q7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FWmZVU&%23xA;sxCqoqzHYADucVfHv/OR/wDzke2utc+TvJ1yV0RSYtV1WI0N2Rs0MLD/AHR/M37f+r9pV84Yq+mf&%23xA;+cb/APnG86kbXzp50taaaKTaPo8w/wB6O6zzqf8AdXdEP2+p+H7Sr65AAFBsB0GKuxV2KuIBFDuD&%23xA;1GKvkb/nJD/nG86abrzp5Lta6aazaxo8I/3n7tPAo/3V3dB9jqPh+yq+ZsVfTP8Azjf/AM5IHTTa&%23xA;+S/Ol1XTTSHR9YmP+8/ZYJ2P+6uyOfsdD8P2VX1yCCKjcHocVdirsVdirsVdirsVdirsVdirsVdi&%23xA;rsVdirsVdirsVdirsVdirTMqqWYhVUVZjsAB3OKvj3/nI/8A5yPbXWufJ3k65K6IpMWq6rEaG7I2&%23xA;aGFh/uj+Zv2/9X7Sr5wxV9M/843/APON51I2vnTzpa000Um0fR5h/vR3WedT/uruiH7fU/D9pV9c&%23xA;gACg2A6DFXYq7FXYq7FXEAih3B6jFXyN/wA5If8AON5003XnTyXa1001m1jR4R/vP3aeBR/uru6D&%23xA;7HUfD9lV8zYq+mf+cb/+ckDpptfJfnS6rpppDo+sTH/efssE7H/dXZHP2Oh+H7Kr65BBFRuD0OKu&%23xA;xV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxVpmVVLMQqqKsx2AA7nFXx7/AM5H/wDOR7a6&%23xA;1z5O8nXJXRFJi1XVYjQ3ZGzQwsP90fzN+3/q/aVfOGKvpn/nG/8A5xvOpG186edLWmmik2j6PMP9&%23xA;6O6zzqf91d0Q/b6n4ftKvrkAAUGwHQYq7FXYq7FXYq7FXYq4gEUO4PUYq+Rv+ckP+cbzppuvOnku&%23xA;1rpprNrGjwj/AHn7tPAo/wB1d3QfY6j4fsqvmbFX0z/zjf8A85IHTTa+S/Ol1XTTSHR9YmP+8/ZY&%23xA;J2P+6uyOfsdD8P2VX1yCCKjcHocVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirTMqqWYhVUV&%23xA;ZjsAB3OKvj3/AJyP/wCcj211rnyd5OuSuiKTFquqxGhuyNmhhYf7o/mb9v8A1ftKvnDFX0z/AM43&%23xA;/wDON51I2vnTzpa000Um0fR5h/vR3WedT/uruiH7fU/D9pV9cgACg2A6DFXYq7FXYq7FXYq7FXYq&%23xA;7FXEAih3B6jFXx5/zkf/AM44NoTXPnHydbFtEYmXVdKiFTaE7tNCo/3R/Mv7H+r9lV84Yq+mf+cb&%23xA;/wDnJA6abXyX50uq6aaQ6PrEx/3n7LBOx/3V2Rz9jofh+yq+uQQRUbg9DirsVdirsVdirsVdirsV&%23xA;dirsVdirsVdirsVaZlVSzEKqirMdgAO5xV8e/wDOR/8Azke2utc+TvJ1yV0RSYtV1WI0N2Rs0MLD&%23xA;/dH8zft/6v2lXzhir6Z/5xv/AOcbzqRtfOnnS1ppopNo+jzD/ejus86n/dXdEP2+p+H7Sr65AAFB&%23xA;sB0GKuxV2KuxV2KuxV2KuxV2KuxV2KtMqspVgGVhRlO4IPY4q+Pf+cj/APnHBtCa584+TrYtojEy&%23xA;6rpUQqbQndpoVH+6P5l/Y/1fsqvnDFX0z/zjf/zkgdNNr5L86XVdNNIdH1iY/wC8/ZYJ2P8Aursj&%23xA;n7HQ/D9lV9cggio3B6HFXYq7FXYq7FXYq7FXYq7FXYq7FXYq0zKqlmIVVFWY7AAdzir49/5yP/5y&%23xA;PbXWufJ3k65K6IpMWq6rEaG7I2aGFh/uj+Zv2/8AV+0q+cMVfTP/ADjf/wA43nUja+dPOlrTTRSb&%23xA;R9HmH+9HdZ51P+6u6Ift9T8P2lX1yAAKDYDoMVdirsVdirsVdirsVdirsVdirsVdirsVaZVZSrAM&%23xA;rCjKdwQexxV8e/8AOR//ADjg2hNc+cfJ1sW0RiZdV0qIVNoTu00Kj/dH8y/sf6v2VXzhir6Z/wCc&%23xA;b/8AnJA6abXyX50uq6aaQ6PrEx/3n7LBOx/3V2Rz9jofh+yq+uQQRUbg9DirsVdirsVdirsVdirs&%23xA;VdirsVcSAKnYDqcVfHn/ADkf/wA5HtrrXPk7ydcldEUmLVdViNDdkbNDCw/3R/M37f8Aq/aVfOGK&%23xA;vpn/AJxv/wCcbzqRtfOnnS1ppopNo+jzD/ejus86n/dXdEP2+p+H7Sr65AAFBsB0GKuxV2KuxV2K&%23xA;uxV2KuxV2KuxV2KuxV2KuxV2KtMqspVgGVhRlO4IPY4q+Pf+cj/+ccG0Jrnzj5Oti2iMTLqulRCp&%23xA;tCd2mhUf7o/mX9j/AFfsqvnDFX0z/wA43/8AOSB002vkvzpdV000h0fWJj/vP2WCdj/ursjn7HQ/&%23xA;D9lV9cggio3B6HFXYq7FXYq7FXYq7FXYq4kAVOwHU4q+Rv8AnJD/AJyQOpG68l+S7qmmisOsaxCf&%23xA;96OzQQMP91dncfb6D4ftKvmbFX0z/wA43/8AON51I2vnTzpa000Um0fR5h/vR3WedT/uruiH7fU/&%23xA;D9pV9cgACg2A6DFXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FWmVWUqwDKwoyncEHscVfH&%23xA;v/OR/wDzjg2hNc+cfJ1sW0RiZdV0qIVNoTu00Kj/AHR/Mv7H+r9lV84Yq+mf+cb/APnJA6abXyX5&%23xA;0uq6aaQ6PrEx/wB5+ywTsf8AdXZHP2Oh+H7Kr65BBFRuD0OKuxV2KuxV2KuxVxIAqdgOpxV8jf8A&%23xA;OSH/ADkgdSN15L8l3VNNFYdY1iE/70dmggYf7q7O4+30Hw/aVfM2Kvpn/nG//nG86kbXzp50taaa&%23xA;KTaPo8w/3o7rPOp/3V3RD9vqfh+0q+uQABQbAdBirsVdirsVdirsVdirsVdirsVdirsVdirsVdir&%23xA;sVdirsVdirTKrKVYBlYUZTuCD2OKvj3/AJyP/wCccG0Jrnzj5Oti2iMTLqulRCptCd2mhUf7o/mX&%23xA;9j/V+yq+cMVfTP8Azjf/AM5IHTTa+S/Ol1XTTSHR9YmP+8/ZYJ2P+6uyOfsdD8P2VX1yCCKjcHoc&%23xA;VdirsVdiriQBU7AdTir5G/5yQ/5yQOpG68l+S7qmmisOsaxCf96OzQQMP91dncfb6D4ftKvmbFX0&%23xA;z/zjf/zjedSNr5086WtNNFJtH0eYf70d1nnU/wC6u6Ift9T8P2lX1yAAKDYDoMVdirsVdirsVdir&%23xA;sVdirsVdirsVdirsVdirsVdirsVdirsVdirsVaZVZSrAMrCjKdwQexxV8e/85H/844NoTXPnHydb&%23xA;FtEYmXVdKiFTaE7tNCo/3R/Mv7H+r9lV84Yq+mf+cb/+ckDpptfJfnS6rpppDo+sTH/efssE7H/d&%23xA;XZHP2Oh+H7Kr65BBFRuD0OKuxVxIAqdgOpxV8jf85If85IHUjdeS/Jd1TTRWHWNYhP8AvR2aCBh/&%23xA;urs7j7fQfD9pV8zYq+mf+cb/APnG86kbXzp50taaaKTaPo8w/wB6O6zzqf8AdXdEP2+p+H7Sr65A&%23xA;AFBsB0GKuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KtMqspVgGVhRlO&%23xA;4IPY4q+Pf+cj/wDnHBtCa584+TrYtojEy6rpUQqbQndpoVH+6P5l/Y/1fsqvnDFX0z/zjf8A85IH&%23xA;TTa+S/Ol1XTTSHR9YmP+8/ZYJ2P+6uyOfsdD8P2VX1yCCKjcHocVfI3/ADkh/wA5IHUjdeS/Jd1T&%23xA;TRWHWNYhP+9HZoIGH+6uzuPt9B8P2lXzNir6Z/5xv/5xvOpG186edLWmmik2j6PMP96O6zzqf91d&%23xA;0Q/b6n4ftKvrkAAUGwHQYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXY&%23xA;q7FXYq0yqylWAZWFGU7gg9jir48/5yS/5x0Hl/6z5z8oQf7gmPqarpcY/wB5Cx3lhA/3SSfiX9j/&%23xA;AFfsqvnHFX0z/wA43/8AOSB002vkvzpdV000h0fWJj/vP2WCdj/ursjn7HQ/D9lVF/8AOSP/ADjd&%23xA;6P1rzr5Ktf3PxTazo0K/Y7tcW6j9nu6Dp1G1QFUJ/wA43/8AON51I2vnTzpa000Um0fR5h/vR3We&%23xA;dT/uruiH7fU/D9pV9cgACg2A6DFXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7&%23xA;FXYq7FXYq7FXYq7FVskccsbRyKHjcFXRgCrKRQgg9QcVfGv/ADkZ/wA45S+WZZ/NvlG3aTy7IxfU&%23xA;NOjBZrJmO7oBuYCf+A/1eirJf+cdf+cZ1C2vnHzzannVZtJ0OZaAAbrNdIe/dYz828MVf//Z%3C/xmpGImg:image%3E%3C/rdf:li%3E%3C/rdf:Alt%3E%3C/xmp:Thumbnails%3E%3Cpdf:Producer%3EAdobe PDF library 11.00%3C/pdf:Producer%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3CxmpTPg:MaxPageSize rdf:parseType="Resource"%3E%3CstDim:w%3E1079.999966%3C/stDim:w%3E%3CstDim:h%3E1079.999966%3C/stDim:h%3E%3CstDim:unit%3EPixels%3C/stDim:unit%3E%3C/xmpTPg:MaxPageSize%3E%3CxmpTPg:NPages%3E1%3C/xmpTPg:NPages%3E%3CxmpTPg:HasVisibleTransparency%3EFalse%3C/xmpTPg:HasVisibleTransparency%3E%3CxmpTPg:HasVisibleOverprint%3EFalse%3C/xmpTPg:HasVisibleOverprint%3E%3CxmpTPg:PlateNames%3E%3Crdf:Seq%3E%3Crdf:li%3ECyan%3C/rdf:li%3E%3Crdf:li%3EMagenta%3C/rdf:li%3E%3Crdf:li%3EYellow%3C/rdf:li%3E%3Crdf:li%3EBlack%3C/rdf:li%3E%3C/rdf:Seq%3E%3C/xmpTPg:PlateNames%3E%3CxmpTPg:SwatchGroups%3E%3Crdf:Seq%3E%3Crdf:li rdf:parseType="Resource"%3E%3CxmpG:groupName%3EDefault Swatch Group%3C/xmpG:groupName%3E%3CxmpG:groupType%3E0%3C/xmpG:groupType%3E%3C/rdf:li%3E%3C/rdf:Seq%3E%3C/xmpTPg:SwatchGroups%3E%3C/rdf:Description%3E%3C/rdf:RDF%3E%3C/x:xmpmeta%3E%3C%3Fxpacket end="w"%3F%3E%3C/metadata%3E%3Cpolygon fill="%23010101" points="1936.8,379.8 1432.8,885.6 927,379.8 892.8,414 1396.8,919.8 892.8,1425.6 927,1459.8 1432.8,954 1936.8,1459.8 1972.8,1425.6 1467,919.8 1972.8,414 "/%3E%3C/svg%3E%0A'); } .modal-dialog .btn-close:active, .modal-close:active { outline: 0; } .lt-ie9 .modal-close, .no-svg .modal-close { background-image: url("/tesla_theme/assets/img/icon-close.png"); } .lt-ie9 .modal-alternate .modal-close, .no-svg .modal-alternate .modal-close { background-image: url("/tesla_theme/assets/img/icon-close-alternate.png"); } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { overflow: hidden; position: relative; padding: 50px 60px; color: #fff; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .modal-alternate .modal-header { padding: 0; border-bottom: 0; } .modal-alternate .modal-title { margin: 0 0 40px; font-size: 30px; text-align: center; padding-top: 25px; font-weight: normal; } .modal-alternate .modal-body { color: #222222; color: var(--tds-color--grey15); padding: 20px 30px; } .modal-alternate .center { text-align: center; } .modal-alternate .center p { text-align: center; } .modal-throbber { background-image: url("/tesla_theme/assets/img/comment_loader2x.gif"); background-repeat: no-repeat; background-position: center 40%; background-color: #a2a3a5; max-width: 940px; height: 100%; margin: auto; right: 0; bottom: 0; left: 0; position: absolute; clear: both; z-index: 2; opacity: .6; } .request-real-photos-modal h4.modal-title { font-family: 'Gotham Medium', 'system', sans-serif; font-family: var(--tds-fonts-combined--medium); } @media (min-width: 0) and (max-width: 639px) { .request-real-photos-modal { z-index: 9999; } .request-real-photos-modal .modal-dialog { top: 0; position: absolute; overflow-y: auto; } .request-real-photos-modal .modal-content { width: 100%; min-height: 100vh; position: relative; top: 0; left: 0; } .request-real-photos-modal h4.modal-title.variant-1 { padding-top: 45px; } .request-real-photos-modal button.btn-close.modal-close { display: block; } } .localization-modal { text-align: center; } .localization-modal [id='locale-modal'] .modal-content { background-color: #fff; } .localization-modal [id='locale-modal'] .locale-header { text-transform: none; line-height: 36px; padding-top: 0; } [id='page-findus'] footer { display: none; } [id='page-findus'] footer .footer-copy { display: none; } .modal-link.locale, .modal-link-locale.locale { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; cursor: pointer; font-size: 13px; line-height: 13px; outline: 0; padding: 20px 10px; display: block; color: #000; } @media (min-width: 0) and (max-width: 639px) { .pane-skinny-footer .modal-link.locale, .pane-skinny-footer .modal-link-locale.locale { color: #f4f4f4; margin-bottom: 20px; } } .modal-link.locale .icon-caret, .modal-link-locale.locale .icon-caret { display: none; } .modal-link.locale::before, .modal-link-locale.locale::before { width: 16px; height: 16px; content: ''; position: absolute; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; border-radius: 30px; background-image: none !important; } .pane-full-footer .modal-link.locale::before, .pane-full-footer .modal-link-locale.locale::before { top: 10px; left: 11px; } @media (min-width: 0) and (max-width: 639px) { .pane-skinny-footer .modal-link.locale::before, .pane-skinny-footer .modal-link-locale.locale::before { top: 10px; left: 11px; } } @media (min-width: 640px) { .pane-skinny-footer .modal-link.locale::before, .pane-skinny-footer .modal-link-locale.locale::before { top: 1px; left: 9px; } } .modal-link.locale::after, .modal-link-locale.locale::after { font-size: 12px; padding-left: 0; } @media (min-width: 0) and (max-width: 639px) { .modal-link.locale::after, .modal-link-locale.locale::after { font-size: 12px; } .pane-skinny-footer .modal-link.locale::after, .pane-skinny-footer .modal-link-locale.locale::after { color: #f4f4f4; } } .pane-full-footer .modal-link.locale::after, .pane-full-footer .modal-link-locale.locale::after { color: #f4f4f4; } [dir='rtl'] .modal-link.locale::after, [dir='rtl'] .modal-link-locale.locale::after { padding-right: 15px; padding-left: 0; } .i18n-nl_BE .modal-link.locale::before, .i18n-fr_BE .modal-link.locale::before, .i18n-nl_BE .modal-link-locale.locale::before, .i18n-fr_BE .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-belgium.svg"); } .i18n-nl_BE .modal-link.locale::after, .i18n-nl_BE .modal-link-locale.locale::after { content: 'Belgi\00eb'; } .i18n-fr_BE .modal-link.locale::after, .i18n-fr_BE .modal-link-locale.locale::after { content: 'Belgique'; } .i18n-en_CA .modal-link.locale::before, .i18n-fr_CA .modal-link.locale::before, .i18n-en_CA .modal-link-locale.locale::before, .i18n-fr_CA .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-canada.svg"); } .i18n-en_CA .modal-link.locale::after, .i18n-en_CA .modal-link-locale.locale::after { content: 'Canada (En)'; } .i18n-fr_CA .modal-link.locale::after, .i18n-fr_CA .modal-link-locale.locale::after { content: 'Canada (Fr)'; } .i18n-es_MX .modal-link.locale::before, .i18n-es_MX .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-mexico.svg"); } .i18n-es_MX .modal-link.locale::after, .i18n-es_MX .modal-link-locale.locale::after { content: 'México'; } .i18n-fr_LU .modal-link.locale::before, .i18n-fr_LU .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-luxembourg.svg"); } .i18n-fr_LU .modal-link.locale::after, .i18n-fr_LU .modal-link-locale.locale::after { content: 'Luxembourg'; } .i18n-de_LU .modal-link.locale::before, .i18n-de_LU .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-luxembourg.svg"); } .i18n-de_LU .modal-link.locale::after, .i18n-de_LU .modal-link-locale.locale::after { content: 'Luxemburg'; } .i18n-fr_CH .modal-link.locale::before, .i18n-de_CH .modal-link.locale::before, .i18n-it_CH .modal-link.locale::before, .i18n-fr_CH .modal-link-locale.locale::before, .i18n-de_CH .modal-link-locale.locale::before, .i18n-it_CH .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-switzerland.svg"); } .i18n-de_CH .modal-link.locale::after, .i18n-de_CH .modal-link-locale.locale::after { content: 'Schweiz'; } .i18n-fr_CH .modal-link.locale::after, .i18n-fr_CH .modal-link-locale.locale::after { content: 'Suisse'; } .i18n-it_CH .modal-link.locale::after, .i18n-it_CH .modal-link-locale.locale::after { content: 'Svizzera'; } .i18n-de_AT .modal-link.locale::before, .i18n-de_AT .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-austria.svg"); } .i18n-de_AT .modal-link.locale::after, .i18n-de_AT .modal-link-locale.locale::after { content: '\00d6sterreich'; } .i18n-en_AU .modal-link.locale::before, .i18n-en_AU .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-australia.svg"); } .i18n-en_AU .modal-link.locale::after, .i18n-en_AU .modal-link-locale.locale::after { content: 'Australia'; } .i18n-en_NZ .modal-link.locale::before, .i18n-en_NZ .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-new_zealand.svg"); } .i18n-en_NZ .modal-link.locale::after, .i18n-en_NZ .modal-link-locale.locale::after { content: 'New Zealand'; } .i18n-zh_CN .modal-link.locale::before, .i18n-zh_CN .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-china.svg"); } .i18n-zh_CN .modal-link.locale::after, .i18n-zh_CN .modal-link-locale.locale::after { content: '中国'; } .i18n-da .modal-link.locale::before, .i18n-da .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-denmark.svg"); } .i18n-da .modal-link.locale::after, .i18n-da .modal-link-locale.locale::after { content: 'Denmark'; } .i18n-en_EU .modal-link.locale::before, .i18n-en_EU .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-eu.svg"); } .i18n-en_EU .modal-link.locale::after, .i18n-en_EU .modal-link-locale.locale::after { content: 'Other Europe'; } .i18n-fr .modal-link.locale::before, .i18n-fr .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-france.svg"); } .i18n-fr .modal-link.locale::after, .i18n-fr .modal-link-locale.locale::after { content: 'France'; } .i18n-de .modal-link.locale::before, .i18n-de .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-germany.svg"); } .i18n-de .modal-link.locale::after, .i18n-de .modal-link-locale.locale::after { content: 'Deutschland'; } .i18n-es_ES .modal-link.locale::before, .i18n-es_ES .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-spain.svg"); } .i18n-es_ES .modal-link.locale::after, .i18n-es_ES .modal-link-locale.locale::after { content: 'Espa\00f1 a'; } .i18n-pt_PT .modal-link.locale::before, .i18n-pt_PT .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-portugal.svg"); } .i18n-pt_PT .modal-link.locale::after, .i18n-pt_PT .modal-link-locale.locale::after { content: 'Portugal'; } .i18n-cs_CZ .modal-link.locale::before, .i18n-cs_CZ .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-czechia.svg"); } .i18n-cs_CZ .modal-link.locale::after, .i18n-cs_CZ .modal-link-locale.locale::after { content: 'Česko'; } .i18n-el_GR .modal-link.locale::before, .i18n-el_GR .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-greece.svg"); } .i18n-el_GR .modal-link.locale::after, .i18n-el_GR .modal-link-locale.locale::after { content: 'Ελλάδα'; } .i18n-hr_HR .modal-link.locale::before, .i18n-hr_HR .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-croatia.svg"); } .i18n-hr_HR .modal-link.locale::after, .i18n-hr_HR .modal-link-locale.locale::after { content: 'Hrvatska'; } .i18n-en_PR .modal-link.locale::before, .i18n-es_PR .modal-link.locale::before, .i18n-en_PR .modal-link-locale.locale::before, .i18n-es_PR .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-puerto-rico.svg"); } .i18n-en_PR .modal-link.locale::after, .i18n-es_PR .modal-link.locale::after, .i18n-en_PR .modal-link-locale.locale::after, .i18n-es_PR .modal-link-locale.locale::after { content: 'Puerto Rico'; } .i18n-en_SG .modal-link.locale::before, .i18n-en_SG .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-singapore.svg"); } .i18n-en_SG .modal-link.locale::after, .i18n-en_SG .modal-link-locale.locale::after { content: 'Singapore'; } .i18n-en_IN .modal-link.locale::before, .i18n-en_IN .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-india.svg"); } .i18n-en_IN .modal-link.locale::after, .i18n-en_IN .modal-link-locale.locale::after { content: 'India'; } .i18n-sl_SI .modal-link.locale::before, .i18n-sl_SI .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-slovenia.svg"); } .i18n-sl_SI .modal-link.locale::after, .i18n-sl_SI .modal-link-locale.locale::after { content: 'Slovenija'; } .i18n-is_IS .modal-link.locale::before, .i18n-is_IS .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-iceland.svg"); } .i18n-is_IS .modal-link.locale::after, .i18n-is_IS .modal-link-locale.locale::after { content: 'Iceland'; } .i18n-he_IL .modal-link.locale::before, .i18n-he_IL .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-israel.svg"); } .i18n-he_IL .modal-link.locale::after, .i18n-he_IL .modal-link-locale.locale::after { content: 'ישראל'; } .i18n-en_JO .modal-link.locale::before, .i18n-en_JO .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-jordan.svg"); } .i18n-en_JO .modal-link.locale::after, .i18n-en_JO .modal-link-locale.locale::after { content: 'Jordan'; } .i18n-ar_JO .modal-link.locale::before, .i18n-ar_JO .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-jordan.svg"); } .i18n-ar_JO .modal-link.locale::after, .i18n-ar_JO .modal-link-locale.locale::after { content: 'Jordan'; } .i18n-en_AE .modal-link.locale::before, .i18n-en_AE .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-uae.svg"); } .i18n-en_AE .modal-link.locale::after, .i18n-en_AE .modal-link-locale.locale::after { content: 'UAE'; } .i18n-ar_AE .modal-link.locale::before, .i18n-ar_AE .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-uae.svg"); } .i18n-ar_AE .modal-link.locale::after, .i18n-ar_AE .modal-link-locale.locale::after { content: 'UAE'; } .i18n-pl_PL .modal-link.locale::before, .i18n-pl_PL .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-poland.svg"); } .i18n-pl_PL .modal-link.locale::after, .i18n-pl_PL .modal-link-locale.locale::after { content: 'Polska'; } .i18n-zh_HK .modal-link.locale::before, .i18n-en_HK .modal-link.locale::before, .i18n-zh_HK .modal-link-locale.locale::before, .i18n-en_HK .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-hongkong.svg"); } .i18n-en_HK .modal-link.locale::after, .i18n-en_HK .modal-link-locale.locale::after { content: 'Hong Kong'; } .i18n-zh_HK .modal-link.locale::after, .i18n-zh_HK .modal-link-locale.locale::after { content: '香港'; } .i18n-zh_TW .modal-link.locale::before, .i18n-zh_TW .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-taiwan.svg"); } .i18n-zh_TW .modal-link.locale::after, .i18n-zh_TW .modal-link-locale.locale::after { content: '台灣'; } .i18n-ko_KR .modal-link.locale::before, .i18n-ko_KR .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-south-korea.svg"); } .i18n-ko_KR .modal-link.locale::after, .i18n-ko_KR .modal-link-locale.locale::after { content: '대한민국'; } .i18n-zh_MO .modal-link.locale::before, .i18n-en_MO .modal-link.locale::before, .i18n-zh_MO .modal-link-locale.locale::before, .i18n-en_MO .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-macau.svg"); } .i18n-en_MO .modal-link.locale::after, .i18n-en_MO .modal-link-locale.locale::after { content: 'Macau'; } .i18n-zh_MO .modal-link.locale::after, .i18n-zh_MO .modal-link-locale.locale::after { content: '澳門'; } .i18n-it .modal-link.locale::before, .i18n-it .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-italy.svg"); } .i18n-it .modal-link.locale::after, .i18n-it .modal-link-locale.locale::after { content: 'Italia'; } .i18n-ja_JP .modal-link.locale::before, .i18n-ja_JP .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-japan.svg"); } .i18n-ja_JP .modal-link.locale::after, .i18n-ja_JP .modal-link-locale.locale::after { content: '日本'; } .i18n-nl .modal-link.locale::before, .i18n-nl .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-netherlands.svg"); } .i18n-nl .modal-link.locale::after, .i18n-nl .modal-link-locale.locale::after { content: 'Nederland'; } .i18n-no .modal-link.locale::before, .i18n-no .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-norway.svg"); } .i18n-no .modal-link.locale::after, .i18n-no .modal-link-locale.locale::after { content: 'Norge'; } .i18n-en .modal-link.locale::before, .i18n-en .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-us.svg"); } .i18n-en .modal-link.locale::after, .i18n-en .modal-link-locale.locale::after { content: 'United States'; } .i18n-en_GB .modal-link.locale::before, .i18n-en_GB .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-uk.svg"); } .i18n-en_GB .modal-link.locale::after, .i18n-en_GB .modal-link-locale.locale::after { content: 'United Kingdom'; } .i18n-en_IE .modal-link.locale::before, .i18n-en_IE .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-ireland.svg"); } .i18n-en_IE .modal-link.locale::after, .i18n-en_IE .modal-link-locale.locale::after { content: 'Ireland'; } .i18n-sv_SE .modal-link.locale::before, .i18n-sv_SE .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-sweden.svg"); } .i18n-sv_SE .modal-link.locale::after, .i18n-sv_SE .modal-link-locale.locale::after { content: 'Sverige'; } .i18n-fi_FI .modal-link.locale::before, .i18n-fi_FI .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-finland.svg"); } .i18n-fi_FI .modal-link.locale::after, .i18n-fi_FI .modal-link-locale.locale::after { content: 'Suomi'; } .pane-full-footer .localization-modal .modal-link.locale, .pane-full-footer .localization-modal .modal-link-locale.locale { position: absolute; right: 38px; bottom: 7px; padding: 9px 21px 9px 36px; background-color: #222222; background-color: var(--tds-color--grey15); border: 1px solid #5c5e62; border: 1px solid var(--tds-color--grey30); } .tsla-header-nav--secondary .tsla-header-nav--list_link.modal-link-locale { border-bottom: 0; } .locale-header { font-weight: 400; font-size: 20px; margin-bottom: 16px; color: #fff; text-align: left; } .language-list { text-align: left; padding-left: 0; } .locale-selector { z-index: 10000; } .locale-selector .flag-australia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-australia.svg"); } .locale-selector .flag-new_zealand::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-new_zealand.svg"); } .locale-selector .flag-austria::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-austria.svg"); } .locale-selector .flag-belgium::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-belgium.svg"); } .locale-selector .flag-croatia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-croatia.svg"); } .locale-selector .flag-luxembourg::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-luxembourg.svg"); } .locale-selector .flag-canada::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-canada.svg"); } .locale-selector .flag-mexico::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-mexico.svg"); } .locale-selector .flag-china::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-china.svg"); } .locale-selector .flag-czechia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-czechia.svg"); } .locale-selector .flag-denmark::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-denmark.svg"); } .locale-selector .flag-eu::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-eu.svg"); } .locale-selector .flag-france::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-france.svg"); } .locale-selector .flag-germany::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-germany.svg"); } .locale-selector .flag-hongkong::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-hongkong.svg"); } .locale-selector .flag-taiwan::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-taiwan.svg"); } .locale-selector .flag-macau::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-macau.svg"); } .locale-selector .flag-iceland::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-iceland.svg"); } .locale-selector .flag-italy::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-italy.svg"); } .locale-selector .flag-ireland::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-ireland.svg"); } .locale-selector .flag-japan::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-japan.svg"); } .locale-selector .flag-jordan::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-jordan.svg"); } .locale-selector .flag-netherlands::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-netherlands.svg"); } .locale-selector .flag-norway::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-norway.svg"); } .locale-selector .flag-sweden::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-sweden.svg"); } .locale-selector .flag-spain::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-spain.svg"); } .locale-selector .flag-portugal::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-portugal.svg"); } .locale-selector .flag-finland::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-finland.svg"); } .locale-selector .flag-switzerland::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-switzerland.svg"); } .locale-selector .flag-south-korea::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-south-korea.svg"); } .locale-selector .flag-uae::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-uae.svg"); } .locale-selector .flag-uk::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-uk.svg"); } .locale-selector .flag-us::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-us.svg"); } .locale-selector .flag-bulgaria::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-bulgaria.svg"); } .locale-selector .flag-cyprus::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-cyprus.svg"); } .locale-selector .flag-estonia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-estonia.svg"); } .locale-selector .flag-greece::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-greece.svg"); } .locale-selector .flag-hungary::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-hungary.svg"); } .locale-selector .flag-kazachstan::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-kazachstan.svg"); } .locale-selector .flag-latvia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-latvia.svg"); } .locale-selector .flag-liechtenstein::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-liechtenstein.svg"); } .locale-selector .flag-lithuania::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-lithuania.svg"); } .locale-selector .flag-monaco::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-monaco.svg"); } .locale-selector .flag-poland::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-poland.svg"); } .locale-selector .flag-romania::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-romania.svg"); } .locale-selector .flag-russia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-russia.svg"); } .locale-selector .flag-serbia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-serbia.svg"); } .locale-selector .flag-slovakia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-slovakia.svg"); } .locale-selector .flag-slovenia::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-slovenia.svg"); } .locale-selector .flag-turkey::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-turkey.svg"); } .locale-selector .flag-ukraine::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-ukraine.svg"); } .locale-selector .flag-israel::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-israel.svg"); } .locale-selector .flag-singapore::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-singapore.svg"); } .locale-selector .flag-puerto-rico::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-puerto-rico.svg"); } .locale-selector .flag-india::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-india.svg"); } .locale-selector .language .language-list-sub { display: none; margin-left: 10px; } .locale-selector .language.active { display: block; } .locale-selector .language.active > [class*='flag-'] { font-weight: 600; } .locale-selector .language.active .language-list-sub { display: block; } .locale-selector.in { display: inherit; } .locale-selector .locale-header { font-size: 17px; color: #000; } .locale-selector .locale-main-header .locale-header { font-size: 28px; margin-bottom: 35px; } .locale-selector a[class*='flag-'] { position: relative; display: block; height: 23px; margin-bottom: 25px; padding: 4px 0; font-size: 14px; transition: left 1s; left: 0; box-shadow: none; font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Light', system, sans-serif; font-family: var(--tds-font-combined--light); } .locale-selector a[class*='flag-']:hover { font-weight: 600; } .locale-selector a[class*='flag-']::before { overflow: hidden; left: 3px; top: 2px; width: 20px; height: 20px; content: ''; position: absolute; background-repeat: no-repeat; background-position: center; border-radius: 30px; background-size: cover; background-image: none; } .locale-selector [class*='region-'] { clear: both; margin-bottom: 40px; } .locale-selector .modal-content { background-color: transparent; height: 100%; z-index: 5; } .locale-selector .modal-content .modal-close { top: 20px; overflow: visible; } .locale-selector .modal-content .modal-close .sr-only { width: 18px; height: 18px; position: relative; font-size: 1px; display: block; overflow: visible; } .locale-selector .modal-content .modal-close .sr-only::after, .locale-selector .modal-content .modal-close .sr-only::before { background: #000; clip: unset; position: absolute; display: block; overflow: visible; width: 18px; height: 2px; content: ''; transform: rotate(45deg); right: 0; top: 0; } .locale-selector .modal-content .modal-close .sr-only::after { transform: rotate(-45deg); } .locale-selector .modal-dialog { background-color: #d0d1d2; background-color: var(--tds-color--grey50); position: fixed; top: 10%; bottom: 10%; max-width: 428px; border-radius: 10px; float: none; left: 50%; margin-left: -214px; } .locale-selector .modal-dialog .language-list-sub a[class*='flag-'] { color: #222222; color: var(--tds-color--grey15); } .locale-selector .modal-dialog .language-list-sub a[class*='flag-']::before { background-image: none; border: 0; } .locale-selector .modal-body { padding: 0; } .locale-selector .modal-body > div.locale-main-header { padding: 50px 40px 0; } .locale-selector .modal-body, .locale-selector .modal-body-container { height: 100%; } .locale-selector .modal-body-container { overflow-y: scroll; height: calc(100% - 200px); padding: 0 60px; } footer .localization-modal a { color: #000; } .pane-full-footer .container { position: relative; } .footer-copy .icon-caret, .localization-modal .icon-caret { display: none; } @media (min-width: 0) and (max-width: 639px) { .localization-modal { position: relative; } .localization-modal .icon-caret { transform: rotate(0deg); transition: transform 0.15s linear; transform: translateZ(0); font-size: 15px; position: absolute; font-style: normal; color: rgba(255, 255, 255, 0.25); display: block; } .pane-skinny-footer .localization-modal .icon-caret { right: 10px; top: 9px; } .pane-full-footer .localization-modal .icon-caret { right: 6px; top: 10px; } .modal-open .localization-modal .icon-caret { transform: rotate(180deg); transition: transform 0.15s linear; transform: translateZ(0); } .all-rights { display: block; } .colophon .modal-link { display: none; } .pane-skinny-footer .modal-link { color: #f4f4f4; } .modal-link.locale { padding: 9px 25px 7px 36px; margin: 1 auto; background-color: #222222; background-color: var(--tds-color--grey15); border: 1px solid #5c5e62; border: 1px solid var(--tds-color--grey30); color: #f4f4f4; } .modal-link.locale::after { position: relative; top: 0; } .pane-full-footer .localization-modal .modal-link.locale { position: relative; top: initial; left: initial; right: initial; bottom: initial; } .locale-selector { display: none; opacity: 0; } .locale-selector.show { opacity: 1; } .locale-selector.open { transition: opacity 6.0s ease-in; opacity: 1; } .locale-selector.modal { position: fixed; } .locale-selector.fade .modal-dialog, .locale-selector.in .modal-dialog { opacity: 1; position: fixed; height: auto; min-height: 0; } .locale-selector.slidedown, .locale-selector.slideup { transition: max-height 0.5s linear; transform: translateZ(0); overflow-y: hidden; display: block; } .locale-selector.slideup { max-height: 0; } .locale-selector .modal-dialog { margin: 0; } .locale-selector [class*='region-'] { clear: both; } .locale-selector [class*='region-']:first-child { padding-top: 0; } .locale-selector [class*='flag-'] { font-size: 12px; padding: 0 0 0 25px; margin-bottom: 5px; height: auto; } .locale-selector [class*='flag-']::before { top: 2px; width: 16px; height: 11px; } .locale-modal [class*='region-'] { width: 100%; clear: both; float: none; display: block; margin-right: auto; margin-left: auto; display: block; clear: both; overflow: hidden; border-top: 1px solid #5c5e62; border-top: 1px solid var(--tds-color--grey30); margin-top: 1; padding-top: 1; } .locale-modal [class*='region-']:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .modal-open { overflow-y: visible; } .modal-open.locale-modal-open { overflow: hidden; } .region-middle-east .language-list, .region-northamerica .language-list { width: 100%; clear: both; float: none; display: block; margin-right: auto; margin-left: auto; } } @media screen and (max-width: 640px) { .tsla-header-nav--locale .modal-link.locale, .tsla-header-nav--locale .modal-link-locale.locale { padding: 20px 10px; background-color: inherit; border-top: 1px solid #f4f4f4; border-top: 1px solid var(--tds-color--grey70); border-bottom: 0; border-left: 0; border-right: 0; } .tsla-header-nav--locale .modal-link.locale::after, .tsla-header-nav--locale .modal-link-locale.locale::after { padding-left: 15px; font-size: 13px; } [dir='rtl'] .tsla-header-nav--locale .modal-link.locale::after, [dir='rtl'] .tsla-header-nav--locale .modal-link-locale.locale::after { padding-right: 15px; padding-left: 0; } .locale-selector.modal { background-color: #fff; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; } .locale-selector.modal .modal-content { background-color: #fff; width: 100%; } .locale-selector.modal .modal-body-container { height: calc(100% - 135px); } .locale-selector .modal-dialog { top: 0; bottom: 0; max-width: 100%; left: 0; } .locale-selector .modal-body { overflow: hidden; } } @media (min-width: 960px) { .language-list .language { width: 100%; margin-left: 0; margin-right: 0; } .language-list .language:nth-child(3), .language-list .language:nth-child(6) { clear: both; float: none; margin: auto; } .language-list + .language-list .language:nth-child(1), .language-list + .language-list .language:nth-child(4), .language-list + .language-list .language:nth-child(7) { clear: both; float: none; margin: auto; } .locale-selector [class*='region-'] { clear: none; } .locale-selector [class*='flag-'] { height: 33px; margin-bottom: 20px; padding: 4px 0 4px 60px; font-size: 15px; } .locale-selector [class*='flag-']::before { top: -2px; width: 32px; height: 32px; } .locale-selector .modal-body { display: block; } .region-apac .language-list, .region-europe .language-list { display: block; } .region-apac .language-list + .language-list, .region-europe .language-list + .language-list { margin-right: 0; } } [id='user-lang-pref'] { background: #fff; position: fixed; height: 60px; transition: height 1s; box-shadow: 0 0 5px #000; overflow: hidden; width: 500px; margin: auto; border-radius: 10px; left: 50%; margin-left: -250px; z-index: 10000; top: 50px; } [id='user-lang-pref'].locale-valid { height: 0; overflow: hidden; padding: 0; } [id='user-lang-pref'] .user-lang-content { padding: 20px; } [id='user-lang-pref'] .user-lang-content::after { content: ' '; display: block; clear: both; } [id='user-lang-pref'] .sub-lang { display: none; font-size: 14px; color: #000; font-weight: 600; } [id='user-lang-pref'] a { font-size: 14px; color: #000; text-decoration: underline; } [id='user-lang-pref'] .user-lang-choicer { float: right; margin-right: 50px; } [id='user-lang-pref'] .user-lang-choicer a { background-color: #fff; background-color: var(--tds-color--white); } [id='user-lang-pref'] .selector-container { display: inline-block; } [id='user-lang-pref'] .selector-container:first-child { margin-right: 50px; } [id='user-lang-pref'] .modal-link-locale.locale { padding: 0; } [id='user-lang-pref'] .modal-link-locale.locale::before { width: 30px; height: 23px; background-position: center; background-size: cover; border-radius: 0; margin-top: -5px; } [id='user-lang-pref'] .modal-link-locale.locale::after { margin-left: 35px; font-size: 14px; color: #000; padding: 0; } [id='user-lang-pref'] > label { position: absolute; right: 5%; top: 25px; z-index: 1; height: 18px; width: 18px; } [id='user-lang-pref'] .tsla-header-main--cross_hatch_lang { left: 0; text-indent: 2000px; font-size: 0; } [id='user-lang-pref'] .tsla-header-main--cross_hatch_lang::before, [id='user-lang-pref'] .tsla-header-main--cross_hatch_lang::after { background-color: #000; top: 5px; content: ''; display: block; height: 2px; left: 0; position: absolute; width: 100%; z-index: 10; } [id='user-lang-pref'] .tsla-header-main--cross_hatch_lang::after { transform: rotate(45deg); } [id='user-lang-pref'] .tsla-header-main--cross_hatch_lang::before { transform: rotate(135deg); } [id='user-lang-pref'].CA .Canada { display: inline-block; } [id='user-lang-pref'].CA .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-canada.svg"); } [id='user-lang-pref'].CA .modal-link-locale.locale::after { content: 'Canada'; } [id='user-lang-pref'].BE .Belgium { display: inline-block; } [id='user-lang-pref'].BE .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-belgium.svg"); } [id='user-lang-pref'].BE .modal-link-locale.locale::after { content: 'Belgium'; } [id='user-lang-pref'].LU .Luxembourg { display: inline-block; } [id='user-lang-pref'].LU .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-luxembourg.svg"); } [id='user-lang-pref'].LU .modal-link-locale.locale::after { content: 'Luxembourg'; } [id='user-lang-pref'].CH .Switzerland { display: inline-block; } [id='user-lang-pref'].CH .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-switzerland.svg"); } [id='user-lang-pref'].CH .modal-link-locale.locale::after { content: 'Switzerland'; } [id='user-lang-pref'].MO .Macau { display: inline-block; } [id='user-lang-pref'].MO .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-macau.svg"); } [id='user-lang-pref'].MO .modal-link-locale.locale::after { content: 'Macau'; } [id='user-lang-pref'].HK .HongKong { display: inline-block; } [id='user-lang-pref'].HK .modal-link-locale.locale::before { background-image: url("/tesla_theme/assets/img/flags/svg/flag-hongkong.svg"); } [id='user-lang-pref'].HK .modal-link-locale.locale::after { content: 'Hong Kong'; } @media screen and (max-width: 640px) { [id='user-lang-pref'] { width: 100%; height: 80px; border-radius: 0; left: 0; margin-left: auto; z-index: 1400; } [id='user-lang-pref'] > label { right: 2%; top: 10px; } [id='user-lang-pref'] .user-lang-content { padding: 20px 0; } [id='user-lang-pref'] .modal-link-locale.locale { background-color: #fff; border: 0; } [id='user-lang-pref'] .modal-link-locale.locale::after { top: -8px; margin-left: 35px; } [id='user-lang-pref'] .modal-link-locale.locale::before { margin-top: 4px; } [id='user-lang-pref'] .selector-container { position: absolute; } [id='user-lang-pref'] .selector-container:first-child { margin: 0 0 0 20px; } [id='user-lang-pref'] .user-lang-choicer { float: none; right: 15%; margin-right: 0; } [id='user-lang-pref'] .sub-lang { position: absolute; left: 67px; top: 35px; } } .element-invisible, [data-action='is-hidden'] { display: none !important; } .hidden, .is-hidden, .lazy-load { display: none; } .show-for-region-eu { display: none; } .superregion-europe .show-for-region-eu { display: inherit; } .show-for-region-na { display: none; } .superregion-north-america .show-for-region-na { display: inherit; } .show-for-region-apac { display: none; } .superregion-apac .show-for-region-apac { display: inherit; } .show-for-region-me { display: none; } .superregion-middle-east .show-for-region-me { display: inherit; } .hide-for-region-eu { display: inherit; } .superregion-europe .hide-for-region-eu { display: none; } .hide-for-region-na, a.nav-charging-main-link, a.nav-events-link { display: inherit; } .superregion-north-america .hide-for-region-na, .superregion-north-america a.nav-charging-main-link, .superregion-north-america a.nav-events-link { display: none; } .hide-for-region-apac, a.nav-charging-main-link { display: inherit; } .superregion-apac .hide-for-region-apac, .superregion-apac a.nav-charging-main-link { display: none; } .hide-for-region-me, a.nav-tradein-link, a.nav-events-link { display: inherit; } .superregion-middle-east .hide-for-region-me, .superregion-middle-east a.nav-tradein-link, .superregion-middle-east a.nav-events-link { display: none; } .is-invisible { visibility: hidden; } .is-visible { visibility: visible; } @media (min-width: 0) and (max-width: 639px) { .hide-on-mobile { display: none !important; } } @media (min-width: 640px) { .hide-on-desk { display: none !important; } } @media (min-width: 640px) and (max-width: 960px) { .hide-on-middle { display: none !important; } } @media (min-width: 960px) { .hide-on-large { display: none !important; } } .lt-ie9 .hide-on-desk, .lt-ie9 .hide-on-large, .lt-ie9 .hide-on-middle { display: none !important; } .is-shown, [data-action='is-showing'] { display: inherit !important; } .align-left { text-align: left !important; } .align-center { text-align: center !important; } .align-right { text-align: right !important; } .align-justify { text-align: justify !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .list-links { clear: both; } .list-links li { font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 20px; font-size: 15px; line-height: 21px; clear: both; cursor: pointer; color: #b74134; } .list-links li a { color: #b74134; } .list-links li a:hover { color: #ed4e3b; color: var(--tds-color--red20); } .list-links li:hover { color: #ed4e3b; color: var(--tds-color--red20); } .list-link { font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 20px; font-size: 15px; line-height: 21px; clear: both; cursor: pointer; color: #b74134; } .list-link a { color: #b74134; } .list-link a:hover { color: #ed4e3b; color: var(--tds-color--red20); } .list-link:hover { color: #ed4e3b; color: var(--tds-color--red20); } .basic-fade-out { transition: opacity 0.5s linear; opacity: 0; } .basic-fade-in { transition: opacity 0.5s linear; opacity: 1; } .is-scrollable { overflow-y: auto; } .offwindow { position: absolute; top: -400px; left: -400px; height: 1px; width: 1px; margin-top: -1px; } .offwindow .lazy-load { height: 0; width: 0; } .svg .icon-png { display: none; } .no-svg .icon-svg { display: none; } .caption-line { position: relative; margin-top: 45px; padding-top: 45px; } .caption-line::before { content: ' '; position: absolute; top: 0; width: 100px; height: 1px; background-color: #000; } .caption-line.caption-line-alternate { margin-top: 0; padding-top: 0; } .caption-line.caption-line-alternate::before { top: -20px; } .no-bullets { list-style: none; } .no-bullets li { list-style-image: none; list-style-type: none; margin-left: 0; } .no-bullet { list-style-image: none; list-style-type: none; margin-left: 0; } .pull-quote { font-size: 40px; font-style: italic; } @media (min-width: 0) and (max-width: 639px) { .pull-quote { margin-top: 20px; margin-bottom: 20px; padding-top: 20px; padding-bottom: 20px; font-size: 30px; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; } } .user-logged-in .label-logout { cursor: default; } .user-logged-in p { margin-top: 0; font-size: 20px; margin-bottom: 21px; text-align: left; } .user-logged-in .link-logout { font-size: 80%; } .form-item-popup { padding: 10px; top: 64px; font-size: 12px; z-index: 10; position: absolute; background: #fff; border: 1px solid #b74134; } .form-item-popup::after, .form-item-popup::before { bottom: 100%; left: 22px; border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; } .form-item-popup::before { border-color: transparent; border-bottom-color: #b74134; border-width: 10px; margin-left: -10px; } .form-item-popup::after { border-color: transparent; border-bottom-color: #fff; border-width: 9px; margin-left: -9px; } .svg-defs { display: none; } .svg-fill--white { fill: #fff; } .svg-fill--light { fill: #f4f4f4; } .svg-fill--medium { fill: #393c41; } .svg-fill--dark { fill: #5c5e62; fill: var(--tds-color--grey30); } .svg-fill--blue { fill: #3e6ae1; fill: var(--tds-color--blue30); } .svg-fill--primary { fill: #b74134; } .svg-fill--secondary { fill: #a2a3a5; } .svg-fill--tertiary { fill: #d0d1d2; fill: var(--tds-color--grey50); } .svg-fill--quadrary { fill: #eee; fill: var(--tds-color--grey60); } .svg-fill--quintary { fill: #f4f4f4; fill: var(--tds-color--grey70); } .svg-fill--shark { fill: #222224; } .svg-stroke--shark { stroke: #222224; } .svg-fill--spun_pearl { fill: #a7a7a9; } article.node-unpublished { background-color: #fff; } [id='page-solarroof-callback'] [id='page'], [id='page-solarroof-callback'] footer, [id='page-solarroof-updates'] [id='page'], [id='page-solarroof-updates'] footer { background-color: #fff; background-color: var(--tds-color--white); } [id='page-solarroof-updates'] .action-btn { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 auto; } [id='page-solarroof-updates'] .hidden { display: none; } [id='page-solarroof-updates'] footer { position: absolute; bottom: 0; width: 100%; } [id*='page-blog-'] p, [id*='page-blog-'] li { color: #757575; color: var(--tds-color--grey35); } [id*='page-blog-'] [id='article_content'] .factory-list, [id*='page-blog-'] [id='article_content'] ul { margin-top: 0 !important; } [id*='page-blog-'] .tds-icon-social-twitter { background-size: 20px; background-repeat: no-repeat; box-shadow: none; float: none; margin-top: 30px; } [id*='page-blog-'] [id='tesla-insider-form'] .form-item-usermail input { width: 175px; } [id*='page-blog-'] [id='tesla-insider-form'] .submit-area { margin-top: 20px; } [id*='page-blog-'] [id='tesla-insider-form'] .submit-area .btn-primary { margin-bottom: 0; } [id*='page-blog-'] .form-item .parsley-errors-list { position: absolute; bottom: -50px; } @media screen and (max-width: 640px) { [id*='page-blog-'] [id='sticky-footer'] { z-index: 1; } [id*='page-blog-'] [id='sticky-footer'] .btn-secondary { display: block; width: 100%; text-align: center; box-shadow: none; padding-top: 10px; background: #444; background: var(--tds-color--grey25); border-radius: 100px; color: #fff; color: var(--tds-color--white); text-transform: uppercase; } [id*='page-blog-'] .tesla-insider-form--mobile { display: none; } [id*='page-blog-'] .tds-menu-header { z-index: 2; position: sticky; width: 100%; top: 0; transform: translate3d(0, 0, 0); transition: transform 300ms ease-in-out; } } @media screen and (max-width: 640px) { [id*='page-blog-'].tsla-header-scrolled .tds-menu-header { transform: translate3d(0, -52px, 0); } } @media screen and (min-width: 640px) { [id*='page-blog-'] { padding-bottom: 70px; } [id*='page-blog-'] .tds-o-footer a, [id*='page-blog-'] .tds-o-footer a:hover { box-shadow: none; } } [id='page-support-home-charging-installation'] .bulleted-list { margin-left: 0; padding-left: 15px; margin-top: 10px; list-style: disc; } [id='page-support-home-charging-installation'] .bulleted-list li { margin-bottom: 0; padding-bottom: 0; } [id='page-support-home-charging-installation'] .table-charging { border: 0; padding: 0; } [id='page-support-home-charging-installation'] .sidebar .post { margin-bottom: 0; padding-bottom: 20px; } [id='page-support-home-charging-installation'] .sidebar .post a { box-shadow: none; } .video-info .video-title { font-family: 'Gotham Light', 'system', sans-serif; font-family: var(--tds-fonts-combined--light); font-weight: lighter; } [id='page-customer-stories'] h1 { font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Book', system, sans-serif; font-family: var(--tds-fonts-combined--base); font-size: 30px; font-weight: normal; } [id='page-customer-stories'] [id='story-list'] a { text-decoration: none; font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Book', system, sans-serif; font-family: var(--tds-font-combined); } [id='page-customer-stories'] [id='story-list'] .post-info { font-size: 13px; line-height: 18px; color: #757575; color: var(--tds-color--grey35); font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Book', system, sans-serif; font-family: var(--tds-font-combined); } [id='page-customer-stories'] .pager-load-more { list-style: none; padding-left: 0; } [id='page-customer-stories'] .pager-load-more a { color: #3e6ae1; color: var(--tds-color--blue30); } [id='page-customer-stories'] .pager-load-more a:hover { color: #3457b1; color: var(--tds-color--blue20); } [id='page-customer-stories'] [id='submit-story-block'] { background-color: #f4f4f4; background-color: var(--tds-color--grey70); } [id='page-customer-stories'] [id='submit-story-block'] h2 { padding-top: 0; } [id='page-customer-stories'] [id='search-expandable'] { display: none; } [id^='page-support-'] [id='second_header'] [id='page_title'] h1 { font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Medium', system, sans-serif; font-family: var(--tds-font-combined--medium); font-size: 34px; } @media (min-width: 1200px) { [id^='page-support-'] [id='second_header'] + .container::after { content: ' '; clear: both; display: block; } } [id^='page-support-'] .tds-sidescroll-menu a { box-shadow: none; } [id^='page-support-'] .page-title { padding-top: 0; } [id^='page-support-'] .left-column li:not(.e-details) { padding-top: 0; padding-bottom: 0; } [id^='page-support-'] p + p { padding-top: 0; } [id^='page-support-'] p { margin: 22px 0; } [id^='page-support-'] ul { padding-left: 0; } [id^='page-support-'] h3 { font-size: 18px; padding-top: 0; } [id^='page-support-'] .btn-primary { min-height: 40px; min-height: var(--tds-size--5x); min-width: calc(8px * 25); min-width: calc(var(--tds-size) * 25); max-width: calc(8px * 50); max-width: calc(var(--tds-size) * 50); position: relative; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; margin-top: 8px; margin-top: var(--tds-size); margin-bottom: 8px; margin-bottom: var(--tds-size); -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 12px; font-size: var(--tds-font-size--20); font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Medium', system, sans-serif; font-family: var(--tds-font-combined--medium); line-height: 1.2; color: #fff; color: var(--tds-color--white); cursor: pointer; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 100px; border-radius: var(--tds-border-radius--pill); border: 3px solid transparent; border: var(--tds-border-width--large) solid transparent; box-shadow: inset 0 0 0 0 transparent; outline: none; background-color: #3e6ae1; background-color: var(--tds-color--blue30); } [id^='page-support-'] .btn-primary:hover { color: #fff; color: var(--tds-color--white); background-color: #3457b1; background-color: var(--tds-color--blue20); transition: var(--tds-btn-transition); transition: var(--tds-btn-transition); } [id^='page-support-'] .service-links-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAgMTAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBNZWV0JyB3aWR0aD0nMTAwJyBoZWlnaHQ9JzEwMCc+PHBhdGggZD0nTTUwIDBDMjIuMSAwIDAgMjIuMSAwIDUwczIyLjEgNTAgNTAgNTAgNTAtMjIuMSA1MC01MFM3Ny45IDAgNTAgMHptMjcuMSA0MHMxLjQgMjAtMTUuNyAzMS40YzAgMC0xNi40IDEyLjktMzguNi43IDAgMCAxMS40IDEuNCAxNy45LTUgMCAwLTguNiAwLTExLjQtOS4zIDAgMCAyLjEuNyA1LjcgMCAwIDAtMTAtMS40LTEwLTEyLjkgMCAwIDEuNCAyLjEgNS43IDIuMSAwIDAtOS4zLTYuNC0zLjYtMTYuNCAwIDAgMTAuNyAxMi45IDI1LjcgMTIuOXYtMi45YzAtNy4xIDUuNy0xMi4xIDEyLjEtMTIuMSAzLjYgMCA2LjQgMS40IDkuMyAzLjYuNyAwIDMuNiAwIDcuOS0yLjkgMCAwIDAgMy42LTUgNy4xIDAgMCAzLjYgMCA2LjQtMi4xLjEuMS0yLjggMy43LTYuNCA1Ljh6Jy8+PC9zdmc+"); } [id^='page-support-'] .form-select-overlay { padding: 0; display: inline-block; overflow: visible; position: relative; background-color: #f2f2f2; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDMzMCAzMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMzMCAzMzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJYTUxJRF8yMjVfIiBkPSJNMzI1LjYwNyw3OS4zOTNjLTUuODU3LTUuODU3LTE1LjM1NS01Ljg1OC0yMS4yMTMsMC4wMDFsLTEzOS4zOSwxMzkuMzkzTDI1LjYwNyw3OS4zOTMNCgljLTUuODU3LTUuODU3LTE1LjM1NS01Ljg1OC0yMS4yMTMsMC4wMDFjLTUuODU4LDUuODU4LTUuODU4LDE1LjM1NSwwLDIxLjIxM2wxNTAuMDA0LDE1MGMyLjgxMywyLjgxMyw2LjYyOCw0LjM5MywxMC42MDYsNC4zOTMNCglzNy43OTQtMS41ODEsMTAuNjA2LTQuMzk0bDE0OS45OTYtMTUwQzMzMS40NjUsOTQuNzQ5LDMzMS40NjUsODUuMjUxLDMyNS42MDcsNzkuMzkzeiIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo="); background-repeat: no-repeat; background-position: calc(100% - 17px) center; background-size: 10px 10px; width: 100%; } [id^='page-support-'] .form-select--locations { padding: 10px 40px 10px 10px; border-radius: 0; font-size: 16px; line-height: 18.4px; position: relative; display: block; width: 100%; height: 100%; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid #ccc; transition: background-color 200ms linear; } [id^='page-support-'] .pane-tesla-article-helper-service-links { display: none; } [id^='page-support-'] .pane-tesla-article-helper-service-links ul { margin: 0; } [id^='page-support-'] .pane-tesla-article-helper-service-links .pane-title { padding-top: 0; } [id^='page-support-'] .pane-tesla-article-helper-service-links .tds-icon-social-twitter { background-size: 24px; background-position: 0; box-shadow: none; } [id^='page-support-'] .list-referrals { padding-bottom: 0; } [id^='page-support-'] .list-referrals:last-of-type { margin-bottom: 20px; } [id^='page-support-'] [id='e-load-more-control'] a, [id^='page-support-'] .field-name-field-tags a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id^='page-support-'] [id='e-load-more-control'] a:hover, [id^='page-support-'] .field-name-field-tags a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id^='page-support-'] .right-column .post { border-bottom: 0; } [id^='page-support-'] .pane-tesla-article-helper-related-articles .post-header { padding-bottom: 0; } [id^='page-support-'] .pane-tesla-article-helper-related-articles .pane-title { padding-top: 0; } [id^='page-support-'] .pane-tesla-article-helper-related-articles div.post { margin-bottom: 30px; } [id^='page-support-'] .pane-tesla-article-helper-related-articles div.post a { box-shadow: none; } [id^='page-support-'] a[href='#back-to-top'], [id^='page-support-'] a[href='#top'], [id^='page-support-'] a.back-top { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id^='page-support-'] a[href='#back-to-top']:hover, [id^='page-support-'] a[href='#top']:hover, [id^='page-support-'] a.back-top:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id^='page-support-'] .read-more a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id^='page-support-'] .read-more a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id^='page-support-'] .left-column ul li a { color: #5c5e62; color: var(--tds-color--grey30); text-decoration: none; box-shadow: 0 0 0 0 transparent; } [id^='page-support-'] .left-column ul li a:hover { color: #393c41; color: var(--tds-color--grey20); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id^='page-support-'] .sidebar .pane-title { color: #757575; color: var(--tds-color--grey35); } [id='page-support-supercharging'] .field-item h2 { padding-top: 0; font-size: 22px; } [id='page-support-software-updates'] [class^='software-updates-list-'], [id='page-support-software-updates'] .software-updates-list { line-height: 21px; line-height: var(--tds-line-height--30); } [id='page-support-software-version-10-0'] .article-header { font-size: 22px; line-height: 24px; } [id='page-support-software-version-10-0'] .list1, [id='page-support-software-version-10-0'] .list2 { padding-left: 16px; } [id='page-support-software-version-10-0'] ul.list1 a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-software-version-10-0'] ul.list1 a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-find-electrician'] .service-links { margin-top: 0; } [id='page-support-tesla-app'] img, [id='page-support-delivery-day'] img { height: auto; } [id='page-support-tesla-app'] .left-column div:not(.field-items) > a, [id='page-support-delivery-day'] .left-column div:not(.field-items) > a { box-shadow: none; } [id='page-support-delivery-day'] .account-list-links a, [id='page-support-delivery-day'] .directions a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-delivery-day'] .account-list-links a:hover, [id='page-support-delivery-day'] .directions a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-incentives'] .left-column a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-incentives'] .left-column a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-incentives'] .right-column a { box-shadow: none; } [id='page-support-tesla-leasing'] h4, [id='page-support-tesla-lending'] h4, [id='page-support-tesla-financing'] h4, [id='page-support-charging-connectors'] h4 { padding-top: 22px; } [id='page-support-tesla-leasing'] h4 + p, [id='page-support-tesla-lending'] h4 + p, [id='page-support-tesla-financing'] h4 + p, [id='page-support-charging-connectors'] h4 + p { margin-top: 0; } [id='page-support-tesla-leasing'] input[type='text'], [id='page-support-tesla-lending'] input[type='text'], [id='page-support-tesla-financing'] input[type='text'], [id='page-support-charging-connectors'] input[type='text'] { padding: 10px; width: 100%; margin: 0; background-color: #f7f7f7; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid #ccc; transition: background-color 200ms linear; color: #000; } [id='page-support-tesla-leasing'] .form-select, [id='page-support-tesla-lending'] .form-select, [id='page-support-tesla-financing'] .form-select, [id='page-support-charging-connectors'] .form-select { outline: 0; border: 1px solid #ccc; transition: background-color 200ms linear; } [id='page-support-tesla-leasing'] .form-select-overlay .form-select, [id='page-support-tesla-lending'] .form-select-overlay .form-select, [id='page-support-tesla-financing'] .form-select-overlay .form-select, [id='page-support-charging-connectors'] .form-select-overlay .form-select { padding: 10px 40px 10px 10px; border-radius: 0; line-height: 18.4px; position: relative; display: block; width: 100%; height: 100%; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [id='page-support-tesla-leasing'] .details-block, [id='page-support-tesla-lending'] .details-block, [id='page-support-tesla-financing'] .details-block, [id='page-support-charging-connectors'] .details-block { width: 100%; } [id='page-support-charging-connectors'] table, [id='page-support-home-charging-installation'] table { border-collapse: collapse; } [id='page-support-charging-connectors'] .table-head th, [id='page-support-home-charging-installation'] .table-head th { font-weight: 500; font-size: 12px; text-transform: uppercase; } [id='page-support-charging-connectors'] .table-data, [id='page-support-home-charging-installation'] .table-data { border: 1px solid #ddd; width: 100%; } [id='page-support-charging-connectors'] .table-data th, [id='page-support-charging-connectors'] .table-data td, [id='page-support-home-charging-installation'] .table-data th, [id='page-support-home-charging-installation'] .table-data td { padding: 5px 10px; border: 1px solid #ddd; } [id='page-support-charging-connectors'] .table-data th:first-child, [id='page-support-charging-connectors'] .table-data td:first-child, [id='page-support-home-charging-installation'] .table-data th:first-child, [id='page-support-home-charging-installation'] .table-data td:first-child { border-right: 0; } [id='page-support-charging-connectors'] .table-data .table-head th, [id='page-support-home-charging-installation'] .table-data .table-head th { background-color: #eee; } [id='page-support-charging-connectors'] .table-data .table-head th:first-child, [id='page-support-home-charging-installation'] .table-data .table-head th:first-child { border-right: 0; } [id='page-support-charging-connectors'] .table-data .table-head .table-row th, [id='page-support-home-charging-installation'] .table-data .table-head .table-row th { border-top: 0; } [id='page-support-charging-connectors'] .charging-type-table th, [id='page-support-charging-connectors'] .charging-type-table td, [id='page-support-home-charging-installation'] .charging-type-table th, [id='page-support-home-charging-installation'] .charging-type-table td { vertical-align: middle; } [id='page-support-tesla-financing'] [id='calculator'] .form-item { margin-bottom: 17px; } [id='page-support-tesla-financing'] .tsla-expandable h3 { padding-bottom: 0; } [id='page-support-tesla-financing'] [id='loan'] .radio-style { margin-left: 5px; } [id='page-support-model-s-pano-roof-rack-installation'] .btn-primary--link { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-model-s-pano-roof-rack-installation'] .btn-primary--link:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } @media (min-width: 640px) { [id='page-support-meet-your-tesla'] .primary-video, [id='page-support-model-s-videos'] .primary-video, [id='page-support-model-3-videos'] .primary-video, [id='page-support-model-x-videos'] .primary-video, [id='page-support-model-y-videos'] .primary-video { width: 650px; height: 362px; } } [id='page-support-meet-your-tesla'] .section-thumbnail a, [id='page-support-model-s-videos'] .section-thumbnail a, [id='page-support-model-3-videos'] .section-thumbnail a, [id='page-support-model-x-videos'] .section-thumbnail a, [id='page-support-model-y-videos'] .section-thumbnail a { box-shadow: none; } [id='page-support-meet-your-tesla'] .section-video p, [id='page-support-model-s-videos'] .section-video p, [id='page-support-model-3-videos'] .section-video p, [id='page-support-model-x-videos'] .section-video p, [id='page-support-model-y-videos'] .section-video p { margin-right: auto; margin-left: auto; } [id='page-support-meet-your-tesla'] .section-video .video-length, [id='page-support-meet-your-tesla'] .section-video .video-disclaimer, [id='page-support-model-s-videos'] .section-video .video-length, [id='page-support-model-s-videos'] .section-video .video-disclaimer, [id='page-support-model-3-videos'] .section-video .video-length, [id='page-support-model-3-videos'] .section-video .video-disclaimer, [id='page-support-model-x-videos'] .section-video .video-length, [id='page-support-model-x-videos'] .section-video .video-disclaimer, [id='page-support-model-y-videos'] .section-video .video-length, [id='page-support-model-y-videos'] .section-video .video-disclaimer { margin: 0 auto; } [id='page-support-meet-your-tesla'] .section-video .video-title, [id='page-support-model-s-videos'] .section-video .video-title, [id='page-support-model-3-videos'] .section-video .video-title, [id='page-support-model-x-videos'] .section-video .video-title, [id='page-support-model-y-videos'] .section-video .video-title { padding-bottom: 0; } [id='page-support-meet-your-tesla'] .thumbnail p, [id='page-support-model-s-videos'] .thumbnail p, [id='page-support-model-3-videos'] .thumbnail p, [id='page-support-model-x-videos'] .thumbnail p, [id='page-support-model-y-videos'] .thumbnail p { margin-top: 0; margin-bottom: 0; } [id='page-support-meet-your-tesla'] .thumbnail-title, [id='page-support-model-s-videos'] .thumbnail-title, [id='page-support-model-3-videos'] .thumbnail-title, [id='page-support-model-x-videos'] .thumbnail-title, [id='page-support-model-y-videos'] .thumbnail-title { font-size: 10px; padding: 0; } [id='page-support-connectivity'] h2 { padding-top: 0; padding-bottom: 0; } [id='page-support-connectivity'] .page-title { padding-top: 32px; } [id='page-support-connectivity'] .page-title, [id='page-support-connectivity'] h3 { padding-bottom: 0; } [id='page-support-connectivity'] .submitted { display: none; } [id='page-support-connectivity'] .pane-full-footer { width: 100%; } [id='page-support-connectivity'] .account-list-links a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-connectivity'] .account-list-links a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-trade-ins'] .question + a, [id='page-support-trade-ins'] h3 + a { box-shadow: none; } [id='page-support-car-security-features'] p + a, [id='page-support-car-security-features'] h2 + a, [id='page-support-car-security-features'] hr + a { display: none; } [id='page-support-car-security-features'] .left-column h2:not(.pane-title) { font-size: 24px; font-size: var(--tds-font-size--60); } [id='page-support-car-security-features'] .left-column h2.page-title { font-size: 28px; font-size: var(--tds-font-size--70); } [id='page-support-car-security-features'] .left-column ul a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-car-security-features'] .left-column ul a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-real-estate-faqs'] h3 + a, [id='page-support-real-estate-faqs'] div + a { box-shadow: none; } [id='page-support-real-estate-faqs'] h3 + ul a { color: #5c5e62; color: var(--tds-color--grey30); text-decoration: none; box-shadow: 0 0 0 0 transparent; } [id='page-support-real-estate-faqs'] h3 + ul a:hover { color: #393c41; color: var(--tds-color--grey20); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-do-it-yourself-model-s'] .left-column sup, [id='page-support-do-it-yourself-model-3'] .left-column sup, [id='page-support-do-it-yourself-model-x'] .left-column sup { top: 0; } [id='page-support-do-it-yourself-model-s'] .left-column .questions > a, [id='page-support-do-it-yourself-model-3'] .left-column .questions > a, [id='page-support-do-it-yourself-model-x'] .left-column .questions > a { box-shadow: none; } [id='page-support-do-it-yourself-model-s'] .left-column ul a, [id='page-support-do-it-yourself-model-3'] .left-column ul a, [id='page-support-do-it-yourself-model-x'] .left-column ul a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-do-it-yourself-model-s'] .left-column ul a:hover, [id='page-support-do-it-yourself-model-3'] .left-column ul a:hover, [id='page-support-do-it-yourself-model-x'] .left-column ul a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-do-it-yourself-model-s'] .left-column .diy-numeric a, [id='page-support-do-it-yourself-model-3'] .left-column .diy-numeric a, [id='page-support-do-it-yourself-model-x'] .left-column .diy-numeric a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id='page-support-do-it-yourself-model-s'] .left-column .diy-numeric a:hover, [id='page-support-do-it-yourself-model-3'] .left-column .diy-numeric a:hover, [id='page-support-do-it-yourself-model-x'] .left-column .diy-numeric a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-privacy'] .bulleted-list { list-style-type: disc; } [id='page-support-privacy'] .section-title--led { padding-top: 0; padding-bottom: 0; } [id='page-support-autopilot'] .left-column li a { color: #5c5e62; color: var(--tds-color--grey30); text-decoration: none; box-shadow: 0 0 0 0 transparent; } [id='page-support-autopilot'] .left-column li a:hover { color: #393c41; color: var(--tds-color--grey20); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id*='page-support-model'] .thumbnail { width: 225px; } [id*='page-support-model'] a { box-shadow: 0 0; } [id*='page-support-model'] .video-length { max-width: 100%; } [id*='page-support-model'] .embedded-video p { max-width: 100%; margin-bottom: 20px; } [id*='page-support-model'] .embedded-video p a { color: #393c41; color: var(--tds-color--grey20); text-decoration: none; box-shadow: 0 1px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; } [id*='page-support-model'] .embedded-video p a:hover { color: #000; color: var(--tds-color--black); transition: box-shadow 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75), color 250ms cubic-bezier(0.5, 0.25, 0.25, 0.75); box-shadow: 0 2px 0 0 currentColor; box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor; } [id='page-support-frequently-asked-questions'] .left-column div + a, [id='page-support-frequently-asked-questions'] .left-column h3 + a { box-shadow: none; } [id*='page-customer-stories-'] .pane-tesla-article-helper-service-links { display: none; } [id*='page-customer-stories-'].i18n-ko_KR .pane-tesla-article-helper-service-links { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } [id*='page-customer-stories-'].i18n-ko_KR .pane-tesla-article-helper-service-links .pane-title { float: none; } [id*='page-customer-stories-'].i18n-ko_KR .pane-tesla-article-helper-service-links .pane-content { padding-top: 32px; padding-top: var(--tds-size--4x); } [id*='page-customer-stories-'].i18n-ko_KR .pane-tesla-article-helper-service-links .pane-content ul { padding-left: 0; } [id*='page-customer-stories-'].i18n-ko_KR .pane-tesla-article-helper-service-links .pane-content ul li { float: left; } [id*='page-customer-stories-'].i18n-ko_KR .pane-tesla-article-helper-service-links .pane-content [class*='service-links-'] { background-size: 24px; margin-bottom: 12px; box-shadow: none; } [id*='page-customer-stories-'] .sidebar .post-link { box-shadow: none; } [id*='page-customer-stories-'] [id='sticky-footer-btns'] .btn-secondary { min-height: 40px; min-height: var(--tds-size--5x); min-width: calc(8px * 25); min-width: calc(var(--tds-size) * 25); max-width: calc(8px * 50); max-width: calc(var(--tds-size) * 50); position: relative; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; margin-top: 8px; margin-top: var(--tds-size); margin-bottom: 8px; margin-bottom: var(--tds-size); -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 12px; font-size: var(--tds-font-size--20); font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Medium', system, sans-serif; font-family: var(--tds-font-combined--medium); line-height: 1.2; color: #171a20; color: var(--tds-color--grey10); cursor: pointer; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 100px; border-radius: var(--tds-border-radius--pill); border: 3px solid #171a20; border: var(--tds-border-width--large) solid var(--tds-color--grey10); box-shadow: inset 0 0 0 0 transparent; outline: none; background-color: transparent; } [id*='page-customer-stories-'] [id='sticky-footer-btns'] .btn-secondary:hover { color: #fff; color: var(--tds-color--white); background-color: #171a20; background-color: var(--tds-color--grey10); transition: var(--tds-btn-transition); transition: var(--tds-btn-transition); } @media screen and (max-width: 640px) { [id*='page-customer-stories-'] [id='second_header'] { padding-top: 60px; } } .service-links-kakaoTalk { background-image: url("https://www.tesla.com/sites/default/files/kakaotalk_social.png"); } .service-links-instagram { background-image: url("https://www.tesla.com/sites/default/files/instagram_icon.png"); } [id^='page-findus-list-'] .findus-list-header a, [id^='page-findus-location-'] .findus-list-header a { margin-top: 44px; } [id^='page-findus-list-'] .find-us-details-types, [id^='page-findus-location-'] .find-us-details-types { padding-left: 0; } @media screen and (max-width: 640px) { [id^='page-findus-list-'] .findus-list-header a, [id^='page-findus-location-'] .findus-list-header a { display: inline-block; float: none; margin-top: 20px; } [id^='page-findus-list-'] [id='find-us-list-container'], [id^='page-findus-location-'] [id='find-us-list-container'] { width: 100% !important; } } .blog .image-left, .blog .image-right { clear: both; overflow: hidden; } .blog .image-left .left, .blog .image-left .right, .blog .image-right .left, .blog .image-right .right { margin-top: 6px; padding-bottom: 15px; max-width: 200px; } .blog .image-left .left, .blog .image-right .left { float: left; padding-right: 15px; } .blog .image-left .right, .blog .image-right .right { float: right; padding-left: 15px; } [id*='page-videos-'] .pane-tesla-article-helper-service-links { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } [id*='page-videos-'] .pane-tesla-article-helper-service-links .pane-title { float: none; } [id*='page-videos-'] .pane-tesla-article-helper-service-links .pane-content { padding-top: 32px; padding-top: var(--tds-size--4x); } [id*='page-videos-'] .pane-tesla-article-helper-service-links .pane-content ul { padding-left: 0; } [id*='page-videos-'] .pane-tesla-article-helper-service-links .pane-content ul li { float: left; } [id*='page-videos-'] .pane-tesla-article-helper-service-links .pane-content [class*='service-links-'] { background-size: 24px; margin-bottom: 12px; box-shadow: none; } .flyout { top: -59px; } .form-item [class*='errors-list'] { bottom: -19px; text-align: right; width: 100%; } .i18n-fr_BE .form-item [class*='errors-list'], .i18n-nl_BE .form-item [class*='errors-list'], .i18n-da .form-item [class*='errors-list'], .i18n-de .form-item [class*='errors-list'], .i18n-fr .form-item [class*='errors-list'], .i18n-it .form-item [class*='errors-list'], .i18n-nl .form-item [class*='errors-list'], .i18n-no .form-item [class*='errors-list'], .i18n-de_AT .form-item [class*='errors-list'], .i18n-de_CH .form-item [class*='errors-list'], .i18n-fr_CH .form-item [class*='errors-list'], .i18n-it_CH .form-item [class*='errors-list'], .i18n-sv_SE .form-item [class*='errors-list'], .i18n-fr_CA .form-item [class*='errors-list'], .i18n-zh_CN .form-item [class*='errors-list'], .i18n-ja_JP .form-item [class*='errors-list'], .i18n-ar_JO .form-item [class*='errors-list'] { bottom: inherit; } .form-item [class*='errors-list'] li { color: #b74134; color: var(--tds-color--red10); font-size: 12px; height: 0; } .content-constrain { max-width: 2400px; margin: auto; } .pane-full-footer ul { list-style: none; } @media screen and (max-width: 640px) { .tds-sidescroll-menu { max-width: 640px; border-bottom: 1px solid #eee; border-bottom: 1px solid var(--tds-color--grey60); position: relative; min-width: 100%; width: 100%; margin: 0; } .tds-sidescroll-menu .tds-sidescroll-arrow { top: 0; right: 0; display: block; position: absolute; height: 100%; width: 40px; z-index: 1; opacity: 1; transition: opacity .1s linear; } .tds-sidescroll-menu .tds-icon-angle_right { transform: rotate(270deg); content: '\e901'; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPHBhdGggZD0ibTEyMS4zLDM0LjZjLTEuNi0xLjYtNC4yLTEuNi01LjgsMGwtNTEsNTEuMS01MS4xLTUxLjFjLTEuNi0xLjYtNC4yLTEuNi01LjgsMC0xLjYsMS42LTEuNiw0LjIgMCw1LjhsNTMuOSw1My45YzAuOCwwLjggMS44LDEuMiAyLjksMS4yIDEsMCAyLjEtMC40IDIuOS0xLjJsNTMuOS01My45YzEuNy0xLjYgMS43LTQuMiAwLjEtNS44eiIgZmlsbD0iI2NjY2NjYyIvPgogIDwvZz4KPC9zdmc+Cg=="); background-size: 16px; background-position: 12px 20px; background-repeat: no-repeat; } .tds-sidescroll-menu[data-tsla_showsidescroll_arrow='false'] .tds-icon-angle_right { background-image: none; } .tds-nav--list_items { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; margin: 0; padding: 0; position: relative; z-index: 1; overflow: auto; width: 100%; background-color: #fff; background-color: var(--tds-color--white); } .tds-nav--list_item { -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; padding: 15px; display: inline; font-size: 13px; line-height: 1; list-style-type: none; } .tds-nav--list_link { display: block; width: 100%; height: 100%; text-transform: uppercase; color: #171a20; color: var(--tds-color--grey10); text-decoration: none; box-shadow: none; } } .tds-menu-header-main h4, .tds-menu-header-main h5 { font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Medium', system, sans-serif; font-family: var(--tds-font-combined--medium); } .tds-menu-header-alternate header.tds-menu-header-main { background-color: #fff; background-color: var(--tds-color--white); position: relative; height: 50px; width: 100vw; } .tsla-header-transparent header.tds-menu-header-main, .tsla-header-transparent--dark header.tds-menu-header-main { position: absolute; background-color: var(--tds-color--transparent); background-color: var(--tds-color--transparent); } .tsla-header-transparent header.tds-menu-header-main .site-logo, .tsla-header-transparent--dark header.tds-menu-header-main .site-logo { filter: invert(1); } .tsla-header-transparent header.tds-menu-header-main .tds-menu-mega--mobile-trigger, .tsla-header-transparent--dark header.tds-menu-header-main .tds-menu-mega--mobile-trigger { color: #fff; color: var(--tds-color--white); } .with-dark-menu-text header.tds-menu-header-main .site-logo { filter: invert(0); } .with-dark-menu-text header.tds-menu-header-main .tds-menu-header-nav--primary .tds-menu-mega--primary-link { color: #000; color: var(--tds-color--black); } .with-dark-menu-text header.tds-menu-header-main .tds-menu-mega--mobile-trigger { color: #000; color: var(--tds-color--black); } .tsla-header-transparent--alternate.tsla-header-transparent header.tds-menu-header-main .site-logo, .tsla-header-transparent--alternate.tsla-header-transparent--dark header.tds-menu-header-main .site-logo { filter: invert(0); } .tsla-header-transparent--alternate.tsla-header-transparent header.tds-menu-header-main .tds-menu-mega--mobile-trigger, .tsla-header-transparent--alternate.tsla-header-transparent--dark header.tds-menu-header-main .tds-menu-mega--mobile-trigger { color: #000; color: var(--tds-color--black); } @media (min-width: 640px) { .tsla-header-transparent--alternate.tsla-header-transparent header.tds-menu-header-main, .tsla-header-transparent--alternate.tsla-header-transparent--dark header.tds-menu-header-main { position: absolute; background-color: var(--tds-color--transparent); background-color: var(--tds-color--transparent); } .tsla-header-transparent--alternate.tsla-header-transparent header.tds-menu-header-main .site-logo, .tsla-header-transparent--alternate.tsla-header-transparent--dark header.tds-menu-header-main .site-logo { filter: invert(1); } .tsla-header-transparent--alternate.tsla-header-transparent header.tds-menu-header-main .tds-menu-mega--mobile-trigger, .tsla-header-transparent--alternate.tsla-header-transparent--dark header.tds-menu-header-main .tds-menu-mega--mobile-trigger { color: #fff; color: var(--tds-color--white); } } [id='page-supercharger'].tsla-header-transparent--alternate header.tds-menu-header-main { background-color: rgba(34, 34, 34, 0.75); } @media (max-width: 640px) { [id='page-supercharger'].tsla-header-transparent--alternate header.tds-menu-header-main { background-color: #222222; background-color: var(--tds-color--grey15); } [id='page-supercharger'].tsla-header-transparent--alternate header.tds-menu-header-main .site-logo { filter: invert(0); } [id='page-supercharger'].tsla-header-transparent--alternate header.tds-menu-header-main .tds-menu-mega--mobile-trigger { color: #fff; color: var(--tds-color--white); } } @media (min-width: 1200px) { .tsla-header-transparent header.tds-menu-header-main .site-logo, .tsla-header-transparent--dark header.tds-menu-header-main .site-logo { filter: invert(1); } .tsla-header-transparent header.tds-menu-header-main .tds-menu-header-nav--primary .tds-menu-mega--primary-link, .tsla-header-transparent--dark header.tds-menu-header-main .tds-menu-header-nav--primary .tds-menu-mega--primary-link { color: #fff; color: var(--tds-color--white); } .tsla-header-transparent header.tds-menu-header-main .tds-menu-header-nav--primary .tds-menu-mega--primary-link:hover, .tsla-header-transparent--dark header.tds-menu-header-main .tds-menu-header-nav--primary .tds-menu-mega--primary-link:hover { color: #000; color: var(--tds-color--black); } .tsla-header-transparent header.tds-menu-header-main .tds-menu--show .tds-menu-mega--primary-link, .tsla-header-transparent--dark header.tds-menu-header-main .tds-menu--show .tds-menu-mega--primary-link { color: #000; color: var(--tds-color--black); } .tsla-header-transparent header.tds-menu-header-main .desktop-active + .tds-menu-mega-main--logo_container .site-logo, .tsla-header-transparent--dark header.tds-menu-header-main .desktop-active + .tds-menu-mega-main--logo_container .site-logo { filter: invert(0); } .with-dark-menu-text header.tds-menu-header-main .site-logo { filter: invert(0); } .with-dark-menu-text header.tds-menu-header-main .tds-menu-header-nav--primary .tds-menu-mega--primary-link { color: #000; color: var(--tds-color--black); } } @media (max-width: 639px) { [id='page-charging'].tds-menu-header-alternate header.tds-menu-header-main, [id='page-supercharger'].tds-menu-header-alternate header.tds-menu-header-main, [id='page-where-you-park'].tds-menu-header-alternate header.tds-menu-header-main, [id='page-destination-charging'].tds-menu-header-alternate header.tds-menu-header-main { position: sticky; top: 0; } [id='page-charging'].tds-menu-header-alternate.tsla-header-scrolled header.tds-menu-header-main, [id='page-supercharger'].tds-menu-header-alternate.tsla-header-scrolled header.tds-menu-header-main, [id='page-where-you-park'].tds-menu-header-alternate.tsla-header-scrolled header.tds-menu-header-main, [id='page-destination-charging'].tds-menu-header-alternate.tsla-header-scrolled header.tds-menu-header-main { top: -50px; } [id='page-charging'].tds-menu-header-alternate .sticky-nav, [id='page-supercharger'].tds-menu-header-alternate .sticky-nav, [id='page-where-you-park'].tds-menu-header-alternate .sticky-nav, [id='page-destination-charging'].tds-menu-header-alternate .sticky-nav { top: 50px; } [id='page-charging'].tds-menu-header-alternate .sticky-nav.is-stuck, [id='page-supercharger'].tds-menu-header-alternate .sticky-nav.is-stuck, [id='page-where-you-park'].tds-menu-header-alternate .sticky-nav.is-stuck, [id='page-destination-charging'].tds-menu-header-alternate .sticky-nav.is-stuck { top: 50px; } } @media (max-width: 1200px) and (min-width: 500px) { .tds-menu-header-nav--primary .tds-menu-header-nav--list_item_last .tds-menu-header-nav--list { margin-left: 0; } } .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'] { bottom: -19px; text-align: right; text-transform: lowercase; width: 100%; } .i18n-fr_BE .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-nl_BE .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-da .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-de .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-fr .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-it .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-nl .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-no .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-de_AT .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-de_CH .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-fr_CH .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-it_CH .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-sv_SE .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-fr_CA .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-zh_CN .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-ja_JP .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'], .i18n-ar_JO .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='errors-list'] { bottom: inherit; } .i18n-zh_CN [id='five-minute-credit-form'] .tds-form-item [class*='error'] + [class*='errors-list'] li { color: #b74134; color: var(--tds-color--red10); font-size: 12px; height: 0; } .i18n-zh_CN [id='five-minute-credit-form'] input[type^="text"], .i18n-zh_CN [id='five-minute-credit-form'] input[type^="select"] { margin-top: 0; margin-bottom: 0; } .i18n-zh_CN [id='five-minute-credit-form'] .required_field { display: inline-block; vertical-align: middle; margin-top: 4px; } @keyframes fadeInUpShort { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } } .fadeInUp.short { animation-name: fadeInUpShort; } .animated.short { animation-duration: .2s; animation-fill-mode: both; } .common-form-layouts [class*='-first-name'] { width: 47.5%; float: left; margin-right: 5%; } .common-form-layouts [class*='-last-name'] { width: 47.5%; float: right; margin-right: 0; } .common-form-layouts .has-middle-name [class*='-first-name'] { width: 30%; float: left; margin-right: 5%; } @media (min-width: 0) and (max-width: 639px) { .common-form-layouts .has-middle-name [class*='-first-name'] { width: 100%; float: left; margin-left: 0; margin-right: 0; } } .common-form-layouts .has-middle-name [class*='-middle-name'] { width: 30%; float: left; margin-right: 5%; } @media (min-width: 0) and (max-width: 639px) { .common-form-layouts .has-middle-name [class*='-middle-name'] { width: 100%; float: left; margin-left: 0; margin-right: 0; } } .common-form-layouts .has-middle-name [class*='-last-name'] { width: 30%; float: right; margin-right: 0; } @media (min-width: 0) and (max-width: 639px) { .common-form-layouts .has-middle-name [class*='-last-name'] { width: 100%; float: left; margin-left: 0; margin-right: 0; } } .common-form-layouts .has-local-name [class*='-local-name'] { width: 47.5%; float: left; margin-right: 5%; margin-right: 52.5%; } .common-form-layouts .contact-info [class*='-phone-number'] { width: 30%; float: left; margin-right: 5%; } .common-form-layouts .contact-info [class*='-email'] { width: 65%; float: right; margin-right: 0; } .common-form-layouts .contact-info [class*='-username'] { clear: both; } .common-form-layouts [class*='-city'], .common-form-layouts [class*='-province'] { width: 30%; float: left; margin-right: 5%; } .common-form-layouts [class*='-postal-code'] { width: 30%; float: right; margin-right: 0; } .i18n-zh_CN .common-form-layouts [class*='-postal-code'] { width: 100%; float: none; } .common-form-layouts [class*='-district'] { clear: both; } .province-hidden .common-form-layouts [class*='-city'] { width: 82.5%; float: left; margin-right: 5%; } .common-form-layouts .province-hidden [class*='-city'] { width: 65%; float: left; margin-right: 5%; } .common-form-layouts .has-standard-address-layout [class*='-city'], .common-form-layouts .has-standard-address-layout [class*='-province'] { width: 30%; float: left; margin-right: 5%; } @media (min-width: 0) and (max-width: 639px) { .common-form-layouts .has-standard-address-layout [class*='-city'], .common-form-layouts .has-standard-address-layout [class*='-province'] { width: 100%; float: left; margin-left: 0; margin-right: 0; } } .common-form-layouts .has-standard-address-layout [class*='-postal-code'] { width: 30%; float: right; margin-right: 0; } @media (min-width: 0) and (max-width: 639px) { .common-form-layouts .has-standard-address-layout [class*='-postal-code'] { width: 100%; float: left; margin-left: 0; margin-right: 0; } } .i18n-zh_CN .common-form-layouts .has-standard-address-layout [class*='-postal-code'] { width: 100%; float: none; } .common-form-layouts [class*='-district'] { clear: both; } .common-form-layouts [class*='-date-month'] { width: 30%; float: left; margin-right: 5%; } .common-form-layouts [class*='-date-day'] { width: 30%; float: left; margin-right: 5%; } .common-form-layouts [class*='-date-year'] { width: 30%; float: right; margin-right: 0; } .common-form-layouts .does-not-have-middle-name [class*='-middle-name'] { display: none; } [id='SnapABug_Button'] { width: 220px; } @media (min-width: 0) and (max-width: 639px) { [id='SnapABug_Button'] { display: none; } } .tsla-prevent-scroll [id='salemove'].salemove { z-index: -1 !important; } .custom-drift-button { display: block; height: 62px; width: 192px; position: fixed; bottom: 0; right: 40px; background-image: url("/tesla_theme/assets/img/chat_button/btn_chat_us@2x.png"); background-repeat: no-repeat; background-size: contain; } [id='page-autopilot'] [id='drift-widget'], [id='page-models'] [id='drift-widget'], [id='page-modelx'] [id='drift-widget'], [id='page-charge-at-home'] [id='drift-widget'], [id='page-supercharger'] [id='drift-widget'], [id='page-charging'] [id='drift-widget'], [id='page-autopilot'] [id='drift-widget'], [id='page-software'] [id='drift-widget'] { bottom: 65px !important; } .panel-pane.pane-user-login { display: none !important; } html[class*='page-has-'] body.admin-menu { margin-top: 0 !important; padding-top: 28px !important; } html body.panels-ipe { margin-bottom: 0 !important; } html body.admin-menu [id='admin-menu'] { box-shadow: 0 0 0 transparent; width: 100% !important; } html body.admin-menu [id='admin-menu-wrapper'] { font-size: 10px !important; } .i18n-en_CA .hide-for-i18n-en_CA, .i18n-fr_CA .hide-for-i18n-fr_CA, .i18n-en .hide-for-i18n-en, .i18n-es_MX .hide-for-i18n-es_MX, .i18n-es_PR .hide-for-i18n-es_PR, .i18n-en_PR .hide-for-i18n-en_PR, .i18n-fr_BE .hide-for-i18n-fr_BE, .i18n-nl_BE .hide-for-i18n-nl_BE, .i18n-da .hide-for-i18n-da, .i18n-de .hide-for-i18n-de, .i18n-fr .hide-for-i18n-fr, .i18n-en_GB .hide-for-i18n-en_GB, .i18n-el_GR .hide-for-i18n-el_GR, .i18n-hr_HR .hide-for-i18n-hr_HR, .i18n-is_IS .hide-for-i18n-is_IS, .i18n-cs_CZ .hide-for-i18n-cs_CZ, .i18n-it .hide-for-i18n-it, .i18n-en_IE .hide-for-i18n-en_IE, .i18n-nl .hide-for-i18n-nl, .i18n-no .hide-for-i18n-no, .i18n-de_AT .hide-for-i18n-de_AT, .i18n-de_CH .hide-for-i18n-de_CH, .i18n-fr_CH .hide-for-i18n-fr_CH, .i18n-it_CH .hide-for-i18n-it_CH, .i18n-sv_SE .hide-for-i18n-sv_SE, .i18n-en_EU .hide-for-i18n-en_EU, .i18n-fi_FI .hide-for-i18n-fi_FI, .i18n-fr_LU .hide-for-i18n-fr_LU, .i18n-de_LU .hide-for-i18n-de_LU, .i18n-pl_PL .hide-for-i18n-pl_PL, .i18n-pt_PT .hide-for-i18n-pt_PT, .i18n-es_ES .hide-for-i18n-es_ES, .i18n-sl_SI .hide-for-i18n-sl_SI, .i18n-en_AE .hide-for-i18n-en_AE, .i18n-ar_AE .hide-for-i18n-ar_AE, .i18n-en_JO .hide-for-i18n-en_JO, .i18n-ar_JO .hide-for-i18n-ar_JO, .i18n-he_IL .hide-for-i18n-he_IL, .i18n-en_AU .hide-for-i18n-en_AU, .i18n-zh_CN .hide-for-i18n-zh_CN, .i18n-zh_HK .hide-for-i18n-zh_HK, .i18n-en_HK .hide-for-i18n-en_HK, .i18n-ja_JP .hide-for-i18n-ja_JP, .i18n-zh_MO .hide-for-i18n-zh_MO, .i18n-en_MO .hide-for-i18n-en_MO, .i18n-en_NZ .hide-for-i18n-en_NZ, .i18n-ko_KR .hide-for-i18n-ko_KR, .i18n-zh_TW .hide-for-i18n-zh_TW, .i18n-en_SG .hide-for-i18n-en_SG, .i18n-en_IN .hide-for-i18n-en_IN { display: none !important; } .i18n-en_AU .hide-for-non-jp, .i18n-zh_HK .hide-for-non-jp, .i18n-en_HK .hide-for-non-jp, .i18n-ja_JP .hide-for-non-jp, .i18n-zh_MO .hide-for-non-jp, .i18n-en_MO .hide-for-non-jp, .i18n-ko_KR .hide-for-non-jp, .i18n-zh_TW .hide-for-non-jp { display: none; } .i18n-zh_CN .hide-enterprise-for-not-enabled, .i18n-en_HK .hide-enterprise-for-not-enabled, .i18n-zh_HK .hide-enterprise-for-not-enabled, .i18n-ja_JP .hide-enterprise-for-not-enabled, .i18n-en_MO .hide-enterprise-for-not-enabled, .i18n-zh_MO .hide-enterprise-for-not-enabled, .i18n-zh_TW .hide-enterprise-for-not-enabled, .i18n-ko_KR .hide-enterprise-for-not-enabled { display: none; } .i18n-en_IE .tsla-header-nav--list_link[href*='new'], .i18n-en_JO .tsla-header-nav--list_link[href*='new'], .i18n-es_MX .tsla-header-nav--list_link[href*='new'], .i18n-en_EU .tsla-header-nav--list_link[href*='new'], .i18n-ko_KR .tsla-header-nav--list_link[href*='new'], .i18n-zh_TW .tsla-header-nav--list_link[href*='new'] { display: none; } .i18n-en_IE .tsla-header-nav--list_link[href*='used'], .i18n-en_JO .tsla-header-nav--list_link[href*='used'], .i18n-zh_MO .tsla-header-nav--list_link[href*='used'], .i18n-en_MO .tsla-header-nav--list_link[href*='used'], .i18n-es_MX .tsla-header-nav--list_link[href*='used'], .i18n-en_EU .tsla-header-nav--list_link[href*='used'], .i18n-ko_KR .tsla-header-nav--list_link[href*='used'], .i18n-zh_TW .tsla-header-nav--list_link[href*='used'] { display: none; } .tsla-header-nav--list_link[href*='events'] { display: none; } .i18n-en_GB .tsla-header-nav--list_link[href*='events'] { display: block; } .show-for-US { display: none !important; } .i18n-en .show-for-US { display: block !important; } .show-for-CA { display: none !important; } .i18n-fr_CA .show-for-CA, .i18n-en_CA .show-for-CA { display: block !important; } .show-for-israel { display: none; } .i18n-he_IL .show-for-israel { display: block; } .show-for-pl_PL { display: none !important; } .i18n-pl_PL .show-for-pl_PL { display: block !important; } .show-for-el_GR { display: none !important; } .i18n-el_GR .show-for-el_GR { display: block !important; } .show-for-en_PR { display: none !important; } .i18n-en_PR .show-for-en_PR { display: block !important; } .show-for-es_PR { display: none !important; } .i18n-es_PR .show-for-es_PR { display: block !important; } .show-for-PR { display: none !important; } .i18n-en_PR .show-for-PR, .i18n-es_PR .show-for-PR { display: block !important; } .show-for-hr_HR { display: none !important; } .i18n-hr_HR .show-for-hr_HR { display: block !important; } .show-for-en_SG { display: none !important; } .i18n-en_SG .show-for-en_SG { display: block !important; } .show-for-en_IN { display: none !important; } .i18n-en_IN .show-for-en_IN { display: block !important; } .show-for-sl_SI { display: none !important; } .i18n-sl_SI .show-for-sl_SI { display: block !important; } .show-for-fr_BE { display: none !important; } .i18n-fr_BE .show-for-fr_BE { display: block !important; } .show-for-nl_BE { display: none !important; } .i18n-nl_BE .show-for-nl_BE { display: block !important; } .show-for-de_AT { display: none !important; } .i18n-de_AT .show-for-de_AT { display: block !important; } .show-for-de_LU { display: none !important; } .i18n-de_LU .show-for-de_LU { display: block !important; } .show-for-fr_LU { display: none !important; } .i18n-fr_LU .show-for-fr_LU { display: block !important; } .show-for-CN { display: none !important; } .i18n-zh_CN .show-for-CN { display: block !important; } .show-for-CH { display: none !important; } .i18n-de_CH .show-for-CH, .i18n-fr_CH .show-for-CH, .i18n-it_CH .show-for-CH { display: block !important; } .show-for-DE { display: none !important; } .i18n-de .show-for-DE { display: block !important; } .show-for-DK { display: none !important; } .i18n-da .show-for-DK { display: block !important; } .show-for-ES { display: none !important; } .i18n-es_ES .show-for-ES { display: block !important; } .show-for-KO { display: none !important; } .i18n-ko_KR .show-for-KO { display: block !important; } .show-for-FI { display: none !important; } .i18n-fi_FI .show-for-FI { display: block !important; } .show-for-FR { display: none !important; } .i18n-fr .show-for-FR { display: block !important; } .show-for-GB { display: none !important; } .i18n-en_GB .show-for-GB { display: block !important; } .show-for-IE { display: none !important; } .i18n-en_IE .show-for-IE { display: block !important; } .show-for-NL { display: none !important; } .i18n-nl .show-for-NL { display: block !important; } .show-for-NO { display: none !important; } .i18n-no .show-for-NO { display: block !important; } .show-for-SE { display: none !important; } .i18n-sv_SE .show-for-SE { display: block !important; } .show-for-TW { display: none !important; } .i18n-zh_TW .show-for-TW { display: block !important; } .show-for-AU { display: none !important; } .i18n-en_AU .show-for-AU { display: block !important; } .show-for-NZ { display: none !important; } .i18n-en_NZ .show-for-NZ { display: block !important; } @media (min-width: 0) and (max-width: 639px) { [class*='show-for-'].hide-on-mobile { display: none !important; } } @media (min-width: 640px) { [class*='show-for-'].hide-on-desk { display: none !important; } } @media (min-width: 640px) and (max-width: 960px) { [class*='show-for-'].hide-on-middle { display: none !important; } } @media (min-width: 960px) { [class*='show-for-'].hide-on-large { display: none !important; } } /** * override the checkbox styling with the latest styling from TDS as 1.0 has some issues with wrapping */ :root { --tds-checkbox-size--default: 22px; --tds-checkbox-dot-size: calc(var(--tds-checkbox-size) * .41667); --tds-checkbox-dot-size: calc(var(--tds-checkbox-size) * .41667); --tds-checkboxes-horizontal_spacer: 20px; --tds-checkbox-input-top-position: -3px; --tds-checkbox-input-left-position: 1px; --tds-checkbox-label-top-position: -3px; --tds-checkbox-margin-bottom: 16px; --tds-checkbox-margin-bottom: var(--tds-size--2x); --tds-checkbox-label-padding-left: 36px; --tds-checkbox-first-margin-top: 4px; --tds-checkbox-first-margin-top: var(--tds-size--half); } /* Custom piece to remove the nowrap from the checkbox titles */ .tds-checkbox .tds-label--checkbox .tds-label-title { white-space: normal; } /* Container for group of checkbox / options */ .tds-checkboxes { position: relative; padding: 0 20px; padding: 0 var(--tds-checkboxes-horizontal_spacer); } /* container for single checkbox input and label */ .tds-checkbox { position: relative; margin-bottom: 16px; margin-bottom: var(--tds-checkbox-margin-bottom); display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } /* adds extra space designed between tds-form-item-label and tds-checkboxes */ .tds-checkboxes .tds-checkbox:first-of-type { margin-top: 4px; margin-top: var(--tds-checkbox-first-margin-top); } .tds-checkboxes .tds-checkbox:last-of-type { margin-bottom: 16px; margin-bottom: var(--tds-checkbox-margin-bottom); } .tds-label--checkbox { width: 100%; padding: 0 0 0 36px; padding: 0 0 0 var(--tds-checkbox-label-padding-left); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #5c5e62; color: var(--tds-color--grey30); transition: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75); transition: var(--tds-animate--focus); position: relative; } /* checkbox cursor change on hover/focus ------------------------------------------------------ */ .tds-label--radio:hover { cursor: pointer; } /* visually hides the browser checkbox */ .tds-checkbox-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; opacity: 0; } /* create and position custom checkbox ------------------------------------------------------ */ .tds-label--checkbox::before, .tds-label--checkbox::after { height: 22px; height: var(--tds-checkbox-size--default); width: 22px; width: var(--tds-checkbox-size--default); border-radius: 4px; border-radius: var(--tds-border-radius); display: block; content: ''; position: absolute; top: -3px; top: var(--tds-checkbox-label-top-position); left: 0; } .tds-label--checkbox:hover { cursor: pointer; color: #171a20; color: var(--tds-color--grey10); } /* border of the checkbox */ .tds-label--checkbox::before { border: 1px solid #5c5e62; border: var(--tds-border-width--small) solid var(--tds-color--grey30); background-color: transparent; transition: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75); transition: var(--tds-animate--focus); } .tds-label--checkbox::after { border: none; opacity: 0; transition: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75); transition: var(--tds-animate--focus); } [dir='rtl'] .tds-label--checkbox::after { left: initial; right: 0; } [dir='rtl'] .tds-label--checkbox { padding-left: initial; padding-right: 36px; padding-right: var(--tds-checkbox-label-padding-left); } [dir='rtl'] .tds-label--checkbox::before, [dir='rtl'] .tds-label--checkbox::after { left: initial; right: 0; } /* --- Label text ------------------------------------------------------ */ .tds-checkbox-input:checked ~ .tds-label--checkbox { color: #171a20; color: var(--tds-color--grey10); } /* --- Checkbox border hover/focus/checked states ------------------------------------------------------ */ .tds-label--checkbox:hover::before, .tds-checkbox-input:focus ~ .tds-label--checkbox::before, .tds-checkbox-input:active ~ .tds-label--checkbox::before, .tds-checkbox-input:checked ~ .tds-label--checkbox::before { border-color: #171a20; border-color: var(--tds-color--grey10); transition: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75); transition: var(--tds-animate--focus); } .tds-checkbox-input:focus ~ .tds-label--checkbox::before, .tds-checkbox-input:active ~ .tds-label--checkbox::before, .tds-checkbox-input:checked ~ .tds-label--checkbox::before { box-shadow: inset 0 0 0 1px #171a20; box-shadow: inset 0 0 0 var(--tds-border-width--small) var(--tds-color--grey10); transition: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75); transition: var(--tds-animate--focus); } /* --- Disabled/Read-only Checkboxes ------------------------------------------------------ */ .tds-checkbox-input:disabled ~ .tds-label--checkbox { opacity: .5; opacity: var(--tds-opacity--medium); cursor: not-allowed; } /* Prevent border and text color changes if disabled input clicked or hovered */ .tds-checkbox-input:disabled ~ .tds-label--checkbox:hover, .tds-checkbox-input:disabled:focus ~ .tds-label--checkbox:hover { color: #5c5e62; color: var(--tds-color--grey30); } .tds-checkbox-input:disabled ~ .tds-label--checkbox:hover::before, .tds-checkbox-input:disabled:focus ~ .tds-label--checkbox:hover::before { border-color: #d0d1d2; border-color: var(--tds-color--grey50); } /* --- Default checkmark styling for checkboxes ------------------------------------------------------ */ .tds-checkbox-input:checked ~ .tds-label--checkbox::after { background-position: center; background-repeat: no-repeat; background-size: 60%; /* TODO: resolve removal of these once we have fully figured out our TDS Icons solution */ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCIgdmVyc2lvbj0iMSI+ICA8cGF0aCBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzE3MWEyMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMSAyTDQgOSAxIDYiLz48L3N2Zz4="); top: -3px; top: var(--tds-checkbox-input-top-position); left: 1px; left: var(--tds-checkbox-input-left-position); opacity: 1; transition: border 250ms cubic-bezier(.5, .25, .25, .75), box-shadow 250ms cubic-bezier(.5, .25, .25, .75), color 250ms cubic-bezier(.5, .25, .25, .75), opacity 250ms cubic-bezier(.5, .25, .25, .75); transition: var(--tds-animate--focus); } [dir='rtl'] .tds-checkbox-input:checked ~ .tds-label--checkbox::after { left: initial; right: 1px; } /* TODO: resolve removal of these once we have fully figured out our TDS Icons solution */ .tds-scrim--black .tds-checkbox-input:checked ~ .tds-label--checkbox::after { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCIgdmVyc2lvbj0iMSI+ICA8cGF0aCBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMSAyTDQgOSAxIDYiLz48L3N2Zz4="); } .content-constrain { margin: auto; max-width: 2400px; } [id='tsla-header-nav--secondary_show']:checked ~ .tsla-header-main .tsla-header-nav--meta_info { position: sticky; } [id='page-support'] .tds-site-header-wrapper, [id='page-semi'] .tds-site-header-wrapper, [id='page-roadster'] .tds-site-header-wrapper { position: absolute; width: 100%; } [id='page-support'] .tds-site-header-wrapper .tds-modal .tds-site-nav-items, [id='page-support'] .tds-site-header-wrapper .tds-modal .tds-site-nav-item, [id='page-semi'] .tds-site-header-wrapper .tds-modal .tds-site-nav-items, [id='page-semi'] .tds-site-header-wrapper .tds-modal .tds-site-nav-item, [id='page-roadster'] .tds-site-header-wrapper .tds-modal .tds-site-nav-items, [id='page-roadster'] .tds-site-header-wrapper .tds-modal .tds-site-nav-item { display: block; } [id='page-support'] .tds-site-header-wrapper .tds-modal .tds-locale-selector, [id='page-semi'] .tds-site-header-wrapper .tds-modal .tds-locale-selector, [id='page-roadster'] .tds-site-header-wrapper .tds-modal .tds-locale-selector { display: block; } [id='page-support'] .tds-site-header-wrapper .tds-modal .tds-locale-selector .tds-locale-selector-region, [id='page-semi'] .tds-site-header-wrapper .tds-modal .tds-locale-selector .tds-locale-selector-region, [id='page-roadster'] .tds-site-header-wrapper .tds-modal .tds-locale-selector .tds-locale-selector-region { column-count: 1; } .tsla-header-nav--meta_info { background-color: #fff; margin-bottom: 30px; } .tsla-user_is--logged_in .tsla-link_for-logout { opacity: 1; z-index: 1; } .tsla-user_is--logged_out .tsla-link_for-login { opacity: 1; z-index: 1; } .tsla-header-nav--list .tsla-header-nav--list { padding-bottom: 0; padding-top: 0; } .dashboard_section_shop_table { display: table; width: 100%; margin-left: 5px; } .dashboard_section_shop_row { display: table-row; width: auto; } .dashboard_section_shop_col { display: table-column; float: left; width: 33.3%; text-align: center; margin-top: 10px; } img, object, embed, video, iframe { max-width: 100%; } @media all and (max-width: 800px) { .dashboard_section_shop_col { display: block; float: none; width: 100%; } } @media screen and (max-width: 640px) { .tsla-header-nav .tsla-header-nav--meta_info { text-align: left; padding: 20px 10px; margin: 0 20px; } [dir='rtl'] .tsla-header-nav .tsla-header-nav--meta_info { text-align: right; } .tds-site-header-wrapper .tds-modal { padding-bottom: 100px !important; } .tds-site-header-wrapper .tds-modal .tds-list-item button { text-align: left; } .tds-site-header-wrapper .tds-modal .tds-list-item button .tds-site-nav-item-text { display: inline-block; margin-right: 20px; } } @media (max-width: 960px) and (min-width: 640px) { .content-constrain { min-width: 940px; } } .tds--is_visually_hidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .tds-label--checkbox { position: relative; } head::before { display: none !important; }