@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');

:root {
    --brown-color:#2f0f0d;
    --sand-color:#f7e9ce;
    --sand-color-opacity: rgba(248, 234, 206, 0.3);
    --green-color:#9dbc47;
    --red-color:#e30613;
    --link-color: #0070d6;
}

html {
	width: 100%;
	/*height: 100%;
	min-height: 100%; */
	overflow-x:hidden;
	overflow-y: auto;	
}


body {
	font-family: 'FiraSans', 'Helvetica', sans-serif;
	color: #222;
	/*min-height: 100%;
	height: 100%; */
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-touch-callout: none !important;
}

/*=======================================================
	
	
	
	
	UI ELEMENTS AND CONTROLS
	
	
	
	
	
=======================================================*/	

/*=======================================================
	T o d o   c h e c k b o x e s
=======================================================*/
.todo-list{display: flex;flex-direction: column;border: transparent;}.todo-list .todo-list__title{padding: 3px 6px;border: 1px solid red;}.todo-list .todo-list__label{display: flex;align-items: left center;cursor: pointer;-moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; max-width: 100%; overflow-x: hidden;}.todo-list .todo-list__label input[type=checkbox]{opacity: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.todo-list .todo-list__label input[type=checkbox] + .todo-list__check{position: absolute;width: 25px;height: 25px;border: 2px solid #888;transition: 0.2s;}.todo-list .todo-list__label input[type=checkbox]:checked + .todo-list__check{width: 25px;height: 15px;border-top: transparent;border-right: transparent;transform: rotate(-45deg);}.todo-list .todo-list__label input[type=checkbox] ~ span{position: relative;left: 40px;white-space: nowrap;transition: 0.5s;}.todo-list .todo-list__label input[type=checkbox] ~ span::before{position: absolute;content: "";top: 50%;left: 0; width: 100%;height: 1px;background: #888;transform: scaleX(0);transform-origin: right;transition: transform 0.5s;}.todo-list .todo-list__label input[type=checkbox]:checked ~ span{color: #ccc;}.todo-list .todo-list__label input[type=checkbox]:checked ~ span::before{transform: scaleX(1);transform-origin: left;}.unstriked{flex-direction: row !important;}.unstriked .todo-list__label input[type=checkbox]:checked ~ span, .todo-list .todo-list__label input[type=checkbox]:checked + .todo-list__check{color: #0b9903;}.unstriked .todo-list__label input[type=checkbox]:checked + .todo-list__check{border-color: #0b9903;}.unstriked .todo-list__label input[type=checkbox] ~ span::before{height: 0;}
/*=======================================================
	G l a s s m o r p h i c   t o g g l e
=======================================================*/
.label {display: inline-flex; align-items: center; cursor: pointer; color: black;}.label-text {margin-left: 16px;}.toggle {isolation: isolate; position: relative; height: 16px; width: 32px; border-radius: 8px; overflow: hidden; box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 6px 0px #d1d9e6, 2px 2px 2px 0px #d1d9e6 inset, -2px -2px 2px 0px #ffffff inset;}.toggle-state {display: none;}.indicator {height: 100%; width: 200%; background: #ecf0f3; border-radius: 8px; transform: translate3d(-75%, 0, 0); transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35); box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;}.toggle-state:checked ~ .indicator {background:#86cbfc; transform: translate3d(25%, 0, 0);}
/*=======================================================
	T o y   t o g g l e
=======================================================*/
toytoggle{--on: #6abbf9;--off: #f0f0f0;--transDur: 0.2s;display: inline-block;vertical-align: top;}toytoggle, toytoggle:before, toytoggle:after{border: 0;box-sizing: border-box;margin: 0;padding: 0;transform: translate(10%, -10%);}toytoggle ~ label{margin: 3pt 0 0 10pt;}toytoggle input{opacity: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;}toytoggle .toy-toggle{background: radial-gradient(at top left, #fff 10%, #fff0 20%), radial-gradient(at top right, #fff 20%, #e4e4e4 35%);border-radius: 6em;cursor: pointer;display: block;font-size: 2.6px;position: relative;margin: auto;width: 20em;height: 12em;-webkit-tap-highlight-color: transparent;}toytoggle .toy-toggle span{display: block;position: absolute;}toytoggle .toy-toggle > span{top: 50%;left: 50%;}toytoggle .toy-toggle > span:not(.handle){transform: translate(-50%, -50%);}toytoggle .border1{background: #f0f0f0;border-radius: 5.5em;box-shadow: 0 0 0.2em 0.1em #f0f0f0;width: 19em;height: 11em;}toytoggle .border2{background: linear-gradient(0deg, #fff 33%, #ccc 45%);border-radius: 4.75em;box-shadow: 0 0 0.2em 0.3em #f0f0f0 inset;width: 16.5em;height: 9.5em;}toytoggle .border3, toytoggle .handle{background: linear-gradient(90deg, var(--on) 50%, var(--off) 0);}toytoggle .border3{background-position: 75% 0%;background-size: 200% 100%;border-radius: 4.25em;box-shadow: 0 0 0.1em 0.1em #ddd inset, 0 1.5em 1.5em 1em #0004 inset, 0 0 0 4.25em #0002 inset;width: 15.5em;height: 8.5em;transition: backrgound-position var(--transDur) ease-in-out;}toytoggle .handle{border-radius: 50%;box-shadow: 0 0 0.5em 0 #0007;width: 8.5em;height: 8.5em;transform: translate(-90%, -50%);transition: transform var(--transDur) ease-in-out;z-index: 0;}toytoggle .handle:before{background: radial-gradient(2em, 1.5em at 50% 35%, #fff6 15%, #fff0), radial-gradient(1.5em 2.5em at 75% 40%, #fff6 15%, #fff0), radial-gradient(100% 100% at 50% 33%, #0000 25%, #0003 50%);border-radius: 50%;box-shadow: 0 0 0.3em, 0.1em #0003 inset;content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 3;}toytoggle .handle-on, toytoggle .handle-off{width: 50%;height: 100%;transition: transform calc(var(--transDur)/2);z-index: 2;}toytoggle .handle-off{background: var(--off);border-radius: 100% 0 0 100% / 50% 50% 50% 50%;right: 50%;transform-origin: 100% 50%;transition-delay: calc(var(--transDur)/3);transition-timing-function: ease-out;}toytoggle .handle-on{background: var(--on);border-radius: 0 100% 100% 0/ 50% 50% 50% 50%;left: 50%;transform: scaleX(0);transform-origin: 0% 50%;transition-timing-function: ease-in;}toytoggle input:checked + .toy-toggle .border3{background-position: 25% 0%;}toytoggle input:checked + .toy-toggle .handle{transform: translate(-10%, -50%);}toytoggle input:checked + .toy-toggle .handle-off{transform: scaleX(0);transition-delay: 0s;transition-timing-function: ease-in;}toytoggle input:checked + .toy-toggle .handle-on{transform: scaleX(1);transition-delay: calc(var(--transDur)/2);transition-timing-function: ease-out;}

/*=======================================================
	G E N E R A L
=======================================================*/

.noselect {
	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
}
	
a {
	color: var(--link-color);
	/*-webkit-user-select: none !important;*/
}

p strong {
	font-family: 'FiraSans-SemiBoldItalic', sans-serif;
}

h1.special {
	color: var(--brown-color);
	font-family: 'PigeonScript';
	font-size: 50pt;
	padding-top: 80pt;
	padding-bottom: 10pt;
}

h3.special {
	color: var(--brown-color);
	font-family: 'PigeonScript';
	font-size: 2em;
	padding: 0pt;
}


h2 {
	padding: 50pt 0pt 20pt 0pt;
}

h3 {
	padding: 20pt 0pt 20pt 0pt;	
}

.filter-sticky {
	position: sticky !important; 
	top: 0px;
	z-index: 1021;
	background-color: white;
}

.header-sticky {
	position: sticky; 
	top: 0px;
	background-color: white;
	padding-top: 20px !important;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 20pt;
	z-index: 1020;
}

.filter-sticky ~ .header-sticky{
	top: 0px;
}


.mobileOnly { display: none; }


.is-warning {
	border: 1px solid orange;
}

.pricetag-icon-button {
	display: inline-block;
	height: 30pt;
	cursor: pointer;
	
	padding: 5pt 5pt 5pt 0pt;
}

.icon-button-on {
	opacity: 1;
}

.icon-button-off {
	opacity: 0.3;
}

.icon-button-disabled {
	filter: saturate(0);
	cursor: not-allowed;
}

i.swOn, i.swOff, i.activeButton {
	display: inline-block;
	color: #0070d6;
	cursor: pointer;
	opacity: 1;
	padding: 5pt 5pt 5pt 0pt;
}

i.swOff {
	opacity: 0.2;
}

span.swOn, span.swOff {
	display: inline-block;
	border-radius: 10pt;
	color: white;
	background-color:  var(--link-color);
	border: 1px solid var(--link-color);
	cursor: pointer;
	opacity: 1;
	padding: 2pt 4pt 0pt 4pt;
	margin: 3pt 1pt;
	font-size: smaller;
}

span.swOff {
	background-color: transparent;
	border: 1px solid #ccc;
	color: #ccc;
}

.disabledSw {
	color: #666 !important;
	cursor: not-allowed !important;
}

.disabledMeasure {
	cursor: not-allowed !important;
}

.beta:after {
	content: " ß";
	color: red;
	vertical-align: super;
	font-size: x-small;
}

.large-font {
	font-size: 200%;
	vertical-align: middle;
}

.extra-large-font {
	font-size: 400%;
}


mark, .div-header{
  margin: 0.4em -0.4em 0em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.div-header {
	margin: 0 0 0pt 0;
	font-size: large;
	padding-left: 18pt;
	background-image: linear-gradient(to right, rgba(230, 230, 230, 0.1), rgba(230, 230, 230, 0.5) .7%, rgba(230, 230, 230, 0.5) 50%, rgba(230, 230, 230, 0.3));
}

.div-header i {
	display: inline-flex;
	vertical-align: middle;
	padding: 0 5pt;
}

.div-header input {
	font-size: large;
	display: inline-flex;
	width: 90%;
	vertical-align: middle;
}

.div-header i.fa-trash-alt{
	padding-top: 0 !important;
}

.div-select-line {
	padding: 25pt 0 15pt 10pt;
}

.shadower {width: 100%; height: 3.5em; background-color: white; opacity: 0.01; margin-top: -3.5em;}
.strong {font-weight: 900;}
.wrapper {width: 100%;}
.delete2field {position: relative; right: -70%; margin-top: -1.8em; cursor: pointer; color: #ddd; display: none !important;}
.wrapper:hover .delete2field {display: block !important;}

.div-select-line select, .div-select-line input, .div-select-line i{
	display: inline-flex;
	width: auto !important;
	vertical-align: middle;
}

.div-select-line i {
	margin: 0 5pt;
}

.border-master {
	border-left: 3px solid rgba(19, 42, 48, 0.9);
}
.border-even {
	border-left: 3px solid rgba(244, 209, 73, 0.7);
}
.border-odd {
	border-left: 3px solid rgba(202, 161, 116, 0.7);
}

mark.master {
	background-image: linear-gradient(to right, rgba(19, 42, 48, 0.5), rgba(19, 42, 48, 0.9) 6%, rgba(19, 42, 48, 0.3));
	color: white;
}

mark.odd {
  background-image: linear-gradient(to right, rgba(202, 161, 116, 0.3), rgba(202, 161, 116, 0.7) 6%, rgba(202, 161, 116, 0.3));
}

mark.even {
  background-image: linear-gradient(to right, rgba(244, 209, 73, 0.3), rgba(244, 209, 73, 0.7) 6%, rgba(244, 209, 73, 0.3));
}

mark.sand {
	background-image: linear-gradient(to right, rgba(250, 245, 230, 0.1), rgba(250, 245, 230, 0.8) 4%, rgba(250, 245, 230, 0.2));
	padding-left:30pt;
}

mark.darksand {
	background-image: linear-gradient(to right, rgba(227, 205, 157, 0.1), rgba(227, 205, 157, 0.8) 4%, rgba(227, 205, 157, 0.2));
	padding-left: 30pt;
}

.order-menu-pastry:before, .order-menu-pie:before {
	display: inline-block;
	font-family: 'MyBakeryIconset';
	font-weight: normal;
	font-style: normal;
	font-size: x-large;
	content: "\006A";
	opacity: .3;
	padding-right: 5pt;
	transform: translate(-24pt, -3pt);
	height: 8pt;
	margin: 0;
	overflow: visible;
	position: absolute;
}

.order-menu-pie:before {
	content: "\0078";
	transform: translate(-26pt, -5pt);
}

mark.gray {
	background-image: linear-gradient(to right, rgba(230, 230, 250, 0.1), rgba(230, 230, 250, 0.7) 4%, rgba(230, 230, 250, 0.3));
}

mark.dark-gray {
  background-image: linear-gradient(to right, rgba(130, 130, 150, 0.1), rgba(130, 130, 150, 0.7) 4%, rgba(130, 130, 150, 0.3));
}

mark.letuce {
  background-image: linear-gradient(to right, rgba(170, 210, 40, 0.1), rgba(170, 210, 40, 0.7) 4%, rgba(170, 210, 40, 0.3));
}

mark.tangerine {
  background-image: linear-gradient(to right, rgba(255, 120, 0, 0.1), rgba(255, 120, 0, 0.7) 4%, rgba(255, 120, 0, 0.3));
}

mark.cosmo {
  background-image: linear-gradient(to right, rgba(230, 70, 200, 0.1), rgba(230, 70, 200, 0.7) 4%, rgba(230, 70, 200, 0.3));
}

mark.aqua {
  background-image: linear-gradient(to right, rgba(70, 150, 230, 0.1), rgba(70, 150, 230, 0.7) 4%, rgba(70, 150, 230, 0.3));
}



remark {
	display: block;
	text-align: center;
	font-family: 'PigeonScript';
	font-family: 'Caveat', cursive;
	font-weight: 100;
	font-size: x-large;
	color: #1482b5;
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	border: none;
}

price {
	display: block;
	color: white;
	background-color: #555;
	text-align: right;
	font-size: larger;	
}
price lbl {
	display: none;
}
price+br {
	display: none;
}
prepayed {
	display: block;
	text-align: right;
}

cashier {
	display: block;
	text-align: center;
	font-size: x-small;
	border: none;
}

.nopadding {
	padding: 0;
}

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


.pinned-order-image {
	max-width: 100px;
	border: 3px solid white;
	outline: 1px solid #888;
	cursor: pointer;
	vertical-align: middle;
}

.pinned-order-image ~ i.fa-circle-xmark {
	display: none;
}

#imageFullView {
	box-sizing: border-box;
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	max-width: 90%;
	max-height: 90%;
	border: 3px solid white;
	outline: 1px solid #888;
	box-shadow: 0 0 40px #000;
	cursor: pointer;
	z-index: 11000;
}


.image-upload-section {
	border: 1px solid #eee;
	border-radius: 10pt;
	height: 100pt;
	text-align: center;
	margin: 0pt 20pt 0pt 0pt;
	cursor: pointer;
}

.image-upload-section + input[type="file"] {
	display: none;
}
.image-upload-section-draggin {
	border: 2px dashed #0d6efd;
	cursor: -webkit-grabbing;
} 

.image-upload-section i, .image-upload-section .image-upload-section-image-container {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40pt;
	padding: 10pt;
	color: #eee;
	height: 70pt;
}

.image-upload-section .image-upload-section-image-container {
	border-radius: 10pt 10pt 0px 0px;
	background-color: white;
}

.image-upload-section-image-container-backgrounded {
	background-color: #e8e8e8 !important;
	background-color: #848484 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%239f9f9f' fill-opacity='0.4' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.image-upload-section .image-upload-section-image-container img {
	max-height: 68pt;
	max-width: 98%;
}

.image-upload-section span.description {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: small;
	color: #ddd;
	height: 30pt;
	overflow: hidden;
}

/*=======================================================
	O N - S C R E E N    K E Y B O A R D
=======================================================*/

.touchScreen {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
		
.keyboard, .keyboard2 {
	position: fixed;
	left: 0; 
	top: 65%;
	right: 0;
	bottom: 0;
	z-index: 1001;
	background-color: rgba(200, 200, 200, 0.8);
}

.keyboard2 {
	padding: 2%;
}
		
.screenButton, .screenButtonNoBg {
	display: inline-block;
	width: 32%;
	height: 22%;
	margin: 1% 0 0 0.5%;
	background-color: rgb(120, 120, 120);
	color: white;
	border-radius: 5px;
	text-align: center;
	padding: 1% 0;
	font-size: 2em;
	cursor: pointer;
}
		
		
.screenButtonNoBg {
	background-color: transparent;
}

.keyboard2 .screenButton, .keyboard2 .screenButtonNoBg {
	width: 23%;
}		
.height4 {
	height: 93%;
	float: right;
}


/*=======================================================
	C A S H I E R     P A N E L
=======================================================*/
.measure_switcher {
	display: inline-block;
	cursor: pointer;
	color: #6497bc;
	padding: 3pt 8pt;
	margin-top: 3pt;
	text-align: center;
	border: none;
	border-right: 3px double #6497bc;
	margin-right: 1pt;
	outline: 1px solid #6497bc;
}

.measure_switcher_left {
	border-right: none !important;
	border-left: 3px double #6497bc !important;
}

#orderBoxContent .measure_switcher{
	color: #999;
	border-right: 3px double #999;
	outline: 1px solid #999;	
}
#orderBoxContent .measure_switcher_left {
	border-right: none !important;
	border-left: 3px double #999 !important;
}

#radioControl {
	border-radius: 5pt;
	border: 2px solid gray;
	padding: 10pt 10pt;
	background-image: url(../images/radio_bg3.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	color: white;
	cursor: pointer;
	min-height: 150pt;
}


#radioControl * .fa-pause {
	display: none;
}

#radioControl * .fa-play {
	display: inline;
}

#radioControl.jouele-is-playing {
	border: 2px solid orange;
}

#radioControl.jouele-is-playing * .fa-pause {
	display: inline;
}

