@charset "utf-8";
@import url(./customized.ui.min.css);


.font-color_1 {
    color: var(--primary)
}

.color_font {
    color: var(--primary)
}

.background-color_1 {
    background: var(--secondary) !important
}

.background-color_2 {
    background: var(--primary) !important
}

.font-color_3 {
    color: var(--primary)
}

.background-color_3 {
    background: var(--primary)
}

.font-color_4 {
    color: white
}

.item_hotel {
    border-left: 2px solid var(--primary)
}

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

.controls:hover {
    background: var(--secondary);
    color: white
}

.brd-pdf {
    border-color: var(--secondary) !important
}

/*<!--------------------------------START CSS LIST TEMPLATE 3-------------------------------*/
.btn_1 {
    background-color: var(--secondary);
    color: white
}

.btn_1:hover {
    background-color: black
}

.login_module_prev:hover {
    color: black;
    border-color: black
}

#Login_box .shine-hover {
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    color: white
}

#Login_box .shine-hover:hover {
    background-color: var(--secondary)
}

.login_info i {
    color: var(--secondary) !important
}

.radioButton:checked+label span::after {
    color: var(--secondary);
    border: 2px solid var(--secondary)
}

.airport_filter,
.airport_filter_des {
    border-bottom: 1px dashed var(--secondary)
}

.details-btn:hover {
    background-color: var(--secondary);
    color: white
}

.btn-item button {
    background-color: var(--secondary);
    border: 1px solid var(--secondary)
}

.details-btn {
    border: 1px solid var(--secondary)
}

.flight-duration-stop:before {
    background-color: var(--secondary);
    border: 1px solid var(--secondary)
}

.details-row-middle_1 {
    border-left: 2px dashed var(--secondary)
}

.details-circle::before,
.details-circle::after {
    border: 2px solidvar(--secondary)
}

.section-input_list input[type="checkbox"]:checked+label span.checkbox::after,
.section-input_list input[type="radio"]:checked+label span.checkbox::after {
    color: var(--secondary)
}

.section-input_list input[type="checkbox"]:checked+label span.checkbox::before,
.section-input_list input[type="radio"]:checked+label span.checkbox::before {
    border-color: var(--secondary)
}

fieldset hr {
    background-color: var(--secondary)
}

.rangevalFirst,
.rangevalSecond,
.rangevalFirst_2,
.rangevalSecond_2,
.rangevalSecond_2 span,
.rangevalFirst_2 span {
    color: var(--secondary)
}

.filter-container:not(:last-child) {
    border-bottom: 1px dashed var(--secondary)
}

.sort-items li.active,
.sort-items li:hover {
    color: var(--secondary)
}

.confirm {
    border: 1px solid var(--secondary)
}

.confirm:hover {
    background-color: white;
    color: var(--secondary)
}

.minus-btn {
    background-color: #900;
    box-shadow: #d1bcdc 0 -3px 0 0 inset
}

