/* ---------- Super Fast Cart Admin Style Sheet V11.3 ----------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
* {
	padding: 0;
  }
a, a:visited {
	cursor: pointer;
	text-decoration: none;
}
::-webkit-scrollbar {
	width: 14px;
}

::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 10px 10px #52b5c5;
	border: solid 3px transparent;
	border-radius: 7px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 10px 10px #d0cfcf;
	border: solid 6px transparent;
	background-color: #eeeeee;
	border-radius: 0 0 10px 0;
}
body {
	font-family: 'Roboto', sans-serif;
}
form {
	margin:0;
	padding:0;
	display:inline;
}
.bold {font-weight: 600;}
.box-bottom-shadow {
	box-shadow: 0 4px 2px -2px gray;
}
.nav {
	font-weight: bold;
	font-size: 8pt;
}

/* LOGIN */
.logo {
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
}
.logosmall {
	max-width: 50%;
	margin: 0 auto;
}
#LoginContainer
{
	position: absolute;
	top: 10px;
	width:100%;
}
.Login {
	background-color: var(--buttonsback-color);
	border: 3px solid var(--borders-color);
	color: #000000;
	max-width: 500px;
	box-shadow: 0px 15px 30px 0px rgba(0,0,0,0.2);
	margin:10px auto;
	line-height:50px;
}
.Login,
.Login .Prompt,
.Login input.sfc,
.Login select.sfc,
.PINPanel,
.PINPanel .Prompt,
.PINPanel input.sfc,
.PINPanel input.sfc-button {
	font-family: 'Roboto', sans-serif;	
	font-size: 30px;
	font-weight: bold;
	border-radius: 15px;
	padding: 10px;
}
.PINPanel {
	background-color: #02a4b187;
	border: 3px solid #292a3457;
	box-shadow: 0px 15px 30px 0px rgb(0 0 0 / 20%);
	color: #000000;
	margin: 100px auto 100px auto;
	text-align: center;
	max-width: 470px;
	white-space: nowrap;
	display: flex;
}
.PhonePanel {
	background-color: #6f72ff;
	border-radius: 20px;
	border: 10px solid #afc8ff;
	color: #000000;
	font-family: 'Roboto', sans-serif;	
	font-size: 14px;
	font-weight: bold;
	margin: 100px auto 100px auto;
	padding: 10px 0px 10px 0px;
	text-align: center;
	white-space: nowrap;
	width: 400px;
	min-width: min-content;
}
.inputgrow {
	flex-grow: 1;
	margin-top: 8px;
	margin-right: 14px;
}
.sfc.full {
	width: 100%;
	box-sizing: border-box;
}
.UserPasswordChangePanel ul {
	text-align: center;
	list-style-type: none;
}
@media (max-height: 470px) {
	.logo {
		display: none;
	}
}
#YesterdayBarFill, #TodayBarFill, #summary-lastmonthsales, #summary-thismonthsales, #summary-thismonthprojectionheader {
	width: 0;
	/* prevent trigger of mouse events */
	pointer-events: none;
}
.ContentBox {
	margin: 20px auto 30px auto;
	text-align: left;
	width: 700px;
	color: #000000;
	font: 12px/18px Verdana, Arial, Helvetica;
}
.ContentBox500 {
	margin: 20px auto;
	text-align: left;
	width: 500px;
	color: #000000;
	font: 12px/18px Verdana, Arial, Helvetica;
}
.ContentBox400 {
	margin: 20px auto;
	text-align: left;
	width: 400px;
	color: #000000;
	font: 12px/18px Verdana, Arial, Helvetica;
}
.ContentBox h1 {
	margin-bottom: 20px;
}
.ContentBox ol.returnpol li {
	margin-bottom: 12px;
}
.ContentBox500 h1 {
	margin-bottom: 20px;
}
.ContentBox500 ol.returnpol li {
	margin-bottom: 12px;
}
.group-header {display:none}

.highlight {
	color:red;
	float:none !important;
}
h1 {
	font: bold 40px arial, verdana, sans-serif;
	text-align: center;
	color: #338fc4;
	margin-top: 0px;
	margin-bottom: 18px;
}
.link:hover {
	cursor: pointer;
}
.module-menu {
	margin-top:10px;
	margin-bottom: 20px;
	text-align: center;
}
.module-menu a {
	margin: 0 3px;
	white-space:nowrap;
}
A.Category
{
	font-weight: normal;
	font-size: 10pt;
	color: #000000;
	font-family: 'Roboto', sans-serif;
}
A.CategoryNav
{
	font-weight: normal;
	font-size: 8pt;
	color: #0000ff;
	font-family: 'Roboto', sans-serif;
}
A.CategorySelected
{
	font-weight: bold;
	font-size: 8pt;
	color: #0000FF;
	font-family: 'Roboto', sans-serif;
}
A.Converter
{
	font-weight: normal;
	font-size: 8pt;
	color: #338fc4;
	font-family: 'Roboto', sans-serif;
}
A.Eventtitle
{
	font-family: Arial, Helvetica;
	font-size: 14px;
	font-weight: bold;
	color: #2f2f2f;
	text-decoration: none
}
TD.Eventdesc
{
	font-weight: normal;
	font-size: 11pt;
	color: #000000;
	font-family: 'Roboto', sans-serif;}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
a.spin svg {
	animation: spin 1s linear infinite;
}
A.InverseBold
{
	font-weight: bold;
	font-size: 10pt;
	color: white;
	font-family: 'Roboto', sans-serif;}
A.Model
{
	font-weight: normal;
	font-size: 8pt;
	color: #0000FF;
	font-family: 'Roboto', sans-serif;}
A.Nav
{
	font-weight: normal;
	font-size: 8pt;
	color: #0000ff;
	font-family: 'Roboto', sans-serif;}
A.Page
{
	font-weight: bold;
	font-size: 10pt;
	color: #0000AA;
	font-family: 'Roboto', sans-serif;	text-decoration: none;
}
A.SpecialsTitle
{
	font-weight: normal;
	font-size: 22px;
	color: #338FC4;
	font-family: 'Roboto', sans-serif;}
A.UpSell
{
	font-weight: normal;
	font-size: 8pt;
	color: #000000;
	font-family: 'Roboto', sans-serif;}
A.Price
{
	font-weight: normal;
	font-size: 22px;
	color: #338FC4;
	font-family: 'Roboto', sans-serif;}
B.Price
{
	font-weight: bold;
	font-size:12pt;
	font-family: 'Roboto', sans-serif;
	color: #343434;
}
B.ProductTitle
{
	font-weight: normal;
	font-size: 22px;
	color: #338FC4;
	font-family: 'Roboto', sans-serif;
}
B.SpecialsPrice
{
	font-weight: bold;
	font-size:12pt;
	font-family: 'Roboto', sans-serif;
}
B.SpecialsSale
{
	font-weight: normal;
	color: #FF0000;
	font-size: 8pt;
	font-family: 'Roboto', sans-serif;
}
B.SpecialsVariant
{
	font-weight: bold;
	color: #FF0000;
	font-size: 10pt;
	font-family: 'Roboto', sans-serif;
}


/* Styles for custom dropdowns */
.ui-selectmenu {
	display: block;
	float: none;
	margin: 0 auto 10px;
	position: relative;
	text-align: left;
	text-decoration: none;
	outline: none;
}
.ui-selectmenu-menu * { outline: none; }
.ui-selectmenu span { display: inline; }
.ui-selectmenu-menu {
	background: #fff;
	border: 1px solid #338fc4;
	border-bottom: none;
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 1000;
}
.ui-selectmenu-open { display: block; }
.ui-selectmenu-menu li { list-style-type: none; }
.ui-selectmenu-menu li a {
	border-bottom: 1px solid #338fc4;
	color: #338fc4;
	display: block;
	font: bold 18px arial, helvetica, sans-serif;
	padding: 1px 5px 3px 5px;
	text-align: left;
	text-decoration: none;
	line-height: 25px;
}
.ui-selectmenu-menu li a:hover, .ui-selectmenu-menu li.ui-selectmenu-item-selected a {
	background: #338fc4;
	color: #fff;
	line-height: 25px;
}

