:root {
  --main-color: #282828; /* debe contrastar con color2 */
  --main-color-strong: #0f1111;

  --color-modal-base: #333;
  
  --color-neon: fuchsia;
  --color-red: #ff0000;
  --color-red2: #ef9a9a;
  
  --color-ok: #04be04;

  
  --color-blue: #007bff;
  --color-link: #66ceff;
  --color-edit: greenyellow;


  --color2: #f7f7f7; /* debe contrastar con main-color */

  --color3: lightgray; /* debe contrastar con color4 */
  --color4: #1e1e1e; /* debe contrastar con color3 */


  --color-white: #fff; /* debe contrastar con main-color */
  --color-black: #1e1e1e;

  

  --color-lightgray: lightgray;
  

  


  --color1: #f39c12;
  --color1-hard: #df8900;

  --color-2: #df8900;

  
  --color-sombra: rgba(0, 0, 0, 0.1);

  --color-gris: grey;

  --color-4: #ddd;

  
}

* {
  word-wrap: break-word;
  word-break:keep-all;
}


html{
  font-size: 16px;
}

body
{
  background-color: var(--main-color);
  color: var(--color2);
  font-family: Arial;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

.wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

    
.containerMain /* contenedor principal para sistema de Grids */
{
  width: 100%;
  height: 100%;
  margin: auto;
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
}

header
{
  width: 100%;
  background-color:#0f1111;
  position: fixed;
  z-index: 1;
  align-items: center;
  justify-content: center;
  border-bottom: 1pt solid silver;
}

.header-container
{
  background-color: var(--color-black);
  display: flex;
  justify-content: center;
  width: 100%;
  height: 4rem;
  align-items: center;
  gap: 1rem;
}

.user-name-header{
  padding: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-neon);
}

footer
{
  background-color: var(--color-black);
  text-align: center;
  padding: 0.5rem;
}

/* Estilo base para el menú */
.navMenu{
  width: 90%;
  /*height: fit-content;*/
  /*background-color:azure;*/
  position: relative;
  /*background-color: #fff;*/
  border: 1px solid darkgrey;
  margin-top: 0.5rem;
  display: block;
  border-radius: 0.3rem;
}

