/*SPINNER*/
.badge {display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: normal; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777; border-radius: 10px;}
.spinner {margin: 100px auto; width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear;}
.spinner .dot1, .spinner .dot2 {width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #333; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out;}
.spinner .dot2 {top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s;}
/*SHOWCASE*/
.showcase {position:relative;}
.showcase-additional-images img, .showcase-variants img {position:absolute; top:0; left:0; display:none;}
.showcase-additional-areas {position: absolute; top:0; left:0; width: 100%; height: 100%;}
.showcase-additional-areas div {display: inline-block; height: 100%;}
.showcase-additional-areas div[aria-setsize="1"] {width: 100%}
 .showcase-additional-areas div[aria-setsize="2"] {width: 50%}
 .showcase-additional-areas div[aria-setsize="3"] {width: calc(100%/3)}
 .showcase-additional-areas div[aria-setsize="4"] {width: 25%}
 .showcase-additional-areas div[aria-setsize="5"] {width: 20%}
 .showcase-additional-areas div[aria-setsize="6"] {width: calc(100%/6)}
.showcase-additional-areas:hover div {border-top: 2px solid #CCC;}
.showcase-additional-areas:hover div:hover {border-top: 2px solid #333;}
.showcase-color-swatch {position: absolute; bottom:0; right:0; margin: 0; padding: 0;}
.showcase-color-swatch a {display: inline-block; margin-bottom: 4px; margin-right: 4px;}
/*PIX*/
#pix-data-chave{margin-bottom: 15px;text-align:center;}
#pix-data-chave > div{background:#fff; margin-bottom: 10px;border:1px solid #ddd;}
#pix-data-chave label{font-weight: 600;}
.pix_key textarea{width:100%; min-height:150px;margin: 5px 0;padding: 10px;background:#f0f0f0;border:none; border-radius: 5px; text-align:center;resize: none;overflow: hidden;line-height: 20px;font-size: .8em;font-weight:600;word-break: break-all;}
.pix-data{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:30px; font-size:.9em;}
.pix-data label{-webkit-box-flex: 0;-ms-flex: 0 0 150px;flex: 0 0 150px;}
.pix-data input[readonly]{-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1 auto;background:none;border:none;}
#pix button{line-height: 2em;}
#pix-qr-code, #pix-copia-cola{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
#pix-copia-cola .pix_key{padding: 20px;}
.pix_key{-webkit-box-flex: 0;-ms-flex: 0 0 250px;flex: 0 0 250px;}
.pix_instructions {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1; min-width: 300px; padding: 20px;}
.pix_instructions{text-align: left;}
.pix_instructions ol{padding-left: 15px;}
.pix_instructions li{margin-bottom: 10px;}
#pix-infos{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%; padding: 20px; border-top: 1px solid #ddd; text-align:left;}
/*MODAL*/
#modal { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000000; 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; overflow-y:auto; padding: 1rem;}
#modal-content { position:relative; z-index:1000001; padding:2rem; background:#fff; -webkit-box-shadow:0 0 10px rgba(0,0,0,.75); box-shadow:0 0 10px rgba(0,0,0,.75); -webkit-animation:fadeInDown .7s ease-in-out; animation:fadeInDown .7s ease-in-out;}
#modal-close { cursor:pointer }
#modal-close:before { content:''; position:absolute; top:1em; right:1em; z-index:1000002; width: 2rem; height: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' %3E%3Cpath fill='%23666666' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z'%3E%3C/path%3E%3C/svg%3E");}
#modal-close:after { content:''; position:fixed; background:rgba(0,0,0,.8); top:0; right:0; bottom:0; left:0; cursor:pointer }
.modal-order #modal-content {padding: 2rem 1rem; }
#modal_order_items{width: 100vw; max-width: 500px;  max-height: 75vh; padding: 0 1rem; text-align: left; overflow-y: auto; scrollbar-width: thin;}
#modal_order_items h2{font-size: 1.1em; font-weight: 600; text-transform: uppercase;}
#modal_order_ref{color: #2C58A8; }
#modal_order_status{opacity: .5; font-size: .85em}
#modal_order_status:before{content:' - '}
#modal_order_items p{font-size: .9em;}
#modal_order_items h2 ~ div{position: relative; margin-top: 40px; padding-top: 10px; border-top: 1px solid #999; color: #333;}
#modal_order_items h3{position: absolute; top: -10px; margin: 0; padding-right: 15px; background: #fff; line-height: 20px; font-size: 1em; font-weight: 600; color: #000 }
#modal_order_payment p{display: flex; justify-content: space-between;}
#modal_order_shipping_method span{margin-right: 10px;}
#modal_order_shipping_address{line-height: 1.75em;}
#modal_order_shipping_address .address_user{display: block}
#modal_order_shipping_address .address_city:before{content: ''; display: block}
#modal_order_items_list ul{padding: 0; list-style: none}
.modal-order-item p{display: flex; align-items: center;}
.modal-order-item .item-grid-ref{display:block; color: #999}
.modal-order-item .item-name{flex: 1 0 auto}
.modal-order-item .item-qty{order: -1; flex: 0 0 30px; margin-right: 10px; background: #2C58A8; border-radius: 50%; text-align: center; line-height: 30px; font-size: .85em; font-weight: 600; color: #fff;}
.modal-order-item .item-price{flex: 0 0 120px; text-align: right;}
@media only screen and (max-width: 800px){
  #modal_order_items{width: 100%}
}
/*TELEVENDAS*/
#televendas_on{position:fixed;left:0;top:50%;z-index:10000;display:flex;flex-direction:row-reverse;margin-top:-100px;pointer-events:none}
#televendas_on input{display:none}
#televendas_on label{display:flex;padding:0 5px;background:#036;border-radius:0 5px 5px 0;cursor:pointer;opacity:.9;pointer-events:auto;transform:translateX(0);transition:transform .3s ease-in-out}
#televendas_on label svg{fill:#fff}
#televendas_on .wrapper{width:170px;padding:1rem;background:rgba(255,255,255,.9);border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);text-align:center;font-size:14px;pointer-events:auto;transform:translateX(0);transition:transform .3s ease-in-out}
#televendas_img img{display:block;width:80px;margin:0 auto}
#televendas_user{margin:10px 0 0 0;line-height: 1.75em;font-size:.9em;color:#036}
#televendas_user strong{display:block;}
#televendas_user a{display:block;font-weight:600;color:#00009}
#televendas_toggle:checked~.wrapper,
#televendas_toggle:checked~label{transform:translateX(-170px)}
#televendas_toggle:checked~label svg{transform:rotateZ(180deg)}

@keyframes rotate {
	100% {transform: rotate(360deg);}
}
@keyframes bounce {
	0%, 100% {transform: scale(0.0);}
	50% {transform: scale(1.0);}
}