/* customers and orders screens */
#topSection{ height: 44px;margin: 0 auto 10px auto; border-bottom: 1px solid #ccc}
#topSection #searchForm{ display: block; float:left; position: relative}
#searchForm input#search{
height: 34px;float:left;
}
#searchBtn{
border:none;
background:none;
background-color:#494949;
float:left;
width: 34px;
height: 34px;
margin-left:-2px;
background-image: var(--searchWhite); 
background-position:   50%;
background-repeat: no-repeat;
background-size:12px auto;
cursor: pointer;
border-radius:0 2px 2px 0
}
.filterForm{float: right; height:34px; line-height:34px; text-align:right; width:auto;border:0px solid red }
.filterForm p{ display:block; float:left; padding:0 10px; font-size:11px; font-weight:bold; color:#999; cursor:pointer}/* orders*/
.filterForm p:hover{ color:#333}
	.filterForm p.activeStatus{ color:#9C0}
.filterForm strong{ font-size:11.0px; margin-right:10px; color:#999 } /* custs*/
.filterForm select{ width:150px; margin-left:5px; font-size:11.6px; } 
#resetFilters{
font-size:10.6px;
border:0px solid #ccc;
padding:0 8px;
height:34px;
margin-left:10px;
background:#999;
font-weight: bold;
color:#FFF;
cursor:pointer
}
#resetFilters.resetDisabled{ opacity:0.2; cursor: default}

.filterForm select , .filterForm #resetFilters , .filterForm strong{ display:block;float:left;border-radius:3px; }

p.noneFound{ margin: 30px auto; text-align: center; color: #aaa} 

.divTableRow.customerBasketItems, .divTableRow.customerBasketItems p {  
height:auto; line-height:18px; display:block; width:100%;clear:both;
}
	.divTableRow p.customerBasketItemsTitle{ margin:5px 0; display:block; font-weight:bold;}
/* customers and orders screens */


#editWrap{
width: 100%;
margin:  0px auto;
padding: 5px 16px;
border: 1px solid #999;border-top: none; min-height:500px;
}

#editForm { display:block}

#productTitleWrap{  background: #e9e9e9; border-left: 1px solid #999;border-right: 1px solid #999;height: 30px; line-height: 30px; padding: 0 16px; }
#productTitle , #lastupdated {height: 30px; line-height: 30px; display: block; color: #888; }
#productTitle{width: 750px;float: left}
#lastupdated{ width: 250px; float: right; text-align: right}

.divTableRow.section{  }	

#controlBar{height:90px;   margin:0px auto 0 auto ; width:100%;  text-align:left}

#controlBar li{
display: block;
float:left;
font-weight:bold;
width:80px;
height:80px;
margin:0 5px 0 0 ; 
position:relative;  
background-position:50% top;
background-repeat:no-repeat; 
opacity:0.75;
-webkit-transition:all 100ms ease-in-out 0s;
-moz-transition:all 100ms ease-in-out 0s;
-o-transition:all 100ms ease-in-out 0s;
transition: all 100ms ease-in-out 0s;
background-image:url(../images/updateIcons.png);
text-align:center;
cursor:pointer
}

#controlBar li:hover{ text-decoration:none; opacity:1 ; }
#controlBar li.spacer{ background:none; border:none; text-indent:-100000px; width:50px;}

#controlBar li span {
display:block;
font-size:11.3px;
position:absolute;
text-align:center;
left:0;
bottom:4px;
width:100%;
color:#999999;
text-transform:uppercase;
-webkit-transition:all 100ms ease-in-out 0s;
-moz-transition:all 100ms ease-in-out 0s;
-o-transition:all 100ms ease-in-out 0s;
transition: all 100ms ease-in-out 0s;
font-weight: 600;
}


#controlBar li:hover span {
color: #777;
font-size:0.95em; 
}

