@font-face {
	font-family: 'Montserrat';
	src: url("/eBooking/javax.faces.resource/fonts/Montserrat-Regular.ttf.xhtml");
}
body {
	/*font-family: "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;*/
	font-family: "Segoe UI","Helvetica Neue","Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS,Helvetica Arial,sans-serif;
	background-color: #f0f0f0;
	/*background-color:#FFFFFF;*/
	/*background: linear-gradient(#f0f0f0, #ffffff);*/
    font-size: 15px;
}

img {
	border-style: none;
}

.normal {
	font-size: 1.1em;
}

.label {
	font-family: "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;
	font-weight: normal;
}

.required {
	color: red;
}

/* Hide "x" in message / error message box */
.close {
	display: none;	
}

.ui-widget {
	font-family: "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;
    font-size: 1em
}
input[type="text"]:disabled {
    opacity: .50;
}
.btn-group > .btn, .btn-group-vertical > .btn {
	float: none;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
	border-radius: 4px;
}

/* ==============================================
 Override common.css btn-default 
===============================================*/
.btn-default {color: #fff;background-color: #3e2626;border-color: #000;}
.btn-default:focus,.btn-default.focus {color: #fff;background-color: #633a3a;border-color: #3c2525;}
.btn-default:hover {color: #fff;background-color: #633a3a;border-color: #000;}
.btn-default:active,.btn-default.active,.open > .dropdown-toggle.btn-default {color: #fff;background-color: #815050;background-image: none;border-color: #adadad;}
.btn-default:active:hover,.btn-default.active:hover,.open > .dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open > .dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open > .dropdown-toggle.btn-default.focus {color: #fff;background-color: #633a3a;border-color: #000;}
.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus {background-color: #333;border-color: #fff;}
.btn-default .badge {color: #333;background-color: #fff;}

.btn-link { padding: 0; text-decoration-line: underline !important; text-shadow: none; font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Helvetica Arial, sans-serif; box-shadow: none !important;  }
.btn-link { display: inline; line-height: inherit; }

.btn-layout { background-color: rgb(62, 38, 38); background-image: none; border-bottom-color: rgb(0, 0, 0); box-shadow: none; color: rgb(255, 255, 255); font-size: 14px; line-height: 20px; margin-bottom: 0px; margin-left: -1px; margin-right: 0px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; padding-top: 6px; text-transform: none; text-wrap-mode: nowrap; touch-action: manipulation; user-select: none; vertical-align: middle; white-space-collapse: collapse; }
.ui-button-text-only .ui-button-text { padding: 0; }
.ui-button .ui-button-text { display: inline; line-height: inherit; }
 
.ui-widget .btn-small {
    color: #fff;
    background-color: #666;
    border-color: #000;
	font-size: 0.8em;
	padding: 0.5em;
	font-family: "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;
}
.btn-small:hover {
    background-color: #404040;
}
.btn-small:hover, .btn-small:focus, .btn-small:active, .btn-small.active {
    color: #fff;
    background-color: #525252;
    border-color: #000;
}
.btn-warning {
	font-size:1.1em;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn:hover,.btn:focus,.btn.focus {
    color: #FFF;
    text-decoration: none;
}

.btn:active,.btn.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.disabled,.btn[disabled],fieldset[disabled] .btn {
    cursor: not-allowed !important;
    filter: alpha(opacity=65);
    opacity: .65;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* ==============================================
 Page Header Title Bar 
===============================================*/
.large {
	/*font-family: "Montserrat", "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;*/
	font-family: "Montserrat","Segoe UI","Helvetica Neue","Poppins","Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS,Helvetica Arial,sans-serif;
	font-size: 1.8em;
}

.header-button {
	font-family:"Poppins", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif;
	color: #0a793e;
	font-weight: bold;
}

.header-home {
	color: #0a793e;
}

.header-bar {
	width:102%;
	border:none;
	border-radius:0;
	padding:0px;
}
.header-bar > .panel-collapse > .panel-body {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.header-icon {
	height: 3em;
	/*margin-bottom: 0.2em;*/
	margin-right: 0.8em;
}
a.header-link:hover {
	text-decoration: none;
}
a.header-title {
	color: #000;
}
a.header-title:hover {
	text-decoration: none;
}
/* ==============================================
 Page Footer 
===============================================*/
/* Brand HK icon */
.footer-icon {
	margin-top: 0.5em;
	margin-right: -0.4em;
	float: right;
}

/* Brand HK icon */
.wcag-icon {
	width: 100px;
	margin-left: -0.4em;
}

.footer-text {
	font-size: 14px;
}
/* TO-DO: check and rewrite css, remove confusing style, remove !important if possible */
/* ==============================================
 Left Menu Bar Items
 Also check common.js for css for menu collapse

 menu-item (simple menu item)
 
 Highlight menu on current page
 - Add "active" class
===============================================*/
.nav {
	font-family: "Montserrat","Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;
}
li.menu-item a {
	color: #000;
	font-size: 14px;
}
.menu-item:first-child {
	border-top: none;
	background-color: #bcdcbc;
}
.menu-item:not(:first-child) {
	border-top: 1px solid #fff !important;
	background-color: #bcdcbc;
}
.menu-item a:focus, .menu-item a:hover {
	/*background-color: #f1c40f !important;*/
	background-color: #0a793e !important;
	color: #fff;
}

/* ------------------------------------------------ 
   active (highlight item on current page) for 
   menu-item (simple menu item)
   --------------------------------------------- */
li.active > a,
ul[id^="menu-item"] > li.active > a {
	/*background-color: #aed3cd !important;  #aec7d3*/
	background-color: #0a793e !important;
	color: #fff !important;
}
li.active a::before,
ul[id^="menu-item"] > li.active > a::before  {
	content: '\00BB\00a0\00a0\00a0';
}
/* End of active (highlight item on current page)
   --------------------------------------------- */

/* Left Bar Menu - outline of whole left menu bar */
.leftbar-top > div > div {
	padding:0;
	background-color: #f0f0f0;
}
/* Fix Online Help not shown in mobile version. Do not use .menubar-resize-collapse++ */
.menubar-resize-collapse > div > div {
	padding: 0;
}
.menubar-mainmenu {
	margin-bottom: -20px !important; /* Added as panel-group has 20px margin-bottom */	
}
.menubar-mainmenu > div > div {
	padding: 0;
}
/* Fix Online Help not shown in mobile version. Do not use .menubar-resize-collapse-- */
.menubar-resize-collapse > div {
	background-color: #bcdcbc !important;
}
.menubar-resize-collapse > div > a {
	font-family: 'Montserrat','Segoe UI','Helvetica Neue','Helvetica Arial',sans-serif;
	font-size:16px;
	font-weight: bold;
	color: #000;
}
/* Override existing style in bsf.css*/
.menubar-resize-collapse > div > a:after,
.menubar-resize-collapse > div > a.collapsed:after {
 	content: '';
}

/* e-Booking - Make Appointment Stpes */
.leftbar-menu-panel {
	padding: 0;
}

/*i.e. panel-body*/
.leftbar-menu-panel > div > div {
	padding: 0;
}

.leftbar-menu-panel > div > div ul {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0;
}

.leftbar-menu-panel > div > div > ul > li {
	padding: 10px 20px;	
}

.leftbar-menu-panel > div > div > ul > li.active {
	background: #0a793e;
	color: #ffffff;
}

/* ==============================================
 End of Left Menu Bar Items
===============================================*/


.panel-body /*.main-menu*/ {
	padding-left: 15px;
}

.blue {
	color: #003d99;
}

.red {
	color: red !important;
}

.bold {
	font-weight: bold;
}

.center {
	text-align: center;
}

.full_width {
	width: 100%;
}

/* Used in Make Appointment - Select Office */
.header_green > label {
	color: #0a793e;
	font-weight: bold; 
	font-size: 1.1em;
}

/* Page Title, e.g. Submit New Service Orders */
.header {
	/*font-family: "Montserrat", "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;*/
	font-family: "Montserrat","Segoe UI","Helvetica Neue","Poppins","Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS,Helvetica Arial,sans-serif;
	font-size: 1.6em;
	font-style: normal;
	color: black;
}
.subheader {
	/*font-family: "Montserrat", "Segoe UI","Helvetica Neue",Helvetica Arial,sans-serif;*/
	font-family: "Montserrat","Segoe UI","Helvetica Neue","Poppins","Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS,Helvetica Arial,sans-serif;
	font-size: 1.5em;
	font-style: normal;
	color: black;
}
.subsection {
	font-size: 1.15em;
	font-style: normal;
	color: #333333;
	font-weight: bold;
}
.subsectionheader {
	font-size: 1.15em;
	font-style: normal;
	color: #333333;
}
.remark {
	font-size: 1em;
	color: red;
}
.note {
	font-weight: bold;
	color: #555555;
}
.field_height {
	height: 40px;
}
/* Long text labels with two lines */
.field_height_double {
	height: 40px;
}
.field_height_double > .ui-panel-content {
	padding-top: 0;
	margin-top: -0.3em;
}

.field_margin_left {
	margin-left: 15px;
}

.no-pad {
	padding: 0 !important;
}

.no-margin {
	margin: 0 !important;
}
@media only screen and (max-width: 575px) {
	.form_margin {
		margin: 0px 10px;
	}
}

@media only screen and (min-width: 576px) {
	.form_margin {
		margin: 20px 60px;
	}
}

.dropdown-header {
	font-size: 14px !important;
}

.panel-body .divider {
	background-color: #E5E5E5;
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
}
.panel-body .dropdown-header { 
	padding: 3px 15px; 
}

.nav > li.divider-vertical {
    height: 30px;
    margin: 0 2px;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #ffffff;
}

.navbar-nav {
	margin-top: 9px !important;
}

/* ===============================================
  Fix Text field overlay issue in Captcha Page
 =============================================== */
@media only screen and (max-width: 1138px) {
	.captcha_text {
		margin-left:3em;
  	}
}
@media only screen and (min-width : 1139px) {
	.captcha_text {
		margin-left:0em;
  	}
}

/* ===============================================
  Data Tables
  ------------
  Reference function
  - Update Login ID Profile
 =============================================== */

/*.ui-datatable-reflow thead th {
    display: inline;
}*/

/*.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
  display: block;
}*/

/* Table header */
.ui-datatable-tablewrapper > table > thead > tr > th {
	background: #000;
	color: #FFF;
	border: 1px solid #cccccc;
	border-radius: 0px
}
/* Table header [Override theme.css] */
.ui-datatable-tablewrapper .ui-state-default {
    text-shadow: none;
}
/* Arrow for sorting column [Override theme.css] */
/*.ui-datatable-tablewrapper .ui-state-default .ui-icon {
    background-image: url("/eAlert/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-bootstrap");
}*/
.ui-datatable-tablewrapper .ui-datatable-odd {
	border: 1px solid #cccccc;
	border-top: 0;
	background-color: #f2f2f2;
	padding-top: 0.2em
}
.ui-datatable-tablewrapper .ui-datatable-even {
	border: 1px solid #cccccc;
	border-top: 0;
	background-color: #ffffff;
}
.ui-datatable tbody td {
	padding: 8px 10px;
}
.ui-datatable-tablewrapper .ui-datatable-empty-message {
	border: 1px solid #cccccc;
}
.ui-datatable .ui-datatable-footer {
	text-align: left;
	font-weight: normal;
	background: transparent;
	padding-left: 0px;
}


/* Service is closing warning */
.close_warning_modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.service_close_warning {
	position: fixed;
	z-index: 999999;
	min-height: 8em;
	width: 30em;
	overflow: show;
	margin: auto;
	top: 25%;
	left: 30%;
	padding: 2em;
	background-color: #d9edf7;
	color: #31708f;
	border: 1px solid #bce8f1;
	border-radius: 4px;
	font-size:16px;
}

/* Page reload warning in Cert Login Page */
.reload_warning_modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.page_reload_warning {
	position: fixed;
	z-index: 999999;
	min-height: 9em;
	width: 30em;
	overflow: show;
	margin: auto;
	top: 25%;
	left: 30%;
	padding: 2em;
	background-color: #d9edf7;
	color: #31708f;
	border: 1px solid #bce8f1;
	border-radius: 4px;
	font-size:16px;
}

/* ====================================================
 Override existing style sheets
======================================================*/
/* Override style in theme.css (border in label) */
.ui-widget-content {
    border: none;  
    background: none;
}

/* Overriding style in bsf.css (Info / Error message box) */
.bf-message {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
/* Overriding style in bsf.css (Datapicker) */
.ui-datepicker {
	background-color: white;
}

/* Override bootstrap printing of a href content */
@media print {
  a[href]:after {
    content: none !important;
  }
}
/* Override core.css - x icon size */
.alert > .bficon {
	font-size: 15px;
    padding-right: 1px;
    vertical-align: middle;
}
/* Style for Guidance Notes and Declaration Page */
.guide {
	padding-left: 1.1em;
}
.guide > li {
	padding-left: 1em;
}
.guidepage {
	padding-left: 1em;
}
.guidepage > li {
	padding-left: 1em;
	padding-bottom: 0.5em;
}

/*.subguide {
	padding-left:2em;	
}
ol.subguide > li:before {
  content: attr(seq) ". ";
}*/