/*PRINCIPAL*/
/*
body{
background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
*/

/* contenedor para la pagina central*/
/*TODO los paddings deberian de tomar los paddings generados por bootstrap de las clases .container o .col-* */
#pageWrapper{
	background: var(--body-bg);
	margin-bottom: 20px;
}
/* para paginas como popup-shipping-estimator*/
body:not(#indexHomeBody) #pageWrapper:only-child{
	margin-top: 10px;
	margin-bottom: 10px;
}

/*bof global*/
.clearBoth{
	clear:both
}
/* sidebox filtar start */
/* ocultar palabras que se salen de los margenes*/
#filtrarBoxBody .checkbox label, .cartProdTitle, .product_title, .product_price,
.list-unstyled *, .panel-title{
	overflow:hidden;
	text-overflow: ellipsis;
}
#filtrarBoxBody .checkbox label:hover, .panel-title:hover{
    overflow: visible;
}
#filtrarBoxBody .checkbox label:hover{
    margin-bottom: 5px;
}
#filtrarBoxBody .slider.slider-horizontal{
	width: 100%;
    margin-top: 15px;
}
/* sidebox filtar end */

/*agrega un espacio definido a rows o a lo que se requiera*/
.bottom-buffer {
	margin-bottom: 20px
}
#checkoutNewAddress{
	position:relative
}
/* Permitir que los botones, imagenes de categorias con mucho texto se adapten a la pantalla */
.btn, .caption{
    white-space: normal !important;
    word-wrap: break-word;
}
.input-group-btn>.btn{
	white-space: nowrap !important;
	word-wrap: unset;
}
/* Se quita el outline al hacer focus en botones ya que bootstrap no tiene aun la habilidad de cambiar el color */
.btn:focus {
	outline: none !important;
}

/* quitar diseño predeterminado del campo date en ios */
input[type="date"]{
	min-width:95%;
}

/* mantener relacion de aspecto de imagenes */
.img-responsive{
	object-fit: contain;
}
.equal-cols .thumbnail{
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.equal-cols .product_image{
	-webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.equal-cols .thumbnail .product_image>a, .equal-cols .thumbnail .product_image.collapse.in{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	justify-content: center;
}

/* mantener relacion de aspecto de imagenes pequeñas*/
.additionalImages, .additionalImages .thumbnail, .additionalImages .thumbnail img{
	-webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*eof global*/

/*bof fallbacks y hacks*/

/*mensajes de validacion del plugin validatr (se carga cuando no hay validacion nativa)*/
.validatr-message{
	z-index:1031
}
/*eof fallbacks y hacks*/

/* bof forms */

/* margen derecho a labels e izquierdo a inputs de form-inline */
.form-inline label, .form-inline input,
.product_attributes_chooser input[type="radio"], .product_attributes_chooser input[type="checkbox"] {
	margin-right: 5px
}
.product_attributes_chooser .wrapperAttribsOptions input[type="text"] {
	width:100%;
}

.form-group-bottom-buffer {
	margin-bottom: 15px
}
/* eof-forms */

/*color para texto de componentes deshabilitados*/
option:disabled {
	/* usar variable gray-lighter pero que esté sin lighten ni nada de eso*/
	background-color: #afafaf;
}

/* bof google translate, fb, twitter */
body{
	top:0 !important
}
body > div.skiptranslate:first-child, #goog-gt-,
.owl-stage .login-members-price, #productListing .login-members-price , .owl-stage .login-members-btn, 
#productListing .login-members-btn, #cartAdd .login-members-price, #cartAdd .login-members-btn {
	display: none !important
}
.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
	background-color: transparent !important;
	border: none !important; 
	box-shadow: none !important;
}
.fb-like{
	z-index:1001;
}
.pixel_track{
	border-style:none;
}
/* eof google translate, fb, twitter */

/* bof headers */
/* usar la variable bootstrap @brand-primary o la clase .bg-primary  para obtener su color e implementarlo */

/* required for navbar-fixed-top */
body{
	padding-top: 70px
}

/* cosas que no encontre nativamente en bootstrap */
/* margen y maximo de contenedor para Togglable tabs tab.js */
.tab-pane{
	margin-top: 15px;
    max-height: 200px;
    overflow: auto;
}


#navCatTabsCollapsed .dropdown-menu, .dropdown-submenu .dropdown-menu:not(.container_yamm) {
	position: relative;
    width: 100%;
    top: -2px;
}

