/**
 * @file
 * Subtheme specific CSS.
 */
html {
    font-size: 16px;
}
/*body, p, li, a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
h1, h1 a, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
.row{
    margin: 0;
}

.row>*{
    padding-left: 0;
    padding-right: 0;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
h1.title {
    margin-bottom: 1.5rem;
    text-align:left;
}
h1.title em {
    font-style: normal;
}
/*.path-frontpage h1.title,*/
.path-participant h1.title {
    display: none;
}
img {
    max-width: 100%;
    height: auto;
}
table {
    font-size: 1rem;
    margin-bottom: 2em;
    border-radius: 15px !important;
    overflow: hidden;
}
tr {
    background-color: #fff;
}
.table-bordered>:not(caption)>*>* {
    border-width: 1px;
    border-bottom-width: 1px !important;
}
.table-borderless tr td,
.table-borderless tr th {
    border: 0;
}
.table.table-borderless td, .table.table-borderless th {
    background-color: inherit;
    color: inherit;
}
/*table tr th, table tr th a,
.table tr th, .table tr th a {
    color: #e16d06;
    background-color: #e10634;
} */
.tablesort--asc {
    background-image: url(/core/misc/icons/787878/twistie-down.svg);
}
.tablesort--desc {
    background-image: url(/core/misc/icons/787878/twistie-up.svg);
}
table tr th {
    border-bottom-style: inherit;
}
@media (min-width: 992px) {
    .region-primary-menu .navigation {
        float: left;
    }
    #block-event-main-menu a.nav-link--en-support-us,
    #block-event-main-menu a.nav-link--zh-hant-support-us,
    #block-highlightbuttons,
    #block-event-account-menu {
        margin-left: 0.8rem;
    }
}
#navbar-top .container {
    justify-content: center;
}
.navbar-brand {
    margin: 0;
    padding: 0;
}
div#block-layout3-sitelogo {
    border-right: 1px solid #aaa;
    padding: 15px;
}
#navbar-main #block-highlightbuttons a {
    border-radius: .25rem;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: 20px;
}
#navbar-main #block-event-account-menu a.nav-link--user,
#navbar-main #block-event-account-menu a.nav-link--en-user,
#navbar-main #block-event-account-menu a.nav-link--zh-hant-user,
#navbar-main #block-event-account-menu a.nav-link--user-login,
#navbar-main #block-event-account-menu a.nav-link--en-user-login,
#navbar-main #block-event-account-menu a.nav-link--zh-hant-user-login,
#navbar-main #block-event-main-menu a.nav-link--support-us,
#navbar-main #block-event-main-menu a.nav-link--en-support-us,
#navbar-main #block-event-main-menu a.nav-link--zh-hant-support-us {
    border-radius: 0.25rem;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}
@media (max-width: 991.98px) {
    #block-event-main-menu,
    #block-highlightbuttons,
    #block-event-account-menu {
        padding-top: 6px;
        padding-bottom: 6px;
        margin-left: 0;
    }
}
.alert-dismissible button.close {
    color: white;
    background-color: inherit;
    border-color: inherit;
}
#navbar-main.navbar>.container {
    justify-content: flex-start;
}
.navbar-collapse {
    flex-grow: inherit;
}
#navbar-main button.navbar-toggler {
    background-color: transparent;
    border: 0;
}
#navbar-main button.navbar-toggler svg {
    width: 24px;
    height: 24px;
}
#block-highlightbuttons li.nav-item + li.nav-item {
    margin-left: 8px;
}
#block-event-account-menu .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.navbar .form-inline.navbar-form {
    order: 2;
    flex: 1 1 auto;
}
.navbar .form-inline.navbar-button {
    order: 3;
}
.navbar #CollapsingNavbar {
    order: 1;
    flex-grow: inherit;
}
@media (max-width: 991.98px) {
    /*
    #block-highlightbuttons .nav,
    #block-event-account-menu .nav {
        flex-direction: column;
    }
    */
    #block-event-account-menu .nav-link {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar .form-inline.navbar-form {
        flex: 1 1 auto;
    }
    #navbar-main button.navbar-toggler {
        order: -2;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        background-color: #F7CED7;
    }
    .navbar .form-inline.navbar-button {
        order: 2;
        flex-grow: 0.1;
    }
    .navbar #CollapsingNavbar{
        order: 3;
    }
}
/*
#block-event-account-menu .nav-link--en-user,
#block-event-account-menu .nav-link--zh-hant-user {
    color: #6DB072;
}
 */
header#header {
    margin-bottom: 2rem;
}
/*
div#main {
    min-height: 300px;
} 
.path-frontpage div#main {
    max-width: 100%;
}
.page-node-20 div#main {
    max-width: 100%;
}
*/
.node--unpublished {
    padding: 0;
}
.field video {
    width: 100%;
    height: auto;
}

/*
 * Block
 */
#block-languageswitcher .nav.links-inline {
    flex-wrap: nowrap;
}
.more-link {
    text-align: center;
}
/*
[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled),
a.button {
    color: #ffffff;
    background-color: #e16d06;
    border-color: #27a6ad;
}
*/
.more-link a, .views-view-table .views-field-nid a,
.node--type-activity a#edit-delete,
.node--type-activity a#edit-cancel {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.views-view-table .views-field-nid a.button {
    margin: 0.2rem 0;
}
.layout--twocol-section--50-50 .layout__region .block-views {
    margin: 0 1rem 2rem;
}
.layout--twocol-section--50-50 .layout__region .block-views .card-body {
    min-height: 20rem;
}
.user-logged-in #page .tabs .nav-tabs,
.node--type-campaign .tabs .nav-tabs {
    display: none;
}
@media all and (min-width: 560px) {
    .node.node--type-page .field--type-image,
    .node.node--type-landing-page .field--type-image {
        float: none;
        margin: 0;
        text-align: center;
    }
}
#block-fullsupport {
    margin-top: 2rem;
}

/*
 * Header
 */
.header .field--type-image img {
    margin: 0;
    width: 100%!important;
}

/*
 * Footer
 */