.navMenu ul.menu {
  list-style: none;
  padding: 0;
  position: relative;
  /*background-color: #fff;*/
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

ul.menu-user{
  margin: 0.5rem;
}

.subnav-user{
  display: flex;
  /*width: 100%;*/
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  height: 2.2rem;
  padding: 0.8rem;
}

.subnav-user-email{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.8rem;
  padding-right: 0.8rem;
  font-size: 0.9rem;
  color: lightslategrey;
}


.navMenu .subnav > a {
  display: flex;  
  align-items: center;
  text-decoration: none;
  /*background-color: #eee;*/
  transition: background-color 0.3s ease;
  position: relative;
  font-size: 0.9rem;
}

.navMenu .subnav > span > a {
  display: block;
  padding: 10px;
  text-decoration: none;
  background-color: #eee;
  transition: background-color 0.3s ease;
  position: relative;
}

.navMenu .subnav {
  display: flex;  
  align-items: center;
  text-decoration: none;
  /*background-color: #eee;*/
  transition: background-color 0.3s ease;
  position: relative;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Estilo para el menú desplegable */
.navMenu .submenu {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  position: absolute;
  left: 0; /* Ajuste para alinear con el elemento padre */
  margin-left: 50%;
  background-color: var(--main-color);
  z-index: 1;
  /*width: fit-content;*/
}

.navMenu .subnav:hover .submenu {
  max-height: 300px;
  opacity: 1;
  z-index: 2;
}

.submenu .subnav{
  padding: 0.5rem;
  white-space: nowrap;
}

.element-menu{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  color: var(--color-link);
}

.element-menu:hover{
  color: var(--color-white);
}


.buttonBase {
  display: inline-block;
  padding: 0.6rem;
  font-family: inherit;
  border-radius: 0.3rem;
  cursor: pointer;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
  margin: 0.3rem;
  text-decoration: none;
  border: 0.1rem solid;
}

.buttonBase:hover {
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.7);
  transition: 0.5s;
}

.button2 {
  color: var(--color2);
  border-color: var(--color2);
  background-color: var(--main-color);
}

.button2:hover {
  color: var(--main-color);
  border-color: var(--main-color);
  background-color: var(--color2);
}

.button4 {
  color: var(--color-white);
  border-color: var(--color-red);
  background-color: var(--main-color);
}

.button4:hover {
  color: var(--color-white);
  border-color: var(--main-color);
  background-color: var(--color-red);
}

.button5 {
  color: var(--color-white);
  border-color: var(--color-edit);
  background-color: var(--main-color);
}

.button5:hover {
  color: var(--main-color);
  border-color: var(--main-color);
  background-color: var(--color-edit);
}

.button6 {
  color: var(--color-white);
  border-color: var(--color-blue);
  background-color: var(--main-color);
}

.button6:hover {
  color: var(--main-white);
  border-color: var(--main-color);
  background-color: var(--color-blue);
}

.button7 {
  color: var(--color-white);
  border-color: var(--color-neon);
  background-color: var(--main-color);
}

.button7:hover {
  color: var(--main-white);
  border-color: var(--main-color);
  background-color: var(--color-neon);
}

.button8 {
  color: var(--color-white);
  border-color: #00e2ff;
  background-color: var(--main-color);
}

.button8:hover {
  color: var(--color-black);
  border-color: var(--main-color);
  background-color: #00e2ff;
}

a { 
  text-decoration: none;
  color: var(--color-link);
}

a:hover { 
  color: var(--color-white);
}

.modal-base {
  display: none;
  position: fixed;
  background-color: var(--color-modal-base);
  color: var(--color2);
  padding: 1rem;
  border-radius: 0.4rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  overflow-y: auto; /* Habilita el desplazamiento vertical cuando es necesario */
  max-height: 90vh; /* Establece la altura máxima del modal al 80% de la altura de la ventana */
  animation: slideIn 0.5s forwards;
}

.modal-pujas {
  width: 85%;
  max-height: 80vh; /* Establece la altura máxima del modal al 80% de la altura de la ventana */
}


.stock-list {
  color: var(--color2);
  display: flex;
  flex-flow: wrap;
  margin-top: 0.5rem;
  border: 0.1rem solid darkgrey;
  border-radius: 0.3rem;
  padding: 0.6rem;
}

.stock-list:hover {
  border-color: var(--color-blue);
}

.pointer {
  cursor: pointer;
}

.flex-container-account {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.ultimos-pagos {
  width: 100%;
  margin-bottom: 2rem;
}

.pago-status{
  font-weight: 600;
  padding: 0.2rem;
}

.color-alert {
  color: var(--color-red2);
}

.color-ok {
  color: var(--color-ok);
}

.color-blue {
  color: var(--color-blue);
}

.dife-default {
  display: none;
  background-color: transparent;
  border: 0;
  width: 4rem;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
}

.dife-alert {
  display: inline;
  color: var(--color-red2);
  background-color: transparent;
  border: 0;
  width: 4rem;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
}

.dife-ok {
  display: inline;
  color: var(--color-ok);
  background-color: transparent;
  border: 0;
  width: 4rem;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
}

.tag-element{
  display: flex;
  justify-content: end;
	gap: 1rem;
	/*flex-flow: wrap;*/
	align-items: center;
  border-bottom: 0.1rem solid var(--color-4);
  padding: 0.3rem;
  cursor: pointer;
}

.tag-element:hover{
  color: var(--color-ok);
}


.tag-element-title{
  text-align: right;
}


.tagButton{
  display: flex;
  justify-content: end;
	align-items: center;
  padding: 0.3rem;
  border: 0.09rem solid;
  border-radius: 0.2rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.button-edit{
  border-color: var(--color-link);
  color: var(--color-link);
}

.button-edit:hover{
  background-color: var(--color-link);
  color: var(--color-white);
  transition: 0.5s;
}

.button-delete{
  border-color: var(--color-red2);
  color: var(--color-red2);
}

.button-delete:hover{
  background-color: var(--color-red2);
  color: var(--color-white);
  transition: 0.5s;
}

.formInfo {
  background-color: var(--color-blue);
  font-size: 0.8rem;
  border-radius: 0.2rem;
  padding: 0.2rem;
}

.buttonBase:hover .custom-icon-truck-solid {
  background-color: var(--color-black);
  transition: 0.5s;
}

.form-coti {
  text-align: right;
}

.coti-costo, .input-costo {
  width: 6rem;
  text-align: center;
}

.coti-costo {
  padding: 0.5rem;
  font-size: 1.5rem;
}

.utiles-item {
  color: var(--color2);
  margin-top: 0.5rem;
  border: 0.1rem solid darkgrey;
  border-radius: 0.3rem;
  padding: 0.6rem;
}

.tabla_balances_tr{
  display: flex;
  gap: 0.5rem;
}

.tabla_balances_td{
  border: 0.1rem solid darkgrey;
  border-radius: 0.3rem;
  padding: 0.6rem;
  width: 33%;
}

.nuevo-pago {
  background-color: var(--color-modal-base);
  color: var(--color2);
  padding: 1rem;
  border-radius: 0.4rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 1rem;
}

#cancelar_otros {
  display: none;
}


.pago-envio{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  color: var(--color-link);

  width: fit-content;
  border: 0.1rem solid;
  border-color: var(--color-edit);
  border-radius: 0.3rem;
}

.pago-envio:hover{
  color: var(--color-white);
}

.balance-montos{
  /*display: flex;*/
}

.balance-row{
  display: flex;
  align-items: center;
  justify-content: end;
}

.account-saldo-title{
  font-size: 0.75rem;
  /*font-weight: bold;*/
  padding: 0.2rem;
  /*width: 8.5rem;*/
  text-align: center;
}

.price-container{
  gap: 0.25rem;
  display: flex;
  align-items: center;

}

.price-whole-balance{
  /*-webkit-text-size-adjust: 100%;*/
  /*font-family: "Amazon Ember",Arial,sans-serif;*/
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  font-size: 1.3rem;
  box-sizing: border-box;
}

.price-symbol-balance{
  /*-webkit-text-size-adjust: 100%;*/
  /*font-family: "Amazon Ember",Arial,sans-serif;*/
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  box-sizing: border-box;
  position: relative;
  font-size: 0.8rem;
}

.price-symbol-balance-pedidos{
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  box-sizing: border-box;
  position: relative;
  font-size: 0.6rem;
}



.price-whole-balance-pedidos{
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  box-sizing: border-box;
  font-size: 1rem;
  top: 0.3rem;
}

[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

.greyscale{
  filter: grayscale(100%);
}

.flags-index2{
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}

.imgFlag-min2{
  width: 2.5rem;
  cursor: pointer;
}

.ventas_subtitle{
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}




















































































































.stock-list-cancelado{
  display: flex;
  flex-flow: wrap;
  /*height: fit-content;*/
  margin-top: 20px;
  margin-top: 0.5rem;
  /*margin-left: 0.5rem;*/
  /*margin-right: 0.5rem;*/
  /*margin-left: 10px;*/
  /*border: dashed;*/
  border: 0.1rem solid red;
  padding: 10px;
}

.cancelado{color: red;}






































.searchbar-container{
  border: 0.1rem solid orangered;
  background-color: orangered;
  display: none;
  justify-content:center;
  width: 100%;
  align-items: center;
}

.searchbar-container-clientes{
  border: 0.1rem solid violet;
  background-color: violet;
  display: none;
  justify-content:center;
  width: 100%;
  align-items: center;
}

.searchbar-div{
  display:flex;
  align-items: center;
  /*justify-content:center;*/
  width: 100%;
}

.divLogo{
  display:flex;
  /*background-color:#333;*/
}

.logo{
  height: 3rem;
  padding-top: 0.3rem;
  border-radius: 50%;
}

#searchBar{
  /*background-color: grey;*/
  width: 50%;
  display:flex;
  align-items: center;
  justify-content: center;
}

#searchBar-clientes{
  /*background-color: grey;*/
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search{
  align-items: center;
  justify-content:center;
  /*font-size: 16px;*/
  padding: 0.3rem;
  width: 100%;
}

.search-cliente{
  align-items: center;
  justify-content:center;
  /*font-size: 16px;*/
  padding: 0.3rem;
  height: 1.3rem;
}   

.search-no-result{
  color: cornsilk;
  font-size: 1.1rem;
}
  
.divUser{
  /*background-color:#ccc;*/
  display:flex;
  align-items: center;
  justify-content:center;
  gap: 1rem;
  cursor: pointer;
}

.iconHeader{
  display:flex;
}

.icon-user{
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}

.checkbtn{
  font-family: "Open Sans", sans-serif;
  /*font-size: 16px;*/
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: darkgray;
  cursor: pointer;
  border: 3px solid;
  /*box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;*/
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding: 0.5rem;
  display: none;
}

.checkbtn:active {
  box-shadow: 0px 0px 0px 0px;
  top: 0.2rem;
  left: 0.2rem;
}

.menu-icon{
  width:1.1rem;
}

.modal-menu{
  z-index: 1;
  /*position: absolute;*/
  /*float: left;*/
  /*left: 16rem;*/

  display : none;
  justify-content: center;
  width: 90%;

  display: none;
  justify-content: center;
  position: fixed;
  top: 5rem;
  
  /* transform: translate(-50%, -50%); */
  padding: 30px;
  border-radius: 5px;
}


.main{
  /*background-color:#ccc;*/
  margin-top: 4rem;
  /*width: 100%;*/
  gap: 1rem;

  padding: 0.5rem;
  flex: 1;
}

.divMiddle{
  flex: 1;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}


  /* -- ITEM (INICIO) -- */
.item-main {  
  /*margin-top: 130px;*/
  /*height: fit-content;*/
  /*background-color:#bdbdbd;*/
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "item-main-top item-main-top"
    "item-main-first-left item-main-first-right"
    "item-main-middle-1 item-main-middle-1"
    "item-main-middle-2 item-main-middle-2"
    "item-main-middle-3 item-main-middle-3"
    "item-main-middle-4 item-main-middle-4";
}
    
    .item-main-top {
      grid-area: item-main-top; 
      height: fit-content;
      /*border-bottom: 0.2px solid orangered;*/
      margin-bottom: 0.5rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      /*background-color:#bdbdbd;*/
      }

      .item-main-top-cliente {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        }



    
    .item-main-first-left { grid-area: item-main-first-left; background-color:#e9e9e9;}
    
    .item-main-first-right { grid-area: item-main-first-right; background-color:aliceblue;}
    
    .item-main-middle-1 { 
      padding-left: 0.9rem;
      padding-right: 0.9rem;
      grid-area: item-main-middle-1;
      /*background-color:antiquewhite;*/
    }
    
    .item-main-middle-2 { grid-area: item-main-middle-2; 
      /*background-color: #bdbdbd;*/
    }
    
    .item-main-middle-3 { grid-area: item-main-middle-3; background-color: #ef9a9a;}
    
    .item-main-middle-4 { grid-area: item-main-middle-4; }
    /* -- ITEM (FIN) -- */



    .gallery-container{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;      
      align-items: center;
      text-align: center;
    }

    .img-element-gallery{
      width: 100%;
    }

    .item-main-gallery{
      width: 50%;
    }
    

    .gallery-main-top {
      margin-top: -2rem;
      height: fit-content;
      border-bottom: 0.2px solid orangered;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      /*background-color:#bdbdbd;*/
      }
    


    /* -- PROFILE (INICIO) -- */
    .profile-main {  
      width: 100%;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      /*height: fit-content;*/
      /*background-color:#bdbdbd;*/
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto auto auto auto;
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas:
        "profile-main-top profile-main-top"
        "profile-main-subastas profile-main-subastas"
        "profile-main-compras profile-main-compras"
        "profile-main-perfil profile-main-perfil"
        "profile-main-middle-2 profile-main-middle-2"
        "profile-main-middle-3 profile-main-middle-3"
        "profile-main-middle-4 profile-main-middle-4";
  }
  
  .profile-main-top { grid-area: profile-main-top; height: fit-content; background-color:#bdbdbd;}

  .profile-main-subastas { grid-area: profile-main-subastas; height: fit-content; width: 100%;}
  
  .profile-main-compras
  {
    grid-area: profile-main-compras;
    height: fit-content;
    /* background-color: #e9e9e9; */
    width: 100%;
    /*margin-top: 0.5rem;*/
    /*padding-top: 0.5rem;*/
  }
  
  .profile-main-perfil { grid-area: profile-main-perfil; background-color:antiquewhite; display:none;} /* oculto por defecto */
  
  .profile-main-middle-2 { grid-area: profile-main-middle-2; background-color: #bdbdbd;}
  
  .profile-main-middle-3 { grid-area: profile-main-middle-3; background-color: #ef9a9a;}
  
  .profile-main-middle-4 { grid-area: profile-main-middle-4; }

  .participacion-subastas{
    padding: 0.3rem;
    background-color: #e3ffa5;
    color: black;
  }

  #pagoProc{
    display: none;
  }


  
  /* -- PROFILE (FIN) -- */
    

   

   

    .container-main{ /* para grid del index*/
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      /*gap: 1rem;*/
    }

    .grid-element{
      /*display: flex;*/
      /*flex-flow: wrap;*/
      display: contents;
    }

    .card-grid-item{ /* cada elemento en el grid del index*/
      background-color:#282828;
      width: 10rem;
      border: 0.1rem solid lightgray;
      border-radius: 0.3rem;
      /* border-bottom-right-radius: 7pt; */
      margin: 0.5rem;
      text-decoration: none;
      color: lightgray;
    }

    .card-grid-item:hover{
      /*box-shadow: 0rem 0.3rem 0.8rem 0rem rgba(0, 0, 0, 0.1);*/
      border: 0.1rem solid #007bff;
    }

    .card-grid-item-deleted{ /* cada elemento en el grid del index*/
      background-color:#282828;
      width: 10rem;
      border: 0.1rem solid var(--color-red);
      border-radius: 0.3rem;
      /* border-bottom-right-radius: 7pt; */
      margin: 0.5rem;
      text-decoration: none;
      color: lightgray;
    }

    .card-grid-item-deleted:hover{
      /*box-shadow: 0rem 0.3rem 0.8rem 0rem rgba(0, 0, 0, 0.1);*/
      border: 0.1rem solid #007bff;
    }






  .container-filters{ /* para filtros del index*/
    /*background-color: #01b2fe;*/
    display: flex;
    align-items: center;
    justify-content: left;
    /*
    padding-left: 0.5rem;
    padding-bottom: 0.3rem;
    padding-top: 0.5rem;
    */
  }

  .banner-link{
    cursor: pointer;
  }

  .bannersLeft{
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
  }

  .bannerLeftItem{
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .bannerLeftItem img{
    /*width: 100%; */
    width: 11rem;
    border-radius: 3%;
  } 

.dolar-value-header{
    display: none;
    justify-content: center;
    /* flex-wrap: wrap; */
    align-items: center;
}

.dolar-value-header .dolar-flag img{
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
}

.dolar-value-header .dolar-value{
  font-size: 0.7rem;
  padding-left: 0.3rem;
}

  .dolar-value-container{
    /*background-color: #007bff;*/
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
  }

  .dolar-value-title{
    display: flex;
    /*background-color: #00cc00;*/
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem;
  }

  .dolar-value{
    display: flex;
    /*background-color: #66CEFF;*/
    font-size: 1.2rem;
  }

  .dolar-flag{
    width: 100%;
    text-align: center;
  }
  
  .dolar-flag img{
    border-radius: 100%;
    width: 3rem;
    height: 3rem;
  }






  .gridSimilares{
      /* Grid */
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
  }

  .a-link{
    text-decoration: none;
    outline: 0rem;
    color:white;
  }

  .a-link:hover{
    text-decoration: none;
    color:#bdbdbd;
    outline: 0rem;
  }

  .ver-todas{
    padding: 0.5rem;
  }

  .a-link-2{
    text-decoration: none;
    text-decoration: none;
    color: deeppink;
  }

  .a-link-2:hover{
    text-decoration: none;
    color:#bdbdbd;
    outline: 0rem;
  }

  .card-similares{ /* cada elemento en el grid de favoritos */
    background-color: #f9f9f9;
    width: 12rem;
    position: relative;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    border: solid;
    border-color:#007bff;
  }

  .card-similares:hover{ /* cada elemento en el grid de favoritos */
    background-color: #f9f9f9;
    width: 12rem;
    position: relative;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    border: solid;
    border-color:#ecffee;
  }

  .title-cut-similares{
    white-space: nowrap;         /* Evita el salto de línea */
    overflow: hidden;            /* Oculta el texto que no cabe */
    text-overflow: ellipsis;     /* Agrega puntos suspensivos al final */
    font-size: 0.9rem;
  }



  .title-cut-compras-link {
    text-decoration: none;
  }




  .boton1 {
    padding: 0.2rem;
    color: white;
    font-family: inherit;
    border-radius: 0.2rem;
    cursor: pointer;
    border: 0.2rem solid black;
    background-color: black;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
  }

  .compras_encurso{
    display: none;
  }

  #opciones_participacion1{
    display: none;
  }

  #button_ver_mas_participacion{
    display: none;
  }




    
  .grid-loading{
    display: flex;
    height: 15rem;
    align-items: center;
  }



    .btnFacebook {
        width: 10rem;
        word-break: keep-all;
        text-decoration: none;
        display: block;
        position: relative;
        padding: 0.7rem;
        color: #fff;
        font-size: 0.9rem;
        background: #4e71a8;
        border: 0.12rem solid #4e71a8;
        align-items: center;
        justify-content: center;
        text-align: center !important; 
        margin: 0.3rem;
        margin-bottom: 1rem;
    }

    .linkFacebook{
        color: #fff;
    }    

    .linkFacebook:hover{
        color: #fff;
        text-decoration: none;
    }  

    .btnCart{
        word-break: keep-all;
        text-decoration: none;
        display: block;
        position: relative;
        padding: 0.7rem;
        color: #fff;
        font-size: 1rem;
        background: #f38029;
        /*border: 1px solid #4e71a8;*/
        align-items: center;
        justify-content: center;
        text-align: center !important;         
    }
    


    .btnInstagram {
      width: 10rem;
      word-break: keep-all;
      text-decoration: none;
      display: block;
      position: relative;
      padding: 0.7rem;
      color: #FF3CED;   
      font-size: 0.9rem;
      background: #fff;
      border: 0.12rem solid #FF3CED;   
      align-items: center;
      justify-content: center;
      text-align: center !important; 
      margin: 0.3rem;
    }

    .linkInstagram{
        color: #FF3CED;   
    }

    .linkInstagram:hover{
        color: #FF3CED;   
        text-decoration: none;
    }

    .btnWhatsapp {
      width: 10rem;
      word-break: keep-all;
      text-decoration: none;
      display: block;
      position: relative;
      padding: 0.7rem;
      color: #ffffff;   
      font-size: 0.9rem;
      background: rgb(47 161 24 / 66%);
      border: 0.12rem solid rgb(47 161 24 / 66%); 
      align-items: center;
      justify-content: center;
      text-align: center !important; 
      margin: 0.3rem;      
    }

    .linkWhatsapp{
        color: rgb(255, 255, 255);
    }    

    .linkWhatsapp:hover{
        color: rgb(255, 255, 255);
        text-decoration: none;
    }    

   

  .divLeft{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 4rem;
    max-width: 12rem;
    /*background-color:#f0f0f0;*/
    justify-content: center;
    padding-left: 0.3rem;
    padding-right: 0.3rem;

    /*padding: 1rem;*/
    flex: 1;
  }

  .divRight{
      display: flex;
      /*flex-wrap: wrap;*/
      margin-top: 4rem;
      /*width: 16rem;*/
      /*width: fit-content;*/
      width: 7rem;
      /*background-color:aliceblue;*/
      /*background-color: #f0f0f0;*/
      justify-content: center;
      align-content: center;
      text-align: center;
  }

  .banner-right{
    width: 5rem;
    margin-top:1rem;
    margin-bottom:1rem;

  }





.divBottom{
  color: #bdbdbd;
  display: flex;
  flex-flow: wrap;
  bottom: 0;
  width: 100%;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.divBottom-1{
  padding-left: 0.7rem;
  font-size: 0.9rem;
  text-align: left;
}

.divBottom-2{
  padding-right: 0.7rem;
  position: absolute;
  right: 0;
}

.divBottom-volver{
  display: flex;
  flex-flow: wrap;
  position: absolute;
  bottom:0;
  width: 100%;
  align-items: center;
  /*justify-content: center;*/
  /*text-align: center !important;*/
  border-top: 0.3rem solid silver;
  padding-top:0.5rem;
  padding-bottom:0.5rem;  
}



.contact-social-bottom{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 1rem;
}

.contact-social-div{
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.enlace{
    padding-top: 0rem;
    display: none;
}


li a.active, li a:hover{
    text-decoration: none;
    /*background-color: #fff;*/
    transition:0.5s;    
}


.side-menu{
    display: none;
} 
    
.divBottom-memory{
  display: flex;
  flex-flow: wrap;
  position: absolute;
  bottom:0;
  width: 100%;
  align-items: center;
  /*justify-content: center;*/
  /*text-align: center !important;*/
  border-top: 0.1rem solid silver;
  padding-top:0.5rem;
  padding-bottom:0.5rem;  
}    
    
.mp_saldo{
  font-size: 1.3rem;
  width: 5rem;
}

.mp_saldo_ars{
  font-size: 1.3rem;
  width: 5rem;
}








    
    


    
    
    
    
    
    
    
    .row {
      margin:0;
    }
    
    /* Create four equal columns that sits next to each other */
    .column {
      flex: 20%;
      max-width: 25%;
      padding: 0 4px;
    }
    
    .column img {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
    }
    

    
    
    
    
    
    



    





/* ---  SUBASTAS AUCTIONS --- */



.index-precios{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auction-price{
  width:100%;
  background-color:#ffffffe5;
  text-align: center;
  margin:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}





.price-symbol-stock{
    /*-webkit-text-size-adjust: 100%;*/
    -webkit-box-direction: normal;
    font-weight: 400!important;
    font-style: normal!important;
    text-transform: none!important;
    line-height: normal;
    box-sizing: border-box;
    position: relative;
    top: -0.65em;
    font-size: 0.9rem;
}

.price-whole-stock{
  /*-webkit-text-size-adjust: 100%;*/
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  font-size: 1.8rem;
  box-sizing: border-box;
}

.price-fraction-stock{
  /*-webkit-text-size-adjust: 100%;*/
  cursor: default;
  text-align: left!important;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  box-sizing: border-box;
  position: relative;
  top: -0.7em;
  font-size: 0.9rem;
}

.price-symbol{
  -webkit-box-direction: normal;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  line-height: normal;
  font-size: 0.7rem;
}

.price-whole{
/*-webkit-text-size-adjust: 100%;*/
-webkit-box-direction: normal;
font-weight: 400!important;
font-style: normal!important;
text-transform: none!important;
line-height: normal;
font-size: 1rem;
box-sizing: border-box;
}

.price-whole-admin{
  /*-webkit-text-size-adjust: 100%;*/
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  font-size: 0.9rem;
  box-sizing: border-box;
  }

.price-costo-seller{
  text-align: left !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  top: -0.4em;
  font-size: 0.7rem;
  padding: 0.1rem;
}



.price-fraction-balance{
  /*-webkit-text-size-adjust: 100%;*/
  /*font-family: "Amazon Ember",Arial,sans-serif;*/
  cursor: default;
  text-align: left!important;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  box-sizing: border-box;
  position: relative;
  top: 0;
  font-size: 0.7rem;
}

.price-symbol-small{
  /*-webkit-text-size-adjust: 100%;*/
  /*font-family: "Amazon Ember",Arial,sans-serif;*/
  -webkit-box-direction: normal;
  font-weight: 400!important;
  font-style: normal!important;
  text-transform: none!important;
  line-height: normal;
  box-sizing: border-box;
  position: relative;
  top: -0.35em;
  font-size: 14px;
}

.price-whole-small{
/*-webkit-text-size-adjust: 100%;*/
/*font-family: "Amazon Ember",Arial,sans-serif;*/
-webkit-box-direction: normal;
font-weight: 400!important;
font-style: normal!important;
text-transform: none!important;
line-height: normal;
font-size: 20px;
box-sizing: border-box;
}

.price-fraction-small{
/*-webkit-text-size-adjust: 100%;*/
/*font-family: "Amazon Ember",Arial,sans-serif;*/
cursor: default;
text-align: left!important;
font-weight: 400!important;
font-style: normal!important;
text-transform: none!important;
line-height: normal;
box-sizing: border-box;
position: relative;
top: -0.35em;
font-size: 14px;
}


.flex-container-auction-precios {
  /*margin-top: 0.8rem;*/
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
 /* height: 100vh; */
}

.auction_ended{
  border: 0.2rem solid paleturquoise;
  padding: 1.5rem;
  text-align: center;
}


/* ---  SUBASTAS AUCTIONS --- */





   /* @import url('https://fonts.googleapis.com/css?family=Lobster');    */


/* GRILLA DEL INDEX */

.grifFiltro{
    margin-bottom: 10px;
    display:flex;
}

.grid-gallery {
  display: grid;
  grid-auto-rows: 400px;
  grid-gap: 1rem;
  grid-auto-flow: row dense;
}



.link-social:hover img {
  transform: scale(1.2); /* Escala la imagen al 110% de su tamaño original */
  transition: transform 0.3s ease; /* Agrega una transición suave */
}
    

.auction-alert{
  padding: 1rem;
  width:100%;
  background-color:#ffffffe5;
  text-align: center;
  margin:auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: dashed;
}

.parrafo-1{
  padding: 0.2rem;
}






@media all and (max-width: 320px) {
  .grid-gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media all and (max-width: 768px) {
  .grid-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (max-width: 1024px) {
  .grid-gallery {
    grid-template-columns: repeat(6, 1fr);
  }
}

.grid-gallery__item:nth-child(11n+1) {
  grid-column: span 1;
}

.grid-gallery__item:nth-child(11n+4) {
  grid-column: span 2;
  grid-row: span 1;
}

.grid-gallery__item:nth-child(11n+6) {
  grid-column: span 3;
  grid-row: span 1;
}

.grid-gallery__item:nth-child(11n+7) {
  grid-column: span 1;
  grid-row: span 2;
}

.grid-gallery__item:nth-child(11n+8) {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-gallery__item:nth-child(11n+9) {
  grid-row: span 3;
}

.grid-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.nameItem{
  white-space: nowrap;         /* Evita el salto de línea */
  overflow: hidden;            /* Oculta el texto que no cabe */
  text-overflow: ellipsis;     /* Agrega puntos suspensivos al final */
  font-size: 0.8rem;
}

.resaltados-container{
  display: block;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.stock-auction{
  display: block;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.stock-compra{
  display: block;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.resaltados{
    display: flex;
    height: 1rem;
    align-items: center;
    /*overflow: hidden;*/
    margin-top: 0.25rem;
	  min-height: 2em;
    font-size: 0.7rem;
}

.envioGratis{
    color: rgb(0, 153, 0);
    white-space: nowrap;
    display: inline-block;
    align-items: center;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.125rem 0.25rem;
    margin-top: 0;
    margin-bottom: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 100%;
    border: 0.0625rem solid;
    border-radius: 0.0625rem;
    background-color: transparent;
    font-size: 0.9rem;
}



.off{
    white-space: nowrap;
    display: inline-block;
    align-items: center;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.125rem 0.25rem;
    margin-top: 0;
    margin-bottom: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 100%;
    border: 0.0625rem solid;
    border-radius: 0.0625rem;
    background-color: transparent;
    font-size: 1.4rem;
}





.origen2{
    padding-top: 5px;
    min-height: 1.4em;
    text-align: left;
    font-weight: 400;
	  flex-grow: 1;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 1;*/
    font-size:0.8em; 
    color: rgb(158, 158, 158);
}

.itemDesc{
    padding: 0.3rem;
    overflow: hidden;
}








/* Estilos para el contenedor del ícono */
.icon-container {
  position: relative; /* Permitirá posicionar elementos absolutamente relativos a este contenedor */
  /*width: 100%; */
}

/* Estilos para el ícono */
.icon-gavel {
  position: absolute;
  top: 0; /* Alinea el ícono en la parte superior del contenedor */
  right: 0; /* Alinea el ícono en la parte derecha del contenedor */
  background-color:#2196F3;
  color: #fff; /* Cambia el color del ícono según tus preferencias */
  padding: 5px; /* Añade espacio alrededor del ícono para mejorar la apariencia */
  font-size: 1.6rem; /* Ajusta el tamaño del ícono según tus preferencias */
  z-index: 1;
  width: 2rem;
  height: 2rem;
  text-align: center;
}

.importe{
font-size: 1.1rem;
    color: #ee4d2d;
}

.currency{
	font-size: 0.9rem;
    color: #ee4d2d;
}



/* MODAL INFO ENVIOS Y PAGOS */
.modalInfoEnvios{ 
    display: none; /* Hidden by default */
}

.modalInfoPagos{
    display: none; /* Hidden by default */
}

.modalNuevaDireccion{
  display: none; /* Hidden by default */
}



/* MODAL RESLTADO DE BUSQUEDA */

.modalSearch {
    display: none;
    position: fixed;
    /*top: 50%;*/
    top: 48.8%;
    left: 50%;
    overflow: auto;
    /* transform: translate(-50%, -50%); */
    /*background-color:#333;*/
    background-color: #0f1111;
    padding: 1rem;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.2);
    z-index: 100;
    width: 80%;
    height: 80%;
    animation: slideIn 0.5s forwards;    
  }
  

  
  
  .modal-content2 {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
  }
  
  .modal-dialog {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    /*background-color: rgb(0,0,0); */
    /*background-color: rgba(255,255,255,0.9); */
    display: block;
    justify-content: center;
    
  }

  .modal-text{
    font-size: 0.9rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }








  /* SLIDER INDEX */

  #slideBanners{
    background-color: burlywood;
  }

  
  .swiper {
    width: 550px;
  }


  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }




  
  
  










  /* PAGINA DEL ITEM */

  .imgFichaX{
    padding: 10px;
    text-decoration: none;
    text-align:center;
    margin-bottom:8px;
}




.cuadrado2 { 

max-width: 300px;
max-height: 300px;
    
margin-bottom:20px;

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}


.thumb2 { 
padding-bottom:20px;
padding-bottom:20px;
}

.thumb2 a {
display: block;

}


.rect-img-container {
  position: relative;
  /*background-color: blueviolet;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.rect-img-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}


.rect-img {
  position: absolute;
  width: 90%;
  height: 90%;
  object-fit: cover;
  /* padding: 0.2rem; */
  border: 0.1rem solid #e7dede;
  border-radius: 0.3rem;
}  




.price-medio{
  display: inline-block;
  width: 180px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-align: left;
}

table, th, td {
  border: 1px solid;
}

.price-table{
  text-align: left;
}

.price-table-transf{
  text-align: left;
  color: #ee4d2d;
  font-weight: bold;
  font-size: 1.5rem;
}



.price-preview{
  text-align: center;
  /* background-color: #00cc00; */
  padding-top: 10px;
  padding-bottom: 10px;
  display:flex;
  align-items: center;
  justify-content:center;
}

.price-item {
  text-align: center;
  float: left;
  color: #ee4d2d;
  width: 100%;
  /* padding-left: 10%; */
  font-weight: bold;
  font-size: 24px;
}

.price-item-auction {
  text-align: center;
  width: 8rem;
  color: #ee4d2d;
  font-weight: bold;
  font-size: 24px;
}

.price-item-auction-ars {
  text-align: center;
  color: #ee4d2d;
  font-weight: bold;
  font-size: 1.3rem;
}

.precioItem {
  font-size: 1.8rem;
  font-weight: 400;
  text-align: left;
  float: left;
  color: #ee4d2d;
  width: 100%;
  /* padding-left: 10%; */
  font-weight: bold;
}
 
.compra_precio_item {
  font-size: 1.8rem;
  font-weight: 400;
  text-align: left;
  float: left;
  color: #ee4d2d;
  width: 100%;
  /* padding-left: 10%; */
  font-weight: bold;
}

.compra_precio_item2 {
  font-size: 1.8rem;
  font-weight: 400;
  color: #ee4d2d;
  width: 100%;
  /* padding-left: 10%; */
  font-weight: bold;
}

.precioItem2 {
   /* font-size: 1.2rem; */
    font-weight: 200;
    /*text-align: left;*/
    float: left;
    color: #000;
    width: 100%;
    /* padding-left: 10%; */
  }

.precioItemDel {
  font-size: 1.3rem;
  font-weight: 400;
  text-align: left;
  float: left;
  color: grey;
  width: 100%;
  padding-left: 10%;
}

.precio_left_text{
  display:flex;
  align-items: center;
  font-size: 0.8rem;
}



.estadoempaque {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  float: left;
  color: #000;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10%;
  
}


.alertaUsado{
border:3px solid #c2bc00;
padding: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top:10px;
margin-bottom:10px;
width: 100%;
font-size: 0.9rem;
margin-top: 20px;
} 

.alertaUsado2{
  display: flex;
  width: auto;
  border: 0.2rem solid #c2bc00;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
} 

.alerta-usado{
  width:auto;
  text-align:center;
  align-items: center;
  border: 0.2rem solid #c2bc00;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
} 

.icon{
font-size: 110%;
padding-left: 15px;
float: left;
} 



.off2{
  white-space: nowrap;
  display: inline-block;
  align-items: center;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.125rem 0.25rem;
  margin-top: 0;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 100%;
  border: 0.0625rem solid;
  border-radius: 0.0625rem;
  background-color: transparent;
  font-size: 1.4rem;
}


.img-principal-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.img-principal{
  /*background-color: #adb5bd;*/
  overflow: hidden;
}

.imgPrincipal {
  /*width: 100%;*/
  width: 28rem;
  height: 28rem;
  object-fit: cover;
}

.imgPrincipal-gallery{
  width: 60%;
  object-fit: cover;
}


.img-cupon-container{
  position: relative;
  text-align: center;
}

.img-cupon{
  height: 6rem;
  object-fit: cover;
}



.img-thumb{
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

.container-img-min{
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.img-min{
  display: inline-flex;
  padding: 0.3rem;
}

.img-min:hover{
  background-color: deeppink;
  /*box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.5);*/
}

.itemChars{ 
  /*font-size: 1.5rem;*/
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #bdbdbd;
  padding-top: 5px;
  padding-bottom: 5px;
  display:flex;
  align-items: center;
} 

.descItemTitulo{
  display: flex;
  align-items: center;
  /* background-color: #00cc00; */
  /*font-weight: bold;*/
  width: 7.5rem;
  font-size: 0.9rem;
}

.descItem{
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  /* background-color:#2fcdcd; */
}

.tags-div{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tags-select{
  cursor: pointer;
  border: 0.1rem solid;
  border-radius: 0.3rem;
  padding: 0.7rem;
  margin-top: 0.9rem;
}

.tags-select:hover{
  font-weight: 600;
  border-color: var(--color-link);
  color: var(--color-link);
}



.w3-tag{
  background-color:#000;
  color:#fff;
  display:inline-block;
  text-align:center;
  padding: 0.3rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  }

.w3-blue, .w3-hover-blue:hover
{
  font-size: 0.9rem;
  color:#fff;
  background-color:#2196F3;
  border-radius: 0.2rem;
}

.tag-delete {
  cursor: pointer;
  padding: 0.3rem;
  background-color: #ff0000; /* Puedes cambiar el color de fondo según tu preferencia */
  color: #ffffff; /* Puedes cambiar el color del texto según tu preferencia */
  border-radius: 50%;
  font-size: 12px;
}






.buttonBuy10 {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  background-color: #FF8333;
  border: none;
  color: white;
  padding: 8px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 6px;
  /*float: left;*/
}




.descDetalle {
  padding-left: 20px;  
  text-align: justify;
  padding-bottom: 10px;  
  
}








.imgRedonda {
    width:200px;
    height:200px;
    border-radius:5px;
	margin-top:8px;
	object-fit: cover;
}

.precio2 {
	color: red;
	font-size: 2em;
}

	 
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}



.input-group.md-form.form-sm.form-1 input{
  border: 1px solid #bdbdbd;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-2 input {
  border: 1px solid #bdbdbd;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-2 input.red-border {
  border: 1px solid #ef9a9a;
}
.input-group.md-form.form-sm.form-2 input.lime-border {
  border: 1px solid #cddc39;
}
.input-group.md-form.form-sm.form-2 input.amber-border {
  border: 1px solid #ffca28;
}




.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #2196F3;
  color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}









.cuadrado { 
  
  max-width: 150px;
  max-height: 150px;
  	
  margin-bottom:20px;

  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;

}




.thumb1 a {
  display: block;
  width: 200px;
  height: 200px;
}

.precioSimilares{
	color: #FF5733;
	font-size:1.2em;
}


.imgStock1{
      text-align:center;
	  padding-bottom: 0px;
	  margin-bottom: 0px;
	  border: 3px solid #FF5733;
}


.precio {
padding:0;
margin-top:0px;
margin-bottom:0px;
color: #FF5733;
font-size: 4em;
}





.spanDescuento {
  background-color: #00cc00;
  border-radius: 5px 20px 5px;
  background: #FF3CED;
  color: #FFF;
  font-size:0.8em; 
}


.divDescuento2 {    
    width: 120px;
    height: 120px;

    border-radius: 50%;
    padding: 10px;
    background-color: #FF3CED;
    color: #FFF;
    text-align: center;
    font-size:1.8em; 
	
	margin-bottom:20px;
	margin-top:20px;
	
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
	
	
}



.ahorro{
color: black;
font-size: 1.8em;
padding:0;
margin-top:0px;
}


















/* SIMILARES EN PAGINA DEL ITEM */
.itemGrid {
    background: #fff;
    border-radius: 0.125rem;
    text-shadow: 1px 1px #fff;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-right: 0.3125rem;
    margin-left: 0.3125rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }
  
  .precioGrid{
      color: red;
      font-size:1.5em;
  }


  
  .spanDescuento2 {
    background-color: #00cc00;
    border-radius: 5px 20px 5px;
    background: #FF3CED;
    color: #FFF;
    font-size:0.6em; 
  }
  
  
  


  .cartMain{
    width:100%;
    background-color: #00cc00;
    margin-top: 100px;
    
  }


  /* MIS COMPRAS - ORDERS */
  .divOrder{
    background-color:#e9e9e9;
    margin: 10px;
    border-style: dotted;
    padding: 10px;

  }

  .orders{
      width: 100%;
  }



  .modalInformarPagos{
    display: none; /* Hidden by default */
    
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;

    margin-top: 100px;

    /*padding-top: 200px;*/

    width: 100%; /* Full width */
    
   
    overflow: auto; /* Enable scroll if needed */
    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    position: absolute;
  }

  .modalPagoInformado{
    display: none; /* Hidden by default */
    
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;

    margin-top: 100px;

    /*padding-top: 200px;*/

    width: 100%; /* Full width */
    
   
    overflow: auto; /* Enable scroll if needed */
    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    position: absolute;      
  }


  .modalSolicEnvio{
    display: none; /* Hidden by default */
    
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;

    margin-top: 100px;

    /*padding-top: 200px;*/

    width: 100%; /* Full width */
    
   
    overflow: auto; /* Enable scroll if needed */
    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    position: absolute;      
  }

  .modalNuevaDireccion{
    display: none; /* Hidden by default */
    
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;

    margin-top: 100px;

    /*padding-top: 200px;*/

    width: 100%; /* Full width */
    
   
    overflow: auto; /* Enable scroll if needed */
    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    position: absolute;      
  }


  #selectDireccion{ /* DIV con Select para elegir a qué dirección enviar el pedido */
    display: none; /* Hidden by default */
  }

  #selectDireccionPad{ /* DIV con Select para elegir a qué dirección enviar el pedido - Takeaway Padua */
    display: none; /* Hidden by default */
  }

  #selectDireccionTap{ /* DIV con Select para elegir a qué dirección enviar el pedido - Takeaway Palermo */
    display: none; /* Hidden by default */
  }


  @keyframes slideIn {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translate(-50%, -50%);
    }
  }
  



.modal-header{
  /*font-stretch: condensed;*/
  font-weight: 600;
  /*margin-bottom: 1rem;*/
}

.modal-base-form {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  background-color: #fff;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
  animation: slideIn 0.5s forwards;
  text-align: -webkit-center;
  height: 80%;
  overflow: auto;
}

.modal-gallery {
  display: none;
  justify-content: center;
  width: 65%;
  position: fixed;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;    
  animation: slideIn 0.5s forwards;
}


.modal-footer {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.modal-footer-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.modal-footer-element {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*padding: 0.5rem;*/
}


.modal-loading {
  background-color: #66CEFF;
  display: none;
  justify-content: center;
  width: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;    
  animation: slideIn 0.5s forwards;
}

.modal-title {
  text-align: center;
  /* color:#fff; */
  font-size: 1.1rem;
  padding: 0.5rem;
}

.modal-title2 {
  text-align: center;
  font-size: 0.9rem;
}

.modal-title3 {
  text-align: center;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
}

.modal-buttons {
  margin-top: 1rem;
  margin-bottom: 10px;
  width: 100%;
}

.form-group-modal{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  column-gap: 1rem;
}

.form-group-modal-border{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  column-gap: 1rem;
  padding: 0.5rem;
}

.form-group-modal-element{
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-group-modal-title{
  font-weight: bold;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
}

.form-group-modal-title-center{
  display: flex;
  justify-content: center;
  font-weight: bold;
  margin-right: 0.3rem;
}

.modal-categorias {
  display: none;
  /*justify-content: center;*/
  /*width: 75%;*/
  /*height: 80%;*/
  overflow: auto;
  position: fixed;
  top: 4.5rem;
  left: 16rem;
  /* transform: translate(-50%, -50%); */
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  
  background-color: rgba(0, 0, 0, 0.85);
  /*background-color:rgb(240 240 240 / 70%);*/

  /*background-color: rgb(0 0 0 / 100%);*/

  z-index:2;    
  /*animation: slideIn 0.5s forwards;*/
}

.modal-body-categorias{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
}

.modal-img{
  text-align: center;
}

.menu-categ-bloque{
  /*padding: 1rem;*/
  padding-left: 0.5rem;
  width: auto;
}

.menu-categ-bloque-small{
  padding-left: 1.5rem;
  width: auto;
  font-size: 0.9rem;
}

/* Estilos del fondo opaco */
.overlay-categorias {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.link-categ-element{
  color: aliceblue;
}

.link-categ-element:hover{
  text-decoration: none;
  color:#f38029;
}

.menu-categ-title{
  width: 7rem;
  padding: 0.7rem;
  font-weight: 600;
  font-size: large;
  color: aliceblue;
}

.menu-categ-element{
  width: 7rem;
  padding: 0.4rem;
  text-decoration: none;
}

.menu-categ-bloque a{
  text-decoration: none;
}

a .menu-categ-element{
  text-decoration: none;
  color: aliceblue;
  text-decoration: none;
  color: aliceblue;
  border: 0.1rem solid white;
  margin-top: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
}

a .menu-categ-element:hover{
  text-decoration: none;
  color: var(--color-neon);
}

.menu-categ-bloque-small a .menu-categ-element{
  text-decoration: none;
  color: aqua;
  text-decoration: none;
  border: 0.1rem solid white;
  margin-top: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
}






/* Estilos del contenido del modal */
.modal-content {
    text-align: center;
}

/* Estilos del botón para cerrar el modal */
.close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* Ajusta el ancho al mismo tamaño que el alto */
  height: 2.5rem; /* Ajusta el alto al mismo tamaño que el ancho */
  border-radius: 50%;
  z-index: 1;
  line-height: 1; /* Ajusta el tamaño del texto para que coincida con el tamaño del div */
  padding: 0; /* Elimina cualquier relleno interno */  
  background-color: rgb(46, 46, 46);
  transition: .4s;
}

.close:hover {
  background-color: black;
}

.close-itemform {
  position: absolute;
  /*top: 0.5rem;
  right: 1.3rem;*/
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* Ajusta el ancho al mismo tamaño que el alto */
  height: 2.5rem; /* Ajusta el alto al mismo tamaño que el ancho */
  border-radius: 50%;
  background-color: rgb(182 21 21);
  line-height: 1; /* Ajusta el tamaño del texto para que coincida con el tamaño del div */
  padding: 0; /* Elimina cualquier relleno interno */
  transition: .4s;
}

.close-itemform:hover {
  background-color: black;
}

/* Estilos del fondo opaco */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /*background-color: rgb(255 0 0 / 70%);*/
    z-index: 1;
}

#overlay_search{
  top: 4rem;
  background-color: transparent;
}

.overlay2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /*z-index: 1;*/
}

  #modal_pujar{
    display: none; /* Hidden by default */
  }

  .overlay_pago {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

  .modal_pago{
      display: none;
      position: fixed;
      /*top: 50%;*/
      /*left: 50%;*/
      /* transform: translate(-50%, -50%); */
      background-color: #fff;
      padding: 1rem;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 2;
  }

.modal_info {
  width: 30%;
  font-family: system-ui;
  display: none;
  position: fixed;
  top: 30%;
  left: 10%;
  transform: translate(-10%, -50%);
  background-color: rgb(58, 58, 58);
  color :whitesmoke;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}






  
/* Estilo para el contenedor del ícono y el contador */
.notification-icon {
  position: relative;
  display: flex;
  width: 2rem;
  height: 2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* Estilo para el ícono de la campana (puedes personalizar el ícono según tu preferencia) */
.notification-icon i {
  font-size: 24px; /* Tamaño del ícono */
  color: #333; /* Color del ícono */
}

/* Estilo para el contador de notificaciones */
.notification-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -8px; /* Posición en la parte superior del ícono */
  right: -8px; /* Posición en la parte derecha del ícono */
  background-color: red; /* Fondo rojo */
  color: white; /* Texto blanco */
  border-radius: 50%; /* Forma de círculo para el contador */
  padding: 0.3rem 0.3rem; /* Espaciado interior del contador */
  font-size: 0.7rem; /* Tamaño del texto del contador */
}

.notification-badge:empty {
  display: none; /* Oculta el badge si está vacío */
}

/* Estilo para el contador de notificaciones */
.notification-badge-menu {
  background-color: red; /* Fondo rojo */
  color: white; /* Texto blanco */
  border-radius: 50%; /* Forma de círculo para el contador */
  padding: 4px 8px; /* Espaciado interior del contador */
  font-size: 12px; /* Tamaño del texto del contador */
}

.notification-badge-menu:empty {
  display: none; /* Oculta el badge si está vacío */
}


/* Estilo para el contenedor del ícono y el contador */
.cart-icon {
  position: relative;
  display: inline-block;
  margin-right: 10px; /* Espacio entre el ícono y el contador */
}

/* Estilo para el ícono del carrito de compras */
.cart-icon i {
  font-size: 24px; /* Tamaño del ícono */
  color: #333; /* Color del ícono */
}

/* Estilo para el contador de elementos en el carrito */
.cart-badge {
  position: absolute;
  top: -8px; /* Posición en la parte superior del ícono */
  right: -8px; /* Posición en la parte derecha del ícono */
  background-color: red; /* Fondo rojo */
  color: white; /* Texto blanco */
  border-radius: 50%; /* Forma de círculo para el contador */
  padding: 4px 8px; /* Espaciado interior del contador */
  font-size: 12px; /* Tamaño del texto del contador */
}

.cart-badge:empty {
  display: none; /* Oculta el badge si está vacío */
}






  /* subir comprobante de pago */ 
  
  .button1 {
    padding: 10px;
    /*width: fit-content;*/
    color: white;
    font-family: inherit;
    border-radius: 0.3rem;
    cursor: pointer;
    border: 1px solid black;
    background-color: black;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:5px;
    margin-right:5px;
  }



    /* botón ver más en compras del cliente */
    #ver_mas_button{
      display: none;
    }

    #element_nuevo_envio{
      display: none;
    }



  .btnInstagram2{
    display: inline-block;
    padding: 10px;
    /*width: fit-content;*/
    font-family: inherit;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:5px;
    margin-right:5px;

    color: #FF3CED;   
    background: #fff;
    border: 1px solid #FF3CED;
 
  }

  .btnInstagram2:hover {
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.7);
  }

  .btnWhatsapp2{
    display: inline-block;
    padding: 10px;
    /*width: fit-content;*/
    font-family: inherit;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:5px;
    margin-right:5px;
    
    color: #ffffff;   
    background: rgb(47 161 24 / 66%);
    border: 1px solid rgb(47 161 24 / 66%);

  }

  .btnWhatsapp2:hover{
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.7);
  }
  
  .button3 {
    display: inline-block;
    padding: 10px;
    /*width: fit-content;*/
    color: white;
    font-family: inherit;
    border-radius: 0.3rem;
    cursor: pointer;
    border: 1px solid #f38029;
    background-color: #f38029;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:5px;
    margin-right:5px;
  }

  .button3:hover {
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.7);
  }



  .app {
    max-width: 1224px;
    width: 92%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap:1rem;
  }
  
  .header-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:1.5rem;
    width: 100%;
    padding-bottom: 10px;
  }
  

  .server-message {
    width: 100%;
    padding: 16px;
    border-radius: 5px;
  }
  
  .input-div {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px dotted black;
    background-color: white;
    position: relative;
  }
  
  .input-div .browse {
    color: black;
    font-weight: bold;
  }
  
  .file {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .saved-div,
  .queued-div {
    width: 100%;
    min-height: 150px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap:1.5rem;
    position: relative;
    border-radius: 5px;
    border: 2px dotted black;
    background-color: white;
  }
  
  .saved-div .image,
  .queued-div .image {
    height: 150px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
  }
  
  .saved-div .image:nth-child(4n),
  .queued-div .image:nth-child(4n) {
    margin-right: 0;
  }
  
  .saved-div .image img,
  .queued-div .image img {
    height: 100%;
    width: 100%;
  }
  
  .saved-div .image span,
  .queued-div .image span {
    position: absolute;
    top: -4px;
    right: 4px;
    cursor: pointer;
    font-size: 22px;
    color: white;
  }
  
  .saved-div .image span:hover,
  .queued-div .image span:hover {
    opacity: 0.8;
  }
  
  .saved-div .span--hidden,
  .queued-div .span--hidden {
    visibility: hidden;
  }





  /* INSERTAR ITEM */
  .tipoMerch2{
    display: none;
  }

  /* INSERTAR ITEM */
  .tipoMerch3{
    display: none;
  }

  /* EDITAR ITEM */
  .itemEdit-container
  {
    display: flex;
  }

  #itemEdit {
  display: none;
  background-color: #3c3636;
  margin-top: 4.2rem;
  position: absolute;
  width: 100%;
  }

  #loteEdit {
    display: none;
    background-color: #3c3636;
    margin-top: 4.2rem;
    position: absolute;
    /*width: 100%;*/
    }



  #buttonUpdatePago{
    display: none;
    width: 100%;
  }


