@charset "UTF-8";
/* Font Families */
/**********************
FONT-FAMILIES
**********************/
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/* Bootstrap Styles*/
/*// Core variables and mixins*/
/* Variables*/
/**/
/* Copy settings from this file into the provided `_custom.scss` to override*/
/* the Bootstrap defaults without modifying key, versioned files.*/
/* Table of Contents*/
/**/
/* Colors*/
/* Options*/
/* Spacing*/
/* Body*/
/* Links*/
/* Grid breakpoints*/
/* Grid containers*/
/* Grid columns*/
/* Fonts*/
/* Components*/
/* General variable structure*/
/**/
/* Variable format should follow the `$component-modifier-state-property` order.*/
/* Colors*/
/**/
/* Grayscale and brand colors for use across Bootstrap.*/
/* Options*/
/**/
/* Quickly modify global styling by enabling or disabling optional features.*/
/* Spacing*/
/**/
/* Control the default styling of most Bootstrap elements by modifying these*/
/* variables. Mostly focused on spacing.*/
/* You can add more entries to the $spacers map, should you need more variation.*/
/* Body*/
/**/
/* Settings for the `` element.*/
/* Links*/
/**/
/* Style anchor elements.*/
/* Grid breakpoints*/
/**/
/* Define the minimum dimensions at which your layout will change,*/
/* adapting to different screen sizes, for use in media queries.*/
/* Do nothing*/
/* Grid containers*/
/**/
/* Define the maximum width of `.container` for different screen sizes.*/
/* Do nothing*/
/* Grid columns*/
/**/
/* Set the number of columns and specify the width of the gutters.*/
/* Typography*/
/**/
/* Font, line-height, and color for body text, headings, and more.*/
/* Pixel value used to responsively scale all typography. Applied to the `` element.*/
/* Components*/
/**/
/* Define common padding and border radius sizes and more.*/
/* Tables*/
/**/
/* Customizes the `.table` component with basic values, each used across all table variations.*/
/* Buttons*/
/**/
/* For each of Bootstrap's buttons, define text, background and border color.*/
/* Allows for customizing button radius independently from global border radius*/
/* Forms*/
/* For form controls and buttons*/
/* Extra padding to account for the presence of the background-image based indicator*/
/* In pixels because image dimensions*/
/* Form validation icons*/
/* Dropdowns*/
/**/
/* Dropdown menu container and contents.*/
/* Z-index master list*/
/**/
/* Warning: Avoid customizing these values. They're used for a bird's eye view*/
/* of components dependent on the z-axis and are designed to all work together.*/
/* Navbar*/
/* Navs*/
/* Pagination*/
/* Jumbotron*/
/* Form states and alerts*/
/**/
/* Define colors for form feedback states and, by default, alerts.*/
/* Cards*/
/* Tooltips*/
/* Popovers*/
/* Tags*/
/* Use a higher than normal value to ensure completely rounded edges when*/
/* customizing padding or font-size on labels.*/
/* Modals*/
/* Padding applied to the modal body*/
/* Alerts*/
/**/
/* Define alert colors, border radius, and padding.*/
/* Progress bars*/
/* List group*/
/* Image thumbnails*/
/* Figures*/
/* Breadcrumbs*/
/* Media objects*/
/* Carousel*/
/* Close*/
/* Code*/
/*// Reset and dependencies*/
/**/
/* 1. Change the default font family in all browsers (opinionated).*/
/* 2. Correct the line height in all browsers.*/
/* 3. Prevent adjustments of font size after orientation changes in IE and iOS.*/
/**/
html {
font-family: sans-serif;
/* 1*/
line-height: 1.15;
/* 2*/
-ms-text-size-adjust: 100%;
/* 3*/
-webkit-text-size-adjust: 100%;
/* 3*/ }
/**/
/* Remove the margin in all browsers (opinionated).*/
/**/
body {
margin: 0; }
/* HTML5 display definitions*/
/* ==========================================================================*/
/**/
/* Add the correct display in IE 9-.*/
/* 1. Add the correct display in Edge, IE, and Firefox.*/
/* 2. Add the correct display in IE.*/
/**/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
/* 1*/
display: block; }
/**/
/* Add the correct display in IE 9-.*/
/**/
audio,
canvas,
progress,
video {
display: inline-block; }
/**/
/* Add the correct display in iOS 4-7.*/
/**/
audio:not([controls]) {
display: none;
height: 0; }
/**/
/* Add the correct vertical alignment in Chrome, Firefox, and Opera.*/
/**/
progress {
vertical-align: baseline; }
/**/
/* Add the correct display in IE 10-.*/
/* 1. Add the correct display in IE.*/
/**/
template,
[hidden] {
display: none; }
/* Links*/
/* ==========================================================================*/
/**/
/* 1. Remove the gray background on active links in IE 10.*/
/* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.*/
/**/
a {
background-color: transparent;
/* 1*/
-webkit-text-decoration-skip: objects;
/* 2*/ }
/**/
/* Remove the outline on focused links when they are also active or hovered*/
/* in all browsers (opinionated).*/
/**/
a:active,
a:hover {
outline-width: 0; }
/* Text-level semantics*/
/* ==========================================================================*/
/**/
/* 1. Remove the bottom border in Firefox 39-.*/
/* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/
/**/
abbr[title] {
border-bottom: none;
/* 1*/
text-decoration: underline;
/* 2*/
text-decoration: underline dotted;
/* 2*/ }
/**/
/* Prevent the duplicate application of `bolder` by the next rule in Safari 6.*/
/**/
b,
strong {
font-weight: inherit; }
/**/
/* Add the correct font weight in Chrome, Edge, and Safari.*/
/**/
b,
strong {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bolder; }
/**/
/* Add the correct font style in Android 4.3-.*/
/**/
dfn {
font-style: italic; }
/**/
/* Correct the font size and margin on `h1` elements within `section` and*/
/* `article` contexts in Chrome, Firefox, and Safari.*/
/**/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/**/
/* Add the correct background and color in IE 9-.*/
/**/
mark {
background-color: #ff0;
color: #000; }
/**/
/* Add the correct font size in all browsers.*/
/**/
small {
font-size: 80%; }
/**/
/* Prevent `sub` and `sup` elements from affecting the line height in*/
/* all browsers.*/
/**/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content*/
/* ==========================================================================*/
/**/
/* Remove the border on images inside links in IE 10-.*/
/**/
img {
border-style: none; }
/**/
/* Hide the overflow in IE.*/
/**/
svg:not(:root) {
overflow: hidden; }
/* Grouping content*/
/* ==========================================================================*/
/**/
/* 1. Correct the inheritance and scaling of font size in all browsers.*/
/* 2. Correct the odd `em` font sizing in all browsers.*/
/**/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
/* 1*/
font-size: 1em;
/* 2*/ }
/**/
/* Add the correct margin in IE 8.*/
/**/
figure {
margin: 1em 40px; }
/**/
/* 1. Add the correct box sizing in Firefox.*/
/* 2. Show the overflow in Edge and IE.*/
/**/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1*/
height: 0;
/* 1*/
overflow: visible;
/* 2*/ }
/* Forms*/
/* ==========================================================================*/
/**/
/* 1. Change font properties to `inherit` in all browsers (opinionated).*/
/* 2. Remove the margin in Firefox and Safari.*/
/**/
button,
input,
optgroup,
select,
textarea {
font: inherit;
/* 1*/
margin: 0;
/* 2*/ }
/**/
/* Restore the font weight unset by the previous rule.*/
/**/
optgroup {
font-weight: bold; }
/**/
/* Show the overflow in IE.*/
/* 1. Show the overflow in Edge.*/
/**/
button,
input {
/* 1*/
overflow: visible; }
/**/
/* Remove the inheritance of text transform in Edge, Firefox, and IE.*/
/* 1. Remove the inheritance of text transform in Firefox.*/
/**/
button,
select {
/* 1*/
text-transform: none; }
/**/
/* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`*/
/* controls in Android 4.*/
/* 2. Correct the inability to style clickable types in iOS and Safari.*/
/**/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2*/ }
/**/
/* Remove the inner border and padding in Firefox.*/
/**/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**/
/* Restore the focus styles unset by the previous rule.*/
/**/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**/
/* Change the border, margin, and padding in all browsers (opinionated).*/
/**/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**/
/* 1. Correct the text wrapping in Edge and IE.*/
/* 2. Correct the color inheritance from `fieldset` elements in IE.*/
/* 3. Remove the padding so developers are not caught out when they zero out*/
/* `fieldset` elements in all browsers.*/
/**/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1*/
color: inherit;
/* 2*/
display: table;
/* 1*/
max-width: 100%;
/* 1*/
padding: 0;
/* 3*/
white-space: normal;
/* 1*/ }
/**/
/* Remove the default vertical scrollbar in IE.*/
/**/
textarea {
overflow: auto; }
/**/
/* 1. Add the correct box sizing in IE 10-.*/
/* 2. Remove the padding in IE 10-.*/
/**/
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1*/
padding: 0;
/* 2*/ }
/**/
/* Correct the cursor style of increment and decrement buttons in Chrome.*/
/**/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**/
/* 1. Correct the odd appearance in Chrome and Safari.*/
/* 2. Correct the outline style in Safari.*/
/**/
[type="search"] {
-webkit-appearance: textfield;
/* 1*/
outline-offset: -2px;
/* 2*/ }
/**/
/* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.*/
/**/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**/
/* Correct the text style of placeholders in Chrome, Edge, and Safari.*/
/**/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54; }
/**/
/* 1. Correct the inability to style clickable types in iOS and Safari.*/
/* 2. Change font properties to `inherit` in Safari.*/
/**/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1*/
font: inherit;
/* 2*/ }
/*// Core CSS*/
/* scss-lint:disable QualifyingElement, DuplicateProperty*/
/* Reboot*/
/**/
/* Global resets to common HTML elements and more for easier usage by Bootstrap.*/
/* Adds additional rules on top of Normalize.css, including several overrides.*/
/* Reset the box-sizing*/
/**/
/* Change from `box-sizing: content-box` to `border-box` so that when you add*/
/* `padding` or `border`s to an element, the overall declared `width` does not*/
/* change. For example, `width: 100px;` will always be `100px` despite the*/
/* `border: 10px solid red;` and `padding: 20px;`.*/
/**/
/* Heads up! This reset may cause conflicts with some third-party widgets. For*/
/* recommendations on resolving such conflicts, see*/
/* https://getbootstrap.com/getting-started/#third-box-sizing.*/
/**/
/* Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
html {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit; }
/* Make viewport responsive*/
/**/
/* @viewport is needed because IE 10+ doesn't honor `-`` all receive top and bottom margins. We nuke the top*/
/* margin for easier control within type scales as it avoids margin collapsing.*/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem; }
/* Reset margins on paragraphs*/
/**/
/* Similarly, the top margin on ` `s get reset. However, we also reset the*/
/* bottom margin to use `rem` units instead of `em`.*/
p {
margin-top: 0;
margin-bottom: 1rem; }
/* Abbreviations and acronyms*/
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #c1c1c1; }
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit; }
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem; }
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0; }
dt {
font-weight: bold; }
dd {
margin-bottom: .5rem;
margin-left: 0;
/* Undo browser default*/ }
blockquote {
margin: 0 0 1rem; }
/**/
/* Links*/
/**/
a {
color: #1971D4;
text-decoration: none;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
a:focus, a:hover {
color: #2F5D9D;
text-decoration: none; }
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
/* And undo these styles for placeholder links/named anchors (without href)*/
/* which have not been made explicitly keyboard-focusable (without tabindex).*/
/* It would be more straightforward to just use a[href] in previous block, but that*/
/* causes specificity issues in many other styles that are too complex to fix.*/
/* See https://github.com/twbs/bootstrap/issues/19402*/
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none; }
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none; }
a:not([href]):not([tabindex]):focus {
outline: none; }
/**/
/* Code*/
/**/
pre {
/* Remove browser default top margin*/
margin-top: 0;
/* Reset browser default of `1em` to use `rem`s*/
margin-bottom: 1rem;
/* Normalize v4 removed this property, causing `
` content to break out of wrapping code snippets*/
overflow: auto; }
/**/
/* Figures*/
/**/
figure {
/* Normalize adds `margin` to `figure`s as browsers apply it inconsistently.*/
/* We reset that to create a better flow in-page.*/
margin: 0 0 1rem; }
/**/
/* Images*/
/**/
img {
/* By default, ` `s built with grids*/
/* scss-lint:disable QualifyingElement*/
dl.row > dd + dt {
clear: left; }
/* scss-lint:enable QualifyingElement*/
.img-fluid {
max-width: 100%;
height: auto; }
.img-thumbnail {
padding: 0.25rem;
background-color: #1D242B;
border: 1px solid #ddd;
border-radius: 0.5rem;
transition: all .2s ease-in-out;
max-width: 100%;
height: auto; }
.figure {
display: inline-block; }
.figure-img {
margin-bottom: 10px;
line-height: 1; }
.figure-caption {
font-size: 90%;
color: #c1c1c1; }
/* Container widths*/
/**/
/* Set the container width, and override it for fixed navbars in media queries.*/
.container {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px; }
.container::after {
content: "";
display: table;
clear: both; }
@media (min-width: 576px) {
.container {
width: 540px;
max-width: 100%; } }
@media (min-width: 768px) {
.container {
width: 720px;
max-width: 100%; } }
@media (min-width: 992px) {
.container {
width: 960px;
max-width: 100%; } }
@media (min-width: 1200px) {
.container {
width: 1140px;
max-width: 100%; } }
/* Fluid container*/
/**/
/* Utilizes the mixin meant for fixed width containers, but without any defined*/
/* width for fluid, full width layouts.*/
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px; }
.container-fluid::after {
content: "";
display: table;
clear: both; }
/* Max Container*/
/**/
/* Container to limit the absolute widest the screen will go.*/
.max-container {
margin: 0 auto;
max-width: 1345px; }
.max-container--sm {
max-width: 750px; }
.max-container--md {
max-width: 1080px; }
/* Row*/
/**/
/* Rows contain and clear the floats of your columns.*/
.row {
margin-right: -10px;
margin-left: -10px; }
.row::after {
content: "";
display: table;
clear: both; }
@media (min-width: 576px) {
.row {
margin-right: -10px;
margin-left: -10px; } }
@media (min-width: 768px) {
.row {
margin-right: -10px;
margin-left: -10px; } }
@media (min-width: 992px) {
.row {
margin-right: -10px;
margin-left: -10px; } }
@media (min-width: 1200px) {
.row {
margin-right: -10px;
margin-left: -10px; } }
.row--small-gutters [class^="col-"],
.row--small-gutters [class*=" col-"] {
padding-right: 5px;
padding-left: 5px; }
/* Columns*/
/**/
/* Common styles for small and large grid columns*/
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px; }
@media (min-width: 576px) {
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
padding-right: 10px;
padding-left: 10px; } }
@media (min-width: 768px) {
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
padding-right: 10px;
padding-left: 10px; } }
@media (min-width: 992px) {
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
padding-right: 10px;
padding-left: 10px; } }
@media (min-width: 1200px) {
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
padding-right: 10px;
padding-left: 10px; } }
.col-xs-1 {
float: left;
width: 8.33333%; }
.col-xs-2 {
float: left;
width: 16.66667%; }
.col-xs-3 {
float: left;
width: 25%; }
.col-xs-4 {
float: left;
width: 33.33333%; }
.col-xs-5 {
float: left;
width: 41.66667%; }
.col-xs-6 {
float: left;
width: 50%; }
.col-xs-7 {
float: left;
width: 58.33333%; }
.col-xs-8 {
float: left;
width: 66.66667%; }
.col-xs-9 {
float: left;
width: 75%; }
.col-xs-10 {
float: left;
width: 83.33333%; }
.col-xs-11 {
float: left;
width: 91.66667%; }
.col-xs-12 {
float: left;
width: 100%; }
.pull-xs-0 {
right: auto; }
.pull-xs-1 {
right: 8.33333%; }
.pull-xs-2 {
right: 16.66667%; }
.pull-xs-3 {
right: 25%; }
.pull-xs-4 {
right: 33.33333%; }
.pull-xs-5 {
right: 41.66667%; }
.pull-xs-6 {
right: 50%; }
.pull-xs-7 {
right: 58.33333%; }
.pull-xs-8 {
right: 66.66667%; }
.pull-xs-9 {
right: 75%; }
.pull-xs-10 {
right: 83.33333%; }
.pull-xs-11 {
right: 91.66667%; }
.pull-xs-12 {
right: 100%; }
.push-xs-0 {
left: auto; }
.push-xs-1 {
left: 8.33333%; }
.push-xs-2 {
left: 16.66667%; }
.push-xs-3 {
left: 25%; }
.push-xs-4 {
left: 33.33333%; }
.push-xs-5 {
left: 41.66667%; }
.push-xs-6 {
left: 50%; }
.push-xs-7 {
left: 58.33333%; }
.push-xs-8 {
left: 66.66667%; }
.push-xs-9 {
left: 75%; }
.push-xs-10 {
left: 83.33333%; }
.push-xs-11 {
left: 91.66667%; }
.push-xs-12 {
left: 100%; }
.offset-xs-1 {
margin-left: 8.33333%; }
.offset-xs-2 {
margin-left: 16.66667%; }
.offset-xs-3 {
margin-left: 25%; }
.offset-xs-4 {
margin-left: 33.33333%; }
.offset-xs-5 {
margin-left: 41.66667%; }
.offset-xs-6 {
margin-left: 50%; }
.offset-xs-7 {
margin-left: 58.33333%; }
.offset-xs-8 {
margin-left: 66.66667%; }
.offset-xs-9 {
margin-left: 75%; }
.offset-xs-10 {
margin-left: 83.33333%; }
.offset-xs-11 {
margin-left: 91.66667%; }
@media (min-width: 576px) {
.col-sm-1 {
float: left;
width: 8.33333%; }
.col-sm-2 {
float: left;
width: 16.66667%; }
.col-sm-3 {
float: left;
width: 25%; }
.col-sm-4 {
float: left;
width: 33.33333%; }
.col-sm-5 {
float: left;
width: 41.66667%; }
.col-sm-6 {
float: left;
width: 50%; }
.col-sm-7 {
float: left;
width: 58.33333%; }
.col-sm-8 {
float: left;
width: 66.66667%; }
.col-sm-9 {
float: left;
width: 75%; }
.col-sm-10 {
float: left;
width: 83.33333%; }
.col-sm-11 {
float: left;
width: 91.66667%; }
.col-sm-12 {
float: left;
width: 100%; }
.pull-sm-0 {
right: auto; }
.pull-sm-1 {
right: 8.33333%; }
.pull-sm-2 {
right: 16.66667%; }
.pull-sm-3 {
right: 25%; }
.pull-sm-4 {
right: 33.33333%; }
.pull-sm-5 {
right: 41.66667%; }
.pull-sm-6 {
right: 50%; }
.pull-sm-7 {
right: 58.33333%; }
.pull-sm-8 {
right: 66.66667%; }
.pull-sm-9 {
right: 75%; }
.pull-sm-10 {
right: 83.33333%; }
.pull-sm-11 {
right: 91.66667%; }
.pull-sm-12 {
right: 100%; }
.push-sm-0 {
left: auto; }
.push-sm-1 {
left: 8.33333%; }
.push-sm-2 {
left: 16.66667%; }
.push-sm-3 {
left: 25%; }
.push-sm-4 {
left: 33.33333%; }
.push-sm-5 {
left: 41.66667%; }
.push-sm-6 {
left: 50%; }
.push-sm-7 {
left: 58.33333%; }
.push-sm-8 {
left: 66.66667%; }
.push-sm-9 {
left: 75%; }
.push-sm-10 {
left: 83.33333%; }
.push-sm-11 {
left: 91.66667%; }
.push-sm-12 {
left: 100%; }
.offset-sm-0 {
margin-left: 0%; }
.offset-sm-1 {
margin-left: 8.33333%; }
.offset-sm-2 {
margin-left: 16.66667%; }
.offset-sm-3 {
margin-left: 25%; }
.offset-sm-4 {
margin-left: 33.33333%; }
.offset-sm-5 {
margin-left: 41.66667%; }
.offset-sm-6 {
margin-left: 50%; }
.offset-sm-7 {
margin-left: 58.33333%; }
.offset-sm-8 {
margin-left: 66.66667%; }
.offset-sm-9 {
margin-left: 75%; }
.offset-sm-10 {
margin-left: 83.33333%; }
.offset-sm-11 {
margin-left: 91.66667%; } }
@media (min-width: 768px) {
.col-md-1 {
float: left;
width: 8.33333%; }
.col-md-2 {
float: left;
width: 16.66667%; }
.col-md-3 {
float: left;
width: 25%; }
.col-md-4 {
float: left;
width: 33.33333%; }
.col-md-5 {
float: left;
width: 41.66667%; }
.col-md-6 {
float: left;
width: 50%; }
.col-md-7 {
float: left;
width: 58.33333%; }
.col-md-8 {
float: left;
width: 66.66667%; }
.col-md-9 {
float: left;
width: 75%; }
.col-md-10 {
float: left;
width: 83.33333%; }
.col-md-11 {
float: left;
width: 91.66667%; }
.col-md-12 {
float: left;
width: 100%; }
.pull-md-0 {
right: auto; }
.pull-md-1 {
right: 8.33333%; }
.pull-md-2 {
right: 16.66667%; }
.pull-md-3 {
right: 25%; }
.pull-md-4 {
right: 33.33333%; }
.pull-md-5 {
right: 41.66667%; }
.pull-md-6 {
right: 50%; }
.pull-md-7 {
right: 58.33333%; }
.pull-md-8 {
right: 66.66667%; }
.pull-md-9 {
right: 75%; }
.pull-md-10 {
right: 83.33333%; }
.pull-md-11 {
right: 91.66667%; }
.pull-md-12 {
right: 100%; }
.push-md-0 {
left: auto; }
.push-md-1 {
left: 8.33333%; }
.push-md-2 {
left: 16.66667%; }
.push-md-3 {
left: 25%; }
.push-md-4 {
left: 33.33333%; }
.push-md-5 {
left: 41.66667%; }
.push-md-6 {
left: 50%; }
.push-md-7 {
left: 58.33333%; }
.push-md-8 {
left: 66.66667%; }
.push-md-9 {
left: 75%; }
.push-md-10 {
left: 83.33333%; }
.push-md-11 {
left: 91.66667%; }
.push-md-12 {
left: 100%; }
.offset-md-0 {
margin-left: 0%; }
.offset-md-1 {
margin-left: 8.33333%; }
.offset-md-2 {
margin-left: 16.66667%; }
.offset-md-3 {
margin-left: 25%; }
.offset-md-4 {
margin-left: 33.33333%; }
.offset-md-5 {
margin-left: 41.66667%; }
.offset-md-6 {
margin-left: 50%; }
.offset-md-7 {
margin-left: 58.33333%; }
.offset-md-8 {
margin-left: 66.66667%; }
.offset-md-9 {
margin-left: 75%; }
.offset-md-10 {
margin-left: 83.33333%; }
.offset-md-11 {
margin-left: 91.66667%; } }
@media (min-width: 992px) {
.col-lg-1 {
float: left;
width: 8.33333%; }
.col-lg-2 {
float: left;
width: 16.66667%; }
.col-lg-3 {
float: left;
width: 25%; }
.col-lg-4 {
float: left;
width: 33.33333%; }
.col-lg-5 {
float: left;
width: 41.66667%; }
.col-lg-6 {
float: left;
width: 50%; }
.col-lg-7 {
float: left;
width: 58.33333%; }
.col-lg-8 {
float: left;
width: 66.66667%; }
.col-lg-9 {
float: left;
width: 75%; }
.col-lg-10 {
float: left;
width: 83.33333%; }
.col-lg-11 {
float: left;
width: 91.66667%; }
.col-lg-12 {
float: left;
width: 100%; }
.pull-lg-0 {
right: auto; }
.pull-lg-1 {
right: 8.33333%; }
.pull-lg-2 {
right: 16.66667%; }
.pull-lg-3 {
right: 25%; }
.pull-lg-4 {
right: 33.33333%; }
.pull-lg-5 {
right: 41.66667%; }
.pull-lg-6 {
right: 50%; }
.pull-lg-7 {
right: 58.33333%; }
.pull-lg-8 {
right: 66.66667%; }
.pull-lg-9 {
right: 75%; }
.pull-lg-10 {
right: 83.33333%; }
.pull-lg-11 {
right: 91.66667%; }
.pull-lg-12 {
right: 100%; }
.push-lg-0 {
left: auto; }
.push-lg-1 {
left: 8.33333%; }
.push-lg-2 {
left: 16.66667%; }
.push-lg-3 {
left: 25%; }
.push-lg-4 {
left: 33.33333%; }
.push-lg-5 {
left: 41.66667%; }
.push-lg-6 {
left: 50%; }
.push-lg-7 {
left: 58.33333%; }
.push-lg-8 {
left: 66.66667%; }
.push-lg-9 {
left: 75%; }
.push-lg-10 {
left: 83.33333%; }
.push-lg-11 {
left: 91.66667%; }
.push-lg-12 {
left: 100%; }
.offset-lg-0 {
margin-left: 0%; }
.offset-lg-1 {
margin-left: 8.33333%; }
.offset-lg-2 {
margin-left: 16.66667%; }
.offset-lg-3 {
margin-left: 25%; }
.offset-lg-4 {
margin-left: 33.33333%; }
.offset-lg-5 {
margin-left: 41.66667%; }
.offset-lg-6 {
margin-left: 50%; }
.offset-lg-7 {
margin-left: 58.33333%; }
.offset-lg-8 {
margin-left: 66.66667%; }
.offset-lg-9 {
margin-left: 75%; }
.offset-lg-10 {
margin-left: 83.33333%; }
.offset-lg-11 {
margin-left: 91.66667%; } }
@media (min-width: 1200px) {
.col-xl-1 {
float: left;
width: 8.33333%; }
.col-xl-2 {
float: left;
width: 16.66667%; }
.col-xl-3 {
float: left;
width: 25%; }
.col-xl-4 {
float: left;
width: 33.33333%; }
.col-xl-5 {
float: left;
width: 41.66667%; }
.col-xl-6 {
float: left;
width: 50%; }
.col-xl-7 {
float: left;
width: 58.33333%; }
.col-xl-8 {
float: left;
width: 66.66667%; }
.col-xl-9 {
float: left;
width: 75%; }
.col-xl-10 {
float: left;
width: 83.33333%; }
.col-xl-11 {
float: left;
width: 91.66667%; }
.col-xl-12 {
float: left;
width: 100%; }
.pull-xl-0 {
right: auto; }
.pull-xl-1 {
right: 8.33333%; }
.pull-xl-2 {
right: 16.66667%; }
.pull-xl-3 {
right: 25%; }
.pull-xl-4 {
right: 33.33333%; }
.pull-xl-5 {
right: 41.66667%; }
.pull-xl-6 {
right: 50%; }
.pull-xl-7 {
right: 58.33333%; }
.pull-xl-8 {
right: 66.66667%; }
.pull-xl-9 {
right: 75%; }
.pull-xl-10 {
right: 83.33333%; }
.pull-xl-11 {
right: 91.66667%; }
.pull-xl-12 {
right: 100%; }
.push-xl-0 {
left: auto; }
.push-xl-1 {
left: 8.33333%; }
.push-xl-2 {
left: 16.66667%; }
.push-xl-3 {
left: 25%; }
.push-xl-4 {
left: 33.33333%; }
.push-xl-5 {
left: 41.66667%; }
.push-xl-6 {
left: 50%; }
.push-xl-7 {
left: 58.33333%; }
.push-xl-8 {
left: 66.66667%; }
.push-xl-9 {
left: 75%; }
.push-xl-10 {
left: 83.33333%; }
.push-xl-11 {
left: 91.66667%; }
.push-xl-12 {
left: 100%; }
.offset-xl-0 {
margin-left: 0%; }
.offset-xl-1 {
margin-left: 8.33333%; }
.offset-xl-2 {
margin-left: 16.66667%; }
.offset-xl-3 {
margin-left: 25%; }
.offset-xl-4 {
margin-left: 33.33333%; }
.offset-xl-5 {
margin-left: 41.66667%; }
.offset-xl-6 {
margin-left: 50%; }
.offset-xl-7 {
margin-left: 58.33333%; }
.offset-xl-8 {
margin-left: 66.66667%; }
.offset-xl-9 {
margin-left: 75%; }
.offset-xl-10 {
margin-left: 83.33333%; }
.offset-xl-11 {
margin-left: 91.66667%; } }
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem; }
.table th,
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #F7F8F9; }
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #F7F8F9; }
.table tbody + tbody {
border-top: 2px solid #F7F8F9; }
.table .table {
background-color: #1D242B; }
.table-sm th,
.table-sm td {
padding: 0.3rem; }
.table-bordered {
border: 1px solid #F7F8F9; }
.table-bordered th,
.table-bordered td {
border: 1px solid #F7F8F9; }
.table-bordered thead th,
.table-bordered thead td {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05); }
.table-hover tbody tr:hover {
background-color: rgba(0, 0, 0, 0.075); }
.table-active,
.table-active > th,
.table-active > td {
background-color: rgba(0, 0, 0, 0.075); }
.table-hover .table-active:hover {
background-color: rgba(0, 0, 0, 0.075); }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
background-color: rgba(0, 0, 0, 0.075); }
.table-success,
.table-success > th,
.table-success > td {
background-color: #dff0d8; }
.table-hover .table-success:hover {
background-color: #d0e9c6; }
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
background-color: #d0e9c6; }
.table-info,
.table-info > th,
.table-info > td {
background-color: #d9edf7; }
.table-hover .table-info:hover {
background-color: #c4e3f3; }
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
background-color: #c4e3f3; }
.table-warning,
.table-warning > th,
.table-warning > td {
background-color: #fcf8e3; }
.table-hover .table-warning:hover {
background-color: #faf2cc; }
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
background-color: #faf2cc; }
.table-danger,
.table-danger > th,
.table-danger > td {
background-color: #f2dede; }
.table-hover .table-danger:hover {
background-color: #ebcccc; }
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
background-color: #ebcccc; }
.thead-inverse th {
color: #fff;
background-color: #1D242B; }
.thead-default th {
color: #606162;
background-color: #F7F8F9; }
.table-inverse {
color: #F7F8F9;
background-color: #1D242B; }
.table-inverse th,
.table-inverse td,
.table-inverse thead th {
border-color: #606162; }
.table-inverse.table-bordered {
border: 0; }
.table-responsive {
display: block;
width: 100%;
min-height: 0%;
overflow-x: auto; }
.table-reflow thead {
float: left; }
.table-reflow tbody {
display: block;
white-space: nowrap; }
.table-reflow th,
.table-reflow td {
border-top: 1px solid #F7F8F9;
border-left: 1px solid #F7F8F9; }
.table-reflow th:last-child,
.table-reflow td:last-child {
border-right: 1px solid #F7F8F9; }
.table-reflow thead:last-child tr:last-child th,
.table-reflow thead:last-child tr:last-child td,
.table-reflow tbody:last-child tr:last-child th,
.table-reflow tbody:last-child tr:last-child td,
.table-reflow tfoot:last-child tr:last-child th,
.table-reflow tfoot:last-child tr:last-child td {
border-bottom: 1px solid #F7F8F9; }
.table-reflow tr {
float: left; }
.table-reflow tr th,
.table-reflow tr td {
display: block !important;
border: 1px solid #F7F8F9; }
/* scss-lint:disable QualifyingElement*/
button {
border-radius: 0; }
/**/
/* Base styles*/
/**/
.btn {
display: inline-block;
width: 250px;
max-width: 100%;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: normal;
line-height: 1.25;
text-align: center;
white-space: nowrap;
vertical-align: middle;
text-transform: capitalize;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 12px 10px;
font-size: 0.85rem;
border-radius: 0.5rem;
transition: all 0.2s ease-in-out;
cursor: pointer; }
@media (max-width: 575px) {
.btn {
display: block;
width: 100%;
white-space: normal !important; }
.btn + .btn {
margin-top: 20px; } }
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.btn:focus, .btn:hover {
text-decoration: none; }
.btn.focus {
text-decoration: none; }
.btn:active, .btn.active {
background-image: none;
outline: 0; }
.btn.disabled, .btn:disabled {
cursor: not-allowed;
opacity: .65; }
/* Future-proof disabling of clicks on `` elements*/
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none; }
/**/
/* Alternate buttons*/
/**/
.btn-primary {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.btn-primary:hover {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.btn-primary:focus, .btn-primary.focus {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #1971D4;
border-color: #1971D4;
background-image: none; }
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
color: #fff;
background-color: #104886;
border-color: #0c3462; }
.btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary:disabled:focus, .btn-primary:disabled.focus {
background-color: #1971D4;
border-color: #1971D4; }
.btn-primary.disabled:hover, .btn-primary:disabled:hover {
background-color: #1971D4;
border-color: #1971D4; }
.btn-secondary {
color: #1971D4;
background-color: transparent;
border-color: #1971D4; }
.btn-secondary:hover {
color: #1971D4;
background-color: transparent;
border-color: transparent; }
.btn-secondary:focus, .btn-secondary.focus {
color: #1971D4;
background-color: transparent;
border-color: transparent; }
.btn-secondary:active, .btn-secondary.active, .open > .btn-secondary.dropdown-toggle {
color: #1971D4;
background-color: transparent;
border-color: transparent;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus, .open > .btn-secondary.dropdown-toggle:hover, .open > .btn-secondary.dropdown-toggle:focus, .open > .btn-secondary.dropdown-toggle.focus {
color: #1971D4;
background-color: transparent;
border-color: #0c3462; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: transparent;
border-color: #1971D4; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: transparent;
border-color: #1971D4; }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
border: 1px solid #1971D4; }
.btn-secondary-dark {
color: #fff;
background-color: #000000;
border-color: #000000; }
.btn-secondary-dark:hover {
color: #fff;
background-color: #333333;
border-color: #333333; }
.btn-secondary-dark:focus, .btn-secondary-dark.focus {
color: #fff;
background-color: #333333;
border-color: #333333; }
.btn-secondary-dark:active, .btn-secondary-dark.active, .open > .btn-secondary-dark.dropdown-toggle {
color: #fff;
background-color: #333333;
border-color: #333333;
background-image: none; }
.btn-secondary-dark:active:hover, .btn-secondary-dark:active:focus, .btn-secondary-dark:active.focus, .btn-secondary-dark.active:hover, .btn-secondary-dark.active:focus, .btn-secondary-dark.active.focus, .open > .btn-secondary-dark.dropdown-toggle:hover, .open > .btn-secondary-dark.dropdown-toggle:focus, .open > .btn-secondary-dark.dropdown-toggle.focus {
color: #fff;
background-color: black;
border-color: black; }
.btn-secondary-dark.disabled:focus, .btn-secondary-dark.disabled.focus, .btn-secondary-dark:disabled:focus, .btn-secondary-dark:disabled.focus {
background-color: #000000;
border-color: #000000; }
.btn-secondary-dark.disabled:hover, .btn-secondary-dark:disabled:hover {
background-color: #000000;
border-color: #000000; }
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-info:hover {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-info:focus, .btn-info.focus {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de;
background-image: none; }
.btn-info:active:hover, .btn-info:active:focus, .btn-info:active.focus, .btn-info.active:hover, .btn-info.active:focus, .btn-info.active.focus, .open > .btn-info.dropdown-toggle:hover, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle.focus {
color: #fff;
background-color: #269abc;
border-color: #1f7e9a; }
.btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info:disabled:focus, .btn-info:disabled.focus {
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-info.disabled:hover, .btn-info:disabled:hover {
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-success {
color: #fff;
background-color: #28945b;
border-color: #28945b; }
.btn-success:hover {
color: #fff;
background-color: #28945b;
border-color: #28945b; }
.btn-success:focus, .btn-success.focus {
color: #fff;
background-color: #28945b;
border-color: #28945b; }
.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
color: #fff;
background-color: #28945b;
border-color: #28945b;
background-image: none; }
.btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus, .open > .btn-success.dropdown-toggle:hover, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle.focus {
color: #fff;
background-color: #165031;
border-color: #0d301d; }
.btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus {
background-color: #28945b;
border-color: #28945b; }
.btn-success.disabled:hover, .btn-success:disabled:hover {
background-color: #28945b;
border-color: #28945b; }
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-warning:hover {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-warning:focus, .btn-warning.focus {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e;
background-image: none; }
.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:active.focus, .btn-warning.active:hover, .btn-warning.active:focus, .btn-warning.active.focus, .open > .btn-warning.dropdown-toggle:hover, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle.focus {
color: #fff;
background-color: #d58512;
border-color: #b06d0f; }
.btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning:disabled:focus, .btn-warning:disabled.focus {
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-warning.disabled:hover, .btn-warning:disabled:hover {
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d9534f; }
.btn-danger:hover {
color: #fff;
background-color: #d9534f;
border-color: #d9534f; }
.btn-danger:focus, .btn-danger.focus {
color: #fff;
background-color: #d9534f;
border-color: #d9534f; }
.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
background-image: none; }
.btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:active.focus, .btn-danger.active:hover, .btn-danger.active:focus, .btn-danger.active.focus, .open > .btn-danger.dropdown-toggle:hover, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle.focus {
color: #fff;
background-color: #ac2925;
border-color: #8b211e; }
.btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger:disabled:focus, .btn-danger:disabled.focus {
background-color: #d9534f;
border-color: #d9534f; }
.btn-danger.disabled:hover, .btn-danger:disabled:hover {
background-color: #d9534f;
border-color: #d9534f; }
.btn-inactive {
color: #fff;
background-color: #c1c1c1;
border-color: #c1c1c1; }
.btn-inactive:hover {
color: #fff;
background-color: #c1c1c1;
border-color: #c1c1c1; }
.btn-inactive:focus, .btn-inactive.focus {
color: #fff;
background-color: #c1c1c1;
border-color: #c1c1c1; }
.btn-inactive:active, .btn-inactive.active, .open > .btn-inactive.dropdown-toggle {
color: #fff;
background-color: #c1c1c1;
border-color: #c1c1c1;
background-image: none; }
.btn-inactive:active:hover, .btn-inactive:active:focus, .btn-inactive:active.focus, .btn-inactive.active:hover, .btn-inactive.active:focus, .btn-inactive.active.focus, .open > .btn-inactive.dropdown-toggle:hover, .open > .btn-inactive.dropdown-toggle:focus, .open > .btn-inactive.dropdown-toggle.focus {
color: #fff;
background-color: #969696;
border-color: #818181; }
.btn-inactive.disabled:focus, .btn-inactive.disabled.focus, .btn-inactive:disabled:focus, .btn-inactive:disabled.focus {
background-color: #c1c1c1;
border-color: #c1c1c1; }
.btn-inactive.disabled:hover, .btn-inactive:disabled:hover {
background-color: #c1c1c1;
border-color: #c1c1c1; }
/* Remove all backgrounds*/
.btn-outline-primary {
color: #1971D4;
background-image: none;
background-color: transparent;
border-color: #1971D4; }
.btn-outline-primary:hover {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.btn-outline-primary:focus, .btn-outline-primary.focus {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.btn-outline-primary:active, .btn-outline-primary.active, .open > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.btn-outline-primary:active:hover, .btn-outline-primary:active:focus, .btn-outline-primary:active.focus, .btn-outline-primary.active:hover, .btn-outline-primary.active:focus, .btn-outline-primary.active.focus, .open > .btn-outline-primary.dropdown-toggle:hover, .open > .btn-outline-primary.dropdown-toggle:focus, .open > .btn-outline-primary.dropdown-toggle.focus {
color: #fff;
background-color: #104886;
border-color: #0c3462; }
.btn-outline-primary.disabled:focus, .btn-outline-primary.disabled.focus, .btn-outline-primary:disabled:focus, .btn-outline-primary:disabled.focus {
border-color: #66a6ed; }
.btn-outline-primary.disabled:hover, .btn-outline-primary:disabled:hover {
border-color: #66a6ed; }
.btn-outline-secondary {
color: #1971D4;
background-image: none;
background-color: transparent;
border-color: #1971D4;
color: #1971D4;
background-image: none;
background-color: transparent;
border-color: #1971D4; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
border-color: #66a6ed; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
border-color: #66a6ed; }
.btn-outline-secondary:hover {
color: #1971D4; }
.btn-outline-white {
color: #ffffff;
background-image: none;
background-color: transparent;
border-color: #ffffff; }
.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active {
color: #ffffff;
background-image: none;
background-color: transparent;
border-color: #ffffff; }
.btn-outline-info {
color: #5bc0de;
background-image: none;
background-color: transparent;
border-color: #5bc0de; }
.btn-outline-info:hover {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-outline-info:focus, .btn-outline-info.focus {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-outline-info:active, .btn-outline-info.active, .open > .btn-outline-info.dropdown-toggle {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de; }
.btn-outline-info:active:hover, .btn-outline-info:active:focus, .btn-outline-info:active.focus, .btn-outline-info.active:hover, .btn-outline-info.active:focus, .btn-outline-info.active.focus, .open > .btn-outline-info.dropdown-toggle:hover, .open > .btn-outline-info.dropdown-toggle:focus, .open > .btn-outline-info.dropdown-toggle.focus {
color: #fff;
background-color: #269abc;
border-color: #1f7e9a; }
.btn-outline-info.disabled:focus, .btn-outline-info.disabled.focus, .btn-outline-info:disabled:focus, .btn-outline-info:disabled.focus {
border-color: #b0e1ef; }
.btn-outline-info.disabled:hover, .btn-outline-info:disabled:hover {
border-color: #b0e1ef; }
.btn-outline-success {
color: #28945b;
background-image: none;
background-color: transparent;
border-color: #28945b; }
.btn-outline-success:hover {
color: #fff;
background-color: #28945b;
border-color: #28945b; }
.btn-outline-success:focus, .btn-outline-success.focus {
color: #fff;
background-color: #28945b;
border-color: #28945b; }
.btn-outline-success:active, .btn-outline-success.active, .open > .btn-outline-success.dropdown-toggle {
color: #fff;
background-color: #28945b;
border-color: #28945b; }
.btn-outline-success:active:hover, .btn-outline-success:active:focus, .btn-outline-success:active.focus, .btn-outline-success.active:hover, .btn-outline-success.active:focus, .btn-outline-success.active.focus, .open > .btn-outline-success.dropdown-toggle:hover, .open > .btn-outline-success.dropdown-toggle:focus, .open > .btn-outline-success.dropdown-toggle.focus {
color: #fff;
background-color: #165031;
border-color: #0d301d; }
.btn-outline-success.disabled:focus, .btn-outline-success.disabled.focus, .btn-outline-success:disabled:focus, .btn-outline-success:disabled.focus {
border-color: #52d08d; }
.btn-outline-success.disabled:hover, .btn-outline-success:disabled:hover {
border-color: #52d08d; }
.btn-outline-warning {
color: #f0ad4e;
background-image: none;
background-color: transparent;
border-color: #f0ad4e; }
.btn-outline-warning:hover {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-outline-warning:focus, .btn-outline-warning.focus {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-outline-warning:active, .btn-outline-warning.active, .open > .btn-outline-warning.dropdown-toggle {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.btn-outline-warning:active:hover, .btn-outline-warning:active:focus, .btn-outline-warning:active.focus, .btn-outline-warning.active:hover, .btn-outline-warning.active:focus, .btn-outline-warning.active.focus, .open > .btn-outline-warning.dropdown-toggle:hover, .open > .btn-outline-warning.dropdown-toggle:focus, .open > .btn-outline-warning.dropdown-toggle.focus {
color: #fff;
background-color: #d58512;
border-color: #b06d0f; }
.btn-outline-warning.disabled:focus, .btn-outline-warning.disabled.focus, .btn-outline-warning:disabled:focus, .btn-outline-warning:disabled.focus {
border-color: #f8d9ac; }
.btn-outline-warning.disabled:hover, .btn-outline-warning:disabled:hover {
border-color: #f8d9ac; }
.btn-outline-danger {
color: #d9534f;
background-image: none;
background-color: transparent;
border-color: #d9534f; }
.btn-outline-danger:hover {
color: #fff;
background-color: #d9534f;
border-color: #d9534f; }
.btn-outline-danger:focus, .btn-outline-danger.focus {
color: #fff;
background-color: #d9534f;
border-color: #d9534f; }
.btn-outline-danger:active, .btn-outline-danger.active, .open > .btn-outline-danger.dropdown-toggle {
color: #fff;
background-color: #d9534f;
border-color: #d9534f; }
.btn-outline-danger:active:hover, .btn-outline-danger:active:focus, .btn-outline-danger:active.focus, .btn-outline-danger.active:hover, .btn-outline-danger.active:focus, .btn-outline-danger.active.focus, .open > .btn-outline-danger.dropdown-toggle:hover, .open > .btn-outline-danger.dropdown-toggle:focus, .open > .btn-outline-danger.dropdown-toggle.focus {
color: #fff;
background-color: #ac2925;
border-color: #8b211e; }
.btn-outline-danger.disabled:focus, .btn-outline-danger.disabled.focus, .btn-outline-danger:disabled:focus, .btn-outline-danger:disabled.focus {
border-color: #eba5a3; }
.btn-outline-danger.disabled:hover, .btn-outline-danger:disabled:hover {
border-color: #eba5a3; }
/**/
/* Link buttons*/
/**/
/* Make a button look and behave like a link*/
.btn-link {
font-weight: normal;
color: #1971D4;
border-radius: 0; }
.btn-link, .btn-link:active, .btn-link.active, .btn-link:disabled {
background-color: transparent; }
.btn-link, .btn-link:focus, .btn-link:active {
border-color: transparent; }
.btn-link:hover {
border-color: transparent; }
.btn-link:focus, .btn-link:hover {
color: #2F5D9D;
text-decoration: none;
background-color: transparent; }
.btn-link:disabled:focus, .btn-link:disabled:hover {
color: #c1c1c1;
text-decoration: none; }
.btn-link--inline {
padding: 0;
width: auto;
font-size: 0.875rem;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
text-transform: capitalize; }
@media (min-width: 576px) {
.btn-link--inline + .btn-link--inline {
margin-left: 35px; } }
.btn-link--dark {
color: #1D242B; }
.btn-link--dark:hover, .btn-link--dark:focus {
color: #1D242B; }
.btn-link-white {
color: #1971D4; }
.btn-link--bold {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.btn-link--small {
font-size: 0.688em; }
.btn-link--with-border {
display: inline-block;
padding: 5px 20px;
min-width: 100px;
border: 1px solid #1971D4;
cursor: pointer; }
.btn-link--with-border:hover, .btn-link--with-border:focus {
border: 1px solid #1971D4; }
/**/
/* Button Sizes*/
/**/
.btn-lg, .btn-group-lg > .btn {
/* line-height: ensure even-numbered height of button next to large input*/
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
border-radius: 0.5rem; }
.btn-sm, .btn-group-sm > .btn {
width: 210px;
/* line-height: ensure proper height of button next to small input*/
padding: 14px 10px;
font-size: 0.875rem;
border-radius: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@media (max-width: 575px) {
.btn-sm, .btn-group-sm > .btn {
display: block;
width: 100%;
white-space: normal !important; }
.btn-sm + .btn-sm, .btn-group-sm > .btn + .btn-sm, .btn-group-sm > .btn-sm + .btn, .btn-group-sm > .btn + .btn {
margin-top: 20px; } }
.btn-auto {
width: auto;
padding: 12px 10px;
font-size: 0.85rem;
border-radius: 0.5rem; }
.btn-full {
width: 100%;
padding: 12px 10px;
font-size: 0.85rem;
border-radius: 0.5rem; }
.btn--desktop-margin {
margin: 10px 0; }
/**/
/* Responsive Classes*/
/**/
@media (max-width: 767px) {
.btn--mobile-vertical-spacing {
margin: 20px 0; } }
@media (max-width: 767px) {
.btn--mobile-top-pad {
margin-top: 20px; } }
@media (max-width: 991px) {
.btn--pad-top-margin {
margin-top: 20px; } }
@media (max-width: 575px) {
.btn--pad-top-margin-xs {
margin-top: 20px; } }
@media (max-width: 767px) {
.btn--mobile-top-sm-pad {
margin-top: 10px; } }
@media (min-width: 768px) {
.btn--md-no-margin-bottom {
margin-bottom: 0; } }
@media (max-width: 991px) {
.btn--md-margin-bottom {
margin-bottom: 20px; } }
@media (max-width: 767px) {
.btn--mobile-no-margin-top {
margin-top: 0 !important; } }
.btn--margin-top {
margin-top: 20px; }
.btn--margin-top-subscription {
margin-top: 25px; }
.btn__icon {
margin-top: -5px;
width: 25px; }
.btn__icon--sm {
margin: -2px 0 0 15px;
width: 14px; }
.btn-service-history {
color: #ffffff; }
.btn-danger-outline {
padding: 12px 25px;
color: #d9534f;
border: 1px solid #d9534f;
border-radius: 0.5rem; }
/**/
/* Block button*/
/**/
.btn-block {
display: block;
width: 100%; }
/* Vertically space out multiple block buttons*/
.btn-block + .btn-block {
margin-top: 0.5rem; }
/* Specificity overrides*/
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%; }
/*Target for Landscape*/
@media only screen and (min-width: 569px) and (max-width: 1280px) and (orientation: landscape) {
.btn-edit-emergency {
margin-top: 0; } }
/*Target for iPad*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
.btn-top-ipad {
margin-top: 20px; } }
@media (max-width: 575px) {
.btn__maintanence-schedule--mobile-spacing {
padding: 12px 15px; } }
@media (max-width: 575px) {
.btn__font-size--mobile {
font-size: 0.75rem; } }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.btn__icon--ie {
height: 25px; } }
/* scss-lint:disable QualifyingElement*/
/**/
/* Textual form controls*/
/**/
.form-control, .retailer__find-text-field {
display: block;
width: 100%;
padding: 0.95rem 1.25rem;
font-size: 0.875em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: 300;
line-height: 1.25;
color: #000000;
background-color: #ffffff;
/* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.*/
background-image: none;
background-clip: padding-box;
border: 1px solid #c1c1c1;
/* Note: This has no effect on s in some browsers, due to the limited stylability of ``s in CSS.*/
/* Manually use the if/else instead of the mixin to account for iOS override*/
border-radius: 0.5rem;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
/* Unstyle the caret on ``s in IE10+.*/
/* Customize the `:focus` state to imitate native WebKit styles.*/
/* Placeholder*/
/* Disabled and read-only inputs*/
/**/
/* HTML5 says that controls under a fieldset > legend:first-child won't be*/
/* disabled if the fieldset is disabled. Due to implementation difficulty, we*/
/* don't honor that edge case; we style them as disabled anyway.*/ }
.form-control::-ms-expand, .retailer__find-text-field::-ms-expand {
background-color: transparent;
border: 0; }
.form-control:focus, .retailer__find-text-field:focus {
color: #000000;
background-color: #ffffff;
border-color: #1D242B;
-webkit-box-shadow: inset 0 0 0 1px #1D242B;
box-shadow: inset 0 0 0 1px #1D242B;
outline: none; }
.form-control::-webkit-input-placeholder, .retailer__find-text-field::-webkit-input-placeholder {
color: #c1c1c1;
/* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.*/
opacity: 1; }
.form-control:-ms-input-placeholder, .retailer__find-text-field:-ms-input-placeholder {
color: #c1c1c1;
/* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.*/
opacity: 1; }
.form-control::-ms-input-placeholder, .retailer__find-text-field::-ms-input-placeholder {
color: #c1c1c1;
/* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.*/
opacity: 1; }
.form-control::placeholder, .retailer__find-text-field::placeholder {
color: #c1c1c1;
/* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.*/
opacity: 1; }
.form-control:disabled, .retailer__find-text-field:disabled, .form-control[aria-disabled=true], [aria-disabled=true].retailer__find-text-field {
color: #606162;
background-color: #F7F8F9;
/* iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.*/
opacity: 1;
border-color: #F7F8F9; }
.form-control[readonly], [readonly].retailer__find-text-field, .form-control[readonly]:focus, [readonly].retailer__find-text-field:focus, .form-control:disabled[readonly], .retailer__find-text-field:disabled[readonly] {
padding: 0.95rem 0;
font-family: HelveticaNeueLTW05-75Bold, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #1D242B;
border: none;
border-radius: 0;
background-color: transparent !important;
background-image: none !important;
box-shadow: none; }
.form-control:disabled, .retailer__find-text-field:disabled, .form-control[readonly], [readonly].retailer__find-text-field {
cursor: not-allowed; }
.form-control.error, .error.retailer__find-text-field {
margin-bottom: 5px;
border-color: #d9534f; }
label {
margin-bottom: 2px;
font-size: .75em;
color: #606162; }
label.error {
font-style: italic;
color: #d9534f;
margin-bottom: 0px; }
.label--like-body-copy {
color: #1D242B; }
.label--not-visible {
visibility: hidden; }
select {
-webkit-appearance: none; }
select.form-control:not([size]):not([multiple]), select.retailer__find-text-field:not([size]):not([multiple]) {
padding-right: 50px;
/* height: calc(3.4rem - 2px);*/
/* background: url("data:image/svg+xml;utf8, receives focus*/
/* in IE and (under certain conditions) Edge, as it looks bad and cannot be made to*/
/* match the appearance of the native widget.*/
/* See https://github.com/twbs/bootstrap/issues/19398.*/
color: #000000;
background-color: #ffffff;
background-image: none; }
select.form-control::-ms-expand, select.retailer__find-text-field::-ms-expand {
display: none; }
input[type='number'] {
-moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
.form-control--mask-contents {
-webkit-text-security: disc;
-moz-text-security: disc; }
.form-control--no-margin-bottom {
margin-bottom: 0; }
.form-control--with-bg {
background-repeat: no-repeat;
background-position: right 10px center; }
/*Target for Firefox style*/
@-moz-document url-prefix() {
.form-control option, .retailer__find-text-field option {
-ms-box-sizing: border-box;
box-sizing: border-box; } }
select:-moz-focusring {
color: transparent !important;
text-shadow: 0 0 0 #000; }
.form__required {
display: inline-block;
padding-left: 3px;
color: #606162; }
/* Make file inputs better match text inputs by forcing them to new lines.*/
.form-control-file,
.form-control-range {
display: block; }
/**/
/* Labels*/
/**/
/* For use with horizontal and inline forms, when you need the label text to*/
/* align with the form controls.*/
.col-form-label {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
margin-bottom: 0;
/* Override the `` default*/ }
.col-form-label-lg {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.25rem; }
.col-form-label-sm {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.875rem; }
/**/
/* Legends*/
/**/
/* For use with horizontal and inline forms, when you need the legend text to*/
/* be the same size as regular labels, and to align with the form controls.*/
.col-form-legend {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
margin-bottom: 0;
font-size: 1rem; }
/* Static form control text*/
/**/
/* Apply class to an element to make any string of text align with labels in a*/
/* horizontal form layout.*/
.form-control-static {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
line-height: 1.25;
border: solid transparent;
border-width: 1px 0; }
.form-control-static.form-control-sm, .input-group-sm > .form-control-static.form-control, .input-group-sm > .form-control-static.retailer__find-text-field,
.input-group-sm > .form-control-static.input-group-addon,
.input-group-sm > .input-group-btn > .form-control-static.btn, .form-control-static.form-control-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.retailer__find-text-field,
.input-group-lg > .form-control-static.input-group-addon,
.input-group-lg > .input-group-btn > .form-control-static.btn {
padding-right: 0;
padding-left: 0; }
/* Form control sizing*/
/**/
/* Build on `.form-control` with modifier classes to decrease or increase the*/
/* height and font-size of form controls.*/
/**/
/* The `.form-group-* form-control` variations are sadly duplicated to avoid the*/
/* issue documented in https://github.com/twbs/bootstrap/issues/15074.*/
.form-control-sm, .input-group-sm > .form-control, .input-group-sm > .retailer__find-text-field,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.5rem; }
select.form-control-sm:not([size]):not([multiple]), .input-group-sm > select.form-control:not([size]):not([multiple]), .input-group-sm > select.retailer__find-text-field:not([size]):not([multiple]),
.input-group-sm > select.input-group-addon:not([size]):not([multiple]),
.input-group-sm > .input-group-btn > select.btn:not([size]):not([multiple]) {
height: 1.8125rem; }
.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .retailer__find-text-field,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
border-radius: 0.5rem; }
select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.form-control:not([size]):not([multiple]), .input-group-lg > select.retailer__find-text-field:not([size]):not([multiple]),
.input-group-lg > select.input-group-addon:not([size]):not([multiple]),
.input-group-lg > .input-group-btn > select.btn:not([size]):not([multiple]) {
height: 3.16667rem; }
/* Form groups*/
/**/
/* Designed to help with the organization and spacing of vertical forms. For*/
/* horizontal forms, use the predefined grid classes.*/
.form-group {
margin-bottom: 32px; }
.form-group em.error {
display: block;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #d9534f; }
.form-group .error {
color: #d9534f; }
.form-group--with-after-icon {
position: relative; }
@media (max-width: 767px) {
.form-group--with-after-icon {
padding-right: 40px; } }
.form-group--roadside-comments {
margin-top: 20px; }
.form-text {
display: block;
margin-top: 0.25rem; }
/* Checkboxes and radios*/
/**/
/* Indent the labels to position radios/checkboxes as hanging controls.*/
.form-check {
display: block;
position: relative;
z-index: 0;
margin-bottom: 0.75rem; }
.form-check:last-child {
margin-bottom: 0; }
.form-check.disabled .form-check-label, .form-check.disabled .form-check-decoy, .form-check.disabled .form-radio-decoy {
color: #606162;
cursor: not-allowed; }
.form-check.disabled .form-check-decoy, .form-check.disabled .form-radio-decoy {
background-color: #c1c1c1;
border: 1px solid #c1c1c1 !important; }
.form-check.disabled .form-check-input--checkbox:checked + .form-check-decoy:before {
background: url("../_img/checkbox-checked-disabled.svg") no-repeat; }
.form-check.disabled .form-check-input--radio:checked + .form-radio-decoy:before {
background-color: #c1c1c1; }
.form-check-right {
min-width: 90px; }
@media (max-width: 991px) {
.form-check-right {
min-width: none; } }
.form-check-right .form-check-label {
position: relative;
z-index: 0;
padding-left: 0px;
padding-right: 30px;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-size: 0.875em;
color: #606162; }
.form-check-right .form-check-decoy {
right: 0px;
left: auto; }
.form-check-bottom {
text-align: center; }
.form-check-bottom label {
width: 100%;
text-align: center; }
.form-check-bottom .form-check-decoy--sm {
top: 55%;
left: 20%;
-webkit-transform: translateY(50%) translateX(50%);
transform: translateY(50%) translateX(50%); }
.form-check--subscribe-all {
margin-bottom: 1.75rem; }
.form-check--sm-spacing {
margin-bottom: 0.75rem !important; }
@media (min-width: 768px) {
.form-check--inline-md {
margin-bottom: 0; } }
.form-check--with-border {
margin-bottom: 15px;
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 767px) {
.form-check--with-border {
margin-bottom: 10px;
padding-top: 10px;
border-bottom: 0;
border-top: 1px solid #c1c1c1; } }
.form-check-mph {
padding: 5px 10px 0 10px;
font-size: 1.250em;
font-weight: bold; }
.form-check-label {
padding-left: 40px;
margin-bottom: 0;
/* Override default `` bottom margin*/
font-size: 1.125em;
color: #000000;
cursor: pointer; }
.form-check-label small {
display: block; }
.form-check-label em.error {
display: block;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #d9534f; }
.form-check-label-small {
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-size: 0.750em;
color: #606162; }
.form-check-label--roadside {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.form-check-label--roadside small {
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.form-check-label--sm {
padding-left: 20px; }
.form-check-label--bottom {
padding-left: 0; }
@media (max-width: 991px) {
.form-check-label--bottom {
padding-left: 40px; } }
.form-check-label--boundary {
position: relative;
padding-top: 3px;
font-size: 0.875em;
color: #606162; }
@media (max-width: 991px) {
.form-check-label--boundary {
padding-left: 30px; } }
.form-check-input {
position: absolute;
top: 50%;
margin-left: -1.25rem;
visibility: hidden;
-webkit-transform: translateY(-57%);
transform: translateY(-57%);
/* &:only-child {*/
/* position: static;*/
/* }*/ }
.form-check-decoy {
display: block;
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border-radius: 5px;
border: 1px solid #1971D4;
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
cursor: pointer; }
.form-check-decoy--top {
top: -25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
@media (max-width: 991px) {
.form-check-decoy--top {
top: 0;
left: 0;
-webkit-transform: none;
transform: none; } }
.form-check-input--checkbox:checked + .form-check-decoy:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 20px;
height: 20px;
background: url("../_img/checkbox-check.svg") no-repeat;
background-size: 20px 20px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.form-check-input--partial-checkbox + .form-check-decoy {
background-color: #c1c1c1;
border: 1px solid #c1c1c1 !important; }
.form-check-input--partial-checkbox + .form-check-decoy:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 28px;
height: 28px;
background: url("../_img/partial-checkbox.svg") no-repeat;
background-size: 28px 28px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.form-check-decoy-blue {
width: 20px;
height: 20px; }
.form-check-input--checkbox-blue:checked + .form-check-decoy-blue {
border-width: 0; }
.form-check-input--checkbox-blue:checked + .form-check-decoy-blue:before {
border-radius: 5px;
background: url("../_img/checkbox-checked.svg") no-repeat;
background-size: 25px;
background-position: center center; }
.form-check-decoy--sm {
top: 50%;
width: 16px;
height: 16px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.form-check-input:checked + .form-check-decoy--sm:before {
width: 10px;
height: 10px;
background-size: 10px 10px; }
.forms__check-box-blue {
margin-bottom: 15px; }
.forms__check-box-blue span {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px; }
.forms__check-box-blue label {
line-height: 25px; }
@media (max-width: 767px) {
.form-check-decoy--center {
top: 10px; } }
.form-radio-decoy {
display: block;
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #1971D4;
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
cursor: pointer; }
.form-check-input--radio:checked + .form-radio-decoy:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #1971D4;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.form-check-input--radio:checked + .form-radio-decoy:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
/* Radios and Checkboxes on same line with borders*/
.form__checkbox-row {
margin: 0 -40px;
padding: 0 40px;
background-color: #f3f3f2; }
.form__checkbox-row:first-child .form__checkbox-group {
border-top: none; }
.form__checkbox-row--heading {
background-color: transparent; }
.form__checkbox-row-item {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 150px; }
@media (max-width: 767px) {
.form__checkbox-row-item {
padding-right: 0; } }
.form__checkbox-row-item--without-bg {
padding-right: 80px; }
.form__checkbox-group {
padding: 20px 0;
font-size: 1.125em;
border-top: 1px solid #c1c1c1; }
.form__checkbox-group--first {
margin-top: 20px; }
.form__checkbox-group--last {
margin-bottom: 20px;
border-bottom: 1px solid #c1c1c1; }
.form__checkbox-group--no-top-border {
border-top: none; }
.form__checkbox-group--full-width {
position: relative;
margin: 0 -40px;
padding: 20px 30px;
border-bottom: 1px solid #c1c1c1; }
.form__checkbox-group--no-accordion {
padding: 20px 0; }
.form__checkbox-sub-group {
padding: 10px 0; }
.form__checkbox-group-label {
font-size: 1.125em; }
@media (max-width: 767px) {
.form__checkbox-group-label {
padding-bottom: 10px; } }
.form__checkbox-group-label--small {
padding-left: 40px;
font-size: 1.000em; }
@media (max-width: 767px) {
.form__checkbox-group-label--small {
padding-left: 0; } }
.form__checkbox-group-arrow {
position: absolute;
top: 30px;
right: 25px;
min-height: 30px; }
@media (max-width: 991px) {
.form__checkbox-group-arrow {
right: 0; } }
@media (max-width: 767px) {
.form__checkbox-group-arrow {
right: 25px; } }
.form__checkbox-group-arrow--is-active .accordion__arrow-line {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.form__checkbox-group-arrow--is-active .accordion__arrow-line--right {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
/* Radios and checkboxes on same line*/
.form-check-inline {
position: relative;
display: inline-block;
padding-left: 1.25rem;
margin-bottom: 0;
/* Override default `` bottom margin*/
vertical-align: middle;
cursor: pointer; }
.form-check-inline + .form-check-inline {
margin-left: .75rem; }
.form-check-inline.disabled {
color: #606162;
cursor: not-allowed; }
@media (max-width: 991px) {
.form-check-inline--md {
display: block; } }
/* Form Section Headers*/
.form__section-heading {
margin-bottom: 15px;
padding-left: 20px;
padding-bottom: 5px;
font-size: 1.000em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
border-bottom: 1px solid #606162; }
.form__section-heading-right {
margin-top: 5px;
font-size: 0.750em;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #606162;
float: right; }
/* Form control feedback states*/
/**/
/* Apply contextual and semantic states to individual form controls.*/
.form-control-feedback {
margin-top: 0.25rem; }
.form-control-success,
.form-control-warning,
.form-control-danger {
padding-right: 3.75rem;
background-repeat: no-repeat;
background-position: center right 0.85rem;
background-size: 1.7rem 1.7rem; }
.form-control-wrapper {
position: relative; }
.form-control-icon {
position: absolute;
top: 10px;
right: 5px;
z-index: 10;
width: 25px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.form__beside-input-icon {
position: absolute !important;
top: 32px !important; }
/* Form Hidden Input */
.form__hidden-input {
display: none; }
.form__hidden-input:checked + label {
color: #1971D4;
border: 1px solid #1971D4; }
.form__hidden-input:checked + label:after {
content: '';
display: block;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 3px solid #1971D4;
border-radius: 10px; }
/* Form validation states*/
.has-success .form-control-feedback,
.has-success .form-control-label,
.has-success .form-check-label,
.has-success .form-check-inline,
.has-success .custom-control {
color: #28945b; }
.has-success .form-control, .has-success .retailer__find-text-field {
border-color: #28945b; }
.has-success .form-control:focus, .has-success .retailer__find-text-field:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #52d08d; }
.has-success .input-group-addon {
color: #28945b;
border-color: #28945b;
background-color: #a2e6c2; }
.has-success .form-control-success {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#28945b' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); }
.has-warning .form-control-feedback,
.has-warning .form-control-label,
.has-warning .form-check-label,
.has-warning .form-check-inline,
.has-warning .custom-control {
color: #f0ad4e; }
.has-warning .form-control, .has-warning .retailer__find-text-field {
border-color: #f0ad4e; }
.has-warning .form-control:focus, .has-warning .retailer__find-text-field:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f8d9ac; }
.has-warning .input-group-addon {
color: #f0ad4e;
border-color: #f0ad4e;
background-color: white; }
.has-warning .form-control-warning {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"); }
.has-danger .form-control-feedback,
.has-danger .form-control-label,
.has-danger .form-check-label,
.has-danger .form-check-inline,
.has-danger .custom-control {
color: #d9534f; }
.has-danger .form-control, .has-danger .retailer__find-text-field {
border-color: #d9534f; }
.has-danger .form-control:focus, .has-danger .retailer__find-text-field:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba5a3; }
.has-danger .input-group-addon {
color: #d9534f;
border-color: #d9534f;
background-color: #fdf7f7; }
.has-danger .form-control-danger {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"); }
/* Inline forms*/
/**/
/* Make forms appear inline(-block) by adding the `.form-inline` class. Inline*/
/* forms begin stacked on extra small (mobile) devices and then go inline when*/
/* viewports reach <768px.*/
/**/
/* Requires wrapping inputs and labels with `.form-group` for proper display of*/
/* default HTML form controls and our custom form controls (e.g., input groups).*/
.form-inline {
/* Kick in the inline*/ }
@media (min-width: 576px) {
.form-inline {
/* Inline-block all the things for "inline"*/
/* Allow folks to *not* use `.form-group`*/
/* Make static controls behave like regular ones*/
/* Input groups need that 100% width though*/
/* Remove default margin on radios/checkboxes that were used for stacking, and*/
/* then undo the floating of radios and checkboxes to match.*/
/* Re-override the feedback icon.*/ }
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle; }
.form-inline .form-control, .form-inline .retailer__find-text-field {
display: inline-block;
width: auto;
/* Prevent labels from stacking above inputs in `.form-group`*/
vertical-align: middle; }
.form-inline .form-control-static {
display: inline-block; }
.form-inline .input-group {
display: inline-table;
width: auto;
vertical-align: middle; }
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control,
.form-inline .input-group .retailer__find-text-field {
width: auto; }
.form-inline .input-group > .form-control, .form-inline .input-group > .retailer__find-text-field {
width: 100%; }
.form-inline .form-control-label {
margin-bottom: 0;
vertical-align: middle; }
.form-inline .form-check {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle; }
.form-inline .form-check-label {
padding-left: 0; }
.form-inline .form-check-input {
position: relative;
margin-left: 0; }
.form-inline .has-feedback .form-control-feedback {
top: 0; } }
.form__inline-button {
padding: 0.95rem 1.25rem; }
@media (min-width: 768px) {
.form__inline-button--has-labels {
margin-top: 29px; } }
@media (max-width: 767px) {
.form__inline-button--has-labels-mobile {
margin-top: 29px; } }
@media (min-width: 768px) {
.form__inline-button--starlink {
margin: 30px 0 0 -20px; } }
.form__inline-icon {
width: 25px;
margin: 10px 10px 0; }
.form__inline-tooltip {
width: 25px; }
.form__inline-edit {
padding-top: 40px; }
.form__right-tooltip {
width: 15px;
float: right; }
.form__after-icon {
position: absolute !important;
top: 8px;
left: 100%;
margin-left: -25px; }
@media (min-width: 768px) {
.form__after-icon {
margin-left: 10px; } }
/* Apply icon to date format text field */
.form-control-date {
background-image: url(/asset/_img/calender-icon-text-field.png);
background-position: right;
background-repeat: no-repeat;
background-size: 35px; }
/**
* 1. These buttons should be next to eachothter to toggle between disabled form fields and editable form fields
**/
/* [1] */
.form__right-button {
float: right; }
.form__submit-buttons {
/* [1] */
display: none; }
.form__hidden-fields {
display: none; }
/*IE Specific Style*/
/* Remote services Trips Starts */
.form-control__maps-search {
padding-right: 40px;
height: 45px;
background-image: url(../../asset/_img/search-icon.png);
background-repeat: no-repeat;
background-position: center right; }
@media (max-width: 991px) {
.form-control__maps-search {
margin-top: 12px;
margin-left: 4%;
width: 89%; } }
.form-control__maps-search-cancel {
height: 55px;
background-image: url(../../asset/_img/search-cancel-icon.png);
background-repeat: no-repeat;
background-position: center right; }
.form-control__maps-save-location {
height: 55px; }
@media (max-width: 991px) {
.form-control__maps-save-location {
position: absolute;
bottom: 20px;
width: 95%;
height: auto;
margin-left: 2.5%; } }
/* Remote services Trips Ends*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.form__inline-tooltip {
height: 25px; }
.form__inline-icon {
height: 25px; }
.select-option-large-ie {
background-position: 190px !important; }
.select-option-medium-ie {
background-position: 105px !important; }
.select-option-billInfo-ie {
background-position: 117px !important; }
.select-option-billInfo1-ie {
background-position: 171px !important; } }
/*Text Security*/
.text-security {
-webkit-text-security: disc;
-moz-text-security: disc; }
/* Radio and Checkbox Alignment*/
.form-check-input--radio, .form-check-input--checkbox {
left: 0;
margin-left: .5rem;
z-index: 99;
visibility: inherit;
opacity: 0; }
/* element em error class*/
em.error {
color: #d9534f; }
/*// Components*/
.fade {
opacity: 0;
transition: opacity .15s linear; }
.fade.in {
opacity: 1; }
.collapse {
display: none; }
.collapse.in {
display: block; }
tr.collapse.in {
display: table-row; }
tbody.collapse.in {
display: table-row-group; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: .35s;
transition-property: height; }
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; }
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
margin-bottom: 0; }
.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
z-index: 2; }
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
z-index: 2; }
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px; }
.btn-toolbar {
margin-left: -0.5rem; }
.btn-toolbar::after {
content: "";
display: table;
clear: both; }
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left; }
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 0.5rem; }
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0; }
.btn-group > .btn:first-child {
margin-left: 0; }
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.btn-group > .btn-group {
float: left; }
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; }
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0; }
.btn + .dropdown-toggle-split {
padding-right: 7.5px;
padding-left: 7.5px; }
.btn + .dropdown-toggle-split::after {
margin-left: 0; }
.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
padding-right: 7.5px;
padding-left: 7.5px; }
.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
padding-right: 1.125rem;
padding-left: 1.125rem; }
.btn .caret {
margin-left: 0; }
.btn-lg .caret, .btn-group-lg > .btn .caret {
border-width: 0.3em 0.3em 0;
border-bottom-width: 0; }
.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
border-width: 0 0.3em 0.3em; }
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%; }
.btn-group-vertical > .btn-group::after {
content: "";
display: table;
clear: both; }
.btn-group-vertical > .btn-group > .btn {
float: none; }
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0; }
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0; }
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-top-left-radius: 0; }
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; }
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0; }
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none; }
.input-group {
position: relative;
width: 100%;
display: table;
border-collapse: separate; }
.input-group .form-control, .input-group .retailer__find-text-field {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0; }
.input-group .form-control:focus, .input-group .retailer__find-text-field:focus, .input-group .form-control:active, .input-group .retailer__find-text-field:active, .input-group .form-control:hover, .input-group .retailer__find-text-field:hover {
z-index: 3; }
.input-group-addon,
.input-group-btn,
.input-group .form-control,
.input-group .retailer__find-text-field {
display: table-cell; }
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child),
.input-group .retailer__find-text-field:not(:first-child):not(:last-child) {
border-radius: 0; }
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; }
.input-group-addon {
padding: 0.95rem 1.25rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: normal;
line-height: 1.25;
color: #000000;
text-align: center;
background-color: #F7F8F9;
border: 1px solid #c1c1c1;
border-radius: 0.5rem; }
.input-group-addon.form-control-sm,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .input-group-addon.btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.5rem; }
.input-group-addon.form-control-lg,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn {
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
border-radius: 0.5rem; }
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
margin-top: 0; }
.input-group .form-control:not(:last-child), .input-group .retailer__find-text-field:not(:last-child),
.input-group-addon:not(:last-child),
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group > .btn,
.input-group-btn:not(:last-child) > .dropdown-toggle,
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.input-group-addon:not(:last-child) {
border-right: 0; }
.input-group .form-control:not(:first-child), .input-group .retailer__find-text-field:not(:first-child),
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group > .btn,
.input-group-btn:not(:first-child) > .dropdown-toggle,
.input-group-btn:not(:last-child) > .btn:not(:first-child),
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.form-control + .input-group-addon:not(:first-child), .retailer__find-text-field + .input-group-addon:not(:first-child) {
border-left: 0; }
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap; }
.input-group-btn > .btn {
position: relative; }
.input-group-btn > .btn + .btn {
margin-left: -1px; }
.input-group-btn > .btn:focus, .input-group-btn > .btn:active, .input-group-btn > .btn:hover {
z-index: 3; }
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group {
margin-right: -1px; }
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group {
z-index: 2;
margin-left: -1px; }
.input-group-btn:not(:first-child) > .btn:focus, .input-group-btn:not(:first-child) > .btn:active, .input-group-btn:not(:first-child) > .btn:hover,
.input-group-btn:not(:first-child) > .btn-group:focus,
.input-group-btn:not(:first-child) > .btn-group:active,
.input-group-btn:not(:first-child) > .btn-group:hover {
z-index: 3; }
.custom-control {
position: relative;
display: inline-block;
padding-left: 1.5rem;
cursor: pointer; }
.custom-control + .custom-control {
margin-left: 1rem; }
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0; }
.custom-control-input:checked ~ .custom-control-indicator {
color: #fff;
background-color: #0074d9; }
.custom-control-input:focus ~ .custom-control-indicator {
box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #0074d9; }
.custom-control-input:active ~ .custom-control-indicator {
color: #fff;
background-color: #84c6ff; }
.custom-control-input:disabled ~ .custom-control-indicator {
cursor: not-allowed;
background-color: #eee; }
.custom-control-input:disabled ~ .custom-control-description {
color: #767676;
cursor: not-allowed; }
.custom-control-indicator {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
user-select: none;
background-color: #ddd;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%; }
.custom-checkbox .custom-control-indicator {
border-radius: 0.5rem; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: #0074d9;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#fff' d='M0 2h4'/%3E%3C/svg%3E"); }
.custom-radio .custom-control-indicator {
border-radius: 50%; }
.custom-radio .custom-control-input:checked ~ .custom-control-indicator {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#fff'/%3E%3C/svg%3E"); }
.custom-controls-stacked .custom-control {
float: left;
clear: left; }
.custom-controls-stacked .custom-control + .custom-control {
margin-left: 0; }
.custom-select {
display: inline-block;
max-width: 100%;
height: calc(3.4rem - 2px);
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
padding-right: 0.75rem \9;
color: #000000;
vertical-align: middle;
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
background-image: none \9;
background-size: 8px 10px;
border: 1px solid #c1c1c1;
border-radius: 0.5rem;
-moz-appearance: none;
-webkit-appearance: none; }
.custom-select:focus {
border-color: #51a7e8;
outline: none; }
.custom-select:focus::-ms-value {
color: #000000;
background-color: #ffffff; }
.custom-select:disabled {
color: #c1c1c1;
cursor: not-allowed;
background-color: #F7F8F9; }
.custom-select::-ms-expand {
opacity: 0; }
.custom-select-sm {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 75%; }
.custom-file {
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer; }
.custom-file-input {
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0; }
.custom-file-control {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.5rem;
padding: 0.5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 0.5rem; }
.custom-file-control:lang(en)::after {
content: "Choose file..."; }
.custom-file-control::before {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
z-index: 6;
display: block;
height: 2.5rem;
padding: 0.5rem 1rem;
line-height: 1.5;
color: #555;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 0 0.5rem 0.5rem 0; }
.custom-file-control:lang(en)::before {
content: "Browse"; }
/**/
/* Base styles*/
/**/
.card {
position: relative;
display: block;
margin-bottom: 0.75rem;
background-color: #fff;
border: 1px solid #E7E7E8;
border-radius: 10px; }
@media (max-width: 991px) {
.card {
width: 100%; } }
@media (max-width: 767px) {
.card {
border-radius: 0; } }
@media (max-width: 767px) {
.card--with-border {
border-top: 1px solid #c1c1c1; } }
@media (max-width: 767px) {
.card--with-border-btm {
border-bottom: 1px solid #c1c1c1; } }
.card--gray-background {
background-color: #F7F8F9;
border: none;
border-radius: 0em;
min-height: 250px; }
.card-block {
padding: 20px 36px; }
.card-block::after {
content: "";
display: table;
clear: both; }
@media (max-width: 767px) {
.card-block {
padding: 20px 20px; } }
@media (max-width: 767px) {
.card-block--no-side-pad-sm-down {
padding: 20px 0; } }
.card-block--align-center {
padding-top: 60px;
text-align: center; }
@media (max-width: 991px) {
.card-block--align-center {
padding-top: 0px !important; } }
.card-title {
margin-bottom: 0.75rem;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.card-title--font-size-default {
font-size: 1.25em; }
.card-title--subscription {
display: flex;
align-items: center;
font-weight: lighter; }
.card-subtitle {
margin-top: -0.375rem; }
/* .card-actions {*/
/* padding: $card-spacer-y $card-spacer-x;*/
/* .card-link + .card-link {*/
/* margin-left: $card-spacer-x;*/
/* }*/
/* }*/
.card-link:hover {
text-decoration: none; }
.card-link + .card-link {
margin-left: 36px; }
.card > .list-group:first-child .list-group-item:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px; }
@media (max-width: 767px) {
.card > .list-group:first-child .list-group-item:first-child {
border-radius: 0; } }
.card > .list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; }
@media (max-width: 767px) {
.card > .list-group:last-child .list-group-item:last-child {
border-radius: 0; } }
/**/
/* Optional textual caps*/
/**/
.card-header {
padding: 0.75rem 36px;
margin-bottom: 0;
/* Removes the default margin-bottom of */
background-color: #f5f5f5;
border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.card-header::after {
content: "";
display: table;
clear: both; }
.card-header:first-child {
border-radius: 10px 10px 0 0; }
@media (max-width: 767px) {
.card-header:first-child {
border-radius: 0; } }
.card-footer {
padding: 0.75rem 36px 1.5rem; }
.card-footer::after {
content: "";
display: table;
clear: both; }
.card-footer:last-child {
border-radius: 0 0 10px 10px; }
@media (max-width: 767px) {
.card-footer:last-child {
border-radius: 0; } }
@media (max-width: 767px) {
.card-footer {
padding: 20px 20px; } }
.card-footer-text {
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
font-weight: normal; }
/**/
/* Header navs*/
/**/
.card-header-tabs {
margin-right: -18px;
margin-bottom: -0.75rem;
margin-left: -18px;
border-bottom: 0; }
.card-header-pills {
margin-right: -18px;
margin-left: -18px; }
/**/
/* Background variations*/
/**/
/* .card-primary {*/
/* @include card-variant($brand-primary, $brand-primary);*/
/* }*/
/* .card-success {*/
/* @include card-variant($brand-success, $brand-success);*/
/* }*/
/* .card-info {*/
/* @include card-variant($brand-info, $brand-info);*/
/* }*/
/* .card-warning {*/
/* @include card-variant($brand-warning, $brand-warning);*/
/* }*/
/* .card-danger {*/
/* @include card-variant($brand-danger, $brand-danger);*/
/* }*/
/* Remove all backgrounds*/
/* .card-outline-primary {*/
/* @include card-outline-variant($btn-primary-bg);*/
/* }*/
/* .card-outline-secondary {*/
/* @include card-outline-variant($btn-secondary-border);*/
/* }*/
/* .card-outline-info {*/
/* @include card-outline-variant($btn-info-bg);*/
/* }*/
/* .card-outline-success {*/
/* @include card-outline-variant($btn-success-bg);*/
/* }*/
/* .card-outline-warning {*/
/* @include card-outline-variant($btn-warning-bg);*/
/* }*/
/* .card-outline-danger {*/
/* @include card-outline-variant($btn-danger-bg);*/
/* }*/
/**/
/* Inverse text within a card for use with dark backgrounds*/
/**/
.card-inverse .card-header,
.card-inverse .card-footer {
border-color: rgba(255, 255, 255, 0.2); }
.card-inverse .card-header,
.card-inverse .card-footer,
.card-inverse .card-title,
.card-inverse .card-blockquote {
color: #fff; }
.card-inverse .card-link,
.card-inverse .card-text,
.card-inverse .card-subtitle,
.card-inverse .card-blockquote .blockquote-footer {
color: rgba(255, 255, 255, 0.65); }
.card-inverse .card-link:focus, .card-inverse .card-link:hover {
color: #2F5D9D; }
/**/
/* Blockquote*/
/**/
.card-blockquote {
padding: 0;
margin-bottom: 0;
border-left: 0; }
/* Card image*/
.card-img {
/* margin: -1.325rem;*/
border-radius: 10px; }
@media (max-width: 767px) {
.card-img {
border-radius: 0; } }
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem; }
/* Card image caps*/
.card-img-left {
width: 100%;
border-radius: 10px; }
@media (max-width: 767px) {
.card-img-left {
border-radius: 0; } }
.card-img-top {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
@media (max-width: 767px) {
.card-img-top {
border-radius: 0; } }
.card-img-top--fixed-height {
height: 150px; }
@media (max-width: 991px) {
.card-img-top--fixed-height {
height: auto; } }
.card-img-bottom {
width: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
@media (max-width: 767px) {
.card-img-bottom {
border-radius: 0; } }
/* Card Header Image */
.card__header-image {
display: block;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media (min-width: 768px) {
.card__header-image {
border-top-left-radius: 10px;
border-top-right-radius: 10px; } }
@media (min-width: 992px) {
.card__header-image {
height: 320px; } }
.card__header-image--overlay {
position: relative;
height: 160px; }
@media (min-width: 768px) {
.card__header-image--overlay {
height: 200px; } }
.card__header-image-text {
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 10;
font-size: 1.125em;
text-align: center;
color: #ffffff;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.card__header-image-icon {
margin-bottom: 20px;
height: 60px; }
.card__header-icon__wrapper {
position: absolute;
top: 100px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
margin: auto;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #ffffff; }
@media (max-width: 991px) {
.card__header-icon__wrapper {
position: relative;
top: -45px;
margin: 0px; } }
.card__header-icon {
width: 80px;
height: 80px; }
.card__header-icon-right-corner {
width: 30px;
height: 30px; }
.card__status-icon {
padding-right: 5px;
width: 25px;
height: 25px; }
/* Card Icon */
.card-icon-top {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
padding-top: 20px;
height: 80px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
.card-icon-top-img {
width: 120px; }
.card-icon-top-text {
position: absolute;
top: 60px;
left: 50%; }
.card-text-center {
text-align: center; }
/* Card Button*/
.card__button {
margin-bottom: 0; }
.card__app-buttons {
display: inline-block;
margin-bottom: 10px;
text-align: center; }
.card__app-buttons img {
width: 140px; }
@media (min-width: 768px) and (max-width: 1149px) {
.card__app-buttons + .card__app-buttons {
padding-left: 0; } }
.card__app-buttons--with-margin {
margin-right: 10px; }
@media (min-width: 768px) and (max-width: 1149px) {
.card__app-buttons--with-margin {
margin-right: 0; } }
@media (max-width: 767px) {
.card__button-group {
padding: 0 16.25px; } }
@media (min-width: 768px) {
.card__corner-content {
position: absolute;
top: 15px;
right: 30px;
z-index: 10; } }
/* Card set*/
/**/
/* Heads up! We do some funky style resetting here for margins across our two*/
/* variations (one flex, one table). Individual cards have margin-bottom by*/
/* default, but they're ignored due to table styles. For a consistent design,*/
/* we've done the same to the flex variation.*/
/**/
/* Those changes are noted by `// Margin balancing`.*/
/* @if $enable-flex {*/
@media (min-width: 768px) {
.card-deck {
display: flex;
margin-right: -0.625rem;
margin-left: -0.625rem;
flex-flow: row wrap; }
.card-deck .card {
margin-right: 0.625rem;
margin-bottom: 0;
/* Margin balancing*/
margin-left: 0.625rem;
flex: 1; } }
@media (min-width: 768px) {
.card-deck--lg-up .card {
margin-bottom: 20px;
flex: 0 1 auto; } }
@media (min-width: 992px) {
.card-deck--lg-up .card {
margin-bottom: 0;
flex: 1; } }
@media (max-width: 991px) {
.card-deck .card-mobile-full-row {
flex: 1 0 auto; } }
@media (min-width: 768px) {
.card-deck--with-carousel {
display: flex;
margin-right: 0;
margin-left: 0;
flex-flow: row wrap; } }
@media (min-width: 768px) {
.card__col-md-4,
.card__col-md-6 {
display: flex;
margin-bottom: 30px;
align-items: stretch; }
.card__col-md-4 {
width: 33.3333333%; }
.card__col-md-6 {
width: 50%; } }
.card-deck-wrapper {
padding: 0 0.625rem 20px;
background-color: #ffffff; }
@media (min-width: 768px) {
.card-deck-wrapper {
padding-top: 30px;
background-color: transparent; } }
.card-deck-wrapper--last {
padding-bottom: 20px; }
@media (min-width: 768px) {
.card-deck-wrapper--last {
padding-bottom: 30px; } }
@media (min-width: 768px) {
.card-deck-wrapper--no-carousel {
padding-top: 30px;
background-color: transparent; } }
@media (min-width: 992px) {
.card-deck-wrapper--vertical-spacing {
padding: 20px 0; } }
@media (max-width: 767px) {
.card-deck-wrapper--horizontal-spacing {
padding: 0 25px; } }
.card-deck-wrapper--with-padding {
padding: 0 25px; }
@media (min-width: 768px) {
.card-deck-wrapper--with-padding {
padding-top: 30px; } }
@media (min-width: 992px) {
.card-deck-wrapper--with-padding {
padding: 30px 0 0; } }
.card-deck-wrapper--no-padding {
padding-top: 30px;
padding-bottom: 0; }
@media (max-width: 767px) {
.card-deck-wrapper--no-padding {
padding: 0; } }
@media (min-width: 992px) {
.card-deck-wrapper--no-padding {
padding: 0; } }
.card-deck-wrapper--subscription {
/* padding: 30px 0;*/ }
@media (min-width: 992px) {
.card-deck-wrapper--subscription {
padding: 30px 0; } }
.card-deck-row {
margin-bottom: 20px; }
/**
* Embed is here to fix spacing when browser is resized from mobile to desktop
**/
.card-deck.owl-carousel.off {
display: flex;
width: auto;
flex-wrap: wrap; }
.card-deck.owl-carousel.off .owl-controls {
flex: 1; }
/**/
/* Card groups*/
/**/
@media (min-width: 576px) {
.card-group {
display: table;
width: 100%;
table-layout: fixed; }
.card-group .card {
display: table-cell;
vertical-align: top;
/* Handle rounded corners*/ }
.card-group .card + .card {
margin-left: 0;
border-left: 0; }
.card-group .card:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.card-group .card:first-child .card-img-top {
border-top-right-radius: 0; }
.card-group .card:first-child .card-img-bottom {
border-bottom-right-radius: 0; }
.card-group .card:last-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.card-group .card:last-child .card-img-top {
border-top-left-radius: 0; }
.card-group .card:last-child .card-img-bottom {
border-bottom-left-radius: 0; }
.card-group .card:not(:first-child):not(:last-child) {
border-radius: 0; }
.card-group .card:not(:first-child):not(:last-child) .card-img-top,
.card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
border-radius: 0; } }
/**/
/* Card*/
/**/
@media (min-width: 576px) {
.card-columns {
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
column-gap: 1.25rem; }
.card-columns .card {
display: inline-block;
/* Don't let them vertically span multiple columns*/
width: 100%;
/* Don't let them exceed the column width*/ } }
/**/
/* Card Elements*/
/**/
.card__phone-number {
margin-bottom: 20px; }
.card__phone-icon {
max-width: 100%; }
.card__email-container {
position: relative;
background-color: #efefef;
border-radius: 50%;
height: 45px;
width: 45px; }
.card__email-icon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 30px; }
.card__number {
font-size: 1.500em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: 300;
line-height: 1em;
color: #1D242B; }
@media (max-width: 1199px) {
.card__number {
font-size: 1.250em; } }
@media (max-width: 767px) {
.card__number {
color: #1971D4; } }
.card__number-sub-text {
font-size: 0.875em; }
/*My Profile*/
@media (max-width: 991px) {
.card-myprofile-height {
min-height: 450px; } }
/* Maintenance Sechdule */
@media (max-width: 1199px) {
.card--oil-requirement {
flex: inherit !important;
width: 100%;
margin-bottom: 20px !important; } }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
/*.card.flex {
display: flex;
min-height:275px;
}*/
/* Driver Alerts in Home Page
.card-block--driver-alerts {
min-height: 200px;
position: relative;
}*/
/*Download Apps*/
.card-deck-download-ie {
display: flex; }
.card-deck-download-ie::after {
content: "";
display: table;
clear: both; }
.card-deck-download-ie .card-download-ie {
display: block;
position: relative;
float: left;
width: 48.2%;
/*min-height: 625px;*/ }
.card-deck-download-ie .card-download-ie + .card-deck-download-ie .card-download-ie {
float: right; }
.card-deck-download-ie .card-download-ie .card-footer-download-ie {
position: absolute;
bottom: 0; }
/*Hero in the Dashboard*/
.card-deck-hero-ie {
display: flex; }
.card-deck-hero-ie::after {
content: "";
display: table;
clear: both; }
.card-deck-hero-ie .card-hero-ie {
display: block;
position: relative;
float: left;
width: 31.7%;
min-height: 475px; }
.card-deck-hero-ie .card-hero-ie .card-footer-hero-ie {
position: absolute;
bottom: 0;
width: 100%; }
.card-deck-hero-ie .card-hero-ie--small {
min-height: 250px; }
/*24hr Roadside Assistance*/
.card-rsa-ie {
display: block;
min-height: 550px; }
.card-rsa-ie::after {
content: "";
display: table;
clear: both; }
.card-rsa-ie .card {
display: block;
position: relative;
float: left;
width: 30%;
min-height: 475px; }
/*Lifestyle*/
.card-lifestyle-ie {
display: block;
min-height: 665px; }
.card-lifestyle-ie::after {
content: "";
display: table;
clear: both; }
/*Support*/
.card-support-ie {
display: block;
min-height: 650px; }
.card-support-ie::after {
content: "";
display: table;
clear: both; }
.card-support-ie .card {
display: block;
position: relative;
float: left;
width: 30%;
min-height: 475px; }
/*How to Videos*/
.card-how-to-video-ie {
display: block;
/*min-height: 410px;*/ }
.card-how-to-video-ie::after {
content: "";
display: table;
clear: both; }
.card-how-to-video-ie .card-footer-how-to-video-ie {
position: absolute;
bottom: 0; }
/*Starlink Remote Services*/
.card-starlink-ie {
display: block;
min-height: 235px; }
.card-starlink-ie::after {
content: "";
display: table;
clear: both; }
/*Starlink Services*/
.card-starlink-service-ie {
display: block;
min-height: 475px; }
.card-starlink-service-ie::after {
content: "";
display: table;
clear: both; }
.card-starlink-service-ie .card {
display: block;
position: relative;
float: left;
width: 30%;
min-height: 475px; }
/*Maintenance Schedule*/
.card--oil-requirement {
display: block;
/*min-height: 450px;*/ }
.card--oil-requirement::after {
content: "";
display: table;
clear: both; } }
@media all and (-ms-high-contrast: none) and (max-width: 991px), (-ms-high-contrast: active) and (max-width: 991px) {
.card--oil-requirement {
width: 100% !important;
flex: inherit;
margin-bottom: 20px; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/*My Profile*/
.card-myprofile-height--ie {
display: block;
width: 30%;
min-height: 500px; }
.card-myprofile-height--ie::after {
content: "";
display: table;
clear: both; }
.card-myprofile-height--ie .card-block {
position: relative;
top: 0; }
.card-myprofile-height--ie .card-footer {
position: relative;
margin-bottom: 20px;
top: 20px;
bottom: 0;
width: 100%; }
.card__app-buttons img {
height: 50px; } }
.pagination {
display: inline-block;
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 0.5rem; }
.page-item {
display: inline; }
.page-item:first-child .page-link {
margin-left: 0;
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem; }
.page-item:last-child .page-link {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem; }
.page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover {
z-index: 2;
color: #fff;
cursor: default;
background-color: #1971D4;
border-color: #1971D4; }
.page-item.disabled .page-link, .page-item.disabled .page-link:focus, .page-item.disabled .page-link:hover {
color: #c1c1c1;
pointer-events: none;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd; }
.page-link {
position: relative;
float: left;
padding: 0.5rem 0.75rem;
margin-left: -1px;
color: #1971D4;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd; }
.page-link:focus, .page-link:hover {
color: #2F5D9D;
background-color: #F7F8F9;
border-color: #ddd; }
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.25rem; }
.pagination-lg .page-item:first-child .page-link {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem; }
.pagination-lg .page-item:last-child .page-link {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem; }
.pagination-sm .page-link {
padding: 0.275rem 0.75rem;
font-size: 0.875rem; }
.pagination-sm .page-item:first-child .page-link {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem; }
.pagination-sm .page-item:last-child .page-link {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem; }
/**/
/* Base styles*/
/**/
.alert {
padding: 0.75rem 1.25rem;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0.5rem; }
.alert.show {
opacity: 1; }
/* Headings for larger alerts*/
.alert-heading {
/* Specified to prevent conflicts of changing $headings-color*/
color: inherit; }
/* Provide class for links that match alerts*/
.alert-link {
font-weight: bold; }
/* Dismissible alerts*/
/**/
/* Expand the right padding and account for the close button's positioning.*/
.alert-dismissible {
padding-right: 2.5rem;
/* Adjust close link position*/ }
.alert-dismissible .close {
position: relative;
top: -.125rem;
right: -1.25rem;
color: inherit; }
/* Alternate styles*/
/**/
/* Generate contextual modifier classes for colorizing the alert.*/
.alert-success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d; }
.alert-success hr {
border-top-color: #c1e2b3; }
.alert-success .alert-link {
color: #2b542c; }
.alert-info {
background-color: #d9edf7;
border-color: #bcdff1;
color: #31708f; }
.alert-info hr {
border-top-color: #a6d5ec; }
.alert-info .alert-link {
color: #245269; }
.alert-warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b; }
.alert-warning hr {
border-top-color: #f7ecb5; }
.alert-warning .alert-link {
color: #66512c; }
.alert-danger {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442; }
.alert-danger hr {
border-top-color: #e4b9b9; }
.alert-danger .alert-link {
color: #843534; }
.alert__icon {
width: 30px;
max-width: 100%; }
.list-group {
padding-left: 0;
margin-bottom: 0; }
.list-group-item {
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd; }
.list-group-item:first-child {
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem; }
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem; }
.list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover {
color: #c1c1c1;
cursor: not-allowed;
background-color: #F7F8F9; }
.list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading {
color: inherit; }
.list-group-item.disabled .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text {
color: #c1c1c1; }
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
z-index: 2;
color: #fff;
text-decoration: none;
background-color: #1971D4;
border-color: #1971D4; }
.list-group-item.active .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > .small {
color: inherit; }
.list-group-item.active .list-group-item-text, .list-group-item.active:focus .list-group-item-text, .list-group-item.active:hover .list-group-item-text {
color: #c1dbf8; }
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0; }
.list-group-item-action {
width: 100%;
color: #555;
text-align: inherit; }
.list-group-item-action .list-group-item-heading {
color: #333; }
.list-group-item-action:focus, .list-group-item-action:hover {
color: #555;
text-decoration: none;
background-color: #f5f5f5; }
.list-group-item-success {
color: #3c763d;
background-color: #dff0d8; }
a.list-group-item-success,
button.list-group-item-success {
color: #3c763d; }
a.list-group-item-success .list-group-item-heading,
button.list-group-item-success .list-group-item-heading {
color: inherit; }
a.list-group-item-success:focus, a.list-group-item-success:hover,
button.list-group-item-success:focus,
button.list-group-item-success:hover {
color: #3c763d;
background-color: #d0e9c6; }
a.list-group-item-success.active, a.list-group-item-success.active:focus, a.list-group-item-success.active:hover,
button.list-group-item-success.active,
button.list-group-item-success.active:focus,
button.list-group-item-success.active:hover {
color: #fff;
background-color: #3c763d;
border-color: #3c763d; }
.list-group-item-info {
color: #31708f;
background-color: #d9edf7; }
a.list-group-item-info,
button.list-group-item-info {
color: #31708f; }
a.list-group-item-info .list-group-item-heading,
button.list-group-item-info .list-group-item-heading {
color: inherit; }
a.list-group-item-info:focus, a.list-group-item-info:hover,
button.list-group-item-info:focus,
button.list-group-item-info:hover {
color: #31708f;
background-color: #c4e3f3; }
a.list-group-item-info.active, a.list-group-item-info.active:focus, a.list-group-item-info.active:hover,
button.list-group-item-info.active,
button.list-group-item-info.active:focus,
button.list-group-item-info.active:hover {
color: #fff;
background-color: #31708f;
border-color: #31708f; }
.list-group-item-warning {
color: #8a6d3b;
background-color: #fcf8e3; }
a.list-group-item-warning,
button.list-group-item-warning {
color: #8a6d3b; }
a.list-group-item-warning .list-group-item-heading,
button.list-group-item-warning .list-group-item-heading {
color: inherit; }
a.list-group-item-warning:focus, a.list-group-item-warning:hover,
button.list-group-item-warning:focus,
button.list-group-item-warning:hover {
color: #8a6d3b;
background-color: #faf2cc; }
a.list-group-item-warning.active, a.list-group-item-warning.active:focus, a.list-group-item-warning.active:hover,
button.list-group-item-warning.active,
button.list-group-item-warning.active:focus,
button.list-group-item-warning.active:hover {
color: #fff;
background-color: #8a6d3b;
border-color: #8a6d3b; }
.list-group-item-danger {
color: #a94442;
background-color: #f2dede; }
a.list-group-item-danger,
button.list-group-item-danger {
color: #a94442; }
a.list-group-item-danger .list-group-item-heading,
button.list-group-item-danger .list-group-item-heading {
color: inherit; }
a.list-group-item-danger:focus, a.list-group-item-danger:hover,
button.list-group-item-danger:focus,
button.list-group-item-danger:hover {
color: #a94442;
background-color: #ebcccc; }
a.list-group-item-danger.active, a.list-group-item-danger.active:focus, a.list-group-item-danger.active:hover,
button.list-group-item-danger.active,
button.list-group-item-danger.active:focus,
button.list-group-item-danger.active:hover {
color: #fff;
background-color: #a94442;
border-color: #a94442; }
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px; }
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3; }
.close {
float: right;
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .2; }
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .5; }
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none; }
/***************************************
LIST
***************************************/
.list {
display: table;
margin-left: 0;
padding-left: 0;
list-style: none; }
.list li {
display: table-row; }
.list li:before {
content: "\2022";
display: table-cell;
padding-right: 0.4em; }
.list--column-md-4 {
display: block; }
@media (min-width: 768px) {
.list--column-md-4 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; } }
.list--column-md-2 {
display: block; }
@media (min-width: 768px) {
.list--column-md-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; } }
/*// Components w/ JavaScript*/
/* .modal-open - body class for killing the scroll*/
/* .modal - container to scroll within*/
/* .modal-dialog - positioning shell for the actual modal*/
/* .modal-content - actual modal w/ bg and corners and stuff*/
/* Kill the scroll on the body*/
.modal-open {
overflow: hidden; }
@media (max-width: 767px) {
.modal-open {
position: fixed;
width: 100%; } }
/* Container that the modal scrolls within*/
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.3);
display: none;
overflow: hidden;
/* Prevent Chrome on Windows from adding a focus outline. For details, see*/
/* https://github.com/twbs/bootstrap/pull/10951.*/
outline: 0;
/* We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a*/
/* gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342*/
/* See also https://github.com/twbs/bootstrap/issues/17695*/
/* When fading in the modal, animate it to slide down*/ }
.modal.fade .modal-dialog {
transition: opacity .3s ease-out, -webkit-transform .3s ease-out;
transition: transform .3s ease-out, opacity .3s ease-out;
transition: transform .3s ease-out, opacity .3s ease-out, -webkit-transform .3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(-50%, -25%); }
.modal.in .modal-dialog {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 1; }
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }
/* Shell div to position the modal with bottom padding*/
.modal-dialog {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
max-height: 90%;
opacity: 0; }
@media (max-width: 767px) {
.modal-dialog--sm-full-screen {
width: 100%;
height: 100%;
max-height: 100%; }
.modal-dialog--sm-full-screen .modal-content {
display: flex;
flex-direction: column;
height: 100vh; }
.modal-dialog--sm-full-screen .modal-body {
height: auto;
flex: 1;
overflow: auto; } }
/* Actual modal*/
.modal-content {
position: relative;
/*padding: 80px 30px;*/
padding: 0;
background-color: #E7E7E8;
background-clip: padding-box;
/* border: $modal-content-border-width solid $modal-content-border-color;*/
/* @include border-radius($border-radius-lg);*/
/* Remove focus outline from opened modal*/
outline: 0; }
.modal-content--sm {
padding: 40px 30px; }
/* Modal background*/
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
/* Fade for backdrop*/ }
.modal-backdrop.fade {
opacity: 0; }
.modal-backdrop.in {
opacity: 0.5; }
/* Modal header*/
/* Top section of the modal w/ title and dismiss*/
.modal-header {
padding: 20px;
border-bottom: 1px solid #c1c1c1;
background: #fff;
text-align: center; }
.modal-header::after {
content: "";
display: table;
clear: both; }
/* Close icon*/
.modal-header .close {
margin-top: -2px; }
.modal__close {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 16px;
font-size: 1.688em;
font-weight: 300;
line-height: 1;
color: #1971D4;
cursor: pointer;
z-index: 999999; }
.modal__close img {
width: 25px; }
/* Title text within header*/
.modal__title {
margin: 0 0 30px;
line-height: 1em; }
.modal__title--home {
font-weight: normal; }
.modal__sub-title {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
/* Modal body*/
/* Where all modal content resides (sibling of .modal-header and .modal-footer)*/
.modal-body {
position: relative;
padding: 30px;
text-align: center; }
.modal-body--sm {
padding: 30px 120px; }
@media (max-width: 991px) {
.modal-body--sm {
padding: 30px; } }
.modal__body-content {
display: inline-block;
max-width: 740px; }
@media (max-width: 991px) {
.modal__body-content {
width: 100%; } }
.modal__body-content--fill {
display: block;
margin: 0 auto; }
.modal__body-content--steps {
display: block;
margin: 0 auto;
width: 100%;
opacity: 0;
visibility: hidden;
transition: all .6s ease-in-out;
-webkit-transform: translateX(50px);
transform: translateX(50px); }
.modal__body-content--is-active {
opacity: 1;
visibility: visible;
transition: all .4s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0); }
.modal__body-content--all-steps-active {
display: block;
opacity: 1;
visibility: visible;
transition: all .4s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0); }
.modal__body-content--all-steps-active .modal__steps,
.modal__body-content--all-steps-active .modal__step-buttons {
display: none; }
.modal__body-content--home {
font-weight: normal; }
.modal__img {
width: 150px;
max-width: 80%; }
/* Footer (for actions)*/
.modal-footer {
padding: 0;
text-align: right;
/* right align buttons*/
border-top: 1px solid #c1c1c1;
/* clear it in case folks use .pull-* classes on buttons*/ }
.modal-footer::after {
content: "";
display: table;
clear: both; }
/* Measure scrollbar width for padding body during modal show/hide*/
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll; }
.modal__button {
margin: 0;
padding: 15px 20px;
width: 100%;
font-size: 0.813em; }
@media (min-width: 576px) {
.modal__button {
width: 200px; } }
.modal__button + .modal__button {
margin-top: 15px; }
@media (min-width: 576px) {
.modal__button + .modal__button {
margin-top: 0;
margin-left: 10px; } }
@media (min-width: 576px) {
.modal__button--no-width {
width: auto; } }
.modal__button--inline {
width: 100%; }
@media (min-width: 576px) {
.modal__button--inline {
margin-top: 4px;
padding: 14px 20px; } }
.modal__link {
display: inline-block;
margin-bottom: 10px;
width: 100%;
text-align: center;
color: #1971D4; }
.modal__list {
margin-bottom: 30px; }
.modal__list-item--lg + .modal__list-item--lg {
margin-top: 10px; }
.modal__list-item--with-borders + .modal__list-item--with-borders {
padding-top: 10px;
border-top: 1px solid #c1c1c1; }
.modal__steps {
font-size: 1.125em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
/* Disclaimer Content */
.modal__disclaimer {
font-size: 0.875em;
color: #606162; }
/* Scale up the modal*/
@media (min-width: 576px) {
/* Automatically set modal's width for larger viewports*/
.modal-dialog {
max-width: 750px; }
.modal-sm {
max-width: 300px; } }
@media (min-width: 992px) {
.modal-lg {
max-width: 900px; } }
/*Horizontal Color*/
.modal__hr {
margin-top: 40px;
margin-bottom: 40px;
border-top: 1px solid #c1c1c1; }
.modal__indicators {
padding-left: 0;
text-align: center; }
.modal__indicator {
display: inline-block;
width: 8px;
height: 8px;
text-indent: -999px;
background-color: #c1c1c1;
border-radius: 50%; }
.modal__indicator.active {
margin: 0;
background-color: #3A8EEE; }
.modal__slider {
position: relative;
width: 100%;
height: 100%;
min-height: 400px;
overflow: hidden;
transition: min-height .4s ease-in-out; }
@media (min-width: 768px) {
.modal__slider {
min-height: 350px; } }
.modal__slider-item {
position: absolute;
width: 100%; }
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
font-size: 0.875rem;
word-wrap: break-word;
opacity: 0; }
.tooltip.in {
opacity: 0.9; }
.tooltip.tooltip-top, .tooltip.bs-tether-element-attached-bottom {
padding: 5px 0;
margin-top: -3px; }
.tooltip.tooltip-top .tooltip-inner::before, .tooltip.bs-tether-element-attached-bottom .tooltip-inner::before {
bottom: 0;
left: 50%;
margin-left: -5px;
content: "";
border-width: 5px 5px 0;
border-top-color: #000; }
.tooltip.tooltip-right, .tooltip.bs-tether-element-attached-left {
padding: 0 5px;
margin-left: 3px; }
.tooltip.tooltip-right .tooltip-inner::before, .tooltip.bs-tether-element-attached-left .tooltip-inner::before {
top: 50%;
left: 0;
margin-top: -5px;
content: "";
border-width: 5px 5px 5px 0;
border-right-color: #000; }
.tooltip.tooltip-bottom, .tooltip.bs-tether-element-attached-top {
padding: 5px 0;
margin-top: 3px; }
.tooltip.tooltip-bottom .tooltip-inner::before, .tooltip.bs-tether-element-attached-top .tooltip-inner::before {
top: 0;
left: 50%;
margin-left: -5px;
content: "";
border-width: 0 5px 5px;
border-bottom-color: #000; }
.tooltip.tooltip-left, .tooltip.bs-tether-element-attached-right {
padding: 0 5px;
margin-left: -3px; }
.tooltip.tooltip-left .tooltip-inner::before, .tooltip.bs-tether-element-attached-right .tooltip-inner::before {
top: 50%;
right: 0;
margin-top: -5px;
content: "";
border-width: 5px 0 5px 5px;
border-left-color: #000; }
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 0.5rem; }
.tooltip-inner::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid; }
/***************************************
BLADE
***************************************/
/***
* 1. Needs to be the same min-height of the parent blade to make sure we fill vertical space.
***/
.blade {
position: relative;
min-height: 94px;
/* [1] */
color: #000000;
background-color: #1971D4;
overflow-x: hidden; }
.blade + .blade {
border-top: 1px solid #c1c1c1; }
.blade--no-options .blade__heading-dots {
display: none; }
.blade--has-scrolling .blade__options {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.blade--has-scrolling .blade__options.blade__options--scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.blade--has-scrolling .blade__option-item {
min-width: 85px;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
.blade__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 10;
padding: 10px;
height: 100%;
min-height: 94px;
/* [1] */
background-color: #ffffff;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
align-items: center; }
.blade__heading--is-open {
-webkit-transform: translateX(-94%);
transform: translateX(-94%); }
.blade__icon {
position: relative;
width: 50px;
height: 50px;
background-size: contain;
background-repeat: no-repeat;
-webkit-box-flex: 0;
-ms-flex: 0 0 50px;
flex: 0 0 50px; }
.blade__icon--flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.blade__icon img {
max-width: 100%; }
.blade__alert-badge {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 60px;
height: 60px;
font-size: 1.625em;
font-weight: bold;
text-align: center;
line-height: 60px;
color: #fff;
background: url("../img/icon_alert.svg") no-repeat right top;
background-size: 24px; }
.hasMsg .blade__alert-badge {
display: block; }
.blade__heading-text {
padding: 0 10px;
font-size: 1.125em;
font-weight: bold; }
.blade__sub-heading {
display: block;
font-size: 1.000em;
font-weight: bold; }
.blade__sub-heading--green {
color: #28945b; }
.blade__sub-heading--gray {
color: #F7F8F9; }
.blade__heading-description {
margin-bottom: 0;
font-size: 0.875em;
font-weight: 100;
line-height: 18px; }
.blade__heading-error {
padding-top: 5px;
font-size: 0.875em;
font-weight: bold;
line-height: 14px;
color: #a70000; }
.blade__location-status {
padding: 0px 30px; }
.blade__location-status--active {
display: block;
font-size: 1.000em;
font-weight: bold;
color: #46c343; }
.blade__location-status--inactive {
display: block;
font-size: 1.000em;
font-weight: bold;
color: #f80015; }
.blade__heading-dots {
position: absolute;
top: 50%;
right: 10px;
width: 5px;
height: 5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #464037;
border-radius: 50%; }
.blade__heading-dots:before,
.blade__heading-dots:after {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #464037; }
.blade__heading-dots:before {
margin-top: -10px; }
.blade__heading-dots:after {
margin-top: 15px; }
.blade__options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
padding-left: 10%;
height: 100%;
color: #ffffff;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.blade__option-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
padding: 10px 5px;
width: 25%;
font-size: 0.875em;
text-align: center;
-webkit-box-flex: 0;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-negative: 0;
flex-shrink: 0; }
.blade__option-item + .blade__option-item {
border-left: 1px solid #ffffff; }
.blade__option-item--more {
min-width: 85px;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
.blade__option-icon {
display: block;
position: relative;
margin: 0 auto 5px;
max-width: 100%;
height: 35px; }
.blade__option-badge {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
width: 25px;
height: 25px;
font-size: 0.813em;
line-height: 25px;
border-radius: 50%;
background: #ff9900; }
.blade__option-badge--is-empty {
background-color: transparent; }
/*// Utility classes*/
.align-baseline {
vertical-align: baseline !important; }
.align-top {
vertical-align: top !important; }
.align-middle {
vertical-align: middle !important; }
.align-bottom {
vertical-align: bottom !important; }
.align-text-bottom {
vertical-align: text-bottom !important; }
.align-text-top {
vertical-align: text-top !important; }
/**/
/* Contextual backgrounds*/
/**/
.bg-faded {
background-color: #E7E7E8; }
.bg-primary {
background-color: #1971D4 !important; }
a.bg-primary:focus, a.bg-primary:hover {
background-color: #1459a6 !important; }
.bg-blue {
background-color: #2F5D9D !important; }
a.bg-blue:focus, a.bg-blue:hover {
background-color: #234676 !important; }
.bg-success {
background-color: #28945b !important; }
a.bg-success:focus, a.bg-success:hover {
background-color: #1d6c42 !important; }
.bg-info {
background-color: #5bc0de !important; }
a.bg-info:focus, a.bg-info:hover {
background-color: #31b0d5 !important; }
.bg-warning {
background-color: #f0ad4e !important; }
a.bg-warning:focus, a.bg-warning:hover {
background-color: #ec971f !important; }
.bg-danger {
background-color: #d9534f !important; }
a.bg-danger:focus, a.bg-danger:hover {
background-color: #c9302c !important; }
.bg-inverse {
background-color: #1D242B !important; }
a.bg-inverse:focus, a.bg-inverse:hover {
background-color: #080b0d !important; }
.bg-gray-lighter {
background-color: #F7F8F9 !important; }
a.bg-gray-lighter:focus, a.bg-gray-lighter:hover {
background-color: #dadfe3 !important; }
.bg-midnight {
background-color: #1D242B !important; }
a.bg-midnight:focus, a.bg-midnight:hover {
background-color: #080b0d !important; }
.bg-white {
background-color: #ffffff !important; }
a.bg-white:focus, a.bg-white:hover {
background-color: #e6e6e6 !important; }
.rounded {
border-radius: 0.5rem; }
.rounded-top {
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem; }
.rounded-right {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem; }
.rounded-bottom {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem; }
.rounded-left {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem; }
.rounded-circle {
border-radius: 50%; }
.clearfix::after, .full-list__item::after {
content: "";
display: table;
clear: both; }
.d-block {
display: block !important; }
.d-inline-block {
display: inline-block !important; }
.d-inline {
display: inline !important; }
.float-xs-left {
float: left !important; }
.float-xs-right {
float: right !important; }
.float-xs-none {
float: none !important; }
@media (min-width: 576px) {
.float-sm-left {
float: left !important; }
.float-sm-right {
float: right !important; }
.float-sm-none {
float: none !important; } }
@media (min-width: 768px) {
.float-md-left {
float: left !important; }
.float-md-right {
float: right !important; }
.float-md-none {
float: none !important; } }
@media (min-width: 992px) {
.float-lg-left {
float: left !important; }
.float-lg-right {
float: right !important; }
.float-lg-none {
float: none !important; } }
@media (min-width: 1200px) {
.float-xl-left {
float: left !important; }
.float-xl-right {
float: right !important; }
.float-xl-none {
float: none !important; } }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0; }
.sr-only-focusable:active, .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto; }
.w-100 {
width: 100% !important; }
.h-100 {
height: 100% !important; }
.mx-auto {
margin-right: auto !important;
margin-left: auto !important; }
.w-auto {
width: auto !important; }
.m-0 {
margin: 0 0 !important; }
.mt-0 {
margin-top: 0 !important; }
.mr-0 {
margin-right: 0 !important; }
.mb-0 {
margin-bottom: 0 !important; }
.ml-0 {
margin-left: 0 !important; }
.mx-0 {
margin-right: 0 !important;
margin-left: 0 !important; }
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.m-1 {
margin: 20px 25px !important; }
.mt-1 {
margin-top: 20px !important; }
.mr-1 {
margin-right: 25px !important; }
.mb-1 {
margin-bottom: 20px !important; }
.ml-1 {
margin-left: 25px !important; }
.mx-1 {
margin-right: 25px !important;
margin-left: 25px !important; }
.my-1 {
margin-top: 20px !important;
margin-bottom: 20px !important; }
.m-2 {
margin: 30px 37.5px !important; }
.mt-2 {
margin-top: 30px !important; }
.mr-2 {
margin-right: 37.5px !important; }
.mb-2 {
margin-bottom: 30px !important; }
.ml-2 {
margin-left: 37.5px !important; }
.mx-2 {
margin-right: 37.5px !important;
margin-left: 37.5px !important; }
.my-2 {
margin-top: 30px !important;
margin-bottom: 30px !important; }
.m-3 {
margin: 60px 75px !important; }
.mt-3 {
margin-top: 60px !important; }
.mr-3 {
margin-right: 75px !important; }
.mb-3 {
margin-bottom: 60px !important; }
.ml-3 {
margin-left: 75px !important; }
.mx-3 {
margin-right: 75px !important;
margin-left: 75px !important; }
.my-3 {
margin-top: 60px !important;
margin-bottom: 60px !important; }
.p-0 {
padding: 0 0 !important; }
.pt-0 {
padding-top: 0 !important; }
.pr-0 {
padding-right: 0 !important; }
.pb-0 {
padding-bottom: 0 !important; }
.pl-0 {
padding-left: 0 !important; }
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important; }
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.p-1 {
padding: 20px 25px !important; }
.pt-1 {
padding-top: 20px !important; }
.pr-1 {
padding-right: 25px !important; }
.pb-1 {
padding-bottom: 20px !important; }
.pl-1 {
padding-left: 25px !important; }
.px-1 {
padding-right: 25px !important;
padding-left: 25px !important; }
.py-1 {
padding-top: 20px !important;
padding-bottom: 20px !important; }
.p-2 {
padding: 30px 37.5px !important; }
.pt-2 {
padding-top: 30px !important; }
.pr-2 {
padding-right: 37.5px !important; }
.pb-2 {
padding-bottom: 30px !important; }
.pl-2 {
padding-left: 37.5px !important; }
.px-2 {
padding-right: 37.5px !important;
padding-left: 37.5px !important; }
.py-2 {
padding-top: 30px !important;
padding-bottom: 30px !important; }
.p-3 {
padding: 60px 75px !important; }
.pt-3 {
padding-top: 60px !important; }
.pr-3 {
padding-right: 75px !important; }
.pb-3 {
padding-bottom: 60px !important; }
.pl-3 {
padding-left: 75px !important; }
.px-3 {
padding-right: 75px !important;
padding-left: 75px !important; }
.py-3 {
padding-top: 60px !important;
padding-bottom: 60px !important; }
.w-15 {
width: 15% !important; }
.w-25 {
width: 25% !important; }
.w-50 {
width: 50% !important; }
.w-75 {
width: 75% !important; }
.w-100 {
width: 100% !important; }
@media (max-width: 767px) {
.w-xs-100 {
width: 100% !important; } }
@media (max-width: 991px) {
.w-md-100-down {
width: 100% !important; } }
.h-25 {
height: 25% !important; }
.h-50 {
height: 50% !important; }
.h-75 {
height: 75% !important; }
.h-100 {
height: 100% !important; }
.mw-100 {
max-width: 100% !important; }
.mh-100 {
max-height: 100% !important; }
.m-0 {
margin: 0 0 !important; }
.mt-0 {
margin-top: 0 !important; }
.mr-0 {
margin-right: 0 !important; }
.mb-0 {
margin-bottom: 0 !important; }
.ml-0 {
margin-left: 0 !important; }
.mx-0 {
margin-right: 0 !important;
margin-left: 0 !important; }
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.m-1 {
margin: 0.25rem 0.25rem !important; }
.mt-1 {
margin-top: 0.25rem !important; }
.mr-1 {
margin-right: 0.25rem !important; }
.mb-1 {
margin-bottom: 0.25rem !important; }
.ml-1 {
margin-left: 0.25rem !important; }
.mx-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important; }
.my-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important; }
.m-2 {
margin: 0.5rem 0.5rem !important; }
.mt-2 {
margin-top: 0.5rem !important; }
.mr-2 {
margin-right: 0.5rem !important; }
.mb-2 {
margin-bottom: 0.5rem !important; }
.ml-2 {
margin-left: 0.5rem !important; }
.mx-2 {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important; }
.my-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.m-3 {
margin: 1rem 1rem !important; }
.mt-3 {
margin-top: 1rem !important; }
.mr-3 {
margin-right: 1rem !important; }
.mb-3 {
margin-bottom: 1rem !important; }
.ml-3 {
margin-left: 1rem !important; }
.mx-3 {
margin-right: 1rem !important;
margin-left: 1rem !important; }
.my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
.m-4 {
margin: 1.5rem 1.5rem !important; }
.mt-4 {
margin-top: 1.5rem !important; }
.mr-4 {
margin-right: 1.5rem !important; }
.mb-4 {
margin-bottom: 1.5rem !important; }
.ml-4 {
margin-left: 1.5rem !important; }
.mx-4 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important; }
.my-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important; }
.m-5 {
margin: 3rem 3rem !important; }
.mt-5 {
margin-top: 3rem !important; }
.mr-5 {
margin-right: 3rem !important; }
.mb-5 {
margin-bottom: 3rem !important; }
.ml-5 {
margin-left: 3rem !important; }
.mx-5 {
margin-right: 3rem !important;
margin-left: 3rem !important; }
.my-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important; }
.p-0 {
padding: 0 0 !important; }
.pt-0 {
padding-top: 0 !important; }
.pr-0 {
padding-right: 0 !important; }
.pb-0 {
padding-bottom: 0 !important; }
.pl-0 {
padding-left: 0 !important; }
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important; }
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.p-1 {
padding: 0.25rem 0.25rem !important; }
.pt-1 {
padding-top: 0.25rem !important; }
.pr-1 {
padding-right: 0.25rem !important; }
.pb-1 {
padding-bottom: 0.25rem !important; }
.pl-1 {
padding-left: 0.25rem !important; }
.px-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important; }
.py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important; }
.p-2 {
padding: 0.5rem 0.5rem !important; }
.pt-2 {
padding-top: 0.5rem !important; }
.pr-2 {
padding-right: 0.5rem !important; }
.pb-2 {
padding-bottom: 0.5rem !important; }
.pl-2 {
padding-left: 0.5rem !important; }
.px-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important; }
.py-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.p-3 {
padding: 1rem 1rem !important; }
.pt-3 {
padding-top: 1rem !important; }
.pr-3 {
padding-right: 1rem !important; }
.pb-3 {
padding-bottom: 1rem !important; }
.pl-3 {
padding-left: 1rem !important; }
.px-3 {
padding-right: 1rem !important;
padding-left: 1rem !important; }
.py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important; }
.p-4 {
padding: 1.5rem 1.5rem !important; }
.pt-4 {
padding-top: 1.5rem !important; }
.pr-4 {
padding-right: 1.5rem !important; }
.pb-4 {
padding-bottom: 1.5rem !important; }
.pl-4 {
padding-left: 1.5rem !important; }
.px-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important; }
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important; }
.p-5 {
padding: 3rem 3rem !important; }
.pt-5 {
padding-top: 3rem !important; }
.pr-5 {
padding-right: 3rem !important; }
.pb-5 {
padding-bottom: 3rem !important; }
.pl-5 {
padding-left: 3rem !important; }
.px-5 {
padding-right: 3rem !important;
padding-left: 3rem !important; }
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important; }
.m-auto {
margin: auto !important; }
.mt-auto {
margin-top: auto !important; }
.mr-auto {
margin-right: auto !important; }
.mb-auto {
margin-bottom: auto !important; }
.ml-auto {
margin-left: auto !important; }
.mx-auto {
margin-right: auto !important;
margin-left: auto !important; }
.my-auto {
margin-top: auto !important;
margin-bottom: auto !important; }
@media (min-width: 576px) {
.m-sm-0 {
margin: 0 0 !important; }
.mt-sm-0 {
margin-top: 0 !important; }
.mr-sm-0 {
margin-right: 0 !important; }
.mb-sm-0 {
margin-bottom: 0 !important; }
.ml-sm-0 {
margin-left: 0 !important; }
.mx-sm-0 {
margin-right: 0 !important;
margin-left: 0 !important; }
.my-sm-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.m-sm-1 {
margin: 0.25rem 0.25rem !important; }
.mt-sm-1 {
margin-top: 0.25rem !important; }
.mr-sm-1 {
margin-right: 0.25rem !important; }
.mb-sm-1 {
margin-bottom: 0.25rem !important; }
.ml-sm-1 {
margin-left: 0.25rem !important; }
.mx-sm-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important; }
.my-sm-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important; }
.m-sm-2 {
margin: 0.5rem 0.5rem !important; }
.mt-sm-2 {
margin-top: 0.5rem !important; }
.mr-sm-2 {
margin-right: 0.5rem !important; }
.mb-sm-2 {
margin-bottom: 0.5rem !important; }
.ml-sm-2 {
margin-left: 0.5rem !important; }
.mx-sm-2 {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important; }
.my-sm-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.m-sm-3 {
margin: 1rem 1rem !important; }
.mt-sm-3 {
margin-top: 1rem !important; }
.mr-sm-3 {
margin-right: 1rem !important; }
.mb-sm-3 {
margin-bottom: 1rem !important; }
.ml-sm-3 {
margin-left: 1rem !important; }
.mx-sm-3 {
margin-right: 1rem !important;
margin-left: 1rem !important; }
.my-sm-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
.m-sm-4 {
margin: 1.5rem 1.5rem !important; }
.mt-sm-4 {
margin-top: 1.5rem !important; }
.mr-sm-4 {
margin-right: 1.5rem !important; }
.mb-sm-4 {
margin-bottom: 1.5rem !important; }
.ml-sm-4 {
margin-left: 1.5rem !important; }
.mx-sm-4 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important; }
.my-sm-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important; }
.m-sm-5 {
margin: 3rem 3rem !important; }
.mt-sm-5 {
margin-top: 3rem !important; }
.mr-sm-5 {
margin-right: 3rem !important; }
.mb-sm-5 {
margin-bottom: 3rem !important; }
.ml-sm-5 {
margin-left: 3rem !important; }
.mx-sm-5 {
margin-right: 3rem !important;
margin-left: 3rem !important; }
.my-sm-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important; }
.p-sm-0 {
padding: 0 0 !important; }
.pt-sm-0 {
padding-top: 0 !important; }
.pr-sm-0 {
padding-right: 0 !important; }
.pb-sm-0 {
padding-bottom: 0 !important; }
.pl-sm-0 {
padding-left: 0 !important; }
.px-sm-0 {
padding-right: 0 !important;
padding-left: 0 !important; }
.py-sm-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.p-sm-1 {
padding: 0.25rem 0.25rem !important; }
.pt-sm-1 {
padding-top: 0.25rem !important; }
.pr-sm-1 {
padding-right: 0.25rem !important; }
.pb-sm-1 {
padding-bottom: 0.25rem !important; }
.pl-sm-1 {
padding-left: 0.25rem !important; }
.px-sm-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important; }
.py-sm-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important; }
.p-sm-2 {
padding: 0.5rem 0.5rem !important; }
.pt-sm-2 {
padding-top: 0.5rem !important; }
.pr-sm-2 {
padding-right: 0.5rem !important; }
.pb-sm-2 {
padding-bottom: 0.5rem !important; }
.pl-sm-2 {
padding-left: 0.5rem !important; }
.px-sm-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important; }
.py-sm-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.p-sm-3 {
padding: 1rem 1rem !important; }
.pt-sm-3 {
padding-top: 1rem !important; }
.pr-sm-3 {
padding-right: 1rem !important; }
.pb-sm-3 {
padding-bottom: 1rem !important; }
.pl-sm-3 {
padding-left: 1rem !important; }
.px-sm-3 {
padding-right: 1rem !important;
padding-left: 1rem !important; }
.py-sm-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important; }
.p-sm-4 {
padding: 1.5rem 1.5rem !important; }
.pt-sm-4 {
padding-top: 1.5rem !important; }
.pr-sm-4 {
padding-right: 1.5rem !important; }
.pb-sm-4 {
padding-bottom: 1.5rem !important; }
.pl-sm-4 {
padding-left: 1.5rem !important; }
.px-sm-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important; }
.py-sm-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important; }
.p-sm-5 {
padding: 3rem 3rem !important; }
.pt-sm-5 {
padding-top: 3rem !important; }
.pr-sm-5 {
padding-right: 3rem !important; }
.pb-sm-5 {
padding-bottom: 3rem !important; }
.pl-sm-5 {
padding-left: 3rem !important; }
.px-sm-5 {
padding-right: 3rem !important;
padding-left: 3rem !important; }
.py-sm-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important; }
.m-sm-auto {
margin: auto !important; }
.mt-sm-auto {
margin-top: auto !important; }
.mr-sm-auto {
margin-right: auto !important; }
.mb-sm-auto {
margin-bottom: auto !important; }
.ml-sm-auto {
margin-left: auto !important; }
.mx-sm-auto {
margin-right: auto !important;
margin-left: auto !important; }
.my-sm-auto {
margin-top: auto !important;
margin-bottom: auto !important; } }
@media (min-width: 768px) {
.m-md-0 {
margin: 0 0 !important; }
.mt-md-0 {
margin-top: 0 !important; }
.mr-md-0 {
margin-right: 0 !important; }
.mb-md-0 {
margin-bottom: 0 !important; }
.ml-md-0 {
margin-left: 0 !important; }
.mx-md-0 {
margin-right: 0 !important;
margin-left: 0 !important; }
.my-md-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.m-md-1 {
margin: 0.25rem 0.25rem !important; }
.mt-md-1 {
margin-top: 0.25rem !important; }
.mr-md-1 {
margin-right: 0.25rem !important; }
.mb-md-1 {
margin-bottom: 0.25rem !important; }
.ml-md-1 {
margin-left: 0.25rem !important; }
.mx-md-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important; }
.my-md-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important; }
.m-md-2 {
margin: 0.5rem 0.5rem !important; }
.mt-md-2 {
margin-top: 0.5rem !important; }
.mr-md-2 {
margin-right: 0.5rem !important; }
.mb-md-2 {
margin-bottom: 0.5rem !important; }
.ml-md-2 {
margin-left: 0.5rem !important; }
.mx-md-2 {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important; }
.my-md-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.m-md-3 {
margin: 1rem 1rem !important; }
.mt-md-3 {
margin-top: 1rem !important; }
.mr-md-3 {
margin-right: 1rem !important; }
.mb-md-3 {
margin-bottom: 1rem !important; }
.ml-md-3 {
margin-left: 1rem !important; }
.mx-md-3 {
margin-right: 1rem !important;
margin-left: 1rem !important; }
.my-md-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
.m-md-4 {
margin: 1.5rem 1.5rem !important; }
.mt-md-4 {
margin-top: 1.5rem !important; }
.mr-md-4 {
margin-right: 1.5rem !important; }
.mb-md-4 {
margin-bottom: 1.5rem !important; }
.ml-md-4 {
margin-left: 1.5rem !important; }
.mx-md-4 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important; }
.my-md-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important; }
.m-md-5 {
margin: 3rem 3rem !important; }
.mt-md-5 {
margin-top: 3rem !important; }
.mr-md-5 {
margin-right: 3rem !important; }
.mb-md-5 {
margin-bottom: 3rem !important; }
.ml-md-5 {
margin-left: 3rem !important; }
.mx-md-5 {
margin-right: 3rem !important;
margin-left: 3rem !important; }
.my-md-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important; }
.p-md-0 {
padding: 0 0 !important; }
.pt-md-0 {
padding-top: 0 !important; }
.pr-md-0 {
padding-right: 0 !important; }
.pb-md-0 {
padding-bottom: 0 !important; }
.pl-md-0 {
padding-left: 0 !important; }
.px-md-0 {
padding-right: 0 !important;
padding-left: 0 !important; }
.py-md-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.p-md-1 {
padding: 0.25rem 0.25rem !important; }
.pt-md-1 {
padding-top: 0.25rem !important; }
.pr-md-1 {
padding-right: 0.25rem !important; }
.pb-md-1 {
padding-bottom: 0.25rem !important; }
.pl-md-1 {
padding-left: 0.25rem !important; }
.px-md-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important; }
.py-md-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important; }
.p-md-2 {
padding: 0.5rem 0.5rem !important; }
.pt-md-2 {
padding-top: 0.5rem !important; }
.pr-md-2 {
padding-right: 0.5rem !important; }
.pb-md-2 {
padding-bottom: 0.5rem !important; }
.pl-md-2 {
padding-left: 0.5rem !important; }
.px-md-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important; }
.py-md-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.p-md-3 {
padding: 1rem 1rem !important; }
.pt-md-3 {
padding-top: 1rem !important; }
.pr-md-3 {
padding-right: 1rem !important; }
.pb-md-3 {
padding-bottom: 1rem !important; }
.pl-md-3 {
padding-left: 1rem !important; }
.px-md-3 {
padding-right: 1rem !important;
padding-left: 1rem !important; }
.py-md-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important; }
.p-md-4 {
padding: 1.5rem 1.5rem !important; }
.pt-md-4 {
padding-top: 1.5rem !important; }
.pr-md-4 {
padding-right: 1.5rem !important; }
.pb-md-4 {
padding-bottom: 1.5rem !important; }
.pl-md-4 {
padding-left: 1.5rem !important; }
.px-md-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important; }
.py-md-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important; }
.p-md-5 {
padding: 3rem 3rem !important; }
.pt-md-5 {
padding-top: 3rem !important; }
.pr-md-5 {
padding-right: 3rem !important; }
.pb-md-5 {
padding-bottom: 3rem !important; }
.pl-md-5 {
padding-left: 3rem !important; }
.px-md-5 {
padding-right: 3rem !important;
padding-left: 3rem !important; }
.py-md-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important; }
.m-md-auto {
margin: auto !important; }
.mt-md-auto {
margin-top: auto !important; }
.mr-md-auto {
margin-right: auto !important; }
.mb-md-auto {
margin-bottom: auto !important; }
.ml-md-auto {
margin-left: auto !important; }
.mx-md-auto {
margin-right: auto !important;
margin-left: auto !important; }
.my-md-auto {
margin-top: auto !important;
margin-bottom: auto !important; } }
@media (min-width: 992px) {
.m-lg-0 {
margin: 0 0 !important; }
.mt-lg-0 {
margin-top: 0 !important; }
.mr-lg-0 {
margin-right: 0 !important; }
.mb-lg-0 {
margin-bottom: 0 !important; }
.ml-lg-0 {
margin-left: 0 !important; }
.mx-lg-0 {
margin-right: 0 !important;
margin-left: 0 !important; }
.my-lg-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.m-lg-1 {
margin: 0.25rem 0.25rem !important; }
.mt-lg-1 {
margin-top: 0.25rem !important; }
.mr-lg-1 {
margin-right: 0.25rem !important; }
.mb-lg-1 {
margin-bottom: 0.25rem !important; }
.ml-lg-1 {
margin-left: 0.25rem !important; }
.mx-lg-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important; }
.my-lg-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important; }
.m-lg-2 {
margin: 0.5rem 0.5rem !important; }
.mt-lg-2 {
margin-top: 0.5rem !important; }
.mr-lg-2 {
margin-right: 0.5rem !important; }
.mb-lg-2 {
margin-bottom: 0.5rem !important; }
.ml-lg-2 {
margin-left: 0.5rem !important; }
.mx-lg-2 {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important; }
.my-lg-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.m-lg-3 {
margin: 1rem 1rem !important; }
.mt-lg-3 {
margin-top: 1rem !important; }
.mr-lg-3 {
margin-right: 1rem !important; }
.mb-lg-3 {
margin-bottom: 1rem !important; }
.ml-lg-3 {
margin-left: 1rem !important; }
.mx-lg-3 {
margin-right: 1rem !important;
margin-left: 1rem !important; }
.my-lg-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
.m-lg-4 {
margin: 1.5rem 1.5rem !important; }
.mt-lg-4 {
margin-top: 1.5rem !important; }
.mr-lg-4 {
margin-right: 1.5rem !important; }
.mb-lg-4 {
margin-bottom: 1.5rem !important; }
.ml-lg-4 {
margin-left: 1.5rem !important; }
.mx-lg-4 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important; }
.my-lg-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important; }
.m-lg-5 {
margin: 3rem 3rem !important; }
.mt-lg-5 {
margin-top: 3rem !important; }
.mr-lg-5 {
margin-right: 3rem !important; }
.mb-lg-5 {
margin-bottom: 3rem !important; }
.ml-lg-5 {
margin-left: 3rem !important; }
.mx-lg-5 {
margin-right: 3rem !important;
margin-left: 3rem !important; }
.my-lg-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important; }
.p-lg-0 {
padding: 0 0 !important; }
.pt-lg-0 {
padding-top: 0 !important; }
.pr-lg-0 {
padding-right: 0 !important; }
.pb-lg-0 {
padding-bottom: 0 !important; }
.pl-lg-0 {
padding-left: 0 !important; }
.px-lg-0 {
padding-right: 0 !important;
padding-left: 0 !important; }
.py-lg-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.p-lg-1 {
padding: 0.25rem 0.25rem !important; }
.pt-lg-1 {
padding-top: 0.25rem !important; }
.pr-lg-1 {
padding-right: 0.25rem !important; }
.pb-lg-1 {
padding-bottom: 0.25rem !important; }
.pl-lg-1 {
padding-left: 0.25rem !important; }
.px-lg-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important; }
.py-lg-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important; }
.p-lg-2 {
padding: 0.5rem 0.5rem !important; }
.pt-lg-2 {
padding-top: 0.5rem !important; }
.pr-lg-2 {
padding-right: 0.5rem !important; }
.pb-lg-2 {
padding-bottom: 0.5rem !important; }
.pl-lg-2 {
padding-left: 0.5rem !important; }
.px-lg-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important; }
.py-lg-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.p-lg-3 {
padding: 1rem 1rem !important; }
.pt-lg-3 {
padding-top: 1rem !important; }
.pr-lg-3 {
padding-right: 1rem !important; }
.pb-lg-3 {
padding-bottom: 1rem !important; }
.pl-lg-3 {
padding-left: 1rem !important; }
.px-lg-3 {
padding-right: 1rem !important;
padding-left: 1rem !important; }
.py-lg-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important; }
.p-lg-4 {
padding: 1.5rem 1.5rem !important; }
.pt-lg-4 {
padding-top: 1.5rem !important; }
.pr-lg-4 {
padding-right: 1.5rem !important; }
.pb-lg-4 {
padding-bottom: 1.5rem !important; }
.pl-lg-4 {
padding-left: 1.5rem !important; }
.px-lg-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important; }
.py-lg-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important; }
.p-lg-5 {
padding: 3rem 3rem !important; }
.pt-lg-5 {
padding-top: 3rem !important; }
.pr-lg-5 {
padding-right: 3rem !important; }
.pb-lg-5 {
padding-bottom: 3rem !important; }
.pl-lg-5 {
padding-left: 3rem !important; }
.px-lg-5 {
padding-right: 3rem !important;
padding-left: 3rem !important; }
.py-lg-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important; }
.m-lg-auto {
margin: auto !important; }
.mt-lg-auto {
margin-top: auto !important; }
.mr-lg-auto {
margin-right: auto !important; }
.mb-lg-auto {
margin-bottom: auto !important; }
.ml-lg-auto {
margin-left: auto !important; }
.mx-lg-auto {
margin-right: auto !important;
margin-left: auto !important; }
.my-lg-auto {
margin-top: auto !important;
margin-bottom: auto !important; } }
@media (min-width: 1200px) {
.m-xl-0 {
margin: 0 0 !important; }
.mt-xl-0 {
margin-top: 0 !important; }
.mr-xl-0 {
margin-right: 0 !important; }
.mb-xl-0 {
margin-bottom: 0 !important; }
.ml-xl-0 {
margin-left: 0 !important; }
.mx-xl-0 {
margin-right: 0 !important;
margin-left: 0 !important; }
.my-xl-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.m-xl-1 {
margin: 0.25rem 0.25rem !important; }
.mt-xl-1 {
margin-top: 0.25rem !important; }
.mr-xl-1 {
margin-right: 0.25rem !important; }
.mb-xl-1 {
margin-bottom: 0.25rem !important; }
.ml-xl-1 {
margin-left: 0.25rem !important; }
.mx-xl-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important; }
.my-xl-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important; }
.m-xl-2 {
margin: 0.5rem 0.5rem !important; }
.mt-xl-2 {
margin-top: 0.5rem !important; }
.mr-xl-2 {
margin-right: 0.5rem !important; }
.mb-xl-2 {
margin-bottom: 0.5rem !important; }
.ml-xl-2 {
margin-left: 0.5rem !important; }
.mx-xl-2 {
margin-right: 0.5rem !important;
margin-left: 0.5rem !important; }
.my-xl-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.m-xl-3 {
margin: 1rem 1rem !important; }
.mt-xl-3 {
margin-top: 1rem !important; }
.mr-xl-3 {
margin-right: 1rem !important; }
.mb-xl-3 {
margin-bottom: 1rem !important; }
.ml-xl-3 {
margin-left: 1rem !important; }
.mx-xl-3 {
margin-right: 1rem !important;
margin-left: 1rem !important; }
.my-xl-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
.m-xl-4 {
margin: 1.5rem 1.5rem !important; }
.mt-xl-4 {
margin-top: 1.5rem !important; }
.mr-xl-4 {
margin-right: 1.5rem !important; }
.mb-xl-4 {
margin-bottom: 1.5rem !important; }
.ml-xl-4 {
margin-left: 1.5rem !important; }
.mx-xl-4 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important; }
.my-xl-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important; }
.m-xl-5 {
margin: 3rem 3rem !important; }
.mt-xl-5 {
margin-top: 3rem !important; }
.mr-xl-5 {
margin-right: 3rem !important; }
.mb-xl-5 {
margin-bottom: 3rem !important; }
.ml-xl-5 {
margin-left: 3rem !important; }
.mx-xl-5 {
margin-right: 3rem !important;
margin-left: 3rem !important; }
.my-xl-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important; }
.p-xl-0 {
padding: 0 0 !important; }
.pt-xl-0 {
padding-top: 0 !important; }
.pr-xl-0 {
padding-right: 0 !important; }
.pb-xl-0 {
padding-bottom: 0 !important; }
.pl-xl-0 {
padding-left: 0 !important; }
.px-xl-0 {
padding-right: 0 !important;
padding-left: 0 !important; }
.py-xl-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.p-xl-1 {
padding: 0.25rem 0.25rem !important; }
.pt-xl-1 {
padding-top: 0.25rem !important; }
.pr-xl-1 {
padding-right: 0.25rem !important; }
.pb-xl-1 {
padding-bottom: 0.25rem !important; }
.pl-xl-1 {
padding-left: 0.25rem !important; }
.px-xl-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important; }
.py-xl-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important; }
.p-xl-2 {
padding: 0.5rem 0.5rem !important; }
.pt-xl-2 {
padding-top: 0.5rem !important; }
.pr-xl-2 {
padding-right: 0.5rem !important; }
.pb-xl-2 {
padding-bottom: 0.5rem !important; }
.pl-xl-2 {
padding-left: 0.5rem !important; }
.px-xl-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important; }
.py-xl-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.p-xl-3 {
padding: 1rem 1rem !important; }
.pt-xl-3 {
padding-top: 1rem !important; }
.pr-xl-3 {
padding-right: 1rem !important; }
.pb-xl-3 {
padding-bottom: 1rem !important; }
.pl-xl-3 {
padding-left: 1rem !important; }
.px-xl-3 {
padding-right: 1rem !important;
padding-left: 1rem !important; }
.py-xl-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important; }
.p-xl-4 {
padding: 1.5rem 1.5rem !important; }
.pt-xl-4 {
padding-top: 1.5rem !important; }
.pr-xl-4 {
padding-right: 1.5rem !important; }
.pb-xl-4 {
padding-bottom: 1.5rem !important; }
.pl-xl-4 {
padding-left: 1.5rem !important; }
.px-xl-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important; }
.py-xl-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important; }
.p-xl-5 {
padding: 3rem 3rem !important; }
.pt-xl-5 {
padding-top: 3rem !important; }
.pr-xl-5 {
padding-right: 3rem !important; }
.pb-xl-5 {
padding-bottom: 3rem !important; }
.pl-xl-5 {
padding-left: 3rem !important; }
.px-xl-5 {
padding-right: 3rem !important;
padding-left: 3rem !important; }
.py-xl-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important; }
.m-xl-auto {
margin: auto !important; }
.mt-xl-auto {
margin-top: auto !important; }
.mr-xl-auto {
margin-right: auto !important; }
.mb-xl-auto {
margin-bottom: auto !important; }
.ml-xl-auto {
margin-left: auto !important; }
.mx-xl-auto {
margin-right: auto !important;
margin-left: auto !important; }
.my-xl-auto {
margin-top: auto !important;
margin-bottom: auto !important; } }
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030; }
.pos-absolute__comm-pref {
position: absolute; }
/**/
/* Text*/
/**/
/* Alignment*/
.text-justify {
text-align: justify !important; }
.text-nowrap {
white-space: nowrap !important; }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.text-word-break {
-ms-word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; }
/* Responsive alignment*/
.text-xs-left {
text-align: left !important; }
.text-xs-right {
text-align: right !important; }
.text-xs-center {
text-align: center !important; }
@media (min-width: 576px) {
.text-sm-left {
text-align: left !important; }
.text-sm-right {
text-align: right !important; }
.text-sm-center {
text-align: center !important; } }
@media (min-width: 768px) {
.text-md-left {
text-align: left !important; }
.text-md-right {
text-align: right !important; }
.text-md-center {
text-align: center !important; } }
@media (min-width: 992px) {
.text-lg-left {
text-align: left !important; }
.text-lg-right {
text-align: right !important; }
.text-lg-center {
text-align: center !important; } }
@media (min-width: 1200px) {
.text-xl-left {
text-align: left !important; }
.text-xl-right {
text-align: right !important; }
.text-xl-center {
text-align: center !important; } }
/* Transformation*/
.text-lowercase {
text-transform: lowercase !important; }
.text-uppercase {
text-transform: uppercase !important; }
.text-capitalize {
text-transform: capitalize !important; }
.text-transform-none {
text-transform: none !important; }
/* Weight and italics*/
.font-weight-normal {
font-weight: normal;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.font-weight-bold {
font-weight: bold;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.font-italic {
font-style: italic; }
.font-weight-medium {
font-weight: 500;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
/* Contextual colors*/
.text-white {
color: #fff !important; }
.text-muted {
color: #606162 !important; }
a.text-muted:focus, a.text-muted:hover {
color: #474848 !important; }
.text-primary {
color: #1971D4 !important; }
a.text-primary:focus, a.text-primary:hover {
color: #1459a6 !important; }
.text-success {
color: #28945b !important; }
a.text-success:focus, a.text-success:hover {
color: #1d6c42 !important; }
.text-info {
color: #5bc0de !important; }
a.text-info:focus, a.text-info:hover {
color: #31b0d5 !important; }
.text-warning {
color: #f0ad4e !important; }
a.text-warning:focus, a.text-warning:hover {
color: #ec971f !important; }
.text-danger {
color: #d9534f !important; }
a.text-danger:focus, a.text-danger:hover {
color: #c9302c !important; }
/* Font color*/
.text-gray-dark {
color: #1D242B !important; }
a.text-gray-dark:focus, a.text-gray-dark:hover {
color: #080b0d !important; }
.text-gray {
color: #606162 !important; }
a.text-gray:focus, a.text-gray:hover {
color: #474848 !important; }
.text-white {
color: #ffffff !important; }
a.text-white:focus, a.text-white:hover {
color: #e6e6e6 !important; }
/* Misc*/
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0; }
.text-word-break-all {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto; }
.sup {
font-size: 50%;
vertical-align: super; }
.invisible {
visibility: hidden !important; }
.invisibleList {
visibility: hidden !important; }
.hidden-xs-up {
display: none !important; }
@media (max-width: 575px) {
.hidden-xs-down {
display: none !important; } }
@media (min-width: 576px) {
.hidden-sm-up {
display: none !important; } }
@media (max-width: 767px) {
.hidden-sm-down {
display: none !important; } }
@media (min-width: 768px) {
.hidden-md-up {
display: none !important; } }
@media (max-width: 991px) {
.hidden-md-down {
display: none !important; } }
@media (min-width: 992px) {
.hidden-lg-up {
display: none !important; } }
@media (max-width: 1199px) {
.hidden-lg-down {
display: none !important; } }
@media (min-width: 1200px) {
.hidden-xl-up {
display: none !important; } }
.hidden-xl-down {
display: none !important; }
.visible-print-block {
display: none !important; }
@media print {
.visible-print-block {
display: block !important; } }
.visible-print-inline {
display: none !important; }
@media print {
.visible-print-inline {
display: inline !important; } }
.visible-print-inline-block {
display: none !important; }
@media print {
.visible-print-inline-block {
display: inline-block !important; } }
@media print {
.hidden-print {
display: none !important; } }
/***************************************
FLEX
***************************************/
.flex {
display: flex; }
.flex[style*='display: block'] {
display: flex !important; }
.flex--sm {
display: block; }
.flex--sm.flex[style*='display: block'] {
display: block !important; }
@media (min-width: 576px) {
.flex--sm {
display: flex; } }
.flex--md {
display: block; }
.flex--md.flex[style*='display: block'] {
display: block !important; }
@media (min-width: 768px) {
.flex--md {
display: flex; } }
.flex--md-up {
display: flex; }
@media (min-width: 768px) {
.flex--md-up {
display: block; }
.flex--md-up.flex[style*='display: block'] {
display: block !important; } }
.flex--lg {
display: block; }
.flex--lg.flex[style*='display: block'] {
display: block !important; }
@media (min-width: 992px) {
.flex--lg {
display: flex; } }
.flex--lg-up {
display: flex; }
@media (min-width: 992px) {
.flex--lg-up {
display: block; }
.flex--lg-up.flex[style*='display: block'] {
display: block !important; } }
.flex--xl {
display: block; }
.flex--xl.flex[style*='display: block'] {
display: block !important; }
@media (min-width: 1200px) {
.flex--xl {
display: flex; } }
.flex--with-scroll-h {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.flex--vertical-align-center {
align-items: center; }
@media (min-width: 992px) {
.flex--lg-vertical-align-center {
align-items: center; } }
.flex--vertical-align-top {
align-items: flex-start; }
.flex--vertical-align-bottom {
align-items: flex-end; }
.flex--justify-between {
justify-content: space-between; }
.flex--justify-center {
justify-content: center; }
.flex--justify-right {
justify-content: flex-end; }
@media (min-width: 768px) {
.flex--justify-right-md-up {
justify-content: flex-end; } }
.flex--justify-left {
justify-content: flex-start; }
.flex--horizontal {
flex-direction: row; }
.flex--vertical {
flex-direction: column; }
@media (max-width: 991px) {
.flex--vertical-md-down {
flex-direction: column; } }
.flex--vertical-fill {
height: 100%; }
.flex--wrap {
flex-wrap: wrap; }
.flex__item--fill {
flex: 1; }
/*To fix IE related issue's*/
.flex__item--fill-default {
flex: 1; }
.flex__item--vertical-align-center {
-ms-grid-row-align: center;
align-self: center; }
.flex__item--stretch {
-ms-grid-row-align: stretch;
align-self: stretch; }
.flex__item--right-padding {
margin-right: 10px; }
.flex__item--right-padding:last-child {
margin-right: 0; }
@media (max-width: 767px) {
.flex__item--order-last {
order: 99999; } }
@media (min-width: 768px) {
.flex-wrapper {
display: flex;
flex-direction: column;
height: 100vh; } }
@media (min-width: 768px) {
.flex-wrapper--homepage {
height: 80vh; } }
@media (min-width: 992px) {
.flex-wrapper--homepage {
height: 100vh; } }
.flex--row {
margin: 0 -5px; }
.flex--row + .flex--row {
margin-top: 10px; }
.flex__row-item {
margin: 0 5px;
flex: 1; }
.flex--basis-10 {
flex-basis: 10%; }
.flex--basis-20 {
flex-basis: 20%; }
.flex--basis-30 {
flex-basis: 30%; }
.flex--basis-40 {
flex-basis: 40%; }
.flex--basis-50 {
flex-basis: 50%; }
.flex--basis-60 {
flex-basis: 60%; }
.flex--basis-70 {
flex-basis: 70%; }
.flex--basis-80 {
flex-basis: 80%; }
.flex--basis-90 {
flex-basis: 90%; }
.flex--basis-100 {
flex-basis: 100%; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.flex-wrapper {
overflow-x: hidden; }
.flex-block-ie {
display: block; }
.flex__item--fill {
flex: 1 0 auto; }
.flex__item--fill-ie {
flex: 1; } }
.flex-6 {
flex-basis: 60% !important; }
.flex-3 {
flex-basis: 30% !important; }
@media (min-width: 768px) and (max-width: 1100px) {
.flex-3 {
flex-basis: 45% !important; }
.flex-6 {
flex-basis: 45% !important; } }
@media (min-width: 360px) and (max-width: 767px) {
.flex-3 {
flex-basis: 100% !important; }
.flex--justify-sm-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; } }
@media (min-width: 1101px) and (max-width: 1024px) {
.flex-3 {
flex-basis: 40% !important; }
.flex-6 {
flex-basis: 34% !important; } }
@media (min-width: 1025px) {
.flex-3 {
flex-basis: 30% !important; } }
/***************************************
HELPERS
***************************************/
.cursor--pointer {
cursor: pointer; }
.font-size--base {
font-size: 1em; }
.font-size--xs {
font-size: 0.714em; }
.font-size--small {
font-size: 0.85em; }
.font-size--medium {
font-size: 1.14em; }
.font-size--large {
font-size: 1.313em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.white-space--normal {
white-space: normal; }
/* Elements*/
.autofill {
position: absolute;
z-index: 9999;
background-color: #f9f9f9; }
.autofill__result {
display: flex;
padding: 3px;
align-items: center;
cursor: pointer; }
.autofill__result:hover {
background-color: #c1dbf8; }
.autofill__text {
flex: 1; }
.autofill__add {
padding: 0 3px;
width: 30px;
cursor: pointer; }
/***************************************
ACTION-LIST
***************************************/
.action-list__item {
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.action-list__item + .action-list__item {
border-top: 1px solid #bdbdbd; }
.action-list__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.action-list__heading-text {
font-size: 0.875em;
font-weight: bold; }
.action-list__heading-description {
font-size: 0.875em;
font-weight: 100;
line-height: 18px; }
.action-list__action {
max-width: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
padding: 10px 5px;
width: 25%;
font-size: 0.875em;
text-align: center;
-webkit-box-flex: 0;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-negative: 0;
flex-shrink: 0; }
.action-list__action + .action-list__action {
border-left: 1px solid #ffffff; }
.action-list__icon {
cursor: pointer;
display: block;
position: relative;
margin: 0 auto 5px;
max-width: 100%;
height: 25px; }
.action-list__icon--small {
height: 20px; }
/***************************************
PAGE-WRAPPER
***************************************/
.page-wrapper {
position: relative;
height: 100vh;
overflow-x: hidden; }
@media (min-width: 992px) {
.page-wrapper {
position: static;
height: auto;
overflow-x: visible; } }
/***************************************
BODY-CONTENT
***************************************/
.body-content--bg {
background-color: #ffffff; }
.body-content {
padding: 0 15px;
background-color: #ffffff; }
@media (min-width: 992px) {
.body-content {
padding: 30px; } }
@media (min-width: 1200px) {
.body-content {
padding: 30px 50px; } }
.body-content--no-padding {
padding-bottom: 0; }
.body-content--small-padding {
padding: 10px; }
.body-content--padding-bottom {
padding-bottom: 10px; }
@media (max-width: 767px) {
.body-content--no-pad-btm-sm-down {
padding-bottom: 0; } }
.body-content--relative {
position: relative; }
@media (max-width: 767px) {
.body-content__fill-item {
padding: 0; } }
@media (min-width: 992px) {
.body-content__fill-item--contains-cart {
position: relative; } }
@media (min-width: 992px) {
.body-content--minHeight {
min-height: 550px; } }
/* body.modal-open {*/
/* @include media-breakpoint-down(sm) {*/
/* position: absolute !important; */
/* }*/
/* }*/
/***************************************
FOOTER
***************************************/
.footer {
background-color: #1D242B; }
.footer__sub-footer {
padding: 20px 25px;
text-align: center; }
@media (min-width: 768px) {
.footer__sub-footer {
padding: 30px 15px;
text-align: left;
margin-left: 2rem;
margin-right: 2rem; } }
@media (min-width: 992px) {
.footer__sub-footer {
padding: 30px 50px;
text-align: left; } }
@media (min-width: 768px) {
.footer__sub-footer-right {
float: right; } }
.footer__logo {
margin-bottom: 20px;
width: 80px; }
@media (min-width: 768px) {
.footer__logo {
margin-bottom: 0; } }
@media (min-width: 768px) {
.footer__download-app {
display: table; } }
.footer__download-app-description, .footer__download-button {
display: inline-block;
text-align: center; }
@media (min-width: 768px) {
.footer__download-app-description, .footer__download-button {
display: table-cell !important;
vertical-align: middle; }
.footer__download-app-description + .footer__download-app-description, .footer__download-button + .footer__download-app-description, .footer__download-app-description + .footer__download-button, .footer__download-button + .footer__download-button {
padding-left: 20px; } }
.footer__download-app-description {
display: block;
padding-bottom: 20px;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff; }
@media (min-width: 768px) {
.footer__download-app-description {
padding-bottom: 0;
font-size: 0.875em; }
.footer__download-app-description::after {
content: "";
display: table;
clear: both; } }
@media (min-width: 768px) {
.footer__download-app-text {
text-align: left;
float: left;
width: max-content; } }
.footer__phone-icon {
height: 45px; }
@media (min-width: 768px) {
.footer__phone-icon {
float: left; } }
.footer__download-button img {
width: 121px; }
.footer__download-button + .footer__download-button {
margin-left: 5px; }
.footer__footer-border {
height: 1px;
background-color: #E7E7E8;
margin-right: 2rem !important;
margin-left: 2rem !important; }
@media (max-width: 991px) {
.footer__footer-border {
margin-right: 1rem !important;
margin-left: 1rem !important; } }
@media (min-width: 1450px) {
.footer__footer-border {
margin: 0 auto !important; } }
@media (max-width: 767px) {
.footer_footer-down {
line-height: 1.92em !important; } }
@media (min-width: 768px) {
.footer__navigation {
padding: 0 15px;
margin-left: 1rem;
margin-right: 2rem; } }
@media (min-width: 992px) {
.footer__navigation {
padding: 0 50px; } }
@media (min-width: 768px) {
.footer__nav-wrapper {
display: table;
width: 100%; } }
.footer__roadside-assistance {
padding: 35px 10px;
min-width: 220px;
line-height: 1.5em;
text-align: center;
font-size: 0.875em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: 300;
color: #bebbb4; }
@media (min-width: 768px) {
.footer__roadside-assistance {
text-align: left;
vertical-align: middle; } }
@media (min-width: 992px) {
.footer__roadside-assistance {
display: table-cell;
padding: 25px 30px 25px 0;
padding-bottom: 6rem; } }
@media (min-width: 1200px) {
.footer__roadside-assistance {
padding-right: 20px;
width: 220px;
min-width: 0;
padding-top: 2.1rem; } }
@media (min-width: 1015px) {
.footer__roadside-assistance {
padding-bottom: 4.2rem; } }
@media (min-width: 1123px) and (max-width: 1199px) {
.footer__roadside-assistance {
padding-bottom: 3rem; } }
.footer__roadside-link {
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: 300;
color: #bebbb4; }
.footer__roadside-link:hover {
text-decoration: none;
color: #bebbb4; }
.footer__roadside-number {
font-size: 1.500em;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff !important;
margin-right: 27px; }
.footer__roadside-number:hover, .footer__roadside-number:focus {
color: #ffffff !important; }
@media (min-width: 768px) {
.footer__nav {
vertical-align: middle;
margin-left: 8px;
width: 117%; } }
@media (min-width: 992px) {
.footer__nav {
display: table-cell;
margin-left: 0;
width: auto; } }
.footer__links {
margin-bottom: 0; }
@media (min-width: 768px) {
.footer__links:last-of-type {
margin-bottom: 10px; } }
@media (min-width: 992px) {
.footer__links:first-child {
margin-top: 2rem; } }
@media (min-width: 1200px) {
.footer__links:first-child {
margin-top: 1rem; } }
@media (min-width: 1303px) {
.footer__links:first-child {
margin-top: 0rem; } }
.footer__links-item:first-child {
border-top: none; }
@media (min-width: 768px) {
.footer__links-item:first-child {
border-top: none; } }
.footer__links-item + .footer__links-item {
border-top: none; }
@media (min-width: 768px) {
.footer__links-item + .footer__links-item {
border-top: none;
border-left: 1px solid #8e8d8b; } }
@media (min-width: 768px) {
.footer__links-item {
display: inline-block; } }
.footer__link {
display: block;
padding: 22px;
font-size: 0.813em;
text-align: center;
line-height: 1em;
color: #BEBBB4; }
.footer__link:hover, .footer__link:focus {
color: #BEBBB4; }
@media (min-width: 768px) {
.footer__link {
padding: 0 5px;
font-size: 0.750em; } }
.footer__social {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff; }
@media (min-width: 768px) {
.footer__social {
display: table-cell;
padding: 10px 0;
/*max-width: 150px;*/
min-width: 192px;
vertical-align: middle;
padding-top: 1.5rem; } }
@media (min-width: 992px) {
.footer__social {
max-width: none;
display: block; } }
@media (min-width: 1200px) {
.footer__social {
padding: 19px 0; } }
.footer__social-links {
padding-bottom: 35px;
text-align: center; }
@media (min-width: 768px) {
.footer__social-links {
padding-bottom: 10rem;
text-align: right; } }
@media (min-width: 992px) {
.footer__social-links {
padding-bottom: 0; } }
.footer__social-link {
display: inline-block;
margin-top: 15px; }
.footer__social-link + .footer__social-link {
margin-left: 5px; }
@media (min-width: 1200px) {
.footer__social-link + .footer__social-link {
margin-left: 15px; } }
@media (min-width: 576px) {
.footer__social-link + .footer__social-link {
margin-left: 1rem; } }
.footer__social-icon {
width: 22px; }
@media (min-width: 768px) {
.footer__social-icon {
width: 22px; } }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.footer__sub-footer-right {
position: relative;
float: none; }
.footer__download-app {
position: absolute;
right: 240px; }
.footer__download-app-description {
position: relative; }
.footer__download-img-one {
position: absolute;
top: 0; }
.footer__download-img-two {
position: absolute;
top: 0;
left: 300px;
right: 0; } }
/***************************************
NAVBAR
***************************************/
.navbar {
position: relative;
z-index: 1000;
box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.3); }
@media (min-width: 992px) {
.navbar {
position: relative;
z-index: 1000;
padding: 0 25px;
height: 80px;
background-color: #ffffff; }
.navbar::after {
content: "";
display: table;
clear: both; } }
@media (min-width: 1200px) {
.navbar {
position: relative;
z-index: 1000;
padding: 0 50px;
background-color: #ffffff; }
.navbar::after {
content: "";
display: table;
clear: both; } }
.customDivVehAttBar {
background-color: #e2e2e2;
opacity: 1;
border-color: #e2e2e2;
cursor: not-allowed; }
.navbar--is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000; }
.navbar--is-active {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000; }
@media (min-width: 992px) {
.navbar__content-container {
position: relative;
height: 100%; } }
.navbar__logo-container {
position: relative;
right: 0;
z-index: 100;
padding: 10px;
background-color: #ffffff;
transition: all .3s ease-in-out; }
@media (min-width: 992px) {
.navbar__logo-container {
position: absolute;
top: 50%;
left: 0;
padding: 0 10px;
background-color: transparent;
transform: translateY(-50%); } }
.navbar__logo {
height: 40px;
fill: #1971D4; }
.navbar__trigger {
position: absolute;
top: 15px;
right: 10px;
padding-top: 3px;
width: 32px;
cursor: pointer;
z-index: 1001; }
@media (min-width: 992px) {
.navbar__trigger {
display: none; } }
.navbar__trigger--is-active {
position: fixed; }
.navbar__lines {
position: relative;
margin: 0 auto;
width: 22px;
height: 12px; }
.navbar__line {
content: '';
display: block;
position: absolute;
top: 50%;
height: 2px;
width: 100%;
background-color: #1971D4;
transition: all .3s ease-in-out; }
.navbar__line--top {
top: 0; }
.navbar__line--bottom {
top: 100%; }
.navbar__trigger--is-active .navbar__line--middle {
opacity: 0;
transition: all .5s ease-in-out; }
.navbar__trigger--is-active .navbar__line--top {
top: 50%;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
transition: all .5s ease-in-out; }
.navbar__trigger--is-active .navbar__line--bottom {
top: 50%;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
transition: all .5s ease-in-out; }
.navbar__trigger-text {
font-size: 0.625em;
font-family: HelveticaNeueLTW05-75Bold, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #1971D4; }
.navbar__profile {
display: none;
position: relative;
z-index: 9999;
float: right;
cursor: default; }
@media (min-width: 992px) {
.navbar__profile {
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%); } }
.navbar__profile-button {
padding: 10px 1px 10px 0;
font-size: .85em;
cursor: pointer; }
.navbar__profile-icon {
margin-top: -2px;
margin-left: 5px;
fill: #1971D4;
vertical-align: middle; }
.navbar__profile-text {
display: none; }
@media (min-width: 992px) {
.navbar__profile-text {
display: inline-block; } }
/***************************************
NAV
***************************************/
.nav {
position: fixed;
top: 66px;
bottom: 0;
z-index: 110;
width: 96%;
left: 100%;
background-color: #1D242B;
transition: right .3s; }
@media (min-width: 992px) {
.nav {
position: absolute;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
padding: 0;
width: 800px;
margin: 0 auto;
overflow: visible;
background-color: transparent;
transition: right .3s ease-in-out;
transform: translate(-50%, -50%); } }
.nav--is-active {
left: 8%;
opacity: 1;
transition: left .5s ease-in-out; }
@media (min-width: 992px) {
.nav--is-active {
right: 0;
transition: right .5s ease-in-out;
overflow: visible; } }
body.nav--is-active {
position: relative;
overflow: hidden; }
@media (min-width: 992px) {
body.nav--is-active {
overflow: visible; } }
.nav__primary-list {
margin: 0;
left: 100%;
transition: left .3s ease-in-out; }
@media (min-width: 992px) {
.nav__primary-list {
padding-right: 0;
text-align: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.nav__primary-item {
position: relative; }
@media (min-width: 992px) {
.nav__primary-item {
display: inline-block;
background-color: #ffffff; }
.nav__primary-item + .nav__primary-item {
margin-left: 4%; } }
/* The numbers represent the amount of items in main navigation on mobile*/
@media (min-width: 992px) {
.nav__primary-item:nth-child(1) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@media (min-width: 992px) {
.nav__primary-item:nth-child(2) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@media (min-width: 992px) {
.nav__primary-item:nth-child(3) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@media (min-width: 992px) {
.nav__primary-item:nth-child(4) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@media (min-width: 992px) {
.nav__primary-item:nth-child(5) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@media (min-width: 992px) {
.nav__primary-item:nth-child(6) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@media (min-width: 992px) {
.nav__primary-item:nth-child(7) {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.nav__badge {
display: none;
position: absolute;
top: 8px;
right: -1px;
z-index: 10;
width: 6px;
height: 6px;
color: #fff;
border-radius: 50%;
background: #d9534f; }
@media (max-width: 991px) {
.nav__badge {
top: 12px;
right: auto;
left: 5px; } }
.nav__badge--secondary {
top: 20px;
left: 15px; }
@media (max-width: 1199px) {
.nav__badge--secondary {
top: 12px;
right: auto;
left: 20px; } }
.nav__trademark {
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.nav__primary-link {
display: block;
position: relative;
padding: 3% 4% 3% 4%;
font-size: 1em;
font-family: HelveticaNeueLTW05-75Bold, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #ffffff;
cursor: pointer;
border-bottom: 1px solid #585755; }
@media (min-width: 992px) {
.nav__primary-link {
padding: 10px 10px 10px 0;
color: #000000;
border-bottom: 0; } }
.nav__primary-link:hover, .nav__primary-link:focus {
color: #ffffff; }
@media (min-width: 992px) {
.nav__primary-link:hover, .nav__primary-link:focus {
color: #000000; } }
.nav__primary-link a {
display: block; }
.nav__primary-link--no-color {
color: #ffffff; }
.nav__primary-link--no-color:hover, .nav__primary-link--no-color:focus {
color: #ffffff; }
.nav__primary-link--has-list:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 8%;
width: 15px;
height: 15px;
background: url(../_img/arrow-right-icon.svg) no-repeat right center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media (min-width: 992px) {
.nav__primary-link--has-list:after {
display: none; } }
.nav__primary-link--is-active:after {
-webkit-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg); }
@media (min-width: 992px) {
.nav__primary-link span:first-child {
margin-left: 0; } }
.nav__primary-profile-link--has-list {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (min-width: 992px) {
.nav__primary-profile-link--has-list {
position: relative; } }
.nav__primary-profile-link--has-list:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 0%;
width: 15px;
height: 15px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
@media (min-width: 992px) {
.nav__primary-profile-link--has-list:after {
content: '';
display: block;
position: absolute;
width: 15px;
height: 15px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; } }
.nav__secondary {
position: absolute;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 100%;
width: 100%;
background: #1D242B;
transition: left .4s ease-in-out; }
@media (min-width: 992px) {
.nav__secondary {
position: absolute;
z-index: 10;
top: 100%;
left: 50%;
bottom: auto;
margin-top: 17px;
padding-left: 0;
width: 30%;
min-width: 260px;
background-color: #ffffff;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: none; } }
.nav__secondary--profile {
bottom: auto;
right: 0;
left: auto;
-webkit-transform: translateX(0);
transform: translateX(0); }
.nav__secondary--profile:before {
left: 75%;
-webkit-transform: translateX(0);
transform: translateX(0); }
.nav__secondary--is-active {
left: 0; }
@media (min-width: 992px) {
.nav__secondary--is-active {
max-height: none;
left: 25%;
padding-left: 0;
padding-right: 0;
overflow: visible;
opacity: 1; } }
.nav__secondary-item {
position: relative; }
@media (min-width: 992px) {
.nav__secondary-item {
font-size: 0.75rem;
font-weight: bold;
text-align: left; } }
.nav__secondary-link {
display: block;
position: relative;
padding: 3% 4% 3% 4%;
color: #ffffff;
border-bottom: 1px solid #585755; }
@media (min-width: 992px) {
.nav__secondary-link {
padding: 15px 30px;
color: #000000;
border-bottom: 0; }
.nav__secondary-link:hover {
background-color: #c1dbf8;
transition: background-color .3s ease-in-out; } }
.nav__secondary-link:hover, .nav__secondary-link:focus {
color: #ffffff; }
@media (min-width: 992px) {
.nav__secondary-link:hover, .nav__secondary-link:focus {
color: #000000; } }
.nav__secondary-link a {
color: #ffffff; }
.nav__secondary-link--has-list {
display: list-item;
align-items: center; }
@media (min-width: 992px) {
.nav__secondary-link--has-list {
position: relative; } }
.nav__secondary-link--has-list:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 8%;
width: 15px;
height: 15px;
background: url(../_img/arrow-right-icon.svg) no-repeat center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media (min-width: 992px) {
.nav__secondary-link--has-list:after {
content: '';
display: block;
position: absolute;
right: 15px;
top: 21px;
width: 15px;
height: 15px;
background: url(../_img/nav-arrow-blue.png) no-repeat right center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all .3s ease-in-out; } }
.nav__secondary-link--back {
display: flex;
align-items: center; }
.nav__secondary-link--back:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 2%;
width: 15px;
height: 15px;
background: url("../_img/arrow-right-icon.svg") no-repeat center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); }
.nav__secondary-link--is-active:after {
-webkit-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg); }
.nav__secondary-link span:first-child {
margin-left: 5%; }
@media (min-width: 992px) {
.nav__secondary-link span:first-child {
margin-left: 0; } }
.nav__tertiary-list {
position: absolute;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 100%;
width: 100%;
background-color: #1D242B;
transition: left .4s ease-in-out; }
@media (min-width: 992px) {
.nav__tertiary-list {
position: relative;
left: 0;
margin-bottom: 0;
padding-left: 0;
max-height: 0;
background: inherit;
overflow: hidden;
opacity: 0;
list-style: none;
background-color: #F7F8F9;
transition: none .4s ease-in-out; } }
.nav__tertiary-list--is-active {
left: 0; }
@media (min-width: 992px) {
.nav__tertiary-list--is-active {
top: 25%;
bottom: auto;
max-height: none;
overflow: visible;
opacity: 1; } }
@media (min-width: 992px) {
.nav__tertiary-item {
font-size: 0.75rem;
font-weight: bold;
text-align: left; } }
@media (min-width: 992px) {
.nav__tertiary-item:first-child {
padding-top: 10px; } }
@media (min-width: 992px) {
.nav__tertiary-item:last-child {
padding-bottom: 10px; } }
.nav__tertiary-link {
display: block;
position: relative;
padding: 3% 4% 3% 4%;
font-family: HelveticaNeueLTW05-75Bold, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #ffffff;
border-bottom: 1px solid #585755; }
@media (min-width: 992px) {
.nav__tertiary-link {
padding: 15px 15px 15px 35px;
border-bottom: 0;
color: #000000; }
.nav__tertiary-link:hover, .nav__tertiary-link:focus {
background-color: #c1dbf8;
transition: background-color .3s ease-in-out; } }
.nav__tertiary-link:hover, .nav__tertiary-link:focus {
color: #ffffff; }
@media (min-width: 992px) {
.nav__tertiary-link:hover, .nav__tertiary-link:focus {
color: #000000; } }
.nav__tertiary-link--has-list {
display: list-item;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (min-width: 992px) {
.nav__tertiary-link--has-list {
position: relative; } }
.nav__tertiary-link--has-list:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 8%;
width: 15px;
height: 15px;
background: url(../_img/arrow-right-icon.svg) no-repeat center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
@media (min-width: 992px) {
.nav__tertiary-link--has-list:after {
content: '';
display: block;
position: absolute;
right: 15px;
top: 21px;
width: 15px;
height: 15px;
background: url(../_img/nav-arrow-blue.png) no-repeat right center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; } }
.nav__tertiary-link--has-list--is-active:after {
-webkit-transform: translateY(-50%) rotate(-180deg);
-ms-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg); }
.nav__tertiary-link--back {
display: flex;
align-items: center;
color: #ffffff; }
.nav__tertiary-link--back:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 2%;
width: 15px;
height: 15px;
background: url("../_img/arrow-right-icon.svg") no-repeat center;
background-size: 15px 15px;
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); }
.nav__tertiary-link--back:hover, .nav__tertiary-link--back:focus {
color: #ffffff; }
.nav__tertiary-link span:first-child {
margin-left: 5%; }
@media (min-width: 992px) {
.nav__tertiary-link span:first-child {
margin-left: 0; } }
.nav__quaternary-list {
position: absolute;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 100%;
width: 100%;
background: #1D242B;
transition: left .4s ease-in-out; }
@media (min-width: 992px) {
.nav__quaternary-list {
position: relative;
left: 0;
margin-bottom: 0;
padding-left: 0;
max-height: 0;
background: inherit;
overflow: hidden;
opacity: 0;
list-style: none;
background: #F7F8F9;
transition: none .4s ease-in-out; } }
.nav__quaternary-list--is-active {
left: 0; }
@media (min-width: 992px) {
.nav__quaternary-list--is-active {
top: 25%;
bottom: auto;
max-height: none;
overflow: visible;
opacity: 1; } }
.nav__quaternary-link {
display: block;
position: relative;
padding: 3% 4% 3% 4%;
color: #ffffff;
border-bottom: 1px solid #585755; }
@media (min-width: 992px) {
.nav__quaternary-link {
padding: 15px 15px 15px 55px;
border-bottom: 0;
color: #000000; }
.nav__quaternary-link:hover, .nav__quaternary-link:focus {
background-color: #c1dbf8;
transition: background-color .3s ease-in-out; } }
.nav__quaternary-link:hover, .nav__quaternary-link:focus {
color: #ffffff; }
@media (min-width: 992px) {
.nav__quaternary-link:hover, .nav__quaternary-link:focus {
color: #000000; } }
/*colors*/
@media (min-width: 1250px) {
.nav {
width: 800px !important; } }
@media (max-width: 1250px) {
.nav {
width: 875px !important; } }
@media (max-width: 992px) {
.nav {
width: 99% !important; } }
@media (min-width: 992px) {
.navbar {
padding: 0 15px; } }
@media (min-width: 1568px) {
.nav__primary-item + .nav__primary-item {
margin-left: 1%; } }
@media (max-width: 1568px) {
.skip-to-main-content {
left: 21% !important; }
.nav__primary-item + .nav__primary-item {
margin-left: 1% !important; } }
@media (max-width: 1366px) {
.nav__primary-link {
padding: 10px 1px 10px 0; }
.skip-to-main-content {
left: 20% !important; }
.nav__primary-item + .nav__primary-item {
margin-left: 2% !important; } }
@media (max-width: 1189px) {
.nav__primary-link {
padding: 10px 1px 10px 0; }
.skip-to-main-content {
left: 20% !important; }
.nav__primary-item + .nav__primary-item {
margin-left: 3% !important; } }
@media (max-width: 1089px) {
.nav__primary-link {
padding: 10px 1px 10px 0; }
.skip-to-main-content {
left: 19% !important; }
.nav__primary-item + .nav__primary-item {
margin-left: 1% !important; } }
@media (max-width: 1055px) {
.nav__primary-link {
padding: 10px 1px 10px 0; }
.skip-to-main-content {
left: 20% !important; }
.nav__primary-item + .nav__primary-item {
margin-left: 0.5% !important; } }
@media (max-width: 1026px) {
.nav__primary-link {
/*padding: 3% 4% 3% 4%;*/ }
.skip-to-main-content {
left: 20% !important; }
.nav__primary-item + .nav__primary-item {
margin-left: 0.2% !important; } }
@media (max-width: 991px) {
.nav__primary-link {
padding: 3% 4% 3% 4%; } }
.nav__overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5); }
.skip-to-main-content {
position: absolute;
left: 25%;
top: -3em;
/*Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
color: #1e1e1e;
padding: 0.75em;
white-space: nowrap;
font-size: 1.000em; }
.skip-to-main-content:focus {
text-decoration: underline !important;
color: #1e1e1e !important;
top: 8px; }
.skip-to-main-content-xs {
position: absolute;
left: 50%;
top: -3em;
/*Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
color: #1e1e1e;
padding: 0.75em;
white-space: nowrap;
font-size: 0.875em; }
.skip-to-main-content-xs:focus {
top: 12px;
text-decoration: underline !important;
color: #1e1e1e !important; }
@media (max-width: 480px) {
.skip-to-main-content-xs {
left: 60%; } }
.body--is-fixed {
overflow-y: hidden;
position: relative; }
@media (max-width: 992px) {
.body--is-fixed {
position: fixed;
width: 100vw; } }
.mobile--menu-max-height {
overflow-y: auto;
overflow-x: hidden; }
.mobile--menu-max-height a {
outline: none; }
/***************************************
HEADER SECTION
***************************************/
.header-section {
padding: 20px;
background-color: #ffffff; }
.header-section__column {
display: flex;
flex-direction: row; }
@media (max-width: 991px) {
.header-section__column {
flex-direction: column; } }
.header-section__title-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
padding: 10px 20px; }
@media (max-width: 991px) {
.header-section__title-content {
padding: 0;
border-right: 0; } }
.header-section__title-content--without-padding {
padding: 0; }
.header-section__title {
border-bottom: 1px solid #bcbdbd; }
@media (max-width: 991px) {
.header-section__title {
border-bottom: 0; } }
.header-section__title-no-border {
border: 0; }
.header-section__title-text {
padding: 20px 0 0; }
@media (max-width: 991px) {
.header-section__title-text {
padding: 0 0 10px 0;
border-bottom: 1px solid #bcbdbd; } }
@media (max-width: 991px) {
.header-section__title-text--no-border {
text-align: center;
border: 0; } }
.header-section__select-content {
padding: 10px 0 10px 30px;
border-left: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.header-section__select-content {
margin-top: 15px;
padding: 0;
border-left: none; } }
.header-section__select-title {
font-size: 1.000em;
font-weight: bold; }
@media (max-width: 991px) {
.header-section__select-title {
margin-bottom: 5px; } }
.header-section__select-title--light {
padding-top: 5px;
font-size: 0.875em;
font-weight: lighter; }
.header-section__select-sub-title {
margin-bottom: 5px;
font-size: 0.875em; }
.header-section__content {
padding-top: 10px; }
.header-section__content-text {
padding-bottom: 5px; }
.header-section__content-text--big {
font-size: 2.250em; }
.header-section__content-text--bold {
font-weight: bold; }
.header-section__content-section {
padding: 20px 40px;
background-color: #f3f3f2;
border-top: 1px solid #bcbdbd;
border-bottom: 1px solid #bcbdbd; }
@media (max-width: 991px) {
.header-section__content-section {
margin: 0 -20px;
padding: 20px; } }
.header-section__content-disclaimer {
text-align: left; }
@media (max-width: 991px) {
.header-section__content-disclaimer {
text-align: center; } }
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
.header-section {
padding: 20px 60px; } }
/***************************************
CONTENT-BLOCK
***************************************/
.content-block {
position: relative;
background-color: #ffffff; }
@media (min-width: 992px) {
.content-block {
/* overflow: hidden;*/ } }
.content-block + .content-block, .content-block ~ .content-block {
margin-top: 20px; }
@media (min-width: 992px) {
.content-block + .content-block, .content-block ~ .content-block {
margin-top: 30px; } }
.content-block--full {
padding: 0 15px; }
@media (min-width: 992px) {
.content-block--full {
padding: 0; } }
.content-block--without-page-header {
border-top-right-radius: 0;
border-top-left-radius: 0; }
@media (min-width: 992px) {
.content-block--without-page-header {
border-top-right-radius: 0;
border-top-left-radius: 0; } }
@media (max-width: 767px) {
.content-block--without-top-spacing {
margin-top: 0 !important;
border-top: 1px solid #E7E7E8; } }
@media (min-width: 992px) {
.content-block--with-bottom-spacing {
margin-top: 30px;
margin-bottom: 30px; } }
@media (max-width: 767px) {
.content-block--with-top-border {
border-top: 1px solid #E7E7E8; } }
@media (min-width: 768px) {
.content-block--with-top-spacing {
margin-top: 20px; } }
.content-block__page-title {
padding: 0 0; }
@media (min-width: 992px) {
.content-block__page-title {
padding: 0 0; } }
@media (min-width: 992px) {
.content-block__page-title--retailer {
padding: 0; } }
.content-block__page-title-icon {
padding-right: 10px; }
.content-block__page-title-text {
margin-bottom: 0;
padding: 20px 0;
border-bottom: 1px solid #E7E7E8; }
@media (min-width: 992px) {
.content-block__page-title-text {
padding: 30px 0;
font-size: 3.125em; } }
.content-block__page-subtitle-text {
padding-bottom: 50px;
border-bottom: 1px solid #E7E7E8;
font-size: 1.5rem; }
.content-block__page-title-subtext {
padding: 30px 0;
border-bottom: 1px solid #E7E7E8; }
.content-block__page-title-text--just-shows-title {
border-bottom: none; }
.content-block__page-content-retailer {
padding: 0 -10; }
@media (min-width: 768px) {
.content-block__page-content-retailer {
padding: 0 -10; } }
.content-block__retailer {
padding: 0 -10; }
@media (min-width: 768px) {
.content-block__retailer {
padding: 0 -10; } }
.content-block__page-content {
padding: 20px 0; }
@media (min-width: 768px) {
.content-block__page-content {
padding: 30px 0; } }
@media (max-width: 991px) {
.content-block__page-content--my-vehicle-ipad {
padding: 20px 10px; } }
@media (max-width: 767px) {
.content-block__page-content--my-vehicle-ipad {
padding: 20px 25px; } }
.content-block__page-content--small-padding {
padding: 10px; }
@media (min-width: 992px) {
.content-block__page-content--small-padding {
padding: 20px 0; } }
.content-block__page-content--large-padding {
padding: 30px 40px 90px; }
@media (max-width: 767px) {
.content-block__page-content--large-padding {
padding: 20px 0; } }
.content-block__page-content--segmented {
border-top: 1px solid #E7E7E8; }
.content-block__page-content--with-border {
border-bottom: 1px solid #E7E7E8; }
.content-block__page-content--with-bg {
text-align: center;
background-color: #f3f3f2; }
@media (max-width: 767px) {
.content-block__page-content--with-bg {
text-align: left; } }
.content-block__page-content--wysiwyg ul {
display: table;
margin-left: 0;
padding-left: 0;
list-style: none; }
.content-block__page-content--wysiwyg ul li {
display: table-row; }
.content-block__page-content--wysiwyg ul li:before {
content: "\2022";
display: table-cell;
padding-right: 0.4em; }
@media (max-width: 767px) {
.content-block__page-content--no-padding-mobile {
padding: 0; } }
.content-block__page-content--with-accordion {
padding: 0 40px; }
.content-block__page-content-tooltip {
height: 20px; }
@media (min-width: 768px) {
.content-block__page-content-row {
padding-left: 0; } }
.content-block__sub-header {
font-size: 2.286em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.content-block__sub-header--retailer {
margin-bottom: 0; }
.content-block__sub-text {
font-size: 0.875em; }
.content-block__sub-text--bold {
padding-bottom: 5px;
font-weight: bold; }
.content-block__phone-number--lg {
display: block;
margin-bottom: 20px;
font-size: 1.375em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.content-block__sub-link {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
@media (max-width: 991px) {
.content-block__sub-link--with-padding {
display: inline-block;
padding: 20px 0; } }
.content-block__page-content p:last-child {
margin-bottom: 0; }
.content-block__inline-button {
margin-bottom: 0; }
.content-block__icon {
width: 50px; }
.content-block__setting {
padding: 20px 0;
border-bottom: 1px solid #E7E7E8; }
.content-block__setting--with-close {
padding: 20px 0;
border-bottom: 1px solid #E7E7E8; }
@media (max-width: 991px) {
.content-block__setting--with-close {
position: relative; } }
@media (max-width: 991px) {
.content-block__close-icon {
position: absolute;
top: 10px;
right: 0; }
.content-block__close-icon img {
width: 25px; } }
.content-block__section-header {
padding: 0 0 15px;
font-size: 1.5em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
border-bottom: 1px solid #E7E7E8; }
@media (min-width: 992px) {
.content-block__section-header {
padding: 15px 0; } }
.content-block__section-header--no-border {
border-bottom: none; }
.content-block__section-header-link {
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: 300;
font-size: .95rem;
text-decoration: none;
text-transform: none; }
.content-block__section-header-icon {
margin-top: -4px;
margin-right: 3px;
width: 20px; }
.content-block__blade {
margin-bottom: 20px; }
@media (min-width: 992px) {
.content-block__blade {
margin-bottom: 30px; } }
.content-block__warranty-intervals {
padding: 0 10px; }
.content-block__form-fields {
padding: 20px 0; }
@media (min-width: 992px) {
.content-block__form-fields {
padding: 30px 0; } }
.content-block__roadside-assistance {
padding: 20px 0; }
@media (min-width: 992px) {
.content-block__roadside-assistance {
padding: 30px 0; } }
.content-block__row {
padding: 0 10px; }
.content-block__column {
padding: 20px 0; }
.content-block__column + .content-block__column {
border-top: 1px solid #E7E7E8; }
@media (min-width: 768px) {
.content-block__column {
padding: 0 0; }
.content-block__column + .content-block__column {
border-top: none;
border-left: 1px solid #E7E7E8; } }
.content-block__column-header {
margin-bottom: 20px; }
.content-block__column-sub-header {
margin-bottom: 20px; }
.content-block__panel {
padding: 20px; }
.content-block__panel-header {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0; }
.content-block__panel-header--dark {
padding: 20px;
background-color: #000000;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
.content-block__panel-upgrade {
padding-right: 100px;
text-align: left; }
@media (max-width: 767px) {
.content-block__panel-upgrade {
padding: 0; } }
.content-block__panel-sub-header {
margin-top: 25px;
font-size: 1.000em; }
.content-block__panel-header-title {
margin: 0;
color: #ffffff; }
.content-block__panel-header-sub-title {
padding-right: 20px;
font-size: 1.125em;
font-weight: bold; }
.content-block__header-icon {
padding-right: 10px;
height: 60px; }
@media (max-width: 767px) {
.content-block__header-icon {
padding-right: 0;
margin-bottom: 10px; } }
.content-block__header sup {
top: -1em;
font-size: 45%; }
.content-block__header--with-close {
position: relative; }
.content-block__header-close {
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 40px;
height: 40px;
text-align: center;
border: 1px solid #1971D4;
border-radius: 5px;
cursor: pointer; }
.content-block__header-close-left {
top: 0;
left: 0;
width: 40px;
height: 40px;
text-align: center;
border: 1px solid #1971D4;
border-radius: 5px;
cursor: pointer;
z-index: 100; }
.content-block__header-close-icon {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
transform: translate(-50%, -50%); }
.content-block__panel-content {
padding: 20px; }
.content-block__panel-content--without-padding {
padding: 0; }
.content-block__panel-content--top-padding {
padding-top: 20px; }
.content-block__panel-content--with-border-left {
padding-top: 0;
padding-left: 30px;
border-left: 1px solid #E7E7E8; }
@media (max-width: 767px) {
.content-block__panel-content--with-border-left {
padding: 0;
border-left: none; } }
.content-block__panel-content--dark {
background-color: #efefef; }
.content-block__panel-content--with-border {
border-bottom: 1px solid #E7E7E8; }
.content-block__panel-content--full-width {
margin: 0 -20px;
background-color: #efefef; }
.content-block__panel-content-heading {
text-align: center; }
.content-block__panel-content-two-column {
display: flex;
flex-direction: row;
align-items: center; }
@media (max-width: 767px) {
.content-block__panel-content-two-column {
flex-direction: column;
text-align: center; } }
@media (max-width: 767px) {
.content-block__panel-content-two-column--left {
align-items: flex-start; } }
.content-block__panel-header-column {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px; }
@media (max-width: 767px) {
.content-block__panel-header-column {
flex-direction: column;
align-items: flex-start; } }
.content-block__panel-content-title {
margin-bottom: 10px;
font-size: 1.375em; }
.content-block__panel-content-title--small {
font-size: 1.125em; }
.content-block__panel-content-sub-title {
font-size: 1.250em; }
.content-block__panel-content-sub-title--small {
font-size: 1.125em; }
@media (max-width: 767px) {
.content-block__panel-content-text {
display: none; } }
.content-block__panel-row {
display: flex;
flex-wrap: wrap;
justify-content: center; }
@media (min-width: 768px) {
.content-block__panel-row-item-50 {
width: 50%; } }
@media (max-width: 767px) {
.content-block__panel-content-list {
margin-bottom: 0; } }
.content-block__panel-disclaimer {
margin-top: 15px;
text-align: center; }
.content-block__battery {
display: flex;
position: relative;
justify-content: center;
/*margin: auto;*/
height: 60px;
width: 240px;
border: 5px solid #d2d2d2;
border-radius: 5px; }
@media (max-width: 767px) {
.content-block__battery {
margin: 0; } }
.content-block__battery:before {
display: block;
content: "";
position: absolute;
top: 15px;
right: -10px;
height: 20px;
width: 5px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
background-color: #d2d2d2; }
.content-block__battery-item {
margin-top: 5px;
margin-right: 3px;
height: 40px;
width: 8px;
border-radius: 8px; }
.content-block__battery-item--active {
background-color: #36be39; }
.content-block__battery-item--inactive {
background-color: #d2d2d2; }
/* Bluetooth - Pair your Phone */
.content-block__bluetooth-pair-img {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
width: 100%;
height: 230px; }
@media (max-width: 767px) {
.content-block__bluetooth-pair-img {
height: auto; } }
.content-block__bluetooth-pair-text {
height: 100px;
text-align: center; }
@media (max-width: 767px) {
.content-block__bluetooth-pair-text {
margin-bottom: 40px !important;
height: 40px; } }
/* Media Query to Hide Content */
@media all and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation: portrait) {
.hideOnTablet {
display: none; } }
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {
.hideOnTabletPro {
display: none; } }
@media (max-width: 576px) {
.d-xsm-block {
display: block !important; } }
/***************************************
COUPONS
***************************************/
.coupons {
margin: 0 -25px;
padding: 0 10px; }
@media (min-width: 992px) {
.coupons {
margin: 0 -40px -30px;
padding: 0; } }
.coupons--single {
margin: 20px 0 0;
padding: 0; }
@media (min-width: 992px) {
.coupons--single {
margin: 0; } }
@media (min-width: 768px) {
.coupon__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
@media (min-width: 768px) {
.coupon__row-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.coupon__row-item .coupons__body-copy {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto; } }
.coupons__coupon {
padding: 10px;
border: 2px dashed #cccccc; }
@media (min-width: 768px) {
.coupons__coupon--horizontal {
border-left: none;
border-right: none; } }
@media (min-width: 992px) {
.coupons__coupon--horizontal {
padding: 15px 20px; } }
.coupons__coupon--horizontal + .coupons__coupon--horizontal {
border-left: 2px dashed #cccccc; }
.coupons__coupon--vertical {
padding-top: 30px;
text-align: center; }
@media (min-width: 768px) {
.coupons__coupon--vertical {
border: none; } }
@media (min-width: 992px) {
.coupons__coupon--vertical {
padding: 15px 20px; } }
.coupons__coupon--vertical + .coupons__coupon--vertical {
border-left: 2px dashed #cccccc; }
.coupons__image {
display: block;
margin: 0 auto 30px;
max-width: 100%; }
.coupons__title {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.coupons__title--vertical {
margin-bottom: 30px; }
.coupons__body-copy p:last-child {
margin-bottom: 16px; }
.coupons__body-copy ul {
display: table;
margin-left: 0;
padding-left: 0;
font-size: 0.875em;
list-style: none; }
.coupons__body-copy ul li {
display: table-row; }
.coupons__body-copy ul li:before {
content: "\2022";
display: table-cell;
padding-right: 0.4em; }
.coupons__button {
display: block;
margin: 10px 0;
padding: 15px;
width: auto;
font-size: 0.813em; }
@media (min-width: 992px) {
.coupons__button {
display: inline-block; } }
.coupons__side-button {
margin: 0 0 5px; }
.coupons__disclaimer {
font-size: 0.688em; }
.buttons__text-link {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.buttons__text-link--vertical-spacing {
display: block;
padding: 10px 0; }
.coupons__retailer-logo {
margin-bottom: 20px;
width: 220px;
max-width: 100%;
max-height: 150px; }
.discountAppliedText {
font-weight: bold;
color: #ca2d11; }
.promoCodeApplied {
color: #000000; }
/***************************************
BUTTON-GRID
***************************************/
.button-grid::after {
content: "";
display: table;
clear: both; }
.button-grid--home-page {
margin-top: 20px; }
.button-grid__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
@media (max-width: 991px) {
.button-grid__row {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }
.button-grid__row-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 10px; }
.button-grid__row-item:last-child {
margin-right: 0; }
.button-grid__item {
width: 50%;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.button-grid__item + .button-grid__item {
padding-left: 10px; }
.button-grid__item:nth-child(3) {
padding-left: 0;
width: 100%; }
.button-grid__button {
margin-bottom: 15px; }
@media (min-width: 576px) {
.button--medium {
max-width: 325px; } }
/***************************************
LOGO-BAR
***************************************/
.logo-bar {
padding: 10px 15px;
text-align: center;
background-color: #ffffff; }
@media (min-width: 768px) {
.logo-bar {
text-align: left; } }
@-moz-document url-prefix() {
.logo-bar__link:hover, .logo-bar__link:focus {
outline: none;
outline-offset: 0; } }
.logo-bar__logo {
width: 160px;
cursor: pointer; }
/***************************************
LOGIN
***************************************/
.body-bg-color {
background-color: #1D242B; }
.logo-bar.logo-bar--padd {
padding: 15px 50px;
margin-left: auto; }
@media (max-width: 991px) {
.logo-bar.logo-bar--padd {
padding: 10px 15px; } }
.logo-bar__help-link {
text-transform: initial;
color: #1971D4; }
.login-section__content {
padding: 10px;
color: #fff; }
.login {
position: relative;
display: block;
background-color: #fff;
border-radius: 5px; }
@media (max-width: 991px) {
.login {
width: 100%; } }
@media (max-width: 767px) {
.login {
border-radius: 0; } }
.login-form {
padding: 20px; }
.login-form::after {
content: "";
display: table;
clear: both; }
@media (max-width: 767px) {
.login-form {
padding: 20px 20px; } }
.login-form__header {
margin-bottom: 0;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.content-block--space, .space-top {
margin-top: 4em; }
@media (max-width: 575px) {
.content-block--space, .space-top {
margin-top: 1em; } }
.content-block--space .content-block__section-header, .space-top .content-block__section-header {
border-bottom: none; }
.content-block--space {
margin-bottom: 4em; }
.login-features__text {
margin-bottom: 0;
font-weight: 600;
color: grey;
line-height: 5px; }
.login__info-text {
margin: 3% 7% 0 7%;
color: #1D242B;
font-size: 0.85em; }
.playstore-content {
margin-top: 10px; }
.login__input-wrapper {
position: relative; }
.login__input {
width: auto;
min-width: 100%;
border-radius: 5px;
margin-bottom: 1em; }
.login__input--with-button {
padding-right: 30px; }
.login__input-button {
position: absolute;
top: 12px;
right: 5px;
z-index: 10;
padding: 0;
border: none;
background: transparent; }
.login__input-button:focus, .login__input-button:active {
outline: none; }
.login__input-icon {
width: 24px; }
.login__btn {
width: auto;
min-width: 100%;
border-radius: 5px;
margin-bottom: 1em; }
.login__btn--blue {
background-color: #1971D4;
color: #ffffff;
border: none; }
.login__btn--white {
color: #1971D4;
background-color: transparent;
border-color: #1971D4; }
.login-section__margin-10 {
margin-top: 10px;
margin-bottom: 10px; }
.login-section__form {
position: absolute;
left: 65%; }
.login-section__header-flex {
flex-basis: 10%; }
.login__form-fields--mt-10 {
margin-top: 10px; }
.login-section__mr {
margin-left: 35px; }
@media (max-width: 575px) {
.login-section__mr {
margin-right: 10px; } }
.login-section__mr a {
color: #1D242B;
cursor: pointer; }
.flex--small {
flex-basis: 40%; }
.card-deck--gray-bg {
background-color: #f8f8f8; }
.flex--large {
flex-basis: 60%; }
.card-deck--margin {
flex: 1; }
@media (min-width: 1200px) {
.card-deck--margin {
margin: 55px 100px 0 100px; } }
@media (max-width: 575px) {
.card-deck--margin {
margin: 0; } }
.content-block--spacer {
flex-basis: 0px;
margin: 20px;
color: #90959A; }
.accordion__header-text--letter-space {
letter-spacing: -1px; }
.hero__content.hero__content--login {
padding: 0;
width: 100%;
background-color: transparent;
float: right; }
.hero__content.hero__content--login .login-form__header {
color: #1D242B; }
@media (max-width: 575px) {
.hero__content.hero__content--login {
background-color: transparent;
padding: 0px; } }
.card-header--margin {
margin-bottom: 1em; }
.login__input--btn-blue {
margin-bottom: 10px; }
@media (max-width: 991px) {
.flex--reverse {
display: flex;
flex-direction: column-reverse; }
.margin-right-10 {
margin-right: 10px; } }
.card__image {
width: 100%;
max-width: 100%;
max-height: 450px; }
.card__background--starlink {
background: url(/asset/_img/starlink_app.jpg) no-repeat;
background-size: cover;
background-position: center center; }
@media (min-width: 576px) {
.card__background--starlink {
min-height: 350px; } }
.card__background--login {
background: url(/asset/_img/login-page-app.png) no-repeat;
background-size: cover;
background-position: center center; }
@media (min-width: 576px) {
.card__background--login {
min-height: 350px; } }
.body-content--full-width {
padding: 50px 0 0 0; }
@media (max-width: 575px) {
.body-content--full-width {
padding: 30px 0; }
.body-content--full-width .content-block {
padding: 0 0.625rem; }
.content-block--spacer {
margin: 20px 0; }
.body-content--full-width.body-content {
padding: 50px 0; } }
.login__form-fields--ml-10 {
margin-left: 10px; }
.login-form__link {
font-size: 0.85em; }
@media (min-width: 992px) {
.flex--half-width {
width: 50%; } }
.help-info {
text-align: left;
padding: 10px 0; }
.help-info .need-help__text {
margin-top: -5px;
margin-bottom: 0.6em;
font-size: 0.9em; }
.help-modal .modal-body {
text-align: left;
padding: 10px 30px; }
.help-info__description {
border-bottom: 1px solid #c6c8ca;
padding: 10px 0; }
.help-info__description a {
margin-right: 30px; }
@media (max-width: 767px) {
.help-info__description span:first-child {
display: block; } }
.help-info__description--no-border {
border-bottom: none;
font-size: 0.75em; }
.app-info {
padding: 8px 0;
color: #90959A;
background: #1D242B;
position: fixed;
bottom: 0;
margin: auto;
z-index: 100;
text-align: center;
width: 100%;
transition: 0.5s ease-in-out; }
.app-info.app-info--hide {
transform: translateY(100%); }
@media (min-width: 576px) {
.app-info .app-info__wrapper {
align-items: center;
display: flex;
justify-content: center;
position: relative; } }
.app-info .app-info__content {
display: flex;
align-items: center; }
.app-info .app-info__text {
margin: 0 20px;
font-weight: normal;
font-size: 0.9em; }
.app-info .app-info__close-img {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
height: 15px;
cursor: pointer; }
.app-info .card__app-buttons--with-margin {
margin-top: 5px; }
.app-info .card__app-buttons img {
width: 105px; }
@media (max-width: 575px) {
.app-info {
padding: 24px 0 20px; }
.app-info .app-info__content {
display: block; }
.app-info .app-info__close-img {
top: 12px;
right: 12px;
transform: translateY(0); } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
input::-ms-reveal, input::-ms-clear {
display: none; } }
@supports (-ms-accelerator: true) {
input::-ms-reveal, input::-ms-clear {
display: none; } }
input[type="password"]::-ms-clear, input[type="password"]::-ms-reveal {
display: none; }
/***************************************
LOGIN-FEATURES
***************************************/
.login-features {
background-color: #ffffff; }
@media (min-width: 992px) {
.login-features {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
.login-features figure {
margin-bottom: 60px; }
.login-features__description {
background: #ffffff;
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(0deg, #ffffff 34%, #dadada 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dadada',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */ }
.login-features__description-content {
padding: 20px; }
@media (min-width: 992px) {
.login-features__description-content {
padding: 40px; } }
.login-features__heading {
margin-bottom: 25px;
font-size: 1.250em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
line-height: 1.25em; }
@media (min-width: 992px) {
.login-features__heading {
font-size: 1.500em; } }
.login-features__button {
margin-top: 30px; }
.login-features__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 30px;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.login-features__list-item {
margin-bottom: 60px;
width: 50%; }
@media (min-width: 768px) {
.login-features__list-item {
width: 25%; } }
@media (min-width: 768px) {
.login-features__list-item--last-row {
margin-bottom: 0; } }
.login-features__icon {
max-width: 80%;
max-height: 45px;
margin-bottom: 30px; }
.login-features__icon-label {
display: block;
font-size: 0.85em; }
@media (min-width: 992px) {
.login-features__icon-label {
font-size: 1.000em; } }
/***************************************
DOWNLOAD-APP
***************************************/
.download-app::after {
content: "";
display: table;
clear: both; }
@media (min-width: 768px) {
.download-app {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
.download-app__description {
padding: 70px 30px; }
.download-app__heading {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
line-height: 1.3em; }
.download-app__buttons {
display: inline-block;
margin-bottom: 10px;
text-align: center; }
.download-app__buttons + .download-app__buttons {
padding-left: 10px; }
@media (min-width: 768px) and (max-width: 1149px) {
.download-app__buttons + .download-app__buttons {
padding-left: 0; } }
.download-app__image {
min-height: 220px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden; }
.download-app__image--right {
border-radius: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; }
.download-app__image--mysubaru {
background: url(../_img/mysubaru-app-img.jpg) no-repeat center center;
background-size: cover; }
.download-app__image--starlink {
background: url(../_img/mysubaru-app-img.jpg) no-repeat center center;
background-size: cover; }
/***************************************
VEHICLE-ATTENTION-BAR
***************************************/
.vehicle-attention-bar {
position: relative;
background-color: #1D242B;
z-index: 900; }
.vehicle-attention-bar .vehicle-form-info--menu-show {
display: block !important; }
@media (min-width: 992px) {
.vehicle-attention-bar__sections {
padding: 1rem 0; } }
.vehicle-attention-bar--is-fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 20000; }
.vehicle-attention-bar--small {
background-image: none; }
.vehicle-attention-bar--small .vehicle-attention-bar__sections {
background-color: #1D242B;
padding: 0; }
@media (max-width: 991px) {
.vehicle-attention-bar--small .vehicle-attention-bar__section:first-child .vehicle-attention-bar__section-content {
width: inherit;
padding-left: inherit; } }
.vehicle-attention-bar--small .vehicle-attention-bar--small-section:first-child {
display: flex; }
.vehicle-attention-bar--small .vehicle-attention-bar__heading {
display: block; }
@media (min-width: 992px) {
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-select-toggle {
position: absolute;
height: 20px; }
.vehicle-attention-bar--small .vehicle-attention-bar__small-text {
margin-bottom: 0; } }
@media (min-width: 992px) {
.vehicle-attention-bar--small .vehicle-attention-bar__small-text {
display: inline-block; } }
@media (min-width: 992px) {
.vehicle-attention-bar--small .vehicle-attention-bar__text-link {
display: inline-block;
padding: 0 0 0 1rem; } }
.vehicle-attention-bar--small .vehicle-attention-bar__section {
display: none;
background-color: transparent; }
.vehicle-attention-bar--small .vehicle-attention-bar__section--vehicle {
display: block; }
@media (min-width: 1200px) {
.vehicle-attention-bar--small .vehicle-attention-bar__section--vehicle-is-active {
flex: 0 0 25%; } }
.vehicle-attention-bar--small .vehicle-attention-bar__section--vehicle-is-active .vehicle-attention-bar__vin-number {
display: none !important; }
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-wrapper--is-selectable .vehicle-attention-bar__vehicle-info-toggle {
flex: 1 0 auto; }
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-toggle {
padding-right: 40px; }
@media (min-width: 992px) {
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-toggle {
flex: 0 0 auto; } }
.vehicle-attention-bar--small .vehicle-attention-bar__vin {
display: none; }
@media (max-width: 767px) {
.vehicle-attention-bar--small .vehicle-attention-bar__vin {
display: block; } }
.vehicle-attention-bar--small .vehicle-attention-bar__vin-number {
display: block; }
@media (max-width: 991px) {
.vehicle-attention-bar--small .vehicle-attention-bar__vin-number {
flex: 2;
-webkit-box-flex: 2; } }
@media (max-width: 767px) {
.vehicle-attention-bar--small .vehicle-attention-bar__vin-number {
display: none !important; } }
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-wrapper {
min-height: 0; }
@media (min-width: 992px) {
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-wrapper {
min-height: 0; } }
.vehicle-attention-bar--small .vehicle-attention-bar--small-active {
/*max-width: 45%;
min-height: 0;*/ }
@media (max-width: 991px) {
.vehicle-attention-bar--small .vehicle-attention-bar--small-active {
max-width: 100%; } }
@media (max-width: 767px) {
.vehicle-attention-bar--small .vehicle-attention-bar--small-active {
max-width: 100%; } }
.vehicle-attention-bar--small .vehicle-attention-bar--small-active .vehicle-attention-bar__vehicle-info-wrapper {
min-height: 0; }
.vehicle-attention-bar__overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 899;
background-color: rgba(0, 0, 0, 0.5); }
.vehicle-attention-bar__vin-number {
display: none;
font-size: 0.750em;
color: #CECECE;
vertical-align: middle; }
.vehicle-attention-bar__sections, .vehicle-attention-bar__sections-info {
margin: 0 auto;
max-width: 1345px; }
@media (min-width: 768px) {
.vehicle-attention-bar__sections, .vehicle-attention-bar__sections-info {
display: flex;
position: relative;
flex-wrap: wrap; } }
@media (min-width: 992px) {
.vehicle-attention-bar__sections, .vehicle-attention-bar__sections-info {
flex-wrap: nowrap; } }
.vehicle-attention-bar__sections-info {
position: relative;
/*background: $white;*/ }
@media (max-width: 991px) {
.vehicle-attention-bar__sections-info {
border-bottom: 1px solid #E7E7E8; } }
.vehicle-attention-bar__section {
display: table;
position: relative;
padding: 15px 50px 15px 15px;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.25);
background-color: #1D242B; }
@media (min-width: 992px) {
.vehicle-attention-bar__section {
border-top: none; } }
@media (min-width: 768px) {
.vehicle-attention-bar__section {
display: flex;
padding: 10px;
flex: 0 1 auto;
align-items: center; }
.vehicle-attention-bar__section {
border-left: 1px solid rgba(255, 255, 255, 0.25); } }
.vehicle-attention-bar__section:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 15px;
z-index: 10;
width: 0.875em;
height: 23px;
background: url(../_img/arrow-right.png) no-repeat center center;
background-size: cover;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media (min-width: 992px) {
.vehicle-attention-bar__section:after {
display: none; } }
.vehicle-attention-bar__section:first-child {
border: none;
/*@include media-breakpoint-up(md){
.vehicle-attention-bar__section-content{
width: inherit;
padding-left: 27px;
}
}*/ }
@media (max-width: 767px) {
.vehicle-attention-bar__section:first-child {
border-bottom: none; } }
.vehicle-attention-bar__section:first-child:after {
display: none; }
@media (min-width: 768px) {
.vehicle-attention-bar__section--double {
flex: 2 1 50%; } }
.vehicle-attention-bar__section--vehicle {
z-index: 40;
padding: 0;
font-size: 1em;
line-height: 1em;
color: #ffffff;
cursor: pointer;
background-color: #ffffff;
border: none; }
@media (min-width: 768px) {
.vehicle-attention-bar__section--vehicle {
display: block;
flex: 0 0 100%; } }
@media (min-width: 992px) {
.vehicle-attention-bar__section--vehicle {
/*flex: 1 0 25%;*/
flex: 0 1 auto;
max-width: 25%; } }
.vehicle-attention-bar__section--vehicle:after {
display: none; }
.vehicle-attention-bar__section--vehicle-select {
z-index: 40;
padding: 0;
font-size: 1.250em;
line-height: 1em;
color: #ffffff;
cursor: pointer; }
@media (min-width: 768px) {
.vehicle-attention-bar__section--vehicle-select {
display: block;
flex: 0 0 100%; } }
@media (min-width: 1200px) {
.vehicle-attention-bar__section--vehicle-select {
flex: 1 0 25%; } }
.vehicle-attention-bar__section--vehicle-select:after {
display: none; }
/***
* 1. Needed to embed for the vehicle info positioning to be calculated and placed to the left of the selectable items.
***/
.vehicle-attention-bar__vehicle-info-container {
display: none;
width: 100%; }
@media (max-width: 991px) {
.vehicle-attention-bar__vehicle-info-container {
display: none !important; } }
.vehicle-attention-bar__vehicle-info-wrapper {
display: none;
background-color: #ffffff;
/* As arrow in the small menu version is getting down, commented this code.*/
/*&:first-child {
display: flex;
}*/ }
@media (min-width: 992px) {
.vehicle-attention-bar__vehicle-info-wrapper {
/*min-height: 100px;*/
cursor: pointer; } }
.vehicle-attention-bar__vehicle-info-wrapper--is-selectable {
display: flex;
position: relative;
/*height: 100px;*/
min-height: 0;
/*.vehicle-attention-bar__vin {
display: none;
}*/ }
.vehicle-attention-bar__vehicle-info-wrapper--is-selectable + .vehicle-attention-bar__vehicle-info-wrapper--is-selectable {
border-top: 1px solid #E7E7E8; }
.vehicle-attention-bar__vehicle-info-wrapper--is-selectable:hover:after {
/*content: '';
display: none;
position: absolute;
top: 50%;
right: -1px;
z-index: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ffffff transparent transparent;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
@include media-breakpoint-up(xl) {
display: block;
}*/ }
.vehicle-attention-bar__vehicle-info-wrapper--is-selectable .vehicle-attention-bar__arrow {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.vehicle-attention-bar__vehicle-info-wrapper--is-selectable .vehicle-attention-bar__arrow--right {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.vehicle-attention-bar__vehicle-info-wrapper--is-selectable .vehicle-attention-bar__vehicle-info-toggle--has-info:after {
display: none; }
.vehicle-attention-bar__vehicle-info-toggle {
position: relative;
padding: 35px 25px;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #1D242B;
-ms-grid-row-align: center;
align-self: center;
flex: 1; }
.vehicle-attention-bar__vehicle-info-toggle--has-info:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 10px;
width: 20px;
height: 20px;
background: url(../_img/info-icon.svg) no-repeat center center;
background-size: cover;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.vehicle-attention-bar__vin {
display: block;
padding-top: 5px;
font-size: .75em;
color: #F7F8F9;
vertical-align: middle; }
.vehicle-attention-bar__vehicle-select-toggle {
position: relative;
width: 50px;
height: 50px;
background-color: #1D242B;
/*border-left: 1px solid rgba(255, 255, 255, 0.25);
border-right: 1px solid rgba(255, 255, 255, 0.25);*/ }
@media (max-width: 767px) {
.vehicle-attention-bar__vehicle-select-toggle {
position: absolute;
margin-top: 5px; } }
.vehicle-attention-bar__arrow {
display: block;
position: absolute;
top: 50%;
left: 25%;
width: 30%;
height: 3px;
border-radius: 3px;
background-color: #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .3s ease-in-out; }
.vehicle-attention-bar__arrow--right {
top: 50%;
left: auto;
right: 27%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.vehicle-attention-bar__manage-vehicle {
display: none;
padding: 35px 25px;
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
text-align: left;
color: #3A8EEE;
background-color: #ffffff;
border-top: 1px solid #E7E7E8;
cursor: pointer; }
.vehicle-attention-bar__manage-vehicle:hover, .vehicle-attention-bar__manage-vehicle:focus {
color: #1971D4; }
.vehicle-attention-bar__manage-vehicle--is-visible {
display: block; }
.vehicle-attention-bar__section-content {
display: table-cell;
padding-left: 20px;
font-size: 1em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: 300;
color: #1D242B;
line-height: 1.15em; }
.vehicle-attention-bar__heading {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff; }
.vehicle-attention-bar__small-text {
display: block;
margin-bottom: 3px;
font-size: 0.750em;
color: #91979A; }
.vehicle-attention-bar__small-text #estMileage {
font-size: 0.813em; }
.vehicle-attention-bar__text-link {
display: block;
font-size: 0.875em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: normal;
color: #3A8EEE; }
.vehicle-attention-bar__text-link:hover, .vehicle-attention-bar__text-link:focus {
color: #1971D4; }
.vehicle-attention-bar__button {
margin: 0;
padding: 5px 20px;
width: auto;
font-size: 0.75em;
line-height: inherit; }
.vehicle-attention-bar__icon {
position: relative;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px; }
@media (max-width: 767px) {
.vehicle-attention-bar__icon {
display: table-cell; } }
@media (min-width: 1200px) {
.vehicle-attention-bar__icon {
width: 64px;
height: 64px;
line-height: 64px; } }
.vehicle-attention-bar__badge {
position: absolute;
top: 0px;
right: -5px;
z-index: 30;
width: 20px;
height: 20px; }
@media (min-width: 1200px) {
.vehicle-attention-bar__badge {
width: 25px;
height: 25px; } }
.vehicle-attention-bar__symbol {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
max-width: 28px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
@media (min-width: 1200px) {
.vehicle-attention-bar__symbol {
max-width: 42px; } }
.vehicle-attention-bar__number {
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
font-size: 2.000em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.vehicle-attention-bar__icon:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 50px;
height: 50px;
/*background-color: $blue-light;*/
/*border: 2px solid $white;*/
border-radius: 50%;
/*box-shadow: 0 0 0 2px $blue-light;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);*/ }
@media (min-width: 1200px) {
.vehicle-attention-bar__icon:after {
width: 64px;
height: 64px; } }
.vehicle-attention-bar__vehicle-stats {
display: none;
/*position: absolute;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 30;
margin: 0 auto;
padding-left: 0%;
width: 100%;
max-width: 1345px;
background-color: #ffffff; }
@media (min-width: 1800px) {
.vehicle-attention-bar__vehicle-stats {
padding-left: 18%; } }
@media (min-width: 992px) {
.vehicle-attention-bar__vehicle-stats--is-active {
display: block; } }
.vehicle-attention-bar__full-stats {
margin: 0 auto;
max-width: 1345px;
display: none;
position: relative;
background-color: #ffffff; }
.vehicle-attention-bar__full-stats--is-active {
display: block; }
.vehicle-attention-bar__bottom-section--show-list .vehicleSelect {
transform: translateY(0); }
/* Button should be vertically centered in the pod */
@media (max-width: 767px) {
.flex-vertical-center {
display: flex;
align-items: center; } }
/**/
.active_vehicle {
background-color: #E7E7E8; }
.vehicle-attention-bar__vehicle-info-wrapper:hover, .vehicle-attention-bar__vehicle-info-wrapper:focus {
background-color: #1D242B; }
.vehicle-attention-bar__main-bar {
position: relative;
z-index: 10; }
.vehicle-attention-bar__bottom-section {
position: absolute;
width: 100%;
opacity: 0;
visibility: hidden;
transform: translate3d(0px, -30px, 0px);
transition: all .4s ease-in-out;
backface-visibility: hidden;
pointer-events: none; }
.vehicle-attention-bar__bottom-section.active {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
pointer-events: all; }
/*Vehicle attention bar backgrounds*/
.vehicle-attention-bar-bg-white {
background-color: #ffffff; }
.vehicle-attention-bar-bg-transparent {
background-color: transparent; }
.vehicle-attention-bar-bg-midnight {
background-color: #1D242B; }
/*Form Fields Specific to Vehicle Attention Bar*/
.vehicle-attention-bar__vehicle-stats .vehicle-form-info, .vehicle-attention-bar__full-stats .vehicle-form-info {
background-color: #E7E7E8;
padding: 30px 90px; }
.vehicle-attention-bar__vehicle-stats .vehicle-form__heading, .vehicle-attention-bar__full-stats .vehicle-form__heading {
font-size: 1.250em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #1D242B;
margin-bottom: 32px; }
.vehicle-attention-bar__vehicle-stats label, .vehicle-attention-bar__full-stats label {
font-size: .875em; }
.vehicle-attention-bar__vehicle-stats .form-control, .vehicle-attention-bar__vehicle-stats .retailer__find-text-field, .vehicle-attention-bar__full-stats .form-control, .vehicle-attention-bar__full-stats .retailer__find-text-field {
padding: 0.95rem 0rem; }
.vehicle-attention-bar__vehicle-stats .form-control:disabled, .vehicle-attention-bar__vehicle-stats .retailer__find-text-field:disabled, .vehicle-attention-bar__full-stats .form-control:disabled, .vehicle-attention-bar__full-stats .retailer__find-text-field:disabled {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #1D242B;
background-color: #E7E7E8;
border: #E7E7E8; }
.vehicle-attention-bar__vehicle-stats select.form-control:not([size]):not([multiple]), .vehicle-attention-bar__vehicle-stats select.retailer__find-text-field:not([size]):not([multiple]), .vehicle-attention-bar__full-stats select.form-control:not([size]):not([multiple]), .vehicle-attention-bar__full-stats select.retailer__find-text-field:not([size]):not([multiple]) {
background-color: #ffffff;
border: #ffffff;
margin: 0; }
.vehicle-attention-bar__vehicle-stats .form-group, .vehicle-attention-bar__full-stats .form-group {
margin-bottom: 15px; }
.vehicle-attention-bar__full-stats .vehicle-form-info {
background-color: #ffffff;
padding: 15px 30px; }
.vehicle-attention-bar__full-stats .form-control:disabled, .vehicle-attention-bar__full-stats .retailer__find-text-field:disabled {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #1D242B;
background-color: #ffffff;
border: #ffffff; }
.vehicle-attention-bar__full-stats .vehicle-form-info__form-section-header {
margin: 15px 0px 15px 0px;
width: auto; }
@media (max-width: 767px) {
.vehicle-attention-bar__full-stats .vehicle-form-info__form-section-header {
width: 100%; } }
.vehicle-attention-bar__impInfo-link {
color: #3A8EEE;
font-size: 0.750em;
font-family: "helvetica_neue_light", Helvetica, Arial, sans-serif; }
.border-right-lightgray {
border-right: 1px solid #c1c1c1; }
.line-height-1 {
line-height: 1em; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
/*Vehicle Attention Bar*/
.vehicle-attention-bar__symbol-small-ie {
height: 24px; }
.vehicle-attention-bar__symbol-large-ie {
height: 35px; }
/*.vehicle-attention-bar__icon--ie {
position: absolute;
top: 20%;
}
.vehicle-attention-bar__section-content--ie {
padding-left: 80px;
}*/ }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.home-vehicle-bar {
background-image: url(../_img/header-bg-IE.png);
background-position: center; }
.vehicle-attention-bar {
max-width: 1345px;
margin: 0px auto; }
.vehicle-attention-bar__section {
float: left; }
.vehicle-attention-bar__sections, .vehicle-attention-bar__section {
/*display: block;*/
flex-wrap: inherit;
/*min-height: 125px;*/ }
.vehicle-attention-bar__section--vehicle {
min-height: inherit; }
.vehicle-attention-bar__section--vehicle-is-active .vehicle-attention-bar__vehicle-info-wrapper {
height: 75px; }
.vehicle-attention-bar--small.vehicle-attention-bar {
width: inherit;
max-width: 100%; }
.vehicle-attention-bar--small .vehicle-attention-bar__section--vehicle-is-active {
max-width: 20% !important; }
.vehicle-attention-bar__vehicle-info-container .vehicle-attention-bar__vehicle-stats--is-active {
background-color: #1D242B; }
.vehicle-attention-bar__vehicle-info-container .vehicle-form-info {
left: 20%; }
.vehicle-attention-bar--is-fixed {
position: relative; }
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-container {
position: relative;
top: 0px;
padding-left: 0%;
width: 100%; }
/*.vehicle-attention-bar--small .vehicle-attention-bar--small-active{
width: inherit;
max-width: none;
}*/
.vehicle-attention-bar--small .vehicle-attention-bar__vehicle-info-toggle {
padding-right: 30px; }
.vehicle-attention-bar--small .vehicle-attention-bar__vin-number {
padding-right: 40px; }
.vehicle-attention-bar__alertContent {
width: 99%; } }
/***************************************
VEHICLE-FORM-INFO
***************************************/
.vehicle-form-info {
padding: 0 15px;
border-bottom: 1px solid #E7E7E8; }
@media (min-width: 768px) {
.vehicle-form-info {
padding: 15px 30px;
background-color: #ffffff; } }
@media (min-width: 992px) {
.vehicle-form-info {
border-bottom: none; } }
.vehicle-form-info__form-section-header {
display: block;
margin: 15px 0;
font-size: 1.125em; }
@media (max-width: 767px) {
.vehicle-form-info__form-section-header {
padding: 5px 15px;
margin: 15px -15px;
color: #ffffff;
background-color: #1D242B; } }
.vehicle-form-info__form-section-header--first-row {
margin-top: 0; }
.vehicle-form-info__sub-header {
margin: 10px 0 19px;
font-size: 0.875em;
color: #1D242B; }
@media (min-width: 992px) {
.vehicle-form-info__sub-header {
margin-bottom: 41px;
font-size: 1.000em; } }
.vehicle-form-info__trade-in-button {
margin-bottom: 0;
padding: 0 5px;
height: 41px;
font-size: 0.750em;
line-height: 41px; }
@media (min-width: 992px) {
.vehicle-form-info__trade-in-button {
font-size: 0.813em; } }
.vehicle-form-info__trade-in-button--mileage {
margin-top: 10px; }
.vehicle-form-info__info-section .form-group--vehicle {
margin-bottom: 15px; }
.vehicle-form-info__info-section .form-control:disabled, .vehicle-form-info__info-section .retailer__find-text-field:disabled {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
background: none !important;
border-color: #F7F8F9 !important;
padding-left: 0;
padding-right: 0; }
@media (min-width: 768px) {
.vehicle-form-info__info-section--bottom {
padding-bottom: 15px;
border-bottom: 1px solid #E7E7E8; } }
@media (min-width: 768px) {
.vehicle-form-info__info-section-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
@media (min-width: 768px) {
.vehicle-form-info__info-section-row-item + .vehicle-form-info__info-section-row-item {
border-left: 1px solid #E7E7E8; } }
.vehicle-form-info--learn-more-btn {
display: block;
margin-top: 38px; }
@media (max-width: 1199px) {
.vehicle-form-info--learn-more-btn {
margin-top: 30px; } }
@media (min-width: 768px) {
.license_plate_state {
margin: 0 auto;
margin-right: 1rem !important; } }
/***************************************
HOME-HERO
***************************************/
.home-hero {
position: relative;
min-height: 200px;
text-align: center;
background: url(../_img/home-hero-bg.jpg) no-repeat center center;
background-size: cover; }
@media (min-width: 768px) {
.home-hero {
padding: 130px 0;
height: 85vh; } }
.home-hero__logo-wrapper {
display: none;
margin: 0 auto;
padding: 40px;
background-color: rgba(53, 51, 49, 0.85); }
@media (min-width: 768px) {
.home-hero__logo-wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); } }
.home-hero__logo {
width: 200px; }
.home-hero__arrow {
display: none;
position: absolute;
bottom: 35px;
left: 50%;
cursor: pointer;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: arrow-bounce 2s infinite;
animation: arrow-bounce 2s infinite; }
@media (min-width: 768px) {
.home-hero__arrow {
display: block; } }
@-webkit-keyframes arrow-bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px); } }
@keyframes arrow-bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px); } }
/***************************************
REMOTE-SERVICES
***************************************/
.remote-services {
display: flex;
flex: 1;
margin: 0 -25px 25px; }
.remote-services p {
color: #d9534f;
margin: 10px 0; }
@media (max-width: 575px) {
.remote-services p {
margin: 0 22px 0 22px; } }
@media (min-width: 992px) {
.remote-services {
margin: 0 0 25px; } }
@media (max-width: 991px) {
.remote-services {
margin: 0 0 25px;
flex-wrap: wrap; } }
.remote-services__link {
padding: 10px 0 0;
font-size: 0.625em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
line-height: 1.15em;
color: #ffffff;
align-items: center;
justify-content: center;
cursor: pointer; }
.remote-services__link + .remote-services__link {
border-left: 1px solid #ffffff; }
@media (min-width: 992px) {
.remote-services__link {
display: flex;
padding: 15px 5px;
font-size: 0.813em; }
.remote-services__link + .remote-services__link {
margin-left: 10px;
border-left: none; } }
.remote-services__link-tag {
display: block; }
@media (max-width: 767px) {
.remote-services__link-tag {
min-height: 105px; } }
.remote-services__link-text {
display: inline-block; }
.remote-services__text-completed {
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
color: #000000;
font-size: 0.750em;
font-weight: normal;
text-transform: capitalize; }
.remote-services__button {
display: flex;
border: 1px solid #1971D4;
border-radius: 0.5rem;
font-size: 0.750em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
line-height: 1.15em;
color: #1971D4;
min-height: 130px;
flex: 1;
cursor: pointer; }
.remote-services__button:hover, .remote-services__button:focus {
color: #ffffff;
background-color: #2F5D9D;
border-color: #2F5D9D; }
@media (min-width: 992px) {
.remote-services__button + .remote-services__button {
margin-left: 20px; } }
@media (min-width: 576px) {
.remote-services__button {
font-size: 0.813em; } }
@media (max-width: 991px) {
.remote-services__button {
margin: 8px;
flex-basis: 31%; } }
.remote-services__button--gray {
border: 1px solid #c1c1c1;
color: #606162;
text-transform: capitalize; }
@media (max-width: 991px) {
.remote-services__button--two-columns {
margin: 8px;
flex-basis: 45%; } }
.remote-services__button--no-hover:hover, .remote-services__button--no-hover:focus {
color: #1971D4;
background-color: transparent;
border-color: #1971D4; }
.remote-services__button--is-disabled {
color: #1D242B;
background-color: #F7F8F9;
border-color: #1D242B;
cursor: not-allowed; }
.remote-services__button--is-disabled:hover, .remote-services__button--is-disabled:focus {
color: #1D242B;
background-color: #F7F8F9;
border-color: #1D242B;
cursor: not-allowed; }
.remote-services__button--has-timer {
position: relative; }
.remote-services__button--has-timer .remote-services__timer {
display: flex; }
.remote-services__button--is-completed {
color: #000;
font-size: 0.625em; }
.remote-services__button--is-completed .remote-services__text {
display: none; }
.remote-services__button--is-completed .remote-services__completed-message {
display: flex; }
.remote-services__icon {
margin: 0 auto 10px;
height: 30px; }
@media (max-width: 767px) {
.remote-services__icon {
height: 25px; } }
.remote-services__icon--big {
height: 35px; }
.remote-services__text {
display: flex;
padding: 10px 0px;
width: 100%;
flex-flow: column;
align-items: center;
justify-content: center; }
@media (max-width: 767px) {
.remote-services__text--column {
flex-direction: column; } }
.remote-services__title {
display: flex;
flex-direction: column;
align-items: center; }
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.remote-services__loading-icon {
position: absolute;
top: 40%;
left: 40%;
animation: loading 1.5s infinite linear;
-o-animation: loading 1.5s infinite linear;
-webkit-animation: loading 1.5s infinite linear; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
_:-ms-fullscreen, :root .remote-services__loading-icon {
position: absolute;
top: 40%;
left: 40%;
animation: loading 1.5s infinite linear;
-o-animation: loading 1.5s infinite linear;
-webkit-animation: loading 1.5s infinite linear; } }
.remote-services__loading-icon-align {
height: 30px; }
@media (max-width: 767px) {
.remote-services__loading-icon-align {
height: 25px; } }
.remote-services__timer {
display: none;
flex-direction: column;
justify-content: center;
width: 100%; }
@media (max-width: 767px) {
.remote-services__timer {
flex-direction: row; } }
.remote-services__timer-text {
padding: 10px 5px;
font-size: 0.750em;
text-align: center; }
@media (max-width: 991px) {
.remote-services__timer-text {
padding: 10px 20px 10px 5px; } }
@media (max-width: 767px) {
.remote-services__timer-text {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px 40px 10px 5px;
font-size: 0.625em;
text-align: left; } }
.remote-services__timer-text-hornnlights {
padding: 10px 20px 10px 5px; }
@media (max-width: 767px) {
.remote-services__timer-text-hornnlights {
padding: 10px 40px 10px 5px; } }
.remote-services__timer-text-hornnlights-time {
display: block; }
.remote-services__timer-cancel {
padding: 5px 10px;
width: 100%;
background-color: #1D242B;
color: #ffffff;
font-size: 0.625em;
cursor: pointer; }
@media (max-width: 767px) {
.remote-services__timer-cancel {
display: flex;
align-items: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: auto; } }
.remote-services__completed-message {
display: none; }
.remote-services__actions-container {
position: relative;
padding: 10px; }
@media (min-width: 768px) {
.remote-services__actions-container {
position: static;
margin: 0;
padding: 0;
border: none;
background-color: transparent; } }
.remote-services__actions-container--no-border {
border-top: none; }
.remote-services__actions-content {
display: flex; }
@media (max-width: 767px) {
.remote-services__actions-content {
flex-direction: column; } }
@media (max-width: 767px) {
.remote-services__mobile-full-width {
margin: 0 -10px; } }
.remote-services__close {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
text-align: center;
border: 1px solid #1971D4;
border-radius: 5px;
cursor: pointer;
z-index: 100; }
.remote-services__close-icon {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
transform: translate(-50%, -50%); }
.remote-services__actions--img-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 0 -30px -40px;
padding: 0 50px;
border-right: 1px solid #c1c1c1; }
@media (max-width: 767px) {
.remote-services__actions--img-column {
margin: 0;
padding: 0px;
border: none; } }
.remote-services__actions--img-column--right {
padding: 10px 0 10px 30px;
border-right: none;
border-left: 1px solid #c1c1c1;
max-width: 355px; }
@media (max-width: 767px) {
.remote-services__actions--img-column--right {
margin-top: 10px;
padding: 0;
max-width: 100%;
border-left: none;
border-top: 1px solid #c1c1c1; } }
.remote-services__actions--text-column {
flex: 1;
padding: 40px;
text-align: center; }
@media (max-width: 767px) {
.remote-services__actions--text-column {
padding: 0px; } }
.remote-services__actions--text-title {
font-weight: bold; }
.remote-services__actions--text {
margin: auto;
max-width: 600px; }
@media (max-width: 767px) {
.remote-services__actions--text {
max-width: none; } }
.remote-services__icon-big {
width: 73px;
fill: #1971D4; }
.remote-services__icon--car {
width: 120px; }
.remote-services__icon--plug {
width: 40px; }
.remote-services__sub-header {
font-size: 1.625em;
font-weight: bold;
margin-top: 20px; }
.remote-services__form {
margin-top: 20px; }
.remote-services__locate-message {
margin-bottom: 20px;
text-align: center; }
@media (min-width: 768px) {
.remote-services__locate-message {
text-align: left; } }
.remote-services__locate-icon {
display: block;
margin: 0 auto 20px;
height: 30px; }
@media (min-width: 768px) {
.remote-services__locate-icon {
display: inline-block;
margin: 0 10px 0 0; } }
.remote-services__map {
height: 250px;
background: url(../_img/locate-map.jpg) no-repeat center center;
background-size: cover; }
@media (min-width: 768px) {
.remote-services__map {
margin-bottom: 0; } }
.remote-services__step {
display: none; }
.remote-services__overlay {
margin: -30px; }
@media (max-width: 991px) {
.remote-services__overlay {
margin: 20px; } }
.remote-services__overlay-header {
margin-bottom: 0;
padding-bottom: 20px;
font-size: 2.250em;
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 767px) {
.remote-services__overlay-header {
margin: 0 -10px;
padding: 10px 10px 20px;
font-size: 1.250em; } }
.remote-services__overlay-header--without-border {
border: none; }
@media (max-width: 767px) {
.remote-services__temparature-division {
margin: 20px 0 0;
padding-top: 15px;
border-top: 1px solid #E7E7E8; } }
.remote-services__temparature-number {
margin-bottom: 10px;
margin-top: 20px;
font-size: 3.000em;
font-weight: bold; }
.remote-services__temparature-icon {
font-size: 2.500em;
font-weight: 600; }
.remote-services__temparature-box, .remote-services__temparature-controls {
display: flex;
padding: 5px;
height: 60px;
text-align: center;
margin-top: 15px;
border: 1px solid #c1c1c1; }
.remote-services__temparature-box.highlighted, .highlighted.remote-services__temparature-controls {
border-color: #1971D4; }
.remote-services__temparature-box--active {
border-color: #1971D4; }
.remote-services__temparature-box__item {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
flex-flow: column; }
.remote-services__temparature-box__item--fill {
flex: 2 1 auto; }
.remote-services__temparature-box__text {
color: #000000;
font-weight: bold; }
.remote-services__temparature-line {
position: absolute;
top: 55%;
width: 20px;
height: 6px;
border-radius: 3px;
background-color: #c1c1c1; }
.remote-services__temparature-line--before {
top: 70%; }
.remote-services__temparature-line--after {
top: 40%; }
.remote-services__temparature-line.active {
background-color: #1971D4; }
.remote-services__temparature-line--blue {
background-color: #1971D4; }
.remote-services__temparature-box--range {
align-self: flex-end; }
.remote-services__temparature-controls-row {
margin: 0px auto;
width: 70%; }
@media (max-width: 767px) {
.remote-services__temparature-controls-row {
width: 100%; } }
.remote-services__temparature-controls {
cursor: pointer; }
.remote-services__temparature-controls:active {
border-color: #1971D4; }
.remote-services__temparature-controls--temp {
justify-content: center; }
.remote-services__flexbox-container {
border-top: 1px solid #c1c1c1; }
.remote-services__flexbox-row {
display: flex;
flex-wrap: wrap; }
@media (max-width: 767px) {
.remote-services__flexbox-row {
flex-flow: column; } }
.remote-services__flexbox-row-curfew {
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.remote-services__flexbox-row-curfew {
border-bottom-width: 0px; } }
.remote-services__flexbox--column-three {
display: flex;
align-items: center;
flex-flow: wrap;
padding: 40px 20px;
width: 33.33%;
border-left: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1; }
.remote-services__flexbox--column-three:nth-child(3n) {
border-right: 1px solid #c1c1c1; }
@media (max-width: 767px) {
.remote-services__flexbox--column-three:nth-child(3n) {
border-right: none; } }
.remote-services__flexbox--column-three:last-child {
border-right: 1px solid #c1c1c1; }
@media (max-width: 767px) {
.remote-services__flexbox--column-three:last-child {
border-right: none; } }
@media (max-width: 767px) {
.remote-services__flexbox--column-three {
padding: 30px 20px;
width: 100%; } }
.remote-services__flexbox--column-three--top {
align-items: flex-start; }
.remote-services__flexbox--column-curfew {
border-width: 0 !important;
padding: 20px; }
@media (max-width: 991px) {
.remote-services__flexbox--column-curfew {
padding: 5px 0; } }
.remote-services__flexbox-img {
width: 100%;
max-width: 38px;
min-width: 30px;
margin-right: 20px; }
@media (max-width: 1199px) {
.remote-services__flexbox-img {
margin-top: 5px; } }
.remote-services__flexbox--title {
flex: 1;
font-size: 1.250em;
font-weight: bold; }
.remote-services__flexbox--title-small {
margin-bottom: 5px;
font-size: 0.875em;
font-weight: normal; }
.remote-services__flexbox--sub-title {
margin-top: 10px;
font-size: 0.875em;
font-weight: bold; }
.remote-services__flexbox-notification {
display: flex;
padding: 20px 0; }
@media (max-width: 991px) {
.remote-services__flexbox-notification {
padding: 20px;
background-color: #E7E7E8;
flex-flow: column wrap; } }
.remote-services__flexbox-notification--speedalert {
margin: auto;
width: 75%; }
@media (max-width: 1199px) {
.remote-services__flexbox-notification--speedalert {
margin-left: 0;
width: 100%; } }
.remote-services__flexbox-notification--column {
flex: 1 1 auto; }
@media (max-width: 991px) {
.remote-services__flexbox-notification--column {
text-align: center; } }
@media (max-width: 767px) {
.remote-services__flexbox-notification--column {
flex: 0 1 auto; } }
.remote-services__flexbox-notification--column--left {
display: flex;
align-items: center;
text-align: right; }
@media (max-width: 991px) {
.remote-services__flexbox-notification--column--left {
text-align: left; } }
.remote-services__flexbox-notification--column--middle {
display: flex;
align-items: center;
justify-content: center; }
@media (max-width: 991px) {
.remote-services__flexbox-notification--column--middle {
display: block; } }
.remote-services__notification-check-group {
display: flex;
justify-content: flex-start;
margin-top: 10px; }
@media (max-width: 991px) {
.remote-services__notification-check-group {
display: block; } }
.remote-services__flexbox-notification-update {
margin-top: 30px; }
@media (max-width: 991px) {
.remote-services__flexbox-notification-update {
margin-top: 10px;
width: 100%; } }
.remote-services__flexbox-notification-update--no-margin {
margin-top: 0; }
@media (max-width: 991px) {
.remote-services__flexbox-notification-update--no-margin {
margin-top: 10px; } }
.remote-services__setting-heading {
padding: 15px 0;
text-align: center;
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
background-color: #E7E7E8; }
.remote-services__setting-heading--with-button {
margin: 0 -10px;
padding: 30px 15px; }
@media (min-width: 768px) {
.remote-services__setting-heading--with-button {
margin: 0;
padding: 60px 10px; } }
.remote-services__setting-row {
display: flex;
flex-direction: row;
justify-content: space-between; }
@media (max-width: 767px) {
.remote-services__setting-row {
flex-direction: column; } }
.remote-services__setting-section-column {
display: flex;
flex-direction: column;
align-items: center; }
.remote-services__setting-temp-text {
display: flex;
justify-content: center; }
.remote-services__setting-temp {
display: flex;
justify-content: space-between;
width: 80%; }
@media (max-width: 767px) {
.remote-services__setting-temp {
width: 100%; } }
.remote-services__setting-temp-box {
position: relative;
padding: 30px 35px;
width: 48%;
color: #1971D4;
border: 1px solid #c1c1c1;
text-align: center; }
@media (max-width: 767px) {
.remote-services__setting-temp-box {
width: 49%; } }
.remote-services__setting-temp-box--left {
margin-right: 10px; }
.remote-services__setting-temp-box--right {
margin-left: 10px; }
.remote-services__hidden-input {
display: none; }
.remote-services__hidden-input:checked + label .circle-icon__logo {
background-color: #5dca5a; }
.remote-service__trips {
position: relative;
display: inline-block;
width: 100%; }
.remote-services__search-block {
float: left;
border-top: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.remote-services__search-block {
float: inherit;
width: 100%;
border: none; } }
.remote-services__location-search-box {
position: relative;
display: flex;
padding-top: 20px; }
@media (max-width: 991px) {
.remote-services__location-search-box {
position: relative;
left: 0;
right: 0;
z-index: 9999; } }
.remote-services__boundary {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background-color: #ffffff;
z-index: 999; }
.remote-services__boundary-select {
flex: 0 0 50%;
text-align: center; }
@media (max-width: 991px) {
.remote-services__boundary-select {
flex: 0 0 30%; } }
.remote-services__boundary-type {
position: relative;
display: flex;
justify-content: center;
flex: 0 0 49%;
padding: 10px;
text-align: center;
border: 1px solid #c1c1c1;
cursor: pointer;
max-width: 49%; }
.remote-services__boundary-type input {
display: none; }
.remote-services__boundary-type input:checked + span:before {
content: '';
display: block;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 2px solid #1971D4; }
.remote-service__trips-stops-list {
position: relative;
display: flex;
align-items: center;
height: 45px;
border: 1px solid #c1c1c1;
border-radius: 0.5rem;
background-color: #ffffff;
width: 100% !important; }
.remote-service__trips-stops-list--count {
display: inline-block;
width: 55px;
height: 55px;
font-size: 1.750em;
font-weight: bold;
line-height: 55px;
text-align: center;
background-color: #E7E7E8;
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.remote-service__trips-stops-list--count {
height: 53px; } }
.remote-service__trips-stops-list--link {
margin: 0 10px;
cursor: move; }
@media (max-width: 991px) {
.remote-service__trips-stops-list--link {
margin: 0px 5px; } }
.remote-service__trips-stops--input {
padding: 0 1.25rem;
border-width: 0px; }
.remote-service__trips-stops--input:focus, .remote-service__trips-stops--input:active {
border: none;
box-shadow: none; }
@media (max-width: 991px) {
.remote-service__trips-stops--input {
flex: 1; } }
.remote-services__trips-stops-remove {
flex: 0 0 auto; }
@media (max-width: 991px) {
.remote-services__trips-stops-remove {
width: 37px; } }
.remote-service__trips-saved-header {
padding-left: 20px;
margin-bottom: 0;
height: 55px;
font-size: 1.125em;
line-height: 55px;
color: #ffffff;
background-color: #1971D4;
background-image: url(../_img/nav-arrow.png);
background-repeat: no-repeat;
background-position: 97% center;
background-size: 17px 14px; }
.remote-service__trips-saved-header--back {
background-image: none;
padding-left: 0px; }
.remote-service__trips-saved-header--back-btn {
display: none;
margin-right: 20px;
height: 100%; }
.remote-service__trips-saved--item-header {
padding-top: 15px;
font-size: 1.125em;
font-weight: bold; }
.remote-service__trips-saved-edit--header {
padding: 20px 0 0;
font-size: 0.875em;
font-weight: bold; }
.remote-services__map-block {
display: block;
position: relative;
z-index: 0;
float: right;
min-height: 560px; }
@media (min-device-width: 375px) and (max-device-width: 991px) and (orientation: landscape) {
.remote-services__map-block {
display: block;
height: 380px; } }
@media (max-width: 575px) {
.remote-services__map-block {
float: inherit;
width: 100%;
min-height: 400px; } }
.remote-services__map {
display: flex;
position: relative;
width: 100%;
height: 560px;
background-image: url(../_img/remote-service__trips-map.jpg); }
@media (max-width: 991px) {
.remote-services__map {
display: block;
height: 400px; } }
.remote-services__map-block--small {
display: block;
min-height: 350px; }
.remote-services__map--small {
display: flex;
position: relative;
width: 100%;
height: 300px;
background-image: url(../_img/remote-service__trips-map.jpg); }
.remote-services__action-block {
float: left;
width: 44%;
border-top: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.remote-services__action-block {
float: inherit;
width: 100%; } }
.remote-services__saved-trips-blade {
margin-top: 20px;
border: 1px solid #c1c1c1;
overflow-y: auto; }
@media (min-width: 768px) {
.remote-services__saved-trips-blade {
max-height: 469px; } }
.remote-service__trips-alphabatical-results {
overflow-y: auto;
margin-top: 20px;
max-height: 325px;
border: 1px solid #bebbb4; }
.remote-service__trips-alphabatic-header {
padding-left: 20px;
height: 55px;
font-size: 1.125em;
font-weight: bold;
line-height: 55px;
background-color: #E7E7E8; }
.remote-services__subscription-icon {
padding-right: 10px;
width: 60px;
height: 60px; }
/* Remote Services - Curfew */
.remote-services__curfew-car-turnoff {
display: flex;
padding-left: 10%;
width: 80%; }
.remote-services__curfew-turnoff-time {
flex: 1 0 auto;
height: 72px; }
.remote-services__curfew-meridiem {
padding: 0 10px;
align-self: flex-end; }
.remote-services__curfew-meridiem--item {
color: #606162; }
.remote-services__curfew-meridiem--item.active {
color: #1971D4; }
.remote-service__curfew-week {
display: flex;
width: 100%;
height: 50px; }
.remote-service__curfew-week--days {
flex: 1 1 auto; }
.remote-service__curfew-smalltext {
font-size: 0.750em;
font-weight: normal; }
.remote-service__curfew-endtime-edit {
width: 100%;
text-align: center; }
/* Boundaries Styles Starts */
.remote-service__flex-container-box {
display: flex;
flex: 1 1 auto;
flex-flow: wrap;
align-items: center;
-moz-box-flex: 1;
justify-content: center;
border: 1px solid #c1c1c1;
cursor: pointer;
min-height: 55px;
margin-bottom: 15px;
margin-left: 15px; }
.remote-service__flex-container-box:nth-child(1) {
margin-left: 0px; }
.remote-service__flex-container-box--active {
border: 1px solid #1971D4; }
.remote-service__sqaure-shape {
display: inline-block;
margin-right: 15px;
width: 20px;
height: 20px;
border: 2px solid #1971D4; }
@media (max-width: 991px) {
.remote-service__sqaure-shape {
margin-right: 5px; } }
.remote-service__round-shape {
display: inline-block;
margin-right: 15px;
width: 20px;
height: 20px;
border: 2px solid #1971D4;
border-radius: 50%; }
@media (max-width: 991px) {
.remote-service__round-shape {
margin-right: 5px; } }
.remote-service__boundary-inside {
width: 100%;
height: 65px;
background-image: url(../_img/boundary-bg.jpg); }
.remote-service__boundary-inside-car {
margin: 5px auto;
width: 67px;
height: 54px;
background-color: #ffffff;
background-image: url(../_img/boundary-car-icon.svg);
background-repeat: no-repeat;
background-size: 54px 20px;
background-position: center; }
.remote-service__boundary-outside-car {
width: 50%;
height: 65px;
background-color: #ffffff;
background-image: url(../_img/boundary-car-icon.svg);
background-repeat: no-repeat;
background-size: 54px 20px;
background-position: center; }
.remote-service__boundary-outside {
width: 50%;
height: 65px;
background-image: url(../_img/boundary-bg.jpg); }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.remote-services__icon {
width: 30px; }
.add-trip__icon {
height: 50px;
margin-bottom: -10px; } }
/*Tom Tom Popup UI changes GMC-2683*/
.leaflet-popup-content .action-list__item {
flex-wrap: wrap;
padding: 0px; }
.leaflet-popup-content .action-list__heading {
flex-basis: 54%; }
.leaflet-popup-content .action-list__action {
flex-basis: 23%; }
.leaflet-popup-content .action-list__item .action-list__heading-text {
font-size: 0.938em; }
.leaflet-popup-content img.add-trip__icon {
height: 36px;
width: 31px;
margin-bottom: 3px; }
.leaflet-popup-content img {
height: 29px; }
/* mixin for multiline ellipse*/
.leaflet-popup-pane {
height: 69px; }
.leaflet-popup {
height: 210px; }
#tripFavMap .leaflet-popup {
height: 125px !important; }
.action-list__heading-text--popup {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 3.6em;
margin-right: 1em;
padding-right: 1em; }
.action-list__heading-text--popup:before {
content: '...';
position: absolute;
right: 0;
bottom: 0; }
.action-list__heading-text--popup:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em; }
.favoritestar {
width: 30px;
max-width: 17px; }
.favoritestar--filled {
width: 30px;
max-width: 20px; }
/* TOMTOM map styles goes here */
.boundary-map__box {
padding: 5px;
position: relative;
bottom: 0;
background-color: #ffffff;
z-index: 999; }
.boundary-map__recenter {
cursor: pointer; }
.boundary-map__recenter-icon {
margin-top: -1px;
width: 20px;
vertical-align: middle;
height: 20px; }
.remote-services__map {
background-image: none; }
/*Destination styles*/
.destinations-tab {
position: relative;
padding: 0px 15px;
border: 1px solid #ccc;
background-color: lightgrey; }
.tab1.active ~ .indicator {
left: 0; }
.tab2.active ~ .indicator {
left: 33%; }
.destinations-tab .active {
border: 1px solid #ccc;
background-color: white;
height: 100px; }
.indicator {
width: 33%;
height: 4px;
position: absolute;
bottom: 0;
background: #000;
-webkit-transition: 0.3s ease;
transition: 0.3s ease; }
.destinationsTab {
flex-basis: 33%; }
.tabs {
--links-height: 60px;
--links-background: linear-gradient(135deg, #e5eaf1 0%, #b9c5d8 100%);
/* --links-overlay: linear-gradient(135deg, #FF512F 0%,#EB3349 48%,#F45C43 100%);*/
--Sllink-background: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
width: 100%;
min-width: 300px;
font-family: Lato, sans-serif; }
.tabs .tabLinks {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background: var(--links-background);
list-style-type: none; }
.tabs .tabLinks li {
flex: 1; }
.tabs .tabLinks li .singleLink {
all: unset;
position: relative;
height: 60px;
width: 100%;
background: var(--Sllink-background);
cursor: pointer;
overflow: hidden;
transition: 0.3s;
border-bottom: 1px solid black; }
.tabs .tabLinks li .singleLink::before {
position: absolute;
content: "";
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: 0.3s ease-in-out; }
.tabs .tabLinks li .singleLink .linkText {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.6;
font-size: 1.250em; }
.tabs .tabLinks li .singleLink .linkText::before {
position: absolute;
top: 160%;
z-index: -1;
font-size: 2.500em;
font-weight: 600;
color: white;
opacity: 0.1; }
.tabs .tabLinks li .singleLink.active {
background: white;
border: 1px solid black;
font-size: 1.500em; }
.tabs .tabLinks li .singleLink.active .linkText {
color: black;
opacity: 1; }
.tabs .TabContents {
position: relative;
margin-top: 0;
padding: 0px;
background: white;
list-style-type: none;
transition: 1s; }
.tabs .TabContents::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 5px; }
.tabs .TabContents .insideContent {
display: none;
min-height: 200px;
font-weight: 300;
line-height: 1.8;
opacity: 0;
-webkit-transform: translateY(30%);
transform: translateY(30%);
-webkit-animation: fadeIn 0.6s forwards;
animation: fadeIn 0.6s forwards; }
.tabs .TabContents .insideContent.active {
display: block; }
@media screen and (max-width: 750px) {
.tabs .tabLinks {
/* height: calc(var(--links-height) / 2);*/
height: 76px; }
.destination-btn {
white-space: normal; } }
@media screen and (max-width: 750px) {
.tabs .tabLinks li .singleLink {
height: 75px;
font-size: 0.750em;
padding-left: 8px; } }
@media screen and (max-width: 750px) {
.tabs .tabLinks li .singleLink .linkText::before {
display: none; } }
@-webkit-keyframes fadeIn {
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes fadeIn {
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
.destination--align__center {
display: flex;
align-items: center;
justify-content: center; }
.boder-radius--0 {
border-radius: 0; }
.border-radius--5 {
border-radius: 5px; }
.border-radius--10 {
border-radius: 10px; }
.savedTrips-card-deck__border {
border: 1px solid #c1c1c1; }
.savedTrips-card-deck {
display: -webkit-box;
display: flex;
margin-right: -0.625rem;
margin-left: -0.625rem;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
overflow: visible; }
@media (max-width: 767px) {
.savedTrips-card-deck {
margin-right: 0px;
margin-left: 0px; } }
.card__col-md-12 {
width: 100%; }
.trip-list__border + .trip-list__border {
border-top: 1px solid #c1c1c1; }
.savedTrips-card-deck .card {
height: auto !important;
margin-bottom: 0px;
border: 1px solid #c1c1c1;
border-radius: 0px; }
.text-center {
text-align: center; }
.border-right-LightGray {
border-right: 1px solid #c1c1c1; }
.savedTripFindDestination .card-deck-wrapper {
padding: 0px; }
.text-transform-capital {
text-transform: capitalize; }
.search-results--with-border {
border: 1px solid #ccc; }
.search-results--with-border .search-results__content + .search-results__content {
border-top: 1px solid #ccc; }
/*GMC-3245*/
.remote-service__trips .g2LocateTrigger {
cursor: pointer; }
.trip_category--mobile-view {
padding: 10px 5px;
color: #1971D4;
background-color: #E7E7E8; }
.trip_category--mobile-view--border-blue {
padding: 10px 5px;
color: #1971D4;
border: 1px solid #1971D4;
background-color: #fff; }
.trip_text--lightGray {
color: #c1c1c1; }
#location::-ms-clear {
display: none; }
.starlinkNotification [type=checkbox]:checked + label:after {
background: url(../asset/_img/checkbox-check.svg) no-repeat !important; }
.starlinkNotification [type=checkbox]:disabled + label:after {
color: #606162; }
.starlinkNotification [type=checkbox]:disabled:checked + label:after {
background: url(../asset/_img/checkbox-checked-disabled.svg) !important; }
.starlinkNotification__modal:before {
position: initial !important;
background-color: none !important; }
.remote-alert__text {
max-width: 450px; }
.remote-alert__item {
background: #F7F8F9;
border-radius: 20px;
padding: 2rem 1rem 1.5rem 2rem;
height: 100%;
position: relative; }
.remote-alert__valet-map {
background-image: url("../_img/valet-home-vehicle-img.png");
margin-left: 1rem;
background-position: center;
border-radius: 15px;
height: 100px;
margin-top: 20px; }
.remote-alert__valet-active {
width: 65px;
height: 25px;
font-size: 14px;
color: white;
background-color: #41901E;
border-radius: 20px;
position: absolute;
right: 10px;
top: 10px;
text-align: center;
line-height: 25px; }
.remote-alert__valet--inactive {
width: 65px;
height: 25px;
font-size: 14px;
color: white;
background-color: #606162;
border-radius: 20px;
position: absolute;
right: 10px;
top: 10px;
text-align: center;
line-height: 25px; }
@media screen and (min-width: 1000px) {
.remote-alert__valet-map {
max-width: 150px;
width: 100%; }
.remote-alert__item--lg-flex {
display: flex; } }
.remote-alert__item--card {
height: calc(100% - 30px);
position: relative;
border-radius: 10px; }
.remote-alert__item--card a {
position: absolute;
bottom: 20px; }
@media only screen and (max-width: 750px) {
.boundaryAlertModalClose {
right: -20px !important; } }
/***************************************
LOADING-ICON
***************************************/
.loading-icon {
width: 30px;
max-width: 100%;
transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
animation: loadingRotation linear 1.5s;
-webkit-animation: loadingRotation linear 1.5s;
-moz-animation: loadingRotation linear 1.5s;
-o-animation: loadingRotation linear 1.5s;
-ms-animation: loadingRotation linear 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite; }
.loading-icon--md {
width: 45px; }
.loading-icon--lg {
width: 60px; }
@keyframes loadingRotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@-moz-keyframes loadingRotation {
0% {
-moz-transform: rotate(0deg); }
100% {
-moz-transform: rotate(360deg); } }
@-webkit-keyframes loadingRotation {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@-o-keyframes loadingRotation {
0% {
-o-transform: rotate(0deg); }
100% {
-o-transform: rotate(360deg); } }
@-ms-keyframes loadingRotation {
0% {
-ms-transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg); } }
/***************************************
HERO
***************************************/
.hero {
background-color: #1D242B; }
.hero__container {
margin: 0 auto;
max-width: 1345px; }
.hero__item {
position: relative;
overflow: hidden; }
.hero__item::after {
content: "";
display: table;
clear: both; }
@media (min-width: 992px) {
.hero__item {
padding: 50px;
min-height: 400px; } }
.hero__image {
height: 150px;
width: 100%;
background-image: url(/asset/_img/lifestyle-hero-bg2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media (min-width: 768px) {
.hero__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto; } }
.hero__image--login0, .hero__image--login1 {
background: url(/asset/_img/login-hero1-new.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media (max-width: 575px) {
.hero__image--login0, .hero__image--login1 {
background-image: url(/asset/_img/login-hero1-new-sm.jpg); } }
.hero__image--login2 {
background: url(/asset/_img/login-hero2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media (max-width: 575px) {
.hero__image--login2 {
background-image: url(/asset/_img/login-hero2-sm.jpg); } }
@media (min-width: 768px) and (max-width: 991px) {
.hero__image-empty {
position: relative;
height: 150px; } }
.hero__logo {
position: absolute;
top: 10%;
left: 0;
z-index: 20;
width: 100px; }
@media (min-width: 768px) {
.hero__logo {
top: auto;
bottom: 0;
width: 150px; } }
.hero__logo--right {
left: auto;
right: 0; }
.hero__content {
position: relative;
z-index: 20;
padding: 30px;
color: #ffffff;
background-color: #1D242B; }
@media (min-width: 768px) {
.hero__content {
padding: 40px 30px;
width: 40%;
max-width: 400px;
background-color: rgba(53, 51, 49, 0.83); } }
@media (min-width: 768px) {
.hero__content--right {
float: right; } }
.hero__header {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.hero__header-icon {
padding-right: 10px;
height: 20px; }
.hero__button {
margin-bottom: 0; }
@media (min-width: 768px) {
.hero__item--login.hero__item {
padding: 0px 50px 50px 50px;
max-height: 505px; }
.hero__item--login.hero__item.error {
max-height: 580px; }
.hero__item--login.hero__item.logout {
max-height: 530px; }
.hero__item--login .hero__content.hero__content--login {
max-width: 400px; } }
@media (min-width: 768px) and (min-width: 768px) {
.hero__item--login .hero__content.hero__content--login {
padding: 30px 0 0 30px; } }
@media (min-width: 768px) {
.hero__item--login .login-block {
padding: 20px 20px 0; } }
.hero__item--login .login__error {
height: 82px;
vertical-align: middle;
display: table-cell;
text-align: left;
color: #d9534f; }
.hero__item--login .logout.error .logout__message {
height: 25px;
text-align: left; }
.hero__item--login .message-success {
text-align: left;
color: #28945b;
margin-bottom: -5px;
margin-top: 5px; }
@media (max-width: 575px) {
.hero__item--login.hero__item {
padding: 0; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.hero__content--login.hero__content {
width: 40%; } }
/***************************************
WIDE-CARD
***************************************/
.wide-card::after {
content: "";
display: table;
clear: both; }
@media (min-width: 768px) {
.wide-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid #E7E7E8;
border-radius: 10px; } }
@media (min-width: 768px) {
.wide-card--app-boxes {
min-height: 430px; } }
.wide-card__description {
padding: 30px; }
.wide-card__heading {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
line-height: 1.3em; }
.wide-card__buttons {
display: inline-block;
margin-bottom: 10px;
text-align: center; }
.wide-card__buttons + .wide-card__buttons {
padding-left: 10px; }
@media (min-width: 768px) and (max-width: 1149px) {
.wide-card__buttons + .wide-card__buttons {
padding-left: 0; } }
.wide-card__image-container {
position: relative;
padding: 0;
min-height: 220px;
background-size: cover;
background-color: #E7E7E8;
background-position: center center; }
@media (min-width: 768px) {
.wide-card__image-container {
overflow: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; } }
@media (min-width: 768px) {
.wide-card__image-container--right {
border-radius: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; } }
.wide-card__date {
position: absolute;
bottom: 0;
right: 0;
padding: 20px 25px;
text-align: center;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #1971D4; }
@media (min-width: 768px) {
.wide-card__date {
top: 0;
right: auto;
bottom: auto;
left: 0; } }
.wide-card__day {
font-size: 2.000em;
line-height: 1em; }
.wide-card__events {
display: inline-block;
min-width: 50px; }
.wide-card__multiDayEvent {
min-width: 50px; }
.wide-card__multiDayEvent-align {
line-height: 60px;
vertical-align: top; }
/***************************************
CIRCLE-ICON
***************************************/
/* .circle-icon {*/
/* position: relative;*/
/* margin: 0 auto;*/
/* width: 70px;*/
/* height: 70px;*/
/* text-align: center;*/
/* line-height: 70px;*/
/* background-color: $blue;*/
/* border-radius: 50%;*/
/* }*/
/* .circle-icon--big {*/
/* position: relative;*/
/* margin: 0 auto;*/
/* width: 80px;*/
/* height: 80px;*/
/* border-radius: 50%;*/
/* background-color: $blue;*/
/* }*/
/* .circle-icon--big-with-border {*/
/* position: relative;*/
/* display: block;*/
/* margin: 0 auto;*/
/* width: 110px;*/
/* height: 110px;*/
/* border-radius: 50%;*/
/* background-color: $blue;*/
/* }*/
/* .circle-icon--big-with-border.active {*/
/* .circle-icon__logo {*/
/* background-color: $white;*/
/* }*/
/* }*/
/* .circle-icon--has-text {*/
/* margin-bottom: 15px;*/
/* @include media-breakpoint-up(sm) {*/
/* margin: 0 15px 0 0;*/
/* }*/
/* }*/
/* .circle-icon:after {*/
/* content: '';*/
/* display: block;*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 50%;*/
/* z-index: 10;*/
/* width: 66px;*/
/* height: 66px;*/
/* border: 2px solid $white;*/
/* border-radius: 50%;*/
/* -webkit-transform: translateY(-50%) translateX(-50%);*/
/* transform: translateY(-50%) translateX(-50%);*/
/* }*/
/* .circle-icon--big-with-border:after {*/
/* content: '';*/
/* display: block;*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 50%;*/
/* z-index: 10;*/
/* width: 105px;*/
/* height: 105px;*/
/* border: 2px solid $white;*/
/* border-radius: 50%;*/
/* -webkit-transform: translateY(-50%) translateX(-50%);*/
/* transform: translateY(-50%) translateX(-50%);*/
/* }*/
/* .circle-icon__icon {*/
/* position: relative;*/
/* z-index: 20;*/
/* width: 40px;*/
/* -webkit-box-flex: 1;*/
/* -ms-flex: 1 0 auto;*/
/* flex: 1 0 auto;*/
/* }*/
/* .circle-icon__alert {*/
/* position: absolute;*/
/* left: -8px;*/
/* width: 20px;*/
/* height: 20px;*/
/* }*/
/* .circle-icon__img {*/
/* position: absolute;*/
/* top: 0;*/
/* left: 0;*/
/* right: 0;*/
/* bottom: 0;*/
/* margin: auto;*/
/* }*/
/* .circle-icon__logo {*/
/* position: absolute;*/
/* top: 25px;*/
/* left: 0;*/
/* right: 0;*/
/* margin: auto;*/
/* width: 25px;*/
/* height: 10px;*/
/* border-radius: 3px;*/
/* background-color: $white;*/
/* }*/
/* .circle-icon__text {*/
/* position: absolute;*/
/* left: 50%;*/
/* bottom: 25px; */
/* font-size: 15px;*/
/* font-weight: bold;*/
/* text-align: center;*/
/* line-height: 18px;*/
/* color: $white;*/
/* -webkit-transform: translateX(-50%);*/
/* transform: translateX(-50%);*/
/* }*/
.circle-icon {
position: relative;
margin: auto;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #2F5D9D; }
.circle-icon--gray {
background-color: #c1c1c1; }
.circle-icon--with-label {
margin-bottom: 10px; }
.circle-icon--small {
width: 40px;
height: 40px; }
@media (max-width: 767px) {
.circle-icon--small-sm-down {
width: 40px;
height: 40px; } }
.circle-icon__img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 85%; }
.circle-icon__img--fixed-width {
width: 50px; }
.circle-icon__alert {
position: absolute;
left: -8px;
width: 20px;
height: 20px; }
/***************************************
ACCORDION
***************************************/
.accordion {
border: 1px solid #E7E7E8;
border-radius: 0.5rem;
overflow: hidden; }
.accordion--plain {
border: none;
border-radius: 0; }
.accordion__item + .accordion__item {
border-top: 1px solid #E7E7E8; }
.my-archive__accordion__header, .archived__header-text {
padding: 15px 25px; }
@media (min-width: 768px) {
.my-archive__accordion__header, .archived__header-text {
padding: 15px 40px; } }
.accordion__item--full-width {
margin: 0 -25px;
padding-bottom: 0px !important;
margin: 0; }
@media (min-width: 768px) {
.accordion__item--full-width {
margin: 0 -15px; } }
@media (min-width: 992px) {
.accordion__item--full-width {
margin: 0;
padding: 15px 0; } }
.accordion__item--full-width + .accordion__item--full-width {
border-top: 1px solid #E7E7E8; }
.accordion__item--full-width .accordion__header {
padding-bottom: 15px; }
.accordion__item--full-width .hidden-content--with-background {
margin-top: 0px !important; }
.accordion__item--with-no-content {
display: flex;
cursor: auto;
align-items: center;
flex-wrap: wrap; }
.accordion__item--with-border {
border-bottom: 1px solid #E7E7E8; }
.accordion__item--no-padding {
padding: 0; }
.accordion__header {
display: flex;
padding: 15px 25px;
line-height: 1.5em;
cursor: pointer;
align-items: center;
justify-content: space-between; }
.accordion__header .form-check-label--boundary {
padding-top: 0; }
.accordion__header .form-check-input--radio {
width: 100%;
height: 30px;
cursor: pointer; }
@media (min-width: 768px) {
.accordion__header {
padding: 15px 40px; } }
@media (max-width: 991px) {
.accordion__header .form-check-label--boundary {
padding-left: 40px; } }
@media (max-width: 991px) {
.accordion__header--vehicles {
flex-wrap: wrap; } }
.accordion__header--is-active .accordion__arrow-line,
.archived-accordion__header--is-active .accordion__arrow-line {
-webkit-transform: translate(-50%, -50%) rotate(-180deg);
transform: translate(-50%, -50%) rotate(-180deg); }
.accordion__header--is-active .accordion__arrow-line--right,
.archived-accordion__header--is-active .accordion__arrow-line--right {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg); }
.accordion__header--with-padding {
padding: 20px 40px; }
@media (max-width: 767px) {
.accordion__header--with-padding {
padding: 20px 25px; } }
.accordion__header-left {
padding-right: 20px; }
.accordion__header-left--fixed-width {
width: 30%; }
.accordion__header-left-status {
padding-right: 100px;
text-align: left; }
@media (max-width: 767px) {
.accordion__header-left-status {
padding-right: 20px; } }
.accordion__header-left-status--small {
padding-right: 130px; }
@media (max-width: 767px) {
.accordion__header-left-status--small {
padding-right: 20px; } }
.accordion__header-text {
font-size: 1.125em;
flex: 1; }
@media (min-width: 992px) {
.accordion__header-text {
font-size: 1.250em; } }
.accordion__header-text-valign-middle {
margin-top: 10px; }
.accordion__header-text--description {
font-size: 1em; }
.accordion__header-text--distance {
font-size: 0.75em;
flex: 0.75; }
.accordion__header-text--bold {
font-weight: bold; }
.accordion__header-sub-text {
font-size: 0.875em; }
.accordion__header-sub-text--no-margin {
margin-bottom: 0;
font-weight: lighter; }
.accordion__header-sub-text--address {
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-size: 12px; }
.accordion__header-middle {
padding: 0 5px;
text-align: center; }
@media (min-width: 768px) {
.accordion__header-middle {
flex: 1; } }
.accordion__header-right {
padding: 0 10px;
text-align: center;
flex: 1; }
@media (min-width: 768px) {
.accordion__header-right {
display: block;
flex: 1; } }
.accordion__header-right--mobile-full {
padding: 0; }
@media (max-width: 991px) {
.accordion__header-right--mobile-full {
flex: 1 0 100%; } }
.accordion__header-button {
margin-top: 20px;
margin-bottom: 0; }
@media (min-width: 768px) {
.accordion__header-button {
margin-top: 0; } }
@media (max-width: 767px) {
.accordion__header-button--select-vehicle {
margin-top: 0;
width: 100%; } }
.accordion__mobile-block {
display: block; }
@media (min-width: 768px) {
.accordion__mobile-block {
display: inline-block; } }
.accordion__arrow {
position: relative;
padding: 20px 0;
width: 30px;
height: 60px;
cursor: pointer; }
.accordion__arrow-line {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 4px;
border-radius: 5px;
background-color: #1971D4;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all .3s ease-in-out; }
.accordion__arrow-line--right {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg); }
.accordion__icon {
width: 30px; }
.accordion__icon img {
max-width: 100%; }
@media (max-width: 767px) {
.accordion__icon img {
max-width: 45px; } }
.accordion__icon--middle {
width: 80px; }
@media (max-width: 767px) {
.accordion__icon--middle {
width: 60px; } }
.accordion__icon--big {
width: 96px; }
@media (max-width: 767px) {
.accordion__icon--big {
width: 60px;
padding-right: 10px; } }
.accordion__icon--label {
width: 50px; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.accordion__icon--label {
width: 50px;
height: 50px; } }
.accordion__content {
display: none;
padding: 15px 25px;
border-top: 1px solid #E7E7E8;
background-color: #F7F8F9; }
@media (min-width: 768px) {
.accordion__content {
padding: 25px 40px; } }
@media (max-width: 575px) {
.accordion__content {
padding: 20px; } }
.accordion__content .form-control:disabled, .accordion__content .retailer__find-text-field:disabled, .accordion__content .form-control[aria-disabled=true], .accordion__content [aria-disabled=true].retailer__find-text-field, .accordion__content .retailer__find-text-field:disabled, .accordion__content [aria-disabled=true].retailer__find-text-field,
.accordion__content select.form-control:not([size]):not([multiple]):disabled,
.accordion__content select.retailer__find-text-field:not([size]):not([multiple]):disabled, .accordion__content select.form-control:not([size]):not([multiple])[aria-disabled=true], .accordion__content select.retailer__find-text-field:not([size]):not([multiple])[aria-disabled=true], .accordion__content select.retailer__find-text-field:not([size]):not([multiple]):disabled, .accordion__content select.retailer__find-text-field:not([size]):not([multiple])[aria-disabled=true] {
background-color: #E7E7E8;
border-color: #E7E7E8; }
.accordion__content--full-width {
margin: 0 -25px;
padding: 20px 25px;
border-top: 1px solid #E7E7E8; }
@media (min-width: 992px) {
.accordion__content--full-width {
margin: 20px 0 0; } }
.accordion__content-header {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.accordion__content-header-column {
padding: 0px 20px; }
@media (max-width: 575px) {
.accordion__content-header-column--sm {
padding: 0px 5px 0px 12px; } }
.accordion__content-tabular-header {
padding: 10px 0;
font-weight: bold;
border-bottom: 2px solid #E7E7E8; }
.accordion__content-tabular-row {
border-bottom: 1px solid #E7E7E8;
padding: 5px 0; }
.accordion__content-tabular-row + :nth-last-child(1) {
border-bottom: 0px; }
.accordion__list-header {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.accordion__list {
margin: 0;
padding: 0;
list-style-type: none; }
.accordion__list-item {
padding: 10px 0 10px 20px; }
.accordion__list-item + .accordion__list-item {
border-top: 2px solid #E7E7E8; }
.archive__accordion-arrow {
position: relative;
width: 50px;
height: 15px;
outline: none; }
.remove-outline {
outline-style: none; }
/***************************************
BUTTON-BLOCK
***************************************/
.button-block {
padding: 20px 25px;
border-top: 1px solid #c1c1c1;
background-color: #ffffff; }
@media (min-width: 768px) {
.button-block {
border-top: none;
background-color: transparent; } }
@media (min-width: 576px) {
.button-block__button + .button-block__button {
margin-left: 10px; } }
@media (min-width: 576px) {
.button-block__button--secondary {
width: 210px; } }
.button-block__bottom-space {
padding-bottom: 20px; }
/***************************************
WARRANTY-INTERVAL
***************************************/
.warranty-interval {
padding: 20px 25px;
font-size: 1.250em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
@media (min-width: 992px) {
.warranty-interval {
padding: 30px 40px; } }
.warranty-interval + .warranty-interval {
border-top: 1px solid #E7E7E8; }
.warranty-interval__number {
padding-top: 5px;
width: 55px;
height: 55px;
text-align: center;
color: #1971D4;
border: 1px solid #1971D4;
border-radius: 50%; }
.warranty-interval__year {
display: block;
margin-top: -5px;
font-size: 0.625em;
text-transform: uppercase; }
.warranty-interval__text {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.warranty-interval__sub-text {
display: block;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
/***************************************
MANUAL
***************************************/
.manual {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 10px 0;
padding: 10px 0;
border: 1px solid #E7E7E8;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.manual:hover {
text-decoration: none; }
.manual--with-background {
margin: 10px 0;
padding: 0 20px;
height: 120px;
border-radius: 10px;
background-color: white; }
.manual__icon {
width: 75px;
max-width: 100%; }
.manual__text {
max-height: 100px;
font-size: 1.000em;
font-family: HelveticaNeueLTW05-65Medium, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
color: #1D242B;
overflow-y: auto; }
/***************************************
DISCLAIMER-BLOCK
***************************************/
.disclaimer-block {
padding: 20px 25px;
border-top: 1px solid #F7F8F9;
background-color: #ffffff; }
@media (min-width: 992px) {
.disclaimer-block {
padding: 30px 40px 0;
border: none;
background-color: transparent; } }
.disclaimer-block__link {
color: #1971D4; }
.disclaimer-block__text {
margin-bottom: 0;
padding-bottom: 20px; }
@media (min-width: 992px) {
.edit-information_button {
max-width: 25%; } }
@media (max-width: 767px) {
.payment-information_text {
font-size: 27px; } }
/***************************************
HIDDEN-FORM
***************************************/
.hidden-form {
display: none; }
.hidden-form--below-content {
padding-top: 20px; }
.hidden-form--with-padding {
padding: 0 25px 25px; }
@media (min-width: 768px) {
.hidden-form--with-padding {
padding: 0 0 25px; } }
.hidden-form__header {
margin-bottom: 20px;
text-align: center; }
.hidden-visually {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/***************************************
HIDDEN-CONTENT
***************************************/
.hidden-content {
display: none; }
.hidden-content--below-content {
padding-top: 20px; }
.hidden-content--with-background {
margin-top: 20px;
padding: 20px 0;
background-color: #EFEFEF; }
@media (min-width: 768px) {
.hidden-content--with-background {
padding: 20px 0 20px 40px; } }
.hidden-content--with-padding {
padding: 0 25px 25px; }
@media (min-width: 768px) {
.hidden-content--with-padding {
padding: 0 0 25px; } }
.hidden-content__header {
margin-bottom: 20px; }
.hidden-content__list {
max-width: 600px; }
@media (max-width: 991px) {
.hidden-content__list {
padding-right: 20px; } }
.hidden-content__list li {
border-bottom: 1px solid #bcbdbd;
line-height: 28px; }
.hidden-content__list li:last-child {
border-bottom: none; }
/***************************************
DATA-TABLE
***************************************/
.data-table--inside-content {
margin-bottom: 20px; }
.data-table__header {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.data-table__header--is-separated {
padding-bottom: 10px;
border-bottom: 1px solid #F7F8F9; }
.data-table__record {
padding: 5px 10px; }
.data-table__record + .data-table__record {
border-top: 1px solid #F7F8F9; }
.data-table__record--lg {
padding: 10px; }
/***************************************
NUMBER-LINK
***************************************/
.number-link {
font-family: inherit;
color: inherit; }
.number-link:hover {
color: inherit; }
/***************************************
RSA-NUMBER
***************************************/
.rsa-number__icon {
max-width: 100%; }
.rsa-number__text {
margin: 0; }
.rsa-number__sub-text {
font-size: 1.000em; }
.rsa-number__vehicle-info .rsa-show--vehicle-form-info {
display: block !important; }
/***************************************
LIFESTYLE
***************************************/
.lifestyle-viewmore {
display: inline !important;
margin-left: 10px;
width: auto !important; }
.lifestyle-card {
margin-bottom: 20px !important; }
/***************************************
HOW-TO-VIDEO
***************************************/
.how-to-video__image {
display: block;
position: relative; }
.how-to-video__play-icon {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
width: 100px;
height: 100px;
background: url(../_img/play-video.svg) no-repeat center;
transform: translateY(-50%) translateX(-50%); }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.how-to-video__image {
max-height: 250px; }
/*.card.flex{
min-height: 370px;
}*/ }
/***************************************
EVENTS
***************************************/
.events__card {
padding: 0 0 20px; }
@media (min-width: 768px) {
.events__card {
padding: 0 10px 20px; } }
.events__card .card {
padding-bottom: 60px; }
.events__card .card-footer {
position: absolute;
bottom: 40px;
height: 22px; }
.events__card-img {
position: relative;
width: 100%; }
.events__date-box {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
width: 92px;
height: 92px;
background-color: #305e9e;
text-align: center; }
.events__date-box-sibling {
display: inline-block;
min-width: 50px; }
.events__date-box-sibling-divider {
display: inline-block;
line-height: 60px;
vertical-align: top; }
.events__date-box--month {
margin-top: 15px;
margin-bottom: 0px;
font-size: 1.5rem;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff; }
.events__date-box--day {
font-size: 2.4rem;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #ffffff;
line-height: normal;
vertical-align: text-top; }
/***************************************
DISPLAY-MORE
***************************************/
.display-more {
margin-top: -20px;
padding: 15px 0;
font-size: 0.750em;
text-transform: uppercase;
border-top: 1px solid #E7E7E8;
background-color: #fff;
cursor: pointer; }
.display-toggle {
position: relative;
margin: 0px auto;
width: 23px;
height: 16px; }
.display-hide {
display: none; }
.display-hide.flex {
display: none; }
.display-inline-block {
display: inline-block; }
.display-block {
display: block; }
.display-inline-table {
display: inline-table; }
.display-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.display-more__arrow {
display: block;
position: absolute;
top: 50%;
left: 17%;
width: 40%;
height: 3px;
background-color: #000;
border-radius: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s; }
.display-more__arrow--right {
right: 20%;
left: auto;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.display-all-videos {
display: block; }
.display-few-videos {
display: none; }
/***************************************
FULL-LIST
***************************************/
.full-list__item {
position: relative;
padding: 10px 25px;
line-height: 1.5em; }
@media (min-width: 768px) {
.full-list__item {
display: flex;
padding: 15px 40px;
align-items: center;
justify-content: space-between; } }
.full-list__item + .full-list__item {
border-top: 1px solid #E7E7E8; }
.full-list__item--align-items-top {
position: relative;
align-items: flex-start; }
.full-list__item--align-items-center {
position: relative;
align-items: center; }
@media (max-width: 991px) {
.full-list__item--inline-md-down {
display: flex; } }
.full-list__item--is-header-section {
margin: 10px 0px; }
.full-list__item--is-one-section + .full-list__item--is-one-section {
border-top: none; }
.full-list__item--with-padding {
padding: 0px; }
@media (min-width: 768px) {
.full-list__item--with-padding {
padding: 10px 25px; } }
.full-list__item--with-border {
border-bottom: 1px solid #E7E7E8; }
.full-list__item--with-bold-text {
font-size: 1.000em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.full-list__title {
display: flex;
align-items: center; }
@media (min-width: 992px) {
.full-list__title {
flex: 1; } }
.full-list__title--order {
order: -1; }
@media (min-width: 768px) {
.full-list__title--order {
order: -1; } }
.full-list__title--lg {
font-size: 1.125em; }
.full-list__title--fill {
flex: 1; }
@media (max-width: 991px) {
.full-list__title--fill {
display: flex; } }
.full-list__title--align-top {
position: relative;
align-items: flex-start; }
@media (max-width: 767px) {
.full-list__title--align-top {
flex-direction: column; } }
.full-list__title-header-text {
padding-left: 20px;
width: 300px;
font-size: 1.000em;
font-weight: bold;
word-break: break-all; }
@media (max-width: 991px) {
.full-list__title-header-text {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 0;
width: 100%; } }
.full-list__title-header-text--no-flex {
display: block; }
.full-list__title-header-text--normal-weight {
font-weight: normal; }
.full-list__title-header-sub-text {
display: block;
font-size: 0.875em; }
.full-list__title-header-sub-text p {
margin-bottom: 0; }
.full-list__title-header-sub-text--order {
order: 1; }
@media (min-width: 768px) {
.full-list__title-header-sub-text--order {
order: 0; } }
.full-list__icon {
margin-right: 20px; }
@media (max-width: 991px) {
.full-list__icon--left {
display: none; } }
.full-list__icon--move {
margin: 0;
cursor: move; }
@media (max-width: 991px) {
.full-list__icon--move {
margin-right: 1rem; } }
.full-list__button img {
width: 20px;
cursor: pointer; }
.full-list__button--switch-order {
order: 1; }
@media (max-width: 991px) {
.full-list__button--switch-order {
position: absolute;
right: 25px;
order: 0; } }
.full-list__actions {
z-index: 9; }
@media (max-width: 767px) {
.full-list__actions {
display: flex;
flex-direction: column;
justify-content: space-between; } }
.full-list__action-icons {
height: 20px;
width: 20px;
cursor: pointer; }
.full-list__action-icons + .full-list__action-icons {
margin-top: 15px; }
@media (min-width: 768px) {
.full-list__action-icons + .full-list__action-icons {
margin-top: 0px;
margin-left: 10px; } }
.full-list__link {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.full-list__item-title {
padding: 0 0 20px 40px; }
@media (max-width: 767px) {
.full-list__item-title {
padding: 20px 25px; } }
.full-list__item-title--with-border {
display: flex; }
@media (max-width: 767px) {
.full-list__item-title--with-border {
border-top: 1px solid #E7E7E8; } }
.full-list__item-header {
flex: 1;
margin-bottom: 0; }
.full-list__arrow {
position: relative;
width: 50px; }
.full-list__arrow.active .full-list__arrow-line {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.full-list__arrow.active .full-list__arrow-line--right {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.full-list__arrow-line {
display: block;
position: absolute;
top: 50%;
left: 51%;
width: 30%;
height: 3px;
border-radius: 3px;
background-color: #1971D4;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .3s ease-in-out; }
.full-list__arrow-line--right {
top: 50%;
left: auto;
right: 0%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.full-list__content {
padding: 20px 40px;
background-color: #f3f3f2; }
@media (max-width: 767px) {
.full-list__content {
margin: 0 -25px;
padding: 20px 50px;
border-top: 1px solid #E7E7E8; } }
.full-list__content--order {
order: 2; }
@media (max-width: 767px) {
.full-list__content--order {
order: 2; } }
.full-list__content--without-border {
width: 100%;
padding: 20px 40px;
background-color: #f3f3f2; }
@media (max-width: 767px) {
.full-list__content--without-border {
padding: 20px 10px; } }
.full-list__content-list {
margin-bottom: 0; }
.full-list__content-list li {
line-height: 2em; }
.content-block__full-list .full-list__item .full-list__emergency-contact-primary {
display: none;
font-size: 0.875em;
font-weight: normal; }
.content-block__full-list .full-list__item:nth-child(1) .full-list__emergency-contact-primary {
display: inline-block; }
/***************************************
IFRAME
***************************************/
.iframe {
width: 100%;
min-height: 500px;
border: none; }
/***************************************
CARD-ACCORDION
***************************************/
.card-accordion {
-webkit-box-orient: horizontal; }
@media (min-width: 768px) {
.card-accordion {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem; } }
@media (min-width: 992px) {
.card-accordion {
padding: 0; } }
.card-accordion__card {
background-color: #ffffff; }
@media (min-width: 768px) {
.card-accordion__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 48%;
border-radius: 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }
.card-accordion__card + .card-accordion__card {
border-top: 1px solid #F7F8F9; }
@media (min-width: 768px) {
.card-accordion__card + .card-accordion__card {
margin-left: 12.5px;
border-top: none; } }
.card-accordion__card--large {
min-width: 48%; }
@media (min-width: 992px) {
.card-accordion__card--large {
min-width: 64%; } }
.card-accordion__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 20px 25px; }
@media (min-width: 768px) {
.card-accordion__header {
padding: 20px 25px 10px;
border: none; } }
.card-accordion__header--is-active {
border-bottom: 1px solid #F7F8F9; }
@media (min-width: 768px) {
.card-accordion__header--is-active {
border-bottom: none; } }
.card-accordion__header-text {
margin: 5px 0;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
@media (min-width: 768px) {
.card-accordion__arrow {
display: none; } }
.card-accordion__body {
display: none;
padding: 20px 25px; }
@media (min-width: 768px) {
.card-accordion__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 25px 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; } }
.card-accordion__content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.card-accordion__sub-title {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.card-accordion__content-lists {
padding: 0 0 0 20px; }
@media (min-width: 768px) {
.card-accordion__content-lists {
padding: 15px 0 0 20px;
border-top: 1px solid #F7F8F9; } }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.ie-block {
display: block; } }
@media all and (-ms-high-contrast: none) and (min-width: 768px), (-ms-high-contrast: active) and (min-width: 768px) {
.card-accordion__body {
display: block; }
.card-accordion__card {
display: block; } }
/***************************************
COUPON
***************************************/
.coupon {
margin: 20px 0;
padding: 25px 30px 10px;
height: 100%;
border: 2px dashed #cccccc; }
@media (min-width: 768px) {
.coupon {
display: flex;
margin: 0 0 20px;
padding: 25px 10px 10px 20px;
min-height: 180px;
flex-direction: column; } }
.coupon--retailer {
margin: 0; }
.coupon--home-page {
margin-bottom: 0;
padding: 10px 30px; }
@media (min-width: 768px) {
.coupon--home-page {
margin-bottom: 0;
padding: 15px; } }
.coupon__image {
display: block;
margin-bottom: 10px;
max-width: 100%;
width: 240px; }
.coupon__title {
margin-bottom: 30px;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.coupon__title--break {
white-space: pre-wrap;
word-break: break-word; }
.coupon__sub-title {
display: block;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.coupon__title--horizontal {
margin-bottom: 0; }
.coupon__title--retailer {
margin-bottom: 20px; }
@media (min-width: 768px) {
.coupon__body-copy {
flex: 1 0 auto; } }
.coupon__body-copy p:last-child {
margin-bottom: 16px; }
.coupon__body-copy ul {
display: table;
margin-left: 0;
padding-left: 0;
font-size: 0.875em;
list-style: none; }
.coupon__body-copy ul li {
display: table-row; }
.coupon__body-copy ul li:before {
content: "\2022";
display: table-cell;
padding-right: 0.4em; }
.coupon__body-copy--retailer {
font-size: 0.750em; }
.coupon__body-copy--retailer ul {
font-size: 0.750em; }
.coupon__button {
display: block;
margin: 10px 0;
padding: 12px;
width: auto; }
@media (min-width: 992px) {
.coupon__button {
display: inline-block; } }
.coupon__button--with-margin {
margin-top: 0.5rem !important; }
.coupon__side-button {
margin: 0 0 5px; }
.coupon__disclaimer {
font-size: 0.688em; }
.coupon__disclaimer--vertical-spacing {
padding: 10px 0; }
.buttons__text-link {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.coupon__retailer-logo {
margin-bottom: 20px; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.coupon--home-page-national-ie {
position: relative; }
.coupon--home-page-ie {
min-height: 400px;
position: relative; }
.coupon--home-body-ie {
position: absolute;
top: 30px;
bottom: 0; }
.coupon--retailer-body-ie {
position: absolute;
top: 10px;
bottom: 0; }
.coupon--home-copy-ie {
position: relative;
top: 20px; }
.coupon--home-row-ie {
position: absolute;
bottom: 45px;
width: 100%; }
.coupon--retailer-row-ie {
position: absolute;
bottom: 0;
width: 99%; }
.coupon--home-bottom-ie {
position: absolute;
bottom: 0; }
.coupon--horizontal-ie {
min-height: 400px; }
.coupon--vertical-ie {
min-height: 100px; }
.coupon--dealer-vertical-ie {
min-height: 500px; }
.coupon--big-vertical-ie {
min-height: 375px; }
.coupon__image--ie {
max-height: 100px; }
.coupon__title--personal {
min-height: 50px; } }
/***************************************
COUPON WRAPPER
***************************************/
.coupon-wrapper__item {
margin-bottom: 20px; }
@media (max-width: 991px) {
.coupon-wrapper__item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%; } }
/***************************************
VEHICLE-HEALTH
***************************************/
.vehicle-health--display-full-report {
padding: 15px 0;
text-transform: uppercase;
cursor: pointer; }
.vehicle-health__display-toggle {
position: relative;
margin: 0px auto;
width: 23px;
height: 16px; }
.vehicle-health--display-full-report__arrow {
display: block;
position: absolute;
top: 50%;
left: 17%;
width: 40%;
height: 3px;
background-color: #000;
border-radius: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 0.3s ease-in-out 0s; }
.vehicle-health--display-full-report__arrow-right {
right: 20%;
left: auto;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.display-full-report {
display: block; }
.hide-full-report {
display: none; }
.vehicle-health--date-range {
width: 100%; }
@media (min-width: 992px) {
.vehicle-health--date-range {
width: 300px;
float: right; } }
@media (max-width: 1199px) {
.vehicle-health--date-range {
font-size: 1.000em !important; } }
.vehicle-health--date-range-text {
width: 100%;
float: left;
clear: both;
text-align: right;
margin-bottom: 20px; }
@media (max-width: 767px) {
.vehicle-health--date-range-text {
text-align: center; } }
.vehicle-health--Number {
padding-top: 8px;
width: 60px;
height: 60px;
font-size: 1.35em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
text-align: center;
color: #1971D4;
border: 1px solid #1971D4;
border-radius: 50%; }
@media (max-width: 767px) {
.vehicle-health--Number {
padding-top: 5px;
width: 54px;
height: 54px;
font-size: 1em; } }
@media (max-width: 767px) {
.date-range-box {
width: 100%; } }
@media (min-width: 576px) {
.date-range-box {
width: 35%;
margin: 0 auto; } }
@media (max-width: 767px) {
.vcc-vehicle {
width: 100%; } }
@media (min-width: 992px) {
.vcc-vehicle {
width: 365px; } }
@media (max-width: 767px) {
.vehicle-odometer-box {
display: flex; } }
.vehicle-odometer-size {
font-size: 1em; }
@media (min-width: 992px) {
.vehicle-odometer-size {
font-weight: normal;
font-size: 2rem; } }
.vehicle-health--Number__alertText {
display: block;
margin-top: -5px;
font-size: 0.6em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
text-transform: uppercase; }
@media (max-width: 767px) {
.vehicle-health--Number__alertText {
margin-top: -7px; } }
.vehicle-health__icon {
width: 40px; }
/***************************************
ARROW
***************************************/
.arrow {
position: relative;
width: 50px;
height: 15px; }
.arrow--is-active .arrow__line, .card-accordion__header--is-active .card-accordion__arrow .arrow__line, .service-toggle__arrow--is-active .arrow__line, .archive-accordion__header--is-active .archive-accordion__arrow .arrow__line {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.arrow--is-active .arrow__line--right, .card-accordion__header--is-active .card-accordion__arrow .arrow__line--right, .service-toggle__arrow--is-active .arrow__line--right, .archive-accordion__header--is-active .archive-accordion__arrow .arrow__line--right {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.arrow__line {
display: block;
position: absolute;
top: 50%;
left: 51%;
width: 30%;
height: 3px;
border-radius: 3px;
background-color: #1971D4;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; }
.arrow__line--right {
top: 50%;
left: auto;
right: 0%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.arrow__line--white {
background-color: #ffffff; }
/***************************************
HEADER-BLOCK
***************************************/
.header-block {
padding: 20px 25px;
border-bottom: 1px solid #F7F8F9;
background-color: #ffffff; }
@media (min-width: 992px) {
.header-block {
padding: 0 40px 30px;
border: none;
background-color: transparent; } }
/***************************************
SERVICE-TOGGLE
***************************************/
.service-toggle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer; }
.service-toggle__icon {
width: 100%;
max-width: 90px; }
.service-toggle__text {
margin-bottom: 0; }
.service-toggle__btn {
display: inline-block;
width: auto; }
.service-toggle__btn + .service-toggle__btn {
margin-top: 0;
margin-left: 5px; }
/***************************************
PROFILE-IMAGE-TOGGLE
***************************************/
.profile-image-toggle {
position: relative;
margin-bottom: 30px;
cursor: pointer; }
.profile-image-toggle--is-selected .profile-image-toggle__icon {
display: block; }
@media (min-width: 768px) {
.profile-image-toggle--is-selected .profile-image-toggle__icon {
display: none; } }
.profile-image-toggle__icon {
display: none;
position: absolute;
left: 50%;
bottom: -20px;
width: 40px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
image-rendering: -webkit-optimize-contrast; }
.profile-image-toggle__footer {
display: none; }
@media (min-width: 768px) {
.profile-image-toggle__footer {
display: block;
padding-top: 20px; } }
/***************************************
MY VEHICLE
***************************************/
.my-vehicle__accordion .vehicle-attention-bar__vehicle-stats {
position: relative;
padding-left: 0px; }
.my-vehicle__accordion .vehicle-form-info--accordion-show {
display: block; }
/* .vehicle-form-info {*/
/* padding:0px !important;*/
/* background: #f3f3f3;*/
/* }*/
.my-vehicle__accordion-content {
padding-top: 20px; }
@media (max-width: 575px) {
.my-vehicle__accordion-content {
padding-right: 0px; } }
.my-vehicle__accordion__arrow {
margin-right: 1rem; }
@media (max-width: 575px) {
.my-vehicle__accordion__arrow {
margin-right: 0rem; } }
/***************************************
Archive VEHICLE
***************************************/
.archive-accordion {
-webkit-box-orient: horizontal; }
@media (min-width: 768px) {
.archive-accordion {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem; } }
@media (min-width: 992px) {
.archive-accordion {
padding: 0; } }
.my-archive__accordion__header {
border-top: 1px solid #c1c1c1;
margin-bottom: 15px; }
.archive-accordion__archive {
background-color: #ffffff; }
@media (min-width: 768px) {
.archive-accordion__archive {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 48%;
border-radius: 50%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }
.archive-accordion__archive + .archive-accordion__archive {
border-top: 1px solid #c1c1c1; }
@media (min-width: 768px) {
.archive-accordion__archive + .archive-accordion__archive {
margin-left: 10px;
border-top: none; } }
.archive-accordion__archive--large {
min-width: 48%; }
@media (min-width: 992px) {
.archive-accordion__archive--large {
min-width: 64%; } }
.archive-accordion__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px; }
@media (min-width: 768px) {
.archive-accordion__header {
padding: 10px;
border: none; } }
.archive-accordion__header--is-active {
border-bottom: 1px solid #c1c1c1; }
@media (min-width: 768px) {
.archive-accordion__header--is-active {
border-bottom: none; } }
.archive-accordion__header-text {
margin: 5px 0;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
@media (min-width: 768px) {
.archive-accordion__arrow {
display: none; } }
.archive-accordion__body {
display: none;
padding: 10px; }
@media (min-width: 768px) {
.archive-accordion__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; } }
.archive-accordion__content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.archive-accordion__sub-title {
font-size: 0.875em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.archive-accordion__content-lists {
padding: 0 0 0 20px; }
@media (min-width: 768px) {
.archive-accordion__content-lists {
padding: 15px 0 0 20px;
border-top: 1px solid #c1c1c1; } }
.authUser-item + .authUser-item {
border-top: 1px solid #E7E7E8; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.ie-block {
display: block; } }
@media all and (-ms-high-contrast: none) and (min-width: 768px), (-ms-high-contrast: active) and (min-width: 768px) {
.archive-accordion__body {
display: block; }
.archive-accordion__archive {
display: block; } }
.vehicle-form__alignment {
position: absolute; }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* .vehicle-form__alignment {
position: relative;
}*/
.accordion__content--my-vehicles em {
font-size: 0.688em; } }
@media screen and (min-device-width: 768px) and (max-device-width: 808px) {
.exterior-color {
margin-top: 10px; } }
@media screen and (max-device-width: 767px) {
.vehicle-form__alignment {
position: relative; } }
/***************************************
SERVICE HISTORY
***************************************/
.service-history__edit-header {
padding: 10px;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
background: #E7E7E8; }
.service-history--edit-content {
padding: 20px; }
.service-history__edit-sub-header {
font-size: 0.875em;
margin-bottom: 20px; }
.service-history__add-entry {
margin: 0px;
padding: 15px 30px;
border-bottom: 1px solid #E7E7E8; }
@media (min-width: 768px) {
.service-history__column-division {
border-right: 1px solid #E7E7E8; } }
.service-history__row-division {
border-bottom: 1px solid #E7E7E8;
padding: 15px 0px; }
.service-history__row-division:last-child {
border-bottom: 0px; }
@media (min-width: 768px) {
.service-history__offset-3 {
margin-left: 24%; } }
/***************************************
RETAILER
***************************************/
.retailer__info {
padding: 20px 0; }
.retailer__heading {
font-size: 1.25rem;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.retailer__name {
margin-bottom: 0px;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
.retailer__list {
padding-left: 40px;
list-style-position: outside; }
.retailer__list li {
padding: 0px; }
.retailer__button-text-row {
padding: 10px 0;
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 1199px) {
.retailer__button-text-row {
margin: 20px 0 0px; } }
.retailer__complimentary-box {
margin: 20px 0px;
padding: 10px 0;
border: dashed 2px #c1c1c1;
-o-border-image: url(../asset/_img/border-dashed.png) 2 round;
border-image: url(../asset/_img/border-dashed.png) 2 round; }
@media (max-width: 767px) {
.retailer__complimentary-box {
margin-top: 0px; } }
.retailer__content-heading {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.500em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold; }
@media (min-width: 992px) {
.retailer__content-heading {
margin-top: 0px; } }
.retailer__complimentary-text {
padding-bottom: 10px;
line-height: 15px; }
.retailer--coupon-buttons {
position: relative;
padding-top: 0px;
text-align: center; }
@media (min-width: 992px) {
.retailer--coupon-buttons {
position: absolute;
right: 0px; } }
@media (max-width: 1199px) {
.retailer--coupon-buttons {
padding-top: 20px; } }
.retailer__map {
margin-bottom: 10px; }
.retailer__small-text {
margin-bottom: 0;
font-size: 0.688em; }
@media (max-width: 1199px) {
.retailer__small-text {
margin: 0px 10px; } }
.retailer__find-retailer {
margin: 0 -25px;
padding: 30px;
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
background-color: #E7E7E8; }
@media (min-width: 768px) {
.retailer__find-retailer {
margin: 0 -15px; } }
@media (min-width: 992px) {
.retailer__find-retailer {
margin: 0;
padding: 30px 55px; } }
.retailer__find-text-field {
margin-bottom: 0; }
.retailer__find-button-field {
padding: 11px 10px; }
.retailer__tabular {
padding-bottom: 0px;
margin: 5px 0; }
.retailer__tabular div {
margin-bottom: 10px; }
@media (min-width: 992px) {
.retailer__tabular div {
border-right: 1px solid #c1c1c1; }
.retailer__tabular div:nth-child(3n) {
border-right: none; } }
.retailer__tabular-find-retailer {
padding-bottom: 0px;
margin: 5px 0; }
.retailer__tabular-find-retailer div {
margin-bottom: 10px; }
@media (min-width: 992px) {
.retailer__tabular-find-retailer a {
font-size: 0.95rem !important; }
.retailer__tabular-find-retailer div:nth-child(even) {
border-left: 1px solid #c1c1c1; } }
.findretailer_accordion {
padding: 25px 12px !important; }
.retailer__preferred {
display: inline-block;
margin-bottom: 10px;
padding-left: 10px; }
.retailer__phone-number {
display: block;
margin-bottom: 10px;
font-size: 1.125em; }
.retailer__retailer__info--has-info:after {
display: none; }
.retailer__retailer__info-toggle {
position: relative;
padding: 15px 35px 15px 15px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.retailer__retailer__info--has-info:after {
content: '';
display: block;
position: absolute;
top: 32%;
left: 95%;
width: 20px;
height: 20px;
background: url(../_img/information-button.png) no-repeat center center;
background-size: cover;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.retailer__modal-content {
position: relative;
padding: 15px 0 15px 30px; }
@media (max-width: 575px) {
.retailer__modal-content {
height: auto; } }
.retailer__modal-body {
height: 80vh;
overflow-y: auto;
text-align: left; }
.retailer__modal-body .modal__body-content {
padding-right: 30px; }
.retailer__modal-title {
position: relative;
top: 0px; }
.retailer__amenities-list {
text-align: left;
max-height: 400px;
overflow-y: auto; }
.retailer__send-to-vehicle {
width: auto;
display: flex;
text-transform: capitalize; }
.retailer__send-to-vehicle img {
height: 22px; }
.retailer__send-to-vehicle span {
font-weight: bold;
font-size: 0.875em; }
.max-width-100 {
max-width: 100% !important; }
.myRetailer-font-11 {
font-size: 0.656em !important; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.retailer__send-to-vehicle {
padding-top: 10px; }
.retailer__send-to-vehicle img {
height: 25px; }
.retailer__send-to-vehicle span {
font-weight: bold;
font-size: 0.875em; } }
.retailer-sm--view {
display: none; }
@media (min-width: 769px) and (max-width: 1300px) {
.retailer-sm--view {
display: block; }
.retailer-view {
display: none; }
.retailer__send-to-vehicle {
display: inherit; } }
input::-ms-clear {
display: none; }
.show__more__amenities-list {
display: table;
text-align: center;
margin: auto; }
/***************************************
JOINT-FORM
***************************************/
.joint-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.joint-form__input {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.joint-form__button {
width: 30%; }
/***************************************
RECALLS
***************************************/
.recalls__modal-content {
position: relative;
padding: 15px 0px 0px 15px; }
@media (max-width: 575px) {
.recalls__modal-content {
height: auto; } }
.recalls__modal-dialog {
width: 736px; }
.recalls__modal-body {
height: 80vh;
overflow-y: scroll;
width: 720px;
padding: 25px;
text-align: left;
margin-bottom: 15px; }
.recalls__modal-title {
margin: 30px 0px; }
.modal-container p {
display: block;
clear: both;
margin-left: 0px !important; }
.modal-container b {
display: block;
clear: both; }
.modal-container span {
left: 0 !important; }
/***************************************
HOME
***************************************/
.home ul li {
display: table; }
.tabContent {
display: block !important; }
.font-family-bold--75 {
font-family: HelveticaNeueLTW05-75Bold; }
/***************************************
DASHBOARD
***************************************/
.dashboard__title {
display: block;
font-size: 0.750em;
font-weight: bold; }
@media (min-width: 768px) {
.dashboard__title {
font-size: 1.000em; } }
.dashboard__value {
font-size: 1.125em; }
@media (min-width: 768px) {
.dashboard__value {
font-size: 1.500em; } }
/***************************************
EMERGENCY-CONTACTS
***************************************/
.emergency-contacts__page-content {
margin: 10px 60px 10px 40px; }
@media (max-width: 991px) {
.emergency-contacts__page-content {
margin: 0px; } }
.emergency-contacts__info {
position: absolute;
right: 10px;
width: 30px;
height: 30px;
background: url(/asset/_img/information-button.svg);
background-size: 24px;
background-repeat: no-repeat;
vertical-align: middle; }
.emergency-contacts__remove-all-btn--width {
width: 381px;
text-align: right;
margin-top: -5px; }
@media (max-width: 991px) {
.emergency-contacts__remove-all-btn--width {
width: 100%; } }
.emergency-contacts__userIcon {
display: inline-block;
width: 40px;
height: 40px;
background: url(/asset/_img/emergency-user.svg);
background-size: 100% 100%; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.modal__close img {
height: 100%; } }
/***************************************
SUPPORT-RESOURCES
***************************************/
.support-resources__header-section__title-text {
font-size: 2.063em;
padding: 20px 0 0; }
@media (max-width: 575px) {
.support-resources__header-section__title-text {
text-align: center;
border-bottom: 1px solid #bcbdbd;
padding: 10px 0px; } }
@media (max-width: 575px) {
.support-resources__content-block__page-content {
border-top: 1px solid #bcbdbd; } }
.support-resources__circle-number {
color: #ffffff;
font-size: 1.5rem;
font-weight: 900; }
.support-resources__sub-heading-text {
margin: 10px 0; }
@media (max-width: 575px) {
.support-resources__sub-heading-text {
margin: 15px 0; } }
.support-resources__content-text {
padding: 25px 145px; }
@media (max-width: 575px) {
.support-resources__content-text {
padding: 25px 10px; } }
.support-resources__sub-heading-border {
margin-left: 5rem;
border-bottom: 1px solid #bcbdbd; }
@media (max-width: 575px) {
.support-resources__sub-heading-border {
margin-left: 0rem; } }
@media (max-width: 575px) {
.number-icon {
width: 10%;
height: 10%;
margin-top: 0.75rem; } }
.support-resources__subcontent {
padding: 25px 69px; }
@media (max-width: 575px) {
.support-resources__subcontent {
padding: 10px 0px; } }
.support-resources__header-section {
padding: 20px 40px;
background-color: #f3f3f2; }
.support-resources-tabular-row {
border-top: 1px solid #c1c1c1;
padding: 12px 0; }
.support-resources-tabular-row + :nth-last-child(1) {
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 575px) {
.support-resources-tabular-row:nth-last-child(1) {
border-bottom: 0px; } }
.support-resources__step-numbers {
width: 55px;
height: 55px; }
@media (max-width: 767px) {
.support-resources__step-numbers {
width: 45px;
height: 45px; } }
.support-resources__head-unit-img {
width: 400px; }
@media (max-width: 767px) {
.support-resources__head-unit-img {
width: 100%; } }
.support-resources__road-assistance-img {
background-image: url(/asset/_img/support-flex-img1.jpg); }
.support-resources__subaru-support-img {
background-image: url(/asset/_img/support-flex-img2.jpg); }
.support-resources__starlink-support-img {
background-image: url(/asset/_img/support-flex-img3.jpg); }
.support-resources__dagger {
font-size: 0.4em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
top: -1.5em; }
.support-resources__asterick {
font-size: 0.5em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
top: -0.85em; }
/***************************************
ICON BUTTON
***************************************/
.icon-button {
display: flex;
position: relative;
padding: 10px 5px;
text-align: center;
font-size: 1em;
color: #1D242B;
border: 1px solid #c1c1c1;
border-radius: 5px;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: #ffffff;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none; }
.icon-button:after {
border-radius: 5px !important; }
.icon-button--select {
font-size: 1.313em;
background-position: 95% 50% !important;
background-size: 55px !important; }
.icon-button--aligned-padding {
padding-right: 50px;
padding-left: 50px; }
@media (min-width: 768px) {
.icon-button--min-height {
min-height: 145px; } }
.icon-button--min-height-xs-up {
min-height: 125px; }
@media (min-width: 768px) {
.icon-button--min-height-xs-up {
min-height: 145px; } }
.icon-button--no-border-radius {
border-radius: 0px !important; }
.icon-button.highlighted {
border: 1px solid #1971D4; }
.icon-button--row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center; }
.icon-button--space-around {
flex-direction: row;
justify-content: space-around; }
.icon-button--horizontal {
flex-direction: row; }
.icon-button--is-disabled:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.2); }
.icon-button__item {
flex: 1; }
.icon-button__item--left {
display: flex;
flex-direction: column-reverse;
align-items: center; }
.icon-button__item--right {
text-align: left; }
.icon-button__item-icon {
margin-bottom: 10px;
width: 53px;
height: 8px;
background-color: #c1c1c1; }
.icon-button__item-icon.active {
background-color: #28945b; }
.icon-button__img {
margin-bottom: 5px;
height: 50px;
flex: none; }
.icon-button__img--lg {
height: 60px; }
.icon-button__text {
font-size: 1em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
text-align: center; }
.icon-button__text--lg {
font-size: 1.313em; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
/*.icon-button {
display: block;
}*/
.icon-button--space-around {
justify-content: center;
height: 165px; }
.icon-button--row {
position: relative;
height: 165px; }
.icon-button__item--ie {
position: absolute;
top: 10px;
right: 10px; }
/*.icon-button__item--left {
position: absolute;
left: 20px;
top: 20px;
}*/
.icon-button--select {
background-position: 110% 50% !important;
background-size: 35% !important; }
.icon-button__img {
display: block;
margin: 0 auto;
height: 50px; }
.icon-button__img--fixed-width-ie {
width: 50px; }
.icon-button__img--fixed-width-sm-ie {
width: 35px; } }
.highlighted.icon-button--thick {
border: 3px solid #1971D4; }
/***************************************
RES-SETTINGS
***************************************/
.res-settings {
padding-top: 20px; }
.res-settings__start-button-container {
padding: 15px 0;
width: 25%;
text-align: center; }
@media (max-width: 991px) {
.res-settings__start-button-container {
width: 100%; } }
.res-settings__hidden-input {
display: none; }
.res-settings__hidden-input:checked + label {
background: url("../_img/res-start-button.svg") no-repeat center center; }
.res-settings__res-button {
position: relative;
width: 120px;
height: 120px;
font-size: 1em;
text-align: center;
color: #fff;
border-radius: 50%;
background: #1971D4; }
.res-settings__res-icon {
position: absolute;
top: 25px;
left: 50%;
width: 30px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.res-settings__res-text {
position: absolute;
bottom: 20px;
left: 50%;
line-height: 1em;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.res-settings__res-text--sm {
bottom: 15px;
font-size: .75em; }
.res-settings__phev-icon {
position: absolute;
left: 0;
right: 0;
top: 12px;
margin: auto;
width: auto;
height: 30px; }
.res-settings__start-text {
position: absolute;
left: 5px;
right: 0;
bottom: 20px;
line-height: 12px;
font-size: 0.625em;
white-space: pre-wrap;
word-wrap: break-word; }
.res-settings__start-text--phev {
font-size: 0.750em;
line-height: 12px;
bottom: 15px;
width: 90%; }
.res-settings__temperature-number {
font-size: 3.750em;
font-weight: 600;
vertical-align: middle; }
.res-settings__temperature-icon {
height: 50px;
vertical-align: baseline; }
.res-settings__two-column {
display: flex;
justify-content: space-between; }
.res-settings__box {
flex: 0 0 48%; }
.res-settings__box--small {
flex: 0 0 30%; }
@media (min-width: 768px) {
.res-settings__box--small {
flex: 0 0 20%; } }
@media (min-width: 1200px) {
.res-settings__box--small {
flex: 0 0 30%; } }
@media (min-width: 1200px) {
.res-settings__box--min-height {
min-height: 80px; } }
.res-settings__box--center {
display: flex;
flex: 1;
text-align: center;
align-items: center;
justify-content: center; }
.res-settings__panel {
padding-top: 65px; }
@media (max-width: 991px) {
.res-settings__panel {
padding: 0; } }
.res-settings__panel-box {
padding: 10px; }
.res-settings__air-flow-icon {
height: 50px; }
.res-settings__air-flow-text {
flex: 1;
font-size: 1.313em; }
@media (min-width: 992px) {
.res-settings__air-flow-text {
padding-left: 25px;
text-align: left; } }
.res-settings__air-flow-arrow {
height: 20px; }
.res-settings__fan-speed {
display: flex;
padding-left: 30px;
align-items: flex-end;
flex: 1; }
.res-settings__fan-speed-img {
height: 50px; }
.res-settings__fan-speed-img.rotate {
-webkit-animation-name: rotatebox;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards; }
@-webkit-keyframes rotatebox {
from {
-webkit-transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg); } }
.res-settings__fan-speed-item {
padding-bottom: 2px;
min-width: 15px;
border-bottom: 3px solid #ccc;
flex: 1; }
.res-settings__fan-speed-item + .res-settings__fan-speed-item {
margin-left: 5px; }
.res-settings__fan-speed-item.res-settings__fan-speed-item--is-active {
border-bottom-color: #28945b; }
.res-settings__fan-speed-item.res-settings__fan-speed-item--is-active:before {
background-color: #28945b; }
.res-settings__fan-speed-item:before {
background-color: transparent; }
.res-settings__fan-speed-item:nth-child(1):before {
content: '';
display: block;
height: 10px; }
.res-settings__fan-speed-item:nth-child(2):before {
content: '';
display: block;
height: 15px; }
.res-settings__fan-speed-item:nth-child(3):before {
content: '';
display: block;
height: 20px; }
.res-settings__fan-speed-item:nth-child(4):before {
content: '';
display: block;
height: 25px; }
.res-settings__fan-speed-item:nth-child(5):before {
content: '';
display: block;
height: 30px; }
.res-settings__fan-speed-item:nth-child(6):before {
content: '';
display: block;
height: 35px; }
.res-settings__fan-speed-item:nth-child(7):before {
content: '';
display: block;
height: 40px; }
.res-settings__box-number {
font-size: 5.125em;
font-family: HelveticaNeueLTW05-55Roman, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif; }
.res-settings__box-number-icon {
position: relative;
top: -15px; }
.res-settings__square {
padding: 30px 0;
text-align: center;
background-color: #ffffff;
border: 1px solid #1971D4;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
@media (min-width: 768px) {
.res-settings__square {
padding: 20px 0; } }
@media (min-width: 1200px) {
.res-settings__square {
padding: 30px 0; } }
.res-settings__square-icon {
max-width: 53px;
vertical-align: middle; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.res-setting__air-flow::after,
.res-settings__fan-speed-wrapper::after {
content: "";
display: table;
clear: both; }
.res-settings__air-flow-icon {
float: left;
height: 50px; }
.res-settings__air-flow-text {
float: left; }
.res-settings__air-flow-arrow {
float: right; }
.res-settings__fan-speed {
float: left;
margin-left: 10px; }
.res-settings__fan-speed-img {
float: left;
margin-left: 10px;
width: 30px; } }
/***************************************
SAVED SETTINGS
***************************************/
.saved-settings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media (max-width: 767px) {
.saved-settings {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column; } }
.saved-settings--with-border {
border-top: 1px solid #c1c1c1; }
.saved-settings__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-flow: wrap;
flex-flow: wrap;
padding: 40px 20px;
width: 33.33%;
border-left: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1; }
.saved-settings__item:nth-child(3n) {
border-right: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.saved-settings__item:nth-child(3n) {
border-right: none; } }
@media (max-width: 991px) {
.saved-settings__item:nth-child(2n) {
border-right: 1px solid #c1c1c1; } }
@media (max-width: 767px) {
.saved-settings__item:nth-child(2n) {
border-right: none; } }
.saved-settings__item:last-child {
border-right: 1px solid #c1c1c1; }
@media (max-width: 767px) {
.saved-settings__item:last-child {
border-right: none; } }
@media (max-width: 991px) {
.saved-settings__item {
width: 50%; } }
@media (max-width: 767px) {
.saved-settings__item {
padding: 30px 20px;
width: 100%;
border-left: none; } }
.saved-settings__item--aligned-top {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.saved-settings__item--display-none {
display: none; }
.saved-settings__item-img {
width: 38px;
height: 38px;
margin-right: 20px;
background: url(../_img/plus-circle-icon.svg) no-repeat center center;
cursor: pointer; }
.saved-settings__item-img.disabled {
width: 38px;
height: 38px;
margin-right: 20px;
background: url(../_img/plus-circle-icon-gray.svg) no-repeat center center; }
.saved-settings__item-img.active {
width: 38px;
height: 38px;
margin-right: 20px;
background: url(../_img/active-circle-icon.svg) no-repeat center center; }
.saved-settings__item-img.inactive {
width: 38px;
height: 38px;
margin-right: 20px;
background: url(../_img/inactive-circle-icon.svg) no-repeat center center; }
.saved-settings__item-img.processing {
width: 38px;
height: 38px;
margin-right: 20px;
background: url(../_img/loading-blue.svg) no-repeat center center;
background-size: contain; }
.saved-settings__item-title {
padding-right: 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 1.250em;
font-weight: bold;
cursor: pointer; }
.saved-settings__item-sub-title {
margin-bottom: 5px;
font-size: 1.250em;
font-weight: normal; }
.saved-settings__item-edit {
display: block;
padding-bottom: 10px;
cursor: pointer; }
.saved-settings__action-icon {
height: 21px; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.saved-settings__item-delete {
height: 25px; }
.saved-settings__item-vertical {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }
/***************************************
CURFEWS
***************************************/
.curfews {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.curfews {
flex-direction: column;
border: none; } }
.curfews__day {
display: flex;
flex-direction: column;
align-items: center; }
@media (max-width: 991px) {
.curfews__day {
flex-direction: row;
margin: 0;
padding: 10px 10px 10px 0;
border-bottom: 1px solid #c1c1c1; } }
.curfews__text-link {
padding-top: 20px; }
@media (max-width: 991px) {
.curfews__text-link {
flex: 1;
padding-top: 0; } }
.curfews__label {
font-size: 0.875em; }
@media (max-width: 991px) {
.curfews__label--left-spacing {
padding-left: 15px; } }
.curfews__label--top-spacing {
padding-top: 40px; }
@media (max-width: 991px) {
.curfews__label--top-spacing {
padding: 0 30px; } }
@media (max-width: 767px) {
.curfews__label--left {
padding: 0 20px 0 0; } }
@media (max-width: 767px) {
.curfews__label--right {
padding: 0 40px 0 0; } }
@media (max-width: 991px) {
.curfews__label--fill {
flex: 1; } }
.curfews__day-select {
display: flex;
padding-top: 40px;
margin-bottom: 10px; }
@media (max-width: 991px) {
.curfews__day-select {
padding: 0 15px;
flex: 1;
justify-content: space-between; } }
@media (max-width: 767px) {
.curfews__day-select {
padding: 0; } }
@media (max-width: 767px) {
.curfews__day-select .form-check-label {
padding-top: 3px;
padding-left: 30px;
font-size: 0.875em; } }
.curfews__day-section {
margin-bottom: 10px; }
@media (max-width: 991px) {
.curfews__day-section {
margin-right: 5px;
margin-bottom: 0;
padding: 5px 0 15px; } }
.curfews__day-title {
margin-bottom: 5px;
color: #606162; }
.curfews__day-setting {
display: table;
padding: 0 50px;
vertical-align: middle;
border: 1px solid #1971D4;
cursor: pointer; }
@media (max-width: 991px) {
.curfews__day-setting {
margin: 0 auto; } }
.battery__day-wrapper {
position: relative; }
.battery__day-wrapper.atMaxDays .battery__disabled-trigger {
display: block; }
.battery__disabled-trigger {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10; }
.curfews__day-time {
display: table-cell;
padding-right: 5px;
font-size: 2.500em;
font-weight: bold;
text-align: right;
vertical-align: middle; }
@media (min-width: 992px) {
.curfews__day-time {
font-size: 1.875em; } }
.curfews__day-period {
display: table-cell;
font-size: 0.938em;
font-weight: bold;
text-align: left;
vertical-align: middle;
text-transform: uppercase; }
@media (max-width: 991px) {
.curfews__day-period {
font-size: 0.625em; } }
.curfews__day-end-text {
margin-right: 10px;
color: #000000; }
.curfews__footer {
max-width: 220px;
float: right; }
@media (max-width: 991px) {
.curfews__footer {
margin-top: 10px;
max-width: none;
float: none;
text-align: center; } }
.curfews__time-select {
display: flex;
align-items: center;
margin-bottom: 10px; }
.curfews__time-toggle {
display: flex;
flex-direction: column;
padding-top: 10px; }
.curfews__time-toggle.display-hide {
display: none; }
.curfews__time-toggle--vertical-spacing {
padding-top: 20px; }
.curfews__time-toggle-label {
margin: 0; }
.curfews__time-toggle-label input {
display: none; }
.curfews__time-toggle-label input + span {
font-size: 1.000em;
font-weight: bold;
color: #c1c1c1; }
.curfews__time-toggle-label input:checked + span {
color: #1971D4; }
/***************************************
CART
***************************************/
.cart {
position: fixed;
top: 100%;
right: 0;
left: 0;
z-index: 100;
max-height: 70vh;
background-color: #f3f3f2;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }
@media (min-width: 992px) {
.cart {
position: relative;
top: 0;
max-height: none;
background-color: transparent;
-webkit-transition: none;
transition: none; } }
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px); } }
.cart--is-visible {
margin-top: -50px;
-webkit-animation: bounce 1s;
-webkit-animation-iteration-count: 1; }
@media (min-width: 992px) {
.cart--is-visible {
margin-top: 0; } }
.cart--is-active {
top: 40%;
margin-top: 0; }
@media (min-width: 992px) {
.cart--is-active {
top: 0; } }
.cart--is-fixed {
position: fixed;
top: 10px; }
.cart__content-wrapper {
position: relative;
height: 100vh; }
@media (min-width: 992px) {
.cart__content-wrapper {
position: relative;
height: auto; } }
.cart__scrollable-content {
position: absolute;
padding-top: 50px;
width: 100%;
height: 60vh;
overflow-y: auto; }
@media (min-width: 992px) {
.cart__scrollable-content {
position: relative;
padding-top: 0;
height: auto;
border-radius: 10px;
overflow: hidden; } }
.cart__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 10;
padding: 5px 15px;
color: #ffffff;
background-color: #1971D4;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (min-width: 992px) {
.cart__header {
display: none; } }
.cart__header-icon {
margin-right: 10px;
width: 20px; }
.cart__header-text {
font-size: 0.750em;
font-weight: bold;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.cart__header-arrow {
position: relative;
padding: 20px 0;
width: 30px; }
.cart--is-active .cart__arrow-line {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.cart--is-active .cart__arrow-line--right {
-webkit-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.cart__arrow-line {
display: block;
position: absolute;
top: 50%;
left: 52%;
width: 30%;
height: 3px;
border-radius: 3px;
background-color: #ffffff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; }
.cart__arrow-line--right {
top: 50%;
left: auto;
right: 0%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.cart__sub-header {
padding: 10px 15px;
color: #ffffff;
background-color: #353331; }
@media (min-width: 992px) {
.cart__sub-header {
padding: 20px 15px;
font-size: 1.125em; } }
.cart__content {
padding: 15px;
font-size: 0.875em;
color: #353331;
background-color: #f3f3f2; }
.cart__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 15px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.cart__item--no-spacer {
margin-bottom: 0; }
.cart__item-text {
font-size: 0.875em;
line-height: 1.3em;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.cart__item-heading {
font-size: 0.875em;
font-weight: bold;
color: #1971D4; }
.cart__item-heading--dark {
color: #000000; }
.cart__item-price {
padding: 0 20px;
font-size: 0.875em; }
.cart__item-action {
width: 30px; }
.cart__action-icon {
height: 23px; }
.cart__promo-code {
padding: 15px 0;
border-top: 1px solid #999999; }
.cart__promo-label {
font-size: 0.875em;
color: #353331; }
.cart__promo-btn {
margin-top: -1px;
margin-bottom: 0; }
.cart__promo-error {
color: #a70000;
display: none; }
.cart__totals {
border-top: 1px solid #999999;
padding-top: 15px; }
.cart__sales-tax {
padding: 15px 0; }
.cart__total {
font-size: 1.000em; }
.cart__actions {
padding: 20px 15px 5px; }
.cart__item--coupon {
margin-top: -17px;
font-weight: normal; }
.full-checkbox {
margin-top: 15px;
padding: 10px;
width: 100%;
border: 1px solid #bebbb4;
background-color: #ffffff; }
@media (min-width: 576px) {
.full-checkbox {
margin-right: 15px;
width: 45%; }
.full-checkbox:nth-child(even) {
margin-right: 0; } }
@media (min-width: 992px) {
.full-checkbox {
width: 23%; }
.full-checkbox:nth-child(even) {
margin-right: 15px; }
.full-checkbox:nth-child(4) {
margin-right: 0; }
.full-checkbox:nth-child(5) {
margin-right: 0; } }
.full-checkbox--full {
width: 100%; }
@media (min-width: 992px) {
.full-checkbox--auto {
width: auto; } }
.full-checkbox--two-column {
width: 48%; }
.full-checkbox--two-column:nth-child(2) {
margin-right: 0; }
@media (max-width: 767px) {
.full-checkbox--two-column {
margin-right: 0;
width: 100%; } }
.full-checkbox--is-active {
border-color: #1971D4; }
.full-checkbox--service {
padding-left: 0;
padding-right: 0;
border: none; }
.full-checkbox--service + .full-checkbox--service {
margin: 0; }
.full-checkbox--service:nth-child(odd) {
background-color: #fff; }
.full-checkbox--service:nth-child(even) {
background-color: #efefef; }
.full-checkbox--modal {
margin: 0 0 10px; }
.full-checkbox__label {
display: block;
position: relative;
font-size: 1.250em;
text-align: left;
cursor: pointer; }
.full-checkbox__label--flex-verticle {
text-align: center;
flex-direction: column; }
.full-checkbox__label--small {
padding-left: 5px !important;
padding-right: 40px;
font-size: 1.000em;
text-align: left;
background-position: right center; }
.full-checkbox__grouped-content {
width: 100%;
text-align: center; }
.full-checkbox__grouped-content--left-align {
text-align: left; }
.full-checkbox__price {
display: inline-block;
font-weight: bold;
color: #000000;
vertical-align: baseline; }
@media (min-width: 768px) {
.full-checkbox__price {
display: block; } }
@media (min-width: 768px) {
.full-checkbox__price--inline {
display: inline-block; } }
.full-checkbox__cents {
font-size: 0.875em; }
.full-checkbox__text {
font-size: 1.000em; }
.full-checkbox__details {
display: block;
padding-top: 10px;
font-size: 0.875em; }
.full-checkbox__input {
padding: 10px 0; }
/***************************************
FORM-STEPS
***************************************/
.form-steps {
padding: 10px;
text-align: center; }
@media (max-width: 767px) {
.form-steps {
padding: 0; } }
.form-steps__step {
display: inline-block;
width: 50px;
height: 50px;
font-size: 1.250em;
line-height: 45px;
color: #ffffff;
border-radius: 50%;
background-color: #bebbb4;
border: 2px solid #ffffff;
-webkit-box-shadow: 0 0 5px #bebbb4;
box-shadow: 0 0 5px #bebbb4; }
@media (max-width: 767px) {
.form-steps__step {
width: 30px;
height: 30px;
line-height: 25px;
font-size: 0.875em; } }
.form-steps__step--is-active {
background-color: #1f5f9e;
-webkit-box-shadow: 0 0 5px #1f5f9e;
box-shadow: 0 0 5px #1f5f9e; }
.form-steps hr {
margin: 10px 0; }
/***************************************
BATTERY
***************************************/
.battery__block {
display: flex;
position: relative;
justify-content: center;
margin: auto;
margin-bottom: 5px;
height: 60px;
width: 240px;
border: 5px solid #d2d2d2;
border-radius: 5px; }
.battery__block:before {
display: block;
content: "";
position: absolute;
top: 15px;
right: -10px;
height: 20px;
width: 5px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
background-color: #d2d2d2; }
.battery__item {
margin-top: 5px;
margin-right: 3px;
height: 40px;
width: 8px;
border-radius: 8px;
background-color: #d2d2d2; }
.battery__item--active {
background-color: #36be39; }
.battery__item--inactive {
background-color: #d2d2d2; }
.battery__charge-block {
display: flex; }
@media (max-width: 991px) {
.battery__charge-block {
flex-direction: column;
align-items: center; } }
.battery__setting {
display: flex; }
@media (max-width: 991px) {
.battery__setting {
flex-direction: column;
flex-flow: column-reverse; } }
.battery__setting-status {
margin: 25px 5px 0 0; }
@media (max-width: 991px) {
.battery__setting-status {
margin: 25px 0 0 0; } }
.battery__setting-edit {
padding: 20px 5px 0 10px;
cursor: pointer; }
@media (max-width: 991px) {
.battery__setting-edit {
padding-top: 30px; } }
.battery__setting-edit img {
width: 21px; }
.battery__setting-time {
flex: 1; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.battery__setting-time form[name="chargeScheduleEdit"] select.form-control, .battery__setting-time form[name="chargeScheduleEdit"] select.retailer__find-text-field, .battery__setting-time form[name="chargeSchedule"] select.form-control, .battery__setting-time form[name="chargeSchedule"] select.retailer__find-text-field {
padding-right: 12px;
background-size: 50px; }
.battery__setting-time form[name="chargeScheduleEdit"] .selectbox-ie--medium, .battery__setting-time form[name="chargeSchedule"] .selectbox-ie--medium {
padding-right: 12px;
background-size: 85px !important;
background-position: 95px !important; } }
@media (max-width: 991px) {
.battery__setting-time {
margin-top: 20px; } }
@media (max-width: 575px) {
.battery__setting-time form[name="chargeScheduleEdit"] select.form-control, .battery__setting-time form[name="chargeScheduleEdit"] select.retailer__find-text-field, .battery__setting-time form[name="chargeSchedule"] select.form-control, .battery__setting-time form[name="chargeSchedule"] select.retailer__find-text-field {
padding-right: 12px;
background-size: calc(3.4rem - 30px); } }
.battery__setting-time-row {
margin-right: 5px;
padding-top: 10px;
border-bottom: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.battery__setting-time-row {
margin: 0; } }
.battery__setting-time-row:last-child {
border: none; }
.battery__setting-time-row--last {
border: none; }
.battery__setting-create {
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 20px;
padding: 15px 0;
border-bottom: 1px solid #c1c1c1; }
.battery__setting-switch {
margin-bottom: 20px; }
@media (max-width: 991px) {
.battery__setting-switch {
text-align: left; } }
@media (max-width: 991px) {
.battery__setting-switch-label {
position: relative;
flex: 0 0 49%;
padding: 10px 0;
text-align: center;
border: 1px solid #c1c1c1; } }
.battery__setting-switch-label--add-edit {
position: relative;
flex: 0 0 49%;
padding: 10px 0;
text-align: center;
border: 1px solid #c1c1c1; }
.battery__setting-switch-label--is-disabled {
background-color: #F7F8F9;
border: none; }
@media (max-width: 991px) {
.battery__setting-switch-label input:checked + span:before {
content: '';
display: block;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 2px solid #1971D4; } }
.battery__setting-switch-label--add-edit input:checked + span:before {
content: '';
display: block;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 2px solid #1971D4; }
.battery__setting-switch-label--is-disabled input[type="radio"][checked] + span {
color: #000000; }
.battery__setting-switch-label input:checked:disabled + span:before {
border: none; }
.battery__setting-toggle {
display: flex;
flex-direction: column;
border: 2px solid #1971D4; }
@media (max-width: 991px) {
.battery__setting-toggle {
flex-direction: row;
justify-content: space-around;
border: none; } }
.battery__setting-toggle--add-edit {
display: flex;
flex-direction: row;
justify-content: space-around;
border: none; }
.battery__setting-toggle--is-disabled {
border: none; }
.battery__setting-day {
display: flex;
justify-content: space-around; }
.battery__setting-day-label {
display: inline-block;
font-size: 0.875em;
color: #606162; }
.battery__setting-day-check {
display: none; }
.battery__setting-day-decoy {
display: flex;
margin-top: 5px;
padding-left: 25px;
min-height: 25px;
min-width: 25px;
background-size: 25px 25px;
background-image: url("../_img/checkbox-uncheck.svg");
background-repeat: no-repeat;
background-position: center center;
align-items: center; }
.battery__setting-day-check:checked + .battery__setting-day-decoy {
background-image: url("../_img/checkbox-checked.svg"); }
.battery__setting-day-check:disabled + .battery__setting-day-decoy {
background-image: url("../_img/checkbox-uncheck-gray.svg"); }
.battery__setting-day-check:checked:disabled + .battery__setting-day-decoy {
background-image: url("../_img/checkbox-checked-disabled.jpg"); }
/*.battery__setting-day-check:checked + label {
background-image: url('../_img/checkbox-checked.svg');
}
.battery__setting-day-check:disabled + label {
background-image: url('../_img/checkbox-uncheck-gray.svg');
}
.battery__setting-day-check:checked:disabled + label {
background-image: url('../_img/checkbox-checked-disabled.jpg');
}*/
.battery__setting-charge {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-left: 20px;
border-left: 1px solid #c1c1c1; }
@media (max-width: 991px) {
.battery__setting-charge {
padding-left: 0;
padding-bottom: 20px;
border-left: none;
border-bottom: 1px solid #c1c1c1; } }
.battery__editing-row {
display: none;
justify-content: center;
margin-right: 5px;
padding: 20px 0;
background-color: #f3f3f2;
border-bottom: 1px solid #acacac; }
@media (max-width: 991px) {
.battery__editing-row {
margin: 0; } }
.battery__editing-row--is-active {
display: flex; }
@media (max-width: 991px) {
.battery__editing-row--is-active {
display: block; } }
@media only screen and (min-width: 1024px) and (max-width: 1199px) and (-ms-high-contrast: active), only screen and (min-width: 1024px) and (max-width: 1199px) and (-ms-high-contrast: none) {
.climatecontrol__button--text {
max-width: 100px; } }
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.battery__setting-charge {
display: block; } }
/***************************************
SEARCH AUTOCOMPLETE CONTENT
***************************************/
.searchAutocompleteContent, .favTripPlaceContent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
z-index: 9999;
width: 100%;
max-height: 600px;
background-color: transparent !important;
overflow: visible; }
@media (min-width: 768px) {
.searchAutocompleteContent, .favTripPlaceContent {
max-height: 500px; } }
.searchAutocompleteContent--boundaryAlert {
position: absolute !important;
top: 44px;
left: 0;
right: 0;
margin-top: 11px;
border: none !important;
padding: 0px 8px !important;
background-color: #fff !important;
z-index: 9999; }
.searchAutocompleteContent--findReatailer {
background-color: #fff !important;
top: 123px !important;
left: 0;
right: 0;
z-index: 9999;
left: 68px;
right: 17px; }
@media (max-width: 991px) {
.searchAutocompleteContent--findReatailer {
top: 82px !important;
left: 26px !important;
right: 103px !important; } }
@media (max-width: 767px) {
.searchAutocompleteContent--findReatailer {
left: 20px !important;
right: 103px !important; } }
.searchAutocompleteContent--boundary {
top: 58px;
left: 0;
right: 0; }
@media (max-width: 991px) {
.searchAutocompleteContent--boundary {
padding: 0 64px;
max-height: 400px !important;
overflow: auto;
top: 67px; } }
.searchAutocompleteTemplate, .favTripPlaceTemplate {
padding: 5px;
font-size: 0.875em; }
.searchCategoryResultTrigger {
font-weight: bold;
color: #1971D4;
cursor: pointer; }
.category-icon-show .addIcon {
display: none; }
.category-icon-show .categoryIcon {
display: block; }
/***************************************
SPINNER
***************************************/
.spinner {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.3); }
.spinner__content {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
padding: 20px;
width: 85%;
max-width: 300px;
text-align: center;
color: #ffffff;
-webkit-transform: translate(-50%);
transform: translate(-50%); }
@keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.spinner__img {
max-width: 50px;
animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
-webkit-animation: spin 1.5s infinite linear; }
/*IE Specific Style*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
_:-ms-fullscreen, :root .spinner__img {
max-height: 50px;
animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
-webkit-animation: spin 1.5s infinite linear; } }
/***************************************
STOLEN VEHICLE INSTRUCTIONS
***************************************/
@media (min-width: 768px) {
.stolen-vehicle-instructions {
display: -webkit-box;
display: -ms-flexbox;
display: flex; } }
.stolen-vehicle-instructions__card:not(:last-child) {
border-bottom: 1px solid #BDBCBC; }
@media (min-width: 768px) {
.stolen-vehicle-instructions__card:not(:last-child) {
border-right: 1px solid #BDBCBC;
border-bottom: none; } }
.stolen-vehicle-instructions__icon {
display: block;
position: absolute;
top: 40px;
left: 50%;
width: 0;
height: 0; }
@media (max-width: 767px) {
.stolen-vehicle-instructions__icon {
position: relative;
left: 4%; } }
.stolen-vehicle-instructions__number {
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
font-size: 2.000em;
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
color: #1971D4;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.stolen-vehicle-instructions__content {
margin-top: 90px; }
@media (max-width: 767px) {
.stolen-vehicle-instructions__content {
margin-top: 6%;
margin-left: 17%;
margin-bottom: 6%;
padding-right: 6%; } }
/*Target for Landscape*/
@media only screen and (min-width: 569px) and (max-width: 1280px) and (orientation: landscape) {
.stolen-vehicle-instructions__card:not(:last-child) {
border-right: 1px solid #BDBCBC;
border-bottom: none; }
.stolen-vehicle-instructions__icon {
position: relative;
left: 50%; }
.stolen-vehicle-instructions__content {
margin-top: 90px; } }
/***************************************
VEHICLE-DIAGRAM
***************************************/
.vehicle-diagram {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%; }
.vehicle-diagram__tires {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 25%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.vehicle-diagram__tire-container + .vehicle-diagram__tire-container {
margin-top: 30px; }
.vehicle-diagram__tire {
position: relative;
width: 100%;
max-width: 80px;
background: url(../_img/tire-icon.svg) center center no-repeat;
background-size: cover; }
.vehicle-diagram__tire:after {
content: "";
display: block;
padding-bottom: 100%; }
.vehicle-diagram__alert {
position: absolute;
top: -3px;
right: 0px;
width: 25px; }
.vehicle-diagram__tire-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.vehicle-diagram__detail-value {
font-size: 1.250em; }
@media (min-width: 374px) {
.vehicle-diagram__detail-value {
font-size: 1.563em; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.vehicle-diagram__detail-value, .vehicle-diagram__icon {
display: inline-block; } }
.vehicle-diagram__detail-value .tipr_container_bottom {
font-size: 0.875em; }
@media (max-width: 992px) {
.vehicle-diagram__detail-value--right .tipr_container_bottom {
margin-left: auto !important;
position: absolute;
right: 0; }
.vehicle-diagram__detail-value--left .tipr_container_bottom {
margin-left: auto !important;
position: absolute;
left: 0; } }
.vehicle-diagram__tip {
display: inline-block;
margin-top: -6px;
margin-left: 2px;
width: 13px;
vertical-align: top; }
.vehicle-diagram__icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 10px;
width: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.vehicle-diagram__icon--right {
margin-right: 10px;
margin-left: 0; }
.vehicle-diagram__vehicle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 10px;
width: 50%; }
.vehicle-diagram__vehicle-outline {
width: 100%; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.vehicle-diagram__detail-value, .vehicle-diagram__icon {
display: inline-block; }
.vehicle-diagram__tire-container {
display: inline-block;
width: 100%; }
.vehicle-diagram__vehicle {
display: inline-block;
width: 40%;
text-align: center; }
.vehicle-diagram__tires {
display: inline-block;
width: 30%;
text-align: center; }
.vehicle-diagram__tire, .vehicle-diagram__tire-details {
display: block;
margin: 0 auto; }
.vehicle-diagram__vehicle-outline {
/*max-height: 80%;*/ }
.vehicle-diagram__icon .img-fluid {
max-width: 30px;
height: 100%; }
.vehicle-diagram__tip .img-fluid {
height: 100%; } }
@media all and (max-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.vehicle-diagram__vehicle-outline {
height: 380px; } }
/***************************************
pin-4digit
***************************************/
@font-face {
font-family: 'text-security-disc';
src: url("../_fonts/text-security-disc.eot");
src: url("../_fonts/text-security-disc.eot?#iefix") format("embedded-opentype"), url("../_fonts/text-security-disc.woff") format("woff"), url("../_fonts/text-security-disc.ttf") format("truetype"), url("../_fonts/text-security-disc.svg#text-security") format("svg"); }
.pin-mask {
font-family: 'text-security-disc';
-webkit-text-security: disc; }
.pin-mask::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
.pin-mask::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.pin-mask::-ms-clear, .pin-mask::-ms-reveal {
display: none; }
.pin-mask::placeholder {
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif; }
.pin-mask:-ms-input-placeholder {
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif; }
.pin-mask::-ms-input-placeholder {
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif; }
.pin-mask::-moz-placeholder {
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif; }
.pin-mask:-moz-placeholder {
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif; }
.pin-mask-copy {
font-family: 'text-security-disc';
-webkit-text-security: disc; }
/***************************************
LANGUAGE
***************************************/
/***************************************
INVOICE-TABLE
***************************************/
.invoice-table {
/* Force table to not be like tables anymore */ }
@media (max-width: 991px) {
.invoice-table {
/* Hide table headers (but not display: none;, for accessibility) */
/*
Label the data
*/ }
.invoice-table table,
.invoice-table thead,
.invoice-table tbody,
.invoice-table th,
.invoice-table td,
.invoice-table tr {
display: block; }
.invoice-table thead tr {
position: absolute;
top: -9999px;
left: -9999px; }
.invoice-table tr {
border: 1px solid #c1c1c1; }
.invoice-table tr:nth-child(even) {
background-color: #E7E7E8; }
.invoice-table td {
/* Behave like a "row" */
border: none;
position: relative;
padding: 5px 10px 5px 40%;
white-space: normal;
text-align: left; }
.invoice-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 10px;
width: 35%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold; }
.invoice-table td:before {
content: attr(data-title); }
.invoice-table .invoice-table__button-column {
padding: 10px; }
.invoice-table .invoice-table__button-column:before {
content: '';
display: none; } }
.detect-card-type {
position: relative;
padding-right: 55px;
background-size: 40px;
background-repeat: no-repeat; }
input.card-bg-discover {
background: url("../_img/discover-card.svg") no-repeat right 15px center #FFFFFF;
background-size: 40px; }
input.card-bg-mastercard {
background: url("../_img/mastercard.svg") no-repeat right 15px center #FFFFFF;
background-size: 40px; }
input.card-bg-amex {
background: url("../_img/amex-card.svg") no-repeat right 15px center #FFFFFF;
background-size: 40px; }
input.card-bg-visa {
background: url("../_img/visa-card.svg") no-repeat right 15px center #FFFFFF;
background-size: 40px; }
/***************************************
MAP-LOCATION
***************************************/
.map-location__action {
position: absolute;
bottom: 45px;
right: 5px;
z-index: 402;
width: 36px; }
.map-location__car {
display: inline-block;
width: 29px;
height: 29px;
border-radius: 50%;
padding: 5px;
cursor: pointer;
background: #1971D4;
margin: 10px 0; }
.map-location__person {
display: inline-block;
width: 29px;
height: 29px;
border-radius: 50%;
padding: 6px;
cursor: pointer;
background: #00a651; }
.map-location__start {
display: inline-block;
width: 29px;
height: 29px;
border-radius: 50%;
padding: 0 8px;
cursor: pointer;
background: #000; }
/***************************************
IMAGE-CONTENT-BLOCK
***************************************/
.image-content-block {
padding: 0.625rem 0.625rem 20px;
background-color: #ffffff; }
@media (min-width: 768px) {
.image-content-block {
padding-top: 30px;
background-color: transparent; } }
.image-content-block__wrapper::after {
content: "";
display: table;
clear: both; }
@media (min-width: 768px) {
.image-content-block__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid #E7E7E8;
border-radius: 10px;
background-color: #ffffff; } }
.image-content-block__description {
padding: 30px 30px;
background-color: #ffffff; }
.image-content-block__heading {
font-family: HelveticaNeueLTW05-85Heavy, Helvetica Neue, -apple-system, Open Sans, Arial, sans-serif;
font-weight: bold;
line-height: 1.3em; }
.image-content-block__buttons {
display: inline-block;
margin-bottom: 10px;
text-align: center; }
.image-content-block__buttons + .image-content-block__buttons {
padding-left: 10px; }
@media (min-width: 768px) and (max-width: 1149px) {
.image-content-block__buttons + .image-content-block__buttons {
padding-left: 0; } }
.image-content-block__image {
min-height: 220px;
overflow: hidden; }
@media (min-width: 768px) {
.image-content-block__image {
min-height: 220px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden; } }
.image-content-block__image--right {
min-height: 220px;
overflow: hidden; }
@media (min-width: 768px) {
.image-content-block__image--right {
min-height: 220px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden; } }
.image-content-block__image--mysubaru {
background: url(../_img/mysubaru-app-img.jpg) no-repeat center center;
background-size: 100% 100%; }
.image-content-block__image--starlink {
background: url(../_img/mysubaru-app-img.jpg) no-repeat center center;
background-size: 100% 100%; }
.image-content-block__image--tradeup {
background: url(../_img/TUA_MySubaruDesktop.jpg) no-repeat;
background-size: cover;
background-position: 70% 50%; }
/***************************************
SWITCH
***************************************/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px; }
.switch input {
opacity: 0;
width: 0;
height: 0; }
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s; }
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
border-radius: 50%;
background-color: white;
-webkit-transition: .4s;
transition: .4s; }
input:checked + .slider {
background-color: #1971D4; }
input:focus + .slider {
box-shadow: 0 0 1px #1971D4; }
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px); }
/**** Toggle ****/
.toggle-switch {
position: relative;
display: inline-block; }
.toggle-switch__checkbox {
display: none; }
.toggle-switch__label {
display: block;
width: 50px;
height: 20px;
text-indent: -150%;
clip: rect(0 0 0 0);
color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.toggle-switch__label:before,
.toggle-switch__label:after {
content: "";
display: block;
position: absolute;
cursor: pointer; }
.toggle-switch__label:before {
width: 100%;
height: 100%;
background-color: #dedede;
border-radius: 9999em;
transition: background-color .25s ease-in-out; }
.toggle-switch__label:after {
top: 1px;
left: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
transition: left .25s ease-in-out; }
.toggle-switch__checkbox:checked + .toggle-switch__label:before {
background: #3c763d; }
.toggle-switch__checkbox:checked + .toggle-switch__label:after {
left: 26px; }
[data-letters]:before {
content: attr(data-letters);
display: inline-block;
font-size: 1em;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
text-align: center;
border-radius: 50%;
background: plum;
vertical-align: middle;
margin-right: 1em;
color: white; }
.trade-up-wrapper {
padding: 0.625rem 0.625rem 20px;
background-color: #ffffff; }
@media (min-width: 768px) {
.trade-up-wrapper {
padding-top: 30px;
background-color: transparent; } }
.trade-up {
background-color: #ffffff; }
.trade-up::after {
content: "";
display: table;
clear: both; }
@media (min-width: 768px) {
.trade-up {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 10px; } }
.trade-up__description {
padding: 70px 30px; }
.trade-up__heading {
font-family: "Helvetica Neue Bold", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1.3em; }
.trade-up__image {
min-height: 220px;
overflow: hidden; }
@media (min-width: 768px) {
.trade-up__image {
min-height: 220px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden; } }
.trade-up__image--mysubaru {
background: url(../_img/TUA_MySubaruDesktop.jpg) no-repeat center center;
background-size: cover; }
/***************************************
CHIPS
***************************************/
.chips {
white-space: nowrap;
padding: 5px 10px;
margin-bottom: 12px;
margin-right: 9px;
cursor: pointer;
border-radius: 12px; }
.chips.active {
background-color: #000;
color: #fff; }
.chips-default {
border: 1px solid #454545;
background-color: #fff; }
.chips-primary {
color: #fff;
background-color: #1971D4;
border-color: #1971D4; }
.chips-secondary {
color: #1971D4;
background-color: #fff;
border: 1px solid #1971D4; }
.chips-container {
display: flex;
position: relative;
text-align: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: flex-start;
flex-wrap: wrap;
overflow-x: auto; }
.chips-hr {
border: 1px solid #606162;
margin-right: 5%;
margin-bottom: 10px; }
.checkbox {
display: block;
position: relative;
z-index: 0;
margin-bottom: 0.75rem; }
.checkbox.disabled .checkbox-decoy {
background-color: #c1c1c1;
border: 1px solid #c1c1c1 !important; }
.checkbox.disabled .checkbox-input:checked + .checkbox-decoy:before {
background: url("../_img/checkbox-checked-disabled.svg") no-repeat; }
.checkbox:last-child {
margin-bottom: 0; }
.checkbox.disabled .checkbox-label, .checkbox.disabled .checkbox-decoy, .checkbox.disabled {
color: #8e8d8b;
cursor: not-allowed; }
.checkbox-input {
position: absolute;
top: 50%;
margin-left: -1.25rem;
visibility: hidden;
-webkit-transform: translateY(-57%);
transform: translateY(-57%); }
.checkbox__label {
display: block;
position: relative;
font-size: 1.250em;
text-align: left;
cursor: pointer; }
.checkbox-decoy {
display: block;
position: absolute;
top: 0;
width: 26px;
height: 26px;
border-radius: 5px;
border: 1px solid #1971D4;
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
cursor: pointer; }
.checkbox-input:checked + .checkbox-decoy:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 20px;
height: 20px;
background: url("../_img/checkbox-check.svg") no-repeat;
background-size: 20px 20px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.poi-list {
border: 1px solid #969696; }
.poi-list__item {
padding: 10px; }
.poi-list__item + .poi-list__item {
border-top: 1px solid #969696; }
/***************************************
TAB-BLOCK
***************************************/
.tab-block__nav {
display: flex;
position: relative;
text-align: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.tab-block__nav::-webkit-scrollbar {
display: none; }
.tab-block__heading {
padding: 20px 25px;
font-weight: bold;
color: #606162;
border-bottom: 1px solid #E7E7E8;
white-space: nowrap;
cursor: pointer; }
.tab-block__heading.tab-block__heading--is-active, .tab-block__heading:focus {
color: #1D242B;
border-bottom: 3px solid #1D242B;
outline: none; }
@media (min-width: 768px) {
.tab-block__heading {
flex-grow: 1;
flex-basis: 0; } }
.tab-block__content {
padding: 20px 0; }
.tab-block__content:focus {
outline: none; }
@media (max-width: 575px) {
.tab-block__heading.comm-pref__tab-block {
padding: 20px 5px;
font-size: 0.9em; } }
/***************************************
ICON
***************************************/
.icon {
display: inline-block;
max-width: 100%; }
.icon--inline {
width: auto;
height: 1em; }
.icon--inline-lg {
width: auto;
height: 1.2em; }
.icon--baseline {
vertical-align: baseline; }
.icon-inline-sm {
height: 1em !important; }
.favorite {
display: inline-block;
position: relative;
transition: border .4s ease-in-out; }
.favorite:focus {
outline: none;
border-bottom: 2px solid #1D242B; }
.favorite:focus .favorite__shape-container {
transform: translateY(-3px); }
.favorite--is-animated .favorite__shape-container {
transform: scale(1.5); }
.favorite--is-saved .favorite__shape {
fill: #1971D4; }
.favorite--show-alert .favorite__alert {
top: 105%;
opacity: 1; }
.favorite--not-saved .favorite__shape-container {
animation: notSaved 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.favorite__alert {
position: absolute;
top: 115%;
left: 50%;
z-index: 100;
padding: 5px 10px;
font-size: 0.750em;
color: #fff;
white-space: nowrap;
border-radius: 3px;
background-color: rgba(29, 37, 44, 0.7);
opacity: 0;
transform: translateX(-50%);
transition: all .4s ease-in-out; }
.favorite__alert.favorite__alert--anchor-right {
right: 0;
left: auto;
transform: translateX(0); }
.favorite__alert:before {
content: '';
display: block;
position: absolute;
top: -5px;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 3px 5px 3px;
border-color: transparent transparent rgba(29, 37, 44, 0.7) transparent;
transform: translateX(-50%); }
.favorite__alert.favorite__alert--anchor-right:before {
left: auto;
right: 12px;
transform: translateX(0); }
.favorite__shape-container {
width: 30px;
height: 30px;
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.favorite__shape {
fill: none;
stroke: #1971D4;
stroke-width: 10;
stroke-miterlimit: 10; }
@keyframes heartPulse {
0% {
transform: scale(1); }
50% {
transform: scale(1.5); } }
@keyframes heartUnlike {
50% {
transform: scale(0.75); } }
@keyframes notSaved {
0% {
transform: rotate(0deg) scale(1); }
40% {
transform: rotate(-15deg); }
60% {
transform: rotate(15deg); }
80% {
transform: rotate(-15deg); }
100% {
transform: rotate(0deg) scale(1); } }
.trip-list__item {
transition: all .4s ease-in-out; }
.trip-list__item:focus {
outline: none;
border-left: 3px solid #1D242B;
padding-left: 5px; }
@media (max-width: 991px) {
.listFavoriteTrips__col6 {
flex-basis: 100% !important; } }
.tripBuilder .address-block {
min-height: 64px; }
.sort-move {
cursor: grab; }
.sort-move:active {
cursor: grabbing; }
.poi {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 200;
background-color: #ffffff;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.poi__description {
padding: 0 5px;
border-right: 1px solid #ccc;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
.poi__description--no-border {
border: none; }
.poi__header {
font-size: 1.125em;
font-weight: bold; }
.poi__details {
font-size: 0.750em;
line-height: 16px; }
.poi__add {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 5px 0 15px;
text-align: center;
font-size: 1.000px;
color: var(--blue);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.poi__icon {
width: 15px;
max-width: 100%; }
/* saved trips and fav destinations tab*/
.destinations-tab {
position: relative;
padding: 15px;
border-bottom: 1px solid #ccc; }
.tab1.active ~ .indicator {
left: 0; }
.tab2.active ~ .indicator {
left: 50%; }
.indicator {
width: 50%;
height: 4px;
position: absolute;
bottom: 0;
background: #000;
-webkit-transition: 0.3s ease;
transition: 0.3s ease; }
/***************************************
RES-WRAPPER
***************************************/
.res-wrapper {
padding: 24px 24px 32px;
width: 100%;
border-radius: 20px;
background: #f7f5f5;
/* Old browsers */
background: -webkit-linear-gradient(-45deg, #f7f5f5 0%, #d6d6d6 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f7f5f5 0%, #d6d6d6 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
@media (min-width: 992px) {
.res-wrapper {
padding: 36px 24px; } }
.res-wrapper--phev {
min-height: 180px;
padding: 24px; }
.res-wrapper--map {
padding: 0;
overflow: hidden; }
@media (max-width: 767px) {
.locateMap {
margin-top: 1rem;
margin-bottom: 1rem; } }
.mapLocation {
min-height: 300px; }
/***************************************
ROUNDED-BUTTONS
***************************************/
.rounded-button {
position: relative;
z-index: 0;
padding: 32px 24px;
width: 100%;
min-height: 180px;
border: 1px solid #c1c1c1;
border-radius: 20px;
background: transparent;
overflow: hidden;
cursor: pointer; }
.rounded-button:active, .rounded-button:focus {
border-color: #1971D4;
outline: none; }
.rounded-button__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: space-between; }
.rounded-button__content--climate-control {
min-height: 114px; }
.rounded-button__icon {
display: block;
position: relative;
z-index: 200;
height: 40px; }
.rounded-button__text {
position: relative;
z-index: 200;
text-align: left;
font-size: 1.313rem;
color: #1971D4; }
.rounded-button__text--home {
margin-top: 24px;
color: #1D242B; }
/***************************************
BACKGROUND-BUTTONS
***************************************/
.background-button {
position: relative;
z-index: 0;
padding: 32px 24px;
height: 100%;
width: 100%;
min-height: 180px;
overflow: hidden;
border: none;
border-radius: 20px;
background: url("../_img/car-bg.png") no-repeat;
background-size: cover;
background-position: center center;
cursor: pointer; }
.background-button__text {
position: relative;
z-index: 200;
font-size: 1.313rem;
text-align: left;
color: #ffffff; }
.background-button__icon {
display: block;
position: relative;
z-index: 200;
height: 40px; }
/***************************************
HOME-BATTERY
***************************************/
.home-battery {
position: relative;
z-index: 0;
margin: 0 auto;
width: 80%;
max-width: 250px; }
@media (max-width: 374px) {
.home-battery {
max-width: 210px; } }
.home-battery__img {
position: relative;
z-index: 100;
max-width: 100%; }
.home-battery__img--back {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 90; }
.home-battery__img--dark-shadow {
-webkit-filter: drop-shadow(6px 6px 18px rgba(0, 0, 0, 0.16));
filter: drop-shadow(6px 6px 18px rgba(0, 0, 0, 0.16)); }
.home-battery__img--light-shadow {
-webkit-filter: drop-shadow(-5px -5px 5px #ffffff);
filter: drop-shadow(-5px -5px 5px #ffffff); }
.home-battery__text {
position: absolute;
top: 50%;
left: 50%;
z-index: 200;
width: 100%;
font-size: 0.875rem;
text-align: center;
color: #ffffff;
transform: translate(-50%, -50%); }
@media (max-width: 374px) {
.home-battery__text {
font-size: 0.75rem; } }
.home-battery__icon {
height: 21px; }
/***************************************
HOME-BUTTON
***************************************/
.home-button {
position: relative;
z-index: 0;
margin: 0 auto 15px;
width: 134px;
height: 134px;
font-size: 0.75rem;
text-align: center;
color: #fff;
border-radius: 50%;
background: #f7f5f5;
/* Old browsers */
background: -webkit-linear-gradient(-45deg, #f7f5f5 0%, #d6d6d6 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f7f5f5 0%, #d6d6d6 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.16);
box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.16); }
.home-button--sm {
width: 100px;
height: 100px; }
@media (min-width: 375px) {
.home-button {
width: 150px;
height: 150px; } }
@media (min-width: 992px) {
.home-button {
width: 180px;
height: 180px; } }
.home-button:before {
content: '';
display: block;
position: absolute;
top: 6%;
right: 6%;
bottom: 6%;
left: 6%;
z-index: 100;
border-radius: 50%;
background: #4a9cfa;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4a9cfa 0%, #1971D4 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a9cfa', endColorstr='$blue-light',GradientType=0 );
/* IE6-9 */ }
.home-button:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -10;
border-radius: 50%;
-webkit-box-shadow: -6px -6px 16px 0 #ffffff;
box-shadow: -6px -6px 16px 0 #ffffff; }
.home-button__content {
position: absolute;
top: 50%;
left: 50%;
z-index: 200;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.home-button__icon {
width: 40px; }
.home-button__text {
font-size: 16px;
text-align: center; }
.home-button__text--sm {
bottom: 15px;
font-size: 12px; }
/***************************************
PROCESSING
***************************************/
.processing {
display: none;
position: fixed;
top: auto;
bottom: 0;
right: 0;
left: 0;
z-index: 20000000000000; }
.processing.errorMessage .processing__close {
background: url("../_img/close-icon--statusbar-white.svg") no-repeat center;
background-size: 12px; }
.processing--is-shown {
display: block; }
.processing__container {
display: flex;
position: relative;
margin: 0 auto;
padding: 10px 30px;
width: 100%;
min-height: 110px;
font-size: 14px;
text-align: center;
line-height: 20px;
color: #fff;
background-color: rgba(29, 37, 44, 0.95);
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all .3s ease-in-out; }
@media (min-width: 992px) {
.processing__container {
padding: 20px 30px;
min-height: 0;
flex-direction: row; } }
@media (min-width: 992px) {
.processing__message {
flex: 1;
order: 2; } }
@media (min-width: 992px) {
.processing__left {
width: 20%;
text-align: left;
order: 1; } }
@media (min-width: 992px) {
.processing__right {
width: 20%;
text-align: right;
order: 3; } }
.processing__cancel {
margin: 10px auto 0;
padding: 16px 40px;
font-size: 14px;
text-align: center;
color: #ffffff;
background-color: #1971D4;
border: none;
border-radius: 5px; }
@media (min-width: 992px) {
.processing__cancel {
margin: 0; } }
.processing__icon {
margin-top: 10px;
width: 40px; }
@media (min-width: 992px) {
.processing__icon {
margin-top: 0;
width: 50px; } }
.processing__close {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 30px;
height: 30px;
background: url("../_img/close-icon--statusbar-blue.svg") no-repeat center;
background-size: 12px; }
@media (min-width: 992px) {
.processing__close {
position: relative;
width: 50px;
height: 50px;
background-size: 20px; } }
.datepicker-dropdown {
z-index: 9999;
position: relative !important;
top: 0 !important;
left: 0 !important; }
.datepicker-cell.range {
background-color: #dbdbdb !important; }
.datepicker-cell.selected, .datepicker-cell.selected:hover {
border-radius: 50% !important;
color: #fff !important;
border: 3px solid black !important;
background-color: #000;
line-height: 30px; }
.datepicker-cell.focused:not(.selected) {
background-color: transparent !important; }
.datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected) {
border-radius: 50% !important;
line-height: 30px; }
.datepicker-dropdown .datepicker-picker {
width: 100%;
box-shadow: none !important;
background: transparent !important; }
.datepicker-header {
box-shadow: none !important;
background: transparent !important; }
.datepicker-view {
justify-content: space-evenly !important; }
.datepicker-controls .button {
background-color: transparent !important; }
.datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected), .range-start.todayDate {
background-color: transparent;
border: 3px solid #000 !important;
color: #000 !important; }
.prev-btn, .next-btn {
font-size: 18px !important;
color: blue !important; }
.datepickcer__footer--btn {
width: 100%;
margin-top: 10px; }
.tripdates__modalheading--pt {
padding-top: 10px;
padding-bottom: 10px;
font-size: 18px;
font-weight: bold;
width: 100%;
border-bottom: 1px solid #808080; }
.tripdates__modal--open {
display: block; }
.tripDates__modal--dialog {
background-color: #e9ecef;
min-height: 100vh; }
.tripDates__modalheader {
padding: 15px 24px;
text-align: center;
background: #ffffff;
border-bottom: 1px solid #dee2e6; }
.tripdates__modal--is-active {
height: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto; }
.tripdates__body--overflow {
overflow: hidden; }
.tripdates__modal--footer {
border: none;
padding-top: 50px; }
.disable-touch {
pointer-events: none; }
.enable-touch {
pointer-events: auto; }
@font-face {
font-family: "app-icons";
src: url("../../../asset/_fonts/app-icons.eot?vgqhpw");
src: url("../../../asset/_fonts/app-icons.eot?vgqhpw#iefix") format("embedded-opentype"), url("../../../asset/_fonts/app-icons.ttf?vgqhpw") format("truetype"), url("../../../asset/_fonts/app-icons.woff?vgqhpw") format("woff"), url("../../../asset/_fonts/app-icons.svg?vgqhpw#app-icons") format("svg");
font-weight: normal;
font-style: normal;
font-display: block; }
.icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "app-icons" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
color: inherit;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon-work:before {
content: ""; }
.icon-support:before {
content: ""; }
.icon-temperature-simple:before {
content: ""; }
.icon-temperature:before {
content: ""; }
.icon-tire:before {
content: ""; }
.icon-tools:before {
content: ""; }
.icon-tradeup:before {
content: ""; }
.icon-trips:before {
content: ""; }
.icon-unlock-outline:before {
content: ""; }
.icon-unlock:before {
content: ""; }
.icon-unplugged:before {
content: ""; }
.icon-users:before {
content: ""; }
.icon-vehicle-condition-check:before {
content: ""; }
.icon-vehicle-health:before {
content: ""; }
.icon-vehicle-outline-top:before {
content: ""; }
.icon-website:before {
content: ""; }
.icon-trash:before {
content: ""; }
.icon-add-marker:before {
content: ""; }
.icon-add:before {
content: ""; }
.icon-airbag:before {
content: ""; }
.icon-alarm-clock:before {
content: ""; }
.icon-alert-info-filled:before {
content: ""; }
.icon-alert-info:before {
content: ""; }
.icon-alert:before {
content: ""; }
.icon-android-fingerprint:before {
content: ""; }
.icon-arrow-right:before {
content: ""; }
.icon-avg-mpg:before {
content: ""; }
.icon-back-arrow:before {
content: ""; }
.icon-battery-square:before {
content: ""; }
.icon-bluetooth:before {
content: ""; }
.icon-bookmark:before {
content: ""; }
.icon-boundaries:before {
content: ""; }
.icon-calendar-circle:before {
content: ""; }
.icon-calendar-simple:before {
content: ""; }
.icon-calendar:before {
content: ""; }
.icon-call:before {
content: ""; }
.icon-cellphone:before {
content: ""; }
.icon-charge:before {
content: ""; }
.icon-charging:before {
content: ""; }
.icon-checkmark-circle-filled:before {
content: ""; }
.icon-checkmark-circle:before {
content: ""; }
.icon-checkmark:before {
content: ""; }
.icon-chevron-down:before {
content: ""; }
.icon-chevron-left:before {
content: ""; }
.icon-chevron-right:before {
content: ""; }
.icon-chevron-up:before {
content: ""; }
.icon-clock-simple:before {
content: ""; }
.icon-clock:before {
content: ""; }
.icon-close:before {
content: ""; }
.icon-compass:before {
content: ""; }
.icon-contact-information:before {
content: ""; }
.icon-coupons:before {
content: ""; }
.icon-cross:before {
content: ""; }
.icon-customer-service-headset:before {
content: ""; }
.icon-customer-support:before {
content: ""; }
.icon-defroster-n-feet:before {
content: ""; }
.icon-degrees-celsius:before {
content: ""; }
.icon-degrees-fahrenheit:before {
content: ""; }
.icon-double-arrows-vertical:before {
content: ""; }
.icon-driver-alerts:before {
content: ""; }
.icon-driver-seat-warmer:before {
content: ""; }
.icon-edit:before {
content: ""; }
.icon-enter-service-circle:before {
content: ""; }
.icon-event:before {
content: ""; }
.icon-external-link:before {
content: ""; }
.icon-face-n-feet-balanced-vent:before {
content: ""; }
.icon-face-n-feet-vent:before {
content: ""; }
.icon-face-vent:before {
content: ""; }
.icon-fan:before {
content: ""; }
.icon-feet-vent:before {
content: ""; }
.icon-filters:before {
content: ""; }
.icon-food-icon:before {
content: ""; }
.icon-front-car:before {
content: ""; }
.icon-front-defroster:before {
content: ""; }
.icon-gasoline .path1:before {
content: "";
color: #231f20; }
.icon-gasoline .path2:before {
content: "";
margin-left: -1.01953125em;
color: white; }
.icon-gasoline .path3:before {
content: "";
margin-left: -1.01953125em;
color: #231f20; }
.icon-gasoline .path4:before {
content: "";
margin-left: -1.01953125em;
color: white; }
.icon-gasoline .path5:before {
content: "";
margin-left: -1.01953125em;
color: #231f20; }
.icon-geolocate:before {
content: ""; }
.icon-health-alerts:before {
content: ""; }
.icon-home:before {
content: ""; }
.icon-horn-lights:before {
content: ""; }
.icon-hotel:before {
content: ""; }
.icon-important-message:before {
content: ""; }
.icon-info-circle:before {
content: ""; }
.icon-information:before {
content: ""; }
.icon-letter:before {
content: ""; }
.icon-lights:before {
content: ""; }
.icon-lock-outline:before {
content: ""; }
.icon-lock:before {
content: ""; }
.icon-male:before {
content: ""; }
.icon-map-2:before {
content: ""; }
.icon-map-location:before {
content: ""; }
.icon-map-marker-wide:before {
content: ""; }
.icon-map-marker:before {
content: ""; }
.icon-map:before {
content: ""; }
.icon-menu:before {
content: ""; }
.icon-more-circle:before {
content: ""; }
.icon-my-retailer-circle:before {
content: ""; }
.icon-my-retailer:before {
content: ""; }
.icon-mysubaru-logo:before {
content: ""; }
.icon-navigation-arrow:before {
content: ""; }
.icon-navigation-map:before {
content: ""; }
.icon-odometer:before {
content: ""; }
.icon-outside-air:before {
content: ""; }
.icon-pdf:before {
content: ""; }
.icon-pencil-2:before {
content: ""; }
.icon-pencil-circle:before {
content: ""; }
.icon-pencil:before {
content: ""; }
.icon-phone:before {
content: ""; }
.icon-play-circle:before {
content: ""; }
.icon-plugged-in:before {
content: ""; }
.icon-plus-circle:before {
content: ""; }
.icon-plus:before {
content: ""; }
.icon-power-off:before {
content: ""; }
.icon-power-on:before {
content: ""; }
.icon-pulse:before {
content: ""; }
.icon-range:before {
content: ""; }
.icon-rear-defroster:before {
content: ""; }
.icon-recirculation:before {
content: ""; }
.icon-refresh:before {
content: ""; }
.icon-retailer-info:before {
content: ""; }
.icon-roadside-assistance:before {
content: ""; }
.icon-schedule-service-appointment:before {
content: ""; }
.icon-search:before {
content: ""; }
.icon-seat-warmer:before {
content: ""; }
.icon-send-to-car:before {
content: ""; }
.icon-service-history:before {
content: ""; }
.icon-share-stop:before {
content: ""; }
.icon-shopping-cart:before {
content: ""; }
.icon-speedometer:before {
content: ""; }
.icon-star-empty:before {
content: ""; }
.icon-star:before {
content: ""; }
.icon-subaru-star-cluster:before {
content: ""; }
.icon-subscription-status-circle:before {
content: ""; }
.icon-abs:before {
content: ""; }
.icon-air-bag:before {
content: ""; }
.icon-all-wheel-drive:before {
content: ""; }
.icon-at-oil-temp:before {
content: ""; }
.icon-blind-spot-detection:before {
content: ""; }
.icon-brake-alert-ca:before {
content: ""; }
.icon-brake-alert:before {
content: ""; }
.icon-brake-system:before {
content: ""; }
.icon-charge-system:before {
content: ""; }
.icon-check-engine-ca:before {
content: ""; }
.icon-check-engine:before {
content: ""; }
.icon-eyesight-system-check:before {
content: ""; }
.icon-hybrid-warning-light:before {
content: ""; }
.icon-oil-level:before {
content: ""; }
.icon-oil-pressure:before {
content: ""; }
.icon-park-alert-ca:before {
content: ""; }
.icon-park-alert:before {
content: ""; }
.icon-passenger-airbag-off:before {
content: ""; }
.icon-passenger-airbag:before {
content: ""; }
.icon-power-steering:before {
content: ""; }
.icon-rab-alert:before {
content: ""; }
.icon-telematics:before {
content: ""; }
.icon-tpms:before {
content: ""; }
.icon-vdc-warning:before {
content: ""; }
.icon-windshield-washer-fluid:before {
content: ""; }
.icon-eye:before {
content: ""; }
.icon-eye-blocked:before {
content: ""; }
.tripDetails__scrim {
background-color: transparent !important; }
.tripDetails__full-screen {
z-index: 10000 !important;
overflow: hidden !important; }
.tripDetails__chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1; }
.tripDetails__chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%; }
.trips-list {
padding: 0px !important; }
.trips-list__scrim {
background-color: transparent !important; }
.trips-list__full-screen {
position: fixed !important;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
z-index: 10000 !important;
overflow: hidden !important; }
.trips-list__floating-btn {
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffffff;
z-index: 100000; }
.trips-list__close-icon {
width: 10px !important; }
.trips-list__chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1; }
.trips-list__chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%; }
.trips-list__action {
width: 18px !important; }
.trips-list__carousel {
z-index: 99999 !important; }
.owl-carousel .owl-item {
font-size: 0.9rem; }
.trips-list__item {
height: 10rem;
background: #4DC7A0;
padding: 1rem; }
.trips-list__item {
height: 12.5rem;
background: #ffffff;
padding: 1rem;
font-size: 0.9rem;
border-radius: 10px; }
.owl-controls {
display: none; }
.trips-list__view-details {
width: 10px;
min-width: 100px !important;
padding: 5px !important; }
.trips-list .route-marker {
align-items: center;
background-color: #4a90e2;
border: solid 3px #2faaff;
border-radius: 50%;
display: flex;
height: 32px;
justify-content: center;
transition: width .1s, height .1s;
width: 32px; }
.trips-list .map__marker-content {
background: transparent;
transform: rotate(359deg);
height: 40px; }
.trips-list .map__marker-content::before {
background: transparent; }
.t23 .valet-mode__desc {
max-width: 500px;
margin: auto; }
.t23 .valet-mode-activate__wrapper {
display: flex;
max-width: 600px;
margin: auto;
background: transparent linear-gradient(270deg, #f7f5f5 0%, #d6d6d6 100%) 0% 0% no-repeat padding-box;
border-radius: 10px;
margin-bottom: 3rem;
margin-top: 1rem; }
.t23 .valet-mode-activate__res-button {
width: 274px;
height: 274px;
background: transparent;
box-shadow: none;
cursor: pointer; }
.t23 .valet-mode-activate__res-button:before {
box-shadow: 6px 6px 18px #0000004d; }
.t23 .valet-mode-activate__res-button::after {
box-shadow: none; }
.t23 .valet-mode-activate__res-text {
font-size: 34px;
width: 180px; }
.t23 .valet-mode-activate__settings {
max-width: 340px;
margin: auto; }
.t23 .valet-mode__resetcard {
width: 50%; }
.t23 .valet-mode-welcomescreen {
background-image: url("../_img/valet-mode-bg.png");
background-position: left;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh; }
.t23 .valet-mode-welcomescreen__preset {
color: #1D242B; }
.t23 .valet-mode__settings-check-box {
position: relative !important;
opacity: 1 !important;
width: 30px;
height: 18px;
top: 5px; }
.t23 .valet-mode-settings__item {
border: 2px solid #cacaca;
padding: 15px;
border-radius: 10px;
height: 100%;
display: flex;
flex-direction: column; }
.t23 .valet-mode-settings__edit-notifications {
margin-bottom: 20px; }
.t23 .valet-mode-settings__details-text {
display: block; }
.t23 .valet-mode-settings__details {
display: none; }
.t23 .valet-mode-settings__details--is-active {
display: block; }
.t23 .valet-mode-settings__miles-wrapper {
display: flex; }
.t23 .valet-mode-settings__miles-input input {
display: none; }
.t23 .valet-mode-settings__miles-input input:checked + label {
border: 3px solid #1971d4; }
.t23 .valet-mode-settings__miles-input label {
display: block;
display: flex;
margin: 0;
justify-content: left;
/*align-items: center; */
flex-direction: column;
height: 60px;
border: 1px solid #cacaca;
border-radius: 3px;
padding: 0px !important; }
.t23 .valet-mode-settings__miles-input label:before, .t23 .valet-mode-settings__miles-input label:after {
display: none; }
.t23 .valet-mode-settings__miles-input small {
font-size: 12px; }
.t23 .valet-mode-settings__miles-value {
font-size: 30px;
margin-left: 5px; }
.t23 .valet-mode-settings__map-img {
background-image: url("../_img/valet-settings-vehicle-img.png");
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px; }
.t23 .valet-mode-settings__status {
width: 50px;
height: 25px;
font-size: 14px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #1d242b; }
.t23 .valet-mode-settings__status--on {
background: green; }
.t23 .valet-mode-settings__status--off {
background: #1d242b; }
.t23 .valet-mode-settings__map {
display: none;
position: relative; }
.t23 .valet-mode-settings__map--is-active {
display: block; }
.t23 .valet-mode-settings__map--is-active .map {
height: 350px;
border-radius: 20px; }
.t23 .valet-mode-settings__refresh {
position: absolute;
left: 20px;
top: 20px;
z-index: 100;
width: fit-content !important; }
.t23 .valet-mode__btn-md {
max-width: 350px; }
.t23 .valet-mode__btn-lg {
max-width: 500px; }
.t23 .valet-mode__active-badge {
width: 110px;
height: 30px;
background: #41901E;
right: 0;
top: 0;
border-radius: 50px;
font-size: 20px;
margin: 1rem auto;
color: white; }
.t23 .valet-mode__inactive-badge {
width: 110px;
height: 30px;
background: #91979a;
right: 0;
top: 0;
border-radius: 50px;
font-size: 20px;
margin: 1rem auto;
color: white;
line-height: 1.5; }
.t23 .valet-mode-preferences__header {
margin: 0; }
.t23 .valet-mode-preferences__info-text {
font-size: 12px;
text-align: center;
color: #707070;
opacity: 0.8;
margin-bottom: 20px; }
.t23 .valet-mode-preferences__wrapper {
max-width: 350px; }
.t23 .valet-mode-preferences__item {
border: 1px solid rgba(29, 36, 43, 0.3);
border-radius: 10px;
padding: 10px 20px;
margin-bottom: 10px; }
.t23 .valet-mode-preferences__item [type="checkbox"]:not(:checked) + label,
.t23 .valet-mode-preferences__item [type="checkbox"]:checked + label {
font-size: 14px;
color: #5c6163;
padding-left: 1.5rem; }
.t23 .valet-mode-preferences__item [type="checkbox"]:not(:checked) + label::before,
.t23 .valet-mode-preferences__item [type="checkbox"]:checked + label::before {
width: 16px;
height: 16px; }
.t23 .valet-mode-preferences__item [type="checkbox"]:checked + label:after {
width: 16px;
height: 16px;
left: 0; }
.t23 .valet-mode-preferences__checkbox-container {
display: flex;
justify-content: space-between; }
.t23 .valet-mode-preferences__heading {
text-align: left;
color: #1d252d;
margin-bottom: 0.5rem; }
.t23 .valet-mode-preferences__content {
display: flex;
flex-direction: column; }
@media only screen and (max-width: 765px) {
.t23 .valet-mode-settings__refresh {
top: auto;
bottom: 20px;
left: 50%;
transform: translateX(-50%); }
.t23 .valet-mode__resetcard {
width: 100%; } }
.t23 .valet-mode__locate-vehicle-popup {
position: relative;
background: transparent !important;
color: white !important;
margin-bottom: 10px !important;
align-items: center; }
.t23 .valet-mode__locate-vehicle-popup .mapboxgl-popup-content {
width: 150px !important;
height: 37px !important;
text-align: center;
margin-bottom: 10px !important;
border-radius: 22px !important;
padding: 9px 10px 10px !important;
background: #000 !important; }
.t23 .valet-mode__locate-vehicle-popup .mapboxgl-popup-tip, .t23 .valet-mode__locate-vehicle-popup .mapboxgl-popup-close-button {
display: none; }
.t23-pinModal .modal__dialog {
position: absolute;
top: 50%;
left: 50%;
width: auto;
max-height: 90%;
min-height: auto;
opacity: 1;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%); }
.t23-pinModal .modal__content {
position: relative;
background-clip: padding-box;
outline: 0; }
.t23-pinModal .modal__body {
background-color: #E7E7E8; }
.t23-pinModal .modal__header {
padding: 24px; }
.valet-reset-pin {
background: #F4F4F4 0% 0% no-repeat padding-box;
border-radius: 5px;
opacity: 1;
margin: 0 auto;
max-width: 600px;
text-align: center; }
.valet-reset-pin .valet-reset-pin__header {
margin: 5px auto; }
.valet-reset-pin .valet-reset-pin__text {
color: #707070;
font-size: 12px; }
.valet-reset-pin .valet-reset-pin__link {
color: #1B71D5;
font-size: 12px; }
.valet-mode--active {
max-width: 600px;
margin: 0 auto; }
.sub-text {
position: relative;
top: -32px;
right: -20px; }
.valet-mode-footer {
margin: 0 -1rem -1rem -1rem;
background-color: #E7E7E8;
padding: 50px; }
@media only screen and (max-width: 1200px) {
.t23-pinModal .modal__content {
height: 100vh;
display: flex;
flex-direction: column; }
.t23-pinModal .modal__body {
display: flex;
flex-direction: column;
flex: 1 1 auto; } }
.valet-mode-content {
padding: 0 15px;
background-color: #ffffff; }
@media (min-width: 992px) {
.valet-mode-content {
padding: 30px; } }
@media (min-width: 1200px) {
.valet-mode-content {
padding: 30px 50px; } }
@media (max-width: 1199px) {
.t23 .valet-passcode-reset__desc {
margin-left: 1rem !important;
margin-right: 1rem !important; } }
@media only screen and (min-width: 911px) {
.t23 .passcode-reset-step > :last-child {
margin: 0 auto;
margin-right: 46% !important; } }
.t23 .datepicker-grid {
width: 19.4rem; }
@media (max-width: 767px) {
.t23 .datepicker-grid {
width: 16.4rem; } }
.t23 .datepicker-picker .day {
height: 2.72rem;
line-height: 2.6rem; }
@media (max-width: 767px) {
.t23 .datepicker-picker .day {
height: 37px; } }
.t23 .tripDates__modal--dialog .trip-dates-modal__footer {
width: 19.4rem;
margin: 0 auto;
padding-top: 5px; }
@media (max-width: 767px) {
.t23 .tripDates__modal--dialog .trip-dates-modal__footer {
width: 16.4rem; } }
.t23 .trip-btn {
max-width: 400px; }
.t23 .trip-btn--lg {
min-width: 600px; }
.t23 .trip-btn--sm {
min-width: 300px; }
.t23 .trip-tracker__tab-nav {
max-width: 600px;
margin: auto; }
.t23 .trip-tracker__text {
max-width: 500px;
margin: auto; }
.t23 .trip-tracker-logs__buttons {
display: flex;
justify-content: space-between;
align-items: end; }
.t23 .trip-tracker-logs__map {
max-height: 350px; }
.t23 .trip-tracker--list:not(:first-child) h3 {
margin-top: 50px !important; }
.t23 .trip-dates-modal__footer {
border: none;
padding-top: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column; }
.t23 .trip-dates-modal__footer-btn {
max-width: 400px;
margin-top: 10px; }
.t23 .trip-dates-modal .datepicker-dropdown {
z-index: 9999;
position: relative !important;
top: 0 !important;
left: 0 !important; }
.t23 .trip-dates-modal .datepicker-dropdown .datepicker-picker {
width: 100%;
box-shadow: none !important;
background: transparent !important; }
.t23 .trip-dates-modal .datepicker-cell.range {
background-color: #dbdbdb !important; }
.t23 .trip-dates-modal .datepicker-cell.selected, .t23 .trip-dates-modal .datepicker-cell.selected:hover {
border-radius: 50% !important;
color: #fff !important;
border: 3px solid black !important;
background-color: #000;
line-height: 2.4rem;
position: relative;
font-weight: normal; }
@media (max-width: 767px) {
.t23 .trip-dates-modal .datepicker-cell.selected, .t23 .trip-dates-modal .datepicker-cell.selected:hover {
line-height: 32px; } }
.t23 .trip-dates-modal .datepicker-cell.focused:not(.selected) {
background-color: transparent !important; }
.t23 .trip-dates-modal .datepicker-cell.ranger-start {
line-height: 2.6rem; }
.t23 .trip-dates-modal .datepicker-cell.range-end:not(.selected), .t23 .trip-dates-modal .datepicker-cell.range-start:not(.selected) {
border-radius: 50% !important;
background-color: #000 !important;
position: relative;
line-height: 2.4rem; }
@media (max-width: 767px) {
.t23 .trip-dates-modal .datepicker-cell.range-end:not(.selected), .t23 .trip-dates-modal .datepicker-cell.range-start:not(.selected) {
line-height: 32px; } }
.t23 .trip-dates-modal .datepicker-cell.range-start.todayDate {
border-radius: 50% !important;
color: #fff !important;
line-height: 2.4rem; }
@media (max-width: 767px) {
.t23 .trip-dates-modal .datepicker-cell.range-start.todayDate {
line-height: 32px; } }
.t23 .trip-dates-modal .datepicker-cell.disabled {
text-decoration: line-through; }
.t23 .trip-dates-modal .datepicker-cell.range-end:not(.selected):after, .t23 .trip-dates-modal .datepicker-cell.range-start:not(.selected):after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -3px;
right: -30px;
bottom: 0;
left: 20px;
height: 44px;
width: 22px;
background-color: #dbdbdb !important; }
@media (max-width: 767px) {
.t23 .trip-dates-modal .datepicker-cell.range-end:not(.selected):after, .t23 .trip-dates-modal .datepicker-cell.range-start:not(.selected):after {
height: 36px;
left: 13px; } }
.t23 .trip-dates-modal .datepicker-cell.range-end:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -3px;
right: 0;
bottom: 0;
left: -10%;
height: 44px;
width: 30px;
background-color: #dbdbdb !important; }
@media (max-width: 767px) {
.t23 .trip-dates-modal .datepicker-cell.range-end:before {
height: 36px; } }
.t23 .trip-dates-modal .datepicker-cell.range-end.range-start.selected:before {
background-color: unset !important; }
.t23 .trip-dates-modal .datepicker-header {
box-shadow: none !important;
background: transparent !important;
width: 21.2rem; }
@media (max-width: 991px) {
.t23 .trip-dates-modal .datepicker-header {
margin: 0 auto; } }
@media (max-width: 767px) {
.t23 .trip-dates-modal .datepicker-header {
width: 18.3rem; } }
.t23 .trip-dates-modal .datepicker-view {
justify-content: space-evenly !important; }
.t23 .trip-dates-modal .datepicker-controls .button {
background-color: transparent !important; }
.t23 .trip-dates-modal .prev-btn,
.t23 .trip-dates-modal .next-btn {
font-size: 18px !important;
color: #1971D4 !important; }
.t23 .trip-blade-list__content {
position: relative;
border: 1px solid #E7E7E8;
background: #fff;
border-radius: 5px; }
.t23 .trip-blade-list__content a {
text-decoration: none;
cursor: pointer; }
.t23 .trip-blade-list__wrapper {
display: flex; }
.t23 .trip-blade-list__item {
border-top: none !important;
margin: 10px;
background-color: transparent; }
.t23 .trip__marker-wide {
font-size: 2.75rem; }
.t23 .trip__map-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #1971d4; }
.t23 .trip__map-icon--start {
color: #3B863B !important; }
.t23 .trip__map-icon--end {
color: #D54747 !important; }
.t23 .trip__map-icon-number {
position: absolute;
color: white;
font-size: 14px;
left: 50%;
top: 45%;
transform: translate(-50%, -50%); }
.t23 .trip__map-icon--border-r {
border-right: 1px solid #E7E7E8; }
.t23 .trip__map-icon--lg {
font-size: 40px; }
.t23 .trip__map-icon--md {
font-size: 30px; }
.t23 .trip__map-icon--sm {
font-size: 25px; }
@media (max-width: 767px) {
.t23 .tripDetailPlaceContent .trip__map-icon {
align-items: flex-start; }
.t23 .tripDetailPlaceContent .trip__map-icon-number {
top: 25%; } }
.t23 .trip-tracker-logs__edit-icon {
margin: 0 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; }
.t23 .trip-tracker-logs__edit-icon:before {
padding: 11px;
background-color: #f7f8f9;
border-radius: 30px;
color: #1971d4; }
.t23 .trip-tracker-logs__count {
color: #979797;
font-family: "HelveticaNeueLTW05-55Roman"; }
.t23 .trip-tracker-logs__select-buttons button {
min-width: fit-content; }
.t23 .trip-logs-accordion__header {
font-size: 20px; }
.t23 .trip-blade__miles-info {
position: absolute;
right: 20px;
top: 10px;
display: flex;
flex-direction: column; }
.t23 .trip-blade-actions__button {
height: 100%;
margin-left: 10px; }
.t23 .trip-blade__select.blade__select--is-active {
display: flex;
align-items: center;
transform: translateY(-7px); }
.t23 .trip-tomtom-map-icon {
font-size: 18px;
color: #ffffff;
position: relative;
top: -10px;
left: -34%; }
.t23 .trip-tomtom-map-icon:before {
position: relative;
left: 50%;
top: 10px;
font-size: 30px;
color: #1971d4;
z-index: -1; }
.t23 .trip-logs-modal__btn,
.t23 .success-modal__btn {
max-width: 500px;
margin: auto; }
.t23 .trip-details__back {
float: left;
text-decoration: none;
cursor: pointer; }
.t23 .trip-details__from span {
color: #1971d4; }
.t23 .trip-details__to span {
color: #1971d4; }
.t23 .trip-details__points {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative; }
.t23 .trip-details__points:before {
content: "";
border-left: 2px dotted #1971d4;
position: absolute;
height: 30px;
left: 18px;
top: 50%;
transform: translateY(-50%); }
.t23 .trip-details__miles-info {
display: flex;
justify-content: space-between; }
.t23 .driving-journal__fields {
display: flex;
justify-content: space-between;
flex-wrap: wrap; }
.t23 .driving-journal__fields.disabled {
opacity: 0.5;
pointer-events: none; }
.t23 .driving-journal__fields .tripDetails__chip {
display: inline-block;
padding: 0; }
.t23 .driving-journal__fields .tripDetails__chip label {
display: inline-block;
padding: 0 25px !important;
height: 50px;
font-size: 16px !important;
line-height: 50px !important;
border-radius: 25px;
background-color: #f1f1f1; }
.t23 .driving-journal__fields .tripDetails__chip label:before, .t23 .driving-journal__fields .tripDetails__chip label::after {
display: none; }
.t23 .driving-journal__fields .tripDetails__chip input:checked + label {
background-color: #1d242b;
color: white; }
.t23 .trip-state__active-badge {
width: 110px;
height: 30px;
background: #41901E;
right: 0;
top: 0;
border-radius: 50px;
font-size: 14px;
margin: 1rem auto;
color: white; }
.t23 .trip-state__active-badge::after {
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
display: inline-block;
margin: 0 10px; }
.t23 .add-driving-journal__actions {
display: flex;
flex-direction: column-reverse; }
.t23 .add-driving-journal__item {
margin: 10px 0;
text-align: center;
flex: 1 1 auto; }
.t23 .add-driving-journal__item button {
width: 100%; }
.t23 .driving-journal__footer-btn {
max-width: 400px;
margin: auto; }
.t23 .driving-journal-list__item {
border: 1px solid #dfdfdf;
border-radius: 8px;
display: flex;
flex-wrap: wrap;
margin: 20px 0; }
.t23 .driving-journal-list__title i {
margin-right: 5px; }
.t23 .driving-journal-list__body {
flex: 1 1 auto;
display: flex;
align-items: center;
padding: 20px;
flex-wrap: wrap; }
.t23 .driving-journal-list__content {
flex: 1 1 auto; }
.t23 .driving-journal-list__desc {
overflow: hidden;
text-overflow: ellipsis; }
.t23 .driving-journal-list__actions {
display: flex;
flex-direction: column; }
.t23 .driving-journal-list__action-delete, .t23 .driving-journal-list__action-export {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #dfdfdf; }
.t23 .driving-journal-list__action-delete button, .t23 .driving-journal-list__action-export button {
border: none !important; }
.t23 .driving-journal-list__action-delete button:hover, .t23 .driving-journal-list__action-delete button:focus, .t23 .driving-journal-list__action-export button:hover, .t23 .driving-journal-list__action-export button:focus {
border: none; }
.t23 .driving-journal-list__action-delete {
border-top: 1px solid #dfdfdf; }
.t23 .driving-journal-actions {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px; }
.t23 .driving-journal-actions__export-all {
max-width: 400px;
margin: auto; }
.t23 .driving-journal-details__header {
text-align: center;
position: relative; }
.t23 .driving-journal-details__back {
position: absolute;
left: 0;
top: -20px; }
.t23 .driving-journal-details__back, .t23 .driving-journal-details__edit {
color: #1971d4 !important;
cursor: pointer;
text-decoration: none !important; }
.t23 .journal-details__title-content {
flex-wrap: wrap; }
.t23 .journal-details__navs {
color: #1971d4; }
.t23 .journal-details__navs-next, .t23 .journal-details__navs-prev {
text-decoration: none !important;
cursor: pointer; }
.t23 .journal-details__navs-next.disabled, .t23 .journal-details__navs-prev.disabled {
opacity: 0.5;
cursor: not-allowed; }
.t23 .journal-details__total {
display: flex;
justify-content: center;
align-items: center; }
@media (min-width: 576px) {
.t23 .journalViewCurrentTripNum {
transform: translateX(-30%); } }
@media (max-width: 767px) {
.t23 .journalViewCurrentTripNum {
font-size: 1rem !important; } }
@media (max-width: 767px) {
.t23 .journalPreviousTrip {
padding-right: 5px; } }
@media (max-width: 767px) {
.t23 .journalNextTrip {
padding-left: 5px; } }
@media only screen and (min-width: 766px) {
.t23 .deletetrip_sm {
display: none !important; }
.t23 .deletetrip_lg {
display: flex !important; }
.t23 .tripLogTemplate {
padding: 1rem 2rem !important; } }
@media only screen and (max-width: 765px) {
.t23 .deletetrip_lg {
display: none !important; }
.t23 .trip-blade__miles-info {
float: none;
display: block;
position: static; }
.t23 .trip-blade__miles-info--item:first-child {
padding-right: 10px;
border-right: 2px solid #1d242b; }
.t23 .trip-blade__miles-info--item:last-child {
padding-left: 10px; }
.t23 .trip-blade-list__wrapper {
display: block; }
.t23 .trip-blade-actions__button {
width: 100%;
margin: 10px 0; }
.t23 .trip-state__active-badge {
width: 80px; }
.t23 .driving-journal-list__item {
flex-direction: column; }
.t23 .driving-journal-list__body {
flex-direction: column; }
.t23 .driving-journal-list__view {
margin-top: 20px;
width: 100%; }
.t23 .driving-journal-list__content {
width: 100%; }
.t23 .driving-journal-list__actions {
width: 100%; }
.t23 .driving-journal-list__action-delete {
border-left: none; }
.t23 .driving-journal-actions {
flex-direction: column-reverse; }
.t23 .driving-journal-actions__export-all {
display: none; }
.t23 .journal-details__navs-text {
display: none; }
.t23 .journal-details__title-content {
flex-direction: column; }
.t23 .journal-details__total {
flex-direction: column; } }
@media only screen and (max-width: 600px) {
.t23 .trip-dates-modal__footer {
flex-direction: row-reverse;
justify-content: space-around; }
.t23 .trip-dates-modal__footer-btn {
max-width: 150px; }
.t23 .trip-tracker-logs__edit-icon:before {
padding: 7px; }
.t23 .trip-tracker-logs__buttons {
flex-direction: column; }
.t23 .trip-tracker-logs__trip-dropdown {
width: 100%; }
.t23 .trip-tracker-logs__start-button {
width: 100%; }
.t23 .trip-details__miles-info {
flex-direction: column; } }
@media only screen and (max-width: 1200px) {
.t23 .trip-logs-modal__content,
.t23 .success-modal__content {
height: 100vh;
display: flex;
flex-direction: column; }
.t23 .trip-logs-modal__body,
.t23 .success-modal__body {
display: flex;
flex-direction: column;
flex: 1 1 auto; }
.t23 .add-driving-journal__actions {
flex-direction: row; } }
.t23 .trip-tracker__marker-content {
font-weight: 700;
color: white;
font-size: 1rem;
line-height: 1.5; }
.t23 .map__marker-content.trip-tracker__marker-content::before {
background: none; }
.t23 #tripDates .datepicker-cell.range-end:not(.selected), .t23 .datepicker-cell.range-start:not(.selected), .t23 .range-start.todayDate {
color: #fff !important; }
.t23 .trip-tracker__bg {
background-image: url("../_img/trip-tracker-bg.png");
background-position: center top;
background-repeat: no-repeat;
background-color: #010101;
background-size: cover;
min-height: 80vh;
display: none; }
.t23 .trip-tracker__overlay {
min-height: 80vh;
background-color: rgba(0, 0, 0, 0.75); }
.t23 .disable-trip--hover {
pointer-events: none; }
@media (max-width: 767px) {
.flex-reverse-xs {
flex-direction: column-reverse !important; }
#createTripDatesDisplay.font-size--sm, .t23 h3.font-size--sm {
font-size: 1rem !important;
line-height: 28px; } }
@media (min-width: 768px) {
.journalTripLogDetails .pr-lg-40 {
margin-right: 40px; } }
.trip-tracker__buisness-icon {
top: -2px;
position: relative;
padding-right: 5px; }
.t23 .vcc-vehicle {
grid-area: vehicle; }
.t23 .vcc-odometer {
grid-area: odometer; }
.t23 .vcc-tire-pressure {
grid-area: tirePressure; }
@media (max-width: 415px) {
.t23 .vcc-tire-pressure.p-xs {
padding: 1rem 0.35rem !important; } }
.t23 .vcc-windows {
grid-area: windows; }
.t23 .vcc-fuel {
grid-area: fuel; }
.t23 .vcc-grid {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 2rem;
grid-template-areas: "vehicle vehicle odometer odometer tirePressure tirePressure" "vehicle vehicle odometer odometer tirePressure tirePressure" "vehicle vehicle fuel fuel tirePressure tirePressure" "windows windows windows windows windows windows"; }
@media (max-width: 1199px) {
.t23 .vcc-grid {
grid-template-columns: none; } }
@media (max-width: 991px) {
.t23 .vcc-grid {
padding: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: "vehicle vehicle vehicle vehicle vehicle vehicle" "odometer odometer odometer odometer odometer odometer" "tirePressure tirePressure tirePressure tirePressure tirePressure tirePressure" "windows windows windows windows windows windows" "fuel fuel fuel fuel fuel fuel"; }
.t23 .vcc-grid .vcc-fuel__indicator {
height: 4px; }
.t23 .vcc-grid .vcc-fuel__indicator:after {
height: 4px; } }
.t23 .vcc-btn-w--fit {
width: fit-content; }
.t23 .vcc-bg--rounded {
border-radius: 20px; }
.t23 .vcc-tab__heading--warn:before {
content: "\25CF";
color: #ed5b5b;
margin-right: 5px; }
.t23 .vcc-vehicle .owl-item.active .vcc-vehicle__item {
transform: none !important;
opacity: 1; }
.t23 .vcc-vehicle .owl-stage-outer {
position: relative;
z-index: 10; }
.t23 .vcc-vehicle .owl-dots {
position: absolute;
top: 58px;
left: 25%;
right: 25%;
z-index: 10; }
.t23 .vcc-vehicle .owl-dots .owl-dot span {
width: 7px;
height: 7px;
background: #c1c1c1; }
.t23 .vcc-vehicle .owl-controls {
display: block; }
.t23 .vcc-vehicle__item {
transition: 0.5s all;
opacity: 0.5; }
.t23 .vcc-vehicle__info-bar {
max-width: 300px;
background-color: #1d242b;
border-radius: 6px; }
.t23 .vcc-vehicle__info-bar .icon {
font-size: 30px;
color: #28935b; }
.t23 .vcc-vehicle__info-bar--warn .icon {
color: #ed5b5b; }
.t23 .vcc-vehicle__tire {
position: absolute;
background-color: #ed5b5b;
border: 1px solid #fff;
border-radius: 4px;
opacity: 0.7;
width: 5.5%;
height: 15%;
display: none; }
.t23 .vcc-vehicle__tire--low {
display: block; }
.t23 .vcc-vehicle__tire--driver-front {
top: 21%;
left: 31%; }
.t23 .vcc-vehicle__tire--driver-rear {
top: 66%;
left: 31%; }
.t23 .vcc-vehicle__tire--passenger-front {
top: 21%;
left: 58%; }
.t23 .vcc-vehicle__tire--passenger-rear {
top: 66%;
left: 58%; }
.t23 .vcc-vehicle__window {
position: absolute;
width: auto;
display: none !important; }
.t23 .vcc-vehicle__window--open {
display: block !important; }
.t23 .vcc-vehicle__window--moonroof {
top: 46.5%;
left: 39.5%;
width: 18%;
height: 7.8% !important; }
.t23 .vcc-vehicle__window--driver-rear {
top: 55%;
left: 34%;
height: 11% !important;
width: 3.3%; }
.t23 .vcc-vehicle__window--driver-front {
top: 36%;
left: 33.5%;
width: 2.9%;
height: 17.5% !important; }
.t23 .vcc-vehicle__window--passenger-front {
top: 36%;
left: 59.2%;
height: 17% !important;
width: 3.4%; }
.t23 .vcc-vehicle__window--passenger-rear {
top: 55%;
left: 59.3%;
height: 11% !important;
width: 3.3%; }
.t23 .vcc-vehicle-pagination__prev, .t23 .vcc-vehicle-pagination__next {
cursor: pointer; }
.t23 .vcc-odometer__maintenance-shedule {
position: sticky;
top: 100%; }
@media (max-width: 415px) {
.t23 .vcc-tire-pressure__item.p-xs {
padding: 1rem 0rem 1rem 0.4rem !important; } }
.t23 .vcc-tire-pressure__item--low .vcc-tire-pressure__side-icon {
color: #ed5b5b;
display: inline-block; }
.t23 .vcc-tire-pressure__item--low .vcc-tire-pressure__value {
color: #ed5b5b; }
.t23 .vcc-tire-pressure__side-icon {
display: none; }
.t23 .vcc-tire-pressure__value {
font-size: 50px; }
.t23 .vcc-tire-pressure__promotions {
position: sticky;
top: 100%; }
.t23 .vcc-windows__list-item--open {
color: #ed5b5b; }
.t23 .vcc-windows__list-item--open .vcc-windows__status-open {
display: block; }
.t23 .vcc-windows__list-item--open .vcc-windows__status-closed {
display: none; }
.t23 .vcc-windows__status-open {
display: none; }
.t23 .vcc-fuel__bar {
margin-bottom: 4px; }
.t23 .vcc-fuel__bar-item {
border-left: 2px solid #707070;
opacity: 0.5;
height: 8px; }
.t23 .vcc-fuel__bar-item:nth-child(2), .t23 .vcc-fuel__bar-item:nth-child(4) {
height: 4px; }
.t23 .vcc-fuel__indicator {
--w: 70%;
height: 8px;
background: #c1c1c1;
border-radius: 8px; }
.t23 .vcc-fuel__indicator:after {
content: "";
position: absolute;
width: var(--w);
left: 0;
height: 8px;
border-radius: 8px;
background-color: #28935b; }
.t23 .vcc-fuel__indicator--low:after {
background-color: #e22828; }
.t23 .vcc-fuel__indicator--very-low:after {
background-color: #e22828; }
.t23 .vcc-retailer-block > h4 {
text-align: center; }
.t23 .vcc-retailer-block .expressLogo {
width: auto;
margin: auto; }
.t23 .vcc-date-dropdown {
max-width: 400px;
margin: 1rem auto; }
.t23 .vcc-date-selected-info {
text-align: center;
max-width: 580px;
margin: auto;
padding: 20px 10px; }
.t23 .vcc-system-indicators__heading-wrapper {
max-width: 350px; }
.t23 .vcc-system-indicators__status {
font-size: 17px;
color: #28935b; }
.t23 .vcc-system-indicators__status--danger {
color: #ed5b5b; }
.t23 .vcc-system-indicators__issues {
display: none; }
.t23 .vcc-system-indicators__issues--active {
display: block; }
.t23 .vcc-system-indicators__issues hr {
border-color: #707070; }
.t23 .vcc-system-indicators-list .accordion__item--is-active .accordion__header {
border-bottom: 1px solid #ed5b5b; }
.t23 .vcc-collapse-container--danger .accordion {
border: 1px solid #ed5b5b; }
.t23 .vcc-collapse-container--danger .accordion .accordion__item--is-active .accordion__header {
border-bottom: 1px solid #ed5b5b; }
.t23 .vcc-collapse-container--danger .accordion .accordion__header .icon {
color: #ed5b5b; }
.t23 .vcc-system-indicators-list .vehicle-health--Number {
font-size: 0.9rem; }
.t23 .vcc-system-indicators-list .vehicle-health--Number .warningCount {
font-size: 1rem; }
@media (min-width: 576px) {
.t23 .vcc-system-indicators-list .vehicle-health--Number .warningCount {
font-size: 1.3rem;
position: relative;
top: -4px; } }
.t23 .vcc-system-indicators-list .vehicle-health--Number__alertText {
font-size: 0.62rem; }
@media (min-width: 576px) {
.t23 .vcc-system-indicators-list .vehicle-health--Number__alertText {
line-height: 10px;
font-size: 0.7rem; } }
/***************************************
TEMPLATE
***************************************/
.template {
display: none; }
/***************************************
USAGE-REPORT
***************************************/
@media (max-width: 1199px) {
.usage-report .content-block__page-title-text {
font-size: 2.5em; } }
@media (max-width: 1199px) and (max-width: 767px) {
.usage-report .content-block__page-title-text {
font-size: 2.03125em; } }
@media (max-width: 1199px) {
.show-only-desktop {
display: none; } }
@media (min-width: 768px) {
.show-only-mobile {
display: none; } }
/*# sourceMappingURL=styles.css.map */