/********** Template CSS **********/
/* *:focus { */
/* 	 outline: auto 5px #666; */
/* } */
:root {
    --primary: #13C5DD;
    --secondary: #354F8E;
    --light: #EFF5F9;
    --dark: #1D2A4D;
}
@font-face {
    font-family: 'NotoSansSC';
    src: url('NotoSansSC-VF.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansTC';
    src: url('NotoSansTC-VF.otf') format('opentype');
}
@font-face {
    font-family: 'NotoSansHK';
    src: url('NotoSansHK-VF.otf') format('opentype');
}

html,
body {
	font-family: Arial, NotoSansTC, NotoSansSC, 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, 細明體_HKSCS-ExtB,
				-apple-system, BlinkMacSystemFont, "Poppins", "Microsoft JhengHei",  
   				 sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}
.btn {
    font-weight: 400;
    transition: .5s;
}

.btn:hover {
    -webkit-box-shadow: 0 8px 6px -6px #555555;
    -moz-box-shadow: 0 8px 6px -6px #555555;
    box-shadow: 0 8px 6px -6px #555555;
}

.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 0;
    border-radius: 50% 50% 0 0;
    z-index: 99;
}

.navbar-brand img {
    width: 100%;
    height: auto;
    display: flex;
}

.navbar-light .navbar-nav .nav-link {
    font-family: 'Jost', sans-serif;
    position: relative;
    margin-left: 30px;
    padding: 30px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #AB5D30;
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 5px;
        bottom: 0;
        left: 50%;
        background: #AB5D30;
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }
}


@media (min-width: 576px) {
    .team-item .row {
        height: 350px;
    }
    
@media (max-width: 768px) {
	.dropdown-menu[data-bs-popper]{
	    top:100%;
	    left:20%;
	    margin-top:.125rem
	}
}
}

/*================== Banner =================== */
/*-- Main slide --*/
#main-slide .item {
    height: 500px;
}

#main-slide .item img {
    width: 100%;
}

#main-slide .item .slider-content {
    z-index: 0;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

#main-slide .item.active .slider-content {
    z-index: 0;
    opacity: 1;
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    transition: opacity 100ms;
}

#main-slide .slider-content {
    top: 30%;
    margin-top: -120px;
    left: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
}

#main-slide .carousel-indicators {
    bottom: 30px;
}

.carousel-indicators li {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #fff !important;
    margin: 1px !important;
}


#main-slide .carousel-control.left,
#main-slide .carousel-control.right {
    opacity: 1;
    filter: alpha(opacity=100);
    background-image: none;
    background-repeat: no-repeat;
    text-shadow: none;
}

#main-slide .carousel-control.left span {
    padding: 15px;
}

#main-slide .carousel-control.right span {
    padding: 15px;
}

#main-slide .carousel-control .fa-angle-left,
#main-slide .carousel-control .fa-angle-right {
    position: absolute;
    top: 40%;
    z-index: 5;
    display: inline-block;
}

#main-slide .carousel-control .fa-angle-left {
    left: 0;
}

#main-slide .carousel-control .fa-angle-right {
    right: 0;
}

#main-slide .carousel-control i {
    background: rgba(0, 0, 0, .7);
    color: #fff;
    line-height: 36px;
    font-size: 32px;
    padding: 15px 20px;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}


#main-slide .slider-content h2 {
    font-size: 50px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: 5px;
    margin-bottom: 55px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
}


#main-slide .slider-content h2.white,
#main-slide .slider-content h3.white {
    color: #fff;
}

#main-slide .slider-content p {
    font-size: 30px;
    font-weight: 300;
    line-height: 35px;
    letter-spacing: 1px;
    margin-bottom: 55px;
    color: #fff;
}

.slider.btn {
    padding: 10px 40px;
    font-size: 20px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    text-transform: uppercase;
    line-height: 28px;
    font-weight: 300;
    border: 0;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

#main-slide .btn-primary:hover {
    background: transparent;
    border: 1px solid #fff;
}

.slider.btn.btn-default {
    margin-left: 4px;
    background: #ECECEC
}

.slider.btn.btn-default:hover {
    background: #000;
    color: #fff;
}

.slider-content-left {
    position: relative;
    margin: 0 0 0 40px;
}

.slider-content-right {
    position: relative;
}

/*-- Animation --*/
.carousel .item.active .animated1 {
    -webkit-animation: lightSpeedIn 1s ease-in 800ms both;
    animation: lightSpeedIn 1s ease-in 800ms both;
}