#radioControl.jouele-is-playing * .fa-play {
	display: none;
}

.radio {
	height: 0px;
	visibility: hidden;
}

.lnk-orders {
	cursor: pointer;
	color: #ccc;
	line-height: 250%;
	display: inline-block;
	padding: 20pt 0pt 0pt 0pt;
	text-decoration: none;
	text-decoration-style: dashed;

}
.counter-container {
	display: inline-block;
	line-height: 100%;
	vertical-align: top;
	margin-left: -5pt;
	margin-top: -5pt;
}

.counter-today, .counter-future {
	display: block;
	border-radius: 10pt;
	color: white;
	background-color: orange;
	padding: 0pt 4pt;
	text-decoration: none;
	font-size: x-small;
}

.counter-future {
	color: #ccc;
	background-color: white;
	border: 1px solid #ccc;
}


#order, #allPieCakeOrders, #cakeOrder,  #pieOrder, #menuOrder, #doublecheck, #buyOrder, #coffeeHelp, #supportForm {
	display: none;
	position: absolute;
	top: 10pt;
	left: 5%;
	width: 90%;
	background-color: white;
	z-index: 1055;
	border: 1px solid black;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.7);
	padding: 20pt 10pt 30pt 10pt;
	border-radius: 5pt;
}

#supportForm {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#mug-saucer {
	display: block;
	text-align: right;
	line-height: 1.2;
	/*position: absolute;
	right: 30pt;
	top: 20pt;*/
	font-size: 4em;
	color: white;
	cursor: pointer;
}

