/*----------------------------------------------------------------------------
	MARK: Font Face
----------------------------------------------------------------------------*/
@font-face {
	font-family: Montserrat;
	src: url("fonts/Montserrat-Regular.ttf");
	font-style:normal;
	font-weight:normal;
}
@font-face {
	font-family: Montserrat;
	src: url("fonts/Montserrat-Italic.ttf");
	font-style:italic;
	font-weight:normal;
}
@font-face {
	font-family: Montserrat;
	src: url("fonts/Montserrat-Bold.ttf");
	font-style:normal;
	font-weight:bold;
}
@font-face {
	font-family: Montserrat;
	src: url("fonts/Montserrat-BoldItalic.ttf");
	font-style:italic;
	font-weight:bold;
}
@font-face {
	font-family: Montserrat;
	src: url("fonts/Montserrat-ExtraLight.ttf");
	font-style:normal;
	font-weight:200;
}
@font-face {
	font-family: Montserrat;
	src: url("fonts/Montserrat-ExtraLightItalic.ttf");
	font-style:italic;
	font-weight:200;
}



/*----------------------------------------------------------------------------
	MARK: Common classes
----------------------------------------------------------------------------*/
@media only screen and (min-width : 320px) and (max-width : 824px) and (orientation : portrait) {
	div.vslogo {
		position:absolute;
		top:10px;
		left:10px;
		right:10px;
		height:40%;
		background-size:contain;
		background-repeat:no-repeat;
	}
	div.login {
		position:absolute;
		bottom:10px;
		right:10px;
		left:10px;
		height:auto;
		max-height:70%;
		overflow-y:auto;
		overflow-x:hidden;
	}
	form#loginform label {
		margin:10px;
		padding-top:3px;
		width:30%;
		text-align:right;
		float:left;
	}
	form#loginform input.ui-input-text {
		margin:10px;
		width:50%;
		float:right;
	}
	form#userloginform label {
		margin:10px;
		padding-top:3px;
		text-align:left;
		display:block;
	}
	form#userloginform input.ui-input-text {
		margin:10px;
		width:calc(100% - 30px);
		display:block;
	}
	form#loginform input.ui-button,
	form#userloginform input.ui-button {
		display:block;
		margin:10px;
		float:right;
		clear:both;
	}
}

@media only screen and (min-width : 320px) and (max-width : 824px) and (orientation : landscape) {
	/* iPhone 5 Landscape */
	div.vslogo {
		position:absolute;
		top:10px;
		left:10px;
		width:40%;
		height:40%;
		background-size:contain;
		background-repeat:no-repeat;
	}
	div.login {
		position:absolute;
		bottom:10px;
		right:10px;
		width:50%;
		height:auto;
		max-height:calc(100% - 20px);
		overflow-y:auto;
		overflow-x:hidden;
	}
	form#loginform label {
		margin:10px;
		padding-top:3px;
		width:30%;
		text-align:right;
		float:left;
	}
	form#loginform input.ui-input-text {
		margin:10px;
		width:50%;
		float:right;
	}
	form#userloginform label {
		margin:10px;
		padding-top:3px;
		text-align:left;
		display:block;
	}
	form#userloginform input.ui-input-text {
		margin:10px;
		width:calc(100% - 30px);
		display:block;
	}
	form#loginform input.ui-button,
	form#userloginform input.ui-button {
		display:block;
		margin:10px;
		float:right;
		clear:both;
	}
}

@media screen and (min-width : 824px) {
	/* Everything else */
	div.vslogo {
		position:absolute;
		top:20px;
		left:20px;
		right:20px;
		height:40%;
		background-size:contain;
		background-repeat:no-repeat;
	}
	div.login {
		position:absolute;
		bottom:20px;
		right:20px;
		width:auto;
		height:auto;
		white-space:nowrap;
		max-height:70%;
		overflow-y:auto;
		overflow-x:hidden;
	}
	div.login p {
		white-space:normal;
	}
	form#loginform label {
		margin:15px 10px 15px 25px;
		width:auto;
		display:inline-block;
	}
	form#loginform input.ui-input-text {
		display:inline-block;
		width:160px;
		margin-bottom:15px;
	}
	form#userloginform label {
		margin:10px;
		display:block;
	}
	form#userloginform input.ui-input-text {
		display:block;
		width:380px;
		margin:10px;
	}
	form#loginform input.ui-button,
	form#userloginform input.ui-button {
		margin:10px 20px;
		display:inline-block;
	}
}


html, body {
	--mobile:false;
	font-family: Montserrat, sans-serif;
	margin:0px;
	height:100%;
	width:100%;
	overflow:hidden;
	-webkit-overflow-scrolling: touch;
	transform:translate3d(0px,0px,0px);
}

a, a:visited {
	color:black;
}

h1, h2, h3 {
	font-family: Montserrat, sans-serif;
	font-weight: bold;
}

div.returntokiosk {
	position:fixed;
	left:calc(50% - 128px);
	top:calc(50% - 64px);
	height:128px;
	width:256px;
	background-image:url("/images/loader1.gif");
	background-position:center;
	background-repeat:no-repeat;
	background-color:white;
	padding:12px;
	border-radius:6px;
	box-shadow:2px 2px 8px rgba(0, 0, 0, 0.4);
}
img.loader {
	margin:50px;
}
div.loader {
	position:absolute;
	left:calc(50% - 64px);
	top: calc(50% - 32px);
	width:128px;
	height:64px;
	background-image:url("/images/loader1.gif");
	background-position:center;
	background-repeat:no-repeat;
	background-color:white;
	padding:12px;
	border-radius:6px;
	border:1px solid #A9A6A4;
	box-shadow:2px 2px 8px rgba(0, 0, 0, 0.4);
	z-index:9999;
}

@media screen and (min-width : 900px) {
	div.viz {
		margin:1em;
		position:relative;
		display:inline-block;
		vertical-align:top;
		width:calc(50% - 2em - 3px);
	}
}
@media screen and (max-width: 899px) {
	div.viz {
		position:relative;
		margin:1em auto;
		display:block;
		width:100%;
	}
}
div.viz.centre {
	display:block;
	width:auto;
	margin:1em;
	text-align:center;
}
div.viz.centre div.midinstructions-sm {
	display:inline-block;
	vertical-align:top;
	height:200px;
	width:auto;
	margin:0px;
}
div.viz.centre div.reportwrapper {
	position:relative;
	display:inline-block;
	vertical-align:top;
	height:220px;
	width:400px;
	padding:0px;
	margin:0px;
}

div.grtooltip {
	padding:5px;
}
div.grtooltip label {
	display:inline-block;
	width:120px;
}

.report-header {
	font-weight:bold;
	font-size:0.85em;
	height:24px;
}

.report-utils {
	float:left;
	overflow: visible;
	position:relative;
	height:20px;
	width:auto;
	line-height:20px;
	padding:2px 15px;
	cursor: pointer;
}
.report-utils::before {
	display:inline-block;
	vertical-align:middle;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: "\f1de";
	font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
  	margin-right:8px;
}
.report-utils:hover {
	background-color: rgba(0, 0, 0, 0.3);
	color:white;
}
.report-params {
	position: absolute;
	background-color:#EFEFEF;
	top: calc(100% + 15px);
	height: auto;
	width: auto;
	border: 1px solid #666666;
	border-radius: 0.3em;
	padding:0.5em;
	box-shadow:2px 2px 16px rgba(0, 0, 0, 0.5);
	font-weight:normal;
}
.report-params.left {
	left: 10px;
}
.report-params.right {
	right: 10px;
}
.report-params.left::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 32px;
	height: 0px;
	width: 0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid #666666;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.report-params.left::after {
	content: "";
	position: absolute;
	bottom: calc(100% - 2px);
	left: 32px;
	height: 0px;
	width: 0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid #EFEFEF;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.report-params.right::before {
	content: "";
	position: absolute;
	bottom: 100%;
	right: 32px;
	height: 0px;
	width: 0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid #666666;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.report-params.right::after {
	content: "";
	position: absolute;
	bottom: calc(100% - 2px);
	right: 32px;
	height: 0px;
	width: 0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid #EFEFEF;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.report-item {
	display: block;
	white-space:nowrap;
	margin:0.5em;
}
.report-item label {
	display:inline-block;
	vertical-align:middle;
	width:7em;
	margin: 0.5em;
}
.report-item input {
	display: inline-block;
	vertical-align: middle;
	margin-top: 0.3em;
}
.report-buttons {
	white-space: nowrap;
	text-align:right;
	min-width:320px;
}
.report-params fieldset {
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.report-params .datesurround {
	position:relative;
	display:inline-block;
}
.report-params .datepicker-in,
.report-params .datepicker-out {
	font-size:0.7em;
}

.report-params .datecontrols {
	position:absolute;
	right:0px;
	top:-12px;
}

.report-params .datecontrols button {
	padding:3px 5px ! important;
}
.report-params .datecontrols button img {
	display:inline-block;
	max-height:20px;
	max-width:20px;
	vertical-align:top;
	margin-top:-1px;
}
.report-params .datecontrols button span {
	display:none;
}

.report-export {
	float:right;
	overflow: visible;
	position:relative;
	height:20px;
	width:auto;
	line-height:20px;
	padding:2px 15px;
	cursor: pointer;
}
.report-export::after {
	display:inline-block;
	vertical-align:middle;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: "\f56e";
	font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
  	margin-left:8px;
}
.report-export:hover {
	background-color: rgba(0, 0, 0, 0.3);
	color:white;
}


div#details_chart {
	height:auto;
	width:100%;
	background-color:white;
}
#details_chart td.totals {
	border-top:1px solid #555555;
	border-bottom:1px solid #555555;
	font-weight:bold;
	text-align:right;
}





div.loginheader {
    font-size:1.25em;
    text-align:left;
    padding:5px;
    margin-bottom:10px;
    background-color:rgba(15, 0, 0, 0.5 );
	color:white;
}
div.loginerr {
    color:#BF1E2E;
	text-align:center;
	padding-left:20px;
	margin-bottom:10px;
}
a.createaccount {
	float:right;
	font-size:0.85em;
	color:#CCC7C5;
	margin-right:10px;
}
p.hint {
	font-style:italic;
	font-size:0.85em;
	color:rgba(0, 0, 0, 0.8);
}
.warning {
	color:#DE2D1F;
}

#user_menu {
	margin-top:20px;
	margin-right:20px;
	border:1px solid transparent;
	background: transparent;
}
#user_menu .ui-menu-item-wrapper {
	padding:3px .4em ! important;
}


div.facebook_button {
	position:relative;
	background-color:#4267B2;
	height:29px;
	padding:5px;
	margin-bottom:10px;
	color:white;
	background-image:url("/images/fb_logo_white.png");
	background-repeat:no-repeat;
	background-position:5px 5px;
	text-align:center;
	line-height:29px;
	cursor:pointer;
	max-width:320px;
}

div.facebook_button:after {
	position:absolute;
	left:105%;
	top:5px;
	bottom:5px;
	line-height:29px;
	font-size:0.85em;
	width:auto;
	color:black;
	content: "or...";
}

div.facebook_button.dim {
	filter: saturate(50%) opacity(50%);
	pointer-events: none;
}

div.login-instructions {
	font-size:0.85em;
	color:black;
	margin-top:5px;
	margin-bottom:10px;
	text-align:left;
}


div.resto-background {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:-10;
    background-color:transparent;
    opacity:0.2;
    background-size:100% 100%;
}

.vs-page-header {
    text-align:center;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:52px;
    z-index:100;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
}
.ui-header-left {
    float:left;
    margin-left:10px;
}
.ui-button.ui-header-left,
.ui-header-left .ui-button {
	margin:10px;
}
.ui-header-right {
    float:right;
    margin-right:10px;
}
.ui-button.ui-header-right,
.ui-header-right .ui-button {
	margin:10px;
}
.ui-widget-header h1 {
    font-size:110%;
    vertical-align:middle;
    text-shadow:1px 1px 2px rgba(255, 255, 255, 0.4);
    margin:15px auto;
}
.ui-header-clear {
    clear:both;
}

