﻿/*========================== CSS Document ================================*/
b, strong { font-family: OpenSans-Semibold; font-weight: normal; }
form { height: 100%; }
#main { overflow: hidden;}
#tooltip { border: 1px solid #CCC; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; background: url(../images/blkTransparent.png) top left repeat; position: absolute; z-index: 9999; color: #fff; }
#tooltip .tipBody { background-color: #333; padding: 5px 5px 5px 15px; opacity: 0.8; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; line-height: 20px; font-size: 12px; }
.icn-tooltip { display: inline-block; width: 18px; height: 18px; line-height: 18px; vertical-align: middle; background: url(../images/icon-orange-questionmark.png) left top no-repeat; }
.item-line { font-size: 16px; height: 25px; width: 200px; padding-left: 0px; margin: 0 auto; padding: 0 30px; }
.item-line .unitPrice, .item-line .copyPrice { line-height: 25px; float: left; }
.item-line .ui-spinner { background: none; float: right; width: 76px; height: 25px; }
.item-line .ui-spinner-input { position: absolute; width: 35px; height: 25px; left: 20px; line-height: 25px; margin: 0 auto; padding: 0; font-size: 14px; vertical-align: middle; text-align: center; border: none; border-radius: 0; -webkit-border-radius: 0; }
.item-line .ui-spinner-button { height: 25px; width: 20px; border: none; }
.item-line .ui-spinner-up { float: right; right: 0; }
.item-line .custom-up-icon { background: url(../img-icon/icn-custom-up-icon-19x20.png) no-repeat left center; border: none; width: 19px; height: 20px; top: 2px; cursor: pointer; }
.item-line .ui-spinner-down { float: left; left: 0; }
.item-line .custom-down-icon { background: url(../img-icon/icn-custom-down-icon-19x20.png) no-repeat left center; width: 19px; height: 20px; top: 2px; cursor: pointer; }
.inUSD { display: inline-block; margin: 2px 0 0; width: 100%; text-align: center; color: #606060; font-size: 14px; line-height: 24px; font-family: OpenSans-Regular; }
/*====================================== Billing Info ====================================*/
/*==================================== Confirm Order =====================================*/


.overflowHidden { overflow: hidden !important; }
#ShoppingCartContent .showModule { margin: 0 5px; display: inline-block; }
#ShoppingCartContent { position: fixed; top: 0px; width: 322px; right: -322px; background: #f5f5f5; border-left: 1px solid #ddd; height: 100%; z-index: 99999; }
#ShoppingCartContent.hideCart { right: -322px; animation: hideCartAnimate .5s; }
#ShoppingCartContent.showCart { right: 0px; animation: showCartAnimate .5s; }

/*.shoppingCartMenuBtn { position: fixed; right: 20px; bottom: 250px; width: 50px; height: 50px; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 18px; border-radius: 50%; background: #fe8e14; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 1px 2px; cursor: pointer; }
.shoppingCartMenuBtn.empty { filter: grayscale(1) }
.shoppingCartMenuBtn:hover { background: #dd7c13; }
*/
@keyframes showCartAnimate { from { right: -322px; }
    to { right: 0px; }
}

@keyframes hideCartAnimate {
    from { right: 0px; }
    to { right: -322px; }
}

[id*=comm100-float-button] { display: none !important; }
#ShoppingCartContent .shoppingCartLeft { width: 38px; height: 100vh; vertical-align: top; text-align: center; padding-top: 40vh; border-right: 1px solid #ddd; float: left; }
#ShoppingCartContent .fa-shopping-cart { color: #777; font-size: 18px; cursor: pointer; display: block; margin: 0 auto; padding: 10px 0; }
#ShoppingCartContent .fa-shopping-cart:hover { color: #999; }
.chatBtn { margin-top: 10px; }
#ShoppingCartContent .fa-comment-dots { color: #fff; background: #fe8e14; font-size: 18px; cursor: pointer; display: block; margin: 0 auto; padding: 10px 0; }
#ShoppingCartContent .fa-comment-dots:hover { background: #fea543; }
#ShoppingCartContent .shoppingCartRight { width: 321px; height: 100vh; vertical-align: top; float: right; }
#ShoppingCartContent .shoppingCartRight .loadingWrap { height: 100%; max-height: calc(100vh - 60px); overflow: auto; }
#ShoppingCartContent .shoppingCartList ul, #ShoppingCartContent .shoppingCartList ul > li { list-style: none; padding: 0; }
#ShoppingCartContent .shoppingCartList ul > li { background: #ffffff; padding: 15px 18px; margin-bottom: 10px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; color: #707070; }
#ShoppingCartContent .shoppingCartList ul li p { margin-bottom: 0; font-size: 14px; }
#ShoppingCartContent .shoppingCartList ul li p.productSaleName { margin-bottom: 15px; }
#ShoppingCartContent .shoppingCartList ul li p.productSaleQuantity { margin-bottom: 5px; }
#ShoppingCartContent .shoppingCartList ul li .productSaleAmount { font-family: Oswald-Regular; font-size: 14px; }
#ShoppingCartContent .shoppingCartList ul li p:last-child { margin-bottom: 0px; }
#ShoppingCartContent .shoppingCartList ul li .priceHasDiscount { font-family: Oswald-Regular; color: #999999; font-size: 14px; text-decoration: line-through; }
#ShoppingCartContent .shoppingCartList ul li p.nearPromotionTips { background: #feb54a; color: #fff; margin: 0; line-height: 24px; }
#ShoppingCartContent .shoppingCartList ul li p .priceTag { font-weight: bold }
#ShoppingCartContent .shoppingCartList ul li .numberModify .numberInput { font-size: 14px; }
#ShoppingCartContent .shoppingCartList ul, #ShoppingCartContent .shoppingCartList ul > li:last-child { margin-bottom: 0; }
#ShoppingCartContent .shoppingCartTitle { margin: 0; padding: 0 18px; height: 60px; line-height: 60px; font-size: 24px; color: #FFFFFF; background: #323234; font-family: Oswald-Regular; }
#ShoppingCartContent .shoppingCartTitle .clearBtn { margin-top: 0; background: transparent; border: 0; padding: 0; float: right; outline: none; height: 100%; }
#ShoppingCartContent .shoppingCartTitle .clearBtn:active { outline: none; }

#ShoppingCartContent .totalInfo { width: 100%; color: #000; font-size: 16px; padding: 15px 18px 30px; background: #EEEEEE; }
#ShoppingCartContent .totalInfo .totalAmount { font-family: Oswald-Regular; }
#ShoppingCartContent .totalInfo .priceHasDiscount { color: #999999; font-size: 14px; text-decoration: line-through; }
#ShoppingCartContent .totalInfo .appliedPromotionsTitle { font-size: 14px; color: #606060; margin-top: 15px; }
#ShoppingCartContent .totalInfo .appliedPromotions { font-size: 14px; color: #606060; text-align: left; padding-left: 15px; margin-bottom: 0; }
#ShoppingCartContent .totalInfo .appliedPromotions .hadPromotionTips { color: #306877; font-weight: bold; }
#ShoppingCartContent .totalInfo .appliedPromotions li { margin-top: 10px; line-height: 22px; }
#ShoppingCartContent .totalInfo .taxTotal { text-align: right; font-size: 14px; color: #999; margin-left: 5px; }
#ShoppingCartContent .totalInfo p { margin-bottom: 0; }


#ShoppingCartContent .promotionTips { font-weight: normal; }
#ShoppingCartContent .promotionTips .promotionTipsTitle { font-family: Oswald-Regular; color: #444444; padding-left: 18px; font-size: 16px; line-height: 20px; margin: 10px 0 15px; }
#ShoppingCartContent .promotionTips { color: #fff; padding-left: 0px; padding-top: 10px; padding-bottom: 20px; text-align: left; }
#ShoppingCartContent .promotionTips p { padding-left: 0; }
#ShoppingCartContent .promotionTips .recommendPromotionSerials { padding: 0; font-size: 14px; list-style: none; }
#ShoppingCartContent .promotionTips .recommendPromotionSerials > li { padding: 0 18px; background: #306877; margin-bottom: 10px; }
#ShoppingCartContent .promotionTips .recommendPromotionSerials > li p { margin-bottom: 0; line-height: 34px; font-family: Oswald-Regular; }
#ShoppingCartContent .promotionTips .recommendPromotions { margin: 0; padding: 0; padding: 0 18px; }
#ShoppingCartContent .promotionTips .recommendPromotions li { list-style: disc; color: #fff; margin: 0; padding: 0; line-height: 24px; }
#ShoppingCartContent .promotionTips .recommendPromotions li:last-child { padding-bottom: 10px; }
#ShoppingCartContent .promotionTips .recommendItems { margin-top: 10px; margin-bottom: 20px; font-weight: normal }
#ShoppingCartContent .promotionTips .recommendItems > li { padding-top: 10px; list-style: circle; }
#ShoppingCartContent .promotionTips .recommendItems > li:first-child { padding-top: 5px; }
#ShoppingCartContent .promotionTips .recommendItems > li:last-child { padding-bottom: 5px; }
#ShoppingCartContent .promotionTips .nearPromotionTips { color: #ffffff; font-size: 14px; }
#ShoppingCartContent .promotionTips .nearPromotionTips p { margin: 5px 0 10px; padding: 0; cursor: pointer }
#ShoppingCartContent .promotionTips .recommendItems > li .addCart { color: #fe8e14; border: 2px solid #fe8e14; display: inline-block; padding: 0 6px; border-radius: 5px; }
#ShoppingCartContent .promotionTips .recommendItems > li .addCart .fa-shopping-cart { color: #fe8e14; padding: 6px 0; font-size: 16px; }
#ShoppingCartContent .deleteBtn { margin-top: 0; vertical-align: top; background: transparent; border: 0; padding: 0; outline: none; }

#ShoppingCartContent .shoppingCartBtns { padding: 20px 25px; text-align: right; }
#ShoppingCartContent .shoppingCartBtns .submitBtn { border: 1px solid #FE8E14; font-family: Oswald-Regular; background: #FE8E14; color: #FFFFFF; padding: 10px 20px; font-size: 14px; outline: none; margin-bottom: 15px; }
#ShoppingCartContent .shoppingCartBtns .submitBtn:hover { background-color: #fdb808; border: 1px solid #fdb808; }
#ShoppingCartContent .shoppingCartBtns .submitBtn.quoteBtn { color: #FE8E14; background: #FFFFFF; }
#ShoppingCartContent .shoppingCartBtns .submitBtn.quoteBtn:hover { background-color: #fdb808; color: #FFFFFF; }

@media (min-width: 1200px) {
    #ShoppingCartContent .shoppingCartBtns .submitBtn { font-size: 16px; }
}

.numberModify { display: inline-block; margin: 0 10px 0 0; font-size: 14px; line-height: unset; height: 22px; border: 1px solid #aaa; }
.numberModify span.modifyBtn { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; display: inline-block; width: 20px; height: 20px; border-right: 1px solid #aaa; text-align: center; line-height: 18px; background: #F5F5F5; vertical-align: top; }
.numberModify span.addBtn { line-height: 18px; border-left: 1px solid #aaa; border-right: 0; }
.numberModify span.modifyBtn:hover { background-color: #ddd; }
.numberModify .numberInput { width: 40px; height: 20px; font-size: 14px; padding: 5px; outline: none; vertical-align: top; border: 0; background: #FFFFFF; text-align: center; line-height: 10px; }
.numberModify .numberInput:focus { border: none; border-bottom: 0px solid white !important; box-shadow: none; }

@media (max-width: 1699px) {
    .numberModify { font-size: 16px; }
    .numberModify .numberInput { width: 40px; font-size: 16px; }
}

@media (max-width: 1199px) {
    #mdMenu { padding-right: 20px; }
    .productMenu .contactBtn { margin-right: 20px; }
}

@media (max-width: 1169px) {
    .productMenu .downloadBtn { display: none; }
}


@media (max-width: 991px) {
    .numberModify .numberInput { width: 30px; font-size: 16px; }
    .productMenu .contactBtn { margin-right: 0px; }
}


@media (min-width: 1680px) and (max-width: 1700px) {
    #mdMenu { padding-right: 40px; }
    .productMenu .contactBtn { margin-right: 40px; }
}