/* STOCK LIST */

.stock-listContainer{
  width: 100%;
  margin-bottom: 2rem;
}

.stock-list-pagado{
  background-color: rgb(207, 253, 203);
  display:block;
  display: flex;
  /*height: fit-content;*/
  margin-top: 20px;
  /*margin-left: 10px;*/
  border: dashed;
  padding: 10px;
}

.stock-list-entregado{
  background-color: rgb(200, 239, 255);
  display:block;
  display: flex;
  /*height: fit-content;*/
  margin-top: 20px;
  /*margin-left: 10px;*/
  border: dashed;
  padding: 10px;
}

.stock-list-block-0{
  background-color:rgb(227, 244, 131);
  padding-left: 5px;
  padding-right: 5px;
}

.stock-list-block-1{
  /*background-color:rgb(251, 209, 195);*/
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.stock-list-block-2{
  /*background-color:rgb(150, 209, 200);*/
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-left: auto;
}

.stock-list-container-2{
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  align-content: center;
  gap: 0.5rem;
  width: 13rem;
}

.stock-list-container-3{
  display: flex;
  justify-content: center;
  flex-flow: column;
  width: auto;
}

.stock-list-container-4{
  display: flex;
  justify-content: center;
  flex-flow: column;
  width: 18rem;
}

.config-items-container{
  display: flex;
  text-align: left;
  align-items: center;
  gap: 0.5rem;
  border: 0.01rem solid grey;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.config-items-container-2{
  width: 100%;
  text-align: left;
  align-items: center;
  gap: 0.5rem;
  border: 0.01rem solid grey;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.config-items-container-3{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  align-items: center;
  gap: 0.5rem;
  border: 0.01rem solid grey;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

  .config-items-container-4{
    display: flex;
    text-align: left;
    align-items: center;
    gap: 0.5rem;
    border: 0.01rem solid grey;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
  }

  .config-items-container-cotiz{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    border: 0.01rem solid grey;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
  }

  .config-list{
    display: flex;
    padding: 0.2rem;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
  }

  .config-list-mostrar{
    display: flex;
    margin-top: 0.1rem;
    /*margin-left: 10px;*/
    justify-content: left;
    align-items: center;

  }

  .config-list-block{
    padding-left: 1rem;
    padding-left: 0.5rem;
    font-size: 0.9rem;
  }

  .background-auction-blank{
    background-color: white;
  }

  .background-auction-l{
    /*background-color:rgb(251, 209, 195);*/
    border: 0.2rem solid #ffb0b0;
  }

  .background-auction-w{
    /*background-color: #e1fabb;*/
    border: 0.2rem solid #82a3ea;
  }



.flags-index{
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.imgFlag{
  float: right;
  width: 100px;
}

.imgFlag-min{
  /*display: block;*/
  width: 2rem;
  /*padding: 0.1rem;*/
}

.imgFlag-border{
  display: inline-flex;
  border: 0.15rem solid #cfffffcf;
}

.stock-list-column1{
  background-color:#cddc39;
}

.stock-list-column2{
  background-color:#ccc;
}

.index-stock-status{
  padding-top: 0.2rem;
  font-size: 0.8rem;
}







.container{
  padding-left: 0px;
}


/* NOTIFICACIONES */
.notif-listContainer{
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /*padding-right: 10px;*/
}

.notif-element-2{
  font-size: 0.9rem;
}

.notif-element-button{
  display: flex;
  width: 100%;
}

.notif-element-button-2{
  display: flex;
}

.cotiz-input-container{
  display: flex;
  align-items: center;
}

.notif-card-leido{
  /*background-color: antiquewhite;*/
  background-color: whitesmoke;
  display: flex;
  /*height: fit-content;*/
  /*border: dashed;*/
  /*padding: 10px;*/
  /*margin-top: 0.3rem;*/
  /*padding: 0.3rem;  */
  /*flex-wrap: wrap;*/
  /*gap: 0.2rem;*/

  display: flex;
  flex-flow: wrap;
  /*height: fit-content;*/
  margin-top: 20px;
  margin-top: 0.5rem;
  /*margin-left: 0.5rem;*/
  /*margin-right: 0.5rem;*/
  /*margin-left: 10px;*/
  /*border: dashed;*/
  border: 0.1rem solid darkgrey;
  padding: 0.3rem;
}

.notif-card-noleido{
  background-color: var(--color-gris);
  
  display: flex;
  /*height: fit-content;*/
  /*border: dashed;*/
  padding: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.4rem;  
  flex-wrap: wrap;
  gap: 0.2rem;
  border: 0.1rem solid darkgrey;
}

.notif-card-disabled{
  background-color:#ccc;
  display: flex;
  /*height: fit-content;*/
  /*border: dashed;*/
  padding: 10px;
  margin-top: 0.3rem;
  padding: 0.3rem;  
  flex-wrap: wrap;
  gap: 0.2rem;
}

.pagosUser{
	border-bottom:1px solid #000;
  background-color:#fff;
  padding: 5px;
  margin-bottom:5px;
  display: flex;
  /*flex-wrap: wrap;*/

  gap: 0.3rem;
  text-align: center;
  width: 100%;
  padding: 0.2rem 0;
  box-sizing: border-box;
}

.pagos-title{
  width: 5rem;
}

.pagos-canal{
  font-size: 0.8rem;
}





.pagos-col-2{
  font-size: 0.9rem;
  display: flex;
  gap: 0.5rem;
}



.form-element{
  padding:5px;

}

.form-input{
  height:1.5em;
  border:inset;
}

.form-input-readonly {
  height:1.5em;
  border:inset;
  background-color: #bdbdbd;
}

.form-input-min{
  display: flex;
  width: 7rem;
  height: 1.5em;
  border: inset;
  text-align: center;
}

.form-select{
  height: 1.8em;
  border: inset;
  font-size: inherit;
}

.resaltado{
margin-right: 5px;
}

.demora{
  color: orangered;
}

.demora {
  position: relative;
  display: inline-block;
  z-index: 1; /* Establecemos un z-index para el div que contiene el bocadillo */
}

.bocadillo {
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000; /* Establecemos un z-index mayor para el bocadillo */
  width:max-content;
}

.contenido {
  font-size: 14px;
}

.demora:hover .bocadillo {
  display: block;
}

.bocadillo:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #f0f0f0 transparent transparent transparent;
}

.usado{
  /*display: inline-block;*/
  white-space: nowrap;
  align-items: center;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.125rem 0.25rem;
  margin-top: 0;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 100%;
  border: 0.0625rem solid;
  border-radius: 0.0625rem;
  background-color: transparent;
  color: rgb(158, 158, 158);
}



.auction-span{
  /*display: inline-block;*/
  white-space: nowrap;
  align-items: center;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.125rem 0.25rem;
  margin-top: 0;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 100%;
  border: 0.0625rem solid;
  border-radius: 0.0625rem;
  background-color: transparent;
  color:#FF3CED;
}

.vendido-span{
  /*display: inline-block;*/
  white-space: nowrap;
  align-items: center;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.125rem 0.25rem;
  margin-top: 0;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 100%;
  border: 0.0625rem solid;
  border-radius: 0.0625rem;
  background-color: transparent;
  color: #04be04;
}



.circle {
  width: 0.9rem;
  height: 0.9rem;
  background-color:#01b2fe;
  border: 0.3rem solid #01b2fe;
  border-radius: 10%; /* Esto hace que el div sea circular */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  color: white;
}

.image_busqueda{
  width: 100px;
  height: 100px;
}

.msg-textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}


/* MENSAJES */

.new-msg{
  width: 100%;
  padding: 1rem;
}

.msg-container-main{
  width: 100%;
}

.msg-container{
  width: 90%;
  margin:auto;
}

.message {
  display: block;
  margin: 10px;
}

.msg-admin-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  cursor: pointer;
}

.msg-admin-chat {
  width: 90%;
}

.msg-badge-menu{
  background-color: blue;
}

.user{
  text-align: right;
}

.webmaster{
  text-align: left;
}




.message-bubble-user-right {
  display:inline-block;
  background-color: var(--color-blue);
  padding: 10px;
  border-radius: 10px;
  max-width: 70%; /* Limitar el ancho del mensaje */
  word-wrap: break-word; /* Romper palabras largas */
  border-top-right-radius: 0;
  
}

.message-bubble-webmaster-left {
  display:inline-block;
  background-color: #ee4d2d;
  padding: 10px;
  border-radius: 10px;
  max-width: 70%; /* Limitar el ancho del mensaje */
  word-wrap: break-word; /* Romper palabras largas */
  border-top-left-radius: 0;
}


.img-div{
  display:inline-block;
}

.img-msg-usr {
  width: 50px; /* Tamaño de la imagen de perfil */
  height: 50px;
  border-radius: 50%; /* Hacer la imagen de perfil circular */
  margin-left: 10px;
}

.img-msg-webmaster {
  width: 50px; /* Tamaño de la imagen de perfil */
  height: 50px;
  border-radius: 50%; /* Hacer la imagen de perfil circular */
  margin-right: 10px;
}

.msg-timestamp {
  padding-top: 0.9rem;
  font-size: 0.8rem;
}

.img-comment-usr {
  width: 50px; /* Tamaño de la imagen de perfil */
  height: 50px;
  border-radius: 50%; /* Hacer la imagen de perfil circular */
}

.flex-center{
  display: flex;
  align-items: center;
}

.comment-text{
  padding-top: 0.8rem;
}





.menu-username {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}


.credit-result{
  height: 4rem;
  text-align: center;
  /* margin:auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}





.pagos-header{
  height: 4rem;
  background-color:#ffffffe5;
  text-align: center;
  /* margin:auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: 100%;
}

.pagos-result{
  /*height: 4rem;*/
  /*background-color:#ffffffe5;*/
  text-align: left;
  /* margin:auto; */
  /*display: flex;
  flex-direction: column;*/
  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: 100%;
}

.pagos-result-funds{
    /*height: 4rem;*/
  background-color:#ffffffe5;
  text-align: left;
  /* margin:auto; */
  /*display: flex;
  flex-direction: column;*/
  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

  .cargar-saldo{
  height: 4rem;
  background-color:#f38029;
  color:#fff;
  text-align: center;
  /* margin:auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.3rem;
}

.cargar-saldo:hover{
  background-color:#ff903b;
  /*cursor:cell;*/
  cursor: pointer;
}

.saldo-medio{
  width: 14rem;
  /*height: 9.5rem;*/
  /*background-color: rgb(204, 248, 248);*/
  display: inline-flex; 
  margin: 10px; 
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.saldo-medio-div{
  height: 9.5rem;
  background-color: floralwhite;
  border: 0.1rem solid lightgrey;
  display: inline-flex; 
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  cursor: pointer;
  border-radius: 0.3rem;
}

.saldo-informar-div{
  height: 5rem;
  /*background-color: floralwhite;*/
  /*border: 0.1rem solid lightgrey;*/
  display: inline-flex; 
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  cursor: pointer;
}


.info-pago-title{
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  font-weight: 600;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.info-pago-transf{
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  
}

.info-pago{
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.saldo-medio-body{
  word-wrap: break-word; /* Utiliza esta propiedad para que el texto largo no se salga del div */
  overflow-wrap: break-word; /* Alternativa a word-wrap para compatibilidad */
  padding: 0.5rem;
}






.flex-container-animacion {
  display: flex;
  justify-content: center;
  align-items: center;
 /* height: 100vh; */
}

.flex-container-animacion-text{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}



.animacion-success {
  background-color: paleturquoise;
  padding: 20px;
  text-align: center;
  width: 200px; /* Ajusta el ancho y alto según tu necesidad */
  height: 200px;
  background-image: url('../webfiles/success2.gif');
  background-size: cover;
  background-position: center;
  animation: reproducirAnimacion 1s steps(1) forwards;
}

.animacion-error {
  background-color: paleturquoise;
  padding: 20px;
  text-align: center;
  width: 14rem;
  height: 10rem;
  background-image: url('../webfiles/error.gif');
  background-size: cover;
  background-position: center;
  animation: reproducirAnimacion 1s steps(1) forwards;
}

.animacion-money {
  background-color: paleturquoise;
  padding: 2rem;
  text-align: center;
  width: 20rem;
  height: 10rem;
  background-image: url('../webfiles/money.gif');
  background-size: cover;
  background-position: center;
  animation: reproducirAnimacion 1s steps(1) forwards;
}

.animacion-alert {
  background-color: paleturquoise;
  padding: 20px;
  text-align: center;
  width: 14rem;
  height: 10rem;
  background-image: url('../webfiles/alert2.gif');
  background-size: cover;
  background-position: center;
  animation: reproducirAnimacion 1s steps(1) forwards;
}









  .checkbox-wrapper-64 input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

  .checkbox-wrapper-64 *,
  .checkbox-wrapper-64 ::after,
  .checkbox-wrapper-64 ::before {
    box-sizing: border-box;
  }

  /* The switch - the box around the slider */
  .checkbox-wrapper-64 .switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
  }

  /* Hide default HTML checkbox */
  .checkbox-wrapper-64 .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .checkbox-wrapper-64 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #adb5bd;
    transition: .4s;
    border-radius: 30px;
  }

  .checkbox-wrapper-64 .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.27em;
    bottom: 0.25em;
    background-color: #adb5bd;
    transition: .4s;
  }

  .checkbox-wrapper-64 input:checked + .slider {
    background-color: #007bff;
    border: 1px solid #007bff;
  }

  .checkbox-wrapper-64 input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
  }

  .checkbox-wrapper-64 input:checked + .slider:before {
    transform: translateX(1.4em);
    background-color: #fff;
  }

  .checkbox-wrapper-64 .slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #adb5bd;
    transition: .4s;
    border-radius: 30px;
  }

  .checkbox-wrapper-64 .slider2:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.27em;
    bottom: 0.25em;
    background-color: #adb5bd;
    transition: .4s;
  }

  .checkbox-wrapper-64 input:checked + .slider2 {
    background-color: #ff3ced;
    border: 1px solid #ff3ced;
  }

  .checkbox-wrapper-64 input:focus + .slider {
    box-shadow: 0 0 1px #ff3ced;
  }

  .checkbox-wrapper-64 input:checked + .slider2:before {
    transform: translateX(1.4em);
    background-color: #fff;
  }





  