.site-footer {
    margin-top: 2rem;
    border-top: 1px solid!important;
    padding: 20px 0 10px!important;
}
.site-footer__top h2 {
    border-bottom: none;
    font-size: 1.8rem;
    margin-bottom: .5rem;
}
.site-footer .block {
    border: 0;
}
.social-icons {
    font-size: 1.5rem;
}
/*.social-icons .fa-facebook {
    color: #3b5998;
}
.social-icons .fa-globe {
    color: #f69431;
}*/

/*
 * Webform
 */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
@media (min-width: 576px) {
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}
.path-webform #block-event-page-title {
    display: none;
}
.webform-submission-form legend,
.webform-submission-form legend .fieldset-legend,
#profile-personal-information-edit-form legend,
.path-node legend,
.path-node legend .fieldset-legend {
    font-size: 1rem;
    font-weight: bold;
}
#edit-pics-title, #edit-release-title, #edit-disclaimer-title {
    margin-top: 2rem;
}
/*.js-form-type-radio {
    margin-bottom: 0.2rem;
}*/
fieldset>label {
    font-weight: bold;
}
.hidden {
    display: none;
}
.webform-preview label, .field__label {
    font-weight: bold;
}
@media (max-width: 991.98px) {
    .webform-preview label, .field__label {
        display: block;
    }
}
@media (min-width: 992px) {
    .webform-preview label {
        width: 300px;
    }
    .field__label {
        width: 180px;
    }
    .field--label-above .field__label {
        width: auto;
    }
}
form#node-activity-form .form-type-vertical-tabs,
form#node-activity-edit-form .form-type-vertical-tabs {
    display: none;
}
.form-group label {
    font-weight: bold;
}
.form-checkboxes .form-required::after,
.form-radios .form-required::after {
    display: inline-block;
}
.form-required::after {
    background-image: url(../images/required.svg) !important;
}
input.form-checkbox.required + label::after {
    content: '';
    vertical-align: super;
    display: inline-block;
    background-image: url(../images/required.svg);
    background-repeat: no-repeat;
    background-size: 7px 7px;
    width: 7px;
    height: 7px;
    margin: 0 0.3em;
}
.webform-submission-form fieldset.js-webform-type-fieldset,
.webform-section {
    display: block;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    /*min-inline-size: min-content;*/
    border-width: 2px;
    border-style: solid;
    border-image: initial;
    margin-bottom: 1rem;
}
.webform-preview .colon {
    margin-right: 0.5rem;
}
.webform-preview .webform-element-type-webform-shs-term-select div a {
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}
.webform-progress {
    margin-bottom: 1.5rem;
}
fieldset.js-webform-type-fieldset legend {
    width: auto;
    font-weight: bold;
}
.text-muted {
    font-size: 1rem;
}
.js-form-item-consent-from-parent {
    margin-bottom: 1rem;
}
.js-form-item-pickup-method, .js-form-item-payment-method, .js-form-item-category, .js-form-item-type-of-organisation {
    margin-bottom: 1rem;
}
.js-form-item > label {
    font-size: 1rem;
    font-weight: bold;
}
.js-form-item > label.form-check-label {
    font-weight: normal;
}
.webform-container summary {
    margin-bottom: 1rem;
}
details.webform-container-type-details:after {
    content: ' ';
    display: block;
    margin-bottom: 1.5rem;
}
.pre-scrollable p:last-child {
    margin-bottom: 0;
}
fieldset fieldset:last-child {
    margin-bottom: 0;
}
.webform-submission-form div.shs-widget-container:not(:last-child) {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.webform-preview fieldset#enrolment_form--caritas_unit a {
    color: currentColor;
    text-decoration: none;
    pointer-events: none;
}
.shs-widget-container, .shs-select {
    max-width: 100%;
}
.webform-submission-form .js-webform-select-other legend {
    margin-bottom: 0;
}

#edit-date-of-birth label.js-form-required.form-required {
    display: none;
}

label[for^="edit-date-of-birth-2-year"] {
    display: none;
}

/*
 * Participant Area
 */
.navbar-bottom-bordered {
    border-bottom: .0625rem solid #e7eaf3;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.block-ssh-virtual-run-participant-header {
    margin-bottom: 1rem;
}

/*
 * Activity (Record)
 */
.node--type-activity a#edit-delete,
.node--type-activity a#edit-cancel {
    margin-left: 1rem;
}
.node--type-activity .link.tabledrag-toggle-weight,
.node-activity-form .link.tabledrag-toggle-weight {
    display: none;
}
.form-type-duration .duration-inner-wrapper .form-type-number.form-group {
    margin-bottom: 0;
}
.node--type-activity h1.title .field--name-title {
    display: none;
}
/*
 * shariff
 */
.shariff .orientation-horizontal {
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}

/*
 * edit form
 */
#node-campaign-edit-form #edit-field-images .link.tabledrag-toggle-weight {
    display: none;
}
#node-campaign-edit-form #edit-field-images a.tabledrag-handle .handle {
    background-position-x: 0;
    background-position-y: 0;
    margin-top: 0;
}
/*#profile-personal-information-edit-form #edit-field-date-of-birth-0-value-month,
#profile-personal-information-edit-form #edit-field-date-of-birth-0-value-day {
    display: none;
}*/

/*
 * Campaign Page
 */
.node--type-campaign .field--name-field-campaigns .field__label {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
}

/*
 * Ranking Page
 */
.node--type-landing-page .main-content .block-views {
    min-height: 20rem;
    margin-bottom: 1rem;
}
@media screen and (min-width: 40em) {
    .layout--threecol-section--33-34-33 > .layout__region--second {
        flex: 0 1 32%;
        margin-left: 1%;
        margin-right: 1%;
    }
}
.block-views .card-header h4 {
    text-align: center;
}
#block-ranking .card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85px;
}
#block-ranking .block-views.card .view-content {
    min-height: 215px;
}
.path-ranking .view-content td.views-empty,
#block-ranking .block-views.card .view-content td.views-empty {
    height: 41px;
}
#block-ranking .views-view-table .views-field-counter {
    width: 10%;
}
#block-ranking .views-view-table .views-field-field-english-name,
#block-ranking .views-view-table .views-field-title,
#block-ranking .views-view-table .views-field-field-name-of-alumni-association {
    width: 60%;
}
#block-ranking .views-view-table .views-field-field-total-distance,
#block-ranking .views-view-table .views-field-field-total-donation,
#block-ranking .views-view-table .views-field-field-number-of-members,
#block-ranking .views-view-table .views-field-profile-id {
    width: 30%;
}
#block-ranking .views-view-table th {
    vertical-align: middle;
}