.ui-content {
    position:absolute;
    top:68px;
    left:8px;
    right:8px;
    bottom:8px;
    overflow:auto;
}
.ui-zero-content {
	position:absolute;
	top:68px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:#FFFBEE;
	perspective:800px;
	-webkit-perspective:800px
}
.clearoverlay {

}
.ui-tabs {
    position:absolute;
    top:60px;
    left:8px;
    right:8px;
    bottom:8px;
    overflow:hidden;
}
.ui-tabs .ui-tabs-nav {
    position:absolute;
    top:3px;
    left:3px;
    right:3px;
    height:auto;
}
.ui-tabs-panelholder {
    position:absolute;
    top:47px;
    left:0px;
    right:0px;
    bottom:0px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    outline:none ! important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor::before {
    content: url("images/loader2.gif");
    margin-right:5px;
}
.ui-autocomplete-input.ui-autocomplete-loading,
.bootstrap-tagsinput.ui-autocomplete-loading {
	background-image: url("images/loader2.gif");
	background-position:98% center;
	background-repeat: no-repeat;
}
input.processing {
	background-image: url("images/loader2.gif");
	background-position:98% center;
	background-repeat: no-repeat;
}
.processing::before {
    content: url("images/loader2.gif");
    display:inline-block;
    height:11px;
    width:16px;
    vertical-align:top;
    margin-right:10px;
}
.fieldcontain > label, .fieldcontain span.nolabel {
    display:inline-block;
    vertical-align:top;
    width:200px;
    margin:10px 10px;
	white-space: nowrap;
}
.twocolumn-left .fieldcontain > label,
.twocolumn-right .fieldcontain > label {
	width:150px;
}
.fieldcontain.shortlabel > label, .fieldcontain.shortlabel span.nolabel {
	width:20%;
}
.fieldcontain span.afterinput {
    display:inline-block;
    vertical-align:top;
    margin:10px 0px;
	white-space: nowrap;
}
.fieldcontain span.afterinputsmall {
    display:inline-block;
    vertical-align:top;
    margin:10px 0px;
	white-space: nowrap;
	font-size:0.8em;
	font-style:italic;
}
.fieldcontain span.beforeinput {
    display:inline-block;
    vertical-align:top;
    margin:10px 0px 10px 10px;
	white-space: nowrap;
}

label.cblabel {
	width:auto;
	margin:2px;
}
form#password_form .fieldcontain > label {
	width:calc(50% - 41px);
}
form#password_form .fieldcontain > input[type="password"] {
	width:calc(40% - 41px);
}
.fieldcontain > span {
	display:inline-block;
	vertical-align:top;
	margin:7px 10px;
}
.fieldcontain > input[type="text"],
.fieldcontain > input[type="password"],
.fieldcontain > input[type="date"],
.fieldcontain > input[type="tel"],
.fieldcontain > input[type="url"],
.fieldcontain > input[type="email"],
.fieldcontain > textarea,
.fieldcontain > .ui-buttonset,
.fieldcontain > .bootstrap-tagsinput,
.fieldcontain > select {
    vertical-align:top;
    display:inline-block;
    width:calc(100% - 290px);
    margin:7px 10px;
}
.fieldcontain > .ui-selectmenu-button.ui-button {
	vertical-align:top;
	display:inline-block;
	width: calc(70% - 2.4em - 20px);
	margin:2px 10px;
}
.fieldcontain.shortlabel > input[type="text"],
.fieldcontain.shortlabel > input[type="password"],
.fieldcontain.shortlabel > input[type="date"],
.fieldcontain.shortlabel > input[type="tel"],
.fieldcontain.shortlabel > input[type="url"],
.fieldcontain.shortlabel > input[type="email"],
.fieldcontain.shortlabel > textarea,
.fieldcontain.shortlabel > .ui-buttonset,
.fieldcontain.shortlabel > .bootstrap-tagsinput,
.fieldcontain.shortlabel > select {
    width:calc(80% - 60px);
    margin:7px 10px;
}

.fieldcontain.shortselect > .ui-selectmenu-button.ui-button {
	width: auto ! important;
}
.fieldcontain > input[type="file"] {
    vertical-align:top;
    display:inline-block;
    width:calc(100% - 290px);
    margin:10px;
}

.fieldcontain > div.showhtml {
	display:inline-block;
    vertical-align:top;
    width:calc(100% - 290px);
    margin:7px 0px;
	padding:3px;
	border:1px solid rgba(0, 0, 0, 0.4);
	min-height:22px;
}
.fieldcontain > div.multiinput {
	display:inline-block;
	position:relative;
    vertical-align:top;
    width:calc(100% - 272px);
    margin:7px 10px ! important;
}
div.multiinput input {
	margin:6px 0px;
}

form#resto_admin_form .fieldcontain label {
	margin-left:2em;
}
form#resto_admin_form .fieldcontain label i {
	margin-right:1em;
}

/* We want to disable Chrome's standard date picker in favor of our own */
input::-webkit-calendar-picker-indicator,
input::-webkit-inner-spin-button {
    display: none;
}


.fieldcontain > input[type=checkbox], .fieldcontain > input[type=radio] {
	width:auto ! important;
	margin:10px;
}

.ui-buttonset .ui-button {
    margin-right: -0.5em;
}

.ui-selectmenu-scroll {
	max-height:600px;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	overflow-x:hidden;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='url'],
input[type='tel'],
textarea,
.bootstrap-tagsinput {
    background-color:white;
    border: 1px solid #AAAAAA;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}
input[type='text']:disabled,
input[type='email']:disabled,
input[type='password']:disabled,
input[type='number']:disabled,
input[type='date']:disabled,
input[type='url']:disabled,
input[type='tel']:disabled,
textarea:disabled,
.bootstrap-tagsinput:disabled {
    border: 1px solid #EEEEEE;
    box-shadow:none;
}
input[type='text'][readonly],
input[type='email'][readonly],
input[type='password'][readonly],
input[type='number'][readonly],
input[type='date'][readonly],
input[type='url'][readonly],
input[type='tel'][readonly],
textarea[readonly],
.bootstrap-tagsinput[readonly] {
    border: 1px solid #DDDDDD;
    box-shadow:none;
}
input[type='text']:disabled:focus,
input[type='email']:disabled:focus,
input[type='password']:disabled:focus,
input[type='number']:disabled:focus,
input[type='date']:disabled:focus,
input[type='url']:disabled:focus,
input[type='tel']:disabled:focus,
textarea:disabled:focus,
.bootstrap-tagsinput:disabled:focus,
.bootstrap-tagsinput.ui-focus:disabled {
    border: 1px solid #DDDDDD;
    box-shadow:none;
}
input[type='text'][readonly]:focus,
input[type='email'][readonly]:focus,
input[type='password'][readonly]:focus,
input[type='number'][readonly]:focus,
input[type='date'][readonly]:focus,
input[type='url'][readonly]:focus,
input[type='tel'][readonly]:focus,
textarea[readonly]:focus,
.bootstrap-tagsinput[readonly].ui-focus {
    border: 1px solid #DDDDDD;
    box-shadow:none;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='url']:focus,
input[type='tel']:focus,
textarea:focus,
.bootstrap-tagsinput:focus,
.bootstrap-tagsinput.ui-focus
 {
    outline:none ! important;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2), 0px 0px 7px #E1C100;
}
input[type='range']:focus {
	outline:none ! important;
}
.ui-checkboxradio-icon-space {
	display:inline-block;
	width:10px;
}

.ui-button:focus,
.ui-tabs .ui-tabs-nav li:focus,
.mce-panel:focus,
.ui-visual-focus {
	outline:none ! important;
	box-shadow: 0px 0px 7px #E1C100;
}

.bootstrap-tagsinput {
	line-height:1.3;
}
.bootstrap-tagsinput > input[type='text'] {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: auto !important;
    max-width: inherit;
}
.bootstrap-tagsinput > input[type='text']:focus {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput .tag {
    margin-right:2px;
    color: white;
    background-color:#888888;
    border-radius:4px;
	white-space:nowrap;
    padding:0px 2px;
}
.bootstrap-tagsinput / [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
    position:relative;
    top:-2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 6px;
    font-size:smaller;
}
.bootstrap-tagsinput .tag:hover {
    background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.27));
}
.bootstrap-tagsinput .tag:hover:active {
    background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.52));
}

.typeahead.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    max-height:650px;
    overflow-x:hidden;
    overflow-y:auto;
    padding: 0px;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.typeahead .dropdown-item {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    text-decoration:none;
    color: #333333;
    white-space: nowrap;
}

.typeahead .dropdown-item:hover,
.typeahead li.active .dropdown-item,
.typeahead .dropdown-item:focus {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
	background-color: #F4EB9E;
	color: #140f06;
}

.green-attention {
	border: 1px solid #48864A;
	background-color: #81CC65;
	background-image: linear-gradient(to right, #81CC65 0%, #81CC65 30%, #459427 50%, #81CC65 70%, #81CC65 100%);
	background-size: 200% 100%;
	animation: shimmer 3s linear infinite;
	-webkit-animation: shimmer 3s linear infinite;
	color: #222222;
}
.red-attention {
	border: 1px solid #8B3C3C;
	background-color: #D26868;
	background-image: linear-gradient(to right, #D26868 0%, #D26868 30%, #A91C1C 50%, #D26868 70%, #D26868 100%);
	background-size: 200% 100%;
	animation: shimmer 3s linear infinite;
	-webkit-animation: shimmer 3s linear infinite;
	color: #222222;
}
.green-attention a,
.red-attention a {
	color: #222222;
}
.red-attention i,
.green-attention i {
	margin-right:10px;
}
.green-attention:hover {
	background: #48864A;
	background-image: linear-gradient(to right, #48864A 0%, #48864A 30%, #8FD891 50%, #48864A 70%, #48864A 100%);
	background-size: 200% 100%;
	animation: shimmer 3s linear infinite;
	-webkit-animation: shimmer 3s linear infinite;
	color: white;
}
.red-attention:hover {
	background: #8B3C3C;
	background-image: linear-gradient(to right, #8B3C3C 0%, #8B3C3C 30%, #E93737 50%, #8B3C3C 70%, #8B3C3C 100%);
	background-size: 200% 100%;
	animation: shimmer 3s linear infinite;
	-webkit-animation: shimmer 3s linear infinite;
	color: white;
}

.green-attention .shimmerright,
.red-attention .shimmerright {
	text-shadow:none;
	color:#222222;
	display:inline-block;
	padding:0px;
	height:100%;
	line-height:100%;
	font-weight:bold;
	background-position:left top;
	background-image: linear-gradient(to right, #222222 0%, #222222 30%, #FFFFFF 50%, #222222 70%, #222222 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: shimmer 3s linear infinite;
	-webkit-text-size-adjust: none;
}
.green-attention:hover .shimmerright,
.red-attention:hover .shimmerright {
	background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 30%, #555555 50%, #FFFFFF 70%, #FFFFFF 100%);
}

.ui-state-saveneeded,
.ui-widget-content .ui-state-saveneeded,
.ui-widget-header .ui-state-saveneeded {
	border: 1px solid #48864A;
	background: #81CC65;
	color: #222222;
}
.ui-state-saveneeded a,
.ui-widget-content .ui-state-saveneeded a,
.ui-widget-header .ui-state-saveneeded a {
	color: #222222;
}
.ui-state-saveneeded .ui-icon {
	background-image: url("themes/images/ui-icons_222222_256x240.png");
}
.ui-state-saveneeded:hover,
.ui-widget-content .ui-state-saveneeded:hover,
.ui-widget-header .ui-state-saveneeded:hover {
	background: #48864A;
	color: white;
}

.ui-state-saveneeded .shimmerright {
	text-shadow:none;
	color:#222222;
	display:inline-block;
	padding:0px;
	height:100%;
	line-height:100%;
	font-weight:bold;
	background-position:left top;
	background-image: linear-gradient(to right, #222222 0%, #222222 30%, #FFFFFF 50%, #222222 70%, #222222 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: shimmer 3s linear infinite;
	-webkit-text-size-adjust: none;
}
.ui-state-saveneeded:hover .shimmerright,
.ui-widget-content .ui-state-saveneeded:hover .shimmerright,
.ui-widget-header .ui-state-saveneeded:hover .shimmerright {
	background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 30%, #555555 50%, #FFFFFF 70%, #FFFFFF 100%);
}

@-webkit-keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.fieldcontain > .mapcontainer,
.fieldcontain > .textcontainer,
.fieldcontain > .imgcontainer {
    display:inline-block;
    vertical-align:top;
    width:calc(100% - 280px);
    margin:7px 10px;
    position:relative;
}
.twocolumn-left .fieldcontain > .mapcontainer,
.twocolumn-left .fieldcontain > .textcontainer,
.twocolumn-left .fieldcontain > .imgcontainer,
.twocolumn-right .fieldcontain > .mapcontainer,
.twocolumn-right .fieldcontain > .textcontainer,
.twocolumn-right .fieldcontain > .imgcontainer {
    width:calc(100% - 220px);
}

.map-background {
    background-image:url("images/worldmap.png");
    background-repeat:none;
    background-position:center center;
    background-size:cover;
	background-color:white;
    border:1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4);
}
.fieldcontain > .mapcontainer > input {
    width:100%;
}

.maperr {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    border:1px solid red;
    color:red;
    background-color:white;
    z-index:100;
}

.maptblimg {
	max-height:96px;
	max-width:96px;
}

div.topinstructions {
    padding:1em;
    text-align:center;
	background-image: -webkit-linear-gradient( top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.2) 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.2) 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient( top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.2) 100% ); /* IE10 */
	background-image:      -o-linear-gradient( top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.2) 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient( to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.2) 100% );
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

div.topinstructions p {
	margin:10px;
}

div.midinstructions,
div.midinstructions-sm {
	margin-top:20px;
	margin-bottom:0px;
    padding:10px 20px 10px 20px;
    text-align:left;
	background-image: -webkit-linear-gradient( top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.0) 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.0) 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient( top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.0) 100% ); /* IE10 */
	background-image:      -o-linear-gradient( top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.0) 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient( to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.0) 100% );
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    position:relative;
}

div.midinstructions-sm p,
div.midinstructions-sm li {
    font-size:0.8em;
}

div.midinstructions-sm li {
	margin-bottom:0.8em;
}

div.midinstructions-sm table {
    margin:5px auto 40px auto;
    border-collapse:collapse;
}

