body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}
.d-flex{display:flex;}
.flex-row{display:flex;flex-direction:row;}
.flex-column {display:flex;flex-direction:column;}
.flex-grow{flex-grow:1;}
.flex-no-grow{flex-grow:0;}
.flex-shrink{flex-shrink:1;}
.flex-no-shrink{flex-shrink:0;}
.flex-wrap{flex-wrap:wrap;}
.justify-content-center{justify-content:center;}
.align-items-center{align-items: center;}
/*padding*/
.p-4{padding:4px;}
.p-8{padding:8px;}
.p-16{padding:16px;}
.p-24{padding:24px;}
.p-28{padding:28px;}
.p-32{padding:32px;}
/*margin*/
.m-4{margin:4px;}
.m-8{margin:8px;}.mt-8{margin-top:8px;}
.m-16{margin:16px;}
.m-24{margin:24px;}
.m-28{margin:28px;}
.m-32{margin:32px;}
/*color*/
.c-red{color:red;}
.c-gray{color:gray;}
.c-gainsboro{color: gainsboro;}
/*background-color*/
.bg-red{background-color:red;}
.bg-gainsboro{background-color:gainsboro;}
.bg-white{background-color:white;}
.bg-white-1{background-color:#f3f3f3;}

.color-secundario {
  color: #777;
}
.font-1-2em {
  font-size: 1.2em;
}

span.letra-grande {
  display: block;
  font-size: 1.35em;
  font-weight: bold;
  color: #666;
}
span.letra-grande2 {
  display: block;
  font-size: 2.0em;
}

/*overrides*/
button.md-button.rounded{
  border-radius: 20px!important;
}



/*general*/
.w-100{width:100%;}
.h-100{height:100%;}
.text-center{text-align:center;}
.bold{font-weight:bold;}
.custom-chip{
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 8px;
  display: inline-block;
  margin: 0px 2px;
}
@media screen and (max-width: 599px){
  .show-only-desktop{
    display: none;
  }
}

section.container{
  max-width: 1024px;
  margin: 0px auto;
}
.floating:hover{
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
  filter: brightness(0.9);
}
.floating:focus{
  outline-style: none;
}
.image-placeholder{
  background-image: url(../img/generic/square-image-small.png);
}
.rounded-button{
  background-color: red;
  color: white;
}




/* categorias */
.list-categorias{
  display: flex;
  flex-wrap: wrap;
}
.list-categorias .item-categoria{
  margin: 8px;
  border: 1px solid gainsboro;
  padding: 8px;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}
.list-categorias .item-categoria .titulo{
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px black;
  font-size: 1.4em;
}
 /*xs*/
@media screen and (max-width: 599px){
  .list-categorias .item-categoria{
    flex-basis: 100%;
    height: 112px;
  }
}
/*sm*/
@media screen and (min-width: 600px) and (max-width: 959px){
  .list-categorias .item-categoria{
    flex-basis: calc(50% - 34px);
    height: 112px
  }
}
/*md*/
@media screen and (min-width: 960px){
  .list-categorias .item-categoria{
    flex-basis: calc(33% - 34px);
    height: 100px;
  }
}




/*comercios*/
.list-comercios-item{
  padding: 8px 8px;
  max-width: calc(100vw - 16px);
}
.list-comercios-item h4{
  margin: 0px;
}
.list-comercios-item .image img{
  width: 50px;
  height: 50px;
  margin-right: 8px;
}
.comercios-list-categorias{
  padding: 0px 8px;
}
.comercios-list-categorias a{
  font-size: 14px;
  color: red;
}
@media screen and (max-width: 599px){
  .comercios-list-categorias{
    display: none;
  }
}



/*detalle comercios*/
.detalle-comercio{
  width: 100%;
}
.detalle-comercio .header-comercio{
  padding: 0px 8px;
  display: flex;
  flex-shrink: 0;
}
.detalle-comercio .productos-container{
  background-color: #eee;
  flex-grow: 1;
}
.list-productos{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: white;
  margin: 8px;
  padding: 8px;
}
.list-productos h4{
  margin-top: 8px;
}
.list-productos-promo-item:first-of-type, .list-productos-item:first-of-type{
  border-top: 2px solid #eee;
}
.list-productos-promo-item{
  padding: 8px;
  margin: 4px;
  background-color: white;
  height: 80px;
  flex-basis: 50%;
}
.list-productos-item{
  display: flex;
  align-items: center;
  flex-basis: 100%;
  border-bottom: 2px solid #eee;
}

.list-productos-item .nombre{
  flex-grow: 1;
  padding-left: 8px;
}
.list-productos-item .precio{
  flex-shrink: 0;
  font-weight: bold;
}
.productos-detalle-pedido{
  background-color: white;
  padding: 8px;
  margin: 8px;
  margin-left: 0px;
  width: 280px;
  flex-shrink: 0;
}
.productos-detalle-pedido h4{
  margin-top: 8px;
}
@media screen and (max-width: 599px) {
  .productos-detalle-pedido.desktop{
    display: none;
  }
}
@media screen and (max-width: 699px) {
  .productos-detalle-pedido{
    width: 225px;
  }
}

/*xs*/
@media screen and (max-width: 599px){
  .detalle-comercio .header-comercio{
    flex-direction: column;
    padding: 16px 8px;
  }
  .detalle-comercio .header-comercio h3{
    margin-bottom: 9px;
    text-align: center;
  }
  .detalle-comercio .header-comercio span.direccion{
    text-align: center;
  }
  .detalle-comercio .header-comercio img{
    width: 200px;
    height: 200px;
    justify-content: center;
    align-self: center;
    border-radius: 50%;
  }
  .list-productos-promo-item{
    min-height: 60px;
  }
  .list-productos-item{
    min-height: 36px;
    padding: 8px 8px;
  }
  
}
@media screen and (min-width: 600px){
  .detalle-comercio .header-comercio{
    flex-direction: row;
    padding: 24px 8px;
  }
  .detalle-comercio .header-comercio img{
    width: 160px;
    height: 160px;
    margin-right: 8px;
  }
  .list-productos-promo-item{
    min-height: 60px;
  }
  .list-productos-item{
    min-height: 36px;
    padding: 8px 8px;
  }
}