/* menu de navegacion de categorias a la izquierda*/

.navbar-toggle.navbar-left{
	float:left;
	margin-left:15px;
}
/*Alineacion a la derecha de los elementos del menu de header*/
#navMain>ul>li, #header-curr button, #header-curr ul{
	text-align:right
}

@media (min-width: 480px) {
	.popover.shoppingcartpopover{
		width: 350px;
		max-width: none;
	}
}
.shoppingcartpopover #shoppingcartpopoverListWrapper{
	max-height: 50vh;
    overflow-x: hidden;
	transition:.25s ease;
}
@media(min-width:768px){
	.shoppingcart_height{
		max-height: calc(50vh - 168px) !important;
	}
}

#toaster-cart-add{
	margin: 0 10px;
}
#toaster-cart-add .alert{
    background-blend-mode: soft-light;
    border-width: 3px;
    border-color: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
}
#toaster-cart-add .glyphicon-shopping-cart{
    font-size: 2em;
    margin-right: 10px;
    margin-bottom: 5px;
    border-style: solid;
    text-decoration: none;
    text-align: center;
    border-radius: 50%;
    width: 50px;
    line-height: 50px;
    height: 50px;
}

/* oculta spinner de input para añadir al carrito si se tiene configurados botones a los lados*/
.ig-cart-quantity > input[name="cart_quantity"]{
	-moz-appearance:textfield; /* Firefox */
}
.ig-cart-quantity > input[name*="cart_quantity"]::-webkit-outer-spin-button,
.ig-cart-quantity > input[name*="cart_quantity"]::-webkit-inner-spin-button{
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


@media (min-width: 768px){
	/* fijar el menu de categorias (> col-xs-*) al hacer scroll en la pagina */
	#navCatTabsWrapper.affix{
		top: 50px
	}
	/* ocultar el icono de logo de la tienda del header */
	.navbar-brand{
		opacity:0;
	}
	/* ocultar listados de categorias que desborden. esta clase se quita con javascript */
	.nav-collapsing{
		overflow: hidden;
		max-height: 4rem;
	}
}

/* nombre de tienda del header es h1, se da estilo para que parezca span */
#navbarStoreName{
	display: inline;
	font-size: inherit;
	line-height: inherit;
}

/* icono y nombre de la tienda (= col-xs-*) */

@media (max-width: 767px) {
	.navbar-brand
	{
		position: absolute;
		width: 50%;
		left: 0;
		right:0;
		top: 0;
		text-align: center;
		margin: auto;
	}
	/* mostrar el icono de logo de la tienda del header en movil */
	.navbar-brand.hide-opacity, .navbar-brand.show-opacity {
		opacity: 1;
		-webkit-animation: none;
		animation:         none;
	}
}

.btn.btn-fb-login{
	background-color: #4267b2;
	border-color: transparent;
	color: #fff;
	text-shadow: none;
}
.btn.btn-fb-login:hover, .btn.btn-fb-login:focus, .btn.btn-fb-login:active:focus{
	background-color: #365899;
	border-color: transparent;
	color: #fff;
}
.btn.btn-fb-login:active, .btn.btn-fb-login:active:hover{
	background-color: #577fbc;
	border-color: transparent;
	color: #fff;
}
/* margen para redes sociales entre movil portrait y landscape*/
@media (max-width: 767px) and (min-width:480px) {
	#socialHeader{
	    margin-top: 0.5em;
	}
}
/* bof custom collapsing navbar links */