/* Selectmenu
----------------------------------*/
.ui-selectmenu {
	display: block;
	position:relative;
	overflow:hidden;
}
SELECT.sfc
{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-radius: 5px;
	cursor: hand;
	font-weight: normal;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	max-width: 680px;
}
SELECT.Variants option {
	font: bold 12px arial, helvetica, sans-serif;
	color: #343434;
	line-height: 18px;	
}
SELECT.Variants option:active, SELECT.Variants option:hover {
	font: bold 12px arial, helvetica, sans-serif;
	color: #343434;
	line-height: 18px;
	background-color: #338fc4;
	color: #fff;
}
.big
{
	FONT-WEIGHT: bold;
	FONT-SIZE: 18pt;
	COLOR: black;
	font-family: 'Roboto', sans-serif;
}
.receipt {
	background-color: white;
}
.ReceiptPrompt {
	clear:both;
	float:left;
	min-width:100px;
	font-weight:600;
	text-align:left;	
}
.ReceiptValue {
	float:left;
	text-align:left;	
}
.newline {
	margin-top: 10px;
}
.endline {
	margin-bottom: 10px;
}
.full 
{
	grid-column: 2;
	max-width: 100%;
	width: 100%;
}
.twoclm {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}
.threeclm {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}
.fourclm {
	display: grid;
	grid-template-columns: auto auto auto 1fr;
	align-items: center;
	white-space: nowrap;
}
TD.columnheads
{
	font-weight: bold;
	font-size: 9pt;
	color: white;
}
TD.Inverse
{
	font-weight: normal;
	font-size: 10pt;
	color: white;
	font-family: 'Roboto', sans-serif;
}
TD.InverseBold
{
	font-weight: bold;
	font-size: 10pt;
	color: white;
	font-family: 'Roboto', sans-serif;
}
.InverseSmall
{
	font-weight: normal;
	font-size: 8pt;
	color: white;
	font-family: 'Roboto', sans-serif;
}
.InverseSmallBold
{
	font-weight: bold;
	font-size: 8pt;
	color: white;
	font-family: 'Roboto', sans-serif;
}
TD.listings
{
	font-weight: bold;
	font-size: 9pt;
	font-family: Arial, Verdana, Helvetica
}
TD.LargeBodyCopy
{
	font-weight: normal;
	font-size: 11pt;
	color: black;
	font-family: 'Roboto', sans-serif;
}
TD.LargeHeadline
{
	font-weight: bold;
	font-size: 13pt;
	color: black;
	font-family: 'Roboto', sans-serif;
}
TD.Model
{
	font-weight: bold;
	font-size: 10pt;
	color: black;
}
TD.ModernBold
{
	font-weight: bold;
	font-size: 10pt;
	color: black;
	font-family: Arial, Verdana, Helvetica
}
TD.NavyBold
{
	font-weight: bold;
	font-size: 10pt;
	color: #003399;
	font-family: 'Roboto', sans-serif;
}
TD.Page
{
	font-weight: bold;
	font-size: 12pt;
	color: #000000;
	font-family: 'Roboto', sans-serif;
}
TD.ProductDescription
{
	font-weight: normal;
	text-align:left;
	font-size: 10pt;
	font-family: 'Roboto', sans-serif;
}
td.tableHeader {
	background: #333 none repeat scroll 0 0;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 10px !important;
}
.BigTitle {
	height:50px !important;
}
.BigTitle span, .BigTitle a.big {
	font-size: 21px;
	line-height: 20px;
	padding-left: 2px;
	padding-top: -10px;
}
#TopButtons {
	float: right;
	margin: -2px 5px 0 0;
	/*opacity: 0;*/
}
TD.Variants
{
	font-weight: normal;
	font-size: 9pt;
	font-family: 'Roboto', sans-serif;
}
TD.VariantsPrompt
{
	font-weight: bold;
	font-size: 9pt;
	font-family: 'Roboto', sans-serif;
}
TEXTAREA.sfc
{
	font-weight: normal;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
}
TR.Inverse
{
	font-weight: normal;
	font-size: 10pt;
	color: white;
	font-family: 'Roboto', sans-serif;
}
TR.InverseBold
{
	height:30px;
	font-weight: bold;
	font-size: 10pt;
	color: white;
	font-family: 'Roboto', sans-serif;
}

#APILog {
	display:none;
	margin:0 auto;
	max-width: 736px;
}
.APILogHeader {
	background-color: var(--colhdrbg);
	border:1px solid var(--borders-color);
	color: var(--colhdrtx);
	border-radius: 10px 10px 0 0;
	font-size: 12px;
	font-weight: bold;
	margin: 10px auto 0px auto;
	max-width:350px;
	padding: 5px 10px 5px 10px;
	width:90%;
}
.APILogDetail {
	background-color: var(--panelback);
	border:1px solid var(--borders-color);
	color: var(--paneltext);
	border:1px solid var(--borders-color);
	border-top:0;
	border-radius: 0 0 10px 10px;
	font-size: 12px;
	margin: 0px auto 10px auto;
	max-height: fit-content;
	max-width:350px;
	overflow:scroll;
	overflow-x: hidden;
	padding: 5px 10px 5px 10px;
	width:90%;
}
.button {
	background-color: var(--buttonsback-color);
	border-bottom: var(--buttonsshadow-color) thin solid;
	border-left: var(--buttonsshadow-color) thin solid;
	border-radius: 25px;
	border-right: var(--buttonshighlight-color) thin solid;
	border-top: var(--buttonshighlight-color) thin solid;
	box-shadow: rgb(0 0 0 / 22%) 0px 25.6px 57.6px 0px, rgb(0 0 0 / 18%) 0px 4.8px 14.4px 0px;
	color: var(--buttonstext-color) !important;
	cursor: pointer;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 9px;
	text-align: center;
	text-decoration: none;
}
.button-on {
	background-color: var(--buttonsonback-color);
	border-bottom: var(--buttonsshadow-color) thin solid;
	border-left: var(--buttonsshadow-color) thin solid;
	border-radius: 25px;
	border-right: var(--buttonshighlight-color) thin solid;
	border-top: var(--buttonshighlight-color) thin solid;
	color: var(--buttonsontext-color) !important;
	cursor: pointer;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 9px;
	text-align: center;
	text-decoration: none !important;
}
.button:hover
{
	border-left: var(--buttonshighlight-color) thin solid;
	border-bottom: var(--buttonshighlight-color) thin solid;
	border-right: var(--buttonshighlight-color) thin solid;
	border-top: var(--buttonshighlight-color) thin solid;
	color: var(--buttonsontext-color) !important;
	/*background-color: var(--buttonsonback-color);*/
	text-decoration: none !important;
}
.button A:link
{
	font-size: 12px;
	font-weight: bold;
	color: #001828;
	text-decoration: none;
}
.button A:visited
{
	color: #001828;
}
.summary {
	border:1px solid var(--borders-color);
	border-radius: 10px;
	margin: 10px auto 0 auto;
	padding-top: 6px;
	width: 100%;
	max-width: 800px;
}
.rTableSummary	{
	display: table;
	border-radius: 0 0 10px 10px;
	width: 100%;
	margin: 0px auto 0px auto;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;	text-align: center;
	padding: 0px 0px 5px 0px;
}
.rTableHeadline	{
	display: table;
	border-radius: 10px 10px 0 0;
	width: 100%;
	margin: 0px auto 0px auto;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;	font-weight: bold;
	text-align: center;
}
@media (min-width: 751px) {
	.rTableSummary,
	.rTableHeadline {
		width: 750px; /* Set width to 750px for wider screens */
		margin: 0 auto; /* Center the table */
	}
}
.rTableBody {
	display: table-row-group; 
}
.rTableHeading {
	display: table-cell;
	padding: 5px;
}
.rTableRow {
	display: table-row;
}
.rTableCellThird {
	display: table-cell !important;
	width: 33%;
	font-weight: normal;
}
.progressBarGood, .progressBarBad {
	width: 396px;
	height: 25px;
	line-height: 25px;
	border-radius: 12px;
	margin: 10px auto 0 auto;
}
#YesterdayAndToday {
	display: block;
	margin: 0px auto 0px auto;
	text-align: center;
	max-width: 802px;
}
#YesterdayBar, #TodayBar {
	display: inline-block;
}
.progressBarGood div {
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 25px; /* same as #progressBar height if we want text middle aligned */
	background-color: #327e00;
	border-radius: 10px;
	font-size: 14px;
	white-space: nowrap;
}
.progressBarBad div {
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 25px; /* same as #progressBar height if we want text middle aligned */
	background-color: #7c0000;
	border-radius: 10px;
	font-size: 14px;
	white-space: nowrap;
}
.grossBarGood {
	width: 280px;
	height: 22px;
	border: 1px solid #000;
	background-color: #000;
	border-radius: 12px;
	margin: 0px auto 0px auto;
}
.grossBarBad {
	width: 280px;
	height: 22px;
	border: 1px solid #000;
	background-color: #000;
	border-radius: 12px;
	margin: 0px auto 0px auto;
}
.grossBarGood div {
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 22px; /* same as #progressBar height if we want text middle aligned */
	width: 0;
	background-color: #327e00;
	border-radius: 10px;
	font-size: 14px;
}
.grossBarBad div {
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 22px; /* same as #progressBar height if we want text middle aligned */
	width: 0;
	background-color: #7c0000;
	border-radius: 10px;
	font-size: 14px;
}
.redacted {
	color: black;
	background-color: black;
	white-space:nowrap;
	-moz-transform: rotate(.8deg) skewx(-12deg);
	transform: rotate(.8deg) skewx(-12deg);
	-moz-box-shadow:3px 0 2px #444;
	box-shadow:3px 0 2px #444;
	border:1px dotted #555;
	background: -moz-linear-gradient(180deg, #000, #222);
}

/* Add a few more selectors with slightly varying styles */
.redacted:first-child {
	-moz-transform: rotate(-.8deg);
	transform: rotate(-.8deg);
}
.redacted:first-child + .redacted {
	-moz-transform: rotate(3deg);
	transform: rotate(3deg);
}

/* Highlight effect */
.redacted::-moz-selection {
	background:#e6ff3f;
}
.sfc
{
	font-weight: normal;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
}
#AddGroupToProduct .Property {font-size: 16px;line-height: 26px;}
nav ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	width: 800px;
	max-width: 100%;
}
nav li {
	display: inline;
	border: none;
	margin: 0 5px 0 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 2px 9px 0px 9px;

}
nav li {
	-moz-box-shadow: 2px -1px 3px 0px #0000004a;
	-webkit-box-shadow: 2px -1px 3px 0px #0000004a;
	 box-shadow: 2px -1px 3px 0px #0000004a;
}
nav li a, nav li a:visited {color:white}
nav li:last-of-type:hover {border-radius: 10px 10px 0 0 !important}
nav li.tabbed {background-color: darkblue;}
.CustCol1, .CustCol2, .CustCol3, .CustCol4 {font-size: 16px;vertical-align: top;}
.CustCol1 {width:12%}
.CustCol2 {width:39%}
.CustCol3 {width:12%}
.CustCol4 {width:35%}
#CountriesMenu, #CountriesShipMenu  {
	max-width: 100%;
	width: 278px;
}
#OrderPanel .Property, #CollectionsPanel .Property, #TransactionsPanel .Property {
	font-size: 16px;
	line-height: 18px;
}
#CollectionsPanel .Property {padding-top:10px}
#OrderPanel .Property .Prompt {
	display:inline-block;
	width:70px
}
#OrderPanel {
	margin: auto;
	overflow-x: clip;
	max-width: 800px;
}
.TransactionResponse, .Warning {
	border-radius: 20px;
	display: block;
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	margin: 10px auto 10px auto;
	padding: 10px;
	text-align: center;
	width: fit-content;
	max-width: 800px;
}
/* REPORT COLS */
.prodicon {
	max-width:100px;
	max-height:20px;
	vertical-align:middle;
	padding-right: 5px;
}
.sfc-colhdr {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	line-height: 20px;
	font-weight: bold;
	font-size: 12px;
	margin:auto;
	max-width:800px;
	/*padding-left:5px;*/
}
.sfc-colhdr a:link {
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}
.sfc-colhdr span, .sfc-row1 span, .sfc-row2 span, .sfc-tblhdr span {
	display: inline-block;
	white-space: nowrap;
}
.sfc-colhdr:hover {border-radius: 0 !important};
.sfc-col {
	display: inline;
}
.sfc-col200 {
	max-width: 200px;
	overflow: hidden;
}
.sfc-col300 {
	max-width: 300px;
	overflow: hidden;
}
.sfc-col30 {
	min-width: 30px;
	max-width: 30px;
}
.sfc-col40, .sfc-col40r {
	min-width: 40px;
	max-width: 40px;
}
.sfc-col50 {
	min-width: 50px;
	max-width: 50px;
}
.sfc-col50r {
	text-align: right;
}
.sfc-col60, .sfc-col60c, .sfc-col60r {
	min-width: 60px;
	max-width: 60px;
}
.sfc-col62r {
	min-width: 62px;
	max-width: 62px;
}
.sfc-col70, .sfc-col70r {
	min-width: 70px;
	max-width: 70px;
}
.sfc-col80, .sfc-col80r {
	min-width: 80px;
	max-width: 80px;
}
.sfc-col90, .sfc-col90r {
	min-width: 90px;
	max-width: 90px;
}
.sfc-col100 {
	display: inline-block;
	min-width: 100px;
	max-width: 100px;
	vertical-align: top;
}
.sfc-col100c {
	display: inline-block;
	min-width: 100px;
	max-width: 100px;
	text-align: center;
	vertical-align: top;
}
.sfc-col100f {
	display: inline-block;
	min-width: 100px;
	max-width: 100px;
	text-overflow: ellipsis;
	word-wrap: break-word;
	vertical-align: top;
}
.sfc-col100r {
	display: inline-block;
	min-width: 100px;
	max-width: 100px;
	text-align: right;
	vertical-align: top;
}
.sfc-col130 {
	display: inline-block;
	min-width: 130px;
	max-width: 130px;
	vertical-align: top;
}
.sfc-col130r {
	display: inline-block;
	min-width: 130px;
	max-width: 130px;
	text-align: right;
	vertical-align: top;
}
.sfc-col140 {
	display: inline-block;
	min-width: 140px;
	max-width: 140px;
	vertical-align: top;
}
.sfc-col140r {
	display: inline-block;
	min-width: 140px;
	max-width: 140px;
	text-align: right;
	vertical-align: top;
}
.sfc-col150 {
	display: inline-block;
	min-width: 150px;
	max-width: 150px;
	vertical-align: top;
}
.sfc-col180 {
	display: inline-block;
	min-width: 180px;
	max-width: 180px;
	vertical-align: top;
}
.sfc-col240 {
	display: inline-block;
	min-width: 240px;
	max-width: 240px;
	vertical-align: top;
}
.sfc-col300 {
	display: inline-block;
	min-width: 300px;
	max-width: 300px;
	vertical-align: top;
}
.sfc-row1, .sfc-row2 {
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 12px;
	text-align: left;
	border-top-width: 0px;
	border-bottom-width: 0px;
	margin: auto;
	box-sizing: border-box;
	padding: 2px;
	line-height: 24px;
}
.sfc-tblhdr {
	border-bottom: 0 !important;
	border-radius: 10px 10px 0 0;
	font-weight: bold;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	line-height: 20px;
	margin-top:10px;
	padding:0 4px;
}
.small
{
	font-size: 10px !important;
}
.small A, .small A:visited {
	color: #338fc4;
}

