/* YM Base - 1.0.0 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,900');

:root {
    /* FONTS */
    --main-font: "Montserrat", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* COLOR PALETTE - replace values with client's color palette */
    --color-primary: #2f122e; 
    --color-primary-lighten: #F4F5F5;
    --color-primary-darken: #2f122e;
    --color-primary-contrast-text: #ffffff;
    --color-secondary: #FF8824; 
    --color-secondary-lighten: #fce4d0;
    --color-secondary-contrast-text: #2f122e;
    --color-tertiary: #2f122e ;
    --color-tertiary-lighten: #ffe3ff;
    --color-tertiary-darken: #2f122e; /* A11y ok with color-light */
    --color-tertiary-contrast-text: #ffe3ff;
    --color-complementary: #6a6a6a;
    --color-complementary-darken: #6a6a6a; /* A11y ok with color-light */
    --color-complementary-contrast-text: #3C3C3B;
    --color-light: #FFFFFF;
    --color-dark: #2f122e;
    --color-neutral-1: #333;
    --color-neutral-2: #f9f9f9;
    --color-neutral-3: #CFCFCF;
    --color-neutral-4: #E9E9E9;
    --color-neutral-5: #F4F5F5; 
    --color-neutral-1-translucid: rgba(60, 60, 59, 0.9);
    --color-neutral-5-translucid: rgba(244, 245, 245, 0.95);
    --gradient-primary: linear-gradient(to right, #ff3363, #ff8200);
    /* BACKGROUNDS & TEXT COLOR - replace values with color variables */
    --default-text-color: var(--color-dark);
    --featured-categories-bg: var(--color-light);
    --featured-category-text-color: var(--color-dark); 
    --featured-products-bg: var(--color-primary-lighten);
    --featured-products-text-color: var(--color-secondary-contrast-text);
    /* TOPBAR */
    --topbar-bg-color: var(--color-light);
    --topbar-text-color: var(--color-dark);
    /* NAVBAR */
    --navbar-bg-color: var(--color-primary);
    --navbar-text-color: var( --color-primary-contrast-text);
    /* BANNERS - replace values with color variables or images */
    --userinfo-banner-bg: var(--color-neutral-2); 
    --mymovements-banner-bg:var(--color-neutral-2);  
    --myproducts-banner-bg:var(--color-neutral-2); 
    --myvouchers-banner-bg:var(--color-neutral-2); 
    --cart-banner-bg:var(--color-neutral-2); 
    --header-section-bg: var(--color-neutral-2); 
    /* FOOTER */
    --footer-bg-color: var(--color-neutral-5);
    --footer-text-color: var(--color-neutral-1);
    --footer-text-hover-color: var(--color-primary);
}

body {
    font-family: var(--main-font);
    color: var(--default-text-color);
}

/* TOPBAR */
.app-full-topbar {
    background: var(--gradient-primary);
    color: var(--topbar-text-color);
}

.profile-menu-header-container {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast-text);
}

/* Custom catalog logo */
.catalog-logo {
    background-image: url("https://s3-us-west-2.amazonaws.com/ym2-static-repository-cl-prod/logo/39/catalog_logo.png") !important;
}

/* NAVBAR */
.app-full-navbar {
    background-color: var(--color-primary);
    color: var(--navbar-text-color);
}

/* BANNERS */

.cart-banner {
    background: var(--cart-banner-bg);
}

.myproducts-banner {
    background: var(--myproducts-banner-bg);
}

.userinfo-banner {
    background: var(--userinfo-banner-bg);
}

.myvouchers-banner {
    background: var(--myvouchers-banner-bg);
}

.mymovements-banner {
    background: var(--mymovements-banner-bg);
}
.header-movimientos>div:first-child {
    border-bottom: none;
}
.header-profile>div:first-child {
    border-bottom: none;
}
.header-section {
    background: var(--header-section-bg);
}

