/**
 * Sprite utility definitions and mixins
 */
.icon-spacer {
  background-image: none !important; }

/**
 * Sprite helpers transform grid coordinates to background offset positions for a given grid size.
 *
 * @param col     (int) column number (from 0)
 * @param row     (int) row number (from 0)
 * @param size-x  (css dimension) sprite width, must specify units
 * @param size-y  (css dimension) sprite height, must specify units
 */
/**
 * All icons receive the styles of the `i` tag with a base class of `.icon-` and are then given a unique class to add
 * width, height, and background-position.
 *
 * @example <i class="icon-inbox"></i>.
 *
 * For the white version of the icons, just add the .icon-white class.

 * @example <i class="icon-inbox icon-white"></i>
 */
/* The default non-media query style for the background */
/* apply default background color to body and CSS to the target class */
body {
  background-color: #271d36; }

.background-default {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -99;
  background-size: 1500px;
  background-color: #271d36 !important;
  background-image: url(../images/backgrounds/hearthstone-background.b5b38274.jpg) !important;
  background-position: center 0px !important;
  background-repeat: no-repeat !important;
  min-width: 320px; }

.nav-client #nav-client-bar {
  background-size: 1500px;
  background-image: url(../images/backgrounds/hearthstone-background.b5b38274.jpg) !important;
  background-position: center 0 !important; }

.product-tab {
  position: absolute;
  width: 100%;
  padding: 0 5%; }
  .product-tab .product-caret {
    z-index: 1000;
    position: relative;
    width: 25%;
    transition: left 0.3s ease-in-out;
    /* stroke */
    /* fill */ }
    .product-tab .product-caret:before, .product-tab .product-caret:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-top: 0;
      visibility: inherit; }
    .product-tab .product-caret:before {
      top: 0;
      left: 0;
      right: 0;
      border-bottom-color: rgba(255, 255, 255, 0.12);
      border-width: 0;
      margin: 0 auto; }
    .product-tab .product-caret:after {
      top: 0;
      left: 0;
      right: 0;
      border-bottom-color: #171120;
      border-width: 0;
      margin: 0 auto; }
  .product-tab[class^="active-"] .product-caret,
  .product-tab[class*=" active-"] .product-caret {
    /* stroke */
    /* fill */ }
    .product-tab[class^="active-"] .product-caret:before,
    .product-tab[class*=" active-"] .product-caret:before {
      top: -28px;
      border-width: 28px; }
    .product-tab[class^="active-"] .product-caret:after,
    .product-tab[class*=" active-"] .product-caret:after {
      top: -26px;
      border-width: 27px; }
  .product-tab.active-0 .product-caret {
    left: 0; }
  .product-tab.active-1 .product-caret {
    left: 25%; }
  .product-tab.active-2 .product-caret {
    left: 50%; }
  .product-tab.active-3 .product-caret {
    left: 75%; }

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  position: relative; }
  .truncate.fade {
    text-overflow: clip; }
    .truncate.fade:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to left, #140f1b, rgba(255, 255, 255, 0) 20%); }

.truncate-multi-line {
  position: relative;
  height: 3.6em;
  overflow: hidden; }
  .truncate-multi-line:after {
    content: '';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1.2em;
    background: linear-gradient(to left, #140f1b, rgba(255, 255, 255, 0) 50%); }
  .truncate-multi-line.truncate-multi-line-2 {
    height: 2.4em; }
  .truncate-multi-line.truncate-multi-line-4 {
    height: 4.8em; }
  .truncate-multi-line.truncate-multi-line-5 {
    height: 6em; }

.well-themed {
  background-color: #504262; }