/*
 * Marquee
 */
div#block-views-block-news-marquee {
    font-size: 0.85rem;
}
#block-views-block-news-marquee {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
}

/*
 * Donation Form
 */
.webform-submission-donation-form-form .js-form-type-radio {
    margin-bottom: 0.2rem;
}
.webform-submission-donation-form-form .form-type-textarea {
    margin-bottom: 1rem;
}

/*
 * Mobile
 */
button.navbar-toggler {
    font-size: 1rem;
    margin-top: 0;
    padding: .5rem .75rem;
}
@media (max-width: 767.98px) {
    nav.menu--main {
        margin-left: 0 !important;
        padding-bottom: 0;
    }
    #block-event-account-menu .nav-link {
        padding-left: 0;
    }
}

/*
 * front
 */
.path-frontpage .node__content {
    margin-top: 0;
}
.path-frontpage nav.tabs {
    margin-bottom: 0;
}
.path-frontpage #about,
.path-frontpage #ruling,
.path-frontpage #souvenir,
.path-frontpage #ranking {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
@media (max-width: 767.98px) {
    #main_slogan {
        padding: 1rem 5rem 0;
        z-index: 10;
    }
    #main_drawing {
        top: -6rem;
        margin-bottom: -6rem;
        padding: 0;
    }
}
@media (min-width: 768px) {
    #main_slogan {
        position: relative;
        left: 6%;
        z-index: 10;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    #main_drawing {
        background-image: url("/sites/default/files/2021-03/bg_kv.jpg");
        background-size: cover;
    }
}
#site_total {
    position: relative;
    top: -3rem;
    margin-bottom: -3rem;
    z-index: 50;
    text-align: center;
}
#site_total .display-3 {
    font-weight: 700;
}
.site_total_description {
    font-size: 120%;
}
#about {
    background-image: url("../images/aboutbg.jpg");
    background-position: center top;
    color: #fff;
}
#about p {
    font-size: 1.2rem;
}
#about_text #burning-period {
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.2;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    #about_image {
        padding-left: 6rem;
        padding-right: 6rem;
        margin-bottom: 1rem;
    }
    #about_text {
        padding-left: 2rem;
        padding-right: 2rem;
        font-size: 1rem;
    }
}
#ruling ul {
    list-style-position: inside;
    padding-inline-start: 0;
}
#gifts {
    font-weight: 600;
    line-height: 32px;
}
@media (min-width: 768px) {
    #gifts .gifts {
        overflow: hidden;
    }
    #gifts div.gift+div.gift {
        border-left: 1px solid #92a9af;
        padding-top: 100px;
        padding-bottom: 100px;
        margin-top: -100px;
        margin-bottom: -100px;
    }
}
#souvenir {
    background-color: #f5f6f8;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 32px;
}
.souvenir-text {
    color: #92a9af;
    font-size: 1.2rem;
    white-space: nowrap;
}
.souvenir-highlight {
    color: #e10634;
    font-size: 2.1rem;
    font-weight: 700;
}
.souvenir-details {
    font-size: 1rem;
    font-weight: 600;
}
@media (max-width: 767.98px) {
    #souvenir .row .col-6:nth-child(2n) {
        border-left: 1px solid #92a9af;
    }
    #souvenir .row .col-6:nth-child(-n+2) {
        border-bottom: 1px solid #92a9af;
    }
    #souvenir .row .col-6 {
        padding-top: 1rem;
    }
}
@media (min-width: 768px) {
    #souvenir .row .col-md-3:not(:first-child) {
        border-left: 1px solid #92a9af;
    }
}
#ranking .card {
    border: none;
}
#ranking .view-individual-calories-ranking table tbody tr:nth-child(-n+3) td.views-field-field-english-name {
    color: #b15757;
    font-size: 1.2rem;
    font-weight: bold;
}
#ranking .view-individual-calories-ranking table tbody tr:nth-child(-n+3) td.views-field-field-total-calories {
    color: #81969b;
    font-size: 1.2rem;
    font-weight: bold;
}
#ranking table.views-view-table tr th {
    border: 0;
}
#ranking tr td,
#ranking tr th {
    border: 0;
    color: #81969b;
    font-size: 1.1rem;
    text-align: center;
}
#ranking .ranking-bottom {
    background-image: url("/sites/default/files/2021-03/wave_crop.png");
    background-size: cover;
    min-height: 300px;
    background-position: left top;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}
.node--type-landing-page .main-content .block-views-blockindividual-calories-ranking-block-individual-calories {
    min-height: 40rem;
}
#ranking .ranking-photo-left {
    text-align: right;
}
@media (max-width: 767.98px) {
    #ranking .ranking-photo-left {
        text-align: center;
        padding-left: 6rem;
        padding-right: 6rem;
        margin-bottom: 1.5rem;
    }
}
#ranking .ranking-photo-right {
    text-align: left;
}
.path-frontpage .layout.layout--twocol-section.layout--twocol-section--67-33 {
    max-width: 1140px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
#remark {
    padding-right: 0.5rem;
}
#remark ol {
    font-size: 0.8rem;
}
#kcal-reference {
    padding-left: 0.5rem;
}
#kcal-reference table {
    font-size: 70%;
}
.very-small {
    font-size: 65%;
}

/*
 * Carousel
 */
@media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 3 */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
    transform: translateX(0);
}

/*
 * Member Area
 */
