@CHARSET "utf-8";

/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}


/* BEGIN: Fonts Settings */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	src: url('../fonts/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	src: url('../fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
/* END: Fonts Settings */


/* Fix */
.fix {clear:both;width:100%;}
.fix:after {content: ".";display:block;height: 0;clear: both;visibility: hidden;}
.clear {clear:both;}

/* Common & HTML */
body {font-family: "Inter", "Noto Sans", sans-serif;}


/* BEGIN: Menu List Function */
th {background:#cbd0cc;font-size:12px;}
th a {color:#3366cc;font-size:12px;}
tr.odd {background:#c1ced9;font-size:12px;}
tr.odd:hover {background:#a2b6c7;font-size:12px;}
tr.even {background:#d2dde4;font-size:12px;}
tr.even:hover {background:#a2b6c7;font-size:12px;}
/* END: Menu List Function */

a {text-decoration:none;}
a:hover {text-decoration:underline}
.menuList a {font-weight:500;}

input, select, textarea {font-family: "Inter", "Noto Sans", sans-serif;}
select, input[type=button], input[type=submit] ,button {cursor:pointer;}

input[type=button] {color:#fff; background-color:#2a6389; border: 2px solid; border-color: #767d9a; height:24px;}
input[type=submit] {color:#fff; background-color:#2a6389; border: 2px solid; border-color: #767d9a; height:24px;}
input[readonly] {background: #DDDDDD; color: #000000}

textarea[readonly] {background: #DDDDDD; color: #000000}

.loginInput {height:23px; background:#236895; color:#fff; width:160px;}

h1 {color: #069;}
h2 {color: #069; background:url('../images/h2bgNHQ.png') no-repeat left bottom;}
h3 {color: #069;}
h4 {color: #333;}

form {
	padding:0px; margin-top:0px;
	background:#f4f5f4;
	margin-bottom:5px;
	font-size:16px;
}
form.loginForm{
	background:#fff;
}
form.logout {
	width:1020px; padding:0px; margin-top:0px; background:white; margin-bottom:0px; font-size:12px;
}
form.subform {
	width:800px; padding:0px; margin-top:0px; background:#f4f5f4; margin-bottom:5px; font-size:14px;
}

.LoadingPic{
	background:url('../images/load.gif') no-repeat center;
	position: fixed; 
	top: 200px;
	margin-left: auto;
	margin-right: auto;
}

/* Layout */
.positionCenter {margin:0 50px; background-color:#fff;}
.banner {height:100px;}
.contents {min-height:100px; padding:0 5px;}
.leftcontent {float:left; background:#fff url('../images/leftcontentbg.jpg') repeat-y; min-height:300px; width:150px;}
.rightcontent {margin-left:160px;}
.footer {height:20px;}
.messageborder {border:2px solid #FF9E9E; width:100%; font-size:16px; background-color:#FFBDBD;}

.msg_error_block {border:2px solid #FF9E9E; width:100%; font-size:16px; background-color:#FFBDBD;}
.msg_success_block {border:2px solid #b1e6aa; width:100%; font-size:16px; background-color:#cdf1cd;}

.conditionborder {border:2px solid #ccc; width:100%; font-size:12px;}
.notetext {color:#069; font-size:11px; padding:3px 0 5px 10px;}

.font5 {font-size:12px}
.font7 {font-size:14px;color:white;background-color:#999999;CURSOR: pointer; border: 1px solid #333333;}
.font9 {font-size:14px;color:white;background-color:black;}
.font10 {font-size:14px;color:white;background-color:red;}

/* Logo (ZyXEL) */
.logo_zyxel {float:left; margin-left:3px;}

/* Menu */
.topmenu {float:left;}
.mainmenu {float:left; margin:50px 0 0px 10px; list-style:none;}
.mainmenu li {float:left; font-size:14px; }
.mainmenu li a {color:#333; margin:0 11px;}
.mainmenu li a:hover {color:#666;}
.mainmenu li span {font-size:13px;}

/* Logo (e-shop) */
.logo_eshop {float:right; margin-top:10px; font-size:36px; font-weight:bolder; font-style:italic; color:#00579e;}
.logo_eshop a {color:#00579e;}
.logo_eshop a:hover {text-decoration:none;}

/* Login (Flash) */
.loginflash {float:left; margin-left: 87px;}

/* Login (Table) */
.mainLogin {float:left; height:445px; width:240px; background:#fff url('../images/login_formbg.jpg') no-repeat;}
.mainLogin a {color:#333;}
.mainLogin a:hover {color:#666;}
.loginTable {margin: 250px 0 0 -60px; font-size:12px;}
.loginTableRow td{line-height:28px;}
.loginbutton {text-align:center; cursor:pointer;}
.forgetpwd {padding-left:64px;}
.login {height:445px; margin-bottom:10px; width:800px; position:relative; background:url('../swf/flash_1.jpg') no-repeat center; background-size: cover;}

/* Login (Table) Flash */
.flashmainLogin {position:absolute; right:0px; height:100%; width:250px; background-color:rgba(255, 255, 255, 0.6); background-image:none; }
.flashmainLogin a {color:#333;}
.flashmainLogin a:hover {color:#666;}

/* Login Information (Left Content) */
.logininfo {padding:10px; font-size:12px;}

/* Order Information (Right Content) */
.condition {padding:10px; margin-top:40px; background:#f4f5f4; margin-bottom:5px; font-size:12px;}
.condition table tr td {line-height:28px; padding:0 7px; vertical-align:middle;}

.datagrid {padding:10px; background:#f4f5f4; font-size:12px;}
.displayTagGrid {
	width:95%;
	padding:10px;
	margin-top:30px;
	margin-bottom:5px;
	font-size:14px;
}
.displayTagGrid tr {padding-left:3px; padding-right:3px; line-height:20px;}
.displayTagGrid td {padding-left:3px; padding-right:3px; line-height:20px;}
.displayTagContent{overflow: auto; height:350px;;}

.tablehead {background:#cbd0cc;}
.odd {background:#c1ced9;}
.even {background:#d2dde4;}

.pagebanner {height:20px; font-size:14px;margin-left:25%}
.pagebanner a {color:#3366cc;}
.pagelinks {height:20px; font-size:14px;}
.pagelinks a {color:#3366cc;}

.addtocart {background:#f4f5f4; height:50px; text-align:right;}

.skillfunc {background:#f4f5f4;padding-left:10px;}

/* Checkout Step */
.checkoutresult {background:#f4f5f4; margin-left:5px; font-size:30px; height:300px; width:900px; display:table-cell; vertical-align:middle; text-align:center; line-height:30px;}
.orderstep {font-size:14px; width:100%; background:#CCC; margin-bottom:5px; margin-top:5px;color:#666;}
.ordersteptitle {color:red; font-weight:bold;}
.orderstepitemfirst{margin-left:40px;}
.orderstepitemselect {background:#999; color:#000; font-weight:bold;}
.blueBackground{background:#aabce0; color:#000;}
.lightBlueBackground{background:#d4e0f7; color:#000;}

/* About Us */
.overviewtext {padding-left:5px; font-size:12px; color:#333;}

/* Forget Password */
.forgetpassword {background:#f4f5f4; margin-left:5px; font-size:13px; height:400px; width:900px; display:table-cell; vertical-align:middle; text-align:center; line-height:30px;}
.forgetpassword span {font-weight:bold;}
.forgetpassword img {position: relative; top:5px;}

/* Sitemap */
.sitemap {padding:0 10px;}
.sitemaptext {font-size:28px; color:#00579e;}
.sitemaplist {float:left; width:100%; margin-bottom:20px;}
.sitemaptitle {font-size:16px; font-weight:bold; border-bottom:1px solid #b2b2b2; line-height:30px;}
.sitemapitem {background:#fff url('../images/square.jpg') no-repeat; width:200px; padding-left:15px; font-size:12px; float:left; margin-left:20px; line-height:25px;}

/* Help Page */
.helpLeftContent{float:left; background:#d2dde4; height:500px; width:26%; margin-right:1px;}
.helpLeftContent a{color:#3366cc;}
.helpList{width:100%; margin:10px;}
.helpListItem{padding-left:15px; line-height:20px;}
.helpRightContentDiv{width:73%; float:right;}
.helpRightContentDiv img{width: 100%;}
.helpRightcontent{height:500px; }

/* Footer */
.footerline {height:16px;}
.footertext {height:10px; text-align:right; padding-right:4px; color:#829c9e; font-size:14px;}
.footer-privacy-police {float:right;font-size:14px;}
.footer-privacy-police a {color:#000;padding-right:4px;}
.footer-privacy-policy {float:right;font-size:14px;}
.footer-privacy-policy a {color:#000;padding-right:4px;}

.page-title-notes {color:#f00;font-size: 14px;}
.align-center {text-align:center;}
.align-right {text-align:right;}
.align-left {text-align:left;}
.hidden {display:none;}
.display-grid {width:100%;}
.width100p {width:100%;}
.color-red {color:red}

label.xrequired:after {content: ' *';color: red;}