@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&display=swap');

/* Apply Font - Uncomment the One You Want */

/* font-family: 'Inter', sans-serif; */
/* font-family: 'Poppins', sans-serif; */
/* font-family: 'Roboto', sans-serif; */
/* font-family: 'Nunito', sans-serif; */
/* font-family: 'Lato', sans-serif; */
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Manrope', sans-serif; */
/* font-family: 'IBM Plex Sans', sans-serif; */


.documentContainerBar {
	position: relative;
	margin-bottom: 20px; 
	display: inline;
	float: left; 
	width: 100%;
	border-radius: 30px 20px 40px 20px;
	overflow: hidden;

	box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

/* Parent Wrapper */
.loaderWrapper, #globalLoaderWrapper {
	width: 100%;
	height: 100%; /* Full screen */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f6f7f800; /* Light gray background */
	position: relative;

  }
  #globalLoaderWrapper {
	pointer-events: none;
	user-select: none;
  }

  /* Loader */
  #hollowloader {
	width: 100vw;
	height: 5px;
	position: fixed;
	top: 65px;
  }

  #globalLoaderWrapper .loading::after,
  .loaderWrapper .loading #fieldtable .documentContainerBar::after 
  {
	display: none;
  }
  /* Shimmer Overlay (Pseudo-element) */
  #globalLoaderWrapper #hollowloader::after, 
  .loaderWrapper #fieldtable .documentContainerBar::after 
  {
	user-select: none;
	pointer-events: none;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

  .loaderWrapper #fieldtable .documentContainerBar::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(99, 197, 236, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
	/* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); */
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite linear;
	
  }

  #globalLoaderWrapper #hollowloader::after {
	background: linear-gradient(60deg, rgba(255, 0, 0, 0) 0%, rgba(99, 197, 236, 0.5) 50%, rgb(99, 197, 236) 90%, rgba(255, 0, 0, 0) 100%);
	
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite linear 0.0s reverse;
  }
  
  /* Shimmer Animation */
  @keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
  }


	html {  margin-top:0px; margin-left:0px; margin-right:0px; }
	body {   margin-top:0px; margin-left:0px; margin-right:0px; margin-top:  80px; margin-bottom:60px;
		    background-color: #FFFFFF;
			margin: 0px;
			overflow: hidden;
			background: -webkit-linear-gradient(#EEEEEE, yellow); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(#EEEEEE, yellow); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(#EEEEEE, yellow); /* For Firefox 3.6 to 15 */
			background: linear-gradient(#000000, #EEEEEE, #000000) fixed;
			background: radial-gradient(#EEEEEE, #111521) fixed;

			display: flex; 
			justify-content: center; 
			align-items: center; 
			height: 100vh;  
			/* font-family: Arial, sans-serif; */
			/* font-family: 'Nunito', sans-serif; */
			font-family: 'Poppins', sans-serif;

			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-rendering: optimizeLegibility;
			font-smooth: always;
		
  }
  
  [draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


	
	.labelproforma { position: relative;  color: #648499;  color: #6491aa; font-weight: bold; font-size: 12px; border-top: 3px double #6491aa;  box-sizing: border-box;  }



.dragover {

}
.dragover:hover{
transform: scale(0.95);
}
  
  
  #loader { z-index: 0; position: absolute; width: auto; height: auto; left: 0px; right: 0px; top: 0px; bottom: 60px; background-color: rgba(0, 0, 0, 0.3); }
  
  
  #panelSups {  display:block; cursor: deflaut; width: 950px; height: 208px; left: 0px; margin-left:10px; top: 0px; margin-top: 12px; position: absolute; border: 1px solid #000000; box-sizing: border-box;
						overflow: visible; background-color:rgba(30, 30, 35, 0.75); z-index: 101; transform-origin: 0 0; }
  /* menu hooks */
  #panel3 { position: absolute; left: 0px; bottom: 0px; cursor: move; display:none; width: 666px; height: 273px; margin-left: 10px; margin-bottom: 10px;  border: 1px solid black; overflow: hidden; 
			background-color:rgba(30, 30, 35, 0.75); z-index: 100; transform-origin: 0% 100%; }
  #panelhookselect { display:none; cursor: deflaut; width: 0px; height: 0px; left: 0px; top: 0px; margin-left: 10px; margin-top: 10px; position: absolute; border-radius: 0px 0px 0px 0px; border: 1px solid black; overflow: hidden; background-color:rgba(30, 30, 35, 0.75); z-index: 100;   }
  /* panel screen */
  #panelContentSCREEN {  position: absolute; left:0px; margin-left: 0px; top: 0px; z-index:95; display:none; }
  #panel8 { display:none; cursor: deflaut; width: 100%; height: 100%; left: 0px; top: 0px; margin-top: 2px; position: absolute; overflow: hidden; background-color: tranparent; z-index: 101; }

  #openingTitle {  display: none; z-index: 103; position: absolute; left: 0px; margin-left:0px; top: 10px; height: 70px; overflow: hidden; transform-origin: 0 0;
						 background-color:transparent;  padding-left: 10px; width:500px; color: white; font-size: 24px; line-height: 26px; font-family: 'Poppins', sans-serif; text-align: left; transform-origin: 0 0; }
  #diameterTitle { display: none; z-index: 103; position: absolute; left: 0px; margin-left:0px; top: 10px; height: 85px; overflow: hidden;
						 background-color:transparent;  padding-left: 10px; width:500px; color: white; font-size: 24px; line-height: 26px; font-family: 'Poppins', sans-serif; text-align: left; }

  #tableOW, #tableOL {  display: none; z-index: 103; position: absolute; left: 0px; margin-left:10px; top: 85px; max-height: 200px; overflow: hidden;
						 background-color:rgba(30, 30, 35, 0.75); border: 1px solid #000000; box-sizing: border-box; transform-origin: 0 0; }					 
  #tableFI { display: none; z-index: 103; position: absolute; left: 0px; margin-left:10px; top: 105px; max-height: 200px; overflow: hidden;
						 background-color:rgba(30, 30, 35, 0.75); border: 1px solid #000000; box-sizing: border-box; transform-origin: 0 0; }	
						 				 
  #overlapTitle{  display: none; z-index: 103; position: absolute; left: 0px; margin-left:0px; top: 10px; height: 70px; overflow: hidden; transform-origin: 0 0;
						 background-color:transparent;  padding-left: 10px; width:500px; color: white; font-size: 24px; line-height: 22px; font-family: 'Poppins', sans-serif;; text-align: left;  }					 
  #tableOV {  display: none; z-index: 103; position: absolute; left: 0px; margin-left:10px; top: 45px; max-height: 200px; overflow: hidden; transform-origin: 0 0;
						 background-color:rgba(30, 30, 35, 0.75); border: 1px solid #000000; box-sizing: border-box; }					 
  #panel9 { display:none; cursor: deflaut; width: 400px; height: 250px; left: 0px; margin-left:10px; top: 92px; position: absolute; border: 1px solid #000000; box-sizing: border-box;
						overflow: visible; background-color:rgba(30, 30, 35, 0.75); z-index: 101; transform-origin: 0% 100%; }
  #panel5 { position:absolute; z-index: 103; left: 0px; top: 0px; display: none; }

  #panel7 { position:absolute; z-index: 103; left: 0px; margin-left:10px; top: 10px; cursor: deflaut; width: 540px; height: 200px; border: 1px solid #000000; box-sizing: border-box; transform-origin: 0 0;
						overflow: visible; background-color:rgba(30, 30, 35, 0.75); display: none; }
  #panel6 { position:absolute; z-index: 103; left: 0px; margin-left:0px; top: 10px; cursor: deflaut; width: 320px; height: 200px; border: 1px solid #000000; box-sizing: border-box; transform-origin: 50% 0%;
						overflow: visible; background-color:rgba(30, 30, 35, 0.75); display: none; }
  #screenName { display: none;  border-radius: 3px; z-index: 103; position: absolute; left: 70px; margin-left:10px; top: 10px; overflow: hidden; height: auto; max-width: 900px;
							 background-color:rgba(30, 30, 35, 0.3);  padding-left: 10px; padding-top:5px; padding-right: 10px; padding-bottom:5px; color: white; 
							 font-size: 16px; line-height: 22px; font-family: 'Poppins', sans-serif; text-align: left; }
  #addCartIcon { display: none; border-radius: 3px; z-index: 106; position: absolute; left: 0px; margin-left:10px; top: 10px; overflow: hidden; height: 60px; width: 60px; padding: 5px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; }
  #newSBOXmenu { display: none; border-radius: 3px 3px 65px 3px; z-index: 106; position: absolute; left: 0px; margin-left:10px; top: 10px; overflow: hidden; height: 150px; width: 413px; padding: 5px;
							 background-color:rgba(30, 30, 35, 0.6); text-align: left; }
 #newSBOXcontent { display: none; }
  .addCartIcon { border: 1px solid #777777; box-sizing: border-box; }
  .addCartIcon:hover { border: 1px solid #CCCCCC; box-sizing: border-box; }
  #savescrIcon { display: none; border-radius: 3px; z-index: 106; position: absolute; left: 0px; margin-left:10px; top: 10px; overflow: hidden; height: 60px; width: 60px; padding: 5px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; } 

  #machineIcon { display: block; display: none; border-radius: 3px; z-index: 106; position: absolute; left: 0px; margin-left:10px; bottom: 10px; margin-bottom: 5px; overflow: hidden; height: 60px; width: 60px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; } 
  #machineIcon2 { display: none; border-radius: 3px; z-index: 106; position: absolute; left: 0px; margin-left:10px; bottom: 10px; margin-bottom: 5px; overflow: hidden; height: 60px; width: 60px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; } 
  #addscrIcon { display: block; border-radius: 30px; z-index: 106; position: absolute; left: 0px; margin-left:10px; top: 90px; margin-bottom: 5px; overflow: hidden; height: 60px; width: 180px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; } 

  #delscrIcon { display: block; border-radius: 3px; z-index: 106; position: absolute; left: 140px; margin-left:10px; bottom: 10px; margin-bottom: 5px; overflow: hidden; height: 60px; width: 60px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; } 
  #addeckIcon { display: block; border-radius: 30px; z-index: 106; position: absolute; left: 210px; margin-left:10px; top: 90px; margin-bottom: 5px; overflow: hidden; height: 60px; width: 120px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; } 
  #savesboxIcon { display: block; border-radius: 5px; z-index: 106; position: absolute; left: 340px; margin-left:10px; top: 10px; margin-bottom: 5px; overflow: hidden; height: 65px; width: 65px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; }
  #cancelboxIcon { display: block; border-radius: 5px 5px 75px 5px; z-index: 106; position: absolute; left: 340px; margin-left:10px; top: 90px; margin-bottom: 5px; overflow: hidden; height: 60px; width: 65px; padding: 0px;
							 background-color:rgba(30, 30, 35, 0.3); cursor: pointer; }  
  .machineIcon { border: 1px solid #777777; box-sizing: border-box; }
  .machineIcon:hover { border: 1px solid #CCCCCC; box-sizing: border-box; }
  
  #mouseTip { display: none; z-index: 103; position: absolute; height: 16px; width: auto; background-color: #000000; 
														 color: #FFFFFF; border-radius: 2px; padding: 3px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: bold; }
  #panel14 { background-color:rgba(30, 30, 35, 0.85); z-index: 103; position: absolute; overflow: hidden; left:0px; top:10px; padding-bottom: 10px; display: none; }
	

 
 
 


			  


	


	
#rightmenu { float:right; margin-top:0px; background:url(images/rightmenutop.png) repeat-x; background-position:top;  width: 186px; overflow:hidden; 
			border-width: 2px; border-color: #36516F; border-style: solid; background-color:#FFFFFF; padding:8px 0px 8px 8px; }
			
#inputlogin { background-color: #FFFFFF; border: 0px solid; color: #000000; font: 12px Calibri; 
			  margin-top:0px; padding: 3px 2px 3px 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 20px; width: 90px; }
								
#login { background: #000000; color: #FFFFFF; font: bold 12px Calibri; border: 1px solid #900;
		 padding: 3px 2px 3px 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30px; height: 25px;}
#login:hover { cursor: pointer; color: #FFF;  background-color: #900; border: 1px solid #900; }


#legendtable { margin: 0px 0px 0px -25px; color: #FFFFFF; font-size: 16px; background-color: transparent; font-family: 'Poppins', sans-serif; font-size: 14px; border-radius: 3px; text-align: center; }
	
	
	
	
	
	
	
	
#CARTicon {  position: fixed; top: 100px; margin-left: 950px; z-index: 99; width: 100px; height: 100px; background-color: transparent; border: 0px; text-align: left; overflow: visible; font-family: Calibri; font-size: 18px; font-weight: bold; cursor: pointer; }
#CARTlayout { display: none; position: fixed; z-index: 99; top: 100px; margin-left: -10px; width: 940px; height: 500px; overflow-y: auto;  background-color: #EEEEEE; border: 2px solid black; border-width: 2px 0px 2px 0px; text-align: left; font-family: Calibri; font-size: 18px; font-weight: bold; }

div#pricebarex { background-color: rgba(30, 30, 35, 0.85); display: inline-block; box-sizing: border-box; min-height: 34px; 
			text-align:left; width: 100%; float: right; color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px; border: 1px solid #000000; width: 96%; margin-right: 2%; margin-bottom: 2px; }	


div#pricebar { background-color: rgba(30, 30, 35, 0.85); cursor: pointer; display: inline-block; box-sizing: border-box; min-height: 60px; 
			text-align:left; width: 100%; float: right; color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px; border: 1px solid #000000; width: 96%; margin-right: 2%; margin-bottom: 2px; }	
div#pricebar:hover { background-color: rgba(80, 30, 35, 0.85); }
div#pricebartwo { background-color: rgba(30, 30, 35, 0.65); cursor: pointer; display: inline-block; box-sizing: border-box; min-height: 60px; 
			text-align:left; width: 100%; float: right; color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px; border: 1px solid #000000; width: 96%; margin-right: 2%; margin-bottom: 2px; }	
div#pricebartwo:hover { background-color: rgba(130, 30, 35, 0.85); }

	#orderTIMEVALE { text-align: left; font-family: 'Poppins', sans-serif; font-weight: bold; display: inline-block; border-radius: 5px; }
	#orderTIMEVALG { text-align: left; font-family: 'Poppins', sans-serif; font-weight: bold; display: inline-block; border-radius: 10px; }
	#orderTIMEVALG:hover { background-color: rgba(35, 130, 35, 0.85); }
	#orderTIMEVALR { text-align: left; font-family: 'Poppins', sans-serif; font-weight: bold; display: inline-block; border-radius: 10px; }
	#orderTIMEVALR:hover { background-color: rgba(130, 35, 35, 0.85); }

div#order { background-color: rgba(30, 30, 35, 0.85); cursor: pointer; display: inline-block; box-sizing: border-box; min-height: 60px; 
			text-align:left; width: 100%; float: right; color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px;  border: 0px solid #000000; }	
div#order:hover { background-color: rgba(130, 30, 35, 0.85); }
div#ordersetContainer {  width:100%; float: left; width: 60px; cursor: pointer; }
.imgCheckSet { width: 50px; height: 50px; margin-top: 5px; margin-left: 3px; color: white; }
div#ordermat { background-color: rgba(160, 30, 35, 0.55); cursor: pointer; display: inline-block; box-sizing: border-box; min-height: 60px; 
			text-align:left; width: 100%; float: right; color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px; border: 0px solid #000000; }	
div#ordermat:hover { background-color: rgba(130, 30, 35, 0.85); }

div#orderset { background-color: rgba(30, 80, 35, 0.85); cursor: pointer; display: inline-block; box-sizing: border-box; min-height: 60px; 
			text-align:left; width: 100%; float: right; color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px; margin-bottom: 10px; border: 0px solid #000000;}	
div#orderset:hover { background-color: rgba(30, 90, 35, 0.85); }
	 
	 
	.orderID { float: left; text-align: center; display: inline-block; }
	.orderSQ { width: 100%; display: inline-block; position: relative; }
	.orderSQ:after { padding-top: 100%; display: block; content: ''; }
	.orderSQcont {
	  position: absolute; top: 18%; bottom: 18%; right: 18%; left: 18%;
	  border: 5px solid #EEEEEE; border-radius: 50%; font-weight: bold; text-align: center;
	  font-family: 'Poppins', sans-serif; font-size: 100%; line-height: 190%; color: #FFFFFF;
	}
	
	.DELbutton { width: 50%; text-align: center; float: left; }
	.VIEWbutton { width: 50%; text-align: center; float: right; }
	#orderRIGHT {  display: inline-block; /*background-color:yellow;*/ padding-top: 10px; }
	#orderTIMEVAL { text-align: left; /*background-color: black;*/ font-family: 'Poppins', sans-serif; font-weight: bold; display: inline-block; }
	#orderBUTTONS { color: #FFFFFF; /*background-color: grey;*/ padding-top: 5px; padding-bottom: 5px; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 20px;  }
	#orderDESC { 
		font-size: 115%; 
		line-height: 140%; 
		display: inline-block; 
		word-wrap:break-word; 
		color: #EEEEEE; /*background-color: grey;*/ 
		padding: 10px; 
		font-family: 'Poppins', sans-serif; 

			 font-family: 'IBM Plex Sans', sans-serif; 
	font-family: 'Poppins', sans-serif;
	font-family: 'Manrope', sans-serif; 
	font-family: 'Nunito', sans-serif; 
	}