/* Forms */
.Prompt, .PromptBig {
	font-size: 18px;
	grid-column: 1;
	margin-right: 5px;
	vertical-align: middle;
	white-space: nowrap;
}

DIV.Property {
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	align-items: center;
	background-color: var(--panelback);
	border: 1px solid var(--borders-color);
	border-bottom-width: 0px;
	border-top-width: 0px;
	box-sizing: border-box; /* Opera/IE 8+ */
	color: var(--paneltext);
	font: 13px/14px 'Roboto', sans-serif;
	line-height: 30px;
	margin: 0px auto 0px auto;
	max-width: 800px;
	padding: 5px 6px 5px 6px;
	width: 100%;
}
DIV.Property:last-of-type{
	border-radius: 0 0 10px 10px;
	border: 1px solid var(--borders-color);
	border-top-width: 0px;
	padding-bottom:10px;
}
DIV.Property span {
	display: inline-block;
}
.Update input {
	background-color:orange;
}
.Section {
	background-color: #001fa0;
	border-radius: 10px 10px 0 0;
	box-sizing: border-box;
	color: #eeeeee;
	font-family: 'Roboto', sans-serif;	
	font-size: 15px;
	font-weight: bold;
	height: 26px;
	letter-spacing: 2px;
	line-height: 20px;
	margin: 10px auto 0 auto;
	max-width: 800px;
	padding: 4px 15px 4px 6px;
	text-transform: uppercase;
	vertical-align: middle;
	width: 100%;
	word-spacing: 2px;
}
.Section a, .Section a:visited {
	color:#fff;
}
.Section a:hover {
	color:#00ff00
}
INPUT.sfcbig, SELECT.sfcbig, TEXTAREA.sfcbig {border-radius: 5px;}
INPUT.sfc, SELECT.sfc, TEXTAREA.sfc,
INPUT.sfcadd, SELECT.sfcadd, TEXTAREA.sfcadd,
INPUT.sfcbig, SELECT.sfcbig, TEXTAREA.sfcbig, 
INPUT.sfcbigadd:hover, SELECT.sfcbigadd:hover, TEXTAREA.sfcbigadd:hover {
	padding: 2px 7px !important;
	border-radius: 10px;
	cursor: pointer;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
}


.Focused {
	overflow: hidden;
	white-space: nowrap;
	height: fit-content;
	text-align: justify;
	justify-content: space-evenly;
}
.Third {
	width: 33%;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}
.stretch {
	width: 100%;
	display: inline-block;
}
.sfc-headline {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size:16px;
	width: 100%;
	margin: 20px auto;
}
.centered {
	text-align: center !important;
	font-family: 'Roboto', sans-serif;
	padding: 5px;
}