/* BUTTONS */
/* WIP: button's styles and classes will be modified */
.btn-default,
.btn-primary,
.item-action-button,
.item-action-button.MuiButtonBase-root,
.btn-new,
.btn-cards,
.bg-brand-1,
.bg-brand-2 {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast-text);
    border: 1px solid var(--color-primary);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-cards:hover,
.btn-cards:focus,
.btn-cards:active,
.bg-brand-1:hover, 
.bg-brand-1:focus,
.bg-brand-1:active, 
.bg-brand-2:hover,
.bg-brand-2:focus,
.bg-brand-2:active {
	background-color: transparent;
    color: var(--color-secondary-contrast-text);
	border: 1px solid var(--color-secondary-contrast-text);
}

/* buttons in featured products section */
.wrapper-featured-bg .item-action-button {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border: 1px solid var(--color-secondary);
}

.wrapper-featured-bg .item-action-button:hover {
	background-color: transparent;
    color: var(--color-primary-contrast-text);
	border: 1px solid var(--color-primary-contrast-text);
}

/* FEATURED CATEGORIES */

.featured-category-title {
    color: var(--featured-category-text-color);
}

.featured-categories-container .featured-category-title:hover {
    color: var(--color-primary);
}

.featured-categories-container .featured-category-icon-background {
    background-color: rgba(74, 85, 224, 0.2); /* to hide change last value to 0 */
}

/* PRODUCTS */

.wrapper-featured-bg {
    background-color: var(--featured-products-bg);
    color: var(--featured-products-text-color);
}

.wrapper-featured-bg .item-price {
    color: var(--color-dark);
}

/* Featured products slider dots */
.show-grid .slick-dots li {
    border: 1px solid var(--color-light);
}

.show-grid .slick-dots li.slick-active button {
    background-color: var(--color-light);
}

.MuiAvatar-root.item-icon-delivery {
    color: var(--color-light);
    background-color: var(--color-tertiary);
}

.item-info {
    color: inherit;
}

.item-price {
    color: var(--color-dark);
}

/* PRODUCT DETAIL */
.item-detail-action .item-action-button.outlined {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.item-discount div {
    border-color: var(--color-dark);
}

.item-discount div span {
    color: var(--color-dark);
}

/* CATEGORY RESULTS */

.subheader-feat-category .subheader-filtros button {
    border: 1px solid var(--color-primary);
    background-color: var(--color-light);
}

/* Material UI Overrides filter buttons */
.custom-MuiIconButton-root:hover {
    background-color: inherit;
    color: var(--color-primary);
}

.custom-ArrayForwardIcon {
    background-color: var(--color-neutral-1);
    color: var(--color-light)
}

.custom-ArrayForwardIcon:hover {
    background-color: var(--color-primary);
}

/* CONTACT US FAB */
#contact-us-fab {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast-text);
	font-family: var(--main-font);
    font-weight: 600;
}

/* FOOTER */
.footer-container {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
}

.footer-item:hover {
    color: var(--footer-text-hover-color);
}


/* AGREGADO  */
/* Colores Base MuiBadge-badge  */
.cart-badge .MuiBadge-badge {
	background-color:  var(--color-primary);
	color: var(--color-primary-contrast-text);
}

.topbar-cart:focus, .topbar-cart:hover {
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
	color: inherit;
}
.cart-badge:hover {color: inherit;}
.contact-us-footer {
	background-color:  var(--color-secondary); 
	color: var(--color-secondary-contrast-text);
}

/* color de botones para elegir monto de la GC  */
.item-detail-virtualbutton button {
	background:  var(--color-primary);
	color: var(--color-primary-contrast-text);
}
.item-detail-virtualbutton button:hover { 
	background: var(--color-primary-lighten);
}

/* Colores Loaders  */
#loader {
	background-color: var(--color-primary);
}
#loader>div:first-child {
	border-top: 16px solid var(--color-secondary);
}
#loaderMenu>div:first-child {
	border-top: 16px solid var(--color-tertiary);
}
.featured-categories-container .featured-category-icon-background {
    background-color: rgb(89 186 171 / 20%);
}

