/*popup*/

.popup-element{

    position: fixed;

    top:50px;

    left: 0;

    z-index: 12345;

    width: 100%;

    height: 100%;

    overflow: hidden;

    outline: 0;

}

.popup-mask{

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9999;

    width: 100vw;

    height: 100vh;

    background-color: #000;

    opacity: .5;

    -webkit-transition: opacity .15s linear;

    transition: opacity .15s linear;

}

.popup-body {

    background-color: #f1f1f1;

    padding: 20px;

}



.tbody.body-h{

    height: 300px;

    overflow: auto;

}

h4.popup-title{font-size:20px}



a.close {

    position: absolute;

    top: 5px;

    right: 5px;

    padding: 4px 7px;

    color: #000;

}

.checker input[type="checkbox"]{

    position: absolute;

    left: -9999px;

}
.body-cart{
    border:none;
}
.checker .checkbox-fake{

    width: 16px;

    height: 16px;

    border: 1px solid rgb(196, 196, 207);

    display: inline-block;

    vertical-align: middle;

    margin: 0px 10px 0px 0px;

    position: relative;

    z-index: 1;

    color: rgb(196, 196, 207);

    background: transparent;

    cursor: pointer;



}

.checker .checkbox-fake::before {

    content: "";

    display: block;

    position: absolute;

    left: 2px;

    top: 3px;

    width: 10px;

    height: 5px;

    border-left: 2px solid rgb(255, 255, 255);

    border-bottom: 2px solid rgb(255, 255, 255);

    -webkit-transform: scale(0) rotate(-45deg);

    transform: scale(0) rotate(-45deg);

    -webkit-transition: transform 0.3s ease 0s;

    transition: transform 0.3s ease 0s;

}

.checker input[type="checkbox"]:checked + .checkbox-fake::before {

    -webkit-transform: scale(1) rotate(-45deg);

    transform: scale(1) rotate(-45deg);

}

.checker input[type="checkbox"]:checked + .checkbox-fake {

    border-color: rgb(11, 116, 229);

    background-color: rgb(11, 116, 229);

}

.bordered{border-radius: 4px}

.cart-img{

    width: 60px;

    display: inline-block;

    margin-right: 5px;

    border: 1px solid #ccc;

    padding: 2px;

}



.box-quality .input-quality{

    border: 1px solid #ccc;

    height: 30px;

    width: 30px;

    border-left: 0;

    border-right: 0;

    text-align: center;

}

.box-quality .btn {

    padding: 4px 10px;

    background-color: transparent;

    border: 1px solid #ccc;

    cursor: pointer;
    border-radius:unset;

}

a.btn-link-cart {

    color: #fff;

    background-color: #2ecc71;

    padding: 7px 10px;

    display: inline-block;

    border-radius: 4px;

}

.sticky-cart {

    border-radius: 0;

    -webkit-transition: background .1s cubic-bezier(.4, 0, .6, 1);

    transition: background .1s cubic-bezier(.4, 0, .6, 1);

    position: -webkit-sticky;

    position: sticky;

    top: 55px;

    z-index: 2;

}

.shadown--cart {

    background: rgb(255, 255, 255);

    box-shadow: 2px 2px 7px #ccc;

}

.box-total-cart-price .prices__items, .pd-checkout {

    list-style: none;

    padding: 17px 20px;

    border-bottom: 1px solid rgb(244, 244, 244);

}

.box-total-cart-price .prices__item {

    display: flex;

    flex-wrap: nowrap;

    -webkit-box-pack: justify;

    justify-content: space-between;

    margin-bottom: 10px;

}

.box-total-cart-price .prices__text {

    font-weight: 300;

    color: rgb(51, 51, 51);

    display: inline-block;

}

.box-total-cart-price .prices__total {

    padding: 17px 20px;

    display: flex;

    flex-wrap: nowrap;

    -webkit-box-pack: justify;

    justify-content: space-between;

    margin: 0px;

}

.box-total-cart-price .prices__value--final {

    color: rgb(254, 56, 52);

    font-size: 22px;

    font-weight: 400;

    text-align: right;

}

.box-total-cart-price .prices__value--final i {

    font-weight: 300;

    font-style: normal;

    display: block;

    font-size: 12px;

    color: rgb(51, 51, 51);

    margin-top: 3px;

}

.box-total-cart-price .cs--btn-cart {

    background-color: var(--html-bg-website);

    color: rgb(255, 255, 255);

    padding: 13px 10px;

    text-align: center;

    border-radius: 4px;

    border: none;

    width: 100%;

    display: block;

    margin: 15px 0px;

    cursor: pointer;

}

#form-checkout .row-input .wrap-input {

    position: relative;

    display: block;

    margin-bottom: 15px;

}



#form-checkout .row-input .wrap-input label.error {

    color: #FF0000;

    margin-top: 10px;

    display: block;

    font-weight: 500;

}

.label{
    color:black;
}

#form-checkout .row-input .wrap-input .input {

    font-weight: 400;

    -webkit-font-smoothing: antialiased;

    display: block;

    height: 40px;

    width: 100%;

    color: #30373b;

    font-size: 13px;

    line-height: normal;

    background-color: transparent;

    box-sizing: border-box;

    padding: 15px;

    border-radius: 5px;

    word-break: normal;

    border: 1px solid #d9d9d9;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;

    /* position: relative; */

    z-index: 2;

    background: #FFF;

}

#form-checkout .row-input .wrap-input .input.h {

    height: 100px;

}



#form-checkout .row-input .wrap-input .input:focus + .label,

