@charset "utf-8";

body#govhkForm :lang(en) div {
	font-family: Arial, "sans-serif", Microsoft JhengHei, \\5FAE\8EDF\6B63\9ED1\9AD4, MingLiu_HKSCS, MingLiu_HKSCS-ExtB;
	-webkit-text-size-adjust: 100%
}

body#govhkForm :lang(zh-hk) div {
	font-family: Microsoft JhengHei, \\5FAE\8EDF\6B63\9ED1\9AD4, Arial, "sans-serif", MingLiu_HKSCS, MingLiu_HKSCS-ExtB;
	-webkit-text-size-adjust: 100%
}

body#govhkForm {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.42857;
	color: #333;
	background-color: #fff;
	margin: 0;
}

#govhkForm header .topnav {

  overflow: hidden;

}

#govhkForm header .topnav a {

  float: left;

  display: block;

  text-align: center;

  text-decoration: none;

  font-size: 16px;

}

#govhkForm header .topnav a:hover {

}

#govhkForm header .topnav a.active {

}

#govhkForm header .topnav .icon {

  display: none;

}

@media screen and (max-width: 1200px) {

  #govhkForm header .topnav a:not(:first-child) {display: none;}

  #govhkForm header .topnav a.icon {

	width: 58px;
	height: 58px;
    float: right;
	margin-right: -15px;
    display: block;

  }
  
  .menu {display: none;}

}

@media screen and (max-width: 1200px) {

  #govhkForm header .topnav.responsive {position: relative;}

  #govhkForm header .topnav.responsive .icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  #govhkForm header .topnav.responsive a {

    float: none;

    display: block;

    text-align: left;

  }
}

#govhkForm #navToggle .navToggleInner {
	display: block;
	width: 70%;
	height: 40%;
	top: 30%;
	left: 30%;
	padding: 35% 0 0 30%
}

@media screen and (max-width:767px) {
	#govhkForm #navToggle .navToggleInner {
		top: 26%
	}
}

@media screen and (max-width:380px) {
	#govhkForm #navToggle .navToggleInner {
		top: 10px;
		width: 50%;
		left: 25%
	}
}

#govhkForm #navToggle .navToggleInner:before {
	top: 0
}

#govhkForm #navToggle .navToggleInner:after {
	bottom: 0
}

#govhkForm #navToggle .navToggleInner span {
	margin: 4px auto
}

#govhkForm #navToggle .navToggleInner:after,
#govhkForm #navToggle .navToggleInner:before,
#govhkForm #navToggle .navToggleInner span {
	content: "";
	display: block;
	height: 4px;
	width: 100%;
	background: #cc4c02;
	transition: all .3s ease-in-out
}

@media screen and (max-width:380px) {

	#govhkForm #navToggle .navToggleInner:after,
	#govhkForm #navToggle .navToggleInner:before,
	#govhkForm #navToggle .navToggleInner span {
		height: 3px
	}
}

@media screen and (max-width:380px) {
	#govhkForm #navToggle .navToggleInner span {
		margin: 4px auto
	}

	#govhkForm #navToggle.active .navToggleInner span {
		margin: 5px auto
	}
}

#govhkForm #navToggle .navToggleInner:after,
#govhkForm #navToggle .navToggleInner:before,
#govhkForm #navToggle .navToggleInner span {
	/*background: #616161*/
}

#govhkForm .access {
	top: -5000px;
	left: 0;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden
}

h1 {
	color: #2f2f2f;
	padding: 0;
	font-size: 2.5em
}

@media screen and (max-width:1200px) {

	h1 {
		font-size: 2.2em
	}
}

@media screen and (max-width:767px) {

	h1 {
		font-size: 1.8em
	}
}

#mainHolder {
	overflow: hidden;
	background: #e9e9e9
}

#govhkForm .contentWrapper {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 90%;
	clear: both
}

@media screen and (max-width:1200px) {
	#govhkForm .contentWrapper {
		width: 94%
	}
}

@media screen and (max-width:767px) {
	#govhkForm .contentWrapper {
		width: 90%
	}
}

#govhkForm .form-section {
	width: 100%;
	border-bottom: 3px solid #cc4c02;
	background-color: #fff;
	padding: 20px 40px 20px 20px;
	margin-bottom: 17px
}


#govhkForm .form-section.infoBlock {
	display: none;
	width: 100%;
	margin-bottom: 15px;
	background: #ffeedc;
	border-bottom: 0
}

#govhkForm .form-section.infoBlock.responsive {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	background: #ffeedc;
	border-bottom: 0
}