div#calendar { float: left; margin-left: 4px; width: 40px; height: 40px;  font-weight: bold; line-height: 30px; text-align: center; display: inline-block;}
.calendar { width: 30px; height: 30px; margin-left: 3px; color: white; display: inline-block;}
div#prodlisttxt { float: right; margin-top: 12px; display: inline-block;}
div#item { background-color: rgba(30, 30, 35, 0.85); cursor: deflaut;}	
div#itemmat { background-color: rgba(100, 30, 35, 0.65); cursor: deflaut;}
div#itemsum { background-color: rgba(30, 30, 35, 0.85); cursor: deflaut; float: left; background-color: #000000; text-align:left; width: 100%; height: auto;
										color: #000000; font-family: Calibri; font-size: 14px; line-height: 20px; display: inline-block;  background-color: #000000;
										padding: 10px; box-sizing: border-box; 
			  background: #000000; /* For browsers that do not support gradients */
			  background: -webkit-linear-gradient(top left, #444450, #000000); /* For Safari 5.1 to 6.0 */
			  background: -o-linear-gradient(bottom right, #444450, #000000); /* For Opera 11.1 to 12.0 */
			  background: -moz-linear-gradient(bottom right, #444450, #000000); /* For Firefox 3.6 to 15 */
			  background: linear-gradient(to bottom right, #444450, #000000); /* Standard syntax */ }
.itemsumhead { float: left; width: 100%; color: #FFFFFF; font-family: 'Poppins', sans-serif; font-size: 16px; display: inline-block; }		
.pricedesc { float: left; display: inline-block; margin: 10px;  }					
.pricefont { font-size: 18px; font-weight:bold; color: #FFFFFF; }	
.bottomSUM { float: left; width: 98%; margin-left: 1%; margin-top: 10px;  color: #FFFFFF; border-top: 1px solid #FFFFFF; display: inline-block; 
			 padding-bottom: 10px; padding-top: 10px; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 20px;  }	
.noteDESC { float: left; width: 540px; height: '.$noteheight.'px; overflow: hidden; color: #999999;
			padding: 5px; font-size: 14px; line-height: 16px; font-family: Lucida Console; cursor: help; }		
#PDFS { float: right; display: inline-block; font-size: 14px; line-height: 16px; font-family: 'Poppins', sans-serif; font-weight: bold; text-align: right; }	
.pdflink { height: 50px; width: 350px; text-align: right; cursor: pointer; }		
.pdfico { width: 30px; height: 30px; margin-top: 10px; margin-left: 3px; color: white; }
.buyblock { height: 50px; width: 350px; text-align: right; margin-top: 20px; }
.itemoffer {  float: left; text-align:left; width: 100%; height: auto; color: #000000; font-family: Calibri;  padding: 10px; box-sizing: border-box; 
				font-size: 14px; line-height: 20px;	}
.itemcode { background-color:transparent; width: 100%; padding: 0px; padding-bottom: 5px; color: #AADDFF; font-size: 14px; font-weight:bold; border: none; cursor: pointer; }

.item2code { background-color:rgba(170, 221, 255, 0.05); width: 100%; padding: 2px;  color: #AADDFF; font-size: 14px; font-weight:bold; border: 1px solid rgba(170, 221, 255, 0.2); cursor: pointer; 
			border: none; border-bottom: 1px solid rgba(170, 221, 255, 0.4); border-radius: 0;
			}
.item2code2 { padding: 2px;  color: #AADDFF; font-weight:bold; height: 18px; width:99%; border-radius:2px; background-color:transparent; 
																  border: 1px solid transparent; opacity: 0.3; pointer-events:none; font-size: 12px; padding-bottom: 5px; 
											 border-bottom: 1px solid rgba(170, 221, 255, 0.4); border-radius: 0;					  
																  }
.item3code { background-color:rgba(255, 255, 255, 0.03); width: 100%; padding: 2px; color: #FFFFFF; font-size: 14px; cursor: pointer; margin-top: 10px;
			border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0;
			}
.item3code2 { padding: 2px; color: #FFFFFF; height: 15px; width:99%; border-radius:2px; background-color:transparent; 
																  border: 1px solid tranparent; opacity: 0.3; pointer-events:none; font-size: 12px; padding-bottom: 9px; margin-top: 10px;
																  border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0;
																  }
.item4code { background-color:transparent; width: 100%; padding: 2px; color: #999999; font-size: 10px; border: 1px solid transparent; cursor: pointer; 
			 margin-top: 2px; border-bottom: 1px solid rgba(153, 153, 153, 0.2); border-radius: 0; }


.item2code:focus { outline: none; }
.item3code:focus { outline: none; }
.item4code:focus { outline: none; }

.itemListRecord { clear:both; padding-right: 2px; display: inline-block; width: 100%; }
.itemListRecord:hover { background-color: rgba(153, 153, 153, 0.2); cursor: pointer;  }



input.priceinput { font-size: 16px; font-weight: bold; color: #AADDFF; width: 48px; text-align: right;
					background-color: transparent; border: none; border-bottom: 1px solid rgba(170, 221, 255, 0.4); border-radius: 0; }
input.priceinput:focus {  outline: none; }
input.weightinput { font-size: 14px; font-weight: bold; color: #999999; width: 48px; text-align: right;
					background-color: transparent; border: none; border-bottom: 1px solid rgba(153, 153, 153, 0.4); border-radius: 0; }
input.weightinput:focus {  outline: none; }

.pricefont { font-size: 14px; font-weight: bold; color: #AADDFF; }
.weightfont { font-size: 12px; font-weight: bold; color: #999999; }

#itemDESC { font-size: 115%; line-height: 140%; display: inline-block; word-wrap:break-word; color: #EEEEEE; /*background-color: grey;*/ padding: 10px; font-family: 'Poppins', sans-serif; }
#itemRIGHT {  display: inline-block; /*background-color:yellow;*/ padding-top: 10px; }
#screenDET { text-align: left; /*background-color: black;*/ font-family: 'Poppins', sans-serif; font-weight: bold; display: inline-block; }
#disvalVIEWS {  color: #FFFFFF; /*background-color: grey;*/ padding-top: 5px; padding-bottom: 5px; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 20px;  }
	.disVIEW { width: 30%; /*background-color: pink;*/ float: left; text-align: center; color: white; font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: bold; cursor: help;}
	.valVIEW { width: 60%; /*background-color: blue;*/ float: right; text-align: center;   color: #AADDFF; font-size: 18px; font-family: 'Poppins', sans-serif; font-weight: bold; cursor: help;}	
div#itemPdf{ background-color: #FFFFFF; }	

.item { background-color: rgba(30, 30, 35, 0.85); cursor: deflaut; border: 1px solid #000000; box-sizing: border-box; }	

div#itemcomp { background-color: rgba(30, 30, 35, 0.85); border: 1px solid #000000; box-sizing: border-box; float: left; width: 100%; display: inline-block; 
				font-family: Calibri; font-size: 14px; line-height: 20px; margin-bottom: 10px; cursor: pointer; }
div#itemcomp:hover { background-color: rgba(130, 30, 35, 0.85); }
div#itemcompleft { float: left;   color: #FFFFFF; padding: 10px; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 20px;  display: inline-block;}
div#itemcompnumber { float: left; width: 30px; height: 30px; margin-top: 15px; margin-left: 5px; border: 5px solid #FFFFFF; border-radius: 20px; font-weight: bold; line-height: 30px; text-align: center;  }
div#compview { float: right;  width: 35px; height: 35px; color: white; cursor: pointer; margin-right: 30px; margin-top: 20px; margin-bottom: 35px;
																	font-size: 24px; line-height: 30px; font-family: 'Poppins', sans-serif; font-weight: bold; }
div#compedit{ float: left;  width: 35px; height: 35px; color: white; cursor: pointer;  margin-top: 20px; margin-bottom: 35px;
																	font-size: 24px; line-height: 30px; font-family: 'Poppins', sans-serif; font-weight: bold; }
.itemmat { background-color: rgba(100, 30, 35, 0.65); cursor: deflaut; border: 1px solid #000000; box-sizing: border-box;}
.cartitem { 
	user-select: none; 
	-moz-user-select: none; 
	text-align:left; 
	width: 100%; 
	background-color: rgba(30, 30, 35, 0.85); 
	cursor: deflaut; 
	box-sizing: border-box;
	color: #000000; 
	font-family: Calibri; 
	font-size: 14px; 
	line-height: 20px; 
	margin-bottom: 10px; 
	display: inline-block; 
}






#fieldtable {  
	background-color: transparent; 
	font-family: 'Poppins', sans-serif; 
	color: #FFFFFF; 
	line-height: 24px; 
	border-radius: 4px 4px 0px 0px; 
	display: inline-block; 
}



	ul.leftmenu { float: left; width: 100%; display: inline-block;  padding: 0;  margin: 0; }
	ul.leftmenu li {float: left; width: 100%; display: inline-block;}
	ul.leftmenu li a { 
		float: right;
		width: 100%; 
		color: #FFFFFF; 
		/* font: Calibri;
		font-family: 'IBM Plex Sans', sans-serif; */
		/* font-family: 'Poppins', sans-serif;
		font-family: 'Manrope', sans-serif; */
		font-family: 'Nunito', sans-serif;
		text-transform: lowercase;
		/* font-size: 16px;  */
		font-size: 16px; 
		line-height: 20px;
		font-weight: normal; 
		padding-top: 2px; 
		padding-bottom: 2px; 
		padding-right: 5px; 
		border: 0px; 
		border-radius: 0px; 
		background-color: transparent; 
		text-align: right; 
	}
	ul.leftmenu li a.active {  background-color: #648499;  color: #FFFFFF; }
	ul.leftmenu li a:hover:not(.active) {background-color: #555;
	
			  background: #555; /* For browsers that do not support gradients */
			  background: -webkit-linear-gradient(left, transparent, #555); /* For Safari 5.1 to 6.0 */
			  background: -o-linear-gradient(right, transparent, #555); /* For Opera 11.1 to 12.0 */
			  background: -moz-linear-gradient(right, transparent, #555); /* For Firefox 3.6 to 15 */
			  background: linear-gradient(to right, transparent, #555); /* Standard syntax */
			  
			  background: #900; /* For browsers that do not support gradients */
			  background: -webkit-linear-gradient(left, transparent, #007bff); /* For Safari 5.1 to 6.0 */
			  background: -o-linear-gradient(right, transparent, #007bff); /* For Opera 11.1 to 12.0 */
			  background: -moz-linear-gradient(right, transparent, #007bff); /* For Firefox 3.6 to 15 */
			  background: linear-gradient(to right, transparent, #007bff); /* Standard syntax */
	}



#zakladka{ float:left; background-color: rgba(30, 30, 35, 0.35); color: #FFFFFF;  font: bold 12px Calibri; line-height: 18px; cursor: pointer;
			  padding: 6px 0px 10px 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 70px; height: 18px; border-radius: 4px 4px 14px 14px;}
#zakladka:hover { color: #FFF; background: #900; }
#zakladkabl{ float:left; background-color: #000000; color: #FFFFFF;  font: bold 12px Calibri; line-height: 18px; cursor: default;
			  padding: 6px 0px 10px 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 70px; height: 18px; border-radius: 4px 4px 14px 14px;}
			  
#offerhead {
			  float:left; background-color: rgba(30, 30, 35, 0.35); font: bold 12px Calibri; line-height: 18px;
			  padding: 6px 0px 10px 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 70px; height: 18px; border-radius: 0px 0px 14px 14px;
			  width: 100%; height: auto; background-color: #000000; color: #FFFFFF; margin-bottom: 10px; cursor: default;
			  background-color: #000000;
			  padding: 10px; box-sizing: border-box; 
			  background: #000000; /* For browsers that do not support gradients */
			  background: -webkit-linear-gradient(top left, #444444, #000000); /* For Safari 5.1 to 6.0 */
			  background: -o-linear-gradient(bottom right, #444444, #000000); /* For Opera 11.1 to 12.0 */
			  background: -moz-linear-gradient(bottom right, #444444, #000000); /* For Firefox 3.6 to 15 */
			  background: linear-gradient(to bottom right, #444444, #000000); /* Standard syntax */
	}



#mainPages { float: right; text-align:center; width: 100%; height: 50px; background-color: transparent; font-family: Calibri; font-size: 40px; color: #FFFFFF; line-height: 40px; margin-bottom: 1px; }
#innerPages { position: absolute; left: 0px; right: 0px; margin-left: auto; margin-right: auto; width: 400px; height: 50px; }
.leftSidePage { float: left; width: 50%; height: 50px; }
.rightSidePage { float: right; width: 50%; height: 50px; }
#currentPageBlock { width: 70px; height:26px; font-size: 26px; text-align: right; color: #FFFFFF; background-color: transparent; border:1px solid #FFFFFF; margin-top: 11px; cursor: pointer; }
#pageListBlock { float: left; font-size: 26px; margin-top: 4px; }

/**
 *  Filter documents block
 */

#mainFilter { 
	box-sizing: border-box; 
	/* background-color: rgba(0, 0, 5, 0.85); 
	background-color: rgba(40, 48, 61, 0.85);  */
	background: linear-gradient(30deg, rgba(0, 0, 5, 0.35), rgba(40, 48, 61, 0.85));
	text-align: left; 
	display: flex; 
	width: 100%; 
	height: 70px; 
	border-radius: 4px 4px 14px 14px;
	border-radius: 0px 0px 40px 40px;
	border-radius: 0px;
	color: #000000; 

	/* font-family: Calibri;  */
	/* font-family: 'IBM Plex Sans', sans-serif; 
	font-family: 'Poppins', sans-serif;
	font-family: 'Manrope', sans-serif;  */
	font-family: 'Nunito', sans-serif;
	text-transform: lowercase;

	margin-bottom: 15px; 
	border: 0px solid #FF0000; 

	justify-content: space-evenly;
	
}

.filterContainer {
	width: 996px;
}

.filterSquare { 
	width: 7%; 
	height: 100%; 
	text-align: center; 
	float: left; 
}

.filterRectangle { 
	width: 93%; 
	height: 100%; 
	text-align: center; 
	float: left; 
}

.filterBlock { 
	float: left; 
	height: 100%; 
	width: 230px; 
}

.filterTitle { 
	font-size: 75%; 
	margin-top: 10px;
	margin-bottom: 2px;
	position: relative; 
	color: #999; 
	font-weight: normal; 
	text-align: left;
}

.filterInput { 
	background-color: rgba(40, 48, 61, 0.85); 
	background-color: rgba(95, 114, 136, 0.85); 
	border: 0px solid #FF0000; 
	border-radius: 40px;
	color: #FFFFFF; 
	font: 14px Calibri; 
	line-height: 10px; 
	font-weight: bold; 
	text-align: left;
	padding: 8px 12px 10px 8px; 
	-webkit-appearance: none; 
	appearance: none; 
	-moz-appearance: textfield; 
	width: 95%;  
	cursor: pointer;
	box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.filterInput:focus { 
	outline: none; 
	box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.filterDelete { 
	position: relative; 
	padding-top: 25%; 
	width: 100%; 
	cursor: pointer; 
}

/**
 *  Filter documents block end
 */

/**
 *  Cart head
 */

#cartform table input {
	height: 35px;

}
#cartform table .company-picker {
	height: 25px;

}
#cartform table select {
	height: 35px;
}

#cartform table input:focus {
	box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
	outline: none;
}

#cartform table input,
#cartform table .company-picker,
#cartform table select,
#cartform .noteinput {
	
	background-color: rgba(95, 114, 136, 0.85); 
	box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1);
	border: none;
	border-radius: 20px;
	padding: 6px 15px 6px 10px;
}

#cartform table select {

	appearance: none; /* Removes default OS styles */
	cursor: pointer;
}


/**
 *  Login form block
 */
 .loginform {
	background: linear-gradient(30deg, rgba(0, 0, 5, 0.35), rgba(40, 48, 61, 0.85)); 
	padding: 20px; 
	border-radius: 10px; 
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); 
	width: 300px; 
	display: flex; 
	flex-direction: column; 
	gap: 15px;
 }

 .loginform h2 {
	text-align: center; 
	
	color: #b5d4f7;
	margin-bottom: 10px;
 }

 .loginform input {
	width: 100%;
	padding: 12px; 
	border: 1px solid #ddd; 
	border-radius: 6px; 
	font-size: 16px; 
	outline: none; 
	transition: 0.3s;
}

.loginform input:focus {
	box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1);
}

.loginform button {
	background: #007bff; 
	color: white; 
	padding: 12px; 
	border: none; 
	border-radius: 6px; 
	font-size: 16px; 
	cursor: pointer; 
	transition: 0.3s;
}

.loginform button:hover {
	background: #0056b3;
}


 /**
 *  Navigation Document Tabs
 */
 
/* Navigation bar */
.nav {
  
	/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
	
	/* font-family: 'IBM Plex Sans', sans-serif; 
	font-family: 'Poppins', sans-serif;
	font-family: 'Manrope', sans-serif;  */
	font-family: 'Nunito', sans-serif;

	display: flex;

	gap: 0px;
	background: #1e1e2e;
	padding: 0px 0px;
	border-radius: 0px;
	box-shadow: 0 8px 6px rgba(0, 0, 0, 0.1);
	background: transparent;
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);

	flex-wrap: nowrap; /* Prevents wrapping */
    justify-content: space-evenly; /* Distributes space evenly */
  }
  
  /* Navigation links */
  .nav-link {
	cursor: pointer;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.507);
	font-weight: bold;
	padding: 10px 15px;
	border-radius: 5px;
	transition: 0.3s;
	width: 100%;
	flex-wrap: nowrap; /* Prevents wrapping */
    justify-content: space-evenly; /* Distributes space evenly */
  }
  
  /* Active link */
  .nav-link-active {
	/* background: #4f46e5;
	background: #233a55 !important; */
	font-weight: bold;
	color: #FFFFFF;
	border-bottom: 6px solid #fff;
	border-radius: 0%;
	/* background-color: #0643662a; */
  }
  
  /* Hover effect but only for links that are not active */
  .nav-link:not(.nav-link-active):hover {
	background: rgba(255, 255, 255, 0.2);
  }

/**
 *  Navigation Document Tabs end
 */

/**
 *  Pagination
 */
 .pagination {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 1rem;
	gap: 0.5rem;
	margin-bottom: 20px;
  }
  
  .pagination button {

	color: #FFFFFF;
	padding: 0.5rem 1rem;
	/* border: var(--pagination-button-border); */
	box-shadow: 3px 1px 6px 3px rgba(0, 0, 0, 0.1);
	background-color: rgba(95, 114, 136, 0.1);
	cursor: pointer;
	border-radius: 1.375rem;
	/* transform: skewY(0deg); */
	transform: translate(0, 0);
	width: 3rem;
	outline: none !important;
	border: none !important;
  }
  
  .pagination button:active {
	box-shadow: 0px -1px 1px 1px rgba(0, 0, 0, 0.3) !important;
	border: none !important;
	transform: translate(0, 1%) scale(101%, 99%);
  }
  
  .pagination button:hover {
	border: none !important;
	outline: none !important;
  }
  
  .pagination button:disabled {
	opacity: 0.5;
	cursor: crosshair;
  }
  
  .pagination span {
	display: flex;
	align-items: center;
	text-align: center;
	min-width: 150px;
  }

  .pagination span input {
	width: 4rem;
	padding: 0.5rem;
	border: none;
	border-radius: 1.375rem;
	text-align: center;
	background-color: rgba(95, 114, 136, 0.85);
	color: #FFFFFF;
	margin: 0 0.5rem;
  }
  
  .pagination span input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  }


/**
 *  Pagination end
 */

#banner { 
	position: absolute; 
	top:0px; 
	
	background-color: rgba(0, 0, 0, 0.5); 

	/* background: linear-gradient(30deg, rgba(0, 0, 5, 0.35), rgba(40, 48, 61, 0.85)); */
	background-position: top; 
	/* height: 9%;  */
	height: 70px; 
	width: 100%;  
	z-index: 100; 
	/* border-bottom: 2px solid red; */
}

#logoFull { float:left; position: absolute; height: 100%; text-align: left; }
#logoSygnet {  float:left; position: absolute; height: 100%; text-align: left; }
#topheader { float:right; height: 100%; width: auto; overflow: hidden; text-align: left; }

#bottomlinepage { 
	display: block; 
	position: fixed; 
	bottom:0px; 
	margin-bottom: 0px; 
	background-color: rgba(0, 0, 0, 0.5); 
	/* height: 6%;  */
	height: 30px; 
	color: #FFFFFF !important;

	width: 100%; 
	z-index: 100; 
	border-top: 1px solid rgb(31, 73, 97); 
	transform-origin: 0% 100%;
}

#bottomlinepage table tr tr font {
	color:#FFFFFF;; font-size:8px; line-height: 15px;
}

#bottomlinepage table {
	line-height: 10px;
	font-size: 12px !important;
	color: #aaa !important;
}

#middleblock { 
	position: absolute; 
	/* top: 9%;  */
	top: 70px; 
	/* height: 85%;  */
	height: calc( 100vh - 100px );
	width: 100%; 
	overflow:hidden;

	display: flex; 
	justify-content: center; 
	align-items: center; 
}
#rightside { position: absolute; top: 0px; margin-left: auto; margin-right: auto; left: 0; right: 0;  height: 100%;   overflow:visible; }	
#watermark { position: absolute; height: 100%;  top: 0px; margin-top: 2px; margin-left: auto; margin-right: auto; left: 0; right: 0; overflow:visible;
			 z-index: 100; pointer-events: none; background: url(images/logoWater.svg) repeat center; opacity: 0.2; }

#rightside2{ 
	position: fixed; 
	position: absolute; 
	overflow: hidden; 
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: rgba(95, 114, 136, 0.85) transparent;
	max-height: 100%; 
	height: 100%; 
	top: 0px; 
	left: 0px; 
	right: 0px;  
	padding-right: 0px;  
	margin: 0px; 
}	
#rightside3{ position: absolute; overflow:hidden; max-height: 100%; height: 100%; top: 0px; left: 0px; right: 0px;  padding-right: 0px;  margin: 0px; }	
#leftside {  
	position: fixed; 
	left: 0px;
	margin-top: 0px; 
	/* top: 9%;  */
	top: 70px; 
	/* bottom: 6%;  */
	bottom: 30px; 
	width:180px; 
	background-color: rgba(0, 0, 0, 0.4); 
	text-align: left; 
	z-index: 100; 
	font: 19px Calibri; 
	transform-origin: 0 0; 
}
#divBuffer { position: absolute; width: 100%; max-height: 100%; height: 100%;  }

