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

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

.container {
    overflow: auto;
    height: 100%;
    width: 100vw;
}

.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: 60px;
    float: right;
    padding: 5px 8px 5px 8px;
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: black;
    border-left: 1px solid #bbb;
    text-shadow: none;
    text-align: center;
    box-sizing: border-box;
}

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: black;
}

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*/

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

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

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

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

div#productDetailsDiv {
	height: 100%;
}

.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%;
}

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

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

table#prodList tr:hover td {
	background: #eee;
	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;
}

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

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

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

.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;
}

li.tab-title.active {
	z-index: 999;
	border: 1px 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: #eee;
}

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;
	background: #ddd;
}

.filterDiv select {
	width: 79%;
	float: right;
	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: right;
	width: 78%;
}

/* 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;
}

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

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

/* furniture group */

div#fGroupTop {
	padding: 10px;
	background: #eee;
	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: #3e3e3e;
	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: #ddd;
	height: 25vh;
	border: 1px 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: 5px;
	box-sizing: border-box;
	margin-top: 25px;
	background: #bbb;
}

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: #eee;
	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: #204b40 !important;
	background: #0ea4e1;
	line-height: 1.75rem;
	border-radius: 0;
}

.furnGroup a.button.addButton:hover {
	color: #0ea4e1 !important;
	background: #204b40;
}

.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: #0ea4e1;
	color: #204b40 !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: #204b40;
	color: #0ea4e1 !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: #eee;
	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: 32%;
    display: inline-block;
    margin-right: 30px;
}

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;
    width: 48% !important;
    box-sizing: border-box;
    font-size: 1.5rem;
    line-height: 1.5rem;
    background-color: #8bc4e0;
    border: none;
    padding: 5px;
    border-radius: 0px;
    margin-right: 15px;
    color: #126b96 !important;
    cursor: pointer;
    text-align: center;
    height: unset;
}

.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 {
    width: 20%!important;
    background: #8bc4e0;
    color: #126b96;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
	left: unset;
	right: calc(0px - 4.6%);
}

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

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

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

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: 5px;
}

button.archiveButtons {
    width: 32%;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
    border: none;
    font-size: 1.5rem !important;
}

button.archiveButtons.deleteArchive {
    background: #e68989;
    color: #7b4747 !important;
}

button.archiveButtons.deleteArchive:hover {
    background: #7b4747;
    color: #e68989 !important;
}

button.archiveButtons.selectAllButton {
    background: #8bc4e0;
    color: #126b96 !important;
}


button.archiveButtons.selectAllButton:hover {
    background: #126b96;
    color: #8bc4e0 !important;
}

button.archiveButtons.invertArchive {
    background: #ffc150;
    color: #8a6624 !important;
}

button.archiveButtons.invertArchive:hover {
    background: #8a6624;
    color: #ffc150 !important;	
}

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

.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: #dddddd;
}

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;
}

.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: #a8e689 !important;
    color: #597b47 !important;	
}

a.control.pageOn.off, a.control.delPage, a.cred, input.cred {
    background: #e68989;
    color: #7b4747 !important;
}

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

a.control.pageOn.on:hover, a.cgreen:hover, input.cgreen:hover{
    background: #597b47 !important;
    color: #a8e689 !important;	
}

a.control.pageOn.off:hover, a.control.delPage:hover, a.cred:hover, input.cred:hover {
    background: #7b4747;
    color: #e68989 !important;
}

a.control.dupPage:hover, a.corange:hover, input.corange:hover {
    background: #8a6624 !important;
    color: #ffc150 !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: #777777;
    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: #dddddd;
    padding: 5px;
}

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

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: #777777;
}

.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: #777777;
    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: #777777;
	}

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

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

	.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: #204b40;
	}

	.userFilters a:hover {
		background: #204b40;
		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: #777777;
}

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: #777777;
}

.topContainer {
    margin-top: 10px;
}

.topContainerRow {
    width: 100%;
}

.stdLabel {
    width: 7%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #777777;
}
 
