/* Form Control Default */
.fn-hg-form .form-group {
    position: relative;
}

.fn-hg-form .fn-form-content {
    position: relative;
    border-radius: 8px;
    background-color: var(--background-bg-white);
}

.fn-hg-form .form-control {
    height: 48px;
    font-size: var(--hg-font-2xs);
    font-weight: var(--hg-font-regular);
    line-height: normal;
    color: var(--text-title-on-light);
    background-color: transparent;
    position: relative;
    z-index: 1;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: inset 0 0 0 1px var(--border-text-field);
}

    .fn-hg-form .form-control:focus {
        box-shadow: inset 0 0 0 2px var(--border-active);
    }

.fn-hg-form input[type="text"]:focus,
.fn-hg-form input[type="email"]:focus {
    padding-right: 44px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fn-hg-form .form-group.errorempty .form-control {
    box-shadow: inset 0 0 0 2px var(--border-error);
}

.fn-hg-form input::placeholder,
.fn-hg-form .form-control::placeholder {
    color: var(--text-placeholder);
}

.fn-hg-form .fn-form-control-passport::placeholder {
    text-transform: none;
}

.fn-hg-form .fn-form-control-passport {
    text-transform: uppercase;
}
/* Form Label */
.fn-hg-form .form-label {
    font-size: var(--hg-font-2xs);
    font-weight: var(--hg-font-bold);
    margin-bottom: 4px;
}

    .fn-hg-form .form-label > span {
        font-size: var(--hg-font-3xs);
        font-weight: var(--hg-font-regular);
    }

.fn-hg-form .form-text-caption {
    font-size: var(--hg-font-3xs);
    color: var(--text-caption-on-light);
    padding-top: 4px;
}

/* Form Text Area */
.fn-hg-form textarea.form-control {
    resize: none;
    min-height: 110px;
    padding: 12px 16px 24px;
}

.form-textarea-count {
    font-size: var(--hg-font-4xs);
    line-height: var(--hg-lh-4xs);
    color: var(--text-counter);
    position: absolute;
    bottom: 4px;
    right: 8px;
}

/* Form Select */
.fn-hg-form .form-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: none;
    padding-right: 44px;
}

    .fn-hg-form .form-select::-ms-expand {
        display: none;
    }

    .fn-hg-form .form-select.empty {
        color: var(--text-placeholder);
    }

/* Form Layout Icon */
.form-group-icon {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.form-icon-img {
    position: relative;
    top: 12px;
    flex: 0 0 24px;
}

.form-group-icon .form-group-field {
    flex: 1 1 auto;
}

.form-group-no-icon .form-group-field {
    width: 100%;
    padding-left: 40px;
}

/* Form Input Check */
.fn-hg-form .fn-cbx, .fn-hg-form .fn-rdo {
    position: absolute;
    opacity: 0;
}

.fn-hg-form .fn-check {
    position: relative;
}

.fn-hg-form .fn-check-wrap {
    display: flex;
    gap: 16px;
}

.fn-hg-form .fn-check-vertical {
    flex-direction: column;
}

.fn-hg-form .fn-check-horizontal {
    flex-direction: row;
}

.fn-hg-form label.fn-check-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

label.fn-check-label .cbx {
    position: relative;
}

    label.fn-check-label .cbx::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-color: var(--background-bg-white);
        border: solid 1px var(--border-text-field);
    }

input[type="checkbox"] + label.fn-check-label .cbx::before {
    border-radius: 4px;
}

input[type="radio"] + label.fn-check-label .cbx::before {
    border-radius: 50%;
}

input[type="checkbox"]:checked + label.fn-check-label .cbx::before {
    border-color: var(--border-active);
    background-color: var(--system-success);
}

input[type="checkbox"]:checked + label.fn-check-label .cbx::after {
    content: '';
    -webkit-mask-image: var(--hg-icn-check-small);
    mask-image: var(--hg-icn-check-small);
    -webkit-mask-position: center;
    mask-position: center;
    width: 24px;
    height: 24px;
    background-color: var(--background-bg-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="radio"]:checked + label.fn-check-label .cbx::before {
    border-color: var(--border-active);
}

input[type="radio"]:checked + label.fn-check-label .cbx::after {
    content: "";
    border-color: var(--border-active);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--border-active);
}

.fn-hg-form label.fn-check-label .check-wrap-text {
    word-wrap: break-word;
    word-break: break-word;
}