.plus-btn {
    background-image: linear-gradient(#9aca0f, #73b828);
    box-shadow: rgba(0, 0, 0, .15) 0 3px 3px 0, #0a9346 0 -3px 0 0 inset
}

.after-btn:hover,
.before-btn:hover {
    background-color: var(--secondary);
    color: white;
    border: 1px solid var(--secondary)
}

.flight-summary-info .dash i {
    color: var(--secondary)
}

.close-research {
    border: 1px solid var(--secondary);
    color: var(--secondary)
}

.flight_type .active,
.flight_type li:hover {
    color: var(--secondary)
}

.btn-item button:hover {
    background-color: white !important;
    color: var(--secondary) !important;
    box-shadow: 0 10px 13px -10px var(--secondary)
}

.searched-item button:hover {
    background-color: var(--secondary);
    box-shadow: 0 10px 13px -10px var(--secondary)
}

.exchange-icon:hover {
    background-color: var(--secondary);
    color: white
}

.exchange-icon {
    border: 1px solid var(--secondary);
    color: var(--secondary)
}

.searched-flight {
    border-bottom: 1px dashed var(--secondary)
}

.progress-bar {
    background-color: var(--secondary) !important
}

.angle-content .three {
    color: var(--secondary)
}

.loading-container:hover .loading {
    border-color: transparent var(--secondary) transparent var(--secondary)
}

.loading {
    border-color: transparent var(--secondary) transparent var(--secondary)
}

.section-container .dash {
    color: var(--secondary)
}

.close-content .fa-times::before {
    color: var(--secondary) !important
}

.Basis_Calendar .month_day_list table td:hover,
.Basis_Calendar .selected_date {
    background-color: var(--secondary)
}

.Basis_Calendar .month_change i:hover {
    color: var(--secondary)
}

.Basis_Calendar .current_day {
    background-color: var(--secondary)5c !important
}

.Basis_Calendar .selected_day {
    background-color: var(--secondary)
}

.ui-datepicker-today .ui-state-highlight,
.ui-datepicker table thead th,
.ui-datepicker .ui-datepicker-buttonpane button,
.ui-datepicker-buttonpane .ui-datepicker-current:focus {
    background-color: var(--secondary)
}

.ui-datepicker th,
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    color: var(--secondary)
}

.ui-datepicker-buttonpane .ui-state-default:hover,
.ui-datepicker-buttonpane .ui-state-default:focus,
.ui-datepicker-buttonpane .ui-datepicker-current:hover,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solidvar(--secondary);
    background-color: var(--secondary) !important
}

.name-tour {
    color: var(--primary)
}

.item-tour:hover {
    background-color: var(--secondary);
    color: white
}

.tour-info-tlt {
    background-color: var(--secondary)
}

.tour-completion-info i {
    color: var(--secondary)
}

.side-tour i {
    color: var(--secondary)
}

.row-other-inf {
    border-right: 3px solid var(--secondary)
}

.tlt-table {
    background-color: var(--secondary)
}

.loading-img img {
    width: 100px
}

/*<!--------------------------------END CSS LIST TEMPLATE 3-------------------------------*/
/*<!--------------------------------START CSS VIEW TEMPLATE 3-------------------------------*/
.flight-duration-stop::before {
    background-color: var(--secondary);
    border: 1px solid var(--secondary)
}

.next-btn {
    background-color: var(--secondary)
}

.next-btn:hover {
    background-color: var(--secondary)
}

.prev-passengers {
    border-bottom: 2px solid var(--secondary);
    color: var(--secondary)
}

.prev-passengers svg {
    fill: var(--secondary)
}

.prev-passengers:hover {
    border-color: var(--secondary) !important;
    color: var(--secondary) !important
}

.prev-passengers:hover svg {
    fill: var(--secondary)
}

.passengers-prev-title svg {
    fill: var(--secondary)
}

.passenger-title {
    color: var(--secondary)
}

.details-item-title {
    color: var(--secondary)
}

.nav-details li:hover,
.nav-details li.active {
    color: var(--secondary)
}

.nav-details li::before {
    border-top: 3px solid var(--secondary)
}

.brief-container .head-items .title {
    background-color: var(--secondary);
    color: white
}

.buyer-type ul li.active,
.buyer-type ul li:hover {
    background-color: var(--secondary);
    color: white
}

.buyer-type ul li {
    border: 1px solid var(--secondary);
    color: var(--secondary)
}

.login-btn {
    background-color: var(--secondary)
}

.login-link {
    border: 1px solid var(--secondary);
    color: var(--secondary)
}

.login-link:hover {
    background-color: var(--secondary);
    color: white !important
}

.login-btn:hover {
    background-color: var(--secondary)
}

.login-btn:hover {
    box-shadow: 0 10px 13px -10px var(--secondary)
}

.login-title i {
    color: var(--secondary)
}