#form-checkout .row-input .wrap-input .input:not(:placeholder-shown) + .label {

    color: #36cfba;

    top: 3px;

    font-size: 13px;

}



#form-checkout .row-input .wrap-input .input::placeholder {

    color: #999;

}



#form-checkout .row-input .wrap-input .input:focus {

    border-color: #66afe9;

    outline: 0;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);

}



#form-checkout .row-input .wrap-input .input.error,

#form-checkout .row-input .wrap-input .select.error {

    border-color: #e43835;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(228, 56, 53, 0.6);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(228, 56, 53, 0.6);

}



#form-checkout .row-input .wrap-input .select {

    font-weight: 400;

    -webkit-font-smoothing: antialiased;

    display: block;

    height: 40px;

    width: 100%;

    color: #999;

    font-size: 13px;

    line-height: normal;

    padding: 0px 15px;

    background-color: transparent;

    box-sizing: border-box;

    word-break: normal;

    border: 1px solid #d9d9d9;

    border-radius: 5px;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;

    position: relative;

    z-index: 2;

    outline: none;

    background: #FFF;

}



#form-checkout .row-input .wrap-input .select:focus + .label {

    color: #36cfba;

    top: 3px;

    font-size: 14px;

}



#form-checkout .row-input .wrap-input .select:focus {

    border: 1px solid #36cfba;

}



#form-checkout .row-input .wrap-input .select::placeholder {

    color: #999;

}



#form-checkout .row-input .wrap-input .label {

    position: absolute;

    font-size: 14px;

    font-weight: 400;

    left: 15px;

    top: 12px;

    line-height: 21px;

    color: #999;

    text-transform: none;

    z-index: 11;

    cursor: text;

    -webkit-transition: all 200ms ease;

    transition: all 200ms ease;

}



#form-checkout .row-input .wrap-input .label.label-select {

    top: 3px;

}

.line-gradient{

    height: 3px;

    width: 100%;

    background-position-x: -10px;

    background-size: 120px 3px;

    background-image: repeating-linear-gradient(45deg,#6fa6d6,#6fa6d6 33px,transparent 0,transparent 41px,#f18d9b 0,#f18d9b 74px,transparent 0,transparent 82px);

}

.shadown--cart {

    background: rgb(255, 255, 255);

    box-shadow: 2px 2px 7px #ccc;

    border-radius: 4px;

}

.pd-checkout {

    list-style: none;

    margin: 0px;

    padding: 17px 20px;

    border-bottom: 1px solid rgb(244, 244, 244);

}

label {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 5px;

    font-weight: 700;

}

.radio-item {

    position: relative;

    cursor: pointer;

    font-size: 14px;

    margin-top: 5px;

}



.radio-item .rd-text {

    display: inline-block;

    position: relative;

    font-weight: 400;

}

.tooltip-checkout .show-hover-box {

    background: rgb(255,255,255);

    border: 1px solid rgba(0,0,0,.09);

    color: #000;

    display: block;

    min-width: 100%;

    height: fit-content;

    padding: 10px;

    pointer-events: none;

    margin-bottom: 10px;

    z-index: 300;

    display: none;

}

/*** SALE POP ***/

.jas-sale-pop { background: #fff; bottom: -100%; left: 20px; top: auto !important; right: auto; padding: 10px 30px 10px 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border-radius: 3px; opacity: 0; visibility: hidden; transition: all 2s; z-index: 100; position: fixed; }

@media (max-width:480px) {

    .jas-sale-pop { left: 10px; right: 10px; max-width: 300px; }

    .jas-sale-pop .jas-sale-pop-content { max-width: 180px; }

}

.jas-sale-pop .jas-sale-pop-img { margin-right: 10px; width: 70px; float: left; }

.jas-sale-pop .jas-sale-pop-img img { max-height: 70px !important; }

.jas-sale-pop .jas-sale-pop-content { width: calc(100% - 80px); float: left; display: block; }

.jas-sale-pop h4 { color: #333; margin: 0; font-size: 1em; font-weight: normal; margin-bottom: 5px; }

.jas-sale-pop h3 { margin: 0; font-size: 1em; max-width: 255px; font-weight: 700; }

.jas-sale-pop h3 a { color: #333; margin: 0; font-size: 1em; }

.jas-sale-pop h3:hover a { color: #80bb35; }

.jas-sale-pop .jas-sale-pop-timeago { color: #878787; font-size: 0.85714em; }

.jas-sale-pop .pe-7s-close { right: 5px; top: 0px; cursor: pointer; position: absolute; font-family: FontAwesome; }

.jas-sale-pop .pe-7s-close:before { content: "\f00d"; }

.jas-sale-pop.slideUp { opacity: 1; visibility: visible; }

.jas-sale-pop.slideUp { bottom: 20px; }

.jas-sale-pop.middle-xs { -webkit-box-align: center; -ms-flex-align: center; }

.jas-sale-pop.flex { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; }

.info-stiket h3 { font-size: 15px; margin-bottom: 5px; }

.info-stiket p { margin-bottom: 5px; }

.info-stiket p a { display: inline-block; padding: 3px 10px; background: #009900; color: #FFF; margin-right: 5px; display: inline-block; }

.info-stiket p a:nth-child(2) { background: #36cfba; }

.info-stiket p:last-child { margin-bottom: 0px; }

.info-stiket span { font-weight: 700; color: #d90000; }

@media (max-width:600px) {

    .jas-sale-pop.slideUp { bottom: 50px; left: 10px; }

}



/*confirm*/

.jc-bs3-container.container {

    width: 25%;

}