@media (min-width: 768px) {
	#navCatTabsUl .dropdown:hover>.dropdown-menu,
	#navCatTabsUl .dropdown-submenu:hover>.dropdown-menu{
		display:block
	}
	/*submenus*/
	.scrollable-menu, .navbar-nav>.dropdown>.dropdown-menu {
		height: auto;
		overflow-x: hidden;
		/* lo que mida el ancho menos lo que llegue a medir el menu del header */
		max-height: calc(100vh - 120px);
	}
	
	/* margen entre los componentes de boton de nav de bootstrap */
	#language .navbar-btn, #header-lan .navbar-btn{
		margin-left: 10px;
	}
}

/* si el componente de busqueda queda dentro del navbar, se limita su altura*/
.navbar .quick-find-result {
	height: auto;
	overflow-x: hidden;
}

/* eof custom collapsing navbar links */

/*icono de carrito en el css del sidebox orderhistory y carrito actual*/
.orderHistList li:before, .cartBoxList li:before {
    /*Using a Bootstrap glyphicon madding-bottomas the bullet point*/
    content: "\e116";
    font-family: 'glyphicon' !important;
    position: relative;
    margin-right: 5px;
}

/* bof  content*/
#myCarousel{
	margin-bottom: 20px
}
/* sólamente mostrar el primer elemento de owl carousel oculto, para mejorar metrica Cumulative Layout Shift (CLS)  */
.owl-carousel:not(.owl-loaded) > :not(:first-child),
/* ocultar el contenido en texto de data-params para los carruseles genericos (creados desde ezpages o paginas especiales) */
.panel-body-carousel > .data-params
{
	display:none
}

/* 
hacer que las imagenes se muestren con la misma proporción
Si las imagenes tienen proporciones muy diferentes, algunas se va a ver que se corta mucho
*/

#myCarousel .owl-stage {
    display: flex;
}
#myCarousel .owl-item .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: initial;
}

#myCarousel .owl-dots{
	position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
}

#myCarousel .owl-nav button{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
	color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
	opacity: .5;
	background-repeat: repeat-x;
	/* sobreescribir valores de la clase btn*/
	border:none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}
#myCarousel .owl-nav button:first-of-type{
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
    background-image: -o-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001)));
    background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
#myCarousel .owl-nav button:last-of-type{
	right: 0;
	left: auto;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
    background-image: -o-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.5)));
    background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
#myCarousel .owl-nav button:hover,#myCarousel .owl-nav button:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    filter: alpha(opacity=90);
	opacity: .9;
	background-position: 0;
}

/* para la clase lazy, hay que dejar un tamaño inicial, de otra manera todos quedan con el mismo tamaño, 
todos se muestran en la misma pantalla y pierde la funcionalidad para cargar sólo los elementos que se muestren en pantalla */
.lazy{
	min-height: 500px;
}

/* bof Corrección de línea blanca que aparece al pasar sliders*/
#myCarousel .owl-item {
	margin-right: 0 !important;
	width: 100% !important;
}
@media(max-width:767px){
	#myCarousel .owl-item:last-child {
    	padding-right: 20px;
	}
}
/* eof Corrección de línea blanca que aparece al pasar sliders*/

/* bof thumbnails para el componente de extra_products_links */
#extra-products .thumbnail {
    position:relative;
    overflow:hidden;
}
 
#extra-products .caption {
    position:absolute;
    top:0;
    right:0;
    background-color:#428BCA;
    background-color:rgba(66, 139, 202, 0.75);
    width:100%;
    height:100%;
    padding:2%;
    text-align:center;
    color:#fff !important;
    z-index:2;
    cursor:pointer;
}
/* eof thumbnails para el componente de extra_products_links */

/* bof detalle de producto*/

.product_content{
	border-top:1px solid #ddd;
	text-align: center;
}

