/* 
   The below CSS file was built using samples + techniques described by Rachel Andrew in her book:
   The CSS Anthology: 101 Essential Tips, Tricks & Hacks
*/

/* Overall Page */
:root{		
		font-size: 16px;	
		--fnt-fam-primary: 'Montserrat', sans-serif; 
		/* --fnt-fam-second: 'Open Sans', sans-serif; */
		--fnt-fam-second: Verdana, Arial, Helvetica, sans-serif;
		--alpha-bg: 0.3;
		--alpha-hov: 0.5;
		--alpha-def: 0.8;
		--alpha-one: 1;
		--turquoise: rgba(26, 188, 156, var(--alpha-def));
		--turquoise-back: rgba(26, 188, 156, var(--alpha-bg));
		--greensea: rgba(22, 160, 133, 1.0);
		--greensea-back: rgba(22, 160, 133, var(--alpha-bg));
		--emerald: rgba(46, 204, 113, 1.0);
		--emerald-back: rgba(46, 204, 113, var(--alpha-bg));
		--nephritis: rgba(39, 174, 96, 1.0);
		--nephritis-back: rgba(39, 174, 96, var(--alpha-bg));
		--peterriver: rgba(52, 152, 219, 1.0);
		--peterriver-back: rgba(52, 152, 219, var(--alpha-bg));
		--peterriver-hov: rgba(52, 152, 219, var(--alpha-hov));
		--belize: rgba(41, 128, 185, 1.0);
		--belize-back: rgba(41, 128, 185, var(--alpha-bg));
		--amethyst: rgba(155, 89, 182, var(--alpha-def));
		--amethyst-back: rgba(155, 89, 182, var(--alpha-bg));
		--amethyst-hov: rgba(155, 89, 182, var(--alpha-hov));
		--wisteria: rgba(142, 68, 173, 1.0);
		--wisteria-back: rgba(142, 68, 173, var(--alpha-bg));
		--asphalt: rgba(52, 73, 94, 1.0);
		--midnight: rgba(44, 62, 80, 1.0);
		--midnight-back: rgba(44, 62, 80, var(--alpha-bg));
		--midnight-hov: rgba(44, 62, 80, var(--alpha-hov));
		--sunflower: rgba(241, 196, 15, var(--alpha-one));
		--sunflower-back: rgba(241, 196, 15, var(--alpha-bg));
		--sunflower-hov: rgba(241, 196, 15, var(--alpha-hov));
		--orange: rgba(243, 156, 18, 1.0);
		--carrot: rgba(230, 126, 34, var(--alpha-def));
		--carrot-back: rgba(230, 126, 34, var(--alpha-bg));
		--pumpkin: rgba(211, 84, 0, var(--alpha-def));
		--pumpkin-back: rgba(211, 84, 0, var(--alpha-bg));
		--alizarin: rgba(231, 76, 60, 1.0);
		--pomegranate: rgba(192, 57, 43, 1.0);
		--clouds: rgba(236, 240, 241, 1.0);
		--clouds-back: rgba(236, 240, 241, var(--alpha-back));
		--clouds-hov: rgba(236, 240, 241, var(--alpha-hov));
		--silver: rgba(189, 195, 199, var(--alpha-def));
		--silver-back: rgba(189, 195, 199, var(--alpha-bg));
		--concrete: rgba(149, 165, 166, 1.0);
		--asbestos: rgba(127, 140, 141, 1.0);
		--ballerina: rgba(200, 214, 229, 1.0);
		--stormpetrel: rgba(131, 149, 167, 1.0);
		--clr-primary: hsl(226, 100%, 50%);
		--clr-primary-dark: hsl(226, 100%, 30%);
		--clr-primary-hover: hsl(226, 100%, 70%);
		--clr-gray100: #f9fbff;		
		--clr-gray150: #f4f6fb;
		--clr-gray200: #eef1f6;
		--clr-gray300: #e1e5ee;
		--clr-gray400: #767b91;
		--clr-gray500: #4f546c;
		--clr-gray600: #2a324b;
		--clr-gray700: #161d34;
		--clr-softblack: rgb(00, 14, 23);
		--transition-speed: 0.2s;
		--radius: 0.9em;	
		--text-primary: black;
		--text-secondary: var(--midnight);
		--text-menu: rgb(00, 14, 23);
		--bg-primary: #23232e;
		--bg-secondary: #141418;
		--border-vert: rgba(46, 204, 113, 0.5);
		--max-zindex: 16777271;	
		--clr-darkred: rgba(179, 57, 57, 1);
		--clr-lightred: rgba(255, 82, 82, 0.3);
	}
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	body {
		margin: 0;
		padding: 0;
		font-family: var(--fnt-fam-second);
		background-color: white;	
		color: var(--text-primary);		
	}
	.tag_wrap {	
		width: 144px;
		font-size: 0.9em;
		margin: 0.1em; 
		text-align: center;		
		border-style: solid;			
		border-color: rgba(25, 21, 70, 1);
		border-width: 2px;
		border-radius: 10px;
		line-height: 0.9em;
		transition: all 0.4s ease-out 0.8s;
	}
	.tag_wrap:hover, .tag_wrap:focus, .tag_wrap:focus-visible, .tag_wrap:focus-within {
		font-size: 1.2em;			
		transition: all 0.4s ease-in 0.1s;
	}
	.tag_text {
		font-weight: bold;
		font-size: 1em;
		color: black; 				
		display: block;
		padding: 4px;
		border-radius: 10px;
		background: linear-gradient(to right, white, transparent);		
	}
	.region_text {
		display: block;
		font-size: 0.9em;
		font-weight: bold;
		padding: 0.4em 0.2em;
		word-break: normal;
		margin: 0.1em;
		border-radius: 10px;
		background: linear-gradient(to right, white, transparent);	
	}
	.region_wrap {
		display: inline-block;						
		margin: 0;			 			
		text-align: center;
		vertical-align: middle;			
		border-style: solid;			
		border-color: rgba(25, 21, 70, 0.8);
		border-width: 2px;
		border-radius: 10px;			
		width: 100%;
		height: 100%;
	}
	.iscurrent_text { 
		font-size: 1.1em;
		font-style: italic;
		font-weight: bold;
		color: #ffb142;
	}	
	.loader_chrono {
		display: inline-block;
		width: 60px;
		aspect-ratio: 1;
		color: #000;
		border: 10px solid;
		border-radius: 50%;
		animation: chrono_ani 2s infinite linear;
		position: relative;
	}
	.loader_chrono::before {
	  content: "";
	  position: absolute;
	  height: 20px;
	  inset: auto calc(50% - 10px) 100%;
	  border-radius: 5px 5px 0 0;
	  background: 
		linear-gradient(currentColor 0 0) top/100% 30%,
		linear-gradient(currentColor 0 0) top/50% 100%;
	  background-repeat: no-repeat;
	}
	.loader_chrono::after {
	  content: "";
	  position: absolute;
	  inset: -8px -10px auto;
	  height: 15px;
	  background: 
		radial-gradient(farthest-side,currentColor 94%,#0000) left,
		radial-gradient(farthest-side,currentColor 94%,#0000) right;
	  background-size: 15px 15px;
	  background-repeat: no-repeat;
	}
	@keyframes chrono_ani {
	  0%   {background: conic-gradient(#77a4bd 0deg, #0000 0deg)}
	  12.5%{background: conic-gradient(#77a4bd 45deg, #0000 46deg)}
	  25%  {background: conic-gradient(#77a4bd 90deg, #0000 91deg)}
	  37.5%{background: conic-gradient(#77a4bd 135deg, #0000 136deg)}
	  50%  {background: conic-gradient(#77a4bd 180deg, #0000 181deg)}
	  62.5%{background: conic-gradient(#77a4bd 225deg, #0000 226deg)}
	  75%  {background: conic-gradient(#77a4bd 270deg, #0000 271deg)}
	  87.5%{background: conic-gradient(#77a4bd 315deg, #0000 316deg)}
	  100% {background: conic-gradient(#77a4bd 360deg, #0000 360deg)}
	}	
	.loader {
		height: 15px;
		aspect-ratio: 4;
		display: grid;
		margin: 30px 0 30px 15px;
	}
	.loader:before,
	.loader:after {
		content: "";
		grid-area: 1/1;
		--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
		background:
		var(--_g) left,
		var(--_g) right;
		background-size: 25% 100%;
		animation: l34 1s infinite; 
		transform: translate(var(--d,0)) rotate(0);
	}
	.loader:after {
		--d: 37.5%;
		animation-delay: .5s;
	}
	@keyframes l34 {
		50%,100% {transform: translate(var(--d,0)) rotate(.5turn)}
	}
	.glass {		  
		position: fixed; 
		top: 0; 
		left: 0; 
		bottom: 0; 
		right: 0; 
		z-index: 16777271;
		background-color: rgba(236, 240, 241, 0.3);
		backdrop-filter: blur(3px);		
	}
	.glasswait {
		position: fixed; 
		left: 40%; 
		top: 45%; 
		text-align: center;
		border-style: solid;
		border-width: 2px;
		border-color: rgba(25, 21, 70, 0.5);
		border-radius: 15px;
		padding: 8px 8px 8px 8px; 
		background-color: rgba(236, 240, 241, 0.3);
		backdrop-filter: blur(10px);				
	}
	#scroll {
		position:fixed;
		right:10px;
		bottom:10px;
		cursor:pointer;
		width:50px;
		height:50px;
		background-color:#3498db;
		text-indent:-9999px;
		display:none;
		-webkit-border-radius:60px;
		-moz-border-radius:60px;
		border-radius:60px
	}
	#scroll span {
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-8px;
		margin-top:-12px;
		height:0;
		width:0;
		border:8px solid transparent;
		border-bottom-color:#ffffff;
	}
	#scroll:hover {
		background-color:#e74c3c;
		opacity:1;filter:"alpha(opacity=100)";
		-ms-filter:"alpha(opacity=100)";
	}
	.sortasc-header a {
		background:url("/images/sort_asc.png") right center no-repeat;
		display: block;
		padding-right: 19px;
	}
	.sortdesc-header a {
		background:url("/images/sort_desc.png") right center no-repeat;
		display: block;
		padding-right: 19px;
	}	
	.gvpager a {
		margin:auto 1%;
		border-radius:25%;
		padding:5px 10px 5px 10px;	
		text-decoration:none;
		-o-box-shadow:1px 1px 1px #111;
		-moz-box-shadow:1px 1px 1px #111;
		-webkit-box-shadow:1px 1px 1px #111;
		box-shadow:1px 1px 1px #111;			 
	}
	.gvpager a:hover {
		background-color:#1e8d12;
		color:#fff;
	}
	.gvpager span {	
		background-color: #1b245a;
		color: white;
		-o-box-shadow:1px 1px 1px #111;
		-moz-box-shadow:1px 1px 1px #111;
		-webkit-box-shadow:1px 1px 1px #111;
		box-shadow:1px 1px 1px #111;
		border-radius:25%;
		padding:5px 10px 5px 10px;
	}
	.tcenter {
		text-align:center;
	}
	.tsmall	{
		font-size: small;
	}
	.wrap { 
		white-space: normal; 
		width: 65px; 
	}
	.nowrap { 
		white-space: nowrap; 
	}
	/* button delete */
	.button_delete {
		color: red !important;
	}
	/* button green */
	.button_green {
		color: green !important;
	}
	/* button blue */
	.button_blue {
		color: blue !important;
	}
	.nustart-debug-caudit-table{
		border: thin solid black;
	}
	.nustart-caudit-table {
		border-style: solid; 
		border-color: Olive; 
		border-width: thin; 
		border-collapse: collapse; 
		max-width: 1024px !important; 
		padding: 8px; 
		margin: 0em; 
		font-size: medium; 
		font-family: Arial, Helvetica, sans-serif; 
		font-weight: normal; 
		height: auto;
	}
	.mobile-button {	
		display: inline;
	}
	.mobile-button:hover {
		cursor: pointer;	
	}
	.caudit-send {	
		background-image: url("/img/mobile/radiotower.png");
		width:64px; 
		height:64px;
		border: 0;
		box-shadow: none;
		background-color: white;
	}
	.caudit-send:hover {
		cursor: pointer;	
	}
	.caudit-send:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}
	.caudit-view {
		transition: 0.9s;	
		font-weight: bold;	
		color: black;
		text-shadow: 0 0 4px yellow;
		background-image: url("/img/mobile/eye.png");
		width:64px; 
		height:64px;
		border: 0;
		box-shadow: none;
		background-color: white;	
	}
	.caudit-view:hover {
		cursor: pointer;	
	}
	.caudit-view:active {	
		opacity: 0.1;
	}
	.caudit-setartno {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/clipboard.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-hidemultiselect-b {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/zoomout.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-hidemultiselect-b:active {	
		opacity: 0.1;
	}
	.caudit-setprice-b {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/money.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-setprice-b:active {	
		opacity: 0.1;
	}	
	.caudit-setdistprice-b {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/money.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-setdistprice-b:active {	
		opacity: 0.1;
	}	
	.caudit-setprice{
		transition: 0.9s;
		display: inline; 
		cursor: pointer;
	}
	.caudit-setprice:active {	
		opacity: 0.1;
	}
	.caudit-orders {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/truck.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-orders:active {	
		opacity: 0.1;
	}
	.caudit-setmcbpercent-b {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/calculator.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-setmcbpercent-b:active {	
		opacity: 0.1;
	}	
	.caudit-setdistpercent-b {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/calculator.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-setdistpercent-b:active {	
		opacity: 0.1;
	}	
	.caudit-notes {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/check.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-notes:active {	
		opacity: 0.1;
	}		
	.caudit-facings {
		transition: 0.9s;
		display: inline; 
		cursor: pointer;
	}
	.caudit-facings:active {	
		opacity: 0.1;
	}	
	.caudit-sizes {
		transition: 0.9s;
		display: inline; 
		cursor: pointer;
	}
	.caudit-sizes:active {	
		opacity: 0.1;
	}
	.caudit-displays {
		transition: 0.9s;
		display: inline;
		cursor: pointer;
		font-weight: bold;
		color: black;
		text-shadow: 0 0 4px green;
		background-image: url("/img/mobile/stack.png");
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}
	.caudit-displays:active {	
		opacity: 0.1;
	}
	.SaveWorkingTable {
		font-size: Medium;
		/*font-weight: bold;	*/
		background-image: url("/img/mobile/arrow-down.png");
		background-repeat: no-repeat;
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: white;
	}
	.SaveWorkingTable:hover {
		cursor: pointer;	
	}
	.ExitStore {
		transition: 0.9s;
		font-size: Medium;
		font-weight: bold;
		background-image: url("/img/mobile/biker.png");
		background-repeat: no-repeat;
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: white;
	}
	.ExitStore:hover {
		cursor: pointer;
	}
	.ExitStore:active {
		opacity: 0.1;
	}
	.clearwt {
		transition: 0.9s;
		font-size: Medium;
		font-weight: bold;
		background-image: url("/img/mobile/x.png");
		background-repeat: no-repeat;
		width: 64px;
		height: 64px;
		border: 0;
		box-shadow: none;
		background-color: white;
	}
	.clearwt:hover {
		cursor: pointer;
	}
	.clearwt:active {
		opacity: 0.1;
	}		
	.BigChkBoxClass input {
		width:25px; 
		height:25px;
	}
	.promostore_retailers {
		padding-left: 0.8em;
		padding-right: 0.8em;
	}
	.gv_logo_prix {
		max-width: 72px;
		max-height: 48px;
	}
	.gv_logo {    
		max-width: 32px;	
		max-height: 32px;
	}
	.gv_logo_audit {
		max-width: 64px;
		max-height: 64px;
	}
	.wrapper-mobile {
		max-width: 1024px;
	}
	.td_border_on {
		border: solid 1px #ED9F9F;
	}
	.ExcelCommandCell {      
		border: 1px solid #1C5E55;
	}
	.pn_max_height {      
		max-height: 200px;
		width:100%;    
	}
	.FixedHeader {
		position: absolute;
		font-weight: bold;
	}
	.gv_promotype td {
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	.pn_fill_parent {
		left: 0;
		top: 0;
		display: block;
		min-height: 100%;
		width:100%;
		height:100%;
	}
	.clip_comment {
		overflow: hidden;
	}
	/* button wrap text */
	.button_wrap {
		white-space: normal;
		vertical-align: top;
		text-align: left;
	}
	.cell_wrap {
		white-space: normal;
		vertical-align: middle;
		text-align: center;
	}
	.cell_no_wrap {
		white-space: nowrap;
		vertical-align: middle;
		text-align: center;
	}
	/* print section */
	.noprint {
		visibility: visible;
	}
	#noprint {
		visibility: visible;
	}
	/* Header Section */
	.header_left {
		flex: none;
		flex-basis: auto;
		display: flex;
		flex-basis: 320px;
		flex-direction: column;
		padding: 0.5rem;
		margin: 0.5rem;
		max-width: 330px;
		border-style: solid;
		border-color: rgba(25, 21, 70, 0.6);	
		border-width: 4px;
		border-radius: 15px;
		box-shadow: 5px 5px 2px rgba(51, 51, 51, 0.2);
	}
	.header {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-start;
		max-width: 100%;
		margin-top: 0.5rem;
		margin-left: 0.5rem;
		/* border-top: 3px solid #99CC66;*/
		/* border-bottom: 1px dotted #99CC66; */
		/* height: 2em; */	
		/* position: relative; */
		/* width: 95%; */
		/* min-height: 170px; */
		/* margin: 0em; */
		/* top: 0em; */
		/* left: 0em; */
		/* display:block; */
	}
	#header .title {
		font: 190% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
		color: black;
		background-color: transparent;
		float: left;
		margin-right: 2em;
		margin-top: 0.3em;
		margin-left: .8em;
	}
	#header a:link, a:visited  {
		color: royalblue;
	}
	/* Navigation */
	/* Navigation */
	#navigation_mobile {
		top: 1em;
		left: 1em;
		position:absolute;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		max-width: 800px;	
	}
	.navigation {    
		/* position:absolute; */
		/* top: 0.5em; */
		/* left: 0.5em; */
		/* font-family: Verdana, Arial, Helvetica, sans-serif;	 */
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: stretch;
		font-size: medium;
		max-width: 900px;
		padding: 0px;
		margin: 0px;
		min-width: 180px;
		min-height: 1em;
	}
	#navigation_old {
		/* position:relative; */
		top: 0.5em;
		left: 0.5em;	
		max-width: 100%;	
		margin: auto;
		display:inline-block;	
		font-family: Verdana, Arial, Helvetica, sans-serif;		
	}
	#navigation_old ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#navigation_old li {
		border-bottom: 1px solid #ED9F9F;
	}
	#navigation_old li a  {
		display: block;
		padding: 5px 5px 5px 0.5em;
		border-left: 12px solid #711515;
		border-right: 1px solid #711515;
		background-color: #B51032;
		color: #FFFFFF;
		text-decoration: none;
	}
	#navigation_old li a:hover {
		background-color: #711515;
		color: #FFFFFF;
	}
	#navigation_old ul ul {
		margin-left: 12px;
	}
	#navigation_old ul ul li {
		border-bottom: 1px solid #711515;
		margin:0;
		background-color: #ED9F9F;
		color: #711515;
	}
	/*
	#navigation ul ul a:link, #navigation ul ul a:visited {
		background-color: #ED9F9F;
		color: #711515;
	}
	*/
	#navigation_old ul ul a:hover {
		background-color: #711515;
		color: #FFFFFF;
	}
	#header .breadcrumb {
		font: 90% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
		color: black;
		background-color: transparent;
		float: right;
		margin-right: 2em;
		margin-top: 0.8em;
		font-weight:bold;
	}
	/* Main Content */
	#content_mobile {	
		margin-top: 8em;
		margin-left: 1em;
		margin-right: 1em;
		margin-bottom: 1em;	
	}
	#content {
		top: 0em;
		left:0em;
		margin: 0.3em;	
	}
	#content h1 {
		font-size: 150%;
		text-align: center;
	}
	#content p {
		font-size: 1em;
		line-height: 1.2em; 
	}
	#content ul {
		font-size: 1em;
		line-height: 1.6em; 
	}
	#promotions {
		font-size: 0.9em;
	}
	#content-center {
		text-align:center;
	}
	.thumb-image {
		border: 3px solid #ddd;
		border-radius: 5px;
		padding: 6px;
		width: 150px;
	}
	.selected_row {
		background-color: #A1DCF2;
	}
	.on-top	{
		z-index: 999;
	}
	.no-display	{
		display: none;
	}
	.bigger-button {
		/* transform: scale(1.2); */
		padding:6px; 
		font-weight:bold; 
		font-size:large;
	}
	.yes-display {
		display: block;
		text-align: left;
	}
	.order_wt {	
		border: 3px solid Black;
		border-radius: 10px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
	}
	.order_dist_wt {
		border: 3px solid #33B2FF;
		border-radius: 10px;    
		white-space: normal; 
		font-size:smaller;
		text-align: center;
		vertical-align: middle;
	}
	.order_dist_wt_set {
		border: 3px solid black;
		border-radius: 10px;    
		white-space: normal; 
		font-size:smaller;
		text-align: center;
		vertical-align: middle;
	}
	.order_zero_wt {
		border: 3px solid #ff4d4d;
		border-radius: 10px;
		font-weight: normal;
		text-align: center;
		vertical-align: middle;
	}
	.escompte_amount_zero_wt {
		border: 3px solid #FFA500;
		border-radius: 10px;
		font-weight: normal;
		text-align: center;
		vertical-align: middle;
	}
	.escompte_dist_amount_zero_wt {
		border: 3px solid #ffc14d;
		border-radius: 10px;
		font-weight: normal;
		text-align: center;
		vertical-align: middle;
	}
	.new_art_no {
		border: 3px solid Black;
		border-radius: 10px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
	}
	.nustart_wt_set_art {
		border: 3px solid #B2202B;
		border-radius: 10px;
	}
	.nustart_wt_note {
		border: 3px solid #B2202B;
		border-radius: 10px;
	}
	.nustart_wt_note_set {
		border: 3px solid #000000;
		border-radius: 10px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
	}
	.nustart_wt_display {
		border: 3px solid #E3A6A5;
		border-radius: 10px;
	}
	.nustart_wt_display_set {
		border: 3px solid #000000;
		border-radius: 10px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		white-space: normal;
	}
	.nustart_wt_facing {
		border: 3px solid #E2C0C0;
		border-radius: 10px;
	}
	.nustart_wt_facing_set {
		border: 3px solid #000000;
		border-radius: 10px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		white-space: normal;
	}
	.nustart_wt_section {
		border: 3px solid #E0D5D5;
		border-radius: 10px;
	}
	.nustart_wt_section_set {
		border: 3px solid #000000;
		border-radius: 10px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		white-space: normal;
	}
	.c-center {
		text-align:center;    
		position: relative;
		top: 0px;
		left: 0px;
	}
	.c-left	{
		text-align:left;    
	}
	.c-right {
		text-align:right;
	}
	.details-center	{
		position: relative;
		left: 1em;
		top: 0em;
		width: 200px;		
	}
	.branch	{
		position: relative;
		left: 1em;
		top: 0em;
		height: 260px;
		width: 466px;
		overflow: auto;
		border: groove 1px black;
		visibility: visible;    
	}
	.lang	{
		position: absolute;
		top: 86px;
		left: 0.5em;
		max-width: 400px;
		padding: 0.5em; 	
		border: 4px solid rgba(30, 33, 112, 0.7);
		border-radius: 10px; 	
	}
	.grille-produit	{
		text-align: left;
		position: relative;
		top: 0px;
		left: 1px;    
	}
	.content-right	{
		text-align: right;
		width: 953px;
		vertical-align: bottom;
	}
	.smaller_font	{      
		font-size: smaller;          
	}
	.bold_font	{
		font-weight: bold;
	}
	.Important	{      
		font-size: large;      
		color: Red; 
	}
	.gvCode	{      
		font-size: smaller;      
		font-style: italic;        
		width: 64px;
		height: 24px;
	}
	.gvRegion	{      
		width: 124px;
		height: 24px;    
	}
	.gvDate	{      
		width: 124px;
		height: 24px;    
	}
	.gvPromoDate	{      
		width: 50px;
	}
	.gvTotalCost	{      
		width: 60px;
	}
	.gvPromoDist	{      
		width: 110px;
	}
	.gvPromoStore	{      
		width: 120px;
	}
	td.cell_upc {
		font-size: 0.8em;
		width: 6em;
		max-width: 6em;
		overflow-wrap: anywhere;
		transition: all 0.4s ease-out 0.8s;
	}
	td.cell_upc:hover, td.cell_upc:focus, td.cell_upc:focus-visible, td.cell_upc:focus-within {
		transition: all 0.4s ease-in 0.1s;
		font-size: 1.2em;
		/* font-weight: bold;	 */
	}
	.focus-scale {		
		transition: all 0.4s ease-in 0.8s;
	}
	.focus-scale:hover,  .focus-scale:focus, .focus-scale:focus-visible, .focus-scale:focus-within {
		font-size: 1em;
		transform: scale(1.3);
		transition: all 0.4s ease-out 0.1s;
	}
	.focus-font {
		transition: all 0.4s ease-in 0.8s;
	}
	.focus-font:hover,  .focus-font:focus, .focus-font:focus-visible, .focus-font:focus-within {
		font-size: 1.5em;
		transition: all 0.4s ease-out 0.1s;
	}
	.gvDescription	{      
		display: inline-block;
		width: 200px; 
		overflow: hidden;		
		white-space: normal;
		font-size: 0.9em;
		max-width: 250px;
		max-height: 84px;
		text-align: left;
		padding: 0.3em;
		border-color: transparent;
		border-style: solid;
		border-width: 3px;
		border-radius: 5px;
		transition: all 0.4s ease-in 0.8s;
	}
	.gvDescription:hover, .gvDescription:focus, .gvDescription:focus-visible, .gvDescription:focus-within {
		background-color: var(--sunflower);
		z-index: var(--max-zindex);
		max-height: 370px;		
		font-size: 1em;			
		border-color: var(--clr-primary-hover);
		transform: scale(1.3);
		transition: all 0.4s ease-out 0.1s;
	}
	.gvDescription:hover img, .gvDescription:focus img, .gvDescription:focus-within img {
		transition: all 0.4s ease-in 0.1s;
		max-height: 340px; 
		max-width: 340px; 
		vertical-align: top; 
		margin: 0;
	}
	.promoTitle	{      
		font: 150% Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
		text-align: center;		
	}
	.gvStore	{      
		width: 450px;
		height: 56px;    
		overflow: auto;
		position: absolute;
		left: 8em;
		top: 22em;    
	}
	.calendar-right	{
		text-align: right;
		position:absolute;
		top: 20em;
		right: 6.2em;
		z-index: 1;
	}
	.promo_sep	{
		border:none;
		float: left;
		height: 170px;
		width: 30px;    
		/*
		float:left; height:170px; width:30px; border:groove thin white;
		*/
	}
	.cpHeader {
		color: white;
		background-color: #719DDB;
		font: bold 11px auto "Trebuchet MS", Verdana;
		font-size: 12px;
		cursor: pointer;
		width:450px;
		height:18px;
		padding: 4px;           
	}
	.cpBody	{
		background-color: #DCE4F9;
		font: normal 11px auto Verdana, Arial;
		border: 1px gray;               
		width:450px;
		padding: 4px;
		padding-top: 7px;
	}
	.cpHeaderPeriod	{
		color: white;
		background-color: #0073BF;
		font: bold 11px auto Verdana;
		cursor: pointer;		
	}
	.cpBodyPeriod {
		/*text-align: center;*/
		/*background-color: #DCE4F9;*/
		/*width:450px;    */
	}
	.clear {
		background: transparent;
	}
	.grad { 
		color:yellow; 
		background: -moz-linear-gradient(top, #FFF, #888);
		background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#888));
	} 
	.sexybutton {
	  background-color: #DEDEDE;  
	  background: -moz-linear-gradient(top, #FFF, #888);
	  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#888));
	  border: 1px solid #D6D6D6;
	  color: #666;
	  display: inline-block;
	  font: bold 0.9em/10px Helvetica, Arial, sans-serif;
	  height: 18px;
	  width: auto;
	  padding: 0 10px;
	  text-decoration: none;
	  vertical-align: middle;
	  text-shadow: 0 1px 0 #FFF;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	}
	.sexybutton:hover {
	  background: #BEBEBE;
	  background: -moz-linear-gradient(top, #DDD, #666);
	  background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#666));
	  border: 1px solid #B6B6B6;
	  color: #444;
	  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#DDDDDD', EndColorStr='#666666');
	  text-shadow: 0 1px 0 #DDD;
	}
	.menuaxo {
		position: absolute;
		left: 370px;
		min-height: 0px; 
		min-width: 0px;
	}
	.background {
		width: 126px; 
		height: 38px;
		/*width: 100%; 
		height: 100%;*/
		/*position: absolute; */
		position: relative;
		left: 0px; 
		top: 0px; 
	}
	.stretch {
		width:100%;
		height:100%;
		z-index: 0;    
	}
	.td_background {    
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #C2F3F8, #08B6E1);
		padding: 4px;
		box-shadow: 5px 5px 2px #D3D3D3;
		color: black;    
		height: 20px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;   
	}
	.td_background:hover {
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #5BD5EA, #024A9E);
		padding: 4px;
		box-shadow: 5px 5px 2px rgba(51, 51, 51, 0.6);
		color: #ffcc00;	
		height: 20px;
		max-width: 200px;    
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;    
		text-align: center;
		vertical-align: middle;     
	}
	.td_background:active {
		transform: translate(4px, 4px);
		box-shadow: 1px 1px rgba(51, 51, 51, 0.8);
	}
	.td_background_rep {    
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #C8F9F9, #16DEE4);
		padding: 4px;
		box-shadow: 5px 5px 2px #D3D3D3;
		color: black;	
		height: 20px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;     
	}
	.td_background_rep:hover {    
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #C8D6F9, #0843E1);
		padding: 4px;
		box-shadow: 5px 5px 2px rgba(51, 51, 51, 0.6);
		height: 20px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;     
	}
	.td_background_rep:active {
		transform: translate(4px, 4px);
		box-shadow: 1px 1px rgba(51, 51, 51, 0.8);
	}
	.td_background_admin {    	
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #F4DEF5, #CC76D0);
		padding: 4px;
		box-shadow: 5px 5px 2px #D3D3D3;
		color: black;
		height: 20px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;   
	}
	.td_background_admin:hover {    
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #E4DDFF, #846FF8);
		padding: 4px;
		box-shadow: 5px 5px 2px rgba(51, 51, 51, 0.6);		
		height: 20px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;   
	}
	.td_background_admin2 {   	
		background-image: url(img/gradient-admin-c.png);
		background-repeat: no-repeat;
		background-position: top left;    
		height: 24px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;    
	}
	.td_background_admin2:hover {    
		transition: 0.4s;
		background-image: url(img/gradient-admin-a.png);
		background-repeat: no-repeat;
		background-position: top left;    
		height: 24px;
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;    
	}
	.td_background_root	{    
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #FFECD5, #FFB453);
		padding: 4px;
		box-shadow: 5px 5px 2px #D3D3D3;
		color: black;	
		height: 20px;   /* 38px  */
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;     
	}
	.td_background_root:hover {    
		transition: 0.4s;
		border-radius: 40px;	
		background: radial-gradient(closest-side at 50% 25%, #C8D6F9, #0843E1);
		padding: 4px;
		box-shadow: 5px 5px 2px rgba(51, 51, 51, 0.6);
		height: 20px;   
		max-width: 200px;
		text-align: center; 
		vertical-align: middle;        
		text-decoration: none;     
	}
	.menudiv {
		transition: 0.4s;	
		text-transform: uppercase;
		padding: 0.3em;
		font-family: var(--fnt-fam-primary);
		text-align: center;
		vertical-align: middle;
		overflow: hidden;      
		z-index: 1;    
		position: relative;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		color: black;   
		font-size:0.75em;     
		font-weight: bold;
	}
	.menudiv a {
		text-decoration: none;
	}
	.menudiv:hover {    
		color: #ffff00;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	}
	.loader_wave {
		display: inline-block;
		width: 150px;
		height: 150px;
		background-color: #ff3d00;
		border-radius: 50%;
		position: relative;
		box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset, 0 5px 12px rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}
	.loader_wave::before,
	.loader_wave::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 45%;
		top: -40%;
		background-color: #fff;
		animation: ani_wave 3s linear infinite;
	}
	.loader_wave::before {
		border-radius: 30%;
		background: rgba(255, 255, 255, 0.4);
		animation: ani_wave 3s linear infinite;
	}
	@keyframes ani_wave {
		0% {
		  transform: rotate(0);
		}
		100% {
		  transform: rotate(360deg);
		}
	}
	.loader_yinyan {
		display: inline-block;
		position: relative;
		width: 96px;
		box-sizing: content-box;
		height: 48px;
		background: #FFF;
		border-color: #de3500;
		border-style: solid;
		border-width: 2px 2px 50px 2px;
		border-radius: 100%;
		animation: yinYang 3s linear infinite;
	}
	.loader_yinyan::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		background: #FFF;
		border: 18px solid #de3500;
		border-radius: 100%;
		width: 12px;
		height: 12px;
		box-sizing: content-box;
	}
	.loader_yinyan::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		background: #de3500;
		border: 18px solid #FFF;
		border-radius: 100%;
		width: 12px;
		height: 12px;
		box-sizing: content-box;
	}
	@keyframes yinYang {
		100%{transform: rotate(360deg)}
	}
	.loader_stopwatch {
		width: 48px;
		height: 48px;
		display: inline-block;
		position: relative;
		background-color: #FFF;
		background: radial-gradient(ellipse at center, #FF3D00 0%, #FF3D00 14%, #FFF 15%, #FFF 100%);
		background-size: cover;
		background-position: center;
		border-radius: 50%;
	}
	.loader_stopwatch::after,
	.loader_stopwatch::before {
		content: '';  
		position: absolute;
		height: 16px;
		width: 4px;
		background: #FF3D00;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) rotate(0deg);
		transform-origin: 25% 0;
		box-sizing: border-box;
	  animation: rotation_stopwatch 10s linear infinite;
	}
	.loader_stopwatch::before {
		height: 22px;
		width: 2px;
		transform: translateX(-50%) rotate(0deg);
		animation-duration: 1s;
	} 
	@keyframes rotation_stopwatch {
		0%    { transform: rotate(0deg)}
		100%  { transform: rotate(360deg)}
	} 
	.loader_dice {
		display: inline-block;
		width: 54px;
		height: 54px;
		position: relative;
		border-radius: 4px;
		background-color: #fff;
		background-image:
		radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
		radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
		radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
		radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
		radial-gradient(circle 5px , #FF3D00 100%, transparent 0),
		radial-gradient(circle 5px , #FF3D00 100%, transparent 0);
		background-repeat: no-repeat;
		animation: move_dice 4s linear infinite , rotate_dice 2s linear infinite;
	}
	.loader_dice::before,
	.loader_dice::after {
		content: "";
		position: absolute;		
	}
	@keyframes rotate_dice {
		0% , 20%{ transform: rotate(0deg)}
		30% , 40% { transform: rotate(90deg)}
		50% , 60% { transform: rotate(180deg)}
		70% , 80% { transform: rotate(270deg)}
		90%,  100% { transform: rotate(360deg)}
	}
	@keyframes move_dice {
		0% ,  9%{
			background-position:
			-12px -15px,  -12px 0px, -12px 15px,
			12px -15px,  12px 0px,  12px 15px;
		}
		10% , 25%{
			background-position:
			0px -15px,  -12px 0px, -12px 15px,
			34px -15px,  12px 0px,  12px 15px;
		}
		30% , 45%{
			background-position:
			0px -34px, -12px -10px, -12px 12px,
			34px -15px, 12px -10px, 12px 12px;
		}
		50% , 65% {
			background-position:
			0px -34px, -12px -34px, -12px 12px,
			34px -12px, 0px -10px, 12px 12px;
		}
		70% , 85% {
			background-position:
			0px -34px, -12px -34px, 0px 12px,
			34px -12px, 0px -10px, 34px 12px;
		}
		90% , 100% {
			background-position:
			0px -34px, -12px -34px, 0px 0px,
			34px -12px, 0px 0px, 34px 12px;
		}
	}
	.loader_shdspin {
		color: #ffffff;
		font-size: 45px;
		text-indent: -9999em;
		overflow: hidden;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		position: relative;
		transform: translateZ(0);
		animation: mltShdSpin 1.7s infinite ease, ShdSpinround 1.7s infinite ease;
	}
	@keyframes mltShdSpin {
		0% {
			box-shadow: 0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		5%,
		95% {
			box-shadow: 0 -0.83em 0 -0.4em, 
			0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		10%,
		59% {
			box-shadow: 0 -0.83em 0 -0.4em, 
			-0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 
			-0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
		}
		20% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
			 -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 
			 -0.749em -0.34em 0 -0.477em;
		}
		38% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
			 -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 
			 -0.82em -0.09em 0 -0.477em;
		}
		100% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 
			0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
	}
	@keyframes ShdSpinround {
		0% { transform: rotate(0deg) }
		100% { transform: rotate(360deg) }
	}
	.loader_spinnerfade {
		position: relative;
		display: inline-block;
		margin: auto;
		box-sizing: border-box;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 4px solid var(--wisteria);
		transform-origin: 50% 50%;
		transform: perspective(200px) rotateX(66deg);		
		animation: spinner-spin 1.2s linear infinite , spinner-fade 1.2s linear infinite;
	}
	.loader_spinnerfade::before,
	.loader_spinnerfade::after {
		content: "";
		position: absolute;		
		left: 0;
		top: 0;		
		width: 120px;
		height: 120px;		
	}
	.loader_spinnerfade::before {
		border-top-color: var(--belize);
	}
	.loader_spinnerfade::after {
		border-top-color: var(--emerald);
		animation-delay: 0.4s;
	}
	@keyframes spinner-spin {
		100% { transform: rotate(360deg)}
	}
	@keyframes spinner-fade {
		25%, 75% { opacity: 0.1}
		50% { opacity: 1 }
	}
	.loader_spindots {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		display: block;
		margin:15px auto;
		position: relative;
		background: #FF3D00;
		color: #FFF;
		box-shadow: -24px 0, 24px 0;
		box-sizing: border-box;
		animation: spindots_rotation 2s ease-in-out infinite;
	}
	@keyframes spindots_rotation {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	} 
	.loader_square {
		width: 48px;
		height: 48px;
		display: inline-block;
		position: relative;
	}
	.loader_square::after,
	.loader_square::before {
		content: '';
		width: 48px;
		height: 48px;
		border: 2px solid #FFF;
		position: absolute;
		left: 0;
		top: 0;		
		animation: square_rotation 2s ease-in-out infinite;
	}
	.loader_square::after {
		border-color: #FF3D00;
		animation-delay: 1s;
	}
	@keyframes square_rotation {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	} 
	.loader_gear {
		width: 60px;
		height: 40px;
		position: relative;
		display: inline-block;
		--base-color: #263238; /*use your base color*/
	}
	.loader_gear::before {
		content: '';  
		left: 0;
		top: 0;
		position: absolute;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #FFF;
		background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
		background-repeat: no-repeat;
		box-sizing: border-box;
		animation: rotationBack 3s linear infinite;
	}
	.loader_gear::after {
		content: '';  
		left: 35px;
		top: 15px;
		position: absolute;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #FFF;
		background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
		background-repeat: no-repeat;
		box-sizing: border-box;
		animation: rotationBack 4s linear infinite reverse;
	}
	@keyframes rotationBack {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(-360deg);
		}
	}
	.loader_countup {
	  display: inline-flex;
	  border: 10px solid #000;
	  border-radius: 5px;
	}
	.loader_countup::before,
	.loader_countup::after {
	  content: "0 1 2 3 4 5 6 7 8 9 0";
	  font-size: 30px;
	  font-family: monospace;
	  font-weight: bold;
	  line-height: 1em;
	  height: 1em;
	  width: 1.2ch;
	  text-align: center;
	  outline:1px solid #000;
	  color: #0000;
	  text-shadow:0 0 0 #000;
	  overflow: hidden; 
	  animation: countup 2s infinite linear;
	}
	.loader_countup::before {
	  animation-duration: 4s;
	}
	@keyframes countup {
	  100% {text-shadow:0 var(--t,-10em) 0 #000}
	}		
	.loader_factory7 {
	  width: 90px;
	  height: 14px;
	  box-shadow: 0 3px 0 #fff;
	  position: relative;
	  clip-path: inset(-40px 0 -5px)
	}
	.loader_factory7:before {
	  content: "";
	  position: absolute;
	  inset: auto calc(50% - 17px) 0;
	  height: 50px;
	  --g:no-repeat linear-gradient(#ccc 0 0);
	  background: var(--g),var(--g),var(--g),var(--g);
	  background-size: 16px 14px;
	  animation:
		l7-1 2s infinite linear,
		l7-2 2s infinite linear;
	}
	@keyframes l7-1 {
	  0%,
	  100%  {background-position: 0 -50px,100% -50px}
	  17.5% {background-position: 0 100%,100% -50px,0 -50px,100% -50px}
	  35%   {background-position: 0 100%,100% 100% ,0 -50px,100% -50px}
	  52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% -50px}
	  70%,
	  98%  {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% calc(100% - 16px)}
	}
	@keyframes l7-2 {
	  0%,70% {transform:translate(0)}
	  100%  {transform:translate(200%)}
	}	
	.loader_factory3 {
	  width: 90px;
	  height: 14px;
	  box-shadow: 0 3px 0 #fff;
	  background: linear-gradient(#fff 0 0) 50%/2px 100% no-repeat;
	  display: grid;
	}
	.loader_factory3:before,
	.loader_factory3:after{
	  content: "";
	  grid-area: 1/1;
	  background: radial-gradient(circle closest-side, var(--c,#fff) 92%,#0000 ) 0 0/calc(100%/4) 100%;
	  clip-path: inset(0 50% 0 0);
	  animation: factory3 1s infinite linear;
	}
	.loader_factory3:after{
	  --c: red; 
	  clip-path: inset(0 0 0 50%);
	}
	@keyframes factory3 {
		100% {background-position: calc(100%/3) 0}
	}	
	.loader_glowing12 {
	  --s: -100px;
	  height: 80px;
	  aspect-ratio: 1;
	  position: relative;
	  clip-path: polygon(evenodd,var(--s) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) var(--s),100% 50%,85.36% 85.36%,50% 100%,14.64% 85.36%,0% 50%,14.64% 14.64%,50% 0%,85.36% 14.64%,100% 50%,74.75% 25.25%,50% 15%,25.25% 25.25%,15% 50%,25.25% 74.75%,50% 85%,74.75% 74.75%,85% 50%,74.75% 25.25%,100% 50%);
	}
	.loader_glowing12:before {
	  content: "";
	  position: absolute;
	  inset: 0 35% 70%;
	  border-radius: 50%;
	  background: #000;
	  filter: blur(15px);
	  transform-origin: 50% 165%;
	  animation: glowing12 1.5s linear infinite;
	}
	@keyframes glowing12 {
	  to {rotate: 1turn}
	}
	.loader_glowing6 {
	  height: 80px;
	  aspect-ratio: 1;
	  position: relative;
	  clip-path: polygon(100% 50%,85.36% 85.36%,50% 100%,14.64% 85.36%,0% 50%,14.64% 14.64%,50% 0%,85.36% 14.64%,100% 50%,74.75% 25.25%,50% 15%,25.25% 25.25%,15% 50%,25.25% 74.75%,50% 85%,74.75% 74.75%,85% 50%,74.75% 25.25%);
	  filter: blur(12px);
	}
	.loader_glowing6:before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: conic-gradient(#0000 35%,#0B486B,#0000 65%);
	  animation: glowing6 2s linear infinite;
	}
	@keyframes glowing6 {
	  to {rotate: 1turn}
	}
	.loader_progress15 {
		width: 80px;
		aspect-ratio: 1.154;
		clip-path: polygon(50% 0,100% 100%,0 100%);
		--c:no-repeat linear-gradient(#f03355 0 0);
		background: var(--c),var(--c),var(--c),var(--c),var(--c);
		background-size: 100% calc(100%/5 + 1px);
		animation: progress15 2s infinite;
	}
	@keyframes progress15 {
		0%  {background-position: 0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4)}
		20% {background-position: 0 calc(4*100%/4) ,0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4)}
		40% {background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4)}
		60% {background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(2*100%/4) ,0 calc(-2*100%/4),0 calc(-2*100%/4)}
		80% {background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(2*100%/4) ,0 calc(1*100%/4) ,0 calc(-2*100%/4)}
		100%{background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(2*100%/4) ,0 calc(1*100%/4) ,0 calc(0*100%/4)}
	}
	.loader_progress8 {
	  width: 60px;
	  aspect-ratio: 1;
	  border-radius: 50%;
	  -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
	  background:
	   linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat
	   #ddd;
	  animation: progress8 2s infinite steps(7);
	}
	@keyframes progress8 {
		100% {background-size:100% 115%}
	}	
	.loader_progress6 {
	  width: 120px;
	  height: 22px;
	  border-radius: 20px;
	  color: #514b82;
	  border: 2px solid;
	  position: relative;
	}
	.loader_progress6::before {
	  content: "";
	  position: absolute;
	  margin: 2px;
	  inset: 0 100% 0 0;
	  border-radius: inherit;
	  background: currentColor;
	  animation: progress6 2s infinite;
	}
	@keyframes progress6 {
		100% {inset:0}
	}
	.loader_spinner17 {
	  width: 70px;
	  aspect-ratio: 1;
	  background:
		radial-gradient(farthest-side,#ffa516 90%,#0000) center/16px 16px,
		radial-gradient(farthest-side,green   90%,#0000) bottom/12px 12px;
	  background-repeat: no-repeat;
	  animation: spinner17 1s infinite linear;
	  position: relative;
	}
	.loader_spinner17::before {    
	  content:"";
	  position: absolute;
	  width: 8px;
	  aspect-ratio: 1;
	  inset: auto 0 16px;
	  margin: auto;
	  background: #ccc;
	  border-radius: 50%;
	  transform-origin: 50% calc(100% + 10px);
	  animation: inherit;
	  animation-duration: 0.5s;
	}
	@keyframes spinner17 { 
	  100%{transform: rotate(1turn)}
	}	
	.loader_spinner16 {
	  width: 50px;
	  aspect-ratio: 1;
	  display: grid;
	  border: 4px solid #0000;
	  border-radius: 50%;
	  border-color: #ccc #0000;
	  animation: spinner16 1s infinite linear;
	}
	.loader_spinner16::before,
	.loader_spinner16::after {    
	  content: "";
	  grid-area: 1/1;
	  margin: 2px;
	  border: inherit;
	  border-radius: 50%;
	}
	.loader_spinner16::before {
	  border-color: #f03355 #0000;
	  animation: inherit; 
	  animation-duration: .5s;
	  animation-direction: reverse;
	}
	.loader_spinner16::after {
	  margin: 8px;
	}
	@keyframes spinner16 { 
	  100%{transform: rotate(1turn)}
	}
	.loader_spinner12 {
	  width: 50px;
	  aspect-ratio: 1;
	  display: grid;
	}
	.loader_spinner12::before,
	.loader_spinner12::after {    
	  content:"";
	  grid-area: 1/1;
	  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
	  background: 
		var(--c) 50%  0, 
		var(--c) 50%  100%, 
		var(--c) 100% 50%, 
		var(--c) 0    50%;
	  background-size: 12px 12px;
	  animation: spinner12 1s infinite;
	}
	.loader_spinner12::before {
	  margin: 4px;
	  filter: hue-rotate(45deg);
	  background-size: 8px 8px;
	  animation-timing-function: linear
	}
	@keyframes spinner12 { 
	  100%{transform: rotate(.5turn)}
	}	
	.loader_dotbar14 {
	  width: 40px;
	  aspect-ratio: 1;
	   --c: linear-gradient(#000 0 0);
	   --m: radial-gradient(farthest-side,#000 92%,#0000);
	  background: 
		var(--c),var(--m),
		var(--c),var(--m), 
		var(--c),var(--m);
	  background-size: 8px 15px,8px 8px;
	  background-repeat: no-repeat;
	  animation: dotbar14 1s infinite alternate;
	}
	@keyframes dotbar14 {
	  0%,
	  10% {background-position: 0 0   ,0 100%,50% 0   ,50% 100%,100% 0   ,100% 100%}
	  33% {background-position: 0 100%,0 0   ,50% 0   ,50% 100%,100% 0   ,100% 100%}
	  66% {background-position: 0 100%,0 0   ,50% 100%,50% 0   ,100% 0   ,100% 100%}
	  90%,
	  100%{background-position: 0 100%,0 0   ,50% 100%,50% 0   ,100% 100%,100% 0   }
	}
	.clr-btn-darkgreen {
		background-color: var(--greensea);
	}
	.linktobutton {
		display: inline-block;
		text-decoration: none;
		padding: 0.2em 0.7em;		
		border-style: solid; 
		border-color: var(--midnight);	
		border-width: 1px; 	
		border-radius: var(--radius);
		color: var(--text-primary);
		box-shadow: 0.2em 0.2em 0.2em rgba(51, 51, 51, 0.6);
		margin: 0;
	}	
	.linktobutton:hover {						
		color: var(--text-secondary);
		background-color: var(--silver);
		box-shadow: 0.4em 0.4em 0.4em rgba(51, 51, 51, 0.6);
	}
	.linktobutton:active {	
		box-shadow: 0.1em 0.1em 0.1em rgba(51, 51, 51, 0.6);
		transform: translate(0.4em, 0.4em);
	}
	.linktobutton:visited {
		color: var(--emerald);
	}
	.linktobutton[disabled] :hover :active {
		background-color: transparent;
		border-color: var(--silver);
		color: var(--silver);
		box-shadow: none;
		cursor: default;
	}
	.linktobutton[disabled]:hover {
		background-color: transparent;
		border-color: var(--silver);
		color: var(--silver);
		box-shadow: none;
	}
	.linktobutton[disabled]:active {
		background-color: transparent;
		border-color: var(--silver);
		color: var(--silver);
		box-shadow: none;
		transform: none;
	}
	.clr-btn-darkred {
		color: #f7f1e3;	
		background-color: var(--clr-darkred);
		border-color: #23232e;
	}
	.clr-btn-darkred:hover {
		color: #218c74;	
		background-color: var(--clr-lightred);
		border-color: #218c74;
	}
	.omaxddlist {
		font-size: 1.1rem;
		padding: 0.4em;
	}
	.omaxlabelfor {
		font-weight:200;
		font-style:italic;
		text-transform:lowercase;
	}
	tr.omax_row:nth-child(odd)  {
		background-color: rgba(239, 243, 251, 0.6);
	}
	tr.omax_row:nth-child(even)  {
		background-color: rgba(196, 211, 240, 0.6);			
	}
	tr.omax_row_sel:nth-child(odd) {
		background-color: rgba(155, 89, 182, 0.6);
		font-weight: bold;
		font-size: 110%;
	}
	tr.omax_row_sel:nth-child(even) {
		background-color: rgba(155, 89, 182, 0.6);
		font-weight: bold;
		font-size: 110%;			
	}
	tr.omax_row:hover {
		background-color: rgba(52, 172, 224, 0.9);
	}
	tr.omax_row_sel {
		background-color: rgba(155, 89, 182, 0.6);
		font-weight: bold;
		font-size: 110%;
	}
	tr.omax_row_sel:hover {
		background-color: rgba(52, 172, 224, 0.9);			
	}
	tr.omax_row_hov:hover {
		background-color: rgba(52, 172, 224, 0.9);
	}