#controlBar #home{   background-position:50% 0px    }
#controlBar #exit{  background-position:50% -80px   }
#controlBar #previous{  background-position:50% -240px   }
#controlBar #next{  background-position:50% -320px   }
#controlBar #update{  background-position:50% -160px   }
#controlBar #duplicate{  background-position:50% -400px   }
#controlBar #delete{ background-position:50% -480px ; float:right}
#controlBar li#infoSection{
background: none;
float:right;
border: 0px solid #ccc;
width: 360px; padding-top:10px;
position: absolute;
top:10px; right:100px;
cursor: text
}
@media only screen and (max-width:1120px) {  #controlBar li#infoSection{ display: none}}

#tabWrapper{ width:100%; border-bottom:3px solid #656565; height:40px;}

#tabWrapper li { display:block; float: left; height:36px; margin-right:4px;}

#tabWrapper li  p{
text-align: center;
color: #fff;
line-height: 30px;
padding: 0 30px;
font-size: 11.5px;
font-weight: bold;
cursor: pointer;
transition: all 0.1s;
background-color: #A6A6A6;
border-top: 6px solid #fff;
}
#tabWrapper li  p:hover{
background-color: #969696
}
#tabWrapper li.activeTab p{ background-color:#656565; border-top: 2px solid #fff; line-height:36px; }

#tabWrapper.products li  p{ padding:0 20px;}

#pricesAjax, #optionsAjax , #prodImagesAjax { position:relative; height:100%; width:100%; min-height:460px; }

.pricesOptionsLabelHelper ,.divTableRow p.pricesOptionsLabelHelper{
padding-left:10px;
font-weight:bold; font-size: 13px;
font-style: italic;
color:#999
}
.pricesOptionsForm p, .divTableRow .pricesOptionsForm p{   margin:0 0 6px 0}
.pricesOptionsForm p, .divTableRow .pricesOptionsForm input, .divTableRow .pricesOptionsForm select {   float:left; margin:0 8px 0 0}
 
.pricesOptionsForm span.drag{ float:left; margin:4px 10px 0 0}
#pricesList span.deleteIcon, #optionsList span.deleteIcon{  margin:4px  0 0  0px; float: right}