.div-volver{
  display: flex;
  padding: 1rem;
  justify-content: center;
}

.div-comprar{
  display: flex;
  padding: 0.5rem;
}

.button-24 {
  background: orangered;
  border: 1px solid orangered;
  border-radius: 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  /*min-height: 40px;*/
  outline: 0;
  /*padding: 12px 14px;*/
  padding: 8px 10px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.button-24:hover,
.button-24:active {
  background-color: initial;
  background-position: 0 0;
  color: #FF4742;
}

.button-24:active {
  opacity: .5;
}



.button-50 {
  width: fit-content;
  appearance: button;
  background-color: #000;
  background-image: none;
  border: 0.1rem solid #000;
  border-radius: 0.3rem;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.1rem;
  margin: 0 5px 10px 0;
  overflow: visible;
  /*padding: 12px 40px;*/
  padding: 8px 36px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-50:focus {
  text-decoration: none;
}

.button-50:hover {
  text-decoration: none;
}

.button-50:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50:not([disabled]):active {
  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

.button-53-small {
  width: fit-content;
  appearance: button;
  background-color: red;
  background-image: none;
  border: 0.1rem solid red;
  border-radius: 0.3rem;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.1rem;
  margin: 0 5px 10px 0;
  overflow: visible;
  /*padding: 12px 40px;*/
  padding: 4px 18px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-51:focus {
  text-decoration: none;
}

.button-51:hover {
  text-decoration: none;
}

.button-51:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-51:not([disabled]):active {
  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

.button-51 {
  width: fit-content;
  appearance: button;
  background-color: orangered;
  background-image: none;
  border: 0.1rem solid  orangered;
  border-radius: 0.3rem;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.1rem;
  margin: 0 5px 10px 0;
  overflow: visible;
  /*padding: 12px 40px;*/
  padding: 8px 36px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-52 {
  width: fit-content;
  appearance: button;
  background-color: #007bff;
  background-image: none;
  border: 0.1rem solid #007bff;
  border-radius: 0.3rem;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.1rem;
  margin: 0 5px 10px 0;
  overflow: visible;
  /*padding: 12px 40px;*/
  padding: 4px 18px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-52:focus {
  text-decoration: none;
}

.button-52:hover {
  text-decoration: none;
  background-color: rgb(25, 51, 131);
  border: 0.1rem solid rgb(25, 51, 131);
}

.button-52:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-52:not([disabled]):active {
  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}


.button-53 {
  width: fit-content;
  appearance: button;
  background-color: rgb(204, 52, 52);
  background-image: none;
  border: 0.1rem solid rgb(204, 52, 52);
  border-radius: 0.3rem;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.1rem;
  margin: 0 5px 10px 0;
  overflow: visible;
  /*padding: 12px 40px;*/
  padding: 4px 18px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-53:focus {
  text-decoration: none;
}

.button-53:hover {
  text-decoration: none;
  background-color: rgb(241 7 17);
  border: 0.1rem solid rgb(241 7 17);
}

.button-53:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-53:not([disabled]):active {
  box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}


.button-follow {
  font-family: "Open Sans", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /*margin-top: 10px;
  margin-bottom: 10px;*/
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
  background-color: #fff;
  width: auto;
}

.button-follow:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}


.mas-info{
  display: flex;
  align-items: center;
}

:root {
  --color-icon-menu: #ffffff; /* Define la variable de color */
}

/* ICONOS - INICIO */
.custom-icon {
  display: inline-block;
  width: 16px; /* Define el ancho deseado para tus íconos */
  height: 16px; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
}

/* Define clases específicas para cada ícono */
.custom-icon-user-regular {
  background-image: url('../icons/user-regular.svg');
}

.custom-icon-house-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/house-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/house-solid.svg') no-repeat center;
}


.custom-icon-circle-exclamation-solid {
  background-color: yellow;
  mask: url('../icons/circle-exclamation-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/circle-exclamation-solid.svg') no-repeat center;
  width: 1.5rem;
  height: 1.5rem;
}

.custom-icon-user-gear-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/user-gear-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/user-gear-solid.svg') no-repeat center;
}

.custom-icon-user-gear-solid-big {
  background-image: url('../icons/user-gear-solid.svg');
  width: 1.5rem;
  height: 1.5rem;
}

.custom-icon-check-solid-big {
  background-color: var(--color-edit);
  mask: url('../icons/check-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/check-solid.svg') no-repeat center;
  width: 1.5rem;
  height: 1.5rem;
}

.custom-icon-user-solid {
  background-image: url('../icons/user-solid.svg');
}

.custom-icon-logout-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/right-from-bracket-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/right-from-bracket-solid.svg') no-repeat center;
}

.custom-icon-heart-regular {
  background-image: url('../icons/heart-regular.svg');
}

.custom-icon-heart-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/heart-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/heart-solid.svg') no-repeat center;
}

.custom-icon-bag-shopping-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/bag-shopping-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/bag-shopping-solid.svg') no-repeat center;
}

.custom-icon-users-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/users-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/users-solid.svg') no-repeat center;
}

.custom-icon-dollar-sign-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/dollar-sign-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/dollar-sign-solid.svg') no-repeat center;
}

