/*eStore Dashboard Options */

/* =====================================================================
   PRODUCT BROWSER — EDIT PRODUCT
   ===================================================================== */

.pb-edit-bar {
	padding: 6px 0 10px 0;
	text-align: right;
}
.pb-edit-btn {
	background: #3a7abf;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 5px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s;
}
.pb-edit-btn:hover { background: #2c5f9a; }

/* Edit form wrapper */
.pb-edit-form-wrap { padding: 4px 0; }
.pb-edit-form-wrap form { margin: 0; }


/*  INACTIVE
.Show-for-level-1 {display: block;} 
.Hide-for-level-1 {display: none !important;}  
INACTIVE */


/*  INACTIVE
.Show-for-level-2 {display: block;} 
.Hide-for-level-2 {display: none !important;}  
INACTIVE */



.Show-for-level-3 {display: block;} 
.Hide-for-level-3 {display: none !important;}   


	
/*system styles*/
div#wrapper {
    width: 100vw;
    height: 100vh;
    padding: 0px;
}

body {
    font-family: tahoma, verdana, arial, sans-serif;
    font-size: 12px;
    background-color: #ffffff;
}

.container {
    overflow: auto;
    height: 100%;
    width: 100vw;
	margin-top: 40px;
}
.CodeMirror {
    width: 100%;
    box-sizing: border-box;
    height: 100% !important;
}

.templateUpdateContainer {
    height: 140px !important;
}

.templateUpdateContainer.singleHeight {
    height: 60px !important;
}

.cent {
    text-align: center;
}
/*end system styles */

/*menu styles*/

.menu2 li a{
	text-align: center;
}

.menu2 li a svg {
    width: 30px;
    display: inline-block;
    text-align: center;
}

.menu2 li ul li a, .menu2 li:hover ul ul a {
    text-align: left;
    top: unset;
}

.menu2 li:hover ul {
    display: block;
    text-align: left !important;
    top: unset;
}

.bodyDiv {
    padding: 5px;
    padding-top: 10px;
    width: 100%;
	box-sizing: border-box;
}

.half {
    width: 50% !important;
}

a.logoutA {
    height: 73px;
    float: right;
    padding: 5px 8px 5px 8px;
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: #000000;
    border-left: 1px solid #bbb;
    text-shadow: none;
    text-align: center;
    box-sizing: border-box;
	background: none;
}

a.logoutA img {
    width: 33px;
    display: inherit;
    text-align: center;
    margin-left: 25%;
}

a.logoutA:hover {
    background: linear-gradient(to bottom, rgba(213,235,251,1) 0%,rgba(235,241,246,1) 100%);
    color: #000000;
}


ul.templateMenuList li ul.templateMenuList {
    background: none;
}

ul.templateMenuList li ul.templateMenuList li {
    display: none;
}

ul.templateMenuList li ul.templateMenuList:hover li {
    display: block;
}

/*end Menu Styles*/


/*end Menu Styles*/

.ui-accordion .ui-accordion-header {
    font-size: 1.5rem !important;
    text-align: left;
    color: #000000 !important;
}

.ui-accordion-header:hover {
  background: #E7DCD5 !important;
  color: #000000 !important;
}

.ui-state-active {
  background: #E7DCD5 !important;
  color: #000000 !important;
}

div#xx, div#x {
	width: 100%;
}

div#productDetailsDiv {
	height: 100%;
	overflow-y: auto;
}

.detailsReturn {
	height: 100%;
}

div#findProductLeftPane {
	display: inline-block;
	width: 15vw;
	float: left;
	height: 66vh;
	overflow-y: auto;
	overflow-x: hidden;
}

div#findProductRightPane {
	width: 83vw;
	display: inline-block;
	height: 66vh;
}	
	
div#findProductDetailPane {
	overflow-y: auto !important;
	height: 75vh !important;
}

div#productDiv {
	height: 100%;
	background: #fff;
}

table#prodList, table#prodListHead {
	width: 100%;
}

#prodList {
	background: #fff;
}

table#prodList tr, table#prodListHead tr{
	display: flex;
	border: 1px solid #ccc;
}

table#prodList tr:hover td {
	background: #E7DCD5;
	font-weight: bold;
	cursor: pointer;
}
	
table#prodListHead th, table#prodList td {
	flex: 1;
	padding: 5px 10px;
	border-right: 1px solid #eee;
	text-align: center;
	font-size:1.25rem;
}

td.codeTd, th.codeTd {
	flex: 1.25 !important;
	text-align: left !important;
}

td.nameTd, th.nameTd {
	flex: 3 !important;
	text-align: left !important;
}

td.halfTd, th.halfTd{
	flex: 0.5!important;
}

td.quartTd, th.quartTd{
	flex: 0.25!important;
}

.rightPanel.top {
margin-top: 60px;
}

div#findProductLeftPane ul {
	width: 100%;
	font-size: 1.25rem;
	margin-left: -30px;
}

div#findProductLeftPane ul li:hover {
	font-weight: bold;
	cursor: pointer;
	background: #F9F6F4;
}

div#findProductLeftPane ul li {
	padding: 5px;
}

.Googletitle {
  display: block;
  width: 100%;
  text-align: left;
  max-width: 1000px;
}

.hideme{
	display: none !important;
}

.imageBlock {
	width: 20%;
	height: 90%;
	min-height: 642px;
	display: inline-block;
}

.imageTop {
	height: 368px;
	padding-top: 10px;
}

.wideBoy {
	width: 100%;
	height: auto;
	margin-top: 25%;
}

.tallBoy{
	height: 75%;
	margin-left: 15%;
}

.imageBottom select {
	width: 100%;
	font-size: 1.75rem !important;
	padding: 3px;
}

.basicBlock {
	width: 80%;
	display: inline-block;
	padding: 15px 45px;
	font-size: 1.75rem;
	vertical-align: top;
	padding-right: 0px;
	box-sizing: border-box;
}

.basicBlock table {
	width: 100%;
}

.basicBlock table tr {
	display: flex;
}

.basicBlock table td {
	flex: 1.75;
	font-size: 1.75rem;
	border: 1px solid #ccc;
	border-left: none;
	margin-bottom: 15px;
	padding: 5px 10px;
}

td.title {
	text-align: center !important;
	font-size: 2rem !important;
	border: none !important;
	font-weight: bold;
	flex: 1 !important;
}

.basicBlock table td.label {
	flex: 0.25;
	border-left: 1px solid #ccc;
	border-right: none;
	min-width: 150px;
	text-align: left !important;
}

.basicBlock table td.label.l2 {
	margin-left: 15px;
}

td.warn {
	background: #ffc165;
	color: #de6600;
}

td.alert {
	background: #ff6a6a;
	color: #881616;
}

.basicBlock.leftBlock {
	padding-left: 0px;
	width: 100%;
	margin-top: 8px;
}

.leftBlock table {
	width: 100%;
}

.leftBlock table td	{
	text-align: right;
}

.leftBlock table td.label.sml {
	width: 5px !important;
}

.leftPaneDetail.specPane {
	padding: 10px;
	width: 24%;
	display: inline-block;
}

.rightPaneDetail {
	width: 74%;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
}

span.header {
	width: 100%;
	text-align: center;
	font-size: 2rem;
	display: inline-block;
	font-weight: bold;
}

p.textarea {
	display: inline-block;
	font-size: 1.25rem;
	overflow-x: auto;
	width: 100%;
	background: #f5f5f5;
	padding: 5px;
}

.basicBlock.tab {
	width: 100%;
}

.leftPaneDetail.addPane {
	padding: 10px;
	width: 23%;
	display: inline-block;
}

ul.tabs {
	display: flex;
	width: 99.4%;
}

ul.tabs li, ul.tabs li.active {
	flex: 1;
	min-width: 0px;
	z-index: 99;
}

li.tab-title.active {
	z-index: 999;
	border: 0px solid #76bdf3;
	border-bottom: 0px;
	border-radius: 5px;
}

.basicBlock.meta {
	width: 100%;
	padding: 5px;
}

div#findProductTopPane {
	width: 97%;
	display: inline-block;
	padding: 15px;
	font-size: 1.5rem;
	background: #F9F6F4;
}

table#prodListHead {
	width: 100%;
	background: #efefef;
	border: none !important;
}

table#prodListHead tr {
	border: none;
}

table#prodListHead th {
	border: none;
	text-align: center !important;
	padding-right: 15px;
}

.prodTableDiv {
	height: 90%;
	overflow-y: auto;
}

div.filterDiv {
	display: inline-block;
	width: 33%;
	padding: 10px;
	box-sizing: border-box;
	font-size: 1.75rem;
	position: relative;
	border: 1px solid #ddd;
	margin-bottom: 5px;
	margin-right: 5px;
	
}

.filterDiv select {
	width: 79%;
	float: none;
	display: inline-block;
	position: relative;
	font-size: 1.75rem;
}

input#specification {
	font-size: 1.2rem;
	display: inline-block;
	padding: 5px;
	width: 100%;
	box-sizing: border-box;
}

input#findCode {
	font-size: 1.55rem;
	float: none;
	width: 60%;
}

/* delivery checker */

.topFull {
	margin: 10px;
	margin-right: 28px;
	max-height: 485px;
	border: 1px solid #bbb;
	overflow-y: auto;
}

.bottomHalf {
	width: 48.5%;
	margin: 10px;
	height: 300px;
	display: inline-block;
}

/* department checker */
div.fullWidth {
	width: 100% !important;
}
	
.bottomThird {
	width: 32%;
	margin: 10px;
	height: 300px;
	min-height: 300px;
	display: inline-block;
	overflow: hidden;
}

#findDepMainPane {width: 85%;}

.bottomThird .prodTableDiv {
	height: 80%;
	overflow-y: auto;
}

.bottomThird.border {
	border: 1px solid #bbb;
}

/* furniture group */

div#fGroupTop {
	padding: 10px;
	background: #F9F6F4;
	font-size: 1.5rem;
	margin-bottom: 15px;
	width: 99%;
}

input#group_name {
	font-size: 1.5rem;
	width: 80%;
}

div.fGroupDiv {
	width: 45%;
	display: inline-block;
}

div#fGroupLeft {
	margin-right: 100px;
}

span.fgrouptitle {
	width: 100%;
	display: inline-block;
	font-size: 1.5rem;
	text-align: center;
	font-weight: bold;
}

table#prodListHead, table#rangeList, table#inList {
	width: 100%;
}

table#prodListHead tr, #rangeList tr, #inList tr{
	display: flex;
}

table#prodListHead th, table#prodListHead td, #rangeList td, #inList td, #rangeList th, #inList th{
	flex: 2;
}

table#prodListHead th.halfTd, table#prodListHead td.halfTd, #rangeList th.halfTd, #inList td.halfTd, #rangeList td.halfTd, #inList th.halfTd{
	flex: 0.5;
}

#prodListHead th {
	background: #ddd !important;
	padding: 5px;
	font-size: 1.5rem;
	border: 1px solid #eee;
}

#rangeList td, #inList td {
	background: #ddd !important;
	padding: 5px;
	font-size: 1.5rem;
	border: 1px solid #eee;
}

.prodTableDiv {
	height: 575px;
	overflow-y: auto;
}

#rangeList td, #inList td {
	background: #f7f7f7 !important;
	padding: 5px;
	font-size: 1.5rem;
	border: 1px solid #e6e6e6;
}