#fullMenu { 
	top: 0px; 
	position: relative; 
	margin: 0px; 
	padding:0px;
	padding-top: 50px;
}
#iconMenu { top: 0px; position: relative; margin: 0px; padding:0px; }

  .menuIco { width: 70%; left:0px; right:0px; margin-left: auto; margin-right:auto; margin-top: 4%; margin-bottom: 4%; }
 
  #canvas { z-index:90; position: absolute; top: 70px; left: 180px; } 
  #canvas2 { z-index: 96; display: none; position: absolute; top: 70px; left: 180px; }  
 


#orderTIMEVAL font:first-child {
	/** date */
	font-size: 12px; font-weight: bold; color: #FFFFFF;
}

#orderTIMEVAL .orderPrice {
	/** price */
	font-size: 14px; color: #AADDFF; font-weight: bold;
}


#orderButtons {
	height: 35px;
}

.DELbutton img, .VIEWbutton img {
	width: 100%;
}

.documentUserInfo {
	background-color: rgba(0,0,0,0.6); 
	color: #aaaaaa; 
	text-align: left; 
	font-size: 10px; 
	border-radius: 0px 0px 6px 6px; 
	line-height: 16px; 
	display: inline-block; 
	width: 100%;
}

.ownerInfo {
	float: left; padding-left: 70px;
}