#support {
	display: block;
	text-align: right;
	line-height: 1.2;
	padding-right: 5pt;
	/*right: 35pt;
	top: 75pt; */
	font-size: 4em;
	color: white;
	cursor: pointer;
}

#messageBox {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	background-color: white;
	z-index: 1055;
	border: 1px solid black;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.7);
	padding: 20pt 10pt 30pt 10pt;
	border-radius: 5pt;
}


#allPieCakeOrders .fa-xmark, #cakeOrder .fa-xmark,  #pieOrder .fa-xmark, #menuOrder .fa-xmark,  
#messageBox .fa-xmark, #doublecheck .fa-xmark, #buyOrder .fa-xmark, 
#royaltyForm .fa-xmark, #royaltyDebitForm .fa-xmark, #subscriptionDebitForm .fa-xmark, #correctionForm .fa-xmark, #supportForm .fa-xmark{
	cursor: pointer;
	color: #ccc;
	position: relative;
	left: -20pt;
}

#notificationWrapper {
	height: 50pt;
	width: 100%;
	position: absolute;
	top: 39%;
	left: 0;
	margin: 0;
	padding: 0;
}
#screen {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(50, 50, 50, 0.8);
	background: linear-gradient(0deg, hsla(0, 0%, 0%, 0.83) 0%, hsla(0, 0%, 0%, 0.813) 4.608%, hsla(0, 0%, 0%, 0.789) 8.784%, hsla(0, 0%, 0%, 0.758) 12.48%, hsla(0, 0%, 0%, 0.721) 15.888%, hsla(0, 0%, 0%, 0.678) 18.96%, hsla(0, 0%, 0%, 0.629) 21.792%, hsla(0, 0%, 0%, 0.575) 24.48%, hsla(0, 0%, 0%, 0.516) 27.072%, hsla(0, 0%, 0%, 0.452) 29.664%, hsla(0, 0%, 0%, 0.385) 32.256%, hsla(0, 0%, 0%, 0.314) 34.944%, hsla(0, 0%, 0%, 0.239) 37.824%, hsla(0, 0%, 0%, 0.162) 40.896%, hsla(0, 0%, 0%, 0.162) 44.256%, hsla(0, 0%, 0%,  0.162) 48%, hsla(0, 0%, 0%,  0.162) 60%, hsla(0, 0%, 0%,  0.162) 63.12%, hsla(0, 0%, 0%, 0.162) 65.92%, hsla(0, 0%, 0%, 0.239) 68.48%, hsla(0, 0%, 0%, 0.314) 70.88%, hsla(0, 0%, 0%, 0.385) 73.12%, hsla(0, 0%, 0%, 0.452) 75.28%, hsla(0, 0%, 0%, 0.516) 77.44%, hsla(0, 0%, 0%, 0.575) 79.6%, hsla(0, 0%, 0%, 0.629) 81.84%, hsla(0, 0%, 0%, 0.678) 84.2%, hsla(0, 0%, 0%, 0.721) 86.76%, hsla(0, 0%, 0%, 0.758) 89.6%, hsla(0, 0%, 0%, 0.789) 92.68%, hsla(0, 0%, 0%, 0.813) 96.16%, hsla(0, 0%, 0%, 0.83) 100%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 1045;
}

#clue {
	display: none;
	position: absolute;
	width: 100%;
	bottom: 61%;
	z-index: 1046;
	color: white;
	font-size: 3em;
	padding: 20pt 0pt 0pt 70pt;
	animation: pulse 2s 20s infinite; /* referring directly to the animation's @keyframe declaration */
	animation-delay: 10s;
	opacity: 0.9;
}