.carousel .item.active .animated2 {
    -webkit-animation: bounceIn 1s ease-in 800ms both;
    animation: bounceIn 1s ease-in 800ms both;
}

.carousel .item.active .animated3 {
    -webkit-animation: flipInX 2s ease-in-out 800ms both;
    animation: flipInX 2s ease-in-out 800ms both;
}

.bg-primary a:hover>span,
.bg-primary a:hover>h6 {
    color: #AB5D30;
}

a:hover>span,
a:hover>h6 {
    color: #AB5D30;
}

a:hover>.regenerate-text {
	color:#FFF
}

.bg-dark .text-primary {
    color: #FFFFFF !important;
}

.bg-dark .border-secondary {
    border-color: rgba(242, 205, 172, 0.7) !important
}

a.more {
    float: right;
    padding: 2px;
}

a.more:hover {
    font-weight: 900;
}

/*  guideline-section in index page */
#guideline-section .guideline-div {
    text-align: center;
}

#guideline-section img:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@media (min-width : 992px) and (max-width: 1200px) {
    #main-slide .slider-content {
        top: 50%;
        margin-top: -120px;
    }

    #main-slide .slider-content h2 {
        font-size: 30px;
        line-height: 30px;
    }
}



@media (min-width : 768px) and (max-width: 991px) {

    #main-slide .slider-content {
        top: 70%;
        margin-top: -100px
    }

    #main-slide .slider-content h2 {
        font-size: 25px;
        line-height: 105%;
        margin-bottom: 10px !important;
        margin-top: 0;
    }

    #main-slide .slider-content p {
        font-size: 20px;
        margin-top: 0;
        line-height: 25px;
    }

    #main-slide .btn {
        padding: 5px 25px;
        margin-top: 5px;
        font-size: 16px;
    }

    #main-slide .item {
        height: 550px;
    }

}


@media (max-width : 767px) {

    #main-slide .slider-content h1 {
        font-size: 28px;
        line-height: normal;
        margin-bottom: 0;
    }

    #main-slide .slider-content p {
        font-size: 14px;
        margin-top: 5px;
    }

    .slider.btn {
        padding: 0 15px;
        margin-top: 0;
        font-size: 12px;
    }

    #main-slide .carousel-indicators {
        display: none;
    }

    #main-slide .item .slider-content {
        display: none;
    }

    #main-slide .item {
        height: 400px;
    }

}


@media (max-width : 479px) {

    #main-slide .item .slider-content {
        display: none;
    }

    #main-slide .item {
        height: 180px;
    }

}

/** Search Style **/
.basic-search {
    box-shadow: 0px 8px 20px 0px rgb(0 0 0 / 15%);
    border-bottom: 2px solid #DFAA58;
}

.basic-search .input-field {
    width: 100%;
}

form .input-field {
    position: relative;
}

form .basic-search .input-field input {
    padding: 10px 80px 10px 40px;
}

form .basic-search .input-field input {
    height: 100%;
    border: 0;
    background: #fff;
    display: block;
    width: 100%;
    font-size: 16px;
    color: #666;
    border-radius: 3px;
    height: 50px;
    color: #555;
}

form .advance-search {
    background: #fff;
    padding: 20px;
    box-shadow: 0px 8px 20px 0px rgb(0 0 0 / 15%);
}

form .advance-search .input-field {
    width: calc((100% - 40px) / 2);
}

form .advance-search .desc {
    font-size: 14px;
    color: #696969;
    display: block;
    margin-bottom: 26px;
}

form .advance-search .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
}

form .advance-search .input-select {
    height: 40px;
}

form .advance-search .row.second {
    margin-bottom: 46px;
}

form .advance-search .row.second .last {
    margin-bottom: 0;
}

form .advance-search .row.second .last .input-field {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
}

form .advance-search .row.second.last .input-field .result-count {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    width: 110px;
    color: #666;
    font-size: 16px;
    padding: 10px 0;
}

form .advance-search .row.second.last .input-field .result-count span {
    color: #007E9E;
    padding-right: 5px;
}

@media screen and (max-width: 767px) {
    form .basic-search .input-field input {
        padding: 10px 80px 10px 15px;
    }
}

/*** Search Result Table **/
table th,
table td {
    text-align: left;
}

table.layout {
    width: 100%;
    border-collapse: collapse;
}

table.display {
    margin: 1em 0;
}

table.display th,
table.display td {
    border: 1px solid #DFAA58;
    padding: .5em 1em;
}