.editInfo {
	float: right; text-align: right; padding-right: 282px;
}

.orderDESC font {
	font-size: 75%; font-weight: bold; color: #AADDFF; display: inline-block;
}

 
@media (max-width: 1000em) {
	#orderTIMEVAL font:first-child {
		/** date */
		font-size: 12px; font-weight: bold; color: #FFFFFF;
	}
	
	#orderTIMEVAL .orderPrice {
		/** price */
		font-size: 14px; color: #AADDFF; font-weight: bold;
	}
	
	
	.DELbutton img, .VIEWbutton img {
		width: 70% !important;
	}
	
	    #logoFull { display: block; }
		#logoSygnet { display: none; }

		.filterContainer { width:994px; }

        #leftside { width: 180px; }
		#rightside2 { left: 180px;  }
		#rightside3 { left: 0px;  }
		#rightside { left: 180px;  }
		#canvas { left: 180px; right:0px; }
		#canvas2 { left: 180px; right:0px; }
		#watermark { left: 180px; right: 0px; }
		
		#fullMenu { display: block; }
		#iconMenu { display: none; }
		
		#fieldtable { margin: 10px 0px 10px 0px; width:994px;  }
		.orderID { width: 6%;}
		#orderTIMEVAL { float: left; width: 40%;}
		#screenDET { float: left; width: 35%; padding-bottom: 10px;}
		#orderBUTTONS { float: right; width: 40%; height: 35px; }
		#disvalVIEWS { float: right; width: 65%; }
		.disVIEW { padding-top: 20px; }
		.valVIEW { padding-top: 20px; text-align: right; padding-right: 10px; }
		#orderRIGHT { width: 28%; float:right; }
		#itemRIGHT { width: 30%; float:right; }
		#orderDESC { float: left; width: 62%; }
		#itemDESC { float: left; width: 60%; }
		
}
@media (max-width: 74em) {
        #leftside { width: 80px; }
		#rightside2 { left: 80px;  }
		#rightside3 { left: 0px;  }
		#rightside { left: 80px;  }
		#canvas { left: 80px;  right:0px;}
		#canvas2 { left: 80px;  right:0px;}
		#watermark { left: 80px; right: 0px; }
		.leftmenu { width: 80px; }
		
		#fullMenu { display: none; }
		#iconMenu { display: block; }	
		
		#fieldtable { margin: 10px 1% 10px 1%; width:98%;  }

		.filterContainer { width: 98%; }

		.orderID { width: 60px;}
		#orderTIMEVAL { float: right; width: 100%; }
		#screenDET { float: right; width: 100%; text-align: right; padding-right: 10px;}
		#orderBUTTONS { float: right; width: 100%; }
		#disvalVIEWS { float: right; width: 100%; }
		.disVIEW { padding-top: 0px; width: 25%; text-align: left; }
		.valVIEW { padding-top: 0px; width: 65%; text-align: right; padding-right: 10px; }
		#orderRIGHT { width: 90px; clear:right; position: relative; right: 0px; top: 0px; }
		#itemRIGHT { width: 180px; clear:right; position: relative; right: 0px; top: 0px;}
		#orderDESC { position: relative; margin-left: 0px; margin-right: 0px; top: 0px; width: auto;}
		#itemDESC { position: relative; margin-left: 0px; margin-right: 0px; top: 0px; width: 60%; }		
}		
		