#rangeList tr:hover td, #inList tr:hover td {
	cursor: pointer;
	background: #c3c3c3 !important;
	color: #000000;
	font-weight: bold;
}

#rangeList tr:hover:after {
	content: ">>";
	font-size: 1.5rem;
	vertical-align: bottom;
	padding: 5px;
	font-weight: bold;
}

#inList tr:hover:before {
	content: "<<";
	font-size: 1.5rem;
	vertical-align: bottom;
	padding: 5px;
	font-weight: bold;
}

/* Tag Helper */

.hideMe {
	display: none !important;
}

.tagPane {
	width: 100%;
	display: inline-block;
	padding: 5px;
	font-size: 1.25rem;
	background: #F9F6F4;
	height: 25vh;
	border: 0px solid #eee;
	box-sizing: border-box;
	vertical-align: top;
}

span.tagTitle {
	width: 100%;
	margin-bottom: 10px;
	display: inline-block;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}

div#tagRenderPane {
	width: 100%;
	display: inline-block;
	height: 20%;
	box-sizing: border-box;
	padding: 5px;
}

input#tagValue {
	font-size: 1.5rem;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

div#tagTextPane {
  width: 100%;
  height: 50%;
  display: inline-block;
  padding: 20px 5px 5px 5px;
  box-sizing: border-box;
  margin-top: 50px;
  background: #E7DCD5;
  text-align: center;
  font-size: 1.4rem;
}

span#tagDetails {
	display: inline-block;
	width: 100%;
	height: 100%;
}

div#mainTagPane {
	height: 12vh;
	margin-top: 20px;
}

select#mainSet {
	width: 60%;
	box-sizing: border-box;
	padding: 10px;
	font-size: 1.5rem;
	margin-left: 23%;
}

div#addTagPane {
	margin-top: 20px;
	max-height: 40vh;
	overflow-y: auto;
}

div#addTagPaneInner {
	width: 100%;
	height: 89%;
}

span#noAdd {
	width: 100%;
	text-align: center;
	display: inline-block;
	font-size: 1.5rem;
}

.settingPod {
	background: #F9F6F4;
	padding: 10px;
	width: 19%;
	height: 130px;
	overflow-y: auto;
	box-sizing: border-box;
	display: inline-block;
	margin-right: 15px;
}

.settingPod.last {
	margin-right: 0px;
}

.addTag {
	width: 100%;
	margin-top: 10px;
	font-size: 1.5rem;
	padding: 5px;
}

.addTag {
	width: 100%;
	margin-top: 10px;
	font-size: 1.5rem;
	padding: 5px;
}

span.addNote {
	width: 100%;
	display: inline-block;
	background: #ccc;
	margin-top: 10px;
	padding: 5px;
	box-sizing: border-box;
}

input.addTag {
	width: 96%;
}

.furnCont {
	padding: 15px;
	font-size: 1.5rem;
	background: #f7f7f7;
}

select#secDropdown, select#typeSec {
	width: 30%;
	font-size: 1.5rem;
	margin-left: 10px;
	margin-right: 50px;
	padding: 10px;
	cursor: pointer;
}

select#typeSec {
	margin: 0px;
	width: 84%;
}

.furnGroup a.button.addButton {
	width: 20%;
	display: inline-block;
	margin-right: 20px;
	float: right;
	font-size: 1.75rem;
	padding: 11px;
	color: #F9F6F4 !important;
	background: #000000;
	line-height: 1.75rem;
	border-radius: 0;
}

.furnGroup a.button.addButton:hover {
	color: #000000 !important;
	background: #F9F6F4;
}

.furnCont.fullCol {
	width: 98%;
	margin-bottom: 10px;
}

.furnCont.halfCol {
	width: 48%;
	display: inline-block;
	vertical-align: top;
	height: 60vh;
overflow: auto;
}

.rightCol{
	float: right;
}

.formRow {
	padding: 10px 6px;
}

.formRow label {
	width: 16%;
	display: inline-block;
}

.formRow input {
	width: 83.5%;
	font-size: 1.5rem;
	padding: 10px;
	box-sizing: border-box;
}

a.button.editButton {
	background: #000000;
	color: #F9F6F4 !important;
	border-radius: 0;
	padding: 11px;
	font-size: 1.75rem;
	line-height: 1.75rem;
	width: 83%;		
}

.formRow a.button.editButton {
	width: 99%;		
}

a.button.editButton:hover {
	background: #F9F6F4;
	color: #000000 !important;
}

table#typeList {
	width: 100%;
	font-size: 1.5rem;
}

#typeList tr {
	display: flex;
}

td.full {
	flex: 3;
	text-align: center !important;
	box-sizing: border-box;
	background: #F9F6F4;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 10px 0px;
}

#typeList th, #typeList td {
	flex: 1.5;
	text-align: left;
	font-size: 1.5rem;
}

#typeList th.half, #typeList td.half {
	flex: 0.5;
}
	
a.actOn {
	width: 100%;
	padding: 11px;
	box-sizing: border-box;
	text-align: center;
	background: #3dd041;
	color: #1d541f;
	display: inline-block;
	font-size: 1.75rem;
	line-height: 1.75rem;
}

a.actOn:hover {
	background: #1d541f;
	color: #3dd041;
	cursor: pointer;
}

a.actOff {
	width: 100%;
	padding: 11px;
	box-sizing: border-box;
	text-align: center;
	background: #d03d3d;
	color: #541d1d;
	display: inline-block;
	font-size: 1.75rem;
	line-height: 1.75rem;
}

a.actOff:hover {
	background: #541d1d;
	color: #d03d3d;
	cursor: pointer;
}

span.error {
	padding: 11px;
	display: inline-block;
	width: 99%;
	text-align: center;
	box-sizing: border-box;
	background: #ffd0d0;
	color: #920000;
}

span.success {
	padding: 11px;
	display: inline-block;
	width: 99%;
	text-align: center;
	box-sizing: border-box;
	background: #a4eaad;
	color: #109200;	
}

.selectedItem {
	font-weight: bold;
	background: #f3f3f3;
}

.multiBlock.close, .button.hide {
	display: none;
}

.button.notice {		
	color: #ab3f01 !important;
	background: #f7b02e;
}

th.filtHead {
	flex: 1 !important;
}

th.multiBlock.filtHead.open, td.multiBlock.open {
	flex: 0.25 !important;
}

tr.isOver td, td.overF {
	background: #f1dbdb !important;
}

tr.isOver:hover td, table#prodList tr:hover td.overF{
	background: #b58585 !important;
}

.detailsDiv {
	padding: 5px;
	margin-bottom: 20px;
}

label.info {
	font-size: 1.5rem;
	margin-right: 10px;
}

.detailsDiv input {
	margin-right: 40px;
	width: 35%;
	padding: 5px;
	font-size: 1.5rem;
}

.detailsDiv select {
	display: inline-block;
	font-size: 1.5rem;
	margin-right: 120px;
	padding: 5px;
	width: 36%;
}

select#detailType {
	margin-left: 66px;
	margin-right: 40px;
}

select#detailCat {
	margin-left: 36px;
}

.fButtonContainer {
	width: 100%;
	display: inline-block;
	float: left;
	left: 0;
}

.fButtonContainer a.button {
	width: 47%;
	display: inline-block;
	margin-right: 55px;
	color: #a6ffa5!important;
}

.fButtonContainer a.button.delButton {
	margin: 0px;
	color: #ffbfbf !important;
	background: #ef2525;
}

.detailWindow.fdetailWindw {
	height: 35vh!important;
}

div#findProductDetailPane.fDetailPane {
	overflow: hidden !important;
}

.pageSearch {
	width: 99%;
	display: inline-block;
	padding: 10px;
	box-sizing: border-box;
}

.pageSearchFilt {
	width: 100%;
	display: inline-block;
	margin-right: 30px;
	max-width: 1300px;
	position: relative;
}

label.pageSearchLabel {
	width: 15%;
	display: inline-block;
	font-size: 1.5rem;
}

input#pSearchTerm {
    width: 84%;
    font-size: 1.5rem;
	margin-bottom: 5px;
}