.calories-highlight {
    font-size: 120%;
}
.my-records .table thead th,
.my-records .table thead td,
.my-records .table th,
.my-records .table td {
    vertical-align: middle !important;
}
.my-records .table thead th {
    white-space: nowrap;
}
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive-16by9::before {
    padding-top: 56.25%;
}
.embed-responsive::before {
    display: block;
    content: "";
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.featured-bottom-first,
.featured-bottom-second,
.featured-bottom-third {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#block-sociallinks,
#block-languageswitcher {
    float: left;
}
#block-sociallinks a {
    line-height: 38px;
}
#navbar-main #block-sociallinks a:hover,
#navbar-main #block-sociallinks a:focus {
    background-color: inherit;
    border-color: inherit;
}
summary {
    font-size: 1.5rem;
    font-weight: 700;
}
/* .webform-submission-form legend .fieldset-legend {
    font-weight: normal;
} */
ul.yellow-star {
    list-style-image: url('../images/yellow-star-16.png');
}
ul.pink-star {
    list-style-image: url('../images/pink-star-16.png');
}
ul.green {
    list-style: none;
}
ul.green>li::before {
    content: "\2022";
    color: green;
    font-weight: bold;
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
}
ul.green-square {
    list-style: none;
}
ul.green-square>li::before {
    content: "\25A0";
    color: green;
    font-weight: bold;
    display: inline-block;
    width: 1.4em;
    margin-left: -1.4em;
}
/*
.node--type-page h3, .node--type-page .h3,
#block-ranking h2, #block-ranking .h2,
#block-eventinformation h3, #block-eventinformation .h3
{
    font-size: 1.5rem;
    color: #fff;
    background-color: #fe786d;
    display: inline-block;
    padding: 0.5rem 3rem;
    margin-bottom: 1rem;
}
*/
/* #block-eventinformation h3::before, #block-eventinformation .h3::before {
    content: ' ';
    background-color: #ffc851;
    width: 5rem;
    margin-left: -8rem;
    margin-right: 3rem;
    display: inline-block;
    line-height: 1.2;
    height: 1.2rem;
} */
#edit-actions-reset {
    margin-left: 3rem;
}
.confirm-parent, .password-parent {
    max-width: 100%;
}
.duration-inner-wrapper .js-form-item > label {
    font-weight: normal;
}
.node--type-campaign #edit-body-0-format-help {
    display: none;
}

/**
 * Social icons
 */
.social-icon-wechat {
    position: relative;
}
#wechat-qrcode {
    display: none;
    width: 200px;
    height: 212px;
    background-image: url("../images/AADOWechatQRcode.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0;
    top: 40px;
}
.social-icon-wechat:hover>#wechat-qrcode{
    display: block;
    z-index: 100;
}

/**
 * Campaign search
 */
#views-exposed-form-campaign-search-page-donate #edit-application-no.form-control.is-invalid {
    border-color: black;
}
.page-view-campaign-search .alert.alert-dismissible.alert-danger {
    display: none;
}
.page-view-campaign-search #edit-application-no-error.error {
    display: none !important;
}

/**
 * Photo
 */
@media (min-width: 560px) {
    .node .field--type-image {
        float: inherit;
    }
}

/**
 * Search campaign page
 */
.view.view-all-campaigns.view-id-all_campaigns.view-display-id-page_fundraising {
    width: 100%;
    height: 100%;
    padding: 40px;
    background: rgba(255, 255, 255, 0.60);
    border-radius: 20px;
    border: 1px #EBF0F5 solid;
    backdrop-filter: blur(40px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.view-display-id-page_fundraising #views-exposed-form-all-campaigns-page-fundraising .form-radios {
    display: flex;
    flex-wrap: wrap!important;
}
.view-display-id-page_fundraising #views-exposed-form-all-campaigns-page-fundraising input[type="radio"] {
    display: none;
}
.view-display-id-page_fundraising #views-exposed-form-all-campaigns-page-fundraising .form-check {
    padding-left: 0.5em;
}
.view-display-id-page_fundraising #views-exposed-form-all-campaigns-page-fundraising label {
    display: inline-block;
    font-size: 16px;
    color: #6A7A85;
    background-color: #EBF0F5;
    padding: 5px 10px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}
.view-display-id-page_fundraising #views-exposed-form-all-campaigns-page-fundraising input[type="radio"]:checked + label {
    border: 1px solid #005180;
    background-color: #D6F0FF;
    color: #005180;
}
.view-display-id-page_fundraising #views-exposed-form-all-campaigns-page-fundraising .form-item-combine {
    padding-left: 0.5rem;
}

.web-banner img{
    border-radius: 50px !important;
    border: solid 3px #FFF;
}

.web-banner{
    background: none;
    padding: 30px 70px;
}

nav#navbar-main{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #aaa;
    background-color: #fff;
}

@media (max-width: 991.98px) {
    #header .container {
        padding: 0;
    }
    nav#navbar-main {
        margin: 0!important;
    }
}

.form-inline.navbar-button {
    justify-content: right;
}

ul.clearfix.nav.navbar-nav {
    /*flex-direction: row;*/
    justify-content: center;
}

section.row.region.region-featured-top{
    margin-bottom: 2rem;
}

section.row.region.region-featured-top ul.clearfix.nav.navbar-nav .nav-item{
    padding-bottom: 0 !important;
    padding: 5px 25px;
}

section.row.region.region-featured-top ul.clearfix.nav.navbar-nav .nav-item a{
    color: black;
    font-weight: normal;
}

section.row.region.region-featured-top ul.clearfix.nav.navbar-nav .nav-item a.active{
    color: #009FE3;
    font-weight: bold;
}

section.row.region.region-featured-top ul.clearfix.nav.navbar-nav .nav-item.active{
    border-bottom: solid 3px #009FE3;
}
/*
section.row.region.region-featured-top ul.clearfix.nav.navbar-nav .nav-item:after {
    display:block;
    content: '';
    border-bottom: solid 3px #009FE3;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

section.row.region.region-featured-top ul.clearfix.nav.navbar-nav .nav-item:hover:after {
    transform: scaleX(1);
}
*/

/*
div#block-layout3-mainbanner .content {
    overflow: hidden;
    border-radius: 0 0 0 100px;
    margin: 50px 0 80px 130px;
}

div#block-layout3-mainbanner .content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 100px);
    height: 72%;
    max-height: 400px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0 0 0 100px;
    border-right: none;
    background: transparent;
    transform: translate(100px, 180px);
    z-index: -1;
}

div#block-layout3-mainbanner .content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 90vw;
    height: 100%;
    max-height: 630px;
    background: #009FE31A;
    z-index: -2;
    clip-path: inset(0 50% 0 0);
}*/

.layout3-homepage-header-left {
    min-height: 630px;
    background: #979E071A;
    text-align: left;
    padding: 3em;
}

