/* load required fonts */
@font-face {
    font-family: 'FrutigerLTStd-Black';
    src: url('../fonts/FrutigerLTStd-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FrutigerLTStd-Bold';
    src: url('../fonts/FrutigerLTStd-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FrutigerLTStd-Cn';
    src: url('../fonts/FrutigerLTStd-Cn.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FrutigerLTStd-Light';
    src: url('../fonts/FrutigerLTStd-Light.otf') format('opentype');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'FrutigerLTStd-Roman';
    src: url('../fonts/FrutigerLTStd-Roman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansSC-Bold';
    src: url('../fonts/NotoSansSC-Bold.woff2') format("woff2");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansSC-Light';
    src: url('../fonts/NotoSansSC-Light.woff2') format("woff2");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansSC-Regular';
    src: url('../fonts/NotoSansSC-Regular.woff2') format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansHK-Bold';
    src: url('../fonts/NotoSansHK-Bold.woff2') format("woff2");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansHK-Light';
    src: url('../fonts/NotoSansHK-Light.woff2') format("woff2");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansHK-Regular';
    src: url('../fonts/NotoSansHK-Regular.woff2') format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* end of load required fonts */

/* default style */
body {
    font-family: 'FrutigerLTStd-Roman';
    font-size: 16px;
}

html[lang="zh-Hans-HK"] body {
    font-family: 'NotoSansSC-Regular';
}

html[lang="zh-Hant-HK"] body {
    font-family: 'NotoSansHK-Regular';
}

.heading {
    font-size: 20px;
    color: #0088A5;
    margin-bottom: 25px;
}

.xc-font-sm .heading {
    font-size: 18px;
}

.xc-font-lg .heading {
    font-size: 22px;
}

/* padding-left, padding-right */
/* mobi | sm | md | lg | xl | xxl */
/* AUTO | 10 | 30 | 50 | 80 | 80 */

/* padding-bottom */
/* mobi | sm | md | lg | xl | xxl */
/*   40 | 50 | 60 | 60 | 80 | 80 */
.container-custom {
    padding-bottom: 50px;
}

.xc-font-sm {
    font-size: 14px;
}

.xc-font-lg {
    font-size: 18px;
}

/* font size AAA */
.sm-font {
    font-size: 14px !important;
    line-height: 32px;
}

.md-font {
    font-size: 18px !important;
    line-height: 32px;
}

.lg-font {
    font-size: 22px !important;
    line-height: 32px;
}

/* end of font size AAA */

.xc-ms-1 {
    margin-left: 5px !important;
}

.xc-ms-2 {
    margin-left: 10px !important;
}

.xc-ms-3 {
    margin-left: 15px !important;
}

.xc-ms-4 {
    margin-left: 20px !important;
}

.xc-ms-5 {
    margin-left: 25px !important;
}

.xc-ms-6 {
    margin-left: 30px !important;
}

.xc-me-1 {
    margin-right: 5px !important;
}

.xc-me-2 {
    margin-right: 10px !important;
}

.xc-me-3 {
    margin-right: 15px !important;
}

.xc-me-4 {
    margin-right: 20px !important;
}

.xc-me-5 {
    margin-right: 25px !important;
}

.xc-me-6 {
    margin-right: 30px !important;
}

.xc-mt-1 {
    margin-top: 5px !important;
}

.xc-mt-2 {
    margin-top: 10px !important;
}

.xc-mt-3 {
    margin-top: 15px !important;
}

.xc-mt-4 {
    margin-top: 20px !important;
}

.xc-mt-5 {
    margin-top: 25px !important;
}

.xc-mt-6 {
    margin-top: 30px !important;
}

.xc-mb-1 {
    margin-bottom: 5px !important;
}

.xc-mb-2 {
    margin-bottom: 10px !important;
}

.xc-mb-3 {
    margin-bottom: 15px !important;
}

.xc-mb-4 {
    margin-bottom: 20px !important;
}

.xc-mb-5 {
    margin-bottom: 25px !important;
}

.xc-mb-6 {
    margin-bottom: 30px !important;
}

.xc-ps-1 {
    padding-left: 5px !important;
}

.xc-ps-2 {
    padding-left: 10px !important;
}

.xc-ps-3 {
    padding-left: 15px !important;
}

.xc-ps-4 {
    padding-left: 20px !important;
}

.xc-ps-5 {
    padding-left: 25px !important;
}

.xc-ps-6 {
    padding-left: 30px !important;
}

.xc-pe-1 {
    padding-right: 5px !important;
}

.xc-pe-2 {
    padding-right: 10px !important;
}

.xc-pe-3 {
    padding-right: 15px !important;
}

.xc-pe-4 {
    padding-right: 20px !important;
}

.xc-pe-5 {
    padding-right: 25px !important;
}

.xc-pe-6 {
    padding-right: 30px !important;
}

.xc-pt-1 {
    padding-top: 5px !important;
}

.xc-pt-2 {
    padding-top: 10px !important;
}

.xc-pt-3 {
    padding-top: 15px !important;
}

.xc-pt-4 {
    padding-top: 20px !important;
}

.xc-pt-5 {
    padding-top: 25px !important;
}

.xc-pt-6 {
    padding-top: 30px !important;
}

.xc-pb-1 {
    padding-bottom: 5px !important;
}

.xc-pb-2 {
    padding-bottom: 10px !important;
}

.xc-pb-3 {
    padding-bottom: 15px !important;
}

.xc-pb-4 {
    padding-bottom: 20px !important;
}

.xc-pb-5 {
    padding-bottom: 25px !important;
}

.xc-pb-6 {
    padding-bottom: 30px !important;
}

a {
    color: #1B75BB;
}

.navbar {
    min-height: 100px;
}

.nav-link {
    padding-bottom: 0 !important;
}

.navbar>.container {
    align-items: end;
}

.nav-button-group {
    padding-bottom: 2px;
}

.navbar-nav .nav-item>.nav-link {
    font-family: 'FrutigerLTStd-Roman';
    color: #000;
}

html[lang="zh-Hans-HK"] .navbar-nav .nav-item>.nav-link {
    font-family: 'NotoSansSC-Regular';
}

html[lang="zh-Hant-HK"] .navbar-nav .nav-item>.nav-link {
    font-family: 'NotoSansHK-Regular';
}

.navbar-nav .nav-item>.nav-link.active {
    color: #BBBDBF
}

.navbar-nav .nav-item>.nav-link:hover {
    color: #BBBDBF;
}

.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    /* border-radius: 20%;
    border: 2px solid #0050A4;
    background-color: #0050A4;
    color: #FFF;
    padding: 0px;
    padding-top: 3px;
    padding-left: 1px; */
}

.nav-button>img {
    width: 30px;
    height: 30px;
    border-radius: 20%;
}

.navbar-toggler {
    background: url('../images/icon_mobile menu.png') no-repeat center center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    border: none;
    padding: 0;
    color: rgba(0, 0, 0, 0) !important;
    border-color: rgba(0, 0, 0, 0) !important;
}

.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-menu.dropdown-menu-no-border {
    border: 0px;
}

.dropdown-menu.dropdown-menu-bg-transparent {
    background-color: transparent;
}

.dropdown-menu .dropdown-item:hover {
    color: #000;
    font-family: 'FrutigerLTStd-Roman';
    text-shadow: 0 0 transparent;
}

html[lang="zh-Hans-HK"] .dropdown-menu .dropdown-item:hover {
    font-family: 'NotoSansSC-Regular';
}

html[lang="zh-Hant-HK"] .dropdown-menu .dropdown-item:hover {
    font-family: 'NotoSansHK-Regular';
}

.dropdown-menu>li:first-child {
    margin-top: 0px;
}

.dropdown-menu>li:last-child {
    margin-bottom: 0px;
}

.dropdown-arrow-none:after {
    display: none;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

.dropdown-item {
    font-family: 'FrutigerLTStd-Light';
    font-size: 16px;
}

html[lang="zh-Hans-HK"] .dropdown-item {
    font-family: 'NotoSansSC-Light';
}

html[lang="zh-Hant-HK"] .dropdown-item {
    font-family: 'NotoSansHK-Light';
}

.xc-font-sm .dropdown-item {
    font-size: 14px;
}

.xc-font-lg .dropdown-item {
    font-size: 18px;
}

@media only screen and (max-width: 991px) {
    .dropdown-menu .dropdown-item-detail {
        white-space: normal;
        display: flex;
        align-items: start;
        padding-left: 0;
    }

    .dropdown-menu .dropdown-item-detail::before {
        content: '\F231';
        font-family: 'bootstrap-icons';
        font-size: 13px;
        margin-right: 5px;
        position: relative;
    }
}

.dropdown-item::before {
    display: block;
    content: attr(data-title);
    font-family: 'FrutigerLTStd-Roman';
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

html[lang="zh-Hans-HK"] .dropdown-item::before {
    font-family: 'NotoSansSC-Regular';
}

html[lang="zh-Hant-HK"] .dropdown-item::before {
    font-family: 'NotoSansHK-Regular';
}

.dropdown-item.dropdown-item-detail {
    font-size: 15px;
}

.xc-font-sm .dropdown-item.dropdown-item-detail {
    font-size: 14px;
}

.xc-font-lg .dropdown-item.dropdown-item-detail {
    font-size: 16px;
}

.dropdown-divider {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 2px solid transparent;
}

/* dropdown-item-set1 */
/* #E0E9BB -> #CDE1AA -> #BADA99 -> #A7D288 -> #94CB78 -> #81C367 */
.dropdown-item-set1-row1 {
    background-image: linear-gradient(180deg, #E0E9BB 0%, #CDE1AA 100%);
}

.dropdown-item-set1-row2 {
    background-image: linear-gradient(180deg, #CDE1AA 0%, #BADA99 100%);
}

.dropdown-item-set1-row3 {
    background-image: linear-gradient(180deg, #BADA99 0%, #A7D288 100%);
}

.dropdown-item-set1-row4 {
    background-image: linear-gradient(180deg, #A7D288 0%, #94CB78 100%);
}

.dropdown-item-set1-row5 {
    background-image: linear-gradient(180deg, #94CB78 0%, #81C367 100%);
}

/* dropdown-item-set2 */
/* #E0E9BB -> #A5DDC5 -> #69D1CF */
.dropdown-item-set2-row1 {
    background-image: linear-gradient(180deg, #E0E9BB 0%, #A5DDC5 100%);
}

.dropdown-item-set2-row2 {
    background-image: linear-gradient(180deg, #A5DDC5 0%, #69D1CF 100%);
}

.dropdown-item-set2-row3 {
    background-image: linear-gradient(180deg, #69D1CF 0%, #69D1CF 100%);
}

/* dropdown-item-set3 */
/* #E0E9BB -> #D0E3AD -> #C1DDA0 -> #B1D692 -> #A1D083 -> #91CA75 -> #81C367 */
.dropdown-item-set3-row1 {
    background-image: linear-gradient(90deg, #E0E9BB 0%, #D0E3AD 100%);
}

.dropdown-item-set3-row2 {
    background-image: linear-gradient(90deg, #D0E3AD 0%, #C1DDA0 100%);
}

.dropdown-item-set3-row3 {
    background-image: linear-gradient(90deg, #C1DDA0 0%, #B1D692 100%);
}

.dropdown-item-set3-row4 {
    background-image: linear-gradient(90deg, #B1D692 0%, #A1D083 100%);
}

.dropdown-item-set3-row5 {
    background-image: linear-gradient(90deg, #A1D083 0%, #91CA75 100%);
}

.dropdown-item-set3-row6 {
    background-image: linear-gradient(90deg, #91CA75 0%, #81C367 100%);
}

.breadcrumb {
    margin-top: 25px;
    margin-bottom: 25px;
    --bs-breadcrumb-divider: '>';
}

.breadcrumb-item {
    font-size: 11px;
    color: #A6A8AB;
}

.xc-font-sm .breadcrumb-item {
    font-size: 10px;
}

.xc-font-lg .breadcrumb-item {
    font-size: 12px;
}

.breadcrumb-item a {
    text-decoration: none;
}

.breadcrumb-item.has-href a {
    color: #A6A8AB;
}

.breadcrumb-item.active {
    color: #0088A5;
}

/* tooltip */
.tooltip-inner {
    background-color: white !important;
    color: black !important;
    border: 2px solid #0050a4 !important;
    max-width: 350px !important;
    height: auto !important;
}

.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: #0050A4;
}

.bs-tooltip-bottom .tooltip-arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-width: 0 .4rem .4rem;
    transform: translateY(3px);
    border-color: transparent;
    border-style: solid;
    border-bottom-color: white;
}

footer {
    background-color: #E6E7E8;
}

footer a {
    text-decoration: none;
    color: #6B6B6B;
}

.wcag-icons {
    width: auto;
    height: 26px;
}

/* end of default style*/

/* landscape phones */
@media only screen and (max-width: 599px) {
    .navbar-brand img {
        width: 200px;
    }

    .dropdown-item {
        white-space: normal;
        max-width: 95vw;
    }

    .breadcrumb {
        margin-top: 20px;
        margin-bottom: 20px;
        --bs-breadcrumb-divider: '>';
    }
}

@media only screen and (max-width: 575px) {
    .container-custom {
        padding-bottom: 40px;
    }
}

/* xs devices, portrait phones */
@media only screen and (max-width: 449px) {
    .navbar-brand img {
        width: 160px;
    }
}

/* 576px required for support bs5 sm */
@media only screen and (min-width: 576px) {
    #breadcrumbContainer {
        padding-left: 10px;
        padding-right: 10px;
    }

    .container-custom {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 50px;
    }
}

/* large phones, portrait tablets */
@media only screen and (min-width: 600px) {
    header {
        padding-left: 30px;
        padding-right: 30px;
    }

    .navbar-brand img {
        width: 220px;
    }

    #breadcrumbContainer {
        padding-left: 10px;
        padding-right: 10px;
    }

    footer {
        min-height: 100px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* landscape tablets */
@media only screen and (min-width: 768px) {
    .navbar-brand img {
        width: 220px;
    }

    #breadcrumbContainer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .container-custom {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 60px;
    }
}

/* desktop */
@media only screen and (min-width: 992px) {
    .navbar-brand img {
        width: 220px;
    }

    #breadcrumbContainer {
        padding-left: 50px;
        padding-right: 50px;
    }

    .container-custom {
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 60px;
    }

    .dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* for sub-submenu */
    .navbar-nav li:hover>ul.dropdown-menu {
        display: block;
    }

    .dropdown-submenu {
        position: relative;
    }
}

/* desktop hd */
@media only screen and (min-width: 1200px) {
    .navbar-brand img {
        width: 240px;
    }

    #breadcrumbContainer {
        padding-left: 80px;
        padding-right: 80px;
    }

    .container-custom {
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 80px;
    }
}