.checkContainer {
    padding: 5px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

td.pageFilterCheck {
    padding: 5px;
    width: 3%;
    box-sizing: border-box;
}

td.pageFilterLabel {
    font-size: 1.5rem;
    width: 25%;
    padding: 5px;
    box-sizing: border-box;
}

a.button.pageFiltReset {
    border-radius: unset;
    width: 100%;
	cursor: pointer;
    box-sizing: border-box;
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: 5px;
    height: auto;
    background: #a8e689;
    color: #597b47 !important;
}

a.button.pageFiltReset:hover {
    background: #597b47;
    color: #a8e689 !important;
}
.pageSearchFilt:last-of-type, .pageSearchFilt a {
    margin: unset !important;
}

.pageSearchFilt a.button, .pageSearchFilt input.button {
  display: inline-block;
  box-sizing: border-box;
  font-size: 1.2rem;
  line-height: 1.5rem;
  background-color: #3c8bdb;
  border: none;
  border-radius: 0px 20px 20px 0px;
  color: #fff !important;
  cursor: pointer;
  text-align: center;
  height: unset;
  top: -55px;
}

.accordion {
	margin-bottom: 0; }
.accordion:before, .accordion:after {
	content: " ";
	display: table; }
.accordion:after {
	clear: both; }
.accordion .accordion-navigation, .accordion dd {
	display: block;
	margin-bottom: 0 !important; }
.accordion .accordion-navigation.active > a, .accordion dd.active > a {
	background: #e8e8e8; }
.accordion .accordion-navigation > a, .accordion dd > a {
	background: #efefef;
	color: #222222;
	padding: 1rem;
	display: block;
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 1rem; }
.accordion .accordion-navigation > a:hover, .accordion dd > a:hover {
	background: #e3e3e3; }
.accordion .accordion-navigation > .content, .accordion dd > .content {
	display: none;
	padding: 0.9375rem; }
.accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
	display: block;
	background: white; }

.ui-dialog.previewPop{
	z-index: 999999 !important;	
}
	
a.editButton {
    width: 100%;
    background: #a8e689;
    color: #597b47 !important;
    display: inline-block;
    line-height: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    padding: 7px 0px;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 5px;
}

a.editButton:hover {
    color: #a8e689;
    background: #597b47;
}

span.blockLine {
    display: inline-block;
    width: 100%;
    padding: 5px 2px;
    box-sizing: border-box;
	position: relative;
}

a.blockName {
    width: 55%;
    display: inline-block;
    font-size: 1.5rem;
    box-sizing: border-box;
    line-height: 1.5rem;
    cursor: pointer;
	left: 0px;
	position: relative;
}

a.previewBlock {
  background: #3c8bdb !important;
  width: 10%!important;
  left: unset;
  text-align: center;
  box-sizing: border-box;
  border: 0px;
  margin-right: 10px;
  font-size: 1.2rem;
  margin-top: 8px;
  cursor: pointer;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  float: right;
}

a.previewBlock:hover {
  background: #2262a3 !important;
  font-size: 1.2rem;
  color: #fff !important;
  border: 0px !important;
  cursor: pointer;
}

a.editBlockCont {
  width: 10% !important;
  left: unset;
  text-align: center;
  box-sizing: border-box;
  border: 0px;
  margin-right: 10px;
  font-size: 1.2rem;
  margin-top: 8px;
  cursor: pointer;
  background-color: #45c5f2;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  float: right;
}

.savePageButton {
  text-align: center;
  box-sizing: border-box;
  border: 0px;
  margin-right: 10px;
  font-size: 1.2rem;
  margin-top: 8px;
  background-color: #282aff;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  cursor: pointer;
}

.savePageButton:hover {
  text-align: center;
  box-sizing: border-box;
  border: 0px;
  margin-right: 10px;
  font-size: 1.2rem;
  margin-top: 8px;
  background-color: #0a0bbd;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  cursor: pointer;
}

.saveModerationButton {
  text-align: center;
  box-sizing: border-box;
  border: 0px;
  margin-right: 10px;
  font-size: 1.2rem;
  margin-top: 8px;
  background-color: #45c5f2;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  cursor: pointer;
}



.saveModerationButton:hover {
  text-align: center;
  box-sizing: border-box;
  border: 0px;
  margin-right: 10px;
  font-size: 1.2rem;
  margin-top: 8px;
  background-color: #45c5f2b2;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  cursor: pointer;
}

.movePageButton, .updatePagesButton, .add_SecurityButton {
	background: #2262a3;
	font-size: 1.2rem;
	color: #fff !important;
	border: 0px !important;
	padding: 3px 14px !important;
	cursor: pointer;
	background-color: #3c8bdb;
	border-radius: 9999px;
	margin: 0px 0px 0px 6px;
}
 
.movePageButton:hover, .updatePagesButton:hover, .add_SecurityButton:hover {
	background: #2262a3;
	font-size: 1.2rem;
	color: #fff !important;
	border: 0px !important;
	padding: 3px 14px !important;
	cursor: pointer;
}

a.editBlockCont:hover {
   background: #45c5f2b2;
   color: #fff !important;
}

.go_To_Block_Module, .go_To_Slider_Module {
  width: 20% !important;
  text-align: center;
  box-sizing: border-box;
  margin-right: 10px;
  background: #8bc4e0;
  background-color: rgb(139, 196, 224);
  margin-top: 8px;
  cursor: pointer;
  color: #fff !important;
  background-color: #3c8bdb;
  border-radius: 9999px;
  font-size: 1.2rem !important;
  border: none !important;
  padding: 10px 20px;
}

.go_To_Block_Module:hover, .go_To_Slider_Module:hover {
  width: 20% !important;
  text-align: center;
  box-sizing: border-box;
  margin-right: 10px;
  background: #8bc4e0;
  background-color: #2262a3;
  margin-top: 8px;
  cursor: pointer;
  color: #fff !important;
  border-radius: 9999px;
  font-size: 1.2rem !important;
  border: none !important;
  padding: 10px 20px;
}

a.archiveBlock {
    width: 20%!important;
    background: #ffc150;
    color: #8a6624 !important;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
	left: unset;
	right: calc(0px - 4.6%);
}

a.archiveBlock:hover {
    background: #8a6624;
    color: #ffc150 !important;	
}


span.blockLineNotes {
    display: inline-block;
    width: 100%;
    padding: 5px 5px;
    box-sizing: border-box;
    font-size: 1.2rem;
    background: #eae786;
    color: #6f6d2e;
}

.archiveControls {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 0px;
}

button.archiveButtons {
  margin-right: 8px;
  color: #fff !important;
  background-color: #45c5f2;
  border-radius:9999px;
  font-size: 1.2rem !important;
  border:none !important;
  padding:6px;
}

button.archiveButtons:hover {
  background: #45c5f2b2;
  color: #fff !important;
}

.archiveButtons:last-child:hover {
	background: #c74a4a;
	color: #fff !important;
	text-align: center;
}

button.archiveButtons.deleteArchive {
  color: #fff !important;
  background-color: #3c8bdb;
  border-radius: 9999px;
  font-size: 1.2rem !important;
}

button.archiveButtons.deleteArchive:hover {
  color: #fff !important;
  background-color: #3c8bdb;
  border-radius: 9999px;
  font-size: 1.2rem !important;
}

button.archiveButtons.selectAllButton {
  color: #fff !important;
  background-color: #3c8bdb;
  border-radius: 9999px;
  font-size: 1.2rem !important;
  border:none !important;
  padding:6px;
}


button.archiveButtons.selectAllButton:hover {
  color: #fff !important;
  background-color: #2262a3;
  border-radius: 9999px;
  font-size: 1.2rem !important;
  border:none !important;
  padding:6px;
}

button.archiveButtons.invertArchive {
  color: #fff !important;
  background-color: #3c8bdb;
  border-radius: 9999px;
  font-size: 1.2rem !important;
  border:none !important;
  padding:6px;
}

button.archiveButtons.invertArchive:hover {
  color: #fff !important;
  background-color: #3c8bdb;
  border-radius: 9999px;
  font-size: 1.2rem !important;
  border:none !important;
  padding:6px;
}

.archiveDiv {
  max-height: none !important;
  border:1px solid #eee;
  overflow:auto;
  margin-top: 5px;
  padding:5px;
  background:#fffdfd;
  margin-bottom: 14px;
}

.archivePane {
    width: 52% !important;
    height: 79vh;
    display: inline-block;
    overflow-y: auto;
}
div.archiveRow {
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
}

div.archiveRow:hover {
	background: #ffffff;
}

a.archiveButton {
	width: 19%;
    padding: 5px;
    font-size: 1.25rem;
    line-height: 1.25rem;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

a.archiveButton.archiveName {
    width: 36% !important;
    text-align: left;
    color: #777777 !important;
}

a.archiveButton.archiveRestore {
    background: #a8e689;
    color: #597b47 !important;
}

a.archiveButton.archiveRestore:hover {
    background: #597b47;
    color: #a8e689 !important;
}

a.archiveButton.archivePreview {
    background: #8bc4e0;
    color: #126b96;
    margin-left: 4px;
    margin-right: 4px;
}

a.archiveButton.archivePreview:hover {
    background: #126b96;
    color: #8bc4e0;
}

a.archiveButton.archiveDelete {
    background: #e68989;
    color: #7b4747 !important;
}

a.archiveButton.archiveDelete:hover {
    background: #7b4747;
    color: #e68989;
}

.archiveContainer {
    width: 46%;
    display: inline-block;
    vertical-align: top;
}

h3#archivePreviewTitle {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    border: none !important;
    padding: 5px 0px;
    text-align: center;
    margin-bottom: 5px;
}

div#archivePreviewPane, div#archivePreviewTitle, #archivePreviewPaneCode {
    width: 97%;
    height: 30vh;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #ddd;
    padding: 5px;
    float: right;
    pointer-events: none;
    margin-bottom: 10px;
}

textarea#archivePreviewPaneCode {
    height: 40vh;
}

td.colFix a {
  display: block;
}

.ui-dialog .ui-dialog-titlebar-maximize {
    position: absolute;
    right: 2.3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.ui-dialog .ui-dialog-titlebar-align {
    position: absolute;
    right: 4.3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.ui-dialog .ui-dialog-titlebar-min {
    position: absolute;
    right: 6.3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.controlDiv {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 5px;
}

a.control, a.control-full, input.control-full, input.control {
    width: 24.5%;
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.5rem;
    cursor: pointer;
    font-weight: 100;
    margin-left: 5px;
    background: #8bc4e0;
    color: #126b96 !important;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
	border: none;
}

a.control-full, input.control-full {
	width: 100% !important;
}

a.control-full.no_mar, .control-full.no_mar {
    margin: 0px !important;
}

a.control:hover, a.control-full:hover, input.control-full:hover, input.control:hover{
    background: #126b96;
    color: #8bc4e0 !important;	
}

a.control.pageOn.on, a.cgreen, input.cgreen {
  background:#E7DCD5 !important;
  color: #000 !important;
  padding:10px;
  font-size: 1.3rem;
}

a.control.pageOn.off, a.control.delPage, a.cred, input.cred {
    background: #D0C5BE !important;
    color: #000 !important;
}

a.control.dupPage, a.corange, input.corange {
    background: #ffc150 !important;
    color: #000 !important;
}

a.control.pageOn.on:hover, a.cgreen:hover, input.cgreen:hover{
   background:#E7DCD5 !important;
    color: #000 !important;
}

a.control.pageOn.off:hover, a.control.delPage:hover, a.cred:hover, input.cred:hover {
   background:#E7DCD5 !important;
    color: #000 !important;
}

a.control.dupPage:hover, a.corange:hover, input.corange:hover {
    background:#E7DCD5 !important;
     color: #000 !important;
}

.bodyHide {
	opacity: 0;
}

.bodyFade {
	animation: fadeIn ease 3s;
}
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

div#loadingContainerPane {
    width: 100%;
    display: inline-block;
    height: 100%;
    text-align: center;
    padding-top: 25vh;
}

span.status {
    display: inline-block;
    position: relative;
    float: right;
    margin-right: 0.2%;
    background: #e68989a8;
    color: #7b47479e;
    box-sizing: border-box;
    padding: 0px 15px;
}

span.status.on {
    color: #597b47a3;
    background: #a8e68982;
}

a.pageFilter {
    display: inline-block;
    float: right;
    color: #000000;
    cursor: pointer;
    padding: 0px 10px;
    padding-top: 5px;
    top: -5px;
    position: relative;
    box-sizing: border-box;
}

a.pageFilter:hover {
    background: #a8e689;
}

.pageFilter img {
    width: 20px;
}

/*-- Colour Module --*/
.controlContainer {
    width: 100%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
}

.controlContainer a{
	width:49.7% !important;
}

.bodyContent {
    width: 100%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
    height: 81vh;
    overflow-y: auto;
}

table#standardColours {
    width: 100%;
    font-size: 1.5rem;
}

table#standardColours th {
    background: #E7DCD5;
    padding: 5px;
}

table#standardColours tr:hover {
    background: #E7DCD5;
}

td.colTag {
    font-weight: bold;
    width: 10%;
    text-align: center;
    font-size: 1.5rem;
    padding: 5px 10px;
	color: #555;
}

td.colInput, td.colPick {
    padding: 5px;
    box-sizing: border-box;
}

td.colInput {
    width: 42%;
}

.colInput input {
    width: 98%;
    font-size: 1.5rem;
    padding: 5px;
	color: #555;
}

td.colPick input {
    width: 97%;
}

/*-- Colour Overview Module --*/
.bodyContent.colourSettings {
    height: 86vh;
	overflow: unset;
}

.bodyContentLeft, .bodyContentRight {
    display: inline-block;
    width: 48vw;
    vertical-align: top;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.colourBlock {
    width: 100%;
    height: 26vh;
    overflow-y: auto;
    margin-bottom: 10px;
    display: inline-block;
}

.colourBlock a.blockName {
    width: 100%;
    margin-bottom: 10px;
}

.colBlockOver {
    width: 3vh;
    height: 3vh;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
}

.bodyContentRow {
    width: 100%;
    display: inline-block;
    padding: 5px;
    font-size: 1.5rem;
    color: #000000;
}

.bodyContentRow label {
    width: 15%;
    display: inline-block;
}

.bodyContentRow input {
    font-size: 1.5rem;
    width: 69%;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 2px;
    box-sizing: border-box;
	color: #232323;
}

input#oldColPick, input#newColPick {
    height: 2.8rem;
    display: inline-block;
    top: 6px;
    position: relative;
    width: 10%;
    padding: unset;
}

select#curStyle {
    width: 80%;
    font-size: 1.5rem;
    color: #000000;
    padding: 5px 2px;
    display: inline-block;
    box-sizing: border-box;
}