#govhkForm .form-section.blockHead {
	display: none;
	color: #fff;
	background: #707070;
	padding: 0 25px;
	height: 60px;
	position: relative;
	cursor: default;
	border-bottom: 0
}

@media screen and (max-width: 1200px) {

	#govhkForm .form-section.blockHead {
  
  		display: block;
  	
	}
	
}

#govhkForm .form-section.blockHead h2 {
	font-size: 1.2em;
	display: inline-block;
	height: 100%;
}

#govhkForm .form-section.deptLogoSection {
	border-bottom: 0
}

#govhkForm .form-section h3 {
	font-size: 1.3em;
	font-weight: 700;
	font-size: 19.5px;
	color: #cc4c02;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 15px;
}

#govhkForm .form-section h3>div {
	font-weight: 700
}

#govhkForm #deptLogo div {
	color: #181716
}

#govhkForm #deptLogo h3 {
	padding-bottom: 0;
	color: #181716
}

#govhkForm h4 {
	font-size: 19px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#govhkForm :lang(en) h4 {
	font-family: Montserrat, Arial, "sans-serif", Microsoft JhengHei, \\5FAE\8EDF\6B63\9ED1\9AD4, MingLiu_HKSCS, MingLiu_HKSCS-ExtB;
}

#govhkForm :lang(zh-hk) h4 {
	font-family: Microsoft JhengHei, \\5FAE\8EDF\6B63\9ED1\9AD4, Montserrat, Arial, "sans-serif", MingLiu_HKSCS, MingLiu_HKSCS-ExtB;
	font-weight: 700
}

#govhkForm .control-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: .9375em;
}

#govhkForm .field.layout-sentense {
	display: inline-block;
	margin: 0
}

#govhkForm .form-control {
    font-size: 1em;
    box-shadow: none;
    background-color: #f6f6f6;
    max-width: 100%;
    width: 100%;
    height: 35px;
    padding: 6px 12px;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

#govhkForm .form-control:focus {
	outline:none;
    border-color: #3c763d;
}

#govhkForm textarea.form-control {
	height: auto
}

#govhkForm .control-event {
	border: 1px solid;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 3px;
    border-color: #ccc;
}

/*/////////////////////////*/
#govhkForm label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700
}

#govhkForm .checkbox>label {
    padding-left: 25px;
}

#govhkForm .checkbox input[type=checkbox]{
	opacity: 0;
    z-index: 1;
    cursor: pointer;
    position: absolute;
}

#govhkForm .checkbox>label>input+i:before {
  margin-left: -25px;
  margin-top: 4px;
  border: 1px solid #ccc;
  height: 17px;
  width: 17px;
  content: "";
  position: absolute;
}

#govhkForm .checkbox>label>input:checked+i:after {
  margin-left: -25px;
  margin-top: 4px;
  border: 1px solid #0c818f;
  font-family: fontello-reform;
  font-style: normal;
  font-weight: 400;
  content: "✓";
  color: #0c818f;
  height: 17px;
  width: 17px;
  position: absolute;
}

#govhkForm .composite-field.required>.control-label:after,#govhkForm .field.required .control-label:after,#govhkForm .required-label:after {
    content: " *";
    color: #9f3a38;
    position: relative;
    top: -2px
}


/*/////////////////////////*/

input[type="radio"] {
  background-color: #fff;
  margin: 0 5px 0 0;
  font: inherit;
  color: currentColor;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid #ccc;
  transform: translateY(-0.075em);
  cursor: pointer;
}
/*/////////////////////////*/

#govhkForm .mandatoryNote {
    font-size: .96em;
    padding: 0 0 10px;
    margin-bottom: 10px;
    text-align: right;
}

#govhkForm .btns {
  width: 100%;
  text-align: right;
}

#govhkForm .btn {
  font-size: 18px;
  padding: 8px 20px
}

#govhkForm .btn-default {
  color: #353535;
  text-decoration: none;
  background-color: #ffeedc;
  border-color: #ccc
}

#govhkForm .btn-default.active,
#govhkForm .btn-default:active,
#govhkForm .btn-default:focus,
#govhkForm .btn-default:hover,
#govhkForm .open>.btn-default.dropdown-toggle {
  color: #353535;
  background-color: #ffd5a9;
  border-color: #adadad;
  text-decoration: none;
  cursor: pointer
}

#govhkForm .btn-primary {
  color: #fff;
  text-decoration: none;
  background-color: #cc4c02;
  border-color: #b34302
}

#govhkForm .btn-primary.active,
#govhkForm .btn-primary:active,
#govhkForm .btn-primary:focus,
#govhkForm .btn-primary:hover,
#govhkForm .open>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #993902;
  border-color: #762c01;
  text-decoration: none;
  cursor: pointer
}