.bottom-content .action-loading {
    background-color: var(--secondary)
}

.select-passnger {
    background-color: var(--secondary)
}

.inside-title {
    border-right: 3px solid var(--secondary)
}

.duration-details {
    border-bottom: 2px dashed var(--secondary)
}

.duration-details::after,
.duration-details::before {
    background-color: var(--secondary)
}

/*<!--------------------------------END CSS VIEW-------------------------------*/
/*-------------------------------START CSS OTHER PAGES EXCEPT LIST-------------------------------*/
.banner-article-list {
    background-image: url(../images/bg-banner.jpg)
}

.banner-tour-list {
    background-image: url(../images/bg-banner.jpg)
}

.banner-about {
    background-image: url(../images/bg-banner-about.jpg)
}

.banner-contact {
    background-image: url(../images/bg-banner-contact.jpg)
}

.banner-article {
    background-image: url(../images/bg-banner-article.jpg)
}

.share-box button,
.drop-share .inner-drop-share {
    background: var(--secondary)
}

.reservation-item li.inactive:hover,
.inactive-r-btn,
.section-submit-btn button,
.tour_title::after,
.tour_title::before {
    background: var(--primary) !important
}

.top-menu {
    background: unset;
    border-bottom: 1px solid var(--secondary)
}

.tlt-main::after,
.tlt-main::before {
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), var(--secondary), rgba(0, 0, 0, 0))
}

.reservation-item li,
.section-submit-btn:hover button,
.desc-list:hover,
.inner-tab-items.active-tab,
.title-text::after,
.title-text::before {
    background: var(--secondary)
}

.tour_title {
    border-bottom: 2px solid var(--secondary)
}

.confirm_search:hover {
    color: var(--secondary);
    border: 2px solid var(--secondary)
}

.mobile-hotel {
    border-bottom: 1px solid var(--secondary)
}

.mobile-hotel-info {
    border: 1px solid var(--secondary)
}

.mobile-hotel-info .hotel-ans {
    border-right: 1px 47solid var(--secondary)
}

.confirm_search {
    border: 2px solid var(--secondary);
    color: var(--secondary)
}

.owl-dot.active {
    background: var(--secondary) !important
}

hr.style-hr {
    padding: 0;
    border: 0;
    height: 1px;
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), var(--secondary), rgba(0, 0, 0, 0));
    color: var(--zinc-800);
    text-align: center;
    width: 500px;
    margin: 20px auto 0
}

/*--------------START CSS PDF-PACKAGE -------------*/
#temp1-pdf-package .print1 {
    border: 1px solid var(--secondary);
    border: 1px solid var(--secondary)
}

#temp1-pdf-package .hotel-info tr:first-child td {
    border-left: 1px dashed var(--secondary) !important
}

#temp1-pdf-package .name-table td table tr td {
    background-color: var(--secondary)
}

#temp1-pdf-package .part31,
#temp1-pdf-package .hotel-2,
#temp1-pdf-package .hotel-3,
#temp1-pdf-package .hotel-4,
#temp1-pdf-package .hotel-5,
#temp1-pdf-package .hotel-6,
#temp1-pdf-package .hotel-7,
#temp1-pdf-package .hotel-8,
#temp1-pdf-package .hotel-9 {
    background-color: var(--secondary)
}

#temp1-pdf-package .hotel-info tr:nth-child(1) td {
    border-left: 1px dashed var(--secondary) !important
}

#temp1-pdf-package .hotel-info tr:first-child tr:nth-child(1) td {
    border-left: 1px dashed var(--secondary) !important
}

#temp1-pdf-package .info-title {
    background: var(--secondary)
}

#temp1-pdf-package .hotel-tooltip:after {
    border-top: 5px solid var(--secondary)
}

#temp1-pdf-package .page-nights {
    color: var(--secondary)
}

#temp1-pdf-package .circle-1 {
    background: var(--secondary-900)
}