.bodyContentLeft a.control.pageOn.on {
    width: 95%;
    margin-top: 10px;
}

.colourInformation {
    padding: 5px;
    border: 1px solid #cecece;
    width: 95.6%;
    box-sizing: border-box;
    margin-top: 10px;
    height: 24vh;
    overflow: hidden;
}

h3.info.header {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 1.5rem;
    padding: 2px 5px;
    box-sizing: border-box;
    background: #b2e7ff !important;
    color: #4d859e;
    border: unset !important;
}

div#systemColours.colourInformation {
    height: 39vh;
}

#systemColours .controlContainer a {
    width: 49% !important;
}

#systemColours .bodyContent {
    height: 30vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#systemColours td.colInput {
    width: 38%;
}

.colourBlockSearch {
    height: 4vh;
    display: inline-block;
    width: 100%;
    font-size: 1.5rem;
}

input#colFilt {
    width: 45%;
    display: inline-block;
    font-size: 1.5rem;
    padding: 2px 5px;
    box-sizing: border-box;
}

/*user Filter Styles */
	.userFilters {
		padding: 5px;
	}

	.userFilters input {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 10px;
		font-size: 1.5rem !important;
		color: #000000;
	}

	.userFilters label {
		width: 40%;
		font-size: 1.5rem;
		display: inline-block;
		color: #000000;
	}

	.userFilters select {
		font-size: 1.5rem !important;
		display: inline-block;
		width: 60%;
		color: #000000;
	}

	.userFilters a {
		width: 48%;
		display: inline-block;
		margin-top: 10px;
		font-size: 1.5rem;
		text-align: center;
		background: #83de7d;
		padding: 5px;
		box-sizing: border-box;
		cursor: pointer;
		color: #F9F6F4;
	}

	.userFilters a:hover {
		background: #F9F6F4;
		color: #83de7d;
	}

	.userFilters a.reset {
		float: right;
		background: #8bc4e0;
		color: #126b96;
	}

	.userFilters a.reset:hover {
		background: #126b96;
		color: #8bc4e0;
	}
/*End User Filter Styles */

/*M2M Styles*/
table.actionTable {
    font-size: 1.5rem;
    width: 25%;
	margin-top: 15px;
	color: #000000;
}

table.actionTable tr:hover td {
    background: #efefef;
}

table.actionTable tr {
    display: flex;
}

table.actionTable th, table.actionTable td {
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
    text-align: left;
	flex: 1;
	color: #000000;
}

.topContainer {
    margin-top: 10px;
}

.topContainerRow {
    width: 100%;
}

.stdLabel {
    width: 7%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #000000;
}
 
.topContainer select, .topContainer input {
    display: inline-block;
    font-size: 1.5rem;
    width: 25%;
    margin-right: 1.3%;
    color: #000000;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 2px 5px;
}

.topContainerRow .control {
    width: 31.7% !important;
    border: none;
    padding: 5px;
}

div#matrixContainer {
    width: 100%;
    display: inline-block;
    height: 70vh;
    padding: 5px;
    overflow: auto;
    box-sizing: border-box;
}

div#matrixLeftColTop, div#matrixLeftCol {
    width: 3%;
    display: inline-block;
    font-size: 1.5rem;
    color: #000000;
}

div#matrixRightColTop, div#matrixRightColMain {
    display: inline-block;
    width: 95%;
    font-size: 1.5rem;
    color: #000000;
}

div#matrixLeftCol {
    text-orientation: upright;
    height: 65vh;
}

div#matrixLeftCol span {
    position: relative;
    top: 25%;
}

div#matrixRightColTop {
    text-align: center;
}

div#matrixRightColMain {
    height: 65vh;
    vertical-align: top;
    overflow: auto;
}

div#matrixRightColMain table {
    width: 100%;
    display: inline-block;
}

div#matrixRightColMain table tr {
    display: flex;
}

div#matrixRightColMain table tr td, div#matrixRightColMain table tr th {
    flex: 2;
    font-size: 1rem;
    line-height: 2rem;
    padding: 2px;
    box-sizing: border-box;
}

div#matrixRightColMain table tr td:first-of-type, div#matrixRightColMain table tr th:first-of-type {
    flex: 0.5;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    box-sizing: border-box;
}

table tr td select {
    padding: 2px 5px;
    font-size: 1rem;
    box-sizing: border-box;
    color: #000000;
}

div#matrixContainerDim {
    width: 100%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
}

.rowContainer {
    width: 10vw;
    display: inline-block;
    margin-top: 10px;
    vertical-align: top;
    margin-right: 10px;
    height: 84vh;
}

.ControlContainer {
    width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    box-sizing: border-box;
}

.ControlContainer a{
	width: 95% !important;
}

div#matrixContainerH, div#matrixContainerW {
    width: 100%;
    display: inline-block;
    height: 95%;
    overflow-y: auto;
    overflow-x: hidden;
}

.rowContainer input {
    width: 100%;
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #000000;
    padding: 2px 5px;
    box-sizing: border-box;
}

.fullRow {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
    padding: 5px;
}

/*End M2M Styles*/

/*start page spec */

table#pageDetailsTable, .pageDetailsTable, table#editPageMeta.pageDetailsTable {
    width: 100%;
}

table.pageDetailsTable tr:hover td {
    background: #E7DCD5;
}

table.pageDetailsTable tr:hover td.noBG {
    background: unset;
}

table#pageDetailsTable tr, .pageDetailsTable tr {
    display: flex;
}

table#pageDetailsTable tr td.sitRight , .pageDetailsTable tr td.sitRIght {
    flex: 0.8;
    width: unset !important;
}

table#pageDetailsTable tr td, .pageDetailsTable tr td {
    flex: 2;
    font-size: 1.5rem;
    padding: 5px;
    color: #000000;
    box-sizing: border-box;
}

table#pageDetailsTable tr td select, table#pageDetailsTable tr td input, .pageDetailsTable tr td select, .pageDetailsTable tr td input {
    width: 100%;
    font-size: 1.5rem;
    color: #000000;
    display: inline-block;
    box-sizing: border-box;
	margin: unset;
}

.pageDetailsTable tr td a.control-full{
    color: #000000 !important;
}

.pageDetailsTable tr td a.control-full.corange{
	color: #000000 !important;
}

.pageDetailsTable tr td a.control-full.cgreen{
    color: #000000 !important;
}

.pageDetailsTable tr td a.control-full.cred{
    color: #000000 !important;
}

.pageDetailsTable tr td a.control-full:hover{
    color: #000000 !important;	
}

.pageDetailsTable tr td a.control-full.cgreen:hover{
    color: #000000 !important;	
}

.pageDetailsTable tr td a.control-full.cred:hover{
    color: #000000 !important;	
}

.pageDetailsTable tr td a.control-full.corange:hover{
	color: #000000 !important;
}

.pageSpecContet {
    overflow: hidden !important;
}

img.smallIcon {
    width: 18px;
    position: relative;
    top: 2px;
}

img.smallIcon:hover {
    animation:cogIcon 4s linear infinite;
}

@keyframes cogIcon { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.pageDetailsTable tr td.selectTD {
    flex: 4;
}

.pageDetailsTable tr td.spacer {
    flex: 0.5;
}

td.sitRight.small {
    flex: 0.4 !important;
}

td.sitRight.smallMed {
    flex: 0.79 !important;
}

td.sitRight.medium {
    flex: 1 !important;
}

.large {
    flex: 5 !important;
}

.large input {
    left: 4px;
    width: 99.5% !important;
    position: relative;
}

.pageDetailsTable tr td textarea {
    color: #000000;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
}

.megaConfig {
    padding: 5px;
    height: 25vh;
    background: unset;
    border: unset;
}

.megaConfig label {
    width: 8% !important;
    font-size: 1.5rem;
    color: #000000;
    margin-bottom: 10px;
}

.megaConfig input, .megaConfig select {
    font-size: 1.5rem !important;
    padding: 2px 5px;
    display: inline-block;
    color: #000000;
}

input#classConfig, input#linkConfig {
    margin-bottom: 10px;
    width: 38% !important;
}

.megaConfig select, select#mainDrop {
    width: 39.5% !important;
}

.pageDetailsTable tr td span.blockLineNotes{
	font-size:1.4rem;
}

.confRow {
    width: 92%;
    display: inline-block;
    padding: 5px;
    margin-top: 5px;
}

table.cordTable {
    width: 100%;
}

.mmHide {
    visibility: hidden;
}

table.cordTable tr:hover td {
    background: #E7DCD5;
}

.pageDetailsTable tr td .megaWizard {
    width: 100%;
    box-sizing: border-box;
    border-radius: unset;
    border: unset;
    background: unset;
    height: 75vh;
    padding: 5px;
    overflow-y: auto;
}

.pageDetailsTable tr td .megaWizard .megaField {
    border-radius: unset;
    border: none;
	min-height: 25%;
    padding: 5px;
    box-sizing: border-box;
}

.pageDetailsTable tr td .megaWizard .megaField legend {
    border-radius: unset;
    background: #E7DCD5;
    width: 99%;
    text-align: left;
}

.pageDetailsTable tr td .megaWizard .rowRow {
    border-radius: unset;
    border: unset;
    padding: 5px;
}

.pageDetailsTable tr td .megaWizard .rowRow .topRow select {
    border-radius: unset;
    border: unset;
    line-height: 1.5rem;
    padding-left: 5px;
    box-sizing: border-box;
}

.pageDetailsTable tr td .megaWizard .megaField .rowRow .bottomRow input {
    border: unset;
    border-radius: unset;
    padding-left: 5px;
    width: 67% !important;
    color: #000000;
    margin-top: 5px;
}

.pageDetailsTable tr td .megaWizard .rowRow .topRow textarea {
    width: 100%;
    vertical-align: middle;
    display: block;
    margin-top: 10px;
    height: 100px;
    padding: 5px;
    box-sizing: border-box;
}

.thirdDrop {
    visibility: hidden;
    display: none !important;
}

textarea#megaMenuData {
    width: 100%;
    border-radius: unset;
}

/*end page spec*/

/*start website -> Templates */
td.leftHandNav {
    width: 14vw;
    display: inline-block;
    box-sizing: border-box;
	min-height: 90vh;
}

.cats.templateList li:hover .actionList {
  left: 180px;
  margin-top: -48px;
  margin-left: -15px;
}

td.bodyTd {
    width: 84vw;
    display: inline-block;
    box-sizing: border-box;
}

.contentDetailDiv {
    width: 100%;
    padding: 5px 25px;
    display: inline-block;
    box-sizing: border-box;
}

.contentDetailDiv div {
    width: 50%;
    display: inline-block;
    font-size: 1.5rem;
    color: #000000;
	margin-bottom: 5px;
}

.contentDetailDiv div label {
    width: 15%;
    display: inline-block;
}

.contentDetailDiv div input, .contentDetailDiv div select {
    width: 82%;
    font-size: 1.5rem;
    color: #000000;
    display: inline-block;
	padding: 5px;
	box-sizing: border-box;
}

.globalContentContainer {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    margin: 0px;
    margin-top: 10px;
    max-height: 70vh;
}

.buttCont {
    margin-top: 15px;
    display: inline-block;
    width: 90%;
    box-sizing: border-box;
    margin-left: 11px;
}

.templateArchiveCont {
    height: 444px;
    box-sizing: border-box;
}

.templateArchForm{
	height: 100%;
}