.layout3-homepage-header-right {
    background-position: center;
    background-size: cover;
    z-index: -2;
}
.layout3-homepage-event-title {
    color: #001922;
    text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.16);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 6em;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    margin-right: -3em;
    padding: 40px 30px;
}

.layout3-homepage-event-info {
    color: #001922;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    padding-left: 30px;
}

.layout3-homepage-event-enrolment {
    padding: 40px 30px;
}

.layout3-homepage-event-enrolment a {
    padding: 15px 20px;
    text-decoration: none;
}

.layout3-homepage-header-logos {
    min-height: 98px;
    margin-top: -98px;
}

@media (min-width: 1280px) {
    .layout3-homepage-header-left {
        min-height: 730px;
        padding: 6em;
        padding-left: 10vw;
    }
}

@media (max-width: 768px) {
    .layout3-homepage-header-left {   
        min-height: auto;
        text-align: center;
    }
    .layout3-homepage-header-right {   
        min-height: 600px;
    }
    .layout3-homepage-event-title {   
        color: #000;
        text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
        font-size: 3em;
        padding: 30px 20px;
        margin-right: 0;
    }
    .layout3-homepage-event-info {   
        font-size: 17px;
        padding-left: 0;
    }
}

section.row.region.region-featured-top ul.clearfix.nav.navbar-nav{
    background: rgba(0, 112, 176, 0.18);
    max-width: 1000px;
    display: inline-flex;
    border-radius: 25px;
    padding: 0 25px;
}

section.row.region.region-featured-top nav#block-event-mainnavigation {
    text-align: center;
}


.table-responsive.table-info td:first-child {
    background: var(--colour-brand-600, #007EB4)!important;
    border-color: white;
    color: white;
}

.table-responsive.table-info tr:first-child td:first-child {
    border-radius: 15px 0 0 0;
}

.table-responsive.table-info tr:first-child td:last-child {
    border-radius: 0 15px 0 0;
}

.table-responsive.table-info tr:last-child td:first-child {
    border-radius: 0 0 0 15px;
}

.table-responsive.table-info tr:last-child td:last-child {
    border-radius: 0 0 15px 0;
}

.table-responsive.table-info td {
    padding: 20px !important;
}

.table-responsive.table-info td {
    background: #f5f5f5;
    border: white solid !important;
}
.table-responsive.table-info{
    width: 100%;
}

/* Page Title */
h1.title::after {
    margin-left: 15px;
}
h1.title::before {
    margin-left: -15px;
    transform: translateX(-100%);
}
h1.title::before, h1.title::after {
    content: '';
    display: inline-block;
    width: 40%;
    height: 1px;
    position: absolute;
    background: #ccc;
    margin-top: 0.8em;
}
h2.title::after {
    margin-left: 15px;
}
h2.title::before {
    margin-left: -15px;
    transform: translateX(-100%);
}
h2.title::before, h2.title::after {
    content: '';
    display: inline-block;
    width: 40%;
    height: 1px;
    position: absolute;
    background: #ccc;
    margin-top: 0.8em;
}
@media (max-width: 991.98px) {
    h1.title::before, h1.title::after,
    h2.title::before, h2.title::after {
        width: 30%!important;
    }
}
@media (max-width: 768px) {
    h1.title::before, h1.title::after,
    h2.title::before, h2.title::after {
        width: 30%!important;
    }
}
@media (max-width: 560px) {
    h1.title::before, h1.title::after,
    h2.title::before, h2.title::after {
        width: 20%!important;
    }
}

h1.title{
    text-align: center;
    /* color: #009FE3; */
    margin-bottom: 1.5rem;
    color: #001922;
    font-size: 20px;
    font-family: Mulish-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-transform: uppercase;
    line-height: 30px;
    letter-spacing: 4px;
    word-wrap: break-word;
}
h2.title{
    text-align: center;
    /* color: #009FE3; */
    margin-bottom: 1.5rem;
    color: #001922;
    font-size: 18px;
    font-family: Mulish-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-transform: uppercase;
    line-height: 30px;
    letter-spacing: 4px;
    word-wrap: break-word;
}
@media (max-width: 560px) {
    h1.title{
        text-align: center;
        font-size: 14px!important;
    }
    h2.title{
        text-align: center;
        font-size: 14px!important;
    }
}

/* Navbar */
#navbar-main a, .link {
    color: #120D31;
    font-size: 16px!important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 500!important;
    line-height: 24px!important;
    word-wrap: break-word!important;
}
div#CollapsingNavbar {
    padding-left: 20px;
}
@media (max-width: 991.98px) {
    div#CollapsingNavbar {
        padding-left: 0;
        border-top: 1px solid #aaa;
        width: 100%;
        text-align: center;
    }
}
span.en.nav-link.is-active,
span.zh-hant.nav-link.is-active {
    display: none;
}

html:lang(zh-hant) span.zh-hant.nav-link{
    display: none!important;
}
html:lang(en) span.en.nav-link{
    display: none!important;
}

a.language-link.is-active {
    display: none!important;
}
span.nav-link+span.nav-link{
    border: 0!important;
}
a.language-link {
    text-decoration: none;
    border: 1px #444 solid;
    padding: 8px 10px;
}
#navbar-main.navbar>.container {
    max-width: 1920px;
}

/* Footer */
.d-flex.justify-content-right.flex-wrap {
    justify-content: right;
}

.site-footer__bottom {
    border: 0 !important;
    margin-top: 0!important;
}
.site-footer__top .region {
    width: 100%;
}
section.row.region.region-footer-fifth {
    justify-content: space-between;
}
div#block-layout3-copyright {
    width: auto;
}
div#block-layout3-enquiry {
    width: auto;
}
div#block-layout3-enquiry h3 {
    display: none;
}
@media (max-width: 767.98px) {
    .site-footer__bottom .region{
        margin-top: 0;
    }
    .row.footer-info {
        display: inline-block;
        width: 100%;
    }

    .col.footer-copyright p {
        text-align: center;
    }

    .col.footer-contact div {
        justify-content: center !important;
    }
    .progress-tracker{
        margin: 1rem 0 3rem 0 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    div#block-layout3-copyright {
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
        order: 2;
    }
    div#block-layout3-enquiry {
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
    }
}


