/*	======================================================================================================================================================================================
	Variables 
	====================================================================================================================================================================================== */	
:root
{
	/* Colours */
	--primary:				#09A9CF;
	--secondary:			#4EB149;
	--fontcolour:			#606060;
	--smallfontcolour:		#606060;
	--navigation:			#404040;
	--white:				#FFFFFF;
	--black:				#000000;
	--light:				#FAFAFA;
	--lightrgba:			rgba(255,255,255,0.8);
	--dark:					#202020;
	--darkrgba:				rgba(32,32,32,0.8);
	--danger:				#ED1848;
	--success:				#4EB149;
	--bordercolour:			#F0F0F0;

	--width:				100%;
	--widthnarrow:			80%;
	--widthsmall:			400px;
	--spacingcore:			20px;
	--spacing:				20px;
	--spacingtop:			52px;		/* required when menu is fixed */
	--margin:				0 0 20px 0;
	--imageratio:			56.25%;		/* 16:9 Aspect Ratio */
	--transition:			200ms ease;
	--border:				2px solid var(--bordercolour);
	--textshadow:			0 1px 1px var(--bordercolour);
	--boxshadow:			0 10px 20px 0 #F0F0F0;
	--fontsize:				13px;
	--lineheight:			2;
	--smallfont:			calc(var(--fontsize) * 0.85);
	--borderradius:			4px;
}


/*	======================================================================================================================================================================================
	Fonts 
	====================================================================================================================================================================================== */
html, body, input, select, textarea, button
{
	font-family:			"Open Sans",sans-serif;
	font-size:				var(--fontsize);
	line-height:			var(--lineheight);
	color:					var(--fontcolour);
}


/*	======================================================================================================================================================================================
	Input 
	====================================================================================================================================================================================== */
input
{
	background-color:		var(--light);
	border:					none;
	border-bottom:			2px solid var(--bordercolour);
	border-radius:			4px;
}