#notificationContainer {
	height: 100%;
	width: 100%;
	background-image: url(../images/line.jpg);
	background-position-y: top;
	background-repeat: repeat-x;
	background-size: contain;
	white-space: nowrap;
	overflow-x: hidden;	
	z-index: 1050;
	padding-left: 20pt;
	display: none;
}

.notific, .notific_check, .notific_routine, .notific_routine_buy {
	display: inline-block;
	border: 1px solid white;
	/*background-color: rgba(255, 255, 255, 0.5);*/
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.4) 100%);			
	border-radius: 5px;
	margin-top: 11pt;
	margin-right: 10pt;
	height: 32pt;
	max-width: 32%;
	overflow-x: hidden;
	color: #2d2c2c;	
	padding: 7pt 10pt;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: pointer;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
}
#inbox {
	max-height: 80pt;
	padding: 0;
	position: relative;
	overflow: hidden;
}
#inbox .notific {
	width: 100%;
	max-width: 100%;
	height: 60pt;
	margin: 0;
	padding-bottom: 2pt;
	border: 1px solid #5e88b9;
	background-color: white;
	box-shadow: 0px 2px 3px 2px rgba(200, 200, 200, 0.3);
	font-size: smaller;
	white-space: normal;
	color:  #5e88b9 !important;
	margin-top: 20pt;

}

#inbox .notific:first-child {
	animation: bounce 2s 8s infinite;
	animation-delay: 60s;
}

#inbox .notific i {
	font-size: large;
	position: relative;
	left: -2%;
	transform: rotate(-20deg);
}

#inbox .notific small {
	color: silver;
}


#inbox .message_counter {
	width: 100%;
	max-width: 100%;
	position: absolute;
	bottom:65%;
	right: 5%;
	border: 1px solid white;
	background-color: red;
	font-size: large;
	color:  white;
	margin: 0;
	text-align: center;
	width: 20pt;
	height: 20pt;
	z-index: 1044;
	border-radius: 10pt;
	animation: bounce 2s 8s infinite;
	animation-delay: 60s;	
}

#routineContainer {
	border: none;
	/*min-height: 80pt;*/
	display: table-cell;
}

#routineContainer .notific_routine, #routineContainer .notific_routine_buy{
	display: inline-flex;
	align-items:center;
	justify-content:center;
	border: 1px solid #5e88b9;
	color: #5e88b9;
	background-color: white;
	width: 31.3%;
	margin-left: 0;
	margin-right: 2.9%;
	height: 60pt;
	text-align: center;
	margin-top: 20pt;
}

#routineContainer .notific_routine:last-child, #routineContainer .notific_routine_buy:last-child {
	margin-right: 0;
}

#routineContainer i{
	font-size: 300%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5pt;
}

#routineContainer strong{
	display: inline-block;
	font-weight: 100;
	white-space: normal;
	vertical-align: middle;
	max-width: 60%;
}

#routineContainer div.nt span{
	display: none;
	
}

button#placeBuyOrder + p {
	text-align: center;
	font-size: smaller;
	opacity: 0.5;
	display: none;
}

button#placeBuyOrder:disabled + p {
	display: block;
}

input.bal:invalid {
	border: 1px solid red;
}

input.bal:valid+label span.asterix {
	display: none;
}

input.bal:invalid+label span.asterix {
	display: inline-block;
	color: red;
	padding-left: 5pt;
}

.notific i, .notific_check i, {
	font-size: xx-large;
	color: #ffab00;
	vertical-align: middle;
}

.notific small, .notific_check i, {
	font-size: xx-small;
	vertical-align: middle;
}





/*=======================================================
	A D M I N / M A N A G E R   P A N E L
=======================================================*/

.logo {
	margin-top: 20pt;
	width: 70%;
}

.iconPanel {
	margin: 0;
}

.logout {
	display: inline-block;
	padding: 5pt;
	color: white; 
	background-color: rgba(0,0,0,.7); 
	border-radius: 20pt;
	font-family: 'FiraSans', sans-serif;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	margin-bottom: 10pt;
	position: relative;
}
.logout a {
	color: white;
	border-bottom: 1px dotted;
    text-decoration: none;
    display: inline-block;
    height: 1em;
    line-height: 0.8em;
}
a.menu, a.logout, a.menu_disabled, a.selected {
	display: block;
	height: 50px;
	width: 100%;
	vertical-align: middle;
	padding: 10pt 0 0pt 20pt;
	color: white;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
	text-decoration: underline;
	text-decoration-style: dotted;
	background-repeat: repeat-y;
	background-position-x: 90%;
}

a.menu_disabled {
	color: #ddd;
	cursor: not-allowed;
}

a.menu_disabled i.fa-user-lock {
	padding: 0pt 5pt;
	font-size: small;
}

a.selected {
	border: none;
	text-decoration: none;
	color: #fff;
	background-image: url(../images/menu_arrow.png);
	background-repeat: no-repeat;
	background-position: right 60%;
}

a.menu i, a.logout i, a.selected i, a.menu_disabled i {
	text-decoration: none;
	font-size: x-large;
	display: inline-block;
	width: 1.5em;
	font-size: 1.5em;
}

a.logout {
	padding: 25pt 0 0pt 20pt;
	font-size: smaller;
	height: 100px;
	background-image: url(../images/line-1.png);
}

#menu_panel p, #menu_panel h3 {
	text-align: center;
}

.content {
	padding: 50pt 10pt 0pt 20pt;
}

.content h1 {
	padding: 0pt 0pt 20pt 0pt;	
}

.content div.row {
	padding: 10pt 0pt 10pt 0pt;	
}

#messageBox h1, #messageBox h3 {
	display: inline-block;
}

div.rowhovered {
	min-height: 50pt;
}

div.compact {
	min-height: 35pt !important;
	height: auto !important;
	padding-top: 3pt !important;
}

.content div.rowhovered:hover {
	background-color: rgba(200, 200, 200, 0.1);
}

.content div.row .fa-trash-alt, .content div.row .fa-paperclip, .content div.row .fa-copy {
	display: none;
	cursor: pointer;
	padding: 7pt 0pt 0pt 10pt;
	color: black;
}


.content div.row .fa-lock-open, .content div.row .fa-lock {
	display: inline-block;
	cursor: pointer;
	padding: 7pt 0pt 0pt 10pt;
}


.content div.rowhovered:hover .fa-trash-alt, .content div.rowhoverednobg:hover .fa-trash-alt, .content div.rowhovered:hover .fa-paperclip,  .content div.rowhoverednobg:hover .fa-copy{
	display: inline-block;
}


.content div.blockobject div.col-2 {
	color:#d1bfa4
	text-align: right;
}
.content div.blockobject:hover .fa-trash-alt, .content div.blockobject:hover .fa-copy {
	display: inline-block;
}

.inplace, .inplace2field, .noframe, .inplace-no-field {
	border-radius: 5px;
	border: 1px solid transparent;
	background-color: transparent;
}

.heavy {
	font-weight: bold;
}
input.light {
	font-family: 'FiraSans-LightItalic', sans-serif;
	font-style: italic;
}

.editing {
	border-radius: 5px;
	border: 1px solid var(--link-color);
	background-color: white !important;
}

select.inplace {
	color: var(--link-color);
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

.button_panel {
	padding: 10pt 0pt 40pt 10pt;
}

.locked {
	opacity: 0.5;
	text-decoration: line-through;
}


#menu_panel{ 
	position: fixed !important;
	height: 100%;
}

.connectedAccounts {
	color: #eee !important;
	cursor: default;
	display: inline-block;
	margin-left: 20pt;
	font-size: x-large;
}




.template, .templateInput {
	border: 1px solid rgba(8, 131, 214, 0.74);
	background-color: rgba(9,  133,  215, 0.41);
	color: white;
	border-radius: 15pt;
	padding: 5pt 10pt;
	display: inline-block;
	font-size: small;
	margin: 7pt 5pt 0pt 0pt;
	cursor: pointer;
}