table.display th {
    background: rgba(242, 205, 172, 0.7)
}

table.display td {
    background: #fff;
}

table.responsive-table {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 30em) {
    table.responsive-table {
        box-shadow: none;
    }

    table.responsive-table thead {
        display: none;
    }

    table.display th,
    table.display td {
        padding: .5em;
    }

    table.responsive-table td:nth-child(1):before {
        font-family: "Font Awesome 6 Free";
        content: '\f1ad';
    }

    table.responsive-table td:nth-child(2):before {
        font-family: "Font Awesome 6 Free";
        content: '\f3c5';
    }

    table.responsive-table td:nth-child(3):before {
        font-family: "Font Awesome 6 Free";
        content: '\f095';
    }

    table.responsive-table td:nth-child(4):before {
        font-family: "Font Awesome 6 Free";
        content: '\f1ac';
    }

    table.responsive-table td:nth-child(1),
    table.responsive-table td:nth-child(2),
    table.responsive-table td:nth-child(3),
    table.responsive-table td:nth-child(4) {
        padding-left: 25%;
    }

    table.responsive-table td:nth-child(1):before,
    table.responsive-table td:nth-child(2):before,
    table.responsive-table td:nth-child(3):before,
    table.responsive-table td:nth-child(4):before {
        position: absolute;
        left: .5em;
        font-weight: bold;
    }

    table.responsive-table tr,
    table.responsive-table td {
        display: block;
    }

    table.responsive-table tr {
        position: relative;
        margin-bottom: 1em;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }

    table.responsive-table td.organisationnumber {
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }

    table.responsive-table td.actions {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}

.quiz {
    padding: 0 30px 20px 30px;
}

.quiz ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quiz-question {
    font-weight: bold;
    display: block;
    padding: 30px 0 10px 0;
    margin: 0;
}

.quiz-answer {
    margin: 0;
    padding: 10px;
    background: #f7f7f7;
    margin-bottom: 5px;
    cursor: pointer;
}

.quiz-answer:hover {
    background: #eee;
}

.quiz-answer:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #333;
    background: #fff;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 10px;
}

.quiz-answer.active:before {
    background-color: #333;
    border-color: #333;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
}


.quiz-answer.correct:before {
    background-color: green;
    border-color: green;
}


.quiz-answer.incorrect:before {
    background-color: #E00000;
    border-color: #E00000;
}


.quiz-answer.active.correct:before {
    outline: 2px solid green;
    outline-offset: 2px;
}



.quiz-result {
    max-width: 960px;
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 20px;
}

.quiz-result.good {
    background: green;
}

.quiz-result.mid {
    background: orange;
}

.quiz-result.bad {
    background: #E00000;
}

.required-field {
    color: #E00000;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem;
    /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.form-switch.form-switch-md {
    margin-bottom: 1rem;
    /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem;
    /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.form-switch.form-switch-xl {
    margin-bottom: 2rem;
    /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

a[aria-expanded="true"] span.symbol::after {
    position: absolute;
    top: 7px;
    right: 15px;
    content: "\2212";
    font-weight: bold;
  }
  
 a[aria-expanded="false"] span.symbol::after {
    position: absolute;
    top: 7px;
    right: 15px;
    content: "\002b";
    font-weight: bold;
  }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

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

#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  z-index: 100;
}
.underlineContent {
    text-decoration: underline;
}

footer span.section {
	font-size: calc(1.275rem + .3vw);
}

.index h1 {
	font-size: 1.25rem;
}
.news h1, .guidelines h1, .regProcedures h1, .guideToReg h1, 
.procurement h1, .listType h1, .download h1, .faqs h1, 
.links h1, .about h1, .contact h1, .sitemap h1 , .copyright h1, 
.disclaimer h1, .pics h1, .importantNotes h1, .textsize h1, .hkhaList h1, 
.hkhaList h2, .regAsk h1, .regAsk h2, .generalInfo h1, .generalInfo h2, 
.officerInfo h1, .officerInfo h2, .regFile h1, .regFile h2, .procHa h1, .procPsp h1 {
	font-size: 1.75rem;
}
.regProcedures h2, .listType h2, .faqs h2, .contact h2,
 .regAsk h3, .officerInfo h3, .procHa h2, .procPsp h2 {
	font-size: 1.25rem;
}
.guideToReg h2 {
	font-size: 1rem;
}
.using-mouse:focus {
  outline: none;
}

.using-keyboard:focus>a, .using-keyboard:focus>button {
  outline: auto 5px black;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}