/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* get rid of the 'save' banner onthe cart page if low income country*/
.wc-block-components-sale-badge{
  display:none;
}

/* grey out out of stock items - works. don't use woo's outofstock as strangely addds marging to top of page. */
/* outofstock_x is added by plugin php to image directly. .outofstock img  is set by woo on grandparent li  */
.outofstock_x { /*NOT: .outofstock img */ 
  filter: grayscale(1)!important;
}

img.outofstock_xXX { /*only reduces image size on the product page, not whole shop page.*/ 
  /* setting max-width doesnt work and setting a fixed width messes up acrss different screens */
  /*max-width: 80%; /* Ensures the image never exceeds the width of its parent container */
  height: auto; 
  width:250px;/* woo says 300. shrink the unavalable */
  /*display: block;
  margin: 0 auto;*/
  display: block;
  margin: 25px auto;
}


.grey, a.grey {
  color:grey;
}
.sold-out-overlay, .sold-out-overlay-2 { /* for shop page and single product page*/
  background: #0B6FA4;
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
  padding: 5px 10px;/* around the message*/
  position: absolute;
  position: relative;
  /*right: 50px;*/
  top: -52px;
  left: 0px;
  z-index: 999; 
}

.sold-out-overlay-2 { /* second class for single product pages -image appears to  have a different size */
  top: -46px;
  left: 0px;
  font-size: 1.5em;
}

/*
.outofstock:before {
	content: "";
	background: rgba(255,255,255,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0; top: 0;
}

.outofstock:after {
	content: "OUT OF STOCK";
	position: absolute;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 100%;
	text-align: center;
	width: 70px;
	height: 70px;
	top: calc(50% - 35px);
	left: calc(50% - 35px);
	font-size: 0.8em;
	font-weight: bold;
	display: flex;
	align-items: center;
}* /

woo-thumbnail-wrap { position: relative; }
.outofstock .woo-thumbnail-wrap:before {
	content: "";
	background: rgba(255,255,255,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0; top: 0;
}

.outofstock .woo-thumbnail-wrap:after {
	content: "OUT OF STOCK";
	color: #333;
	position: absolute;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 100%;
	text-align: center;
	width: 70px;
	height: 70px;
	top: calc(50% - 35px);
	left: calc(50% - 35px);
	font-size: 0.8em;
	font-weight: bold;
	display: flex;
	align-items: center;
}*/

/* - - - - - - - - - -*/


 .smaller{
    font-size: 70%;
   }
   
   .smallest{
    font-size: 50%;
   }




 /* memberlist table styleing attempt 1 */

table.paleBlueRows {
    /*font-family: "Times New Roman", Times, serif;*/
    border: 1px solid #FFFFFF;
    /*width: 600px;
    height: 200px;*/
    text-align: center;
    border-collapse: collapse;
  }
  table.paleBlueRows td, table.paleBlueRows th {
    border: 1px solid #FFFFFF;
    padding: 3px 2px;
  }
  table.paleBlueRows tbody td {
    font-size: 13px;
    line-height: 1.2rem;
    
  }

  .scroll_height  { /* there s a div in cells - can set max height and add scrollbar by this */
    max-height: 5rem;
    overflow-y: auto;
    overflow-x:hidden;

  }

  table.paleBlueRows tr:nth-child(even) {
    /*background: #D0E4F5;*/
    background: rgb(209, 232, 252);
  }

  table.paleBlueRows tbody tr:nth-child(odd) {
    background: #f2f6fb;
  }

  table.paleBlueRows thead {
    background: #0B6FA4;
    border-bottom: 5px solid #FFFFFF;
  }
  table.paleBlueRows thead th {
    font-size: 17px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    border-left: 2px solid #FFFFFF;
  }
  table.paleBlueRows thead th:first-child {
    border-left: none;
  }
  
  table.paleBlueRows tfoot td {
    font-size: 14px;
  }
  
  
  /* end of attempt 1 */