.divhidden {
	max-height: 0;
	visibility: hidden;
	/*opacity: 0;*/
}
.divactive {
	transition: max-height 2s ease-out, opacity 1s ease-out;
	height:auto;
	max-height:5000px;
	/*opacity: 1;*/
}
.submenu {
	text-align: left;
	font-family: 'Roboto', sans-serif;
	padding: 10px;
	width: max-content;
	max-width: 710px;
	margin: 0 auto 20px auto;
	list-style: none;
}
.sfc-expanded {
	font-weight: normal;
	font-size: 12px;
	color: #000;
	background-color: #FD9;
	text-align:left;
	border: 1px solid #00F;
	border-top-width: 0px;
	border-bottom-width: 0px;
	margin: auto;
	box-sizing: border-box;
	padding: 2px;
	line-height: 24px;
}
.FullPageMenu, .FullPageMenuHeader, .ListView {
	flex-direction: column;
	font-size: 20px;
	margin:0;
}
.FullPageMenuHeader {
	bottom: 50px;
	display: flex;
	height: auto;
	list-style: none;
	max-height: 200px;
	min-height: 20px;
	overflow: auto;
	padding:0;
}
.FullPageMenuHeader li {
	font-family: 'Roboto', sans-serif;
	text-align:left;
	margin: auto;
	box-sizing: border-box;
	padding: 3px;
	min-width: -webkit-fill-available;
	min-width: -moz-available;
}
/*.FullPageMenu li:first-of-type {font-weight: bold;}*/
.FullPageMenu li:last-of-type {border-radius: 0 0 10px 10px}
.FullPageMenu li, .ListView li, .OrdersView li, .ProductSelector li {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	margin: auto;
	min-width: -moz-available;
	min-width: -webkit-fill-available;
	overflow: auto;
	padding: 3px;
	text-align:left;
}
ul.FullPageMenu {
	box-sizing: border-box;
	list-style-type: none;
	margin-bottom: 30px;
	padding: 0;
}
.FullPageMenu li {
	border-bottom: 0;
	border-top:0;
	font-size: 12px;
	height: 30px;
	line-height: 25px;
	overflow: hidden;
}
.FullPageMenu li span {
	float: left;
}
.FullPageMenu li:hover:first-of-type {
	border-radius: 0;
}
ul.ListView {
	border:1px solid var(--borders-color);
	bottom: 50px;
	box-sizing: border-box;
	left: 20px;
	margin: 0;
	overflow: auto;
	padding: 0;
	min-height: 20px;
	height: auto;
	display: flex;
	flex-direction: column-reverse;
	list-style: none;
}
.ListView li {
	font-size: 12px;
}
ul.ProductSelector {
	bottom: 50px;
	box-sizing: border-box;
	left: 20px;
	margin: 0;
	overflow: auto;
	padding: 0;
	min-height: 20px;
	height: auto;
	display: flex;
	flex-direction: column-reverse;
	list-style: none;
}
.ProductSelector li {
	font-size: 12px;
}
ul.OrdersView {
	display: flex;
	flex-direction: column;
	height: min-content;
	list-style-type:none;
	margin: 0 auto;
	max-height: max-content;
	max-width: 748px;
	padding:0;
}
.OrdersView li {
	font-size: 14px;
}
.OrdersView li div {
	vertical-align: middle;
}
li.off {
	opacity:0.5;
	filter: alpha(opacity=50);
}
header {
	max-width: 750px;
	margin: 0 auto;
}


/**************** Sales Reports Menu *********************/
#Report {
	margin: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

#Report .sfc-row {
    height: 36px;
}

#Report tr td:first-child {
	padding-left: 5px;
}

.burgercontainer {
	display: inline-block;
	cursor: pointer;
	position: absolute;
	top:0;
	left:6px;
	z-index: 2;
	
}
.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	margin: 4px 0;
	transition: 0.4s;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-7px, 4px);
	transform: rotate(-45deg) translate(-7px, 4px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -6px);
}
.Price, .Paid, .Due, .LTV, .Date {
	text-align: right;
	white-space: nowrap;
}

/**************** from menu.css *********************/

 /* Dropup Button */
 .dropbtn {
	background-color: #90c0f0;
	border: none;
	border-radius: 10px 10px 10px 10px;
	color: #000d46;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: bold;
	min-width: 300px;
	padding: 10px 10px;
}

/* The container <div> - needed to position the dropup content */
.dropup {
	position: relative;
	font-size: 12px;
	display:block;
	float:right;
	font-family: 'Roboto', sans-serif;
	padding-top: 23px;
}

/* Dropup content (Hidden by Default) */
.dropup-content {
	visibility: hidden;
	display: none;
	max-height: 0;
	position: absolute;
	right: 0px;
	bottom: 0px;
	background-color: #90c0f0;
	border-radius: 10px 10px 10px 10px;
	width: 300px;
	box-shadow: 0px 15px 30px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: left;
	font-family: 'Roboto', sans-serif;	/*transition: max-height 1s ease-in-out;*/
}

/* Links inside the dropup */
.dropup-content a:active {
	color: #ffd000;
}
.dropup-content a:link {
	color: #000d46;
	padding: 14px 10px;
}
.dropup-content a:visited {
	color: #000d46;
}
.dropup-content a {
	color: #000d46;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	display: block;
}
.dropup-content a:first-child {
	border-radius: 10px 10px 0px 0px;
}
.dropup-content a:last-child {
	border-radius: 0px 0px 10px 10px;
}

/* Change color of dropup links on hover */
.dropup-content a:hover {
	background-color: #000d46;
	text-decoration: none;
	color: #ffd000;
}

