:root {
	--bgcolor1: #282C34;
	--bgcolor2: #171A1F;
	--scrollcolor1: #282C34;
	--scrollcolor2: #696969;
	--scrollcolor3: #555555;
	--bgcolortr: #636870 ;
	--bgcolornthchild: #282C34 ;
	--fontcolor1: white;
	--fontcolor2: black;
	--highlightcolor: rgba(255, 0, 0, 0.3);
	--fontmain: robotoregular;
	--fontmainmono: robotomono;
	--hoverbg: #C50003;
	--buttonbg: #C50003;
	--hoverfontcolor: white;
	--lc1fontcolor: #FF7C7C;
	--lc4fontcolor: #FF6600;
	--selectionbgcolor: #C50003;
	--selectionfontcolor: black;
	--alertboxbg: #C50003;
	--alertboxfont: #ffffff;
	--alertboxborder: white;

	--menuentrycolor-yellow: #7A7D33;
	--menuentrycolor-red: #973837;
	--menuentrycolor-darkred: #632929;
	--menuentrycolor-blue: #33397D;
	--menuentrycolor-green: #337D35;
	--menuentrycolor-orange: #7D6233;
	--menuentrycolor-purple: #6B337D;
	--menuentrycolor-turquoise: #337D7D;
	--menuentrycolor-grey: #636870;
}


@font-face {
	font-family: "robotoregular";
	font-weight: normal;
	font-style: normal;
	src: url('Roboto-Regular.ttf') format('truetype');
}
@font-face {
	font-family: "robotobold";
	font-weight: normal;
	font-style: normal;
	src: url('Roboto-Bold.ttf') format('truetype');
}

@font-face {
	font-family: "robotomono";
	font-weight: normal;
	font-style: normal;
	src: url('RobotoMono-Regular.ttf') format('truetype');
}
@font-face {
	font-family: "robotomonobold";
	font-weight: normal;
	font-style: normal;
	src: url('RobotoMono-Bold.ttf') format('truetype');
}


@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url('MaterialIcons-Regular.ttf') format('truetype');
    }

.material-icons-link {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    cursor: pointer;
    transform: translateY(2px);

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
      
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons-link:hover {
    color: var(--fontcolor2);
}



::-moz-selection {
	color: var(--selectionfontcolor);
	background: var(--selectionbgcolor);
}
::selection {
	color: var(--selectionfontcolor);
	background: var(--selectionbgcolor);
}


::-webkit-scrollbar {
	width: 7px;
}

::-webkit-scrollbar-track {
	background: var(--scrollcolor1);
}

::-webkit-scrollbar-thumb {
	background: var(--scrollcolor2);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollcolor3);
}




body {
	color: var(--fontcolor1);
	background-color: var(--bgcolor1);
	font-family: var(--fontmain), var(--fontmain);
	font-size: 14px;
}

.menu {
	position: fixed;
    top: 0;
    left: 0;
	overflow-y: scroll;
	overflow-x: hidden;
    width: 230px;
    height: 100%;
    background-color: var(--bgcolor2);
    color: var(--fontcolor1);
	font-size: 12px;
	padding: 0px;
}

.menu a:link, .menu a:visited {
	text-decoration: none;
	color: var(--fontcolor1);
}

.menu a:hover {
	background-color: var(--hoverbg);
	color: var(--hoverfontcolor);
}

.menu a:active {
	background-color: var(--hoverbg);
	color: var(--hoverfontcolor);
}

.menu h1 {
	color: var(--fontcolor1);
	font-family: var(--fontmain), var(--fontmain);
	font-size: 20px;
	margin-left: 13px;
}

.menu h2 {
	color: var(--fontcolor1);
	font-family: var(--fontmain), var(--fontmain);
	font-size: 14px;
}

.menu .catgrouptitle {
	width: 100%;
	height: auto;
	margin-top: 13px;
	margin-bottom: 7px;
	padding-left: 7px;
	padding-right: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 14px;
	font-weight: bold;
	background-color: var(--bgcolor1);
}
.menu .menuentry {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 17px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	background-color: var(--bgcolor1);
}

.menu .menusubentry {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 23px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	background-color: var(--bgcolor1);
}

.menu .menuentry:hover {
	background-color: var(--hoverbg);
}

.menu .menusubentry:hover {
	background-color: var(--hoverbg);
}