.topContainer select, .topContainer input {
    display: inline-block;
    font-size: 1.5rem;
    width: 25%;
    margin-right: 1.3%;
    color: #777777;
    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: #777777;
}

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

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: 1.5rem;
    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 {
    width: 100%;
    padding: 2px 5px;
    font-size: 1.5rem;
    box-sizing: border-box;
    color: #777777;
}

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: #777777;
    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: #eeeeee;
}

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: #777777;
    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: #777777;
    display: inline-block;
    box-sizing: border-box;
	margin: unset;
}

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

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

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

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

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

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

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

.pageDetailsTable tr td a.control-full.corange:hover{
	color: #ffc150 !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: #777777;
    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: #777777;
    margin-bottom: 10px;
}

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

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: #dddddd;
}

.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: #dddddd;
    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: #777777;
    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: -47px;
}

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: #777777;
	margin-bottom: 5px;
}

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

.contentDetailDiv div input, .contentDetailDiv div select {
    width: 82%;
    font-size: 1.5rem;
    color: #777777;
    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: #777777;
    background: #ffffff;
    font-size: 1.3rem;
}

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

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

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

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

.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: #777777;
    background: #ffffff;
    line-height: 2.5rem;
}
/* end website -> templates */

/*start dashboard */
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: 11.057vw;
    margin: 1.5vw 1.5vw;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    background-color: #dddddd;
    height: 11.9vw;
    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: 40%;
    min-width: 32px;
    margin: 30%;
    display: table;
    /* max-width: 100px; */
}

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;
    font-size: 5.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-radius: 0;
    background: #333b51DD;
    font-size: 1.2vw;
    font-weight: 300;
    padding-top: calc(29% - 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: #ffffff;
}

.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: 0 0 1rem 0;
    width: 100%;
    background: none;
}

.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: #777777;
    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: #777777;
}

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

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

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

textarea#address {
    width: 99.6%;
}

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

textarea.gloabMarkup {
    width: 99.3%;
    height: 75vh;
    margin-top: 10px;
}
/*end global settings */

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

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

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

input#styleSearchVal {
    width: 60%;
    margin-right: 4.8%;
    font-size: 1.5rem;
    color: #777777;
}

a.styleFilter{
	display: inline-block;
	float: right;
    color: #777777;
    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: #777777 !important;
    background: #dddddd !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: #777777 !important;
    color: #dddddd !important;
}

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

div#StyleEditor #tabDiv.tabs-content > .content.active {
    background: #ffffff !important;
    height: 100%;
    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: #777777;
}

.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: #777777;
}

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

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

tr.dataRowSort {
    background: none !important;
}

td.styleTD select {
    width: 100%;
}

textarea.compAddress {
    color: #777777;
    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: #777777;
    font-size: 1.5rem;
}

.addScroll {
    height: 92%;
    overflow-y: auto;
    width: 96.6%;
}

table.departmentSort.seoSettingsTable.topTable th {
    text-align: center;
    padding: 5px;
    font-size: 1.5rem;
    color: #777777;
    background: #dddddd;
    font-weight: 300;
    height: 3.7rem;
}

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

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

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

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

table#audit {
    width: 100%;
}

table#audit tr{
    display: flex;
}

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

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

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: #777777;
    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: #eeeeee;
    border: 1px solid #777777;
}

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: #777777;
}
/* 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: #dddddd;
    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: #777777;
    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: 100% !important;
}

table.departmentSort.furnTags tr {
    display: flex;
}

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: #777777;
}

.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: #eeeeee;
    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: #777777;
    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: #dddddd;
}

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: #dddddd;
}

.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: #777777;
}

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

.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: #dddddd;
    color: #777777;
}

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

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

.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: #777777;
    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: #777777;
    padding: 5px;
    box-sizing: border-box;
}

table#question_table tr td input, table#question_table tr td select {
    width: 100%;
    color: #777777;
    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: #777777;
    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: #777777;
}

.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%;
}