.reorderPriceOptions{  margin:0px 0px 0px 0; display:block; width:auto; float:right;position: relative}
.reorderPriceOptions p{ float:left;display:block; color:#069; cursor:pointer;  font-size:11px; font-weight:bold; }
.reorderPriceOptions p:hover{ text-decoration:underline} 
#priceSortingSeparator{ float:left; width:20px; text-align:center; color:#ccc; font-weight:bold;}

#priceLabelForm, #optionsLabelForm { margin:0 auto 20px auto; display:block; width:500px; float:left}
ul#pricesList li, ul#optionsList li{ display:block; padding:8px 6px 5px 6px;border-radius:3px; border: 1px solid #e1e1e1; margin: 6px auto}
ul#pricesList li.addRow , ul#optionsList li.addRow {
	border: 2px solid #8BBA00;
	margin-bottom: 10px;
}
ul#pricesList li.addRow {padding-left: 8px;  } /* add new */
hr.newOptionSep{ }
.newPriceOptionLabel{ display:block; float:left; width:36px; font-size:10px; font-weight:bold; color:#fff}

ul#pricesList, ul#optionsList{ position:relative; clear:both; width:100%; margin:0 auto}

#pricesList .priceOptionNameField{ width:280px;}
#optionsList .optionNameField{ width:280px}/* in prices/options to even up layout*/

input.missingOptionName{ border-color:red}
select.showRetail{ width: 125px; font-size: 10.6px; font-weight: bold}
select.showRetailN{ color: #FF0018}
select.showRetailY{ color:#99CC00 }

/* swatches in price/Options*/
.swatchList label,
.swatchList input[type="radio"] + label{
margin:0 5px  0 0  ;
display:block;
float:left;
height:36px;
width:36px;background: #e1e1e1; 
background-position:50% 50%;
background-size:cover;
opacity:1;
cursor:pointer;
background-repeat: no-repeat; border-radius:2px;  
position: relative;
transition: all 300ms ;
}
.swatchList label:hover,.swatchList input[type="radio"] + label:hover{opacity:0.8;border-color: #999;}

.swatchList  input:first-child + label {  }

 .swatchList input[type=radio]:checked  + label{ border-color :#83A523 ;  }
 .swatchList input[type=radio]:checked  + label::after , .swatchList input[type="radio"] + label:hover::after  {
 content:'';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 17px;
	height: 17px;
	background-color: #83A523;
	background-image: var(--tickWhite);
	background-repeat: no-repeat;
	background-size: 8.2px auto;
	background-position: 50% 50%;border-radius:22px; 
}
.swatchList input[type="radio"] + label:hover::after{ opacity: 0.6; }
.swatchList input[type="radio"]:checked + label:hover,.swatchList input[type="radio"]:checked + label:hover::after{ opacity:1}


.warningSpan, .tickSpan{
	width:60px; display:block;  
margin:0px auto 0 auto; 
background-repeat:no-repeat ;
cursor:pointer;  font-weight: 600; padding-left:  15px; font-size: 12.7px; 
}
.warningSpan{background-image:var(--warning);background-size:14px auto;  color: red;background-position: 70% 40% ;  } 
.tickSpan{background-image:var(--tickGreen); background-size:12px auto; color:#8BBA00 ;  background-position: 70% 45% ;   }


/* extra info additional */
.divTableRow div.extraInfoWrap, div.extraInfoWrap , .extraInfoWrap{ width:48%; position:relative; margin:0 0 10px 0 ; z-index: 111111}
.extraInfoWrap:nth-child(odd){float:left; }
.extraInfoWrap:nth-child(even){float:right; }

.divTableRow span.extraLabel, .divTableRow span.templateOpener{display:block; height:36px;line-height:34px;overflow:hidden; }
input.prodExtraLabel{ height: 30px; width: 370px; font-weight: 600; font-size: 14.1px; color: #ff6600}

.extraLabel{font-size:14px; font-weight:bold; color:#777; float:left;}
.templateOpener{
font-size:12.0px;
float:right;
font-weight:bold;
text-align:right;
cursor:pointer;
width:auto;  
color:#006699; 
text-transform: uppercase; background-image:var(--arrowDGray);
background-position:right 50%; background-repeat:no-repeat;
padding-right:15px;
margin-right:5px;
}
.templateOpener:hover{ text-decoration:underline;}

.divTableRow span.templateListAdditional, .templateListAdditional{ /* panel container for Ajx */
border:1px solid #e1e1e1;
position:absolute;
left:0px;
height:100%;
height:calc(100% - 30px);
width:100%;
top: 30px; 
line-height:normal;
background-color:#f9f9f9;
z-index:100;
overflow:hidden;
overflow-y:auto;
padding:20px 5px;
display:none;
} 
.templateListAdditional li{ margin:0px 10px; display:block; clear:both ; padding: 2px;}
.templateListAdditional li  label, .divTableRow .templateListAdditional li  label{ padding:0px; cursor:pointer; display:block; height:22px; line-height:normal}
.templateListAdditional li  label strong{ font-size:15px; color:#069; font-weight:bold;}
.templateListAdditional li  label:hover strong{ text-decoration:underline}
/* extra info additional */

/*prices and options templates*/
#pricesTemplatesWrap{ position: relative; width: 100%; height: auto; clear: both; }
ul.templateListPricesOptions{ position: relative; width: 300px;border-radius: 3px; border: 1px solid #ccc; margin: -20px 0 20px 0;display: block; clear: both;padding: 8px;float: right}
.templateListPricesOptions li{ text-align: right; line-height: normal; padding: 4px; color: #006699; cursor: pointer; font-size:15px;  font-weight:bold;}
.templateListPricesOptions li:hover{ text-decoration: underline}
/*prices and options templates*/


.editOpener  { 
padding: 0px 0px; 
text-align: center;
font-size: 11px; 
border: 1px solid #ccc; 
color: #006699; cursor: pointer; font-weight:bold;
display:block; height:34px; line-height:32px; width:80px; border-radius: 2px; margin-top:2px;
}
.editOpener:hover { background-color: #069; border-color: #069; color:#FFF}

 

#imageList{  position: relative; display: block; width: 100%; height: auto}
#imageList li {width: 32%; display: block; float: left; margin: 5px 3px; position: relative;border: 1px solid #bbb; padding: 4px 4px 0 4px;  overflow: hidden;border-radius: 2px;}

.imgUploadWrap{}
.imgForm input[type=file] { position: absolute; left: -100000px}
.imgForm input[type=file] + label {text-align: center; margin: 0; ; cursor: pointer; display: block; width: 100%; position: relative; }
.imgForm  span{    width: 100%; display: block;background-repeat: no-repeat;background-position: 50% 50%; z-index: 1;height: 160px; line-height:normal; }
span.isImage{background-size: auto  100%; z-index:5 } 
span.noImage{background-size: 40px auto; background-image: url("../images/browseImages.png")} 
em.loadingImg{
position: absolute;
left: 0px;
top: 0;
height: 100%;
width: 100%; 
text-align: center;
padding-top: 25%;  /*allows centering with ... */
background: #fff;text-indent: -1000px;  
font-style: normal; color: #333;
background-image: url("../images/loading-spinner.gif"); background-repeat: no-repeat; background-position: 53% 44%; background-size: 40px
}

em.drag, * em.drag{ 
position: absolute;
left: 5px;
top: 5px;
height: 24px;
width: 24px;
background-color:#fff; z-index:1001;
}
.imgForm em.deleteImg{
position: absolute;
right: 5px;
top: 5px;
height: 24px;
width: 24px; 
background: #ff0000; text-indent: -1000px; 
text-align: center;
cursor: pointer;
font-style: normal; z-index: 1111; transition: all 0.2s;
background-image: url("../images/icons/deleteWhite.png");
background-position: 50%; background-repeat: no-repeat
}

.imgForm .deleteImg:hover{ height: 30px; width: 30px;  }

.caption, input.caption{ width: 100%; margin: 4px  0 0 0; height: 30px;border-radius: 2px;}
.caption:focus{outline: none; background: #f9f9f9}

select.related { width: 255px; margin-right:8px; float: left;}
select.relatedProducts { width: 32%; margin:0 1% 4px  0%; float: left;}
input.tag{ width: 120px; margin-right:8px; float: left;}

/*below captions assigned in swatches*/
p.prodImgKeyAssigns{
height:22px;
line-height:22px;
overflow:hidden;
width:100%;
white-space:nowrap;
text-overflow:ellipsis;
color:#757575;
font-size:12.4px;
padding:0 4px
}

span.calColour{width:35px; height:35px;margin:2px 0px 0 0 ; display: block; float: left}


/* SHOP CMS AND PRODS*/
#cmsAndShop p.resultsMessage{ margin:50px auto; text-align:center; font-weight:bold; color:#999}
#cmsAndShop p.addCatsTitle{ margin:30px auto 10px auto; text-align:center; font-weight:bold; color:#999}
#cmsAndShop #wrapper div.settingSections{ padding-left: 0px; height: 42px;position: relative}

#SELcatForm{ display:block; float:left; position: absolute}	
#SELcatForm select{ width:300px; float:left; height:32px;}

#cmsAndShop .selectDD#categorySelector{ height: 34px;width: 375px; float: left;}
#cmsAndShop .selectDD.selectorOpen#categorySelector{ height: auto; max-height: calc(100vh - 120px); overflow: auto} 
#cmsAndShop .selectDD#categorySelector input[type="radio"] + label{ height: 28px;line-height: 28px; color:#006699; font-size: 11.6px; font-weight: bold; max-width: 98%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
#cmsAndShop .selectDD#categorySelector input[type="radio"] + label em{ color: #777; font-style: normal; margin-left: 5px;}
#cmsAndShop .selectDD#categorySelector input[type="radio"]:checked + label{ color: #111;}
#cmsAndShop .selectDD#categorySelector input[type="radio"] + label.maincatSel{ font-weight: bold; color: #8F3A9D;text-indent: 5px; font-size: 1.1em;}
#cmsAndShop .selectDD#categorySelector input[type="radio"] + label.maincatSel:hover{ text-decoration: none}
#cmsAndShop .selectDD#categorySelector input[type="radio"] + label.subcatSel{ text-indent: 10px;}

.isCalendarCat{float: left; width:20px; height: 20px; margin: 4px  0px 0 0;   }

#cmsAndShop #uploadCSVform{ float: left;position: relative; margin-left: 430px;}
#cmsAndShop #uploadCSVform input[type=file]{ position: absolute; left: -100000px;}
#cmsAndShop #uploadCSVform label{
width: 200px;
height: 34px; line-height: 34px; text-align: left; border-radius: 99px; padding: 0 0 0 20px;
border: 1px solid #e1e1e1;
display: block;
cursor: pointer; font-size: 11px; font-weight: bold; color: #006699;
background-position: 92% 50%; background-repeat: no-repeat;
background-size: 13px auto; background-color: #e1e1e1;
background-image: var(--xl) ; 
}
 

#cmsAndShop.products #uploadCSVform{ float: left;position: relative; margin-left: 750px;}
#cmsAndShop.products  #uploadCSVform label{width: 120px; text-transform:  capitalize; overflow: hidden}


.products #searchProductsForm{ position: absolute; left: 350px; top: -1px;} 
 
 .products #search{ height: 34px;width: 300px;border-radius: 99px; text-indent: 10px; background-image:var(--search); background-position: 95% 50%; background-repeat: no-repeat; background-size: 12px auto; display: block; position: relative}


#cmsAndShop  #resultList{}
#cmsAndShop #resultList li { display: block; clear: both; margin: 2px auto; border-bottom: 1px dashed #d9d9d9;   }
#cmsAndShop #resultList li:hover{ } 
#cmsAndShop #resultList .drag{ width:40px; height:36px; display:block; float:left; margin-right:10px;}

#cmsAndShop #resultList li p.cals{ margin:4px 0 0  -55px;}

#cmsAndShop #resultList li p{ display: block; float:left; min-height: 36px; line-height: 36px; padding-top:4px;}   
#cmsAndShop  #resultList  li p.endColumn , #cmsAndShop.products #resultList li p.endColumn{ float: right;  }
#cmsAndShop #resultList li a.preview{ 
display: block; margin: 0px auto 0 auto;
 overflow: hidden;
background-image: var(--urls);
background-position: 50% 50%; background-repeat: no-repeat;
width: 12px; height:  36px; background-size: contain;
}

p.views{ font-size: 11.8px; font-weight: bold; color: #888;}

#cmsAndShop .editOpener{ display:block; height:34px; line-height:32px; width:80px; border-radius: 2px; margin-top:2px;  }
#cmsAndShop .editOpener:hover {   }

#cmsAndShop .selStatus,  select.selStatus { height: 30px; width: 94%; font-size: 10.6px; font-weight: bold; border: none; padding-left:10px; outline:none; float:right; background-image:url(../images/icons/arrowDwhite.png) ; background-position:95%;background-size:10px;}
#cmsAndShop .selStatus,  select.selStatus ,  select.selStatus option { color: #fff;  }
#cmsAndShop select.selStatus.status3{	background-color: #757575; }/*key image for cats page only */
#cmsAndShop select.selStatus.status2{	background-color: #F06; }/*feat*/
#cmsAndShop select.selStatus.status1{ background-color: #82AE00;} /*show*/
#cmsAndShop select.selStatus.status0{ background-color: #ff0000; }
#cmsAndShop select.selStatus.status-1{background-color: #ff6600;}
#cmsAndShop .bgImg{ margin:0px auto; width:38px; height:34px; display:block; background-position:50% 50%; background-repeat: no-repeat; padding:0px; border:1px solid #e1e1e1; background-size: contain;float: left; cursor:pointer; margin-top:2px;}
#cmsAndShop .bgImg.noImg {background-size: 15px auto; opacity:0.7;  }

/* SHOP CMS AND PRODS*/

@media only screen and (max-width:1120px) {  
#cmsAndShop #resultList li p.hideForMobile, #cmsAndShop #resultList *.hideForMobile { display: none}
 #editCatsBtn ,   #uploadCSVform{ display: none}
	
	#SELcatForm{ width:260px; max-width: calc(100% - 125px)   }
	#categorySelector{ width:100%; }
	
	#cmsAndShop #wrapper div.settingSections{ height: auto; display: block;position: relative;border: 0px solid orange}
	
	#wrapper div.settingSections p#addItemBtn, p#addItemBtn{  
	border: 1px solid #006699;
	background: #006699;
	padding: 0px 0px;
	text-align: center;
	border-radius: 2px;
	text-shadow: none;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	padding: 0  0px;
	margin:  0px 0 0 0;
	height: 34px;
	line-height: 33px;
	float: right; width:125px;  
}
	 
/* record*/
#productTitleWrap{ display: none}
#tabWrapper li{ padding: 0  0px; margin: 0 1px 0 0}
#tabWrapper li p { font-size: 11px; padding: 0 14px;background-color: #777 }
#tabWrapper li.activeTab p{background-color: #111} 
#editForm select.related{ width: 100%; margin: 2px 0}
 #imageList li{ width: 48%;   margin: 1%   ;  }
	

	
	}
	
	@media only screen and (max-width:600px) { #imageList li{ width: 99%;   margin: 1%   ;    }   }
	
	
	
#cmsVideoList{  position: relative; display: block; width: 100%; height: auto}
#cmsVideoList li {width: 48%;height: 380px;  display: block; float: left; margin: 5px 1%; position: relative;border: 1px solid #bbb; padding: 4px 4px 0 4px;  overflow: hidden;border-radius: 2px;
}
.cmsNoVideo{ display: block; position: absolute; left: 48%; top:50%; background-image: url("../images/icons/searchGray.png"); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;width: 22px; height: 25px;}

.cmsVideoForm input[type=file] { position: absolute; left: -100000px}
.cmsVideoForm  label {text-align: center; margin: 0; ; cursor: pointer; display: block; width: 100%; position: relative;height: 340px;   width: 100%; display: block; }
video{ height: 340px;width: 100%; z-index: 1
}
.vidInfoWrap{ display: block; height:  20px;position: absolute; left: 0px; bottom: 15px; 	line-height: 20px;	height: 20px; 	font-size: 12px;width: 100%;}
.vidInfoWrap p{width: 100%;padding: 0 5px}

.vidInfoWrap span{ float: left;}
.vidInfoWrap  .deleteCmsVideo{
	display: block;
	float: right;
	color: #006699;
	cursor: pointer;
	text-transform: uppercase;
	font-style: normal;
}
.deleteCmsVideo:hover{  }


.loadingSpinner {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    animation: loadingSpinner 400ms linear infinite;
}

.loadingSpinner .spinner-icon {
    width: 40px;    height: 40px;
    border:  solid 4px transparent;
    border-top-color:  #00C8B1 !important;
    border-left-color: #00C8B1 !important;
    border-radius: 50%;
}

@keyframes loadingSpinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}