.menu .menuentrycolor-yellow {
	background-image: linear-gradient(to right, var(--menuentrycolor-yellow) 0%, var(--menuentrycolor-yellow) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-yellow:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-yellow) 0%, var(--menuentrycolor-yellow) 100% );
}
.menu .catgrouptitlecolor-yellow {
	background-image: linear-gradient(to right, var(--menuentrycolor-yellow) 0%, var(--menuentrycolor-yellow) 100% );
}

.menu .menuentrycolor-red {
	background-image: linear-gradient(to right, var(--menuentrycolor-red) 0%, var(--menuentrycolor-red) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-red:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-red) 0%, var(--menuentrycolor-red) 100% );
}
.menu .catgrouptitlecolor-red {
	background-image: linear-gradient(to right, var(--menuentrycolor-red) 0%, var(--menuentrycolor-red) 100% );
}

.menu .menuentrycolor-darkred {
	background-image: linear-gradient(to right, var(--menuentrycolor-darkred) 0%, var(--menuentrycolor-darkred) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-darkred:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-darkred) 0%, var(--menuentrycolor-darkred) 100% );
}
.menu .catgrouptitlecolor-darkred {
	background-image: linear-gradient(to right, var(--menuentrycolor-darkred) 0%, var(--menuentrycolor-darkred) 100% );
}

.menu .menuentrycolor-blue {
	background-image: linear-gradient(to right, var(--menuentrycolor-blue) 0%, var(--menuentrycolor-blue) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-blue:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-blue) 0%, var(--menuentrycolor-blue) 100% );
}
.menu .catgrouptitlecolor-blue {
	background-image: linear-gradient(to right, var(--menuentrycolor-blue) 0%, var(--menuentrycolor-blue) 100% );
}

.menu .menuentrycolor-green {
	background-image: linear-gradient(to right, var(--menuentrycolor-green) 0%, var(--menuentrycolor-green) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-green:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-green) 0%, var(--menuentrycolor-green) 100% );
}
.menu .catgrouptitlecolor-green {
	background-image: linear-gradient(to right, var(--menuentrycolor-green) 0%, var(--menuentrycolor-green) 100% );
}

.menu .menuentrycolor-orange {
	background-image: linear-gradient(to right, var(--menuentrycolor-orange) 0%, var(--menuentrycolor-orange) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-orange:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-orange) 0%, var(--menuentrycolor-orange) 100% );
}
.menu .catgrouptitlecolor-orange {
	background-image: linear-gradient(to right, var(--menuentrycolor-orange) 0%, var(--menuentrycolor-orange) 100% );
}

.menu .menuentrycolor-purple {
	background-image: linear-gradient(to right, var(--menuentrycolor-purple) 0%, var(--menuentrycolor-purple) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-purple:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-purple) 0%, var(--menuentrycolor-purple) 100% );
}
.menu .catgrouptitlecolor-purple {
	background-image: linear-gradient(to right, var(--menuentrycolor-purple) 0%, var(--menuentrycolor-purple) 100% );
}

.menu .menuentrycolor-turquoise {
	background-image: linear-gradient(to right, var(--menuentrycolor-turquoise) 0%, var(--menuentrycolor-turquoise) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-turquoise:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-turquoise) 0%, var(--menuentrycolor-turquoise) 100% );
}
.menu .catgrouptitlecolor-turquoise {
	background-image: linear-gradient(to right, var(--menuentrycolor-turquoise) 0%, var(--menuentrycolor-turquoise) 100% );
}

.menu .menuentrycolor-grey {
	background-image: linear-gradient(to right, var(--menuentrycolor-grey) 0%, var(--menuentrycolor-grey) 5px, var(--bgcolor1) 100px, var(--bgcolor1) 100%);
}
.menu .menuentrycolor-grey:hover {
	background-image: linear-gradient(to right, var(--menuentrycolor-grey) 0%, var(--menuentrycolor-grey) 100% );
}
.menu .catgrouptitlecolor-grey {
	background-image: linear-gradient(to right, var(--menuentrycolor-grey) 0%, var(--menuentrycolor-grey) 100% );
}

.menu .menuentrycolor- {
	background-color: var(--bgcolor1);
}
.menu .catgrouptitlecolor- {
	background-color: var(--bgcolor1);
}






.menu .langShopSelector {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 17px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	background-color: var(--bgcolor1);
}

.menu .langShopSelector:hover {
	background-color: var(--hoverbg);
}

.menu .langShopSelectorActive {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 17px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	background-color: var(--highlightcolor);
}

.menu .langShopSelectorActive:hover {
	background-color: var(--hoverbg);
}