.tagContainer.templateOptions {
    overflow-y: auto;
    height: 500px;
    border: none;
    border-radius: 0px;
}

.archivePane {
    width: 52% !important;
    height: 100%;
    display: inline-block;
    overflow-y: auto;
}

ul.tabs.templateTabs {
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

ul.tabs.templateTabs li a, ul.tabs.templateTabs li.tab-title.active a {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 1.2rem !important;
    color: #777777 !important;
    border-radius: 0px !important;
	height: 3.5rem;
}

.tabs.templateTabs dd.active a, .tabs.templateTabs .tab-title.active a{
	background: #dddddd !important;
}

ul.tabs.templateTabs li.tab-title.active{
	border: none !important;
	border-right: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}	

.tabs-content.templateTabsContent {
    width: 99.8% !important;
    box-sizing: border-box;
    display: inline-block;
}

.templateOpt .dataRowSort td {
    color: #000000;
    background: #ffffff;
}

.templateOpt .dataRowSort td a.control-full {
    margin: 0px;
}

tr.dataRowSort:hover td {
    background-color: #E7DCD5;
}

tr.dataRowSort:hover td:hover {
    background-color: #F9F6F4;
}

.departmentSort th {
    text-align: center;
    padding: 10px;
    font-size: 1.3rem;
    color: #000000;
    background: #E7DCD5;
}

.contentDetailRow.rowFull {
    width: 100%;
}

.sortBlock {
    margin-top: 10px;
}

.singleButt{
	height: 58px !important;
}

#sortable, #sortable2{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}

#sortable li, #sortable2 li {
	height: 1.5em;
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.5rem;
    color: #000000;
    background: #ffffff;
    line-height: 2.5rem;
}
/* end website -> templates */

/*start dashboard */
.dashboardbg {
  background: none;
}

fieldset#dash_1 {
    width: 100%;
    display: inline-block;
    background: none;
    vertical-align: top;
    height: 100%;
    box-sizing: border-box;
}

legend.portlet-header {
    background: none;
}

.dashIconDiv {
	width: 16vw;
	margin: 1.5vw 1.5vw;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	background-color: #E7DCD5;
	height: 14vw;
	overflow: hidden;
}

.dashIconDiv a {
    background: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #FFFFFF;
}

.dashIconDiv a img {
	opacity: 1;
	width: 44%;
	min-width: 32px;
	margin: 30%;
	display: table;
	height: 44%;
}

label.dashText {
    position: absolute;
    bottom: 30px;
    text-align: center;
    display: inline-block;
    color: #000000;
    width: 100%;
    font-size: 1.1vw;
    font-weight: 300;
    opacity: 1;
}

.dashIconDiv span {
	opacity: 0;
	text-align: center;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	border-radius: 0;
	background: #CFBAAFD6;
	font-size: 1.3vw;
	padding-top: calc(38% - 0.75vw);
	margin: 0;
	box-sizing: border-box;
	height: 100%;
	vertical-align: middle;
	padding-bottom: calc(50% - 0.75vw);
	transition: all 0.5s;
	padding-left: 1vw;
	padding-right: 1vw;
	color: #000;
	font-weight: 100 !important;
}

.dashIconDiv:hover span {
    transition: all 0.25s;
    opacity: 1;
    top: 0;
}

.statsPane {
    display: flex;
    justify-content: space-around;
}

div.statDiv {
    width: 10vw;
    height: 10vw;
    background: #aeaeaeb3;
    margin: 1vw 0;
    border-radius: 10vw;
    line-height: 1vw;
    box-sizing: border-box;
    display: inline-block;
    box-shadow: 0 0.25vw 1.5vw #0000004d;
    border: 0.25vw solid #FFF6;
    position: relative;
}

.leftStat {
    background: #FFF;
    width: 3vw;
    height: 3vw;
    border-radius: 3vw;
    position: absolute;
    top: 0;
    left: -0.25vw;
    box-shadow: 0 5px 10px #0000004d;
}

.leftStat img {
    width: 1.75vw;
    top: 0.6vw;
    position: absolute;
    left: 0.5vw;
}

.rightStat {
    width: 7.5vw;
    top: 3vw;
    position: absolute;
    font-size: 1.5vw;
    padding: 0 1vw;
    left: 0;
}

.rightStat label {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.rightStat label.statNumber {
    margin-bottom: 0.5vw;
    font-size: 1.5vw;
}

.rightStat label.statText {
    font-size: 1.1vw;
    line-height: 1.25vw;
}

div#monthTotal {
    background: #d1fedb;
}

div#yearTotal {
    background: #f2eed3;
    border: 0.25vw solid #C3B488;
}

div#formTotal {
    background-color: #c6dee0;
    border: 0.25vw solid #9198a2;
}

div#newTotal {
    background: #edda8a;
    border: 0.25vw solid #CFB97A;
}

div#newUserTotal {
    background-color: #CCCCCC;
    border: 0.25vw solid #EEEEEE;
}

fieldset.dashboard {
    border: none;
    padding: 0px;
    width: 100%;
    background: none;
    text-align: center;
	margin-bottom: 60px;
}

fieldset.dashboard {
    border: none;
    padding: 0px;
    width: 100%;
    background: none;
    text-align: center;
}

.chart {
    height: 400px;
}

.chartPane {
    box-sizing: border-box;
}

.chart-1 {
    width: 32.7% !important;
    margin: 10px 5px 5px 5px!important;
    display: inline-block;
}

.chart-2 {
    width: 66% !important;
    margin: 10px 5px 5px 5px!important;
    display: inline-block;
}
/*end dashboard */
/*start global settings */
table.contentTable {
    width: 100%;
    position: relative;
    left: -25px;
}

table.contentTable tr {
    display: flex;
}

table.contentTable tr th, table.contentTable tr td {
    flex: 2;
}

table.contentTable tr th {
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
}

th.smallTd, td.smallTd {
    flex: 0.5 !important;
    text-align: left !important;
}

th.caName, td.caName {
    flex: 3 !important;
}

table.contentTable tr td .control-full {
    margin: 0px;
}

td.caName {
    flex: 3 !important;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.4rem;
    color: #000000;
}

td.selectTD.quad {
    flex: 3.4 !important;	
}

td.selectTD.quad textarea{
    width: 100% !important;	
    color: #000000;	
}

td.selectTD.extraWide {
    flex: 7.8 !important;
}

textarea#address {
    width: 99.6%;
}

input#cname_field {
    width: 99%;
    font-size: 1.5rem;
    color: #000000;
    margin-bottom: 15px;
}

textarea.gloabMarkup {
  width: 100%;
  margin-top: 10px;
  max-width: 800px;
}
/*end global settings */

/*start stylesheets and friends */
div#StyleEditor {
    display: inline-block;
    position: relative;
    z-index: 9;
    width: 100%;
    box-sizing: border-box;
	max-width: 1250px;
}

div#StyleEditor .tabs-content {
height: auto;
}

.pageSearchFilt {
    width: 100%;
    display: inline-block;
    margin-right: 30px;
}

label.styleSearchLabel {
    width: 10%;
    display: inline-block;
    font-size: 1.5rem;
}

input#styleSearchVal {
    margin-right: 4.8%;
    color: #000000;
}

a.styleFilter{
	display: inline-block;
	float: right;
    color: #000000;
    width: 15%;
    margin-left: 0px;
    cursor: pointer;
    padding: 0px 10px;
    padding-top: 5px;
    top: -8px;
    right: 2px;
    position: relative;
    box-sizing: border-box;
}

a.styleFilter:hover, a.orderFilter:hover {
    background: #a8e689;
}

.styleContentArea {
    width: 99.5%;
    height: 75vh;
}

div#StyleEditor #tabList {
    height: 60px;
}

div#StyleEditor ul li a, div#styleEditor .tabs .tab-title.active a {
    width: 100% !important;
    box-sizing: border-box;
    color: #000000 !important;
    background: #E7DCD5 !important;
    vertical-align: top;
    padding: 5px;
    font-size: 1rem !important;
}

div#StyleEditor ul#tabList li.tab-title.sideTab.active a, div#StyleEditor ul#tabList li.tab-title.sideTab:hover a {
    background: #E7DCD5;
    color: #dddddd !important;
}

div#tabDiv {
    background: #E7DCD5;
    padding: 10px;
    box-sizing: border-box;
    height: 63vh;
}

div#StyleEditor #tabDiv.tabs-content > .content.active {
    background: #ffffff !important;
    height: auto;
    box-sizing: border-box;
}

.tabBody {
    height: 92%;
    background: #ffffff;
}

#tabBody span.blockLineNotes {
    width: 95%;
    margin-bottom: 10px;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 26px;
    margin-right: 22px;
    vertical-align: top;
    margin-top: 0px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(27px);
  -ms-transform: translateX(27px);
  transform: translateX(27px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
    z-index: 9999;
}

.contentDetailRow.full-row {
    width: 100%;
    vertical-align: top;
}

.contentDetailRow.full-row label {
    width: 7.5%;
}

.contentDetailRow.full-row textarea {
    width: 90.6%;
    font-size: 1.5rem;
    color: #000000;
}

.sortWindow {
    width: 45% !important;
    border-radius: unset !important;
    border: none !important;
    margin-top: 10px;
    background: #eeeeee !important;
    vertical-align: top;
    box-sizing: border-box;
    padding-top: 10px;
}

.sortWindow label {
    width: 100%;
    font-size: 1.5rem;
    color: #000000;
}

table.departmentSort.styleSettingsTable {
    width: 98% !important;
    display: table;
}

td.styleTD label {
    width: 100%;
    font-size: 1.4rem;
    color: #000000;
}

tr.dataRowSort {
    background: none !important;
}

td.styleTD select {
    width: 100%;
}

textarea.compAddress {
    color: #000000;
    width: 100%;
    box-sizing: border-box;
    height: 100px;
    padding: 5px;
}

select.compLogo {
    width: 73% !important;
}

select.hourSel, select.minSel {
    width: 46.9% !important;
    margin: 0px;
}

select.hourSel {
    margin-right: 10px;
}

select.minSel {
    margin-left: 10px;
}

textarea.compNotes {
    width: 100%;
    padding: 5px;
    color: #777;
    box-sizing: border-box;
    height: 100px;
}

.seoPage.bodyHide {
    height: 84vh;
}

.seoPage.bodyFade {
    animation: fadeIn ease 3s;
    height: 84vh;
}

table.departmentSort.seoFeedbackTable {
    background: #ffffff;
}

.dataRowSort td {
    color: #000000;
}

.addScroll {
  height: 92%;
  overflow-y: auto;
  width: 98%;
  background: white;
}

table.departmentSort.seoSettingsTable.topTable th {
    text-align: left;
    padding: 5px;
    font-size: 1.2rem;
    color: #000000;
    background: #E7DCD5;
    font-weight: 300;
    height: 3.7rem;
	padding-left: 20px;
	border-left: 2px solid #ffffff;
}

table.departmentSort.seoSettingsTable.tableBody tr:first-of-type {
    background-color: #ffffff !important;
}

table.departmentSort.seoSettingsTable.tableBody td input[type="text"] {
    font-size: 1.2rem;
    color: #000000;
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
}

table.departmentSort.seoSettingsTable.tableBody td textarea {
    font-size: 1.2rem;
    padding: 5px;
    box-sizing: border-box;
    color: #000000;
    height: 100px;
}

