 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
:root {

  /* Colors */
  /*--vidali_green: #1FCC44;*/
  --vidali_green: #4BBD9A;
  /*--vidali_hover: #40e263;*/
  --vidali_hover: #3e9c52;
  --title-color: #19181B;
  --text-color: #58555E;
  --text-color-light: #A5A1AA;
  --color-red: #C84242;
  /*========== Font and typography ==========*/
  
  
}
.header{
  padding: 0 1.9rem;
}
.header .header__container .header__search-container .date,
 .header__search-container .name-ingredient,
 .header__search-container .id-ingredient{
  display: none;
}
.nav__dropdown-item:hover{
  color: var(--first-color);
}
.product__summary-container{
  background-color: var(--container-color);
}
/*========== TABLE STYLES ==========*/
.table__container {
position: relative;
height: auto;
  width: 90%;
  margin: 15px auto;
  padding: 15px;
  background-color: var(--container-color);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.table__container .producto,
.table__container .igredient{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* Visible & Hidden Tables*/


.visible {
opacity: 1;
visibility: visible;
position: relative;
}

.hidden {
opacity: 0;
visibility: hidden;
position: absolute;
}
.table-title{
  font-size: 1.1rem;
  font-weight: var(--font-medium);
  color: var(--title-color);
}
/* Icons for switching tables*/
.table__container .icon-card {
display: inline-flex;
width: 20px;
margin-left: auto;
float: right;
font-size: 1.5rem;
color: black;
background-size: cover;
background-position: center;
background-repeat: no-repeat; 
cursor: pointer;
}
.table__container .refresh, .table__container .export{
  display: none;
}




/* thead{
  display: none;
  vertical-align: middle;
  unicode-bidi: isolate;
}*/
.table__container .next{
  display: block;
  width: 20px;
  font-size: 1.5rem;
  font-weight: var(--font-medium);
  color: black;
}
.table__container .next span{
  display: none;
}
.table__container .orderStock span{
  display: none;
}
.styled-table {
  display: flex;
  flex-direction: column;
  height: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: var(--normal-font-size);
  font-family: var(--body-font);
  min-width: 280px;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: var(--first-color-light);
  color: var(--text-color);
  text-align: left;
}
th {
  min-width: 140px;
  max-width: 150px;
  padding: 12px 15px;
}
td  {
  min-width: 140px;
  max-width: 150px;
  padding: 12px 15px;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
  color: var(--text-color);
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: var(--first-color-light);
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid var(--vidali_green);
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: var(--vidali_hover);
}

.styled-table tbody tr:hover{
  color: var(--body-color);
  cursor: pointer;
  background-color: var(--vidali_hover);
}

.styled-table button {
    outline: none;
    border: none; 
    border-radius: 6px;
    cursor: pointer;
    padding: 10px;
    color: var(--text-color); 
}
.styled-table  .delete:hover{
  color: var(--color-red);
}
.styled-table  ,.edit:hover,.info:hover,.img:hover,.img-ingredient:hover, .edit-ingredient:hover,.info-ingredient:hover{
  color: var(--vidali_green);
}

/*Colors for stock status*/
.stock-alto {
  color: #78CDB3;
  font-weight: bold;
}
.stock-bajo {
  color: #FBC037;
  font-weight: bold;
}
.sin-stock {
  color: var(--color-red);
  font-weight: bold;
}
/*========== Sweet Alert 2 ==========*/

div:where(.swal2-container).swal2-top-end>.swal2-popup, div:where(.swal2-container).swal2-top-right>.swal2-popup{
  margin-top: 57px;
}

@media (min-width: 768px){
    .header__logo{
        margin-left: 75px;
    }
  .table__container .refresh{
    display: block;
    width: 20px;
    margin-right: 13px;
    font-size: 1.5rem;
    font-weight: var(--font-medium);
    color: black;
}
.icon-card .tooltip {
  visibility: hidden;
}
.table__container .refresh:hover{
    color: var(--first-color);
}
.table__container .export{
    display: block;
    width: 20px;
    margin-right: 13px;
    font-size: 1.5rem;
    font-weight: var(--font-medium);
    color: black;
}
.table__container .orderStock{
    display: block;
    width: 20px;
    margin-right: 13px;
    font-size: 1.5rem;
    font-weight: var(--font-medium);
    color: black;
}
.table__container .export:hover{
    color: var(--first-color);
}


}
@media (min-width: 930px){
    .header__logo{
        margin-left: 75px;
    }
    .header{
        padding: 6px 5rem 0 5rem;
    }
}