div.midinstructions-sm table td.header {
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FAF1CF 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(bottom, #FFFFFF 0%, #FAF1CF 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(bottom, #FFFFFF 0%, #FAF1CF 100% ); /* IE10 */
	background-image:      -o-linear-gradient(bottom, #FFFFFF 0%, #FAF1CF 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient(to top, #FFFFFF 0%, #FAF1CF 100% );
    color:black;
    border:1px solid rgba(0, 0, 0, 0.2);
    padding:4px;
    font-weight:bold;
}

div.midinstructions-sm table td.comment {
    background-color:white;
    color:#666666;
    padding:4px;
    font-size:0.75em;
    border:1px solid #DDDDDD;
}
div.midinstructions-sm table td.comment.note {
    background-color:#E6F2EA;
}
div.midinstructions-sm table td.comment.note::after {
	content:"?";
	font-weight:bold;
	text-align:center;
	width:1.2em;
	height:1.2em;
	display:inline-block;
	color:white;
	background-color:#666666;
	border-radius:50%;
	margin-left:0.25em;
}
div.midinstructions-sm span.note {
	font-weight:bold;
	text-align:center;
	width:1.2em;
	height:1.2em;
	display:inline-block;
	color:white;
	background-color:#666666;
	border-radius:50%;
}

div.endinstructions {
    margin-top:20px;
    padding:10px 0px 10px 0px;
    text-align:center;
	background-image: -webkit-linear-gradient(top, #FAF1CF 0%, #FFFFFF 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #FAF1CF 0%, #FFFFFF 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #FAF1CF 0%, #FFFFFF 100% ); /* IE10 */
	background-image:      -o-linear-gradient(top, #FAF1CF 0%, #FFFFFF 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient(to bottom, #FAF1CF 0%, #FFFFFF 100% );
    border-top: 1px solid #999999;
}


div.winechoice {
    position:relative;
    display:inline-block;
    width:320px;
    height:320px;
    margin:10px;
    vertical-align:middle;
}

div.winechoice img {
    margin-bottom:10px;
}

span.typemenulabel {
    display:inline-block;
    vertical-align:bottom;
}
span.typemenulabelspacer {
    display:inline-block;
    height:54px;
}

tr.clickable {
    cursor:crosshair;
}
tr.hidden-clickable {
	display:none;
}

label.required {
    color:#CC0000;
    text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.3), 1px 1px 0px rgba(255, 255, 255, 0.3);
    position:relative;
 }
 label.required::after {
 	content: "Required";
 	position:absolute;
 	padding:2px 8px;
 	top:-4px;
 	right:0px;
 	background-color:rgba(206, 0, 0, 0.4);
 	color:white;
 	border-radius:8px;
 	visibility:hidden;
 	font-size:0.65em;
 }
 label.required:hover::after {
 	visibility:visible;
 }
 label.dimmed {
 	color:rgba(0, 0, 0, 0.4);
 }

.ui-mini .ui-input-clear {
    margin-top: -13px;
    right: -2px;
}

.userprofiles {
}
.userprofile {
	display:inline-block;
	position:relative;
	vertical-align:top;
	margin:10px;
}
.userprofile.selected {
	filter:brightness(0.7);
}
.roundiconbutton {
	position:absolute;
	top:11px;
	left:0px;
	border-radius:50%;
	background-color:rgba(255, 255, 255, 0.6);
	cursor:pointer;
}
.flavorname {
	font-size:0.8em;
	display:inline-block;
	padding-left:32px;
	width:calc(100% - 38px);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.flavorname.nodelete {
	padding-left:0px;
	width:calc(100% - 6px);
}
.chg_profile {
	cursor:pointer;
}
.tinygraph {
	position:relative;
	background-color:white;
	border: 1px solid #d4d1bf;
	margin: 0px auto;
	text-align:center;
	cursor:pointer;
}
div.graphfooter {
	margin-top:2px;
	width:auto;
	height:auto;
	text-align:center;
	font-size:0.75em;
	overflow:hidden;
	font-weight:normal;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	color:black;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.4);
}

.ui-menu.ui-widget.ui-widget-content.ui-front {
	z-index: 110;
}

.flavorgraphheader {
	width:220px;
	background-color: #c2c0af;
	border-left:1px solid #d4d1bf;
	border-top:1px solid #d4d1bf;
	border-right:1px solid #d4d1bf;
	color:#453821;
	text-shadow:-1px -1px 2px rgba(0, 0, 0, 0.3), 1px 1px 2px rgba(255, 255, 255, 0.3);
	font-weight:bold;
	text-align:center;
	padding:5px 0px;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	position:relative;
	}
.flavorgraphheader.mini {
	width:128px;
	font-size:0.85em;
}

.editbutton,
.editbuttondisabled {
	position:absolute;
	top:0px;
	right:0px;
	width:28px;
	height:calc(100% - 8px);
	border-left:1px solid rgba(0, 0, 0, 0.4);
	line-height:24px;
	padding:4px;
	text-align:center;
	cursor:pointer;
}
.editbuttondisabled {
	opacity: 0.3;
	cursor: default ! important;
}
.editbutton img,
.editbuttondisabled img {
	max-height:20px;
	max-width:20px;
}
.editbutton:hover {
	background-color:rgba(0, 0, 0, 0.2);
}

.flavorgraph {
	position:relative;
    width:220px;
    height:220px;
	background-color:white;
    border-left: 1px solid #d4d1bf;
    border-right: 1px solid #d4d1bf;
    border-bottom: 1px solid #d4d1bf;
	margin-bottom:20px;
}

.flavorgraph.mini {
	position:relative;
    width:128px;
    height:128px;
	background-color:white;
	margin-bottom:20px;
}

.flavorattribution {
	position:relative;
	font-size:0.7em;
	color:#444444;
	text-align:left;
	width:100%;
	margin-top:2px;
}
.flavorgraphbox {
	background-color:white;
	position:relative;
	z-index:100;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}
.flavorgraphexplain {
	position:absolute;
	z-index:99;
	background-color:#DFDFDF;
}
.flavorgraphexplain.left {
	top:5px;
	height:auto;
	right:100%;
	/* set width in div style tag */
	border-top: 2px solid #AAAAAA;
	border-left: 2px solid #AAAAAA;
	border-bottom: 2px solid #AAAAAA;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	padding:10px;
	-webkit-transform: translateX(100%);
	transition: -webkit-transform 0.25s;
}
.flavorgraphexplain.left.slidein {
	box-shadow:3px 3px 6px rgba(0, 0, 0, 0.4);
	-webkit-transform: translateX(0px);
}
.flavorgraphexplain.bottom {
	top:100%;
	left:0px;
	right:0px;
	/* set height in div style tag */
	border-right: 2px solid #AAAAAA;
	border-left: 2px solid #AAAAAA;
	border-bottom: 2px solid #AAAAAA;
	padding:10px;
	-webkit-transform: translateY(-101%);
	transition: -webkit-transform 0.25s;
}
.flavorgraphexplain.bottom.slidein {
	box-shadow:2px 2px 16px rgba(0, 0, 0, 0.5);
	-webkit-transform: translateY(0px);
}

#scale_div {
	background-color:transparent;
	pointer-events:none;
	color:#222222;
	text-shadow:1px 1px 3px white, -1px -1px 3px white, 0px 0px 12px white;
	z-index:9999;
	-webkit-transform-origin:left bottom;
	background:linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
	width:6px;
	border-bottom-right-radius: 6px;
	border-top-right-radius:6px;
}
#scale_div > div {
	padding:8px;
	white-space:nowrap;
	-webkit-transform-origin:center center;
}

.percentmatch {
	margin-top:1em;
	font-weight:normal;
	font-size:1em;
}

.matchsurround {
	width:225px;
	height:12px;
	border:1px solid #AAAAAA;
	position:relative;
	background-color:#EEEEEE;
	margin:0px auto;
}
.matchfill {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	border:none;
}

.colorbox {
    display:inline-block;
    height:16px;
    width:16px;
    vertical-align:middle;
    border:1px solid black;
	margin-right:5px;
}

.delisted {
    background-image:url("images/delisted.png");
    background-repeat:repeat-x;
    background-position:left center;
}

form#prodform .ui-field-contain .ui-slider-switch {
    width:10em;
}

.construction {
    vertical-align:middle;
    margin:0 6px;
}

.ui-autocomplete.ui-menu {
	max-height:300px;
	overflow-y:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
}

.ui-selectmenu-menu .ui-menu {
	max-height:400px;
}

/* This div busts out horizontally to go right to the edges */
.ui-tabs .ui-tabs-panel .ui-fullwidth {
    margin-left:-1.4em;
	margin-right:-1.4em;
}

.ui-widget-header th {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    background-color:transparent;
}

table#invtbl_head th {
    cursor:pointer;
}
table#invtbl_head th.sortdesc:after {
	content:"\f0dd";
	font-size:0.75em;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	vertical-align:middle;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 4px;
	position:relative;
	top:-3px;
	left:3px;
}
table#invtbl_head th.sortasc:after {
	content:"\f0de";
	font-size:0.75em;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	vertical-align:middle;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 4px;
	position:relative;
	top:-3px;
	left:3px;
}
table#invtbl_head th.rightcell span.price {
	margin-right:12px;
}
table#invtbl td.count > input {
    width:auto;
	margin:0px 35px;
}
table#invtbl td.bin {
    min-width:6em;
}
table#invtbl td.posid {
	min-width:9em;
}
table#invtbl td.size {
	min-width:5em;
}

table#invtbl td i {
	color:#999999;
	font-style:italic;
}
table#invtbl td.err {
	background-color:#EED3D4;
	color:black;
	font-weight:bold;
}
table#invtbl td.prodinfo {
	background-color:#F5F5F5;
	color:#555555;
}

table#invtbl tr.sub-product td.prodinfo,
table#invtbl tr.sub-product td.prodinfo i {
	color:transparent ! important;
}
table#invtbl tr.top-product td {
	border-top:1px solid #DDDDDD;
}

table#invtbl td.size,
table#invtbl td.posid,
table#invtbl td.bin,
table#invtbl td.count,
table#invtbl td.price,
table td.notes {
	cursor:pointer;
}

tr.noterow td.noteentry {
	background-image: linear-gradient(to bottom, #F5F5F5 0%, #DDDDDD 75%);
}

tr.noterow td.noteentry textarea {
	width: calc(100% - 10px);
	height: calc(100% - 8px);
	margin-top:5px;
	transition: height 0.5s ease-in-out;
}

td.notes span::after {
	content:"\f0d7";
	font-size:0.75em;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	vertical-align:middle;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 4px;
	transition: transform 0.5s ease-in-out;
	transform: rotate(0deg);
}

td.notes.open span::after {
	transform: rotate(180deg);
}

td.notes div.noteholder {
	display:none;
}

table#invtbl input[type=checkbox] {
	cursor:pointer;
}


div#inv_info input.custom-combobox-input {
	width:7em;
	font-weight:normal ! important;
}

div#resto_recommended .custom-combobox {
	width:80%;
}
div#resto_recommended input.custom-combobox-input {
	font-weight: normal ! important;
}


table#invtbl td.save-ok {
	animation-name:saveyes;
	animation-duration:1s;
	animation-direction:normal;
	animation-fill-mode:both;
}
@keyframes saveyes {
	0% {background-color:#FFFFFF;}
	10% {background-color:#BEE6B8;}
	60% {background-color:#BEE6B8;}
	100% {background-color:#FFFFFF;}
}
table#invtbl td.save-error {
    background-color:#CC0A0A;
}

input.ui-error {
    -moz-box-shadow: 0px 0px 8px #CC0A0A ;
    -webkit-box-shadow: 0px 0px 8px #CC0A0A ;
    box-shadow: 0px 0px 8px #CC0A0A ;
}
input.ui-checking {
    -moz-box-shadow: 0px 0px 8px #2FA80A ;
    -webkit-box-shadow: 0px 0px 8px #2FA80A ;
    box-shadow: 0px 0px 8px #2FA80A ;
}
span.priceitem {
	display:inline-block;
	vertical-align:top;
    margin:10px 0px;
}
span.priceitem > input {
	width:6em;
	text-align:right;
	margin:0px;
}
span.priceitem::before {
	content: "$";
	display:inline-block;
	padding:3px;
	margin-left:10px;
	margin-right:4px;
}

.bmgitem {
	font-style:italic;
	color:#888888;
	border-top:1px solid rgba(0, 0, 0, 0.5);
}
.bmgitem ~ .bmgitem {
	border-top:0px solid transparent;
}

.createitem {
	font-style:normal;
	color:#780000;
	border-top:1px solid rgba(0, 0, 0, 0.5);
}
.createitem ~ .createitem {
	border-top:0px solid transparent;
}

div.pagesubheader {
    width:100%;
    margin:10px 0px;
    padding:0px;
    white-space:nowrap;
}
table.subheadertable {
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
}
table.subheadertable td {
    position:relative;
    padding:10px;
    vertical-align:middle;
    border-left:1px solid transparent;
    border-right:1px solid #CCCCCC;
}
table.subheadertable td:first-of-type {
    border-left:none;
}
table.subheadertable td:last-of-type {
    border-right:none;
}
table.subheadertable td label {
    margin-bottom:5px;
}
.pagesubheader input {
    width:95%;
}
.pagesubheader input.pagesubheadersearch {
    width:80%;
}
input.pagesubheadersearch {
    border-radius:12px ! important;
    padding:3px 21px 3px 10px ! important;
    background-color:white;
    background-image:url("images/search-black.png");
    background-repeat:no-repeat;
    background-position:right center;
}
input.pagesubheadersearch.withbutton {
	background-image:none;
}
input.pagesubheadersearch.filled {
    background-image:url("images/delete-inverse-black.png");
}
input.pagesubheadersearch.withbutton {
	border-top-right-radius: 0px ! important;
	border-bottom-right-radius: 0px ! important;
	width:70% ! important;
	margin-right:0px ! important;
}
input.pagesubheadersearch.incomplete {
	background-color:#DDDDDD;
}
.pagesubheader input.pagesubheadersearch.withbutton + a {
	display: inline-block;
	margin-left: -1px;
	border: 1px solid #A9A6A4;
	background-color: #f8f7f6;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	padding:3px 16px;
}
.pagesubheader input.pagesubheadersearch.withbutton + a:hover {
	border: 1px solid #3C372F;
	background-color: #3C372F;
	font-weight: bold;
	color: #ffffff;
}
.pagesubheader input.pagesubheadersearch.locked {
	color:#999999;
}
.pagesubheader span#resultcount {
	float:right;
	font-size:0.85em;
	color:#666666;
	margin-right:10%;
}

ul.vsdropdown {
    margin-top:-5px !important;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
}

div.menuindicator {
    position:absolute;
    width:35px;
    height:20px;
    top:0px;
    left:50%;
    margin-top:-20px !important;
    margin-left:-17px !important;
    background-image:url("images/menu_indicator.png");
}

div.ui-loading {
    text-align:center;
}

table.compacttable {
	width:auto;
	border-spacing:0px;
	border-collapse:separate;
	border:none;
}
table.compacttable td, table.compacttable th {
    vertical-align:middle;
    padding:5px;
	border:none;
}

table.fulltable {
    width:100%;
    border-spacing:0px;
    border-collapse:collapse;
}
@media (pointer: coarse) {
	table.fulltable {
		width:calc(100% - 20px);
		margin-right:19px;
		border-right:1px solid rgba(0, 0, 0, 0.1);
	}
	.ui-widget-header table.fulltable {
		border-right:none;
	}
}

table.fulltable td, table.fulltable th {
    vertical-align:middle;
    padding:5px;
}
.rightcell, .toprightcell, .bottomrightcell {
    text-align:right;
}
.leftcell, .topleftcell, .bottomleftcell {
    text-align:left;
}
.centercell, .topcentercell, .bottomcentercell {
    text-align:center;
}
th.minicell, td.minicell {
    width:40px;
    text-align:center;
}
.topleftcell, .toprightcell, .topcentercell {
	vertical-align:top ! important;
}
.bottomleftcell, .bottomrightcell, .bottomcentercell {
	vertical-align:bottom ! important;
}
.topleftcell > p:first-child, .toprightcell > p:first-child, .topcentercell > p:first-child {
	margin-top:0px ! important;
}
.descriptioncell {
	padding:20px;
	color:#453821;
}
.bb {
	border-bottom:1px solid rgba(0, 0, 0, 0.2);
}

tr.ui-selecting {
    background-color: #FFF7B1 ! important;
}
tr.ui-selected, tr.selected, li.selected {
	background-color: #F4EB9E ! important;
}
table#invtbl tr.ui-selected td.prodinfo {
	background-color: #DCD48F ! important;
}
table#invtbl tr.ui-selecting td.prodinfo {
	background-color: #E5DE9F ! important;
}
::-moz-selection {
	background-color: #F4EB9E ! important;
}
::selection {
	background-color: #F4EB9E ! important;
}