/* Show the dropup menu on hover */
.dropup:hover .dropup-content {
	visibility: visible;
	display: block;
	max-height: 1000px;
	/*transition: max-height 1s ease-in-out;*/
}
a.sfc-doch {background-color: #d7f0ff;}
a.sfc-doco {background-color: #90c0f0;}
a.sfc-doer {background-color: #ffcc33;}
a.sfc-dopc {background-color: #d7deff;}
a.sfc-dopp {background-color: #00b2ff;}

/* Change the background color of the dropup button when the dropup content is shown */
.dropup:hover .dropbtn {
	background-color: white;
	cursor: pointer;
}
.Save input {
	font-size: 17px;
	padding: 2px 10px;
}
.saveorder a {
	font-size: 18px;
	text-align: center;
	cursor: pointer;
	width: 300px;
	padding: 10px 0;
}

/* Sales Reports Menu */
#SalesReports {
	text-align: center;
}
#SalesReports ul {
	left:10px;
	width:170px;
	position:absolute;
	top:40px;
	bottom:unset;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
}
.shadow {box-shadow: rgb(0 0 0 / 22%) 0px 25.6px 57.6px 0px, rgb(0 0 0 / 18%) 0px 4.8px 14.4px 0px;}
.UpdatesPanel {
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 20px;
	border: 2px solid blue;
	padding: 10px;
	line-height: 28px;
	margin: 20px auto;
	max-width: 750px;
	font-family: 'Roboto', sans-serif;
}

/* Progress Bar */
#Progress {
	margin: 10px auto;
	width: 400px;
	height: 8px;
	position: relative;
	font-family: 'Roboto', sans-serif;	font-weight: 700;
}
.Cal {
	vertical-align: middle;
	cursor: pointer;
}
.Edit {
	background-color: #80e68a;
	box-shadow: inset -5px 5px 10px rgb(255 255 0);
	border-bottom: #489933 thin solid;
	border-left: #489933 thin solid;
	border-radius: 25px;
	border-right: #96f090 thin solid;
	border-top: #96f090 thin solid;
	color: #022800 !important;
	cursor: hand;
	font-family: 'Roboto', sans-serif;	font-size: 12px;
	margin: 0 0 -4px 4px;
	padding: 2px 5px;
	text-decoration: none;
}
.Edit:hover
{
	background-color: #4bff1d;
	border-left: #96f090 thin solid;
	border-bottom: #96f090 thin solid;
	color: #FFFFFF;
}

.Medal {
	margin-bottom: -9px;
	max-width: 24px;
	padding-left: 2px;
}

/* BUTTONS */
DIV.Save {
	line-height: 40px;
}
.Add, .Save {
	margin: 0px auto 0px auto;
	max-width: 800px;
	text-align: right;
	width: 100%;
}
.sfc-title .Add, .Section .Add, .sfc-title .Save {
	padding: 1px 6px;
}
.sfc-dates {
	color: #00ffea7a;
}
a.Add, a.Save, .Save a, .Add a, .Save input {
	letter-spacing: 1px;
	margin: 5px;
	padding: 4px 10px;
	white-space: nowrap;
}
div.Save {margin-top:10px;margin-bottom:20px}
div.Save a {white-space: nowrap;}
.Exchanged span, .Exchanged span a {
	text-decoration-line: line-through !important;
}
.NotEnough span {
	color: #aaa;
}
.Send
{
	border-radius: 25px;
	cursor: hand;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: bold !important;
	margin: 0 3px;
	padding: 2px 5px;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}
.sfc-button
{
	border-radius: 25px;
	cursor: hand;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: bold !important;
	margin: 0 3px;
	padding: 2px 5px;
	text-decoration: none;
	padding: 3px 7px !important;
	border: 1px solid var(--buttonshighlight-color);
}
.sfc-buttons {
	display:inline-block;
	line-height: 27px;
	text-align: right;
}
.sfc-bigbutton
{
	border-radius: 50px;
	cursor: hand;
	font-family: 'Roboto', sans-serif;
	font-size: 21px;
	font-weight: normal;
	padding: 0px 15px 1px 15px;
	text-decoration: none;
}
.sfc-button, .sfc-bigbutton
{
	background-color: var(--buttonsback-color);
	border: 0;
	box-shadow: inset -4px -3px 10px rgb(110 128 255);
	color: #05008f;
}
.sfc-button:hover, .sfc-bigbutton:hover
{
	background-color: var(--buttonsonback-color);
	color: var(--buttonsontext-color) !important;
	cursor: pointer;
	text-decoration: none !important;
}
.sfc-button-good {
	background-color: #00ffea7a;
	box-shadow: inset -5px 5px 10px rgb(255 255 0);
	border-bottom: #489933 thin solid;
	border-left: #489933 thin solid;
	border-radius: 25px;
	border-right: #96f090 thin solid;
	border-top: #96f090 thin solid;
	color: #045500;
	cursor: hand;
	font-family: 'Roboto', sans-serif;	font-size: 12px;
	margin: 0 0 -4px 4px;
	padding: 3px 7px;
	text-decoration: none;
	font-size: 14px;
}
.sfc-button-good:hover {
	background-color: #4bff1d;
	border-left: #96f090 thin solid;
	border-bottom: #96f090 thin solid;
	color: #ff0000;
}
.sfc-button-bad {
	background-color: #ff00007a;
	box-shadow: inset -5px 5px 10px rgb(255 0 0);
	border-bottom: #380000 thin solid;
	border-left: #380000 thin solid;
	border-right: #f09090 thin solid;
	border-top: #f09090 thin solid;
	border-radius: 25px;
	padding: 3px 7px;
	color: #300000;
	font-size: 14px;
}
.sfc-button-bad:hover {
	background-color: #f00;
	border-left: #ff00007a thin solid;
	border-bottom: #ff00007a thin solid;
	color: #FFFFFF;
}
.sfc-button-undo {
	background-color: #ffb300b8; /* orangey gold */
	box-shadow: inset -5px 5px 10px #ff9800;
	border-bottom: #ff9800 thin solid;
	border-left: #ff9800 thin solid;
	border-right: #ffe082 thin solid;
	border-top: #ffe082 thin solid;
	border-radius: 25px;
	padding: 3px 7px;
	color: #7a3a00;
	font-size: 14px;
}
.sfc-button-undo:hover {
	background-color: #ff9800;
	border-left: #ffd54f thin solid;
	border-bottom: #ffd54f thin solid;
	color: #fff8e1;
}
.PlanButtons {
	display: block !important;
	justify-content: space-between;
	margin: 5px 0 10px 0;
	white-space: nowrap;
}

/* MAIN MENUS */
.sfc-menu {
	border-style:solid;
	border-width:1;
	box-sizing: border-box;
	height: 30px;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	font-weight:bold;
	margin:auto;
	overflow: hidden;
	display: flex;
}
.sfc-tab, .sfc-tabbed {
	display:inline-block;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
	padding: 8px 0; /*edge & chrome*/
	text-align:center;
	flex-grow: 1;
}
@-moz-document url-prefix() {
	.sfc-tab, .sfc-tabbed {
		padding: 8px 20.84px; /*firefox*/
	}
}
.sfc-tab a, .sfc-tab a:visited, .sfc-tab a:hover, .sfc-tabbed a, .sfc-tabbed a:visited, .sfc-tabbed a:hover {
	text-decoration: none;
}
.mobilemenu ul {
	line-height: 24px;
	list-style-type:none;
	margin-block-end:0;
	margin-block-start:0;
	padding-inline-start:0;
}
.mobilemenu li {
	font-size:12px;
	margin-block-end:0;
	margin-block-start:0;
	padding:2px;
	padding-inline-start:7px;
	text-align:left;
}
.mobilemenu .sfc-title {
	background:blue;
	text-align:center;
	padding-top: 3px !important;
}

.sfm, .ssfm {
	position:absolute !important;
	margin-left:80%;
	margin-top:-35px;
}
.wsfm {
	position:absolute !important;
	margin-left:80%;
	margin-top:-35px;
}

/* FILTER MENUS */
.FilterBox {
	border-radius: 10px 10px 0 0;
	display: block;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	margin: 0px auto 0px auto;
	padding: 10px 0px 4px 0px;
	text-align: center;
	max-width: 800px;
}
.filters {
	padding:0px 0 2px 0;
	font-weight: bold;
	line-height: 26px;
}
.filtersmore {
	background-color: #07f3;
	border-radius: 6px;
	color: white;
	margin: 10px 0 0 0;
	padding: 3px 0px;
}
.filtersmore:hover {
	background-color: rgba(0, 119, 255, 0.493);
}
.filtermenu {
	position:relative;
	display:none;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	text-transform: none;
}
.filtermenu:hover {
	display: inline-flex;
}
.filtermenu .selected {
	background: rgb(97 204 253);
}
.filtermenu ul {
	border: 1px solid var(--buttonsback-color);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
	line-height: 24px;
	list-style-type:none;
	margin-left: 5px;
	margin-block-end: 0;
	margin-block-start: 9px;
	overflow-y: auto;
	overflow-x: hidden;
	overflow: inherit;
	padding-inline-start: 0;
	position: absolute;
	z-index: 2;
}
.filtermenu li {
	font-size:12px;
	list-style-type:none;
	margin-block-end:0;
	margin-block-start:0;
	padding-right: 10px;
	padding-inline-start:7px;
	text-align:left;
}
.filtermenu ul li a,.filtermenu ul li a:visited {
	cursor: pointer;
	letter-spacing: 0;
	font-weight: bold;
}
.options {
	display:none;
	font-size: 14px;
	text-transform: none;
}
.options .selected {
	background: rgb(157 215 255);
}
.options ul {
	border-right: #9fc thin solid;
	border-top: #9fc thin solid;
	border-left: #efe thin solid;
	border-bottom: #efe thin solid;
	background-color: #dfc;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
	line-height: 18px;
	list-style-type:none;
	margin-left: 5px;
	margin-block-end:0;
	margin-block-start:9px;
	max-height: 70%;
	overflow-y: auto;
	overflow-x: hidden;
	padding-inline-start:0;
	position: absolute;
	z-index: 1;
}
.options li {
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	list-style-type:none;
	margin-block-end:0;
	margin-block-start:0;
	padding-right: 10px;
	padding-inline-start:7px;
	text-align:left;
}
.options ul li a,.options ul li a:visited {
	color: #111111;
	cursor: pointer;
	letter-spacing: 0;
}
.MenuValue {
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
	border: 1px solid #00675e00;
}
.MenuValued {
	background: rgb(85 87 241);
	box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.5);
	border: 1px solid #19006700;
	color: #f9f9f9;
}
.MenuValue, .MenuValued {
	padding: 3px 7px !important;
	border-radius: 10px;
	cursor: pointer;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: none;
	white-space: nowrap;
}
.MenuValued:hover {
	/*background-color: #190067;*/
	border: 1px solid #00f;
}
.OptionValued {
	background: #eef;
	border-right: #bbf thin solid;
	border-top: #bbf thin solid;
	border-left: #ddf thin solid;
	border-bottom: #ddf thin solid;
	border-radius: 5px;
	cursor: pointer;
	color: #111111;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	padding: 3px 7px;
	text-transform: none;
}
.OptionValued:hover {
	border-right: #9fc thin solid;
	border-top: #9fc thin solid;
	border-left: #efe thin solid;
	border-bottom: #efe thin solid;
	background-color: #dfc;
}
/* FILTERS */
.sfc-filter {
	border-radius: 10px;
	box-shadow: rgb(0 0 0 / 22%) 0px 25.6px 57.6px 0px, rgb(0 0 0 / 18%) 0px 4.8px 14.4px 0px;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 24px;
	margin: 15px auto 0 auto;
	max-width: 95%;
	padding: 5px;
	text-align: center;
}
.filters select {margin-top:-1px}
@media (min-width: 1200px) {
	.sfc-filter {
		max-width: 1200px;
	}
}

input.sfc-filter {padding:0}
#CustomerOptions input {margin-left:10px}
.blacklistreasons {
	background-color: #FFCC33;
	border-radius: 5px;
	box-shadow: inset -5px 5px 10px rgb(255 255 0);
	font-size: 12px;
	text-align: right;
	border: 1px solid #FFFF33;
	color: #990000 !important;
	cursor: hand;
}
/* INPUTS */
.Roomier {
	padding: 3px 7px;
}
.Roomier:focus-visible {
	outline: 0;
}

/* FORM PANELS */
.SectionMenu {
	display:none;
	font-family: 'Roboto', sans-serif;	font-size: 12px;
	margin-left: -7px;
}
.SectionMenu .selected {
	background: #120067;
}
.SectionMenu ul {
	background: #0077ff;
	border: 1px solid #000;
	border-left: 1px solid #949494;
	border-top: 0;
	line-height: 24px;
	list-style-type:none;
	margin-block-end:0;
	margin-block-start:7px;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding-inline-start:0;
	position: absolute;
	z-index: 1;
}
.SectionMenu li {
	font-size:15px;
	list-style-type:none;
	margin-block-end:0;
	margin-block-start:0;
	padding-right: 10px;
	padding-inline-start:7px;
	text-align:left;
}
.SectionMenu li a:hover {
	color: #00ffde;
	text-decoration: none;
}
.SectionMenu li:hover {
	background-color: #120067 !important;
}
.SectionMenu ul li a {
	cursor: pointer;
	color: #f0f8ff;
}
.SectionValued {
	cursor: pointer;
	color: #00ffde;
	letter-spacing: 1px;
}

.option, .selected {
	white-space: nowrap;
}

.selectedwhite a {color: #00ffde !important}
#OrderTypeOptions>ul>li:hover {border-radius: 0;}
#adparms {
	line-height: 28px;
	display: inline;
}
#adparms>a {
	cursor: pointer;
}
#adparms span {
	transition: all 0.6s ease;
}

/* REPORTS */
.sfc-row {
	font-weight: normal;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	border-style: solid;
	border-width: 1px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	margin: auto;
	box-sizing: border-box;
	padding: 2px 5px;
	line-height: 24px;
	text-align:left;
}
.sfc-row td {
	padding: 2px 5px;
	line-height: 24px;
}
.sfc-row:first-child {
	border-top-width: 1px;
}
.sfc-row:last-child {
	border-bottom-width: 1px;
}
.sfc-row a {
	text-decoration: none;
}