#govhkForm a,
#govhkForm a>span,
#govhkForm a div {
	font-family: Montserrat, Arial, "sans-serif";
	color: #353535;
	text-decoration: none;
	cursor: pointer
}

#govhkForm .bottomBar {
	margin: 25px auto
}

@media screen and (max-width:1200px) {
	#govhkForm .bottomBar {
		margin-bottom: 0
	}
}

#govhkForm .lastRevision {
	text-align: right;
	margin-right: 1px;
	padding: 0
}

* {

  box-sizing: border-box;

}

.row::after {

  content: "";

  clear: both;

  display: table;

}

[class*="col-"] {

  float: left;

  padding: 0 8px 8px 0;

}

html {

  font-family: "Lucida Sans", sans-serif;

}

.header {

}

.menu ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

.menu li {

  background: #ffeedc;
  display: block;
  width: 100%;
  padding: 20px 25px;
  vertical-align: middle;
  border-bottom: 1px solid #fff;
  position: relative

}

li.active {

  background: #fff;
  display: block;
  width: 100%;
  padding: 20px 25px;
  vertical-align: middle;
  border-bottom: 1px solid #fff;
  position: relative

}

li.active:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 10px;
  right: auto;
  top: 0;
  left: 0;
  background: #cc4c02;
  margin: 0;
  opacity: 1
}

.menu li:hover {

  <!-- background-color: #0099cc; -->

}

ul.stepBlocks {
	margin-bottom: 17px
}

li.infoBlock {
	background: #f5f5f5;
	margin-bottom: 17px
}

.aside {

  background-color: #33b5e5;

  padding: 15px;

  color: #ffffff;

  text-align: center;

  font-size: 14px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

#govhkForm footer {
	position: relative;
	padding: 60px 0;
	overflow: hidden;
	bottom: 0
}

@media screen and (max-width:767px) {
	#govhkForm footer {
		padding: 30px 0
	}
}

#govhkForm footer .contentWrapper {
	overflow: visible
}

#govhkForm footer #backToTop {
	font-size: 12px;
	position: absolute;
	right: 0;
	top: -40px
}

@media screen and (max-width:767px) {
	#govhkForm footer #backToTop {
		position: relative;
		margin: 30px auto 0;
		display: inline-block;
		width: 100%;
		text-align: center
	}
}

#govhkForm footer #backToTop:focus,
#govhkForm footer #backToTop:hover {
	color: #cc4c02
}

#govhkForm footer #backToTop:focus:after,
#govhkForm footer #backToTop:hover:after {
	background: hsla(0, 0%, 100%, 0) url(https://www.drugoffice.gov.hk/gb/unigb/www.drugoffice.gov.hk/eps/mobile/en/images/icon_arrow2_up_orange.svg) no-repeat top;
	background-size: 100% auto
}

#govhkForm footer #backToTop:after {
	content: "";
	width: 11px;
	height: 16px;
	background: hsla(0, 0%, 100%, 0) url(https://www.drugoffice.gov.hk/gb/unigb/www.drugoffice.gov.hk/eps/mobile/en/images/icon_arrow2_up_grey.svg) no-repeat top;
	background-size: 100%;
	display: inline-block;
	margin: 0 3px;
	margin-left: 7px;
	vertical-align: bottom
}

/* For mobile phones: */

[class*="col-"] {

  width: 100%;

}

@media only screen and (min-width: 767px) {

  /* For tablets: */

  .col-s-1 {width: 8.33%;}

  .col-s-2 {width: 16.66%;}

  .col-s-3 {width: 25%;}

  .col-s-4 {width: 33.33%;}

  .col-s-5 {width: 41.66%;}

  .col-s-6 {width: 50%;}

  .col-s-7 {width: 58.33%;}

  .col-s-8 {width: 66.66%;}

  .col-s-9 {width: 75%;}

  .col-s-10 {width: 83.33%;}

  .col-s-11 {width: 91.66%;}

  .col-s-12 {width: 100%;}

}

@media only screen and (min-width: 1201px) {

  /* For desktop: */

  .col-1 {width: 8.33%;}

  .col-2 {width: 16.66%;}

  .col-3 {width: 25%;}

  .col-4 {width: 33.33%;}

  .col-5 {width: 41.66%;}

  .col-6 {width: 50%;}

  .col-7 {width: 58.33%;}

  .col-8 {width: 66.66%;}

  .col-9 {width: 75%;}

  .col-10 {width: 83.33%;}

  .col-11 {width: 91.66%;}

  .col-12 {width: 100%;}

}