#temp1-pdf-package .circle-2 {
    background: var(--secondary-900)
}

#temp1-pdf-package .circle-3 {
    background: var(--secondary-900)
}

#temp1-pdf-package .circle-5 {
    background: var(--secondary)
}

#temp1-pdf-package .tour-if::before {
    color: var(--secondary)
}

@media only screen and (max-width:621px) {
    .news-form .captcha-content {
        width: 100%
    }

    .news-form .field-captcha {
        float: left
    }

    .news-form .field-captcha img {
        width: 60px
    }
}

/*--------------END CSS PDF-PACKAGE -------------*/
/* css form */
.pov-form {
    margin-top: 9rem
}

[data-bc-schema-direction="rtl"] [data-bc-title-container] [data-bc-question-title],
[data-sys-text] {
    font-size: 14px
}

.Loading_Form {
    display: none
}

input,
button,
select,
textarea,
option {
    border: none;
    font-family: 'DanaFaNum';
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: none;
    -o-appearance: none;
    -s-appearance: none
}

#captchaContainer img {
    width: 64px;
    height: auto
}

.security-code {
    width: 200px
}

.d-inline-block>div:first-of-type {
    display: flex;
    align-items: center;
    gap: 1rem
}

.captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem
}

.captcha-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem
}

.form-btn {
    width: 100px;
    height: 36px;
    border: 2px solid var(--primary);
    padding: 5px 0;
    border-radius: 30px;
    color: var(--neutral-800);
    cursor: pointer;
    transition: all 300ms ease
}

.form-btn:hover {
    background-color: var(--primary);
    color: white
}

.pov-form [data-bc-answer-container] input[type="text"] {
    background-color: var(--neutral-100) !important;
    color: var(--zinc-400) !important;
    height: 56px !important;
    padding: 16px 12px;
    font-weight: 400 !important;
    outline: none !important;
    border-radius: 8px !important;
    border: 1px solid var(--neutral-100) !important;
    font-size: 14px !important
}

.pov-form [data-bc-answer-container] textarea {
    background-color: var(--neutral-100) !important;
    color: var(--zinc-400) !important;
    height: 72px !important;
    padding: 16px 12px;
    font-weight: 400 !important;
    outline: none !important;
    border-radius: 8px !important;
    border: 1px solid var(--neutral-100) !important;
    font-size: 14px !important
}

.pov-form [data-bc-answer-container] {
    width: 100% !important
}

.pov-form [data-bc-schema-direction="rtl"] [data-bc-part-container] {
    width: 100%
}

.last-text {
    margin-bottom: 2rem
}

.message-api {
    color: #00a703
}

@media (max-width:1024px) {
    .captcha-button {
        flex-direction: column
    }

    .form-btn {
        margin-top: 2rem;
        width: 160px
    }
}

/* css form */
main {
    overflow-x: hidden
}

.popup-container {
    display: flex;
    flex-direction: column;
    top: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    position: fixed;
    gap: 6px;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    background-color: rgba(36, 36, 36, .478);
    backdrop-filter: blur(8px)
}

.important-hidden {
    display: none !important
}

.flex {
    display: flex
}

.w-full {
    width: 100%
}

.popup-container img {
    border-radius: 10px
}

body:has(.popup-container:not(.important-hidden)) {
    overflow: hidden
}

.close-popup-content {
    cursor: pointer;
    transform: scale(1.2);
    border-radius: 50%;
    transition: all .5s ease-in-out
}

.close-popup-content:hover {
    background: #00a85a7e !important
}

.close-popup-content path {
    stroke-width: 2px
}

@media not all and (min-width:1024px) {
    .popup-container img {
        width: 85vw !important
    }
}

.loading-img {
    width: 100px !important;
    height: 100px !important;
    display: flex !important;
    justify-content: center !important;
    align-content: center !important;
    flex-direction: column
}

.loading-img img {
    width: 100px !important;
    height: fit-content !important
}