/*new style for chat*/
@media only screen and (min-width: 600px) {
  #livechat-compact-container {
    position: fixed;
    width: 50px !important;
    height: 50px !important;
    right: 0 !important;
    bottom: 50% !important;
    margin-bottom: -77px;
    background: #4EADDE url(//assets.kele.com/images/icons/chat_icon_1.png) no-repeat 50% 8px !important;
    background-size: 25px !important;
    box-shadow: -2px 1px 3px 0px rgba(0, 0, 0, 0.2);
    transition: all .25s ease-in-out !important;
  }
 
  #livechat-compact-container:after {
    content: "chat";
    display: block;
    position: absolute;
    bottom: 2px;
    right: 0;
    left: 0;
    color: #FFF;
    text-align: center;
    font-size: 10px;
  }
 
  #livechat-compact-container:hover {
    background: #000033 url(//assets.kele.com/images/icons/chat_icon_1.png) no-repeat 50% 8px !important;
    background-size: 25px !important;
  }
 
  body.tab-open #livechat-compact-container {
    right: 400px !important;
  }
 
  #livechat-compact-view {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    width: 50px !important;
    opacity: 0;
  } 
 }
 
 /*slideout cart css*/
 .cf:before, .cf:after {
   content: "";
   display: table; }
 
 .cf:after {
   clear: both; }
 
 * {
   box-sizing: border-box; }
 
 body {
   transition: all .25s ease-in-out !important;
 }
 
 /*body states*/
 body.tab-open {
   margin-right: 400px !important;
 }
 body.tab-open #keleTab {
   right: 0;
 }
 body.cart-open #keleTab .cart-container, body.quote-open #keleTab .quote-container, body.chat-open #keleTab .chat-container {
   display: block;
 }
 
 #keleTab .close-kele-slideout {
   position: absolute;
   top: 10px;
   right: 20px;
   z-index: 9999;
   background: #FFF;
   padding: 5px 0;
   width: 26px;
   text-align: center;
   color: #000033;
   border: 1px solid #000033;
   font-weight: bold;
   border-radius: 60px;
   cursor: pointer;
 }
 
 #keleTab .close-kele-slideout:hover {
   background: #000033;
   color: #FFF;
 }
 
 /* hide quote and chat tabs for now */
 #chat-toggle,
 #quote-toggle,
 .quote-container,
 .chat-container {
   display: none !important;
 }
 
 #cart-toggle.item-added {
   background-color: #008049;
 }
 
 #cart-toggle.item-added:before {
   content: "Item added!";
   display: block;
   position: absolute;
   top: 0;
   right: 50px;
   background: #008049;
   color: #FFF;
   padding: 18px;
   width: 90px;
   height: 16px;
   font-size: 12px;
   transition: all .25s ease-in-out;
 }
 
 #mpp-toggle {
  text-align: center;
 }

 #mpp-toggle span {
  color:#FFF;
  font-size:12px;
  line-height:14px;
  display:inline-block;
  padding:0;
  margin:2px 15px 2px -7px;
 }

 .kele-tab-toggles {
   position: fixed;
     right: 0;
     top: 50%;
   transform: translateY(-50%);
   z-index: 100000;
   width: 50px;
   height: auto;
   box-shadow: -2px 1px 3px 0px rgba(0, 0, 0, 0.2);
   transition: all .25s ease-in-out;
 }
 
 body.tab-open .kele-tab-toggles {
   right: 400px;
 }
 
 .kele-tab-toggle {
   width: 100%;
   height: auto;
   background-color: #4EADDE;
   border: 1px #999 solid;
   padding: 10px;
   cursor: pointer;
   user-select: none;
   transition: all .25s ease-out;
 }
 
 .kele-tab-toggle:hover {
   background-color: #000033;
 }
 
 div#mpp-toggle.kele-tab-toggle:hover {
    background-color: #CC6600;
  }

 /*hide cart tab on cart page, checkout page and credit card payment page */
 body.page-nav-viewcart .kele-tab-toggle,
 body.page-nav-checkout .kele-tab-toggle,
 body.page-nav-ccpayment .kele-tab-toggle {
   display: none !important;
 }
 
 /*.kele-tab-toggle.active {
   background-color: #000033;
 }*/
 
 .kele-tab-toggle img {
   width: 100%;
   height: auto;
 }
 
 .kele-tab-toggle h5 {
   color: #FFF;
   margin: 0;
   font-size: 12px;
   text-align: center;
 }
 
 #keleTab {
   position: fixed;
   top: 0;
   right: -400px;
   bottom: 0;
   width: 400px;
   z-index: 99999;
   background-color: #FFF;
   border-left: 1px solid #EEE;
   transition: all .25s ease-in-out; 
 }
 
 #keleTab .cart-container, #keleTab .quote-container, #keleTab .chat-container  {
   display: none;
   position: relative;
   height: 100%;
   width: 100%; 
 }
 
 #keleTab .cart-container .tab-top, #keleTab .quote-container .tab-top, #keleTab .chat-container .tab-top {
   height: auto;
   width: 100%;
   background-color: #CCC;
   /*padding: 20px 0;
   height: 65px;*/
   padding: 10px 0;
   height: 50px;
 }
 
 #keleTab .cart-container .tab-top h1, #keleTab .quote-container .tab-top h1, #keleTab .chat-container .tab-top h1 {
   width: 90% !important;
   margin: 0 auto;
   color: #000033;
   font-size: 22px !important;
   font-weight: 300; 
   line-height: auto !important;
   padding-right: 30px;
 }
 
 /*cart*/
 #keleTab .cart-container .cart-content {
   position: absolute;
   top: 50px;
   right: 0;
   left: 0;
   bottom: 118px;
   height: auto;
   overflow: auto;
   overflow-x: hidden;
   clear: both;
 }
 
 #keleTab .cart-container .empty-cart {
   cursor: pointer;
   z-index: 10000;
 }
 
 #keleTab .cart-container .empty-cart::before {
   content: '\1F5D1';
   cursor: pointer;
   font-size: .8em;
   margin-left: 20px;
   z-index: 10000;
 }
 
 #keleTab .empty-msg {
   color: #BBB;
   text-align: center;
   padding: 30px;
 }
 
 #keleTab .cart-container .cart-content .cart-item {
   position: relative;
   height: auto;
   width: 90%;
   margin: 0 auto;
   clear: both;
   padding: 15px 0 5px 0;
   border-bottom: 1px solid #D3D3D3; 
 }
 
 #keleTab .cart-container .cart-content .cart-item h1, #keleTab .cart-container .cart-content .cart-item span {
   font-size: 12px !important;
   color: #000 !important; 
 }
 
 #keleTab .cart-container .cart-content .cart-item h1 {
   margin-bottom: 10px; 
 }
 
 #keleTab .cart-container .cart-content .cart-item a {
   color: #4EADDE;
   font-size: 10px;
   text-decoration: none;
 }
 
 #keleTab .cart-container .cart-content .cart-item span.item-des {
   color: #999 !important;
   font-size: 10px !important;
 }
 
 #keleTab .cart-container .cart-content .cart-item span {
   text-transform: uppercase;
   font-weight: 500; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left {
   float: left;
   width: 45%; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left img {
   display: block;
   width: 65%;
   height: auto;
   margin-bottom: 10px; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left .update-remove {
   display: block; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left .update-remove span {
   display: inline-block;
   border-right: 1px solid #4EADDE;
   height: 10px;
   margin: 0 5px; 
 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left .update-remove h2 {
   display: inline-block;
   color: #4EADDE !important;
   font-size: 10px !important;
   cursor: pointer; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left .update-remove h2:hover {
   color: #0A7FBE !important;
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-left .update-remove h2.remove-item:hover {
   color: red !important;
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right {
   float: left;
   width: 55%; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-quantity {
   width: 100%;
   height: auto; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-quantity h1 {
   display: inline-block;
   margin-right: 15px; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-quantity input {
   border: 1px solid #D3D3D3;
   display: inline-block;
   max-width: 50px;
   text-align: center;
   outline: none;
   width: 30%; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-quantity input:focus {
   border-color: #4EADDE;
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-price:before,
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-price-total:before {
   content: '$';
   font-weight: 500; 
 }
 
 #keleTab .cart-container .cart-content .cart-item .cart-item-right .item-price:after {
   content: '/each';
   text-transform: lowercase;
   font-weight: 500; 
 }
 
 #keleTab .cart-container .cart-cta {
   position: absolute;
   right: 0;
   bottom: 20px;
   left: 0;
   height: auto; 
 }
 
 #keleTab .cart-container .cart-cta .cart-subtotal {
   width: 100%;
   margin: 0 auto;
   /*background-color: #FFF;*/
   background-color: #F5F5F5;
   /*border: 2px solid #000033;*/
   border: 1px solid #CCC;
   margin-bottom: 15px; 
 }
 
 #keleTab .cart-container .cart-cta .cart-subtotal p {
   font-weight: 700;
   color: #000033;
   text-decoration: none;
   /*padding: 7px 10px;*/
   margin: 0;
   text-align: center; 
 }
 
 #keleTab .cart-container .cart-cta .cart-checkout {
   width: 100%;
   margin: 0 auto;
   border: 2px solid #00824a; 
 }
 
 #keleTab .cart-container .cart-cta .cart-checkout a {
   display: block;
   padding: 10px;
   color: #FFF;
   font-weight: 700;
   text-decoration: none;
   text-align: center;
   background-color: #00824a; 
 }
 
 #keleTab .cart-container .cart-cta .cart-checkout a:hover {
   background-color: #FFF;
   color: #00824a;
 }
 
 /*quote section*/
 .quote-content {
   position: absolute;
   top: 225px;
   right: 45px;
   bottom: 133px;
   width: calc(100% - 45px);
   height: auto;
   overflow: auto;
   clear: both;
 }
 
 #keleTab .cart-container .cart-cta {
   bottom: 45px;
 }
 
 #keleTab .cart-container .cart-cta .cart-subtotal {
   margin-bottom: 10px;
 }   
 
 /* mobile overrides */
 @media only screen and (max-width: 600px) {
   #keleTab .cart-container .cart-cta {
     bottom: 58px;
   }
   #keleTab .cart-container .cart-cta .cart-subtotal {
    margin-bottom: 4px;
   }
   #keleTab .cart-container .cart-cta .cart-subtotal p {
     padding: 4px 10px;
   }   
   body.tab-open .kele-tab-toggles {
     display: none !important;
   }
   #keleTab {
     width: 100%;
     right: -100%;
   }
   body.tab-open {
     margin-right: 0;
   }
 }    
 
 /* BEGIN PROMO PROGRESS BAR CSS */
 .progress-bar-container {
   display: block;
   width: 100%;
   height: auto;
   box-sizing: border-box;
   /*margin-top: 13px;*/
 }
 
 .progress-bar-box:not(:last-child) {
   border-right: 2px solid #FFF;
 }
 
 .progress-bar-container.one-filled .progress-bar-box:nth-child(-n+1) {
   background-color: #4396FC;
 }
 .progress-bar-container.two-filled .progress-bar-box:nth-child(-n+2) {
   background-color: #4396FC;
 }
 
 .progress-bar-container.three-filled .progress-bar-box:nth-child(-n+3) {
   background-color: #4396FC;
 }
 
 .progress-bar-container.four-filled .progress-bar-box:nth-child(-n+4) {
   background-color: #4396FC;
 }
 
 .progress-bar-container.five-filled .progress-bar-box:nth-child(-n+5) {
   background-color: #4396FC;
 }
 
 .progress-bar-box {
   display: inline-block;
   float: left;
   width: 20%;
   box-sizing: border-box;
   color: #FFF;
   font-size: 13px;
   padding: 4px 0;
   background-color: #CCCCCC;
   text-align: center;
   text-transform: uppercase;
 }
 
 .progress-bar-header {
   display: block;
   width: 100%;
   height: 90px;
   box-sizing: border-box;
 }
 
 .yeti-picture-side {
   display: block;
   width: 60px;
   height: 100%;
   /*background-color: green;*/
   padding: 2px;
   box-sizing: border-box;
   float: left;
 }
 
 .progress-bar-text-side {
   display: block;
   width: calc(100% - 60px);
   height: 100%;
   box-sizing: border-box;
   float: left;
 }
 
 .big-yeti-text {
   text-transform: uppercase;
   font-size: 24px;
   color: #209DDA ;
   margin-top: 1em;
   display: inline-block;
   text-align: center;
   width: 100%;
   vertical-align: middle;
   font-weight: bold;
 }
 
 .next-threshold-marker.first-step {
   margin-left: 6%;
 }
 
 .next-threshold-marker.second-step {
   margin-left: 26%;
 }
 
 .next-threshold-marker.third-step {
   margin-left: 46%;
 }
 
 .next-threshold-marker.fourth-step {
   margin-left: 66%;
 }
 
 .next-threshold-marker.fifth-step {
   margin-left: 84%;
 }
 
 .next-threshold-marker.fifth-step .threshold-number {
   margin-right: 16%;
 }
 
 .next-threshold-marker.finished .threshold-arrow {
   display: none;
 }
 
 .next-threshold-marker.finished .threshold-number {
   margin-left: -100%;
 }
 
 .next-threshold-marker.finished {
   margin-left: 50%;
 }
 
 .next-threshold-marker {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   /*margin-top: 40px;*/
   margin-top: 25px;
   width: 100px;
 }
 
 .threshold-arrow {
   position: absolute;
   display: block;
   left: 50%;
   margin-left: -6px;
   text-align: center;
   width: 12px;
   height: 12px;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
   border-bottom: 12px solid black;
 }
 
 .threshold-number {
   display: block;
   text-align: center;
   font-size: 12px;
   padding-top: 14px;
 }
 
 .progress-bar-status-container {
   display: block;
   width: 100%;
   height: auto;
 }
 .progress-bar-status-text {
   color: #231B51 ;
   text-transform: uppercase;
   font-size: 12px;
   text-align: center;
   width: 100%;
   display: inline-block;
 }
 /* END PROMO PROGRESS BAR CSS */
 
 /* DISCOUNT BAR CSS */
 #discount-toggle {
   display: none;
   visibility: hidden;
 }
 
 label[for="discount-toggle"] {
   text-align: center;
   color: #666;
   cursor: pointer;
 }
 
 label[for="discount-toggle"]:hover {
   color: #008348;
 }
 
 label[for="discount-toggle"]::before {
   position: absolute;
   top:18px;
   right: 0;
   content: "\2304";
   text-align: center;
   font-weight: bold;
   vertical-align: text-top;
   font-size: 38px;
   width: 30px;
   height: 30px;
   /*background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);*/
 }
 
 #discount-toggle:checked ~  label[for="discount-toggle"]::before {
   content: "\2303";
   font-size: 18px;
 }
 /* END DISCOUNT BAR CSS */