.fn-hg-form .fn-check-btn label.fn-check-label {
    align-items: center;
    min-height: 48px;
    padding: 4px 16px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--border-text-field);
    background-color: var(--background-bg-white);
}

.fn-hg-form .fn-check-btn input[type="checkbox"]:checked + label.fn-check-label,
.fn-hg-form .fn-check-btn input[type="radio"]:checked + label.fn-check-label {
    box-shadow: inset 0 0 0 2px var(--border-active);
    background-color: var(--background-bg-mint);
}

.fn-hg-form .fn-check-btn.fn-check-horizontal {
    gap: 8px;
}

.fn-hg-form .fn-check-btn.fn-check-vertical .fn-check {
    width: 100%;
}

.fn-hg-form .fn-check-btn.fn-check-horizontal .fn-check {
    width: 50%;
}

.fn-hg-form .fn-check-bar {
    gap: 0;
}

    .fn-hg-form .fn-check-bar .fn-check {
        width: 50%;
    }

    .fn-hg-form .fn-check-bar label.fn-check-label {
        align-items: center;
        min-height: 48px;
        height: 100%;
        padding: 4px 8px;
        border: solid 1px var(--border-text-field);
        background-color: var(--background-bg-white);
    }

    .fn-hg-form .fn-check-bar .fn-check:first-child label.fn-check-label {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: 0;
    }

    .fn-hg-form .fn-check-bar .fn-check:last-child label.fn-check-label {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-left: 0;
    }

    .fn-hg-form .fn-check-bar .fn-check:first-child input[type="radio"]:checked + label.fn-check-label {
        border-right: solid 1px var(--border-active);
    }

    .fn-hg-form .fn-check-bar .fn-check:last-child input[type="radio"]:checked + label.fn-check-label {
        border-left: solid 1px var(--border-active);
    }

    .fn-hg-form .fn-check-bar input[type="radio"]:checked + label.fn-check-label {
        font-weight: var(--hg-font-bold);
        background-color: var(--background-bg-mint);
        border-color: var(--border-active);
    }

    .fn-hg-form .fn-check-bar .fn-check label.fn-check-label .check-wrap-text {
        padding-left: 0;
        text-align: center;
        width: 100%;
    }

/* Form Check Email*/
.fn-hg-form .dropdownemail {
    margin: 6px 0 0;
    border-radius: 8px;
    border: 1px solid var(--line-line-primary);
    list-style: none;
    padding: 0;
    background-color: var(--background-bg-white);
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 2;
}

    .fn-hg-form .dropdownemail > li {
        padding: 12px 16px;
        cursor: pointer;
    }

        .fn-hg-form .dropdownemail > li:hover,
        .fn-hg-form .dropdownemail > li[aria-selected=true] {
            background-color: #edf6f2;
        }

    .fn-hg-form .dropdownemail + label {
        display: none;
    }

