@import url(root.css);
@import url(font.css);
@import url(cookie-policy.css);

html {
    scroll-behavior: smooth;
}

html,
body {
    background-color: var(--background-bg-beige40);
}

::selection {
    color: var(--text-body-on-light);
    background-color: var(--background-bg-mint);
}

::-moz-selection {
    color: var(--text-body-on-light);
    background-color: var(--background-bg-mint);
}

body {
    font-family: var(--hg-font-noto);
    font-size: var(--hg-font-2xs);
    font-weight: var(--hg-font-regular);
    line-height: normal;
    color: var(--text-body-on-light);
}

a,
a:hover,
.btn-link,
.btn-link:hover {
    color: var(--text-caption-on-light);
}

.w-fitcontent {
    width: fit-content !important;
}

.mw-fitcontent {
    max-width: fit-content !important;
}

.grecaptcha-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (min-width: 768px) {
    [standard-themed-scrollbar]::-webkit-scrollbar {
        background: transparent;
        width: 12px;
    }

    [standard-themed-scrollbar]::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        background-color: transparent;
    }

    [standard-themed-scrollbar]:hover::-webkit-scrollbar-thumb {
        background-color: var(--mouse-scroll-primary);
    }

    [standard-themed-scrollbar] {
        scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }

        [standard-themed-scrollbar]:hover {
            scrollbar-color: var(--mouse-scroll-primary) transparent;
        }
}
/*Header*/
header {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
    background-color: var(--background-bg-white);
    box-shadow: inset 0px -1px 0 0 var(--line-line-primary);
}

    header .container {
        padding: 0 12px;
    }

    header .navbar-header {
        height: 52px;
        justify-content: center;
    }

    header .fn-backPage {
        -webkit-mask-image: var(--hg-icn-arrow-left);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 24px;
        mask-image: var(--hg-icn-arrow-left);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: 24px;
        width: 24px;
        height: 24px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: #000;
        padding: 0;
        border: none;
    }

        header .fn-backPage:hover {
            background: #000;
        }

    .fn-top-logo {
        max-width: 132px;
        height: auto;
    }

@media (min-width: 576px) {
    header .container {
        padding: 0 20px;
    }
}

@media (min-width: 768px) {
    header .navbar-header {
        height: 68px;
    }
}

@media (min-width: 992px) {
    .fn-top-logo {
        max-width: 150px;
    }
}

/* Start Text Color */
.text-body-on-dark {
    color: var(--text-body-on-dark);
}

.text-body-on-light {
    color: var(--text-body-on-light);
}

.text-caption-on-dark {
    color: var(--text-caption-on-dark);
}

.text-caption-on-light {
    color: var(--text-caption-on-light);
}

.text-counter {
    color: var(--text-counter);
}

.text-disable {
    color: var(--text-disable);
}

.text-error {
    color: var(--text-error);
}

.text-highlight-mint {
    color: var(--text-highlight-mint);
}

.text-highlight-mint-neon {
    color: var(--text-highlight-mint-neon);
}

.text-highlight-mint-special {
    color: var(--text-highlight-mint-special);
}

.text-highlight-orange-special {
    color: var(--text-highlight-orange-special);
}

.text-highlight-teal {
    color: var(--text-highlight-teal);
}

.text-highlight-violet-special {
    color: var(--text-highlight-violet-special);
}

.text-pending {
    color: var(--text-pending);
}

.text-placeholder {
    color: var(--text-placeholder);
}

.text-success {
    color: var(--text-success);
}

.text-text-btn-mint {
    color: var(--text-text-btn-mint);
}

.text-white {
    color: var(--text-white);
}

.text-text-btn-white {
    color: var(--text-text-btn-white);
}

.text-title-on-dark {
    color: var(--text-title-on-dark);
}

.text-title-on-light {
    color: var(--text-title-on-light);
}

.text-price-travel {
    color: var(--text-price-travel);
}

.text-discount {
    color: var(--text-discount);
}
/* End Text Color */
/* Start Background Color */
.bg-beige100 {
    background-color: var(--background-bg-beige100);
}