.white {
	border: 1px solid #ddd !important;
	background-color: white !important;	
	color: #ddd !important;
}

.black  {
	border: 1px solid black;
	background-color: black;	
	color: white;
}

.green  {
	border: 1px solid green;
	background-color: rgba(0, 89, 0, 0.83);	
	color: white;
}

.red {
	border: 1px solid red;
	background-color: rgba(255, 0, 0, 0.72);	
	color: white;
}

.blue {
	border: 1px solid blue;
	background-color: rgba(0, 0, 255, 0.87);	
	color: white;
}

.sky {
	border: 1px solid #009fd4;
	background-color: rgba(0, 159, 212, 0.82);	
	color: white;
}

.rose  {
	border: 1px solid #ff009a;
	background-color: rgba(255, 0, 154, 0.79);	
	color: white;
}

.yellow {
	border: 1px solid yellow;
	background-color: rgba(255, 255, 0, 0.89);	
	color: black;
}

.violet {
	border: 1px solid #670067;
	background-color: rgba(103, 0, 103, 0.83);	
	color: white;
}

.chocolate {
	border: 1px solid #261400;
	background-color: rgba(58, 30, 0, 0.8);	
	color: white;
}

.gold {
	border: 1px solid #fdc202;
	background-color: #fdc202;	
	color: white;
}

.silver {
	border: 1px solid silver;
	background-color: silver;	
	color: white;
}

#explanatory {
	margin: 20pt 0pt 40pt 0pt;
}

#header{
	padding: 10pt 10pt;
	height: 40%;
	max-height: 40%;
	color: white;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 0 30pt 0;
}


#header div span.logout {
	position: absolute;
	right: 2%;
	bottom: 15%;
} 


.logobox {
	/*height: 100%;*/
	display: inline-block;
	padding: 0;
	height: auto !important; 
	width: 18%;
}

#header h3.special {
	display: inline-block;
	overflow: hidden;
	/*white-space: nowrap;*/
	font-family: 'FiraSans-Light', sans-serif;
	font-size: 2em;
	color: white;
}


.cashier {
	background: url(../images/bg_cashier_2.jpg) no-repeat;
	background-position: center 70%;
	margin: 0;
}

.manager {
	background: url(../images/bg_manager.jpg) no-repeat;
	background-position: center 70%;
	margin: 0;
	padding: 0;
}


.autosize {
  resize: none !important;
  overflow: hidden !important;
}

.empty_queue_text {
	text-align: center;
	font-size: x-large;
	color: rgba(200, 200, 200, .5);
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 	
}


.baker_item, .baker_aggregate_item {
	overflow-x: hidden;
	overflow-y: hidden;
	height: 50pt;
	padding: 0pt;
}

.baker_baking, .baker_ready {
	background-color: #fc6600;
	height: 50pt;
	padding: 15pt 40pt 0pt 20pt;
	color: white;
	text-align: right;
	font-size: x-large;
}

.baker_ready {
	background-color: #84c011;
}

.baker_queue, .baker_queue1 {
	height: 50pt;
	cursor: pointer;
	border-bottom: 1px solid rgba(200, 200, 200, 0.3);
	font-weight: 100;
	font-size: larger;
	font-family: 'FiraSans-Light', sans-serif;
	padding: 15pt 20pt 0pt 20pt;
	box-shadow: 5px 0 3px rgba(0,0,0,0.2);
	position: relative;
	top: -50pt;
	background-color: white;
	z-index: 100;
}

.baker_queue1 {
	background-color: #fc6600;
	color: white;
	display: none;
	z-index: 101;
}

.baker_aggregate_queue {
	color: black;
	height: 50pt;
	cursor: pointer;
	border-bottom: 1px solid rgba(200, 200, 200, 0.3);
	font-weight: 900;
	font-size: larger;
	font-family: 'FiraSans', sans-serif;
	padding: 15pt 20pt 0pt 20pt;
	box-shadow: 5px 0 3px rgba(0,0,0,0.2);
	position: relative;
	background-color: white;
	z-index: 100;
}

.baker_queue span, .baker_queue1 span, .baker_aggregate_queue span, .baker_aggregate_queue span {
	display: inline-block;
}

.baker_queue span.title, .baker_queue1 span.title, .baker_aggregate_queue span.title {
	width: 90%;
}

.baker_queue span.title small, .baker_queue1 span.title small, .baker_aggregate_queue span.title small {
	font-size: small;
	opacity: .7;
}

.aggregate_detail {
	display: none;
}

.aggregate_detail .baker_queue span.title, .aggregate_detail .baker_queue1 span.title{
	padding-left: 20pt;
}

.baker_aggregate_queue span.title i {
	color: rgba(200, 200, 200, .5);
}

.baker_queue span.amount, .baker_queue1 span.amount, .baker_aggregate_queue span.amount {
	width: 10%;
	text-align: right;
}

a.recipe-book{
	display: inline-block;
	font-size: 70pt;
	color: white;
	cursor: pointer;
	margin: -5pt 0 0 10pt;
	text-decoration: none;
	text-shadow: 2px 2px 5px black;
}

a.fa-bible:hover {
	text-shadow: 0px 0px 10px rgba(255, 171, 0, 1);
	cursor: pointer;
}

.uname {
	text-align: right;
	width: 80%;
	display: inline-block;
	vertical-align: middle
}

.leftAligned {
	text-align: left !important;
}

.rightAligned {
	text-align: right !important;
}
.uname small {
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 10pt;
	padding: 2pt 10pt;
}

.visible {
	display: block !important;
}

#reload {
	position: fixed;
	top: 0;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	z-index: -1;
}

.sort {
	cursor: pointer;
	padding: 5pt;
	overflow: hidden;
	white-space: nowrap;
	overflow-x: hidden;
	background-color: white;
	max-width: 100%;
}


.sort h4 {
	padding: 0 !important;
	margin: 0 !important;
}

.group, .group ~ .fa-xmark {
	font-size: large;
	font-weight: 900;
	border-radius: 18pt !important;
}
.sort .fa-scale-unbalanced{
	opacity: 0.5;
	padding-right: 10pt;
}
.sort ._title {
	display: inline-block;
	width: 100%;
	border-radius: 10pt;
	padding: 2pt 10pt;
	overflow: hidden;
	border: 1px solid #eee;
}

.sort .fa-xmark {
	transform: translateX(-101%);
	border-radius: 10pt;
	color: #eee;
	background-color: aqua;
	padding: 2pt 5pt 3pt 10pt;
	vertical-align: top;
	margin-top: 3pt;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);
}

.sort .fa-xmark:hover {
	color: rgba(255, 171, 0, 0.43);
}

.head {
	text-align: center;
	font-size: x-small;
	opacity: 0.3;
}

.in_process {
	padding-top: 5pt;
	opacity: 0.5;
}

.more {
	color: #6497bc;
	text-decoration: underline;
	text-decoration-style: dashed;
	cursor: pointer;
}

.more span:after {
	content: "→";
}

.more span.exp:after {
	content: "↓";
}

#more {
	display: none;
}

.pinned_item{
	padding: 1pt 0;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 3%, rgba(121,9,9,1) 3%, rgba(230,2,2,1) 97%, rgba(255,255,255,1) 97%, rgba(255,255,255,1) 100%);
}

.pinned_item_cashier{
	padding: 1pt 0;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 3%, rgba(121,9,9,1) 3%, rgba(230,2,2,1) 97%, rgba(255,255,255,1) 97%, rgba(255,255,255,1) 100%);
}

#pinbox .row {
	padding-top: 20pt;
}