/* Colores Hover de Boton Canjear */
.item-action-button.MuiButtonBase-root:active, .item-action-button.MuiButtonBase-root:focus, .item-action-button.MuiButtonBase-root:hover, .item-action-button:active, .item-action-button:focus, .item-action-button:hover {
	background-color: transparent;
    color: var(--color-secondary-contrast-text);
	border: 1px solid var(--color-secondary-contrast-text);
}
/* Para centrar el boton de Canjear */
.boxed-item .item-action{margin: auto;}

.btn-scroll{
	border: 1px solid var(--color-primary);
}

/* color de modal login */
.modalLoginMain .modal-dialog .modal-content .modal-header {
    background-color: #d1d1d1;
}
/* color de boton Confirmar Pedido Carrito */
#root .ym-button--success, .modal-dialog .ym-button--success {
    color:  var(--color-secondary-contrast-text);
	background-color: var(--color-secondary);}


#root .ym-button--success:hover, .modal-dialog .ym-button--success:hover {
	background-color: var(--color-secondary-lighten);
    color: var(--color-secondary-contrast-text);
}

/* color de labels para formularios con texto muy pequeno */
label{
	color: var(--color-dark) !important;
}
.cart-dialog {
    padding: 30px 0px !important;
    background: #fff;
}
.tableWalletHistory, .tableWalletHistory thead tr th {
    background: #fff;
    color: #65524c;
    border: 2px solid #65524c;
}
.card-password, .card-profile-direccion{
	background: #f4f5f5;
}
.featured-categories-container .featured-category-icon-background {
    background-color: rgb(191 209 187 / 25%);
}

/* color de hover de las categorias de productos en el menu de categorias */
.subcategories-menu-list li .subcategories-item:hover {
    color: var(--color-tertiary);
}
/* color de hover de los items del FAB */
.MuiList-root.contact-us-list .contact-us-link:focus, .MuiList-root.contact-us-list .contact-us-link:hover
{
    color: var(--color-tertiary);
}
/*Color de los encabezados de las paginas internas*/
.cart-header, .header-movimientos, .header-productos, .header-profile, .header-section
{ 
	color: var(--color-secondary-contrast-text);
}
.font-select
{ 
	color: var(--color-secondary-contrast-text) !important;
}
.spacingVoucher .selectVoucher:after, .spacingVoucher .selectVoucher:before {
    border-bottom: 2px solid var(--color-secondary-contrast-text);
}
.spacingVoucher svg {
    color: var(--color-secondary-contrast-text);
}
.spacingProduct .selectProduct:after, .spacingProduct .selectProduct:before {
    border-bottom: 2px solid var(--color-secondary-contrast-text);
}
.spacingProduct svg{
   color: var(--color-secondary-contrast-text);
}
.spacingWalletHistory .selectWallet:after, .spacingWalletHistory .selectWallet:before{
    border-bottom: 2px solid var(--color-secondary-contrast-text);
}
.spacingWalletHistory svg {
    color: var(--color-secondary-contrast-text);
}
/* saca el borde inferior del encabezado de las secciones internas*/
.header-productos>div:first-child
{
	border-bottom: none;
}
.MuiList-root.contact-us-list .contact-us-link:hover {
    color: var(--color-tertiary);
}
#forgot-password-text {
    color: var(--default-text-color);
}
button.btn.btn-sm.btn-link.btn-block {
    background-color: var(--color-primary-contrast-text);
    color: var(--color-primary-darken);
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
	margin: 0 5px 6px;
}
button.btn.btn-sm.btn-link.btn-block:hover {
	background-color: var(--color-secondary);
    text-decoration: none;
}
#forgot-password-text {
    color: var(--default-text-color);
}
/* ajusta la opacidad del boton cancelar en el agregado de una direccion, sino desaparece el boton */
.MuiButton-root:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
.ymlite-modal-login-email {
    background-color: #ffffff!important;
}
.MuiInputLabel-animated {
    padding-left: 5px;
}