/* Content Block */
.event-info, .payment-info, form#webform-submission-enrolment-form-add-form,
.campaign-content, div#block-event-content,
.page-user-login section.section{
    width: 100%;
    height: 100%;
    padding: 40px;
    background: rgba(255, 255, 255, 0.60);
    border-radius: 20px;
    border: 1px #EBF0F5 solid;
    backdrop-filter: blur(40px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    /*display: inline-flex;*/
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.btn-right{
    text-align: right;
    justify-content: right;
}

/* Login Page */

.page-user-login nav.tabs{
    /*margin: 2rem;*/
}

.page-user-login a.nav-link.active.nav-link--en-user-login,
.page-user-login a.nav-link.active.nav-link--zh-hant-user-login{
    background-color: transparent;
    border: 0;
    border-bottom: #979E07 4px solid;
    color: #979E07;
}

.page-user-login a.nav-link {
    color: #000;
}

.page-user-login a.nav-link:hover {
    color: #979E07;
}

/* Personal Page */

button#btnBackToHome, button#btnEditInfo, button#btnToCampagin,
a#btnBackToHome, a#btnEditInfo, a#btnToCampagin{
    border-radius: 50px;
    padding: 10px 20px 10px 10px;
}

a#btnBackToHome:hover g#edit path#Vector,
a#btnEditInfo:hover g#edit path#Vector{
    fill:#979E07;
}
a#btnToCampagin:hover g#View path#Vector,
a#btnToCampagin:hover g#View path#Vector_2{
    stroke: #fff;
}

.btn-backtohome svg, .btn-edit svg{
    padding: 0 0 4px 0;
}
.card-event-info{
    padding: 32px;
    border: 0;
    background: #EBF0F5;
    gap: 15px;
}
.card-event-info-title{
    font-size: 1rem;
}
.card-event-info .text-info{
    color: #6A7A85!important;
}
.card-personal-info .text-info{
    color: #6A7A85!important;
}
.card-personal-info{
    border: 0;
}
h5.card-title.card-title-name {
    color: #979E07;
}
h1.pinfo-head {
    color: #979E07;
    font-size: 32px;
    margin-bottom: 2.5rem;
    width: max-content;
    font-weight: 700;
    line-height: 36px;
    margin-left: -5px;
    text-align: left;
}

h2.pinfo-title{
    color: #000;
    font-size: 1.2rem;
    margin-left: -5px;
    font-weight: normal;
    text-align: left;
}

form#views-exposed-form-all-campaigns-page-fundraising .d-flex.flex-wrap::before {
    content: "Category:";
    color: #6A7A85;
    font-size: 20px;
    padding: 10px;
    font-weight: bold;
}




img.img-fluid.w-100.card-img-top {
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 0.6em;
}

img.image-style-media-image-768px {
    height: 180px;
    min-width: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    margin-bottom: 0.6em;
}

.view-all-campaigns .card{
    border: 0;
    border-radius: 20px;
    background-color: transparent;
}

.view-all-campaigns .card-body{
    text-align: left;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    padding: 20px 0;
}

.view-all-campaigns .card-body a{
    color: #212121;
    text-decoration: none;
}
.view-all-campaigns .card-body a:hover{
    color: #23aeff;
}

.view-all-campaigns .card-body a.btn.btn-primary{
    display: none;
}

.view-all-campaigns .card-body p.card-text::before {
    content: "Total Amount:  ";
    color: #aaa;
    font-size: 12px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.view-all-campaigns .card-body p.card-text{
    color: #005180;
    font-size: 18px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.view-all-campaigns .view-content{
    padding: 10px;
}

.campaign-image img {
    border-radius: 50%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.campaign-btn a{
    padding: 10px 20px;
    border-radius: 50px;
}
.campaign-btn a g#Group{
    padding: 0 0 2px 0;
}

.campaign-btn a:hover g#Group path#Vector{
    fill:#979E07;
}
.campaign-btn a:hover g#Group path#Vector_2{
    stroke: #979E07;
}
.campaign-btn a:hover g#Group path#Vector_3{
    stroke: #979E07;
}

.campaign_other_link{
    color: #8F8F8F;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 0;
}


.share-media-block{
    border-radius: 20px;
    border: 1px solid #99DAFF;
    background: #D6F0FF;
    padding: 32px 40px;
}

.campaign-body {
    padding-top: 30px;
    color: #8F8F8F;
    font-size: 1rem;
    /*line-height: 19px;*/
}

@media only screen and (min-width: 360px) {
    .shariff .orientation-horizontal.button-style-icon-count li, .shariff .orientation-horizontal.button-style-standard li {
        min-width: auto!important;
    }
}

@media (min-width: 767.98px) {
    li.shariff-button a {
        padding: 5px 15px;
    }
    .shariff li, .shariff li a {
        height: auto;
    }
    li.shariff-button {
        border-radius: 20px;
    }
}

@media (max-width: 767.98px) {
    li.shariff-button .fab {
        font-size: 20px !important;
    }
    li.shariff-button {
        border-radius: 50%;
    }
    img.img-fluid.w-100.card-img-top, img.image-style-media-image-768px{
        height: 200px;
    }
}

@media (max-width: 576px) {
    img.img-fluid.w-100.card-img-top, img.image-style-media-image-768px {
        height: 260px;
    }
}

form#views-exposed-form-all-campaigns-page-fundraising .form-item-combine .form-control{
    border-radius: 50px;
    border: 1px solid #000;
    /*background: #FFF;
    margin: 8px 5px 5px 5px;*/
    min-width: 500px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' class='bi bi-search' viewBox='0 0 20 20'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat right;
    opacity: 0.6;
}

@media (max-width: 767.98px) {
    form#views-exposed-form-all-campaigns-page-fundraising .form-item-combine .form-control{
        min-width: auto;
    }
    .js-form-item.js-form-type-textfield.form-type-textfield.js-form-item-combine.form-item-combine {
        width: 100%;
        margin-right: 10px;
    }
}

.progress-bar.progress-bar-striped.bg-warning.progress-bar-animated {
    background-color: #979E07 !important;
}

a.btn.btn-primary.button.donation-button {
    border-radius: 50px;
    padding: 8px 18px;
}