table.departmentSort.seoSettingsTable.tableBody tr.dataRowSort {
    display: flex;
    height: 110px;
}

table#audit {
  width: 90%;
  margin-top: 20px;
  background: #fff;
}

table#audit tr th, table#audit tr td {
    padding: 5px;
    font-size: 1rem;
    color: #000000;
    overflow: auto;
}

table#audit tr th {
    text-align: left;
    background: #E7DCD5;
}

table#audit tr:hover td {
    background: #777777;
    color: #ffffff;
}

th.f025, td.f025 {
    flex: 0.25 !important;
}

th.f05, td.f05 {
    flex: 0.5 !important;
}

th.f075, td.f075 {
    flex: 0.75 !important;
}

th.f1, td.f1 {
    flex: 1 !important;
}

th.f2, td.f2 {
    flex: 2 !important;
}

th.f25, td.f25 {
    flex: 2.5 !important;
}

th.f3, td.f3 {
    flex: 3 !important;
}

th.f4, td.f4 {
    flex: 4 !important;
}

th.f5, td.f5 {
    flex: 5 !important;
}

th.f6, td.f6 {
    flex: 6.1 !important;
}

th.tcent, td.tcent{
	text-align: center;
}

div#auditNavBlock {
    margin-top: -10px;
}

.auditNavPages {
    padding: 5px;
    margin-bottom: 0px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
}

.auditNavPages a, .auditNavPages span {
    font-size: 1.5rem;
    color: #000000;
    padding: 5px;
    box-sizing: border-box;
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.auditNavPages a:hover {
    font-weight: 600;
    background: #777777;
    color: #dddddd;
}

span.content_selected {
  background: #E7DCD5;
  border: 1px solid #777777;
  padding: 6px;
  margin-right: 4px;
  margin-left: 4px;
}

div#mainCont {
    overflow-y: auto;
    height: 78vh;
}

.auditLable{
	width: 25% !important;
}

select#au {
    padding: 5px;
    font-size: 1.5rem;
    width: 75%;
    box-sizing: border-box;
    color: #000000;
}
/* end region */

/* ecomms templates */
.contentDetailRow.third {
    width: 33.3%;
}

.contentDetailRow.third label {
    width: 22.4%;
}

.contentDetailRow.third select {
    width: 71.6%;
}

.flyoutCont {
    width: 90%;
    box-sizing: border-box;
    display: inline-block;
    background: #E7DCD5;
    margin-left: 15px;
    margin-top: 10px;
}

.flyoutContRow {
    width: 100%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
}

.flyoutContRow label {
    width: 100%;
    font-size: 1.5rem;
    color: #000000;
    display: inline-block;
    padding: 5px 0px 0px 10px;
}

.flyoutContRow select {
    display: inline-block;
    width: 93%;
    padding: 5px;
    box-sizing: border-box;
}

.floatButtonContainer.prodTempUp {
    height: 380px;
}

.departmentSort.furnTags {
  width: 85% !important;
  margin-bottom: 100px;
  background: #fff;
}

table.departmentSort.furnTags tr {
}

table.departmentSort.furnTags tr td, table.departmentSort.furnTags tr th {
    flex: 1;
}

td.descTag {
    overflow: auto;
}

.prodTagContainer {
    height: 85vh;
    overflow: auto;
}

.floatButtonContainer.twoButt {
    height: 100px;
}
/*end region */

table#pageDetailsTable tr td input::placeholder, .pageDetailsTable tr td select, .pageDetailsTable tr td input::placeholder{
	color: #bbbbbb;
}

.half_w {
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
	vertical-align: top;
}

.full_w {
    width: 100%;
    box-sizing: border-box;
}

.half_w a.control {
    width: 32%;
    margin-bottom: 5px;
}

textarea.full_w {
    padding: 5px;
    font-size: 1.5rem;
    box-sizing: border-box;
    color: #000000;
}

.cke_toolbox {
    width: 100% !important;
}

.cke_skin_kama .cke_break {
    display: none;
}

.se-wrapper .CodeMirror {
    height: 55vh !important;
}

.selectTD textarea {
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #777;
    width: 100%;
}

.smFnt {
    font-size: 1.2rem !important;
    line-height: 1.4rem;
}

.blockLineNotes.mainNote {
    font-size: 1.5rem;
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.filterContainer {
    width: 100%;
    height: 67vh;
    overflow-y: auto;
}

.readonly {
    background: #E7DCD5;
    border: none;
    cursor: initial;
    pointer-events: none;
}

#catSearchVal {
	font-size: 1.5rem;
	width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
}

a.orderFilter{
    display: inline-block;
    color: #000000;
    width: 45px;
    margin-left: 0px;
    cursor: pointer;
    padding: 0px 10px;
    padding-top: 5px;
    top: 80px;
    left: 110px;
    position: absolute;
    box-sizing: border-box;
}

tr.orderRow:hover td {
    background: #E7DCD5;
}

tr.orderRow.cancel td {
    background: #e68989;
}

tr.orderRow.cancel td.sitRight, tr.orderRow.cancel td.sitRight a {
    color: #7b4747 !important;
}

td.sitRight.f2.underPay {
    color: #e68989 !important;
}

tr.orderRow:hover td.sitRight.f2.underPay {
    color: #7b4747 !important;
}

td.sitRight.f2.payed {
    color: #a8e689 !important;
}

tr.orderRow:hover td.sitRight.f2.payed {
    color: #597b47 !important;
}

span.note {
    margin-top: -5px;
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

tr.actions.hideActions {
    max-height: 0px;
	transition: max-height 0.3s linear;
	overflow: hidden;
}

tr.actions.showActions {
    max-height: 40px;
	transition: max-height 0.3s linear;
	overflow: hidden;
}

.actions td {
    background: #E7DCD5;
}

.actions.showActions {
    border: 1px solid #bbbbbb;
    border-top: 0px;
}

.hiddenField {
    display: none;
}

h2 {
    font-size: 1.5rem !important;
}

.overDiv, .floatDiv {
    height: 55vh;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
}

.floatDiv{
    height: 92vh !important;	
}

.visQuestions{
	height: 50vh;
	overflow: auto;
}

.visQuestions h4 {
    padding-bottom: 1em !important;
}

.contentDetailDiv.accHeaderDiv {
    padding: 5px 0px;
    width: 98%;
}

.ui-state-active label {
    color: #dddddd !important;
}

.ui-accordion-header:hover label {
    color: #dddddd !important;
}

.w33{
	width: 33% !important;
}

.cmsTextareaBox {
    width: 81%;
    margin-left: 9px;
    height: 10vh;
    box-sizing: border-box;
    display: inline-block;
    font-size: 1.5rem;
    padding: 5px;
    color: #000000;
}

input.cmsNameBox.standAlone {
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #000000;
}

.editorBlock {
    height: 50vh;
    overflow-y: auto;
}

.contentDetailDiv div#themeSelect {
    width: 100%;
    box-sizing: border-box;
}

table#formResponses {
    width: 100%;
}

table#formResponses tr td, table#formResponses tr th {
    flex: 1;
}

table#formResponses tr th {
    text-align: left;
    font-size: 1.3rem;
    padding: 5px;
    box-sizing: border-box;
    background: #E7DCD5;
    color: #000000;
}

table#formResponses tr td {
    text-align: left;
    font-size: 1.3rem;
    padding: 5px;
    box-sizing: border-box;
    color: #000000;
}

table#formResponses tr:hover td {
    background: #E7DCD5;
    color: #000000;
}

.mapSettingContainer p {
  margin-top: 20px;
  padding-left: 20px;
  font-size: 1.4rem !important;
}

.imageRow {
    display: inline-block;
    width: 100%;
    height: 20vh;
    box-sizing: border-box;
	text-align: center;
}

.imageRow img{
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
}

.visualBlock {
    display: inline-block;
    width: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
    border: 1px solid #efefef;
    background: #f9f9f9;
    margin-bottom: 10px;
}

.visualBlock h2 {
    border: unset !important;
    padding: 5px 10px !important;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    line-height: 3rem;
    height: 4rem;
    color: #000000;
    background: #f1f1f1 !important;
    font-weight: bold;
}

h3.notComplete {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #a26f22 !important;
    background: #f1bc6e !important;
    color: #a26f22;
    text-align: center;
    margin-bottom: 10px;
}

table#question_table {
    width: 100%;
}

table#question_table tr {
    display: flex;
}

table#question_table tr td {
    flex: 1;
    font-size: 1.5rem;
    color: #000000;
    padding: 5px;
    box-sizing: border-box;
}

table#question_table tr td input, table#question_table tr td select {
    width: 100%;
    color: #000000;
    box-sizing: border-box;
}

table#question_table tr td a{
	margin: 0px !important;
}

.detailsDiv.topDiv {
    height: 9%;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.detailsDiv.bottomDiv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    box-sizing: border-box;
    max-height: 86%;
    overflow-y: auto;
}

.imgDisBlock {
    flex-basis: 25%;
    padding: 10px;
    box-sizing: border-box;
    max-width: 25%;
}

.imgDisBlock img {
    width: 100%;
}

.imgDisBlock:hover {
    background: #f8f9a6;
    cursor: pointer;
}

.imgDisBlock span {
    font-size: 1.2rem;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    color: #000000;
    width: 100%;
    font-weight: bold;
	overflow: hidden;
}

div#imgPagination {
    display: flex;
    margin-top: 10px;
    box-sizing: border-box;
}

div#imgPagination div {
    flex: 1;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
}

div#imgPagination div a, div#imgPagination div span {
    background: #a8e689;
    text-align: center;
    width: 100%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #6b7b47;
}

div#imgPagination div a:hover {
    background: #6b7b47;
    color: #a8e689;
    cursor: pointer;
}

div#imgPagination div span {
    background: #5f9fb7;
    color: #94d0fb;
}

.topDiv.searchPane {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.topDiv.searchPane input#imgSearch {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    font-size: 1.5rem;
    color: #000000;
}

.buttonCont {
    width: 100%;
    display: inline-block;
    padding: 10px 5px;
    box-sizing: border-box;
}

.buttonCont .control {
    width: 49%;
    margin: unset;
}

.buttonCont .control:first-of-type {
    margin-right: 2%;
}

span.subHeader {
    width: 100%;
    background: #E7DCD5;
    display: inline-block;
    padding: 5px;
}

span.errorNotice {
    display: inline-block;
    width: 100%;
    background: #e68989;
    color: #7b4749;
    font-size: 1.8rem;
    padding: 5px;
}

td.selectTD.tderror, td.sitRight.tderror {
    border: 1px solid #e68989;
}

td.sitRight.tderror {
    border-right: unset;
}

td.selectTD.tderror {
    border-left: unset;
}

select.selError {
    background: #e68989;
    color: #7b4749;
}

span.infoSpan {
    display: inline-block;
    width: 100%;
    background: #d2effd;
    min-height: 2.5rem;
    box-sizing: border-box;
    padding: 5px;
}


/* Form table styles */
.form-section td {
  padding: 4px 20px;
  border: 1px solid #bbb; /* Added border color */
}

.form-section {
  background: #fff;
  border: 1px solid #bbb; /* Added border color */
}

.form-section th {
  padding: 10px 20px !important;
  border: 1px solid #bbb; /* Added border color */
}



/* Hide Dashboard Sub menu*/
.menu2 li.nav-dashboard ul {display: none;}
.menu2 li.nav-dashboard a::after {display: none;}
/* End of Hide Dashboard Sub menu*/