.sfc-subtableheader {
	font-size: 12px;
	border-radius: 10px 10px 0 0;
}
.sfc-subtableheader td {
	padding: 8px;
}
.sfc-title
{
	border-radius: 10px 10px 0 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;	
	font-size: 15px;
	font-weight: bold;
	height:28px;
	letter-spacing: 2px;
	margin: 15px auto auto auto;
	max-width: 800px;
	overflow: hidden;
	padding: 5px !important;
	text-transform: uppercase;
	word-spacing: 2px;
}
@media screen and (min-width: 748px) {
	.ReportContainer {
		margin: 0 10px 0 10px;
	}
}
.sfc-title A:link {
	text-decoration: none;
	color:white;
}
.sfc-title A:visited {
	text-decoration: none
}
.sfc-title A:active {
	text-decoration: none
}
.sfc-title:hover {
	border-radius: 10px 10px 0 0 !important;
}
.sfc-totals
{
	border-radius: 0 0 10px 10px;
	background-position: 0 -85px !important; 
	background-repeat: repeat-x; 
	font-weight: bold;
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	margin: auto;
	box-sizing: border-box;
	float: center;
	padding: 4px 0 0 0;
	line-height: 24px;
}
.sfc-key {
	background-position: 0 -85px !important; 
	background-repeat: repeat-x; 
	font-weight: normal;
	font-size: 10px;
	margin: auto;
	box-sizing: border-box;
	float: center;
	line-height: 12px;
	padding: 4px;
}
.sfc-graphkey {
	font-size: 21px;
}
#Report tr td:last-of-type, #Report tr th:last-of-type, .Report tr td:last-of-type {
	padding-right: 5px;
}

.radiobuttons .sfc {
	box-shadow: none;
}
/* MODAL NOTES */
.modalnote {
	display: none; 
	overflow: auto; 
	pointer-events: none;
	margin: 0 auto;
	position: fixed;
	bottom: 0;
	width: 100%;

}
.modalnote-content {
	background-color: #fefefee0;
	margin: auto;
	padding: 20px;
	border: 2px solid #ffd900;
	border-radius: 20px;
	width: 1200px;
	pointer-events: auto;
}

/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
}
/* Modal Content/Box */
.modal-content {
	background-color: rgba(255, 255, 255, 0.7); /* white w/ opacity */
	border: 1px solid #888;
	border-radius: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 5% auto; /* 1% from the top and centered */
	padding: 20px;
	width: 60%; /* Could be more or less, depending on screen size */
}
.modalbox {
	display: none; /* Hidden by default */
	position: absolute;
	z-index: 1; /* Sit on top */
	left: 50%;
	transform: translateX(-50%);
	top: 50px;
	width: max-content;
	height: min-content;
	overflow: none;
}
.modalbox-content {
	border-radius: 24px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	width: 100%;
	padding-bottom: 0px;
	box-shadow: -6px 9px 15px 1px #000000;
}
.modalbox .modalbox-content div {
	background-color: var(--panelback);
	max-width: -webkit-fill-available;
	min-width: -webkit-fill-available;
	min-width: -moz-available;
	padding: 0px 15px;
}
.modalheader {
	background: linear-gradient(3deg, rgb(0 16 255) 0%, rgb(10 209 209) 77%);
	border-radius: 20px 20px 0 0;
	color: #fff;
	cursor: move;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 10px 0 10px 15px !important;
	z-index: 1;
}
.closer {
	color: #a50000;
	float: right;
	font-size: 24px;
	font-weight: bold;
	margin: 4px 14px 0 0px;
}
.closer:hover, .closer:focus, .closersmall:hover, .closersmall:focus {
	color: #f00;
	text-decoration: none;
	cursor: pointer;
}
.closersmall {
	color: #a50000;
	float: right;
	font-size: 16px;
	font-weight: bold;
	margin: 0px -6px 0 0px;
}
#landingpage {min-width: 300px;}
#GenerateLinkButton {display:none}
#GenerateLinkButton p {float:right}


/* TRANSACTION TERMINAL */
.swipedatabox {
	border: 0px;
	width: 1px;
	height: 0px;
	color: #eee;
	background-color: #eee;
}
#TTmodal .modalheader {
	font-size: 21px;
}
#TTmodal .modalbox-content div #ccmanual,
#TTmodal .modalbox-content div #swiped ,
#TTmodal .modalbox-content div #swipe {
	padding: 0;
}
#TTmodal .modalbox-content div {
	padding: 5px 10px 5px 10px;
	line-height: 30px;
}
#TTmodal .modalbox-content div:last-of-type {
	padding-bottom: 20px;
}
.balanced {
	color: #33ff00 !important;
	background-color: #327e00 !important;
}
.unbalanced {
	color: #ff0000 !important;
	background-color: #7e0000 !important;
}
#TotalCharge, #initial, #firstpay, #PPTotal, #PPTotal2, #secondpay, input.Amount {
	text-align: right;
}
.DollarAndInput {
	display: relative !important;
}
.DollarAndInput input {
	width: 100%;
	padding-left: 20px;
	text-align: right;
}
.dollar-sign {
	position: absolute !important;
	font-size: 18px;
	padding-left: 3px;
}
.percent-sign {
	position: absolute !important;
	font-size: 18px;
	margin-left: -18px;
}
INPUT.percent-input {
	padding-right: 20px !important;
}
#remainder-row0 {
	font-size: 18px;
}
#remainder-row1, #remainder-row2 {
	font-size: 18px;
	display: none;
}
#transtype {
	appearance: none;
	/* For Webkit browsers (Chrome, Safari etc.) */
	-webkit-appearance: none;
	/* For Mozilla browsers (Firefox) */
	-moz-appearance: none;
	border: none;
	box-shadow: none;
	font-weight: bold;
	margin-left: -7px;
}
#MaxRefund {display:none}
.invoice {
	background-color: #000;
	color: #fff;
	width: 660px;
}
.invoice td {
	padding: 5px;
	background-color: #fff;
	color: #000;
	text-align: right;
}
.invoice td:first-of-type {
	padding-left: 10px;
}

/* COLOR CODED STATUS */
.CAStatus {
	font-size: 12px !important;
	text-align: center;
}
.PIF {
	color:green;
}
.Nominal td {
	background-color: #00ff6721 !important;
}
.Nominal .CAStatus {
	background-color: #00ff678c !important;
}
.Forfeit td {
	background-color: #fbff004a !important;
}
.Forfeit .CAStatus {
	background-color: #fbff00 !important;
}
.Forfeit .Price {
	color: rgba(128, 128, 128, 0.5) !important;
}
.Forfeit .Due {
	color: #00000000 !important;
}
.Refunded td {
	background-color: #ffc40066 !important;
}
.Refunded .CAStatus {
	background-color: #ffc400 !important;
}
.Refunded .Due, .Refunded .Paid, .Refunded .Price, .Refunded .Paid .PIF {
	color: #00000000 !important;
}
.Gratis td {
	background-color: #4fa2f069 !important;
}
.Gratis .CAStatus {
	background-color: #3398f7 !important;
}
.Gratis .Due, .Gratis .Paid, .Gratis .Price, .Gratis .Paid .PIF {
	color: #00000000 !important;
}
.DepositNotMet td {
	background-color: #c3880059 !important;
}
.DepositNotMet .CAStatus {
	background-color: #c38800 !important;
}
.DepositNotMet .Price {
	color: rgba(128, 128, 128, 0.5) !important;
}
.DepositNotMet .Due {
	color: #00000000 !important;
}
.TransferIn td {
	background-color: #db5afe66 !important;
}
.TransferIn .CAStatus {
	background-color: #db5afe !important;
}
.TransferOut td {
	background-color: #fbff004a !important;
}
.TransferOut .CAStatus {
	background-color: #fbff00 !important;
}
.TransferOut .Due, .TransferOut .Paid, .TransferOut .Price {
	color: #00000000 !important;
}
.Blacklist td {
	background-color: #5e01394a !important;
}
.Blacklist .CAStatus {
	background-color: #ff0080 !important;
}
.Chargeback td {
	background-color: #ff000021 !important;
}
.Chargeback .CAStatus {
	background-color: #ff0000 !important;
}
.RefundDue td {
	background-color: #ffd59f !important;
}
.RefundDue .CAStatus {
	background-color: #ff9100 !important;
}
.Special td {
	background-color: #ffc3faea !important;
}
.Special .CAStatus {
	background-color: #ff58e9ea !important;
}
.Waitlist td {
	background-color: #a8a8a8ea !important;
}
.Waitlist .CAStatus {
	background-color: #8a8a8aea !important;
}

/* REPORTS */
#Report, .Report {
	table-layout: auto;
	margin: 0 auto;
}
#Report th, .Report tr th {
	border:0;
	font-family: unset;
	font-weight: 500;
	padding:2px;
	font-size: 14px;
}
#Report th div, .Report th div {
	padding-left: 15px;
}
#Report td, .Report tr td,
.tablesorter-blackice tbody>tr.even:hover>td,
.tablesorter-blackice tbody>tr.hover>td,
.tablesorter-blackice tbody>tr.odd:hover>td,
.tablesorter-blackice tbody>tr:hover>td {
	border:0;
	color: unset;
	font-family: unset;
	line-height: 20px;
	padding:2px;
	vertical-align: middle;
	font-size: 14px;
}
#Report tr.sfc-totals td,
#Report tr td.Count {
	background-color: unset !important;
}
#Report td a, .Report td a {
	font-size: 14px;
}
#Report tfoot tr, .Report tfoot tr {
	border-radius: 0 0 10px 10px;
	border-bottom: 1px;
}
#Report tfoot tr, .Report tfoot tr, #Report tfoot tr td, .Report tfoot tr td {
	background-color: var(--headersfooters-color) !important;
	padding: 6px 3px 0 0px;
}