a.btn.btn-primary.button.donation-button:hover{
    background-color: #99DAFF;
    border-color: #99DAFF;
    color: white;
}

li.shariff-button a {
    max-width: 45px;
    max-height: 45px;
    padding: 8px;
    border-radius: 50%;
}

ul.theme-colored.orientation-horizontal.button-style-standard.shariff-col-6 {
    display: block;
}

@media (max-width: 767.98px) {
    .shariff li .fab, .shariff li .far, .shariff li .fas {
        width: 20px !important;
        height: 35px !important;
        line-height: 1;
    }
}

.alert-wrapper {
    display: none;
}
.view-footer {
    display: none;
}
.fa, .fas {
    font-weight: 900;
}
.fa, .far, .fas {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    color: #000;
}
span.fas.fa-phone-alt::before {
    content: "\f879";
}
.fa-phone-alt:before {
    content: "\f879";
}
.fa-envelope:before {
    content: "\f0e0";
}
a.nav-link.nav-link--en-form-enrolment-form,
a.nav-link.nav-link--zh-hant-form-enrolment-form,
.menu--highlight-buttons a.nav-link{
    height: 80px;
    vertical-align: middle;
    padding: 25px;
}

@media (max-width: 991.98px) {
    div#block-layout3-sitelogo img {
        max-width: 80px;
    }
    a.nav-link.nav-link--en-form-enrolment-form, a.nav-link.nav-link--zh-hant-form-enrolment-form,
    .menu--highlight-buttons a.nav-link{
        height: 100%;
        vertical-align: middle;
        padding: 17px;
    }
}



/* Components */

.wp-block-heading{
    color: #979E07;
    font-weight: 500;
    line-height: 36px;
    word-wrap: break-word
}
.block-text{
    margin-left: 3em;
    margin-right: 3em;
    margin-bottom: 30px;
}

/* Cards */

.wp-block-example-blocks-card {
    /*border-radius: 20px;
    padding: 2em;*/
    background: rgba(0, 159, 227, 0.1);
    display: flex;
    gap: 20px;
}
.wp-block-example-blocks-card h2 {
    color: #001922;
    font-size: 24px;
    font-family: Oswald;
    font-weight: 500;
    line-height: 36px;
    word-wrap: break-word;
}

.wp-block-example-blocks-card img{
    /*border-radius: 20px;*/
    object-fit: cover;
}
.wp-block-example-blocks-card p {
    color: #001922;
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.wp-block-example-blocks-card.is-style-image-right {
    flex-direction: row-reverse;
}

.wp-block-example-blocks-card>:last-child {
    width: 50%;
}

.wp-block-example-blocks-card>:first-child {
    width: 50%;
}
.wp-block-example-blocks-card-content {
    padding: 5%;
}

.wp-block-example-blocks-card p {
    color: #001922;
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

a.wp-block-example-blocks-card-btn::before {
    content: " > ";
    padding: 9px 9px 10px 16px;
    text-decoration: none;
    background-color: #979E07;
    border-radius: 50%;
    color: white;
    font-weight: 400;
    font-size: 1.2em;
    margin: 0 10px 0 0;
}

a.wp-block-example-blocks-card-btn:hover::before{
    background-color: white!important;
    color: #979E07!important;
    transition: 0.6s ease;
}
a.wp-block-example-blocks-card-btn {
    color: #979E07;
    text-decoration: none;
}

a.wp-block-example-blocks-card-btn:hover{
    color: #00b2e2!important;
}


@media (max-width: 991.98px) {
    .wp-block-example-blocks-card p {
        font-size: 14px!important;
    }
}
@media (max-width: 767.98px) {
    .wp-block-example-blocks-card{
        display: grid;
    }
    .wp-block-example-blocks-card img{
        width: 100%!important;
    }
    .wp-block-example-blocks-card p {
        font-size: 14px!important;
    }
    .wp-block-example-blocks-card>:first-child {
        width: 100%!important;
    }
    .wp-block-example-blocks-card>:last-child{
        width: 100%!important;
    }
}

/* Gallery */

.wp-block-gallery {
    --t: 15s;
}

.wp-block-gallery {
    position: relative;
    display: -webkit-inline-box;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
    - webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
    padding-top: 3em;
    border-top: solid 1px #ccc;
}

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){
    width: 20%;
}

.wp-block-gallery > figure img {
    margin: 10px;
    padding: 5px 5px;
    border-radius: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
}

.wp-block-gallery > figure figure:hover {
    background-color: #4caf50;
}

.wp-block-gallery > figure {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
    animation-delay: calc(var(--t) * -1);
}

@keyframes animate {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.wp-block-gallery > figure:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
    animation-delay: calc(var(--t) / -2);
    animation-iteration-count: infinite;
}

@keyframes animate2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }

}

.wp-block-gallery:hover > figure {
    animation-play-state: paused;
}

@media screen and (max-width: 768px) {
    .scroll {
        width: 95vw;
    }

    .scroll > figure span {
        background-color: #4caf50;
    }

    .img-box .wp-block-image{
        width: 15vw;
        height:15vw;
    }
}


@media (max-width: 767.98px) {
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){
        width: 45%;
    }

}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-380px * 4));
    }
}

.slider {
    /*background: rgba(255, 250, 240);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
    height: 600px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, #f0faff 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 600px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    animation: scroll 50s linear infinite;
    display: flex;
    width: calc(360px* 8);
}

.slider .slide {
    padding: 10px;
}

/* Webform */

.webform-progress-tracker .progress-step.is-complete .progress-marker::before, .webform-progress-tracker .progress-step.is-complete .progress-marker::before, .webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before, .webform-progress-tracker .progress-step.is-complete .progress-marker::after {
    background-color: #C9D0D4!important;
}

.webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before, .webform-progress-tracker .progress-step:hover .progress-marker::before, .webform-progress-tracker .progress-step .progress-marker::after {
    background-color: #C9D0D4!important;
}


.webform-progress-tracker .progress-step.is-complete .progress-marker::before {
    background-color: #979E07!important;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
    background-color: #979E07!important;
}

.progress-marker::before{
    background-color: #979E07!important;
    width: 40px!important;
    height: 40px!important;
}

.progress-marker::after{
    top: 20px!important;
    left: 66%!important;
    width: 66%!important;
}

legend#edit-category--wrapper-legend span.fieldset-legend.js-form-required.form-required {
    font-size: 32px;
    /* font-family: Inter; */
    font-weight: 500;
    line-height: 66px;
    word-wrap: break-word;
    color: #979E07;
}