.menu2 li ul ul.templateMenuList {
  width: 239px !important;
  line-height: 30px;
  padding: 0px 6px !important;
  border-radius: 3px !important;
  color: white !important;
  height: 30px;
}


.menu2 li ul ul.templateMenuList:hover {
  width: 239px !important;
  background: #2628ff !important;
  line-height: 30px;
  padding: 0px 6px !important;
  border-radius: 3px !important;
  color: #ffffff!important;
  height: 30px;
}

.menu2 li ul ul.templateMenuList a:hover {
  color: #ffffff !important;
  width: 236px;
}

/* When hovering over the template menu itself */
.templateMenuList:hover a {
  color: #ffffff !important;
}

.dashboard .menu2 li a {
	border: 0px !important;
}

.dashboard legend {background: unset;}

.dashboard legend {
	width: 98.5% !important;
}

.dashboard a:hover {
	color: #22a2e1;
}


.dashboard .menu2 li a svg {
   width: 120px;
   transition: all 0.25s ease-in-out 0s;
   transform: scale(0.9);
}

.dashboard .menu2 li a svg:hover {
	transition: all 0.25s ease-in-out 0s;
	transform: scale(0.7);
}

.dashboard .menu2 li {
	width: 24%;
	padding-bottom: 30px;
	border: 0px !important;
	padding-top: 30px;
	margin-right: 0.5%;
	background: none;
	display: block;
	text-align: center;
	margin-left: 0.5%;
	margin-top: 3%;
}

.dashboard .menu2 li a {
  font-size: 1.8rem !important;
  display: inline-block !important;
  background: #ffffffa3;
  border-radius: 20px;
}


.bluetop a span {
  background:#a840f0;
  color: #fff;
  border-radius:20px;
  font-size: 1.4rem;
  padding:5px 16px;
  margin-top: 4px !important;
  display: block;
}

.bluetop a span:hover {
  background:#8924ce;
}

.dashboard .menu2 li.bluetop a svg {
width: 50px !important;
}

.dashboard .menu2 li a svg {
width: 50px !important;
}

.dashboard .topLink:after, .icon span:after{
	display: none!important;
}