.product_price, .total-form-cc-msi, .cartBoxTotal,
#productPrices, #productReviewsDefaultPrice, #reviewsInfoDefaultPrice, #reviewsWritePrice{
	color: var(--brand-danger);
}
/* 
se agrega un espacio por css entre el precio normal y oferta, 
por que se modificó la funcion de precios que ponía 
directamente un espacio entre los elementos y daba problemas 
a la hora de dar estilos personalizados a los elementos
*/
.normalprice + .productSpecialPrice:before,
.normalprice + .productSpecialPriceSale:before
{
	content:"\00a0";
}
/* estilos a las clases de precios con descuentos */
.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
}
.productPriceDiscount, .normalprice{
    font-size: small;
}

.product_image img{
	margin: 0 auto
}
.button_sold_out_sm.btn.btn-default{
	margin:10px
}
.button_openpay_download_pdf{
	margin-left:1em;
}
#checkoutSuccessOrder_openpay .button_openpay_download_pdf{
	margin:1em 0;
}
/* para botones al 100%, esto evita dibujar la linea de un link al hacer hover */
a .cssButton.btn-block{
	display: inline-block;
}
/* se copia color de .table-striped>tbody>tr:nth-of-type(odd) */
.productListing-odd{
    background-color: #f5f5f5
}
.productListing-odd, .productListing-even{
	padding: 5px 0
}
/* eof detalle de producto*/

/*bof sideboxes*/
/*reset de padding bootstrap*/
#orderhistoryContent div[class^="col-"], #shoppingcartContent div[class^="col-"]{
    padding-left: 5px;
    padding-right: 5px;
}
.glyphicon-title{
	text-align:center;
    font-size: 4em;
    display: inline-block;
    width: 100%;
}
/* margen para el link de busqueda avanzada */
.advanced-search-box{
	margin: 12px 0;
}
.live_search_content{
	max-height: calc(100vh - 320px);
	overflow-y: scroll;
	overflow-x: hidden;
}
.live_search_content .normalprice, .live_search_content .productPriceDiscount{
	display:none;
}
.live_search_content .row:not(:last-of-type){
	margin-bottom:10px;
}

.quick-find-result{
	position: absolute;
	width: 100%;
	z-index: 1002;
	left: 0;
	top: 100%;
	padding-left: inherit;
	padding-right: inherit;
}
.quick-find-result a{
	overflow:hidden;
}
/* sidebox categorias */
.sideBoxContent .category-subs, .sideBoxContent li.has_sub:not(.currentParent){
	border-bottom: 1px solid #ddd;
	margin: 5px 0;
}
.sideBoxContent li.has_sub .list-unstyled{
	border-top: 1px solid #ddd;
	clear: both;
}
.sideBoxContent li.has_sub .list-unstyled .no_sub:first-child{
	margin-top: 5px;
}
.sideBoxContent li.has_sub{
	margin: 5px 0;
}
.sideBoxContent .category-subs a:before, .sideBoxContent li.has_sub > .sub-collapse:after{
	content: '+';
}
.sideBoxContent .category-subs .category-subs-parent:before, .sideBoxContent li.has_sub.currentParent > .sub-collapse:after{
	content: '-';
}
.sideBoxContent .category-subs a:before, 
.sideBoxContent a.has_sub:before,
.sideBoxContent .category-subs-selected, 
.sideBoxContent .category-subs-parent,
.sideBoxContent a.current, 
.sideBoxContent a.currentParent{
	font-weight: bold;
}
.sideBoxContent .has_sub:not(.currentParent) .list-unstyled{
	display:none;
}

