/*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_chat {
  background-color: #fff;
  font-family: "Gotham Book" !important;
  overflow: visible;
  z-index: 200 !important;
  cursor: pointer !important; }

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

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

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

.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" !important; }

@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;
    position: fixed !important;
    overflow-y: scroll !important;
    overflow: visible !important;
    max-width: 100vw !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 .headerButton:focus::after {
  border: 0 !important; }

.embeddedServiceSidebarHeader .headerTextContent {
  padding-bottom: 10px; }

.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; }

.embeddedServiceSidebarButton:focus {
  text-decoration: none; }

.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: 10px; }
  .embeddedServiceHelpButton .helpButton .uiButton {
    background-color: #000;
    font-family: "Gotham";
    min-width: 4em;
    font-size: .70em;
    padding: 0;
    border-radius: 30px;
    overflow: hidden; }
    .embeddedServiceHelpButton .helpButton .uiButton .helpButtonLabel {
      display: none; }
  .embeddedServiceHelpButton .helpButton:focus {
    outline: 1px solid #3e6ae1;
    overflow: hidden; }

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

.helpButtonEnabled .uiButton {
  overflow: hidden; }

.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" !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" !important; }
  div .forceChatWindowSpanStyling h2 {
    padding-right: 60% !important;
    font-size: 17px !important;
    font-family: "Gotham" !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";
  color: #000; }

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