@media (max-width: 44em) {
		.filterBlock { width: 50%;}
		.filterTitle { font-size: 2vw; }
}	

		
@media (max-width: 35em) or (orientation: portrait) {

		.nav-link { 
			font-size: 30px;
			padding: 30px 10px; 
		}

		.nav-link-active { 
			box-sizing: border-box !important;
			border-bottom: 10px solid white; 
		}

		#mainFilter {
			height: auto;
			display: inline-block;
		}

		.filterContainer {
			position: relative; 
			width: 100%; 
			display: flex; 
			flex-direction: column; 
			justify-content: center; 
			align-items: center; 
		}

		.filterBlock {
			width: 100%;
			margin-bottom: 20px;
		}

		.filterInput { 
			font-size: 30px; 
			width: 90%; 
			height: 70px;
		}

		.filterSquare {
			height: 15vw;
			width: 15vw;
		}

		.filterTitle { 
			font-size: 4vw; 
			margin-top: 10px;
		}

		#orderRIGHT {
			width: 100%;
			float: none;
			padding: 40px 0px;
		}


		#orderTIMEVAL {
			width: 100%;
			float: right;
			text-align: right;
			font-size: 2rem;
			padding: 20px 20px;
		}

		#orderTIMEVAL font:first-child {
			/** date */
			font-size: 20px; 
			font-weight: bold; 
			color: #FFFFFF;
			line-height: 20px;
		}

		#orderTIMEVAL .orderPrice {
			/** price */
			font-size: 34px; 
			color: #AADDFF !important;
			font-weight: bold;
			line-height: 60px;
		}

		#orderDESC {
			margin-top: 50px;
			width: auto;
			padding: 10px 20px;
			font-size: 30px;
			width: calc( 100% - 20px );
		}

		#orderDESC font {
			padding-top: 25px;
			font-size: 40px;
			font-weight: bold; color: #AADDFF;
		}

		#orderBUTTONS {
			margin-right: 20%;
			width: 60%;
			padding: 20px 0px;
		}

		.DELbutton, .VIEWbutton {
			width: 100px;
			height: 100px;
		}

		.orderID {
			width: 130px;
		}
		.orderSQcont {
			padding-top: 10px;
			font-size: 30px;

			border: none;
			image-rendering: crisp-edges;
			box-shadow: inset 0 0 0 10px #aaddff;
		}


		.documentUserInfo {
			font-size: 20px;
		}

		.ownerInfo {
			float: left;
			padding: 20px;
		}

		.editInfo {
			float: left;
			padding: 20px;
		}

		.menuIco { height: 30%; margin-top: 30px; }
		li {  display: inline; }		
		#leftside {  diplay: inline; }
		#iconMenu { width: 100%; }

		.leftmenu { 
			margin-top: 0px;
			width: 100%; 
			height: 100%; 
		}
		.fullMenu { padding-top: 0px; }
		ul.leftmenu { 
			float: none;
			width: 100%;  height: 100%; left: 0px; margin-top: 0px; bottom: 0%;}
		ul.leftmenu li { width: 33%;  height: 100%; text-align: center; padding: 0%;}
		ul.leftmenu li a { width: 100%; height: 100%; text-align: center; padding: 0%;}
		ul.leftmenu li a.active { text-align: center; padding: 0%;}
		ul.leftmenu li a:hover:not(.active) {background-color: #555;
	
			  background: #555; /* For browsers that do not support gradients */
			  background: -webkit-linear-gradient(bottom, transparent, #555); /* For Safari 5.1 to 6.0 */
			  background: -o-linear-gradient(top, transparent, #555); /* For Opera 11.1 to 12.0 */
			  background: -moz-linear-gradient(top, transparent, #555); /* For Firefox 3.6 to 15 */
			  background: linear-gradient(to top, transparent, #555); /* Standard syntax */
			  
			  background: #900; /* For browsers that do not support gradients */
			  background: -webkit-linear-gradient(bottom, transparent, #900); /* For Safari 5.1 to 6.0 */
			  background: -o-linear-gradient(top, transparent, #900); /* For Opera 11.1 to 12.0 */
			  background: -moz-linear-gradient(top, transparent, #900); /* For Firefox 3.6 to 15 */
			  background: linear-gradient(to top, transparent, #900); /* Standard syntax */
		}

		#bottomlinepage { display: none; }
		#rightside2 { left: 0px;  }
		#rightside3 { left: 0px;  }
		#canvas { left: 0px; right:0px; }
		#canvas2 { left: 0px;  right:0px;}
		#rightside { left: 0px;  }
		#watermark { left: 0px; right: 0px; }
		#leftside { 
			padding: 0px;
			left: 0px; 
			margin-top: 0px; 
			height: 100px; 
			top: calc( 100vh - 100px );
			bottom: 0%; 
			width: 100%; 
		}
		#middleblock { 
			top: 70px; 
			height: calc( 100vh - 170px ); 
			width: 100%; 
			overflow:hidden;
		}
		
	   	#logoFull { display: block; }
		/* #logoSygnet { display: none; } */
	
}