/* Form DatePicker */
.fn-hg-form .form-group-datepicker .form-control {
    padding-right: 44px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.ui-datepicker.ui-widget.ui-widget-content {
    font-family: var(--hg-font-sarabun);
    padding: 12px;
    border-radius: 16px;
    border-color: var(--border-text-field);
}

.ui-datepicker .ui-widget-header {
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    font-family: var(--hg-font-sarabun);
    font-weight: var(--hg-font-bold);
    line-height: normal;
    margin: 0;
    height: 39px;
    padding: 8px;
    width: calc(50% - 4px);
    border: none;
    border-radius: 8px;
    background-color: #f7f7f7;
    background-image: var(--hg-icn-chevron-down);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center right 8px;
}

    .ui-datepicker select.ui-datepicker-month:focus-visible,
    .ui-datepicker select.ui-datepicker-year:focus-visible {
        outline: none;
    }

.ui-datepicker table {
    margin-bottom: 0;
}

.ui-datepicker th {
    font-weight: var(--hg-font-regular);
}

.ui-datepicker .ui-state-default {
    border: none;
    color: var(--text-body-on-light);
    background: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 32px;
    height: 24px;
    line-height: 23px;
    border-radius: 8px;
}

.ui-datepicker .ui-state-highlight {
    color: var(--text-body-on-light);
    background-color: var(--background-bg-gray-light);
}

.ui-datepicker .ui-state-active {
    color: var(--text-body-on-dark);
    background-color: var(--button-primary);
}

/* Form Select2 */
.fn-hg-form .form-select2 {
    display: none;
    visibility: hidden;
}

.fn-hg-form .form-group-select2 {
    display: block;
    min-height: 48px;
}

    .fn-hg-form .form-group-select2 .select2-container {
        display: block;
        width: 100% !important;
    }

    .fn-hg-form .form-group-select2 .select2-selection {
        border: none;
        padding: 0;
        min-height: auto;
        background-color: transparent;
    }

    .fn-hg-form .form-group-select2 .select2 .select2-selection::after {
        content: '';
        -webkit-mask-image: var(--hg-icn-chevron-down);
        mask-image: var(--hg-icn-chevron-down);
        -webkit-mask-size: 24px;
        mask-size: 24px;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 12px;
        right: 16px;
        background-color: var(--icon-on-light);
        transition: transform 0.25s ease-in-out;
    }

    .fn-hg-form .form-group-select2 .select2.select2-container--open .select2-selection::after {
        transform: rotate(-180deg);
    }

    .fn-hg-form .form-group-select2 .select2 .select2-selection ul {
        display: block;
        margin-bottom: 0;
    }

    .fn-hg-form .form-group-select2 .select2 .select2-search {
        float: none;
    }

    .fn-hg-form .form-group-select2 .select2 .select2-search__field {
        margin: 0;
        padding: 8px 40px 8px 16px;
        font-size: var(--hg-font-2xs);
        font-weight: var(--hg-font-regular);
        line-height: normal;
        width: 100% !important;
        height: 48px;
        background-image: none;
        background-color: var(--background-bg-white);
        border: none;
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px var(--border-text-field);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .fn-hg-form .form-group-select2.errorempty .select2 .select2-search__field {
        box-shadow: inset 0 0 0 2px var(--border-error);
    }

    .fn-hg-form .form-group-select2 .select2.select2-container--open .select2-search__field {
        box-shadow: inset 0 0 0 2px var(--border-active);
    }

    .fn-hg-form .form-group-select2 .select2 .select2-search__field::placeholder {
        color: var(--text-title-on-light);
    }

    .fn-hg-form .form-group-select2 .select2-container--empty {
        display: none;
    }

    .fn-hg-form .form-group-select2 .select2-selection__rendered {
        padding: 0;
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fn-hg-form .form-group-select2 .select2-container--custom-selection .select2-selection__rendered {
        margin-top: 8px;
    }

    .fn-hg-form .form-group-select2 .select2-selection__choice {
        display: flex;
        align-items: center;
        position: relative;
        font-size: var(--hg-font-4xs);
        font-weight: var(--hg-font-bold);
        color: var(--text-highlight-mint);
        background-color: var(--background-bg-mint);
        border-color: var(--border-card-quote);
        border-radius: 4px;
        min-height: 24px;
        padding: 0 24px 0 8px;
        margin: 0;
    }

        .fn-hg-form .form-group-select2 .select2-selection__choice .select2-selection__choice__remove {
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: 18px;
            -webkit-mask-image: var(--hg-icn-close-small);
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: 18px;
            mask-image: var(--hg-icn-close-small);
            width: 18px;
            height: 18px;
            background: var(--icon-primary);
            margin: 0;
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
        }

    .fn-hg-form .form-group-select2 .form-select2.empty + .select2 .select2-search__field::placeholder {
        color: var(--text-placeholder);
    }

.select2-dropdown {
    background-color: var(--background-bg-white);
    border: 1px solid var(--border-text-field) !important;
    border-radius: 8px !important;
    margin: 4px 0;
    overflow: hidden;
}

    .select2-dropdown .select2-results__group {
        padding: 12px 16px;
    }

    .select2-dropdown .select2-results__option {
        padding: 12px 20px;
    }

        .select2-dropdown .select2-results__option .select2-results__option {
            display: flex;
            gap: 4px;
            padding-left: 24px;
        }

        .select2-dropdown .select2-results__option.active_country_selected {
            background-color: transparent;
        }

            .select2-dropdown .select2-results__option.active_country_selected::after {
                content: '';
                display: inline-block;
                -webkit-mask-image: var(--hg-icn-check-circle-solid);
                mask-image: var(--hg-icn-check-circle-solid);
                -webkit-mask-size: 24px;
                mask-size: 24px;
                width: 24px;
                height: 24px;
                background-color: var(--icon-primary);
                margin-left: auto;
            }

        .select2-dropdown .select2-results__option.select2-results__option--highlighted {
            color: var(--text-body-on-light);
            background-color: var(--button-secondary-hover);
        }

.select2-results__options::-webkit-scrollbar {
    width: 9px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: var(--mouse-scroll-primary);
}

.fn-hg-form .form-group-select2.fn-country-annual .select2 .select2-selection::after {
    background-color: var(--icon-secondary-light);
}

.fn-hg-form .form-group-select2.fn-country-annual .select2-selection__choice {
    padding: 0 8px;
}

    .fn-hg-form .form-group-select2.fn-country-annual .select2-selection__choice .select2-selection__choice__remove {
        display: none !important
    }


/* Mask Icon */
.fn-hg-form .fn-form-mask {
    mask-size: 24px;
    -webkit-mask-size: 24px;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 12px;
    right: 16px;
    background-color: var(--icon-on-light);
    transition: transform 0.25s ease-in-out;
}

.fn-hg-form .form-select + .fn-form-mask {
    -webkit-mask-image: var(--hg-icn-chevron-down);
    mask-image: var(--hg-icn-chevron-down);
}

.fn-hg-form .form-group-select.active .fn-form-mask {
    transform: rotate(-180deg);
}

.fn-hg-form .form-control-datepicker ~ .fn-form-mask {
    -webkit-mask-image: var(--hg-icn-calendar);
    mask-image: var(--hg-icn-calendar);
}


/* Form Data Clear Input */
span[data-clear-input] {
    display: none;
    -webkit-mask-image: var(--hg-icn-remove-circle-solid);
    mask-image: var(--hg-icn-remove-circle-solid);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    width: 24px;
    height: 24px;
    background-color: var(--icon-secondary-light);
    z-index: 1;
    position: absolute;
    top: 12px;
    right: 16px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

    span[data-clear-input]:hover {
        background-color: var(--icon-secondary);
    }
/* Form Text Error */
.fn-hg-form .form-text-error {
    display: none;
    font-size: var(--hg-font-3xs);
    color: var(--border-error);
    padding-top: 4px;
}

.fn-hg-form .errorempty + .form-text-error,
.fn-hg-form .errorempty .form-text-error {
    display: block;
}

/* Form Disabled */
.fn-hg-form :disabled,
.fn-hg-form .disabled {
    color: var(--text-disable) !important;
    background-color: var(--background-bg-disable);
}

    .fn-hg-form :disabled::placeholder,
    .fn-hg-form .disabled::placeholder {
        color: var(--text-disable) !important;
    }

    .fn-hg-form :disabled + .fn-form-mask,
    .fn-hg-form .disabled + .fn-form-mask {
        z-index: 1;
        background-color: var(--icon-secondary-light);
    }

.fn-hg-form input[type="radio"]:disabled + label.fn-check-label,
.fn-hg-form input[type="checkbox"]:disabled + label.fn-check-label,
.fn-hg-form input[type="radio"]:checked:disabled + label.fn-check-label,
.fn-hg-form input[type="checkbox"]:checked:disabled + label.fn-check-label {
    color: var(--text-disable) !important;
}

    .fn-hg-form input[type="radio"]:disabled + label.fn-check-label .cbx::before,
    .fn-hg-form input[type="checkbox"]:disabled + label.fn-check-label .cbx::before {
        border-color: var(--border-disable);
        background-color: var(--background-bg-disable);
    }

    .fn-hg-form input[type="radio"]:checked:disabled + label.fn-check-label .cbx::after,
    .fn-hg-form input[type="checkbox"]:checked:disabled + label.fn-check-label .cbx::after {
        background-color: var(--border-disable);
    }

.fn-hg-form .fn-check-btn input[type="radio"]:disabled + label.fn-check-label,
.fn-hg-form .fn-check-btn input[type="checkbox"]:disabled + label.fn-check-label,
.fn-hg-form .fn-check-btn input[type="radio"]:checked:disabled + label.fn-check-label,
.fn-hg-form .fn-check-btn input[type="checkbox"]:checked:disabled + label.fn-check-label {
    color: var(--text-disable) !important;
    background-color: var(--background-bg-disable) !important;
}

.fn-hg-form .fn-check-btn input[type="radio"]:checked:disabled + label.fn-check-label,
.fn-hg-form .fn-check-btn input[type="checkbox"]:checked:disabled + label.fn-check-label {
    box-shadow: inset 0 0 0 2px var(--border-disable);
}

.fn-hg-form .fn-check-btn input[type="radio"]:disabled + label.fn-check-label .cbx::before,
.fn-hg-form .fn-check-btn input[type="checkbox"]:disabled + label.fn-check-label .cbx::before {
    border-color: var(--border-disable);
    background-color: var(--background-bg-disable);
}

.fn-hg-form .fn-check-btn input[type="radio"]:checked:disabled + label.fn-check-label .cbx::after,
.fn-hg-form .fn-check-btn input[type="checkbox"]:checked:disabled + label.fn-check-label .cbx::after {
    background-color: var(--border-disable);
}

.fn-hg-form .fn-check-bar input[type="radio"]:disabled + label.fn-check-label,
.fn-hg-form .fn-check-bar input[type="radio"]:checked:disabled + label.fn-check-label {
    color: var(--text-disable) !important;
    background-color: var(--background-bg-disable) !important;
}

.fn-hg-form .fn-check-bar input[type="radio"]:checked:disabled + label.fn-check-label {
    border-color: var(--border-disable) !important;
}

.fn-hg-form .form-group-select2 .select2-container.select2-container--disabled .select2-selection {
    background-color: transparent;
}

.fn-hg-form .form-group-select2 .select2-container.select2-container--disabled .select2-search__field {
    background-color: var(--background-bg-disable);
    box-shadow: inset 0 0 0 1px var(--border-disable);
}

.fn-hg-form .form-group-select2 .select2-container--disabled .select2-selection__choice .select2-selection__choice__remove {
    display: block;
}

.form-group-select .row {
    align-items: start;
}

.box-rdo label {
    flex-direction: column;
    gap: 4px;
}

/*Form for select2 Single*/
.form-group-select2 .select2 .select2-selection--single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    background-color: var(--background-bg-white);
    box-shadow: inset 0 0 0 1px var(--border-text-field);
    transition: box-shadow 0.15s ease-in-out;
}

    .form-group-select2 .select2 .select2-selection--single .select2-selection__placeholder {
        color: var(--text-placeholder);
    }

.form-group-select2 .select2-selection__arrow {
    position: unset !important;
    display: block;
    mask-size: 24px;
    -webkit-mask-image: var(--hg-icn-chevron-down);
    mask-image: var(--hg-icn-chevron-down);
    -webkit-mask-size: 24px;
    width: 24px !important;
    height: 24px !important;
    background-color: var(--icon-on-light);
    transition: transform 0.25s ease-in-out;
}

    .form-group-select2 .select2-selection__arrow > b {
        position: unset !important;
    }

.form-group-select2 .select2 .select2-selection--single:focus,
.form-group-select2 .select2 .select2-selection--single:focus-visible {
    outline: none !important;
}

.form-group-select2 .select2.select2-container--open .select2-selection--single {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--border-active);
}

.form-group-select2 .select2.select2-container--open .select2-selection__arrow {
    transform: rotate(-180deg);
}

.select2-dropdown {
    margin: 0 !important;
}

.select2-container--open .select2-dropdown--below {
    top: 4px;
}

.select2-container--open .select2-dropdown--above {
    top: -4px;
}

.select2-dropdown .select2-search--dropdown {
    padding: 12px 8px 8px;
}

    .select2-dropdown .select2-search--dropdown .select2-search__field {
        border-radius: 8px;
        padding: 12px 44px 16px 16px;
        outline: none;
        background: var(--hg-icn-search) no-repeat right 16px center / 24px;
    }

.select2-results__option.select2-results__option--group {
    padding: 0 !important;
}

.select2-dropdown .select2-results__option.select2-results__option--selected {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    background-color: transparent;
}

    .select2-dropdown .select2-results__option.select2-results__option--selected::after {
        content: '';
        display: inline-block;
        -webkit-mask-image: var(--hg-icn-check-circle-solid);
        mask-image: var(--hg-icn-check-circle-solid);
        -webkit-mask-size: 24px;
        mask-size: 24px;
        width: 24px;
        height: 24px;
        background-color: var(--icon-primary);
        margin-left: auto;
    }

.form-group.errorempty .select2-selection--single {
    box-shadow: inset 0 0 0 2px var(--border-error);
}
/*Form for select2 Single End*/