/* 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", sans-serif;
    /* COLOR PALETTE - replace values with client's color palette */
    --color-primary: #6200ea; 
    --color-primary-lighten: #aa00ff;
    --color-primary-darken: #6200ea;
    --color-primary-contrast-text: #ffffff;
    --color-secondary: #8800CC; 
    --color-secondary-lighten: #aa00ff;
    --color-secondary-contrast-text: #ffffff;
    --color-tertiary: #8800CC ;
    --color-tertiary-lighten: #aa00ff;
    --color-tertiary-darken: #6200ea; /* A11y ok with color-light */
    --color-tertiary-contrast-text: #ffffff;
    --color-complementary: #00A4B4;
    --color-complementary-darken: #007681; /* A11y ok with color-light */
    --color-complementary-contrast-text: #3C3C3B;
    --color-light: #FFFFFF;
    --color-dark: #000000;
    --color-neutral-1: #63666a;
    --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(90deg, rgba(98, 0, 234, 1) 0%,rgba(170, 0, 255, 1) 100%);
    /* 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);
    --featured-products-text-color: var(--color-primary-contrast-text);
    /* TOPBAR */
    --topbar-bg-color: var(--color-light);
    --topbar-text-color: var(--color-primary);
    /* NAVBAR */
    --navbar-bg-color: var(--gradient-primary);
    --navbar-text-color: var( --color-primary-contrast-text);
    /* BANNERS - replace values with color variables or images */
    --userinfo-banner-bg: var(--gradient-primary); 
    --mymovements-banner-bg: var(--gradient-primary); 
    --myproducts-banner-bg: var(--gradient-primary);  
    --myvouchers-banner-bg: var(--gradient-primary); 
    --cart-banner-bg: var(--gradient-primary);  
    --header-section-bg: var(--gradient-primary);
    /* 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-color: var(--topbar-bg-color);
    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://ym2-static-repository-ar-uat.s3.us-west-2.amazonaws.com/logo/91/catalog_logo.png") !important;
}
.topbar-logo {
    width: 188px;
	height: 70px;
}
/* NAVBAR */
.app-full-navbar {
   background: var(--gradient-primary); 
   color: var(--color-light);
}

/* 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-section {
    background: var(--header-section-bg);
}

/* BUTTONS */
/* WIP: button's styles and classes will be modified */
.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);
}

.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: var(--color-primary-lighten);
    color: var(--color-primary-contrast-text);
}

/* buttons in featured products section */
.wrapper-featured-bg .item-action-button {
    background-color: var(--color-primary-contrast-text);
    color: var(--color-primary);
}

.wrapper-featured-bg .item-action-button:hover {
    background-color: var(--color-neutral-4);
}

/* 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-light);
}

/* 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-secondary);
}
.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: var(--color-primary-lighten);
    color: var(--color-primary-contrast-text);
}
/* Para centrar el boton de Canjear */
.boxed-item .item-action{margin: auto;}

/* color de botones por Default  */
.btn-default, .btn-primary {
    color: var(--color-primary-contrast-text);
	background-color: var(--color-primary);
}

.btn-default:active, .btn-default:active:focus, .btn-default:active:hover, .btn-default:focus, .btn-default:hover{
	background-color: var(--color-primary-lighten);
	color: var(--color-primary-contrast-text);
}
.btn-scroll{
	border: 1px solid var(--color-primary);
}

/* color de modal login */
.modalLoginMain .modal-dialog .modal-content .modal-header {
    background-color: #ffffff;
}
/* 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;
}
/* color de labels para header de Productos-movimientos-mis vouchers*/
.header-productos label.control-label {
    color: var(--color-light) !important;
}
.header-movimientos label.control-label {
    color: var(--color-light) !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(136 0 204 / 20%);
}

/* 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-primary-contrast-text);
}
.font-select
{ 
	color: var(--color-primary-contrast-text) !important;
}
.spacingVoucher .selectVoucher:after, .spacingVoucher .selectVoucher:before {
    border-bottom: 2px solid var(--color-primary-contrast-text);
}
.spacingVoucher svg {
    color: var(--color-primary-contrast-text);
}
.spacingProduct .selectProduct:after, .spacingProduct .selectProduct:before {
    border-bottom: 2px solid var(--color-primary-contrast-text);
}
.spacingProduct svg{
   color: var(--color-primary-contrast-text);
}
.spacingWalletHistory .selectWallet:after, .spacingWalletHistory .selectWallet:before{
    border-bottom: 2px solid var(--color-primary-contrast-text);
}
.spacingWalletHistory svg {
    color: var(--color-primary-contrast-text);
}
/* saca el borde inferior del encabezado de las secciones internas*/
.header-productos>div:first-child
{
	border-bottom: none;
}