.bg-beige40 {
    background-color: var(--background-bg-beige40);
}

.bg-beige60 {
    background-color: var(--background-bg-beige60);
}

.bg-black {
    background-color: var(--background-bg-black);
}

.bg-black-light {
    background-color: var(--background-bg-black-light);
}

.bg-disable {
    background-color: var(--background-bg-disable);
}

.bg-disable-darken {
    background-color: var(--background-bg-disable-darken);
}

.bg-lime-highlight {
    background-color: var(--background-bg-lime-highlight);
}

.bg-mint {
    background-color: var(--background-bg-mint);
}

.bg-mint-highlight {
    background-color: var(--background-bg-mint-highlight);
}

.bg-mint-light {
    background-color: var(--background-bg-mint-light);
}

.bg-mint-neon-highlight {
    background-color: var(--background-bg-mint-neon-highlight);
}

.bg-orange-highlight {
    background-color: var(--background-bg-orange-highlight);
}

.bg-purple-highlight {
    background-color: var(--background-bg-purple-highlight);
}

.bg-red-highlight {
    background-color: var(--background-bg-red-highlight);
}

.bg-sky-highlight {
    background-color: var(--background-bg-sky-highlight);
}

.bg-teal {
    background-color: var(--background-bg-teal);
}

.bg-teal-highlight {
    background-color: var(--background-bg-teal-highlight);
}

.bg-teal-light {
    background-color: var(--background-bg-teal-light);
}

.bg-violet-highlight {
    background-color: var(--background-bg-violet-highlight);
}

.bg-white {
    background-color: var(--background-bg-white);
}

.bg-yellow-highlight {
    background-color: var(--background-bg-yellow-highlight);
}

.bg-error-light {
    background-color: var(--background-error-light);
}

.bg-success-light {
    background-color: var(--background-success-light);
}

.bg-warning-light {
    background-color: var(--background-warning-light);
}

/* End Background Color */
/* Start Button Style */
.fn-btn {
    --hg-btn-padding-x: 24px;
    --hg-btn-padding-y: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hg-btn-padding-y) var(--hg-btn-padding-x);
    font-family: var(--hg-font-noto);
    font-size: var(--hg-font-2xs);
    font-weight: var(--hg-font-bold);
    line-height: normal;
    color: var(--text-text-btn-white);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    height: 48px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: none;
    border-radius: 8px;
    outline: none !important;
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .fn-btn {
        transition: none;
    }
}

.fn-btn-primary,
.fn-btn-primary:active {
    background-color: var(--button-primary);
}

.fn-btn-secondary,
.fn-btn-secondary:active {
    color: var(--text-text-btn-mint);
    border: solid 1px var(--border-primary);
    background-color: var(--button-secondary);
}

.fn-btn-tertiary,
.fn-btn-tertiary:active {
    color: var(--text-text-btn-mint);
    border: none;
    background-color: var(--button-secondary);
}

.fn-btn-primary:hover {
    color: var(--text-text-btn-white);
    background-color: var(--button-primary-hover);
}

.fn-btn-secondary:hover {
    color: var(--text-text-btn-mint);
    background-color: var(--button-secondary-hover);
}

.fn-btn-tertiary:hover {
    color: var(--text-text-btn-mint);
    background-color: var(--button-secondary-hover);
}

@media (hover: hover) {
    .fn-btn-primary:hover {
        color: var(--text-text-btn-white);
        background-color: var(--button-primary-hover);
    }

    .fn-btn-secondary:hover {
        color: var(--text-text-btn-mint);
        background-color: var(--button-secondary-hover);
    }

    .fn-btn-tertiary:hover {
        color: var(--text-text-btn-mint);
        background-color: var(--button-secondary-hover);
    }
}

.fn-btn-l {
    height: 56px;
    font-size: var(--hg-font-s);
}

.fn-btn-m {
    height: 48px;
    font-size: var(--hg-font-2xs);
}