input:focus,
textarea:focus,
button:focus
{
 	background-color:		var(--bordercolour);
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button[type="submit"],
button[type="button"]
{
	border:					none;
	border-radius:			4px;
    color:					var(--white);
	text-transform:			uppercase;
    background-color:		var(--primary);
	box-shadow:				var(--boxshadow);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover,
button[type="button"]:hover
{
	background-color:		var(--dark);
	box-shadow:				none;
}

select
{
	background-color:		var(--light);
	border:					none;
	border-bottom:			2px solid var(--bordercolour);
	border-radius:			4px;
}

textarea
{
	background-color:		var(--light);
	border:					none;
	border-bottom:			2px solid var(--bordercolour);
	border-radius:			4px;
}

/* Label Transition */
.labelcontainer label .title
{
	color:					#BABABA;
	top:					16px;
}


/*	======================================================================================================================================================================================
	Headers 
	===================================================================================================================================================================================== */
h1, h2, h3, h4, h5, h6
{
	-webkit-font-smoothing:	antialiased;
	-moz-osx-font-smoothing:grayscale;
}

h2, h3, h4, h5, h6
{
	line-height:			1.5;
	margin:					calc(var(--spacing) / 2) 0;
}

h1, h1 a:link, h1 a:visited
{
	font-size:				calc(var(--fontsize) * 2.2);
	color:					var(--dark);
	font-weight:			300;
	line-height:			1;
}

h2, h2 a:link, h2 a:visited
{
	font-size:				calc(var(--fontsize) * 1.8);
	color:					var(--darkrgba);
	font-weight:			400;
}

h3, h3 a:link, h3 a:visited
{
	font-size:				calc(var(--fontsize) * 1.4);
	color:					var(--darkrgba);
	font-weight:			500;
}

h4, h4 a:link, h4 a:visited
{
	font-size:				calc(var(--fontsize) * 1.1);
	color:					var(--fontcolour);
	font-weight:			700;
}

h5, h5 a:link, h5 a:visited		/* Modal Headings */
{
	font-size:				calc(var(--fontsize) * 1.5);
	color:					var(--dark);
	font-weight:			400;
	margin-bottom:			calc(var(--margin) / 2);
}

h6, h6 a:link, h6 a:visited		/* Cart Item Headings */
{
	font-size:				calc(var(--fontsize) * 1.1);
	color:					var(--dark);
	font-weight:			700;
	display:				inline-block;
}


/*	======================================================================================================================================================================================
	Canvas
	====================================================================================================================================================================================== */	        
.offcanvas
{
	height:					100%;
	position:				fixed;
	z-index:				4;
	overflow-x:				hidden;
	transition:				var(--transition);
	padding:				var(--spacing);
}

.offcanvas.top > div, 
.offcanvas.bottom > div
{
	max-width:				var(--widthsmall);
	
	/* Vertically Center */
	/*position:				relative;
	overflow:				auto;
	top:					50%;
    transform:				translateY(-50%);*/
}

.oncanvas
{
	padding-bottom:			calc(var(--spacingtop) * 2);
}

.offcanvas.left
{
	width:					200px;
	top:					var(--spacingtop);
	left:					-220px;
	background:				var(--white);
	box-shadow:				var(--boxshadow);
	padding:				var(--spacing) 0 0 0;
}

.oncanvas.left
{
	left:					0;
}

.offcanvas.right
{
	width:					600px;
	top:					var(--spacingtop);
	right:					-620px;
	background:				var(--white);
	box-shadow:				var(--boxshadow);
}

.oncanvas.right
{
	right:					0;
}

/*.offcanvas.top
{
	width:					100%;
	background-color:		var(--white);
	top:					-100vh;
}

.oncanvas.top
{
	top:					var(--spacingtop);
}

.offcanvas.bottom
{
	width:					100%;
	background-color:		var(--white);
	bottom:					-100vh;
	left:					0;
}

.oncanvas.bottom
{
	bottom:					calc(var(--spacingtop) * -1);
}*/


/*	======================================================================================================================================================================================
	Framework
	====================================================================================================================================================================================== */
header
{
	width:					100vw;
	background-color:		var(--dark);
	position:				relative;
    z-index:				3;
}

header > .container
{
	width:					100%;
}

header > .container > .grid.three
{
	grid-template-columns:	auto 1fr 1fr;
	grid-gap:				0;
}

header > .container > .grid > div:nth-child(1)
{
	max-width:				131px;
}

header > .container > .grid > div:nth-child(2)
{
	padding-left:			calc(var(--spacing) / 2);
}

header > .container > .grid > div:nth-child(3)
{
	padding-right:			calc(var(--spacing) / 2);
	text-align:				right;
}

.navbar table
{
	width:					100%;
}

.navbar table td:first-child
{
	display:				none;
}

.navbar table td:nth-child(3)
{
	width:					15px;
	text-align:				right;
}

section
{
	width:					100%;
	/*overflow:				auto;*/
}

section > .container
{
	width:					100%;
	padding:				var(--spacingcore);
}

section > .container.login
{
	max-width:				var(--widthsmall);
}

aside
{
	width:					100%;
}

aside > .container
{
	/*width:					100%;*/
	padding:				var(--spacingcore);
}

footer
{
	width:					100vw;
}

footer > .container
{
	width:					100%;
	padding:				var(--spacingcore);
}


/*	======================================================================================================================================================================================
	Grouping 
	====================================================================================================================================================================================== */
.flex
{
	display:				block;
}

.grid
{
	display:				grid;
	grid-gap:				var(--spacing);
}

.grid > div
{
	margin:					initial;	/* so the div expands to 100% */
}

.two, .three, .four, .five, .six, .onethird, .onequarter, .onefifth, .twothirds, .threequarters, .fourfifths
{
	grid-template-columns:	1fr;
}


/*	======================================================================================================================================================================================
	Logo
	====================================================================================================================================================================================== */
header > .container .logo
{
	display:				inline-block;
	background-color:		var(--white);
}

header > .container .logo img
{
	width:					29px;
	padding:				calc(var(--spacing) / 1.5) var(--spacing);
}

.login > .logo
{
	width:					140px;
	padding:				calc(var(--spacing) * 2) var(--spacing);
}

.logosmall
{
	width:					100px;
}


/*	======================================================================================================================================================================================
	Navigation 
	====================================================================================================================================================================================== */
/* All */
nav ul
{
	padding:				0;
}
 
nav ul li
{
	display:				block;
	padding:				calc(var(--spacing) / 4) var(--spacing);
}

nav ul li a
{
	display:				block;
}

nav ul li:hover > ul	/* sub menu */
{
	display:				block;
}

nav ul ul	/* sub menu */
{
	padding:				calc(var(--spacing) / 2);
}

nav li:hover
{
	background-color:		var(--primary);
}

nav li:hover *
{
	color:					var(--white) !important;
}

nav li.noformat
{
	margin-top:				var(--spacing);
	pointer-events:			none;
}

/* Primary */
nav.primary .current, 
nav.primary .current *	/* active link */
{
	color:					var(--white) !important;
	background-color:		var(--primary);
}

nav.primary ul ul	/* sub menu */
{
	display:				none;
}

/* Secondary */
nav.secondary .current a, 
nav.secondary li:hover > a	/* active link */
{
	color:					var(--primary) !important;
}

nav.secondary ul ul	/* sub menu */
{
	display:				block;
}

/* Links */
nav.primary a:link, 
nav.primary a:visited
{
	font-size:				calc(var(--fontsize) * 1.2);
	color:					var(--navigation);
	transition:				unset;
}

/*nav.primary a:hover 
{
	color:					var(--white);
}*/

nav.secondary a:link, 
nav.secondary a:visited
{
	color:					var(--fontcolour);
	text-decoration:		none;
}

nav.secondary a:hover 
{
	color:					var(--primary);
}

/* Hamburger */
.primarybutton
{
	display:				inline-block;
    vertical-align:			middle;
    padding:				0 var(--spacing);
}

.secondarybutton
{
	float:					left;
	padding-right:			var(--spacing);
	margin-top:				calc(var(--spacing) / 4);
}


.menubar1, 
.menubar2, 
.menubar3
{
    width:					22px;
    height:					1px;
    margin:					5px auto;
    transition:				var(--transition);
}

.menubar1, 
.menubar2, 
.menubar3
{
    background-color:		var(--light);	/* hamburger colour */
}

.menubar2
{
	opacity:				0;
}

.menubuttonchange .menubar1
{
    -webkit-transform:		rotate(-45deg) translate(4px,4px);
    transform:				rotate(45deg) translate(4px,4px);
}

.menubuttonchange .menubar3
{
    -webkit-transform:		rotate(45deg) translate(5px,-5px);
	transform:				rotate(-45deg) translate(5px,-5px);
}


/*	======================================================================================================================================================================================
	Light Gallery
	====================================================================================================================================================================================== */
.lg-backdrop
{
	background:				var(--darkrgba) !important;
}

.lg-outer .lg-thumb-item
{
	border-radius: 			0 !important;
	border:					0 !important;
}

.lg-outer .lg-thumb-outer
{
	background:				none !important;  
}

.lg-sub-html
{
	background:				none !important;  
}

.image
{
	cursor:					pointer;
}


/*	======================================================================================================================================================================================
	Core
	====================================================================================================================================================================================== */
.overlay
{
    background:				var(--lightrgba);
    display:				none;
    width:					100%;
    height:					100%;
    position:				fixed;
    z-index:				2;
    top:					0;
    left:					0;
}

/* Navigation */ 
.navigation
{
	box-shadow:				var(--boxshadow);
	background-color:		var(--white);
	transition:				var(--transition);
	position:				relative;
}

/* Home */
.container.home
{
	display:				inline-block;
}

.home .module
{
	width:					100%;
	max-width:				220px;
	margin:					calc(var(--spacing) / 4) 0;
}

.home .module td:first-child
{
	width:					60px;
}

.home .module h3
{
	line-height:			1;
}

/* Side */
.record
{
	width:					100%;
	background-color:		var(--light); 
}

.record > .container
{
	padding-left:			calc(var(--spacing) / 1.5);
	padding-right:			calc(var(--spacing) / 1.5);
}

.record .box
{
	background-color:		var(--white); 
	padding:				var(--spacing);
	margin-bottom:			var(--spacing);
	font-size:				var(--smallfont);
	box-shadow:				var(--boxshadow);
}

.record .options > .box > div
{
	margin-bottom:			calc(var(--spacing) / 4);
}

.areyousure
{
	display:				none;
	float:					right;
    margin-right:			calc(var(--spacing) / 2);
    position:				relative;
}

.images
{
	display:				none;
}

.images ul
{
	padding:				0 var(--spacing) var(--spacing) var(--spacing);
}

.records
{
 	width:					100%;
	background-color:		var(--primary);
	line-height:			1.5;
	transition:				var(--transition);
	color:					var(--white);
}

.records > .container > div
{
	margin-bottom:			calc(var(--spacing) / 2);
	word-break:				break-word;
}

.records a
{
	color:					var(--white) !important;
	font-weight:			300;
}

.records .active:before
{
	content:				"\25B8";
	color:					var(--white);
	margin-right:			calc(var(--spacing) / 4);
}

.records .disabled,
.records .cancelled
{
	opacity:				0.3;
}

.records .draft,
.records .refunded
{
	opacity:				0.6;
	font-style:				italic;
}

/* Featured Images */
.featuredimages .options
{
	padding:				var(--spacing) 0;
}	

.featuredimages .options img
{
	height:					160px;
	display:				block;
	margin-bottom:			var(--spacing);
	object-fit:				cover;
}

.featuredimages input[name="filename"],
.featuredimages input[name="filename"]:active
{
	background:				none;
	border:					none;
	padding:				0;
	margin:					0;
	overflow:				scroll;
	text-align:				center;
	box-shadow:				none;
	font-size:				var(--smallfont);
}

.form
{
	width:					100%;
	max-width:				var(--width);
	display:				inline-block;
}

.resetemailform, 
.resetpasswordform
{
	display:				none;
}

/*.form .report:first-child
{
    position:				absolute;
    bottom:					var(--spacing);
    padding:				var(--spacing);
    background-color:		var(--lightrgba);
    border:					var(--border);
    border-radius:			var(--borderradius);
}*/

.narrow
{
	max-width:				var(--widthsmall);
}

.wide
{
	max-width:				calc(var(--widthsmall) * 2);
}

.manager
{
	width:					100%;
    height:					calc(100vh - 200px);
    border:					none;
}

/* Cryptography */
.cryptography
{
	padding:				var(--spacing); 
	box-shadow:				var(--boxshadow); 
	transition:				var(--transition);
	display:				inline-block;
	opacity:				0;
}

#cipher
{
	font-size:				calc(var(--fontsize) * 1.5); 
	display:				inline-block;
	word-break:				break-all;
}

.access
{
	grid-gap:				calc(var(--spacing) / 2);
}

.wysiwyg
{
	min-height:				573px;
}

.wysiwygs > div:not(:first-child)
{
	margin-top:				calc(var(--spacing) * 2);
}

.wysiwygs > div:first-child .up,
.wysiwygs > div:last-child .down
{
	display:		none;
}

.generate
{
	margin:					0 0 var(--spacing) calc(var(--spacing) / 2);
	font-size:				var(--smallfont);
}

/* Button */
.stickybutton
{
	width:					100%;
	background-color:		var(--lightrgba);
    padding:				calc(var(--spacing) / 2) 0;
    position:				sticky !important;
    bottom:					0 !important;
}

.orderform .stickybutton
{
	display:				none;
}

.report
{
	display:				none;
	word-wrap:				break-word; 
	overflow:				hidden;
	margin-bottom:			calc(var(--spacing) / 2);
	cursor:					pointer;
}

.error
{
	color:					var(--danger) !important;
	border:					2px solid var(--danger) !important;
}

.true
{
	color:					var(--success) !important;
}

.false
{
	color:					var(--danger) !important;
}

.smallfont
{
	font-size:				var(--smallfont);
	color:					var(--smallfontcolour);
}

.textshadow
{		
	text-shadow:			var(--textshadow);
}

.imageborder
{
	box-sizing:				border-box;	
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
	border:					var(--border);
}

.borderradius
{
	border-radius:			var(--borderradius);
}

.shadow
{
	box-shadow:				var(--boxshadow);
}

.negative
{
	filter:					invert(100%);
}

.emulatehref
{
	cursor:					pointer;
	color:					var(--primary);
}

.emulatehref:hover 
{
	color:					var(--danger)
}

.phonehide, 
.mobilehide
{
	display:				none !important;
}

.hidden
{
	display:				none !important;
}

.clearfix:after
{ 
   content:					" ";
   display:					block; 
   height:					0; 
   clear:					both;
}

.logoutform, 
.logoutform form
{
	display:				inline;
}

.noscroll
{
	overflow:				hidden;
}

/* Google Places */
.pac-container, 
.pac-item 
{
    padding:				calc(var(--spacing) / 4);
	border-top:				none;
}

/* 404 */
.pagenotfound
{
	text-align:				center;
}

.pagenotfound button
{
	margin-left:			var(--spacing);
}


/*	======================================================================================================================================================================================
	Modules 
	====================================================================================================================================================================================== */
/* Item - Refinements */
#refine input[type="checkbox"]
{
	width:					auto;
	margin-right:			0;
}

#refine input[type="text"]
{
	width:					100%; 
	border:					none;
}

#refine .parent input[type="text"]
{ 	
	font-weight:			bold;
}

#refine .child input[type="text"]
{
	font-weight:			normal;
	font-size:				var(--smallfont);
	padding:				0 calc(var(--spacing) / 2);
}

#refine .parent table,
#refine .child table
{
	width:					100%;
}

#refine .parent td:first-child,
#refine .child td:first-child
{
	width:					15px;
}

#refine .parent td:last-child,
#refine .child td:last-child
{
 	width:					15px;
	text-align:				right;
}

#refine .parent > div
{
	text-align:				right;
}

#refine .grid
{
	grid-gap:				0 auto;
}

/* Order */
.orderform
{
	max-width:				600px;
}

.orderform table
{
	width:					100%;
}

.orderform > div
{
	margin-bottom:			var(--spacing);
}

table.member td:first-child
{
	width:					calc(var(--spacing) * 2);
	vertical-align:			top;
}

.order table td:nth-child(2), 
.orderdetails table td:nth-child(2)
{
	text-align:				right;
}

.orderitem
{
	background-color:		var(--light);
	padding:				var(--spacing);
}

.orderitem .price
{
	text-align:				right;
	float:					right;
}

.orderdetails
{
	background-color:		var(--light);
	padding:				var(--spacing);
}

.issue
{
	margin-top:				var(--spacing);
}

.refund
{
	display:				none;
	margin-top:				var(--spacing);
}

.response
{
	margin-top:				var(--spacing);
	color:					var(--danger);
}

.notification .shipped > span,
.notification .cancelled > span,
.notification .refunded > span,
.notification .invoice > span
{
	float:					right;
}

.notification .shipped > .sent,
.notification .cancelled > .sent,
.notification .refunded > .sent,
.notification .invoice > .sent
{
	display:				none;
	text-decoration:		underline;
	margin-left:			calc(var(--spacing) / 4);
}

.notification .invoice > .reset
{
	display:				none;
	color:					var(--danger);
	margin-left:			calc(var(--spacing) / 4);
}

/* Same as shop.css */
.orderitem table tr:first-child td:first-child
{
	width:					70px;
	padding-right:			var(--spacing);
	text-align:				center;
}

.orderitem table tr td:nth-child(2)
{
	width:					120px;
	padding-right:			var(--spacing);
}

.cartquantity
{
	width:					100%;
	margin:					calc(var(--spacing) / 2) 0;
	text-align:				center;
	border:					none;
	font-size:				20px;
	font-weight:			bold;
}

.cartimagethumb img
{
	max-width:				100px;
	max-height:				100px;
}

.cartitem .price
{
	text-align:				right;
	float:					right;
}

.subtotal, 
.tax
{
	font-size:				calc(var(--fontsize) * 1.1);
	margin-top:				var(--spacing);
}

.tax.inclusive
{
	font-size:				var(--smallfont);
	font-style:				italic;
}

.tax.inclusive > .price
{
	font-weight:			normal;
}

.tax.exclusive
{
	font-weight:			bold;
}

/*.history .promotionalcode, 
.history .shipping,
.sale .promotionalcode, 
.sale .shipping,
.quote .promotionalcode, 
.quote .shipping,
.checkout .promotionalcode, 
.checkout .shipping,*/
.orderdetails .promotionalcode, 
.orderdetails .shipping
{
	margin-top:				var(--spacing);
	font-size:				var(--smallfont);
}

.promotionalcode span, 
.shipping span
{
	float:					right;
}

.total
{
	font-size:				calc(var(--fontsize) * 1.3);
}

.subtotal .price, 
.tax .price, 
.total .price
{
	float:					right;
}

/* Price */
.price
{
	font-weight:			bold;
}

.price .oldprice
{
	text-decoration:		line-through;
	margin-right:			calc(var(--spacing) / 4);
}

.price .discountedprice, 
.price .discount
{
	color:					var(--danger);
	font-weight:			bold;
}

/* Faq */
.faqform textarea
{
	min-height:				200px;
}

/* Client */
.domains
{
	width:					calc(100vw - calc(var(--spacingcore) * 2));
	overflow-x:				auto;
}

.domains > table
{
	width:					100%;
	max-width: 				var(--width);
	margin:					calc(var(--spacing) * 2) auto;
	display:				inline-table;
    white-space:			nowrap;
}

.domains > table td:first-child
{
	width:					320px;
}

.domains > table th:first-child,
.domains > table td:first-child
{
	text-align:				left;
}

.domains > table th,
.domains > table td
{
	padding:				calc(var(--spacing) / 4) calc(var(--spacing) / 2);
	text-align:				center;
}

.domains > table th
{
	line-height:			1.5;
}

.domains > table tr:first-child,
.domains > table tr:last-child
{
	border-top:				var(--border);
	border-bottom:			var(--border);
}

.domains > table tr:nth-last-child(2),
.domains > table tr:nth-last-child(3)
{
	border-top:				var(--border);
}

.domains > table tr.odd
{
	background-color:		var(--white);		
}

.domains > table tr.even
{
	background-color:		var(--light);		
}

.domains > table tr:last-child td:last-child
{
	text-decoration-line:	underline;
	text-decoration-style:	double;
}

.domains > table .overdue
{
	font-weight:			bold;
	color:					var(--danger);
}

.domains .fa-pencil
{
	margin-right:			calc(var(--spacing) / 4);
}

.domains > table .fa-check
{
	color:					var(--success);
}

.domains > table .fa-times
{
	color:					var(--danger);
}


/*	======================================================================================================================================================================================
	Links 
	====================================================================================================================================================================================== */
a:link, 
a:visited 
{
	color:					var(--primary);
	text-decoration:		none;
	transition:				var(--transition);
}

a:hover 
{
	color:					var(--danger);
}

.smalllink a:link, 
.smalllink a:visited
{
	color:					var(--navigation);
	text-decoration:		none;
}

.smalllink a:hover 
{
	color:					var(--bordercolour);
}


/*	======================================================================================================================================================================================
	Font Awesome
	====================================================================================================================================================================================== */
/*.fas, .far, .fab
{
	transition:				var(--transition);		
}*/

header .fa-folder-tree,
header .fa-user-secret,
header .fa-analytics,
header .fa-mailchimp,
header .fa-key,
header .fa-server,
header .fa-question-circle,
header .fa-user,
header .fa-cog,
header .fa-sign-out-alt
{
	font-size:				20px;
	padding:				calc(var(--spacing) / 1.25) calc(var(--spacing) / 2);
}

header .fa-folder-tree,
header .fa-user-secret,
header .fa-analytics,
header .fa-mailchimp,
header .fa-key,
header .fa-server
{
	color:					var(--white);
}

.module .fa-key,
.module .fa-comments,
.module .fa-images,
.module .fa-store,
.module .fa-users,
.module .fa-file-alt,
.module .fa-cash-register,
.module .fa-star-half-alt,
.module .fa-tags,
.module .fa-pencil,
.module .fa-shipping-fast,
.module .fa-share-alt,
.module .fa-quote-left,
.module .fa-question,
.module .fa-file-invoice-dollar,
.module .fa-id-badge,
.module .fa-globe,
.module .fa-megaphone
{
	font-size:				30px;
	color:					var(--navigation);
}

.navigation .fa-key,
.navigation .fa-comments,
.navigation .fa-images,
.navigation .fa-store,
.navigation .fa-users,
.navigation .fa-file-alt,
.navigation .fa-cash-register,
.navigation .fa-star-half-alt,
.navigation .fa-tags,
.navigation .fa-pencil,
.navigation .fa-shipping-fast,
.navigation .fa-share-alt,
.navigation .fa-quote-left,
.navigation .fa-question,
.navigation .fa-file-invoice-dollar,
.navigation .fa-id-badge,
.navigation .fa-globe,
.navigation .fa-megaphone
{
	font-size:				20px;
    position:				relative;
    bottom:					-2px;
}

.module .fa-eye,
.module .fa-plus-square
{
	padding-left:			calc(var(--spacing) / 4);
}

.pageform .fa-minus-square,
.pageform .fa-plus-square
{
	float:					left;
}

.pageform .fa-plus-square
{
	margin-left:			calc(var(--spacing) / 4);
}

.pageform .fa-arrow-alt-square-up,
.pageform .fa-arrow-alt-square-down
{
	float:					right;
	margin-left:			calc(var(--spacing) / 4);
}

.fa-minus-square
{
	color:					var(--danger);
}

.featuredimages .fa-minus-square,
.featuredimages .fa-spinner
{
	color:					var(--danger);
	cursor:					pointer; 
	float:					right;
}

.primary .fa-plus
{
	color:					var(--fontcolour);
}

/* Button */
button .fa-envelope,
button .fa-save, 
button .fa-key,
button .fa-server,
button .fa-undo,
button .fa-home,
button .fa-print,
button .fa-spinner
{
	margin-right:			calc(var(--spacing) / 2);
}

.box .fa-ellipsis-v,
.box .fa-sliders-h, 
.box .fa-wallet, 
.box .fa-eye, 
.box .fa-images,
.box .fa-bell,
.box .fa-link,
.box .fa-mailchimp
{
	margin-right:			calc(var(--spacing) / 2);
}

.record .details .fa-trash
{
	font-size:				16px;
	cursor:					pointer;
	float:					right;
	color:					var(--danger);
}

.records .fa-chevron-right,
.records .fa-chevron-left
{
    color:					var(--white);
}

.fa-arrow-to-top.scrollpage
{
	font-size:				calc(var(--fontsize) * 2);
	display:				none;
	position:				fixed;
	z-index:				1;
	bottom:					var(--spacing);
	right:					var(--spacing);
	cursor:					pointer;
	line-height:			1;
}

.cryptography .fa-copy
{
	font-size:				calc(var(--fontsize) * 1.5);
	cursor:					pointer; 
	margin-left:			var(--spacing);
}

.closeslidebar.fa-times
{
	font-size:				20px;
	cursor:					pointer;
	float:					right; 
	position:				absolute; 
	right:					var(--spacing); 
	top:					var(--spacing); 
	z-index:				1;
}

/* Status */
.fa-circle
{
	cursor:					pointer; 
}

/* Order */
.member .fa-user,
.member .fa-phone,
.member .fa-mobile,
.member .fa-envelope,
.member .fa-map-marker
{
	margin-right:			calc(var(--spacing) / 2);
	color:					var(--primary);
}

.member .fa-external-link,
.orderitem .fa-external-link
{
	margin-left:			calc(var(--spacing) / 4);
}

/* Data Tables */
.datatable .fa-chevron-up, 
.datatable .fa-chevron-down, 
.datatable .fa-pencil, 
.datatable .fa-clone
{
	font-size:				initial;
	cursor:					pointer;
	margin-right:			calc(var(--spacing) / 4);
	color:					var(--primary);
}

.datatable .fa-chevron-up:hover,
.datatable .fa-chevron-down:hover,
.datatable .fa-pencil:hover,
.datatable .fa-clone:hover
{
	color:					var(--danger);
}

/*.dataTables_wrapper .fa-spinner
{
	font-size:				calc(var(--fontsize) * 1.5);
	color:					var(--primary);
}*/

.dt-buttons .fa-tasks,
.dt-buttons .fa-bars,
.dt-buttons .fa-sync,
.dt-buttons .fa-trash
{
	margin-right:			calc(var(--spacing) / 2);
}

/* Fancytree */
#tree .fa-folder,
#tree .fa-folder-open,
#tree .fa-caret-right,
#tree .fa-caret-down
{
    font-size:				calc(var(--fontsize) * 1.3);
}

.category .fa-trash
{
    display:				none;
    font-size:				16px;
    cursor:					pointer;
    float:					right;
    color:					var(--danger);
}

.fa-exclamation-triangle
{
    font-size:				16px;
    cursor:					pointer;
    float:					right;
    color:					var(--dark);
} 


/*	======================================================================================================================================================================================
	DataTables
	====================================================================================================================================================================================== */
.dataTables_wrapper, 
.datatable
{
	display:				none;
}

.gridfix
{
	max-width:				100vw;
}

.datatable
{
	width:					100% !important;
}

table.dataTable thead th, 
table.dataTable thead td, 
table.dataTable.no-footer
{
	border:					0 !important;
}

table.dataTable thead
{
	text-align:				left !important;
	color:					var(--primary);
}

table.dataTable thead th:hover 
{
	color:					var(--danger);
	transition:				var(--transition);
}

table.dataTable thead th
{
	font-weight:			initial !important;
	font-size:				calc(var(--fontsize) * 1.2);
	font-weight:			300;
}

table.dataTable tbody th, 
table.dataTable tbody td, 
table.dataTable thead th, 
table.dataTable thead td
{
	padding:				calc(var(--spacing) / 2) !important;
}

.datatable .selected,
.datatable .selected input
{
	background-color:		var(--danger) !important;
	opacity:				0.9;
	color:					var(--white);
}

.datatable .selected i[name="status"]
{
	border:					var(--border);
	border-radius:			50%;
}

.datatable .selected .fas, 
.datatable .selected .fas:hover,
.datatable .selected .far, 
.datatable .selected .far:hover,
.datatable .selected .fal, 
.datatable .selected .fal:hover
{
	color:					var(--white);
}

input.sequence
{
	width:					calc(var(--spacing) * 2.5);
	padding:				0;
    background:				none;
    border:					0;
    box-shadow:				none;
    line-height:			1;
}

/* Rows */
table.dataTable tbody tr
{
	height:					calc(var(--spacing) * 2);
}

table.dataTable tbody tr.odd
{
	background-color:		var(--white);
}

table.dataTable tbody tr.even
{
	background-color:		var(--light);
}

table.dataTable tbody tr td
{
	outline:				0;
}

table.dataTable tbody tr td:nth-child(2)
{
	white-space:			nowrap;
}

table.dataTable tbody tr:hover
{
	background-color:		#EAEAEA;
}

/* Sorting */
table.dataTable .sorting_1, 
table.dataTable .sorting_asc, 
table.dataTable .sorting_desc
{
	font-weight:			bold !important;
}

table.dataTable thead th
{
	position:				relative;
	background-image:		none !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after
{
	font-family:			"Font Awesome 5 Pro";
	font-weight:			400;
	position:				absolute;
	display:				inline-block;
	margin-left:			calc(var(--spacing) / 2);
}

/*table.dataTable thead th.sorting:after
{
	content:				"\f0dc";
	font-weight:			600;
	color:					#F0F0F0;
}*/

table.dataTable thead th.sorting_asc:after
{
	content:				"\f160";
}

table.dataTable thead th.sorting_desc:after
{
	content:				"\f161";
}

/* Scroll */
/*.dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody
{
	border-bottom:			unset;
}*/

/* Paging */
.dataTables_wrapper .dataTables_paginate, 
.dataTables_paginate.paging_numbers a.paginate_button
{
	color:					var(--primary) !important;
}

.dataTables_paginate.paging_numbers a.paginate_button.current, 
.dataTables_paginate.paging_numbers a.paginate_button.current:hover,
.dataTables_paginate.paging_numbers a.paginate_button:hover
{
	background:				var(--primary);
	border:					1px solid var(--primary);
	color:					var(--white) !important;
}

/* Search */
.dataTables_wrapper .dataTables_filter
{
	float:					left !important;
}

.dataTables_wrapper .dataTables_filter input
{
	width:					220px;
	margin-left:			0 !important;
}

/* Button */
.dt-buttons
{
    font-size:				var(--smallfont);
	margin-top:				var(--spacing);
	text-align:				left !important;
}

.dt-buttons .deletebutton
{
	background-color:		var(--danger) !important;
	float:					right;
}

.dt-buttons .sequencebutton
{
	background-color:		var(--success) !important;
}

/* Responsive Expand Icon */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before
{
	display:				none !important;
}

table.dataTable > tbody > tr.child ul.dtr-details
{
	width:					100%;
}

table.dataTable > tbody > tr.child span.dtr-title
{
  min-width:				100px !important;
}

/*table.dataTable > tbody > tr.child span.dtr-data
{
	text-align:				right;
	float:					right;
}*/

/* Images */
table.dataTable img
{
	max-width:				80px;
}


/*	======================================================================================================================================================================================
	TinyMCE
	====================================================================================================================================================================================== */
.mce-tinymce
{
	margin:					calc(var(--spacing) / 4) 0 !important;
	border:					unset !important;
}

.mce-top-part
{
	border:					var(--border);
}

.mce-panel
{
	border:					unset !important;
}

.mce-menubar .mce-menubtn button span, 
.mce-btn button, .mce-ico
{
	color:					var(--fontcolour);
}

.mce-toolbar-grp.mce-panel, 
.mce-panel.mce-last
{
	border-bottom:			2px solid #EEEEEE !important; 
}

.mce-container-body:not(.mce-stack-layout)
{
	background:				var(--light) !important;
	border-radius:			var(--borderradius) !important;
}
 
.mce-btn:not(.mce-primary)
{
	background:				none !important;
}

.mce-btn-group:not(:first-child)
{
    border-radius:			unset !important;
}

.mce-tinymce, 
.mce-top-part::before
{
	box-shadow:				none !important;
}

.mce-panel
{
	border-color:			#EEEEEE !important;
}

.mce-menubar, 
.mce-statusbar
{
	border:					none !important;
}

.mce-colorbtn-trans div
{
	line-height:			11px !important;
}

.mce-menubtn.mce-fixed-width span
{
	width:					40px !important;
}

.mce-btn.mce-active button, 
.mce-btn.mce-active:hover button, 
.mce-btn.mce-active i, 
.mce-btn.mce-active:hover i
{
    color:					var(--primary) !important;
}

/* Button Reset - our button[type="button"] interferes with these */
.mce-tinymce button,
.mce-container button,
.mce-btn button
{
	padding:				4px 6px !important;
	font-size:				14px;
	line-height:			20px;
	*line-height:			16px;
	cursor:					pointer;
	color:					#595959;
	text-align:				center;
	overflow:				visible;
	-webkit-appearance:		none;

	margin:					unset;
	/*border:				unset;*/
	border-radius:			unset;
    color:					unset;
	text-transform:			unset;
    background-color:		unset;
	box-shadow:				unset;
}

.mce-tinymce button:hover,
.mce-container button:hover,
.mce-btn button:hover
{
	background-color:		unset;
}


/*	======================================================================================================================================================================================
	Fancytree 
	====================================================================================================================================================================================== */
#tree
{
	overflow-x:				scroll;
}

#tree ul.fancytree-container
{
    font-family:			unset;
    font-size:				unset;
    margin:					unset;
    background-color:		unset;
    border:					unset;
    min-height:				unset;
    padding:				unset;
    white-space:			nowrap;
    position:				relative;
    outline:				0;
}

#tree span.fancytree-title
{
	color:					var(--fontcolour);
	padding:				0 5px;
	margin:					0 0 0 5px;
	border-radius:			var(--borderradius);	
}

#tree .fancytree-plain span.fancytree-title
{
	border:					unset;
	background-color:		unset;
}

#tree .fancytree-plain span.fancytree-active span.fancytree-title, 
#tree .fancytree-plain span.fancytree-selected span.fancytree-title
{
	background-color:		var(--primary);
	color:					var(--white);
}

#tree #fancytree-drop-marker, 
#tree span.fancytree-checkbox, 
#tree span.fancytree-drag-helper-img, 
#tree span.fancytree-empty, 
#tree span.fancytree-expander, 
#tree span.fancytree-icon, 
#tree span.fancytree-vline
{
	background-image:		unset;
}


/*	======================================================================================================================================================================================
	Map 
	====================================================================================================================================================================================== */
.map
{
	width:					100%;
	height:					250px;
	display:				block;
	border:					0;
	margin:					0;
}


/*	======================================================================================================================================================================================
	Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
	====================================================================================================================================================================================== */


/*	======================================================================================================================================================================================
	Tablet 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 768px) 
and (max-width : 1279px) 
{
	/*	======================================================================================================================================================================================
		Grouping 
		====================================================================================================================================================================================== */	
	.grid
	{
		grid-column-gap: 		calc(var(--spacing) * 2);
	}
	
	.two, .three, .four, .five, .six
	{
		grid-template-columns:	1fr 1fr;
	}

	/*	======================================================================================================================================================================================
		Core
		====================================================================================================================================================================================== */
	.images
	{
		display:				block;
	}

	.phonehide
	{
		display:				initial !important;
	}
	
	.tablethide
	{
		display:				none !important;
	}
}
/*	======================================================================================================================================================================================
	Desktop 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 1280px) 
{
	/*	======================================================================================================================================================================================
		Variables 
		====================================================================================================================================================================================== */
	:root
	{
		--width:				1440px;
		--spacingcore:			40px;
 		--margin:				20px; 
	}

	/*	======================================================================================================================================================================================
		Canvas 
		====================================================================================================================================================================================== */
	.primary.offcanvas, 
	.secondary.offcanvas
	{
		width:					unset !important;
		height:					unset;
		position:				unset;
		z-index:				unset;
		overflow-x:				unset !important;
		transition:				unset;
		padding:				unset !important;
		border:					unset !important;
		box-shadow:				unset;
	}
	
	.offcanvas.bottom > div
	{
		max-width:				var(--width);
	}

	/*	======================================================================================================================================================================================
		Framework
		====================================================================================================================================================================================== */
	.navbar > .container
	{
		padding:				var(--spacingcore) 0;
	}

	/*	======================================================================================================================================================================================
		Grouping 
		====================================================================================================================================================================================== */
	.two
	{
		grid-template-columns:	1fr 1fr;
	}

	.three
	{
		grid-template-columns:	1fr 1fr 1fr;
	}

	.four
	{
		grid-template-columns:	1fr 1fr 1fr 1fr;
	}

	.five
	{
		grid-template-columns:	1fr 1fr 1fr 1fr 1fr;
	}
	
	.six
	{
		grid-template-columns:	1fr 1fr 1fr 1fr 1fr 1fr;
	}
	
	.onethird
	{
		grid-template-columns:	1fr 2fr;
	}

	.onequarter
	{
		grid-template-columns:	1fr 3fr;
	}
	
	.onefifth
	{
		grid-template-columns:	1fr 4fr;
	}

	.twothirds
	{
		grid-template-columns:	2fr 1fr;
	}
	
	.threequarters
	{
		grid-template-columns:	3fr 1fr;
	}

	.fourfifths
	{
		grid-template-columns:	4fr 1fr;
	}

	/*	======================================================================================================================================================================================
		Logo
		====================================================================================================================================================================================== */
	.navbar > .container .logo
	{
		display:				none;
	}

	/*	======================================================================================================================================================================================
		Navigation 
		====================================================================================================================================================================================== */
	/* Primary */
	nav ul
	{
		white-space:			nowrap;
	}

	nav.primary ul li
	{
		padding:				calc(var(--spacing) / 8) var(--spacing);
	}

	nav.primary ul ul	/* sub menu */
	{
		min-width:				200px;
		position:				absolute;
		z-index:				4;
		padding:				var(--spacing);
		background:				var(--darkrgba);
		text-align:				initial;	/* use to initialise if 'centre' is used on parent */
	}
 
	nav.primary ul ul li	/* sub menu */
	{
		display:				block;
	}

	nav.primary ul ul li a	/* sub menu */
	{
		padding:				0;
	}
	
	/* Secondary */
	nav.secondary ul li a
	{
		padding:				calc(var(--spacing) / 8) 0;
	}
	
	/* Hamburger */	
	.primarybutton, 
	.secondarybutton
	{
		display:				none;
	}

	/*	======================================================================================================================================================================================
		Core
		====================================================================================================================================================================================== */	
	.minimise
	{
		margin-top:				calc(var(--spacing) / -4);
		cursor:					pointer;
		text-align:				center;
		border-radius:			50%;
		width:					32px;
		height: 				32px;
		line-height:			1;
	}
	
	/* Navigation */
	.navigation
	{
		width:					200px;
	}

	.navigation > .minimise
	{
		position:				absolute;
		right:					-16px;
		background-color:		var(--white);
 		padding:				calc(var(--spacing) / 2) calc(var(--spacing) / 8) calc(var(--spacing) / 2) calc(var(--spacing) / 2);
		box-shadow:				5px 0px 5px 0 #E0E0E0;
	}

	.navigation table td:first-child
	{
		opacity:				0;
	}

	.navigation.collapse
	{
		width:					67px;
		min-width:				67px;
	}
	
	.navigation.collapse table td:first-child
	{
		width:					25px;
		text-align:				center;
		opacity:				1;
		display:				table-cell;
	}

	.navigation.collapse table td:nth-child(2),
	.navigation.collapse table td:nth-child(3)
	{
		opacity:				0;
		display:				none;
	}
	
	.navigation.collapse ul > li.noformat > h4
	{
		display:				none;
	}

	/* Side */
	.record
	{
		width:					280px;
	}

	.records
	{
		width:					240px;
	}

	.records.collapse
	{
		margin-right:			-230px;
	}

	.records > .minimise
	{
		position:				fixed;
		margin-left:			-16px;
		background-color:		var(--primary);
		padding:				calc(var(--spacing) / 2) calc(var(--spacing) / 2) calc(var(--spacing) / 2) calc(var(--spacing) / 8);
		box-shadow:				-5px 0px 5px 0 #E0E0E0;
	}

	.records > .container
	{
		width:					inherit;
		height:					calc(100%  - var(--spacingtop) - var(--spacingcore));
		position:				fixed;
		overflow-y: 			scroll;
	}

	.images
	{
		display:				block;
	}

	/* Featured Images */
	/*.featured
	{
		max-width:				var(--width);
	}*/

	/* Home */
	.container.home
	{
		max-width:				var(--width);
	}

	/* Navigation */ 
	.desktophide
	{
		display:				none !important;
	}
	
	.phonehide, 
	.mobilehide
	{
		display:				initial !important;
	}

	h1
	{
		margin-top:				0;
	}
	
	.onequarter
	{
		grid-template-columns:	auto 1fr;
		grid-gap:				0;
		height:					calc(100vh - var(--spacingtop));
	}
	
	.onequarter > div:first-child
	{
		padding-top:			var(--spacingcore);
	}
	
	.onethird
	{
		grid-template-columns:	1fr auto auto;
		grid-gap:				0;
	}
	
	.onethird > section, 
	.onethird > aside
	{
		padding-top:			var(--spacingcore);
	}


	/*	======================================================================================================================================================================================
		Modules
		====================================================================================================================================================================================== */	
	/* Client */
	.domains
	{
		width:					unset;
	}
}