.sticker, .sticker_cashier_inner, .sticker_cashier, .buyBox{
	margin-right: 0px;
	background-color: #ccc;
	padding: 1px 1px 2px 1px;
	position: relative;
	left: 0px;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
    color: #aaa;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.7);
    --mask: linear-gradient(#000 0 0) center/100% calc(100% - 8px) no-repeat, radial-gradient(circle 2px at 75% 0%,#0000 98%,#000) 50% 2px/8px 2px repeat-x, radial-gradient(circle closest-side at 25% 50%,#000 99%,#0000 101%) top/8px 4px repeat-x, radial-gradient(circle 2px at 75% 100%,#0000 98%,#000) 50% calc(100% - 2px)/8px 2px repeat-x, radial-gradient(circle closest-side at 25% 50%,#000 99%,#0000 101%) bottom/8px 4px repeat-x;
	-webkit-mask: var(--mask);
	mask: var(--mask);
}
.buyBox {
	margin-right: 5px;
	border-right: 1px solid #ccc; 
}

.sticker_cashier_inner, .sticker_inner, .buyBox_inner {
	padding: 10pt;
	margin: 1px 1px 1px 1px;
	background-color: #fff;
	box-shadow: none;
	color: black;
	font-family: 'Ubuntu Mono', monospace;
}

.buyBox_inner {
	padding: 10pt;
	margin: 1px 1px 1px 1px;
	background-color: #fff;
	box-shadow: none;
	color: black;
	font-size: small!important;
}

.buyBox_inner h2{
	font-weight: 600;
	font-size: x-large !important;
	padding: 15pt 0pt 0pt 10pt;
}

.pin_baker {
	display: inline-block;
	font-style: normal;
	font-size: xx-large;
	vertical-align: top;
	background-color: #333;
	border-radius: 20pt;
	padding: 0pt 10pt;
	color: white;
	float: left;
	margin-right: 15pt;
}

.pin {
	font-size: 30pt;
	color: #a40808;
	float: left;
	width: 0px;
	overflow: visible;
	position: relative;
	top: -20pt;
	left: -30pt;
	padding-left: 30pt;
}



.pinned_item > i.fas,  .pinned_item_cashier > i.fas{
	font-size: 36pt;
	padding: 0pt 10pt 20pt 0pt;
	margin-top: -56pt;
	color: white;
	right: 0;
	display: block;
	text-align: right;
}

.dr {
	
	padding: 3pt 5pt 0pt 0pt; 
	display: inline-block;
	position: relative;
}

div.dr {
	width: 80px;
	height: 27pt;
	overflow: hidden;	
}

.dr_title {
	height: 27pt;
	width: 140px;
	white-space: nowrap;
	overflow: hidden;
	padding-top: 8pt;
	overflow: hidden;
	font-size: x-small;
}

.dr_title_title {
	display: inline-block;
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	padding-top: 2pt;
	transform: translateY(2pt);
 }

.dr_balance, .dr_whom, .dr_plan, .dr_start, .dr_finish {
	display: inline-block;
	width: 50%;
	font-size: xx-small;
	opacity: 0.4;
}

.dr_plan {
	display: inline-block;
	width: 30px;
	margin-left: 2pt;
	padding: 2pt;
	color: white;
	background-color: gray;
	border-radius: 5pt;
	text-align: center;
	display: inline-block;
	top: 50;
	right: 0;
	box-shadow: -4px 0px 6px white;
	transform: translateY(-1pt);
}

.dr_balance {
	position: absolute;
	top: 1pt;
	left: 3pt;
}

.dr_whom, .dr_finish {
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
}

.dr_whom{
	position: absolute;
	right: 3pt;
	top: 2pt;
}

.dr_start {
	position: absolute;
	left: 3pt;
	bottom: 1pt;
}

.dr_finish {
	position: absolute;
	right: 3pt;
	bottom: 1pt;
}

.dr_fire {
	display: inline-block;
	width: 0px;
	overflow-x: visible;
	opacity: 0.3;
	color: orange;
	font-size: x-large;
	position: relative;
	left: 30%; 
	margin-top: -10pt;
}



.dr_amount {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-top: -2pt;	
}

.ref {
	font-size: smaller;
	opacity: 0.5;
}

.donemore {
	color: #84c011;
	font-size: smaller;
}

.doneless {
	color: red;
	font-size: smaller;	
}

.doneless:before {
	font-size: xx-small;	
	content: "↓";
}

.donemore:after {
	font-size: xx-small;
	content: "↑";
}

.stroke {
	opacity: 0.5;
	text-decoration: line-through;
}

.opaque {
	opacity: 0.5;
}

table.dr {
	width: 100% !important;
	border: none;
}


table.dr tr {
	height: 27pt;
	border-top: 1px solid rgba(200, 200, 200, 0.2);	
}

table.dr tr:first-child {
	border-top: none;
}

table.dr tr:hover {
	background-color: rgba(200, 200, 200, 0.1);	
}


table.dr td {
	font-size: smaller;
	line-height: 1.0;
}

.ol_h4 {
	padding: 5pt 0pt 0pt 5pt;
	margin: 0;
	height: 39px;
	color: white;
	background-color: gray;
}

.ol_row {
	height: 39px;
	border-top: 1px solid rgba(200, 200, 200, 0.2);
	font-size: small;
	padding-top: 2pt; 
}

.ol_title {
	display: inline-block;
	width: 64%;
	padding: 0pt 0pt 0pt 5pt;
	margin: 0pt;
	font-size: medium;	
	height: 15pt;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
}

.ol_amount {
	display: inline-block;
	width: 20%;
	font-size: medium !important;	
	height: 15pt;
	margin: 0pt;
	vertical-align: top;
	text-align: center;
}

.ol_times {
	width: 15%;
	display: inline-block;
	font-size: x-small;
	opacity: 0.5;
	height: 15pt;
	vertical-align: top;
	text-align: center
}

.ol_row .comment{
	display: inline-block;
	padding: 0pt 0pt 0pt 30pt;
	font-size: x-small;
	opacity: 0.5;
	margin-top: -1pt
}

.ol_row .dr_fire {
	left: 2pt;
	top: 13pt;
}

.ol_amount .doneless, .ol_amount .donemore, .ol_amount .ref{
	font-size: medium !important;
}


h4 {
	padding-top: 30pt;	
}

h4 small {
	font-weight: 100;
	font-size: small;
}


#cnt {
	white-space: nowrap;
	height: 70pt;
	padding: 0pt;
	overflow: hidden;
	margin-bottom: 20pt;
}

#scrollleft, #scrollright {
	display: inline-block;
	height: 70pt;
	background-color: white;
	color: rgba(200, 200, 200, 0.3);
	font-size: x-large;
	padding-top: 20pt;
	width: 5%;
	margin: 0pt;
	vertical-align: top;
	text-align: center;
}

.yearcontainer {
	display: inline-block;
	height: 70pt;
	width: 90%;
	overflow: hidden;
	vertical-align: top;
}

.yearbox {
	display: inline-block;
	position: relative;
	height: 70pt;
	border: none;	
	white-space: nowrap;
	vertical-align: top;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.daybox {
	display: inline-block;
	width: 50px;
	height: 70pt;
	border: none;	
	border-right: 1px solid rgba(200, 200, 200, 0.2);
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}

.daybox_selected {
	border-bottom: 6px solid orange;
	border-radius: 5pt;
}

.month {
	display: block;
	width: 100%;
	text-transform: uppercase;
	font-size: x-small;
	text-align: left;
	padding-left: 5pt;
	height: 10pt;
}

.dow {
	display: block;
	width: 100%;
	text-transform: uppercase;
	font-size: xx-small;
	text-align: center;	
	opacity: 0.4;
	height: 7pt;
}

.holiday {
	color: #8c0000;
	opacity: 1;
}

.day {
	display: block;
	width: 100%;
	text-transform: uppercase;
	font-size: x-large;
	text-align: center;	
	padding-top: 2pt;
	opacity: 0.6;
	height: 30pt;
}

.obox {
	height: 15pt;
	display: inline-block;
	width: 100%;
	overflow-y: visible;
	font-size: 12pt;
	text-align: center;
	color: rgba(200, 200, 200, 0.8);
	padding-top: 2pt;
}

.counter {
	vertical-align: super;
	color: red;
	font-size: 5pt;
	padding: 1pt 4pt;
	border-radius: 8pt; 
	border: 1px solid red;
	background-color: rgba(255, 255, 255, 0.5);
	width: 0px;
	position: relative;
	left: -7pt;
	top: -5pt;
	overflow: visible;
	opacity: 1 !important;
	margin-right: -7pt;
}

#yearselector, #bakerySelector, #actionSelector, #userSelector, #bakerySelectorMessage, #userSelectorMessage {
	border: none;
	border-bottom: 6px solid orange;
}