.fn-btn-s {
    height: 36px;
    font-size: var(--hg-font-3xs);
    padding: 8px 24px;
}

.fn-btn:disabled {
    color: var(--text-disable) !important;
    box-shadow: none !important;
    background-color: var(--button-disable) !important;
}

.fn-btn.fn-btn-secondary:disabled {
    border-color: var(--border-disable);
}

/* End Button Style */
/* Start Modal Style */
.fn-modal-open .modal-backdrop {
    background-color: var(--filter-popup-main);
}

    .fn-modal-open .modal-backdrop.show {
        opacity: 1;
    }

.fn-modal .modal-dialog {
    max-width: 792px;
}

.fn-modal .modal-content {
    border: none;
    border-radius: 16px;
}

.fn-modal .modal-header {
    padding: 8px 16px;
    min-height: 64px;
    gap: 8px;
    border-color: var(--line-line-primary);
}

    .fn-modal .modal-header .btn-close {
        -webkit-mask-image: var(--hg-icn-close);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 24px;
        mask-image: var(--hg-icn-close);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        opacity: 1;
        background-color: var(--icon-on-light);
        flex: 0 0 24px;
        margin: 0;
    }

.fn-modal .modal-title {
    font-size: var(--hg-font-2xs);
    font-weight: var(--hg-font-bold);
}

.fn-modal .modal-body {
    padding: 24px 20px;
}

.fn-modal-body > * {
    margin-bottom: 8px;
}

.fn-modal-body > :last-child {
    margin-bottom: 0;
}


@media (min-width: 576px) {
    .fn-modal .modal-body {
        padding: 24px 32px;
    }
}

@media (min-width: 992px) {
    .fn-modal .modal-header {
        padding: 8px 20px;
    }
}

/* Modal Style // Max Width */
.fn-modal.fn-modal-mw320 .modal-dialog {
    justify-content: center;
}

.fn-modal.fn-modal-mw320 .modal-content {
    max-width: 320px;
}

.fn-modal.fn-modal-mw320 .modal-body {
    padding: 24px 20px;
}

/* Modal Style // Full Screen */
.fn-modal.fn-modal-fullscreen-lg-down {
    background-color: var(--background-bg-white);
}

.fn-modal .modal-dialog.modal-fullscreen-lg-down {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .fn-modal.fn-modal-fullscreen-lg-down {
        background-color: transparent;
    }
}