.dashboard .bluetop {background: #none!important;}
.dashboard .interface a:hover {color: #ffffff;}



/*------------------Small Laptop------------------*/
@media only screen and (min-width: 64em) and (max-width: 1200px) {
.container {margin-top: 94px!important;}	
	
fieldset.dashboard {margin-bottom: 96px;}
	
}


/*--------------------Tablet------------------*/
@media only screen and (min-width: 0) and (max-width: 64em) {
	
.dashboard .menu2 li {
	width: 49%;
	height: 90px;
}

.container {
	margin-top: 300px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.41);
	height: 73% !important;
}
	
.menu2 li {
	width: 25%;
	position: unset;
}
	
.topLink {height: 72px;}

.menu2 li ul {
	z-index: unset;
	width: 600%;
}
	
.dashboard .menu2 li a svg {
	width: 60px;
}

.dashboard .menu2 li a {
	font-size: 1.4rem !important;
}

.container {
	margin-top: 300px;
}

.dashboard legend {
	width: 102%!important;
	padding: 0rem;
}
	
.dashIconDiv {
	width: 43vw;
	height: 43vw;
}
	

.dashIconDiv span {font-size: 5vw;}

fieldset.dashboard {width: 100%; margin-bottom: 90px;}
fieldset.dashboard.main {width: 98%;}
	
	

	
.updateBarBottom {
	bottom: 11px !important;
	right: unset;
	z-index: 999;
	height: 44px;
	text-align: center;
	width: 100%;
}
	
.topLink::after, .icon span::after {
display: none;
}
	
.topLinkActive::after {
display: none;
}

.termsMessage {color: #fff;}

.menu2 li ul {border-radius: 0px;}

	
}


/*--------------------Mobile------------------*/
@media only screen and (min-width: 0) and (max-width: 40em) {
.container {height: 73% !important;}

.updateBarBottom img {margin-left: 0px!important;}

fieldset.dashboard {margin-bottom: 110px;}

}

/* ---- Relinker Module ---- */
.relinker-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.relinker-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    flex-wrap: wrap;
}
.relinker-card-label {
    color: #6b7280;
    font-weight: 600;
    min-width: 80px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.relinker-card-value {
    font-family: monospace;
    font-size: 13px;
    color: #111;
    word-break: break-all;
}
.relinker-arrow {
    color: #282aff;
    font-size: 18px;
    font-weight: bold;
    padding: 0 4px;
}
.relinker-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}
.relinker-badge.active   { background: #d1fae5; color: #065f46; }
.relinker-badge.inactive { background: #fee2e2; color: #991b1b; }
.relinker-hits {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
}
.relinker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.relinker-actions a.NewUpdateButton {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #fff !important;
    background: #282aff;
    cursor: pointer;
    border: none;
}
.relinker-actions a.NewUpdateButton:hover { background: #0002d3; }
.relinker-actions a.NewUpdateButton.Red   { background: #cf3737; }
.relinker-actions a.NewUpdateButton.Red:hover { background: #a81e1e; }
.relinker-actions a.NewUpdateButton.Green { background: #059669; }
.relinker-actions a.NewUpdateButton.Green:hover { background: #047857; }
.relinker-actions a.NewUpdateButton.Grey  { background: #6b7280; }
.relinker-actions a.NewUpdateButton.Grey:hover  { background: #4b5563; }
.relinker-field {
    margin-bottom: 14px;
}
.relinker-field label {
    display: block;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: 5px;
}
.relinker-field input[type=text],
.relinker-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.relinker-field input[type=text]:focus,
.relinker-field select:focus {
    outline: none;
    border-color: #282aff;
    box-shadow: 0 0 0 2px rgba(40,42,255,.15);
}
.relinker-sidebar-meta {
    float: right;
    font-size: 10px;
    color: #9ca3af;
}
.relinker-sidebar-dot {
    font-size: 16px;
    margin-right: 6px;
    vertical-align: middle;
    line-height: 1;
}
.relinker-sidebar-dot.on  { color: #10b981; }
.relinker-sidebar-dot.off { color: #ef4444; }
/* =====================================================================
   PRODUCT BROWSER — Edit Product Form
   ===================================================================== */

/* Edit bar shown above the read-only detail view */
.pb-edit-bar {
	padding: 6px 8px 4px;
	text-align: right;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 8px;
}

.pb-add-inline-btn {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: none;
	border: 1.5px solid #8462f4;
	border-radius: 9999px;
	color: #8462f4;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	padding: 1px 8px;
	margin-left: 5px;
	transition: background 0.15s, color 0.15s;
	vertical-align: middle;
}
.pb-add-inline-btn:hover {
	background: #8462f4;
	color: #fff;
	text-decoration: none;
}

.pb-add-inline-wrap {
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 6px 8px;
	background: #f4f0ff;
	border: 1.5px solid #d0c8f8;
	border-radius: 8px;
	margin-top: 4px;
	animation: pbFadeIn 0.15s ease;
}
@keyframes pbFadeIn {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pb-add-inline-input {
	flex: 1;
	padding: 4px 8px;
	font-size: 12px;
	border: 1.5px solid #c4b8f5;
	border-radius: 6px;
	background: #fff;
	color: #222;
	outline: none;
	transition: border-color 0.15s;
}
.pb-add-inline-input:focus { border-color: #8462f4; }
.pb-add-inline-save {
	background: linear-gradient(135deg, #8462f4, #5f37e7);
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
	white-space: nowrap;
}
.pb-add-inline-save:hover { opacity: 0.88; }
.pb-add-inline-save:active { transform: scale(0.97); }
.pb-add-inline-cancel {
	background: none;
	color: #888;
	border: 1.5px solid #ccc;
	border-radius: 9999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
	white-space: nowrap;
}
.pb-add-inline-cancel:hover { border-color: #999; color: #555; }

/* ── Taxonomy image trigger button ── */
.pb-img-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f0f2ff;
	border: 1px solid #c5c8ff;
	border-radius: 4px;
	color: #282aff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 2px 6px;
	margin-left: 4px;
	vertical-align: middle;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pb-img-btn:hover {
	background: #282aff;
	border-color: #282aff;
	color: #fff;
}

/* ── Taxonomy image panel ── */
.pb-tax-img-wrap {
	display: none;
	flex-direction: column;
	margin-top: 6px;
	background: #fff;
	border: 1px solid #e2e5ea;
	border-left: 3px solid #282aff;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
	animation: pbTaxFadeIn 0.15s ease;
}
@keyframes pbTaxFadeIn {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pb-tax-img-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	background: #f8f9ff;
	border-bottom: 1px solid #e8eaf5;
}
.pb-tax-img-title {
	font-size: 10px;
	font-weight: 700;
	color: #282aff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.pb-tax-img-close {
	background: none;
	border: none;
	color: #9ca3af;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
	transition: color 0.15s;
}
.pb-tax-img-close:hover { color: #111; }
.pb-tax-img-body {
	display: flex;
	gap: 10px;
	padding: 10px;
	align-items: flex-start;
}
.pb-tax-img-preview {
	width: 68px;
	height: 68px;
	border: 2px dashed #dde0e6;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9fafb;
	flex-shrink: 0;
	transition: border-color 0.2s;
}
.pb-tax-img-preview.has-image {
	border-style: solid;
	border-color: #282aff;
}
.pb-tax-thumb {
	max-width: 68px;
	max-height: 68px;
	object-fit: contain;
}
.pb-no-img {
	font-size: 9px;
	color: #c0c4cc;
	text-align: center;
	line-height: 1.4;
}
.pb-tax-img-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}
.pb-tax-drop-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 6px;
	border: 2px dashed #dde0e6;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	background: #f9fafb;
	text-align: center;
}
.pb-tax-drop-zone:hover {
	border-color: #282aff;
	background: #f0f2ff;
}
.pb-tax-drop-zone:hover .pb-tax-drop-icon { transform: translateY(-2px); }
.pb-tax-drop-zone input[type="file"] { display: none; }
.pb-tax-drop-icon {
	font-size: 18px;
	color: #9ca3af;
	transition: transform 0.15s, color 0.15s;
}
.pb-tax-drop-zone:hover .pb-tax-drop-icon { color: #282aff; }
.pb-tax-drop-text {
	font-size: 10px;
	color: #6b7280;
	font-weight: 600;
}
.pb-tax-file-name {
	font-size: 9px;
	color: #282aff;
	font-weight: 700;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pb-tax-img-actions {
	display: flex;
	align-items: center;
	gap: 7px;
}
.pb-tax-upload-btn {
	flex: 1;
	background: #282aff;
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	letter-spacing: 0.2px;
}
.pb-tax-upload-btn:hover { background: #0a0bbd; }
.pb-tax-upload-btn:active { transform: scale(0.97); }
.pb-tax-upload-btn:disabled { opacity: 0.45; cursor: default; }
.pb-tax-saved-msg {
	font-size: 10px;
	color: #22c55e;
	font-weight: 700;
	white-space: nowrap;
}

.pb-edit-btn {
	background: #2980b9;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 5px 14px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s;
}
.pb-edit-btn:hover { background: #1f6391; }

/* ── Outer wrapper ── */
.pb-edit-form-wrap {
	padding: 14px 16px 16px;
	background: #f3f4f6;
}
.pb-edit-form-wrap form { margin: 0; }

/* ── Toast ── */
.pb-toast {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 99999;
	padding: 10px 20px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: none;
}
.pb-toast-show { opacity: 1; transform: translateY(0); }
.pb-toast-success { background: #16a34a; }
.pb-toast-error   { background: #dc2626; }

/* ── Section cards ── */
.pb-ef-section {
	margin-bottom: 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
}

.pb-ef-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #374151;
	padding: 9px 14px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}
.pb-ef-title::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 13px;
	background: #282aff;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ── Rows and fields ── */
.pb-ef-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px 14px;
}

.pb-ef-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 140px;
	min-width: 0;
}

.pb-ef-field label {
	font-size: 10px;
	color: #6b7280;
	margin-bottom: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}

/* Taxonomy filter label (div instead of label to isolate button hovers) */
.pb-ef-label {
	font-size: 10px;
	color: #6b7280;
	margin-bottom: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

/* ── Filter row: vertical stack with gaps ── */
.pb-filter-row {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	padding: 10px 14px 12px;
}
.pb-filter-row .pb-ef-field {
	flex: none;
	padding: 5px 0;
	border-bottom: 1px solid #f0f1f3;
	min-width: 0;
}
.pb-filter-row .pb-ef-field:first-child { padding-top: 0; }
.pb-filter-row .pb-ef-field:last-child  { border-bottom: none; padding-bottom: 0; }

/* ── Checkboxes ── */
.pb-ef-flags {
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 10px 14px 12px;
}

.pb-cb-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #374151;
	cursor: pointer;
	white-space: nowrap;
}

.pb-cb-label input[type="checkbox"] {
	margin: 0;
	accent-color: #282aff;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

/* ── Inputs / Selects / Textareas ── */
.pb-input, .pb-select, .pb-textarea {
	width: 100%;
	border: 1.5px solid #e5e7eb;
	border-radius: 7px;
	padding: 6px 10px;
	font-size: 12px;
	color: #111827;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pb-input:focus, .pb-select:focus, .pb-textarea:focus {
	border-color: #282aff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(40,42,255,0.08);
}
.pb-select { cursor: pointer; }
.pb-textarea { min-height: 120px; resize: vertical; }
.pb-textarea-sm { min-height: 46px; }
.pb-input-sm { max-width: 160px; }

/* ── Form action bar ── */
.pb-ef-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 12px 16px;
	border-top: 1px solid #f3f4f6;
	background: #fff;
}

.pb-save-btn {
	background: #16a34a;
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: 8px 24px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.2px;
	transition: background 0.15s, transform 0.1s;
}
.pb-save-btn:hover { background: #15803d; }
.pb-save-btn:active { transform: scale(0.97); }
.pb-save-btn:disabled { opacity: 0.45; cursor: default; }

.pb-cancel-btn {
	background: none;
	color: #6b7280;
	border: 1.5px solid #d1d5db;
	border-radius: 9999px;
	padding: 6px 18px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.pb-cancel-btn:hover { border-color: #9ca3af; color: #374151; }

/* ── Custom tabs (replaces Foundation tabs) ── */
.pb-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	background: #f9fafb;
	border-bottom: 2px solid #e5e7eb;
	padding: 0 8px;
	overflow-x: auto;
}
.pb-tab-btn {
	flex: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	color: #9ca3af;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 12px 9px;
	cursor: pointer;
	transition: color 0.15s;
	white-space: nowrap;
}
.pb-tab-btn:hover { color: #374151; }
.pb-tab-btn.pb-tab-active { color: #282aff; border-bottom-color: #282aff; }
.pb-tabs-body { background: #fff; }
.pb-tab-panel { display: none; }
.pb-tab-panel.pb-tab-panel-active { display: block; }
.pb-desc-row { flex-wrap: nowrap; }
.pb-desc-field { flex: 1 1 0% !important; min-width: 0; }

/* =====================================================================
   PRODUCT DETAILS VIEW
   ===================================================================== */

.pd-wrap { padding: 16px; background: #f3f4f6; }

.pd-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 14px;
}
.pd-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 18px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	letter-spacing: 0.2px;
	transition: opacity 0.15s, transform 0.1s;
}
.pd-action-btn:active { transform: scale(0.97); }
.pd-edit-btn { background: #282aff; color: #fff; }
.pd-edit-btn:hover { opacity: 0.88; }
.pd-img-btn-act { background: #374151; color: #fff; }
.pd-img-btn-act:hover { opacity: 0.88; }

.pd-layout {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 12px;
}
.pd-left {
	width: 200px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pd-right {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pd-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
}
.pd-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #374151;
	padding: 8px 14px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}
.pd-card-title::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 13px;
	background: #282aff;
	border-radius: 2px;
	flex-shrink: 0;
}

.pd-img-wrap {
	padding: 12px;
	text-align: center;
}
.pd-img-wrap img {
	max-width: 100%;
	max-height: 160px;
	object-fit: contain;
	border-radius: 6px;
	display: block;
	margin: 0 auto;
}
.pd-img-footer { padding: 0 10px 10px; }
.pd-img-select {
	width: 100%;
	font-size: 11px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 4px 8px;
	background: #f9fafb;
	color: #374151;
}

.pd-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 10px 14px 12px;
	gap: 8px 16px;
}
.pd-grid-1col { grid-template-columns: 1fr; }
.pd-grid-3col { grid-template-columns: 1fr 1fr 1fr; }
.pd-field-full { grid-column: 1 / -1; }

.pd-field { display: flex; flex-direction: column; gap: 1px; }
.pd-field-label {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9ca3af;
}
.pd-field-value {
	font-size: 12px;
	color: #111827;
	font-weight: 500;
	word-break: break-word;
}
.pd-name { font-size: 13px; font-weight: 700; }

.pd-warn .pd-field-label,
.pd-warn .pd-field-value { color: #d97706; }
.pd-alert .pd-field-label,
.pd-alert .pd-field-value { color: #dc2626; }
.pd-empty .pd-field-label { color: #d1d5db; }
.pd-empty .pd-field-value { color: #d1d5db; font-style: italic; font-size: 11px; }

.pd-text-val {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 11px;
	line-height: 1.5;
	min-height: 50px;
	max-height: 140px;
	overflow-y: auto;
	white-space: pre-wrap;
}

.pd-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 14px 12px;
}
.pd-flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 700;
}
.pd-flag-yes  { background: #dcfce7; color: #16a34a; }
.pd-flag-no   { background: #f3f4f6; color: #9ca3af; }
.pd-flag-warn { background: #fef3c7; color: #d97706; }

.pd-link { color: #282aff; text-decoration: none; }
.pd-link:hover { text-decoration: underline; }

.pd-section-divider {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	padding: 8px 14px 2px;
	border-top: 1px solid #f3f4f6;
}

.pd-tabs-card { margin-top: 0; }

/* =====================================================================
   PRODUCT IMAGE EDITOR
   ===================================================================== */

.pb-img-editor { padding: 6px 10px 10px; }

.pb-img-dropzone {
	border: 2px dashed #b0bec5;
	border-radius: 6px;
	padding: 24px 12px;
	text-align: center;
	cursor: pointer;
	background: #f5f7f9;
	transition: border-color 0.15s, background 0.15s;
}
.pb-img-dropzone:hover,
.pb-img-dz-over { border-color: #2980b9; background: #eaf4fb; }
.pb-img-dz-hint { color: #777; font-size: 13px; }

.pb-img-preview-grid {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.pb-img-preview-item {
	width: 80px; height: 80px;
	border-radius: 4px;
	background: #ddd center/cover no-repeat;
	position: relative;
	border: 1px solid #ccc;
}
.pb-img-preview-name {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	background: rgba(0,0,0,0.55);
	color: #fff; font-size: 9px;
	padding: 2px 3px;
	border-radius: 0 0 4px 4px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pb-img-grid { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.pb-img-item {
	position: relative;
	width: 120px;
	border-radius: 4px;
	border: 2px solid #dce3ea;
	background: #f5f5f5;
	overflow: hidden;
}
.pb-img-item.pb-img-default { border-color: #27ae60; }
.pb-img-thumb {
	display: block; width: 120px; height: 120px;
	object-fit: contain; background: #fff;
}
.pb-img-badge {
	position: absolute; top: 4px; left: 4px;
	background: #27ae60; color: #fff;
	font-size: 9px; font-weight: 700; text-transform: uppercase;
	padding: 2px 5px; border-radius: 3px;
}
.pb-img-name {
	font-size: 9px; color: #555;
	padding: 3px 4px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	background: #f0f0f0; border-top: 1px solid #e0e0e0;
}
.pb-img-actions {
	display: flex; gap: 4px; justify-content: center;
	padding: 4px; background: #f9f9f9; border-top: 1px solid #e8e8e8;
}
.pb-img-act {
	width: 26px; height: 26px;
	border: none; border-radius: 50%;
	cursor: pointer; font-size: 13px; line-height: 1;
	transition: opacity 0.15s;
}
.pb-img-act:hover { opacity: 0.8; }
.pb-img-act-default { background: #f39c12; color: #fff; }
.pb-img-act-delete  { background: #e74c3c; color: #fff; }
.pb-img-none { color: #999; font-size: 13px; padding: 8px 0; }

/* =====================================================================
   PRODUCT BROWSER — alignment & modern UI
   ===================================================================== */

/* Checkbox column: fixed width so header and body rows stay in sync */
td.cbTd, th.cbTd {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 5px 8px !important;
    text-align: center !important;
}

/* H / W / D columns: fixed narrow width so they can't vary */
td.halfTd, th.halfTd {
    flex: 0 0 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    text-align: center !important;
    padding: 5px 4px !important;
}

/* Override broad flex:2 rule for prodListHead that breaks alignment */
table#prodListHead th {
    flex: 1 !important;
}
table#prodListHead th.cbTd  { flex: 0 0 38px !important; }
table#prodListHead th.halfTd{ flex: 0 0 52px !important; }
table#prodListHead th.codeTd{ flex: 1.25 !important; }
table#prodListHead th.nameTd{ flex: 3 !important; }

/* Ensure prodList rows match the same flex columns */
table#prodList td { flex: 1; }

/* ---- L2/L3 mode toggle pill buttons ---- */
.pb-mode-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 2px solid #2563eb;
    background: #fff;
    color: #2563eb;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    line-height: 1.4;
    margin: 0;
}
.pb-mode-btn:hover {
    background: #dbeafe;
    box-shadow: 0 1px 4px rgba(37,99,235,0.18);
}
.pb-mode-btn.pb-mode-active {
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(37,99,235,0.28);
}

/* ---- Bulk action bar ---- */
#pb-bulk-bar {
    background: #f0f7ff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 7px 10px !important;
}
#pb-bulk-bar select,
#pb-bulk-bar button {
    font-size: 1.1rem;
}
#pb-bulk-apply,
#pb-bulk-move-apply {
    border-radius: 4px;
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 5px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
#pb-bulk-apply:hover,
#pb-bulk-move-apply:hover  { background: #1d4ed8; }
#pb-bulk-apply:disabled,
#pb-bulk-move-apply:disabled { background: #93c5fd; cursor: default; }

/* Bulk-count badge */
#pb-bulk-count {
    background: #2563eb;
    color: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 1.1rem;
    white-space: nowrap;
}

/* Reset button */
input#specification {
    border-radius: 4px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 5px 14px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.12s;
}
input#specification:hover { background: #e5e7eb; }