/* Estilos del contenedor principal de la pantalla */
.component-main-shopping {
  /* width: 95%; */
  height: 100%;
  /* background-color: #FFFFFF; */
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

/* Estilos del contenido de los contenedores izquierdo y derecho */
.content-component {
  width: 100%;
  height: 92%;
  display: flex;
  flex-direction: row;
}

/* Estilos del contendedor izquierdo */
.content-left {
  width: 20%;
  height: 99.5%;
  overflow: auto;
  padding-top: 4px;
  /* border: 2px solid red; */
}

/* Estilos del contendedor derecho */
.content-right {
  width: 80%;
  height: 93%;
  overflow: auto;
  border-radius: 10px;
  background-color: #F3F3F3;
  display: flex;
  padding: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid #CCC !important;
}

/* Estilos del encabezado */
.header-component {
  width: 100%;
  height: 8%;
  display: flex;
  flex-direction: row;
  /* border: 2px solid blueviolet; */
}

/* Estilos de cada sección del encabezado */
.seccion-header {
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  /* border: 2px solid orange; */
}

/* Estilos del título de la pantalla */
.title {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 21pt;
}

/* Estilos de la posición de los botones derechos */
.shopping {
  justify-content: right;
}

/* Estilos de personalizados de la card */
.card-personality {
  border-radius: 10px;
  width: 350px;
  height: 410px;
  margin: 15px;
  transition: box-shadow .3s;
  box-shadow: none !important;
  border: 1px solid #CCC !important;
  cursor: pointer;
}

/* Estilos personalizados de la card al pasar el mouse */
.card-personality:hover {
  /* box-shadow: 0px 4px 2px -3px rgb(0 0 0 / 20%), 0px 4px 3px 0px rgb(0 0 0 / 14%), 0px 3px 5px 0px rgb(0 0 0 / 12%); */
  cursor: pointer;
  border: 0px solid #FFF !important;
  box-shadow: 0px 2px 20px rgb(33 33 33 / 20%) !important;
  /* box-shadow: none; */
}

/* Estilos de las posiciones de la imagen principal en las cards */
.card-image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  margin-bottom: 0;
}

/* Estilos de la imagen principal de las cards */
.card-image img {
  width: auto;
  height: 250px;
}

/* Estilos de la posición de los logotípos de los proveedores */
.card-accions {
  width: 100%;
  height: 65px;
  display: flex;
  overflow: hidden;
  justify-content: flex-end;
  padding-right: 40px;
}

/* Estilos de las imagenes de los logotípos de los proveedores */
.image-prov {
  width: 65px;
  height: auto;
  margin: 10px;
}

/* Estilos del título de Categorias */
.categories-title {
  padding: 10px;
  font-size: 16pt;
}

/* Cambia únicamente el color del arbol de categorías */
mat-tree {
  background-color: #FAFAFA;
}

/* Titulo del arbol de categorías */
.title-category {
  color: #000000;
}

.title-category:hover {
  cursor: pointer;
  color: #505050;
  font-weight: 550;
}

.load-and-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.load-artitle{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.load-artitle span{
  font-size: 18pt;
  margin-top: 30px;
}

.load-family {
  height: 67%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.load-family span{
  font-size: 18pt;
  margin-top: 30px;
}

.txt-search {
  width: 95%;
}