/* Modal Style // Loading */
.fn-modal-loading .modal-content {
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.fn-modal-body-loading > .rotator {
    animation: rotate 2s linear infinite;
    position: relative;
    height: 54px;
    width: 54px;
}

.fn-modal-body-loading .rotator > .path {
    stroke-dasharray: 1, 144.51314;
    stroke-dashoffset: 0;
    fill: none;
    animation: stroke 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    -moz-animation: stroke 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    -webkit-animation: stroke 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    -o-animation: stroke 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

.fn-modal-loading .fn-modal-text-loading {
    display: block;
    margin-top: 12px;
    font-size: var(--hg-font-3xs);
    color: var(--text-placeholder);
}

.fn-modal-loading-open .modal-backdrop {
    opacity: 1;
    background-color: var(--background-bg-beige40);
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes stroke {
    0% {
        stroke-dasharray: 1, 144.51314;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 96.24575124, 144.51314;
        stroke-dashoffset: 48.12287562;
    }

    100% {
        stroke-dasharray: 96.332459124, 144.51314;
        stroke-dashoffset: -143.51314;
    }
}

@keyframes stroke {
    0% {
        stroke-dasharray: 1, 144.51314;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 96.24575124, 144.51314;
        stroke-dashoffset: 48.12287562;
    }

    100% {
        stroke-dasharray: 96.332459124, 144.51314;
        stroke-dashoffset: -143.51314;
    }
}

@-moz-keyframes stroke {
    0% {
        stroke-dasharray: 1, 144.51314;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 96.24575124, 144.51314;
        stroke-dashoffset: 48.12287562;
    }

    100% {
        stroke-dasharray: 96.332459124, 144.51314;
        stroke-dashoffset: -143.51314;
    }
}

@-o-keyframes stroke {
    0% {
        stroke-dasharray: 1, 144.51314;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 96.24575124, 144.51314;
        stroke-dashoffset: 48.12287562;
    }

    100% {
        stroke-dasharray: 96.332459124, 144.51314;
        stroke-dashoffset: -143.51314;
    }
}

@keyframes color {

    100%, 0%, 24% {
        stroke: var(--mint-400);
    }

    25%, 49% {
        stroke: var(--orange-400);
    }

    50%, 74% {
        stroke: var(--mint-400);
    }

    75%, 99% {
        stroke: var(--violet-400);
    }
}

@-webkit-keyframes color {

    100%, 0%, 24% {
        stroke: var(--mint-400);
    }

    25%, 49% {
        stroke: var(--orange-400);
    }

    50%, 74% {
        stroke: var(--mint-400);
    }

    75%, 99% {
        stroke: var(--violet-400);
    }
}

@-o-keyframes color {

    100%, 0%, 24% {
        stroke: var(--mint-400);
    }

    25%, 49% {
        stroke: var(--orange-400);
    }

    50%, 74% {
        stroke: var(--mint-400);
    }

    75%, 99% {
        stroke: var(--violet-400);
    }
}

@-moz-keyframes color {

    100%, 0%, 24% {
        stroke: var(--mint-400);
    }

    25%, 49% {
        stroke: var(--orange-400);
    }

    50%, 74% {
        stroke: var(--mint-400);
    }

    75%, 99% {
        stroke: var(--violet-400);
    }
}

/* End Modal Style */

/* Start select */
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

/* End select */

/* Start UL List Check Highlight */
ul.fn-list-check-highlight {
    list-style: none;
    padding-left: 24px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

    ul.fn-list-check-highlight li {
        position: relative;
    }

        ul.fn-list-check-highlight li::before {
            content: "";
            -webkit-mask-image: var(--hg-icn-check-circle-solid);
            mask-image: var(--hg-icn-check-circle-solid);
            -webkit-mask-size: 16px;
            mask-size: 16px;
            width: 16px;
            height: 16px;
            margin-top: 2px;
            position: absolute;
            left: -24px;
            background: var(--gradient-tagcard-red-purple);
        }

        ul.fn-list-check-highlight li:not(:last-child) {
        }

ul.list__typeDash {
    list-style-type: "- ";
    padding-left: 10px;
    margin: 0;
}

/* End UL List Check Highlight */
/* Badge Matched */
.fn-badge-matched {
    border-radius: 16px;
    height: 23px;
    font-size: var(--hg-font-3xs);
    font-weight: var(--hg-font-bold);
    background: var(--gradient-tagcard-green-blue);
    padding: 2px 8px;
    display: flex;
    align-items: center;
    column-gap: 4px;
    color: var(--text-body-on-dark);
    max-width: fit-content;
}

    .fn-badge-matched::after {
        content: '';
        width: 14px;
        height: 21px;
        background: var(--hg-emo-thumbs-up) no-repeat center / contain;
    }

@media (min-width: 768px) {
    .fn-badge-matched {
        height: 31px;
        font-size: var(--hg-font-xs);
    }

        .fn-badge-matched::after {
            width: 16px;
            height: 24px;
        }
}

/* card Information Channel */
.fn-card-information {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #AFDBFA;
    background-color: #EBF6FF;
}

    .fn-card-information::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        -webkit-mask-image: var(--hg-icn-information-circle-solid);
        -webkit-mask-size: 16px;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-image: var(--hg-icn-information-circle-solid);
        mask-size: 16px;
        mask-position: center;
        mask-repeat: no-repeat;
        background-color: #2477B2;
        flex: 0 0 auto;
    }

.fn-card-information-text {
    color: #174D73;
    font-family: var(--hg-font-noto);
    font-size: var(--hg-font-4xs);
    line-height: var(--hg-lh-4xs);
}