.webform-section {
    border-color: #eee;
    padding: 20px;
    border-radius: 20px;
}


/* ------ Components - with old layout editor -------- */

/* 1 - Text */

h3.wp-block-heading.block-text-heading {
    font-weight: 700;
    color: #001922;
}

div.block-text-content{
    width: 100%;
    color: #001922;
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.content-block{
    padding: 20px 0;
}

/* 2 - Table */

tr td, tr th {
    padding: 15px 25px;
    vertical-align: middle !important;
}
@media (max-width: 767.98px) {
    tr td, tr th {
        padding: 10px;
    }
}

tr:first-child th:first-child,
tr:first-child td:first-child{
    border-radius: 15px 0 0 0;
}

tr:last-child td:first-child{
    border-radius: 0 0 0 15px;
}

tr:first-child th:last-child,
tr:first-child td:last-child{
    border-radius: 0 15px 0 0;
}

tr:last-child td:last-child{
    border-radius: 0 0 15px 0;
}

/* 3 - Number List */

.number-list-sm {
    width: 24%;
    align-self: stretch;
    padding: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: inline-flex;
    /*border-right: 1px solid #ccc;*/
    margin-bottom: 1em;
    min-height: 200px;
}

.number-list-bg {
    width: 100%;
    align-self: stretch;
    padding: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: inline-flex;
    border-top: 1px solid #ccc;
}


@media (max-width: 767.98px) {
    .number-list-sm {
        width: 100%;
        padding: 30px;
        border-right: 0;
    }
    .number-list-bg{
        padding: 30px;
    }
}

.nubmer-list-head {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.nubmer-list-no {
    color: var(--text-text-primary, #001922);
    font-size: 24px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 600;
    line-height: 36px;
    word-wrap: break-word;
}

.nubmer-list-title {
    color: var(--text-text-primary, #001922);
    font-size: 20px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 600;
    line-height: 30px;
    word-wrap: break-word;
}

.nubmer-list-body {
    align-self: stretch;
    color: var(--text-text-primary, #001922);
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.nubmer-list-content {
}
/* 4 - Horizontal Card */

/* 5 - Vertical Card */

.section-vertical-card{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 32px;
    display: inline-flex;
    padding: 2em;
}

.vertical-card{
    min-width: 363px;
    width: 30%;
    min-height: 650px;
    background: white;
    overflow: hidden;
    border-top-right-radius: 32px;
    border-bottom-left-radius: 32px;
    outline: 1px var(--boarder-boarder-primary, #C9D0D4) solid;
    outline-offset: -1px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}

.vertical-card-img{
    align-self: stretch;
}

.vertical-card-body{
    align-self: stretch;
    padding: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex
}

.vertical-card-body-content{
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: inline-flex;
}

.vertical-card-head{
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex;
}

.vertical-card-subtitle{
    align-self: stretch;
    height: 21px;
    color: var(--text-text-secondary, #6A7A85);
    font-size: 14px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 21px;
    word-wrap: break-word;
}

.vertical-card-title{
    align-self: stretch;
    color: var(--text-text-primary, #001922);
    font-size: 28px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    line-height: 42px;
    word-wrap: break-word;
}

.vertical-card-text{
    align-self: stretch;
    color: var(--text-text-primary, #001922);
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

@media (max-width: 767.98px) {
    .section-vertical-card{
        display: block;
        text-align: center;
    }
    .vertical-card {
        width: 100% !important;
        margin-top: 20px;
    }
}

/* 6 - Item List */

.item-list {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    display: inline-flex;
    padding: 50px 20px;
}

.item-list-item {
    width: 30%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: grid;
}

img.item-list-img {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.10);
    border-radius: 20px 20px 0 0;
    background-image: url(https://placehold.co/330x330);
    background-size: cover;
}

.item-list-item-body {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

.item-list-body {
    margin-top: -140px;
    background-color: #000000A6;
    width: 100%;
    padding: 20px;
    border-bottom: 6px solid #009FE3;
}

.item-list-item-title {
    align-self: stretch;
    height: 36px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 500;
    line-height: 36px;
    word-wrap: break-word;
}

.item-list-item-details {
    align-self: stretch;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

@media (max-width: 767.98px) {
    .item-list{
        display: block;
    }
    .item-list-item {
        width: 100%;
    }
    .item-list-item-title{
        min-height: 36px;
        font-size: 1em;
        line-height: 25px;
    }
    .item-list-item-details{
        font-size: 1em;
        line-height: 25px;
    }
}



/*
* Theme Switcher
*/

div#block-layout1-switchtheme,
div#block-layout2-switchtheme,
div#block-layout3-switchtheme{
    background: #979E0767;
    color: black !important;
    position: fixed;
    bottom: 10%;
    right: 3%;
    width: 200px;
    border-radius: 20px;
    opacity: 0.8;
    z-index: 2;
}

div#block-layout1-switchtheme a, div#block-layout1-switchtheme li::marker,
div#block-layout2-switchtheme a, div#block-layout2-switchtheme li::marker,
div#block-layout3-switchtheme a, div#block-layout3-switchtheme li::marker{
    color: #fff;
}

/* UAT Message */

.uat-notification{
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    min-height: 64px;
    justify-content: center;
    padding: 16px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 5;
}

.uat-notification-block{
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-start;
}

.uat-notification-icon{
    position: relative;
}

.uat-notification-text{
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

@media (max-width: 767.98px) {
    .uat-notification{
        bottom: 0;
    }
}

@media (min-width: 768px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

.dropdown-menu .menu-item--expanded>.dropdown-menu {
    top: 0px;
    left: 100%;
    margin-top: -1px;
    margin-left: 0px;
    border-radius: 0
}

@media (max-width: 767px) {
    ul.dropdown-menu.show li.menu-item--expanded>ul.dropdown-menu {
        display: block;
        border: 0;
    }
}