body.radioSeparate {
	background-image: url("../images/radio_bg1.jpg");
	background-size: cover;
	background-position: right bottom;
	color: white;
	padding: 30pt;
	
}
.radioSeparate #header {
	height:intrinsic;
	margin-bottom: 50pt;
}

.white {
	background-color: transparent;
	color: white !important;
	border: none;
}

.fa-youtube {
	color: red !important;
}

#updater {
	width: 400px;
	height: 300px;
	background-image: url("../images/circle-logo-load.gif");
	background-position: center center;
	background-repeat: no-repeat;
	position: fixed;
	top: -200px;
	left: 50%;
	margin-left: -200px;
	z-index: -1;
	display: none;
}

#timer_container {
	padding: 0;
	margin-top: 0pt;
}
#timer {
	width: 100%;
	height: 1pt;
	background-image: url('../images/gradient.jpeg');
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	padding: 0;
}

.on_fire {
	width: 0px;
	overflow: visible;
	opacity: 0.3;
	color: orange !important;
	position: relative;
	left: -10pt;
	border: 1px solid red;
	display: none;
}

.in_process_order {
	margin-top: 10pt;
	color:black;
}
.in_process_order:before{
	display: inline-block;
	position: absolute;
	width: 1px;
	overflow: visible;
	font-family: 'MyBakeryIconset';
	font-weight: normal;
	font-style: normal;
	content: "\0072";
	font-size: xx-large;
	z-index: -1;
	opacity: .5;
	transform: translate(-9pt, -8pt);
	color: orange;
}

.lnk, .lnk-large {
	color: #0070ff;
	display: inline-block;
	padding: 40pt 0pt 0pt 0pt;
	text-decoration: underline;
	text-decoration-style: dashed;
	cursor: pointer;
}

.lnk {
	font-size: smaller;
}

.lnk .cnt {
	background-color: orange;
	border-radius: 10pt;
	padding: 0pt 5pt;
	color: white;
	position: relative;
	top: -10pt;
	left: -5pt;
	font-size: smaller;
	text-decoration: none !important;
}


.filter-panel-button {
	display: inline-block;
	width: 40pt;
	height: auto;
	font-size: xx-small;
	text-align: center;
	cursor: pointer;
}

.filter-panel-button i{
	font-size: xx-large;
	padding-bottom: 5pt;
}

.filter-panel-button-biege {
	color: #d3c8b7;	
}

.filter-panel-button-biege:hover {
	color: #9a8b73;	
}

.filter-panel-button-gap {
	display: inline-block;
	width: 1px;
	border: 1px solid #d3c8b7;
	margin: 10pt 9pt auto 9pt;
	height: 30pt;
	vertical-align: top;
	opacity: 0.5;
}



.htop {
	border: none;
	white-space: nowrap;
	position: fixed;
	top: 0;
	left: 0;
	height: 70pt;
	background-color: white;
	z-index: 3;
	padding-left: 150pt;
	padding-top: 30pt;
}

.toolbox{
	position: fixed;
	top: 0;
	left: 0;
	height: 30pt;
	width: 100%;
	border: none;
	white-space: nowrap;
	height: 30pt;
	padding-top: 10pt;
	padding-left: 160pt;
}

h1.report {
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	border: none;
	z-index: 4;
	font-weight: 900;
	font-size: 20pt;
	height: 70pt;
	width: 150pt;
	overflow: hidden;
	padding: 10pt;
	padding-top: 40pt;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.hleft {
	border: none;
	width: 150pt;
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	z-index: 2;
	padding-top: 70pt;
}

.mr_title {
	width: 150pt;
	height: 40pt;
	padding: 5pt 2pt;
	display: inline-block;
	border: none;
	text-align: left;
	white-space: nowrap;
	font-size: smaller;
	overflow: hidden;
	height: 25pt;
	background-color: white;
	border: 0.5px solid #eee;
	border-right: 2px solid #222;
	position: relative;
}



.mr_topcell {
	width: 70pt;
	height: 40pt;
	padding: 5pt 2pt;
	display: inline-block;
	border: none;
	text-align: center;
	background-color: white;
	/*border: 1px solid transparent;*/
	background: linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 2px) calc(100% - 2px) no-repeat,
    			linear-gradient(transparent 0%, rgba(220, 220, 220, 0.729) 39%, #dcdcdc 100%) no-repeat;
	border-bottom: 2px solid #222;
}

.mr_cell, .mr_total_cell {
	width: 70pt;
	height: 25pt;
	padding: 5pt 2pt;
	display: inline-block;
	border: none;
	text-align: center;
	border: 1px solid #eee;
}

.mr_total_cell {
	width: 100pt;
}

.mr_total_ordered {
	opacity: 0.5;
	font-size: x-small;
}
.mr_reportbody {
	border: none;
	position: absolute;
	top: 70pt;
	left: 150pt;
}

.mr_reportline {
	white-space: nowrap;
	border: none;
}

.mr_plan {
	font-size: x-small;
	position: absolute;
	right: 2pt;
	border-radius: 4pt;
	color: white;
	background-color: silver;
	padding: 1pt 3pt;
	box-shadow: -5px 0px 5px white;
	transform: translateY(-1pt);
}

.mr_dow {
	display: block;
	font-size: x-small;
}

.mr_balance {
	display: inline-block;
	font-size: x-small;
	opacity: 0.4;
	width: 20%;
}

.mr_donemore {
	color: #84c011;
}

.mr_doneless {
	color: red;
}

.mr_doneless:before {
	content: "\2193";
	font-size: xx-small;
}

.mr_donemore:after {
	content: "\2191";
	font-size: xx-small;
}

.mr_amount {
	display: inline-block;
	width: 80%;
	text-align: center;
	font-size: smaller;
}

.mr_total_cell .mr_amount {
	width: 90%;
	transform: translateX(10%);

}

.lite {opacity: 0.3;}

.lighted {
	color: white;
	background-color: #31557b;
	border: 1px solid #31557b;
}

.lightedtop {
	border: 2px solid #31557b;
	color: white;
	background: rgba(49, 85, 123, 0.9) !important;
}

.lightedleft {
	border: 2px solid #31557b;
	border-left: none;
	color: white;
	background: rgba(49, 85, 123, 0.9);
}

.lightedleft .mr_plan {
	box-shadow: none;
	background-color: white;
	color: rgba(49, 85, 123, 0.9);
}

.invisible_bakery, .invisible_action, .invisible_dt, .invisible_dt_till, .invisible_user, .invisible_paperclip, .invisible_activity, .invisible_title, .invisible_name, .invisible_icon, .invisible, .invisible_locked{
	display: none !important; 
}

.invisible {
	display: none; 
}

.filter {
	font-size: x-small;
	opacity: 0.5;
}

.filter_panel, .content_panel {
	background-color: #f9f6f1;
	background-image: url(../images/filter.png);
	background-repeat: no-repeat;
	background-position-x: -1%;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-bottom: 20pt;
}

.content_panel {
	background-image: url(../images/toc.png) !important;
}

.fin-operations {
	padding-top: 20pt;
}

.fin-operations span{
	display: block;
	padding-bottom: 10pt;
	line-height: 0.8em;
}
 
.fin-operations a {	
	border-bottom: 1px dotted;
    text-decoration: none;
    display: inline-block;
    height: 1em;
    line-height: 0.8em;
}

.subscriptionBalance, .royaltyBalance {
	background-color: #8cce7f;
	background-image: url(../images/royalty.png);
	background-repeat: no-repeat;
	background-position-x: 1%;
	background-position-y: 1%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 20pt;
	color: white;
	height: 150pt;
	position: relative;
	overflow-y: hidden;
	overflow-x: hidden;
}
.subscriptionBalance {
	background-color: #bedaee;	
	background-image: url(../images/subscription.png);
	background-position-x: 2%;
	background-position-y: 8%;
}

.subscriptionBalance span, .royaltyBalance span {
	display: block;
	width: 70%;
	border: none;
	position: absolute;
	right: 5px;
	font-size: 10pt;
	text-align: left;
}

.subscriptionBalance i, .royaltyBalance i {
	display: block;
	font-style: normal;
	width: 70%;
	border: none;
	position: absolute;
	right: 5px;
	font-size: 60pt;
	text-align: left;
	font-weight:bold;
	margin-top: -28pt;
	opacity: .15;
}

span.totalBalance {
	bottom: -5px;
	font-size: 32pt;
	font-weight: bold;
	padding: 0;
	line-height: .9;
	text-align: right;
}
span.totalBalanceD {
	bottom:26pt;
	text-align: right;
	border-top: 1px solid rgba(255, 255, 255, .3);
}
span.line:nth-child(2) {top:48pt;}
span.line:nth-child(3) {top:64pt;}
span.line:nth-child(4) {top:80pt;}

span.fine {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: x-large;
	padding-top: 110pt;
	background-image: url(../images/okay.png);
	background-repeat: no-repeat;
	background-position: center 60%;
}

.report-line {
	border-bottom: 1px solid rgba(100, 100, 100, .1);
}

.report-date {
	display: block;
	font-size: x-small;
	opacity: .3;
}

.report-title {
	display: block;

}

.report-sum-negative, .report-sum-positive{
	font-size: 22pt;
	font-weight: bold;
	text-align: right;
	display: block;
	width: 100%;
	color: #800020;
}
.report-sum-negative small, .report-sum-positive small {
	font-size: 12pt;
	opacity: .5;
}

.report-sum-positive {
	color: #0b6623;
}

.report-account, .report-account-penaltied, .report-penalties {
	display: block;
	font-size: x-small;
	opacity: .5;
	text-align: right;
}

.journal-shadower {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	background-image: radial-gradient(circle, rgba(102,102,102,1) 0%, rgba(17,17,17,1) 100%);
	opacity: 0.8;
}

.journal-shadower img {
	display: block;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 50%;
}


.journal-shadower p {
	margin: 0;
	width: 100%;
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 10003;
	opacity: 1;
	color: white;
	font-size: larger;
	text-shadow: 1px 1px 2px black;
}

.journal-shadower p .fa-arrow-up-long {
	transform: rotate(45deg);
}

.journal-shadower p .fa-window-maximize {
	font-size: xx-large;
	transform: translate(30%, -20%);
}
.journal-shadower p .fa-xmark {
	transform: translateY(-60%);
	color: red;
}

#shadower img{
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -360px;
	margin-top: -360px;
}