.custom-icon-box-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/box-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/box-solid.svg') no-repeat center;
}


.custom-icon-money-bill-transfer-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/money-bill-transfer-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/money-bill-transfer-solid.svg') no-repeat center;
}

.custom-icon-user-plus-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/user-plus-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/user-plus-solid.svg') no-repeat center;
}

.custom-icon-boxes-stacked-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/boxes-stacked-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/boxes-stacked-solid.svg') no-repeat center;
}

.custom-icon-star-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/star-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/star-solid.svg') no-repeat center;
}

.custom-icon-arrow-trend-up-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/arrow-trend-up-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/arrow-trend-up-solid.svg') no-repeat center;
}

.custom-icon-robot-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/robot-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/robot-solid.svg') no-repeat center;
}

.custom-icon-wand-magic-sparkles-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/wand-magic-sparkles-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/wand-magic-sparkles-solid.svg') no-repeat center;
}

.custom-icon-tag-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/tag-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/tag-solid.svg') no-repeat center;
}

.custom-icon-circle-check-regular {
  background-image: url('../icons/circle-check-regular.svg');
}

.custom-icon-custom-icon-circle-check-regular {
  display: inline-block;
  width: 16px; /* Define el ancho deseado para tus íconos */
  height: 16px; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  background-image: url('../icons/circle-check-regular.svg');
}

.custom-icon-bell-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/bell-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/bell-solid.svg') no-repeat center;
}


.custom-icon-bell-solid-header {
  background-image: url('../icons/bell-solid.svg');
  position: relative;
  display: flex;
  width: 2rem;
  height: 2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 24px; /* Tamaño del ícono */
  color: #333; /* Color del ícono */
}

.custom-icon-envelope-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/envelope-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/envelope-solid.svg') no-repeat center;
}

.custom-icon-truck-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/truck-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/truck-solid.svg') no-repeat center;
}

.custom-icon-check-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/list-check-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/list-check-solid.svg') no-repeat center;
}

.custom-icon-truck-solid-large {
  background-image: url('../icons/truck-solid.svg');
  font-size: x-large;
}

.custom-icon-truck-solid-big {
  background-image: url('../icons/truck-solid.svg');
  width: 1.5rem;
  height: 1.5rem;
}

.custom-icon-house-solid-big {
  background-image: url('../icons/house-solid.svg');
  width: 1.5rem;
  height: 1.5rem;
}

.custom-icon-user-solid-big {
  background-image: url('../icons/user-solid.svg');
  width: 1.5rem;
  height: 1.5rem;
}

.custom-icon-gavel-solid {
  background-image: url('../icons/gavel-solid.svg');
}

.custom-icon-eye-solid {
  background-color: greenyellow;
  mask: url('../icons/eye-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/eye-solid.svg') no-repeat center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-left: 10px;
}

.custom-icon-eye-slash-solid {
  background-color: lightgray;
  mask: url('../icons/eye-slash-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/eye-slash-solid.svg') no-repeat center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-left: 10px;
}





.custom-icon-instagram {
  background-image: url('../icons/instagram.svg');
}

.custom-icon-list-ol {
  background-image: url('../icons/list-ol-solid.svg');
}

.custom-icon-fa-1 {
  background-image: url('../icons/1-solid.svg');
}

.custom-icon-gavel {
  background-image: url('../icons/gavel-solid.svg');
}


.custom-icon-pen-to-square {
  background-image: url('../icons/pen-to-square-solid.svg');
}

.custom-icon-ticket-solid {
  background-image: url('../icons/ticket-solid.svg');
}

.custom-icon-circle-question-solid {
  background-image: url('../icons/circle-question-solid.svg');
  display: inline-block;
  width: 2rem; /* Define el ancho deseado para tus íconos */
  height: 2rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
}

.custom-icon-circle-question-solid-small {
  background-image: url('../icons/circle-question-solid.svg');
  width: 1.5rem; /* Define el ancho deseado para tus íconos */
  height: 1.5rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border:4px solid #01b2fe;
  border-radius: 50%;
}

.custom-icon-circle-question-solid-small:hover {
  color:#01b2fe;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border:4px solid #f38029;
  cursor: pointer;
}

.custom-icon-question-solid {
  background-image: url('../icons/circle-question-solid.svg');
}

.custom-icon-circle-question-regular {
  background-image: url('../icons/circle-question-regular.svg');
  display: inline-block;
  width: 2rem; /* Define el ancho deseado para tus íconos */
  height: 2rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
}

.custom-icon-circle-question-regular-small {
  background-image: url('../icons/circle-question-regular.svg');
  width: 1.5rem; /* Define el ancho deseado para tus íconos */
  height: 1.5rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border:4px solid #01b2fe;
  border-radius: 50%;
}

.custom-icon-circle-question-regular-small:hover {
  color:#01b2fe;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border:4px solid #f38029;
  cursor: pointer;
}

.custom-icon-question-regular {
  background-image: url('../icons/circle-question-regular.svg');
}



.custom-icon-circle-info-solid-small {
  /*background-image: url('../icons/circle-info-solid.png');*/
  width: 1.3rem; /* Define el ancho deseado para tus íconos */
  height: 1.3rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /*border:1px solid #01b2fe;*/
  border-radius: 50%;
  cursor: pointer;
}

.custom-icon-circle-info-solid-small:hover {
  color:#01b2fe;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /*border:1px solid #f38029;*/
  cursor: pointer;
}