table.stripe td {
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}
.no-titlebar .ui-dialog-titlebar {
	display: none;
}
div#main_dialog {
    height:80%;
    width:80%;
}
div#main_dialog iframe {
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
}

span.color {
	display:inline-block;
	height:16px;
	width:20px;
	border:1px solid black;
}


.custom-combobox {
    position: relative;
    display: inline-block;
    outline:none ! important;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -32px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 32px 5px 10px;
    outline:none ! important;
}
.custom-combobox-input:focus {
    box-shadow:0px 0px 7px #E1C100;
}

input.fldname {
	width:18em ! important;
}
input.fldunit {
	width:4em ! important;
	margin-left: 5px;
}







/* Custom Search Text Box with Button and "x" to clear. */
div.vc-searchsurround {
	border-radius:3px;
	display:inline-block;
	position:relative;
	padding:0px;
	margin:10px;
	border: 1px solid #cbc7bd;
	background-color: #f8f7f6;
	color: #140f06;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
	transition: width 0.5s;
	-webkit-transition: width 0.5s;
	overflow:hidden;
	text-align:right;
}
div.vc-searchsurround.collapsible {
	position:absolute;
	z-index:200;
	top:0px;
	right:0px;
	width:calc(100% - 22px);
}
div.vc-searchsurround.collapsed {
	width:50px;
}
div.vc-searchsurround
div.vc-searchsurround:focus-within {
    box-shadow: 0px 0px 7px #E1C100;
}
input.vc-searchbox {
    border-top-left-radius:3px ! important;
    border-bottom-left-radius:3px ! important;
	border-top-right-radius: 0px ! important;
	border-bottom-right-radius: 0px ! important;
    padding:4px 20px 4px 4px;
    background-color:transparent;
    background-image:none;
	margin:0px ! important;
	border:0px solid transparent;
	appearance: none;
    -moz-appearance: none;
	-webkit-appearance: none;
	display:inline-block;
	vertical-align:middle;
	box-shadow:none ! important;
	width: calc(100% - 20px - 4px - 50px);
	text-align:left;
}
input.vc-searchbox:focus {
	outline:none ! important;
	box-shadow:none ! important;
}
input.vc-searchbox.filled {
    background-image:url("images/delete-inverse-black.png");
    background-repeat:no-repeat;
    background-position:right center;
}
div.vc-searchsurround.collapsed input.vc-searchbox {
	display:none;
}
input.vc-searchbox + a.vc-searchbox {
	display: inline-block;
	vertical-align:middle;
	margin: 0px 0px 0px -1px ! important;
	border:none;
	background: #eceadf;
	color: #453821;
	border-left: 1px solid #cbc7bd;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	padding:6.5px 16px;
	text-align:center;
	width:calc(50px - 32px);
}
input.vc-searchbox + a.vc-searchbox:hover {
	background: #654b24;
	color: #ffffff;
}
div.vc-searchsurround.collapsed input.vc-searchbox + a.vc-searchbox {
	border-top-left-radius: 3px ! important;
	border-bottom-left-radius: 3px ! important;
}


/* RANGE SLIDER CUSTOMIZED CSS */
/* To make the built-in range slider controls look more like the ones in the iPad app */
.flavorsliders input[type="range"] {
	-webkit-appearance: none;		/*removes default webkit styles*/
	border: 1px solid transparent ! important;		/*fix for FF unable to apply focus style bug */
	background-color:transparent ! important;
	width:100%;
	margin:16px 0px;
}
.flavorsliders input[type="range"].demonstration {
	width:calc(88% - 16em);
	display:inline-block;
	vertical-align:middle;
}
.flavorsliders input[type="range"].demonstration:disabled {
	opacity:0.4;
	pointer-events:none;
}
.flavorsliders input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    background-image:-webkit-linear-gradient(top, #4D4D4D 0%, #C5C5C5 100%);
    border: none;
    border-radius: 5px;
    margin-top:6px;
}
.flavorsliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #8C8C8C;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -5px;
	background-image:-webkit-linear-gradient(top, #FBFBFB 0%, #D6D6D6 100%);
	z-index:100;
}
.flavorsliders input[type="range"].notset::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #8C0002;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -5px;
	background-image:-webkit-linear-gradient(top, #FB999A 0%, #D68486 100%);
	z-index:100;
}
.flavorsliders div.sliderwrapper {
	padding:0px;
	position:relative;
	display:inline-block;
	width: 100%;
	top:10px;
}
.flavorsliders div.sliderwrapper::before {
	content:"NOT SET";
	position:absolute;
	top:0px;
	left:0px;
	width:9.09%;
	height:16px;
	padding-bottom:4px;
	padding-top:2px;
	font-size:8px;
	color:#8C0002;
	border-right:1px solid #8C0002;
	border-top:1px solid #8C0002;
	border-top-right-radius:4px;
	background-color:rgba(214, 132, 134, 0.4);
	z-index:0;
}

.flavorsliders div.sliderwrapper::after {
	content:"";
	position:absolute;
	top:4px;
	left:54.54%;
	height:14px;
	width:1px;
	background-color:#888888;
}

.flavorsliders div.sliderwrapper span.slidermintitle {
	position:absolute;
	top:4px;
	left:10%;
	height:16px;
	font-size:10px;
	font-weight:bold;
	color:#4D4D4D;
}

.flavorsliders div.sliderwrapper span.slidermaxtitle {
	position:absolute;
	top:4px;
	right:4px;
	height:16px;
	font-size:10px;
	font-weight:bold;
	color:#4D4D4D;
	padding-top:4px;
}

.flavorsliders input[type="range"]::-moz-range-track {
    height: 10px;
    background-image:-moz-linear-gradient(top, #4D4D4D 0%, #C5C5C5 100%);
    border: none;
    border-radius: 5px;
    margin-top:-4px;
}
.flavorsliders input[type="range"]::-moz-range-thumb {
    border: 1px solid #8C8C8C;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -9px;
	background-image:-moz-linear-gradient(top, #FBFBFB 0%, #D6D6D6 100%);
}
.flavorsliders input[type=range]::-moz-focus-outer {
	border: 0;
}
.flavorsliders input[type="range"].notset::-moz-range-thumb {
    border: 1px solid #8C0002;
	background-image:-webkit-linear-gradient(top, #FB999A 0%, #D68486 100%);
}
.flavorsliders input[type="range"]::-ms-track {
    height: 10px;
    background-image:-ms-linear-gradient(top, #4D4D4D 0%, #C5C5C5 100%);
    border: none;
    border-radius: 5px;
    /*remove default tick marks*/
    color: transparent;
}
.flavorsliders input[type="range"]::-ms-thumb {
    border: 1px solid #8C8C8C;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -5px;
	background-image:-ms-linear-gradient(top, #FBFBFB 0%, #D6D6D6 100%);
}
.flavorsliders input[type="range"].notset::-ms-thumb {
    border: 1px solid #8C0002;
	background-image:-webkit-linear-gradient(top, #FB999A 0%, #D68486 100%);
}
.flavorsliders .slidercontain {
	position:relative;
	text-align:center;
}
.flavorsliders .slidercontain:nth-child(odd) {
	background-color:rgba(0, 0, 0, 0.1);
}
.flavorsliders .slidercontain label {
	display:inline-block;
	width:200px;
	margin:0px 10px 0px 60px;
	text-align:left;
}
.flavorsliders .slidersurround {
	white-space:nowrap;
	display:inline-block;
	width:600px;
	position:relative;
}

.flavorsliders input.slidername {
	margin:7px 10px;
	display:inline-block;
	vertical-align:middle;
}

.flavorsliders span.beforeslider {
    display:inline-block;
    margin-right:10px;
    vertical-align:middle;
    font-size:0.6em;
    width:12em;
    white-space:nowrap;
    text-align:right;
}
.flavorsliders span.afterslider {
    display:inline-block;
    margin-left:10px;
    vertical-align:middle;
    font-size:0.6em;
    width:12em;
    white-space:nowrap;
    text-align:left;
}

.flavorsliders span.beforeslider input,
.flavorsliders span.afterslider input {
	text-transform:uppercase;
	display:inline-block;
	vertical-align:middle;
	width: 11em;
}
.flavorsliders div.sliderdesc {
	position:relative;
	display:block;
	padding-bottom:10px;
	font-size:0.85em;
	width:800px;
	margin:-10px auto 0px auto;
	left: 20px;
}
.flavorsliders div.sliderdesc textarea {
	display:inline-block;
	vertical-align:top;
	width: calc(100% - 30px);
	margin-top:6px;
}
.flavorsliders.right {
	padding:10px 10px 10px 235px;
    position:relative;
    min-height:280px;
}

.flavorsliders.right.mini {
	padding:10px 10px 10px 220px;
    position:relative;
    min-height:280px;
}
.flavorsliders.user {
	padding-left: calc(20% + 40px);
	margin-top: 20px;
	padding-top: 12px;
	position: relative;
	min-height: 280px;
}

.ui-menu-item-wrapper {
	white-space:nowrap;
	padding: 3px 3em 3px .4em ! important;
	font-weight:normal;
}

.ui-menu-item-wrapper a {
	display:inline-block;
	height:auto;
	width:100%;
	text-decoration:none;
}

/* For the category popup select menu - use the category pictures as the background-image. */
#prodtype-button, #in_type-button, li.categories {
	height:48px;
	padding:4px 1em 4px 58px ! important;
	background-size:48px 48px;
	background-position:2px center;
	background-repeat:no-repeat;
	line-height:48px;
}
#prodtype-button span.ui-selectmenu-text,
#in_type-button span.ui-selectmenu-text {
	line-height:48px ! important;
	margin-left:10px;
}
#prodtype-button span.ui-selectmenu-icon,
#in_type-button span.ui-selectmenu-icon {
	margin-top:18px ! important;
}
#prodtype-button.ui-state-disabled,
#in_type-button.ui-state-disabled {
	opacity:1.0 ! important;
	background-color:transparent ! important;
	border-color:transparent ! important;
}
#prodtype-button.ui-state-disabled span.ui-selectmenu-icon,
#in_type-button.ui-state-disabled span.ui-selectmenu-icon {
	visibility:hidden;
}

/*	For the "Theme" popup menu, the menu items will have a (possibly animated) background image that defines the theme.
	We want this image to be of sufficient size to give a good view of the */
li.theme {
	line-height:100%;
}
li.theme div.ui-menu-item-wrapper img {
	margin:4px;
	vertical-align:middle;
	max-height:64px;
	max-width:64px;
	-webkit-transition: max-width 0.5s, max-height 0.5s;
}
li.theme div.ui-menu-item-wrapper.ui-state-active img {
	max-height:256px;
	max-width:256px;
	margin-right:10px;
	filter:none ! important;
}
.ui-selectmenu-button.themeselect-button.ui-button.ui-widget {
	width: calc(12em + 266px);
}

@media (pointer: coarse) {
	li.theme div.ui-menu-item-wrapper.ui-state-active img {
		max-height:64px;
		max-width:64px;
		margin-right:4px;
	}
	.ui-selectmenu-button.themeselect-button.ui-button.ui-widget {
		width: calc(10em + 64px);
	}
}


/*	For the "Region" autocomplete menu, the menu items will have a (animated) map image that shows the region on a map.
	We'll keep it tiny under normal circumstances, but when the user hovers over an item, it should grow to a good size to show
	the region. */
li.region div.ui-menu-item-wrapper.ui-state-active {
	font-weight:normal ! important;
}
img#region_img_display {
	max-height:300px;
	max-width:300px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
	border:1px solid #A9A6A4;
}