.mobile-menu {
	position: fixed;
    top: 0;
    left: 0;
	overflow-y: scroll;
    width: 100%;
    height: 100%;
    background-color: var(--bgcolor2);
    color: var(--fontcolor1);
	font-size: 18px;
	padding: 0px;
}

.mobile-menu a:link, .mobile-menu a:visited {
	text-decoration: none;
	color: var(--fontcolor1);
}

.mobile-menu a:hover {
	background-color: var(--hoverbg);
	color: var(--hoverfontcolor);
}

.mobile-menu a:active {
	background-color: var(--hoverbg);
	color: var(--hoverfontcolor);
}

.mobile-menu h1 {
	color: var(--fontcolor1);
  font-family: var(--fontmain), var(--fontmain);
	font-size: 20px;
}

.mobile-menu .catgrouptitle {
	width: 100%;
	height: auto;
	margin-top: 13px;
	margin-bottom: 7px;
	padding-left: 7px;
	padding-right: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 20px;
	font-weight: bold;
	background-color: var(--bgcolor1);
}
.mobile-menu .menuentry {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 17px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 18px;
	background-color: var(--bgcolor1);
}

.mobile-menu .menusubentry {
	width: 100% ;
	height: 17px ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 23px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 18px;
	background-color: var(--bgcolor1);
}

.mobile-menu .menuentry:hover {
	background-color: var(--hoverbg);
}


.mobile-menu .langShopSelector {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 17px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 18px;
	background-color: var(--bgcolor1);
}

.mobile-menu .langShopSelectorActive {
	width: 100% ;
	height: auto ;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 17px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 18px;
	background-color: var(--highlightcolor);
}



.content-container {
    margin-left: 230px;
    padding: 20px;
}

.content-container .head {
	padding-bottom: 20px;
}

.content-container a {
	color: var(--fontcolor1);
}

.content-container tr {
	height: 30px;
	background-color: var(--bgcolortr);
}

.content-container tr:nth-child(even) {
	background-color: var(--bgcolornthchild);
}

.content-container tr:hover {
	background-color: var(--hoverbg);
	color: var(--hoverfontcolor);
}

.content-container .highlightyes {
	background-color: var(--highlightcolor);
	font-family: var(--fontmain), var(--fontmain);
}

.content-container tr.highlightyes {
	background-color: var(--highlightcolor);
	font-family: var(--fontmain), var(--fontmain);
}
.content-container tr.highlightyes:hover {
	background-color: var(--hoverbg);
	color: var(--hoverfontcolor);
	font-family: var(--fontmain), var(--fontmain);
}

.content-container .lc1 {
	text-decoration-line: line-through;
	color: var(--lc1fontcolor);
}

.content-container .lc4 {
	text-decoration-line: line-through;
	color: var(--lc4fontcolor);
}

.content-container .checkstock {
	width:30px;
}

.content-container .eNo {
	width:140px;
	font-family: var(--fontmainmono), var(--fontmainmono);
}

.content-container .eNo-copy {
	cursor: pointer;
}

.content-container .eNo-copy:hover {
    color: var(--fontcolor2);
}

.table-container {
	position: relative;
	padding-top: 20px;
}

.table-container h2 {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: var(--bgcolor2);
	padding: 13px;
	z-index: 1;
}

.prodname a:hover {
	color: var(--fontcolor2);
}



.alert-box {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--alertboxbg);
    padding: 10px;
    border: 0px solid var(--alertboxborder);
    border-radius: 0;
    z-index: 9999;
    color: var(--alertboxfont);
    display: none; /* initially hide the alert */
}





/* MEDIA QUERY - for Mobile */
@media only screen and (max-width : 640px) {

.menu {
	display: none;
	visibility: hidden;
}


.content-container {
	margin-left: 0px;
	padding: 20px;
	z-index: 2;
}

.table-container {
	position: relative;
	padding-top: 20px;
	z-index: 3;
}

.table-container h2 {
	position: -webkit-sticky;
	position: sticky;
	background-color: var(--bgcolor2);
	padding: 13px;
	z-index: 4;
}

.mobile-menu-button {
	width: 70px;
	height: 30px;
	margin: auto;
	position: fixed;
	bottom: 10px;
	right: 70px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	background-color: var(--buttonbg);
	color: var(--fontcolor1);
	z-index: 20;
}

.mobile-menu-button a {
	text-decoration: none;
	color: var(--fontcolor1);
}


}