.sfc-important
{
	background: linear-gradient(3deg, #f00 0%, rgb(255 106 0) 77%);
	font-weight: normal;
	font-size: 16px;
	color: #aa0000;
	background-color: #ffaaaa;
	text-align:center;
	max-width: 750px;
	margin: 0 auto;
	border-radius: 5px;
	padding: 5px 0;

}
.sfc-important:hover
{
	color: #ffffff;
}
.sfc-lineitem span.SKU {
	font-size: 12px;
	padding: 0;
	text-transform: uppercase;
}
.linestatus {
	background-color: #0000FF;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	margin:0 5px;
	padding: 2px 10px !important;
	text-decoration: none !important;
}
.sfc-lineitem span {
	display: inline-block;
	font-size: 16px;
	padding: 10px 5px 10px 10px;
	vertical-align: middle;
	line-height: 18px;
}
.sfc-lineitem span a {
	font-weight: bold;
}
a.sfc-lineitem, a.sfc-lineitem:visited {
	background-color: #fff800 !important;
	border-radius: 25px;
	border: 1px solid #cda56a91;
	box-shadow: inset -4px -3px 10px rgb(255 158 16);
	color: #ae1300 !important;
	cursor: hand;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: bold !important;
	margin: 0 3px;
	padding: 2px 5px;
	text-decoration: none;
}
a.sfc-lineitem:hover
{
	background-color: #ff0000 !important;
	border-left: #C09090 thin solid !important;
	border-bottom: #C09090 thin solid !important;
	border-right: #00000040 thin solid !important;
	border-top: #0000004f thin solid !important;
	color: #ffffff !important;
	text-decoration: none;
}
.LineItemButtons {
	line-height: 0px;
	padding-bottom: 7px;
}
.sfc-ordertotals span {
	display: inline-block;
	font-size: 16px;
	padding: 11px 5px 12px 10px;
	vertical-align: middle;
	line-height: 23px;
}
.sfc-ordertotals span a {
	font-weight: bold;
}
.right {
	text-align:right;
	padding-right:10px;
	padding-top:1px;
}
.middle {vertical-align: middle;}
.power svg path {fill:green}
.power svg:hover path {fill:red}
.poweroff svg path {fill:red}
.poweroff svg:hover path {fill:green}
.powerdone svg path {fill:black}
.sync svg path {fill:rgb(0, 132, 255)}
.sync svg:hover path {fill:rgb(255, 153, 0)}
/* Tooltip container */
.tooltip {
	position: relative;
	max-width: 600px;
}
.tooltiptext {
	z-index: 2;
}
/* Tooltip text */
.tooltip .tooltiptext {
	display: none;
	width: 120px;
	background-color: blue;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	padding: 0 3px 0 3px;
	border-radius: 6px;
	border: #000;
	border-style: solid;
	border-width: 2px;
	white-space: nowrap;
	top: 15px;
   
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	width: min-content;
}
  
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	display:block;
}
.AdminMsg {
	border: red 4px solid;
	border-radius: 10px;
	background: #ffe2a8;
	color: #FF0000;
	font-size: 14px;
	font-weight: bold;
	margin: 20px auto;
	padding:20px;
	TEXT-ALIGN: center;
	width:400px;
	max-width: fit-content;
}
.AdminMsg a, .AdminMsg a:visited {
	color: royalblue;
}
.AdminMsg a:hover {
	color: green;
}
.Instructor {
	font-size: 130%;
	font-style: normal;
	margin-top: 20px;
	color: black;
}
.dibs {
	font-family: 'Indie Flower', cursive;
}
.reporticon {
	max-width: 10px;
}
.ReportTotals {
	font-weight: bold;
}
.ReportFooter {
	border-radius: 0 0 10px 10px;
	padding: 3px 0;
	font-size: 14px;
	text-align: center;
}
#Buttons {
	margin: 0px 0 10px 0;
	transition: 10s;
}
.editor-box {
	width: 35vw;
	border: 1px solid #D2D2D2;
	margin: 0 auto;
	padding: 0 !important;
	background: #fff;
	border-collapse: block
}
.toolbar {
	background-color: #F5F5F5;
	text-align: center;
	-ms-grid-display: grid;
	-ms-grid-columns: repeat(12, 8.33%);
	display: grid;
	grid-template-columns: repeat(12, 8.33%);
}
.toolbar-button {
	margin: 5px;
	text-decoration: none;
	color: #000;
}
.editor {
	border: 1px solid #D2D2D2;
	min-height: 200px;
	padding: 2px;
	resize: both;
}
.Count {
	margin: 0 auto;
	max-width: 898px;
	text-align: center;
}
.Disable, .Disable:visited {
	background: #101080;
	border-radius: 18px;
	border: 3px solid #b390ff;
	color: white;
	font-size: 16px;
	margin: 0px 5px;
	padding: 3px 9px;
	text-decoration: none;
}
.Disable:hover {
	border-color:red;
	color: rgb(255, 153, 0);
}
.Disabled, .Disabled .Access, .Disabled a {
	color: grey !important;
}
#dox, #dox2 {
	text-align: center;
}
.sfc-paging {
	border-radius: 0 0 10px 10px;
	font-weight: normal;
	font-size: 12px;
	margin: auto auto 10px auto;
	box-sizing: border-box;
	padding: 5px;
	text-align: center;
}
.sfc-paging a {
	text-decoration: none;
}

footer {
	bottom: 6px;
	font-size:12px;
	position: fixed;
	text-align: center;
	width: 100%;
}
footer .copyright, footer .copyright a, footer .copyright a:visited {
	color:#338fc4;
}
#UserLog {
	display:none;
}
#UserLogPanel {
	height: fit-content;
}
.log-tooltip[data-position="above"]::after,
.log-tooltip[data-position="below"]::after {
	content: "";
	position: absolute;
	left: 20px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}
.log-tooltip[data-position="above"]::after {
	bottom: -6px;
	border-top: 6px solid #ccc;
}
.log-tooltip[data-position="below"]::after {
	top: -6px;
	border-bottom: 6px solid #ccc;
}
.SlideDown {
	display: none;
}

.strike {
	text-decoration: line-through !important;
}
.pencil {
	height:12px;
	margin-right: 3px;
}
#swipenow {
	background-color: var(--headersfooters-color);
	color: white;
	font-size: 21px;
	font-weight: bold;
	line-height: 15px;
	text-align: center;
}
.Property .billing,
.Property .shipping,
.TitleBar {
	display: none;
}
.PercentArrow {
	background-image: url('../img/arrows/PercentArrow.png');
	background-position: left;
	background-position-x: 9px;
	background-repeat: no-repeat;
}
.PercentinArrow {
	color: #ffffff;
	float: left;
	font-size: 12px;
	font-weight: bold;
	line-height: 24px;
	padding-left: 24px;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	width: 31px;
}
.adparms {
	display: none;
}
.glowred:hover {
	color: red;
	/*transform: scale(2);*/
	transition: all 0.3s;
}
.arrow {
	font-size:18px;
	padding: 0;
	line-height: 1;
	margin: 0;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.glow {
	-webkit-animation: glowing 1s ease-in-out infinite alternate;
	-moz-animation: glowing 1s ease-in-out infinite alternate;
	animation: glowing 1s ease-in-out infinite alternate;
}
.Leaderboard {
	box-sizing: border-box;
	font-size: 16px;
	font-weight: bold;
	margin: 0 auto;
	padding: 10px 0;
}
.clutter {
	display: none;
}
.nowrap {
	white-space: nowrap;
}


/* comment entry */
TEXTAREA {
	resize: vertical;
	overflow: auto;
	/* This ensures the scrollbar appears when the content overflows */
	width: 100%;
	box-sizing: border-box;
	/* Ensure padding and borders are included in the width */
}

#logoff {
	cursor: pointer;
}

.overlay {
	height: 100%;
	position: fixed;
	opacity: 0;
	top: 0;
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	z-index: -1;
}

.overlay.visible {
	transform: scale(1);
	opacity: 1;
	z-index: 1;
}

#ExpandRight,
#ExpandLeft,
#ExpandPayment {
	font-size: 10px;
	float: right;
	cursor: pointer;
}
#ShrinkRight,
#ShrinkLeft,
#ShrinkPayment {
	font-size: 10px;
	float: right;
	cursor: pointer;
	display: none;
}

.code {
	background: transparent;
	caret-color: white;
	color: transparent;
	font-family: monospace;
	font-size: 12pt;
	line-height: 14pt;
	tab-size: 2;
	overflow: auto;
	resize: none;
	white-space: nowrap;
}

pre[class*=language-].highlighting {
	height: 109px;
	margin: -113px 0 0 0;
	overflow: auto;
	padding: 0;
	pointer-events: none;
	resize: none;
	white-space: nowrap;
	/* Allows textarea to scroll horizontally */
}

pre[class*=language-].highlighting, pre[class*=language-].highlighting * {
	font-family: monospace;
	font-size: 12pt;
	line-height: 14pt;
	tab-size: 2;
}
.pad10 {
	padding: 10px
}

