@charset "UTF-8"; /* ----------------------------------------------------------------------------- * Vendor Mixins \* ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Defaults \* ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Vendor Settings \* ----------------------------------------------------------------------------- */ /** * @section Variables * @subsection Directory Paths * @description Paths to key directories. * * @variable path-img * @variable path-shared-img * @variable path-fonts * @variable path-sprites */ /** * @section Variables * @subsection Screen Sizes * @description Screen sizes used in media queries. * * @variable breakpoint-xs * @variable breakpoint-sm * @variable breakpoint-md * @variable breakpoint-lg * @variable breakpoint-xl * @variable breakpoint-xxl * @variable breakpoint-below-md * @variable breakpoint-height-sm * @variable breakpoint-height-md * @variable breakpoint-height-lg * @variable breakpoint-below-height-md */ /** * @section Variables * @subsection Screen Pixel Density * @description Screen pixel density in media queries. * * @variable pixel-density-2x * @variable pixel-density-webkit-2x */ /** * @section Variables * @subsection Font Weights * @description Typographic font weights. * * @variable font-light * @variable font-normal * @variable font-semi-bold */ /** * @section Variables * @subsection Font Sizes * @description Default font size settings for mobile and desktop. * * @variable font-size-mobile-sm * @variable font-size-mobile * @variable font-size-desktop-sm * @variable font-size-desktop */ /** * @section Variables * @subsection Border Radiuses * @description Border radius settings for different sized controls. * * @variable border-radius-sm * @variable border-radius-md * @variable border-radius-lg */ /** * @section Variables * @subsection Colors * @description Brand and other colors. * * @variable color-white * @variable color-light-gray * @variable color-medium-gray * @variable color-dark-gray * @variable color-charcoal * @variable color-black * @variable color-hero-20 * @variable color-hero-40 * @variable color-hero-60 * @variable color-hero-80 * @variable color-hero * @variable color-shift * @variable color-fuel * @variable color-light-yellow * @variable color-yellow * @variable color-light-gold * @variable color-gold * @variable color-dark-gold * @variable color-light-red * @variable color-red * @variable color-dark-red * @variable color-light-green * @variable color-green * @variable color-dark-green * @variable color-behance * @variable color-dribbble * @variable color-facebook * @variable color-github * @variable color-linkedin * @variable color-twitter * @variable color-yelp */ /** * @section Colors * @subsection Gray * @description Available shades of gray. * * @hideMarkup true * @markup *

#ffffff
$color-white

*

#f9f9f9
$color-off-white

*

#f2f2f2
$color-light-gray

*

#cccccc
$color-medium-gray

*

#b7b7b7
$color-slate-gray

*

#666666
$color-dark-gray

*

#555555
$color-charcoal

*

#000000
$color-black

*

#f3f5f7
$color-black

*

#cbd4de
$color-black

*

#5c7996
$color-black

*/ /** * @section Colors * @subsection Blue * @description Available shades of blue. * * @hideMarkup true * @markup *

#d2dffe
$color-hero-20

*

#a5bffd
$color-hero-40

*

#789ffd
$color-hero-60

*

#4a7ffc
$color-hero-80

*

#1459ff
$color-hero

*

#0082ff
$color-shift

*

#002d5b
$color-fuel

*/ /** * @section Colors * @subsection Yellow * @description Available shades of yellow. * * @hideMarkup true * @markup *

lighten($color-yellow, 40%)
$color-light-yellow

*

#fff000
$color-yellow

*/ /** * @section Colors * @subsection Gold * @description Available shades of gold. * * @hideMarkup true * @markup *

lighten($color-gold, 32%)
$color-light-gold

*

#f8d44c
$color-gold

*

darken($color-gold, 23%)
$color-dark-gold

*/ /** * @section Colors * @subsection Red * @description Available shades of red. * * @hideMarkup true * @markup *

#ffe5e5
$color-light-red

*

#eb0029
$color-red

*

#bf0202
$color-dark-red

*/ /** * @section Colors * @subsection Green * @description Available shades of green. * * @hideMarkup true * @markup *

lighten($color-green, 10%)
$color-light-green

*

#259a02
$color-green

*

darken($color-green, 10%)
$color-dark-green

*/ /** * @section Colors * @subsection Social * @description Available colors of social networks. * * @hideMarkup true * @markup *

#1769ff
$color-behance

*

#ea4c89
$color-dribbble

*

#3b5998
$color-facebook

*

#cccccc
$color-github

*

#007bb6
$color-linkedin

*

#00aced
$color-twitter

*

#c41200
$color-yelp

*/ /** * @section Variables * @subsection Animation * @description Transitions used in CSS animations. * * @variable animation-transition * @variable animation-default * @variable animation-fast */ /* ----------------------------------------------------------------------------- * SpotHero Mixins \* ----------------------------------------------------------------------------- */ /** * @section Mixins * @subsection horizontal-gradient * @description Applies a horizontal gradient to an element. * * @mixin horizontal-gradient($start, $end) */ /** * @section Mixins * @subsection vertical-gradient * @description Applies a vertical gradient to an element. * * @mixin vertical-gradient($start, $end, $stop: false) */ /** * @section Mixins * @subsection box-shadow * @description Applies a box-shadow to an element. * * @mixin box-shadow($preset: false, $settings: 0 2px 0 0 rgba(0, 0, 0, 0.078)) */ /** * @section Mixins * @subsection font-size * @description Creates a font-size in rem with a pixel backup. * * @mixin font-size($sizeValue: 1.5) */ /** * @section Mixins * @subsection font-family * @description Uses the specified font as the font-family. * * @mixin font-family($family: "Open Sans") */ /** * @section Mixins * @subsection sh-icon * @description Creates an icon from the icon font based on the specified icon variable name. * * @mixin sh-icon($icon-name) */ /** * @section Mixins * @subsection background-retina * @description Creates a retina-ready background image from the given sources. * * @mixin background-retina($pathType, $normal, $retina, $retinaWidth, $retinaHeight, $contain: false, $size: false) * * Modified for SpotHero * * Retina Backgrounds for Compass * by: Gaya Kessler * last update: 03/11/14 * * Modified by Matt Przybylski * 1. Changed image-url to use $path-img which is set in defaults * 2. Added $retinaWidth and $retinaHeight variables since we have nothing to compute those on the fly without Compass * 3. Added $pathType to ensure that you can pass either 'shared' or 'local' for multi-project support * * Usage: * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder. * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder. * 3. include the background-image property in your Sass * 4. $pathType is either "shared" or "local" */ /* ----------------------------------------------------------------------------- * Placeholders \* ----------------------------------------------------------------------------- */ /** * @section Placeholders * @subsection Control Size Medium * @description Medium font size and padding for buttons and form elements. * * @placeholder %control-size-md */ .Button, .spothero-html .Button, .Select-select, .Textarea-field, .Textfield-input { font-size: 13px; font-size: 1.3rem; padding-top: 6px; padding-bottom: 6px; border-radius: 3px; } .mobile .Button, .mobile .Select-select, .mobile .Textarea-field, .mobile .Textfield-input { font-size: 16px; font-size: 1.6rem; padding-top: 12px; padding-bottom: 12px; border-radius: 4px; } /** * @section Placeholders * @subsection Control Size Large * @description Large font size and padding for buttons and form elements. * * @placeholder %control-size-lg */ .Button.Button-lg, .spothero-html .Button.Button-lg, .ButtonGroup-lg .Button, .RadioButtonGroup-lg .Button, .FormElement-lg .Select-select, .FormElement-lg .Textarea-field, .FormElement-lg .Textfield-input { font-size: 14px; font-size: 1.4rem; padding-top: 9px; padding-bottom: 10px; border-radius: 4px; } .mobile .Button.Button-lg, .mobile .ButtonGroup-lg .Button, .ButtonGroup-lg .mobile .Button, .mobile .RadioButtonGroup-lg .Button, .RadioButtonGroup-lg .mobile .Button, .mobile .FormElement-lg .Select-select, .FormElement-lg .mobile .Select-select, .mobile .FormElement-lg .Textarea-field, .FormElement-lg .mobile .Textarea-field, .mobile .FormElement-lg .Textfield-input, .FormElement-lg .mobile .Textfield-input { font-size: 16px; font-size: 1.6rem; padding-top: 12px; padding-bottom: 12px; } .Button .Icon, .spothero-html .Button .Icon, .Button-link .Icon, .spothero-html .Button-link .Icon, .FormElement .FormElement-control .Icon, .form-error::before, .FormElementError::before, label.FormElement-error::before { font-size: 14px; font-size: 1.4rem; } .Button.Button-lg .Icon, .spothero-html .Button.Button-lg .Icon, .FormElement.FormElement-lg .FormElement-control .Icon, .mobile .form-error::before, .mobile .FormElementError::before, .mobile label.FormElement-error::before { font-size: 16px; font-size: 1.6rem; } .mobile .FormElement .FormElement-control .Icon, .mobile .FormElement.FormElement-lg .FormElement-control .Icon { font-size: 18px; font-size: 1.8rem; height: 18px; } .DatePicker-input-container .Label, .TimePicker-input-container .Label { font-size: 13px; font-size: 1.3rem; display: inline-block; margin: 6px 6px 0 0; vertical-align: top; } .mobile .DatePicker-input-container .Label, .mobile .TimePicker-input-container .Label { font-size: 15px; font-size: 1.5rem; margin-top: 10px; } .DatePicker-input-container .Textfield-input, .TimePicker-input-container .Textfield-input { cursor: pointer; } .DatePicker-input-container .Textfield, .TimePicker-input, .TimePicker-select { display: inline-block; vertical-align: top; } .Select-select, .Textarea-field, .Textfield-input { display: block; width: 100%; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; color: #111111; font-weight: 300; outline: none; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .Select-select, .Textarea-field, .Textfield-input { padding-right: 8px; padding-left: 8px; } .FormElement-lg .Select-select, .FormElement-lg .Textarea-field, .FormElement-lg .Textfield-input { padding-right: 10px; padding-left: 10px; } .FormElement-error .Checkbox-custom-input, .FormElement-error .Radio-custom-input, .DateTimePicker-error .Textfield-input, .DateTimePicker-error .Select-select, .ContainsErrors .FormElement:not(.FormElement-optional) .Textfield-input, .ContainsErrors .FormElement:not(.FormElement-optional) .Select-select, .ContainsErrors .FormElement:not(.FormElement-optional) .Checkbox-custom-input, .ContainsErrors .FormElement:not(.FormElement-optional) .Radio-custom-input, .ContainsErrors.FormElement:not(.FormElement-optional) .Textfield-input, .ContainsErrors.FormElement:not(.FormElement-optional) .Select-select, .ContainsErrors.FormElement:not(.FormElement-optional) .Checkbox-custom-input, .ContainsErrors.FormElement:not(.FormElement-optional) .Radio-custom-input, .FormElement-error .Select-select, .FormElement-error .Textarea-field, .FormElement-error .Textfield-input { color: #eb0029 !important; border-color: #eb0029; background-color: #ffe5e5; } .FormElement-error .Checkbox-custom-input::-webkit-input-placeholder, .FormElement-error .Radio-custom-input::-webkit-input-placeholder, .DateTimePicker-error .Textfield-input::-webkit-input-placeholder, .DateTimePicker-error .Select-select::-webkit-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Textfield-input::-webkit-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Select-select::-webkit-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Checkbox-custom-input::-webkit-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Radio-custom-input::-webkit-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Textfield-input::-webkit-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Select-select::-webkit-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Checkbox-custom-input::-webkit-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Radio-custom-input::-webkit-input-placeholder, .FormElement-error .Select-select::-webkit-input-placeholder, .FormElement-error .Textarea-field::-webkit-input-placeholder, .FormElement-error .Textfield-input::-webkit-input-placeholder { color: #eb0029; } .FormElement-error .Checkbox-custom-input::-moz-placeholder, .FormElement-error .Radio-custom-input::-moz-placeholder, .DateTimePicker-error .Textfield-input::-moz-placeholder, .DateTimePicker-error .Select-select::-moz-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Textfield-input::-moz-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Select-select::-moz-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Checkbox-custom-input::-moz-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Radio-custom-input::-moz-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Textfield-input::-moz-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Select-select::-moz-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Checkbox-custom-input::-moz-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Radio-custom-input::-moz-placeholder, .FormElement-error .Select-select::-moz-placeholder, .FormElement-error .Textarea-field::-moz-placeholder, .FormElement-error .Textfield-input::-moz-placeholder { color: #eb0029; } .FormElement-error .Checkbox-custom-input:-ms-input-placeholder, .FormElement-error .Radio-custom-input:-ms-input-placeholder, .DateTimePicker-error .Textfield-input:-ms-input-placeholder, .DateTimePicker-error .Select-select:-ms-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Textfield-input:-ms-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Select-select:-ms-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Checkbox-custom-input:-ms-input-placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Radio-custom-input:-ms-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Textfield-input:-ms-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Select-select:-ms-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Checkbox-custom-input:-ms-input-placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Radio-custom-input:-ms-input-placeholder, .FormElement-error .Select-select:-ms-input-placeholder, .FormElement-error .Textarea-field:-ms-input-placeholder, .FormElement-error .Textfield-input:-ms-input-placeholder { color: #eb0029; } .FormElement-error .Checkbox-custom-input::placeholder, .FormElement-error .Radio-custom-input::placeholder, .DateTimePicker-error .Textfield-input::placeholder, .DateTimePicker-error .Select-select::placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Textfield-input::placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Select-select::placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Checkbox-custom-input::placeholder, .ContainsErrors .FormElement:not(.FormElement-optional) .Radio-custom-input::placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Textfield-input::placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Select-select::placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Checkbox-custom-input::placeholder, .ContainsErrors.FormElement:not(.FormElement-optional) .Radio-custom-input::placeholder, .FormElement-error .Select-select::placeholder, .FormElement-error .Textarea-field::placeholder, .FormElement-error .Textfield-input::placeholder { color: #eb0029; } .FormElement-loading .Select-select, .FormElement-loading .Select-select:not([disabled]):hover { background-image: url("/static/assets/img/form-control-loading.gif"); background-repeat: no-repeat; background-position: right center; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .FormElement-loading .Select-select, .FormElement-loading .Select-select:not([disabled]):hover { background-image: url("/static/assets/img/form-control-loading@2x.gif"); background-size: 21px 5px; } } /** * @section Placeholders * @subsection Image Replacement * @description Replaces text with an image. * * @placeholder %ir */ /** * @section Placeholders * @subsection Clearfix * @description Automatically clears child elements. * * @placeholder %clearfix */ .ButtonGroup, .ButtonGroup.Textfield .ButtonGroup-content, .List-gallery, ul.list-gallery, .RadioButtonGroup, .StarRating, .star-rating, .TabNavigation, .Tabs, .row, .account-navigation, .business-profile-tip, .new-user-modal.sh-modal .feature, .how-to-redeem .redemption-instruction, .how-to-redeem .RedemptionInstruction, .HowToRedeem .redemption-instruction, .HowToRedeem .RedemptionInstruction, .account-credit-activity .available-balance { zoom: 1; } .ButtonGroup:before, .ButtonGroup.Textfield .ButtonGroup-content:before, .List-gallery:before, ul.list-gallery:before, .RadioButtonGroup:before, .StarRating:before, .star-rating:before, .TabNavigation:before, .Tabs:before, .row:before, .account-navigation:before, .business-profile-tip:before, .new-user-modal.sh-modal .feature:before, .how-to-redeem .redemption-instruction:before, .how-to-redeem .RedemptionInstruction:before, .HowToRedeem .redemption-instruction:before, .HowToRedeem .RedemptionInstruction:before, .account-credit-activity .available-balance:before, .ButtonGroup:after, .ButtonGroup.Textfield .ButtonGroup-content:after, .List-gallery:after, ul.list-gallery:after, .RadioButtonGroup:after, .StarRating:after, .star-rating:after, .TabNavigation:after, .Tabs:after, .row:after, .account-navigation:after, .business-profile-tip:after, .new-user-modal.sh-modal .feature:after, .how-to-redeem .redemption-instruction:after, .how-to-redeem .RedemptionInstruction:after, .HowToRedeem .redemption-instruction:after, .HowToRedeem .RedemptionInstruction:after, .account-credit-activity .available-balance:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .ButtonGroup:after, .ButtonGroup.Textfield .ButtonGroup-content:after, .List-gallery:after, ul.list-gallery:after, .RadioButtonGroup:after, .StarRating:after, .star-rating:after, .TabNavigation:after, .Tabs:after, .row:after, .account-navigation:after, .business-profile-tip:after, .new-user-modal.sh-modal .feature:after, .how-to-redeem .redemption-instruction:after, .how-to-redeem .RedemptionInstruction:after, .HowToRedeem .redemption-instruction:after, .HowToRedeem .RedemptionInstruction:after, .account-credit-activity .available-balance:after { clear: both; } /* ----------------------------------------------------------------------------- * Vendor \* ----------------------------------------------------------------------------- */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { background: #fff; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; } body { margin: 0; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } q:before, q:after { content: ''; content: none; } small { font-size: 80%; } sub, sup { font-size: .7em; line-height: 0; padding-left: 1px; position: relative; vertical-align: baseline; } sup { top: -0.4em; } sup.text-xs, sup.text-sm { top: -0.5em; } sup.text-lg, sup.text-xl { top: 0; } sub { bottom: -0.25em; } sub.text-xs, sub.text-sm { bottom: -.35em; } sub.text-lg, sub.text-xl { bottom: 0; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit--webkit-appearance: none; -moz-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } /** * To create a new sprite: * 1. Open sprites.js inside of gulp > tasks and add configuration for the new sprite type * 2. Once the `gulp sprites` task is run a new Sass file will be created and you should import that file below * 3. Add your new type to the $sprite-types map * 4. Edit the sprite() mixin with your new type added in the retina portion * * Available sprite types: * 1. "common" * 2. "mobile" * 3. "desktop" */ /** * @section Mixins * @subsection sprite * @description Creates a retina-ready sprite from the given source image. * * @mixin sprite($image, $type, $size: true) */ /* ----------------------------------------------------------------------------- * Components \* ----------------------------------------------------------------------------- */ @font-face { font-family: 'icomoon'; src: url("/static/assets/fonts/icomoon/fonts/icomoon.eot?unbazb"); src: url("/static/assets/fonts/icomoon/fonts/icomoon.eot?unbazb#iefix") format("embedded-opentype"), url("/static/assets/fonts/icomoon/fonts/icomoon.ttf?unbazb") format("truetype"), url("/static/assets/fonts/icomoon/fonts/icomoon.woff?unbazb") format("woff"), url("/static/assets/fonts/icomoon/fonts/icomoon.svg?unbazb#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-touchless:before { content: ""; } .icon-arrow-right:before { content: ""; } .icon-concierge:before { content: ""; } .icon-shield:before { content: ""; } .icon-home-stroke:before { content: ""; } .icon-pencil-stroke:before { content: ""; } .icon-phone-stroke:before { content: ""; } .icon-gift-stroke:before { content: ""; } .icon-search-stroke:before { content: ""; } .icon-reservation-stroke:before { content: ""; } .icon-promo-stroke:before { content: ""; } .icon-my-account-stroke:before { content: ""; } .icon-how-it-works-stroke:before { content: ""; } .icon-help-stroke:before { content: ""; } .icon-favorite-stroke:before { content: ""; } .icon-share:before { content: ""; } .icon-gift:before { content: ""; } .icon-sh-business-logo:before { content: ""; } .icon-airport:before { content: ""; } .icon-account:before { content: ""; } .icon-android:before { content: ""; } .icon-angle-double-down:before { content: ""; } .icon-angle-double-left:before { content: ""; } .icon-angle-double-right:before { content: ""; } .icon-angle-double-up:before { content: ""; } .icon-angle-down:before { content: ""; } .icon-angle-left:before { content: ""; } .icon-angle-right:before { content: ""; } .icon-angle-up:before { content: ""; } .icon-apple:before { content: ""; } .icon-arrow-left:before { content: ""; } .icon-attendant:before { content: ""; } .icon-bars:before { content: ""; } .icon-behance:before { content: ""; } .icon-bicycle:before { content: ""; } .icon-briefcase:before { content: ""; } .icon-bus:before { content: ""; } .icon-calendar-event:before { content: ""; } .icon-calendar:before { content: ""; } .icon-car:before { content: ""; } .icon-check-circle:before { content: ""; } .icon-check:before { content: ""; } .icon-chevron-down:before { content: ""; } .icon-chevron-left:before { content: ""; } .icon-chevron-right:before { content: ""; } .icon-chevron-up:before { content: ""; } .icon-circle-o:before { content: ""; } .icon-circle:before { content: ""; } .icon-clock:before { content: ""; } .icon-code:before { content: ""; } .icon-comment-o:before { content: ""; } .icon-comment:before { content: ""; } .icon-comments:before { content: ""; } .icon-covered-parking:before { content: ""; } .icon-credit-activity-list:before { content: ""; } .icon-cutlery:before { content: ""; } .icon-dive:before { content: ""; } .icon-dollars:before { content: ""; } .icon-dribbble:before { content: ""; } .icon-drinks:before { content: ""; } .icon-edit:before { content: ""; } .icon-email-circle:before { content: ""; } .icon-email:before { content: ""; } .icon-ev:before { content: ""; } .icon-exclamation-circle:before { content: ""; } .icon-exclamation-triangle:before { content: ""; } .icon-facebook-circle:before { content: ""; } .icon-facebook:before { content: ""; } .icon-facilities:before { content: ""; } .icon-favorites:before { content: ""; } .icon-filter:before { content: ""; } .icon-find-spot:before { content: ""; } .icon-flag-circle:before { content: ""; } .icon-friends:before { content: ""; } .icon-gears:before { content: ""; } .icon-github:before { content: ""; } .icon-glassdoor:before { content: ""; } .icon-globe:before { content: ""; } .icon-google-plus:before { content: ""; } .icon-handshake:before { content: ""; } .icon-heart:before { content: ""; } .icon-heartbeat:before { content: ""; } .icon-help:before { content: ""; } .icon-hero-car:before { content: ""; } .icon-immediate-parking:before { content: ""; } .icon-in-out:before { content: ""; } .icon-info:before { content: ""; } .icon-instagram:before { content: ""; } .icon-laptop:before { content: ""; } .icon-linkedin:before { content: ""; } .icon-list-ul:before { content: ""; } .icon-location-arrow:before { content: ""; } .icon-location:before { content: ""; } .icon-lock:before { content: ""; } .icon-map:before { content: ""; } .icon-minus:before { content: ""; } .icon-mobile:before { content: ""; } .icon-one-tap:before { content: ""; } .icon-money:before { content: ""; } .icon-no-contract:before { content: ""; } .icon-on-site:before { content: ""; } .icon-parked-car:before { content: ""; } .icon-parking:before { content: ""; } .icon-paved:before { content: ""; } .icon-phone:before { content: ""; } .icon-play:before { content: ""; } .icon-plus-circle:before { content: ""; } .icon-plus:before { content: ""; } .icon-printer:before { content: ""; } .icon-promo-circle:before { content: ""; } .icon-promo:before { content: ""; } .icon-qr:before { content: ""; } .icon-question:before { content: ""; } .icon-quotes-left:before { content: ""; } .icon-quotes-right:before { content: ""; } .icon-repeat:before { content: ""; } .icon-reservations:before { content: ""; } .icon-search-circle:before { content: ""; } .icon-search:before { content: ""; } .icon-self-park:before { content: ""; } .icon-settings:before { content: ""; } .icon-shuttle:before { content: ""; } .icon-sign-out:before { content: ""; } .icon-sneakers:before { content: ""; } .icon-spothero:before { content: ""; } .icon-star-half:before { content: ""; } .icon-star:before { content: ""; } .icon-tag:before { content: ""; } .icon-tailgating:before { content: ""; } .icon-team:before { content: ""; } .icon-time-24-7:before { content: ""; } .icon-times-circle:before { content: ""; } .icon-times:before { content: ""; } .icon-tips-circle:before { content: ""; } .icon-transit:before { content: ""; } .icon-trash:before { content: ""; } .icon-twitter-circle:before { content: ""; } .icon-twitter:before { content: ""; } .icon-upcoming-events-circle:before { content: ""; } .icon-users:before { content: ""; } .icon-valet:before { content: ""; } .icon-wheelchair:before { content: ""; } .icon-yelp-circle:before { content: ""; } .icon-youtube:before { content: ""; } /** * @section Icons * @subsection Icons * @description The below icons are available as part of our custom icon font.

Usage of the icon includes adding `` and replacing `name` with the name of the applicable icon. */ [class*="icon-"] { display: inline-block; } /* ----------------------------------------------------------------------------- * Misc \* ----------------------------------------------------------------------------- */ .icon-star-half { margin-left: -0.2em; } .Alert { margin: 6px 0 10px; display: block; } .Alert.Alert-inline { display: inline-block; margin: 0; } .Alert-content { padding: 4px 10px; display: inline-block; } .Alert-danger .Alert-content { background: #ffe5e5; color: #eb0029; } .Alert-highlight .Alert-content { background: #fff000; color: #111111; } .Alert-success .Alert-content { background: #1dbd71; color: #ffffff; } .Alert-neutral .Alert-content { background: #111111; color: #ffffff; } .Alert-muted .Alert-content { background: #f2f2f2; color: #111111; } .Alert-sm .Alert-content { font-size: 12px; font-size: 1.2rem; padding: 4px 8px; } .Alert-lg .Alert-content { font-size: 16px; font-size: 1.6rem; padding: 8px 15px; } .AutoSuggestInput { position: relative; } .AutoSuggestInput .Textfield-input { padding-right: 35px; } .AutoSuggestInput-is-vehicle { margin-bottom: 1em; } .AutoSuggestInput-is-vehicle > .Textfield.FormElement { margin-bottom: 0; } .AutoSuggestInput-is-vehicle .example-text { font-size: 11px; font-size: 1.1rem; color: #5c7996; margin-top: 0.5em; display: block; } .AutoSuggestInput-is-vehicle .AutoSuggestInput-suggestions { top: auto; } .AutoSuggestInput-suggestions-active .Textfield-input { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .AutoSuggestInput-no-suggestions .Textfield-input { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .mobile .AutoSuggestInput-no-suggestions .Textfield-input { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .AutoSuggestInput-suggestions { position: absolute; top: 100%; left: 0; right: 0; max-height: 25em; padding: 0; margin-top: -1px; background: #ffffff; border: 1px solid #111111; overflow-x: hidden; overflow-y: auto; list-style: none; text-align: left; z-index: 10; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-transition: max-height 0.2s, border 0.2s; transition: max-height 0.2s, border 0.2s; } .mobile .AutoSuggestInput-suggestions { max-height: 224px; border-color: #b7b7b7; } .AutoSuggestInput-no-suggestions .AutoSuggestInput-suggestions { display: none; } .AutoSuggestInput-suggestions-hidden { max-height: 0; overflow: hidden; border-width: 0; } .mobile .AutoSuggestInput-suggestions-hidden { max-height: 0; } .AutoSuggestInput-item { font-size: 13px; font-size: 1.3rem; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 5px 10px 5px 18px; } .AutoSuggestInput-item:hover, .AutoSuggestInput-item:focus { background: #f9f9f9; } .mobile .AutoSuggestInput-item { font-size: 14px; font-size: 1.4rem; padding: 7px 10px 7px 16px; } .AutoSuggestInput-fixture.AutoSuggestInput-item-active, .AutoSuggestInput-item-active { background: #0082ff; color: #ffffff; } .AutoSuggestInput-fixture { color: #111111; } .AutoSuggestInput-fixture:hover, .AutoSuggestInput-fixture:focus { background: #e0e0e0; } .AutoSuggestInput-item-active:hover, .AutoSuggestInput-item-active:focus { background: #026bcf; } .AutoSuggestInput-clear { font-size: 15px; font-size: 1.5rem; position: absolute; margin: auto; height: 18px; right: 10px; padding: 0; top: 0; bottom: 0; color: #cccccc; } .AutoSuggestInput-clear:hover { color: #b7b7b7; } .Badge { border: 1px solid #ffffff; border-radius: 3px; padding: 0.1em 0.5em; color: #ffffff; font-weight: 600; text-align: center; border-color: #ffffff; } .Button .Badge { margin-left: 3px; } .Badge-default { background-color: #0082ff; } .Badge-inverse { background-color: #ffffff; color: #0082ff; border-color: #0082ff; } .Badge-danger { background-color: #eb0029; } .Badge-warning { background-color: #fff000; } .Badge-success { background-color: #1dbd71; color: #ffffff; border-color: #ffffff; } .Badge-neutral { background-color: #111111; } /** * @section Navigation * @subsection Breadcrumbs * @description Style for the Breadcrumbs component. * @react * * @markup * * Level 1 * Level 2 * */ .Breadcrumbs { margin-bottom: 14px; } .Breadcrumbs li { font-size: 13px; font-size: 1.3rem; position: relative; display: inline; margin-right: 18px; font-weight: 300; color: #404040; } .Breadcrumbs li::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 9px; font-size: 0.9rem; position: absolute; left: -13px; top: 5px; } .Breadcrumbs li:first-child::before { display: none; } .Breadcrumbs li .Icon { margin: -2px 4px 0; } .Button .Icon, .spothero-html .Button .Icon, .Button-link .Icon, .spothero-html .Button-link .Icon { position: relative; margin: -3px 3px 0 0; vertical-align: middle; } /** * @section Buttons * @subsection Button * @description The default button element styling gets reset. * * @markup * */ button { display: inline-block; cursor: pointer; white-space: nowrap; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; outline: none; } /** * @section Buttons * @subsection Types * @description Buttons and anchor tags can be extended with these classes to modify their type. * * @state .Button-link - A textual representation of a button. * @state .Button-pipe-before - Adds a pipe before a button that isn't the first button. * @state .Button-separator - Adds a separator inside of a button. * @state .Button-block - A block level button. * * @markup * * Anchor Tag * * @state-markup-1 * * * @state-markup-2 * * * * * @state-markup-3 * * * @state-markup-4 * */ .Button, .spothero-html .Button { padding-right: 27px; padding-left: 27px; background-color: #0082ff; color: #ffffff; text-align: center; font-weight: 400; white-space: nowrap; cursor: pointer; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #0082ff; -webkit-transition: background 0.25s ease, border 0.25s ease; transition: background 0.25s ease, border 0.25s ease; /** * @section Buttons * @subsection States * @description Buttons can have different states depending on what is happening in the UI. * * @state .Button-active - A button with an active state. * @state .Button-disabled - A button with a disabled state. * @state .Button-loading - A button with a loader. * * @state-markup-1 * * * @state-markup-2 * * * @state-markup-3 * */ /** * @section Buttons * @subsection Widths * @description These classes can be used to change the padding around a button's text. * * @state .Button-narrow - A narrow button. * * @markup * * * @state-markup-1 * * */ /** * @section Buttons * @subsection Sizing * @description These classes can be used to size buttons differently. * * @state .Button-lg - A large button. * * @markup * * * @state-markup-1 * */ /** * @section Buttons * @subsection Icons * @description Buttons can contain icons on either the left or right side. By default icons on the left get a margin before the text. * * @state .Button-icon-left - Places the icon margin on the right of the icon before the text. * @state .Button-icon-right - Places the icon margin on the left of the icon after the text. * * @state-markup-1 * * @state-markup-2 * */ } .Button:focus, .Button:active, .spothero-html .Button:focus, .spothero-html .Button:active { outline: none; } .Button::before, .spothero-html .Button::before { opacity: 0; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; } .Button::after, .spothero-html .Button::after { content: ""; display: inline-block; width: 0; -webkit-transition-property: width; transition-property: width; line-height: 1; } .Button:not(.Button-disabled):hover, .Button:not(.Button-disabled):active, .spothero-html .Button:not(.Button-disabled):hover, .spothero-html .Button:not(.Button-disabled):active { background: #026bcf; color: #ffffff; border-color: #026bcf; } .Button.Button-active:not(.Button-disabled), .spothero-html .Button.Button-active:not(.Button-disabled) { background-color: #026bcf; color: #ffffff; border-color: #026bcf; } .Button.Button-loading:not(.Button-disabled), .Form-loading button.Button[type="submit"]:not(.Button-disabled), .spothero-html .Button.Button-loading:not(.Button-disabled), .spothero-html .Form-loading button.Button[type="submit"]:not(.Button-disabled), .Form-loading .spothero-html button.Button[type="submit"]:not(.Button-disabled) { background-color: #f2f2f2; border-color: #f2f2f2; color: #666666; opacity: 0.5; } .Button.Button-narrow, .spothero-html .Button.Button-narrow { padding-right: 13px; padding-left: 13px; } .Button.Button-narrow.Button-loading, .Form-loading button.Button.Button-narrow[type="submit"], .spothero-html .Button.Button-narrow.Button-loading, .spothero-html .Form-loading button.Button.Button-narrow[type="submit"], .Form-loading .spothero-html button.Button.Button-narrow[type="submit"] { padding-right: 2em; } .Button.Button-lg, .spothero-html .Button.Button-lg { padding-right: 40px; padding-left: 40px; } .Button.Button-lg.Button-narrow, .spothero-html .Button.Button-lg.Button-narrow { padding-right: 21px; padding-left: 21px; } .Button.Button-lg.Button-narrow.Button-loading, .Form-loading button.Button.Button-lg.Button-narrow[type="submit"], .spothero-html .Button.Button-lg.Button-narrow.Button-loading, .spothero-html .Form-loading button.Button.Button-lg.Button-narrow[type="submit"], .Form-loading .spothero-html button.Button.Button-lg.Button-narrow[type="submit"] { padding-right: 2.2em; } .mobile .Button.Button-lg, .mobile .spothero-html .Button.Button-lg { padding-top: 18px; padding-bottom: 18px; } .Button.Button-icon-left .Icon, .spothero-html .Button.Button-icon-left .Icon { margin-right: 5px; margin-left: 0; } .Button.Button-icon-right .Icon, .spothero-html .Button.Button-icon-right .Icon { margin-right: 0; margin-left: 5px; } /** * @section Buttons * @subsection Colors * @description Buttons can have a few different colors. * * @markup * * * */ .Button-secondary, .spothero-html .Button-secondary { background: #ffffff; color: #0082ff; border-color: #cbd4de; } .Button-secondary:not(.Button-disabled):hover, .Button-secondary:not(.Button-disabled):active, .spothero-html .Button-secondary:not(.Button-disabled):hover, .spothero-html .Button-secondary:not(.Button-disabled):active { background: #ffffff; color: #026bcf; border-color: #cbd4de; } .Button-secondary-danger, .spothero-html .Button-secondary-danger { background: #ffffff; color: #eb0029; border-color: #eb0029; } .Button-secondary-danger:not(.Button-disabled):hover, .Button-secondary-danger:not(.Button-disabled):active, .spothero-html .Button-secondary-danger:not(.Button-disabled):hover, .spothero-html .Button-secondary-danger:not(.Button-disabled):active { background: #ffffff; color: #bf0202; } .Button-tertiary:not(.Button-disabled), .spothero-html .Button-tertiary:not(.Button-disabled) { background: #1dbd71; border-color: #1dbd71; } .Button-tertiary:not(.Button-disabled):active, .Button-tertiary:not(.Button-disabled):hover, .Button-tertiary:not(.Button-disabled).btn-active, .spothero-html .Button-tertiary:not(.Button-disabled):active, .spothero-html .Button-tertiary:not(.Button-disabled):hover, .spothero-html .Button-tertiary:not(.Button-disabled).btn-active { background: #1aa764; border-color: #1aa764; } .Button-disabled, .spothero-html .Button-disabled { cursor: not-allowed; background-color: #cccccc; color: #666666; border: 1px solid #cccccc; } .Button-disabled.Button-link, .spothero-html .Button-disabled.Button-link { background: none; } .Button-link, .spothero-html .Button-link { position: relative; padding: 0; color: #0082ff; text-align: left; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .Button-link:hover, .spothero-html .Button-link:hover { color: #026bcf; } .Button-link.Button-disabled, .spothero-html .Button-link.Button-disabled { color: #cccccc; border: none; } .Button-link.Button-icon-left .Icon, .spothero-html .Button-link.Button-icon-left .Icon { padding-left: 1px; padding-right: 1px; } .Button-apple-pay { background-color: #111111; background-image: -webkit-named-image(apple-pay-logo-white); background-size: 44px 100%; background-position: center center; background-origin: content-box; background-repeat: no-repeat; border-radius: 4px; } .Button-apple-pay.Button-disabled { background-image: -webkit-named-image(apple-pay-logo-black); } .Button-block, .mobile .Button, .mobile .spothero-html .Button { display: block; text-align: center; width: 100%; } .Button-loading, .Form-loading button[type="submit"] { position: relative; cursor: not-allowed; } .Button-loading::before, .Form-loading button[type="submit"]::before { content: ""; position: absolute; right: 0.5em; top: 0; bottom: 0; margin: auto; width: 0.5em; height: 0.5em; border: 2px solid; border-left-color: transparent; border-radius: 50%; opacity: 1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: Button-loading-rotate; animation-name: Button-loading-rotate; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .Button-loading.Button, .Form-loading button.Button[type="submit"] { padding-right: 2em; } .Button-loading.Button::before, .Form-loading button.Button[type="submit"]::before { border: 4px solid; border-left-color: transparent; right: 1em; width: 1em; height: 1em; opacity: 1; } .Button-loading.Button::after, .Form-loading button.Button[type="submit"]::after { -webkit-transition-delay: 0; transition-delay: 0; width: 1em; } .Button-loading.Button-link, .Form-loading button.Button-link[type="submit"] { padding-right: 1.7em; } .Button-icon-right .Icon { margin-right: 0; margin-left: 5px; } .Button-space-before { margin-left: 1em; } .Button-space-after { margin-right: 1em; } .Button-pipe-before:not(:first-child) { margin-left: 22px; } .Button-pipe-before:not(:first-child)::after { content: "|"; color: #cccccc; position: absolute; left: -15px; top: -1px; } .Button-separator { display: inline-block; height: 1em; vertical-align: top; margin: 0.19em 10px 0; border-left: 1px solid #f2f2f2; opacity: 0.35; } @-webkit-keyframes Button-loading-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes Button-loading-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** * @section Buttons * @subsection Groups * @description Groups put buttons next to each other with proper corner rounding. * * @state .ButtonGroup-lg - Creates a button group with large buttons. * * @markup *
* * * *
* * @state-markup-1 *
* * * *
*/ .ButtonGroup > .Button, .ButtonGroup > .ButtonGroup-content, .ButtonGroup > .FormElement-control, .ButtonGroup.Textfield .ButtonGroup-content > .Button, .ButtonGroup.Textfield .ButtonGroup-content > .FormElement-control { float: left; margin-left: -1px; width: auto; } .mobile .ButtonGroup .Button-lg { padding-top: 12px; padding-bottom: 12px; } .ButtonGroup.Textfield .ButtonGroup-content { float: none; } .ButtonGroup .Button:first-child:not(:last-child):not(span), .ButtonGroup .ButtonGroup-content:first-child:not(:last-child), .ButtonGroup .FormElement-control:first-child:not(:last-child) .Textfield-input, .ButtonGroup .FormElement-control:first-child:not(:last-child) .Select-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ButtonGroup .FormElement-control:first-child:not(:last-child) .Textfield-input, .ButtonGroup .FormElement-control:first-child:not(:last-child) .Select-select { border-right: none; } .ButtonGroup .Button:not(:first-child):not(:last-child):not(span), .ButtonGroup .ButtonGroup-content:not(:first-child):not(:last-child), .ButtonGroup .FormElement-control:not(:first-child):not(:last-child) .Textfield-input, .ButtonGroup .FormElement-control:not(:first-child):not(:last-child) .Select-select { border-radius: 0; } .ButtonGroup .Button:last-child:not(:first-child):not(span), .ButtonGroup .ButtonGroup-content:last-child:not(:first-child), .ButtonGroup .FormElement-control:last-child:not(:first-child) .Textfield-input, .ButtonGroup .FormElement-control:last-child:not(:first-child) .Select-select { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ButtonGroup .FormElement-control:last-child:not(:first-child) .Textfield-input, .ButtonGroup .FormElement-control:last-child:not(:first-child) .Select-select { border-left: none; } .ButtonGroup-first { border-radius: 2px 0 0 2px; } .ButtonGroup-last { border-radius: 0 2px 2px 0; } /** * @section Badges * @subsection Badge * @description Highlight new or updated items. * * @markup * 3 */ .badge { border: 1px solid #ffffff; border-radius: 3px; padding: 0.1em 0.5em; background-color: #0082ff; color: #ffffff; font-weight: 600; text-align: center; border-color: #ffffff; } .badge.badge-inverse { background-color: #ffffff; color: #0082ff; border-color: #0082ff; } .badge.badge-danger { background: #eb0029; } .badge.badge-warning { background: #fff000; } .badge.badge-success { background: #1dbd71; color: #ffffff; border-color: #ffffff; } .badge.badge-neutral { background: #111111; } .btn .badge { margin-left: 3px; } /** * @section Badges * @subsection Colors * @description Badges can have a few different colors. * * @markup * 9 * 0 * 2 * 1 * 0 */ /** * @section Badges * @subsection Within Buttons * @description Badges can be used within buttons. * * @markup * */ /** * @section Forms * @subsection Checkboxes * @description Checkboxes get custom styling. * * @markup *
* *
*/ .Checkbox, .Radio { position: relative; padding-left: 24px; display: inline-block; vertical-align: top; text-align: left; color: #111111; } .Checkbox.Checkbox-label-left, .Checkbox-label-left.Radio { padding-left: 0; padding-right: 24px; } .Checkbox.Checkbox-label-left.Checkbox-lg, .Checkbox-label-left.Checkbox-lg.Radio, .Checkbox-label-left.Radio.Radio-lg, .Checkbox.Checkbox-label-left.Radio-lg { padding-right: 32px; } .Checkbox.FormElement, .FormElement.Radio { white-space: normal; } .Checkbox .Label, .Radio .Label { font-size: 14px; font-size: 1.4rem; vertical-align: top; padding: 0; } .Checkbox input, .Radio input { display: none; } .Checkbox input + span::after, .Radio input + span::after { font-size: 13px; font-size: 1.3rem; position: absolute; left: 1px; top: 1px; } .Checkbox input:checked + span::after, .Radio input:checked + span::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0082ff; } .mobile .Checkbox, .mobile .Radio { padding-left: 30px; min-height: 24px; } .mobile .Checkbox input:checked + span::after, .mobile .Radio input:checked + span::after { font-size: 20px; font-size: 2rem; } .Checkbox-confirm input + span::after, .Checkbox-deny input + span::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ffffff; } .mobile .Checkbox-confirm input + span::after, .mobile .Checkbox-deny input + span::after { font-size: 20px; font-size: 2rem; } .Checkbox-confirm input:checked + span, .Checkbox-deny input:checked + span { background: #1dbd71; border-color: #1dbd71; } .Checkbox-confirm input:checked + span::after, .Checkbox-deny input:checked + span::after { color: #ffffff; } .Checkbox-deny input + span::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Checkbox-deny input:checked + span { background: #eb0029; border-color: #eb0029; } .Checkbox-deny input:checked + span::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Checkbox-content, .Radio-content { vertical-align: top; } .Checkbox-content .FormElement, .Radio-content .FormElement { width: 160px; } .Checkbox-content .FormElement input, .Radio-content .FormElement input { display: inline-block; } .Checkbox-content span, .Radio-content span { vertical-align: top; } .mobile .Checkbox-content-label, .mobile .Radio-content-label { font-size: 15px; font-size: 1.5rem; } .Checkbox-custom-input, .Radio-custom-input { position: absolute; left: 0; top: 2px; height: 16px; width: 16px; border: 1px solid #cccccc; background: #ffffff; border-radius: 2px; } .mobile .Checkbox-custom-input, .mobile .Radio-custom-input { width: 24px; height: 24px; top: 0; } .Checkbox-confirm .Checkbox-custom-input, .Checkbox-confirm .Radio-custom-input, .Checkbox-deny .Checkbox-custom-input, .Checkbox-deny .Radio-custom-input { background: #cccccc; } .Checkbox-label-left .Checkbox-custom-input, .Checkbox-label-left .Radio-custom-input { right: 0; left: auto; } .Checkbox-disabled { cursor: not-allowed; } .Checkbox-disabled input:checked + span::after { color: #cccccc; } .Checkbox-disabled .Checkbox-custom-input, .Checkbox-disabled .Radio-custom-input { border-color: #cccccc; cursor: not-allowed; } .Checkbox-disabled .Checkbox-content, .Checkbox-disabled .Radio-content { color: #cccccc; cursor: not-allowed; } .Checkbox-sm .Label, .Radio-sm .Label { font-size: 13px; font-size: 1.3rem; padding-top: 1px; } .Checkbox-lg, .Radio-lg { padding-left: 32px; min-height: 24px; } .Checkbox-lg .Checkbox-custom-input, .Radio-lg .Checkbox-custom-input, .Checkbox-lg .Radio-custom-input, .Radio-lg .Radio-custom-input { height: 22px; width: 22px; } .Checkbox-lg .Label, .Radio-lg .Label { font-size: 14px; font-size: 1.4rem; padding-top: 3px; } .mobile .Checkbox-lg .Label, .mobile .Radio-lg .Label { padding-top: 0; } .Checkbox-lg input:checked + span::after, .Radio-lg input:checked + span::after { font-size: 15px; font-size: 1.5rem; left: 3px; top: 3px; } .CarouselSlides { position: relative; } .Carousel-slides-container { position: relative; overflow: hidden; } .Carousel-slide { position: absolute; top: 0; left: 0; width: 100%; } .Carousel-slide img { background-image: url("/static/assets/img/blue-circle-loader.gif"); background-repeat: no-repeat; background-position: center center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .Carousel-slide img { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 40px 40px; } } .Carousel-previous, .Carousel-next { font-size: 10px; font-size: 1rem; position: absolute; left: -1px; top: 50%; height: 26px; width: 26px; margin-top: -13px; line-height: 28px; background: rgba(17, 17, 17, 0.65); color: #ffffff; text-align: center; z-index: 3; } .Carousel-previous i, .Carousel-next i { vertical-align: text-top; } .Carousel-next { left: auto; right: 0; } .CarouselPaginator { width: 100%; text-align: center; } .Carousel-page { cursor: pointer; display: inline-block; margin-left: 10px; } .Carousel-page:first-child { margin-left: 0; } .Carousel-page-selected { color: #0082ff; } .Carousel-dots { position: absolute; bottom: 15px; left: 0; z-index: 3; width: 100%; text-align: center; } .Carousel-dot { margin-left: 5px; } .Carousel-dot::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 10px; font-size: 1rem; color: #f9f9f9; } .Carousel-dot:first-child { margin-left: 0; } .Carousel-dot-selected::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ffffff; } /* ----------------------------------------------------------------------------- * Transitions \* ----------------------------------------------------------------------------- */ .Carousel-slide-center, .Carousel-slide-from-right, .Carousel-slide-from-left { position: relative; z-index: 2; } .Carousel-slide-left-inactive, .Carousel-slide-right-inactive { visibility: hidden; } .Carousel-transition-slide .Carousel-slide-animating { -webkit-transition: all 0.25s; transition: all 0.25s; } .Carousel-transition-slide .Carousel-slide-left, .Carousel-transition-slide .Carousel-slide-left-inactive { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .Carousel-transition-slide .Carousel-slide-right, .Carousel-transition-slide .Carousel-slide-right-inactive { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .Carousel-transition-slide .Carousel-slide-left { z-index: 1; } .Carousel-transition-slide .Carousel-slide-right { z-index: 1; } @-webkit-keyframes Carousel-from-right { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes Carousel-from-right { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes Carousel-from-left { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes Carousel-from-left { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .Carousel-transition-slide .CarouselSlide-from-right { -webkit-animation-name: Carousel-from-right; animation-name: Carousel-from-right; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; } .Carousel-transition-slide .CarouselSlide-from-left { -webkit-animation-name: Carousel-from-left; animation-name: Carousel-from-left; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; } .Carousel-transition-fade .Carousel-slide-animating { -webkit-transition: all 0.25s; transition: all 0.25s; } .Carousel-transition-fade .Carousel-slide-center { opacity: 1; } @-webkit-keyframes Carousel-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes Carousel-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .Carousel-transition-fade .Carousel-slide-from-right, .Carousel-transition-fade .Carousel-slide-from-left { -webkit-animation-name: Carousel-fade-in; animation-name: Carousel-fade-in; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; } .Carousel-transition-fade .Carousel-slide-left, .Carousel-transition-fade .Carousel-slide-left-inactive, .Carousel-transition-fade .Carousel-slide-right, .Carousel-transition-fade .Carousel-slide-right-inactive { opacity: 0; } .DayPicker { font-size: 13px; font-size: 1.3rem; position: relative; width: 280px; color: #002d5b; background-color: #ffffff; border: 1px solid #cbd4de; -webkit-box-shadow: 0 6px 18px 1px rgba(17, 17, 17, 0.12); box-shadow: 0 6px 18px 1px rgba(17, 17, 17, 0.12); border-radius: 0 0 4px 4px; cursor: default; outline: none; } .DayPicker-NavBar { position: absolute; left: 0; right: 0; } .DayPicker-NavButton { position: absolute; padding: 3px 10px; top: 12px; cursor: pointer; } .DayPicker-NavButton::before { display: block; color: #5c7996; } .DayPicker-NavButton--prev { left: 50px; } .DayPicker-NavButton--prev::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .DayPicker-NavButton--next { right: 50px; } .DayPicker-NavButton--next::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .DayPicker-Caption { font-size: 16px; font-size: 1.6rem; width: 100%; height: 41px; line-height: 41px; text-align: center; background-color: #ffffff; } .DayPicker-Weekdays { margin: 0 6px; padding: 10px 0; border-bottom: 1px solid #cbd4de; } .DayPicker-Weekday { display: inline-block; width: 38px; text-align: center; } .DayPicker-Weekday abbr { border-bottom: none; } .DayPicker-Body { padding: 5px; } .DayPicker-Day { display: table-cell; width: 38px; height: 38px; vertical-align: middle; background-color: #ffffff; text-align: center; cursor: pointer; outline: none; border-radius: 19px; } .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):hover { border: 1px solid #1dbd71; } .DayPicker--interactionDisabled .DayPicker-Day { cursor: default; } .DayPicker-Day--today { color: #1dbd71; } .DayPicker-Day--disabled { color: #5c7996; cursor: default; } .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) { color: #ffffff; background-color: #1dbd71; } .DatePicker-input-container .Textfield-input { width: 81px; } .mobile .DatePicker-input-container .Textfield-input { width: 90px; } .DatePicker-no-label .DatePicker-input-container { width: auto; } .DatePicker-input-container-with-icon .Textfield-input { width: 125px; } .mobile .DatePicker-input-container-with-icon .Textfield-input { width: 116px; } .DatePicker-input-container-with-icon .Icon { color: #0082ff; } .DatePicker-tether { z-index: 20; } .DatePicker-tether-centered-with-shim { top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } .spothero-html .DatePicker-calendar-shim .shim { z-index: 19; } .DateTimePicker .DatePicker { display: inline-block; margin-right: 20px; } .DateTimePicker .TimePicker { display: inline-block; } .Dialog { position: absolute; top: 0; left: 0; z-index: 18; opacity: 0; -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .Dialog.Dialog-inline { height: 100%; width: 100%; } .Dialog-showing { opacity: 1; -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .Dialog-showing .Dialog-container { opacity: 1; } .mobile .Dialog-showing .Dialog-wrapper { -webkit-transform: translateY(0); transform: translateY(0); } .Dialog-shim { position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: auto; height: 100%; width: 100%; background: rgba(17, 17, 17, 0.65); } .Dialog-inline .Dialog-shim { position: absolute; } .Dialog-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } .Dialog-inline .Dialog-wrapper { position: absolute; } .Dialog-wrapper::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; letter-spacing: -0.25em; } .mobile .Dialog-wrapper { -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .Dialog-container { display: inline-block; vertical-align: middle; padding: 10px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(17, 17, 17, 0.5); text-align: left; opacity: 0; -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .mobile .Dialog-container { background: none; border: none; padding: 0; vertical-align: top; opacity: 1; width: 100% !important; } .Dialog-container-showing { opacity: 1; -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .Dialog-container-extra-slim { width: 96%; } @media (min-width: 480px) { .Dialog-container-extra-slim { width: 40%; } } @media (min-width: 900px) { .Dialog-container-extra-slim { width: 300px; } } .Dialog-container-slim { width: 96%; } @media (min-width: 480px) { .Dialog-container-slim { width: 50%; } } @media (min-width: 900px) { .Dialog-container-slim { width: 400px; } } .Dialog-container-normal { width: 96%; } @media (min-width: 480px) { .Dialog-container-normal { width: 60%; } } @media (min-width: 900px) { .Dialog-container-normal { width: 550px; } } .mobile .Dialog-container-normal { width: 100%; } .Dialog-container-wide { width: 96%; } @media (min-width: 480px) { .Dialog-container-wide { width: 70%; } } @media (min-width: 900px) { .Dialog-container-wide { width: 700px; } } .Dialog-container-extra-wide { width: 96%; } @media (min-width: 480px) { .Dialog-container-extra-wide { width: 80%; } } @media (min-width: 900px) { .Dialog-container-extra-wide { width: 900px; } } @media (max-width: 899px) { .Dialog-container-custom { width: 96% !important; } } .Dialog-inner { -webkit-box-shadow: 0 0 8px rgba(17, 17, 17, 0.5); box-shadow: 0 0 8px rgba(17, 17, 17, 0.5); position: relative; background: #ffffff; } .Dialog-title { position: relative; padding: 0 50px; background: #f2f2f2; } .mobile .Dialog-title { background: none; } .Dialog-title h3 { font-size: 14px; font-size: 1.4rem; margin: 0; line-height: 2.9; text-transform: uppercase; text-align: center; } .mobile .Dialog-title h3 { font-size: 19px; font-size: 1.9rem; height: 50px; line-height: 50px; font-weight: 400; margin: 0 0 10px; } .Dialog-ctas { position: absolute; top: 8px; right: 16px; z-index: 2; } .mobile .Dialog-ctas { top: 0; right: 0; } .Dialog-close { position: absolute; top: 0; right: 0; } .mobile .Dialog-close { font-size: 18px; font-size: 1.8rem; height: 50px; width: 45px; } .mobile .Dialog-close .Icon { vertical-align: top; } .Dialog-back { position: absolute; top: 0; right: 20px; } .Dialog-content { position: relative; overflow: auto; padding: 30px; max-height: 800px; -webkit-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media (min-width: 480px) { .Dialog-content { padding: 30px 50px; } } .mobile .Dialog-content { padding: 0 10px 12px; } .Dialog-content p:first-child { margin-top: 0; } .Dialog-content-flush { padding: 0; } .Form { margin: 0; } .Form-loading { opacity: 0.5; } .Form-loading button[type="submit"] { opacity: 1; } /** * @section Forms * @subsection Input Sizing * @description You can size inputs with modifiers. * * @state .FormElement-lg - Large form element. * * @markup *
* *
* *
*
* * @state-markup-3 *
* *
* *
*
*/ .FormElement { position: relative; white-space: nowrap; } .FormElement.FormElement-inline, .Form-inline .FormElement { display: table-cell; vertical-align: middle; } .FormElement [disabled] { opacity: 0.8; cursor: not-allowed; } .mobile .FormElement .Label { display: none; } .mobile .FormElement.Checkbox .Label, .mobile .FormElement.Radio .Label, .mobile .FormElement .Radio .Label { display: inline-block; } .FormElement .FormElement-control .Icon { height: 14px; left: 12px; position: absolute; margin: auto; top: 0; bottom: 0; } .FormElement .FormElement-control .Icon::before { margin-left: 1px; } .FormElement.FormElement-lg .FormElement-control .Icon { height: 16px; left: 10px; } .mobile .FormElement.FormElement-lg .FormElement-control .Icon { left: 7px; } @media (min-width: 340px) { .mobile .FormElement.FormElement-lg .FormElement-control .Icon { left: 10px; } } .FormElement-control { position: relative; display: block; } .FormElement-inline .FormElement-control { display: inline-block; } .FormElement-help-text { display: block; padding-top: 6px; color: #b7b7b7; } .FormElement-with-icon .Textfield-input, .FormElement-with-icon .Select-select { padding-left: 35px; } .mobile .FormElement-with-icon .Textfield-input, .mobile .FormElement-with-icon .Select-select { padding-left: 30px; } @media (min-width: 340px) { .mobile .FormElement-with-icon .Textfield-input, .mobile .FormElement-with-icon .Select-select { padding-left: 40px; } } .FormElement-with-icon.FormElement-lg .Textfield-input, .FormElement-with-icon.FormElement-lg .Select-select { padding-left: 36px; } .mobile .FormElement-with-icon.FormElement-lg .Textfield-input, .mobile .FormElement-with-icon.FormElement-lg .Select-select { padding-left: 30px; } @media (min-width: 340px) { .mobile .FormElement-with-icon.FormElement-lg .Textfield-input, .mobile .FormElement-with-icon.FormElement-lg .Select-select { padding-left: 46px; } } .FormElement-error .Label { color: #eb0029; } .form-error, .FormElementError, label.FormElement-error { display: block; position: relative; margin: 5px 0; padding: 0 0 0 20px; font-weight: 600; color: #eb0029; white-space: normal; } .form-error::before, .FormElementError::before, label.FormElement-error::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 0; top: 1px; color: #eb0029; font-weight: 600; } .mobile .form-error, .mobile .FormElementError, .mobile label.FormElement-error { font-size: 13px; font-size: 1.3rem; margin: 10px 0; padding-left: 22px; } .FormError { border: 1px solid #eb0029; background-color: #ffe5e5; color: #eb0029; margin: 10px 0; padding: 16px 20px; border-radius: 2px; text-align: left; } .FormError .List li { padding: 5px 0; } .FormError-title .Icon { margin-right: 5px; } .FormError-subtitle { margin: 10px 0 5px; } /** * @section Forms * @subsection Form Group * @description Form groups space elements and handle the relationship between labels and elements. * * @markup *
*
*
* *
* *
*
*
*
*
* *
* *
*
*
*
*/ .FormGroup { position: relative; margin-bottom: 1em; } .FormGroup:last-child { margin-bottom: 0; } .FormGroup .field-sub-text { font-size: 11px; font-size: 1.1rem; color: #5c7996; display: block; margin: 0.5em 0 1em; } @media (min-width: 900px) { .FormGroup .field-sub-text { margin: -10px 0 0 0; } } .FormGroup.FormGroup-inline > .FormElement, .FormGroup.FormGroup-inline > .Form { display: inline-block; vertical-align: top; margin-top: 0; } .FormGroup.FormGroup-inline > .FormElement:not(:last-child), .FormGroup.FormGroup-inline > .Form:not(:last-child) { margin-right: 10px; } .mobile .FormGroup.FormGroup-responsive > .FormElement:not(:first-child) { margin-top: 10px; } .mobile .FormGroup .Label { display: none; } .mobile .FormGroup.Checkbox .Label, .mobile .FormGroup.Radio .Label, .mobile .FormGroup .Radio .Label { display: inline-block; } .FormActions { margin-top: 1.5em; } .FormActions .Button:not(:last-child), .FormActions .Button-link:not(:last-child) { margin-right: 10px; } .mobile .FormActions { margin-top: 2em; } .mobile .FormActions .Button { margin: 0; } .mobile .FormActions .Button-link { display: block; text-align: center; margin-top: 16px; width: 100%; } .mobile .mobile-label { font-size: 16px; font-size: 1.6rem; display: block !important; margin-bottom: 15px; } .Checkbox .mobile .mobile-label, .Radio .mobile .mobile-label { display: inline-block !important; } .spothero-html .hidden { display: none !important; } .spothero-html .visually-hidden { opacity: 0 !important; pointer-events: none !important; } .spothero-html .shim { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 17; margin: auto; height: 100%; width: 100%; background: #111111; opacity: 0.65; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .spothero-html .shim.shim-white { background: #ffffff; } .spothero-html .shim.shim-no-header { margin-top: 40px; top: auto; bottom: 0; height: 70%; z-index: 11; } .spothero-html .cld-hidpi { background-image: url("/static/assets/img/blue-circle-loader.gif"); background-repeat: no-repeat; background-position: center center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .spothero-html .cld-hidpi { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 40px 40px; } } .spothero-html .highlight, .spothero-html .DateTimePicker-highlight .Textfield-input, .DateTimePicker-highlight .spothero-html .Textfield-input, .spothero-html .DateTimePicker-highlight .Select-select, .DateTimePicker-highlight .spothero-html .Select-select { -webkit-animation: HIGHLIGHT 3s; animation: HIGHLIGHT 3s; } @-webkit-keyframes HIGHLIGHT { 5% { background-color: #fffccc; } } @keyframes HIGHLIGHT { 5% { background-color: #fffccc; } } .spothero-html.loading .shim { display: block; } .Image:not(.Image-loaded) { background-image: url("/static/assets/img/blue-circle-loader.gif"); background-repeat: no-repeat; background-position: center center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .Image:not(.Image-loaded) { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 40px 40px; } } .Label { font-size: 13px; font-size: 1.3rem; display: block; padding: 0 0 6px; color: #5c7996; background-image: none; -webkit-transition: color 0.15s ease; transition: color 0.15s ease; } .FormElement-inline .Label { display: inline-block; padding: 0 6px 0 0; } .FormElement-lg .Label, .FormGroup-lg .Label { font-size: 14px; font-size: 1.4rem; } .Label-required { color: #eb0029; display: inline-block; margin-left: 3px; } .mobile .Label-required { margin-left: 0; } .List { list-style: none; margin: 0; padding: 0; } .List-standard, .List-ordered { list-style: disc; padding: 0 0 0 20px; } .List-standard li, .List-ordered li { display: list-item; list-style-position: outside; } .List-standard ul, .List-ordered ul { list-style: inherit; margin-left: 15px; } .List-ordered { list-style: decimal; } .List-icons { padding-top: 5px; } .List-icons li { vertical-align: sub; display: block; margin-bottom: 0.5em; padding-left: 22px; position: relative; } .List-icons li .Icon { position: absolute; margin: auto; left: 0; top: 0; bottom: 0; height: 1em; } .List-gallery li { width: 31.42857%; float: left; height: 2.5em; line-height: 1.2; } .List-gallery li:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .List-gallery li:nth-child(3n + 2) { margin-left: 34.28571%; margin-right: -100%; clear: none; } .List-gallery li:nth-child(3n + 3) { margin-left: 68.57143%; margin-right: -100%; clear: none; } .ListItem { line-height: 1.5; margin: 0; padding: 0; display: block; } .List-inline .ListItem { display: inline-block; margin-right: 0.4em; } .List-row { border-radius: 3px; border: 1px solid #cccccc; } .List-row > a, .List-row > button { position: relative; display: block; width: 100%; padding: 10px 15px; background-color: #ffffff; border-top: 1px solid #cccccc; text-align: left; } .List-row > a:hover, .List-row > button:hover { background: #f2f2f2; } .List-row > a:first-child, .List-row > button:first-child { border-top: none; } /** * @section Lists * @subsection Unordered * @description The default unordered list is stripped for easy styling. * * @state .list-standard - Creates a normal, un-stripped unordered list. * @state .list-with-icons - Prepares the list for styling with icons. * * @markup * * * @state-markup-1 * * * @state-markup-2 * */ ul { list-style: none; margin: 0; padding: 0; } ul li { line-height: 1.5; margin: 0; padding: 0; display: block; } ul.list-standard { list-style: disc !important; padding: 0 0 0 20px; } ul.list-standard li { display: list-item; list-style-position: outside; } ul.list-standard ul { list-style: inherit !important; margin-left: 15px; } ul.list-with-icons { padding-top: 5px; } ul.list-with-icons li { vertical-align: sub; display: block; margin-bottom: 10px; padding-left: 40px; position: relative; } ul.list-with-icons li i { position: absolute; left: 0; top: 0; } ul.list-gallery li { width: 31.42857%; float: left; height: 2.5em; line-height: 1.2; } ul.list-gallery li:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } ul.list-gallery li:nth-child(3n + 2) { margin-left: 34.28571%; margin-right: -100%; clear: none; } ul.list-gallery li:nth-child(3n + 3) { margin-left: 68.57143%; margin-right: -100%; clear: none; } .list-row { border-radius: 3px; border: 1px solid #cccccc; } .list-row > a, .list-row > button { position: relative; display: block; padding: 10px 15px; background-color: #ffffff; border-top: 1px solid #cccccc; width: 100%; text-align: left; } .list-row > a:hover, .list-row > button:hover { background: #f2f2f2; } .list-row > a:first-child, .list-row > button:first-child { border-top: none; } /** * @section Lists * @subsection Ordered * @description Ordered lists retain their default styling. * * @markup *
    *
  1. This is item 1
    2. *
  2. This is item 2
    3. *
  3. This is item 3
    4. *
  4. This is item 4
    5. *
  5. This is item 5
    6. *
  6. This is item 6
    7. *
*/ .Panel { border: 1px solid #cccccc; border-radius: 3px; background: #ffffff; padding: 1px; } .PanelGroup .Panel:first-child:not(:last-child) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .PanelGroup .Panel:not(:first-child):not(:last-child) { border-radius: 0; border-top: none; } .PanelGroup .Panel:not(:first-child):not(:last-child) .Panel-heading { border-radius: 0; } .PanelGroup .Panel:last-child:not(:first-child) { border-top-right-radius: 0; border-top-left-radius: 0; border-top: none; } .PanelGroup .Panel:last-child:not(:first-child) .Panel-heading { border-radius: 0; } .Panel.open .Panel-preview, .Panel.open .Panel-heading-right { display: none; } .Panel.no-close .Panel-heading { cursor: default; } .Panel-collapse .Panel.no-close .Panel-heading .Panel-title { color: #111111; } .Panel-heading { position: relative; background: #f2f2f2; padding: 11px 19px; font-weight: 600; border-radius: 3px 3px 0 0; } .Panel-heading .Panel-heading-right { position: absolute; right: 19px; top: 8px; bottom: 0; margin: 0; font-weight: 400; } .Panel-collapse .Panel-heading { cursor: pointer; } .Panel-title { font-size: 12px; font-size: 1.2rem; color: #111111; display: inline-block; vertical-align: top; white-space: nowrap; margin: 0; text-transform: uppercase; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .Panel-collapse .Panel-title { color: #0082ff; } .Panel-toggle { background: #ffffff; height: 16px; width: 16px; margin-right: 6px; border-radius: 8px; position: relative; display: inline-block; vertical-align: top; } .Panel-toggle + .Panel-title { cursor: pointer; } .Panel-toggle::before { font-size: 11px; font-size: 1.1rem; content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0082ff; position: absolute; left: 3px; top: 3px; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .open .Panel-toggle::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 2px; } .Panel-collapse .Panel.no-close .Panel-title { color: #111111; } .Panel-collapse .Panel.no-close .Panel-heading { cursor: default; } .Panel-collapse .Panel:last-child:not(:first-child) .Panel-heading { border-radius: 0 0 3px 3px; } .Panel-collapse .Panel.open:last-child:not(:first-child) .Panel-heading { border-radius: 0; } .Panel-collapse .Panel-heading:hover .Panel-title { color: #026bcf; } .Panel-collapse .Panel-heading:hover .Panel-toggle::before { color: #026bcf; } .Panel-content { padding: 19px 19px 22px; } .Panel-content p { margin-top: 0; } .Panel-collapse .Panel-content, .Panel-content.Panel-content-hidden { display: none; } .Panel.open .Panel-content { display: block; } .Panel-loader { background-image: url("/static/assets/img/blue-circle-loader.gif"); height: 150px; width: 100%; margin: auto; opacity: 0.75; background-repeat: no-repeat; background-position: center center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .Panel-loader { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 60px 60px; } } .Panel-preview { display: block; margin: 5px 0 0 11px; font-weight: 300; } .mobile .Panel-content { position: relative; } .mobile .Panel-heading { background-color: #ffffff; padding: 15px 45px 15px 20px; position: relative; } .mobile .Panel-title { font-size: 15px; font-size: 1.5rem; color: #111111; } .mobile .Panel-toggle { position: absolute; margin: 0; padding: 0; right: 12px; top: 14px; bottom: 0; background: #f2f2f2; height: 22px; width: 22px; border-radius: 11px; border: 1px solid #cccccc; } .mobile .Panel-toggle::before { font-size: 13px; font-size: 1.3rem; left: 4px; top: 4px; } .mobile .Panel-list { padding: 0; } .mobile .Panel-list .Button-link { font-size: 15px; font-size: 1.5rem; line-height: 1; position: relative; display: block; border-top: 1px solid #cccccc; padding: 12px 21px; width: 100%; } .mobile .Panel-list .Button-link .Icon { margin: -2px 6px 0 0; } .mobile .Panel-list .Button-link::after { font-size: 16px; font-size: 1.6rem; content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; color: #0082ff; position: absolute; right: 14px; top: 12px; } .mobile .Panel-list .Button-link.no-chevron::after { display: none; } .mobile .Panel-preview { font-size: 13px; font-size: 1.3rem; margin: 5px 0 0; } /** * @section Forms * @subsection Radios * @description The radio buttons get custom styling. * * @state .RadioButtonGroup - Radio buttons as a button group. * * @markup *
*
* *
*
* *
*
* *
*
* * @state-markup-1 *
* * * *
*/ .Radio input:checked + span::after { content: ""; height: 8px; width: 8px; border-radius: 4px; background: #0082ff; left: 0; top: 0; right: 0; bottom: 0; margin: auto; cursor: default; } .mobile .Radio input:checked + span::after { width: 12px; height: 12px; border-radius: 6px; } .Radio.Radio-selected { font-weight: 600; } .Radio-custom-input { border-radius: 24px; } .Radio-disabled .Radio-custom-input { border-color: #f2f2f2; background: #f9f9f9; } .Radio-disabled .Radio-content i { opacity: 0.65; } .Radio-disabled .Radio-content-label { font-weight: 400; color: #b7b7b7; } .RadioGroup { overflow: hidden; } .RadioGroup.FormElement { white-space: normal; } .RadioGroup .Radio { margin-bottom: 8px; display: block; float: left; clear: both; } .RadioGroup .Radio:last-child { margin-bottom: 0; } .RadioGroup.FormElement-inline .Radio { display: inline-block; float: none; margin-bottom: 0; margin-right: 8px; } .Radio-lg .Radio-custom-input { border-radius: 24px; } .RadioButtonGroup .Button { font-weight: 300; } .RadioButtonGroup .Label { float: left; width: auto; padding: 0; } .RadioButtonGroup .Label > .Button { margin-left: -1px; } .RadioButtonGroup .Label:first-child:not(:last-child) .Button { border-top-right-radius: 0; border-bottom-right-radius: 0; } .RadioButtonGroup .Label:not(:first-child):not(:last-child) .Button { border-radius: 0; border-right: none; border-left: none; margin-left: 0; } .RadioButtonGroup .Label:last-child:not(:first-child) .Button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .RadioButtonGroup .Label .Icon { font-size: 12px; font-size: 1.2rem; margin-right: 7px; } .RadioButtonGroup .Button-secondary { border-color: #0082ff; text-transform: none; } .RadioButtonGroup .Button-secondary:hover { color: #026bcf; } .RadioButtonGroup input { display: none; } .RadioButtonGroup input:checked + .Button-secondary { color: #ffffff; background: #0082ff; cursor: default; } .RadioButtonGroup-secondary .Label { margin-left: 10px; } .RadioButtonGroup-secondary .Label:first-child { margin-left: 0; } .RadioButtonGroup-secondary .Label > .Button { margin: 0; } .RadioButtonGroup-secondary input:checked + .Button-secondary { color: #002d5b; font-weight: 600; background: none; border-bottom: 2px solid #1dbd71; } .RadioButtonGroup-secondary input:checked + .Button-secondary:hover { color: #002d5b; background: none; cursor: default; border-bottom: 2px solid #1dbd71; } .RadioButtonGroup-secondary .Button-secondary { color: #5c7996; font-weight: 400; background: none; border: none; padding: 9px 3px 4px; border-radius: 0; } .RadioButtonGroup-secondary .Button-secondary:hover { color: #404040; background: none; } .RangeSlider { position: relative; width: 100%; padding-bottom: 32px; } .RangeSlider .rc-slider { position: relative; height: 3px; width: 100%; background-color: #f2f2f2; } .RangeSlider .rc-slider-track { position: absolute; left: 0; height: 3px; background-color: #0082ff; z-index: 1; } .RangeSliderHandle-container { position: absolute; top: -10px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } .RangeSliderHandle { -webkit-box-shadow: 0 2px 4px rgba(17, 17, 17, 0.5); box-shadow: 0 2px 4px rgba(17, 17, 17, 0.5); width: 23px; height: 23px; border-radius: 50%; background-color: #ffffff; border: 1px solid #f2f2f2; cursor: pointer; } .RangeSliderHandle-label { font-size: 12px; font-size: 1.2rem; position: absolute; top: -20px; -webkit-transform: translateX(-14px); transform: translateX(-14px); width: 50px; text-align: center; color: #0082ff; } .RangeSlider-min-value, .RangeSlider-max-value { font-size: 12px; font-size: 1.2rem; position: absolute; bottom: 0; } .RangeSlider-min-value { left: 2px; } .RangeSlider-max-value { right: 2px; } /** * @section Rules * @subsection Horizontal * @description The default horizontal rule is untouched. * * @state .hr - Turns an element into a styled horizontal rule. Optionally include an span tag to display centered content. * * @markup *
* * @state-markup-1 *
* Centered content *
*/ .hr, .HorizontalRule { font-size: 14px; font-size: 1.4rem; border: none; border-bottom: 1px dotted #cccccc; margin: 1.6em 0 1.8em; height: 10px; width: 100%; color: #404040; display: block; position: relative; text-align: center; background: none; text-transform: uppercase; font-weight: 300; } .hr > span, .HorizontalRule > span { display: inline-block; background: #ffffff; padding: 0 15px; } .HorizontalRule-dotted { border-bottom-style: dotted; } .HorizontalRule-dashed { border-bottom-style: dashed; } .HorizontalRule-solid { border-bottom-style: solid; } .HorizontalRule-left { text-align: left; } .HorizontalRule-left > span { margin-left: 60px; } .HorizontalRule-right { text-align: right; } .HorizontalRule-right > span { margin-right: 60px; } /** * @section Forms * @subsection Select * @description Select dropdowns get custom styling. * * @markup *
* *
* *
*
*/ .Select-select { background-image: url("/static/assets/img/caret-down.png"); background-repeat: no-repeat; background-position: 99% center; padding-right: 35px; /** * @section Forms * @subsection Loading State * @description Input and Select elements offer an optional loading state. * * @markup *
* *
* *
*
*/ } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .Select-select { background-image: url("/static/assets/img/caret-down@2x.png"); background-size: 19px 6px; } } .Select-select::-ms-expand { display: none; } .Select-select:not([disabled]):hover { background-image: url("/static/assets/img/caret-down-blue.png"); background-position: 99% center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .Select-select:not([disabled]):hover { background-image: url("/static/assets/img/caret-down-blue@2x.png"); background-size: 19px 6px; } } .FormElement-lg .Select-select { padding-right: 25px; } .Select-selected .Select-select { color: #111111; } .StarRating { display: inline-block; vertical-align: middle; } .StarRating i { font-size: 15px; font-size: 1.5rem; position: absolute; top: 0; left: 0; color: #cccccc; } .StarRating i.StarRating-Star-filled { color: #f8d44c; } .StarRating-Star { float: left; position: relative; width: 15px; height: 15px; } .star-rating-wrap .text-rating { display: inline-block; vertical-align: middle; } .star-rating { display: inline-block; vertical-align: middle; } .star-rating .star { float: left; position: relative; width: 15px; height: 15px; } .star-rating i { font-size: 15px; font-size: 1.5rem; position: absolute; top: 0; left: 0; color: #f2f2f2; } .star-rating i.filled { color: #f8d44c; } /** * @section Tables * @subsection Table * @description Default table element styling. * * @markup * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
IDFirst NameLast NameLocation
0JohnSmithChicago
1JoeSmithSan Francisco
3JaneDoeBoston
4SamJonesBaltimore
*/ .Table { font-size: 13px; font-size: 1.3rem; width: 100%; max-width: 100%; text-align: left; } .Table th { vertical-align: top; padding: 0; color: #404040; } .Table tr { border-bottom: 1px solid #f2f2f2; } .Table tr:last-child { border-bottom: none; } .Table td { vertical-align: top; padding: 15px 0; } /** * @section Navigation * @subsection Tabs * @description Tabbed navigation is available in multiple forms. * * @state .Tabs-caret - Creates a thick bottom border with a downward caret on the active tab. * @state .Tabs-thin - Used in conjunction with .Tabs-caret, this makes the bottom border thinner and caret smaller. * * @markup *
* * * *
* * @state-markup-1 *
* * * *
* * @state-markup-2 *
* * * *
*/ .TabNavigation { border-bottom: 1px solid #b7b7b7; list-style: none; } .Tabs-caret .TabNavigation { border-bottom: none; } .Tab { font-size: 13px; font-size: 1.3rem; float: left; width: 120px; height: 32px; border-radius: 2px 2px 0 0; border-style: solid; border-color: #b7b7b7; border-width: 1px 1px 1px 0; margin-bottom: -1px; padding: 2px 0; text-align: center; background: #ffffff; line-height: 2; outline: none; cursor: pointer; } .Tab:first-child { border-left-width: 1px; } .Tab.active, .Tab.Tab-active { color: #404040; border-bottom-color: transparent; background: #ffffff; } .Tab.Tab-sm { width: auto; min-width: 32px; } .Tabs { border-bottom: 1px solid #b7b7b7; } .Tabs.Tabs-react { border-bottom: none; } .Tabs.Tabs-caret { border: none; font-weight: 400; } .Tabs.Tabs-caret .Tab { width: auto; height: auto; border: none; color: #0082ff; margin: 10px 10px 10px 0; padding: 3px 0; text-align: center; line-height: 1; font-size: inherit; } .Tabs.Tabs-caret .Tab .divider { margin-top: 7px; height: 8px; background-color: #cccccc; display: block; width: 100%; } .Tabs.Tabs-caret .Tab.active, .Tabs.Tabs-caret .Tab.Tab-active { color: #0082ff; font-weight: 600; } .Tabs.Tabs-caret .Tab.active .divider, .Tabs.Tabs-caret .Tab.Tab-active .divider { background-color: #0082ff; } .Tabs.Tabs-caret .Tab.active::after, .Tabs.Tabs-caret .Tab.Tab-active::after { content: ""; position: relative; margin: 0 auto; border-width: 15px 15px 0; border-style: solid; border-color: #0082ff transparent; display: block; width: 0; } .Tabs.Tabs-caret.Tabs-thin .Tab { padding: 0; } .Tabs.Tabs-caret.Tabs-thin .Tab .divider { height: 5px; } .Tabs.Tabs-caret.Tabs-thin .Tab.active .divider, .Tabs.Tabs-caret.Tabs-thin .Tab.Tab-active .divider { height: 5px; } .Tabs.Tabs-caret.Tabs-thin .Tab.active::after, .Tabs.Tabs-caret.Tabs-thin .Tab.Tab-active::after { border-width: 8px 8px 0; } .TabContent { padding: 20px; } .Tabs-caret .TabContent { padding: 0; } .TabPanel { display: none; } .TabPanel-active { display: block; } .Tab-content > div { display: none; position: relative; } .Tab-content > div.active { display: block; } /** * @section Forms * @subsection TextArea * @description TextAreas have some basic styling. * * @markup *
* *
* *
*
*/ .Textarea-field { height: 80px; resize: vertical; white-space: normal; } .Textarea-field:focus { border-color: #0082ff; } /** * @section Forms * @subsection FormElement * @description FormElement fields have some basic styling. * * @state .Label - Labels can be included within FormElements * @state .ButtonGroup - An input can be coupled with a button. * @state .FormElement-with-icon - An input can contain an icon. * @state .FormElement-disabled - A disabled input. * * @markup *
*
* *
*
* * @state-markup-1 *
* *
* *
*
* * @state-markup-2 *
*
* *
* *
* * @state-markup-3 *
*
* * *
*
* * @state-markup-4 *
* *
* *
*
*/ .Textfield-input:focus { border-color: #1dbd71; } .TimePicker-no-label .TimePicker { width: auto; } .TimePicker-input-container .Textfield-input { width: 68px; } .TimePicker-input-container .Select-select { width: 85px; } .TimePicker-input-container-with-icon .Textfield-input, .TimePicker-input-container-with-icon .Select-select { width: 125px; } .TimePicker-input-container-with-icon .Icon { color: #0082ff; } .Tooltip { font-size: 14px; font-size: 1.4rem; position: absolute; z-index: 20; display: block; visibility: visible; line-height: 1.4; font-weight: 600; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; opacity: 0; } .Tooltip-showing { opacity: 1; } .Tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .Tooltip-top { margin-top: -3px; padding: 5px 0; } .Tooltip-top .Tooltip-arrow { bottom: -3px; left: 50%; margin-left: -8px; border-width: 8px 8px 0; border-top-color: rgba(17, 17, 17, 0.75); } .Tooltip-right { margin-left: 3px; padding: 0 5px; } .Tooltip-right .Tooltip-arrow { top: 50%; left: -3px; margin-top: -8px; border-width: 8px 8px 8px 0; border-right-color: rgba(17, 17, 17, 0.75); } .Tooltip-bottom { margin-top: 3px; padding: 5px 0; } .Tooltip-bottom .Tooltip-arrow { top: -3px; left: 50%; margin-left: -8px; border-width: 0 8px 8px; border-bottom-color: rgba(17, 17, 17, 0.75); } .Tooltip-left { margin-left: -3px; padding: 0 5px; } .Tooltip-left .Tooltip-arrow { top: 50%; right: -3px; margin-top: -8px; border-width: 8px 0 8px 8px; border-left-color: rgba(17, 17, 17, 0.75); } .Tooltip-content { -webkit-box-shadow: 1px 1.7px 3px 0 rgba(0, 0, 0, 0.078); box-shadow: 1px 1.7px 3px 0 rgba(0, 0, 0, 0.078); max-width: 250px; padding: 10px 32px 10px 12px; color: #ffffff; font-weight: 300; text-align: left; text-decoration: none; background-color: rgba(17, 17, 17, 0.75); } .Tooltip-no-close .Tooltip-content { padding-right: 12px; } .Tooltip-title { font-size: 14px; font-size: 1.4rem; margin-bottom: 2px; display: block; font-weight: 600; } .Tooltip-close { font-size: 14px; font-size: 1.4rem; position: absolute; right: 8px; top: 0; bottom: 0; margin: 0; font-weight: 300; color: #ffffff; } .Tooltip-close .Icon { height: 1em; } .Tooltip-left .Tooltip-close, .Tooltip-right .Tooltip-close { right: 12px; } .Tooltip-close:hover { color: #f2f2f2; } .spothero-html { /** * @section Typography * @subsection Font Families * @description The default `font-family` is Open Sans. */ /** * @section Typography * @subsection Headings * @description Available headings range from regular to sub to marketing and have three different sizes. For SEO purposes you can apply any size to any heading element. * * @state .heading-marketing-[lg/md/sm] - A sized heading for a marketing page. * @state .heading-sub - A sub heading. * * @markup *

Heading Large

*

Heading Medium

*

Heading Small

* * @state-markup-1 *

Marketing Heading Large

*

Marketing Heading Medium

*

Marketing Heading Small

* * @state-markup-2 *

Sub Heading Large

*/ /** * @section Typography * @subsection Body Copy * @description The default `font-size` is `15px` with a `line-height` of `1.7`. * * @markup *

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis ex vitae interdum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eleifend ut est eu vehicula. Nunc in consectetur orci, et aliquet arcu. Nulla gravida tincidunt lectus a consectetur. In semper suscipit placerat. Etiam sit amet nisi et mi fermentum viverra ac a risus.

*

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis ex vitae interdum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eleifend ut est eu vehicula. Nunc in consectetur orci, et aliquet arcu. Nulla gravida tincidunt lectus a consectetur. In semper suscipit placerat. Etiam sit amet nisi et mi fermentum viverra ac a risus.

*/ /** * @section Typography * @subsection Links * @description Text links receive a color transition and no text-decoration. * * @markup * Text Link */ /** * @section Typography * @subsection Color * @description There are a number of colors that can easily be applied to a piece of text. * * @markup *

This text is muted

*

This text is dark

*

This text is blue

*

This text is green

*

This text is red

*/ /** * @section Typography * @subsection Alignment * @description Alignment classes allow easy text alignment. * * @markup *

This text is left aligned

*

This text is center aligned

*

This text is right aligned

* This text is display block *

This text has no top and bottom margins

*

This text has no top margin

*

This text has no bottom margin

*

This text has a top margin of 1em

*

This text has a top margin of 0.5em

*

This text has a bottom margin of 1em

*

This text has a bottom margin of 0.5em

*/ /** * @section Typography * @subsection Weight * @description Apply different weights to text. * * @markup *

This text is light

*

This text is normal

*

This text is bold

*/ /** * @section Typography * @subsection Sizing * @description Apply different relative sizes to text. * * @markup *

This text is extra small

*

This text is small

*

This text is large

*

This text is extra large

*

This text is double extra large

*/ /** * @section Typography * @subsection Icons * @description Text can contain icons. By default there is no additional spacing between the text and icons. * * @state .text-icon-left - Places the icon margin on the right of the icon before the text. * @state .text-icon-right - Places the icon margin on the left of the icon after the text. * * @markup *

This text has an inline icon.

* * @state-markup-1 * Text with icon on left * * @state-markup-2 * Text with icon on right */ /** * @section Typography * @subsection Transforms * @description Transforms can also be applied to text. * * @markup *

This Text IS lowercase

*

this text is uppercase

*

This text is capitalized

*/ /** * @section Typography * @subsection Inline Elements * @description Inline textual element modifiers. * * @markup *

This text is marked, alternately use the .highlight class

*

This text is deleted

*

This text is striked

*

This text is inserted

*

This text is underlined

*

This text is small

*

This text is bold

*

This text is italicized

*/ /** * @section Typography * @subsection Blockquote * @description Add a quote around any HTML element. * * @markup *
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. *
*/ } .spothero-html h1, .spothero-html h2, .spothero-html h3, .spothero-html h4, .spothero-html h5, .spothero-html h6 { margin-top: 0; font-weight: 600; } .spothero-html h1.heading-sub, .spothero-html h2.heading-sub, .spothero-html h3.heading-sub, .spothero-html h4.heading-sub, .spothero-html h5.heading-sub, .spothero-html h6.heading-sub { font-weight: 400; } .spothero-html h1[class^="heading-marketing-"], .spothero-html h2[class^="heading-marketing-"], .spothero-html h3[class^="heading-marketing-"], .spothero-html h4[class^="heading-marketing-"], .spothero-html h5[class^="heading-marketing-"], .spothero-html h6[class^="heading-marketing-"] { font-family: "futura-pt", sans-serif; text-transform: uppercase; -webkit-transition: opacity 0.15s ease; transition: opacity 0.15s ease; } .spothero-html h1.heading-sm, .spothero-html h2.heading-sm, .spothero-html h3.heading-sm, .spothero-html h4.heading-sm, .spothero-html h5.heading-sm, .spothero-html h6.heading-sm { font-size: 12px; font-size: 1.2rem; } .spothero-html h1.heading-md, .spothero-html h2.heading-md, .spothero-html h3.heading-md, .spothero-html h4.heading-md, .spothero-html h5.heading-md, .spothero-html h6.heading-md { font-size: 15px; font-size: 1.5rem; } .spothero-html h1.heading-lg, .spothero-html h2.heading-lg, .spothero-html h3.heading-lg, .spothero-html h4.heading-lg, .spothero-html h5.heading-lg, .spothero-html h6.heading-lg { font-size: 20px; font-size: 2rem; } .spothero-html h1.heading-marketing-sm, .spothero-html h2.heading-marketing-sm, .spothero-html h3.heading-marketing-sm, .spothero-html h4.heading-marketing-sm, .spothero-html h5.heading-marketing-sm, .spothero-html h6.heading-marketing-sm { font-size: 20px; font-size: 2rem; letter-spacing: 4px; } .spothero-html h1.heading-marketing-md, .spothero-html h2.heading-marketing-md, .spothero-html h3.heading-marketing-md, .spothero-html h4.heading-marketing-md, .spothero-html h5.heading-marketing-md, .spothero-html h6.heading-marketing-md { font-size: 30px; font-size: 3rem; letter-spacing: 6px; } .spothero-html h1.heading-marketing-lg, .spothero-html h2.heading-marketing-lg, .spothero-html h3.heading-marketing-lg, .spothero-html h4.heading-marketing-lg, .spothero-html h5.heading-marketing-lg, .spothero-html h6.heading-marketing-lg { font-size: 40px; font-size: 4rem; letter-spacing: 8px; } .spothero-html h1 small, .spothero-html h2 small, .spothero-html h3 small, .spothero-html h4 small, .spothero-html h5 small, .spothero-html h6 small { font-size: 0.6em; display: block; } .spothero-html h1 a, .spothero-html h2 a, .spothero-html h3 a, .spothero-html h4 a, .spothero-html h5 a, .spothero-html h6 a { font-weight: 400; } .spothero-html p { line-height: 1.5; } .spothero-html a { text-decoration: none; outline: none; color: #0082ff; text-align: left; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .spothero-html a:active, .spothero-html a:focus { outline: none; } .spothero-html a:hover { color: #026bcf; } .spothero-html a i { position: relative; top: -1px; } .spothero-html .text-muted { color: #b7b7b7 !important; } .spothero-html .text-dark { color: #404040 !important; } .spothero-html .text-blue { color: #0082ff !important; } .spothero-html .text-green { color: #1dbd71 !important; } .spothero-html .text-red { color: #eb0029 !important; } .spothero-html .text-left { text-align: left !important; } .spothero-html .text-center { text-align: center !important; } .spothero-html .text-right { text-align: right !important; } .spothero-html .text-block { display: block !important; } .spothero-html .flush { margin-top: 0 !important; margin-bottom: 0 !important; } .spothero-html .flush-top { margin-top: 0 !important; } .spothero-html .flush-bottom { margin-bottom: 0 !important; } .spothero-html .margin-top { margin-top: 1em !important; } .spothero-html .margin-top-thin { margin-top: 0.5em !important; } .spothero-html .margin-bottom { margin-bottom: 1em !important; } .spothero-html .margin-bottom-thin { margin-bottom: 0.5em !important; } .spothero-html .text-light { font-weight: 300 !important; } .spothero-html .text-normal { font-weight: 400 !important; } .spothero-html .text-bold { font-weight: 600 !important; } .spothero-html .text-xs { font-size: 0.6em !important; } .spothero-html .text-sm { font-size: 0.8em !important; } .spothero-html .text-lg { font-size: 1.2em !important; } .spothero-html .text-xl { font-size: 1.4em !important; } .spothero-html .text-xxl { font-size: 1.6em !important; } .spothero-html .text-icon-left i { margin-right: 5px; margin-left: 0; } .spothero-html .text-icon-right i { margin-right: 0; margin-left: 5px; } .spothero-html .text-lowercase { text-transform: lowercase !important; } .spothero-html .text-uppercase { text-transform: uppercase !important; } .spothero-html .text-capitalize { text-transform: capitalize !important; } .spothero-html .highlighted, .spothero-html mark { color: #111111; background-color: #fff000; } .spothero-html small { font-size: 13px; font-size: 1.3rem; } .spothero-html blockquote { padding: 0 20px; margin: 0; line-height: 1.6; position: relative; } .spothero-html blockquote::before, .spothero-html blockquote::after { font-size: 16px; font-size: 1.6rem; color: #cccccc; } .spothero-html blockquote::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: -2px; top: -3px; } .spothero-html blockquote::after { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; margin-left: 4px; vertical-align: bottom; } .spothero-html.wf-loading h1[class^="heading-marketing-"], .spothero-html.wf-loading h2[class^="heading-marketing-"], .spothero-html.wf-loading h3[class^="heading-marketing-"], .spothero-html.wf-loading h4[class^="heading-marketing-"], .spothero-html.wf-loading h5[class^="heading-marketing-"], .spothero-html.wf-loading h6[class^="heading-marketing-"] { opacity: 0; } .spothero-html.mobile h1.heading-marketing-md, .spothero-html.mobile h2.heading-marketing-md, .spothero-html.mobile h3.heading-marketing-md, .spothero-html.mobile h4.heading-marketing-md, .spothero-html.mobile h5.heading-marketing-md, .spothero-html.mobile h6.heading-marketing-md { font-size: 25px; font-size: 2.5rem; letter-spacing: 5px; } .spothero-html.mobile h1.heading-marketing-lg, .spothero-html.mobile h2.heading-marketing-lg, .spothero-html.mobile h3.heading-marketing-lg, .spothero-html.mobile h4.heading-marketing-lg, .spothero-html.mobile h5.heading-marketing-lg, .spothero-html.mobile h6.heading-marketing-lg { font-size: 30px; font-size: 3rem; letter-spacing: 7px; } .spothero-html.mobile small { font-size: 13px; font-size: 1.3rem; } .ModalV2 { position: absolute; top: 0; left: 0; opacity: 0; z-index: 800; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ModalV2.showing { pointer-events: initial; -webkit-user-select: inital; -moz-user-select: inital; -ms-user-select: inital; user-select: inital; opacity: 1; } .ModalV2 .Modal-shim { position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: auto; height: 100%; width: 100%; background-color: rgba(0, 45, 91, 0.9); } .ModalV2 .Modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 9000; 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; } .ModalV2 .Modal-container { position: relative; display: inline-block; height: 100%; width: 100%; vertical-align: middle; background-color: #ffffff; text-align: left; padding: 1.6rem; } @media (min-width: 480px) { .ModalV2 .Modal-container { height: auto; width: 550px; border-radius: 4px; max-width: calc(100% - 3.2rem); padding: 3.2rem 7rem; } } .ModalV2 .Modal-title { font-size: 24px; margin: 0; font-weight: 600; text-align: center; position: relative; margin-bottom: 2.4rem; } .ModalV2 .Modal-content { position: relative; overflow: auto; -webkit-transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-align: center; } .ModalV2 .disclaimer { margin: 1.6rem 0; text-align: left; } .ModalV2 .small { font-size: 1.2rem; line-height: 1.7rem; color: #5C7995; } .ModalV2 .Image-compare { max-width: 100%; } .VehicleSelect { position: relative; } .VehicleSelect .Select { margin-right: 10px; display: inline-block; vertical-align: top; } .VehicleSelect .form-error { margin-top: 10px; } .VehicleSelect .VehicleSelect-make { width: 25%; } .VehicleSelect .VehicleSelect-model { width: 40%; margin-right: 0; } .VehicleSelect .VehicleSelect-year { width: 20%; } .mobile .VehicleSelect .Select { display: block; width: 100%; margin-bottom: 1em; } .VehicleList { position: relative; } .VehicleList .Radio { display: table; } .mobile .VehicleList-dont-know-tooltip { display: none; } .VehicleList-dont-know-tooltip .Tooltip-content { max-width: 350px; } .VehicleList-required { margin-left: 3px; color: #eb0029; } .VehicleList-message { margin-top: 20px; } .VehicleList-message strong { margin-right: 8px; } .VehicleList-message p { margin-bottom: 5px; } .VehicleList-callout { margin-bottom: 0; } .VehicleList-loader { background-image: url("/static/assets/img/blue-circle-loader.gif"); height: 50px; width: 50px; background-size: 50px 50px !important; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .VehicleList-loader { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 50px 50px; } } .AdditionalVehicleDetails { margin-bottom: 1em; } .PromocodeControl > .FormElement { display: inline-block; } .PromocodeControl-controls { display: inline-block; margin-left: 10px; margin-bottom: 7px; vertical-align: bottom; } .PromocodeControl-controls .Button-link:not(:last-child) { margin-right: 10px; } .mobile .PromocodeControl-controls { vertical-align: middle; } .PromocodeControl-text-entered .form-control { text-transform: uppercase; } .PasswordControl .ButtonGroup { position: relative; } .PasswordControl .ButtonGroup .FormElement { width: 200px; float: left; } .mobile .PasswordControl .ButtonGroup .FormElement { width: 100%; } .PasswordControl .ButtonGroup .FormElement .Textfield-input { border-radius: 3px 0 0 3px; border-right: none; } .ContainsErrors-email .PasswordControl .ButtonGroup .FormElement .Textfield-input { border-color: #b7b7b7; background-color: #ffffff; color: #404040; } .PasswordControl .PasswordControl-show { border: 1px solid #cccccc; background: #f2f2f2; padding: 6px 9px 0; height: 40px; width: 100px; margin-left: 0; border-radius: 0 3px 3px 0; } .ContainsErrors .PasswordControl .PasswordControl-show .FormElement .Checkbox-custom-input, .ContainsErrors .PasswordControl .PasswordControl-show .FormElement .Radio-custom-input { border-color: #b7b7b7; background-color: #ffffff; } .PasswordControl .PasswordControl-show small { display: inline-block; vertical-align: top; padding: 1px 0 0 2px; } .PasswordControl .PasswordControl-show input:checked + span { background: #ffffff; } .mobile .PasswordControl .PasswordControl-show { position: absolute; top: 0; right: 10px; background: none; border: none; padding: 0; width: auto; height: auto; text-transform: uppercase; } .mobile .PasswordControl .PasswordControl-show .Checkbox, .mobile .PasswordControl .PasswordControl-show .Radio { height: 20px; line-height: 40px; } .mobile .PasswordControl .PasswordControl-show .Checkbox-custom-input, .mobile .PasswordControl .PasswordControl-show .Radio-custom-input { display: none; } .PasswordControl-forgot { margin: 1em 0 0; } .ForgotPasswordDialog .FormActions, .FacebookEmailDialog .FormActions { text-align: center; } /* ----------------------------------------------------------------------------- * UI \* ----------------------------------------------------------------------------- */ .dialog-wrapper { position: absolute; top: 0; left: 0; z-index: 15; } .dialog-shim { position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: auto; height: 100%; width: 100%; background: #111111; opacity: 0; } .dialog-shim.dialog-shim-white { background: #ffffff; } .dialog-shim.dialog-shim-no-header { margin-top: 40px; top: auto; bottom: 0; height: 70%; z-index: 11; } .loading .dialog-shim { display: block; } .dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; opacity: 0; } .dialog::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; letter-spacing: -0.25em; } .dialog-container { display: inline-block; vertical-align: middle; padding: 10px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(17, 17, 17, 0.5); text-align: left; } .dialog-container.dialog-container-extra-slim { width: 96%; } @media (min-width: 480px) { .dialog-container.dialog-container-extra-slim { width: 40%; } } @media (min-width: 900px) { .dialog-container.dialog-container-extra-slim { width: 300px; } } .dialog-container.dialog-container-slim { width: 96%; } @media (min-width: 480px) { .dialog-container.dialog-container-slim { width: 50%; } } @media (min-width: 900px) { .dialog-container.dialog-container-slim { width: 400px; } } .dialog-container.dialog-container-normal { width: 96%; } @media (min-width: 480px) { .dialog-container.dialog-container-normal { width: 60%; } } @media (min-width: 900px) { .dialog-container.dialog-container-normal { width: 550px; } } .dialog-container.dialog-container-wide { width: 96%; } @media (min-width: 480px) { .dialog-container.dialog-container-wide { width: 70%; } } @media (min-width: 900px) { .dialog-container.dialog-container-wide { width: 700px; } } .dialog-container.dialog-container-extra-wide { width: 96%; } @media (min-width: 480px) { .dialog-container.dialog-container-extra-wide { width: 80%; } } @media (min-width: 900px) { .dialog-container.dialog-container-extra-wide { width: 900px; } } .dialog-inner { -webkit-box-shadow: 0 0 8px rgba(17, 17, 17, 0.5); box-shadow: 0 0 8px rgba(17, 17, 17, 0.5); position: relative; background: #ffffff; } .dialog-header { position: relative; padding: 0 50px; background: #f2f2f2; } .dialog-header h3 { font-size: 14px; font-size: 1.4rem; margin: 0; line-height: 2.8; text-transform: uppercase; text-align: center; } .dialog-close { position: absolute; top: 8px; right: 16px; z-index: 2; } .dialog-content { position: relative; overflow: auto; padding: 40px 50px; max-height: 800px; -webkit-transition: height 0.25s ease; transition: height 0.25s ease; } .dialog-content.no-padding { padding: 0; } .notification-container { position: absolute; left: 0; width: 100%; z-index: 18; } .mobile .notification-container { position: fixed; top: 52px; } .notification { margin-top: -120px !important; position: relative; width: 100%; padding: 16px 0; background-color: #ffffff; color: #111111; border-top: 1px solid #e6e6e6; -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .notification p { margin: 0; text-align: center; } .notification .btn-close { position: absolute; top: 16px; right: 10px; } .notification.notification-show { margin-top: 0 !important; } .notification.success { background-color: #20d37e; color: #ffffff; border-top: 1px solid #1aa764; } .notification.success .btn-close { color: #1aa764; } .notification.success .notification-ctas .Button { color: #1aa764; border-color: #1aa764; background-color: #20d37e; } .notification.success .notification-ctas .Button-link { color: #1aa764; border-bottom: 1px solid #1aa764; } .notification.error { background-color: #ffe5e5; color: #bf0202; border-top: 1px solid #ffb2b2; } .notification.error .btn-close { color: #bf0202; } .notification.error .notification-ctas .Button { color: #bf0202; border-color: #bf0202; background-color: #ffe5e5; } .notification.error .notification-ctas .Button-link { color: #bf0202; border-bottom: 1px solid #bf0202; } .notification.warning { background-color: #fefae9; color: #c79f08; border-top: 1px solid #fceeb8; } .notification.warning .btn-close { color: #c79f08; } .notification.warning .notification-ctas .Button { color: #c79f08; border-color: #c79f08; background-color: #fefae9; } .notification.warning .notification-ctas .Button-link { color: #c79f08; border-bottom: 1px solid #c79f08; } .notification:first-child { border: none; } .mobile .notification { padding: 16px 25px; } .mobile .notification .btn-close { top: 13px; right: 10px; } .mobile .notification .type-icon { top: 16px; left: 5px; } .mobile .notification p { font-size: 14px; font-size: 1.4rem; line-height: 1.3; } .notification-ctas { margin: 10px 0 4px; text-align: center; } .notification-ctas button { margin: 0 5px; } /* ----------------------------------------------------------------------------- * Common Initializers \* ----------------------------------------------------------------------------- */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { background: #ffffff; color: #111111; } html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; font-family: "Open Sans", sans-serif; font-weight: 400; } body > img { border-style: none; height: 0; width: 0; position: absolute; left: 0; bottom: 0; } body.with-nav { padding-top: 64px; } /* ----------------------------------------------------------------------------- * Grid \* ----------------------------------------------------------------------------- */ .container { max-width: 1040px; margin-left: auto; margin-right: auto; position: relative; opacity: 1; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .container:after { content: " "; display: block; clear: both; } .container-loading { min-height: 600px; } .container-loading * { opacity: 0; } .container-loading .Panel-loader { margin-top: 100px; opacity: 1; } .half { width: 50%; display: inline-block; vertical-align: top; } .half-susy { width: 48.93617%; float: right; margin-right: 0; } .half-susy:first-child { width: 48.93617%; float: left; margin-right: 2.12766%; } .alert { margin: 6px 0 10px; display: block; } .alert .content { font-size: 11px; font-size: 1.1rem; padding: 4px 10px; display: inline-block; } .alert.alert-danger .content { background: #ffe5e5; color: #eb0029; } .alert.alert-highlight .content { background: #fff000; color: #111111; } .alert.alert-success .content { background: #1dbd71; color: #ffffff; } .alert.alert-neutral .content { background: #111111; color: #ffffff; } .alert.alert-muted .content { background: #f2f2f2; color: #111111; } .alert.alert-md .content { font-size: 14px; font-size: 1.4rem; padding: 6px 12px; } .alert.alert-lg .content { font-size: 16px; font-size: 1.6rem; padding: 8px 15px; } .tooltip { font-size: 14px; font-size: 1.4rem; position: absolute; z-index: 14; display: block; visibility: visible; line-height: 1.4; font-weight: 600; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; opacity: 0; } .tooltip.in { opacity: 1; } .tooltip.top { margin-top: -3px; padding: 5px 0; } .tooltip.right { margin-left: 3px; padding: 0 5px; } .tooltip.bottom { margin-top: 3px; padding: 5px 0; } .tooltip.left { margin-left: -3px; padding: 0 5px; } .tooltip.top .tooltip-arrow { bottom: -3px; left: 50%; margin-left: -8px; border-width: 8px 8px 0; border-top-color: rgba(0, 0, 0, 0.749); } .tooltip.right .tooltip-arrow { top: 50%; left: -3px; margin-top: -8px; border-width: 8px 8px 8px 0; border-right-color: rgba(0, 0, 0, 0.749); } .tooltip.left .tooltip-arrow { top: 50%; right: -3px; margin-top: -8px; border-width: 8px 0 8px 8px; border-left-color: rgba(0, 0, 0, 0.749); } .tooltip.bottom .tooltip-arrow { top: -3px; left: 50%; margin-left: -8px; border-width: 0 8px 8px; border-bottom-color: rgba(0, 0, 0, 0.749); } .tooltip-inner { -webkit-box-shadow: 1px 1.7px 3px 0 rgba(0, 0, 0, 0.078); box-shadow: 1px 1.7px 3px 0 rgba(0, 0, 0, 0.078); max-width: 250px; padding: 10px 32px 10px 12px; color: #ffffff; font-weight: 300; text-align: left; text-decoration: none; background-color: rgba(0, 0, 0, 0.749); } .tooltip-inner .title { font-size: 14px; font-size: 1.4rem; margin-bottom: 2px; display: block; font-weight: 600; } .tooltip-inner .close { font-size: 16px; font-size: 1.6rem; position: absolute; right: 8px; top: -3px; bottom: 0; font-weight: 300; color: #ffffff; } .left .tooltip-inner .close, .right .tooltip-inner .close { right: 12px; } .tooltip-inner .close:hover { color: #f2f2f2; } .tooltip-no-close .tooltip-inner { padding-right: 12px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } /** * @section Wells * @subsection Wells * @description Our default elmement for calling out content. * * @state .well-sm - A well with less padding. * @state .well-bordered - Add a border to the well. * @state .well-light - A well with a white background. * * @markup *

Lorem ipsum.

* * @state-markup-1 *

Lorem ipsum.

* * @state-markup-2 *

Lorem ipsum.

* * @state-markup-3 *

Lorem ipsum.

* */ .well { background: #f2f2f2; padding: 20px; } .well.well-sm { padding: 10px; } .well.well-light { background: #ffffff; } .well.well-bordered { border: 1px solid #cccccc; } .rating-wrap .caption { font-size: 10.92px; font-size: 1.092rem; vertical-align: super; margin-left: 10px; } .rating { display: inline-block; margin: 0 0 30px; } .rating button { padding: 0; } .rating button i { -webkit-text-stroke: 1px #111111; -webkit-text-fill-color: #ffffff; margin: 0; vertical-align: top; } .rating button.filled { color: #0082ff; } .rating button.filled i { -webkit-text-stroke: inherit; -webkit-text-fill-color: inherit; } .rating.rating-small button { font-size: 13px; font-size: 1.3rem; } .SaveAsFavorite.on { color: #404040; } .SaveAsFavorite.on:hover { color: #111111; } .MultiRateChooser .Radio-selected { font-weight: 600; } .MultiRateChooser .Button-link.Button-icon-left .Icon { padding-left: 4px; } .inline-page .main > .container { background-image: url("/static/assets/img/blue-circle-loader.gif"); background-repeat: no-repeat; background-position: center center; padding-top: 30px; min-height: 300px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .inline-page .main > .container { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 60px 60px; } } .AlertDialog .Dialog-content { text-align: center; } .AlertDialog .Button-link { margin-bottom: 16px; } .how-to-redeem ol, .HowToRedeem ol { padding-left: 0; list-style: none; counter-reset: how-to-redeem-counter; } .how-to-redeem ol li, .HowToRedeem ol li { position: relative; margin: 0 auto 20px; } .how-to-redeem ol li:last-child, .HowToRedeem ol li:last-child { margin-bottom: 0; } .how-to-redeem ol li::before, .HowToRedeem ol li::before { font-size: 22px; font-size: 2.2rem; content: counter(how-to-redeem-counter); counter-increment: how-to-redeem-counter; border: 1px solid #111111; height: 30px; width: 30px; line-height: 30px; border-radius: 100%; margin-right: 6px; text-align: center; color: #111111; position: absolute; left: 0; top: 0; } .how-to-redeem ol li.no-illustration::before, .HowToRedeem ol li.no-illustration::before { left: 0; margin: auto; } .how-to-redeem ol li.no-number::before, .HowToRedeem ol li.no-number::before { display: none; } .how-to-redeem .subtitle, .HowToRedeem .subtitle { margin-bottom: 30px; } .how-to-redeem .pass-header, .how-to-redeem .step-circle, .HowToRedeem .pass-header, .HowToRedeem .step-circle { display: none; } .redemption-instruction, .RedemptionInstruction { margin: 10px 0 0; width: 100%; } .redemption-instruction .redemption-instruction-row, .redemption-instruction .RedemptionInstructionRow, .redemption-instruction .redemption-instruction-illustration, .redemption-instruction .RedemptionInstructionIllustration, .redemption-instruction .redemption-instruction-text, .redemption-instruction .RedemptionInstructionText, .RedemptionInstruction .redemption-instruction-row, .RedemptionInstruction .RedemptionInstructionRow, .RedemptionInstruction .redemption-instruction-illustration, .RedemptionInstruction .RedemptionInstructionIllustration, .RedemptionInstruction .redemption-instruction-text, .RedemptionInstruction .RedemptionInstructionText { display: block; margin: 0 auto; padding: 0; float: none; word-wrap: break-word; } .redemption-instruction .redemption-instruction-illustration, .redemption-instruction .RedemptionInstructionIllustration, .RedemptionInstruction .redemption-instruction-illustration, .RedemptionInstruction .RedemptionInstructionIllustration { min-height: 36px; margin-bottom: 5px; } .redemption-instruction .redemption-instruction-illustration img, .redemption-instruction .RedemptionInstructionIllustration img, .RedemptionInstruction .redemption-instruction-illustration img, .RedemptionInstruction .RedemptionInstructionIllustration img { width: 70px; height: auto; } .no-number .redemption-instruction .redemption-instruction-illustration, .no-number .redemption-instruction .RedemptionInstructionIllustration, .no-number .RedemptionInstruction .redemption-instruction-illustration, .no-number .RedemptionInstruction .RedemptionInstructionIllustration { min-height: 0; } .redemption-instruction .redemption-instruction-text, .redemption-instruction .RedemptionInstructionText, .RedemptionInstruction .redemption-instruction-text, .RedemptionInstruction .RedemptionInstructionText { margin: 0 10px; } .no-number .redemption-instruction .redemption-instruction-text, .no-number .redemption-instruction .RedemptionInstructionText, .no-number .RedemptionInstruction .redemption-instruction-text, .no-number .RedemptionInstruction .RedemptionInstructionText { padding-left: 0; margin-left: 0; } .redemption-instruction p, .RedemptionInstruction p { margin-top: 5px; } .search-term .btn { border: 1px solid #ffffff; font-weight: 300; } .search-term .btn.btn-light { color: #111111; border-color: #b7b7b7; } .search-term .btn.btn-light:hover:not([disabled]) { border-color: #b7b7b7; color: #0082ff; } .search-term .btn:hover:not([disabled]) { border-color: #ffffff; } .range-scale-fill { -webkit-transition: width 0.5s ease; transition: width 0.5s ease; } .rate-details, .RateDetailsDialogContent { color: #404040; text-align: left; } .rate-details .RateDetailsRateTitle, .RateDetailsDialogContent .RateDetailsRateTitle { font-size: 17px; font-size: 1.7rem; font-weight: 600; color: #111111; margin: 0 0 24px; } .rate-details .RateDetailsSubtitle, .RateDetailsDialogContent .RateDetailsSubtitle { font-size: 14px; font-size: 1.4rem; font-weight: 600; margin: 16px 0 8px; } .rate-details p, .RateDetailsDialogContent p { font-size: 12px; font-size: 1.2rem; margin: 0 0 8px; } .rate-details .day, .RateDetailsDialogContent .day { display: inline-block; width: 90px; } .RateDetails { color: #404040; text-align: left; } .RateDetails .AccessHours .title { display: none; } .RateDetails p { font-size: 12px; font-size: 1.2rem; margin: 0 0 8px; } .RateDetails .day { display: inline-block; width: 90px; } .RateDetailsRateTitle { font-size: 17px; font-size: 1.7rem; font-weight: 600; color: #111111; margin: 0 0 24px; } .RateDetailsSubtitle { font-size: 14px; font-size: 1.4rem; font-weight: 600; margin: 16px 0 8px; } .online-commuter-rate, .oversize-fee { display: block; margin: 5px 0 0; color: #404040; font-weight: 300; } .online-commuter-rate .Button-link, .oversize-fee .Button-link { font-weight: 300; } .disclaimers { font-weight: 300; } .disclaimers small { margin-top: 5px; display: block; } .disclaimers small:first-child { margin-top: 10px; } .disclaimers.well { margin-top: 20px; } .disclaimers.well small:first-child { margin-top: 0; } .disclaimers .Button-link { font-weight: 300; } .print-only { display: none !important; } .mobile .GDPRDialog .Dialog-content { padding-top: 10px; } @media print { * { -webkit-print-color-adjust: exact; } .print-only { display: block !important; } } .password_list_items { color: #5c7995; font-family: "Open Sans"; font-size: 12px; letter-spacing: 0; line-height: 17px; margin-bottom: 12px; } .password_list_items ul { list-style-type: disc; } .password_list_items ul li { display: list-item; list-style-position: inside; } @media (min-height: 700px) { body.modal-open { overflow: hidden; } } .container { position: relative; padding: 0 10px; min-width: 750px; } @media (min-width: 1400px) { .container { padding: 0; } } @media (min-width: 900px) { .container { width: 100%; } } .container-small { max-width: 880px; margin-left: auto; margin-right: auto; } .container-small:after { content: " "; display: block; clear: both; } @media (min-width: 900px) { .container-small { width: 100%; } } .main { position: relative; min-height: 250px; } .inline-page .main { padding-top: 64px; padding-bottom: 50px; } .navbar { position: absolute; top: 0; left: 0; width: 100%; height: 64px; z-index: 17; background-color: #0082ff; } .partner-page .navbar { background: transparent; } .navbar .Navigation.container { max-width: 1320px; } .navbar .Navigation .NavigationExpanded-item { font-weight: 400; } .navbar .brand a::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 50px; font-size: 5rem; color: #ffffff; position: absolute; top: 8px; left: 10px; } .navbar .nav ul { list-style: none; margin: 0; padding: 0; } .navbar .nav ul li { display: inline-block; vertical-align: top; margin-left: 16px; } .navbar .nav ul li:first-child { margin: 0; } .navbar .nav ul li.navbar-our-app { display: none; } @media (min-width: 1024px) { .navbar .nav ul li.navbar-our-app { display: inline-block; } } .navbar .nav .Button-link { font-size: 14px; font-size: 1.4rem; font-weight: 400; text-transform: none; height: 64px; line-height: 64px; color: #ffffff; padding: 0 10px; position: relative; display: inline-block; -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .navbar .nav .Button-link:hover { color: #f9f9f9; } .navbar .nav .Button-link.active, .navbar .nav .Button-link:hover { -webkit-box-shadow: 0 -4px 0 #1dbd71 inset; box-shadow: 0 -4px 0 #1dbd71 inset; } .navbar .nav .Button-link.our-app-link { padding-left: 33px; } .navbar .nav .Button-link#refer-link { padding-left: 37px; } .navbar .nav .Button-link .Icon { font-size: 19px; font-size: 1.9rem; position: absolute; left: 10px; margin: 0; top: 22px; } .navbar .nav .Button-link .icon-gift { top: 21px; } .nav-right { margin-right: 0; margin-left: 0; position: absolute; right: 10px; left: auto; top: 0; } @media (min-width: 1400px) { .nav-right { right: 0; } } .NavigationCollapsed-toggle { background-color: transparent !important; border: none !important; } .NavigationCollapsed-toggle .Icon { fill: #ffffff; } .inline-page .main .sh-modal { margin: 10px auto 0; opacity: 1; } .sh-modal .sh-modal-container { width: 552px; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.5); } .sh-modal .sh-modal-header { height: 43px; padding: 0 50px; } .sh-modal .sh-modal-header .title { font-size: 14px; font-size: 1.4rem; margin: 0 0 20px; line-height: 48px; } .sh-modal .sh-modal-header .title i { margin: -2px 2px 0 0; } .sh-modal .sh-modal-header.sh-modal-header-no-title { height: 30px; } .sh-modal .sh-modal-inner { position: relative; } .sh-modal .sh-modal-content { font-size: 14px; font-size: 1.4rem; overflow: auto; padding: 40px 50px 58px; max-height: 440px; } @media (min-height: 660px) { .sh-modal .sh-modal-content { max-height: 560px; } } @media (min-height: 700px) { .sh-modal .sh-modal-content { max-height: 800px; } } .sh-modal .sh-modal-content .title { font-size: 18.55px; font-size: 1.855rem; margin: 0 0 20px; font-weight: 600; } .sh-modal.slim-modal .sh-modal-container { width: 450px; } .sh-modal.wide-modal .sh-modal-container { width: 770px; } .sh-modal.x-wide-modal .sh-modal-container { width: 1120px; } .sh-modal.x-wide-modal .sh-modal-content { padding: 30px; } .sh-modal.ajax-modal .sh-modal-container { width: 800px; } .sh-modal.ajax-modal .sh-modal-inner { height: 100%; position: relative; overflow: hidden; } .sh-modal.ajax-modal .sh-modal-content { background-image: url("/static/assets/img/blue-circle-loader.gif"); font-size: 13px; font-size: 1.3rem; font-family: "Open Sans", sans-serif; padding-bottom: 40px; font-weight: 300; color: #404040; min-height: 300px; background-repeat: no-repeat; background-position: center center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .sh-modal.ajax-modal .sh-modal-content { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 60px 60px; } } @media (min-height: 700px) { .sh-modal.ajax-modal .sh-modal-content { height: 620px; } } .sh-modal.ajax-modal.loaded .sh-modal-content { background: none; } .sh-modal.ajax-modal .one-up, .sh-modal.ajax-modal .three-up { min-height: 160px; } .sh-modal.ajax-modal .row { margin-bottom: 20px; } .sh-modal.ajax-modal img { margin-right: 20px; } .sh-modal.ajax-modal a:not(.Button) { color: #111111; font-weight: 600; } .sh-modal.ajax-modal a:not(.Button):hover { color: #111111; } .sh-modal.ajax-modal .faqs p { font-size: 1.3rem; color: #111111; } .hero-search { display: inline-block; margin-top: 30px; padding: 6px; background-color: #ffffff; border-radius: 4px; } .hero-search fieldset { -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-before: 0; padding-block-start: 0; -webkit-padding-start: 0; padding-inline-start: 0; -webkit-padding-end: 0; padding-inline-end: 0; -webkit-padding-after: 0; padding-block-end: 0; border: none; } .hero-search .RadioButtonGroup, .hero-search .Textfield, .hero-search .Button { display: inline-block; vertical-align: top; } .hero-search .RadioButtonGroup { margin-right: 12px; } .hero-search .Button-secondary { border-color: #666666; } .Footer-toggle { display: none !important; border-radius: 0 !important; } .Footer-toggle .Icon { width: 12px; height: 12px; margin-left: 4px !important; fill: #ffffff; } .Footer-parked p { margin: 0; } .Footer-apps .Button { background: none; border: none; } .Footer-apps .Button:hover { background: none !important; } .Footer-copyright.container { margin-bottom: 0 !important; } .Footer-open .Footer-toggle { top: -42px; } .sprite-app-store-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -145px -82px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 108px; height: 32px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-app-store-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -142px -77px; width: 109px; height: 33px; } } .sprite-app-store { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px -90px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 135px; height: 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-app-store { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px -85px; width: 136px; height: 41px; } } .sprite-app-store-black { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px 0px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 140px; height: 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-app-store-black { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px 0px; width: 141px; height: 41px; } } .sprite-digicert { background-image: url("../img/sprites/sprite-common.png"); background-position: -192px -162px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 54px; height: 33px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-digicert { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -184px -151px; width: 55px; height: 34px; } } .sprite-google-play { background-image: url("../img/sprites/sprite-common.png"); background-position: -145px 0px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 135px; height: 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-google-play { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -142px 0px; width: 136px; height: 41px; } } .sprite-google-play-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -145px -45px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 108px; height: 32px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-google-play-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -142px -42px; width: 109px; height: 33px; } } .sprite-play-store-black { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px -45px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 140px; height: 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-play-store-black { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px -42px; width: 141px; height: 41px; } } .sprite-payments { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px -135px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 183px; height: 22px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payments { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px -127px; width: 184px; height: 23px; } } .sprite-payment-visa { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -140px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 34px; height: 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payment-visa { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -127px; width: 35px; height: 22px; } } .sprite-payment-american-express { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -62px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 35px; height: 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payment-american-express { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -56px; width: 36px; height: 22px; } } .sprite-payment-mastercard, .sprite-payment-maestro { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -114px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 34px; height: 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payment-mastercard, .sprite-payment-maestro { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -80px; width: 35px; height: 22px; } } .sprite-payment-discover { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -88px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 34px; height: 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payment-discover { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -103px; width: 35px; height: 22px; } } .sprite-payment-diners-club { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -35px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 35px; height: 22px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payment-diners-club { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -32px; width: 36px; height: 23px; } } .sprite-payment-paypal { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -166px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 33px; height: 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-payment-paypal { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -150px; width: 34px; height: 22px; } } .sprite-cc-visa { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px 0px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 44px; height: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-visa { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -189px -228px; width: 45px; height: 31px; } } .sprite-cc-visa-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -192px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 30px; height: 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-visa-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -185px -127px; width: 31px; height: 21px; } } .sprite-cc-american-express { background-image: url("../img/sprites/sprite-common.png"); background-position: -150px -244px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 44px; height: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-american-express { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -142px -228px; width: 45px; height: 31px; } } .sprite-cc-american-express-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -248px -244px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 30px; height: 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-american-express-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -241px -151px; width: 31px; height: 21px; } } .sprite-cc-mastercard, .sprite-cc-maestro { background-image: url("../img/sprites/sprite-common.png"); background-position: -199px -244px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 44px; height: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-mastercard, .sprite-cc-maestro { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px 0px; width: 45px; height: 31px; } } .sprite-cc-mastercard-small, .sprite-cc-maestro-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -188px -135px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 30px; height: 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-mastercard-small, .sprite-cc-maestro-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -217px -127px; width: 31px; height: 21px; } } .sprite-cc-discover { background-image: url("../img/sprites/sprite-common.png"); background-position: -50px -244px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 45px; height: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-discover { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -47px -228px; width: 46px; height: 31px; } } .sprite-cc-discover-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -223px -135px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 30px; height: 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-discover-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -174px; width: 31px; height: 21px; } } .sprite-cc-diners-club { background-image: url("../img/sprites/sprite-common.png"); background-position: -100px -244px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 45px; height: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-diners-club { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -95px -228px; width: 46px; height: 31px; } } .sprite-cc-diners-club-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -217px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 30px; height: 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-diners-club-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -196px; width: 31px; height: 21px; } } .sprite-cc-jcb-club { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px -244px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 45px; height: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-jcb-club { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px -228px; width: 46px; height: 31px; } } .sprite-cc-jcb-small { background-image: url("../img/sprites/sprite-common.png"); background-position: -285px -242px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 30px; height: 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-cc-jcb-small { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -280px -219px; width: 31px; height: 21px; } } .sprite-padlock { background-image: url("../img/sprites/sprite-common.png"); background-position: -258px -45px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 20px; height: 24px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-padlock { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -253px -42px; width: 21px; height: 25px; } } .sprite-powered-by-google { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px -221px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 144px; height: 18px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-powered-by-google { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px -208px; width: 145px; height: 19px; } } .sprite-import-gmail { background-image: url("../img/sprites/sprite-common.png"); background-position: -128px -162px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 59px; height: 54px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-import-gmail { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -123px -151px; width: 60px; height: 55px; } } .sprite-import-outlook { background-image: url("../img/sprites/sprite-common.png"); background-position: -64px -162px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 59px; height: 54px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-import-outlook { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: -61px -151px; width: 60px; height: 55px; } } .sprite-import-yahoo { background-image: url("../img/sprites/sprite-common.png"); background-position: 0px -162px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 59px; height: 54px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-import-yahoo { background-image: url("../img/sprites/sprite-common@2x.png"); background-size: 324px 259px; background-position: 0px -151px; width: 60px; height: 55px; } } .sprite-savings-large { background-image: url("../img/sprites/sprite-desktop.png"); background-position: -142px -74px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 62px; height: 62px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-savings-large { background-image: url("../img/sprites/sprite-desktop@2x.png"); background-size: 202px 140px; background-position: -72px -71px; width: 63px; height: 63px; } } .sprite-smiley-large { background-image: url("../img/sprites/sprite-desktop.png"); background-position: 0px -74px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 70px; height: 68px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-smiley-large { background-image: url("../img/sprites/sprite-desktop@2x.png"); background-size: 202px 140px; background-position: 0px -71px; width: 71px; height: 69px; } } .sprite-bolt-large { background-image: url("../img/sprites/sprite-desktop.png"); background-position: -75px -74px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 62px; height: 62px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-bolt-large { background-image: url("../img/sprites/sprite-desktop@2x.png"); background-size: 202px 140px; background-position: -136px -71px; width: 63px; height: 63px; } } .sprite-logo-blue { background-image: url("../img/sprites/sprite-desktop.png"); background-position: -115px 0px; background-repeat: no-repeat; overflow: hidden; display: inline-block; width: 90px; height: 57px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .sprite-logo-blue { background-image: url("../img/sprites/sprite-desktop@2x.png"); background-size: 202px 140px; background-position: -112px 0px; width: 91px; height: 58px; } } /* ----------------------------------------------------------------------------- * Used for 404 and 500 error pages \* ----------------------------------------------------------------------------- */ .error-page .main { background: #026bcf; } @media (max-width: 480px) { .error-page .hero-search-responsive { display: block !important; margin-top: 40px; } } @media (max-width: 480px) { .error-page .hero-search-responsive .Button { width: 95%; font-size: 16px; padding-top: 12px; padding-bottom: 12px; } } @media (max-width: 480px) { .error-page #Footer-container { display: none; } } .error-code-page .main { background: #ffffff; } .error-code-page .hero { background-image: url("http://res.cloudinary.com/spothero/image/upload/v1515712382/error-bg_uuzn3g.png"); background-repeat: no-repeat; background-size: 200px 200px; background-position: center 88px; height: 635px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .error-code-page .hero { background-image: url("http://res.cloudinary.com/spothero/image/upload/v1515712385/error-bg_2x_x4uliu.png"); } } .error-code-page .hero .content { margin-top: 228px; } .error-code-page .hero .error-code { font-size: 48px; font-size: 4.8rem; position: absolute; top: 152px; width: 100%; text-align: center; color: #ffffff; } .error-code-page .hero .error-message { font-size: 28px; font-size: 2.8rem; color: #404040; font-weight: 300; } @media (max-width: 480px) { .error-code-page .hero .error-message { font-size: 2rem; font-weight: 300; } } .error-code-page .hero .hero-search { margin-top: 60px; border: 1px solid #0082ff; padding: 15px; border-radius: 0; } @media (max-width: 480px) { .error-code-page .hero .hero-search { display: none; } } .error-code-page-no-search .hero { height: 503px; } .error-code-page-no-search .hero .content { margin-top: 228px; } .account-page > .container { margin: 80px auto 100px; } .account-page .tooltip { z-index: 15; } .account-page .action-ctas { float: right; } .account-page .action-item { margin: 0 10px 0 13px; } .account-page .LicensePlateList-license-plates .ListItem, .account-page .VehicleList-vehicles .ListItem { margin-bottom: 5px; } .account-page .LicensePlateList-license-plates .ListItem:last-child, .account-page .VehicleList-vehicles .ListItem:last-child { margin-bottom: 0; } .account-page .LicensePlateList-license-plates .has-name .license-plate-number, .account-page .VehicleList-vehicles .has-name .license-plate-number { display: block; } .account-page .CreditCardList .ListItem { margin-bottom: 8px; } .account-page .CreditCardList .ListItem i { margin-right: 4px; vertical-align: top; } .account-page .CreditCardList .MyAccountPaypalContainer { margin-top: 16px; } .account-page .CreditCardList .MyAccountPaypalContainer li:last-of-type { margin-bottom: 0; } .account-title { font-size: 16px; font-size: 1.6rem; margin: 0 auto 20px; text-transform: uppercase; } .account-navigation .Tabs { float: left; } .account-navigation .admin-links { float: right; margin-top: 5px; padding: 10px; color: #b7b7b7; } .account-container .no-current-reservations { text-align: center; } .account-container .no-current-reservations .Button { margin-right: 0; } .account-container .FormElement { margin-bottom: 1em; } .account-container .Table { width: 100%; } .account-container .Table .Button-link, .account-container .Table span { display: block; margin-top: 4px; } .account-container .Table .Button-link { font-weight: 400; } .account-container .Table .change-margin { margin-bottom: 4px; } .account-container .Table .danger-text { color: #E01438; } .account-container .Table .cancel-margin { margin-top: 0; } .account-container .Table .phone-data { margin-top: 10px; } .account-container .Table .phone-data { margin-bottom: 0; } .account-container .Table .process-time { font-size: 10px; font-size: 1rem; text-transform: none; color: #5c7996; font-weight: 400; font-size: 12px; } .account-container .Table span.capitalized { display: inline; margin-top: 0; text-transform: uppercase; color: #1dbd71; font-weight: 600; } .account-container .Table span.capitalized-warning { display: inline; margin-top: 0; text-transform: uppercase; color: #bf0202; font-weight: 600; } .account-container .Table span.capitalized-warning .process-time-warning { text-transform: none; color: #5c7996; font-weight: 400; font-size: 12px; } .account-container .Table span.text-muted { margin-top: 0; font-weight: 400; } .account-container .Table span.highlighted { display: inline; margin-top: 0; padding: 0 2px; } .account-container .Table span.filler { width: 47px; height: 33px; margin-right: 20px; } .account-container tr.refunded { color: #b7b7b7; } .account-container tr.refunded td { font-weight: 400; } .account-container td { width: 10%; margin-right: 2%; } .account-container td.col-wide { width: 20%; } .account-container td.col-thin { width: 8%; } .account-container td:first-child { width: 6%; } .account-container td:last-child { margin-right: 0; } .account-container td.vehicle-details { width: 14%; } .account-container td.vehicle-details p { margin-bottom: 0; } .account-container .Panel-loader { position: relative; min-height: 150px; background-position: center center; } .account-container .Tabs { margin-bottom: 25px; } .account-container .Tabs .Tab { display: inline-block; width: 150px; padding: 3px 0; background: none; } .account-container .subtitle { font-size: 12px; font-size: 1.2rem; font-weight: 300; margin: 0 0 10px; color: #404040; } .account-container .Button-link.download-csv { font-size: 13px; font-size: 1.3rem; position: absolute; z-index: 2; top: 14px; right: 14px; font-weight: 600; } .account-container .btn-add { font-size: 13px; font-size: 1.3rem; margin-top: 15px; font-weight: 600; } .account-container .btn-add i { font-size: 12px; font-size: 1.2rem; margin: 2px 2px 0 1px; vertical-align: top; } .account-container .account-email-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; } .account-container .social-icon { width: 1rem; margin-right: 0.5rem; } .account-container .account-email { margin-bottom: 0; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; overflow: hidden; } .account-container .account-email + .Button-link { margin-left: 1rem; } .account-container .default-margin { margin-bottom: 1rem; } .account-container .current-password-input { margin-bottom: 15px; } .account-container .Panel { position: relative; } .account-container .FormActions { margin-bottom: 10px; } .account-container .favorite { display: block; margin-bottom: 8px; } .account-container .favorite:last-child { margin-bottom: 0; } .account-container .favorite > div { display: inline-block; vertical-align: top; width: 70%; margin: 0 0 0 10px; } .account-container .favorite > div span { display: block; } .account-container .favorite .address { font-size: 11px; font-size: 1.1rem; margin: 5px 0 2px; color: #404040; } .account-container .balance-ctas button { display: block; margin: 10px 0; } .account-container .invite-friends, .account-container .invite-activity { display: block; margin: 6px 0; } .account-container .invite-friends i, .account-container .invite-activity i { margin-top: 0; vertical-align: middle; } .account-settings-left { width: 29.78723%; float: left; margin-right: 2.12766%; display: inline-block; } .account-settings-right { width: 68.08511%; float: right; margin-right: 0; } #sms-call-out-desktop { margin-top: 26px; padding: 24px 32px 24px 32px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 4px; border: 1px solid #cccccc; background: #ffffff; -webkit-box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); } #sms-call-out-desktop p { font-size: 14px; font-size: 1.4rem; margin: 16px 0; text-align: center; } #sms-call-out-desktop .Button { font-size: 16px; font-size: 1.6rem; border-radius: 20px; background-color: #1271EB; padding: 8px 32px; width: 100%; } #sms-call-out-desktop .Button:hover { background-color: #1d58f2; } #settings-view p:last-child { margin-bottom: 0; } #spothero-credits-view .credit-total { margin-top: 20px; color: #1dbd71; } #spothero-credits-view p { font-weight: 300; margin: 0; line-height: 1; } #spothero-credits-view .Icon { width: 20px; text-align: center; } #spothero-credits-view .Icon.icon-dollars { line-height: 0.6; margin-top: 1px; } #spothero-credits-view .Icon.icon-credit-activity-list { margin-top: 1px; } #spothero-credits-view .new-promo-code-input { width: 385px; } .account-reservations { position: relative; } .business-profile-tip { font-size: 13px; font-size: 1.3rem; background-color: #002d5b; color: #ffffff; padding: 16px 24px; margin-bottom: 48px; border-radius: 4px; } .business-profile-tip .tip-title { padding-right: 5px; } .business-profile-tip a { color: #ffffff; text-decoration: underline; } .business-profile-tip a:hover, .business-profile-tip a:focus, .business-profile-tip a:active { color: #cccccc; } .account-reservations-warnings { font-size: 15px; font-size: 1.5rem; display: none; margin: 0 0 5px; color: #ffffff; font-weight: 600; } .account-reservations-warnings p { margin: 0; padding: 14px 18px; background-color: #111111; } .account-reservations-warnings i { font-size: 30px; font-size: 3rem; color: #fff000; margin-right: 10px; } .account-reservations-warnings::after { content: ""; position: relative; margin: 0 0 0 59%; border-width: 8px 8px 0; /* vary these values to change the angle of the vertex */ border-style: solid; border-color: #111111 transparent; display: block; width: 0; } .modal-cancel-reservation { text-align: center; } .modal-cancel-reservation .loading { background-image: url("/static/assets/img/blue-circle-loader.gif"); margin: 0 auto 20px; height: 40px; width: 40px; background-size: 40px 40px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .modal-cancel-reservation .loading { background-image: url("/static/assets/img/blue-circle-loader@2x.gif"); background-size: 40px 40px; } } .modal-cancel-reservation.display-confirmation .change-reservation-cancel { display: none; } .modal-cancel-reservation .CreditCardSelect { text-align: left; } .modal-cancel-reservation .change-reservation-cancel { margin-top: 20px; } .modal-cancel-reservation .step-2 { display: none; } .modal-cancel-reservation .step-3 { display: none; } .modal-cancel-reservation .step-3 p { color: #1dbd71; } .modal-confirm-removal { text-align: center; } .modal-confirm-removal .removal-confirm { display: block; margin: 20px auto; } .account-reservations-page .pagination { text-align: center; margin-top: 40px; padding: 0 16px; } .account-reservations-page .pagination .Button, .account-reservations-page .pagination .Button-link { margin: 0 0 8px; } .cancelSubscriptionConfirmation .Dialog-container { border: none; background: none; } .cancelSubscriptionConfirmation .Dialog-inner { border: 1px solid #cbd4de; border-radius: 8px; background: white; } .cancelSubscriptionConfirmation .Dialog-title { display: -webkit-box; display: -ms-flexbox; display: flex; background: #ffffff; padding: 0 16px; border-radius: 8px; } .cancelSubscriptionConfirmation .Dialog-title h3 { font-size: 20px; text-transform: none; } .cancelSubscriptionConfirmation .Dialog-close { top: 6px; } .cancelSubscriptionConfirmation .Dialog-close i { font-size: 12px; } .cancelSubscriptionConfirmation .Dialog-content { padding: 0 16px 10px 16px; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #111111; background: #faf0bd; border-radius: 4px; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content .Icon { color: #ffffff; font-size: 18px; border-radius: 50%; background: #e19706; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content span { padding: 5px 0 5px 10px; font-weight: 400; font-size: 14px; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content-success .Alert-content { background: #d3f7ef; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content-success .Icon { background: #1aa764; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content-error .Alert-content { background: #FDEEF3; } .cancelSubscriptionConfirmation .Dialog-content .Alert-content-error .Icon { background: #E01438; } .cancelSubscriptionConfirmation .Dialog-content .confirmation-text { font-weight: 600; line-height: 22px; padding: 7px 20px 20px 20px; } .cancelSubscriptionConfirmation .Dialog-footer { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 12px 16px; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; border-top: 1px solid #cbd4de; gap: 16px; } .cancelSubscriptionConfirmation .Dialog-footer button { border-radius: 42px; padding: 8px 24px 8px 24px; font-weight: 600; } .cancelSubscriptionConfirmation .Dialog-footer .Button-secondary-danger { border-color: #E01438; color: #E01438; } .cancelSubscriptionConfirmation .Dialog-footer .Button-secondary-danger span { color: #E01438; } .cancelSubscriptionConfirmation .Dialog-footer .Button-secondary-danger:hover { border-color: #E01438; } /** * Note: the root picker element should *NOT* be styled more than what’s here. */ .picker { font-size: 16px; text-align: left; line-height: 1.2; color: #000000; position: absolute; z-index: 10000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** * The picker input element. */ .picker__input { cursor: default; } /** * When the picker is opened, the input element is “activated”. */ .picker__input.picker__input--active { border-color: #0089ec; } /** * The holder is the only “scrollable” top-level container element. */ .picker__holder { width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .picker { width: 100%; } /** * The holder is the base of the picker. */ .picker__holder { position: absolute; background: #ffffff; border: 1px solid #000; border-top-width: 0; border-bottom-width: 0; border-radius: 0 0 2px 2px; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 176px; max-width: 466px; max-height: 0; outline: none; opacity: 0; -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg); transform: translateY(-1em) perspective(600px) rotateX(10deg); -webkit-transition: opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s, -webkit-transform 0.15s ease-out; transition: opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s, -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s, -webkit-transform 0.15s ease-out; } /** * The frame and wrap work together to ensure that * clicks within the picker don’t reach the holder. */ .picker__frame { padding: 1px; } .picker__wrap { margin: -1px; } /** * When the picker opens... */ .picker--opened .picker__holder { max-height: 25em; opacity: 1; border-top-width: 1px; border-bottom-width: 1px; -webkit-transform: translateY(0) perspective(600px) rotateX(0); transform: translateY(0) perspective(600px) rotateX(0); -webkit-transition: opacity 0.15s ease-out, max-height 0s, border-width 0s, -webkit-transform 0.15s ease-out; transition: opacity 0.15s ease-out, max-height 0s, border-width 0s, -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s, -webkit-transform 0.15s ease-out; -webkit-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12); box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12); } /** * The picker box. */ .picker__box { padding: 0 1em; } /** * The header containing the month and year stuff. */ .picker__header { text-align: center; position: relative; margin-top: .75em; } /** * The month and year labels. */ .picker__month, .picker__year { font-weight: 500; display: inline-block; margin-left: .25em; margin-right: .25em; } .picker__year { color: #999999; font-size: .8em; font-style: italic; } /** * The month and year selectors. */ .picker__select--month, .picker__select--year { border: 1px solid #b7b7b7; height: 2em; padding: .5em; margin-left: .25em; margin-right: .25em; } @media (min-width: 24.5em) { .picker__select--month, .picker__select--year { margin-top: -0.5em; } } .picker__select--month { width: 35%; } .picker__select--year { width: 22.5%; } .picker__select--month:focus, .picker__select--year:focus { border-color: #0089ec; } /** * The month navigation buttons. */ .picker__nav--prev, .picker__nav--next { position: absolute; padding: .5em 1.25em; width: 1em; height: 1em; -webkit-box-sizing: content-box; box-sizing: content-box; top: -0.25em; } @media (min-width: 24.5em) { .picker__nav--prev, .picker__nav--next { top: -0.33em; } } .picker__nav--prev { left: -1em; padding-right: 1.25em; } @media (min-width: 24.5em) { .picker__nav--prev { padding-right: 1.5em; } } .picker__nav--next { right: -1em; padding-left: 1.25em; } @media (min-width: 24.5em) { .picker__nav--next { padding-left: 1.5em; } } .picker__nav--prev:before, .picker__nav--next:before { content: " "; border-top: .5em solid transparent; border-bottom: .5em solid transparent; border-right: 0.75em solid #000000; width: 0; height: 0; display: block; margin: 0 auto; color: #0082ff; } .picker__nav--next:before { border-right: 0; border-left: 0.75em solid #000000; } .picker__nav--prev:hover, .picker__nav--next:hover { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover { cursor: default; background: none; border-right-color: #f5f5f5; border-left-color: #f5f5f5; } /** * The calendar table of dates */ .picker__table { text-align: center; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: inherit; width: 100%; margin-top: .75em; margin-bottom: .5em; } @media (min-height: 33.875em) { .picker__table { margin-bottom: .75em; } } .picker__table td { margin: 0; padding: 0; } /** * The weekday labels */ .picker__weekday { width: 14.285714286%; font-size: .75em; padding-bottom: .25em; color: #999999; font-weight: 500; /* Increase the spacing a tad*/ } @media (min-height: 33.875em) { .picker__weekday { padding-bottom: .5em; } } /** * The days on the calendar */ .picker__day { padding: .3125em 0; font-weight: 200; border: 1px solid transparent; } .picker__day--today { position: relative; } .picker__day--today:before { content: " "; position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-top: 0.5em solid #0059bc; border-left: .5em solid transparent; } .picker__day--disabled:before { border-top-color: #aaaaaa; } .picker__day--outfocus { color: #dddddd; } .picker__day--infocus:hover, .picker__day--outfocus:hover { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__day--highlighted { border-color: #0089ec; } .picker__day--highlighted:hover, .picker--focused .picker__day--highlighted { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background: #0089ec; color: #ffffff; } .picker__day--disabled, .picker__day--disabled:hover { background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; } .picker__day--highlighted.picker__day--disabled, .picker__day--highlighted.picker__day--disabled:hover { background: #bbbbbb; } /** * The footer containing the "today" and "clear" buttons. */ .picker__footer { text-align: center; } .picker__button--today, .picker__button--clear { border: 1px solid #ffffff; background: #ffffff; font-size: .8em; padding: .66em 0; font-weight: bold; width: 50%; display: inline-block; vertical-align: bottom; } .picker__button--today:hover, .picker__button--clear:hover { cursor: pointer; color: #000000; background: #b1dcfb; border-bottom-color: #b1dcfb; } .picker__button--today:focus, .picker__button--clear:focus { background: #b1dcfb; border-color: #0089ec; outline: none; } .picker__button--today:before, .picker__button--clear:before { position: relative; display: inline-block; height: 0; } .picker__button--today:before { content: " "; margin-right: .45em; top: -0.05em; width: 0; border-top: 0.66em solid #0059bc; border-left: .66em solid transparent; } .picker__button--clear:before { content: "\D7"; margin-right: .35em; top: -0.1em; color: #ee2200; vertical-align: top; font-size: 1.1em; } /** * The list of times. */ .picker__list { list-style: none; padding: 0.75em 0 4.2em; margin: 0; } /** * The times on the clock. */ .picker__list-item { border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; margin-bottom: -1px; position: relative; background: #ffffff; padding: .75em 1.25em; } @media (min-height: 46.75em) { .picker__list-item { padding: .5em 1em; } } /* Hovered time*/ .picker__list-item:hover { cursor: pointer; color: #000000; background: #b1dcfb; border-color: #0089ec; z-index: 10; } /* Highlighted and hovered/focused time*/ .picker__list-item--highlighted { border-color: #0089ec; z-index: 10; } .picker__list-item--highlighted:hover, .picker--focused .picker__list-item--highlighted { cursor: pointer; color: #000000; background: #b1dcfb; } /* Selected and hovered/focused time*/ .picker__list-item--selected, .picker__list-item--selected:hover, .picker--focused .picker__list-item--selected { background: #0089ec; color: #ffffff; z-index: 10; } /* Disabled time*/ .picker__list-item--disabled, .picker__list-item--disabled:hover, .picker--focused .picker__list-item--disabled { background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; border-color: #dddddd; z-index: auto; } /** * The clear button */ .picker--time .picker__button--clear { display: block; width: 80%; margin: 1em auto 0; padding: 1em 1.25em; background: none; border: 0; font-weight: 500; font-size: .67em; text-align: center; text-transform: uppercase; color: #666; } .picker--time .picker__button--clear:hover, .picker--time .picker__button--clear:focus { color: #000000; background: #b1dcfb; background: #ee2200; border-color: #ee2200; cursor: pointer; color: #ffffff; outline: none; } .picker--time .picker__button--clear:before { top: -0.25em; color: #666; font-size: 1.25em; font-weight: bold; } .picker--time .picker__button--clear:hover:before, .picker--time .picker__button--clear:focus:before { color: #ffffff; } /** * Note: the root picker element should __NOT__ be styled * more than what’s here. Style the `.picker__holder` instead. */ .picker--time { min-width: 256px; max-width: 320px; } /** * The holder is the base of the picker. */ .picker--time .picker__holder { background: #f2f2f2; } @media (min-height: 40.125em) { .picker--time .picker__holder { font-size: .875em; } } /** * The box contains the list of times. */ .picker--time .picker__box { padding: 0; position: relative; } .picker { top: 100%; width: 250px; font-size: 12px; font-size: 1.2rem; } .picker__holder { width: 250px; background: #f2f2f2; min-width: 0; } .picker--time .picker__holder { width: 100px; font-size: 12px; font-size: 1.2rem; } .picker__box { padding: 0; } .picker__header { background: #fff; padding: 0 10px; margin: 0; height: 41px; line-height: 41px; } .picker__weekday { font-size: 12px; font-size: 1.2rem; font-weight: 400; color: #404040; } .picker__table { width: 220px; margin: 15px; font-weight: 400; font-size: 12px; font-size: 1.2rem; } .picker__table thead th { padding-bottom: 15px; } .picker__table td { padding: 1px; } .picker__month, .picker__year { font-size: 12px; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; color: #000; font-style: normal; } .picker__nav--next, .picker__nav--prev { padding: 7px 0 0 0; top: 8px; width: 26px; height: 26px; background: #f2f2f2; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; } .picker__nav--next:hover, .picker__nav--prev:hover { background: #ddd; } .picker__nav--next { right: 15px; } .picker__nav--next:before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: none; height: auto; width: auto; } .picker__nav--next.picker__nav--disabled:before { color: #999; } .picker__nav--prev { left: 15px; } .picker__nav--prev:before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: none; height: auto; width: auto; } .picker__nav--prev.picker__nav--disabled:before { color: #999; } .picker__nav--disabled.picker__nav--next:hover, .picker__nav--disabled.picker__nav--prev:hover { background: #f2f2f2; } .picker__day { font-weight: 400; border: none; cursor: pointer; } .picker__day--infocus { font-weight: 400; } .picker__day--infocus { background: #fff; color: #404040; } .picker__day--outfocus { background: #fff; color: #404040; } .picker__day--infocus:hover, .picker__day--outfocus:hover { background: #d2dffe; color: #fff; } .picker__day--disabled { background: none; color: #b7b7b7; cursor: default; } .picker__day--disabled:hover { background: none; color: #b7b7b7; } .picker__day--today { color: #0082ff; } .picker__day--today:after, .picker__day--today:before { display: none; } .picker__day--highlighted { color: #404040; background: #fff; } .picker__day--highlighted.picker__day--outfocus, .picker__day--highlighted.picker__day--disabled { background: none; color: #b7b7b7; } .picker__day--selected { background: #0082ff; color: #fff; } .picker__footer { display: none; } .picker__list-item { padding: 8px 10px; font-weight: 400; } .hero { background-repeat: no-repeat; background-position: center bottom; display: table; width: 100%; height: 410px; text-align: center; } .hero .content-wrap { display: table-cell; vertical-align: middle; } .hero .content h1, .hero .content h2 { margin-bottom: 10px; color: #ffffff; } .AccessHours .hours-of-operation-period { margin: 0; } .AccessHours .hours-of-operation-period span { text-transform: capitalize; } .AccessHours .hours-of-operation-period .day { display: inline-block; width: 90px; } .CreditCardSelect .RadioGroup label { min-width: 75px; } .CreditCardSelect .RadioGroup .Sprite { position: relative; left: auto; top: auto; bottom: auto; right: auto; margin-right: 4px; vertical-align: top; } .CreditCardSelect .RadioGroup .Radio-lg .Sprite { margin-right: 8px; } .AddNewCardForm { margin-top: 20px; } .AddNewCardForm .sprite-payments { margin-bottom: 15px; } .AddNewCardForm .FormGroup:last-child { margin-bottom: 1em; } .AddNewCardForm .FormElement { width: 50%; margin-bottom: 0; } .AddNewCardForm .FormElement.Select { width: 85px; } .AddNewCardForm-expiration-year .Label-required { visibility: hidden; } .AddNewVehicleForm { margin-top: 20px; max-width: 350px; } .AddNewVehicleForm .FormGroup { margin-bottom: 0; background-color: #f2f2f2; padding: 1em 18px 0; border-radius: 5px; } .AddNewVehicleForm .FormGroup .FormElement { margin-bottom: 1em; } .AddNewVehicleForm .FormGroup .AutoSuggestInput > .FormElement { margin-bottom: 0; } .AddNewVehicleForm .Select-select { margin: 0; } .AddNewVehicleForm .FormActions { margin-top: 15px; } .AddNewVehicleForm .FormActions .Button { border-radius: 20px; } .AddNewVehicleForm .Checkbox, .AddNewVehicleForm .Radio { margin-top: 10px; } .AddNewLicensePlateForm { margin-top: 20px; } .AddNewLicensePlateForm .Textfield-input { width: 300px; margin: 0; } .AddNewLicensePlateForm .LicensePlate-number .Textfield-input { text-transform: uppercase; } .AddNewLicensePlateForm .FormGroup { margin-bottom: 6px; } .AddNewLicensePlateForm .FormActions { margin-top: 15px; } .MissingDetailsDialog .AddNewLicensePlateForm { margin-top: 10px; } .MissingDetailsDialog .AddNewLicensePlateForm .Textfield { width: 48%; margin-right: 2%; } .MissingDetailsDialog .AddNewLicensePlateForm .Textfield:last-child { margin-right: 0; } .MissingDetailsDialog .AddNewLicensePlateForm .Textfield .Textfield-input { width: 100%; } .one-up { text-align: center; position: relative; min-height: 200px; } .one-up .item { display: inline-block; vertical-align: top; width: auto; } .one-up .Carousel-previous, .one-up .Carousel-next { font-size: 40px; font-size: 4rem; width: 40px; height: 40px; background: none; margin-top: -20px; color: #111111; } .three-up { text-align: center; position: relative; min-height: 200px; } .three-up .item { display: inline-block; vertical-align: top; margin-left: 3%; width: 30%; } @media (min-width: 1400px) { .three-up .item { margin-left: 20px; width: 321px; } } .three-up .item:first-child { margin-left: 0; } .three-up.as-carousel .item { width: 260px; } .access-hours { font-weight: 400; color: #111111; width: 60%; margin: 20px 0 0; } .access-hours span { display: inline-block; width: 49%; text-align: left; } /** * ------------------------- * @section Modals * ------------------------- */ .sh-modal { position: fixed; left: 0; top: 0; height: 100%; width: 100%; text-align: center; z-index: 20; white-space: nowrap; opacity: 0; -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sh-modal::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; letter-spacing: -0.25em; } .sh-modal.sh-modal-open { opacity: 1; } .inline-page .main .sh-modal { display: block; position: relative; z-index: 1; height: auto; background: none; } .inline-page .main .sh-modal .sh-modal-container { background: none; padding: 0; } .inline-page .main .sh-modal .sh-modal-inner { -webkit-box-shadow: none; box-shadow: none; } .inline-page .main .sh-modal::before, .inline-page .main .sh-modal .close { display: none; } .sh-modal .sh-modal-container { display: inline-block; vertical-align: middle; text-align: left; background: rgba(255, 255, 255, 0.5); white-space: normal; } .sh-modal .sh-modal-inner { -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); background: #ffffff; } .sh-modal .sh-modal-header { background: #f2f2f2; position: relative; } .sh-modal .sh-modal-header .title { font-weight: 600; text-transform: uppercase; margin: 0; } .sh-modal .sh-modal-header .close { position: absolute; top: 10px; right: 16px; color: #111111; } .sh-modal .sh-modal-header.sh-modal-header-no-title { background: #ffffff; } .sh-modal .sh-modal-content { position: relative; overflow: auto; -webkit-transition: height 0.25s ease; transition: height 0.25s ease; } .sh-modal.sh-modal-no-padding-bottom .sh-modal-content { padding-bottom: 0; } .sh-modal.sh-modal-no-padding-top .sh-modal-content { padding-top: 10px; } .sh-modal.sh-modal-no-padding .sh-modal-content { padding: 0; } .sh-modal.sh-modal-flush-sides .sh-modal-content { padding-right: 0; padding-left: 0; } .confirmation .sh-modal-content .title { font-size: 18.57px; font-size: 1.857rem; margin: 0; } .confirmation .sh-modal-content .title::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 10px; } .confirmation.success .sh-modal-content .title { color: #1dbd71; } .confirmation.error .sh-modal-content .title { color: #eb0029; } .confirmation.error .sh-modal-content .title::before { content: ""; font-family: "icomoon"; font-style: normal; font-weight: normal; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .modal-landing-page .main { margin: 40px 0; } .modal-landing-page .title { font-size: 38px; font-size: 3.8rem; margin: 0 0 60px; text-align: center; font-weight: 400; text-transform: uppercase; line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .new-user-modal.sh-modal .title { margin-bottom: 30px; } .new-user-modal.sh-modal .feature { position: relative; margin-bottom: 20px; } .new-user-modal.sh-modal .feature:last-child { margin-bottom: 0; } .new-user-modal.sh-modal .feature .image { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 80px; height: 100px; } .new-user-modal.sh-modal .feature .image i { font-size: 80px; font-size: 8rem; } .new-user-modal.sh-modal .feature .content { margin-left: 120px; } .new-user-modal.sh-modal .feature .subtitle { font-size: 20px; font-size: 2rem; margin-bottom: 0; } .how-to-redeem .redemption-instruction-illustration, .how-to-redeem .RedemptionInstructionIllustration, .HowToRedeem .redemption-instruction-illustration, .HowToRedeem .RedemptionInstructionIllustration { padding-left: 42px; float: left; margin-right: 10px; } .no-number .how-to-redeem .redemption-instruction-illustration, .no-number .how-to-redeem .RedemptionInstructionIllustration, .no-number .HowToRedeem .redemption-instruction-illustration, .no-number .HowToRedeem .RedemptionInstructionIllustration { padding-left: 0; } .how-to-redeem .redemption-instruction-text, .how-to-redeem .RedemptionInstructionText, .HowToRedeem .redemption-instruction-text, .HowToRedeem .RedemptionInstructionText { padding: 4px 0 0 36px; } .no-number .how-to-redeem .redemption-instruction-text, .no-number .how-to-redeem .RedemptionInstructionText, .no-number .HowToRedeem .redemption-instruction-text, .no-number .HowToRedeem .RedemptionInstructionText { padding-left: 0; } .how-to-redeem .List-ordered, .HowToRedeem .List-ordered { padding-left: 0; } .WhyTimeExtendedDialogContent { color: #404040; margin-top: 26px; } .search-page .WhyTimeExtendedDialogContent { padding: 24px 50px 110px; } .WhyTimeExtendedDialogContent p { font-size: 14px; font-size: 1.4rem; margin-top: 0; } .WhyTimeExtendedDialog .Dialog-content, .WhyTimeExtendedDialogContent .Dialog-content { color: #404040; padding: 24px 50px 110px; } .WhyTimeExtendedDialog .allowed-guide, .WhyTimeExtendedDialogContent .allowed-guide { height: 12px; width: 90%; margin: 15px auto 8px; border-style: solid; border-color: #111111; border-width: 1px 1px 0; position: relative; } .WhyTimeExtendedDialog .allowed-guide .guide, .WhyTimeExtendedDialogContent .allowed-guide .guide { position: absolute; left: 50%; top: -7px; height: 7px; width: 1px; border-left: 1px solid #111111; } .WhyTimeExtendedDialog .allowed-labels, .WhyTimeExtendedDialogContent .allowed-labels { overflow: hidden; width: 110%; margin-left: -5%; } .WhyTimeExtendedDialog .allowed-labels .allowed-label, .WhyTimeExtendedDialogContent .allowed-labels .allowed-label { font-size: 11px; font-size: 1.1rem; text-align: center; } .WhyTimeExtendedDialog .allowed-labels .allowed-label-start, .WhyTimeExtendedDialogContent .allowed-labels .allowed-label-start { float: left; } .WhyTimeExtendedDialog .allowed-labels .allowed-label-end, .WhyTimeExtendedDialogContent .allowed-labels .allowed-label-end { float: right; } .WhyTimeExtendedDialog .range-scale, .WhyTimeExtendedDialogContent .range-scale { border-radius: 2px; border: 1px solid #b7b7b7; height: 21px; width: 100%; margin: 10px 0; position: relative; } .WhyTimeExtendedDialog .range-scale .allowed-fill, .WhyTimeExtendedDialogContent .range-scale .allowed-fill { position: absolute; background: #0082ff; width: 100%; left: 0; top: 0; height: 100%; } .WhyTimeExtendedDialog .range-scale .requested-fill, .WhyTimeExtendedDialogContent .range-scale .requested-fill { position: absolute; width: 20%; height: 100%; left: 60%; background: #d2dffe; border-style: solid; border-color: #ffffff; border-width: 0 1px; } .WhyTimeExtendedDialog .range-scale .requested-fill .requested-label, .WhyTimeExtendedDialogContent .range-scale .requested-fill .requested-label { font-size: 11px; font-size: 1.1rem; text-align: center; position: absolute; width: 80px; top: 28px; } .WhyTimeExtendedDialog .range-scale .requested-fill .requested-label-start, .WhyTimeExtendedDialogContent .range-scale .requested-fill .requested-label-start { left: 0; margin-left: -40px; } .WhyTimeExtendedDialog .range-scale .requested-fill .requested-label-end, .WhyTimeExtendedDialogContent .range-scale .requested-fill .requested-label-end { right: 0; margin-right: -40px; } .WhyTimeExtendedDialog .Tooltip, .WhyTimeExtendedDialogContent .Tooltip { top: 60px; width: 156px; left: 50%; margin-left: -78px; } .did-you-mean-modal .sh-modal-content { padding-top: 25px; } .did-you-mean-modal .title { text-align: center; } .account-email-modal .button-wrapper { text-align: center; } .authentication-modal .sh-modal-container { width: 436px; } .authentication-modal .social-login { margin-bottom: 26px; } .authentication-modal .social-login small { font-size: 13px; font-size: 1.3rem; display: block; margin-top: 8px; font-weight: 300; } .authentication-modal .facebook-login { margin-bottom: 16px; } .authentication-modal .facebook-login.only-auth { margin-bottom: 0; } .authentication-modal .facebook-login:not(.Button-disabled) { background: #3b5998; border-color: #3b5998; } .authentication-modal .facebook-login:not(.Button-disabled):hover { background: #344e86; border-color: #3b5998; } .authentication-modal .ButtonGroup { position: relative; } .authentication-modal .password-input { width: 100%; } .authentication-modal .show-password { position: absolute; right: 0; top: 0; } .authentication-modal .forgot-password { float: right; } .authentication-modal .controls { text-align: center; } .authentication-modal .controls > div { display: block; margin: 12px 0; } .authentication-modal .controls > div.Checkbox, .authentication-modal .controls > div.Radio { display: inline-block; margin: 0; } .authentication-modal .controls .Button-link { margin-top: 1em; } .authentication-modal .controls small { display: block; margin-top: 20px; } .authentication-modal .ButtonGroup-content { width: 90px; white-space: nowrap; padding-top: 9px; } .authentication-modal .registration-use-promo-code { font-size: 12px; font-size: 1.2rem; margin: 10px 0 20px; display: block; } .inline-page .main .authentication-modal .sh-modal-container { width: 416px; } .inline-page .main .authentication-modal .sh-modal-content { padding: 40px 50px 46px; height: auto; max-height: none; } .authentication-modal .g-recaptcha { width: 304px; margin: 0 auto; } .authentication-modal #g-recaptcha-error { width: 150px; margin: 5px auto; } .faqs { padding-bottom: 30px; } .faqs .half { padding-right: 5px; } #terms { margin-top: 10px; color: #404040; } .twitter-reviews { width: 520px; margin: 0 auto 50px; } .StarRating { margin: 0 0 6px; } .account-credit-activity .Table { width: 410px; margin-left: 10px; } .account-credit-activity .Table th:last-child { text-align: right; } .account-credit-activity .Table th.date { width: 90px; } .account-credit-activity .Table tr { border: none; } .account-credit-activity .Table td { padding: 6px 0; } .account-credit-activity .Table td.date { width: 90px; } .account-credit-activity .Table td.description { width: 220px; } .account-credit-activity .Table td.amount { width: 100px; text-align: right; color: #1dbd71; } .account-credit-activity .Table td.amount.negative { color: #eb0029; } .account-credit-activity .Table.scrollable { width: 420px; } .account-credit-activity .Table.scrollable th.date { display: inline-block; width: 90px; } .account-credit-activity .Table.scrollable th.description { display: inline-block; width: 210px; } .account-credit-activity .Table.scrollable th.amount { display: inline-block; width: 100px; } .account-credit-activity .Table.scrollable td.description { width: 260px; } .account-credit-activity .inner { max-height: 210px; overflow: auto; margin-top: 20px; } .account-credit-activity .inner .Panel-loader { position: relative; width: 400px; height: 200px; background-position: center center; } .account-credit-activity .available-balance { margin-top: 20px; padding: 10px; background: #f2f2f2; } .account-credit-activity .available-balance p { font-size: 12px; font-size: 1.2rem; float: left; margin: 5px 0 0; text-transform: uppercase; font-weight: 600; } .account-credit-activity .available-balance p.balance { font-size: 18px; font-size: 1.8rem; float: right; margin-top: 0; color: #1dbd71; } .account-credit-activity .available-balance.scrollable .balance { margin-right: 10px; } .account-referral-status > .Table { width: 430px; } .account-referral-status > .Table th.email { width: 180px; min-width: 180px; } .account-referral-status > .Table th.status { width: 100px; min-width: 100px; } .account-referral-status > .Table th.action { width: 140px; min-width: 140px; padding-left: 10px; } .account-referral-status > .Table > td { padding: 0; } .account-referral-status > .Table td.email { width: 180px; min-width: 180px; } .account-referral-status > .Table td.status { width: 100px; min-width: 100px; } .account-referral-status > .Table td.status.success { color: #1dbd71; } .account-referral-status > .Table td.action { width: 140px; min-width: 140px; padding-left: 10px; } .account-referral-status > .Table.scrollable td.action { width: 130px; min-width: 130px; } .account-referral-status .inner { max-height: 230px; overflow: auto; } .account-referral-status .inner .Panel-loader { position: relative; width: 400px; height: 200px; background-position: center center; } .account-referral-status .referral-status-ctas { margin-left: 280px; } .account-referral-status .select-all { display: block; margin-bottom: 15px; }