/**
 * @version     CVS: 4.0.0
 * @package     com_pantry
 * @copyright   2020 Blueline Technology
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      David George <david@bluelinetechnology.com.au>
 */

.table-responsive
{
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.front-end-list{
    width: 100%;
    border-spacing: 1px;
    background-color: #f3f3f3;
    color: #666;
}

table.front-end-list thead th{
    text-align: center;
    background: #f7f7f7;
    color: #666;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #fff;
}

table.front-end-list td, table.front-end-list th{
    padding: 4px;
}

table.front-end-list thead th.align-left{
    text-align: left;
}

table.front-end-list thead th.align-center, table.front-end-list tbody td.align-center {
    text-align: center;
}

table.front-end-list tbody tr td{
    background: #fff;
    border: 1px solid #fff;
}

table.front-end-list td{
    padding-left: 8px;
}

div.list-footer{
    clear:both;
    text-decoration: none;
    text-align: center;
}

div.list-footer ul{
    list-style: none;
    display: inline-block;
}

div.list-footer ul li{
    display: inline-block;
}

div.list-footer div.limit{
    display: inline-block;
}

div.list-footer div.counter{
    display: inline-block;
}

div.filter-select.hide{
    display: none;
}

div.filter-select.show{
    display: block;
}

div.filter-search , div.filter-select {
    clear: both;
}

div.filter-select .fltlft{
    float: left;
    clear: both;
}

div.field-filter{
    float: left;
    margin: 10px;
}

#filter-bar div.fltrt div.button2-left .blank a {
    margin-top: 0 !important;
}

button.open{
    font-weight: bold;
}

div.field-filter:first-of-type{
    margin-left: 0;
}




.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.bg-img-card {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 225px;
    width: 100%;
    position: relative;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}    

.tile {      
    height: 150px; 
    float: left;  
    padding: 0; 
    margin: 0;             
    width: 100%;  
    position: relative;   
    background-color: #fff;
    background-position: center center;   
    background-size:cover;
    background-repeat: no-repeat;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

.tile-title {
    font-size: 1.3em;     
    font-weight: 100;
    max-width: 100%; 
}
    
  
.tile.cuisine h2 span,
.tile.mealtypes h2 span {        
    font-size: 1em;     
} 

.tile:hover h2 span,
.tile:hover .recipes-info,
.tile:hover .tile-info  {    
    background: rgb(11,11,11); 
    background: rgba(11,11,11,1); 
}


.tile-info {
    position: absolute; 
    background: rgb(11,11,11);
    background: rgba(11,11,11,0.5); 
    color: #fff; 
    padding: .5em;
    max-width: 100%; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    font-size: 1em;   
    font-weight: 100;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;      
}

.tile-center {
    line-height: 150px;
    
}

.tile-top-left {
    top: 0;
    left: 0; 
}

.tile-top-right {
    top: 0;
    right: 0; 
}

.tile-bottom-left {
    bottom: 0;
    left: 0; 
}

.tile-bottom-right {
    bottom: 0;
    right: 0; 
}



/* Tile  Media Queries */ 
  @media (min-width: 40em) {
    .tile { 
      width: 50%;   
      height: 300px; 
    }
    
  }
  
  @media (min-width: 60em) {
    .tile { 
      width: 33.33333333%;  
    }
    
  }  
  
  @media (min-width: 120em) {
    .tile { 
      width: 25%;  
    }
  }    
  
  @media (min-width: 160em) {
    .tile { 
      width: 20%;  
    }
  }    
  
  @media (min-width: 200em) {
    .tile { 
      width: 16.666666666666666%;  
    }
  }   
  
  /* Tile Product Media Queries */ 
  
  .tile.product {
    height: 250px; 
    
    border-bottom: 1px #ccc solid; 
    border-right: 1px #ccc solid; 
    /*background-size:80% !important;*/
    background-size:contain;
  }
  
  .tile.product.category {
    width: 100% !important;
    height: 50px !important; 
    background: #333;
    background: rgba(0,0,0,0.5);
    border-top: 1px #ccc solid; 
    margin-top: 5px;
  }
  
  .tile.product.category h2 span {
    font-size: 0.7em;    
      
  }
  @media (min-width: 10em) {
    .tile.product { 
      width: 100%;  
    }
  } 
  @media (min-width: 20em) {
    .tile.product { 
      width: 50%;  
    }
  } 
  @media (min-width: 30em) {
    .tile.product { 
      width: 33.33333333333333%;  
    }
  } 
  @media (min-width: 40em) {
    .tile.product { 
      width: 25%;  
    }
  } 
  @media (min-width: 50em) {
    .tile.product { 
      width: 20%;  
    }
  } 
  @media (min-width: 60em) {
    .tile.product { 
      width: 16.666666666%;  
    }
  } 
  @media (min-width: 70em) {
    .tile.product { 
      width: 14.2857142%;  
    }
  }
  @media (min-width: 80em) {
    .tile.product { 
      width: 12.5%;  
    }
  }
  @media (min-width: 90em) {
    .tile.product { 
      width: 11.11111111111%;  
    }
  }
  @media (min-width: 100em) {
    .tile.product { 
      width: 10%;  
    }
  }