/* ============================================================
   HK EMBASSY
   COMMON TOPBAR + ACCESSIBILITY
   Bootstrap 5 compatible
   All custom classes use hkux-
============================================================ */

:root {
    --hkux-blue: #1d3978;
    --hkux-blue-dark: #1d3978;
    --hkux-text: #17233d;
    --hkux-background: #f5f7fb;
    --hkux-border: #dce2ed;
    --hkux-white: #ffffff;
    --hkux-focus: #214AAB;
}


/* ============================================================
   TOP BAR
============================================================ */

.hkux-topbar {
    position: relative;
    z-index: 1030;

    background: var(--hkux-background);

    border-bottom: 1px solid var(--hkux-border);
}


/* Bottom decorative line */

.hkux-topbar::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #214AAB 0%,
            #214AAB 33.33%,
            #ffffff 33.33%,
            #ffffff 66.66%,
            #214AAB 66.66%,
            #214AAB 100%
        );
}


/* ============================================================
   TOPBAR INNER
============================================================ */

.hkux-topbar__inner {
    min-height: 42px;
}


/* ============================================================
   LEFT LINKS
============================================================ */

.hkux-topbar__links {
    padding: 0;
}

.hkux-topbar__link {
    display: inline-flex;

    align-items: center;

    color: var(--hkux-text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;

    padding: 4px 0;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.hkux-topbar__link:hover {
    color: var(--hkux-blue);

    text-decoration: underline;

    text-underline-offset: 3px;
}


.hkux-topbar__separator {
    margin: 0 10px;

    color: #687286;

    font-size: 14px;
}


/* ============================================================
   RIGHT ICONS
============================================================ */

.hkux-topbar__actions {
    gap: 4px;
}

.hkux-topbar__icon {
    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--hkux-blue);

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    cursor: pointer;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.hkux-topbar__icon:hover {
    background: rgba(33, 73, 169, .08);

    transform: translateY(-1px);
}

.hkux-topbar__icon:focus-visible {
    outline: 3px solid var(--hkux-focus);
    outline-offset: 3px;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .hkux-topbar__inner {
        min-height: 46px;
    }

    .hkux-topbar__link {
        font-size: 12px;
    }

    .hkux-topbar__separator {
        margin-left: 6px;
        margin-right: 6px;
    }

    .hkux-topbar__icon {
        width: 34px;
        height: 34px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .hkux-topbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hkux-topbar__inner {
        gap: 5px;
    }

    .hkux-topbar__links {
        min-width: 0;

        overflow: hidden;

        white-space: nowrap;
    }

    .hkux-topbar__link {
        font-size: 11px;
    }

    .hkux-topbar__separator {
        margin-left: 5px;
        margin-right: 5px;
    }

}

/* ============================================================
   HK EMBASSY
   HEADER
   Bootstrap compatible
   Custom prefix: hkux-
============================================================ */


/* ============================================================
   HEADER
============================================================ */

.hkux-header {
    position: relative;

    width: 100%;

    background: #ffffff;
}


.hkux-header__inner {
    min-height: 112px;

    padding-top: 12px;
    padding-bottom: 12px;

    gap: 30px;
}


/* ============================================================
   BRAND
============================================================ */

.hkux-header__brand {
    min-width: 0;

    flex-shrink: 0;
}


.hkux-header__brand-link {
    display: flex;

    align-items: center;

    gap: 15px;

    color: inherit;

    text-decoration: none;
}


.hkux-header__logo {
    width: 58px;

    height: 88px;

    object-fit: contain;

    flex-shrink: 0;
}


.hkux-header__brand-text {
    min-width: 0;
}


.hkux-header__title {
    color: #1d3978;

    font-size: 26px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.5px;

    white-space: nowrap;

    font-family: poppinssemibold;
}


.hkux-header__subtitle {
    margin-top: 6px;

    color: #171717;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: .1px;
}


.hkux-header__subtitle-location {
    display: block;

    margin-top: 2px;
}


/* ============================================================
   RIGHT UTILITIES
============================================================ */

.hkux-header__utilities {
    margin-left: auto;

    gap: 14px;

    flex-shrink: 0;
}


/* ============================================================
   SEARCH
============================================================ */

.hkux-header__search {
    margin: 0;
}


.hkux-header__search-box {
    position: relative;

    width: 185px;

    height: 40px;

    display: flex;

    align-items: center;

    border: 1px solid transparent;

    border-radius: 22px;

    background: #f6f7fa;

    transition:
        width .3s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.hkux-header__search-box:hover {
    background: #f0f2f6;
}


.hkux-header__search-box:focus-within {
    width: 230px;

    background: #ffffff;

    border-color: #cdd6e8;

    box-shadow:
        0 4px 18px rgba(24, 45, 90, .10);
}


.hkux-header__search-input {
    width: 100%;

    height: 100%;

    padding: 0 42px 0 16px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #17233d;

    font-size: 14px;
}


.hkux-header__search-input::placeholder {
    color: #7b8494;

    opacity: 1;
}


.hkux-header__search-button {
    position: absolute;

    right: 4px;

    top: 4px;

    width: 32px;

    height: 32px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #687387;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.hkux-header__search-button:hover {
    background: #1d3978;

    color: #ffffff;

    transform: scale(1.04);
}


.hkux-header__search-button:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 2px;
}


.hkux-header__search-button i {
    font-size: 14px;
}


/* ============================================================
   DIVIDER
============================================================ */

.hkux-header__utility-divider {
    width: 1px;

    height: 28px;

    background: #d8dce4;

    flex-shrink: 0;
}


/* ============================================================
   MEA APP
============================================================ */

.hkux-header__app {
    display: flex;

    align-items: center;

    gap: 8px;
}


.hkux-header__app-label {
    color: #777d88;

    font-size: 13px;

    line-height: 1.2;

    white-space: nowrap;
}


.hkux-header__app-links {
    display: flex;

    align-items: center;

    gap: 7px;
}


.hkux-header__app-link {
    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #626975;

    text-decoration: none;

    border-radius: 50%;

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}


.hkux-header__app-link:hover {
    color: #1d3978;

    background: #f0f3f8;

    transform: translateY(-2px);
}


.hkux-header__app-link i {
    font-size: 17px;
}


/* ============================================================
   SOCIAL
============================================================ */

.hkux-header__social {
    display: flex;

    align-items: center;

    gap: 7px;
}


.hkux-header__social-link {
    position: relative;

    width: 31px;

    height: 31px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #68717f;

    text-decoration: none;

    border-radius: 50%;

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .25s ease;
}


.hkux-header__social-link:hover {
    color: #1d3978;

    background: #f0f3f8;

    transform: translateY(-3px);
}


.hkux-header__social-link:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 2px;
}


.hkux-header__social-link i {
    font-size: 16px;

    line-height: 1;
}


/* ============================================================
   SOCIAL HOVER COLORS
   Optional brand-aware interaction
============================================================ */

.hkux-header__social-link:hover .fa-youtube {
    color: #ff0000;
}


.hkux-header__social-link:hover .fa-whatsapp {
    color: #25d366;
}


.hkux-header__social-link:hover .fa-facebook,
.hkux-header__social-link:hover .fa-facebook-f {
    color: #1877f2;
}


.hkux-header__social-link:hover .fa-instagram {
    color: #e4405f;
}


.hkux-header__social-link:hover .fa-x-twitter,
.hkux-header__social-link:hover .fa-twitter {
    color: #111111;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199.98px) {

    .hkux-header__inner {
        gap: 20px;
    }

    .hkux-header__title {
        font-size: 23px;
    }

    .hkux-header__subtitle {
        font-size: 16px;
    }

    .hkux-header__app-label {
        display: none;
    }

    .hkux-header__search-box {
        width: 160px;
    }

    .hkux-header__search-box:focus-within {
        width: 200px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .hkux-header__inner {
        min-height: 95px;
    }

    .hkux-header__logo {
        width: 50px;

        height: 75px;
    }

    .hkux-header__title {
        font-size: 20px;
    }

    .hkux-header__subtitle {
        font-size: 14px;
    }

    .hkux-header__search-box {
        width: 42px;

        height: 42px;

        border-radius: 50%;
    }

    .hkux-header__search-input {
        opacity: 0;

        pointer-events: none;
    }

    .hkux-header__search-box:focus-within {
        width: 210px;

        border-radius: 22px;
    }

    .hkux-header__search-box:focus-within
    .hkux-header__search-input {
        opacity: 1;

        pointer-events: auto;
    }

    .hkux-header__utility-divider {
        display: none;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .hkux-header__inner {
        min-height: auto;

        padding-top: 14px;

        padding-bottom: 14px;

        flex-wrap: wrap;
    }


    .hkux-header__brand {
        width: 100%;
    }


    .hkux-header__brand-link {
        gap: 11px;
    }


    .hkux-header__logo {
        width: 43px;

        height: 65px;
    }


    .hkux-header__title {
        font-size: 18px;

        letter-spacing: -.2px;

        white-space: normal;
    }


    .hkux-header__subtitle {
        margin-top: 3px;

        font-size: 13px;
    }


    .hkux-header__utilities {
        width: 100%;

        margin-left: 0;

        justify-content: flex-end;

        gap: 8px;
    }


    .hkux-header__search {
        margin-right: auto;
    }


    .hkux-header__search-box {
        width: 100%;

        max-width: 220px;

        height: 40px;

        border-radius: 20px;
    }


    .hkux-header__search-input {
        opacity: 1;

        pointer-events: auto;
    }


    .hkux-header__search-box:focus-within {
        width: 100%;

        max-width: 220px;
    }


    .hkux-header__social {
        gap: 2px;
    }


    .hkux-header__social-link {
        width: 29px;

        height: 29px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .hkux-header__title {
        font-size: 16px;
    }

    .hkux-header__subtitle {
        font-size: 12px;
    }

    .hkux-header__logo {
        width: 38px;

        height: 58px;
    }

    .hkux-header__social-link {
        width: 26px;

        height: 26px;
    }

    .hkux-header__social-link i {
        font-size: 14px;
    }

    .hkux-header__app {
        display: none;
    }

}
.hkux-lang-trigger {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #172d68;

    cursor: pointer;

    transition: all .25s ease;
}

.hkux-lang-trigger:hover {
    background: #f1f4fa;
    color: #e77817;
}

.hkux-lang-trigger:focus-visible {
    outline: 3px solid #214AAB;
    outline-offset: 3px;
}

.hkux-lang-trigger[aria-expanded="true"] {
    background: #172d68;
    color: #fff;
}

.hkux-lang-panel {
    position: absolute;
    z-index: 9999;

    top: calc(100% + 10px);
    right: 0;

    width: 210px;

    padding: 8px;

    background: #fff;

    border: 1px solid #e1e6ef;
    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(20, 38, 80, .18);

    animation: hkuxLangDrop .2s ease;
}

.hkux-lang-panel[hidden] {
    display: none !important;
}

.hkux-lang-panel-title {
    padding: 9px 11px;

    color: #172d68;

    font-size: 12px;
    font-weight: 700;

    border-bottom: 1px solid #edf0f5;

    margin-bottom: 5px;
}

.hkux-lang-item {
    width: 100%;

    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 11px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #39445d;

    font-size: 12px;

    text-align: left;

    cursor: pointer;

    transition: all .2s ease;
}

.hkux-lang-item:hover {
    background: #f2f5fa;
    color: #172d68;
}

.hkux-lang-item:focus-visible {
    outline: 2px solid #214AAB;
}

.hkux-lang-item i {
    display: none;
    color: #214AAB;
}

.hkux-lang-item.active {
    background: #eef2fa;
    color: #172d68;
    font-weight: 700;
}

.hkux-lang-item.active i {
    display: block;
}

@keyframes hkuxLangDrop {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}
.goog-te-gadget{
    display: none;
}

/* =========================================================
   HKUX DARK MODE
   Light mode = original/normal CSS
   ========================================================= */

html.hkux-dark-mode,
html.hkux-dark-mode body {
    background: #121212 !important;
    color: #f1f1f1 !important;
}

/* Main page */
html.hkux-dark-mode .hkux-page,
html.hkux-dark-mode .hkux-main,
html.hkux-dark-mode main,
html.hkux-dark-mode section {
    background-color: #121212 !important;
    color: #f1f1f1 !important;
}

/* Cards / boxes */
html.hkux-dark-mode .hkux-card,
html.hkux-dark-mode .hkux-box,
html.hkux-dark-mode .hkux-content-card {
    background-color: #1e1e1e !important;
    color: #f1f1f1 !important;
    border-color: #333 !important;
}

/* Header */
html.hkux-dark-mode .hkux-header,
html.hkux-dark-mode .hkux-header__inner {
    background-color: #181818 !important;
    color: #fff !important;
}

/* Navigation */
html.hkux-dark-mode .hkux-navigation,
html.hkux-dark-mode .hkux-nav,
html.hkux-dark-mode .hkux-menu {
    background-color: #181818 !important;
    color: #fff !important;
}

html.hkux-dark-mode .hkux-navigation a,
html.hkux-dark-mode .hkux-nav a,
html.hkux-dark-mode .hkux-menu a {
    color: #f1f1f1 !important;
}

/* Text */
html.hkux-dark-mode h1,
html.hkux-dark-mode h2,
html.hkux-dark-mode h3,
html.hkux-dark-mode h4,
html.hkux-dark-mode h5,
html.hkux-dark-mode h6,
html.hkux-dark-mode p,
html.hkux-dark-mode span,
html.hkux-dark-mode li,
html.hkux-dark-mode label {
    color: #f1f1f1 !important;
}

/* Links */
html.hkux-dark-mode a {
    color: #8ab4f8;
}

html.hkux-dark-mode a:hover {
    color: #aecbfa;
}

/* Inputs */
html.hkux-dark-mode input,
html.hkux-dark-mode textarea,
html.hkux-dark-mode select {
    background-color: #1e1e1e !important;
    color: #fff !important;
    border-color: #444 !important;
}

html.hkux-dark-mode input::placeholder,
html.hkux-dark-mode textarea::placeholder {
    color: #aaa !important;
}

/* Buttons */
html.hkux-dark-mode button {
    color: #fff;
}

/* Tables */
html.hkux-dark-mode table {
    background-color: #1e1e1e !important;
    color: #f1f1f1 !important;
}

html.hkux-dark-mode th {
    background-color: #292929 !important;
    color: #fff !important;
}

html.hkux-dark-mode td {
    background-color: #1e1e1e !important;
    color: #eee !important;
    border-color: #444 !important;
}

/* Footer */
html.hkux-dark-mode footer,
html.hkux-dark-mode .hkux-footer {
    background-color: #151515 !important;
    color: #eee !important;
}

html.hkux-dark-mode footer a,
html.hkux-dark-mode .hkux-footer a {
    color: #ddd !important;
}

/* Borders / dividers */
html.hkux-dark-mode hr {
    border-color: #444 !important;
}

/* Bootstrap modal */
html.hkux-dark-mode .modal-content {
    background-color: #1e1e1e !important;
    color: #fff !important;
}

html.hkux-dark-mode .modal-header,
html.hkux-dark-mode .modal-footer {
    border-color: #444 !important;
}

/* Bootstrap dropdown */
html.hkux-dark-mode .dropdown-menu {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
}

html.hkux-dark-mode .dropdown-item {
    color: #eee !important;
}

html.hkux-dark-mode .dropdown-item:hover {
    background-color: #333 !important;
}

/* Search */
html.hkux-dark-mode .hkux-search,
html.hkux-dark-mode .hkux-search-box {
    background-color: #1e1e1e !important;
    color: #fff !important;
}

/* News */
html.hkux-dark-mode .hkux-news-card,
html.hkux-dark-mode .hkux-newsroom,
html.hkux-dark-mode .hkux-news-item {
    background-color: #1e1e1e !important;
    color: #eee !important;
}

/* Services */
html.hkux-dark-mode .hkux-service-card,
html.hkux-dark-mode .hkux-service-content {
    background-color: #1e1e1e !important;
    color: #eee !important;
}

/* Images */
html.hkux-dark-mode img {
    opacity: .92;
}

/* Selection */
html.hkux-dark-mode ::selection {
    background: #555;
    color: #fff;
}
/* ============================================================
   HKUX CONTRAST VIEW
   STRICT BLACK & WHITE
   Normal mode = original CSS
   ============================================================ */

html.hkux-dark-mode,
html.hkux-dark-mode body {
    background: #000 !important;
    color: #fff !important;
}

/* ============================================================
   ALL COMMON PAGE BACKGROUNDS
   ============================================================ */

html.hkux-dark-mode *,
html.hkux-dark-mode *::before,
html.hkux-dark-mode *::after {
    border-color: #fff !important;
}

/* Main page areas */
html.hkux-dark-mode body,
html.hkux-dark-mode main,
html.hkux-dark-mode section,
html.hkux-dark-mode article,
html.hkux-dark-mode aside,
html.hkux-dark-mode header,
html.hkux-dark-mode footer,
html.hkux-dark-mode nav,
html.hkux-dark-mode .container,
html.hkux-dark-mode .container-fluid {
    background-color: #000 !important;
    color: #fff !important;
}

/* ============================================================
   ALL TEXT
   ============================================================ */

html.hkux-dark-mode h1,
html.hkux-dark-mode h2,
html.hkux-dark-mode h3,
html.hkux-dark-mode h4,
html.hkux-dark-mode h5,
html.hkux-dark-mode h6,
html.hkux-dark-mode p,
html.hkux-dark-mode span,
html.hkux-dark-mode div,
html.hkux-dark-mode li,
html.hkux-dark-mode label,
html.hkux-dark-mode small,
html.hkux-dark-mode strong,
html.hkux-dark-mode b,
html.hkux-dark-mode em,
html.hkux-dark-mode i,
html.hkux-dark-mode td,
html.hkux-dark-mode th,
html.hkux-dark-mode caption {
    color: #fff !important;
}

/* ============================================================
   ALL LINKS
   ============================================================ */

html.hkux-dark-mode a,
html.hkux-dark-mode a:visited,
html.hkux-dark-mode a:hover,
html.hkux-dark-mode a:active {
    color: #fff !important;
}

/* ============================================================
   ALL BUTTONS
   ============================================================ */

html.hkux-dark-mode button,
html.hkux-dark-mode .btn,
html.hkux-dark-mode input[type="button"],
html.hkux-dark-mode input[type="submit"],
html.hkux-dark-mode input[type="reset"] {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Hover */
html.hkux-dark-mode button:hover,
html.hkux-dark-mode .btn:hover {
    background: #fff !important;
    color: #000 !important;
}

/* ============================================================
   INPUT / FORM
   ============================================================ */

html.hkux-dark-mode input,
html.hkux-dark-mode textarea,
html.hkux-dark-mode select,
html.hkux-dark-mode option {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode input::placeholder,
html.hkux-dark-mode textarea::placeholder {
    color: #fff !important;
    opacity: .8 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

html.hkux-dark-mode .hkux-header,
html.hkux-dark-mode .hkux-header__inner,
html.hkux-dark-mode .hkux-header__brand,
html.hkux-dark-mode .hkux-header__utilities,
html.hkux-dark-mode .hkux-header__search-box {
    background: #000 !important;
    color: #fff !important;
}

html.hkux-dark-mode .hkux-header__title,
html.hkux-dark-mode .hkux-header__subtitle,
html.hkux-dark-mode .hkux-header__app-label,
html.hkux-dark-mode .hkux-header__app-link,
html.hkux-dark-mode .hkux-header__social-link,
html.hkux-dark-mode .hkux-header__search-input,
html.hkux-dark-mode .hkux-header__search-button {
    color: #fff !important;
}

/* Search */
html.hkux-dark-mode .hkux-header__search-box {
    border: 1px solid #fff !important;
}

html.hkux-dark-mode .hkux-header__search-box:hover,
html.hkux-dark-mode .hkux-header__search-box:focus-within {
    background: #000 !important;
}

/* ============================================================
   TOP BAR
   ============================================================ */

html.hkux-dark-mode .hkux-topbar {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .hkux-topbar__link,
html.hkux-dark-mode .hkux-topbar__separator,
html.hkux-dark-mode .hkux-topbar__icon {
    color: #fff !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

html.hkux-dark-mode .hkux-navigation,
html.hkux-dark-mode .hkux-nav,
html.hkux-dark-mode .hkux-menu,
html.hkux-dark-mode .hkux-navigation *,
html.hkux-dark-mode .hkux-nav *,
html.hkux-dark-mode .hkux-menu * {
    background-color: #000 !important;
    color: #fff !important;
}

/* ============================================================
   HOME / NEWS
   ============================================================ */

html.hkux-dark-mode .hkux-home-section,
html.hkux-dark-mode .hkux-newsroom-card,
html.hkux-dark-mode .hkux-newsroom,
html.hkux-dark-mode .hkux-news-content,
html.hkux-dark-mode .hkux-news-panel,
html.hkux-dark-mode .hkux-news-list,
html.hkux-dark-mode .hkux-news-item,
html.hkux-dark-mode .hkux-news-info {
    background: #000 !important;
    color: #fff !important;
}

html.hkux-dark-mode .hkux-newsroom-heading h2,
html.hkux-dark-mode .hkux-newsroom-heading h2,
html.hkux-dark-mode .hkux-news-title,
html.hkux-dark-mode .hkux-news-meta,
html.hkux-dark-mode .hkux-showing {
    color: #fff !important;
}

/* News tabs */
html.hkux-dark-mode .hkux-news-tabs {
    background: #000 !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .hkux-news-tab {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .hkux-news-tab-active {
    background: #fff !important;
    color: #000 !important;
}

/* Date */
html.hkux-dark-mode .hkux-date,
html.hkux-dark-mode .hkux-date-green {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .hkux-date span,
html.hkux-dark-mode .hkux-date small {
    color: #fff !important;
}

/* ============================================================
   SERVICES
   ============================================================ */

html.hkux-dark-mode .hkux-services-card,
html.hkux-dark-mode .hkux-service-box,
html.hkux-dark-mode .hkux-service-content,
html.hkux-dark-mode .hkux-service-icon {
    background: #000 !important;
    color: #fff !important;
}

html.hkux-dark-mode .hkux-service-content h3,
html.hkux-dark-mode .hkux-service-content p,
html.hkux-dark-mode .hkux-service-link {
    color: #fff !important;
}

html.hkux-dark-mode .hkux-services-view-all {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* ============================================================
   EMERGENCY
   ============================================================ */

html.hkux-dark-mode .hkux-emergency-card {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

html.hkux-dark-mode .hkux-emergency-heading,
html.hkux-dark-mode .hkux-emergency-text,
html.hkux-dark-mode .hkux-emergency-phone,
html.hkux-dark-mode .hkux-emergency-phone strong,
html.hkux-dark-mode .hkux-emergency-phone span,
html.hkux-dark-mode .hkux-phone-icon {
    color: #fff !important;
}

html.hkux-dark-mode .hkux-emergency-phone {
    background: #000 !important;
    border: 1px solid #fff !important;
}

html.hkux-dark-mode .hkux-phone-icon {
    background: #fff !important;
    color: #000 !important;
}

/* ============================================================
   CONSUL GENERAL DESK
   ============================================================ */

html.hkux-dark-mode .hkux-desk-section,
html.hkux-dark-mode .hkux-desk-card,
html.hkux-dark-mode .hkux-desk-content,
html.hkux-dark-mode .hkux-desk-photo {
    background: #000 !important;
    color: #fff !important;
}

html.hkux-dark-mode .hkux-desk-quote,
html.hkux-dark-mode .hkux-desk-name h3,
html.hkux-dark-mode .hkux-desk-name p,
html.hkux-dark-mode .hkux-desk-description {
    color: #fff !important;
}

html.hkux-dark-mode .hkux-desk-btn {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* ============================================================
   LANGUAGE
   ============================================================ */

html.hkux-dark-mode .hkux-lang-trigger,
html.hkux-dark-mode .hkux-lang-panel,
html.hkux-dark-mode .hkux-lang-item,
html.hkux-dark-mode .hkux-lang-panel-title {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .hkux-lang-item:hover,
html.hkux-dark-mode .hkux-lang-item.active {
    background: #fff !important;
    color: #000 !important;
}

/* ============================================================
   BOOTSTRAP COMPONENTS
   ============================================================ */

html.hkux-dark-mode .modal-content,
html.hkux-dark-mode .dropdown-menu,
html.hkux-dark-mode .offcanvas,
html.hkux-dark-mode .popover,
html.hkux-dark-mode .tooltip-inner,
html.hkux-dark-mode .accordion-item,
html.hkux-dark-mode .card {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .dropdown-item,
html.hkux-dark-mode .accordion-button,
html.hkux-dark-mode .accordion-body {
    background: #000 !important;
    color: #fff !important;
}

html.hkux-dark-mode .dropdown-item:hover,
html.hkux-dark-mode .dropdown-item:focus {
    background: #fff !important;
    color: #000 !important;
}

/* ============================================================
   TABLE
   ============================================================ */

html.hkux-dark-mode table,
html.hkux-dark-mode thead,
html.hkux-dark-mode tbody,
html.hkux-dark-mode tr,
html.hkux-dark-mode th,
html.hkux-dark-mode td {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

html.hkux-dark-mode footer,
html.hkux-dark-mode .hkux-footer,
html.hkux-dark-mode .hkux-footer * {
    background: #000 !important;
    color: #fff !important;
}

/* ============================================================
   IMAGES
   ============================================================ */

html.hkux-dark-mode img {
    background: #ffffff !important;
}

/* ============================================================
   HR / DIVIDERS
   ============================================================ */

html.hkux-dark-mode hr,
html.hkux-dark-mode .hkux-footer-line,
html.hkux-dark-mode .hkux-timeline::before {
    background: #fff !important;
    border-color: #fff !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

html.hkux-dark-mode ::-webkit-scrollbar {
    background: #000 !important;
}

html.hkux-dark-mode ::-webkit-scrollbar-track {
    background: #000 !important;
}

html.hkux-dark-mode ::-webkit-scrollbar-thumb {
    background: #fff !important;
}

html.hkux-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #fff !important;
}

/* ============================================================
   SELECTION
   ============================================================ */

html.hkux-dark-mode ::selection {
    background: #fff !important;
    color: #000 !important;
}