/* for the category reordering control, the category image is inside the item */
#catorder {
	padding:0px;
	margin:0px;
}
#catorder > li {
	list-style-type:none;
	width:350px;
	line-height:32px;
	white-space:nowrap;
	margin:3px;
	cursor: ns-resize;
}
#catorder > li > img {
	max-height:32px;
	max-width:32px;
	vertical-align:middle;
	margin-right:10px;
}
#catorder > li > span {
	float:right;
	margin-top:8px ! important;
}

.indentedlist {
	border:1px solid #A9A6A4;
	position:relative;
	background-color:white;
	box-shadow:inset 1px 1px 2px rgba(0, 0, 0, 0.4);
	padding:2px 0px 0px 2px;
}

.xplainpop {
	display:inline-block;
	font-size:0.85em;
	height:1.3em;
	width:1.3em;
	border-radius:50%;
	background-color:rgba(0, 0, 0, 0.5);
	line-height:1.3;
	color:white ! important;
	text-align:center;
	font-weight:bold;
	cursor:help;
	text-decoration:none;
	margin:0px 10px;
}
.xplainpop:hover {
	background-color:rgba(0, 0, 0, 0.7);
}
.xplainpop .xplaincontent,
.xplain .xplaincontent {
	display:none;
}

div#confirm_msg {
	margin:5px 0px 20px 0px;
}
div#confirm_msg:empty {
	display:none;
}

.security {
	font-size:0.9em;
	color:#7F000B;
}

.notice {
	font-size:1em;
	color:#CA000D;
	text-transform:uppercase;
}


/* two column layout, evenly distributed, with a 2% gutter. */
.twocolumn-left {
	float:left;
	position:relative;
	width:49%;
}
.twocolumn-right {
	float:right;
	position:relative;
	width:49%;
}
.endcolumns {
	clear:both;
}


/* Social Networking elements */
div.socialtypes {
	display:flex;
	flex-wrap:wrap;
}
div.socialtype {
	position:relative;
	margin:5px 20px;
	display:inline-block;
	vertical-align:top;
	overflow:visible;
	text-align:center;
}

img.socialicon {
	max-height:128px;
	max-width:128px;
	margin:0px;
	opacity:0.3;
}
img.socialicon.linked {
	opacity:1.0;
	filter:drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}
img.socialicon.expired, img.socialicon.expiring {
	opacity:0.3;
	animation: pulsate 4s infinite;
}
img.socialicon-sm {
	vertical-align:middle;
	max-height:24px;
	margin:-3px 10px 0px 20px;
}
img.socialicon-link {
	vertical-align:middle;
	max-height:32px;
	max-width:32px;
	margin:0.5em;
}
@keyframes pulsate {
	0% {opacity:0.3;}
	50% {opacity:1.0;}
	100% {opacity:0.3;}
}
a.linked, a.expired, a.expiring {
	white-space:nowrap ! important;
	display:inline-block ! important;
	vertical-align:middle ! important;
}
a.linked::before {
	display:inline-block;
	vertical-align:middle;
	margin-top:-0.25em;
	content:url("images/green_check.png");
	height:16px;
	width:16px;
	margin-right:10px;
	margin-left:-5px;
}
a.expired::before {
	display:inline-block;
	vertical-align:middle;
	margin-top:-0.25em;
	content:url("images/red_clock.png");
	height:16px;
	width:16px;
	margin-right:10px;
	margin-left:-5px;
}
a.expiring::before {
	display:inline-block;
	vertical-align:middle;
	margin-top:-0.25em;
	content:url("images/red_exclamation.png");
	height:16px;
	width:16px;
	margin-right:10px;
	margin-left:-5px;
}

a.linked::after {
	display:inline-block;
	vertical-align:middle;
	margin-top:-0.25em;
	content:url("images/menu_puller.png");
	height:16px;
	width:16px;
	margin-left:10px;
	margin-right:-5px;
}
a.linked:hover::after {
	filter: invert(100%);
}

div.socialinfo {
	position:absolute;
	top:0px;
	right:0px;
	width:auto;
	height:auto;
	visibility:hidden;
}

table#type_mainthead {
	border-left:1px solid #D0D0D0;
	border-right:1px solid #D0D0D0;
	border-bottom:1px solid #D0D0D0;
}

div#type_maintscroll {
	border-left:1px solid #D0D0D0;
	border-right:1px solid #D0D0D0;
}

table#typeadd_table {
	border:1px solid #D0D0D0;
}

div#typelistcontainer {
	position:absolute;
	top:52px;
	left:0px;
	right:0px;
	bottom:0px;
}


table.drinktypetable {
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
}

table.drinktypetable th,
table.drinktypetable td {
	vertical-align:middle;
	padding:5px;
}

