@darkgray: 		#dadada;
@lightgray: 	#f8f8f8;
@padding: 		10px;
@form-padding: 	@padding / 2;
@border: 		1px;
@black: 		#555;
@blue1:			#0099bb;
@blue2:			#006699;
@blue3: 		#114466;
@transition-speed: 0.25s;
@form-font-size: 0.85em;

html, body, button, input, select, textarea
{
    font-family: 'Lato', sans-serif;
	color: @black;
}

html,
body
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: relative;
}

html,
body,
.ui-widget
{
	font-size: 1em;
}

body
{
	overflow-x: hidden;
}

a,a:hover
{
	cursor: pointer;
	text-decoration: none;
}

.ui-widget-content a.btn
{
	color: white;
}

h1
{
	font-family: "Rajdhani";
	font-weight: bold;
	text-align: center;
}

h2,h3,h4,h5,h6
{
	font-family: "Rajdhani";
	font-weight: bold;
}

img
{
	max-width: 100%;
	height: auto !important;
	border: none;
}

img.lazy
{
	opacity: 0;
	transition: opacity 0.15s linear;
}

hr
{
	border: 0;
    height: 0;
    width: 80%;
    border-top: 1px solid #000;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

canvas
{
	-webkit-touch-callout: none;
	user-select: none;
}

.smalltext,
.dataTables_wrapper table,
.menu-search-result .li span,
.action-panel button,
.help,
.nvfinder-filename,
.nvfinder-info
{
	font-size: 0.8em;
}

.cropit-preview,
.colour-analysis-preview
{
	font-size: 2em;
}

.inline,
.dataTables_wrapper label
{
	display: inline;
}

.clear
{
	clear: both;
}

.bold
{
	font-weight: bold;
}

.nobold
{
	font-weight: normal;
}

.red
{
	color: red;
}

.orange
{
	color: orange;
}

.green
{
	color: green;
}

table
{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.dataTables_wrapper table
{
	width: 100% !important;
	table-layout: auto;
}

table td
{
	vertical-align: top;
}

.dataTables_wrapper table td
{
	vertical-align: middle;
}

footer
{
	margin: @padding;
	text-align: center;
	padding: @padding;
	border-top: 1px solid @darkgray;
	font-size: 0.75em;
}

.nowrap
{
	white-space: nowrap;
}

sup.required
{
	color: red;
	font-weight: bold;
}

.loginbox
{
	max-width: 350px;
	margin: 0 auto;
}

.search-filters
{
	text-align: right;
	margin-bottom: 10px;
}

legend
{
	font-size: 1.25em;
	font-weight: bold;
}

.hidden,
.dialog,
.no-menu-drop,
.active-menu-drop .menu-drop,
.colour-analysis-result,
.nvfinder-menu,
.nvfinder-upload-dialog legend .fa.hidden,
.nvfinder-upload-dialog legend .far.hidden,
.nvfinder-upload-dialog legend .fal.hidden,
.nvfinder-upload-dialog legend .fas.hidden,
.nvfinder-upload-dialog legend .fab.hidden,
.icon-list .hidden,
.action-panel button.hidden
{
	display: none;
}

.search-filter
{
	text-align: right;
}

.dataTables_filter input
{
	width: 219px;
}

.search-filter select
{
	width: 225px;
}

.module_placeholder
{
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background: rgb(200, 200, 200);
	height: 50px;
	line-height: 50px;
	text-align: center;
	white-space: nowrap;
	border: 1px dashed @black;
	border-radius: 3px;
}

th
{
	font-weight: bold;
	text-align: left;
}

.strikethrough
{
	text-decoration: line-through;
}

.sites
{
	text-align: center;
	margin: 10px;
	padding: 5px;
}

.sites label
{
	display: inline;
}

.menu-items
{
	width: 100%;
}

.cke_dialog,
.cke_dialog_body,
.cke_dialog_contents
{
	min-width: 300px;
}

// .thumbnails.image_picker_selector
// {
// 	overflow: auto;
// 	list-style-image: none;
// 	list-style-position: outside;
// 	list-style-type: none;
// 	padding: 0;
// 	margin: 0;
// }

// .thumbnails.image_picker_selector ul
// {
// 	overflow: auto;
// 	list-style-image: none;
// 	list-style-position: outside;
// 	list-style-type: none;
// 	padding: 0;
// 	margin: 0;
// 	display: table;
// }

// .thumbnails.image_picker_selector .group_title
// {
// 	float: none;
// }

// .thumbnails.image_picker_selector li
// {
// 	height: 174px;
// 	display: table-row;
// }

// .thumbnails.image_picker_selector li .thumbnail
// {
// 	box-sizing: content-box;
// 	padding: 6px;
// 	border: 1px solid #dddddd;
// 	width: 200px;
// 	height: 125px;
// 	text-align: center;
// 	display: table-cell;
// 	vertical-align: middle;
// }

// .thumbnails.image_picker_selector li .thumbnail.selected
// {
// 	background: #0088cc;
// }


// .thumbnails.image_picker_selector li img
// {
// 	max-width: 200px;
// 	max-height: 125px;
// 	vertical-align: middle;
// }

.shop_remove_photo
{
	display: inline-block;
	background: none;
}

// .shop_remove_photo:hover
// {
// 	background: url(/images/remove-photo.png) no-repeat top left;
// 	background-size: 200px 125px;
// }

.shop_remove_photo:hover img
{
	opacity: 0.25;
}

.image-picker
{
	width: 100%;
	margin-bottom: 10px;
}

.order-info label
{
	display: inline-block;
	width: 300px;
}

.menu-search-result
{
	display: none;
}

.graybg
{
	background: @lightgray;
}

.bluebg
{
	background: @blue3;
}

/* Hide file input */
.cropit-image-input
{
	visibility: hidden;
}

.cropit-module,
.image-cropper
{
	text-align: center;
}

.cropit-preview
{
	margin: 0 auto;
	background-color: @lightgray;
	// background-image: none;
	color: @black;
	position: relative;
	// overflow: hidden;
}

.cropit-preview.selected,
.cropit-preview.selected .fa,
.cropit-preview.selected .far,
.cropit-preview.selected .fal,
.cropit-preview.selected .fas,
.cropit-preview.selected .fab
{
	color: #fff;
	text-shadow: -1px -1px 5px @black, 1px -1px 5px @black, -1px 1px 5px @black, 1px 1px 5px @black;
}

.cropit-preview.selected:hover
{
	cursor: move;
}

.cropit-preview-background
{
	opacity: 0.1;
}

.image-cropper-controls
{
	position: relative;
	z-index: 2;
}

.image-cropper
{
	overflow: hidden;
	padding: 25px 0;
}

.cropit-preview-background,
.cropit-preview-image
{
	max-width: none;
}

.photo-frame
{
	box-sizing: content-box;
	width: 300px;
	height: 300px;
	border-radius: 300px;
	border: 5px solid @blue1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	margin: @padding auto;
}

.install-list.fa-ul
{
	text-align: left;
	margin: 0 auto;
	display: inline-block;
	color: @black;
	font-weight: normal;
}

.pre
{
	font-family: monospace;
    white-space: pre;
}

.dragme
{
	cursor: move;
}

.colour-analysis-preview
{
	box-sizing: content-box;
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	border: 2px solid transparent;
}
.colour-analysis-preview:hover
{
	cursor: pointer;
}
.colour-analysis-clicked
{
	border: 2px solid red;
}

.click:hover
{
	cursor: pointer;
}

.nvfinder-menu
{
	position: absolute;
	background: @lightgray;
	border: 1px solid @darkgray;
}

.nvfinder-container
{
	box-sizing: border-box !important	;
	background: @lightgray;
	border: 1px solid @darkgray;
	padding: @padding/2;
	margin: @padding/2;
	text-align: center;
	height: 100%;
	overflow: hidden;
}

.nvfinder-container a
{
	display: block;
}

.nvfinder-column
{
	height: 500px;
	max-height: 100%;
	max-width: 100%;
	overflow-y: auto;
}

.nvfinder-column2
{
	height: 625px;
}

.cropit-preview-image-container
{
	border: 1px solid @darkgray;
}

.cropit-preview-image-container:hover
{
	cursor: move;
}

.dropzone
{
	box-sizing: content-box;
	width: 300px;
	max-width: 100%;
	height: 150px;
	line-height: 150px;
	text-align: center;
	border: 2px dashed @darkgray;
	border-radius: 5px;
	margin: 0 auto;
	overflow: hidden;
	display: block;
}

.dropzone.hover
{
	background-color: @lightgray;
	// border: 2px dashed @darkgray;
}

.nvfinder-upload-dialog audio[controls]
{
	width: 100%;
}

.nvfinder-directories ul,
.nvfinder-directories ul li
{
	margin: 0;
	padding: 0;
}

.nvfinder-directories ul
{
	margin-left: 25px;
}

.nvfinder-directories a
{
	color: @black;
	font-weight: normal;
}

.nvfinder-column legend button
{
	float: right;
	margin: 0;
	padding: 0;
	margin-left: 3px;
}

.document-edit p
{
	margin-top: 0;
	margin-bottom: @padding * 2;
}

.nvfinder-upload-dialog legend .fa,
.nvfinder-upload-dialog legend .far,
.nvfinder-upload-dialog legend .fal,
.nvfinder-upload-dialog legend .fas,
.nvfinder-upload-dialog legend .fab,
.nvfinder-upload-dialog legend progress
{
	float: right;
}

.action-panel button
{
	display: inline-block;
	box-sizing: border-box;
	width: 48%;
	margin: 1%;
	padding: 5px;
	text-align: left;
	white-space: normal;
}

.help::before
{
	font-family: "Font Awesome 5 Free";
	content: "\f05a";
	font-style: normal;
	margin-right: @padding/2;
	font-weight: 900;
}

.nvfinder-filename
{
	color: @black;
	font-weight: normal;
}

.nvfinder-info
{
	color: lighten(@black, 20%);
	font-weight: normal;
}

.nvfinder-image
{
	height: 150px;
	text-align: center;
}

.nvfinder-image img
{
	max-height: 150px;
}

.cke_dialog_ui_button.center
{
	display: block;
	margin: 0 auto;
	width: 50%;
	height: 50px;
	line-height: 50px;
}

// Style the same as <legend>
.ui-widget-header
{
	border: none;
	background: none;
	padding: .3em 0;
	margin-bottom: .3em;
	border-bottom: 1px solid #e5e5e5;
	border-radius: 0;
}

.ui-dialog .ui-dialog-title
{
	font-weight: normal;
}

figure
{
	box-sizing: border-box;
	border: 1px solid @darkgray;
	border-bottom: none;
	padding: @padding/2;
	font-size: 0.75em;
	display: table !important;
}

figure img
{
	display: block;
	width: 100%;
}

figcaption
{
	display: table-caption !important;
	caption-side: bottom;
	box-sizing: border-box;
	border: 1px solid @darkgray;
	border-top: none;
	padding: @padding/2;
}

.accordion > div
{
	display: none;
}
.accordion > legend > .fa,
.accordion > legend > .far,
.accordion > legend > .fal,
.accordion > legend > .fas,
.accordion > legend > .fab
{
	transition: transform 0.5s ease-in-out;
}

.accordion > legend:hover
{
	cursor: pointer;
}

body.dragging, body.dragging *
{
  	cursor: move !important;
}

.dragged
{
	display: none;
  	position: absolute;
  	opacity: 0.5;
  	z-index: 2000;
}

.sortable,
.sortable ol,
.sortable li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.sortable
{
	margin: 0 @padding * 2;
}

.sortable li
{
	padding: @padding/2;
	margin: @padding/2 0;
	border: 1px dashed @darkgray;
}

.sortable li:hover
{
	cursor: move;
}

.sortable ol li
{
	margin-left: @padding * 4;
}

.sortable .placeholder
{
  	position: relative;
  	margin: 0;
  	padding: 0;
  	border: none;
  	background: green;
  	height: 3px;
}

.sortable-images
{
	margin: 0;
	padding: 0;
	display: block;
	list-style: none;
}

.sortable-images li
{
	margin: 0;
	padding: 3px;
	display: inline-block;
	list-style: none;
}

.sortable-images .ui-sortable-placeholder
{
	box-sizing: content-box;
	border: 1px dashed #000;
	background: @darkgray;
	margin: 0;
	padding: 3px;
	width: 200px;
	height: 125px;
	visibility: visible !important;
}

.sortable-images .ui-sortable-helper
{
	box-sizing: content-box;
	opacity: 0.75;
	border: 1px dashed #000;
	width: 200px;
	height: 125px;
}

/* Example tokeninput style #2: Facebook style */
ul.token-input-list-facebook {
    overflow: hidden;
    // height: auto !important;
    // height: 1%;
    // width: 250px;
    // border: 1px solid @darkgray;
    // border-radius: 4px;
    cursor: text;
    font-size: 12px;
    // font-family: Verdana;
    min-height: 1px;
    z-index: 999;
    margin: 0;
    padding: .1em;
    // background-color: #fff;
    list-style-type: none;
    clear: left;
    // display: inline-block;
    box-sizing: border-box;
}

ul.token-input-list-facebook li input {
    border: 0;
    width: 100px;
    padding: 3px 8px;
    background-color: white;
    margin: 2px 0;
    -webkit-appearance: caret;
}

li.token-input-token-facebook {
    overflow: hidden;
    height: auto !important;
    height: 15px;
    margin: 3px;
    padding: 1px 3px;
    background-color: #eff2f7;
    color: #000;
    cursor: default;
    border: 1px solid #ccd5e4;
    font-size: 11px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    white-space: nowrap;
}

li.token-input-token-facebook p {
    display: inline;
    padding: 0;
    margin: 0;
}

li.token-input-token-facebook span {
    color: #a6b3cf;
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
}

li.token-input-selected-token-facebook {
    background-color: #5670a6;
    border: 1px solid #3b5998;
    color: #fff;
}

li.token-input-input-token-facebook {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li.token-input-input-token-facebook input[type='text']:focus{
    background: #fff;
}

div.token-input-dropdown-facebook {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 11px;
    font-family: Verdana;
    z-index: 1;
}

div.token-input-dropdown-facebook p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown-facebook ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown-facebook ul li {
    background-color: #fff;
    padding: 3px;
    margin: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
    background-color: #3b5998;
    color: #fff;
}

textarea.cke_source
{
	white-space: pre-wrap;
}

.content
{
	margin-top: 44px;
}

.nv-sidebar
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}

.nv-sidebar div
{
	vertical-align: middle;
}

.nv-sidebar a
{
	margin: 0;
	padding: .625em @padding;
	display: inline-block;
}

.nv-sidebar-content
{
	position: fixed;
	width: 98%;
	margin: 0 1%;
	z-index: 98;
	left: 0;
	transition: transform 0.5s ease-in-out;
	transform: translate(0, -100%);
	border-top: none;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

.nv-sidebar-content-open
{
	transform: translate(0, 0);
	top: 38px;
}

.nv-sidebar-content-open a
{
	font-size: 0.85em;
}

.nv-sidebar
{
	color: #555;
	background: #006699;
}

.nv-sidebar a,
.nv-sidebar a:hover,
.nv-sidebar .fas,
.nv-sidebar .far,
.nv-sidebar .fab,
.nv-sidebar .fal
{
	color: #f8f8f8;
}

.nv-sidebar-content
{
    background: #fff;
    border: 2px solid #006699;
}

input.toggle_value
{
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border: none;
	background: #fff;
	color: #fff;
	display: block;
}

.ui-dialog .ui-dialog-titlebar-close
{
	display: none;
}

.dropzone
{
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
}

.product-thumbnail
{
	border: 3px solid transparent;
	box-sizing: border-box;
}

.main_image
{
	border: 3px solid red;
}

.image-preview
{
	position: relative;
}
.image-primary
{
	position: absolute;
	top: 5px;
	left: 20px;
	background: #fff;
	border-radius: 3px;
	font-size: 1.5em;
}
.image-delete
{
	position: absolute;
	top: 5px;
	right: 20px;
	background: #fff;
	border-radius: 3px;
	font-size: 1.5em;
}

@media (max-width:480px)
{
	body
	{
		font-size: 0.75em;
	}

	.dataTables_filter input
	{
		width: 50px;
	}

	.search-filter select
	{
		width: 50px;
	}

	.tabs .ui-tabs-panel,
	.tabs .ui-widget-content
	{
		padding: 10px;
	}

	/* allow buttons to wrap on mobile devices */
	.nowrap
	{
		white-space: normal;
	}
	.nowrap button,
	.nowrap a
	{
		margin-bottom: 5px;
	}
}