.blockobject {
	border-radius: 5pt;
	border: 1px solid #222527;
	margin-bottom: 20pt;
}

.blockobject .logopreview {
	border-radius: 3pt 3pt 0px 0px;
	height: 100pt;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	background: url(../images/bg_manager.jpg) no-repeat;
	background-position: center center;
	background-size: cover;
}

.blockobject .logopreview img {
	max-height: 95pt;
	max-width: 98%;
}


#check {
	padding-top: 50pt;
}
.div-check {
	padding: 10pt 10pt;
	font-family: 'FiraSans-Light', sans-serif;
	font-size: larger;
}

span.checklist {
	display: inline-block;
	text-align: center;
	font-size: xx-small;
	padding: 0pt 0pt 20pt;
	opacity: 0.8;
}
span.checklist_right {
	text-align: right
}

span.checklist_left {
	text-align: left
}
span.checklisttitle {
	display: inline-block;
	text-align: center;
	padding: 7pt 0pt 20pt;
	vertical-align: top;
	font-size: smaller;
	background-image: url(../images/bg-h-line.png);
	background-repeat: repeat-x;
	background-position-y: 10pt;
}

span.checklist .fa-check-circle, span.checklist .fa-circle {
	font-size: x-large;
	padding: 5pt 5pt;
	opacity: 1;
}

.checklist_usertime {
	display: inline-block;
}

span.checklist .fa-check-circle {
	color: #37aa00;
}	

span.checklist .fa-circle {
	color: #ff0000;
}

.backgrounded {
	background-color: white;
	padding: 0pt 5pt;
}


.noborder {
	border: none !important;
}

.toTop {
	display: none;
	background-color: #caba9f;
	width: 40pt;
	height: 40pt;
	border-radius: 40pt;
	padding: 9pt 0 0 12pt;
	bottom: 8%;
	right: 5pt;
	cursor: pointer;
	color: white;
}

.message {
	background-color: #caba9f;
	width: 40pt;
	height: 40pt;
	border-radius: 40pt;
	padding: 9pt 0pt 0 8pt;
	cursor: pointer;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	margin-top: 5pt;
}

.rightpanelbox {
	position: fixed;
	font-size: xx-large;
	width: 40pt;
	color: white;
	bottom: 2%;
	right: 5pt;
	z-index: 2000;
}

/*=======================================================
	A N A L Y T I C S
=======================================================*/

.upload-area{
    width: 95%;
    height: 95%;
    border: 2px dashed lightgray;
    border-radius: 10pt;
    margin: 0 auto;
    margin-top: 2%;
    text-align: center;
    overflow: auto;
    position: relative;
}

.upload-area:hover{
    cursor: pointer;
}

.upload-area h1{
    text-align: center;
    font-weight: 900;
    line-height: 50px;
    position: absolute;
    width: 100%;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);	
    color: lightgray;
}


.upload-area p {
    text-align: center;
    position: absolute;
    width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
}

#file, #pricetags-file{
    display: none;
}
.cellPadded {
	padding: 7pt 0pt 0pt 10pt;
}
#chooseFieldsBlock {
	margin-top: 30pt;
}

.fa-paperclip {
	color: var(--link-color);
	cursor: pointer;
	padding: 0pt 0pt 0pt 10pt ;
}

.fa-exclamation-triangle {
	color: orange;	
}
.noframe {
	display: inline-block;
	width: 80%;
}

.radio1, .bible {border-radius: 10pt; border: 4px solid white; background-image: url(../images/radio.jpg); background-repeat: no-repeat; background-position: right bottom; background-size: cover; padding: 1% 10% 5% 2%; margin-top: 30pt; min-height: 80pt;}
	.bible {background-image: url(../images/bg_book.jpg); background-position: right center;}
	.radio a, .bible a, .radio1 a {color: white;}
	
	
/*=======================================================
	P R I C E T A G S
=======================================================*/

.pricetags-check {
	margin: 8pt 0 0 0 !important;
	left: 50%;
}

.button-disabled {
	cursor: not-allowed !important;
	color: silver !important;
	opacity: 0.6;
}

.colored-toast.swal2-icon-info {
  background-color: rgba(100, 183, 255, 0.9) !important;
  color: white !important;
  font-family: 'FiraSans-UltraLight', sans-serif;
  font-size: smaller;
}

.colored-toast.swal2-icon-info  *{
  color: white !important;
}