.custom-icon-chevron-left-solid {
  background-image: url('../icons/chevron-left-solid.svg');
  width: 1.5rem; /* Define el ancho deseado para tus íconos */
  height: 1.5rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-icon-chevron-right-solid {
  background-image: url('../icons/chevron-right-solid.svg');
  width: 1.5rem; /* Define el ancho deseado para tus íconos */
  height: 1.5rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-icon-gavel-solid-big {
  background-image: url('../icons/gavel-solid.svg');
  width: 2rem; /* Define el ancho deseado para tus íconos */
  height: 2rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-icon-circle-exclamation-solid-big {
  background-image: url('../icons/circle-exclamation-solid.svg');
  width: 2rem; /* Define el ancho deseado para tus íconos */
  height: 2rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-icon-circle-check-regular-big {
  background-image: url('../icons/circle-check-regular.svg');
  width: 2rem; /* Define el ancho deseado para tus íconos */
  height: 2rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-icon-circle-dollar-sign-solid-big {
  display: flex; /* Use flexbox para centrar vertical y horizontalmente */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  background-image: url('../icons/dollar-sign-solid.svg');
  width: 1.3rem;
  height: 2rem;
  background-repeat: no-repeat;
  /*background-color: aqua;*/ 
}

.custom-icon-truck-solid-big {
  background-image: url('../icons/truck-solid.svg');
  width: 2rem; /* Define el ancho deseado para tus íconos */
  height: 2rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-icon-circle-info-solid {
  background-image: url('../icons/circle-info-solid.svg');
  display: inline-block;
  width: 1.5rem; /* Define el ancho deseado para tus íconos */
  height: 1.5rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
}

.custom-icon-truck-solid2 {
  background-image: url('../icons/truck-solid.svg');
  display: inline-block;
  width: 1.5rem; /* Define el ancho deseado para tus íconos */
  height: 1.5rem; /* Define la altura deseada para tus íconos */
  background-repeat: no-repeat;
}

.index-stock-status .custom-icon{
  margin-right: 0;
  margin-left: 0;
}

.img-icon{
  width: 1.2rem;
}

.banners-bottom{
  /*background-color: #00cc00;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    align-items: center;
    padding: 0.1rem;
    gap: 1rem;
    /*margin-top: 1rem;*/
    /*border-top: 1px solid silver;*/
    padding-top: 1rem;
    /*position: absolute;
    bottom: 0;*/
}

#banners-bottom-1, #banners-bottom-2, #banners-bottom-3, #banners-bottom-4{
  display: none;
}

#bannerLeftItem-4, #bannerLeftItem-5, #bannerLeftItem-6, #bannerLeftItem-7, #bannerLeftItem-8
{
  display: none;
}


.bannerBottom .banner-bottom-img{
  /*width: 100%; */
  width: 13rem;
  border-radius: 3%;
}



.banner-bottom-img{ 
  /*width: 20rem;*/
  border-radius: 3%;
}

.footer-copy{
  width: 100%; 
}





 
.custom-icon-gear-solid {
  background-color: var(--color-icon-menu);
  mask: url('../icons/gear-solid.svg') no-repeat center;
  -webkit-mask: url('../icons/gear-solid.svg') no-repeat center;
}





.custom-icon-gashapon {
  background-image: url('../icons/gashapon.png');
  background-size: 16px;
  
}

.custom-icon-figure {
  background-image: url('../icons/figure.png');
  background-size: 16px;
}

.custom-icon-manga {
  background-image: url('../icons/manga.png');
  background-size: 16px;
}

.custom-icon-card {
  background-image: url('../icons/card.png');
  background-size: 16px;
}


/* ICONOS - FIN */

.avatar-container{
  /*height: 120px;*/
  /*width:20%;*/
  /*background-color:#d4f280e5;*/
  text-align: center;
  /* margin:auto; */
  margin-right:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

.avatar{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  cursor: pointer;
}


.username-container{
  /*height: 120px;*/
  /*width:20%;*/
  /*background-color:#d4f280e5;*/
  text-align: center;
  /* margin:auto; */
  margin-right:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.username{
  width: 100%;
  font-size: 1rem;
}

.user-email{
  width: 100%;
  font-size: 0.9rem;
}

.avatar-big-img{
  max-width: 18rem;
}

.avatar-container-select{
  /*height: 120px;*/
  /*width:20%;*/
  /*background-color:#d4f280e5;*/
  text-align: center;
  /* margin:auto; */
  margin-right:auto;
  display: inline-block;
  align-items: center;
  font-size: 22px;
}





.title-2{
  font-size: 1.6em;
  padding-bottom: 0.1rem;
}

.notif-importante{
  background-color: #66CEFF;
  padding: 10px;
  text-align: center;

}

.notif-row {
  display: flex;
  flex-wrap: wrap;
  /*width: 100%;*/
  align-items: center;
  padding: 0.2rem;
}








.container-1{
    width:100%;
    margin:auto;
    display: grid;
    /*grid-template-columns: 1fr 210px 1fr auto 1fr 210px;*/
    grid-template-columns: 1fr 1fr;
    gap:1rem;
}

.container-2{
  width:100%;
  margin:auto;
  display: flex;
  flex-wrap: wrap;
  /*grid-template-columns: 1fr 210px 1fr auto 1fr 210px;*/
  gap:1rem;
}

.elemento-1{
  display: inline-block;

}

.elemento-2{
  display: inline-block
  
}

.elemento-3{
  display: inline-block
  
}


:root {
  --arrow-bg: rgba(255, 255, 255, 0.3);
  --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
  --option-bg: white;
  --select-bg: rgba(255, 255, 255, 0.2);
}

.select-1 {
  /* Reset */
  appearance: none;
  border: 1;
  outline: 0;
  font: inherit;

  /* Personalize */
  width: 20rem;
  padding: 1rem 4rem 1rem 1rem;
  background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em, linear-gradient(to left, #f38029 3em, var(--select-bg) 3em);    
  /*color: white;*/
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  /* Remove IE arrow */
  &::-ms-expand {
    display: none;
  }
  /* Remove focus outline */
  &:focus {
    outline: none;
  }
  /* <option> colors */
  option {
    color: inherit;
    background-color: var(--option-bg);
  }
}


.datosDir{
  display: none;
  margin-top: 10px;
  margin-right: 10px;
  padding: 10px;
  border: dashed;
}


.watchlist {
  font-weight: 400 !important;
  font-size: 25px;
  color: red;
  cursor: pointer;
}

.watchlist-checked {
  font-weight: 800 !important;
  font-size: 25px;
  color: red;
  cursor: pointer;
}

.watchlist-list{
  background-color: whitesmoke;
  display: flex;
  /*height: fit-content;*/
  margin-top: 20px;
  margin-top: 0.5rem;
  /*margin-left: 0.5rem;*/
  /*margin-right: 0.5rem;*/
  /*margin-left: 10px;*/
  /*border: dashed;*/
  border: 0.1rem solid darkgrey;
  padding: 10px;
  border-radius: 0.3rem;
}

.watchlist-img {
  /* background-color: #ff7053; */
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  /* width: 10rem; */
}





.fade-out {
  animation: fadeOut 2s ease-in-out 1s forwards; /* 2s de duración, 3s de retraso, se mantiene en el estado final */
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none; /* Ocultar el elemento al final de la animación */
  }
}


#formas_de_pago{
  display: none;
}




.card-watch{ /* cada elemento en el grid de favoritos */
  background-color: #f9f9f9;
  width: 200px;
  height: 240px;
  position: relative;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  border-top-right-radius: 5%;
  border: solid;
}

.watch-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 4%;
  }  

.origen-watch-container {
  position: relative; /* Permitirá posicionar elementos absolutamente relativos a este contenedor */
  width: 100%; /* O el ancho deseado */
}

/* Estilos para el ícono */
.origen-watch {
  position: absolute;
  top: 0;
  /* right: 0; */
  background-color: #2196F3;
  color: #fff;
  padding: 5px;
  font-size: 12px;
}

.heart-watch-container {
  position: absolute; /* Permitirá posicionar elementos absolutamente relativos a este contenedor */
  bottom: 0;
  width: 100%; /* O el ancho deseado */
}

/* Estilos para el ícono */
.heart-watch {
  color: red;
  padding-right: 5px;
  padding-bottom: 5px;
  z-index: 2;
  float: right;
  /*font-size: 25px;*/
  font-weight: 800 !important;
  cursor: pointer;
}



.name-item-container {
  position: absolute;
  width: 100%; /* O el ancho deseado */
  bottom: 0;
}

.name-item-watch{
  display: inline;
  color: #000;
  font-size: 14px;
  /* background-color: aqua; */
  padding-left: 10px;
  }

  .watch-remove-text{
    display: none;
    background-color:#000;
    color:#fff;
    position: absolute;
    width: 100%; /* O el ancho deseado */
    bottom: 50%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 95%;
  }

  .modal-body{
    position: relative;
  }

  .modal-body-2{
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
  }

  .control-left{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-family: monospace;
    cursor: pointer;
    background-color: gainsboro;
    /* padding: 15px; */
    width: 1.5rem;
    height: 1.5rem;
    padding: 1rem;
    border-radius: 50%;
  }

  .control-left:hover {
    background-color: lightgrey;
  }

  .control-right{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-family: monospace;
    cursor: pointer;
    background-color: gainsboro;
    /* padding: 15px; */
    width: 1.5rem;
    height: 1.5rem;
    padding: 1rem;
    border-radius: 50%;
  }

  .control-right:hover {
    background-color: lightgrey;
  }

  .control-bottom {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }

  






.envio-card{
  display: flex;
  flex-direction: row;
  position: relative;
  border: 0.1rem solid darkgrey;
  border-radius: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.6rem;
  
  align-items: center;
  gap:2rem;
  flex-wrap: wrap;
}

.compra-envio-card{
  display: flex;
  flex-direction: row;
  position: relative;
  border: dotted;
  margin: 10px;
  align-items: center;
  gap:2rem;
  padding: 10px;
  text-align: center;
}

.compra-envio-logo{
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
}

.envio-id{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.envio-fecha-solic{
  display: inline-flex;
  position: relative;

}

.envio-pago{
  display: inline-flex;
  position: relative;
  font-size: 0.9rem; 
}

.envio-status{
  display: inline-flex;
  position: relative;
  font-size: 0.9rem; 
}

.envio-items{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.envio-item{
  margin: 0.2rem;
  border: 0.1rem solid white;
  border-radius: 0.3rem;
  display: flow;
  text-align: center;
}

.fa-truck-large{
  font-size: x-large;
}

.nueva-direccion-container{
  /*background-color: #d3f8ff;*/
  position: relative; 
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form-container{
  /*background-color: #d3f8ff;*/
  /*position: relative; */
  display: flex;
  justify-content: center;
}

.form-text{
  display: inline-flex;
  flex-direction: row;
  float:left;
  /*margin: 4px;*/
  padding: 0.2rem;
  width: 11.5rem;
  /*width: -webkit-fill-available;*/
  align-items: center;
  text-align: left;
}

.form-element{
  /*background-color:#e6fffd;*/
  display: inline-flex;
  flex-direction: row;
  float:left;
  /*margin: 4px;*/
  padding: 0.2rem;
  width: 25rem;
}



.stock-container{
  background-color: #d3f8ff;
  position: relative; 
  width: 100%;
}

.itemform-container{
  width: 96%;
  position: relative; 
  padding: 0.5rem;
}

.upload-form{
  max-width: 50rem;
}

.itemform-edit-container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.stock-form-element{
  /*background-color:#e6fffd;*/
  /*display: flex;*/
  flex-direction: row;
  /*margin: 4px;*/
  padding: 4px;
  align-items: center;
}

.stock-form-element-flex{
  /*background-color: #000000;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  padding: 4px;
  align-items: center;
  gap: 0.5rem;
}

.stock-form-element-hidden{
  display: none;
}

.stock-form-element-2{
  background-color: #e6fffd;
  display: block;
  flex-direction: row;
  margin: 4px;
  padding: 4px;
  align-items: center;
}

.stock-form-element-3{
  font-size: 1.5rem;
}

.stock-form-element-submit{
  display: flex;
  gap: 0.5rem;
  justify-content: space-evenly;
}

.stock-form-textarea{
  width: 100%;
  height: 100px;
}

.alert{
  border: 0.2rem solid #ff8f00;
}

.alert2{
  border: 0.2rem solid #00e2ff;
}

.stock-form-container-auction{
  border: double;
  padding: 4px;
  margin: 4px;
}



.select-2 {
  /* Reset */
  display: block;
  appearance: none;
  outline: 0;
  font: inherit;
  /* margin: 8px 0 0 4px; */
  width: 100%;
  padding: 10px 4px 10px 4px;
  background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em, linear-gradient(to left, #007bff 3em, #e9e9e9 3em);
  color: #333;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  /* Remove IE arrow */
  &::-ms-expand {
    display: none;
  }
  /* Remove focus outline */
  &:focus {
    outline: none;
  }
  /* <option> colors */
  option {
    color: inherit;
    background-color: var(--option-bg);
  }
}

.stock-check{
  display:inline-flex;
  align-items: center;
  padding-right: 3rem;
}




input[type=text] {
  /*width: 100%;*/
  padding: 0.75rem 1.25rem;
  /*margin: 8px 0;*/
  box-sizing: border-box;
}

input[type=email] {
  width: 100%;
  padding: 0.75rem 1.25rem;
  /*margin: 8px 0;*/
  box-sizing: border-box;
}

input[type=password] {
  width: 100%;
  padding: 0.75rem 1.25rem;
  /*margin: 8px 0;*/
  box-sizing: border-box;
}



input[type=number] {
  padding: 6px 6px;
  /*margin: 8px 0;*/
  box-sizing: border-box;
  font-size: larger;
}

input[type=float] {
  padding: 6px 6px;
  /*margin: 8px 0;*/
  box-sizing: border-box;
  font-size: larger;
}

input[type=date] {
  
  padding: 6px 6px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: larger;
}

input[type=datetime-local] {
  
  padding: 6px 6px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: larger;
}

input[type=checkbox] {
  padding: 12px 20px;
  /*margin: 8px 0;*/
  box-sizing: border-box;
}

.item_title{
  font-family:"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2rem;
  /*font-weight: 600;*/
  padding-bottom: 0.7rem;
  line-height: 1.4rem;
}

.fieldset-1{
  /*background-color: #007bff;*/
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.fieldset-container{
  /*display: flex;*/
  text-align: right;
}


.item-main-2{ 
    margin-top: 4.5rem;
    /*height: fit-content;*/
    /*background-color:#bdbdbd;*/
    position: relative;
}

.item-main-3{ 
  margin-top: 7rem;
  width: 100%;
}

.item-container{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.item-main-first-left-2{ 
  background-color:#f4d0d0;
  display: flex;
  max-width: 48%;
  text-align: center;
  flex-wrap: wrap;    
  justify-content: center;
  align-items: center;
}

.item-main-first-left-2b{ 
  /*background-color:#f4d0d0;*/
  max-width: 48%;
  text-align: center;
  flex-wrap: wrap;    
  justify-content: center;
  align-items: center;
}

.item-main-first-right-2{ 
  /*background-color:#ebf4d0;*/
  display: inline-block;
  max-width: 48%;
  width: 100%;
  text-align: center;
}

.subastado{
  position: absolute;
  background-color: #ff7053;
  color: aliceblue;
  top: 50%;
  width: -webkit-fill-available;
  z-index: 1;
  text-align: center;
  padding: 10px;
}

.panel-admin-container{
  display: flex;
  flex-direction: row;
  gap:1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.panel-admin-cotiz {
  color: var(--color2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border: 0.1rem solid darkgrey;
  border-radius: 0.3rem;
  padding: 0.5rem;
}

.panel-admin-buttons {
  color: var(--color2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  gap: 1rem;
  border: 0.1rem solid darkgrey;
  border-radius: 0.3rem;
  padding: 0.5rem;
}





.notif-list-img-container{
  width: 6rem;
    height: 6rem;
    overflow: hidden;
    display: flex; /* Keep for flexbox centering */
    align-content: center;
    align-items: center;
    justify-content: center;
}

.notif-list-img{
  text-align: center; /* Centra horizontalmente el texto */
    /*width: 100%; */
    padding: 1px 0; /* Agrega espacio arriba y abajo del texto */
    box-sizing: border-box;
}

.notif-list-text{
  background-color: antiquewhite;
  /*text-align: center; */
    width: 100%; /* Opcional: asegura que el div ocupe todo el ancho disponible */
    display: grid;
    align-items: center;
    
    
}

.auction-list-img{
  /*background-color: #ff7053;*/
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 10rem;
}

.auction-list-element{
  /*background-color: #f8c3b9;*/
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.auction-list-element-2{
  /*background-color: #f8c3b9;*/
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.9rem;
}

.auction-list-subelement{
  padding-right: 0.5rem;
}

.auction-list-subelement a{
  text-decoration: none;
}

.stock-list-element{
  /*background-color: #f8c3b9;*/
  display: flex;
  align-items: center;
  padding-left: 0.3rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  /*padding: 0.3rem;*/
  /*
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  */
}

.stock-list-element-2{
  display: flex;
  width: 100%;
  align-items: center;
  /*justify-content: center;*/
}



.notif-list-a{
  display: flex;
}

.notif-list-a-red{
  display: flex;
  border: 4px solid red;
}

.notif-list-a-blue{
  display: flex;
  border: 4px solid blue;
}

.notif-list-a-green{
  display: flex;
  border: 4px solid green;
}

.notif-list-a-grey{
  display: flex;
  border: 4px solid grey;
}




.notif-list-icon{
  /*background-color: #ff7053;*/
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 7rem;
}









.title-cut{
  white-space: nowrap;         /* Evita el salto de línea */
  overflow: hidden;            /* Oculta el texto que no cabe */
  text-overflow: ellipsis;     /* Agrega puntos suspensivos al final */
  width: 300px;                /* Ancho máximo del contenedor */
}

.alerta-vto{
  font-weight: bold;
}



.header-filtros{
  display: flex;
  align-items: center;
}

.index-countdown-container{ 
  /*font-size: 1.5rem;*/
  font-family: monospace;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-top: -0.3rem;
} 

.index-countdown-text{
  font-size: 1.5rem;
}

.index-countdown{
  font-size: 2rem;
  display: flex;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
}

.container-counter{
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  text-align: -webkit-center;
}

.count-number{
  background-color: black;
  color: greenyellow;
  padding: 0.5rem;
  border-radius: 10%;
  text-align: center;
  width: 2rem;
}

.count-text{
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  width: 4.5rem;
  height: 1.2rem;
  /*background-color: red;*/
  text-align: center;
}


.parrafo{
  font-size: 1rem;
  font-family: sans-serif;
  padding: 1rem;
  text-align: justify;
}

.parrafo-2{
  font-size: 1rem;
  font-family: sans-serif;
  padding: 0.5rem;
  margin-left: 0.5rem;
  text-align: justify;
}

.parrafo-img{
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
}


.img-animerch{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 21rem;
  padding: 0.5rem;
}


.contact-social{
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}



.container-avisos{
  display: flex;
  align-items: center;
  justify-content: center;
}

.texto-acumula-div{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  width: 48%;
  height: 6.5rem;
  /*border: 3px solid magenta;*/
  background-color: beige;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0.3rem;
  /*margin-top: 0.5rem;*/
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.texto-original-div{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  width: 48%;
  height: 6.5rem;
  /*border: 3px solid magenta;*/
  background-color: papayawhip;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0.3rem; 
  /*margin-top: 0.5rem;*/
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.pagination{
  display: flex;
  justify-content: center;
  /* background-color: #00cc00; */
  width: 100%;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  gap: 1rem;
}

.pagination a{
  text-decoration: none;
  color: lightgray;
}

.pag-num{
  text-align: center;
  padding: 0.3rem;
  width: 1rem;
  border: 0.1rem solid #e0e0e0;
  cursor: pointer;
  border-radius: 2rem;
  font-size: 0.8rem;
}

.pag-num.active {
  background-color: lightgray;
  color: #121212;
}

.pag-num:hover {
  background-color: whitesmoke;
  color: #0f1111;
}

.pag-num.active:hover {
  background-color: whitesmoke;
  color: #0f1111;
}

.countdown{
  padding: 0.1rem;
  font-size: 1rem;
  margin-left: 0.3rem;
  font-weight: 600;
  color: #ffeb3b;
}

.cotizaciones{
  font-size: 0.9rem;
}

.filters-element-text{
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}

.select-filtros{
  font-size: 1rem;
}

.grid-categorias{
  /* Grid */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid silver;
  margin-top: 1rem;
  padding-top: 1rem;
}

.card-categorias{
  /*background-color: #f9f9f9;*/
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.categ-img-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.categ-img {
  width:13rem;
  border-radius: 0.2rem;
  }  


.compras-cliente-texto{
  display: flex;
  gap: 0.5rem;
  padding-top: 0.3rem;
}

.compras-cliente-texto2{
  padding-top: 0.3rem;
}
  














  


















/* Estilos CSS para las miniaturas de imágenes al cargarlas en stock */
.thumbnail {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 5px;
  text-align: center;
  line-height: 100px;
  cursor: move;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Estilos CSS para el botón de eliminar */
.delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: red;
  color: white;
  padding: 3px 6px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
}

.no-result{
  /*background-color: #a5e8ff;*/
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.no-result-title{
  width: 100%;
  font-weight: 600;
}

.no-result-img{
  width: 100%;
}

.texto-filtros{
  background-color: #007bff;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 0.2rem;
}

.resultados-element{
  /*background-color:cornsilk;*/
  margin: 0.5rem;
  display: flex;
  align-items: center;
  border: 0.1rem solid lightgray;
}

.resultados-element:hover{
  background-color: rgb(236, 236, 236);
  color: #0f1111;
}

.ver-resultados-link{
  display: flex;
  margin-bottom: 1rem;
}



.resultados-title{
  display: flex;
  align-items: center;
  text-align: justify;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.85rem;
}

.resultados-img{
  display: flex;
}


/* AGREGADOS / MODIFICADOS */

.modal-footer-element-bid {
  display: flex;
  text-align: center;
  align-items: center;
  /*width: 100%;*/
  padding: 0.5rem;
}


.modal-footer-element-text{
  text-align: justify;
}




.confirmation{
  /*font: inherit;*/
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  margin: 0.5rem;
}

.modal-footer-bid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  /*padding-left: 5%;*/
  /*padding-right: 5%;*/
  font-size: 0.9rem;
}


.auction-list-container{
  width: 100%;
  padding-bottom: 1rem;
}

.button-bid {
  background: yellowgreen;
  border: 1px solid yellowgreen;
  border-radius: 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  /*min-height: 40px;*/
  outline: 0;
  /*padding: 12px 14px;*/
  padding: 8px 10px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.button-bid:hover,
.button-bid:active {
  background-color: initial;
  background-position: 0 0;
  color: yellowgreen;
}

.button-bid:active {
  opacity: .5;
}


.ended{
  background-color: firebrick;
  color: aliceblue;
  width: -webkit-fill-available;
  text-align: center;
  padding: 10px;
  font-size: 0.7rem;
}


.rect-img-container-ended {
  position: relative;
  /*background-color: blueviolet;*/
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(100%);
}
  
.rect-img-container-ended::after {
  content: "";
  display: block;
  padding-bottom: 100%;
} 
  
.dolarhoy{
 width: 15rem;
 height:260px;
 border-radius:10px;
 /*box-shadow:2px 4px 4px rgb(0 0 0 / 25%);*/
 display:flex;
 justify-content:center;
 border:1px solid #bcbcbc;
}

.data__titulo {
  font-size: 1.3rem;
}

.flex-container-center {
  display: inline-grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 0.2rem;
}

.auctionPrice1{
  height: 7.5rem;
  width: 48%;
  background-color:#ffffffe5;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid lightgrey;
}

.auctionPrice2-n{
  height: 7.5rem;
  width:48%;
  background-color:#ffffffe5;
  text-align: center;
  margin:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid lightgrey;
}

.auctionPrice2-l{
  height: 7.5rem;
  width:48%;
  background-color:rgb(251, 209, 195);
  text-align: center;
  margin:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid lightgrey;
}

.auctionPrice2-w{
  height: 7.5rem;
  width: 48%;
  background-color: lightcyan;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid lightgrey;
}

.auctionPrice2-winner{
  height: 7.5rem;
  width: 48%;
  background-color:chartreuse;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid lightgrey;
}

.precio_left_button{
  font-size: 0.9rem;
}

.watchlist-text-container {
  height: 1rem;
  /*background-color: #007bff;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-cut-compras{
  white-space: nowrap;         /* Evita el salto de línea */
  overflow: hidden;            /* Oculta el texto que no cabe */
  text-overflow: ellipsis;     /* Agrega puntos suspensivos al final */
  font-size: 0.9rem;
  max-width: 9rem;
}

.ranking{
  display:flex;
  align-items: center;
  justify-content:center;
  /*margin-top: 0.5rem;*/
}



.auction-list-img-container{
  overflow: hidden;
  background-color: darkgrey;
}

.stock-list-container-1{
  display: flex;
  justify-content: center;
  flex-flow: column;
  width: 12rem;
}



.stock-list-element-text{
  /*max-width: 17rem;*/
  font-size: 0.9rem;
  /*padding-top: 0.5rem;*/
  text-align: left;
}

.stock-list-obs{
  font-size: 0.9rem;
}




.tabla_clientes{
  display: flex;
  flex-flow: wrap;
}

.a-class{
  width: 100%;
  text-decoration: none;
}



.tabla_clientes_id{
  width: 3rem;
}

.tabla_clientes_username{
  width: 10rem;
}

.tabla_clientes_email{
  padding-right: 1rem;
  width: 18rem;
}

.tabla_clientes_country{
  width: 3rem;
}

.tabla_clientes_avatar{
  padding-right: 1rem;
}

.tabla_clientes_credit{
  /*width: 12rem;*/
}



.auction-list{
  display: flex;
  flex-wrap: wrap;
  /*height: fit-content;*/
  margin-top: 0.5rem;
  /*margin-left: 0.5rem;*/
  /*margin-right: 0.5rem;*/
  /*border: dashed;*/
  /*padding: 10px;*/
  gap: 0.5rem;
  align-items: center;
  /*border: 0.1rem solid lightgrey;*/
}

.check-ganando{
  padding: 0.5rem;
}

.title-1{
  display: inline-block;
  font-size: 1.2rem;
  padding-bottom: 0.5rem; 
  width: 100%;
}

.login_msg{
  padding: 0.5rem;
  margin: 0.5rem;
  border: 0.1rem solid blueviolet;
  color: blueviolet;
  font-size: 0.9rem;
}

.signin_msg{
  padding: 0.5rem;
  margin: 0.5rem;
  border: 0.1rem solid blueviolet;
  color: blueviolet;
  font-size: 0.9rem;
}

.login-text{
  padding: 0.5rem;
  margin: 0.5rem;
}

.login-success-img{
  text-align: center;
}

.form-label{
  font-weight: 600;
}

.historial{
  display: flex;
  /*flex-flow: wrap;*/
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.historial-bloque{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0.4rem;
  border: 0.1rem solid lightgrey;
  font-size: 0.85rem;
  width: fit-content;
}

.historial-element{
  padding: 0.25rem;
  width: 10rem;
  text-align: left;
  /*background-color: aqua;*/
}





.texto-envios-div{
  font-size: 0.9rem;
  width: auto;
  /*border: 3px solid magenta;*/
  background-color: aliceblue;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0.3rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.texto-envios-div-2{
  font-size: 0.9rem;
  width: auto;
  border: 0.1rem solid magenta;
  background-color:mistyrose;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0.3rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.texto-info-compra{
  font-size: 0.9rem;
  width: auto;
  border: 0.1rem solid #fbeaf9;
  background-color: #fbeaf9;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0.3rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  
  text-decoration: none;
  font-weight: 600;
  color: black;
  text-align: center;
}



.login-meme{
  width: 100%;
  max-width: 40rem;
}

.infored-div{
  padding: 0.5rem;
  margin: 0.5rem;
  border: 0.1rem solid red;
  color: red;
  /*font-size: 1rem;*/
}

.div-loading{
  padding: 2rem;
  display: flex; 
  align-items: center;
}

.info-texto{
  text-align: center;
}

.pagos-list-container-1{
  display: flex;
  justify-content: center;
  flex-flow: column;
  width: 30rem;
  padding-left: 0.5rem;
}

.pagos-list-container-2{
  display: flex;
  justify-content: center;
  flex-flow: column;
  padding: 0.5rem;
  gap: 0.5rem;
}

.pagos-list-container-3{
  display: flex;
  justify-content: center;
  flex-flow: column;
  /*width: 12rem;*/
  padding: 0.5rem;
}

.notif-list-container-1{
  display: flex;
  justify-content: center;
  flex-flow: column;
  /*width: 12rem;*/
  width: 80%;
}

.notif-list-container-2{
  display: flex;
  justify-content: center;
  flex-flow: column;
  /*width: 12rem;*/
}

.notif-row-2 {
  display: flex;
  flex-wrap: wrap;
  /*width: 100%;*/
  align-items: center;
  padding: 0.5rem;
  font-size: 0.9rem;
}



.compra-element{
  padding: 0.2rem;
}

.modal-bid-success {
  display: none;
  justify-content: center;
  width: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  background-color: black;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;    
  animation: slideIn 0.5s forwards;
}

.success-bid-text{
  color:#bdbdbd;
  padding-top:1rem;
}

.loading-cat{
  /*width: -webkit-fill-available;*/
  max-width: 12rem;
}

.subnav-user-logout{
  padding: 0.8rem;
}

/* Estilo base para el menú */
.navMenu-user{
  width: 90%;
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content: right;
  border-radius: 0.5rem;
}

.li-subnav{
  display: flex;
  justify-content: right;
}

.li-subnav a{
  color: #333;
}

.li-subnav a:hover{
  color: orangered;
}

.price-comprar-confirm{
  padding: 0.8rem;

}

.no-result-div{
  display: flex;
  /*justify-content: center;*/
  /*flex-wrap: wrap;*/
  padding-top: 0.5rem;
}

.login-container{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}

.login-div{
  padding: 0.5rem;
}

.login-div-1{
  /*background-color: #007bff;*/
  width: 48%;
}

.login-div-2{
  /*background-color:rgb(253, 203, 203);*/
  width: 48%;
}

.input-login{
  width: 100%;
}



.elemento-1-envios-text {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.elemento-2-envios-text {
  padding-top: 0.5rem;
  padding-bottom: 0.9rem;
}

.container-envios-2{
  width:100%;
  margin:auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  /*grid-template-columns: 1fr 210px 1fr auto 1fr 210px;*/
  gap:1rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.icon-div{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.icon-text{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.tracking{
  font-size: 0.9rem;
  padding-left: 0.3rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.img-envios{
  width: 6rem;
  height: 6rem;
  padding: 0.2rem;
  object-fit: cover;
}

.resaltado1{
  color: crimson;
  font-weight: 600;
}

.card-direccion{
  margin: 0.5rem;
  padding: 0.5rem;
  border: 0.1rem solid lightgrey;
}

.footer-button{
  padding-top: 0.5rem;
}

.header-button{
  padding: 0.5rem;
}

.modal-pago-form{
  display: none;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;    
  animation: slideIn 0.5s forwards;
  font-size: 0.9rem;
}

.pago-form-container{
  display: flex;
  width: 100%;
  flex-flow: wrap;
  /* flex-wrap: inherit; */
  /* flex-flow: nowrap; */
  align-items: center;
}

.pago-form-container-element{
  padding: 0.2rem;
  margin-bottom: 1rem;
}

.pago-form-container-button{
  gap: 0.5rem;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.not-found{
  width: 100%;
  display:flex;
  justify-content: center;
}

.img-not-found{
  width: inherit;
  max-width: 50rem;
}

.form-input-min-readonly {
  display: flex;
  width: 7rem;
  height: 1.5em;
  border: inset;
  background-color: #bdbdbd;
  text-align: center;
}

.precio-stock-envio{
  /*background-color:#66CEFF;*/
  display: flex;
  font-weight: 600;
}

.form-element-envio-prov-icon{
  font-size: 0.75rem;
  width: auto;  
  /*background-color: mistyrose;*/
  margin-bottom: 0.2rem;
}

.form-element-envio-prov{
  /*background-color:#e6fffd;*/
  display: inline-flex;
  flex-direction: row;
  float:left;
  margin: 0.1rem;
  padding: 0.1rem;
  font-size: 0.9rem;
  width: 10rem;
}

.price-symbol-stock-envio{
  /*-webkit-text-size-adjust: 100%;*/
  /*font-family: "Amazon Ember",Arial,sans-serif;*/
  -webkit-box-direction: normal;
  font-style: normal;
  text-transform: none;
  line-height: normal;
  color: #0F1111;
  box-sizing: border-box;
  position: relative;
  top: -0.35em;
  font-size: 0.8rem;
}

.price-whole-stock-envio{
/*-webkit-text-size-adjust: 100%;*/
/*font-family: "Amazon Ember",Arial,sans-serif;*/
-webkit-box-direction: normal;
font-style: normal;
text-transform: none;
line-height: normal;
box-sizing: border-box;
}

.precio-stock-envio-left{
  /*background-color: #00cc00;*/
  display: flex;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.currency-text-small{
  font-size: 0.8rem;
}

.costo-envio-fijo{
  width: 100%;
}

.ventas-list-container-1{
  display: flex;
  justify-content: center;
  flex-flow: column;
  padding-left: 1rem;
}

.form-container-2{
  /*background-color: #d3f8ff;*/
  /*position: relative; */
  display: flex;
  justify-content: center;
  width: 12rem;
}

.avatar-container-2{
  /*height: 120px;*/
  /*width:20%;*/
  /*background-color:#d4f280e5;*/
  text-align: center;
  /* margin:auto; */
  margin-right:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

.avatar-container-3{
  text-align: center;
  margin-right:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  gap: 0.5rem
}

.auctionPrice2{
  height: 9.5rem;
  width: 48%;
  background-color:#ffffffe5;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid lightgrey;
}

.local-price{ 
  /*text-align: left;*/
  padding-top: 5px;
  padding-bottom: 5px;
  display:flex;
  align-items: center;
  justify-content: center;
} 

.currency-symbol-small{
  font-size: 0.8rem;
}


.cuenta-bloqueada{
  background-color: #fac0c0;
  width: 100%;
  text-align: center;
  padding: 0.5rem;
}

.img-comprado{
  max-width: 18rem;
}

.filter_result{
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  cursor: pointer;
  color: var(--color-link);
}

.filter_result:hover{
  font-weight: 600;
}

.title1{
  font-size: 1.2rem;
  font-weight: 600;
  color: dimgrey;
}

.input-cliente-number{
  width: 4rem;
}

.input-cliente-name{
  width: 10rem;
}

.buttons-title{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.buttons-container{
  display: flex;
  justify-content: end;
  padding-top: 0.5rem;
  margin-bottom: 0.5rem;
}





.modal-subtext{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tag-delete-text{
  padding-left: 0.5rem;
  font-weight: 600;
}

.input-number-short{
  width: 8rem;
  margin-left: 0.5rem;
}

.input-label{
  white-space: nowrap;
  /*margin-right: 0.5rem;*/
}

.input-select{
  width: 20rem;
}

.input-select-2{
  text-align: right;
}

.input-select-3{
  width: 100%;
}

.input-text{
  width: 100%;
}



.form-textarea-item{
  width: 100%;
  display: flex;
  justify-content: center;
}

.label-1{
  white-space: nowrap;
  padding: 0.3rem;
  border: 0.09rem solid grey;
  border-radius: 0.3rem;
  margin-top: 0.3rem;
  color: grey;
}

.label-delete{
  white-space: nowrap;
  padding: 0.3rem;
  border-radius: 0.3rem;
  margin-top: 0.3rem;

  background-color: white;
  color: red;
  border: 0.09rem solid red;
  cursor: pointer;
}

.label-delete:hover{
  background-color: red;
  color: white;
}

.label-button{
  white-space: nowrap;
  padding: 0.3rem;
  border-radius: 0.3rem;
  background-color: #007bff;
  color: white;
  border: 0.09rem solid #007bff;
  cursor: pointer;
}

.label-button:hover{
  background-color: #6e8ff3;
  color: white;
}



.input-label-long{
  font-size: 0.9rem;
}

.form-textarea-2{
  width: 100%;
  height: 20rem;
  border-radius: 0.2rem;
}

.form-textarea-3{
  width: 100%;
  height: 10rem;
  border-radius: 0.2rem;
}

.info-item{
  border: 0.1rem solid grey;
  border-radius: 0.3rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.info-container{
  flex-wrap: wrap;
  display: flex;
  gap: 0.5rem;
}

.created{
  font-size: 0.85rem;
  width: 100%;
  display: flex;
}

.created-date-title{
  width: 8rem;
}

.created-date{
  width: 11rem;
}

.nota-sistema{
  font-size: 0.8rem;

}






























    /* tablet 1 */



  @media (max-width: 87.5rem){
      .divRight{
        display: none;
      }
  }

@media (max-width: 95rem){
  #card_similares_5{
    display: none;
  }
}  

@media (max-width: 89rem) {

  .item-main-first-left-2{ 
    width: 100%;
  }

  .item-main-first-right-2{ 
    width: 100%;
  }

  .item-main-gallery{
    width: 60%;
  }


}

@media (max-width: 88.6rem) {
  .categ-img {
    width: 13rem;
  }
}


@media (max-width: 85rem)
{
  .notif-list-container-2 {
    width: 100%;
  }
}




@media (max-width: 81.9rem){
  #card_similares_5{
    display: block;
  }

  #card_similares_4{
    display: block;
  }

  .item-main-gallery{
    width: 70%;
  }

} 



@media (max-width: 80rem) {
  .categ-img {
    width: 14rem;
  }
}

@media (max-width: 77rem) {
  .categ-img {
    width: 12rem;
  }

  .imgPrincipal-gallery{
    width: 70%;
    object-fit: cover;
  }
}

@media (max-width: 71.5rem){
  .imgPrincipal{
    width: 20rem;
    height: 20rem;
    object-fit: cover;
  }

  .item-main-gallery{
    width: 90%;
  }
} 

@media (max-width: 74rem) {
  .categ-img {
    width: 12rem;
  }

  #banners-bottom-5{
    display: none;
  }

  #bannerLeftItem-4{
    display: block;
  }
}

@media (max-width: 70rem) {
  .categ-img {
    width: 12rem;
  }

  .login-div-1{
    width: 98%;
  }

  .login-div-2{
    width: 98%;
    border-top: 0.1rem solid grey;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

@media (max-width: 68rem){
  .categ-img {
    width: 14rem;
  }
}

@media (max-width: 67.5rem){

  .imgPrincipal-gallery{
    width: 80%;
    object-fit: cover;
  } 
}







@media (max-width: 65rem){
  .item-main-first-left-2b{
    max-width: 100%;
  }

  .item-main-first-right-2{
    max-width: 100%;
  }

  #bannerLeftItem-5
  {
    display: block;
  }

  #bannerLeftItem-6
  {
    display: block;
  }

  #bannerLeftItem-7
  {
    display: block;
  }

  #banners-bottom-6
  {
    display: none;
  }

  #banners-bottom-7
  {
    display: none;
  }

  #banners-bottom-8
  {
    display: none;
  }

  .imgPrincipal-gallery{
    width: 90%;
    object-fit: cover;
  } 
}





@media screen and (max-width: 60rem) {
  .categ-img {
    width: 12rem;
  }

  .imgPrincipal-gallery{
    width: 100%;
    object-fit: cover;
  } 
}




@media screen and (max-width: 59rem) {
  .stock-list-block-2{
    max-width: 10rem;
  }

  .modal_info {
    width: 80%;
    font-family: system-ui;
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(58, 58, 58);
    color :whitesmoke;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
}


@media (max-width: 56rem){

  .item-main-gallery{
    width: 90%;
  }

  .categ-img {
    width: 12rem;
  }

} 
  
/* phone */
@media (max-width: 54rem)
{
    header{
      display: flex;
      flex-wrap: wrap;
      /*background-color: chocolate;*/
      position: fixed;
      z-index: 1;
      align-items: center;
      justify-content: center;
      border-bottom: 1pt solid silver;
      /*padding-bottom: 0.3rem;*/
    }

    .header-container{
      /*background-color:#0f1111;*/
      display: flex;
      justify-content: center;
      width: auto;
      align-items: center;
      gap: 0.7rem;
      /*padding-left: 0.5rem;*/
      /*padding-top: 0.3rem;*/
    }

    .dolar-value-header{
      display: flex;
    }

    .navMenu{
      z-index: 1;
    }

    .checkbtn{
        display:flex;
    }
    
    .enlace{
        display: flex;
    }
    
    .divLeft{ /* LATERAL IZQUIERDO */
        display: none;
    }

    .modal-base{
      width: 70%;
    }

    .modal-categorias {
      width: 86%;
      max-height: 80vh;
      top: 5rem;
      left: auto;
    }

    #banners-bottom-1, #banners-bottom-2, #banners-bottom-3, #banners-bottom-4, #banners-bottom-5, #banners-bottom-6, #banners-bottom-7, #banners-bottom-8
    {
      display: flex;
    }

    .bannerBottom .banner-bottom-img{
      width: 12rem;
    }

    .item-main-first-left-2b{
      max-width: 100%;
    }

    .item-main-first-right-2 {
      max-width: 100%;
    }

    .item-main-middle-1 {
      text-align: center;
    }

    .divRight{ /* LATERAL DERECHO */
        display:none;
    }
 
    .containerMain{ /* contenedor principal para sistema de Grids */

      display: flex;
      flex-wrap: wrap;
    }  
    
    .logo{
      padding-top: 0.5rem;
      padding-bottom: 0.2rem;
    }

    #overlay_search {
      top: 4.6rem;
    }

    .modalSearch {
      top: 50.1%;
    }

    .stock-list-block-2{
      max-width: 100%;
    }

    .pagos-header{
      display: none;
    }

    .pagos-col-2{
      /*width: 100%;*/
      font-size: 0.9rem;
    }

    .pagos-title{
      display: flex;
    }

    #select-currency{
      display: none;
    }
    
    #select-theme{
      display: none;
    }

    .filters-element-text{
      font-size: 0.6rem;
      display: flex;
      align-items: center;
      padding-left: 0.5rem;
    }

    .select-filtros{
      font-size: 0.7rem;
    }

    .index-countdown-container{
      padding-top: 1rem;
    }

    .icon-user {
      width: 2.5rem;
      height: 2.5rem;
    }

    .index-countdown-container{ 
      margin-top: -1rem;
    } 

    .index-countdown-text{
      font-size: 1.1rem;
    }

    .container-filters{
      padding-top: 0;
      padding-bottom: 0;
    }

    .banners-bottom{
      position: relative;
      bottom: 0;
    }

    .pagos-list-container-1 {
      width: auto;
    }

    .pagos-list-container-2 {
      width: 100%;
    }

    .modal-base-nueva-dir {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      /* transform: translate(-50%, -50%); */
      background-color: #fff;
      padding: 1rem;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 2;
      animation: slideIn 0.5s forwards;
      text-align: -webkit-center;
      height: 80%;
      overflow: auto;
      width: 90%;
    }

    .categ-img {
      width: 11rem;
    }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 50rem) {
  .column {
    flex: 25%;
    max-width: 50%;
  }

  .categ-img {
    width: 13rem;
  }
}

@media (min-width: 48.1rem) {
  .left, .middle, .right {
      flex-basis: 33.33%;
  }
}


@media (max-width: 48rem) {
  .left, .middle, .right {
    flex-basis: 100%;
  }
}

@media screen and (max-width: 44.5rem) {
  .categ-img {
    width: 12rem;
  }
}

@media screen and (max-width: 43rem) {
  .stock-list-block-2{
    max-width: 10rem;
  }
}

@media (max-width: 41.87rem){
  .container-main {
    gap: 0.5rem;
  }
  
  .gridSimilares{
    gap: 0.5rem;
  }

} 

@media screen and (max-width: 41rem) {
  .categ-img {
    width: 10rem;
  }
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media all and (max-width: 37.5rem) {

  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }

  .topnav input[type=text] {
    border: 1px solid #ccc;
  }

  .avatar-container {
    display: none;
  }

  .price-symbol-balance{
    font-size: 0.7rem;
  }
  
  .price-whole-balance{
    font-size: 1.1rem;
  }
  
  .price-fraction-balance{
    font-size: 0.6rem;
  }

  .cargar-saldo{
    font-size: 0.8rem;
  }

  .column {
    flex: 100%;
    max-width: 100%;
  }
}

@media all and (max-width: 36.18rem) {
  
  .item-main-first-left-2 {
    max-width:100%;
  }

  .item-main-first-right-2 {
    max-width:100%;
  }

  .item-main-gallery{
    width: 96%;
  }

}

@media screen and (max-width: 37.43rem) {
  .stock-list-block-2{
    max-width: 100%;
  }
} 

@media screen and (max-width: 35rem) {
  .categ-img {
    width: 14rem;
  }
}

@media screen and (max-width: 33.9rem) {
  .stock-list-container-2{
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 0.1rem solid lightgray;
  }
}

@media screen and (max-width: 33rem) {
  .categ-img {
    width: 13rem;
  }
}

@media screen and (max-width: 31.25rem) {
  .divBottom-element-2{
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 30rem) {
  .categ-img {
    width: 12rem;
  }
}



@media screen and (max-width: 27.94rem)
{

  #overlay_search {
    top: 6.6rem;
  }
}

@media screen and (max-width: 27.5rem) {
  .categ-img {
    width: 10rem;
  }
}


@media all and (max-width: 26rem) {
  .card-grid-item {
    width:11rem;
    margin: 0.1rem;
  }

  .bannerBottom .banner-bottom-img{
    width: 11rem;
  }
}

@media screen and (max-width: 25.55rem) {

  .modalSearch {
    top: 52.9%;
    /*top: 54.7%;*/
  }

  .modal-categorias {
    top: 6.6rem;
    left: auto;
  }

  .notif-element-2 {
    font-size: 0.9rem;
  }
}



@media all and (max-width: 24.37rem) {

  #overlay_search {
    top: 6.6rem;
  }

  .card-grid-item {
    width:10rem;
    margin: 0.1rem;
  }

  .bannerBottom .banner-bottom-img{
    width: 10rem;
  }
}



@media all and (max-width: 23.12rem) {
  .card-grid-item {
    width:10rem;
    margin: 0.1rem;
  }

  .bannerBottom .banner-bottom-img{
    width: 100%;
  }

  .bannerBottom
  {
    padding: 1rem;
  }

  .categ-img {
    width: 18rem;
  }
}

@media all and (max-width: 18.12rem) {
  .card-grid-item {
    width:7.5rem;
    margin: 0.1rem;
  }

  .banners-bottom {
    gap: 0.2rem;
  }
  
  .bannerBottom{
    padding: 0.3rem;
  }

  .bannerBottom .banner-bottom-img{
    width: 7rem;
  }

  .pagination a {
    font-size: 0.7rem;
    text-decoration: none;
  }

  .pag-num {
    font-size: 0.7rem;
    padding: 0.4rem;
  }

  .divBottom-1{
    font-size: 0.7rem;
  }

  .price-symbol{
    font-size: 0.4rem;
  }

  .price-whole{
    font-size: 0.8rem;
  }

  .price-fraction{
    font-size: 0.5rem;
  }

  .nameItem{
    font-size: 0.7rem;
  }

  .usado{
    font-size: 0.6rem;
  }

  .item_title{
    font-size: 0.9rem;
  }

  .imgPrincipal {
    width: 90%;
    height: 15rem;
  }

}














.banner-upload-container {
  display: flex;
  flex-wrap: wrap;
  /*gap: 1rem;*/
  justify-content: center;
}

.banner-upload {
  position: relative;
  width: 10rem; /* Ajusta el tamaño según tus necesidades */
  height: 10rem; /* Ajusta el tamaño según tus necesidades */
  border: 2px dashed #ccc;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.banner-upload input[type="file"] {
  display: none;
}

.banner-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /*background-color: #f4f4f4;*/
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-preview span {
  position: absolute;
  color: #aaa;
}

.add-tag {
  cursor: pointer;
  transition-duration: 0.4s;
  border-radius: 0.3rem;
  padding: 0.5rem;
  background-color: unset;
  color: white;
  background-color: royalblue;
  color: white;
  border: 0.1rem solid royalblue;
  width: fit-content;
}

.add-tag:hover {
  background-color: unset;
}


@media (max-width: 48rem) {
  .banner-upload-container {
      flex-direction: column;
  }
}


/* Basic styles for the drop area */


/* Highlight effect when dragging a file over the drop area */
.banner-preview.highlight {
  border-color: #007bff; /* Change the border color when highlighted */
  background-color: #007bff; /* Light blue background during drag-over */
}

/* If you want to style the inner content during the highlight */
.banner-preview.highlight span {
  color: #007bff; /* Change text color when highlighted */
}

.banner-upload.highlight {
  border-color: #007bff; /* Change the border color when highlighted */
}