/*doc

---
title: Typography Variables
name: 01_typography
category: Typography
---
<br>
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
---


<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #c00;" data-hex="#c00" data-rgb="rgb(240,0,0)"></div>
    <div class="tsla-card_tile--meta">$tesla-primary</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #f00;" data-hex="#f00" data-rgb="rgb(255,0,0)"></div>
    <div class="tsla-card_tile--meta">$tesla-active</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #39f;" data-hex="#39f" data-rgb="rgb(51,153,255)"></div>
    <div class="tsla-card_tile--meta">$tesla-transactional</div>
  </div>
</div>

*/
/*doc
---
title: Grey Scale Colors
category: Colors
name: 02_colors
---


<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #000;" data-hex="#000" data-rgb="rgb(0,0,0)"></div>
    <div class="tsla-card_tile--meta">$black</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #111;" data-hex="#111" data-rgb="rgb(17,17,17)"></div>
    <div class="tsla-card_tile--meta">$grey-1</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #222;" data-hex="#222" data-rgb="rgb(34,34,34)"></div>
    <div class="tsla-card_tile--meta">$grey-2</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #333;" data-hex="#333" data-rgb="rgb(51,51,51)"></div>
    <div class="tsla-card_tile--meta">$grey-3</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #444;" data-hex="#444" data-rgb="rgb(68,68,68)"></div>
    <div class="tsla-card_tile--meta">$grey-4</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #666;" data-hex="#666" data-rgb="rgb(102,102,102)"></div>
    <div class="tsla-card_tile--meta">$grey-6</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #888;" data-hex="#888" data-rgb="rgb(136,136,136)"></div>
    <div class="tsla-card_tile--meta">$grey-8</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #999;" data-hex="#999" data-rgb="rgb(153,153,153)"></div>
    <div class="tsla-card_tile--meta">$grey-9</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #aaa;" data-hex="#aaa" data-rgb="rgb(170,170,170)"></div>
    <div class="tsla-card_tile--meta">$grey-a</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #bbb;" data-hex="#bbb" data-rgb="rgb(187,187,187)"></div>
    <div class="tsla-card_tile--meta">$grey-b</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #ccc;" data-hex="#ccc" data-rgb="rgb(204,204,204)"></div>
    <div class="tsla-card_tile--meta">$grey-c</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #ddd;" data-hex="#ddd" data-rgb="rgb(221,221,221)"></div>
    <div class="tsla-card_tile--meta">$grey-d</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #eee;" data-hex="#eee" data-rgb="rgb(238,238,238)"></div>
    <div class="tsla-card_tile--meta">$grey-e</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #fff;" data-hex="#fff" data-rgb="rgb(255,255,255)"></div>
    <div class="tsla-card_tile--meta">$white</div>
  </div>
</div>

*/
/*doc
---
title: Background Colors
category: Colors
name: 03_colors
---

<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #f2f2f2;" data-hex="#f2f2f2" data-rgb="rgb(242,242,242)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #f7f7f7;" data-hex="#f7f7f7" data-rgb="rgb(247,247,247)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color-light</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #fafafa;" data-hex="#fafafa" data-rgb="rgb(250,250,250)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color-lightest</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #fefefe;" data-hex="#fefefe" data-rgb="rgb(254,254,254)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color-even-lighterest</div>
  </div>
</div>

*/
/*doc
---
title: Extra Colors
category: Colors
name: 04_colors
---

<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #4d4d4d;" data-hex="#4d4d4d" data-rgb="rgb(77,77,77)"></div>
    <div class="tsla-card_tile--meta">$border-footer</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #808080;" data-hex="#808080" data-rgb="rgb(128,128,128)"></div>
    <div class="tsla-card_tile--meta">$form-label-color</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #e5e5e5;" data-hex="#e5e5e5" data-rgb="rgb(229,229,229)"></div>
    <div class="tsla-card_tile--meta">$border-content</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #141414;" data-hex="#141414" data-rgb="rgb(20,20,20)"></div>
    <div class="tsla-card_tile--meta">$ui-text</div>
  </div>
</div>

*/
/*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.

<table class="table">
  <thead class="table-head">
    <tr class="table-row">
      <th class="">Variable Name</th>
      <th class="">Value</th>
      <th class="">Sample Devices</th>
      <th class="" style="text-align: center;vertical-align: middle;">Type</th>
    </tr>
  </thead>
  <tfoot class="table-foot">
    <tr class="table-row">
      <td class="" colspan="4"><strong>Note:</strong> All of <a href="https://www.tesla.com">tesla.com</a> is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
      </td>
    </tr>
  </tfoot">
  <tbody class="table-body">
    <tr class="table-row">
      <td class=""><code class="styleguide">$mobile-only</code></td>
      <td class=""><code class="styleguide">0-639px</code></td>
      <td class="">
        <ul>
          <li>HTC One, Galaxy S3/S4/S5 (639px)</li>
          <li>iPhone 5/5S (568px)</li>
          <li>iPhone 4 (480px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$small-desktop-only</code></td>
      <td class=""><code class="styleguide">640px-940px</code></td>
      <td class="">
        <ul>
          <li>Small screens only (640px - 960px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$small-desktop</code></td>
      <td class=""><code class="styleguide">640px+</code></td>
      <td class="">
        <ul>
          <li>Small devices (640px+)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$large-desktop</code></td>
      <td class=""><code class="styleguide">960px+</code></td>
      <td class="">
        <ul>
          <li>Large desktop screens (960px+)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
  </tbody>
  <tbody class="tbody">
    <tr class="table-row">
      <td class=""><code class="styleguide">$mobile-phone-only</code></td>
      <td class=""><code class="styleguide">0-736px</code></td>
      <td class="">
        <ul>
          <li>HTC One (639px)</li>
          <li>Galaxy S3/S4/S5 (639px)</li>
          <li>iPhone 5/5S (568px)</li>
          <li>iPhone 4 (480px)</li>
          <li>iPhone 6 (667px)</li>
          <li>iPhone 6+ (736px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--info tsla-alert-inline">New</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$tablet-only</code></td>
      <td class=""><code class="styleguide">601-1280px</code></td>
      <td class="">
        <ul>
          <li>iPad (768px - 1024px)</li>
          <li>Galaxy (800px - 1280px)</li>
          <li>Nexus (601px - 906px)</li>
          <li>Kindle (800px - 1280px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--info tsla-alert-inline">New</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$large-devices</code></td>
      <td class=""><code class="styleguide">1200px+</code></td>
      <td class="">
        <ul>
          <li>gigantic screens?</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--info tsla-alert-inline">New</div></td>
    </tr>
  </tbody>
</table>

*/
/*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"); }

@media (min-width: 0) and (max-width: 736px) {
  .hideIfMobile {
    display: none; } }

.snapins_invite {
  background-color: #fff;
  font-family: "Gotham Book" !important;
  overflow: visible;
  z-index: 200 !important;
  cursor: pointer !important; }

.dialogTextContainer {
  font-family: "Gotham Book"; }
  .dialogTextContainer .uiOutputRichText {
    display: none; }

.uiOutputRichText {
  font-family: "Gotham Book"; }

.embeddedServiceLiveAgentStateChatItem .avatar {
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #222; }

.embeddedServiceLiveAgentStateChatItem.agent .chatContent {
  color: #000; }

.embeddedServiceLiveAgentStateChatItem.chasitor .chatContent {
  background: #39f; }

.embeddedServiceLiveAgentStateChatItem .nameAndTimeContent {
  font-family: "Gotham Book";
  font-size: 12px; }

.invitationSVGDiv svg {
  outline: none; }

.chatButtonNoInvitation {
  background: none;
  border: 0;
  outline: none;
  cursor: pointer !important; }

.embeddedServiceInvitation {
  position: fixed;
  display: block;
  height: 150px;
  z-index: 201;
  background: #fff;
  width: 295px;
  bottom: 145px;
  right: 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }

.embeddedServiceSidebar .modalContainer {
  font-family: "Gotham Book" !important; }

.embeddedServiceSidebar .minimizeButton {
  right: 45px;
  position: absolute;
  top: 2px;
  background-size: 14px; }
  .embeddedServiceSidebar .minimizeButton:hover {
    cursor: pointer;
    background: #fff; }
  .embeddedServiceSidebar .minimizeButton .embeddedServiceIcon {
    background: url("/tesla_theme/assets/img/minimize_icon.png") no-repeat;
    background-size: 12px; }
    .embeddedServiceSidebar .minimizeButton .embeddedServiceIcon svg {
      visibility: hidden; }

.embeddedServiceSidebar.layout-docked .dockableContainer {
  bottom: 15px;
  border-radius: 8px; }

@media only screen and (min-width: 48em) {
  /mobile/ .embeddedServiceInvitation {
    max-width: 332px;
    max-height: 210px; } }

@media only screen and (max-width: 850px) {
  .modalContainer {
    z-index: 5001 !important; }
  .dockableContainer {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0;
    position: fixed !important;
    overflow-y: scroll !important;
    overflow: visible !important;
    max-width: 100vw !important;
    max-height: 100% !important;
    left: 0 !important;
    bottom: 0 !important; }
  .embeddedServiceInvitation {
    border-radius: 0; }
  .chasitorText {
    border: 0 !important;
    font-size: 16px !important; }
  .chasitorControls {
    padding-bottom: 0; }
  .chatButtonIcon {
    bottom: 25px !important;
    right: 20px !important; } }

.embeddedServiceInvitationHeader .embeddedServiceTitleText {
  font-size: 16px;
  color: #fff;
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  -ms-flex-positive: 1;
      flex-grow: 1;
  max-width: 100%;
  margin: 0 12px; }

.embeddedServiceInvitationHeader .embeddedServiceCloseIcon {
  color: #000;
  font-family: "Gotham Book";
  font-size: 20px;
  left: 82%;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  position: relative;
  height: 35px;
  font-weight: 900; }

.embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus {
  border: 0; }

.embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus::before {
  border: 0; }

.embeddedServiceInvitationHeader .embeddedServiceCloseIcon:active,
.embeddedServiceInvitationHeader .embeddedServiceCloseIcon:hover {
  border: 0; }

.embeddedServiceSidebarHeader {
  background: #f7f7f7 !important; }
  .embeddedServiceSidebarHeader .headerButton {
    color: #000;
    font-size: 16px; }
  .embeddedServiceSidebarHeader .headerButton:focus::after {
    border: 0 !important; }
  .embeddedServiceSidebarHeader .headerText {
    margin-bottom: 0;
    -ms-flex-pack: left;
        justify-content: left;
    padding-left: 20px; }
  .embeddedServiceSidebarHeader .shortHeader {
    border-bottom: 1px #e5e5e5 solid; }
  .embeddedServiceSidebarHeader [id='headerTextLabel'] {
    color: #000;
    font-size: 16px;
    font-family: "Gotham Medium"; }
  .embeddedServiceSidebarHeader .headerItem:focus::after {
    border: 0; }

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls {
  margin: 0;
  border-top: 1px #e5e5e5 solid;
  height: 100%;
  border-radius: 0; }

.embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextOneRow {
  min-height: 50px;
  height: auto; }
  .embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextOneRow .chasitorText {
    border: 0;
    padding: 15px;
    font-family: "Gotham Book";
    color: #000; }

.embeddedServiceLiveAgentStateChatInputFooter.chasitorInputWrapper {
  background: #fff; }

.embeddedServiceSidebarExtendedHeader {
  background: #f7f7f7; }

.embeddedServiceInvitation > .embeddedServiceInvitationBody {
  background-color: #fff;
  max-height: 110px;
  min-width: 260px;
  margin: 0 8px;
  font-size: 16px;
  line-height: 20px;
  overflow: auto;
  text-align: center;
  margin-top: -15px; }

.embeddedServiceInvitationBody p {
  color: #333;
  padding: 8px;
  margin: 12px 0; }

.embeddedServiceInvitation > .embeddedServiceInvitationFooter {
  width: inherit;
  color: #fff;
  text-align: center;
  background-color: #fff;
  max-height: 50px; }

.embeddedServiceInvitationFooter > .embeddedServiceActionButton {
  font-size: 14px;
  max-height: 40px;
  border: 0;
  border-radius: 4px;
  padding: 10px;
  margin: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer; }

.embeddedServiceLiveAgentQueuePosition.queuePositionWaiting .queuePositionNumber {
  font-family: "Gotham Book";
  line-height: 64px; }

.embeddedServiceLiveAgentQueuePosition.queuePositionWaiting .queuePositionMessage p {
  font-family: "Gotham Book"; }

.embeddedServiceLiveAgentQueuePosition svg {
  fill: #fff !important; }

.embeddedServiceSidebarButton {
  background: #fff !important;
  border-radius: 30px;
  border: 0 !important;
  box-shadow: none !important;
  font-family: "Gotham Book"; }
  .embeddedServiceSidebarButton:focus {
    background: #39f !important;
    text-decoration: none;
    border: 0 !important;
    box-shadow: none !important; }
    .embeddedServiceSidebarButton:focus .label {
      color: #fff !important;
      font-family: "Gotham Book"; }
  .embeddedServiceSidebarButton:hover {
    background: #39f !important; }
    .embeddedServiceSidebarButton:hover .label {
      color: #fff !important; }
  .embeddedServiceSidebarButton .label {
    color: #39f !important; }

.chatButtonIcon {
  position: fixed;
  right: 35px;
  z-index: 201;
  bottom: 80px;
  background: #fff;
  border-radius: 30px;
  height: 52px;
  width: 52px;
  text-align: center;
  padding-top: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  pointer-events: auto !important; }

.embeddedServiceHelpButton .helpButton {
  bottom: 80px;
  right: 35px; }
  .embeddedServiceHelpButton .helpButton .uiButton {
    font-family: "Gotham Book";
    min-width: 52px;
    height: 52px;
    font-size: .70em;
    padding: 0;
    border-radius: 30px;
    overflow: hidden;
    background: url("/sites/all/themes/custom/tesla_theme/assets/img/live_chat_icon.png") no-repeat #fff 12px 15px; }
    .embeddedServiceHelpButton .helpButton .uiButton .helpButtonLabel {
      display: none; }
    .embeddedServiceHelpButton .helpButton .uiButton:hover, .embeddedServiceHelpButton .helpButton .uiButton:focus, .embeddedServiceHelpButton .helpButton .uiButton::before {
      background-color: #fff; }
    .embeddedServiceHelpButton .helpButton .uiButton.helpButtonDisabled {
      display: none; }
  .embeddedServiceHelpButton .helpButton:focus {
    outline: 1px solid #3e6ae1;
    overflow: hidden; }

.embeddedServiceHelpButton .embeddedServiceIcon {
  margin-left: 1.4em;
  visibility: hidden; }

.embeddedServiceSidebarMinimizedDefaultUI {
  right: 20px !important; }
  .embeddedServiceSidebarMinimizedDefaultUI .minimizedText {
    display: block; }
  .embeddedServiceSidebarMinimizedDefaultUI [id='chatButtonAssistiveText'] {
    background-image: url("/tesla_theme/assets/img/minimize_icon.png");
    width: 20px !important;
    max-width: 20px !important;
    background-repeat: no-repeat;
    background-size: 12px;
    transform: rotate(-180deg) scaleX(-1);
    position: absolute;
    left: 290px;
    top: 0;
    content: '';
    padding-left: 100px;
    text-indent: 100px;
    display: block !important;
    background-position: 0 25px; }
  @media (min-width: 0) and (max-width: 639px) {
    .embeddedServiceSidebarMinimizedDefaultUI.helpButton {
      background-color: #fff !important;
      border: 0;
      border-radius: 30px;
      font-family: "Gotham Book";
      height: 52px !important;
      min-width: 52px !important;
      overflow: hidden;
      padding: 0;
      right: 35px !important;
      width: 52px !important; }
      .embeddedServiceSidebarMinimizedDefaultUI.helpButton:hover {
        background-color: #fff !important; }
      .embeddedServiceSidebarMinimizedDefaultUI.helpButton .messageContent {
        background-image: url('data:image/svg+xml,%0A%3Csvg width="28px" height="24px" viewBox="0 0 28 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="0802" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="16-Mobile-Chat---Ended" transform="translate(-311.000000, -669.000000)" fill="%23222222"%3E%3Cg id="Group-21" transform="translate(295.000000, 649.000000)"%3E%3Cg id="Group-2" transform="translate(16.000000, 20.000000)"%3E%3Cpolygon id="Fill-1" points="6.64031621 11.9525692 21.2490119 11.9525692 21.2490119 10.6245059 6.64031621 10.6245059"%3E%3C/polygon%3E%3Cpolygon id="Fill-2" points="6.64031621 7.96837945 21.2490119 7.96837945 21.2490119 6.64031621 6.64031621 6.64031621"%3E%3C/polygon%3E%3Cpath d="M26.4948617,16.7487863 C26.4948617,17.5449311 25.869304,18.1926471 25.1003953,18.1926471 L18.0672645,18.1926471 L17.4896765,18.1926471 L17.0813768,18.6154096 L13.944664,21.8632303 L10.8082302,18.6154096 L10.3999304,18.1926471 L9.82234245,18.1926471 L2.78893281,18.1926471 C2.02002403,18.1926471 1.3944664,17.5449311 1.3944664,16.7487863 L1.3944664,2.88772177 C1.3944664,2.09157688 2.02002403,1.44386088 2.78893281,1.44386088 L25.1003953,1.44386088 C25.869304,1.44386088 26.4948617,2.09157688 26.4948617,2.88772177 L26.4948617,16.7487863 Z M25.1003953,0 L2.78893281,0 C1.24888411,0 0,1.29283304 0,2.88772177 L0,16.7487863 C0,18.3433862 1.24888411,19.636508 2.78893281,19.636508 L9.82234245,19.636508 L13.944664,23.9051383 L18.0672645,19.636508 L25.1003953,19.636508 C26.6407228,19.636508 27.8893281,18.3433862 27.8893281,16.7487863 L27.8893281,2.88772177 C27.8893281,1.29283304 26.6407228,0 25.1003953,0 Z" id="Fill-3"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') !important;
        background-repeat: no-repeat; } }
  @media (min-width: 0) and (max-width: 639px) {
    .embeddedServiceSidebarMinimizedDefaultUI.newMessage {
      background-color: #3e6ae1 !important; }
      .embeddedServiceSidebarMinimizedDefaultUI.newMessage:hover {
        background-color: #3e6ae1 !important; }
      .embeddedServiceSidebarMinimizedDefaultUI.newMessage .minimizedText {
        display: -ms-flexbox !important;
        display: flex !important; }
        .embeddedServiceSidebarMinimizedDefaultUI.newMessage .minimizedText .message {
          display: none; }
      .embeddedServiceSidebarMinimizedDefaultUI.newMessage .messageContent {
        background-image: url('data:image/svg+xml,%0A%3Csvg width="28px" height="24px" viewBox="0 0 28 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="0802" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="04-Mobile-Chat---Minimize" transform="translate(-311.000000, -669.000000)" fill="%23FFFFFF"%3E%3Cg id="Group" transform="translate(295.000000, 649.000000)"%3E%3Cg id="Group-21"%3E%3Cg id="Group-2" transform="translate(16.000000, 20.000000)"%3E%3Cpath d="M26.4948617,16.7487863 C26.4948617,17.5449311 25.869304,18.1926471 25.1003953,18.1926471 L18.0672645,18.1926471 L17.4896765,18.1926471 L17.0813768,18.6154096 L13.944664,21.8632303 L10.8082302,18.6154096 L10.3999304,18.1926471 L9.82234245,18.1926471 L2.78893281,18.1926471 C2.02002403,18.1926471 1.3944664,17.5449311 1.3944664,16.7487863 L1.3944664,2.88772177 C1.3944664,2.09157688 2.02002403,1.44386088 2.78893281,1.44386088 L25.1003953,1.44386088 C25.869304,1.44386088 26.4948617,2.09157688 26.4948617,2.88772177 L26.4948617,16.7487863 Z M25.1003953,0 L2.78893281,0 C1.24888411,0 0,1.29283304 0,2.88772177 L0,16.7487863 C0,18.3433862 1.24888411,19.636508 2.78893281,19.636508 L9.82234245,19.636508 L13.944664,23.9051383 L18.0672645,19.636508 L25.1003953,19.636508 C26.6407228,19.636508 27.8893281,18.3433862 27.8893281,16.7487863 L27.8893281,2.88772177 C27.8893281,1.29283304 26.6407228,0 25.1003953,0 Z" id="Fill-3"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') !important; } }
  @media (min-width: 0) and (max-width: 639px) {
    .embeddedServiceSidebarMinimizedDefaultUI.queue {
      background-color: #fff !important;
      border: 0;
      border-radius: 30px;
      font-family: "Gotham Book";
      height: 52px !important;
      min-width: 52px !important;
      overflow: hidden;
      padding: 0;
      right: 35px !important;
      width: 52px !important; }
      .embeddedServiceSidebarMinimizedDefaultUI.queue:hover {
        background-color: #fff !important; }
      .embeddedServiceSidebarMinimizedDefaultUI.queue .messageContent {
        background-image: url('data:image/svg+xml,%0A%3Csvg width="28px" height="24px" viewBox="0 0 28 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="0802" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="03-Mobile-Chat---Connecting" transform="translate(-311.000000, -669.000000)" fill="%23222222"%3E%3Cg id="Group-21" transform="translate(295.000000, 649.000000)"%3E%3Cg id="Group-2" transform="translate(16.000000, 20.000000)"%3E%3Cpath d="M26.4948617,16.7487863 C26.4948617,17.5449311 25.869304,18.1926471 25.1003953,18.1926471 L18.0672645,18.1926471 L17.4896765,18.1926471 L17.0813768,18.6154096 L13.944664,21.8632303 L10.8082302,18.6154096 L10.3999304,18.1926471 L9.82234245,18.1926471 L2.78893281,18.1926471 C2.02002403,18.1926471 1.3944664,17.5449311 1.3944664,16.7487863 L1.3944664,2.88772177 C1.3944664,2.09157688 2.02002403,1.44386088 2.78893281,1.44386088 L25.1003953,1.44386088 C25.869304,1.44386088 26.4948617,2.09157688 26.4948617,2.88772177 L26.4948617,16.7487863 Z M25.1003953,0 L2.78893281,0 C1.24888411,0 0,1.29283304 0,2.88772177 L0,16.7487863 C0,18.3433862 1.24888411,19.636508 2.78893281,19.636508 L9.82234245,19.636508 L13.944664,23.9051383 L18.0672645,19.636508 L25.1003953,19.636508 C26.6407228,19.636508 27.8893281,18.3433862 27.8893281,16.7487863 L27.8893281,2.88772177 C27.8893281,1.29283304 26.6407228,0 25.1003953,0 Z" id="Fill-3"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') !important;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%; }
        .embeddedServiceSidebarMinimizedDefaultUI.queue .messageContent .minimizedQueuePosition {
          height: 100%;
          width: 100%; }
          .embeddedServiceSidebarMinimizedDefaultUI.queue .messageContent .minimizedQueuePosition .queuePositionNumber {
            -ms-flex-line-pack: center;
                align-content: center;
            -ms-flex-align: center;
                align-items: center;
            color: #000;
            display: -ms-flexbox;
            display: flex;
            font-family: "Gotham Medium";
            font-size: 12px;
            height: 100%;
            -ms-flex-pack: center;
                justify-content: center;
            line-height: 15px;
            width: 100%; } }
  @media (min-width: 0) and (max-width: 639px) {
    .embeddedServiceSidebarMinimizedDefaultUI.sidebarHeader {
      bottom: 80px;
      border-radius: 30px; } }
  .embeddedServiceSidebarMinimizedDefaultUI .embeddedServiceLoadingBalls {
    position: relative;
    top: 2px; }
  .embeddedServiceSidebarMinimizedDefaultUI .embeddedServiceIcon.x-small {
    display: none; }

.embeddedServiceLiveAgentStateChatUnreadMessageBanner .message {
  padding-bottom: 0; }

.embeddedServiceIcon svg {
  fill: #000; }

.embeddedServiceLiveAgentStateChatHeader .content {
  display: none; }

.embeddedServiceSidebarFormField.inputSplitName, .embeddedServiceSidebarFormField.inputEmail {
  margin-top: 20px !important; }

.embeddedServiceSidebarFormField.inputText {
  margin-top: 30px !important; }

.embeddedServiceSidebarFormField .uiInput .uiLabel-left {
  color: #999;
  font-family: "Gotham Medium";
  font-size: 14px; }

.embeddedServiceSidebarFormField .uiInput .required {
  display: none; }

.embeddedServiceSidebarFormField .uiInput .input {
  border-radius: 30px;
  color: #000; }
  .embeddedServiceSidebarFormField .uiInput .input:focus {
    border: 1px solid #e5e5e5;
    box-shadow: none; }

.loadingBall {
  background-color: #000 !important; }

.embeddedServiceLiveAgentStateChat .messageArea {
  padding-top: 10px !important;
  background-color: #fff;
  /* Old browsers */
  background: linear-gradient(to bottom, white 94%, #eaeaea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }

.embeddedServiceLiveAgentStateChat .uiOutputRichText {
  font-family: "Gotham Book";
  font-weight: 100; }

.embeddedServiceLiveAgentStateChat .chatSessionStartTime {
  display: none; }

.embeddedServiceLiveAgentStateChat .endChatContainer .endChatButton {
  margin-top: 20px !important; }

.waitingGreeting {
  color: #000; }

[id='dialogTextTitle'] {
  font-family: "Gotham Book";
  color: #000 !important; }

.helpButtonEnabled .uiButton {
  overflow: hidden; }

.embeddedServiceLiveAgentStateWaitingHeader .waitingMessage {
  color: #000; }

.embeddedServiceLiveAgentStateWaitingHeader .content {
  background: #fff; }

.embeddedServiceLiveAgentStateWaitingHeader .waitingGreeting {
  display: none; }

.inviteChatBox {
  position: fixed;
  display: block;
  height: 150px;
  z-index: 999 !important;
  background: #fff;
  width: 260px;
  bottom: 70px;
  right: 12px;
  border-radius: 16px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }

.inviteChatHeader {
  padding-top: 17px;
  padding-left: 18px;
  font-size: 15px;
  background-color: #000;
  border-radius: 16px 16px 0 0;
  padding-bottom: 9px;
  font-weight: 600;
  position: relative;
  margin-bottom: 3px; }

.inviteChatClose {
  background-color: #000;
  position: relative;
  top: -33px;
  width: 15px;
  left: 230px;
  font-size: 18px;
  font-weight: bolder;
  font-family: verdana, arial, helvetica, sans-serif; }

.inviteChatMessage {
  color: #000;
  font-size: 15px;
  bottom: 15px;
  left: 18px;
  position: relative; }

.inviteChatStartButton {
  background-color: #000;
  height: 28px;
  width: 100px;
  text-align: center;
  padding-top: 5px;
  border-radius: 16px;
  position: relative;
  margin-left: 138px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: bold; }

.inviteChatTriangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 21px 15px 0 12px;
  border-color: #fff transparent transparent;
  line-height: 0;
  margin-left: 225px;
  margin-top: 3px; }

.forceChatWindowDown {
  padding: 0 !important; }

.messageWrapper > * {
  font-family: "Gotham Book" !important; }

div .forceChatWindowSpanStyling {
  background-color: #f7f7f7; }
  div .forceChatWindowSpanStyling span {
    color: #000;
    font-weight: 500;
    font-size: 17px;
    padding-top: 2px;
    overflow: visible !important;
    font-family: "Gotham Book" !important; }
  div .forceChatWindowSpanStyling h2 {
    padding-right: 60% !important;
    font-size: 17px !important;
    font-family: "Gotham Book" !important;
    display: block !important;
    padding-left: 25px !important;
    padding-top: 10px !important; }

.forceChatWindowUp {
  margin-bottom: 60px !important;
  border-radius: 10px !important; }

.loadingScreenMessage {
  padding-right: 25px;
  padding-left: 25px;
  font-family: "Gotham Book";
  color: #000; }

.closeButton::after {
  border: 0 !important; }

.closeButton:hover {
  cursor: pointer;
  background: #fff; }

[id='tooltipForLiveAgent'] {
  position: fixed;
  bottom: 150px;
  right: 40px;
  padding: 35px 40px;
  background: #fff;
  z-index: 800;
  border-radius: 10px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5); }
  [id='tooltipForLiveAgent'] .tooltipForLiveAgentInnerContainer {
    text-align: center; }
  [id='tooltipForLiveAgent'] .modal-close {
    background-image: url("/tesla_theme/assets/img/icon-close.svg");
    display: block !important; }
  [id='tooltipForLiveAgent'] .ac {
    min-width: 214px;
    padding: 9px 40px;
    background-color: #39f;
    color: #fff;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Gotham Medium";
    border: 0; }
    [id='tooltipForLiveAgent'] .ac:hover {
      cursor: pointer; }

@media (min-width: 0) and (max-width: 639px) {
  .minimizedContainer {
    background-color: #fff !important;
    border: 0;
    border-radius: 30px;
    font-family: "Gotham Book";
    height: 52px !important;
    min-width: 52px !important;
    overflow: hidden;
    padding: 0;
    right: 35px !important;
    width: 52px !important; }
    .minimizedContainer:hover {
      background-color: #fff !important; }
    .minimizedContainer .messageContent {
      -ms-flex-line-pack: center;
          align-content: center;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-item-align: center;
          align-self: center;
      background-image: url('data:image/svg+xml,%0A%3Csvg width="28px" height="24px" viewBox="0 0 28 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="0802" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="03-Mobile-Chat---Connecting" transform="translate(-311.000000, -669.000000)" fill="%23222222"%3E%3Cg id="Group-21" transform="translate(295.000000, 649.000000)"%3E%3Cg id="Group-2" transform="translate(16.000000, 20.000000)"%3E%3Cpath d="M26.4948617,16.7487863 C26.4948617,17.5449311 25.869304,18.1926471 25.1003953,18.1926471 L18.0672645,18.1926471 L17.4896765,18.1926471 L17.0813768,18.6154096 L13.944664,21.8632303 L10.8082302,18.6154096 L10.3999304,18.1926471 L9.82234245,18.1926471 L2.78893281,18.1926471 C2.02002403,18.1926471 1.3944664,17.5449311 1.3944664,16.7487863 L1.3944664,2.88772177 C1.3944664,2.09157688 2.02002403,1.44386088 2.78893281,1.44386088 L25.1003953,1.44386088 C25.869304,1.44386088 26.4948617,2.09157688 26.4948617,2.88772177 L26.4948617,16.7487863 Z M25.1003953,0 L2.78893281,0 C1.24888411,0 0,1.29283304 0,2.88772177 L0,16.7487863 C0,18.3433862 1.24888411,19.636508 2.78893281,19.636508 L9.82234245,19.636508 L13.944664,23.9051383 L18.0672645,19.636508 L25.1003953,19.636508 C26.6407228,19.636508 27.8893281,18.3433862 27.8893281,16.7487863 L27.8893281,2.88772177 C27.8893281,1.29283304 26.6407228,0 25.1003953,0 Z" id="Fill-3"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
      background-repeat: no-repeat;
      background-size: 100% !important;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      height: 28px;
      margin: 2px; }
      .minimizedContainer .messageContent .minimizedText {
        -ms-flex-line-pack: center;
            align-content: center;
        -ms-flex-align: center;
            align-items: center;
        display: none;
        height: 100%;
        -ms-flex-pack: center;
            justify-content: center;
        text-align: center;
        width: 100%; }
    .minimizedContainer .loadingBallContainer {
      display: none; } }

@media (min-width: 640px) {
  .minimizedContainer {
    background: #f7f7f7 !important;
    background-image: url("/tesla_theme/assets/img/minimize_icon.png");
    border-color: #e5e5e5;
    max-width: 320px !important;
    width: 320px !important; }
    .minimizedContainer::after {
      background-image: url("/tesla_theme/assets/img/minimize_icon.png");
      background-repeat: no-repeat;
      background-size: 14px;
      content: '';
      display: block;
      max-width: 20px !important;
      left: 200px;
      position: relative;
      top: -32px;
      transform: rotate(-180deg) scaleX(-1);
      width: 20px !important; } }

@media (min-width: 640px) {
  .minimizedContainer:hover {
    background: #fff !important;
    cursor: pointer; } }

.minimizedContainer .message {
  color: #000; }
  @media (min-width: 0) and (max-width: 639px) {
    .minimizedContainer .message {
      color: #fff;
      font-size: 10px;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      height: 100%;
      width: 100%; } }

.minimizedContainer .messageContent {
  -ms-flex-pack: left !important;
      justify-content: left !important; }