/*
 * Compressor:
 https://cssminifier.com/

 */


body {

	height:100%;
	width:100%;
	padding:0;
	margin:0;

	/*AJ 19-04-23 - Resolves horizontal scrollbar issue caused by -1rem .row margin CSS*/
	overflow-x:hidden;
}


.verticalAlignMiddle { vertical-align: middle; }


.red { color: red; }
.blue { color: blue; }
.green { color: green; }


.noDecoration { text-decoration: none; border: none; background: none; color: inherit; }
.stretchElement{position:initial;}
.stretchElement:after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 45;content: "";} /*allow element boundaries to scale outside element e.g buttons*/



/* Buttons */

.btn, .btn-primary, .btn-default, .btn-small {
	padding: 3px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-transition: all 0.16s ease;
    transition: all 0.16s ease;
}

.btn, .btn-primary, .btn-default {
    padding: 5px 20px;
    font-size: 1.2em;
		line-height: 2em;
    border-radius: 6px;
    white-space: normal; /*Added by default to allow long button text to wrap as screen size reduces*/
}

.btn-small {
	padding: 3px;
    font-size: inherit;
	line-height: inherit;
	border-radius: 3px;
}

.btn-small,
.btn-default {color: #333333;background-color: #d3d3d3;}
.btn-small,
.btn-default:hover {color: #111;background-color: #ccc;border-color: #ccc;}

.btn-primary {color: #ffffff;background-color: #08c9b9 ; border-color: black; }
.btn-primary:hover {color: #ffffff;background-color:#07b0a2; }


button .material-symbols-outlined,
button .material-icons
{
	font-size: inherit;
}


/*
a inline button that does not play with line-height
button with no background, just a border..
*/
.cmsMoreInfo,
.cmsItem a.moreInfo,
.cmsNavButtons a {
	text-decoration: none !important;
	border: 1px solid #CACACA;
	display: inline-block;
    padding: 1px 5px;
    margin-left: 5px;
	cursor: pointer;
}

/*
	Making nav buttons a bit bigger by default - Reuben April 2023
*/

.cmsNavButtons a {
    margin: 5px;
	padding: 5px 10px;
}

.cmsNavButtons a:hover,
.cmsNavActivePage
{
	background: #EEE;
	color: black;
	border: 1px solid #AAA;
	font-weight: 600;
}




/*
img 100% causing many issues, but it's important it remains
by default, we don't want small images stretching oversized...
So when set to width:100%, and wanting stretch, then elsewhere, you should overrride the max-width
*/

img {
	max-width: 100%;
	/*image-orientation: none; ignore EXIF*/
}


img.circle {border-radius:500px;margin-top:0;}
img.rounded{border-radius:5px;}
img.bordered {border: #ccc 1px solid;}

img.boxshadow {
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:  2px 2px 5px rgba(0,0,0,0.4);
    box-shadow:  2px 2px 5px rgba(0,0,0,0.4) ;
}


/*
	When an image is floated in a paragraph, then do not consume anymore than 40% of the paragraph, thus looking the same in mobile and desktop.
	Soft nudge only, so that inline styles or customer styles can override this.
*/
p>img[align="right"],p>img[align="left"] { max-width: 40%; }

/*Default styling for older vanilla templates single image banner  e.g no slideshow*/
#cmsBannerSlideDiv img { width: 100%; }

/*
These rules to hide need to be strongest.
There is nothing that should override these...
But users may wish to do something stronger if they use the same as below, but do not advise
*/
body .hide,
body .hidden,
body .cmsHidden,
.cmsHomePage .hideForHome,
.ProductList .hideForProductList,
body .row.hide,
body .row.hidden,
body .row.cmsHidden{
	display:none!important;
}

/*
rules to hide need to be strong,
*/
@media (min-width: 560px)  {

	body .hideForDesktop,
	body .mobile
	{
		display:none !important;
	}
}

@media print {
	.noPrint {
	    display:none;
	}
}


/*
float divs, legacy approach, but well used...
note that the float left/right helps determine the desktop shape,
while maintaining the stack order in mobile.
recently deleted the display:block, which is assumed with div,
and removed the default margin: 0
*/


.clearfloat {
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}

.cmsFloatContainer {
	clear: both;
	overflow: hidden;
}


@media (min-width: 560px) {

	.floatRight50PC {	float:right; width: 49%;	margin-left: 1%;	}
	.floatLeft50PC {	float:left;	width: 49%;	margin-right: 1%;}
	.floatRight25PC {	float:right; width: 24%; }
	.floatLeft75PC {	float:left;	width: 74%; }
	.floatRight33PC {	float:right;	width: 33%;	}
	.floatLeft66PC {	float:left;	width: 66%;	}
	.floatLeft40PC {	float:left;	width: 39%;	}
	.floatRight60PC {	float:right; width: 60%;	}
	.floatLeft20PC {	float:left;	width: 20%;	}
	.floatRight80PC {	float:right; width: 79%;	}

}




.warning, .error { border: 1px solid red; padding: 1%; margin: 2% 1%; }
.actionFeedback { border: 1px solid green; padding: 1%; margin: 2% 1%; }


/*
	accordians used faq, product tabs, and search filters.
	accordans now used in the CMS significantly as well.
*/

.accordionItem,
.accordianItem { position:relative; border-bottom: 1px solid #999; }
.revealable {display: none !important; }
.clickToReveal { cursor: pointer; }
.clickToReveal:has(.cmsRevealIcon),
.clickToRevealSection:has(.cmsRevealIcon) { padding-right:25px; } /*no text under arrow*/
h3.clickToReveal { margin: 0; padding: 10px 0; }
.cmsRevealIcon { position:absolute; right:0; top:0; cursor: pointer; }

.accordionItem.revealTheRevealable .revealable,
.accordianItem.revealTheRevealable .revealable {display: block !important; }
.cmsRevealIcon::before { content: 'arrow_drop_down'; }
.revealTheRevealable .cmsRevealIcon::before { content: 'arrow_drop_up'; }
/* tighter targeting for nested */

.accordionSection>.clickToRevealSection>.cmsRevealIcon::before,
.accordianSection>.clickToRevealSection>.cmsRevealIcon::before { content: 'arrow_drop_down'; }
.revealTheRevealable>.clickToRevealSection>.cmsRevealIcon::before { content: 'arrow_drop_up'; }

/*
	accordianSection used for input field relevant sections,
	and accordian outer wrapper (Simple filter button)
*/

.accordionSection,
.accordianSection { position:relative;}
.clickToRevealSection { 
/* reuben wants to know why 0 here... do not want to overide default button, title etc) */
/* margin: 0; padding: 0; */ 
 cursor: pointer;
}
.sectionAutoReveal,
body .is-section.sectionAutoReveal { display:none; } /*strengthen rule to override display:table; but do not use important*/

.accordionSection.revealTheRevealable>.sectionAutoReveal,
.accordianSection.revealTheRevealable>.sectionAutoReveal {display: block !important; }
.accordionSection.revealTheRevealable>span.sectionAutoReveal {display: inline !important; }
.accordionSection.revealTheRevealable>.hideWhenRevealed { display: none; } 



/* right aligned images on product summaries, blogs and galleries and real estate */

@media (min-width: 640px) {

	div.leftAlignedImageBlock {
		float:left;
		max-width: 48%;
		margin-right: 2%;
		margin-bottom: 10px;
		display:block;
	}

	div.rightAlignedImageBlock {
		float:right;
		max-width: 48%;
		margin-left: 2%;
		margin-bottom: 10px;
		display:block;
	}

}

/*max size the containers for images on products, blogs and galleries*/

img.galleryView320 {
	max-width: 320px;
}


.zoomedphoto img { height:auto; max-height: 100%; max-width: 100%; }


.nounderline { text-decoration: none; }





#cmsBrowserBottomFixed { display:block; width:100%; background: rgba(255, 255, 255, 0.5);z-index: 5000;} /*5000 suitably high enough to sit on top of all elements*/

#cmsBrowserTopFixed { display:block; width:100%; background: rgba(255, 255, 255, 0.5); z-index: 5000;}

#cmsBrowserTopFixed table, #cmsBrowserBottomFixed table {  margin: 3px; width: 100%;}


@media (min-width: 640px) {

	#cmsBrowserBottomFixed { position:fixed; bottom: 0;  }
	#cmsBrowserTopFixed { position:fixed; top: 0; }
	#cmsBrowserBottomFixedSpacer { height:20px; }
	#cmsBrowserTopFixedSpacer { height:30px; }

}



 /*

 ###########################################################################################



 END  OF CMS COMMON CSS



###########################################################################################

 */





.cmsDefaultTextLogo A {
	text-decoration: none;
}

.cmsDefaultTextLogo {
	line-height: normal;
	width: 90%;
	margin:5%;
	font-weight: bolder;
}

/* default settings, so that we can add width/height later */
.cmsLogoImg {
	max-width: 100%;
	height: auto;
}


.zoomedphoto .zoomPup img {max-width:none; max-height: none;}
.zoomedphoto .zoomWindow img {max-width:none; max-height: none;}



/* Drag/Drop Content */


/* reuben hacks */

img.halfwidth { width: 50%; }
img.fullwidth { width: 100%; }
img.fullheight{
	margin-left: auto;
	margin-right: auto;
    display: block;
}



img.greyscale {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}





/*allow customer nav buttons to auto expand to their full pixel width, in a horizontal menu , but not going crazy in a vertical menu*/

#nav img, #catnav img {   max-width:250px; }

/*to ensure it pops up over others, needs be position relative or absolute */

#menu ul ul, #nav ul , #catnav ul {   z-index: 9998;}



/* --- CMS table --- */

.cmsTable, .mytable
{
	background: #eee;
	border-spacing: 1px;
	padding: 1px;
	display: table !important; /* was not sticking when sorting variants  */
	width: 100%;
}

.tr
{
    display:table-row;
}

.td, .th
{
    display:table-cell;
}



.mytable>tr>td, .mytable>tbody>tr>td,
.cmsTable>tr>td, .cmsTable>tbody>tr>td,
.mytable>.tr>.td
{
	background: white;
	margin: 0;
	border: 0;
	color: #333;
	vertical-align: top;
	padding: 3px;
	font-weight: normal;
	font-size: 90%;
	word-wrap: break-word;
	word-break: break-word;
}

.mytable tr th ,
.mytable thead td ,
.cmsTable tr th,
.cmsTable thead td {
	padding: 4px;
	background-color: #666666;
	color:white;
	vertical-align: middle;
	text-align:left;
	font-size: 90%;
}

.cmsTable tr th[align=right] {
	text-align:right;
}

.mytable tr:hover td
 {
	background-color: #ddd;
	background-image: none;
}






.cmsPopupStackable
{
	z-index: 10003; /*more than colorbox */
	background:rgba(0,0,0,0.5);
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0;
}

.cmsPopupCloseOverlay
{
	position:absolute;
	top:0; left: 0;
	height:100%;
	width:100%;
}

.cmsDraggablePopupTitle
{
	position:absolute;
    top: -25px; /*the offset approach works better for having the core content with a scroll bar unaffected by the title bar... */
	left: 0;
	width: 96%;
	padding: 0 1px;
    font-weight: 200;
	font-size: 12px; /* small context headings...  or just put your h3 in the content... */
	line-height: 25px;
	min-height: 25px; /* for draggable title even if nothing in it */
    color: #999;
	box-sizing: border-box;
}


.cmsModal .cmsPopupCloseButton
{
	position:absolute;
	right:-2px ;
	top: -24px;
	margin: 0;
	display:block;
	padding: 1px;
	color:silver;
	text-decoration:none; cursor: pointer;
	background: white;
}
.cmsModal .cmsPopupCloseButton span {
	font-size: 22px;
}
.cmsModal .cmsPopupCloseButton:hover {
	color: black;
}

.cmsModal
{
  position:relative;
  background: white;
  box-shadow: rgba(0,0,0,0.3) 5px 5px 9px!important;
  border-radius: 4px;
  display: block;
  border-width: 25px 4px 4px;
  border-style: solid;
  border-color: white;
  border-image: initial;
  box-sizing: border-box;
  padding: 0;
  bottom: auto;
  width: fit-content;
/* do not put default height, as small popups should not have a height */
  max-width: 90%;
  margin: 0 auto;
  top: 5%;
}

/* do not put height on this one... */
.cmsModalContent {
  max-height: 90vh;
  overflow-y: auto;
  padding: 10px;
  margin:0;
  box-sizing: border-box;
}

/* iframe need to be max height */
.cmsPopupIframe .cmsModal { padding: 0; height: 100%; max-height: 90%; width: 100%; }
.cmsPopupIframe .cmsModalContent { padding: 0; height: 100%;  width: 100%; }


/* mainly for popup cart needs a scroll bar */
.cmsModal .cmsModalContent:not(:has(> iframe, > img)) { overflow:auto; }

/* modal image mainly about good proportions and width...  */
.cmsPopupImage .cmsModal { padding: 0; width: fit-content; height: auto; max-width: 1200px; }
.cmsPopupImage .cmsModalContent { width: fit-content; padding: 0; height: auto; }


/* iframe need to be 100% of the size */
.cmsModal>.cmsModalContent>iframe { margin:0; padding: 0; width: 100%; height: 100%; }
/* allow resize to shrink, but also allow scroll bar in iframe */

.ui-resizable-resizing iframe {  pointer-events: none; }

/* do not display in page... they get popped up as popup messages */
.popupMessage {display: none; }



@media (max-width: 560px) { /*default in most templates*/

	/*mobile classes - using !important to override inline styles set on snippets*/
	body .hideForMobile,
	body .desktop,
	.cmsHomePage .hideForHome {
		display:none !important;
	}

	table.mobileBreakTable>tbody>tr>* ,
	table.mobileBreakTable>tr>*
	{
		display:block;
		width: 100%;
		box-sizing: border-box;
	}

	.mobileWidthFull{margin-left:0!important;margin-right:0!important;}

	/*=============================
	Product Search Tidy
	=============================*/
	  .cmsSearchForm form[name=productSearchForm] {
		display: flex;
		flex-wrap: wrap;
	  }

	  .cmsSearchForm form[name=productSearchForm] .cmsProductSearchKeywords {
		flex: 1;
		margin-left: 0.5rem;
	  }

	  .cmsSearchForm form[name=productSearchForm] .cmsProductSearchAdvanced {
		margin-top: 4px;
		margin-left: auto;
		margin-right: auto;
	  }



	/* Targets any iframe whose src starts with or contains a YouTube embed URL */
	iframe[src*="youtube.com/embed/"] {
	  width: 100%;
	  max-width: 100%;
	  display: block; /* Removes unwanted bottom whitespace */
	}

}