#start,
#end {
	text-align: center;
}

#Report TD.unconfirmed {
	color: #888;
	text-align:center;
	white-space:nowrap;
}

#Report TD.confirmed {
	text-align:center;
	white-space:nowrap;
	color: #000;
}

/* Date picker */
#ui-datepicker-div {
	z-index: 2 !important;
}
.ui-widget.ui-widget-content {
	border-radius: 10px;
	border-color: var(--titlesback-color) !important;
	border-width: 2px !important;
	background-color: #ddd;
}
.ui-datepicker .ui-datepicker-prev span.ui-icon {
	background-image: url('../img/arrows/Left10-Delta-day.gif');
	background-position: center center;
	background-size: contain;
}

.ui-datepicker .ui-datepicker-next span.ui-icon {
	background-image: url('../img/arrows/Right10-Delta-day.gif');
	background-position: center center;
	background-size: contain;
}
.ui-datepicker .ui-datepicker-prev span.ui-icon,
.ui-datepicker .ui-datepicker-next span.ui-icon {
	background-size: 10px 11px;
	height: 11px;
	margin: -5px 0 0 -4px;
	width: 10px;
}

.basket
{
	position: absolute;
	height: 26px;
	margin-left: -231px;
}
#ui-datepicker-div.ui-widget.ui-widget-content
{
	border: 1px solid var(--buttonsback-color) !important;
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
}

/* SETTINGS */
.LogHeader {
	overflow: hidden
}

.LogHeader select.sfc {
	background: var(--colhdrbg);
	border-radius: 0;
	box-shadow: unset;
	font-weight: bold;
}

.RedAlert {
	background: #ff000047;
	border: 3px solid red;
	color: black;
	font-weight: bold;
	padding: 20px;
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
	margin: 50px auto;
	max-width: 450px;
	text-align: center;
	border-radius: 10px;
}

#FilterCategory {
	width: inherit;
	font-size: 21px
}

/* AJAX */
.flash {
	animation: flashBackground 1s; /* 1 second for the entire flash */
}
#Variants {
	border:0;
}
#Variants li {
	border-radius: 0;
}
#Variants li:first-of-type {
	border-radius: 0 0 0 10px;
}
.TransferButton {
	text-shadow: 1px 1px 2px orange, 0 0 1em orange, 0 0 0.2em orange;
}
#Admin {
	margin:10px auto 0 auto !important;
}
#admininput {
	height:60px;
}
#PriceOverride {
	text-align: right;
}

#tips {
	position: fixed;
	display: none;
	bottom: 20px; /* Adjust as needed */
	right: 20px; /* Adjust as needed */
	padding: 10px;
	max-width: 200px; /* Adjust as needed */
	z-index: 9999;
}
.ProductIcons {
	max-height: 30px;
}
#UserNotifications {
	display: none;
	background: #e5e5e5;
	margin: 20px;
	position: fixed; 
	z-index: 2; 
	left: 15px;
	top: 45px;
	max-width: fit-content;
	max-height: fit-content;
	overflow: auto;
	border-radius: 10px;
}
#aisummary {
	max-height: 300px;
	overflow: scroll;
	background: #ccc;
	font-size: 14px;
}
.myCheckbox {
	vertical-align: middle;
}
.bell {
	display: block;
	height: 20px;
	position: fixed;
}
.ui-timepicker-list {
	list-style: none;
	background-color: var(--buttonshighlight-color);
	padding: 10PX;
	border-radius: 10px;
	cursor: pointer;
}
.ui-timepicker-input {
	max-width: 90px;
}
.hasDatepicker {
	width: 105px;
}
#search {
	border-radius:15px;
	margin-left:7px;
	width:75%;
}
#searchicon {
	margin: -7px 0 0px 0;
	vertical-align: bottom;
}
#searchbutton {
	margin: 0px 7px 0px 7px;
    padding: 7px 12px;
    border-radius: 19px;
}
#AgentTab, #DocumentTab, #CommentsTab, #GatewayTab, #UserLogTab, #VisitsTab, #AllPanelTab {
	opacity: 0;
}

/* Product Groups */
.RegionHeader {
	font-size: 24px;
	font-weight: bold;
}
.skdul {
	color: #333;
	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	padding: 10px !important;
	vertical-align: middle;
}
#reloadorders {
	display: inline;
}
#reloadingorders {
	display: none;
}
#reloadorders, #reloadingorders {
	cursor: pointer;
	float: left;
	margin: -3px 10px 0 7px;
}
#PieBox {
	display: table;
	font-size: 16px;
	font-family: 'Work Sans', sans-serif;
	font-weight: bold;
	margin: 0px auto 0px auto;
	padding: 2px 0px 4px 0px;
	text-align: center;
	width: 918px;
}
#PieBigBox {
	display: table;
	font-size: 16px;
	font-family: 'Work Sans', sans-serif;
	font-weight: bold;
	margin: 0px auto 0px auto;
	padding: 2px 0px 4px 0px;
	text-align: center;
	width: 800px;
}
.max400 {
	max-width: 400px;
	overflow: hidden;
}
#status {
	margin: 0px auto 0px auto;
}
#variantResultsNew ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	overflow: visible;
	width: 100%;
}
#AgentEventCity {
	display: inline;
    width: fit-content;
}
.mobileonlyrow, .mobileonlycell {
	display: none !important;
}
#OrderTotals {
	min-width: 260px;
}

#piechart_3d {
	height: 500px;
	width: 1078px;
}
#chartContainer {
	margin: 0 auto;
	width: 1078px;
	max-width: 100%;
	transition: width 0.3s ease;
}
#chartContainer.chart-fullwidth {
	width: 100% !important;
}
#orderChart {
	width: 1078px;
	height: 400px;
	display: block;
}
#TitleButtons span {
	float: right;
}
.page-number-cell {
	width: 30%;
	text-align: center;
}
#CustomerProfileTabs {
	margin-top: -20px;
}
#DocumentPanelReveal {
	opacity: 0;
	float:right;
	margin-right:5px;
}
/* CUSTOMER PROFILE */
DIV.Property span.email2, DIV.Property span.email3, DIV.Property span.phone2, DIV.Property span.phone3 {
	display: none;
}
@media only screen and (min-width: 748px)
{
	ul.Section, ul.centered 
	{
		left: 20px;
		right:20px;
		width:auto;
	}
	.mobileonly, .mobileonlyblock {display:none !important}
	
}
@media only screen and (max-width: 747px) {
	#PieBigBox {
		width: 100%;
		height: 300px;
	}
	#piechart_3d {
		width: 100% !important;
		height: 300px;
	}
	#chartContainer {
		width: 100%;
	}
	#orderChart {
		width: 100%;
		height: 300px;
	}
	#TitleButtons {
		display: block;
		font-size: 12px;
	}
	#TitleButtons span {
		float: none;
	}
	.page-number-cell {
		width: 100%;
		display: block;
	}
	#CustomerProfileTabs {
		margin-top: 0px;
		font-size: 15px;
	}
}
@media only screen and (min-width: 400px) and (max-width: 747px)
{
	ul.FullPageMenu, ul.Section, ul.centered, ul.ListView
	{
		left:20px;
		right:20px;
	}
	.nomobile, nav li .nomobile {
		display: none !important
	}

	.mobileonly {
		display: inline-block !important;
	}
	.mobileonlyblock {
		display: block !important;
	}	
	.mobileonlyrow {
		display: table-row !important;
	}	
	.mobileonlycell {
		display: table-cell !important;
	}	
	.UpdatesPanel {
		font-size: 12px;
	}
	.sfc-title {
		height: unset;
		width: 100% !important;
	}
	.fourclm {
		white-space: normal;
		display: inline;
	}
	.fourclm input, .fourclm select {
		font-size: 12px;
	}
	#DocumentPanelReveal {
		opacity: 1;
	}
}
@media only screen and (min-width: 400px) and (max-width: 550px)
{
	.sfc-tab {
		font-size: 10px;
	}
}
@media only screen and  (max-width: 399px)
{
	ul.FullPageMenu, ul.Section, ul.centered, ul.ListView
	{
		left:10px;
		right:10px;
	}
	.nomobile, nav li .nomobile {
		display: none !important
	}
	.mobileonly {
		display: inline-block;
	}
	.mobileonlyblock {
		display: block !important;
	}	
	.mobileonlyrow {
		display: table-row !important;
	}	
	.mobileonlycell {
		display: table-cell !important;
	}	
	.UpdatesPanel {
		font-size: 12px;
	}
	.sfc-title {
		height: unset;
		width: 100% !important;
	}
	.progressBarGood, .progressBarBad {
		width: 100%;
	}
	.fourclm {
		white-space: normal;
		display: inline;
	}
	.fourclm input, .fourclm select {
		font-size: 12px;
	}
	#OrderTotals {
		min-width: 200px;
	}
	#PieBigBox {
		height: 250px;
	}
	#piechart_3d {
		height: 250px;
	}
	#orderChart {
		width: 100%;
		height: 250px;
	}
	#chartContainer {
		width: 100%;
	}
	#CustomerProfileTabs {
		margin-top: 0px;
		font-size: 12px;
	}
	#DocumentPanelReveal {
		opacity: 1;
	}
	.sfc-tab {
		font-size: 9px;
	}
}