.sideBoxContent li.has_sub > .sub-collapse{
    width: 1em;
    padding-left: 1em;
    /* display: inline-block; */
    float: right;
}
/* simular una sangria en el texto, cuando este salta una linea*/
/* .sideBoxContent li.has_sub{ */
.sideBoxContent li.level_2, .sideBoxContent li.level_3, .sideBoxContent li.level_4{
    text-indent: -1em;
    padding-left: 1em;
}
/* modificar el tamaño de cada subelemento, hacerlo mas pequeño*/
.sideBoxContent li.level_2 > a{
    font-size: 95%;
}
.sideBoxContent li.level_3 > a{
    font-size: 90%;
}
.sideBoxContent li.level_4 > a{
    font-size: 85%;
}
.sideBoxContent li.has_sub > .sub-collapse:hover{
    cursor:pointer;
}
.sideBoxContent li.has_sub > .sub-collapse:after{
    float:right;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 30px;
}
/*
.sideBoxContent li.has_sub > span:hover{
	cursor:pointer;
}
.sideBoxContent li.has_sub > span:after{
	float:right;
	padding-left: 6px;
    padding-right: 6px;
    border-radius: 30px;
}
.sideBoxContent li.has_sub.currentParent{
	position:relative;
}
.sideBoxContent li.has_sub.currentParent > span{
	position:absolute;
	top: 0;
    right: 0;
}
*/
.sideBoxContent li.has_sub .show-filter {
	cursor: pointer;
	padding-right: 8px;
}

/* colores de borde para cajas de imagenes */
.centerBoxContentsProducts.thumbnail:hover,
.centerBoxContentsProducts.thumbnail:focus,
.centerBoxContentsProducts.thumbnail.active,
.productListing-data .img-thumbnail:hover,
.productListing-data .img-thumbnail:focus,
.productListing-data .img-thumbnail.active,
.sideBoxContent.thumbnail:hover,
.sideBoxContent.thumbnail:focus,
.sideBoxContent.thumbnail.active {
	border-color: var(--link-color);
}

#product_list_filter .panel-body{
	max-height: 30em;
    overflow-y: auto;
    overflow-x: hidden;
}

#product_list_filter .panel-title{
    font-size: 0.9em;
}

#product_list_filter .panel-heading button{
    font-size: 0.7em;
}

@media (max-width: 767px) {
	#navColumnOne .leftBoxContainer, #navColumnTwo .rightBoxContainer{
		margin-bottom: 5px;
	}
	#navColumnOne, navColumnTwo{
		margin-bottom: 10px;
	}
}

/* eof sideboxes*/

/* bof buttons */
#language .spr, #header-lan .spr{
	vertical-align:sub;
}
/* eof buttons */

/* bof checkout_payment */
#orderTotals{
	background-color: inherit;
}
/* alinea verticalmente los totales del pedido */
#orderTotals .row{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.totalBox{
	text-align: right;
}

#checkoutOrderTotals #orderTotals{
    padding-top: 0;
    border-top: none;
}
#ottotal {
    font-weight: bold;
}

/* eof checkout_payment */

/* correccion de error en columnas responsivas para iphone e ipad. Evita que el encabezado de la tabla se corte */
.table-responsive .table {
    max-width: none;
}

/* ocultar elementos vacios */
#header-lan-curr:empty,
.alert:empty,
.gvBal:empty,
.redem_instructions:empty,
.control-label:empty,
.panel:empty,
h1:empty{
	display:none;
}
#customerAuthDefaultImage .glyphicon{
	font-size: 8em;
}
/* boton de mylivechat para la opcion sin javascript */
.btn.btn-mylivechat{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	right:40px;
	font-size:2em;
	border-radius:50px;
	z-index:10;
	box-shadow: 2px 2px 3px #999;
}
.btn-mylivechat span{
	vertical-align: middle;
}

/* dibujar el scroll en moviles */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #7f7f7f;
    border-radius: 6px;
    border: 2px solid #fff;
}

::-webkit-scrollbar-track {
    border-radius: 6px;  
    background-color: #fff;
}

.modal #allManufacturersDefault .row {
    max-height: calc(575px - 8vh);
    overflow-y: scroll;
}

/* 
hacer que el icono del modal de loading se muestre tras 250 milisegundos 
esto para evitar que en conexiones rápidas se vea el flashaso del icono que aparece y desaparece muy rápido
*/
.modal-loading {
    animation: modalLoading 0s 250ms forwards;
    visibility: hidden;
}
  
@keyframes modalLoading {
    to   { visibility: visible; }
}

/* colors start*/
.well > a{
	color: var(--link-color);
}
/* colors end*/
.bold{
	font-weight: bold;
}