table.drinktypetable th {
	background-image:-webkit-linear-gradient(top, #FBFBFB 0%, #D6D6D6 100%);
	background-image:-moz-linear-gradient(top, #FBFBFB 0%, #D6D6D6 100%);
	background-image:-ms-linear-gradient(top, #FBFBFB 0%, #D6D6D6 100%);
	background-image:linear-gradient(bottom, #FBFBFBF 0%, #D6D6D6 100%);
}

table.drinktypetable td input[type=text] {
	width:6em;
}
table.drinktypetable td input[type=text][data-src="type_desc"] {
	width:16em;
}
table.drinktypetable td input[type=text][data-src="type_name"] {
	width:8em;
}

div.fileinputbutton {
	display: inline-block;
	position: relative;
    width: 232px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.fileinputbutton.loaded,
.fileinputwrapper.loaded,
.fileinputwrapper.proxyloaded,
.ui-button.loaded {
	border: 1px solid #044000;
	background-color: #8BEA89;
	background-image: -webkit-linear-gradient(top, #8BEA89 0%, #EFFFEF 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #8BEA89 0%, #F0FFEF 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #8BEA89 0%, #F0FFEF 100% ); /* IE10 */
	background-image:      -o-linear-gradient(top, #8BEA89 0%, #F0FFEF 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient(to bottom, #8BEA89 0%, #F0FFEF 100% );
	color: #222222;
}

.fileinputwrapper input[type=file],
.fileinputbutton input[type=file] {
    cursor: pointer;
    height: 100%;
	width:100%;
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 93;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:128px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
}

.fileinputwrapper {
	overflow:hidden;
}
.thumb {
	display:inline-block;
	vertical-align:top;
	position:relative;
	width:128px;
	height:128px;
	padding:6px;
	cursor:pointer;
	border:1px solid #A9A6A4;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.4);
	background-color:white;
}
.thumb.logo {
	width:200px;
	height:200px;
}
.thumb.alpha {
	background-image:url("images/transparent_background.png");
}
.thumblist {
	display:block;
	position:relative;
	width:128px;
	height:128px;
	padding:3px;
	cursor:pointer;
}
.thumb.zoomable:after {
	content:url("/images/photomag.png");
	position:absolute;
	top:2px;
	left:2px;
	z-index:93;
}
.thumb.zoomable img {
	z-index: 92;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
	transition: all 0.5s ease-in-out;
}
.thumb img, .thumblist img {
	position:absolute;
	bottom:50%;
	left:50%;
	transform: translate(-50%, 50%);
	max-width:128px;
	max-height:128px;
	object-fit:contain;
}
.thumb.logo img {
	max-width:200px;
	max-height:200px;
}

.thumbbtn:hover {
	background-color: #dadada;
	background-image: -webkit-linear-gradient(top, #BFBFBF 0%, #EAEAEA 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #BFBFBF 0%, #EAEAEA 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #BFBFBF 0%, #EAEAEA 100% ); /* IE10 */
	background-image:      -o-linear-gradient(top, #BFBFBF 0%, #EAEAEA 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient(to bottom, #BFBFBF 0%, #EAEAEA 100% );
}
.thumbbtn.loaded {
	background-color: #dadada;
	background-image: -webkit-linear-gradient(top, #B6EAB5 0%, #F0FFEF 100% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #B6EAB5 0%, #F0FFEF 100% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #B6EAB5 0%, #F0FFEF 100% ); /* IE10 */
	background-image:      -o-linear-gradient(top, #B6EAB5 0%, #F0FFEF 100% ); /* Opera 11.10+ */
	background-image:         linear-gradient(to bottom, #B6EAB5 0%, #F0FFEF 100% );
}
.thumbbtn .ui-button-text {
	visibility:hidden;
	display:block;
	position:absolute;
	padding:2px;
	font-size:14px;
	font-weight:bold;
	line-height:16px;
	top:calc(50% - 8px);
	left:0px; /* set before showing! */
	height:16px;
	width:auto;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
	background-color:rgba(255, 255, 255, 0.7);
	color:red;
	white-space:nowrap;
}
.thumbbtn.loaded .ui-button-text {
	visibility:visible;
}

.delbtn:hover {
	-webkit-filter: brightness(0.8);
	filter: brightness(0.8);
}

#imglist {
	display:inline-block;
	vertical-align:top;
	width:280px;
	height:380px;
}
ul#slide_show {
	position:relative;
	width:100%;
	margin:0px;
	padding:0px;
}
ul#slide_show li {
	list-style-type:none;
	cursor:ns-resize;
	border-bottom:1px solid rgba(0, 0, 0, 0.1);
	display:block;
	position:relative;
	width:calc(100% - 16px);
	padding:8px;
	text-align:center;
}
ul#slide_show li img {
	max-width:100%;
}
@media (pointer: coarse) {
	#imglist {
		width:180px;
	}
	ul#slide_show {
		width:calc(100% - 20px);
		margin-right:19px;
		border-right:1px solid rgba(0, 0, 0, 0.1);
	}
}

span.showrating {
	font-size:26px;
	color:#E8AF2D;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
span.editrating {
	display:inline-block;
	position:relative;
	font-size:26px;
	color:#CD9310;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	transition: transform 0.5s;
}
span.editrating:hover {
	color:#E8AF2D;
	transform-origin:center center;
	transform:scale(1.1);
}

.tooltip-pointer {
	border: 1px solid #cbc7bd;
	background: #f8f7f6;
	color:#222222;
	font-size:0.8em ! important;
	box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
	border-radius:3px;
	z-index:200;
}
.tooltip-pointer.left::before {
	content:"";
	position:absolute;
	right:100%;
	top:calc(50% - 10px);
	height:0px;
	width:0px;
	border-left:0px solid transparent;
	border-right:15px solid #cbc7bd;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
.tooltip-pointer.left::after {
	content:"";
	position:absolute;
	right:calc(100% - 2px);
	top:calc(50% - 10px);
	height:0px;
	width:0px;
	border-left:0px solid transparent;
	border-right:15px solid #f8f7f6;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
.tooltip-pointer.lefttop::before {
	content:"";
	position:absolute;
	right:100%;
	top:20px;
	height:0px;
	width:0px;
	border-left:0px solid transparent;
	border-right:15px solid #cbc7bd;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
.tooltip-pointer.lefttop::after {
	content:"";
	position:absolute;
	right:calc(100% - 2px);
	top:20px;
	height:0px;
	width:0px;
	border-left:0px solid transparent;
	border-right:15px solid #f8f7f6;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
.tooltip-pointer.top::before {
	content:"";
	position:absolute;
	bottom:100%;
	left:calc(50% - 10px);
	height:0px;
	width:0px;
	border-bottom:15px solid #cbc7bd;
	border-top:0px solid transparent;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}
.tooltip-pointer.top::after {
	content:"";
	position:absolute;
	bottom:calc(100% - 2px);
	left:calc(50% - 10px);
	height:0px;
	width:0px;
	border-bottom:15px solid #f8f7f6;
	border-top:0px solid transparent;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}
.tooltip-pointer.right::before {
	content:"";
	position:absolute;
	left:100%;
	top:calc(50% - 10px);
	height:0px;
	width:0px;
	border-left:15px solid #cbc7bd;
	border-right:0px solid transparent;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
.tooltip-pointer.right::after {
	content:"";
	position:absolute;
	left:calc(100% - 2px);
	top:calc(50% - 10px);
	height:0px;
	width:0px;
	border-left:15px solid #f8f7f6;
	border-right:0px solid transparent;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}
.tooltip-pointer.bottom::before {
	content:"";
	position:absolute;
	top:100%;
	left:calc(50% - 10px);
	height:0px;
	width:0px;
	border-top:15px solid #cbc7bd;
	border-bottom:0px solid transparent;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}
.tooltip-pointer.bottom::after {
	content:"";
	position:absolute;
	top:calc(100% - 2px);
	left:calc(50% - 10px);
	height:0px;
	width:0px;
	border-top:15px solid #f8f7f6;
	border-bottom:0px solid transparent;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}

.focusitem:focus {
	outline:none;
}


div.upload {
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(255, 255, 255, 0.6);
	z-index:200;
}
div.buffer {
    width: 30em;
    position: absolute;
    left: 50%;
    top: 16em;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align:center;
    font-weight:bold;
    color: #4b4b4b;
}

/* Restaurant Admin hours table */
table.hourstable {
	width:calc(100% - 40px);
    border-spacing:0px;
    border-collapse:separate;
    border:1px solid rgba(0, 0, 0, 0.3);
    margin:0px 20px;
}
.hourstable th {
	background-color:#c2c0af;
	padding:4px;
	border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
.hourstable td {
	padding:4px;
	border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
input.hrs {
	width:5em;
}
input.off, input.o24, input.reg {
	margin: -2px 4px 0px 0px;
}
.hourstable td.sep, .hourstable th.sep {
	border-right:1px solid rgba(0, 0, 0, 0.3);
}








































/*==============================================================================
	MARK: PRODUCT SHOWCASE
==============================================================================*/
.user-review-item {
	font-size:1em;
	border-radius:1em;
	background-color:#E6E1D5;
	padding:1em;
	margin:0.5em 0px;
}
.user-review-item .user-pic {
	width:48px;
	height:48px;
	border-radius:50%;
	overflow:hidden;
	float:left;
	margin-right:8px;
}
.user-review-item .user-pic img {
	object-fit:cover;
	max-height:48px;
	max-width:48px;
}
.user-review-item .infoline {
	display:inline-block;
	font-size:1em;
}
.user-review-item .rating {
	display:inline-block;
	white-space:nowrap;
	font-size:1.2em;
	color:#4F4835;
}
.user-review-item .review {
	font-weight:normal;
	margin-top:1em;
	font-size:1em;
	color:#8C7A4B;
}
.smalltext {
	font-size:0.85em;
	color:#8C7A4B;
}

/* Small screens - iPhone, etc. */
@media only screen and (max-width: 599px) {
	html, body {
		--mobile:true;
	}
	div.showcase-content {
		position:absolute;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	div.showcase-content div.vs-page-header {
		position:absolute;
		top:0px;
		height:40px;
		width:100%;
		padding-top:8px;
		font-size:1em;
		text-align:center;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		border-top-width:0px ! important;
		border-left-width:0px ! important;
		border-right-width:0px ! important;
	}
	div.showcase-content #btn_close {
		margin-top:0px;
	}
	img.poweredby_logo {
		display:none;
	}
	div.showcase-content div.vs-page-header h1 {
		margin: 2px auto ! important;
	}
	div.showcase-left {
		position:relative;
		padding:68px 8px 8px 8px;
		text-align:center;
	}
	div.showcase-right {
		position:relative;
		padding:12px;
	}
	div.quarters {
		display:block;
		position:relative;
		vertical-align:middle;
		width:100%;
		text-align:left;
		white-space:nowrap;
		margin-bottom:0.5em;
	}
	div.quarters h3 {
		display:inline-block;
		vertical-align:middle;
		width:20%;
		height:100%;
		line-height:50%;
		font-family: Montserrat, sans-serif ! important;
		font-weight:bold;
		font-size:1em;
	}
	div.rating_show {
		display:inline-block;
		vertical-align:middle;
		height:100%;
		width:80%;
	}
	#rankinggroup h3 .xplainpop {
		display:block;
		margin-left:0px;
		margin-top:8px;
	}
	div.quarters div.capt {
		display:inline-block;
		vertical-align:middle;
		font-style:italic;
		font-size:0.9em;
		font-weight:200;
		width:calc(100% - 20% - 95px - 15px);
		white-space:normal;
	}
	div.quarters div.imgspace {
		height:96px;
		width:96px;
		margin-right:10px;
		display:inline-block;
		vertical-align:middle;
		text-align:center;
	}
	div.quarters div.imgspace.half {
		height:48px;
		width:auto;
	}
	div.quarters div.imgspace.half img {
		min-width:140px ! important;
		max-width:140px ! important;
	}
	div.quarters div.imgspace:before {
		content: '';
		display: inline-block;
		height: 100%;
		width:0px;
		vertical-align: middle;
	}
	div.quarters div.imgspace img:first-child {
		max-height:90px;
		max-width:90px;
		vertical-align:middle;
	}
	div.quarters div.imgspace img.padded:first-child {
		max-width:62px;
		max-height:62px;
		padding:16px;
		vertical-align:middle;
	}
	span.showrating,
	span.editrating {
		font-size:18px ! important;
	}
	div.showcase-content div.twocolumn-left {
		position:relative ! important;
		float:none ! important;
		width:100% ! important;
	}
	div.showcase-content div.twocolumn-right {
		position:relative ! important;
		float:none ! important;
		width:100% ! important;
	}
	div.showcase-content div.endcolumns {
	}
	div.showcasemap {
		background-color:white;
		border:1px solid rgba(0, 0, 0, 0.4);
		box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
		position:relative;
		left:0px;
		width:100%;
		height:350px;
		margin-top:10px;
	}
	div.showContactlabel {
		display:inline-block;
		width:80px;
		font-weight:bold;
		vertical-align:top;
		text-align:left;
		margin-top:16px;
		margin-right:8px;
	}
	div.showlabel {
		display:inline-block;
		width:130px;
		font-weight:bold;
		vertical-align:top;
		text-align:left;
		margin-top:16px;
		margin-right:8px;
	}
	div.showlabelabove {
		display:block;
		font-weight:bold;
		text-align:left;
		margin-top:16px;
		padding-bottom:6px;
		border-bottom:1px solid rgba(0, 0, 0, 0.4);
		margin-bottom:10px;
	}
	div.showContactdata {
		display:inline-block;
		vertical-align:top;
		margin-top:16px;
		height:auto;
		text-align:left;
		overflow:hidden;
		max-width:calc(100% - 95px);
	}
	div.showdata {
		display:inline-block;
		vertical-align:top;
		margin-top:16px;
		height:auto;
		text-align:left;
		overflow:hidden;
		max-width:calc(100% - 145px);
	}
	div.showdata > :first-child {
		margin-top:0px;
	}
	div.showdatafull {
		display:block;
		margin:0px;
		padding:0px;
		width:100%;
		height:auto;
		text-align:left;
		overflow:hidden;
	}
	div.showdatafull img {
		margin:5px;
	}
	.myreview {
		border:2px solid white;
		background-color:rgba(0, 0, 0, 0.6);
		padding:1em 0px;
		color:white;
		margin-top:0.5em;
		border-radius:1em;
	}
	.myreview > label {
		display:block;
		font-weight:bold;
		margin-left:1em;
		margin-bottom:0.5em;
	}
	.myreview > p {
		margin:0px 1em 0px 1.5em;
		font-weight:normal;
	}
	
	.restonote {
		border:2px solid rgba(0, 0, 0, 0.4);
		border-radius:1em;
		background-color:rgba(0, 0, 0, 0.1);
		padding:1em 0px;
		color:black;
		margin-top:0.5em;
	}
	.restonote > label {
		display:block;
		font-weight:bold;
		margin-left:1em;
		margin-bottom:0.5em;
	}
	.restonote > p {
		margin:0px 1em 0px 1.5em;
		font-weight:normal;
	}

	.myfavorite {
		padding:1em 0px;
		text-align:center;
	}
	.user-placard {
		float:none;
		padding:1em;
		border:1px solid #d9d6c4;
		border-radius:12px;
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		background-color:#f8f7f6;
		color:#140f06;
		position:relative;
		z-index:40;
		margin:180px 20px 20px 20px;
		width:calc(100% - 42px - 2em);
		text-align:center;
	}
	.user-main {
		position:relative;
		float:none;
		padding:1em;
		border:1px solid #d9d6c4;
		border-radius:12px;
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		background-color:#f8f7f6;
		color:#140f06;
		z-index:40;
		margin:20px 20px 20px 20px;
		width:calc(100% - 42px - 2em);
		text-align:center;
		overflow:hidden;
	}
	.user-main .flavorgraphheader {
		width:128px ! important;
		font-size:0.85em ! important;
	}
	.user-main .flavorgraph {
		width:128px ! important;
		height:128px ! important;
	}
	.user-main .flavorgraph canvas {
		width:128px ! important;
		height:128px ! important;
	}
	.user-main table.fulltable {
		width:100% ! important;
		margin-right:0px ! important;
		border-right:none ! important;
	}
	.follower-pic,
	.followed-pic {
		height:64px;
		width:64px;
		overflow:hidden;
		border-radius:50%;
	}
	.follower-pic img,
	.followed-pic img {
		object-fit:cover;
		max-height:64px;
		max-width:64px;
	}
	img.table-pic {
		max-height:64px;
		max-width:64px;
	}
	.formobile {
		display:unset;
	}
	.fordesktop {
		display:none;
	}
	#bestmatch_table .matchsurround {
		width:92px !important;
	}
}

/* Medium Screens - iPad, etc. */
@media only screen and (min-width: 600px) and (max-width: 999px) {
	html, body {
		--mobile:true;
	}
	div.showcase-content {
		position:absolute;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		overflow:hidden;
	}
	div.showcase-content div.vs-page-header {
		position:absolute;
		top:0px;
		height:43px;
		width:100%;
		padding-top:15px;
		font-size:1.2em;
		text-align:center;
		border-top-width:0px ! important;
		border-left-width:0px ! important;
		border-right-width:0px ! important;
	}
	div.showcase-content #btn_close {
		margin-top:0px;
	}
	img.poweredby_logo {
		float:right;
		margin: 0px 8px;
		max-height:32px;
	}
	div.showcase-content div.vs-page-header h1 {
		margin: 0px auto ! important;
	}
	div.showcase-left {
		position:absolute;
		top:84px;
		left:12px;
		bottom:0px;
		width:240px;
		text-align:center;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	div.showcase-content .imagewell {
		position:relative;
		background-color:white;
		border: 1px solid #444444;
		box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
		border-radius:0px;
		padding:2px;
		width:200px;
		height:200px;
		text-align:center;
		margin:0px auto 12px auto;
	}
	div.showcase-content .imagewell img {
		position:absolute;
		top:50%;
		left:50%;
		max-width:192px;
		max-height:192px;
		z-index:90;
		background-color:white;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
		transform: translate(-50%, -50%);
		transition: all 0.5s ease-in-out;
	}
	div.showcase-right {
		position:absolute;
		top:64px;
		left:255px;
		bottom:0px;
		right:12px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	div.quarters {
		display:inline-block;
		vertical-align:top;
		width:24%;
		text-align:center;
		margin-bottom:1em;
	}
	div.quarters h3 {
		font-family: Montserrat, sans-serif ! important;
		font-weight:bold;
		font-size:1em;
		margin-bottom:4px;
	}
	div.quarters div.capt {
		font-style:italic;
		font-size:0.8em;
		font-weight:200;
		margin-top:2px;
		margin-left:5px;
	}
	div.quarters div.imgspace {
		display:inline-block;
		vertical-align:middle;
		height:96px;
		width:96px;
		margin:0px auto;
		white-space:nowrap;
	}
	div.quarters div.imgspace.half {
		height:48px;
		width:auto;
	}
	div.quarters div.imgspace:before {
		content: '';
		display: inline-block;
		height: 100%;
		width:0px;
		vertical-align: middle;
	}
	div.quarters div.imgspace img:first-child {
		max-height:90px;
		max-width:90px;
		vertical-align:middle;
	}
	div.quarters div.imgspace img.padded:first-child {
		max-width:62px;
		max-height:62px;
		padding:16px;
		vertical-align:middle;
	}
	span.showrating,
	span.editrating {
		font-size:18px ! important;
	}
	div.showcase-content div.twocolumn-left {
		position:relative ! important;
		float:none ! important;
		width:100% ! important;
	}
	div.showcase-content div.twocolumn-right {
		position:relative ! important;
		float:none ! important;
		width:100% ! important;
	}
	div.showcase-content div.endcolumns {
	}
	div.showcasemap {
		background-color:white;
		border:1px solid rgba(0, 0, 0, 0.4);
		box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4);
		position:relative;
		left:160px;
		width:calc(100% - 190px);
		height:350px;
		margin-top:10px;
	}
	div.showContactlabel,
	div.showlabel {
		display:inline-block;
		width:160px;
		font-weight:bold;
		vertical-align:top;
		text-align:left;
		margin-top:16px;
		margin-right:8px;
	}
	div.showlabelabove {
		display:block;
		font-weight:bold;
		text-align:left;
		margin-top:16px;
		padding-bottom:6px;
		border-bottom:1px solid rgba(0, 0, 0, 0.4);
		margin-bottom:10px;
	}
	div.showContactdata,
	div.showdata {
		display:inline-block;
		vertical-align:top;
		margin-top:16px;
		height:auto;
		text-align:left;
		overflow:hidden;
		max-width:calc(100% - 170px);
	}
	div.showdata > :first-child {
		margin-top:0px;
	}
	div.showdatafull {
		display:block;
		margin:0px;
		padding:0px;
		width:calc(100% - 30px);
		height:auto;
		text-align:left;
		overflow:hidden;
	}
	div.showdatafull img {
		margin:5px;
	}
	.myreview {
		border:2px solid white;
		background-color:rgba(0, 0, 0, 0.6);
		padding:1em 0px;
		color:white;
		margin-top:0.5em;
		border-radius:1em;
	}
	.myreview > label {
		display:block;
		font-weight:bold;
		margin-left:1em;
		margin-bottom:0.5em;
	}
	.myreview > p {
		margin:0px 1em 0px 4em;
		font-weight:normal;
	}

	.restonote {
		border:2px solid rgba(0, 0, 0, 0.4);
		border-radius:1em;
		background-color:rgba(0, 0, 0, 0.1);
		padding:1em 0px;
		color:black;
		margin-top:0.5em;
	}
	.restonote > label {
		display:block;
		font-weight:bold;
		margin-left:1em;
		margin-bottom:0.5em;
	}
	.restonote > p {
		margin:0px 1em 0px 4em;
		font-weight:normal;
	}
	.myfavorite {
		padding:1em 0px;
		text-align:center;
	}
	.user-placard {
		float:left;
		padding:1em;
		border:1px solid #d9d6c4;
		border-radius:12px;
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		background-color:#f8f7f6;
		color:#140f06;
		position:relative;
		z-index:40;
		margin:180px auto 20px 50px;
		width:calc(40% - 50px);
		text-align:center;
	}
	.user-main {
		position:relative;
		float:right;
		padding:1em;
		border:1px solid #d9d6c4;
		border-radius:12px;
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		background-color:#f8f7f6;
		color:#140f06;
		z-index:40;
		margin:180px 50px 20px auto;
		width:calc(50% - 50px);
		text-align:center;
		overflow:hidden;
		min-height:calc(100% - 200px - 2em - 2px);
	}
	.user-main .flavorgraphheader {
		width:128px ! important;
		font-size:0.85em ! important;
	}
	.user-main .flavorgraph {
		width:128px ! important;
		height:128px ! important;
	}
	.user-main .flavorgraph canvas {
		width:128px ! important;
		height:128px ! important;
	}
	.user-main table.fulltable {
		width:100% ! important;
		margin-right:0px ! important;
		border-right:none ! important;
	}
	.follower-pic,
	.followed-pic {
		height:64px;
		width:64px;
		overflow:hidden;
		border-radius:50%;
	}
	.follower-pic img,
	.followed-pic img {
		object-fit:cover;
		max-height:64px;
		max-width:64px;
	}
	img.table-pic {
		max-height:64px;
		max-width:64px;
	}
	.formobile {
		display:unset;
	}
	.fordesktop {
		display:none;
	}
}

/* Desktop and larger screens */
@media only screen and (min-width: 1000px) {
	div.showcase-content {
		position:absolute;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		overflow:hidden;
	}
	div.showcase-content div.vs-page-header {
		position:absolute;
		top:0px;
		height:43px;
		width:100%;
		padding-top:15px;
		font-size:1.2em;
		text-align:center;
		border-top-width:0px ! important;
		border-left-width:0px ! important;
		border-right-width:0px ! important;
	}
	div.showcase-content div.vs-page-header h1 {
		margin: 0px auto ! important;
	}
	div.showcase-content #btn_close {
		margin-top:-6px;
	}
	img.poweredby_logo {
		float:right;
		margin: 0px 8px;
		max-height:32px;
	}
	div.showcase-left {
		position:absolute;
		top:84px;
		left:12px;
		bottom:0px;
		width:280px;
		text-align:center;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	div.showcase-content .imagewell {
		position:relative;
		background-color:white;
		border: 1px solid #444444;
		box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
		border-radius:0px;
		padding:2px;
		width:225px;
		height:225px;
		text-align:center;
		margin:0px auto 12px auto;
	}
	div.showcase-content .imagewell img {
		position:absolute;
		top:50%;
		left:50%;
		max-width:218px;
		max-height:218px;
		z-index:80;
		background-color:white;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
		transform: translate(-50%, -50%);
		transition: all 0.5s ease-in-out;
	}
	
	div.showcase-right {
		position:absolute;
		top:84px;
		left:285px;
		bottom:0px;
		right:12px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
	}
	div.quarters {
		display:inline-block;
		vertical-align:top;
		width:24%;
		text-align:center;
		margin-bottom:1em;
	}
	div.quarters h3 {
		font-weight:bold;
		font-size:1.1em;
		margin-bottom:4px;
	}
	div.quarters div.capt {
		font-style:italic;
		font-size:0.9em;
		margin-bottom:2px;
		font-weight:200;
	}
	div.quarters div.imgspace {
		height:128px;
		width:128px;
		margin:0px auto;
		white-space:nowrap;
	}
	div.quarters div.imgspace.half {
		height:54px;
		width:auto;
	}
	div.quarters div.imgspace:before {
		content: '';
		display: inline-block;
		height: 100%;
		width:0px;
		vertical-align: middle;
	}
	div.quarters div.imgspace img:first-child {
		max-height:128px;
		max-width:128px;
		vertical-align:middle;
	}
	div.quarters div.imgspace img.padded:first-child {
		max-width:96px;
		max-height:96px;
		padding:16px;
		vertical-align:middle;
	}
	div.showcasemap {
		background-color:white;
		border:1px solid rgba(0, 0, 0, 0.4);
		box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
		position:relative;
		left:160px;
		width:calc(100% - 190px);
		height:350px;
		margin-top:10px;
	}
	div.showContactlabel,
	div.showlabel {
		display:inline-block;
		width:160px;
		font-weight:bold;
		vertical-align:top;
		text-align:left;
		margin-top:16px;
		margin-right:8px;
	}
	div.showlabelabove {
		display:block;
		font-weight:bold;
		text-align:left;
		margin-top:16px;
		padding-bottom:6px;
		border-bottom:1px solid rgba(0, 0, 0, 0.4);
		margin-bottom:10px;
	}
	div.showContactdata,
	div.showdata {
		display:inline-block;
		vertical-align:top;
		margin-top:16px;
		height:auto;
		text-align:left;
		overflow:hidden;
		max-width:calc(100% - 170px);
	}
	div.showdata > :first-child {
		margin-top:0px;
	}
	div.showdatafull {
		display:block;
		margin:0px;
		padding:0px;
		width:calc(100% - 30px);
		height:auto;
		text-align:left;
		overflow:hidden;
	}
	div.showdatafull img {
		margin:5px;
	}
	.myreview {
		border:2px solid white;
		background-color:rgba(0, 0, 0, 0.6);
		padding:1em 0px;
		color:white;
		margin-top:0.5em;
		border-radius:1em;
	}
	.myreview > label {
		display:block;
		font-weight:bold;
		margin-left:1em;
		margin-bottom:0.5em;
	}
	.myreview > p {
		margin:0px 1em 0px 4em;
		font-weight:normal;
	}

	.restonote {
		border:2px solid rgba(0, 0, 0, 0.4);
		border-radius:1em;
		background-color:rgba(0, 0, 0, 0.1);
		padding:1em 0px;
		color:black;
		margin-top:0.5em;
	}
	.restonote > label {
		display:block;
		font-weight:bold;
		margin-left:1em;
		margin-bottom:0.5em;
	}
	.restonote > p {
		margin:0px 1em 0px 4em;
		font-weight:normal;
	}
	.myfavorite {
		padding:1em 0px;
		text-align:center;
	}

	.user-placard {
		float:left;
		padding:1em;
		border:1px solid #d9d6c4;
		border-radius:12px;
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		background-color:#f8f7f6;
		color:#140f06;
		position:relative;
		z-index:40;
		margin:180px auto 20px 50px;
		width:calc(30% - 50px);
		text-align:center;
	}
	.user-main {
		position:relative;
		float:right;
		padding:1em;
		border:1px solid #d9d6c4;
		border-radius:12px;
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		background-color:#f8f7f6;
		color:#140f06;
		z-index:40;
		margin:180px 50px 20px auto;
		width:calc(60% - 50px);
		text-align:center;
		overflow:hidden;
		min-height:calc(100% - 200px - 2em - 2px);
	}
	.user-main .flavorgraphheader {
		width:220px ! important;
		font-size:0.85em ! important;
	}
	.user-main .flavorgraph {
		width:220px ! important;
		height:220px ! important;
	}
	.user-main .flavorgraph canvas {
		width:220px ! important;
		height:220px ! important;
	}
	.user-main table.fulltable {
		width:100% ! important;
		margin-right:0px ! important;
		border-right:none ! important;
	}

	.follower-pic,
	.followed-pic {
		height:96px;
		width:96px;
		overflow:hidden;
		border-radius:50%;
	}
	.follower-pic img,
	.followed-pic img {
		object-fit:cover;
		max-height:96px;
		max-width:96px;
	}
	img.table-pic {
		max-height:96px;
		max-width:96px;
	}

	.formobile {
		display:none;
	}
	.fordesktop {
		display:unset;
	}
}

.user-coverimage {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:280px;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	z-index:1;
	overflow:hidden;
}
.user-coverimage.editable::after {
	content: "\f302";
	position:absolute;
	top:-90px;
	right:-90px;
	height:20px;
	width:20px;
	padding:30px 80px 130px 80px;
	-webkit-transform-origin:center center;
	transform-origin: center center;
	-webkit-transform: rotate(-135deg) translate(50%, 50%);
 	transform: rotate(-135deg) translate(50%, 50%);
	font-size:18px;
	background-color:rgba(0, 0, 0, 0.7);
	text-align:center;
	color:white;
	z-index:6;
	overflow:hidden;
	transition:transform 0.25s, -webkit-transform 0.25s;
	-webkit-transition: transform 0.25s, -webkit-transform 0.25s;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	cursor:pointer;
}
.user-coverimage.editable:hover::after {
	transform: rotate(-135deg) translate(0%, 0%);
}
.user-coverimage.editable .fileinputwrapper {
	position:absolute;
	bottom:-90px;
	right:-90px;
	height:180px;
	width:180px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	z-index:85;
	cursor:pointer;
}

.user-main .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
    margin:-0.75em -0.75em 1em -0.75em;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.user-main .user-subpane {
	position:relative;
}

.user-main .birthday-item {
	border-radius:1em;
	background-color:#120B08;
	padding:0px;
	margin:0.5em 0px;
}

.recent-item {
	font-size:1rem;
	border-radius:1em;
	background-color:#E6E1D5;
	padding:1em;
	margin:0.5em 0px;
}
.recent-item .rai-followed-pic {
	width:96px;
	height:96px;
	border-radius:50%;
	overflow:hidden;
	float:left;
	margin-right:8px;
}
.recent-item .rai-followed-pic img {
	object-fit:cover;
	max-height:96px;
	max-width:96px;
}
.recent-item .rai-est-pic {
	width:96px;
	height:96px;
	float:left;
	margin-right:8px;
}
.recent-item .rai-est-pic img {
	object-fit:cover;
	max-height:96px;
	max-width:96px;
}
.recent-item .rai-product-pic {
	float:right;
	margin-left:8px;
	width:96px;
	max-height:96px;
}
.recent-item .rai-product-pic img {
	max-height:96px;
	max-width:96px;
}
.recent-item .rai-review {
	font-weight:normal;
	margin-top:1em;
	font-size:0.85em;
	color:#8C7A4B;
}
.recent-item .rai-rating {
	margin-top:8px;
	font-size:1.2em;
	color:#4F4835;
}
.recent-item .rai-date {
	font-size:0.75em;
}


/* Spiffy animations for bringing in new content in the content window */
.push_out_left {
	animation: pll .75s ease none;
}
@keyframes pll {
	0% {transform: rotateY(0deg);}
	100% {transform: rotateY(-90deg);}
}

.push_in_left {
	animation: plr .75s ease none;
}
@keyframes plr {
	0% {transform: rotateY(90deg);}
	100% {transform: rotateY(0deg);}
}

.push_in_right {
	animation: prl .75s ease none;
}
@keyframes prl {
	0% {transform: rotateY(-90deg);}
	100 {transform: rotateY(0deg);}
}

.push_out_right {
	animation: prr .75s ease none;
}
@keyframes prr {
	0% { transform: rotateY(0px);}
	100% { transform: rotateY(90deg);}
}



.user-description {
	font-weight:normal;
	margin:1em 2em;
	font-size:0.85em;
	color:#8C7A4B;
}
.user-placard .pioneerbadge {
	position:absolute;
	top:10px;
	left:10px;
	font-size:32px;
	animation: colorcycle 60s infinite;
	overflow:visible;
}
.user-placard .pioneerbadge .counter {
	position:absolute;
	top:calc(100% + 2px);
	left:calc(50%);
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	background-color:black;
	color:white;
	font-size:12px;
	padding:2px 8px;
	border-radius:16px;
}
.user-placard .homebutton {
	position:absolute;
	top:10px;
	right:10px;
	font-size:32px;
	color:#8C7A4B;
	transition: transform 0.5s;
}
.user-placard .homebutton:hover {
	color:#645428;
	transform-origin:center center;
	transform: scale(1.1);
}

.user-placard .menu-item {
	width: calc(100% - 40px);
	margin: 1px 0px;
	position:relative;
}
.user-placard .menu-item.ui-state-focus {
	color:white;
}
.user-placard .menu-item i.follow {
	position:absolute;
	top:50%;
	right:10px;
	transform:translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.coverimagewrapper {
	position:relative;
	display: inline-block;
	height:64px;
	line-height:64px;
	vertical-align:top;
	width:auto;
	border:1px solid black;
	box-shadow:inset 2px 2px 4px rgba(0, 0, 0, 0.4);
	border-radius:8px;
	padding:8px;
}
.coverstdimage {
	display:inline-flex ! important;
	flex-wrap:wrap;
	justify-content:start;
	border: 1px solid black;
	padding:8px;
	background-color:white;
}
.stdthumb {
	border:1px solid black;
	padding:2px;
	background-color:white;
	margin:4px;
	height:100px;
	width:100px;
	text-align:center;
	line-height:100px;
	flex:0 0 auto;
}
.stdthumb img {
	max-width:100px;
	max-height:100px;
	margin-top:50%;
	transform:translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.user-thirds {
	display:inline-block;
	position:relative;
	vertical-align:top;
	width:32%;
	height:auto;
	text-align:center;
	font-weight:normal;
	overflow:hidden;
	white-space:no-wrap;
	text-overflow:ellipsis;
	line-height:1.5;
}
.jumping-icon {
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation: jostle 4s infinite;
	-webkit-animation: jostle 4s infinite;
}

.level-one { /* metalic bronze */
	background-position:left top;
	background-image: linear-gradient(to bottom, #CD7F32 0%, #FF9E3E 45%, #BE762E 50%, #CD7F32 55%, #F0953B 100%);
	background-size: 100% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-size-adjust: none;
}
.level-two { /* metallic silver */
	background-position:left top;
	background-image: linear-gradient(to bottom, #CCCCCC 0%, #F3F3F3 45%, #BBBBBB 50%, #CCCCCC 55%, #DDDDDD 100%);
	background-size: 100% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-size-adjust: none;
}
.level-three { /* metallic ruby */
	background-position:left top;
	background-image: linear-gradient(to bottom, #CC0E0E 0%, #FF6B6B 45%, #C00D0D 50%, #CC0E0E 55%, #E0060F 100%);
	background-size: 100% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-size-adjust: none;
}
.level-four { /* metallic emerald */
	background-position:left top;
	background-image: linear-gradient(to bottom, #23CC14 0%, #2BFC19 45%, #1FB612 50%, #23CC14 55%, #26E016 100%);
	background-size: 100% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-size-adjust: none;
}
.level-five { /* metallic gold */
	background-position:left top;
	background-image: linear-gradient(to bottom, #D1B220 0%, #FFD927 45%, #C6A81F 50%, #D1B220 55%, #EBC824 100%);
	background-size: 100% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-size-adjust: none;
}

div.big-number {
	font-size:2em;
	font-weight:normal;
}
div.big-number i {
	margin-right:12px;
}

@keyframes jostle {
	0% { transform: rotate(0deg) scale(1.0); -webkit-transform: rotate(0deg) scale(1.0);}
	5% { transform: rotate(-15deg) scale(1.1); -webkit-transform: rotate(-10deg) scale(1.3);}
	10% { transform: rotate(15deg) scale(1.2); -webkit-transform: rotate(10deg) scale(1.3);}
	15% { transform: rotate(-15deg) scale(1.2); -webkit-transform: rotate(-10deg) scale(1.3);}
	20% { transform: rotate(15deg) scale(1.1); -webkit-transform: rotate(10deg) scale(1.3);}
	25% { transform: rotate(0deg) scale(1.0); -webkit-transform: rotate(0deg) scale(1.0);}

}

@keyframes colorcycle {
  0% {color: #CB0F0F;}
  15% {color: #CBCB0F;}
  30% {color: #0FCB0F;}
  45% {color: #0FC0CB;}
  60% {color: #0F0FCB;}
  85% {color: #C90FCB;}
  100% {color: #CB0F0F;}
}

.rank-confirm {
	border:2px solid #A9A6A4 ! important;
	background-color:#FEFEFE;
	color:#222222;
	padding:10px;
	box-shadow:3px 3px 6px rgba(0, 0, 0, 0.4);
	border-radius:8px;
}
p.rankval {
	text-align:center;
	font-size:1.4em;
}

.scrollable-xy {
	overflow-x: scroll;
	overflow-y: scroll;
	transform:translate3d(0px, 0px, 0px);
}
.scrollable, .scrollable-y {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	transform:translate3d(0px, 0px, 0px);
}
.scrollable-x {
	overflow-y:hidden;
	overflow-x:scroll;
	-webkit-overflow-scrolling:touch;
	transform:translate3d(0px, 0px, 0px);
}

div.showcase-content a {
    color:black;
}

div.showname {
	font-weight:bold;
	font-size:1.5em;
	margin-bottom:20px;
}

.imagewell {
	position:relative;
    background-color:white;
    border: 1px solid #444444;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
    border-radius:0px;
    padding:2px;
	width:225px;
	height:225px;
	text-align:center;
	margin:0px auto 12px auto;
}
.imagewell:before {
	content: '';
	display: inline-block;
	height: 100%;
	width:0px;
	vertical-align: middle;
}
.imagewell.zoomable:after {
	content:url("/images/photomag.png");
	position:absolute;
	top:15px;
	left:15px;
	z-index:80;
}
.imagewell.editable {
	cursor:pointer;
}
.imagewell.editable:after {
	content: "\f302";
	position:absolute;
	font-size:18px;
	left:0px;
	right:0px;
	bottom:0px;
	height:0px;
	background-color:rgba(0, 0, 0, 0.4);
	text-align:center;
	padding-bottom:0px;
	padding-top:0px;
	color:white;
	z-index:80;
	transition:height 0.25s, padding-bottom 0.25s, padding-top 0.25s;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}
.imagewell.editable:hover:after {
	padding-bottom:16px;
	padding-top:16px;
	height:20px;
}

.droppointer::after {
	position:absolute;
	bottom:5px;
	left:10px;
	font-size:14px;
	line-height:14px;
	font-weight:bold;
	white-space:pre;
	content: "DROP BELOW\A \25BC";
	text-align:center;
}

.imagewell img {
	position:absolute;
	top:50%;
	left:50%;
	max-width:218px;
	max-height:218px;
	z-index:80;
	background-color:white;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
	transform: translate(-50%, -50%);
	transition: all 0.5s ease-in-out;
}

div.imgoverlay {
	position:fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	z-index:1499;
}
img.zoomer {
	z-index: 1500;
	-webkit-transition: top 0.5s, left 0.5s, height 0.5s, width 0.5s, background-color 0.5s, opacity 0.5s, box-shadow 0.5s;
	background-color: rgba(255, 255, 255, 0.0);
	opacity: 0.5;
	box-shadow:0px 0px 0px rgba(0, 0, 0, 0.0);
	border-radius:8px;
	border:2px solid white;
}

.comma-list > .comma-item::after {
	content: ", ";
}
.comma-list > .comma-item:last-of-type::after {
	content: " ";
}
div.sharebuttons {
	margin:1em auto;
	text-align:center;
	white-space:nowrap;
	font-size:1em;
}
div.sharebuttons a {
	font-size:1.5em;
	margin-left:10px;
}
div.sharebuttons a:hover {
	filter:brightness(1.4);
}

div.offer-sliders {
	position:absolute;
	left:0px;
	top:100px;
	width:100%;
	height:auto;
	text-align:center;
	font-weight:bold;
}
div.rgnbackground {
	position:relative;
	border-bottom:1px solid rgba(0, 0, 0, 0.4);
	padding-bottom:1em;
	background-size:cover;
	background-repeat:no-repeat;
}

.ui-shadow  {
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

/* In the Establishment Admin, for the list of applications available */
.applist {
    display:inline-block;
    vertical-align:top;
    width:32%;
    text-align:left;
	margin:0.5em 0px;
}
.applist img {
	float:left;
	max-width:64px;
	vertical-align:top;
	margin-right:10px;
}
.applist .app {
	display:inline-block;
	width:calc(100% - 74px);
	text-align:left;
	font-size:0.75em;
}

.app h3 {
	margin:0px 0px 10px 0px;
}
.app p {
	margin:10px 0px;
}

div#accordion h3 {
	text-align:left;
}

button.favebutton {
	font-size: 1em;
	line-height: 1.3;
	font-family: Montserrat, sans-serif;
	padding: 4px 1em 4px 2.5em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	text-decoration: none !important;
	border: 1px solid #cbc7bd;
	background: #eceadf;
	font-weight: bold;
	color: #453821;
	text-shadow:1px 1px 2px rgba(255, 255, 255, 0.4);
	position:relative;
	cursor:pointer;
}
button.favebutton:hover {
	border: 1px solid #654b24;
	background: #654b24;
	color: #ffffff;
}
button.favebutton:active {
	border: 1px solid #654b24;
	background: #654b24;
	color: #ffffff;
}
button.favebutton:focus {
    outline:none ! important;
}
button.favebutton:after {
	background-color: #000000 /*{global-icon-color}*/;
	background-color: rgba(0,0,0,0.4) /*{global-icon-disc}*/;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M7%2C1.872c-2-3-7-2-7%2C2c0%2C3%2C4%2C7%2C4%2C7s2.417%2C2.479%2C3%2C3c0.583-0.521%2C3-3%2C3-3s4-4%2C4-7%20C14-0.128%2C9-1.128%2C7%2C1.872z%22%2F%3E%3C%2Fsvg%3E");
	content: "";
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
	top:3px;
	left:4px;
	background-size:14px 14px;
}
button.favebutton.favorite {
	background-color:#ED0008;
	background-image: linear-gradient(to bottom, #ED0008 0%, #BC000D 100%);
	border-color: rgba(0, 0, 0, 0.3);
	color:#ffffff ! important;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.3) ! important;
}
button.favebutton.favorite:hover {
	background-image:linear-gradient(to bottom, #BC000D 0%, #ED0008 100%);
}
button.favebutton.favorite:active {
	background-image:linear-gradient(to bottom, #BC000D 0%, #9A000B 100%);
}
button.favebutton.favorite:after {
	-webkit-animation: heartbeat 1s linear infinite ! important;
	animation: heartbeat 2s linear infinite ! important;
	background-size:14px 14px;
	transform-origin: center center;
}

@-webkit-keyframes heartbeat {
	0% { transform: scale(1.0); }
	25% { transform: scale(1.0); }
	30% { transform: scale(1.2); }
	35% { transform: scale(1.0); }
	50% { transform: scale(1.0); }
	55% { transform: scale(1.2); }
	60% { transform: scale(1.0); }
	100% { transform: scale(1.0); }
}
@-moz-keyframes heartbeat {
	0% { transform: scale(1.0); }
	25% { transform: scale(1.0); }
	30% { transform: scale(1.2); }
	35% { transform: scale(1.0); }
	50% { transform: scale(1.0); }
	55% { transform: scale(1.2); }
	60% { transform: scale(1.0); }
	100% { transform: scale(1.0); }
}
@keyframes heartbeat {
	0% { transform: scale(1.0); }
	25% { transform: scale(1.0); }
	30% { transform: scale(1.2); }
	35% { transform: scale(1.0); }
	50% { transform: scale(1.0); }
	55% { transform: scale(1.2); }
	60% { transform: scale(1.0); }
	100% { transform: scale(1.0); }
}



span.lettercircle {
	display:inline-block;
	height:64px;
	width:64px;
	font-size:48px;
	font-weight:bold;
	background-color:#555555;
	color:#CCCCCC;
	line-height:64px;
	text-align:center;
	border-radius:50%;
	border:2px solid #777777;
	vertical-align:middle;
}









.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: -1px;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: -1px;
	text-align: left;
}



/*----------------------------------------------------------------------------
	MARK: Import Progress & Error Definitions
----------------------------------------------------------------------------*/
.import-progress-wrapper {
	position:absolute;
	left:33%;
	right:33%;
	bottom:80px;
	text-align:center;
	height:auto;
}
.import-progress-bar {
	width:100%;
	height:20px;
}
.import-progress-title {
	width:100%;
	font-size:1.5em;
	font-weight:bold;
	text-align:center;margin-bottom:1em;
}
.import-progress-title i {
	margin:0px 20px;
}
.import-progress-text {
	width:100%;
	font-weight:bold;
	margin-bottom:0.5em;
}
div.import-messagelist {
	border:1px solid #A9A6A4;
	position:relative;
	background-color:white;
	padding:0px;
	width:calc(100% - 2px);
	height:500px;
	overflow-x:hidden;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}

ul.import-message {
	list-style-type:none;
	margin:0px;
	padding:0px;
}
ul.import-message ul {
	margin-top:1em;
	margin-bottom:1em;
}
ul.import-message li {
	list-style-type:none;
	padding:1em;
}
ul.import-message>li:nth-child(odd) {
	background-color:#F7F7F7;
}



/*----------------------------------------------------------------------------
	MARK: Region Definitions
----------------------------------------------------------------------------*/
.rgnlevel.unused {
	border-color:#999999;
	color:#666666;
}

a.region_show {
	text-decoration:underline;
	cursor: pointer;
}



 /*----------------------------------------------------------------------------
	MARK: FontAwesome Icons instead of JQuery UI's shitty ones.
----------------------------------------------------------------------------*/
/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" fa-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent ! important;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0 ! important;
    /* Bump it up - jQuery UI is -8px */
    margin-left: 0.5em ! important;
    margin-right: 0.5em ! important;
    font-size:16px ! important;
    width:auto ! important;
}

.ui-button-icon-only .ui-icon[class*=" fa-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -5px ! important;
    margin-top: -9px ! important;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

.resultgood {
	background-color:#D4FB79;
	color:#239000;
	border:1px solid #239000;
}

.resultbad {
	background-color:#F2D1CB;
	color:#941100;
	border:1px solid #941100;
}

#resulttext {
	font-family: monospace;
	margin-top:10px;
	border:1px solid rgba(0, 0, 0, 0.4);
	padding:4px;
	height:400px;
	overflow:auto;
	white-space: pre;
}


/* Webcam view for bartcode scanning */
.barcode-aligner {
	position:absolute;
	background-color:transparent;
	border-color:rgba(128, 128, 128, 0.8);
	border-style:dashed;
	border-width:5px;
	animation: borderpulse 3s infinite;
}

@keyframes borderpulse {
	20% { opacity: 1.0; }
	50% { opacity: 0.3; }
	80% { opacity: 1.0; }
}
