/* YM Base - 1.0.0 */
@import url('https://fonts.googleapis.com/css?family=Montserrat+Subrayada:400,700|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: #2F3AE9; 
    --color-primary-lighten: #5961de;
    --color-primary-darken: #171669;
    --color-primary-contrast-text: #FFFFFF;
    --color-secondary: #19D596; 
    --color-secondary-lighten: #00C384;
    --color-secondary-contrast-text: #171669;
    --color-tertiary: #171669;
    --color-tertiary-lighten: #2F3AE9;
    --color-tertiary-darken: #171669; /* A11y ok with color-light */
    --color-tertiary-contrast-text: #ffffff;
    --color-complementary: #A3EED5;
    --color-complementary-darken: #19D596; /* A11y ok with color-light */
    --color-complementary-contrast-text: #171669;
    --color-light: #FFFFFF;
    --color-dark: #171669;
    --color-neutral-1: #3C3C3B;
    --color-neutral-2: #9ea5b5;
    --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(var(--color-secondary),var(--color-primary));
    /* BACKGROUNDS & TEXT COLOR - replace values with color variables */
    --default-text-color: var(--color-tertiary);
    --featured-categories-bg: var(--color-light);
    --featured-category-text-color: var(--color-light); 
    --featured-products-bg: #19cf90;
    --featured-products-text-color: #2F3AE9;
    /* TOPBAR */
    --topbar-bg-color: var(--color-secondary);
    --topbar-text-color: var(--color-tertiary); 
    /* 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-tertiary);
    --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-primary);
    --footer-text-color: var(--color-primary-contrast-text);
    --footer-text-hover-color: var(--color-secondary);
}

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);
}
.search-bar { border: 2px solid #171669;}
.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/40/catalog_logo.png");
}

/* NAVBAR */
.app-full-navbar {
    background-color: var(--navbar-bg-color);
    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-section {
    background: var(--header-section-bg);
}

/* BUTTONS */
/* WIP: button's styles and classes will be modified */
.MuiButton-contained { box-shadow: none;}
.MuiButton-contained:hover {box-shadow: none;}
.common-dialog-actions .common-dialog-button.cancel-button {
	background-color: transparent;
    color: var(--color-complementary-contrast-text);
    border: 1px solid var(--color-complementary-contrast-text);
}
.common-dialog-actions .common-dialog-button.cancel-button:hover {
    background-color: #fff;
    border: 1px solid var(--color-complementary-contrast-text);
    color: var(--color-complementary-contrast-text);
}
.item-detail-action .item-action-button.outlined {
    background-color: #fff;
    border: 1px solid var(--color-complementary-contrast-text);
    color: var(--color-complementary-contrast-text);
}
.common-button,
.btn-default,
.btn-primary,
.item-action-button,
.item-action-button.MuiButtonBase-root,
.btn-new,
.btn-cards,
.bg-brand-1,
.bg-brand-2,
.common-dialog-actions .common-dialog-button {
    background-color: var(--color-complementary);
    color: var(--color-complementary-contrast-text);
    border: 1px solid var(--color-complementary-contrast-text);
	font-size: 16px;font-weight: 500;
}
.common-button:hover,
.common-button:focus,
.common-button:active,
.common-button:active:focus,
.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,
.common-dialog-actions .common-dialog-button:active, 
.common-dialog-actions .common-dialog-button:hover,
.common-dialog-actions .common-dialog-button:focus {
    background-color: var(--color-complementary-darken);
    color: var(--color-complementary-contrast-text);
}
.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-complementary-darken);
    color: var(--color-complementary-contrast-text);
}
.common-dialog-actions .MuiButton-label { font-size: 16px; font-weight: 500;}

/* 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);
}
/* color de boton Confirmar Pedido Carrito */
#root .ym-button--success, .modal-dialog .ym-button--success {
    background-color: var(--color-complementary);
    color: var(--color-complementary-contrast-text);
    border: 1px solid var(--color-complementary-contrast-text);
	font-size: 16px;font-weight: 500;}

#root .ym-button--success:hover, .modal-dialog .ym-button--success:hover {
    background-color: var(--color-complementary-darken);
    color: var(--color-complementary-contrast-text);
}
#root .ym-button--cancel, .modal-dialog .ym-button--cancel {
    background-color: var(--color-neutral-2);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.wrapper { background-color: #fff;}
#featured-categories {  background-color: #00C384;}
.featured-categories-container{ background-color: #00C384;}

/* FEATURED CATEGORIES */

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

.featured-categories-container .featured-category-icon-background {
    background-color: rgba(47, 58, 233, 0.5); /* to hide change last value to 0 */
}

/* PRODUCTS */

.wrapper-featured-bg {
    background-color: var(--featured-products-bg);
    color: var(--featured-products-text-color);
}
.item-info { color: var(--color-tertiary)}
.item-price { color: var(--color-primary);}

.wrapper-featured-bg .item-price {color: var(--default-text-color);}
.boxed-item.featured-item .item-price { color: var(--default-text-color);} 

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

/* PRODUCT DETAIL */

.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-primary);
    color: var(--color-primary-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  */

/* Texto del boton iniciar sesion  */
.topbar-user-button.MuiButton-root {
	font-family: var(--main-font);
}
/* color de botones para elegir monto de la GC  */
.item-detail-virtualbutton button {
	background:  var(--color-secondary);
	color: var(--color-secondary-contrast-text);
}
.item-detail-virtualbutton button:hover { 
	background: var(--color-secondary-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(47 58 233 / 20%);
}

.boxed-item .item-action{margin: auto;}

/* color de grilla de productos */
.boxed-item .item-image { border-bottom: 1px solid var(--color-primary);}
.grid-container>div.grid-item {border: 1.5px solid #2f3ae9;}
.grid-container>div.boxed-item:hover{border: 6px solid #2f3ae9;}

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

/* color carrito topbar */
.cart-badge .MuiBadge-badge {
	background-color: #1acf90;
    color: #2F3AE9;
	box-shadow: 2px 2px 5px 0px rgb(3 3 3 / 75%);
    -webkit-box-shadow: 2px 2px 5px 0px rgb(3 3 3 / 75%);
    -moz-box-shadow: 2px 2px 5px 0px rgb(3 3 3 / 75%);
}
/* 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-productos label.label-form-products {color: #fff !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(47 58 233 / 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);
}
.contact-us-footer{
	background-color: var(--color-primary);
	color: var(--color-primary-contrast-text);
}
/* saca el borde inferior del encabezado de las secciones internas*/
.header-productos>div:first-child
{
	border-bottom: none;
}
.search-bar-button:disabled {color: var(--color-tertiary);}
.MuiInputBase-input {color: var(--color-tertiary);}
.header-productos .MuiInputBase-input { color: var(--color-light) !important;}
.spacingWalletHistory .MuiInputBase-input {
    color: #fff !important;
}